@godxjp/block-editor 33.8.1 → 33.10.1

package/README.md

@@ -53,3 +53,30 @@ import { BlockEditor } from "@godxjp/block-editor";
 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)`.
+
+## RichTextEditor and TranslatableRichText — HTML fields
+
+For columns that already hold **HTML** (a product description a storefront renders), the package
+also ships a form field with a fixed toolbar — bold, italic, strike, inline code · H1–H3, bulleted /
+numbered list, quote · undo, redo — and its per-locale form (gh#1365).
+
+```tsx
+import { RichTextEditor, TranslatableRichText } from "@godxjp/block-editor";
+import { FormField } from "@godxjp/ui/data-entry";
+
+<FormField label="説明" required>
+  <TranslatableRichText value={description} onValueChange={setDescription} errors={errors} />
+</FormField>;
+```
+
+- The schema is the sanitiser: `value` (and a paste) is parsed into, and `onValueChange` emits, only
+  `p br h1 h2 h3 ul ol li blockquote strong em s code` (`RICH_TEXT_ALLOWED_TAGS`) with no
+  attributes except an integer `start` on `<ol>`. Anything else — script, links, images, styles, h4–h6, tables — is kept as its text.
+  An empty body is `""`.
+- A `value` from outside (a reset, a locale tab) replaces the document without calling
+  `onValueChange`, and never while an IME composition is open.
+- It takes FormField's `id` / `aria-*` on the editable; `status` / `aria-invalid` paint the frame.
+- `TranslatableRichText` is the kit's `TranslatableField` engine around it — the same contract as
+  `TranslatableInput`: locales and first tab from AppProvider `contentLocales`, per-locale error
+  marks, the active error in FormField, and the fallback locale's text as an empty locale's
+  placeholder.

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Editor, Node, Extensions } from '@tiptap/core';
+import { FieldA11yProps, TranslatableLocaleProp } from '@godxjp/ui/data-entry';
 
 /**
  * The block editor's strings, under its own namespace (`blockEditor`), registered with the kit's
@@ -80,6 +81,9 @@ declare const BLOCK_EDITOR_MESSAGES: {
         readonly replaceImage: "画像を差し替え";
         readonly removeImage: "画像を削除";
         readonly properties: "プロパティ（YAML）";
+        readonly textStyle: "段落スタイル";
+        readonly undo: "元に戻す";
+        readonly redo: "やり直す";
     };
     readonly en: {
         readonly editor: "Editor";
@@ -154,6 +158,9 @@ declare const BLOCK_EDITOR_MESSAGES: {
         readonly replaceImage: "Replace image";
         readonly removeImage: "Remove image";
         readonly properties: "Properties (YAML)";
+        readonly textStyle: "Text style";
+        readonly undo: "Undo";
+        readonly redo: "Redo";
     };
     readonly vi: {
         readonly editor: "Trình soạn thảo";
@@ -228,6 +235,9 @@ declare const BLOCK_EDITOR_MESSAGES: {
         readonly replaceImage: "Thay ảnh";
         readonly removeImage: "Xoá ảnh";
         readonly properties: "Thuộc tính (YAML)";
+        readonly textStyle: "Kiểu đoạn văn";
+        readonly undo: "Hoàn tác";
+        readonly redo: "Làm lại";
     };
 };
 type BlockEditorLabels = {
@@ -348,4 +358,91 @@ declare function schemaExtensions(options: {
     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 };
+/** The strings RichTextEditor renders — a subset of the block editor's `blockEditor.*` catalogue. */
+type RichTextEditorLabels = Pick<BlockEditorLabels, "editor" | "formatting" | "bold" | "italic" | "strike" | "inlineCode" | "textStyle" | "heading1" | "heading2" | "heading3" | "bulletList" | "numberedList" | "quote" | "undo" | "redo">;
+type RichTextEditorProps = FieldA11yProps & {
+    /**
+     * The body as HTML. Controlled with `onValueChange`; uncontrolled with `defaultValue`. Read through
+     * the editor's schema, so only the tags in {@link RICH_TEXT_ALLOWED_TAGS} survive.
+     */
+    value?: string;
+    defaultValue?: string;
+    /** Called with the schema's HTML after each edit — `""` for an empty body, never `<p></p>`. */
+    onValueChange?: (html: string) => void;
+    /** Shown while the body is empty. */
+    placeholder?: string;
+    /** Validation state the frame paints — as on Input. `error` also comes from `aria-invalid`. */
+    status?: "error" | "warning";
+    /** BCP-47 tag of the body's language (spell-check, screen-reader voice, CJK line breaking). */
+    lang?: string;
+    /** Override any string the toolbar renders (defaults: the kit's ja / en / vi catalogue). */
+    labels?: Partial<RichTextEditorLabels>;
+    disabled?: boolean;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+    id?: string;
+    className?: string;
+};
+type RichTextEditorHandle = {
+    focus: () => void;
+    /** The Tiptap editor, for host integrations. */
+    editor: Editor | null;
+};
+/**
+ * Every element `onValueChange` can emit. It is the editor's SCHEMA, not a filter run afterwards:
+ * HTML in `value` (or pasted) is parsed into these nodes and marks, anything else is dropped to its
+ * text, and `getHTML()` writes only these back — with one attribute in all: `start` on an `<ol>`
+ * that does not start at 1, always an integer.
+ */
+declare const RICH_TEXT_ALLOWED_TAGS: readonly ["p", "br", "h1", "h2", "h3", "ul", "ol", "li", "blockquote", "strong", "em", "s", "code"];
+/**
+ * RichTextEditor (gh#1365) — a form field that edits HTML: a fixed toolbar (bold, italic, strike,
+ * inline code · paragraph / H1–H3 / bulleted / numbered list / quote · undo, redo) over a Tiptap
+ * surface whose schema is exactly {@link RICH_TEXT_ALLOWED_TAGS}, so the schema IS the sanitiser on
+ * the way in and on the way out.
+ *
+ * Controlled like the kit's other fields: a new `value` that is not what the editor last emitted
+ * replaces the document WITHOUT calling `onValueChange` (a locale tab, a form reset), and never
+ * while an IME composition is open. It takes FormField's `id` / `aria-*` on the editable itself.
+ */
+declare const RichTextEditor: React.ForwardRefExoticComponent<FieldA11yProps & {
+    /**
+     * The body as HTML. Controlled with `onValueChange`; uncontrolled with `defaultValue`. Read through
+     * the editor's schema, so only the tags in {@link RICH_TEXT_ALLOWED_TAGS} survive.
+     */
+    value?: string;
+    defaultValue?: string;
+    /** Called with the schema's HTML after each edit — `""` for an empty body, never `<p></p>`. */
+    onValueChange?: (html: string) => void;
+    /** Shown while the body is empty. */
+    placeholder?: string;
+    /** Validation state the frame paints — as on Input. `error` also comes from `aria-invalid`. */
+    status?: "error" | "warning";
+    /** BCP-47 tag of the body's language (spell-check, screen-reader voice, CJK line breaking). */
+    lang?: string;
+    /** Override any string the toolbar renders (defaults: the kit's ja / en / vi catalogue). */
+    labels?: Partial<RichTextEditorLabels>;
+    disabled?: boolean;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+    id?: string;
+    className?: string;
+} & React.RefAttributes<RichTextEditorHandle>>;
+
+type TranslatableRichTextProps = Omit<RichTextEditorProps, "value" | "defaultValue" | "onValueChange" | "lang"> & TranslatableLocaleProp & {
+    /** The tab strip's tier, as on TranslatableTextarea (`sm` tabs; `md` for `lg`). */
+    size?: "sm" | "md" | "lg";
+};
+/**
+ * TranslatableRichText (gh#1365) — ONE {@link RichTextEditor} holding an HTML value per locale
+ * (`{ ja, en, vi }`), switched by locale tabs: the kit's `TranslatableField` engine, the same as
+ * `TranslatableInput` / `TranslatableTextarea` (locales and the first tab from AppProvider
+ * `contentLocales`, fallback placeholder, per-locale error marks, FormField error report). An empty
+ * locale shows the fallback locale's TEXT as its placeholder. `ref` is the editor's handle.
+ */
+declare const TranslatableRichText: React.ForwardRefExoticComponent<Omit<RichTextEditorProps, "value" | "lang" | "defaultValue" | "onValueChange"> & TranslatableLocaleProp & {
+    /** The tab strip's tier, as on TranslatableTextarea (`sm` tabs; `md` for `lg`). */
+    size?: "sm" | "md" | "lg";
+} & React.RefAttributes<RichTextEditorHandle>>;
+
+export { BLOCK_EDITOR_MESSAGES, BlockEditor, type BlockEditorAction, type BlockEditorApi, 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

@@ -941,7 +941,10 @@ var BLOCK_EDITOR_MESSAGES = {
     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"
+    properties: "\u30D7\u30ED\u30D1\u30C6\u30A3\uFF08YAML\uFF09",
+    textStyle: "\u6BB5\u843D\u30B9\u30BF\u30A4\u30EB",
+    undo: "\u5143\u306B\u623B\u3059",
+    redo: "\u3084\u308A\u76F4\u3059"
   },
   en: {
     editor: "Editor",
@@ -1015,7 +1018,10 @@ var BLOCK_EDITOR_MESSAGES = {
     imageTitle: "Title (tooltip)",
     replaceImage: "Replace image",
     removeImage: "Remove image",
-    properties: "Properties (YAML)"
+    properties: "Properties (YAML)",
+    textStyle: "Text style",
+    undo: "Undo",
+    redo: "Redo"
   },
   vi: {
     editor: "Tr\xECnh so\u1EA1n th\u1EA3o",
@@ -1089,7 +1095,10 @@ var BLOCK_EDITOR_MESSAGES = {
     imageTitle: "Ti\xEAu \u0111\u1EC1 (ch\xFA gi\u1EA3i)",
     replaceImage: "Thay \u1EA3nh",
     removeImage: "Xo\xE1 \u1EA3nh",
-    properties: "Thu\u1ED9c t\xEDnh (YAML)"
+    properties: "Thu\u1ED9c t\xEDnh (YAML)",
+    textStyle: "Ki\u1EC3u \u0111o\u1EA1n v\u0103n",
+    undo: "Ho\xE0n t\xE1c",
+    redo: "L\xE0m l\u1EA1i"
   }
 };
 var registered = false;
@@ -1221,27 +1230,29 @@ 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"];
+var activeMarks = (editor) => MARKS.filter((mark) => editor.isActive(mark));
+function applyMarks(editor, current, next) {
+  const chain = editor.chain().focus();
+  for (const mark of MARKS) {
+    const on = next.includes(mark);
+    if (on === current.includes(mark)) continue;
+    if (mark === "bold") chain.toggleBold();
+    else if (mark === "italic") chain.toggleItalic();
+    else if (mark === "strike") chain.toggleStrike();
+    else chain.toggleCode();
+  }
+  chain.run();
+}
 function FormatToolbar({ editor, onEditLink }) {
   const label = useLabel();
   const state = useEditorState({
     editor,
     selector: ({ editor: e }) => ({
-      marks: MARKS.filter((mark) => e.isActive(mark)),
+      marks: activeMarks(e),
       link: e.getAttributes("link").href ?? null
     })
   });
-  const toggle = (next) => {
-    const chain = editor.chain().focus();
-    for (const mark of MARKS) {
-      const on = next.includes(mark);
-      if (on === state.marks.includes(mark)) continue;
-      if (mark === "bold") chain.toggleBold();
-      else if (mark === "italic") chain.toggleItalic();
-      else if (mark === "strike") chain.toggleStrike();
-      else chain.toggleCode();
-    }
-    chain.run();
-  };
+  const toggle = (next) => applyMarks(editor, state.marks, next);
   return /* @__PURE__ */ jsx4(
     BubbleMenu,
     {
@@ -2333,8 +2344,354 @@ var BlockEditor = React6.forwardRef(
     ) });
   }
 );
+
+// src/rich-text-editor.tsx
+import * as React7 from "react";
+import { EditorContent as EditorContent2, useEditor as useEditor2, useEditorState as useEditorState2 } from "@tiptap/react";
+import StarterKit2 from "@tiptap/starter-kit";
+import { OrderedList } from "@tiptap/extension-list";
+import { Placeholder as Placeholder2 } from "@tiptap/extensions";
+import {
+  Bold as Bold2,
+  Code as Code3,
+  Heading1 as Heading12,
+  Heading2 as Heading22,
+  Heading3 as Heading32,
+  Italic as Italic2,
+  List as List2,
+  ListOrdered as ListOrdered2,
+  Redo2,
+  Strikethrough as Strikethrough2,
+  TextQuote,
+  Undo2
+} from "lucide-react";
+import { Toggle } from "@godxjp/ui/data-entry";
+import { Button as Button5 } from "@godxjp/ui/general";
+import { Flex as Flex2 } from "@godxjp/ui/layout";
+import { useTranslation as useTranslation2 } from "@godxjp/ui/i18n";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var RICH_TEXT_ALLOWED_TAGS = [
+  "p",
+  "br",
+  "h1",
+  "h2",
+  "h3",
+  "ul",
+  "ol",
+  "li",
+  "blockquote",
+  "strong",
+  "em",
+  "s",
+  "code"
+];
+var OrderedListStartOnly = OrderedList.extend({
+  addAttributes() {
+    return {
+      start: {
+        default: 1,
+        parseHTML: (element) => {
+          const start = Number.parseInt(element.getAttribute("start") ?? "", 10);
+          return Number.isSafeInteger(start) ? start : 1;
+        }
+      }
+    };
+  }
+});
+var richTextExtensions = (placeholder) => [
+  StarterKit2.configure({
+    heading: { levels: [1, 2, 3] },
+    codeBlock: false,
+    horizontalRule: false,
+    link: false,
+    underline: false,
+    trailingNode: false,
+    orderedList: false
+  }),
+  OrderedListStartOnly,
+  Placeholder2.configure({ placeholder })
+];
+var activeBlock = (editor) => {
+  for (const level of [1, 2, 3]) {
+    if (editor.isActive("heading", { level })) return `heading${level}`;
+  }
+  if (editor.isActive("bulletList")) return "bulletList";
+  if (editor.isActive("orderedList")) return "orderedList";
+  if (editor.isActive("blockquote")) return "quote";
+  return "";
+};
+function applyBlock(editor, next) {
+  const chain = editor.chain().focus().clearNodes();
+  if (next === "heading1") chain.setHeading({ level: 1 });
+  else if (next === "heading2") chain.setHeading({ level: 2 });
+  else if (next === "heading3") chain.setHeading({ level: 3 });
+  else if (next === "bulletList") chain.toggleBulletList();
+  else if (next === "orderedList") chain.toggleOrderedList();
+  else if (next === "quote") chain.toggleBlockquote();
+  chain.run();
+}
+var htmlOf = (editor) => editor.isEmpty ? "" : editor.getHTML();
+var RichTextEditor = React7.forwardRef(
+  function RichTextEditor2({
+    value: valueProp,
+    defaultValue = "",
+    onValueChange,
+    placeholder,
+    status,
+    lang,
+    labels,
+    disabled = false,
+    readOnly = false,
+    autoFocus = false,
+    id,
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "aria-errormessage": ariaErrormessage,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    "data-field": dataField
+  }, ref) {
+    ensureBlockEditorMessages();
+    const { t } = useTranslation2();
+    const label = (key) => labels?.[key] ?? t(`blockEditor.${key}`);
+    const onValueChangeRef = React7.useRef(onValueChange);
+    onValueChangeRef.current = onValueChange;
+    const placeholderRef = React7.useRef(placeholder ?? "");
+    placeholderRef.current = placeholder ?? "";
+    const initial = valueProp ?? defaultValue;
+    const lastHtml = React7.useRef(initial);
+    const extensions = React7.useMemo(() => richTextExtensions(() => placeholderRef.current), []);
+    const invalid = status === "error" || ariaInvalid === true || ariaInvalid === "true";
+    const editor = useEditor2({
+      extensions,
+      content: initial,
+      editable: !disabled && !readOnly,
+      autofocus: autoFocus ? "end" : false,
+      immediatelyRender: false,
+      editorProps: {
+        // Re-applied on every render by useEditor, so `lang`, the FormField ids and the error state
+        // follow the props (a locale tab switches `lang` on this same node).
+        attributes: Object.fromEntries(
+          Object.entries({
+            class: "ui-prose ui-block-editor-content",
+            role: "textbox",
+            "aria-multiline": "true",
+            id,
+            lang,
+            "aria-label": ariaLabelledby ? void 0 : ariaLabel ?? label("editor"),
+            "aria-labelledby": ariaLabelledby,
+            "aria-describedby": ariaDescribedby,
+            "aria-errormessage": ariaErrormessage,
+            "aria-invalid": invalid ? "true" : void 0,
+            "aria-required": ariaRequired ? String(ariaRequired) : void 0,
+            "aria-placeholder": placeholder || void 0,
+            "aria-readonly": readOnly ? "true" : void 0,
+            "aria-disabled": disabled ? "true" : void 0,
+            "data-field": dataField
+          }).filter((entry) => entry[1] !== void 0)
+        )
+      },
+      onUpdate: ({ editor: instance }) => {
+        const html = htmlOf(instance);
+        if (html === lastHtml.current) return;
+        lastHtml.current = html;
+        onValueChangeRef.current?.(html);
+      }
+    });
+    React7.useEffect(() => {
+      if (!editor || valueProp === void 0) return;
+      if (valueProp === lastHtml.current || editor.view.composing) return;
+      lastHtml.current = valueProp;
+      editor.commands.setContent(valueProp, { emitUpdate: false });
+    }, [editor, valueProp]);
+    React7.useEffect(() => {
+      editor?.setEditable(!disabled && !readOnly);
+    }, [editor, disabled, readOnly]);
+    React7.useImperativeHandle(ref, () => ({ focus: () => editor?.commands.focus(), editor }), [
+      editor
+    ]);
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: ["ui-rich-text-editor", className].filter(Boolean).join(" "),
+        "data-status": invalid ? "error" : status,
+        "data-disabled": disabled ? "" : void 0,
+        children: [
+          editor && !readOnly ? /* @__PURE__ */ jsx8(RichTextToolbar, { editor, disabled, label }) : null,
+          /* @__PURE__ */ jsx8(EditorContent2, { editor })
+        ]
+      }
+    );
+  }
+);
+function RichTextToolbar({
+  editor,
+  disabled,
+  label
+}) {
+  const state = useEditorState2({
+    editor,
+    selector: ({ editor: e }) => ({
+      marks: activeMarks(e),
+      block: activeBlock(e),
+      canUndo: e.can().undo(),
+      canRedo: e.can().redo()
+    })
+  });
+  const [focusKey, setFocusKey] = React7.useState("bold");
+  const enabledKeys = disabled ? [] : [
+    "bold",
+    "italic",
+    "strike",
+    "code",
+    "heading1",
+    "heading2",
+    "heading3",
+    "bulletList",
+    "orderedList",
+    "quote",
+    ...state.canUndo ? ["undo"] : [],
+    ...state.canRedo ? ["redo"] : []
+  ];
+  const tabStop = enabledKeys.includes(focusKey) ? focusKey : enabledKeys[0];
+  const focusProps = (key) => ({
+    "data-command": key,
+    tabIndex: key === tabStop ? 0 : -1,
+    onFocus: () => setFocusKey(key)
+  });
+  const marks = [
+    ["bold", "bold", Bold2],
+    ["italic", "italic", Italic2],
+    ["strike", "strike", Strikethrough2],
+    ["code", "inlineCode", Code3]
+  ];
+  const blocks = [
+    [
+      ["heading1", "heading1", Heading12],
+      ["heading2", "heading2", Heading22],
+      ["heading3", "heading3", Heading32]
+    ],
+    [
+      ["bulletList", "bulletList", List2],
+      ["orderedList", "numberedList", ListOrdered2],
+      ["quote", "quote", TextQuote]
+    ]
+  ];
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: "ui-rich-text-editor-toolbar",
+      role: "toolbar",
+      "aria-label": label("formatting"),
+      "aria-orientation": "horizontal",
+      onKeyDown: (event) => {
+        if (event.altKey || event.ctrlKey || event.metaKey || !enabledKeys.length) return;
+        const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+        const index = enabledKeys.indexOf(event.target.dataset.command ?? "");
+        let next;
+        if (event.key === "Home") next = 0;
+        else if (event.key === "End") next = enabledKeys.length - 1;
+        else if (event.key === "ArrowRight") next = index + (rtl ? -1 : 1);
+        else if (event.key === "ArrowLeft") next = index + (rtl ? 1 : -1);
+        else return;
+        event.preventDefault();
+        const key = enabledKeys[(next + enabledKeys.length) % enabledKeys.length];
+        event.currentTarget.querySelector(`[data-command="${key}"]`)?.focus();
+      },
+      children: [
+        /* @__PURE__ */ jsx8(Flex2, { direction: "row", gap: "xs", children: marks.map(([key, labelKey, Icon]) => /* @__PURE__ */ jsx8(
+          Toggle,
+          {
+            type: "button",
+            size: "sm",
+            variant: "quiet",
+            "aria-label": label(labelKey),
+            title: label(labelKey),
+            pressed: state.marks.includes(key),
+            onPressedChange: (pressed) => applyMarks(
+              editor,
+              state.marks,
+              pressed ? [...state.marks, key] : state.marks.filter((mark) => mark !== key)
+            ),
+            disabled,
+            ...focusProps(key),
+            children: /* @__PURE__ */ jsx8(Icon, { "aria-hidden": "true" })
+          },
+          key
+        )) }),
+        blocks.map((group, index) => /* @__PURE__ */ jsx8(Flex2, { direction: "row", gap: "xs", children: group.map(([key, labelKey, Icon]) => /* @__PURE__ */ jsx8(
+          Toggle,
+          {
+            type: "button",
+            size: "sm",
+            variant: "quiet",
+            "aria-label": label(labelKey),
+            title: label(labelKey),
+            pressed: state.block === key,
+            onPressedChange: (pressed) => applyBlock(editor, pressed ? key : ""),
+            disabled,
+            ...focusProps(key),
+            children: /* @__PURE__ */ jsx8(Icon, { "aria-hidden": "true" })
+          },
+          key
+        )) }, index)),
+        /* @__PURE__ */ jsxs7(Flex2, { direction: "row", gap: "xs", children: [
+          /* @__PURE__ */ jsx8(
+            Button5,
+            {
+              type: "button",
+              size: "icon-sm",
+              variant: "ghost",
+              "aria-label": label("undo"),
+              title: label("undo"),
+              disabled: disabled || !state.canUndo,
+              onClick: () => editor.chain().focus().undo().run(),
+              ...focusProps("undo"),
+              children: /* @__PURE__ */ jsx8(Undo2, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            Button5,
+            {
+              type: "button",
+              size: "icon-sm",
+              variant: "ghost",
+              "aria-label": label("redo"),
+              title: label("redo"),
+              disabled: disabled || !state.canRedo,
+              onClick: () => editor.chain().focus().redo().run(),
+              ...focusProps("redo"),
+              children: /* @__PURE__ */ jsx8(Redo2, { "aria-hidden": "true" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/translatable-rich-text.tsx
+import * as React8 from "react";
+import { TranslatableField } from "@godxjp/ui/data-entry";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var htmlToText = (html) => typeof DOMParser === "undefined" ? html.replace(/<[^>]*>/g, "").trim() : new DOMParser().parseFromString(html, "text/html").body.textContent?.trim() ?? "";
+var TranslatableRichText = React8.forwardRef(function TranslatableRichText2(props, ref) {
+  return /* @__PURE__ */ jsx9(
+    TranslatableField,
+    {
+      ...props,
+      toPlaceholder: htmlToText,
+      renderControl: ({ size: _size, ...control }) => /* @__PURE__ */ jsx9(RichTextEditor, { ...control, ref })
+    }
+  );
+});
 export {
   BLOCK_EDITOR_MESSAGES,
   BlockEditor,
+  RICH_TEXT_ALLOWED_TAGS,
+  RichTextEditor,
+  TranslatableRichText,
   schemaExtensions
 };

package/package.json

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