@drghaliasri/butex 5.6.1 → 6.0.1

package/dist/react-document2.js

@@ -38,8 +38,9 @@ var import_react = require("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;
 }
@@ -1204,6 +1205,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);
@@ -1385,40 +1399,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");
   }
@@ -1441,7 +1459,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}",
@@ -1450,11 +1468,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,
@@ -1463,43 +1481,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
@@ -1513,11 +1531,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
   };
 }
@@ -8690,12 +8711,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()
   };
@@ -8722,6 +8754,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) {
@@ -9017,6 +9098,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) {
@@ -9497,155 +9731,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) {
@@ -9991,6 +10076,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",
@@ -10135,6 +10229,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",
@@ -11623,6 +11726,167 @@ function FloatMetaEditor({
     ] }) : null
   ] });
 }
+function ImageAssetEditor({
+  block,
+  uiLocale,
+  messages,
+  resolveImageUrl,
+  onRequestImagePick,
+  listImageAssets,
+  renderImageBlockEditor,
+  onSelectAsset,
+  onClearAsset,
+  onImageSrcChange,
+  onBlockFocus
+}) {
+  const [assets, setAssets] = (0, import_react4.useState)([]);
+  const [assetsLoaded, setAssetsLoaded] = (0, import_react4.useState)(false);
+  const [assetsLoading, setAssetsLoading] = (0, import_react4.useState)(false);
+  const [advancedOpen, setAdvancedOpen] = (0, import_react4.useState)(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);
+  (0, import_react4.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "butex-document2-widget__image-editor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `butex-document2-widget__image-asset ${hasImage ? "butex-document2-widget__image-asset--filled" : "butex-document2-widget__image-asset--empty"}`, children: hasImage ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      resolvedUrl ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { className: "butex-document2-widget__image-thumb", src: resolvedUrl, alt: messages.imagePreviewAlt }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "butex-document2-widget__image-asset-main", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "butex-document2-widget__image-asset-title", dir: "ltr", children: block.assetId ?? block.value }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "butex-document2-widget__image-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: activateImagePicker, disabled: !canUsePicker && !canSelectListedAsset, children: messages.changeImage }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "butex-document2-widget__button--danger", onClick: () => onClearAsset?.(block.id), children: messages.removeImage })
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "butex-document2-widget__image-empty-content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: messages.noImageSelected }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: activateImagePicker, disabled: !canUsePicker && !canSelectListedAsset, children: messages.chooseImage })
+    ] }) }),
+    !canUsePicker ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "butex-document2-widget__image-select", htmlFor: selectId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: messages.selectImageAsset }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "select",
+        {
+          id: selectId,
+          value: "",
+          disabled: !canSelectListedAsset,
+          onFocus: () => onBlockFocus?.(block.id),
+          onChange: (event) => selectListedAsset(event.currentTarget.value),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", children: assetsLoading ? messages.loadingImageAssets : assetsLoaded && assets.length === 0 ? messages.noImageAssets : messages.selectImageAsset }),
+            assets.map((asset) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: asset.assetId, children: asset.label ?? asset.value ?? asset.assetId }, asset.assetId))
+          ]
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "details",
+      {
+        className: "butex-document2-widget__image-advanced",
+        open: advancedOpen,
+        onToggle: (event) => setAdvancedOpen(event.currentTarget.open),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("summary", { children: messages.advancedImagePath }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "butex-document2-widget__image-src-label", htmlFor: imageFieldId, children: messages.imagePath }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "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__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.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__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: defaultUi });
+}
 function blockSummary(block, referenceCount, messages) {
   if (block.kind === "textBlock") {
     return inlineFieldSummary(block.field);
@@ -11671,6 +11935,12 @@ function BlockEditor({
   onRefFocus,
   onFieldBlur,
   onImageSrcChange,
+  onImageAssetChange,
+  onImageAssetClear,
+  resolveImageUrl,
+  onRequestImagePick,
+  listImageAssets,
+  renderImageBlockEditor,
   onFloatMetaChange,
   onParagraphCenteredChange,
   onAddListItem,
@@ -11813,6 +12083,12 @@ function BlockEditor({
               onCiteFocus,
               onFieldBlur,
               onImageSrcChange,
+              onImageAssetChange,
+              onImageAssetClear,
+              resolveImageUrl,
+              onRequestImagePick,
+              listImageAssets,
+              renderImageBlockEditor,
               onAddListItem,
               onRemoveListItem,
               onManageReferences
@@ -11851,31 +12127,22 @@ function BlockEditor({
     ] });
   }
   if (block.kind === "image") {
-    const imageFieldId = `butex-d2-img-${block.id}`;
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { className: chromeClass, children: [
       header,
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "butex-document2-widget__image-src-label", htmlFor: imageFieldId, children: messages.imagePath }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "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__ */ (0, import_jsx_runtime7.jsx)(
@@ -16750,6 +17017,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);
@@ -17643,6 +17998,9 @@ var ButexDocumentEditor2 = (0, import_react13.forwardRef)(
     digitForm: digitFormProp,
     onDigitFormChange,
     resolveImageUrl,
+    onRequestImagePick,
+    listImageAssets,
+    renderImageBlockEditor,
     onDocumentChange,
     onDocumentJsonChange,
     onLatexChange
@@ -17843,10 +18201,10 @@ var ButexDocumentEditor2 = (0, import_react13.forwardRef)(
     );
     const afterBlockId = (0, import_react13.useCallback)(() => resolveInsertAfterBlockId(documentRef.current, editorFocusRef.current), []);
     const insertImageBlock = (0, import_react13.useCallback)(
-      (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]
     );
@@ -17857,6 +18215,9 @@ var ButexDocumentEditor2 = (0, import_react13.forwardRef)(
         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);
         }
@@ -18412,6 +18773,18 @@ var ButexDocumentEditor2 = (0, import_react13.forwardRef)(
                             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(