@tiptap/extension-ruby-text 3.29.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025, Tiptap GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,20 @@
+# @tiptap/extension-ruby-text
+
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-ruby-text.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-ruby-text)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-ruby-text.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-ruby-text.svg)](https://www.npmjs.com/package/@tiptap/extension-ruby-text)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+
+Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as _New York Times_, _The Guardian_ or _Atlassian_.
+
+This package adds support for [HTML ruby text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby) (reading guides for CJK text). It is not related to the Ruby programming language.
+
+## Official Documentation
+
+Documentation can be found on the [Tiptap website](https://tiptap.dev).
+
+## License
+
+Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

package/dist/index.cjs

@@ -0,0 +1,317 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  RubyText: () => RubyText,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ruby-text.ts
+var import_core = require("@tiptap/core");
+
+// src/ruby-text-decoration-plugin.ts
+var import_state = require("@tiptap/pm/state");
+var import_view = require("@tiptap/pm/view");
+var rubyTextDecorationPluginKey = new import_state.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(import_state.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(import_state.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 import_view.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 import_view.DecorationSet.create(doc, decorations);
+}
+function RubyTextDecorationPlugin(rubyTextType, options) {
+  return new import_state.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 = import_core.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",
+      (0, import_core.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((0, import_core.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;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RubyText
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/ruby-text.ts","../src/ruby-text-decoration-plugin.ts"],"sourcesContent":["import { RubyText } from './ruby-text.js'\n\nexport * from './ruby-text.js'\n\nexport default RubyText\n","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"],"mappings":"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","names":["_a"]}

package/dist/index.d.cts

@@ -0,0 +1,77 @@
+import { Editor, Mark } from '@tiptap/core';
+
+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;
+}
+
+interface RubyTextOptions {
+    /**
+     * HTML attributes to add to the ruby element.
+     * @default {}
+     */
+    HTMLAttributes: Record<string, any>;
+    /**
+     * Whether clicking an annotation opens an inline editor.
+     * @default true
+     */
+    allowClickToEdit: boolean;
+    /**
+     * Renders a custom element used as the inline annotation editor.
+     * The returned element is mounted inside the `rt` element. A descendant
+     * with the `autofocus` attribute is focused, otherwise the element itself.
+     * When not set, a plain text input is rendered.
+     * @default undefined
+     */
+    renderAnnotationEditor?: (props: RubyTextAnnotationEditorProps) => HTMLElement;
+}
+interface RubyTextAttributes {
+    /**
+     * The ruby text annotation rendered in the HTML `rt` element.
+     */
+    rt: string | null;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        rubyText: {
+            /**
+             * Set a ruby text mark with an annotation on the current selection.
+             * @example editor.commands.setRubyText({ rt: 'かんじ' })
+             */
+            setRubyText: (attributes: RubyTextAttributes) => ReturnType;
+            /**
+             * Toggle a ruby text mark on the current selection.
+             * @example editor.commands.toggleRubyText({ rt: 'かんじ' })
+             */
+            toggleRubyText: (attributes: RubyTextAttributes) => ReturnType;
+            /**
+             * Remove the ruby text mark from the current selection.
+             * @example editor.commands.unsetRubyText()
+             */
+            unsetRubyText: () => ReturnType;
+        };
+    }
+}
+/**
+ * This extension adds support for HTML ruby text annotations.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby
+ */
+declare const RubyText: Mark<RubyTextOptions, any>;
+
+export { RubyText, type RubyTextAnnotationEditorProps, type RubyTextAttributes, type RubyTextOptions, RubyText as default };

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+import { Editor, Mark } from '@tiptap/core';
+
+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;
+}
+
+interface RubyTextOptions {
+    /**
+     * HTML attributes to add to the ruby element.
+     * @default {}
+     */
+    HTMLAttributes: Record<string, any>;
+    /**
+     * Whether clicking an annotation opens an inline editor.
+     * @default true
+     */
+    allowClickToEdit: boolean;
+    /**
+     * Renders a custom element used as the inline annotation editor.
+     * The returned element is mounted inside the `rt` element. A descendant
+     * with the `autofocus` attribute is focused, otherwise the element itself.
+     * When not set, a plain text input is rendered.
+     * @default undefined
+     */
+    renderAnnotationEditor?: (props: RubyTextAnnotationEditorProps) => HTMLElement;
+}
+interface RubyTextAttributes {
+    /**
+     * The ruby text annotation rendered in the HTML `rt` element.
+     */
+    rt: string | null;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        rubyText: {
+            /**
+             * Set a ruby text mark with an annotation on the current selection.
+             * @example editor.commands.setRubyText({ rt: 'かんじ' })
+             */
+            setRubyText: (attributes: RubyTextAttributes) => ReturnType;
+            /**
+             * Toggle a ruby text mark on the current selection.
+             * @example editor.commands.toggleRubyText({ rt: 'かんじ' })
+             */
+            toggleRubyText: (attributes: RubyTextAttributes) => ReturnType;
+            /**
+             * Remove the ruby text mark from the current selection.
+             * @example editor.commands.unsetRubyText()
+             */
+            unsetRubyText: () => ReturnType;
+        };
+    }
+}
+/**
+ * This extension adds support for HTML ruby text annotations.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby
+ */
+declare const RubyText: Mark<RubyTextOptions, any>;
+
+export { RubyText, type RubyTextAnnotationEditorProps, type RubyTextAttributes, type RubyTextOptions, RubyText as default };