feat: Open text assets in code editor

apps/builder/app/builder/features/assets/assets.tsx

@@ -7,13 +7,17 @@ import {
 import { BrushCleaningIcon, NewFolderIcon } from "@webstudio-is/icons";
 import { useRef, useState } from "react";
 import { useStore } from "@nanostores/react";
+import { isTextFileAsset } from "@webstudio-is/sdk";
 import { AssetManager } from "~/builder/shared/asset-manager";
 import { AssetUpload, type AssetUploadHandle } from "~/builder/shared/assets";
 import { openDeleteUnusedAssetsDialog } from "~/builder/shared/asset-manager/delete-unused-assets";
 import { CreateAssetFolderDialog } from "~/builder/shared/asset-manager/asset-folder-dialogs";
 import { $authPermit } from "~/shared/nano-states";
+import { $assets } from "~/shared/sync/data-stores";
 import type { Publish } from "~/shared/pubsub";
 import { useImageAssetCanvasDrag } from "./use-image-asset-canvas-drag";
+import { TextFileEditor } from "~/builder/features/text-file-editor/text-file-editor";
+import { getAssetUrl } from "~/builder/shared/assets/asset-utils";
 
 export const AssetsPanel = ({
   publish,
@@ -23,8 +27,24 @@ export const AssetsPanel = ({
 }) => {
   const [folderId, setFolderId] = useState<string>();
   const [createFolderOpen, setCreateFolderOpen] = useState(false);
+  const [openedTextAssetId, setOpenedTextAssetId] = useState<string>();
   const uploadRef = useRef<AssetUploadHandle>(null);
   const authPermit = useStore($authPermit);
+  const openAsset = (assetId: string) => {
+    const asset = $assets.get().get(assetId);
+    if (asset === undefined) {
+      return;
+    }
+    if (isTextFileAsset(asset)) {
+      setOpenedTextAssetId(assetId);
+      return;
+    }
+    window.open(
+      getAssetUrl(asset, window.location.origin),
+      "_blank",
+      "noopener,noreferrer"
+    );
+  };
   useImageAssetCanvasDrag(publish);
   return (
     <>
@@ -55,6 +75,7 @@ export const AssetsPanel = ({
       <AssetManager
         folderId={folderId}
         onFolderChange={setFolderId}
+        onOpen={openAsset}
         canManageFolders={authPermit !== "view"}
         panelActions={{
           ...(authPermit === "view"
@@ -71,6 +92,17 @@ export const AssetsPanel = ({
         onOpenChange={setCreateFolderOpen}
         currentFolderId={folderId}
       />
+      {openedTextAssetId !== undefined && (
+        <TextFileEditor
+          key={openedTextAssetId}
+          assetId={openedTextAssetId}
+          onOpenChange={(open) => {
+            if (open === false) {
+              setOpenedTextAssetId(undefined);
+            }
+          }}
+        />
+      )}
     </>
   );
 };

apps/builder/app/builder/features/help/remote-dialog.tsx

@@ -39,6 +39,7 @@ export const RemoteDialog = () => {
          * to make the close button last in the tab order
          */}
         <DialogTitle
+          maximizable
           suffix={
             <DialogTitleActions>
               <IconButton

apps/builder/app/builder/features/settings-panel/controls/code.tsx

@@ -183,6 +183,7 @@ export const CodeControl = ({
           lang={lang}
           title={
             <DialogTitle
+              maximizable
               suffix={
                 <DialogTitleActions>
                   <DialogMaximize />

apps/builder/app/builder/features/settings-panel/controls/select-asset.tsx

@@ -2,11 +2,10 @@ import { useMemo } from "react";
 import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 import { Button, Flex, Text, FloatingPanel } from "@webstudio-is/design-system";
-import type { Prop } from "@webstudio-is/sdk";
 import { acceptToMimeCategories } from "@webstudio-is/sdk";
 import { $assets } from "~/shared/sync/data-stores";
 import { AssetManager } from "~/builder/shared/asset-manager";
-import { type ControlProps } from "../shared";
+import { type PropValue } from "../shared";
 import { formatAssetName } from "@webstudio-is/project-build/runtime";
 import { AssetUpload } from "~/builder/shared/assets";
 
@@ -19,12 +18,10 @@ const isImageAccept = (accept?: string) => {
   );
 };
 
-type AssetControlProps = ControlProps<unknown>;
-
 type Props = {
   accept?: string;
-  prop?: Extract<Prop, { type: "asset" }>;
-  onChange: AssetControlProps["onChange"];
+  prop?: Extract<PropValue, { type: "asset" }>;
+  onChange: (value: Extract<PropValue, { type: "asset" }>) => void;
 };
 
 export const SelectAsset = ({ prop, onChange, accept }: Props) => {

apps/builder/app/builder/features/settings-panel/controls/text-content.tsx

@@ -127,6 +127,7 @@ export const TextContent = ({
         <CodeEditor
           title={
             <DialogTitle
+              maximizable
               suffix={
                 <DialogTitleActions>
                   <DialogMaximize />

apps/builder/app/builder/features/settings-panel/controls/url.tsx

@@ -44,20 +44,31 @@ import {
   $selectedInstanceScope,
   useBindingState,
   humanizeAttribute,
+  type PropValue,
 } from "../shared";
 import { SelectAsset } from "./select-asset";
 import { createRootFolder } from "@webstudio-is/project-build";
 import { PropertyLabel } from "../property-label";
 
 type UrlControlProps = ControlProps<"url">;
 
+export type UrlInputValue = Extract<
+  PropValue,
+  { type: "string" | "page" | "asset" }
+>;
+
+type UrlInputProp =
+  | UrlInputValue
+  | { type: "expression"; value: string }
+  | undefined;
+
 type BaseControlProps = {
   id: string;
   instanceId: string;
   readOnly: boolean;
-  prop: UrlControlProps["prop"];
+  prop: UrlInputProp;
   value: string;
-  onChange: UrlControlProps["onChange"];
+  onChange: (value: UrlInputValue) => void;
 };
 
 const Row = ({ children }: { children: ReactNode }) => (
@@ -442,10 +453,7 @@ const modes = {
 
 type Mode = keyof typeof modes;
 
-const propToMode = (
-  prop: undefined | UrlControlProps["prop"],
-  value: string
-): Mode => {
+const propToMode = (prop: UrlInputProp, value: string): Mode => {
   if (prop === undefined) {
     return "url";
   }
@@ -469,34 +477,40 @@ const propToMode = (
   return "url";
 };
 
-export const UrlControl = ({
+export const UrlInput = ({
   instanceId,
-  meta,
   prop,
-  propName,
-  computedValue,
+  value,
+  readOnly = false,
   onChange,
-}: UrlControlProps) => {
-  const value = String(computedValue ?? "");
+  suffix,
+}: {
+  instanceId: string;
+  prop: UrlInputProp;
+  value: string;
+  readOnly?: boolean;
+  onChange: (value: UrlInputValue) => void;
+  suffix?: ReactNode;
+}) => {
   const { value: mode, set: setMode } = useDraftValue<Mode>(
     propToMode(prop, value),
     () => {}
   );
-
   const id = useId();
-
   const BaseControl = modes[mode].control;
-
-  const label = humanizeAttribute(meta.label || propName);
-  const { scope, aliases } = useStore($selectedInstanceScope);
-  const expression =
-    prop?.type === "expression" ? prop.value : JSON.stringify(computedValue);
-  const { overwritable, variant } = useBindingState(
-    prop?.type === "expression" ? prop.value : undefined
+  const control = (
+    <BaseControl
+      id={id}
+      instanceId={instanceId}
+      readOnly={readOnly}
+      prop={prop}
+      value={value}
+      onChange={onChange}
+    />
   );
 
   return (
-    <VerticalLayout label={<PropertyLabel name={propName} />}>
+    <>
       <Flex
         css={{
           py: theme.spacing[2],
@@ -508,7 +522,7 @@ export const UrlControl = ({
       >
         <ToggleGroup
           type="single"
-          disabled={overwritable === false}
+          disabled={readOnly}
           value={mode}
           onValueChange={(value) => {
             // too tricky to prove to TS that value is a Mode
@@ -523,30 +537,66 @@ export const UrlControl = ({
           ))}
         </ToggleGroup>
       </Flex>
+      {suffix === undefined ? (
+        control
+      ) : (
+        <BindingControl>
+          {control}
+          {suffix}
+        </BindingControl>
+      )}
+    </>
+  );
+};
 
-      <BindingControl>
-        <BaseControl
-          id={id}
-          instanceId={instanceId}
-          readOnly={overwritable === false}
-          prop={prop}
-          value={value}
-          onChange={onChange}
-        />
-        <BindingPopover
-          scope={scope}
-          aliases={aliases}
-          validate={(value) => validatePrimitiveValue(value, label)}
-          variant={variant}
-          value={expression}
-          onChange={(newExpression) =>
-            onChange({ type: "expression", value: newExpression })
-          }
-          onRemove={(evaluatedValue) =>
-            onChange({ type: "string", value: String(evaluatedValue) })
-          }
-        />
-      </BindingControl>
+export const UrlControl = ({
+  instanceId,
+  meta,
+  prop,
+  propName,
+  computedValue,
+  onChange,
+}: UrlControlProps) => {
+  const value = String(computedValue ?? "");
+  const label = humanizeAttribute(meta.label || propName);
+  const { scope, aliases } = useStore($selectedInstanceScope);
+  const expression =
+    prop?.type === "expression" ? prop.value : JSON.stringify(computedValue);
+  const { overwritable, variant } = useBindingState(
+    prop?.type === "expression" ? prop.value : undefined
+  );
+
+  return (
+    <VerticalLayout label={<PropertyLabel name={propName} />}>
+      <UrlInput
+        instanceId={instanceId}
+        prop={
+          prop?.type === "string" ||
+          prop?.type === "page" ||
+          prop?.type === "asset" ||
+          prop?.type === "expression"
+            ? prop
+            : undefined
+        }
+        value={value}
+        readOnly={overwritable === false}
+        onChange={onChange}
+        suffix={
+          <BindingPopover
+            scope={scope}
+            aliases={aliases}
+            validate={(value) => validatePrimitiveValue(value, label)}
+            variant={variant}
+            value={expression}
+            onChange={(newExpression) =>
+              onChange({ type: "expression", value: newExpression })
+            }
+            onRemove={(evaluatedValue) =>
+              onChange({ type: "string", value: String(evaluatedValue) })
+            }
+          />
+        }
+      />
     </VerticalLayout>
   );
 };

apps/builder/app/builder/features/settings-panel/variable-popover.tsx

@@ -952,6 +952,7 @@ const VariablePopoverContent = ({
       </Grid>
 
       <DialogTitle
+        maximizable
         suffix={
           <DialogTitleActions>
             {(variableType === "resource" ||
@@ -1026,6 +1027,7 @@ export const VariablePopoverTrigger = ({
 
   return (
     <FloatingPanel
+      maximizable
       placement="center"
       width={740}
       height={480}

apps/builder/app/builder/features/text-file-editor/markdown-preview.test.tsx

@@ -0,0 +1,51 @@
+import { expect, test } from "vitest";
+import type { Asset } from "@webstudio-is/sdk";
+import { __testing__ } from "./markdown-preview";
+import { renderMarkdown } from "./text-file-utils";
+
+const { resolveAssetReferences } = __testing__;
+
+const image: Asset = {
+  id: "image-id",
+  projectId: "project-id",
+  type: "image",
+  name: "image.png",
+  format: "png",
+  size: 1,
+  meta: { width: 1, height: 1 },
+  createdAt: "2026-01-01T00:00:00.000Z",
+};
+
+test("resolves asset IDs in Markdown images and links", () => {
+  const html = resolveAssetReferences({
+    html: renderMarkdown(
+      "![Local image](image-id)\n\n[Download image](image-id)\n\n![Remote image](https://example.com/image.png)"
+    ),
+    assetContainers: [{ status: "uploaded", asset: image }],
+    origin: "https://builder.example",
+  });
+
+  expect(html).toContain(
+    'src="https://builder.example/cgi/image/image.png?format=raw"'
+  );
+  expect(html).toContain(
+    'href="https://builder.example/cgi/image/image.png?format=raw"'
+  );
+  expect(html).toContain('src="https://example.com/image.png"');
+});
+
+test("uses an object URL while an inserted image is uploading", () => {
+  const html = resolveAssetReferences({
+    html: renderMarkdown("![Uploading](image-id)"),
+    assetContainers: [
+      {
+        status: "uploading",
+        asset: image,
+        objectURL: "blob:https://builder.example/upload",
+      },
+    ],
+    origin: "https://builder.example",
+  });
+
+  expect(html).toContain('src="blob:https://builder.example/upload"');
+});