@tiptap/extension-ruby-text 3.29.0

package/dist/index.js

@@ -0,0 +1,290 @@
+// src/ruby-text.ts
+import { Mark, mergeAttributes } from "@tiptap/core";
+
+// src/ruby-text-decoration-plugin.ts
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+var rubyTextDecorationPluginKey = new PluginKey("rubyTextDecoration");
+var editSessions = /* @__PURE__ */ new WeakMap();
+function isImeEvent(event) {
+  const legacyKeyCode = event.keyCode;
+  return event.isComposing || legacyKeyCode === 229;
+}
+function defaultRenderAnnotationEditor({
+  annotation,
+  submit,
+  dismiss
+}) {
+  const input = document.createElement("input");
+  input.type = "text";
+  input.value = annotation;
+  input.size = Math.max(annotation.length, 1);
+  input.setAttribute("aria-label", "Ruby text annotation");
+  input.addEventListener("focus", () => input.select(), { once: true });
+  input.addEventListener("blur", () => dismiss());
+  input.addEventListener("keydown", (event) => {
+    if (isImeEvent(event)) {
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      dismiss();
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      submit(input.value);
+    }
+  });
+  return input;
+}
+function createRtElement(annotation, range, rubyTextType, view, options) {
+  const rt = document.createElement("rt");
+  rt.contentEditable = "false";
+  rt.textContent = annotation;
+  let editing = false;
+  const restoreEditorFocus = () => {
+    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, range.to)));
+    view.focus();
+  };
+  if (!options.allowClickToEdit || !view.editable) {
+    return rt;
+  }
+  editSessions.set(rt, () => {
+    editing = false;
+  });
+  const dismiss = () => {
+    if (!editing) {
+      return;
+    }
+    editing = false;
+    rt.textContent = annotation;
+    restoreEditorFocus();
+  };
+  const submit = (value) => {
+    if (!editing) {
+      return;
+    }
+    if (!view.editable || value === annotation) {
+      dismiss();
+      return;
+    }
+    editing = false;
+    const transaction = view.state.tr.addMark(
+      range.from,
+      range.to,
+      rubyTextType.create({ ...range.mark.attrs, rt: value })
+    );
+    view.dispatch(transaction.setSelection(TextSelection.create(transaction.doc, range.to)));
+    view.focus();
+  };
+  const openEditor = () => {
+    var _a, _b;
+    const renderEditor = (_a = options.renderAnnotationEditor) != null ? _a : defaultRenderAnnotationEditor;
+    const element = renderEditor({ annotation, submit, dismiss, editor: options.editor });
+    rt.replaceChildren(element);
+    const focusTarget = (_b = element.querySelector("[autofocus]")) != null ? _b : element;
+    focusTarget.focus();
+  };
+  rt.addEventListener("click", () => {
+    if (editing || !view.editable) {
+      return;
+    }
+    editing = true;
+    openEditor();
+  });
+  return rt;
+}
+function getRubyTextMark(node, rubyTextType) {
+  return node.isText ? node.marks.find((candidate) => candidate.type === rubyTextType) : void 0;
+}
+function addRange(ranges, range) {
+  if (range) {
+    ranges.push(range);
+  }
+}
+function canExtendRange(range, mark, pos) {
+  return (range == null ? void 0 : range.to) === pos && range.mark.eq(mark);
+}
+function getNextRange(ranges, range, node, pos, rubyTextType) {
+  const mark = getRubyTextMark(node, rubyTextType);
+  if (!mark) {
+    addRange(ranges, range);
+    return null;
+  }
+  if (range && canExtendRange(range, mark, pos)) {
+    range.to += node.nodeSize;
+    return range;
+  }
+  addRange(ranges, range);
+  return { from: pos, to: pos + node.nodeSize, mark };
+}
+function getRubyTextRanges(doc, rubyTextType) {
+  const ranges = [];
+  let range = null;
+  doc.descendants((node, pos) => {
+    range = getNextRange(ranges, range, node, pos, rubyTextType);
+  });
+  addRange(ranges, range);
+  return ranges;
+}
+var STOPPED_EVENT_TYPES = /* @__PURE__ */ new Set([
+  "click",
+  "dblclick",
+  "contextmenu",
+  "mousedown",
+  "mouseup",
+  "pointerdown",
+  "pointerup",
+  "touchstart",
+  "touchend",
+  "keydown",
+  "keypress",
+  "keyup",
+  "input",
+  "beforeinput",
+  "compositionstart",
+  "compositionupdate",
+  "compositionend",
+  "paste",
+  "cut",
+  "copy",
+  "focus",
+  "blur",
+  "focusin",
+  "focusout"
+]);
+function createDecorations(doc, rubyTextType, options) {
+  const decorations = getRubyTextRanges(doc, rubyTextType).map((range) => {
+    var _a;
+    const annotation = (_a = range.mark.attrs.rt) != null ? _a : "";
+    return Decoration.widget(
+      range.to,
+      (view) => createRtElement(annotation, range, rubyTextType, view, options),
+      {
+        key: `ruby-text-${range.from}-${range.to}-${annotation}`,
+        marks: [range.mark],
+        side: 1,
+        stopEvent: (event) => options.allowClickToEdit && STOPPED_EVENT_TYPES.has(event.type),
+        destroy: (node) => {
+          var _a2;
+          return (_a2 = editSessions.get(node)) == null ? void 0 : _a2();
+        }
+      }
+    );
+  });
+  return DecorationSet.create(doc, decorations);
+}
+function RubyTextDecorationPlugin(rubyTextType, options) {
+  return new Plugin({
+    key: rubyTextDecorationPluginKey,
+    state: {
+      init: (_, state) => createDecorations(state.doc, rubyTextType, options),
+      apply: (transaction, decorations) => transaction.docChanged ? createDecorations(transaction.doc, rubyTextType, options) : decorations.map(transaction.mapping, transaction.doc)
+    },
+    props: {
+      decorations: (state) => rubyTextDecorationPluginKey.getState(state)
+    }
+  });
+}
+
+// src/ruby-text.ts
+var RubyText = Mark.create({
+  name: "rubyText",
+  inclusive: false,
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      allowClickToEdit: true,
+      renderAnnotationEditor: void 0
+    };
+  },
+  addAttributes() {
+    return {
+      rt: {
+        default: null
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "ruby",
+        contentElement: (node) => {
+          const rb = node.querySelector("rb");
+          if (rb) {
+            return rb;
+          }
+          const surrogate = document.createElement("span");
+          Array.from(node.childNodes).forEach((child) => {
+            if (child.nodeName !== "RT" && child.nodeName !== "RP") {
+              surrogate.appendChild(child.cloneNode(true));
+            }
+          });
+          return surrogate;
+        },
+        getAttrs: (node) => {
+          var _a;
+          const rt = node.querySelector("rt");
+          if (!rt) {
+            return false;
+          }
+          return { rt: (_a = rt.textContent) != null ? _a : "" };
+        }
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes, mark }) {
+    return [
+      "ruby",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      ["rb", 0],
+      ...mark.attrs.rt == null ? [] : [["rt", { contenteditable: "false" }, mark.attrs.rt]]
+    ];
+  },
+  addCommands() {
+    return {
+      setRubyText: (attributes) => ({ commands }) => {
+        return commands.setMark(this.name, attributes);
+      },
+      toggleRubyText: (attributes) => ({ commands }) => {
+        return commands.toggleMark(this.name, attributes, { extendEmptyMarkRange: true });
+      },
+      unsetRubyText: () => ({ commands }) => {
+        return commands.unsetMark(this.name, { extendEmptyMarkRange: true });
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      RubyTextDecorationPlugin(this.type, {
+        editor: this.editor,
+        allowClickToEdit: this.options.allowClickToEdit,
+        renderAnnotationEditor: this.options.renderAnnotationEditor
+      })
+    ];
+  },
+  addMarkView() {
+    return ({ HTMLAttributes }) => {
+      const ruby = document.createElement("ruby");
+      Object.entries(mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)).forEach(
+        ([key, value]) => {
+          if (value != null) {
+            ruby.setAttribute(key, String(value));
+          }
+        }
+      );
+      return {
+        dom: ruby,
+        contentDOM: ruby
+      };
+    };
+  }
+});
+
+// src/index.ts
+var index_default = RubyText;
+export {
+  RubyText,
+  index_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ruby-text.ts","../src/ruby-text-decoration-plugin.ts","../src/index.ts"],"sourcesContent":["import { Mark, mergeAttributes } from '@tiptap/core'\n\nimport type { RubyTextAnnotationEditorProps } from './ruby-text-decoration-plugin.js'\nimport { RubyTextDecorationPlugin } from './ruby-text-decoration-plugin.js'\n\nexport type { RubyTextAnnotationEditorProps }\n\nexport interface RubyTextOptions {\n  /**\n   * HTML attributes to add to the ruby element.\n   * @default {}\n   */\n  HTMLAttributes: Record<string, any>\n  /**\n   * Whether clicking an annotation opens an inline editor.\n   * @default true\n   */\n  allowClickToEdit: boolean\n  /**\n   * Renders a custom element used as the inline annotation editor.\n   * The returned element is mounted inside the `rt` element. A descendant\n   * with the `autofocus` attribute is focused, otherwise the element itself.\n   * When not set, a plain text input is rendered.\n   * @default undefined\n   */\n  renderAnnotationEditor?: (props: RubyTextAnnotationEditorProps) => HTMLElement\n}\n\nexport interface RubyTextAttributes {\n  /**\n   * The ruby text annotation rendered in the HTML `rt` element.\n   */\n  rt: string | null\n}\n\ndeclare module '@tiptap/core' {\n  interface Commands<ReturnType> {\n    rubyText: {\n      /**\n       * Set a ruby text mark with an annotation on the current selection.\n       * @example editor.commands.setRubyText({ rt: 'かんじ' })\n       */\n      setRubyText: (attributes: RubyTextAttributes) => ReturnType\n      /**\n       * Toggle a ruby text mark on the current selection.\n       * @example editor.commands.toggleRubyText({ rt: 'かんじ' })\n       */\n      toggleRubyText: (attributes: RubyTextAttributes) => ReturnType\n      /**\n       * Remove the ruby text mark from the current selection.\n       * @example editor.commands.unsetRubyText()\n       */\n      unsetRubyText: () => ReturnType\n    }\n  }\n}\n\n/**\n * This extension adds support for HTML ruby text annotations.\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby\n */\nexport const RubyText = Mark.create<RubyTextOptions>({\n  name: 'rubyText',\n\n  inclusive: false,\n\n  addOptions() {\n    return {\n      HTMLAttributes: {},\n      allowClickToEdit: true,\n      renderAnnotationEditor: undefined,\n    }\n  },\n\n  addAttributes() {\n    return {\n      rt: {\n        default: null,\n      },\n    }\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'ruby',\n        contentElement: (node: HTMLElement) => {\n          const rb = node.querySelector('rb')\n\n          if (rb) {\n            return rb\n          }\n\n          const surrogate = document.createElement('span')\n\n          Array.from(node.childNodes).forEach(child => {\n            if (child.nodeName !== 'RT' && child.nodeName !== 'RP') {\n              surrogate.appendChild(child.cloneNode(true))\n            }\n          })\n\n          return surrogate\n        },\n        getAttrs: (node: HTMLElement) => {\n          const rt = node.querySelector('rt')\n\n          if (!rt) {\n            return false\n          }\n\n          return { rt: rt.textContent ?? '' }\n        },\n      },\n    ]\n  },\n\n  renderHTML({ HTMLAttributes, mark }) {\n    return [\n      'ruby',\n      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n      ['rb', 0],\n      ...(mark.attrs.rt == null ? [] : [['rt', { contenteditable: 'false' }, mark.attrs.rt]]),\n    ]\n  },\n\n  addCommands() {\n    return {\n      setRubyText:\n        attributes =>\n        ({ commands }) => {\n          return commands.setMark(this.name, attributes)\n        },\n      toggleRubyText:\n        attributes =>\n        ({ commands }) => {\n          return commands.toggleMark(this.name, attributes, { extendEmptyMarkRange: true })\n        },\n      unsetRubyText:\n        () =>\n        ({ commands }) => {\n          return commands.unsetMark(this.name, { extendEmptyMarkRange: true })\n        },\n    }\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      RubyTextDecorationPlugin(this.type, {\n        editor: this.editor,\n        allowClickToEdit: this.options.allowClickToEdit,\n        renderAnnotationEditor: this.options.renderAnnotationEditor,\n      }),\n    ]\n  },\n\n  addMarkView() {\n    return ({ HTMLAttributes }) => {\n      const ruby = document.createElement('ruby')\n\n      Object.entries(mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)).forEach(\n        ([key, value]) => {\n          if (value != null) {\n            ruby.setAttribute(key, String(value))\n          }\n        },\n      )\n\n      return {\n        dom: ruby,\n        contentDOM: ruby,\n      }\n    }\n  },\n})\n","import type { Editor } from '@tiptap/core'\nimport type { Mark, MarkType, Node as ProseMirrorNode } from '@tiptap/pm/model'\nimport { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'\nimport { Decoration, DecorationSet, type EditorView } from '@tiptap/pm/view'\n\nconst rubyTextDecorationPluginKey = new PluginKey('rubyTextDecoration')\n\n// Ends a widget's edit session on destroy, so stale submit/dismiss calls do nothing.\nconst editSessions = new WeakMap<Node, () => void>()\n\ninterface RubyTextRange {\n  from: number\n  to: number\n  mark: Mark\n}\n\nexport interface RubyTextAnnotationEditorProps {\n  /**\n   * The current annotation value (`''` when the mark has an empty annotation).\n   */\n  annotation: string\n  /**\n   * Applies the given value as the new annotation and closes the editor.\n   * Calling it more than once (or after `dismiss`) is a no-op.\n   */\n  submit: (value: string) => void\n  /**\n   * Closes the editor without changing the annotation.\n   * Calling it more than once (or after `submit`) is a no-op.\n   */\n  dismiss: () => void\n  /**\n   * The editor instance.\n   */\n  editor: Editor\n}\n\nexport interface RubyTextDecorationPluginOptions {\n  editor: Editor\n  allowClickToEdit: boolean\n  renderAnnotationEditor?: (props: RubyTextAnnotationEditorProps) => HTMLElement\n}\n\n// Enter and Escape during IME composition must not close the editor.\n// Safari reports some IME keydowns only via the deprecated keyCode 229.\nfunction isImeEvent(event: KeyboardEvent) {\n  const legacyKeyCode = (event as { keyCode?: number }).keyCode\n  return event.isComposing || legacyKeyCode === 229\n}\n\n/** Default annotation editor: a plain text input. Enter submits, Escape or blur dismisses. */\nfunction defaultRenderAnnotationEditor({\n  annotation,\n  submit,\n  dismiss,\n}: RubyTextAnnotationEditorProps) {\n  const input = document.createElement('input')\n  input.type = 'text'\n  input.value = annotation\n  input.size = Math.max(annotation.length, 1)\n  input.setAttribute('aria-label', 'Ruby text annotation')\n\n  input.addEventListener('focus', () => input.select(), { once: true })\n  input.addEventListener('blur', () => dismiss())\n  input.addEventListener('keydown', event => {\n    if (isImeEvent(event)) {\n      return\n    }\n\n    if (event.key === 'Escape') {\n      event.preventDefault()\n      dismiss()\n    }\n\n    if (event.key === 'Enter') {\n      event.preventDefault()\n      submit(input.value)\n    }\n  })\n\n  return input\n}\n\nfunction createRtElement(\n  annotation: string,\n  range: RubyTextRange,\n  rubyTextType: MarkType,\n  view: EditorView,\n  options: RubyTextDecorationPluginOptions,\n) {\n  const rt = document.createElement('rt')\n  rt.contentEditable = 'false'\n  rt.textContent = annotation\n  let editing = false\n\n  const restoreEditorFocus = () => {\n    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, range.to)))\n    view.focus()\n  }\n\n  if (!options.allowClickToEdit || !view.editable) {\n    return rt\n  }\n\n  editSessions.set(rt, () => {\n    editing = false\n  })\n\n  const dismiss = () => {\n    if (!editing) {\n      return\n    }\n\n    editing = false\n    rt.textContent = annotation\n    restoreEditorFocus()\n  }\n\n  const submit = (value: string) => {\n    if (!editing) {\n      return\n    }\n\n    // An unchanged value produces no doc change, so the widget would not\n    // re-render and the editor element would stay mounted.\n    if (!view.editable || value === annotation) {\n      dismiss()\n      return\n    }\n\n    editing = false\n    const transaction = view.state.tr.addMark(\n      range.from,\n      range.to,\n      rubyTextType.create({ ...range.mark.attrs, rt: value }),\n    )\n\n    view.dispatch(transaction.setSelection(TextSelection.create(transaction.doc, range.to)))\n    view.focus()\n  }\n\n  const openEditor = () => {\n    const renderEditor = options.renderAnnotationEditor ?? defaultRenderAnnotationEditor\n    const element = renderEditor({ annotation, submit, dismiss, editor: options.editor })\n\n    rt.replaceChildren(element)\n\n    // Browsers ignore autofocus on inserted nodes, so we focus it manually.\n    const focusTarget = element.querySelector<HTMLElement>('[autofocus]') ?? element\n    focusTarget.focus()\n  }\n\n  rt.addEventListener('click', () => {\n    if (editing || !view.editable) {\n      return\n    }\n\n    editing = true\n    openEditor()\n  })\n\n  return rt\n}\n\n/** Gets the mark of ruby text from the given node, if it exists. */\nfunction getRubyTextMark(node: ProseMirrorNode, rubyTextType: MarkType) {\n  return node.isText ? node.marks.find(candidate => candidate.type === rubyTextType) : undefined\n}\n\n/** Adds a ruby text range to an existing array of ranges. */\nfunction addRange(ranges: RubyTextRange[], range: RubyTextRange | null) {\n  if (range) {\n    ranges.push(range)\n  }\n}\n\n/** Can the current range be extended with the given mark at the given position? */\nfunction canExtendRange(range: RubyTextRange | null, mark: Mark, pos: number) {\n  return range?.to === pos && range.mark.eq(mark)\n}\n\n/**\n * Gets the next ruby text range based on the current node and position.\n * @param ranges The array of ruby text ranges to add to.\n * @param range The current ruby text range being built.\n * @param node The current ProseMirror node being processed.\n * @param pos The position of the current node in the document.\n * @param rubyTextType The MarkType for ruby text.\n * @returns The updated ruby text range, or null if the current node does not have a ruby text mark.\n */\nfunction getNextRange(\n  ranges: RubyTextRange[],\n  range: RubyTextRange | null,\n  node: ProseMirrorNode,\n  pos: number,\n  rubyTextType: MarkType,\n) {\n  const mark = getRubyTextMark(node, rubyTextType)\n\n  if (!mark) {\n    addRange(ranges, range)\n    return null\n  }\n\n  if (range && canExtendRange(range, mark, pos)) {\n    range.to += node.nodeSize\n    return range\n  }\n\n  addRange(ranges, range)\n  return { from: pos, to: pos + node.nodeSize, mark }\n}\n\nfunction getRubyTextRanges(doc: ProseMirrorNode, rubyTextType: MarkType) {\n  const ranges: RubyTextRange[] = []\n  let range: RubyTextRange | null = null\n\n  doc.descendants((node, pos) => {\n    range = getNextRange(ranges, range, node, pos, rubyTextType)\n  })\n  addRange(ranges, range)\n\n  return ranges\n}\n\n// Events from the annotation editor that ProseMirror must not handle itself.\nconst STOPPED_EVENT_TYPES = new Set([\n  'click',\n  'dblclick',\n  'contextmenu',\n  'mousedown',\n  'mouseup',\n  'pointerdown',\n  'pointerup',\n  'touchstart',\n  'touchend',\n  'keydown',\n  'keypress',\n  'keyup',\n  'input',\n  'beforeinput',\n  'compositionstart',\n  'compositionupdate',\n  'compositionend',\n  'paste',\n  'cut',\n  'copy',\n  'focus',\n  'blur',\n  'focusin',\n  'focusout',\n])\n\nfunction createDecorations(\n  doc: ProseMirrorNode,\n  rubyTextType: MarkType,\n  options: RubyTextDecorationPluginOptions,\n) {\n  const decorations = getRubyTextRanges(doc, rubyTextType).map(range => {\n    const annotation = range.mark.attrs.rt ?? ''\n\n    return Decoration.widget(\n      range.to,\n      view => createRtElement(annotation, range, rubyTextType, view, options),\n      {\n        key: `ruby-text-${range.from}-${range.to}-${annotation}`,\n        marks: [range.mark],\n        side: 1,\n        stopEvent: event => options.allowClickToEdit && STOPPED_EVENT_TYPES.has(event.type),\n        destroy: node => editSessions.get(node)?.(),\n      },\n    )\n  })\n\n  return DecorationSet.create(doc, decorations)\n}\n\nexport function RubyTextDecorationPlugin(\n  rubyTextType: MarkType,\n  options: RubyTextDecorationPluginOptions,\n) {\n  return new Plugin({\n    key: rubyTextDecorationPluginKey,\n    state: {\n      init: (_, state) => createDecorations(state.doc, rubyTextType, options),\n      apply: (transaction, decorations) =>\n        transaction.docChanged\n          ? createDecorations(transaction.doc, rubyTextType, options)\n          : decorations.map(transaction.mapping, transaction.doc),\n    },\n    props: {\n      decorations: state => rubyTextDecorationPluginKey.getState(state),\n    },\n  })\n}\n","import { RubyText } from './ruby-text.js'\n\nexport * from './ruby-text.js'\n\nexport default RubyText\n"],"mappings":"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","names":["_a"]}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@tiptap/extension-ruby-text",
+  "version": "3.29.0",
+  "description": "HTML ruby text annotation extension for tiptap",
+  "keywords": [
+    "tiptap",
+    "tiptap extension",
+    "ruby-text",
+    "furigana",
+    "cjk"
+  ],
+  "homepage": "https://tiptap.dev",
+  "bugs": {
+    "url": "https://github.com/ueberdosis/tiptap/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/extension-ruby-text"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "devDependencies": {
+    "@tiptap/core": "^3.29.0",
+    "@tiptap/pm": "^3.29.0"
+  },
+  "peerDependencies": {
+    "@tiptap/core": "3.29.0",
+    "@tiptap/pm": "3.29.0"
+  },
+  "scripts": {
+    "build": "tsup"
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import { RubyText } from './ruby-text.js'
+
+export * from './ruby-text.js'
+
+export default RubyText

package/src/ruby-text-decoration-plugin.ts

@@ -0,0 +1,295 @@
+import type { Editor } from '@tiptap/core'
+import type { Mark, MarkType, Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'
+import { Decoration, DecorationSet, type EditorView } from '@tiptap/pm/view'
+
+const rubyTextDecorationPluginKey = new PluginKey('rubyTextDecoration')
+
+// Ends a widget's edit session on destroy, so stale submit/dismiss calls do nothing.
+const editSessions = new WeakMap<Node, () => void>()
+
+interface RubyTextRange {
+  from: number
+  to: number
+  mark: Mark
+}
+
+export interface RubyTextAnnotationEditorProps {
+  /**
+   * The current annotation value (`''` when the mark has an empty annotation).
+   */
+  annotation: string
+  /**
+   * Applies the given value as the new annotation and closes the editor.
+   * Calling it more than once (or after `dismiss`) is a no-op.
+   */
+  submit: (value: string) => void
+  /**
+   * Closes the editor without changing the annotation.
+   * Calling it more than once (or after `submit`) is a no-op.
+   */
+  dismiss: () => void
+  /**
+   * The editor instance.
+   */
+  editor: Editor
+}
+
+export interface RubyTextDecorationPluginOptions {
+  editor: Editor
+  allowClickToEdit: boolean
+  renderAnnotationEditor?: (props: RubyTextAnnotationEditorProps) => HTMLElement
+}
+
+// Enter and Escape during IME composition must not close the editor.
+// Safari reports some IME keydowns only via the deprecated keyCode 229.
+function isImeEvent(event: KeyboardEvent) {
+  const legacyKeyCode = (event as { keyCode?: number }).keyCode
+  return event.isComposing || legacyKeyCode === 229
+}
+
+/** Default annotation editor: a plain text input. Enter submits, Escape or blur dismisses. */
+function defaultRenderAnnotationEditor({
+  annotation,
+  submit,
+  dismiss,
+}: RubyTextAnnotationEditorProps) {
+  const input = document.createElement('input')
+  input.type = 'text'
+  input.value = annotation
+  input.size = Math.max(annotation.length, 1)
+  input.setAttribute('aria-label', 'Ruby text annotation')
+
+  input.addEventListener('focus', () => input.select(), { once: true })
+  input.addEventListener('blur', () => dismiss())
+  input.addEventListener('keydown', event => {
+    if (isImeEvent(event)) {
+      return
+    }
+
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      dismiss()
+    }
+
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      submit(input.value)
+    }
+  })
+
+  return input
+}
+
+function createRtElement(
+  annotation: string,
+  range: RubyTextRange,
+  rubyTextType: MarkType,
+  view: EditorView,
+  options: RubyTextDecorationPluginOptions,
+) {
+  const rt = document.createElement('rt')
+  rt.contentEditable = 'false'
+  rt.textContent = annotation
+  let editing = false
+
+  const restoreEditorFocus = () => {
+    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, range.to)))
+    view.focus()
+  }
+
+  if (!options.allowClickToEdit || !view.editable) {
+    return rt
+  }
+
+  editSessions.set(rt, () => {
+    editing = false
+  })
+
+  const dismiss = () => {
+    if (!editing) {
+      return
+    }
+
+    editing = false
+    rt.textContent = annotation
+    restoreEditorFocus()
+  }
+
+  const submit = (value: string) => {
+    if (!editing) {
+      return
+    }
+
+    // An unchanged value produces no doc change, so the widget would not
+    // re-render and the editor element would stay mounted.
+    if (!view.editable || value === annotation) {
+      dismiss()
+      return
+    }
+
+    editing = false
+    const transaction = view.state.tr.addMark(
+      range.from,
+      range.to,
+      rubyTextType.create({ ...range.mark.attrs, rt: value }),
+    )
+
+    view.dispatch(transaction.setSelection(TextSelection.create(transaction.doc, range.to)))
+    view.focus()
+  }
+
+  const openEditor = () => {
+    const renderEditor = options.renderAnnotationEditor ?? defaultRenderAnnotationEditor
+    const element = renderEditor({ annotation, submit, dismiss, editor: options.editor })
+
+    rt.replaceChildren(element)
+
+    // Browsers ignore autofocus on inserted nodes, so we focus it manually.
+    const focusTarget = element.querySelector<HTMLElement>('[autofocus]') ?? element
+    focusTarget.focus()
+  }
+
+  rt.addEventListener('click', () => {
+    if (editing || !view.editable) {
+      return
+    }
+
+    editing = true
+    openEditor()
+  })
+
+  return rt
+}
+
+/** Gets the mark of ruby text from the given node, if it exists. */
+function getRubyTextMark(node: ProseMirrorNode, rubyTextType: MarkType) {
+  return node.isText ? node.marks.find(candidate => candidate.type === rubyTextType) : undefined
+}
+
+/** Adds a ruby text range to an existing array of ranges. */
+function addRange(ranges: RubyTextRange[], range: RubyTextRange | null) {
+  if (range) {
+    ranges.push(range)
+  }
+}
+
+/** Can the current range be extended with the given mark at the given position? */
+function canExtendRange(range: RubyTextRange | null, mark: Mark, pos: number) {
+  return range?.to === pos && range.mark.eq(mark)
+}
+
+/**
+ * Gets the next ruby text range based on the current node and position.
+ * @param ranges The array of ruby text ranges to add to.
+ * @param range The current ruby text range being built.
+ * @param node The current ProseMirror node being processed.
+ * @param pos The position of the current node in the document.
+ * @param rubyTextType The MarkType for ruby text.
+ * @returns The updated ruby text range, or null if the current node does not have a ruby text mark.
+ */
+function getNextRange(
+  ranges: RubyTextRange[],
+  range: RubyTextRange | null,
+  node: ProseMirrorNode,
+  pos: number,
+  rubyTextType: MarkType,
+) {
+  const mark = getRubyTextMark(node, rubyTextType)
+
+  if (!mark) {
+    addRange(ranges, range)
+    return null
+  }
+
+  if (range && canExtendRange(range, mark, pos)) {
+    range.to += node.nodeSize
+    return range
+  }
+
+  addRange(ranges, range)
+  return { from: pos, to: pos + node.nodeSize, mark }
+}
+
+function getRubyTextRanges(doc: ProseMirrorNode, rubyTextType: MarkType) {
+  const ranges: RubyTextRange[] = []
+  let range: RubyTextRange | null = null
+
+  doc.descendants((node, pos) => {
+    range = getNextRange(ranges, range, node, pos, rubyTextType)
+  })
+  addRange(ranges, range)
+
+  return ranges
+}
+
+// Events from the annotation editor that ProseMirror must not handle itself.
+const STOPPED_EVENT_TYPES = new Set([
+  'click',
+  'dblclick',
+  'contextmenu',
+  'mousedown',
+  'mouseup',
+  'pointerdown',
+  'pointerup',
+  'touchstart',
+  'touchend',
+  'keydown',
+  'keypress',
+  'keyup',
+  'input',
+  'beforeinput',
+  'compositionstart',
+  'compositionupdate',
+  'compositionend',
+  'paste',
+  'cut',
+  'copy',
+  'focus',
+  'blur',
+  'focusin',
+  'focusout',
+])
+
+function createDecorations(
+  doc: ProseMirrorNode,
+  rubyTextType: MarkType,
+  options: RubyTextDecorationPluginOptions,
+) {
+  const decorations = getRubyTextRanges(doc, rubyTextType).map(range => {
+    const annotation = range.mark.attrs.rt ?? ''
+
+    return Decoration.widget(
+      range.to,
+      view => createRtElement(annotation, range, rubyTextType, view, options),
+      {
+        key: `ruby-text-${range.from}-${range.to}-${annotation}`,
+        marks: [range.mark],
+        side: 1,
+        stopEvent: event => options.allowClickToEdit && STOPPED_EVENT_TYPES.has(event.type),
+        destroy: node => editSessions.get(node)?.(),
+      },
+    )
+  })
+
+  return DecorationSet.create(doc, decorations)
+}
+
+export function RubyTextDecorationPlugin(
+  rubyTextType: MarkType,
+  options: RubyTextDecorationPluginOptions,
+) {
+  return new Plugin({
+    key: rubyTextDecorationPluginKey,
+    state: {
+      init: (_, state) => createDecorations(state.doc, rubyTextType, options),
+      apply: (transaction, decorations) =>
+        transaction.docChanged
+          ? createDecorations(transaction.doc, rubyTextType, options)
+          : decorations.map(transaction.mapping, transaction.doc),
+    },
+    props: {
+      decorations: state => rubyTextDecorationPluginKey.getState(state),
+    },
+  })
+}