@godxjp/editor 31.18.0

package/README.md

@@ -0,0 +1,49 @@
+# @godxjp/editor
+
+The Markdown editor for GoDX apps: a formatting toolbar, write / preview / side by side, a preview
+rendered by [`@godxjp/markdown`](../markdown) (the same sanitiser as the published page), and files
+pasted, dropped or attached through an upload function **the host** provides.
+
+```bash
+pnpm add @godxjp/editor @godxjp/markdown @godxjp/ui lucide-react
+```
+
+```tsx
+import { MarkdownEditor } from "@godxjp/editor";
+import { FormField } from "@godxjp/ui/data-entry";
+
+<FormField id="body" label="本文">
+  <MarkdownEditor
+    value={body}
+    onValueChange={setBody}
+    upload={async (file) => ({ url: await storage.put(file) })}
+  />
+</FormField>;
+```
+
+## Behaviour
+
+- It is the kit's `Textarea`: Japanese IME composition, the native caret, spell-check and the
+  browser's undo keep working. Every toolbar edit is **one** undo step.
+- ⌘/Ctrl + B, I, K — bold, italic, link. Never fire during IME composition.
+- The toolbar is a WAI-ARIA toolbar (one tab stop, arrow keys). In preview, or when `disabled` /
+  `readOnly`, its actions stay focusable but do nothing (`aria-disabled`).
+- Files: `upload(file) => Promise<{ url, name? }>`. A placeholder marks each upload and is replaced
+  by `![name](url)` (images) or `[name](url)`; a failure removes it and says which file failed.
+  `uploadBlockedReason` refuses files with the host's message. Without `upload`, files are ignored.
+- Strings come from the kit's catalogue in ja / en / vi; `labels` overrides any of them.
+
+## Props
+
+| prop                                              |                                                                                                                                                              |
+| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value` / `defaultValue` / `onValueChange`        | The Markdown text.                                                                                                                                           |
+| `mode` / `defaultMode` / `onModeChange`           | `"write" \| "preview" \| "split"`.                                                                                                                           |
+| `upload`, `uploadBlockedReason`                   | Files, through the host's storage.                                                                                                                           |
+| `renderPreview(value)`                            | Replace the preview (an app with its own embeds).                                                                                                            |
+| `actions`                                         | Extra toolbar actions `{ key, label, icon, run(api) }` — the extension point for new block types; `api` has `value`, `selection`, `edit`, `insert`, `focus`. |
+| `labels`                                          | Override strings.                                                                                                                                            |
+| `rows`, `disabled`, `readOnly`, `id`, `aria-*`, … | Passed to the textarea.                                                                                                                                      |
+
+`onKeyDown` from the host runs first; if it calls `preventDefault()`, the editor's shortcut does not
+run — so a mention or link autocomplete wrapped around the editor keeps its keys.

package/dist/index.d.ts

@@ -0,0 +1,211 @@
+import * as React from 'react';
+
+/**
+ * The text operations behind the toolbar and the shortcuts, as pure functions of
+ * (text, selection) → (replacement range, new selection). Pure so they are tested without a DOM,
+ * and so the editor can apply them through `execCommand("insertText")`, which keeps the
+ * browser's own undo stack (a value rewrite would erase it).
+ */
+type Selection = {
+    start: number;
+    end: number;
+};
+/** Replace `[from, to)` with `insert`, then select `select` (absolute offsets in the new text). */
+type TextEdit = {
+    from: number;
+    to: number;
+    insert: string;
+    select: Selection;
+};
+/**
+ * Wrap the selection in `before`…`after` (bold, italic, code). With nothing selected, inserts the
+ * markers around `placeholder` and selects the placeholder, so typing replaces it. A selection that
+ * is already wrapped is unwrapped — the toolbar toggles, as every editor's B button does.
+ */
+declare function wrapSelection(text: string, { start, end }: Selection, before: string, after: string, placeholder: string): TextEdit;
+/**
+ * Prefix every line the selection touches (`## `, `- `, `> `, `- [ ] `). `numbered` writes
+ * `1. `, `2. `… If every touched line already carries the prefix, it is removed instead.
+ */
+declare function prefixLines(text: string, selection: Selection, prefix: string, options?: {
+    numbered?: boolean;
+}): TextEdit;
+/** `[text](url)`: the selection becomes the text and `url` is selected for typing. */
+declare function insertLink(text: string, { start, end }: Selection, placeholder: string): TextEdit;
+/** A fenced block on its own lines around the selection. */
+declare function insertCodeBlock(text: string, { start, end }: Selection): TextEdit;
+/** Apply an edit to a string (the fallback when `execCommand` is unavailable, and in tests). */
+declare function applyEdit(text: string, edit: TextEdit): string;
+/** Markdown for an uploaded file: an image embed for images, a link otherwise. */
+declare function uploadedMarkdown(file: {
+    name: string;
+    type: string;
+}, url: string, name?: string): string;
+
+/**
+ * The editor's strings, under its own namespace (`markdownEditor`), registered with the kit's
+ * catalogue the first time an editor renders. Registered from the component, not from a top-level
+ * side-effect import: with `sideEffects: false` a bundler is allowed to drop an import that binds
+ * nothing, and the editor would then render raw `markdownEditor.*` keys.
+ */
+declare const EDITOR_MESSAGES: {
+    readonly ja: {
+        readonly toolbar: "書式";
+        readonly mode: "表示";
+        readonly write: "編集";
+        readonly preview: "プレビュー";
+        readonly split: "並べて表示";
+        readonly bold: "太字";
+        readonly italic: "斜体";
+        readonly strike: "取り消し線";
+        readonly heading: "見出し";
+        readonly link: "リンク";
+        readonly code: "コード";
+        readonly codeBlock: "コードブロック";
+        readonly bulletList: "箇条書き";
+        readonly numberedList: "番号付きリスト";
+        readonly taskList: "チェックリスト";
+        readonly quote: "引用";
+        readonly attach: "ファイルを添付";
+        readonly placeholderText: "テキスト";
+        readonly placeholderLink: "リンクの文字";
+        readonly emptyPreview: "プレビューする内容はまだありません。";
+        readonly uploading: "アップロード中";
+        readonly uploadingStatus: "アップロード中…";
+        readonly uploadFailed: "{name} をアップロードできませんでした。";
+    };
+    readonly en: {
+        readonly toolbar: "Formatting";
+        readonly mode: "View";
+        readonly write: "Write";
+        readonly preview: "Preview";
+        readonly split: "Side by side";
+        readonly bold: "Bold";
+        readonly italic: "Italic";
+        readonly strike: "Strikethrough";
+        readonly heading: "Heading";
+        readonly link: "Link";
+        readonly code: "Code";
+        readonly codeBlock: "Code block";
+        readonly bulletList: "Bulleted list";
+        readonly numberedList: "Numbered list";
+        readonly taskList: "Checklist";
+        readonly quote: "Quote";
+        readonly attach: "Attach a file";
+        readonly placeholderText: "text";
+        readonly placeholderLink: "link text";
+        readonly emptyPreview: "Nothing to preview yet.";
+        readonly uploading: "Uploading";
+        readonly uploadingStatus: "Uploading…";
+        readonly uploadFailed: "Could not upload {name}.";
+    };
+    readonly vi: {
+        readonly toolbar: "Định dạng";
+        readonly mode: "Chế độ xem";
+        readonly write: "Soạn";
+        readonly preview: "Xem trước";
+        readonly split: "Song song";
+        readonly bold: "In đậm";
+        readonly italic: "In nghiêng";
+        readonly strike: "Gạch ngang";
+        readonly heading: "Tiêu đề";
+        readonly link: "Liên kết";
+        readonly code: "Mã";
+        readonly codeBlock: "Khối mã";
+        readonly bulletList: "Danh sách gạch đầu dòng";
+        readonly numberedList: "Danh sách đánh số";
+        readonly taskList: "Danh sách việc";
+        readonly quote: "Trích dẫn";
+        readonly attach: "Đính kèm tệp";
+        readonly placeholderText: "văn bản";
+        readonly placeholderLink: "chữ của liên kết";
+        readonly emptyPreview: "Chưa có nội dung để xem trước.";
+        readonly uploading: "Đang tải lên";
+        readonly uploadingStatus: "Đang tải lên…";
+        readonly uploadFailed: "Không tải lên được {name}.";
+    };
+};
+type MarkdownEditorLabels = {
+    [K in keyof (typeof EDITOR_MESSAGES)["en"]]: string;
+};
+
+type MarkdownEditorMode = "write" | "preview" | "split";
+/** What a custom toolbar action (a later "board" block, a template picker) is handed. */
+type MarkdownEditorApi = {
+    value: () => string;
+    selection: () => Selection;
+    /** Replace a range and select inside the result — one undo step. */
+    edit: (edit: TextEdit) => void;
+    /** Insert at the caret, replacing any selection. */
+    insert: (text: string) => void;
+    focus: () => void;
+};
+type MarkdownEditorAction = {
+    key: string;
+    /** Accessible name and tooltip. */
+    label: string;
+    icon: React.ReactNode;
+    run: (api: MarkdownEditorApi) => void;
+};
+/** What the host's storage returns for one file. */
+type MarkdownEditorUploadResult = {
+    url: string;
+    name?: string;
+};
+type MarkdownEditorProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange" | "children"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    mode?: MarkdownEditorMode;
+    defaultMode?: MarkdownEditorMode;
+    onModeChange?: (mode: MarkdownEditorMode) => void;
+    /**
+     * Stores a pasted, dropped or attached file and returns its URL. The HOST decides where bytes go
+     * (an app's own storage today, the media service later). Omit it and files are not accepted.
+     */
+    upload?: (file: File) => Promise<MarkdownEditorUploadResult>;
+    /** When set, files are refused with this message (a quota, a read-only space). */
+    uploadBlockedReason?: string | null;
+    /** The preview. Default: `<Prose><Markdown>{value}</Markdown></Prose>` from `@godxjp/markdown`. */
+    renderPreview?: (value: string) => React.ReactNode;
+    /** Extra toolbar actions, after the built-in ones — the extension point for new block types. */
+    actions?: readonly MarkdownEditorAction[];
+    /** Override any string the editor renders (defaults come from the kit's ja / en / vi catalogue). */
+    labels?: Partial<MarkdownEditorLabels>;
+    rows?: number;
+};
+/**
+ * A Markdown editor (gh#1109): a formatting toolbar, write / preview / side-by-side, the preview
+ * rendered by `@godxjp/markdown` (the same sanitiser the published page uses), and paste / drop /
+ * attach of files through a host-provided `upload`.
+ *
+ * It is the kit's `Textarea`, not a rich-text surface: Japanese IME composition, the native caret,
+ * spell-check and the browser's undo all keep working, and every edit the toolbar makes goes
+ * through `execCommand("insertText")` so it is ONE undo step. Shortcuts (⌘/Ctrl + B, I, K) never
+ * fire mid-composition. The toolbar is the kit's `Actions` — a WAI-ARIA toolbar with one tab stop
+ * and arrow-key movement.
+ */
+declare const MarkdownEditor: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "children" | "onChange" | "value" | "defaultValue"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    mode?: MarkdownEditorMode;
+    defaultMode?: MarkdownEditorMode;
+    onModeChange?: (mode: MarkdownEditorMode) => void;
+    /**
+     * Stores a pasted, dropped or attached file and returns its URL. The HOST decides where bytes go
+     * (an app's own storage today, the media service later). Omit it and files are not accepted.
+     */
+    upload?: (file: File) => Promise<MarkdownEditorUploadResult>;
+    /** When set, files are refused with this message (a quota, a read-only space). */
+    uploadBlockedReason?: string | null;
+    /** The preview. Default: `<Prose><Markdown>{value}</Markdown></Prose>` from `@godxjp/markdown`. */
+    renderPreview?: (value: string) => React.ReactNode;
+    /** Extra toolbar actions, after the built-in ones — the extension point for new block types. */
+    actions?: readonly MarkdownEditorAction[];
+    /** Override any string the editor renders (defaults come from the kit's ja / en / vi catalogue). */
+    labels?: Partial<MarkdownEditorLabels>;
+    rows?: number;
+} & React.RefAttributes<HTMLTextAreaElement>>;
+
+export { EDITOR_MESSAGES, MarkdownEditor, type MarkdownEditorAction, type MarkdownEditorApi, type MarkdownEditorLabels, type MarkdownEditorMode, type MarkdownEditorProps, type MarkdownEditorUploadResult, type Selection, type TextEdit, applyEdit, insertCodeBlock, insertLink, prefixLines, uploadedMarkdown, wrapSelection };

package/dist/index.js

@@ -0,0 +1,483 @@
+"use client";
+
+// src/editor.tsx
+import * as React from "react";
+import {
+  Bold,
+  Code,
+  Heading2,
+  Italic,
+  Link2,
+  List,
+  ListChecks,
+  ListOrdered,
+  Paperclip,
+  Quote,
+  SquareCode,
+  Strikethrough
+} from "lucide-react";
+import { Markdown } from "@godxjp/markdown";
+import { Card, CardContent, Prose } from "@godxjp/ui/data-display";
+import { Segmented, Textarea } from "@godxjp/ui/data-entry";
+import { Actions, Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
+import { Flex, ResponsiveGrid } from "@godxjp/ui/layout";
+
+// src/format.ts
+function wrapSelection(text, { start, end }, before, after, placeholder) {
+  const selected = text.slice(start, end);
+  const outerStart = start - before.length;
+  const outerEnd = end + after.length;
+  if (outerStart >= 0 && text.slice(outerStart, start) === before && text.slice(end, outerEnd) === after) {
+    return {
+      from: outerStart,
+      to: outerEnd,
+      insert: selected,
+      select: { start: outerStart, end: outerStart + selected.length }
+    };
+  }
+  const body = selected || placeholder;
+  return {
+    from: start,
+    to: end,
+    insert: `${before}${body}${after}`,
+    select: { start: start + before.length, end: start + before.length + body.length }
+  };
+}
+function lineRange(text, { start, end }) {
+  const lineStart = text.lastIndexOf("\n", start - 1) + 1;
+  const next = text.indexOf("\n", end > start && text[end - 1] === "\n" ? end - 1 : end);
+  return { start: lineStart, end: next === -1 ? text.length : next };
+}
+function prefixLines(text, selection, prefix, options = {}) {
+  const range = lineRange(text, selection);
+  const lines = text.slice(range.start, range.end).split("\n");
+  const marker = (index) => options.numbered ? `${index + 1}. ` : prefix;
+  const numberedPattern = /^\d+\. /;
+  const has = (line, index) => options.numbered ? numberedPattern.test(line) : line.startsWith(marker(index));
+  const allPrefixed = lines.every(has);
+  const next = lines.map(
+    (line, index) => allPrefixed ? line.replace(options.numbered ? numberedPattern : marker(index), "") : `${marker(index)}${line}`
+  );
+  const insert = next.join("\n");
+  return {
+    from: range.start,
+    to: range.end,
+    insert,
+    select: { start: range.start, end: range.start + insert.length }
+  };
+}
+function insertLink(text, { start, end }, placeholder) {
+  const label = text.slice(start, end) || placeholder;
+  const insert = `[${label}](url)`;
+  const urlStart = start + label.length + 3;
+  return { from: start, to: end, insert, select: { start: urlStart, end: urlStart + 3 } };
+}
+function insertCodeBlock(text, { start, end }) {
+  const body = text.slice(start, end);
+  const lead = start > 0 && text[start - 1] !== "\n" ? "\n" : "";
+  const insert = `${lead}\`\`\`
+${body}
+\`\`\`
+`;
+  const bodyStart = start + lead.length + 4;
+  return {
+    from: start,
+    to: end,
+    insert,
+    select: { start: bodyStart, end: bodyStart + body.length }
+  };
+}
+function applyEdit(text, edit) {
+  return text.slice(0, edit.from) + edit.insert + text.slice(edit.to);
+}
+function uploadedMarkdown(file, url, name) {
+  const label = (name ?? file.name).replace(/[[\]\\]/g, "\\$&");
+  const target = /[\s()<>]/.test(url) ? `<${url.replace(/[<>]/g, encodeURIComponent)}>` : url;
+  return file.type.startsWith("image/") ? `![${label}](${target})` : `[${label}](${target})`;
+}
+
+// src/messages.ts
+import { registerMessages } from "@godxjp/ui/i18n";
+var EDITOR_MESSAGES = {
+  ja: {
+    toolbar: "\u66F8\u5F0F",
+    mode: "\u8868\u793A",
+    write: "\u7DE8\u96C6",
+    preview: "\u30D7\u30EC\u30D3\u30E5\u30FC",
+    split: "\u4E26\u3079\u3066\u8868\u793A",
+    bold: "\u592A\u5B57",
+    italic: "\u659C\u4F53",
+    strike: "\u53D6\u308A\u6D88\u3057\u7DDA",
+    heading: "\u898B\u51FA\u3057",
+    link: "\u30EA\u30F3\u30AF",
+    code: "\u30B3\u30FC\u30C9",
+    codeBlock: "\u30B3\u30FC\u30C9\u30D6\u30ED\u30C3\u30AF",
+    bulletList: "\u7B87\u6761\u66F8\u304D",
+    numberedList: "\u756A\u53F7\u4ED8\u304D\u30EA\u30B9\u30C8",
+    taskList: "\u30C1\u30A7\u30C3\u30AF\u30EA\u30B9\u30C8",
+    quote: "\u5F15\u7528",
+    attach: "\u30D5\u30A1\u30A4\u30EB\u3092\u6DFB\u4ED8",
+    placeholderText: "\u30C6\u30AD\u30B9\u30C8",
+    placeholderLink: "\u30EA\u30F3\u30AF\u306E\u6587\u5B57",
+    emptyPreview: "\u30D7\u30EC\u30D3\u30E5\u30FC\u3059\u308B\u5185\u5BB9\u306F\u307E\u3060\u3042\u308A\u307E\u305B\u3093\u3002",
+    uploading: "\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u4E2D",
+    uploadingStatus: "\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u4E2D\u2026",
+    uploadFailed: "{name} \u3092\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002"
+  },
+  en: {
+    toolbar: "Formatting",
+    mode: "View",
+    write: "Write",
+    preview: "Preview",
+    split: "Side by side",
+    bold: "Bold",
+    italic: "Italic",
+    strike: "Strikethrough",
+    heading: "Heading",
+    link: "Link",
+    code: "Code",
+    codeBlock: "Code block",
+    bulletList: "Bulleted list",
+    numberedList: "Numbered list",
+    taskList: "Checklist",
+    quote: "Quote",
+    attach: "Attach a file",
+    placeholderText: "text",
+    placeholderLink: "link text",
+    emptyPreview: "Nothing to preview yet.",
+    uploading: "Uploading",
+    uploadingStatus: "Uploading\u2026",
+    uploadFailed: "Could not upload {name}."
+  },
+  vi: {
+    toolbar: "\u0110\u1ECBnh d\u1EA1ng",
+    mode: "Ch\u1EBF \u0111\u1ED9 xem",
+    write: "So\u1EA1n",
+    preview: "Xem tr\u01B0\u1EDBc",
+    split: "Song song",
+    bold: "In \u0111\u1EADm",
+    italic: "In nghi\xEAng",
+    strike: "G\u1EA1ch ngang",
+    heading: "Ti\xEAu \u0111\u1EC1",
+    link: "Li\xEAn k\u1EBFt",
+    code: "M\xE3",
+    codeBlock: "Kh\u1ED1i m\xE3",
+    bulletList: "Danh s\xE1ch g\u1EA1ch \u0111\u1EA7u d\xF2ng",
+    numberedList: "Danh s\xE1ch \u0111\xE1nh s\u1ED1",
+    taskList: "Danh s\xE1ch vi\u1EC7c",
+    quote: "Tr\xEDch d\u1EABn",
+    attach: "\u0110\xEDnh k\xE8m t\u1EC7p",
+    placeholderText: "v\u0103n b\u1EA3n",
+    placeholderLink: "ch\u1EEF c\u1EE7a li\xEAn k\u1EBFt",
+    emptyPreview: "Ch\u01B0a c\xF3 n\u1ED9i dung \u0111\u1EC3 xem tr\u01B0\u1EDBc.",
+    uploading: "\u0110ang t\u1EA3i l\xEAn",
+    uploadingStatus: "\u0110ang t\u1EA3i l\xEAn\u2026",
+    uploadFailed: "Kh\xF4ng t\u1EA3i l\xEAn \u0111\u01B0\u1EE3c {name}."
+  }
+};
+var registered = false;
+function ensureEditorMessages() {
+  if (registered) return;
+  registered = true;
+  for (const locale of ["ja", "en", "vi"]) {
+    registerMessages(locale, { markdownEditor: EDITOR_MESSAGES[locale] });
+  }
+}
+
+// src/editor.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var isMod = (event) => event.metaKey || event.ctrlKey;
+var MarkdownEditor = React.forwardRef(
+  function MarkdownEditor2({
+    value: valueProp,
+    defaultValue = "",
+    onValueChange,
+    mode: modeProp,
+    defaultMode = "write",
+    onModeChange,
+    upload,
+    uploadBlockedReason = null,
+    renderPreview,
+    actions = [],
+    labels,
+    rows = 12,
+    disabled,
+    readOnly,
+    onKeyDown,
+    onPaste,
+    onDrop,
+    ...textareaProps
+  }, ref) {
+    ensureEditorMessages();
+    const { t } = useTranslation();
+    const label = (key, params) => labels?.[key] ?? t(`markdownEditor.${key}`, params);
+    const [inner, setInner] = React.useState(defaultValue);
+    const value = valueProp ?? inner;
+    const valueRef = React.useRef(value);
+    valueRef.current = value;
+    const setValue = React.useCallback(
+      (next) => {
+        valueRef.current = next;
+        if (valueProp === void 0) setInner(next);
+        onValueChange?.(next);
+      },
+      [valueProp, onValueChange]
+    );
+    const [innerMode, setInnerMode] = React.useState(defaultMode);
+    const mode = modeProp ?? innerMode;
+    const setMode = (next) => {
+      if (modeProp === void 0) setInnerMode(next);
+      onModeChange?.(next);
+    };
+    const area = React.useRef(null);
+    const setArea = React.useCallback(
+      (node) => {
+        area.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const pendingSelection = React.useRef(null);
+    React.useLayoutEffect(() => {
+      const node = area.current;
+      const select = pendingSelection.current;
+      if (!node || !select) return;
+      pendingSelection.current = null;
+      node.setSelectionRange(select.start, select.end);
+    });
+    const selection = () => {
+      const node = area.current;
+      return node ? { start: node.selectionStart, end: node.selectionEnd } : { start: valueRef.current.length, end: valueRef.current.length };
+    };
+    const editable = !disabled && !readOnly;
+    const edit = (change) => {
+      const node = area.current;
+      if (!node || !editable) return;
+      node.focus();
+      node.setSelectionRange(change.from, change.to);
+      const expected = applyEdit(valueRef.current, change);
+      let applied;
+      try {
+        applied = document.execCommand?.("insertText", false, change.insert) ?? false;
+      } catch {
+        applied = false;
+      }
+      if (!applied || node.value !== expected) setValue(expected);
+      pendingSelection.current = change.select;
+      if (applied && node.value === expected)
+        node.setSelectionRange(change.select.start, change.select.end);
+    };
+    const api = {
+      value: () => valueRef.current,
+      selection,
+      edit,
+      insert: (text) => {
+        const { start, end } = selection();
+        edit({
+          from: start,
+          to: end,
+          insert: text,
+          select: { start: start + text.length, end: start + text.length }
+        });
+      },
+      focus: () => area.current?.focus()
+    };
+    const wrap = (before, after = before) => edit(wrapSelection(valueRef.current, selection(), before, after, label("placeholderText")));
+    const lines = (prefix, numbered = false) => edit(prefixLines(valueRef.current, selection(), prefix, { numbered }));
+    const [uploading, setUploading] = React.useState(0);
+    const [uploadError, setUploadError] = React.useState(null);
+    const uploadSeq = React.useRef(0);
+    const fileInput = React.useRef(null);
+    const acceptFiles = async (files) => {
+      if (!upload || files.length === 0 || !editable) return;
+      if (uploadBlockedReason) {
+        setUploadError(uploadBlockedReason);
+        return;
+      }
+      setUploadError(null);
+      for (const file of files) {
+        const placeholder = `![${label("uploading")} ${file.name.replace(/[[\]\\]/g, "")} #${++uploadSeq.current}]()`;
+        api.insert(placeholder);
+        setUploading((n) => n + 1);
+        try {
+          const result = await upload(file);
+          const markdown = uploadedMarkdown(file, result.url, result.name);
+          const at = valueRef.current.indexOf(placeholder);
+          if (at !== -1) {
+            edit({
+              from: at,
+              to: at + placeholder.length,
+              insert: markdown,
+              select: { start: at + markdown.length, end: at + markdown.length }
+            });
+          }
+        } catch {
+          const at = valueRef.current.indexOf(placeholder);
+          if (at !== -1)
+            edit({
+              from: at,
+              to: at + placeholder.length,
+              insert: "",
+              select: { start: at, end: at }
+            });
+          setUploadError(label("uploadFailed", { name: file.name }));
+        } finally {
+          setUploading((n) => n - 1);
+        }
+      }
+    };
+    const builtIn = [
+      { key: "bold", label: label("bold"), icon: /* @__PURE__ */ jsx(Bold, {}), run: () => wrap("**") },
+      { key: "italic", label: label("italic"), icon: /* @__PURE__ */ jsx(Italic, {}), run: () => wrap("_") },
+      { key: "strike", label: label("strike"), icon: /* @__PURE__ */ jsx(Strikethrough, {}), run: () => wrap("~~") },
+      { key: "heading", label: label("heading"), icon: /* @__PURE__ */ jsx(Heading2, {}), run: () => lines("## ") },
+      {
+        key: "link",
+        label: label("link"),
+        icon: /* @__PURE__ */ jsx(Link2, {}),
+        run: () => edit(insertLink(valueRef.current, selection(), label("placeholderLink")))
+      },
+      { key: "code", label: label("code"), icon: /* @__PURE__ */ jsx(Code, {}), run: () => wrap("`") },
+      {
+        key: "codeBlock",
+        label: label("codeBlock"),
+        icon: /* @__PURE__ */ jsx(SquareCode, {}),
+        run: () => edit(insertCodeBlock(valueRef.current, selection()))
+      },
+      { key: "bulletList", label: label("bulletList"), icon: /* @__PURE__ */ jsx(List, {}), run: () => lines("- ") },
+      {
+        key: "numberedList",
+        label: label("numberedList"),
+        icon: /* @__PURE__ */ jsx(ListOrdered, {}),
+        run: () => lines("", true)
+      },
+      {
+        key: "taskList",
+        label: label("taskList"),
+        icon: /* @__PURE__ */ jsx(ListChecks, {}),
+        run: () => lines("- [ ] ")
+      },
+      { key: "quote", label: label("quote"), icon: /* @__PURE__ */ jsx(Quote, {}), run: () => lines("> ") }
+    ];
+    if (upload) {
+      builtIn.push({
+        key: "attach",
+        label: label("attach"),
+        icon: /* @__PURE__ */ jsx(Paperclip, {}),
+        run: () => fileInput.current?.click()
+      });
+    }
+    const all = [...builtIn, ...actions];
+    const toolbarDisabled = !editable || mode === "preview";
+    const onEditorKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+      if (!isMod(event) || event.altKey || event.shiftKey) return;
+      const key = event.key.toLowerCase();
+      const run = key === "b" ? "bold" : key === "i" ? "italic" : key === "k" ? "link" : null;
+      if (!run) return;
+      event.preventDefault();
+      builtIn.find((action) => action.key === run)?.run(api);
+    };
+    const preview = /* @__PURE__ */ jsx(Card, { variant: "muted", "aria-label": label("preview"), role: "region", children: /* @__PURE__ */ jsx(CardContent, { children: value.trim() === "" ? /* @__PURE__ */ jsx(Text, { tone: "muted", children: label("emptyPreview") }) : renderPreview?.(value) ?? /* @__PURE__ */ jsx(Prose, { children: /* @__PURE__ */ jsx(Markdown, { children: value }) }) }) });
+    const textarea = /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        ...textareaProps,
+        ref: setArea,
+        value,
+        onValueChange: setValue,
+        rows,
+        disabled,
+        readOnly,
+        onKeyDown: onEditorKeyDown,
+        onPaste: (event) => {
+          onPaste?.(event);
+          const files = Array.from(event.clipboardData?.files ?? []);
+          if (!event.defaultPrevented && upload && files.length > 0) {
+            event.preventDefault();
+            void acceptFiles(files);
+          }
+        },
+        onDrop: (event) => {
+          onDrop?.(event);
+          const files = Array.from(event.dataTransfer?.files ?? []);
+          if (!event.defaultPrevented && upload && files.length > 0) {
+            event.preventDefault();
+            void acceptFiles(files);
+          }
+        }
+      }
+    );
+    return /* @__PURE__ */ jsxs(Flex, { direction: "col", gap: "xs", "data-slot": "markdown-editor", "data-mode": mode, children: [
+      /* @__PURE__ */ jsxs(Flex, { justify: "between", align: "center", gap: "xs", wrap: true, children: [
+        /* @__PURE__ */ jsx(
+          Actions,
+          {
+            label: label("toolbar"),
+            items: all.map((action) => ({
+              key: action.key,
+              label: action.label,
+              icon: action.icon,
+              // aria-disabled, not removed: the toolbar keeps its shape and its focus order.
+              disabled: toolbarDisabled,
+              onItemClick: () => action.run(api)
+            }))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Segmented,
+          {
+            size: "sm",
+            "aria-label": label("mode"),
+            value: mode,
+            onValueChange: (next) => setMode(next),
+            options: [
+              { value: "write", label: label("write") },
+              { value: "preview", label: label("preview") },
+              { value: "split", label: label("split") }
+            ]
+          }
+        )
+      ] }),
+      mode === "split" ? /* @__PURE__ */ jsxs(ResponsiveGrid, { columns: { base: 1, md: 2 }, gap: "sm", children: [
+        textarea,
+        preview
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { hidden: mode === "preview", children: textarea }),
+        mode === "preview" ? preview : null
+      ] }),
+      upload ? /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileInput,
+          type: "file",
+          multiple: true,
+          hidden: true,
+          "aria-hidden": "true",
+          tabIndex: -1,
+          onChange: (event) => {
+            const files = Array.from(event.target.files ?? []);
+            event.target.value = "";
+            void acceptFiles(files);
+          }
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", children: uploading > 0 ? /* @__PURE__ */ jsx(Text, { tone: "muted", children: label("uploadingStatus") }) : null }),
+      uploadError ? /* @__PURE__ */ jsx(Text, { tone: "destructive", role: "alert", children: uploadError }) : null
+    ] });
+  }
+);
+export {
+  EDITOR_MESSAGES,
+  MarkdownEditor,
+  applyEdit,
+  insertCodeBlock,
+  insertLink,
+  prefixLines,
+  uploadedMarkdown,
+  wrapSelection
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@godxjp/editor",
+  "version": "31.18.0",
+  "description": "Markdown editor for GoDX apps: formatting toolbar, write / preview / side by side with @godxjp/markdown, paste / drop / attach through a host upload function, IME-safe, ja / en / vi.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/godx-jp/godxjp-ui.git",
+    "directory": "packages/editor"
+  },
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@godxjp/markdown": "~31.18.0",
+    "@godxjp/ui": "~31.18.0",
+    "lucide-react": ">=1.0.0",
+    "react": ">=19.0.0"
+  },
+  "keywords": [
+    "markdown",
+    "editor",
+    "godxjp"
+  ]
+}