@godxjp/block-editor 33.22.2 → 33.25.0

package/README.md

@@ -44,16 +44,16 @@ import { BlockEditor } from "@godxjp/block-editor";
 
 ## Contract
 
-| prop                                                                     |                                                          |
-| ------------------------------------------------------------------------ | -------------------------------------------------------- |
-| `value` / `defaultValue` / `onValueChange`                               | Markdown in, canonical Markdown out                      |
-| `upload(file, { signal })`                                               | `→ { url, name? }` — the same shape as `MarkdownEditor`  |
-| `pickMedia()`                                                            | `→ { url, name? } \| null` — the host's library          |
-| `suggestWikilinks(query)`                                                | `→ { target, label?, heading?, description? }[]`         |
-| `renderEmbed(target)`                                                    | a block embed `![[target]]`                              |
-| `resolveUrl(url)`                                                        | display URL for a stored one (`asset:<id>`)              |
-| `directives`                                                             | `{ [name]: (block) => ReactNode \| undefined }` previews |
-| `actions`, `labels`, `disabled`, `readOnly`, `autoFocus`, `aria-*`, `id` |                                                          |
+| prop                                                                     |                                                                    |
+| ------------------------------------------------------------------------ | ------------------------------------------------------------------ |
+| `value` / `defaultValue` / `onValueChange`                               | Markdown in, canonical Markdown out                                |
+| `upload(file, { signal })`                                               | `→ { url, name? }` — the same shape as `MarkdownEditor`            |
+| `pickMedia()`                                                            | `→ { url, name? } \| null` — the host's library                    |
+| `suggestWikilinks(query)`                                                | `→ { target, label?, heading?, description? }[]`                   |
+| `renderEmbed(target)`                                                    | a block embed `![[target]]`                                        |
+| `resolveUrl(url)`                                                        | display URL for a stored one (`asset:<id>`)                        |
+| `directives`                                                             | `{ [name]: (block, controls) => ReactNode \| undefined }` previews |
+| `actions`, `labels`, `disabled`, `readOnly`, `autoFocus`, `aria-*`, `id` |                                                                    |
 
 ```tsx
 // A poll is a block: the host previews it and inserts its skeleton from the `/` menu.
@@ -75,6 +75,19 @@ import { BlockEditor } from "@godxjp/block-editor";
 />
 ```
 
+A preview can change its own block (gh#1479): `controls.update(markdown)` replaces the block's
+source exactly like "Edit source" → Done (still one directive: the same block, one undo step;
+anything else takes its place), `controls.remove()` deletes it, and `controls.editable` is false in a
+read-only or disabled editor. A host's picker or config form writes its result back this way:
+
+```tsx
+directives={{
+  card: (block, { update, editable }) => (
+    <CardPreview id={block.attributes.card} onPick={editable ? (id) => update(`:::card{card=${id}}\n:::`) : undefined} />
+  ),
+}}
+```
+
 The grammar it reads and writes is specified in `@godxjp/markdown`'s README ("Grammar v1 and the
 codec"). The editor's schema is tested to round-trip every fixture exactly:
 `serialize(editor.getJSON()) === normalize(markdown)`.

package/dist/index.d.ts

@@ -248,8 +248,23 @@ type BlockEditorLabels = {
     [K in keyof (typeof BLOCK_EDITOR_MESSAGES)["en"]]: string;
 };
 
+/**
+ * What a directive preview can do to its own block (gh#1479): a host's picker or config form writes
+ * the result back without the "Edit source" textarea.
+ */
+type BlockEditorDirectiveControls = {
+    /**
+     * Replace the block's Markdown. Parsed like "Edit source" → Done: still one directive, it stays
+     * this block with the new source; anything else (blocks, raw Markdown, nothing) takes its place.
+     */
+    update: (source: string) => void;
+    /** Remove the block. */
+    remove: () => void;
+    /** False in a read-only or disabled editor: the preview should offer no edits. */
+    editable: boolean;
+};
 /** Draws a directive block's preview in the editor; `undefined` shows its source instead. */
-type BlockEditorDirectiveRenderer = (block: DirectiveBlock) => React.ReactNode | undefined;
+type BlockEditorDirectiveRenderer = (block: DirectiveBlock, controls: BlockEditorDirectiveControls) => React.ReactNode | undefined;
 
 /** What the host's storage returns for one file — the same shape as MarkdownEditor's. */
 type BlockEditorUploadResult = {
@@ -465,4 +480,4 @@ declare const TranslatableRichText: React.ForwardRefExoticComponent<Omit<RichTex
     size?: "sm" | "md" | "lg";
 } & React.RefAttributes<RichTextEditorHandle>>;
 
-export { BLOCK_EDITOR_MESSAGES, BlockEditor, type BlockEditorAction, type BlockEditorApi, type BlockEditorDirectiveRenderer, type BlockEditorHandle, type BlockEditorLabels, type BlockEditorProps, type BlockEditorUploadResult, type CalloutTitles, RICH_TEXT_ALLOWED_TAGS, RichTextEditor, type RichTextEditorHandle, type RichTextEditorLabels, type RichTextEditorProps, TranslatableRichText, type TranslatableRichTextProps, type WikilinkSuggestion, schemaExtensions };
+export { BLOCK_EDITOR_MESSAGES, BlockEditor, type BlockEditorAction, type BlockEditorApi, type BlockEditorDirectiveControls, type BlockEditorDirectiveRenderer, type BlockEditorHandle, type BlockEditorLabels, type BlockEditorProps, type BlockEditorUploadResult, type CalloutTitles, RICH_TEXT_ALLOWED_TAGS, RichTextEditor, type RichTextEditorHandle, type RichTextEditorLabels, type RichTextEditorProps, TranslatableRichText, type TranslatableRichTextProps, type WikilinkSuggestion, schemaExtensions };

package/dist/index.js

@@ -1548,10 +1548,8 @@ function DirectiveView({ node, editor, getPos, updateAttributes, selected }) {
   const [draft, setDraft] = React5.useState(source);
   const render = previews && Object.hasOwn(previews, name) ? previews[name] : void 0;
   const block = React5.useMemo(() => render ? readDirective(source) : null, [render, source]);
-  const preview = render && block ? render(block) : void 0;
-  const commit = () => {
-    setEditing(false);
-    const doc = parse(draft);
+  const replace = (markdown) => {
+    const doc = parse(markdown);
     const pos = getPos();
     const [only] = doc.content;
     if (doc.content.length === 1 && only.type === "directive") {
@@ -1561,6 +1559,22 @@ function DirectiveView({ node, editor, getPos, updateAttributes, selected }) {
     if (typeof pos !== "number") return;
     editor.chain().focus().insertContentAt({ from: pos, to: pos + node.nodeSize }, doc.content).run();
   };
+  const controls = {
+    update: (markdown) => {
+      if (editor.isEditable) replace(markdown);
+    },
+    remove: () => {
+      const pos = getPos();
+      if (!editor.isEditable || typeof pos !== "number") return;
+      editor.chain().focus().deleteRange({ from: pos, to: pos + node.nodeSize }).run();
+    },
+    editable: editor.isEditable
+  };
+  const preview = render && block ? render(block, controls) : void 0;
+  const commit = () => {
+    setEditing(false);
+    replace(draft);
+  };
   return /* @__PURE__ */ jsxs5(
     NodeViewWrapper,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/block-editor",
-  "version": "33.22.2",
+  "version": "33.25.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": "~33.22.2",
-    "@godxjp/ui": "~33.22.2",
+    "@godxjp/markdown": "~33.25.0",
+    "@godxjp/ui": "~33.25.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },