@godxjp/block-editor 31.27.0 → 31.28.0

package/dist/index.d.ts

@@ -59,6 +59,27 @@ declare const BLOCK_EDITOR_MESSAGES: {
         readonly calloutImportant: "重要";
         readonly calloutWarning: "警告";
         readonly calloutCaution: "注意";
+        readonly calloutKind: "コールアウトの種類";
+        readonly calloutTitle: "コールアウトの見出し";
+        readonly addColumn: "列を追加";
+        readonly removeColumn: "この列を削除";
+        readonly columnWidth: "この列の幅";
+        readonly widthAuto: "自動";
+        readonly expandToggle: "開く";
+        readonly collapseToggle: "閉じる";
+        readonly editLink: "リンクを編集";
+        readonly linkText: "表示テキスト";
+        readonly linkTitle: "タイトル（ツールチップ）";
+        readonly openLink: "リンクを開く";
+        readonly save: "保存";
+        readonly editImage: "画像を編集";
+        readonly imageSrc: "画像のURL";
+        readonly imageAlt: "代替テキスト";
+        readonly imageAltHint: "画像が見えない人のための説明。装飾だけの画像なら空にします。";
+        readonly imageTitle: "タイトル（ツールチップ）";
+        readonly replaceImage: "画像を差し替え";
+        readonly removeImage: "画像を削除";
+        readonly properties: "プロパティ（YAML）";
     };
     readonly en: {
         readonly editor: "Editor";
@@ -112,6 +133,27 @@ declare const BLOCK_EDITOR_MESSAGES: {
         readonly calloutImportant: "Important";
         readonly calloutWarning: "Warning";
         readonly calloutCaution: "Caution";
+        readonly calloutKind: "Callout type";
+        readonly calloutTitle: "Callout title";
+        readonly addColumn: "Add a column";
+        readonly removeColumn: "Remove this column";
+        readonly columnWidth: "This column's width";
+        readonly widthAuto: "Auto";
+        readonly expandToggle: "Expand";
+        readonly collapseToggle: "Collapse";
+        readonly editLink: "Edit link";
+        readonly linkText: "Text";
+        readonly linkTitle: "Title (tooltip)";
+        readonly openLink: "Open link";
+        readonly save: "Save";
+        readonly editImage: "Edit image";
+        readonly imageSrc: "Image URL";
+        readonly imageAlt: "Alternative text";
+        readonly imageAltHint: "Describes the image for people who cannot see it. Leave empty for a purely decorative image.";
+        readonly imageTitle: "Title (tooltip)";
+        readonly replaceImage: "Replace image";
+        readonly removeImage: "Remove image";
+        readonly properties: "Properties (YAML)";
     };
     readonly vi: {
         readonly editor: "Trình soạn thảo";
@@ -165,6 +207,27 @@ declare const BLOCK_EDITOR_MESSAGES: {
         readonly calloutImportant: "Quan trọng";
         readonly calloutWarning: "Cảnh báo";
         readonly calloutCaution: "Thận trọng";
+        readonly calloutKind: "Loại chú thích";
+        readonly calloutTitle: "Tiêu đề chú thích";
+        readonly addColumn: "Thêm cột";
+        readonly removeColumn: "Xoá cột này";
+        readonly columnWidth: "Độ rộng cột này";
+        readonly widthAuto: "Tự động";
+        readonly expandToggle: "Mở";
+        readonly collapseToggle: "Thu gọn";
+        readonly editLink: "Sửa liên kết";
+        readonly linkText: "Văn bản hiển thị";
+        readonly linkTitle: "Tiêu đề (chú giải)";
+        readonly openLink: "Mở liên kết";
+        readonly save: "Lưu";
+        readonly editImage: "Sửa ảnh";
+        readonly imageSrc: "URL ảnh";
+        readonly imageAlt: "Văn bản thay thế";
+        readonly imageAltHint: "Mô tả ảnh cho người không nhìn thấy. Để trống nếu ảnh chỉ để trang trí.";
+        readonly imageTitle: "Tiêu đề (chú giải)";
+        readonly replaceImage: "Thay ảnh";
+        readonly removeImage: "Xoá ảnh";
+        readonly properties: "Thuộc tính (YAML)";
     };
 };
 type BlockEditorLabels = {
@@ -224,6 +287,11 @@ type BlockEditorProps = {
     actions?: readonly BlockEditorAction[];
     /** Override any string the editor renders (defaults: the kit's ja / en / vi catalogue). */
     labels?: Partial<BlockEditorLabels>;
+    /**
+     * `framed` (default): a field's border and padding, so the editor reads as an editor inside a
+     * form. `plain`: no frame — the borderless Notion-style canvas for a full-page editor.
+     */
+    appearance?: "framed" | "plain";
     disabled?: boolean;
     readOnly?: boolean;
     autoFocus?: boolean;
@@ -273,6 +341,11 @@ declare function schemaExtensions(options: {
     rawBlock?: Node;
     /** Resolves a stored image URL (`asset:<id>`) to one the browser can load; the doc keeps the original. */
     resolveUrl?: (url: string) => string | undefined;
+    callout?: Node;
+    columns?: Node;
+    frontmatter?: Node;
+    /** The toggle button's accessible name, open and closed. */
+    toggleLabel?: (open: boolean) => string;
 }): Extensions;
 
 export { BLOCK_EDITOR_MESSAGES, BlockEditor, type BlockEditorAction, type BlockEditorApi, type BlockEditorHandle, type BlockEditorLabels, type BlockEditorProps, type BlockEditorUploadResult, type CalloutTitles, type WikilinkSuggestion, schemaExtensions };

package/dist/index.js

@@ -2,6 +2,7 @@
 
 // src/block-editor.tsx
 import * as React6 from "react";
+import { getMarkRange } from "@tiptap/core";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { FileText } from "lucide-react";
 import { normalize, parse as parse2, serialize } from "@godxjp/markdown/codec";
@@ -20,8 +21,22 @@ function blockStartAt(editor, pos) {
   }
   return $pos.before(1);
 }
+function liveSelection(editor) {
+  let { from, to } = editor.state.selection;
+  const dom = editor.view.dom.ownerDocument.getSelection();
+  if (dom?.anchorNode && dom.focusNode && editor.view.dom.contains(dom.anchorNode)) {
+    try {
+      const anchor = editor.view.posAtDOM(dom.anchorNode, dom.anchorOffset);
+      const head = editor.view.posAtDOM(dom.focusNode, dom.focusOffset);
+      from = Math.min(anchor, head);
+      to = Math.max(anchor, head);
+    } catch {
+    }
+  }
+  return { from, to };
+}
 function selectionBlockStart(editor) {
-  return blockStartAt(editor, editor.state.selection.from);
+  return blockStartAt(editor, liveSelection(editor).from);
 }
 function nodeAt(editor, start) {
   const node = editor.state.doc.nodeAt(start);
@@ -88,7 +103,7 @@ function startBlockDrag(editor, start, event) {
 var BlockKeys = Extension.create({
   name: "blockKeys",
   addOptions() {
-    return { openMenu: () => void 0 };
+    return { openMenu: () => void 0, editLink: () => void 0 };
   },
   addKeyboardShortcuts() {
     const move = (direction) => () => {
@@ -98,6 +113,11 @@ var BlockKeys = Extension.create({
     return {
       "Alt-Shift-ArrowUp": move(-1),
       "Alt-Shift-ArrowDown": move(1),
+      // The link drawer for the link under the caret, or a new link on the selection.
+      "Mod-k": () => {
+        this.options.editLink();
+        return true;
+      },
       "Mod-/": () => {
         const start = selectionBlockStart(this.editor);
         if (start == null) return false;
@@ -575,6 +595,27 @@ var Embed = Node.create({
     ];
   }
 });
+var Frontmatter = Node.create({
+  name: "frontmatter",
+  group: "block",
+  atom: true,
+  addAttributes() {
+    return { source: { default: "" } };
+  },
+  parseHTML() {
+    return [{ tag: "pre[data-frontmatter]" }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "pre",
+      mergeAttributes(HTMLAttributes, {
+        "data-frontmatter": "",
+        class: "ui-block-editor-raw-block"
+      }),
+      node.attrs.source
+    ];
+  }
+});
 var RawBlock = Node.create({
   name: "rawBlock",
   group: "block",
@@ -623,17 +664,28 @@ function schemaExtensions(options) {
         ];
       }
     }).configure({ inline: true, allowBase64: false }),
-    Details.configure({ persist: false }),
+    Details.configure({
+      persist: false,
+      renderToggleButton: ({ element, isOpen }) => {
+        element.className = "ui-block-editor-toggle-button";
+        element.setAttribute("aria-expanded", String(isOpen));
+        element.setAttribute(
+          "aria-label",
+          options.toggleLabel?.(isOpen) ?? (isOpen ? "Collapse" : "Expand")
+        );
+      }
+    }),
     DetailsSummary,
     DetailsContent,
-    Callout.configure({ titles: options.calloutTitles }),
-    Columns,
+    (options.callout ?? Callout).configure({ titles: options.calloutTitles }),
+    options.columns ?? Columns,
     Column,
     Wikilink,
     EmbedInline,
     RawInline,
     options.embed ?? Embed,
     options.rawBlock ?? RawBlock,
+    options.frontmatter ?? Frontmatter,
     Placeholder.configure({
       includeChildren: true,
       placeholder: ({ node }) => {
@@ -860,7 +912,28 @@ var BLOCK_EDITOR_MESSAGES = {
     calloutTip: "\u30D2\u30F3\u30C8",
     calloutImportant: "\u91CD\u8981",
     calloutWarning: "\u8B66\u544A",
-    calloutCaution: "\u6CE8\u610F"
+    calloutCaution: "\u6CE8\u610F",
+    calloutKind: "\u30B3\u30FC\u30EB\u30A2\u30A6\u30C8\u306E\u7A2E\u985E",
+    calloutTitle: "\u30B3\u30FC\u30EB\u30A2\u30A6\u30C8\u306E\u898B\u51FA\u3057",
+    addColumn: "\u5217\u3092\u8FFD\u52A0",
+    removeColumn: "\u3053\u306E\u5217\u3092\u524A\u9664",
+    columnWidth: "\u3053\u306E\u5217\u306E\u5E45",
+    widthAuto: "\u81EA\u52D5",
+    expandToggle: "\u958B\u304F",
+    collapseToggle: "\u9589\u3058\u308B",
+    editLink: "\u30EA\u30F3\u30AF\u3092\u7DE8\u96C6",
+    linkText: "\u8868\u793A\u30C6\u30AD\u30B9\u30C8",
+    linkTitle: "\u30BF\u30A4\u30C8\u30EB\uFF08\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\uFF09",
+    openLink: "\u30EA\u30F3\u30AF\u3092\u958B\u304F",
+    save: "\u4FDD\u5B58",
+    editImage: "\u753B\u50CF\u3092\u7DE8\u96C6",
+    imageSrc: "\u753B\u50CF\u306EURL",
+    imageAlt: "\u4EE3\u66FF\u30C6\u30AD\u30B9\u30C8",
+    imageAltHint: "\u753B\u50CF\u304C\u898B\u3048\u306A\u3044\u4EBA\u306E\u305F\u3081\u306E\u8AAC\u660E\u3002\u88C5\u98FE\u3060\u3051\u306E\u753B\u50CF\u306A\u3089\u7A7A\u306B\u3057\u307E\u3059\u3002",
+    imageTitle: "\u30BF\u30A4\u30C8\u30EB\uFF08\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\uFF09",
+    replaceImage: "\u753B\u50CF\u3092\u5DEE\u3057\u66FF\u3048",
+    removeImage: "\u753B\u50CF\u3092\u524A\u9664",
+    properties: "\u30D7\u30ED\u30D1\u30C6\u30A3\uFF08YAML\uFF09"
   },
   en: {
     editor: "Editor",
@@ -913,7 +986,28 @@ var BLOCK_EDITOR_MESSAGES = {
     calloutTip: "Tip",
     calloutImportant: "Important",
     calloutWarning: "Warning",
-    calloutCaution: "Caution"
+    calloutCaution: "Caution",
+    calloutKind: "Callout type",
+    calloutTitle: "Callout title",
+    addColumn: "Add a column",
+    removeColumn: "Remove this column",
+    columnWidth: "This column's width",
+    widthAuto: "Auto",
+    expandToggle: "Expand",
+    collapseToggle: "Collapse",
+    editLink: "Edit link",
+    linkText: "Text",
+    linkTitle: "Title (tooltip)",
+    openLink: "Open link",
+    save: "Save",
+    editImage: "Edit image",
+    imageSrc: "Image URL",
+    imageAlt: "Alternative text",
+    imageAltHint: "Describes the image for people who cannot see it. Leave empty for a purely decorative image.",
+    imageTitle: "Title (tooltip)",
+    replaceImage: "Replace image",
+    removeImage: "Remove image",
+    properties: "Properties (YAML)"
   },
   vi: {
     editor: "Tr\xECnh so\u1EA1n th\u1EA3o",
@@ -966,7 +1060,28 @@ var BLOCK_EDITOR_MESSAGES = {
     calloutTip: "M\u1EB9o",
     calloutImportant: "Quan tr\u1ECDng",
     calloutWarning: "C\u1EA3nh b\xE1o",
-    calloutCaution: "Th\u1EADn tr\u1ECDng"
+    calloutCaution: "Th\u1EADn tr\u1ECDng",
+    calloutKind: "Lo\u1EA1i ch\xFA th\xEDch",
+    calloutTitle: "Ti\xEAu \u0111\u1EC1 ch\xFA th\xEDch",
+    addColumn: "Th\xEAm c\u1ED9t",
+    removeColumn: "Xo\xE1 c\u1ED9t n\xE0y",
+    columnWidth: "\u0110\u1ED9 r\u1ED9ng c\u1ED9t n\xE0y",
+    widthAuto: "T\u1EF1 \u0111\u1ED9ng",
+    expandToggle: "M\u1EDF",
+    collapseToggle: "Thu g\u1ECDn",
+    editLink: "S\u1EEDa li\xEAn k\u1EBFt",
+    linkText: "V\u0103n b\u1EA3n hi\u1EC3n th\u1ECB",
+    linkTitle: "Ti\xEAu \u0111\u1EC1 (ch\xFA gi\u1EA3i)",
+    openLink: "M\u1EDF li\xEAn k\u1EBFt",
+    save: "L\u01B0u",
+    editImage: "S\u1EEDa \u1EA3nh",
+    imageSrc: "URL \u1EA3nh",
+    imageAlt: "V\u0103n b\u1EA3n thay th\u1EBF",
+    imageAltHint: "M\xF4 t\u1EA3 \u1EA3nh cho ng\u01B0\u1EDDi kh\xF4ng nh\xECn th\u1EA5y. \u0110\u1EC3 tr\u1ED1ng n\u1EBFu \u1EA3nh ch\u1EC9 \u0111\u1EC3 trang tr\xED.",
+    imageTitle: "Ti\xEAu \u0111\u1EC1 (ch\xFA gi\u1EA3i)",
+    replaceImage: "Thay \u1EA3nh",
+    removeImage: "Xo\xE1 \u1EA3nh",
+    properties: "Thu\u1ED9c t\xEDnh (YAML)"
   }
 };
 var registered = false;
@@ -1091,18 +1206,15 @@ function SuggestionMenu({
 }
 
 // src/toolbar.tsx
-import * as React4 from "react";
 import { useEditorState } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
 import { Bold, Code as Code2, Italic, Link2, Strikethrough } from "lucide-react";
-import { Input, ToggleGroup, ToggleGroupItem } from "@godxjp/ui/data-entry";
+import { ToggleGroup, ToggleGroupItem } from "@godxjp/ui/data-entry";
 import { Button as Button2 } from "@godxjp/ui/general";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var MARKS = ["bold", "italic", "strike", "code"];
-function FormatToolbar({ editor }) {
+function FormatToolbar({ editor, onEditLink }) {
   const label = useLabel();
-  const [linking, setLinking] = React4.useState(false);
-  const [href, setHref] = React4.useState("");
   const state = useEditorState({
     editor,
     selector: ({ editor: e }) => ({
@@ -1122,13 +1234,6 @@ function FormatToolbar({ editor }) {
     }
     chain.run();
   };
-  const applyLink = () => {
-    const url = href.trim();
-    const chain = editor.chain().focus().extendMarkRange("link");
-    if (url) chain.setLink({ href: url }).run();
-    else chain.unsetLink().run();
-    setLinking(false);
-  };
   return /* @__PURE__ */ jsx4(
     BubbleMenu,
     {
@@ -1136,49 +1241,7 @@ function FormatToolbar({ editor }) {
       className: "ui-block-editor-toolbar",
       shouldShow: ({ editor: e, state: s }) => e.isEditable && !s.selection.empty && !e.isActive("codeBlock") && s.selection.content().size > 0,
       options: { placement: "top" },
-      children: linking ? /* @__PURE__ */ jsxs3(
-        "form",
-        {
-          className: "ui-block-editor-toolbar-link",
-          onSubmit: (event) => {
-            event.preventDefault();
-            applyLink();
-          },
-          children: [
-            /* @__PURE__ */ jsx4(
-              Input,
-              {
-                size: "sm",
-                type: "url",
-                inputMode: "url",
-                "aria-label": label("linkUrl"),
-                value: href,
-                onValueChange: setHref,
-                onKeyDown: (event) => {
-                  if (event.key === "Escape") {
-                    setLinking(false);
-                    editor.commands.focus();
-                  }
-                },
-                autoFocus: true
-              }
-            ),
-            /* @__PURE__ */ jsx4(Button2, { size: "sm", type: "submit", children: label("applyLink") }),
-            state.link ? /* @__PURE__ */ jsx4(
-              Button2,
-              {
-                size: "sm",
-                variant: "ghost",
-                onClick: () => {
-                  editor.chain().focus().extendMarkRange("link").unsetLink().run();
-                  setLinking(false);
-                },
-                children: label("removeLink")
-              }
-            ) : null
-          ]
-        }
-      ) : /* @__PURE__ */ jsxs3("div", { className: "ui-block-editor-toolbar-row", children: [
+      children: /* @__PURE__ */ jsxs3("div", { className: "ui-block-editor-toolbar-row", children: [
         /* @__PURE__ */ jsxs3(
           ToggleGroup,
           {
@@ -1202,10 +1265,7 @@ function FormatToolbar({ editor }) {
             variant: state.link ? "secondary" : "ghost",
             "aria-label": label("link"),
             "aria-pressed": state.link != null,
-            onClick: () => {
-              setHref(state.link ?? "");
-              setLinking(true);
-            },
+            onClick: onEditLink,
             children: /* @__PURE__ */ jsx4(Link2, {})
           }
         )
@@ -1214,15 +1274,163 @@ function FormatToolbar({ editor }) {
   );
 }
 
+// src/edit-drawer.tsx
+import * as React4 from "react";
+import { ExternalLink, ImageUp, Trash2 as Trash22 } from "lucide-react";
+import { Image as Image2 } from "@godxjp/ui/data-display";
+import { FormField, Input } from "@godxjp/ui/data-entry";
+import { Sheet, SheetBody, SheetContent, SheetFooter, SheetHeader } from "@godxjp/ui/feedback";
+import { Button as Button3 } from "@godxjp/ui/general";
+import { Flex } from "@godxjp/ui/layout";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function EditDrawer({
+  editor,
+  target,
+  onClose,
+  resolveUrl,
+  replaceImage
+}) {
+  const label = useLabel();
+  const [draft, setDraft] = React4.useState(target);
+  React4.useEffect(() => setDraft(target), [target]);
+  if (!draft) return /* @__PURE__ */ jsx5(Sheet, { open: false, onOpenChange: () => void 0 });
+  const set = (patch) => setDraft((d) => d ? { ...d, ...patch } : d);
+  const save = () => {
+    if (draft.kind === "link") {
+      const href = draft.href.trim();
+      const text = draft.text === "" ? href : draft.text;
+      const chain = editor.chain().focus();
+      if (!href) chain.setTextSelection({ from: draft.from, to: draft.to }).unsetLink();
+      else
+        chain.insertContentAt(
+          { from: draft.from, to: draft.to },
+          {
+            type: "text",
+            text,
+            marks: [{ type: "link", attrs: { href, title: draft.title.trim() || null } }]
+          }
+        );
+      chain.run();
+    } else {
+      const { tr } = editor.state;
+      tr.setNodeMarkup(draft.pos, void 0, {
+        ...editor.state.doc.nodeAt(draft.pos)?.attrs,
+        src: draft.src.trim(),
+        alt: draft.alt,
+        title: draft.title.trim() || null
+      });
+      editor.view.dispatch(tr);
+    }
+    onClose();
+  };
+  const remove = () => {
+    if (draft.kind === "link") {
+      editor.chain().focus().setTextSelection({ from: draft.from, to: draft.to }).unsetLink().run();
+    } else {
+      const node = editor.state.doc.nodeAt(draft.pos);
+      if (node)
+        editor.chain().focus().deleteRange({ from: draft.pos, to: draft.pos + node.nodeSize }).run();
+    }
+    onClose();
+  };
+  const preview = draft.kind === "image" ? resolveUrl?.(draft.src) ?? draft.src : "";
+  return /* @__PURE__ */ jsx5(Sheet, { open: true, onOpenChange: (open) => open ? void 0 : onClose(), children: /* @__PURE__ */ jsxs4(SheetContent, { side: "right", responsive: "auto", className: "ui-block-editor-drawer", children: [
+    /* @__PURE__ */ jsx5(SheetHeader, { title: label(draft.kind === "link" ? "editLink" : "editImage") }),
+    /* @__PURE__ */ jsx5(SheetBody, { children: /* @__PURE__ */ jsx5(
+      "form",
+      {
+        id: "block-editor-edit",
+        onSubmit: (event) => {
+          event.preventDefault();
+          save();
+        },
+        children: /* @__PURE__ */ jsx5(Flex, { direction: "col", gap: "md", children: draft.kind === "link" ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx5(FormField, { id: "block-editor-link-text", label: label("linkText"), children: /* @__PURE__ */ jsx5(Input, { value: draft.text, onValueChange: (text) => set({ text }) }) }),
+          /* @__PURE__ */ jsx5(FormField, { id: "block-editor-link-href", label: label("linkUrl"), required: true, children: /* @__PURE__ */ jsx5(
+            Input,
+            {
+              type: "url",
+              inputMode: "url",
+              value: draft.href,
+              onValueChange: (href) => set({ href }),
+              autoFocus: true
+            }
+          ) }),
+          /* @__PURE__ */ jsx5(FormField, { id: "block-editor-link-title", label: label("linkTitle"), children: /* @__PURE__ */ jsx5(Input, { value: draft.title, onValueChange: (title) => set({ title }) }) })
+        ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+          preview ? /* @__PURE__ */ jsx5(
+            Image2,
+            {
+              src: preview,
+              alt: draft.alt,
+              className: "ui-block-editor-drawer-preview"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx5(FormField, { id: "block-editor-image-src", label: label("imageSrc"), required: true, children: /* @__PURE__ */ jsx5(Input, { value: draft.src, onValueChange: (src) => set({ src }) }) }),
+          /* @__PURE__ */ jsx5(
+            FormField,
+            {
+              id: "block-editor-image-alt",
+              label: label("imageAlt"),
+              helper: label("imageAltHint"),
+              children: /* @__PURE__ */ jsx5(Input, { value: draft.alt, onValueChange: (alt) => set({ alt }), autoFocus: true })
+            }
+          ),
+          /* @__PURE__ */ jsx5(FormField, { id: "block-editor-image-title", label: label("imageTitle"), children: /* @__PURE__ */ jsx5(Input, { value: draft.title, onValueChange: (title) => set({ title }) }) })
+        ] }) })
+      }
+    ) }),
+    /* @__PURE__ */ jsx5(SheetFooter, { children: /* @__PURE__ */ jsxs4(Flex, { gap: "sm", wrap: true, justify: "between", className: "ui-block-editor-drawer-actions", children: [
+      /* @__PURE__ */ jsxs4(Flex, { gap: "sm", wrap: true, children: [
+        draft.kind === "link" && draft.href.trim() ? /* @__PURE__ */ jsx5(Button3, { variant: "ghost", size: "sm", asChild: true, children: /* @__PURE__ */ jsxs4("a", { href: draft.href.trim(), target: "_blank", rel: "noopener noreferrer", children: [
+          /* @__PURE__ */ jsx5(ExternalLink, { "aria-hidden": "true" }),
+          label("openLink")
+        ] }) }) : null,
+        draft.kind === "image" && replaceImage ? /* @__PURE__ */ jsxs4(
+          Button3,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => {
+              replaceImage(draft.pos);
+              onClose();
+            },
+            children: [
+              /* @__PURE__ */ jsx5(ImageUp, { "aria-hidden": "true" }),
+              label("replaceImage")
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs4(Button3, { variant: "ghost", size: "sm", onClick: remove, children: [
+          /* @__PURE__ */ jsx5(Trash22, { "aria-hidden": "true" }),
+          label(draft.kind === "link" ? "removeLink" : "removeImage")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx5(Button3, { type: "submit", form: "block-editor-edit", size: "sm", children: label("save") })
+    ] }) })
+  ] }) });
+}
+
 // src/views.tsx
 import * as React5 from "react";
 import { Node as Node2, mergeAttributes as mergeAttributes2 } from "@tiptap/core";
-import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
-import { LoaderCircle, TriangleAlert } from "lucide-react";
+import {
+  NodeViewContent,
+  NodeViewWrapper,
+  ReactNodeViewRenderer
+} from "@tiptap/react";
+import { ChevronDown, LoaderCircle, TriangleAlert } from "lucide-react";
 import { parse } from "@godxjp/markdown/codec";
-import { Textarea } from "@godxjp/ui/data-entry";
-import { Button as Button3, Text } from "@godxjp/ui/general";
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Input as Input2, Select, Textarea } from "@godxjp/ui/data-entry";
+import {
+  DropdownMenu as DropdownMenu2,
+  DropdownMenuContent as DropdownMenuContent2,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger as DropdownMenuTrigger2
+} from "@godxjp/ui/navigation";
+import { Button as Button4, Text } from "@godxjp/ui/general";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function RawBlockView({ node, editor, getPos, updateAttributes, selected }) {
   const tr = useLabel();
   const [editing, setEditing] = React5.useState(false);
@@ -1238,16 +1446,16 @@ function RawBlockView({ node, editor, getPos, updateAttributes, selected }) {
     }
     editor.chain().focus().insertContentAt({ from: pos, to: pos + node.nodeSize }, doc.content).run();
   };
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     NodeViewWrapper,
     {
       className: "ui-block-editor-raw-block",
       "data-selected": selected ? "" : void 0,
       children: [
-        /* @__PURE__ */ jsxs4("div", { className: "ui-block-editor-raw-block-head", contentEditable: false, children: [
-          /* @__PURE__ */ jsx5(Text, { size: "xs", tone: "muted", children: tr("rawBlock") }),
-          editor.isEditable ? /* @__PURE__ */ jsx5(
-            Button3,
+        /* @__PURE__ */ jsxs5("div", { className: "ui-block-editor-raw-block-head", contentEditable: false, children: [
+          /* @__PURE__ */ jsx6(Text, { size: "xs", tone: "muted", children: tr("rawBlock") }),
+          editor.isEditable ? /* @__PURE__ */ jsx6(
+            Button4,
             {
               size: "xs",
               variant: "ghost",
@@ -1256,7 +1464,7 @@ function RawBlockView({ node, editor, getPos, updateAttributes, selected }) {
             }
           ) : null
         ] }),
-        editing ? /* @__PURE__ */ jsx5(
+        editing ? /* @__PURE__ */ jsx6(
           Textarea,
           {
             "aria-label": tr("rawBlock"),
@@ -1269,7 +1477,7 @@ function RawBlockView({ node, editor, getPos, updateAttributes, selected }) {
             },
             autoFocus: true
           }
-        ) : /* @__PURE__ */ jsx5("pre", { className: "ui-block-editor-raw-block-source", contentEditable: false, children: node.attrs.source })
+        ) : /* @__PURE__ */ jsx6("pre", { className: "ui-block-editor-raw-block-source", contentEditable: false, children: node.attrs.source })
       ]
     }
   );
@@ -1277,17 +1485,65 @@ function RawBlockView({ node, editor, getPos, updateAttributes, selected }) {
 function rawBlockNode() {
   return RawBlock.extend({ addNodeView: () => ReactNodeViewRenderer(RawBlockView) });
 }
+function FrontmatterView({ node, updateAttributes, editor, selected }) {
+  const label = useLabel();
+  const [editing, setEditing] = React5.useState(false);
+  const [draft, setDraft] = React5.useState(node.attrs.source);
+  const commit = () => {
+    setEditing(false);
+    updateAttributes({ source: draft });
+  };
+  return /* @__PURE__ */ jsxs5(
+    NodeViewWrapper,
+    {
+      className: "ui-block-editor-raw-block",
+      "data-frontmatter": "",
+      "data-selected": selected ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs5("div", { className: "ui-block-editor-raw-block-head", contentEditable: false, children: [
+          /* @__PURE__ */ jsx6(Text, { size: "xs", tone: "muted", children: label("properties") }),
+          editor.isEditable ? /* @__PURE__ */ jsx6(
+            Button4,
+            {
+              size: "xs",
+              variant: "ghost",
+              onClick: () => editing ? commit() : (setDraft(node.attrs.source), setEditing(true)),
+              children: editing ? label("done") : label("editSource")
+            }
+          ) : null
+        ] }),
+        editing ? /* @__PURE__ */ jsx6(
+          Textarea,
+          {
+            "aria-label": label("properties"),
+            value: draft,
+            rows: Math.min(12, Math.max(3, draft.split("\n").length)),
+            onValueChange: setDraft,
+            onKeyDown: (event) => {
+              event.stopPropagation();
+              if (event.key === "Escape") commit();
+            },
+            autoFocus: true
+          }
+        ) : /* @__PURE__ */ jsx6("pre", { className: "ui-block-editor-raw-block-source", contentEditable: false, children: node.attrs.source })
+      ]
+    }
+  );
+}
+function frontmatterNode() {
+  return Frontmatter.extend({ addNodeView: () => ReactNodeViewRenderer(FrontmatterView) });
+}
 function embedNode(render) {
   function EmbedView({ node, selected }) {
     const tr = useLabel();
     const target = node.attrs.target;
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       NodeViewWrapper,
       {
         className: "ui-block-editor-embed",
         "data-selected": selected ? "" : void 0,
         contentEditable: false,
-        children: render ? render(target) : /* @__PURE__ */ jsx5(Text, { size: "sm", tone: "muted", children: tr("embed", { target }) })
+        children: render ? render(target) : /* @__PURE__ */ jsx6(Text, { size: "sm", tone: "muted", children: tr("embed", { target }) })
       }
     );
   }
@@ -1300,21 +1556,21 @@ function uploadNode(actions) {
     return (
       // A plain span, not NodeViewWrapper: Tiptap's wrapper spreads its `as` prop onto the DOM as an
       // invalid attribute, and this inline view needs nothing else it adds (no drag).
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         "span",
         {
           "data-node-view-wrapper": "",
           className: "ui-block-editor-upload",
           "data-status": status,
           contentEditable: false,
-          children: status === "uploading" ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-            /* @__PURE__ */ jsx5(LoaderCircle, { className: "ui-block-editor-upload-spinner", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx5(Text, { as: "span", size: "sm", tone: "muted", role: "status", children: tr("uploading", { name }) })
-          ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
-            /* @__PURE__ */ jsx5(TriangleAlert, { "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx5(Text, { as: "span", size: "sm", tone: "destructive", role: "alert", children: tr("uploadFailed", { name }) }),
-            /* @__PURE__ */ jsx5(Button3, { size: "xs", variant: "ghost", onClick: () => actions.retry(id), children: tr("retry") }),
-            /* @__PURE__ */ jsx5(Button3, { size: "xs", variant: "ghost", onClick: () => actions.remove(id), children: tr("remove") })
+          children: status === "uploading" ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+            /* @__PURE__ */ jsx6(LoaderCircle, { className: "ui-block-editor-upload-spinner", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx6(Text, { as: "span", size: "sm", tone: "muted", role: "status", children: tr("uploading", { name }) })
+          ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+            /* @__PURE__ */ jsx6(TriangleAlert, { "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx6(Text, { as: "span", size: "sm", tone: "destructive", role: "alert", children: tr("uploadFailed", { name }) }),
+            /* @__PURE__ */ jsx6(Button4, { size: "xs", variant: "ghost", onClick: () => actions.retry(id), children: tr("retry") }),
+            /* @__PURE__ */ jsx6(Button4, { size: "xs", variant: "ghost", onClick: () => actions.remove(id), children: tr("remove") })
           ] })
         }
       )
@@ -1338,9 +1594,143 @@ function uploadNode(actions) {
     addNodeView: () => ReactNodeViewRenderer(UploadView, { as: "span" })
   });
 }
+var CALLOUT_KINDS = ["note", "tip", "important", "warning", "caution"];
+var kindLabelKey = {
+  note: "calloutNote",
+  tip: "calloutTip",
+  important: "calloutImportant",
+  warning: "calloutWarning",
+  caution: "calloutCaution"
+};
+function CalloutView({ node, updateAttributes, editor }) {
+  const label = useLabel();
+  const kind = node.attrs.kind;
+  const title = node.attrs.title ?? "";
+  const defaultTitle = label(kindLabelKey[kind] ?? "calloutNote");
+  return /* @__PURE__ */ jsxs5(NodeViewWrapper, { className: "ui-prose-callout", "data-type": "callout", "data-kind": kind, role: "note", children: [
+    editor.isEditable ? /* @__PURE__ */ jsxs5("div", { className: "ui-block-editor-callout-head", contentEditable: false, children: [
+      /* @__PURE__ */ jsxs5(DropdownMenu2, { children: [
+        /* @__PURE__ */ jsx6(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs5(
+          Button4,
+          {
+            size: "xs",
+            variant: "ghost",
+            "aria-label": `${label("calloutKind")}: ${defaultTitle}`,
+            children: [
+              defaultTitle,
+              /* @__PURE__ */ jsx6(ChevronDown, { "aria-hidden": "true" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx6(DropdownMenuContent2, { align: "start", "aria-label": label("calloutKind"), children: /* @__PURE__ */ jsx6(
+          DropdownMenuRadioGroup,
+          {
+            value: kind,
+            onValueChange: (next) => updateAttributes({ kind: next }),
+            children: CALLOUT_KINDS.map((k) => /* @__PURE__ */ jsx6(DropdownMenuRadioItem, { value: k, children: label(kindLabelKey[k]) }, k))
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx6(
+        Input2,
+        {
+          size: "sm",
+          className: "ui-block-editor-callout-title",
+          "aria-label": label("calloutTitle"),
+          placeholder: defaultTitle,
+          value: title,
+          onValueChange: (next) => updateAttributes({ title: next.trim() === "" ? null : next })
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx6("p", { className: "ui-prose-callout-title", contentEditable: false, children: title || defaultTitle }),
+    /* @__PURE__ */ jsx6(NodeViewContent, { className: "ui-block-editor-callout-body" })
+  ] });
+}
+function calloutNode(base) {
+  return base.extend({ addNodeView: () => ReactNodeViewRenderer(CalloutView) });
+}
+var WIDTHS = [25, 33, 50, 67, 75];
+function ColumnsView({ node, editor, getPos }) {
+  const label = useLabel();
+  const [current, setCurrent] = React5.useState(null);
+  React5.useEffect(() => {
+    const read = () => {
+      const pos = getPos();
+      if (typeof pos !== "number") return setCurrent(null);
+      const { $from } = editor.state.selection;
+      for (let depth = $from.depth; depth > 0; depth--) {
+        if ($from.node(depth).type.name === "columns" && $from.before(depth) === pos) {
+          return setCurrent($from.index(depth));
+        }
+      }
+      setCurrent(null);
+    };
+    read();
+    editor.on("selectionUpdate", read);
+    editor.on("update", read);
+    return () => {
+      editor.off("selectionUpdate", read);
+      editor.off("update", read);
+    };
+  }, [editor, getPos]);
+  const columnPos = (index) => {
+    const pos = getPos();
+    if (typeof pos !== "number") return null;
+    let at = pos + 1;
+    for (let i = 0; i < index; i++) at += node.child(i).nodeSize;
+    return at;
+  };
+  const addColumn = () => {
+    const pos = getPos();
+    if (typeof pos !== "number" || node.childCount >= 4) return;
+    const end = pos + node.nodeSize - 1;
+    const column = editor.schema.nodes.column.create(
+      null,
+      editor.schema.nodes.paragraph.create()
+    );
+    editor.view.dispatch(editor.state.tr.insert(end, column));
+  };
+  const removeColumn = () => {
+    if (current == null || node.childCount <= 2) return;
+    const at = columnPos(current);
+    if (at == null) return;
+    editor.view.dispatch(editor.state.tr.delete(at, at + node.child(current).nodeSize));
+  };
+  const setWidth = (value) => {
+    if (current == null) return;
+    const at = columnPos(current);
+    if (at == null) return;
+    const width2 = value === "auto" ? null : Number(value);
+    editor.view.dispatch(editor.state.tr.setNodeAttribute(at, "width", width2));
+  };
+  const width = current == null ? null : node.child(current).attrs.width ?? null;
+  return /* @__PURE__ */ jsxs5(NodeViewWrapper, { className: "ui-block-editor-columns", "data-type": "columns", children: [
+    editor.isEditable && current != null ? /* @__PURE__ */ jsxs5("div", { className: "ui-block-editor-columns-bar", contentEditable: false, children: [
+      /* @__PURE__ */ jsx6(Button4, { size: "xs", variant: "ghost", disabled: node.childCount >= 4, onClick: addColumn, children: label("addColumn") }),
+      /* @__PURE__ */ jsx6(Button4, { size: "xs", variant: "ghost", disabled: node.childCount <= 2, onClick: removeColumn, children: label("removeColumn") }),
+      /* @__PURE__ */ jsx6(
+        Select,
+        {
+          size: "xs",
+          "aria-label": label("columnWidth"),
+          value: width == null ? "auto" : String(width),
+          onValueChange: setWidth,
+          options: [
+            { value: "auto", label: label("widthAuto") },
+            ...WIDTHS.map((w) => ({ value: String(w), label: `${w}%` }))
+          ]
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsx6(NodeViewContent, { className: "ui-block-editor-columns-content" })
+  ] });
+}
+function columnsNode(base) {
+  return base.extend({ addNodeView: () => ReactNodeViewRenderer(ColumnsView) });
+}
 
 // src/block-editor.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function useSuggestion(toMenuItem, items, pick) {
   const [menu, setMenu] = React6.useState(null);
   const menuRef = React6.useRef(menu);
@@ -1402,6 +1792,7 @@ var BlockEditor = React6.forwardRef(
     resolveUrl,
     actions = [],
     labels,
+    appearance = "framed",
     disabled = false,
     readOnly = false,
     autoFocus = false,
@@ -1426,6 +1817,8 @@ var BlockEditor = React6.forwardRef(
       null
     );
     const fileInput = React6.useRef(null);
+    const [editTarget, setEditTarget] = React6.useState(null);
+    const replacing = React6.useRef(null);
     const live = React6.useRef({
       onValueChange,
       upload,
@@ -1547,6 +1940,65 @@ var BlockEditor = React6.forwardRef(
       }
       fileInput.current?.click();
     }, []);
+    const linkTargetAt = React6.useCallback(
+      (editor2, pos, selection) => {
+        const { state } = editor2;
+        const type = state.schema.marks.link;
+        const $pos = state.doc.resolve(pos);
+        const range = getMarkRange($pos, type);
+        if (range) {
+          const mark = $pos.marks().find((m) => m.type === type) ?? state.doc.nodeAt(range.from)?.marks.find((m) => m.type === type);
+          return {
+            kind: "link",
+            from: range.from,
+            to: range.to,
+            text: state.doc.textBetween(range.from, range.to),
+            href: mark?.attrs.href ?? "",
+            title: mark?.attrs.title ?? ""
+          };
+        }
+        if (selection && selection.from !== selection.to) {
+          return {
+            kind: "link",
+            from: selection.from,
+            to: selection.to,
+            text: state.doc.textBetween(selection.from, selection.to),
+            href: "",
+            title: ""
+          };
+        }
+        return null;
+      },
+      []
+    );
+    const editLinkAtSelection = React6.useCallback(() => {
+      const editor2 = editorRef.current;
+      if (!editor2) return;
+      const { from, to } = liveSelection(editor2);
+      const target = linkTargetAt(editor2, from, { from, to });
+      if (target) setEditTarget(target);
+    }, [linkTargetAt]);
+    const replaceImage = React6.useCallback((pos) => {
+      const editor2 = editorRef.current;
+      if (!editor2) return;
+      const pick = live.current.pickMedia;
+      if (pick) {
+        void pick().then((media) => {
+          const node = editor2.state.doc.nodeAt(pos);
+          if (!media || node?.type.name !== "image") return;
+          editor2.view.dispatch(
+            editor2.state.tr.setNodeMarkup(pos, void 0, {
+              ...node.attrs,
+              src: media.url,
+              alt: media.name ?? node.attrs.alt
+            })
+          );
+        });
+        return;
+      }
+      replacing.current = pos;
+      fileInput.current?.click();
+    }, []);
     const canInsertImage = Boolean(pickMedia || upload);
     const commands = React6.useMemo(() => {
       const builtin = builtinCommands(
@@ -1590,7 +2042,7 @@ var BlockEditor = React6.forwardRef(
         value: `${s.target}#${s.heading ?? ""}`,
         label: s.label ?? s.target,
         description: s.description,
-        icon: /* @__PURE__ */ jsx6(FileText, {})
+        icon: /* @__PURE__ */ jsx7(FileText, {})
       }),
       (query) => live.current.suggestWikilinks?.(query) ?? [],
       (editor2, range, item) => {
@@ -1619,10 +2071,17 @@ var BlockEditor = React6.forwardRef(
           },
           embed: embedNode(renderEmbed),
           rawBlock: rawBlockNode(),
+          frontmatter: frontmatterNode(),
+          callout: calloutNode(Callout),
+          columns: columnsNode(Columns),
+          toggleLabel: (open) => labelRef.current(open ? "collapseToggle" : "expandToggle"),
           resolveUrl
         }),
         uploadNode(uploadActions),
-        BlockKeys.configure({ openMenu: (start) => setMenuRequest({ start, nonce: Date.now() }) }),
+        BlockKeys.configure({
+          openMenu: (start) => setMenuRequest({ start, nonce: Date.now() }),
+          editLink: () => editLinkRef.current()
+        }),
         suggestionTrigger("slashMenu", "/", slash.bridge),
         // A Japanese keyboard types the full-width slash; it opens the same menu.
         suggestionTrigger("slashMenuWide", "\uFF0F", slash.bridge),
@@ -1635,6 +2094,8 @@ var BlockEditor = React6.forwardRef(
       // eslint-disable-next-line react-hooks/exhaustive-deps
       []
     );
+    const editLinkRef = React6.useRef(editLinkAtSelection);
+    editLinkRef.current = editLinkAtSelection;
     const editor = useEditor({
       extensions,
       content: parse2(initial),
@@ -1650,6 +2111,38 @@ var BlockEditor = React6.forwardRef(
           ...ariaLabelledby ? { "aria-labelledby": ariaLabelledby } : { "aria-label": ariaLabel ?? label("editor") },
           ...ariaDescribedby ? { "aria-describedby": ariaDescribedby } : {}
         },
+        // While editing, a link is TEXT, not a way out: the browser follows an <a href> even inside
+        // contenteditable, which left the page mid-edit and lost the work. Cancel the navigation and
+        // let ProseMirror see the click (it opens the link drawer). Read-only, links navigate.
+        handleDOMEvents: {
+          click: (view, event) => {
+            if (view.editable && event.target?.closest?.("a[href]")) {
+              event.preventDefault();
+            }
+            return false;
+          }
+        },
+        // A click on a link or an image opens its settings drawer (text / URL / title; src / alt /
+        // title). Read-only, links behave as links.
+        handleClick: (view, pos) => {
+          const instance = editorRef.current;
+          if (!instance || !view.editable) return false;
+          const target = linkTargetAt(instance, pos);
+          if (!target) return false;
+          setEditTarget(target);
+          return true;
+        },
+        handleClickOn: (view, pos, node) => {
+          if (!view.editable || node.type.name !== "image") return false;
+          setEditTarget({
+            kind: "image",
+            pos,
+            src: node.attrs.src ?? "",
+            alt: node.attrs.alt ?? "",
+            title: node.attrs.title ?? ""
+          });
+          return true;
+        },
         // Copy writes Markdown, so a block pasted into a plain-text field reads as the body does.
         clipboardTextSerializer: (slice) => serialize({ type: "doc", content: slice.content.toJSON() }).trimEnd(),
         handlePaste: (view, event) => {
@@ -1715,7 +2208,7 @@ var BlockEditor = React6.forwardRef(
       editor.chain().focus().insertContent("/").run();
     };
     const menuItems = (state) => (state?.items ?? []).map((c) => ({ value: c.key, label: c.label, icon: c.icon }));
-    return /* @__PURE__ */ jsx6(LabelsContext.Provider, { value: label, children: /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsx7(LabelsContext.Provider, { value: label, children: /* @__PURE__ */ jsxs6(
       "div",
       {
         ref: (node) => {
@@ -1723,10 +2216,11 @@ var BlockEditor = React6.forwardRef(
           setHost(node);
         },
         className: ["ui-block-editor", className].filter(Boolean).join(" "),
+        "data-appearance": appearance,
         "data-disabled": disabled ? "" : void 0,
         children: [
-          editor ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
-            /* @__PURE__ */ jsx6(
+          editor ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+            /* @__PURE__ */ jsx7(
               BlockHandle,
               {
                 editor,
@@ -1736,10 +2230,20 @@ var BlockEditor = React6.forwardRef(
                 menuRequest
               }
             ),
-            /* @__PURE__ */ jsx6(FormatToolbar, { editor })
+            /* @__PURE__ */ jsx7(FormatToolbar, { editor, onEditLink: editLinkAtSelection }),
+            /* @__PURE__ */ jsx7(
+              EditDrawer,
+              {
+                editor,
+                target: editTarget,
+                onClose: () => setEditTarget(null),
+                resolveUrl,
+                replaceImage: pickMedia || upload ? replaceImage : null
+              }
+            )
           ] }) : null,
-          /* @__PURE__ */ jsx6(EditorContent, { editor }),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(EditorContent, { editor }),
+          /* @__PURE__ */ jsx7(
             SuggestionMenu,
             {
               open: slash.menu != null,
@@ -1761,7 +2265,7 @@ var BlockEditor = React6.forwardRef(
               editable: editor?.view.dom ?? null
             }
           ),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             SuggestionMenu,
             {
               open: wiki.menu != null,
@@ -1771,7 +2275,7 @@ var BlockEditor = React6.forwardRef(
                 value: `${s.target}#${s.heading ?? ""}`,
                 label: s.label ?? s.target,
                 description: s.description,
-                icon: /* @__PURE__ */ jsx6(FileText, {})
+                icon: /* @__PURE__ */ jsx7(FileText, {})
               })),
               active: wiki.menu?.active,
               onActiveChange: (active) => wiki.setMenu((m) => m ? { ...m, active } : m),
@@ -1788,8 +2292,8 @@ var BlockEditor = React6.forwardRef(
               editable: editor?.view.dom ?? null
             }
           ),
-          status ? /* @__PURE__ */ jsx6(Text2, { size: "sm", tone: "destructive", role: "alert", className: "ui-block-editor-status", children: status }) : null,
-          canInsertImage && !pickMedia ? /* @__PURE__ */ jsx6(
+          status ? /* @__PURE__ */ jsx7(Text2, { size: "sm", tone: "destructive", role: "alert", className: "ui-block-editor-status", children: status }) : null,
+          canInsertImage && !pickMedia ? /* @__PURE__ */ jsx7(
             "input",
             {
               ref: fileInput,
@@ -1801,7 +2305,18 @@ var BlockEditor = React6.forwardRef(
               onChange: (event) => {
                 const files = [...event.currentTarget.files ?? []];
                 event.currentTarget.value = "";
-                if (editor) startUploads(editor, files);
+                if (!editor) return;
+                const at = replacing.current;
+                replacing.current = null;
+                if (at != null && files.length) {
+                  const node = editor.state.doc.nodeAt(at);
+                  if (node?.type.name === "image") {
+                    editor.view.dispatch(editor.state.tr.delete(at, at + node.nodeSize));
+                  }
+                  startUploads(editor, files.slice(0, 1), at);
+                  return;
+                }
+                startUploads(editor, files);
               }
             }
           ) : null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/block-editor",
-  "version": "31.27.0",
+  "version": "31.28.0",
   "description": "Block editor for GoDX apps (Notion / note.com style) on Tiptap: slash menu, block handles, floating format toolbar; reads and writes Markdown through @godxjp/markdown/codec, IME-safe, ja / en / vi.",
   "type": "module",
   "main": "./dist/index.js",
@@ -45,8 +45,8 @@
     "lucide-react": "^1.37.0"
   },
   "peerDependencies": {
-    "@godxjp/markdown": "~31.27.0",
-    "@godxjp/ui": "~31.27.0",
+    "@godxjp/markdown": "~31.28.0",
+    "@godxjp/ui": "~31.28.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },