@ai-matrx/rich-editor 0.0.0 → 0.1.2

package/dist/core/extensions.js

@@ -0,0 +1,326 @@
+import { Extension, Mark, Node, mergeAttributes } from "@tiptap/core";
+import { Document } from "@tiptap/extension-document";
+import { Text } from "@tiptap/extension-text";
+import { Paragraph } from "@tiptap/extension-paragraph";
+import { Heading } from "@tiptap/extension-heading";
+import { Bold } from "@tiptap/extension-bold";
+import { Italic } from "@tiptap/extension-italic";
+import { Strike } from "@tiptap/extension-strike";
+import { Code } from "@tiptap/extension-code";
+import { Link } from "@tiptap/extension-link";
+import { Blockquote } from "@tiptap/extension-blockquote";
+import { HorizontalRule } from "@tiptap/extension-horizontal-rule";
+import { HardBreak } from "@tiptap/extension-hard-break";
+import {
+  BulletList,
+  ListItem,
+  ListKeymap,
+  OrderedList
+} from "@tiptap/extension-list";
+import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
+import { Dropcursor, Focus, Gapcursor, Placeholder, UndoRedo } from "@tiptap/extensions";
+import { MarkdownTextPaste } from "./paste-markdown.js";
+import { ClipboardPlainText } from "./clipboard-text.js";
+const mdAttr = () => ({ default: null, rendered: false, keepOnSplit: false });
+const MD_ID_NODE_TYPES = [
+  "paragraph",
+  "heading",
+  "bulletList",
+  "orderedList",
+  "listItem",
+  "blockquote",
+  "horizontalRule",
+  "sourceLocked"
+];
+function fenceFromPre(element) {
+  const code = element.querySelector("code");
+  const language = /(?:^|\s)(?:language|lang)-([\w+#.-]+)/.exec(code?.className ?? element.className)?.[1] ?? "";
+  const text = (code ?? element).textContent?.replace(/\n$/, "") ?? "";
+  let longest = 0;
+  for (const run of text.match(/`+/g) ?? []) longest = Math.max(longest, run.length);
+  const fence = "`".repeat(Math.max(3, longest + 1));
+  return `${fence}${language}
+${text}
+${fence}`;
+}
+const SourceBlockNode = Node.create({
+  name: "sourceBlock",
+  group: "topblock",
+  content: "block+",
+  addAttributes() {
+    return { b: mdAttr() };
+  },
+  parseHTML() {
+    return [{ tag: "div[data-md-source-block]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, {
+        "data-md-source-block": "",
+        class: "rich-editor-source-block"
+      }),
+      0
+    ];
+  }
+});
+const IslandBlockNode = Node.create({
+  name: "islandBlock",
+  group: "topblock block",
+  atom: true,
+  selectable: true,
+  draggable: true,
+  addAttributes() {
+    return {
+      raw: { default: "", rendered: false },
+      islandType: { default: "fence", rendered: false },
+      complete: { default: true, rendered: false },
+      b: mdAttr()
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-md-island]",
+        getAttrs: (element) => ({
+          raw: element.getAttribute("data-md-raw") ?? "",
+          islandType: element.getAttribute("data-md-island") ?? "fence"
+        })
+      },
+      {
+        // Pasted code (<pre>, <pre><code class="language-x">) becomes a fence island.
+        tag: "pre",
+        preserveWhitespace: "full",
+        getAttrs: (element) => ({ raw: fenceFromPre(element), islandType: "fence" })
+      }
+    ];
+  },
+  renderHTML({ node }) {
+    return [
+      "div",
+      {
+        "data-md-island": String(node.attrs.islandType),
+        "data-md-raw": String(node.attrs.raw)
+      },
+      ["pre", String(node.attrs.raw)]
+    ];
+  },
+  renderText({ node }) {
+    return String(node.attrs.raw);
+  }
+});
+const SourceLockedNode = Node.create({
+  name: "sourceLocked",
+  group: "block",
+  atom: true,
+  selectable: true,
+  draggable: true,
+  addAttributes() {
+    return {
+      raw: { default: "", rendered: false },
+      reason: { default: null, rendered: false },
+      b: mdAttr()
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-md-locked]",
+        getAttrs: (element) => ({
+          raw: element.getAttribute("data-md-raw") ?? ""
+        })
+      }
+    ];
+  },
+  renderHTML({ node }) {
+    return [
+      "div",
+      { "data-md-locked": "", "data-md-raw": String(node.attrs.raw) },
+      ["pre", String(node.attrs.raw)]
+    ];
+  },
+  renderText({ node }) {
+    return String(node.attrs.raw);
+  }
+});
+const InlineIslandNode = Node.create({
+  name: "inlineIsland",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  addAttributes() {
+    return {
+      raw: { default: "", rendered: false },
+      islandType: { default: "variable", rendered: false }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        // Pasted images keep their bytes as a markdown image island.
+        tag: "img[src]",
+        getAttrs: (element) => ({
+          raw: `![${(element.getAttribute("alt") ?? "").replace(/[[\]]/g, "")}](${element.getAttribute("src") ?? ""})`,
+          islandType: "md_image"
+        })
+      },
+      {
+        tag: "span[data-md-inline]",
+        getAttrs: (element) => ({
+          raw: element.getAttribute("data-md-raw") ?? "",
+          islandType: element.getAttribute("data-md-inline") ?? "variable"
+        })
+      }
+    ];
+  },
+  renderHTML({ node }) {
+    return [
+      "span",
+      {
+        "data-md-inline": String(node.attrs.islandType),
+        "data-md-raw": String(node.attrs.raw)
+      },
+      String(node.attrs.raw)
+    ];
+  },
+  renderText({ node }) {
+    return String(node.attrs.raw);
+  }
+});
+const MarkdownFidelityAttributes = Extension.create({
+  name: "markdownFidelity",
+  addGlobalAttributes() {
+    return [
+      { types: [...MD_ID_NODE_TYPES], attributes: { mdId: mdAttr() } },
+      { types: ["heading"], attributes: { mdOpen: mdAttr(), mdClose: mdAttr() } },
+      {
+        types: ["listItem"],
+        attributes: {
+          mdLead: mdAttr(),
+          mdMarker: mdAttr(),
+          mdAfter: mdAttr(),
+          mdTask: mdAttr(),
+          mdIndent: mdAttr()
+        }
+      },
+      { types: ["blockquote"], attributes: { mdPrefix: mdAttr(), mdAlert: mdAttr() } },
+      {
+        types: ["table"],
+        attributes: { mdId: mdAttr(), mdDelim: mdAttr(), mdAligns: mdAttr(), mdPipes: mdAttr() }
+      },
+      { types: ["tableRow"], attributes: { mdRaw: mdAttr(), mdCells: mdAttr(), mdSegs: mdAttr() } },
+      { types: ["horizontalRule", "hardBreak"], attributes: { mdRaw: mdAttr() } },
+      {
+        types: ["bold", "italic", "strike"],
+        attributes: { mdMarker: mdAttr(), mdDepth: mdAttr() }
+      },
+      {
+        types: ["code"],
+        attributes: { mdOpen: mdAttr(), mdClose: mdAttr(), mdDepth: mdAttr() }
+      },
+      {
+        types: ["link"],
+        attributes: {
+          mdForm: mdAttr(),
+          mdTail: mdAttr(),
+          mdTailHref: mdAttr(),
+          mdText: mdAttr(),
+          mdDepth: mdAttr()
+        }
+      }
+    ];
+  }
+});
+const NewlineHardBreak = HardBreak.extend({
+  addKeyboardShortcuts() {
+    const newline = () => this.editor.commands.command(({ tr, dispatch }) => {
+      if (dispatch) tr.insertText("\n");
+      return true;
+    });
+    return { "Shift-Enter": newline, "Mod-Enter": newline };
+  }
+});
+const cellAlign = {
+  align: {
+    default: null,
+    parseHTML: (element) => element.style.textAlign || null,
+    renderHTML: (attributes) => attributes.align ? { style: `text-align: ${String(attributes.align)}` } : {}
+  }
+};
+const InlineTableCell = TableCell.extend({
+  content: "paragraph",
+  addAttributes() {
+    return { ...this.parent?.(), ...cellAlign };
+  }
+});
+const InlineTableHeader = TableHeader.extend({
+  content: "paragraph",
+  addAttributes() {
+    return { ...this.parent?.(), ...cellAlign };
+  }
+});
+const CombinableCode = Code.extend({ excludes: "" });
+const EscapedText = Mark.create({
+  name: "mdEscape",
+  inclusive: false,
+  excludes: "",
+  parseHTML() {
+    return [{ tag: "span[data-md-escape]" }];
+  },
+  renderHTML() {
+    return ["span", { "data-md-escape": "" }, 0];
+  }
+});
+function createRichEditorExtensions(options = {}) {
+  const list = [
+    Document.extend({ content: "(block | topblock)+" }),
+    Paragraph,
+    Text,
+    Heading.configure({ levels: [1, 2, 3, 4, 5, 6] }),
+    Blockquote,
+    BulletList,
+    OrderedList,
+    ListItem,
+    ListKeymap,
+    HorizontalRule,
+    NewlineHardBreak,
+    Bold,
+    Italic,
+    Strike,
+    CombinableCode,
+    EscapedText,
+    Link.configure({
+      openOnClick: false,
+      autolink: false,
+      linkOnPaste: true
+    }),
+    Table.configure({ resizable: false }),
+    TableRow,
+    InlineTableHeader,
+    InlineTableCell,
+    SourceBlockNode,
+    IslandBlockNode,
+    SourceLockedNode,
+    InlineIslandNode,
+    MarkdownFidelityAttributes,
+    UndoRedo,
+    Focus.configure({ className: "has-focus", mode: "shallowest" }),
+    Gapcursor,
+    Dropcursor,
+    Placeholder.configure({ placeholder: options.placeholder ?? "Write\u2026" }),
+    MarkdownTextPaste.configure({ onNotice: options.onPasteNotice ?? null }),
+    ClipboardPlainText
+  ];
+  return list.map((extension) => extension.extend({ addPasteRules: () => [] }));
+}
+export {
+  EscapedText,
+  InlineIslandNode,
+  IslandBlockNode,
+  MD_ID_NODE_TYPES,
+  MarkdownFidelityAttributes,
+  SourceBlockNode,
+  SourceLockedNode,
+  createRichEditorExtensions
+};

package/dist/core/find-replace.d.ts

@@ -0,0 +1,34 @@
+export interface FindOptions {
+    caseSensitive?: boolean;
+    wholeWord?: boolean;
+    regex?: boolean;
+    includeProtected?: boolean;
+}
+export interface FindMatch {
+    start: number;
+    end: number;
+    /** The match overlaps protected content. */
+    inProtected: boolean;
+    /** The stored bytes of the island it overlaps (for the explicit-edit record). */
+    islandRaw: string | null;
+}
+export interface FindResult {
+    /** Matches the replace may act on. */
+    matches: FindMatch[];
+    /** Matches left out because they sit in protected content. */
+    skippedProtected: number;
+    /** A readable reason when the pattern is invalid. */
+    error: string | null;
+}
+/** The one pattern builder both views use. Null when the query is empty or invalid. */
+export declare function buildFindRegex(query: string, options?: FindOptions): {
+    regex: RegExp | null;
+    error: string | null;
+};
+/** Ranges of every island in the text, in order, with the island's bytes. */
+export declare function protectedRanges(text: string): Array<[number, number, string]>;
+export declare function findMatches(text: string, query: string, options?: FindOptions): FindResult;
+/** The replacement text for one match (`$1` groups work in regex mode). */
+export declare function replacementFor(matched: string, query: string, replacement: string, options?: FindOptions): string;
+/** Apply a replacement to the given matches (non-overlapping, in order). */
+export declare function replaceMatches(text: string, matches: readonly FindMatch[], query: string, replacement: string, options?: FindOptions): string;

package/dist/core/find-replace.js

@@ -0,0 +1,67 @@
+import { listIslands, tokenizeSource } from "@ai-matrx/content-ir/source";
+const MAX_MATCHES = 5e3;
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function buildFindRegex(query, options = {}) {
+  if (!query) return { regex: null, error: null };
+  let source = options.regex ? query : escapeRegExp(query);
+  if (options.wholeWord) source = `(?<![\\p{L}\\p{N}_])(?:${source})(?![\\p{L}\\p{N}_])`;
+  try {
+    return { regex: new RegExp(source, `gu${options.caseSensitive ? "" : "i"}`), error: null };
+  } catch (error) {
+    return {
+      regex: null,
+      error: `That pattern is not valid: ${error instanceof Error ? error.message : String(error)}`
+    };
+  }
+}
+function protectedRanges(text) {
+  return listIslands(tokenizeSource(text)).map((island) => [island.start, island.end, island.raw]);
+}
+function findMatches(text, query, options = {}) {
+  const { regex, error } = buildFindRegex(query, options);
+  if (!regex) return { matches: [], skippedProtected: 0, error };
+  const ranges = protectedRanges(text);
+  const matches = [];
+  let skippedProtected = 0;
+  let rangeIndex = 0;
+  for (const match of text.matchAll(regex)) {
+    const start = match.index ?? 0;
+    const end = start + match[0].length;
+    if (end === start) continue;
+    while (rangeIndex < ranges.length && (ranges[rangeIndex]?.[1] ?? 0) <= start) rangeIndex += 1;
+    const range = ranges[rangeIndex];
+    const inProtected = Boolean(range && range[0] < end && range[1] > start);
+    if (inProtected && !options.includeProtected) {
+      skippedProtected += 1;
+      continue;
+    }
+    matches.push({ start, end, inProtected, islandRaw: inProtected && range ? range[2] : null });
+    if (matches.length >= MAX_MATCHES) break;
+  }
+  return { matches, skippedProtected, error: null };
+}
+function replacementFor(matched, query, replacement, options = {}) {
+  if (!options.regex) return replacement;
+  const { regex } = buildFindRegex(query, options);
+  if (!regex) return replacement;
+  return matched.replace(new RegExp(regex.source, regex.flags.replace("g", "")), replacement);
+}
+function replaceMatches(text, matches, query, replacement, options = {}) {
+  let out = "";
+  let cursor = 0;
+  for (const match of matches) {
+    out += text.slice(cursor, match.start);
+    out += replacementFor(text.slice(match.start, match.end), query, replacement, options);
+    cursor = match.end;
+  }
+  return out + text.slice(cursor);
+}
+export {
+  buildFindRegex,
+  findMatches,
+  protectedRanges,
+  replaceMatches,
+  replacementFor
+};

package/dist/core/history-approval.d.ts

@@ -0,0 +1,11 @@
+import type { Transaction } from "@tiptap/pm/state";
+/** True when the transaction is an undo or a redo. */
+export declare function isHistoryTransaction(tr: Transaction): boolean;
+/**
+ * The island raws an undo/redo transaction took out of the document (as a
+ * multiset difference, so one of two identical islands counts). Empty for
+ * every other transaction.
+ */
+export declare function islandsReleasedByHistory(tr: Transaction): string[];
+/** The same rule for plain text (the Source view): island raws an undo/redo took out. */
+export declare function islandsReleasedBetweenTexts(before: string, after: string): string[];

package/dist/core/history-approval.js

@@ -0,0 +1,43 @@
+import { listIslands, tokenizeSource } from "@ai-matrx/content-ir/source";
+const HISTORY_META = "history$";
+const ISLAND_TYPES = /* @__PURE__ */ new Set(["islandBlock", "inlineIsland", "sourceLocked"]);
+function islandRaws(doc) {
+  const counts = /* @__PURE__ */ new Map();
+  doc.descendants((node) => {
+    if (!ISLAND_TYPES.has(node.type.name)) return true;
+    const raw = String(node.attrs.raw ?? "");
+    counts.set(raw, (counts.get(raw) ?? 0) + 1);
+    return false;
+  });
+  return counts;
+}
+function isHistoryTransaction(tr) {
+  return tr.getMeta(HISTORY_META) !== void 0;
+}
+function islandsReleasedByHistory(tr) {
+  if (!tr.docChanged || !isHistoryTransaction(tr)) return [];
+  const before = islandRaws(tr.before);
+  const after = islandRaws(tr.doc);
+  const released = [];
+  for (const [raw, count] of before) {
+    if ((after.get(raw) ?? 0) < count) released.push(raw);
+  }
+  return released;
+}
+function islandsReleasedBetweenTexts(before, after) {
+  const count = (text) => {
+    const counts = /* @__PURE__ */ new Map();
+    for (const island of listIslands(tokenizeSource(text))) counts.set(island.raw, (counts.get(island.raw) ?? 0) + 1);
+    return counts;
+  };
+  const was = count(before);
+  const now = count(after);
+  const released = [];
+  for (const [raw, n] of was) if ((now.get(raw) ?? 0) < n) released.push(raw);
+  return released;
+}
+export {
+  isHistoryTransaction,
+  islandsReleasedBetweenTexts,
+  islandsReleasedByHistory
+};

package/dist/core/host-value.d.ts

@@ -0,0 +1,29 @@
+/**
+ * What the editor does when its host hands it a NEW `value` (verify-RC-B4 R6-4).
+ *
+ * The break this guards: under a slow server the host's own save echo arrived
+ * while the person was still typing — the host re-sent `value` (the text of the
+ * save that just landed), the editor treated it as "a new document", remounted
+ * and silently dropped every keystroke typed after Save was pressed. The next
+ * save then persisted a copy without that typing.
+ *
+ * Rules, in order:
+ *  - the same value the host last sent → nothing;
+ *  - the value is a save the editor made (in flight or just landed) or already
+ *    equals the draft → it becomes the stored text; the draft is untouched;
+ *  - the draft has unsaved edits → the draft is KEPT, the new value becomes the
+ *    stored text the next save diffs against, and the person is told;
+ *  - otherwise (nothing unsaved) → the new document opens.
+ */
+export type HostValueAction = "ignore" | "adopt-stored" | "keep-draft" | "reset";
+export declare function reconcileHostValue(input: {
+    value: string;
+    /** The value the host sent last time. */
+    lastValue: string;
+    /** What the editor believes is stored. */
+    stored: string;
+    /** The person's current text (flushed). */
+    draft: string;
+    /** Texts this editor has sent to save and not yet seen settle (or just saw settle). */
+    ownSaves: ReadonlySet<string>;
+}): HostValueAction;

package/dist/core/host-value.js

@@ -0,0 +1,10 @@
+function reconcileHostValue(input) {
+  const { value, lastValue, stored, draft, ownSaves } = input;
+  if (value === lastValue) return "ignore";
+  if (ownSaves.has(value) || value === draft) return "adopt-stored";
+  if (draft !== stored) return "keep-draft";
+  return "reset";
+}
+export {
+  reconcileHostValue
+};

package/dist/core/html-to-markdown.d.ts

@@ -0,0 +1,3 @@
+import { type Schema } from "@tiptap/pm/model";
+/** Pasted HTML → markdown. Tables are squared and their cells flattened first (paste-html.ts). */
+export declare function htmlToMarkdown(html: string, schema: Schema): string;

package/dist/core/html-to-markdown.js

@@ -0,0 +1,12 @@
+import { DOMParser as ProseMirrorDOMParser } from "@tiptap/pm/model";
+import { createSerializeContext, serializeBlock } from "./markdown-serialize.js";
+import { normalizePastedHtml } from "./paste-html.js";
+function htmlToMarkdown(html, schema) {
+  const container = document.createElement("div");
+  container.innerHTML = normalizePastedHtml(html).html;
+  const doc = ProseMirrorDOMParser.fromSchema(schema).parse(container);
+  return serializeBlock(doc, createSerializeContext()).replace(/\s+$/, "");
+}
+export {
+  htmlToMarkdown
+};

package/dist/core/markdown-format.d.ts

@@ -0,0 +1,18 @@
+import type { SourceEditResult } from "./source-format.js";
+export type FormatCommandId = "bold" | "italic" | "strike" | "code" | "link" | "heading1" | "heading2" | "heading3" | "bulletList" | "orderedList" | "taskList" | "quote" | "codeBlock";
+export declare const FORMAT_COMMAND_IDS: readonly FormatCommandId[];
+export declare function isFormatCommandId(id: string): id is FormatCommandId;
+/** Run one formatting command on markdown text. Returns the minimal change. */
+export declare function formatMarkdown(text: string, from: number, to: number, command: FormatCommandId): SourceEditResult;
+/** Is the command already on for this selection (the toolbar's pressed state)? */
+export declare function isFormatActive(text: string, from: number, to: number, command: FormatCommandId): boolean;
+/**
+ * The keyboard chords for the commands (ProseMirror key names; "Mod" = ⌘ on
+ * Apple, Ctrl elsewhere). The rich editor's shortcut table carries the same
+ * keys; this map is what a plain textarea host binds.
+ */
+export declare const FORMAT_COMMAND_KEYS: Readonly<Record<FormatCommandId, readonly string[]>>;
+/** ProseMirror-style key name for a keyboard event ("Mod-Shift-x"). */
+export declare function keyNameOf(event: Pick<KeyboardEvent, "key" | "code" | "metaKey" | "ctrlKey" | "altKey" | "shiftKey">, apple: boolean): string | null;
+/** The command a chord runs, or null. */
+export declare function formatCommandForKey(keyName: string | null): FormatCommandId | null;