@drghaliasri/butex 5.6.1 → 6.0.0

package/dist/react-document2.mjs

@@ -3,8 +3,9 @@ import { useEffect, useId, useRef, useState } from "react";
 
 // src/document2/ids.ts
 var nextId = 1;
+var instanceId = `${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
 function document2Id(prefix) {
-  const id = `${prefix}_${String(nextId)}`;
+  const id = `${prefix}_${instanceId}_${String(nextId)}`;
   nextId += 1;
   return id;
 }
@@ -1169,6 +1170,19 @@ function asBlockJson(value) {
   }
   return value;
 }
+function blockIdFromJson(json, state) {
+  const imported = typeof json.id === "string" ? json.id.trim() : "";
+  if (imported.length > 0 && !state.used.has(imported)) {
+    state.used.add(imported);
+    return imported;
+  }
+  let generated = document2Id("block");
+  while (state.used.has(generated)) {
+    generated = document2Id("block");
+  }
+  state.used.add(generated);
+  return generated;
+}
 function pushDiagnostic(diagnostics, options, path, message) {
   if (options.strict) {
     throw new Error(message);
@@ -1350,40 +1364,44 @@ function pushFormattedTextTokens(tokens, text, sourceStart, formats) {
 function closingForList(command) {
   return command === "\\begin{itemize}" ? "\\end{itemize}" : "\\end{enumerate}";
 }
-function parseTextBlock(json, options, path, diagnostics) {
+function parseTextBlock(json, options, path, diagnostics, blockIds) {
   const value = requireString(json.value, `${json.command} requires string value`);
   return {
-    id: document2Id("block"),
+    id: blockIdFromJson(json, blockIds),
     kind: "textBlock",
     command: json.command,
     field: createInlineField2(value, json.math_objects ?? [], options, `${path}.value`, diagnostics, json.command === "\\paragraph" ? json.formats ?? [] : []),
     ...json.centered === true ? { centered: true } : {}
   };
 }
-function parseListItem(json, options, path, diagnostics) {
+function parseListItem(json, options, path, diagnostics, blockIds) {
   const value = requireString(json.value, "Document list item requires string value");
   const blocksJson = Array.isArray(json.blocks) ? json.blocks : [];
   return {
     id: document2Id("item"),
     field: createInlineField2(value, json.math_objects ?? [], options, `${path}.value`, diagnostics, json.formats ?? []),
-    blocks: blocksJson.map((block, index) => parseBlock(asBlockJson(block), options, `${path}.blocks[${String(index)}]`, diagnostics))
+    blocks: blocksJson.map(
+      (block, index) => parseBlock(asBlockJson(block), options, `${path}.blocks[${String(index)}]`, diagnostics, blockIds)
+    )
   };
 }
-function parseListBlock(json, options, path, diagnostics) {
+function parseListBlock(json, options, path, diagnostics, blockIds) {
   if (!Array.isArray(json.items)) {
     throw new Error(`${json.command} requires items array`);
   }
   const command = json.command;
   const closing = closingForList(command);
   return {
-    id: document2Id("block"),
+    id: blockIdFromJson(json, blockIds),
     kind: "list",
     command,
     closing,
-    items: json.items.map((item, index) => parseListItem(item, options, `${path}.items[${String(index)}]`, diagnostics))
+    items: json.items.map(
+      (item, index) => parseListItem(item, options, `${path}.items[${String(index)}]`, diagnostics, blockIds)
+    )
   };
 }
-function parseTableBlock(json, options, path, diagnostics) {
+function parseTableBlock(json, options, path, diagnostics, blockIds) {
   if (!Array.isArray(json.rows)) {
     throw new Error("\\begin{tabular} requires rows array");
   }
@@ -1406,7 +1424,7 @@ function parseTableBlock(json, options, path, diagnostics) {
     pushDiagnostic(diagnostics, options, path, `math_objects count mismatch: detected ${String(mathObjectIndex)}, got ${String(mathObjects.length)}`);
   }
   return {
-    id: document2Id("block"),
+    id: blockIdFromJson(json, blockIds),
     kind: "table",
     command: "\\begin{tabular}",
     closing: "\\end{tabular}",
@@ -1415,11 +1433,11 @@ function parseTableBlock(json, options, path, diagnostics) {
     ...parseFloatMetaFromJson(json)
   };
 }
-function parseImageBlock(json) {
+function parseImageBlock(json, blockIds) {
   const assetId = typeof json.asset_id === "string" && json.asset_id.length > 0 ? json.asset_id : void 0;
   const value = assetId !== void 0 ? typeof json.value === "string" ? json.value : "" : requireString(json.value, "\\includegraphics requires string value");
   return {
-    id: document2Id("block"),
+    id: blockIdFromJson(json, blockIds),
     kind: "image",
     command: "\\includegraphics",
     value,
@@ -1428,43 +1446,43 @@ function parseImageBlock(json) {
     ...parseFloatMetaFromJson(json)
   };
 }
-function parseRawBlock(json) {
+function parseRawBlock(json, blockIds) {
   return {
-    id: document2Id("block"),
+    id: blockIdFromJson(json, blockIds),
     kind: "raw",
     command: "\\raw",
     value: typeof json.value === "string" ? json.value : ""
   };
 }
-function parseBibliographyBlock() {
+function parseBibliographyBlock(json, blockIds) {
   return {
-    id: document2Id("block"),
+    id: blockIdFromJson(json, blockIds),
     kind: "bibliography",
     command: "\\begin{thebibliography}",
     closing: "\\end{thebibliography}"
   };
 }
-function parseBlock(json, options, path, diagnostics) {
+function parseBlock(json, options, path, diagnostics, blockIds) {
   if (TEXT_COMMANDS.has(json.command)) {
-    return parseTextBlock(json, options, path, diagnostics);
+    return parseTextBlock(json, options, path, diagnostics, blockIds);
   }
   if (LIST_COMMANDS.has(json.command)) {
-    return parseListBlock(json, options, path, diagnostics);
+    return parseListBlock(json, options, path, diagnostics, blockIds);
   }
   if (json.command === "\\begin{tabular}") {
-    return parseTableBlock(json, options, path, diagnostics);
+    return parseTableBlock(json, options, path, diagnostics, blockIds);
   }
   if (json.command === "\\includegraphics") {
-    return parseImageBlock(json);
+    return parseImageBlock(json, blockIds);
   }
   if (json.command === "\\begin{thebibliography}" || json.command === "\\bibliography") {
-    return parseBibliographyBlock();
+    return parseBibliographyBlock(json, blockIds);
   }
   if (json.command === "\\raw") {
-    return parseRawBlock(json);
+    return parseRawBlock(json, blockIds);
   }
   return {
-    id: document2Id("block"),
+    id: blockIdFromJson(json, blockIds),
     kind: "raw",
     command: "\\raw",
     value: typeof json.value === "string" ? json.value : json.command
@@ -1478,11 +1496,14 @@ function fromDocumentJson2(json, options = {}) {
     throw new Error("DocumentObject requires blocks array");
   }
   const diagnostics = [];
+  const blockIds = { used: /* @__PURE__ */ new Set() };
   return {
     nodeType: "DocumentObject",
     meta: normalizeDocument2Meta(json.meta),
     references: parseReferences(json.references),
-    blocks: json.blocks.map((block, index) => parseBlock(asBlockJson(block), options, `$.blocks[${String(index)}]`, diagnostics)),
+    blocks: json.blocks.map(
+      (block, index) => parseBlock(asBlockJson(block), options, `$.blocks[${String(index)}]`, diagnostics, blockIds)
+    ),
     diagnostics
   };
 }
@@ -8655,12 +8676,23 @@ function addDocument2TableBlock(document2, columns = "lll", rowCount = 3, colCou
   };
   return insertDocument2BlockAfter(document2, afterBlockId, block);
 }
-function addDocument2ImageBlock(document2, src = "", afterBlockId) {
+function normalizeImageInput(srcOrAsset) {
+  if (typeof srcOrAsset === "string") {
+    return srcOrAsset.length > 0 ? { value: srcOrAsset, assetId: srcOrAsset } : { value: "" };
+  }
+  if (srcOrAsset && srcOrAsset.assetId.length > 0) {
+    return { value: srcOrAsset.value ?? srcOrAsset.assetId, assetId: srcOrAsset.assetId };
+  }
+  return { value: "" };
+}
+function addDocument2ImageBlock(document2, srcOrAsset, afterBlockId) {
+  const image = normalizeImageInput(srcOrAsset);
   const block = {
     id: document2Id("block"),
     kind: "image",
     command: "\\includegraphics",
-    value: src,
+    value: image.value,
+    ...image.assetId !== void 0 ? { assetId: image.assetId } : {},
     options: { width: "0.8\\columnwidth" },
     ...defaultFloatMeta()
   };
@@ -8687,6 +8719,55 @@ function updateDocument2ImageValue(document2, blockId, value) {
   visit(next.blocks);
   return next;
 }
+function updateDocument2ImageAsset(document2, blockId, asset) {
+  const next = cloneDocument(document2);
+  const image = normalizeImageInput(asset);
+  function visit(blocks) {
+    for (const block of blocks) {
+      if (block.id === blockId && block.kind === "image") {
+        block.value = image.value;
+        if (image.assetId !== void 0) {
+          block.assetId = image.assetId;
+        } else {
+          delete block.assetId;
+        }
+        return true;
+      }
+      if (block.kind === "list") {
+        for (const item of block.items) {
+          if (visit(item.blocks)) {
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  }
+  visit(next.blocks);
+  return next;
+}
+function clearDocument2ImageAsset(document2, blockId) {
+  const next = cloneDocument(document2);
+  function visit(blocks) {
+    for (const block of blocks) {
+      if (block.id === blockId && block.kind === "image") {
+        block.value = "";
+        delete block.assetId;
+        return true;
+      }
+      if (block.kind === "list") {
+        for (const item of block.items) {
+          if (visit(item.blocks)) {
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  }
+  visit(next.blocks);
+  return next;
+}
 function updateDocument2ImageMeta(document2, blockId, patch) {
   const next = cloneDocument(document2);
   function visit(blocks) {
@@ -8982,6 +9063,159 @@ function updateDocument2Meta(document2, patch) {
   return next;
 }
 
+// src/document2/exportJson.ts
+function serializeField(field) {
+  let value = "";
+  let hasPersistedMath = false;
+  const formats = [];
+  const mathObjects = [];
+  for (const token of field.tokens) {
+    if (token.kind === "text") {
+      const start = value.length;
+      value += token.text;
+      if (token.text.length > 0 && (token.style?.bold || token.style?.italic || token.style?.underline)) {
+        formats.push({
+          start,
+          end: value.length,
+          ...token.style.bold ? { bold: true } : {},
+          ...token.style.italic ? { italic: true } : {},
+          ...token.style.underline ? { underline: true } : {}
+        });
+      }
+      continue;
+    }
+    if (token.kind === "cite") {
+      value += citeTokenLatex(token.keys);
+      continue;
+    }
+    if (token.kind === "ref") {
+      value += refTokenLatex(token.keys, token.refCommand);
+      continue;
+    }
+    value += token.source;
+    if (!token.math || token.sourceOwner === "raw") {
+      if (token.labelEnabled !== void 0 || token.label !== void 0) {
+        hasPersistedMath = true;
+        mathObjects.push({
+          node_type: "RawMathObject",
+          ...token.labelEnabled !== void 0 ? { label_enabled: token.labelEnabled } : {},
+          ...token.label !== void 0 ? { label: token.label } : {}
+        });
+      } else {
+        mathObjects.push(null);
+      }
+      continue;
+    }
+    hasPersistedMath = true;
+    mathObjects.push({
+      ...toMathObjectJson(token.math),
+      ...token.sourceSide ? { source_side: token.sourceSide } : {},
+      source_owner: token.sourceOwner,
+      ...token.labelEnabled !== void 0 ? { label_enabled: token.labelEnabled } : {},
+      ...token.label !== void 0 ? { label: token.label } : {}
+    });
+  }
+  return { value, formats, mathObjects, hasPersistedMath };
+}
+function fieldJson(field) {
+  const serialized = serializeField(field);
+  return {
+    value: serialized.value,
+    ...serialized.formats.length > 0 ? { formats: serialized.formats } : {},
+    ...serialized.hasPersistedMath ? { math_objects: serialized.mathObjects } : {}
+  };
+}
+function listItemJson(item) {
+  const field = fieldJson(item.field);
+  return {
+    value: field.value ?? "",
+    ...field.formats ? { formats: field.formats } : {},
+    ...field.math_objects ? { math_objects: field.math_objects } : {},
+    ...item.blocks.length > 0 ? { blocks: item.blocks.map(blockJson) } : {}
+  };
+}
+function blockJson(block) {
+  if (block.kind === "textBlock") {
+    return {
+      id: block.id,
+      command: block.command,
+      ...fieldJson(block.field),
+      ...block.command === "\\paragraph" ? { centered: block.centered === true } : {}
+    };
+  }
+  if (block.kind === "list") {
+    return {
+      id: block.id,
+      command: block.command,
+      closing: block.closing,
+      items: block.items.map(listItemJson)
+    };
+  }
+  if (block.kind === "table") {
+    const fields = block.rows.map((row) => row.map(serializeField));
+    const hasPersistedMath = fields.some((row) => row.some((field) => field.hasPersistedMath));
+    return {
+      id: block.id,
+      command: block.command,
+      closing: block.closing,
+      columns: block.columns,
+      rows: fields.map((row) => row.map((field) => field.value)),
+      ...fields.some((row) => row.some((field) => field.formats.length > 0)) ? { cell_formats: fields.map((row) => row.map((field) => field.formats)) } : {},
+      ...hasPersistedMath ? { math_objects: fields.flatMap((row) => row.flatMap((field) => field.mathObjects)) } : {},
+      centered: block.centered,
+      caption_enabled: block.captionEnabled,
+      caption: block.caption,
+      label_enabled: block.labelEnabled,
+      label: block.label
+    };
+  }
+  if (block.kind === "image") {
+    return {
+      id: block.id,
+      command: block.command,
+      value: block.value,
+      ...block.assetId !== void 0 ? { asset_id: block.assetId } : {},
+      options: { ...block.options },
+      centered: block.centered,
+      caption_enabled: block.captionEnabled,
+      caption: block.caption,
+      label_enabled: block.labelEnabled,
+      label: block.label
+    };
+  }
+  if (block.kind === "bibliography") {
+    return { id: block.id, command: block.command, closing: block.closing };
+  }
+  return { id: block.id, command: block.command, value: block.value };
+}
+function referenceJson(reference) {
+  return {
+    key: reference.key,
+    authors: reference.authors,
+    title: reference.title,
+    year: reference.year,
+    url: reference.url,
+    venue: reference.venue,
+    field_separator: reference.fieldSeparator
+  };
+}
+function toDocumentJson2(document2) {
+  if (document2.nodeType !== "DocumentObject" || !Array.isArray(document2.blocks)) {
+    throw new Error("toDocumentJson2 requires a live Document2Node");
+  }
+  return {
+    node_type: "DocumentObject",
+    meta: {
+      title: document2.meta.title,
+      authors: document2.meta.authors,
+      date: { ...document2.meta.date },
+      abstract: document2.meta.abstract
+    },
+    references: document2.references.map(referenceJson),
+    blocks: document2.blocks.map(blockJson)
+  };
+}
+
 // src/document2/keys.ts
 var DOCUMENT2_KEY_PATTERN = /^[\p{L}\p{M}0-9:._-]+$/u;
 function normalizeDocument2Key(key) {
@@ -9462,155 +9696,6 @@ ${body}
 `;
 }
 
-// src/document2/exportJson.ts
-function serializeField(field) {
-  let value = "";
-  let hasPersistedMath = false;
-  const formats = [];
-  const mathObjects = [];
-  for (const token of field.tokens) {
-    if (token.kind === "text") {
-      const start = value.length;
-      value += token.text;
-      if (token.text.length > 0 && (token.style?.bold || token.style?.italic || token.style?.underline)) {
-        formats.push({
-          start,
-          end: value.length,
-          ...token.style.bold ? { bold: true } : {},
-          ...token.style.italic ? { italic: true } : {},
-          ...token.style.underline ? { underline: true } : {}
-        });
-      }
-      continue;
-    }
-    if (token.kind === "cite") {
-      value += citeTokenLatex(token.keys);
-      continue;
-    }
-    if (token.kind === "ref") {
-      value += refTokenLatex(token.keys, token.refCommand);
-      continue;
-    }
-    value += token.source;
-    if (!token.math || token.sourceOwner === "raw") {
-      if (token.labelEnabled !== void 0 || token.label !== void 0) {
-        hasPersistedMath = true;
-        mathObjects.push({
-          node_type: "RawMathObject",
-          ...token.labelEnabled !== void 0 ? { label_enabled: token.labelEnabled } : {},
-          ...token.label !== void 0 ? { label: token.label } : {}
-        });
-      } else {
-        mathObjects.push(null);
-      }
-      continue;
-    }
-    hasPersistedMath = true;
-    mathObjects.push({
-      ...toMathObjectJson(token.math),
-      ...token.sourceSide ? { source_side: token.sourceSide } : {},
-      source_owner: token.sourceOwner,
-      ...token.labelEnabled !== void 0 ? { label_enabled: token.labelEnabled } : {},
-      ...token.label !== void 0 ? { label: token.label } : {}
-    });
-  }
-  return { value, formats, mathObjects, hasPersistedMath };
-}
-function fieldJson(field) {
-  const serialized = serializeField(field);
-  return {
-    value: serialized.value,
-    ...serialized.formats.length > 0 ? { formats: serialized.formats } : {},
-    ...serialized.hasPersistedMath ? { math_objects: serialized.mathObjects } : {}
-  };
-}
-function listItemJson(item) {
-  const field = fieldJson(item.field);
-  return {
-    value: field.value ?? "",
-    ...field.formats ? { formats: field.formats } : {},
-    ...field.math_objects ? { math_objects: field.math_objects } : {},
-    ...item.blocks.length > 0 ? { blocks: item.blocks.map(blockJson) } : {}
-  };
-}
-function blockJson(block) {
-  if (block.kind === "textBlock") {
-    return {
-      command: block.command,
-      ...fieldJson(block.field),
-      ...block.command === "\\paragraph" ? { centered: block.centered === true } : {}
-    };
-  }
-  if (block.kind === "list") {
-    return {
-      command: block.command,
-      closing: block.closing,
-      items: block.items.map(listItemJson)
-    };
-  }
-  if (block.kind === "table") {
-    const fields = block.rows.map((row) => row.map(serializeField));
-    const hasPersistedMath = fields.some((row) => row.some((field) => field.hasPersistedMath));
-    return {
-      command: block.command,
-      closing: block.closing,
-      columns: block.columns,
-      rows: fields.map((row) => row.map((field) => field.value)),
-      ...fields.some((row) => row.some((field) => field.formats.length > 0)) ? { cell_formats: fields.map((row) => row.map((field) => field.formats)) } : {},
-      ...hasPersistedMath ? { math_objects: fields.flatMap((row) => row.flatMap((field) => field.mathObjects)) } : {},
-      centered: block.centered,
-      caption_enabled: block.captionEnabled,
-      caption: block.caption,
-      label_enabled: block.labelEnabled,
-      label: block.label
-    };
-  }
-  if (block.kind === "image") {
-    return {
-      command: block.command,
-      value: block.value,
-      ...block.assetId !== void 0 ? { asset_id: block.assetId } : {},
-      options: { ...block.options },
-      centered: block.centered,
-      caption_enabled: block.captionEnabled,
-      caption: block.caption,
-      label_enabled: block.labelEnabled,
-      label: block.label
-    };
-  }
-  if (block.kind === "bibliography") {
-    return { command: block.command, closing: block.closing };
-  }
-  return { command: block.command, value: block.value };
-}
-function referenceJson(reference) {
-  return {
-    key: reference.key,
-    authors: reference.authors,
-    title: reference.title,
-    year: reference.year,
-    url: reference.url,
-    venue: reference.venue,
-    field_separator: reference.fieldSeparator
-  };
-}
-function toDocumentJson2(document2) {
-  if (document2.nodeType !== "DocumentObject" || !Array.isArray(document2.blocks)) {
-    throw new Error("toDocumentJson2 requires a live Document2Node");
-  }
-  return {
-    node_type: "DocumentObject",
-    meta: {
-      title: document2.meta.title,
-      authors: document2.meta.authors,
-      date: { ...document2.meta.date },
-      abstract: document2.meta.abstract
-    },
-    references: document2.references.map(referenceJson),
-    blocks: document2.blocks.map(blockJson)
-  };
-}
-
 // src/document2/history.ts
 var DEFAULT_DOCUMENT2_HISTORY_MAX_DEPTH = 100;
 function createDocument2History(maxDepth = DEFAULT_DOCUMENT2_HISTORY_MAX_DEPTH) {
@@ -9956,6 +10041,15 @@ var DOCUMENT2_MESSAGES = {
     loadDocumentError: "\u062A\u0639\u0630\u0631 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0645\u0633\u062A\u0646\u062F",
     runtimePersistenceError: "\u0644\u0627 \u064A\u0645\u0643\u0646 \u062A\u062D\u0645\u064A\u0644 Document2Node \u0628\u0639\u062F JSON.stringify. \u0627\u062D\u0641\u0638 Document2Json \u0628\u0627\u0633\u062A\u062E\u062F\u0627\u0645 toDocumentJson2.",
     emptyImagePath: "\u0644\u0627 \u064A\u0648\u062C\u062F \u0645\u0633\u0627\u0631 \u0635\u0648\u0631\u0629",
+    noImageSelected: "\u0644\u0627 \u0635\u0648\u0631\u0629 \u0645\u062D\u062F\u062F\u0629",
+    chooseImage: "\u0627\u062E\u062A\u064A\u0627\u0631 \u0635\u0648\u0631\u0629",
+    changeImage: "\u062A\u063A\u064A\u064A\u0631",
+    removeImage: "\u0625\u0632\u0627\u0644\u0629",
+    selectImageAsset: "\u0627\u062E\u062A\u064A\u0627\u0631 \u0635\u0648\u0631\u0629",
+    noImageAssets: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0635\u0648\u0631 \u0645\u062A\u0627\u062D\u0629",
+    loadingImageAssets: "\u062C\u0627\u0631 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0635\u0648\u0631\u2026",
+    advancedImagePath: "\u062E\u064A\u0627\u0631\u0627\u062A \u0645\u062A\u0642\u062F\u0645\u0629",
+    imagePreviewAlt: "\u0645\u0639\u0627\u064A\u0646\u0629 \u0627\u0644\u0635\u0648\u0631\u0629",
     blockSelection: "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u062A\u0644",
     selectBlock: "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u062A\u0644\u0629",
     selectedBlockCount: "\u0645\u062D\u062F\u062F\u0629",
@@ -10100,6 +10194,15 @@ var DOCUMENT2_MESSAGES = {
     loadDocumentError: "Could not load document",
     runtimePersistenceError: "A Document2Node cannot be loaded after JSON.stringify. Persist Document2Json with toDocumentJson2 instead.",
     emptyImagePath: "Empty image path",
+    noImageSelected: "No image selected",
+    chooseImage: "Choose image",
+    changeImage: "Change",
+    removeImage: "Remove",
+    selectImageAsset: "Select image",
+    noImageAssets: "No images available",
+    loadingImageAssets: "Loading images\u2026",
+    advancedImagePath: "Advanced",
+    imagePreviewAlt: "Image preview",
     blockSelection: "Block selection",
     selectBlock: "Select block",
     selectedBlockCount: "selected",
@@ -10380,7 +10483,7 @@ function focusArticleMetaPanel(panel) {
 }
 
 // src/react-document2/ButexDocumentEditor2.tsx
-import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect9, useImperativeHandle as useImperativeHandle2, useMemo as useMemo2, useRef as useRef8, useState as useState12 } from "react";
+import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect10, useImperativeHandle as useImperativeHandle2, useMemo as useMemo2, useRef as useRef8, useState as useState12 } from "react";
 
 // src/debugJson.ts
 function lineColumnForPosition(text, position) {
@@ -10409,7 +10512,7 @@ function parseJsonDebugInput(text) {
 }
 
 // src/react-document2/BlockEditor.tsx
-import { useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 
 // src/react-document2/InlineField.tsx
 import { useRef as useRef3 } from "react";
@@ -11401,7 +11504,7 @@ function uiLocaleDirection(locale) {
 }
 
 // src/react-document2/BlockEditor.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function blockChromeClass(block) {
   const root = "butex-document2-widget__block";
   if (block.kind === "textBlock") {
@@ -11588,6 +11691,167 @@ function FloatMetaEditor({
     ] }) : null
   ] });
 }
+function ImageAssetEditor({
+  block,
+  uiLocale,
+  messages,
+  resolveImageUrl,
+  onRequestImagePick,
+  listImageAssets,
+  renderImageBlockEditor,
+  onSelectAsset,
+  onClearAsset,
+  onImageSrcChange,
+  onBlockFocus
+}) {
+  const [assets, setAssets] = useState3([]);
+  const [assetsLoaded, setAssetsLoaded] = useState3(false);
+  const [assetsLoading, setAssetsLoading] = useState3(false);
+  const [advancedOpen, setAdvancedOpen] = useState3(false);
+  const hasImage = block.value.length > 0 || Boolean(block.assetId);
+  const resolvedUrl = hasImage ? resolveImageUrl ? resolveImageUrl({ assetId: block.assetId, value: block.value }) : block.value : "";
+  const current = block.assetId ? { assetId: block.assetId, value: block.value } : null;
+  const canUsePicker = Boolean(onRequestImagePick);
+  useEffect3(() => {
+    let alive = true;
+    if (!listImageAssets || onRequestImagePick) {
+      setAssets([]);
+      setAssetsLoaded(false);
+      setAssetsLoading(false);
+      return () => {
+        alive = false;
+      };
+    }
+    setAssetsLoading(true);
+    Promise.resolve(listImageAssets()).then((nextAssets) => {
+      if (!alive) {
+        return;
+      }
+      setAssets(nextAssets);
+      setAssetsLoaded(true);
+    }).catch(() => {
+      if (!alive) {
+        return;
+      }
+      setAssets([]);
+      setAssetsLoaded(true);
+    }).finally(() => {
+      if (alive) {
+        setAssetsLoading(false);
+      }
+    });
+    return () => {
+      alive = false;
+    };
+  }, [listImageAssets, onRequestImagePick]);
+  async function requestImagePick() {
+    if (!onRequestImagePick) {
+      return;
+    }
+    const nextAsset = await onRequestImagePick({ blockId: block.id, current });
+    if (nextAsset) {
+      onSelectAsset?.(block.id, nextAsset);
+    }
+  }
+  function selectListedAsset(assetId) {
+    const nextAsset = assets.find((asset) => asset.assetId === assetId);
+    if (nextAsset) {
+      onSelectAsset?.(block.id, nextAsset);
+    }
+  }
+  const imageFieldId = `butex-d2-img-${block.id}`;
+  const selectId = `butex-d2-img-asset-${block.id}`;
+  const canSelectListedAsset = !canUsePicker && assets.length > 0;
+  function activateImagePicker() {
+    if (canUsePicker) {
+      void requestImagePick();
+      return;
+    }
+    if (canSelectListedAsset && typeof document !== "undefined") {
+      document.getElementById(selectId)?.focus();
+    }
+  }
+  const defaultUi = /* @__PURE__ */ jsxs5("div", { className: "butex-document2-widget__image-editor", children: [
+    /* @__PURE__ */ jsx7("div", { className: `butex-document2-widget__image-asset ${hasImage ? "butex-document2-widget__image-asset--filled" : "butex-document2-widget__image-asset--empty"}`, children: hasImage ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+      resolvedUrl ? /* @__PURE__ */ jsx7("img", { className: "butex-document2-widget__image-thumb", src: resolvedUrl, alt: messages.imagePreviewAlt }) : null,
+      /* @__PURE__ */ jsxs5("div", { className: "butex-document2-widget__image-asset-main", children: [
+        /* @__PURE__ */ jsx7("span", { className: "butex-document2-widget__image-asset-title", dir: "ltr", children: block.assetId ?? block.value }),
+        /* @__PURE__ */ jsxs5("div", { className: "butex-document2-widget__image-actions", children: [
+          /* @__PURE__ */ jsx7("button", { type: "button", onClick: activateImagePicker, disabled: !canUsePicker && !canSelectListedAsset, children: messages.changeImage }),
+          /* @__PURE__ */ jsx7("button", { type: "button", className: "butex-document2-widget__button--danger", onClick: () => onClearAsset?.(block.id), children: messages.removeImage })
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs5("div", { className: "butex-document2-widget__image-empty-content", children: [
+      /* @__PURE__ */ jsx7("strong", { children: messages.noImageSelected }),
+      /* @__PURE__ */ jsx7("button", { type: "button", onClick: activateImagePicker, disabled: !canUsePicker && !canSelectListedAsset, children: messages.chooseImage })
+    ] }) }),
+    !canUsePicker ? /* @__PURE__ */ jsxs5("label", { className: "butex-document2-widget__image-select", htmlFor: selectId, children: [
+      /* @__PURE__ */ jsx7("span", { children: messages.selectImageAsset }),
+      /* @__PURE__ */ jsxs5(
+        "select",
+        {
+          id: selectId,
+          value: "",
+          disabled: !canSelectListedAsset,
+          onFocus: () => onBlockFocus?.(block.id),
+          onChange: (event) => selectListedAsset(event.currentTarget.value),
+          children: [
+            /* @__PURE__ */ jsx7("option", { value: "", children: assetsLoading ? messages.loadingImageAssets : assetsLoaded && assets.length === 0 ? messages.noImageAssets : messages.selectImageAsset }),
+            assets.map((asset) => /* @__PURE__ */ jsx7("option", { value: asset.assetId, children: asset.label ?? asset.value ?? asset.assetId }, asset.assetId))
+          ]
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxs5(
+      "details",
+      {
+        className: "butex-document2-widget__image-advanced",
+        open: advancedOpen,
+        onToggle: (event) => setAdvancedOpen(event.currentTarget.open),
+        children: [
+          /* @__PURE__ */ jsx7("summary", { children: messages.advancedImagePath }),
+          /* @__PURE__ */ jsx7("label", { className: "butex-document2-widget__image-src-label", htmlFor: imageFieldId, children: messages.imagePath }),
+          /* @__PURE__ */ jsx7(
+            "textarea",
+            {
+              id: imageFieldId,
+              className: "butex-document2-widget__inline-text",
+              value: block.value,
+              dir: "ltr",
+              "aria-label": messages.imagePathLabel,
+              rows: 1,
+              ref: (element) => {
+                if (element) {
+                  element.style.height = "auto";
+                  element.style.height = `${String(element.scrollHeight)}px`;
+                }
+              },
+              onFocus: () => onBlockFocus?.(block.id),
+              onChange: (event) => {
+                onImageSrcChange?.(block.id, event.currentTarget.value);
+                event.currentTarget.style.height = "auto";
+                event.currentTarget.style.height = `${String(event.currentTarget.scrollHeight)}px`;
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+  if (renderImageBlockEditor) {
+    return /* @__PURE__ */ jsx7(Fragment, { children: renderImageBlockEditor({
+      blockId: block.id,
+      assetId: block.assetId,
+      value: block.value,
+      resolvedUrl,
+      uiLocale,
+      onSelectAsset: (asset) => onSelectAsset?.(block.id, asset),
+      onClearAsset: () => onClearAsset?.(block.id),
+      defaultUi
+    }) });
+  }
+  return /* @__PURE__ */ jsx7(Fragment, { children: defaultUi });
+}
 function blockSummary(block, referenceCount, messages) {
   if (block.kind === "textBlock") {
     return inlineFieldSummary(block.field);
@@ -11636,6 +11900,12 @@ function BlockEditor({
   onRefFocus,
   onFieldBlur,
   onImageSrcChange,
+  onImageAssetChange,
+  onImageAssetClear,
+  resolveImageUrl,
+  onRequestImagePick,
+  listImageAssets,
+  renderImageBlockEditor,
   onFloatMetaChange,
   onParagraphCenteredChange,
   onAddListItem,
@@ -11778,6 +12048,12 @@ function BlockEditor({
               onCiteFocus,
               onFieldBlur,
               onImageSrcChange,
+              onImageAssetChange,
+              onImageAssetClear,
+              resolveImageUrl,
+              onRequestImagePick,
+              listImageAssets,
+              renderImageBlockEditor,
               onAddListItem,
               onRemoveListItem,
               onManageReferences
@@ -11816,31 +12092,22 @@ function BlockEditor({
     ] });
   }
   if (block.kind === "image") {
-    const imageFieldId = `butex-d2-img-${block.id}`;
     return /* @__PURE__ */ jsxs5("section", { className: chromeClass, children: [
       header,
-      /* @__PURE__ */ jsx7("label", { className: "butex-document2-widget__image-src-label", htmlFor: imageFieldId, children: messages.imagePath }),
       /* @__PURE__ */ jsx7(
-        "textarea",
+        ImageAssetEditor,
         {
-          id: imageFieldId,
-          className: "butex-document2-widget__inline-text",
-          value: block.value,
-          dir: "ltr",
-          "aria-label": messages.imagePathLabel,
-          rows: 1,
-          ref: (element) => {
-            if (element) {
-              element.style.height = "auto";
-              element.style.height = `${String(element.scrollHeight)}px`;
-            }
-          },
-          onFocus: () => onBlockFocus?.(block.id),
-          onChange: (event) => {
-            onImageSrcChange?.(block.id, event.currentTarget.value);
-            event.currentTarget.style.height = "auto";
-            event.currentTarget.style.height = `${String(event.currentTarget.scrollHeight)}px`;
-          }
+          block,
+          uiLocale,
+          messages,
+          resolveImageUrl,
+          onRequestImagePick,
+          listImageAssets,
+          renderImageBlockEditor,
+          onSelectAsset: onImageAssetChange,
+          onClearAsset: onImageAssetClear,
+          onImageSrcChange,
+          onBlockFocus
         }
       ),
       /* @__PURE__ */ jsx7(
@@ -11885,7 +12152,7 @@ function BlockEditor({
 }
 
 // src/react-document2/CitePickerPopover.tsx
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function CitePickerPopover({
   open,
@@ -11900,7 +12167,7 @@ function CitePickerPopover({
   const messages = document2Messages(uiLocale);
   const documentDirection = uiLocale === "ar" ? "rtl" : "ltr";
   const [selected, setSelected] = useState4(initialKeys);
-  useEffect3(() => {
+  useEffect4(() => {
     if (open) {
       setSelected(initialKeys);
     }
@@ -11960,10 +12227,10 @@ function CitePickerPopover({
 }
 
 // src/react-document2/DocumentInsertToolbar.tsx
-import { useEffect as useEffect5, useRef as useRef5, useState as useState6 } from "react";
+import { useEffect as useEffect6, useRef as useRef5, useState as useState6 } from "react";
 
 // src/react-document2/TableInsertPopover.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function TableInsertPopover({ uiLocale = "ar", onConfirm }) {
   const messages = document2Messages(uiLocale);
@@ -11971,7 +12238,7 @@ function TableInsertPopover({ uiLocale = "ar", onConfirm }) {
   const [rows, setRows] = useState5("3");
   const [cols, setCols] = useState5("3");
   const rootRef = useRef4(null);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!open) {
       return;
     }
@@ -12069,7 +12336,7 @@ function DocumentInsertToolbar({
   const [referencesMenuOpen, setReferencesMenuOpen] = useState6(false);
   const referencesMenuRef = useRef5(null);
   const referencesTriggerRef = useRef5(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!referencesMenuOpen) {
       return;
     }
@@ -12329,9 +12596,9 @@ function DocumentInsertToolbar({
 }
 
 // src/react-document2/DocumentPreview.tsx
-import { Fragment, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function PreviewInlines({ inlines, output }) {
-  return /* @__PURE__ */ jsx11(Fragment, { children: inlines.map((inline, index) => {
+  return /* @__PURE__ */ jsx11(Fragment2, { children: inlines.map((inline, index) => {
     if (inline.kind === "text") {
       let content = /* @__PURE__ */ jsx11("span", { children: inline.text });
       if (inline.style?.bold) {
@@ -12454,7 +12721,7 @@ function PreviewBlock({
       " ",
       /* @__PURE__ */ jsxs9("span", { children: [
         bibliographyEntryBody(item, item.fieldSeparator, { digitForm }),
-        item.url ? /* @__PURE__ */ jsxs9(Fragment, { children: [
+        item.url ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
           " ",
           /* @__PURE__ */ jsx11("a", { href: absoluteHttpHref(item.url), target: "_blank", rel: "noreferrer", children: item.url })
         ] }) : null
@@ -12492,13 +12759,13 @@ function DocumentPreview({
 }
 
 // src/react-document2/EquationDrawer.tsx
-import { useEffect as useEffect7, useRef as useRef7, useState as useState8 } from "react";
+import { useEffect as useEffect8, useRef as useRef7, useState as useState8 } from "react";
 
 // src/react/ButexEditor.tsx
 import {
   forwardRef,
   useCallback,
-  useEffect as useEffect6,
+  useEffect as useEffect7,
   useImperativeHandle,
   useRef as useRef6,
   useState as useState7
@@ -13504,7 +13771,7 @@ function injectWidgetChromeCss(doc) {
 }
 
 // src/react/ButexEditor.tsx
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var DIGIT_FORM_OPTIONS = [
   { id: "western", label: "456" },
   { id: "arabicIndic", label: "\u0664\u0665\u0666" },
@@ -13775,7 +14042,7 @@ ${arabic || currentMessages.empty}`;
         setDebugImportError(importError instanceof Error ? importError.message : String(importError));
       }
     }
-    useEffect6(() => {
+    useEffect7(() => {
       injectWidgetChromeCss();
       injectBuTeXEditorStyles(typeof document !== "undefined" ? document : void 0);
       const surfaceEl = surfaceRef.current;
@@ -13832,7 +14099,7 @@ ${arabic || currentMessages.empty}`;
         runtimeRef.current = null;
       };
     }, []);
-    useEffect6(() => {
+    useEffect7(() => {
       runtimeRef.current?.setUiLocale(uiLocale);
       const session = runtimeRef.current?.getSession();
       if (session) {
@@ -14198,7 +14465,7 @@ ${arabic || currentMessages.empty}`;
                       ] }),
                       /* @__PURE__ */ jsxs10("div", { className: "matrix-edit-actions", "aria-label": messages.editSelectedEnvironment, children: [
                         envPaletteMode === "matrix" ? /* @__PURE__ */ jsx12("button", { type: "button", title: messages.applySelectedMatrixStyle, onMouseDown: (event) => event.preventDefault(), onClick: () => runtimeRef.current?.setMatrixEnvStyle(matrixStyle), children: messages.applyStyle }) : null,
-                        envPaletteMode === "array" ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
+                        envPaletteMode === "array" ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
                           /* @__PURE__ */ jsxs10("label", { children: [
                             messages.column,
                             /* @__PURE__ */ jsx12(
@@ -15062,10 +15329,10 @@ function EquationDrawer({
     labels,
     excludeOwnerId: ownerId || void 0
   }) : null;
-  useEffect7(() => {
+  useEffect8(() => {
     setLabelOverride(null);
   }, [ownerId, label]);
-  useEffect7(() => {
+  useEffect8(() => {
     const onKeyDown = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -15312,7 +15579,7 @@ function LabelsPanel({
 
 // src/react-document2/ReferencesPanel.tsx
 import { useMemo, useState as useState10 } from "react";
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 var EMPTY_DRAFT = {
   key: "",
   authors: "",
@@ -15403,7 +15670,7 @@ function ReferencePreview({
           "] "
         ] }) : null,
         body.length > 0 ? body : /* @__PURE__ */ jsx15("span", { className: "butex-document2-widget__cite-picker-empty", children: "\u2026" }),
-        url.trim().length > 0 ? /* @__PURE__ */ jsxs13(Fragment3, { children: [
+        url.trim().length > 0 ? /* @__PURE__ */ jsxs13(Fragment4, { children: [
           " ",
           /* @__PURE__ */ jsx15("span", { className: "butex-document2-widget__modal-preview-url", children: url.trim() })
         ] }) : null
@@ -15607,7 +15874,7 @@ function ReferencesPanel({
 }
 
 // src/react-document2/RefPickerPopover.tsx
-import { useEffect as useEffect8, useState as useState11 } from "react";
+import { useEffect as useEffect9, useState as useState11 } from "react";
 import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function RefPickerPopover({
   open,
@@ -15624,7 +15891,7 @@ function RefPickerPopover({
   const documentDirection = uiLocale === "ar" ? "rtl" : "ltr";
   const [selected, setSelected] = useState11(initialKeys);
   const [refCommand, setRefCommand] = useState11(initialRefCommand);
-  useEffect8(() => {
+  useEffect9(() => {
     if (open) {
       setSelected(initialKeys);
       setRefCommand(initialRefCommand);
@@ -16722,6 +16989,94 @@ var DOCUMENT2_WIDGET_CSS = `
   border-color: var(--butex-document2-dev-border);
 }
 
+.butex-document2-widget__image-editor {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+}
+
+.butex-document2-widget__image-asset {
+  align-items: center;
+  border: 1px solid var(--butex-document2-border);
+  border-radius: 8px;
+  display: flex;
+  gap: 12px;
+  min-height: 128px;
+  min-width: 0;
+  padding: 12px;
+}
+
+.butex-document2-widget__image-asset--empty {
+  border-style: dashed;
+  justify-content: center;
+}
+
+.butex-document2-widget__image-empty-content,
+.butex-document2-widget__image-asset-main,
+.butex-document2-widget__image-select,
+.butex-document2-widget__image-advanced {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.butex-document2-widget__image-empty-content {
+  justify-items: center;
+  text-align: center;
+}
+
+.butex-document2-widget__image-thumb {
+  aspect-ratio: 4 / 3;
+  background: var(--butex-document2-bg);
+  border: 1px solid var(--butex-document2-border);
+  border-radius: 8px;
+  flex: 0 0 128px;
+  max-width: 38%;
+  object-fit: cover;
+  width: 128px;
+}
+
+.butex-document2-widget__image-asset-title {
+  color: var(--butex-document2-muted);
+  display: block;
+  overflow: hidden;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.butex-document2-widget__image-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.butex-document2-widget__image-select span,
+.butex-document2-widget__image-src-label {
+  color: var(--butex-document2-muted);
+  font-size: 0.86rem;
+}
+
+.butex-document2-widget__image-select select {
+  background: var(--butex-document2-input-bg);
+  border: 1px solid var(--butex-document2-border);
+  border-radius: 8px;
+  color: var(--butex-document2-fg);
+  min-height: 36px;
+  padding: 6px 8px;
+}
+
+.butex-document2-widget__image-select select:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.butex-document2-widget__image-advanced summary {
+  color: var(--butex-document2-muted);
+  cursor: pointer;
+  font-size: 0.86rem;
+}
+
 .butex-document2-widget__dev pre {
   background: var(--butex-document2-dev-code-bg);
   color: var(--butex-document2-dev-code-fg);
@@ -17346,7 +17701,7 @@ function injectBuTeXDocument2Styles(doc) {
 }
 
 // src/react-document2/ButexDocumentEditor2.tsx
-import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function mathDelimiters(mode) {
   return mode === "inline" ? { opening: "$", closing: "$" } : { opening: "\\[", closing: "\\]" };
 }
@@ -17615,6 +17970,9 @@ var ButexDocumentEditor2 = forwardRef2(
     digitForm: digitFormProp,
     onDigitFormChange,
     resolveImageUrl,
+    onRequestImagePick,
+    listImageAssets,
+    renderImageBlockEditor,
     onDocumentChange,
     onDocumentJsonChange,
     onLatexChange
@@ -17721,15 +18079,15 @@ var ButexDocumentEditor2 = forwardRef2(
       applyDocument(removeDocument2BlockRange(documentRef.current, selection.from, selection.to), "immediate");
       clearBlockSelection();
     }
-    useEffect9(() => {
+    useEffect10(() => {
       injectBuTeXDocument2Styles();
     }, []);
-    useEffect9(() => {
+    useEffect10(() => {
       if (!editableEquations || previewOnly) {
         setSelectedMath(null);
       }
     }, [editableEquations, previewOnly]);
-    useEffect9(() => {
+    useEffect10(() => {
       const next = resolveInitialDocument2(initialDocument, uiLocale, documentMeta);
       setDocumentNode(next.document);
       setError(next.error);
@@ -17738,16 +18096,16 @@ var ButexDocumentEditor2 = forwardRef2(
       historyRef.current = createDocument2History();
       setHistoryTick((tick) => tick + 1);
     }, [initialDocument, documentMeta, uiLocale]);
-    useEffect9(() => {
+    useEffect10(() => {
       onDocumentChange?.(documentNode);
     }, [documentNode, onDocumentChange]);
-    useEffect9(() => {
+    useEffect10(() => {
       onDocumentJsonChange?.(documentJson);
     }, [documentJson, onDocumentJsonChange]);
-    useEffect9(() => {
+    useEffect10(() => {
       onLatexChange?.(latex);
     }, [latex, onLatexChange]);
-    useEffect9(() => {
+    useEffect10(() => {
       const pending = pendingFocusRef.current;
       const root = widgetRef.current;
       if (!pending || !root) {
@@ -17815,10 +18173,10 @@ var ButexDocumentEditor2 = forwardRef2(
     );
     const afterBlockId = useCallback2(() => resolveInsertAfterBlockId(documentRef.current, editorFocusRef.current), []);
     const insertImageBlock = useCallback2(
-      (srcOrAssetId = "") => {
+      (srcOrAsset = "") => {
         clearBlockSelection();
         const after = resolveInsertAfterBlockId(documentRef.current, editorFocusRef.current);
-        applyDocument(addDocument2ImageBlock(documentRef.current, srcOrAssetId, after), "immediate");
+        applyDocument(addDocument2ImageBlock(documentRef.current, srcOrAsset, after), "immediate");
       },
       [applyDocument]
     );
@@ -17829,6 +18187,9 @@ var ButexDocumentEditor2 = forwardRef2(
         updateImageBlockValue(blockId, value) {
           applyDocument(updateDocument2ImageValue(documentRef.current, blockId, value), "immediate");
         },
+        updateImageBlockAsset(blockId, asset) {
+          applyDocument(updateDocument2ImageAsset(documentRef.current, blockId, asset), "immediate");
+        },
         getDocumentJson() {
           return toDocumentJson2(documentRef.current);
         }
@@ -17927,7 +18288,7 @@ var ButexDocumentEditor2 = forwardRef2(
         setDebugImportError(importError instanceof Error ? importError.message : String(importError));
       }
     }
-    useEffect9(() => {
+    useEffect10(() => {
       const root = widgetRef.current;
       if (!root) {
         return;
@@ -18384,6 +18745,18 @@ var ButexDocumentEditor2 = forwardRef2(
                             clearBlockSelection();
                             applyDocument(updateDocument2ImageValue(documentRef.current, blockId, value), "text");
                           },
+                          onImageAssetChange: (blockId, asset) => {
+                            clearBlockSelection();
+                            applyDocument(updateDocument2ImageAsset(documentRef.current, blockId, asset), "immediate");
+                          },
+                          onImageAssetClear: (blockId) => {
+                            clearBlockSelection();
+                            applyDocument(clearDocument2ImageAsset(documentRef.current, blockId), "immediate");
+                          },
+                          resolveImageUrl,
+                          onRequestImagePick,
+                          listImageAssets,
+                          renderImageBlockEditor,
                           onFloatMetaChange: (blockId, kind, patch) => {
                             clearBlockSelection();
                             applyDocument(
@@ -18433,7 +18806,7 @@ var ButexDocumentEditor2 = forwardRef2(
             }
           ),
           debugEnabled ? /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__dev", children: [
-            debugEnabled && documentNode.diagnostics.length > 0 ? /* @__PURE__ */ jsxs15(Fragment4, { children: [
+            debugEnabled && documentNode.diagnostics.length > 0 ? /* @__PURE__ */ jsxs15(Fragment5, { children: [
               /* @__PURE__ */ jsx17("strong", { children: messages.importWarnings }),
               documentNode.diagnostics.map((diagnostic) => /* @__PURE__ */ jsx17("p", { className: "butex-document2-widget__dev-diagnostic", children: formatDocument2Diagnostic(diagnostic, messages) }, `${diagnostic.path}-${diagnostic.message}`))
             ] }) : null,