@pixerate/editor 0.13.0 → 0.14.1

package/dist/index.cjs

@@ -66,6 +66,8 @@ __export(src_exports, {
   SmilieReplacer: () => SmilieReplacer,
   SpreadsheetController: () => SpreadsheetController,
   StreamingLayoutManager: () => StreamingLayoutManager,
+  TEMPLATE_DEPTH_ERROR: () => TEMPLATE_DEPTH_ERROR,
+  TEMPLATE_LOOP_ERROR: () => TEMPLATE_LOOP_ERROR,
   TEMPLATE_REGEX: () => TEMPLATE_REGEX,
   TemplateSuggestions: () => TemplateSuggestions,
   VARIABLE_REGEX: () => VARIABLE_REGEX,
@@ -111,6 +113,7 @@ __export(src_exports, {
   getEditorText: () => getEditorText,
   getLatestVersion: () => getLatestVersion,
   getLayoutedNodes: () => getLayoutedNodes,
+  getTemplateBody: () => getTemplateBody,
   getViewportMetrics: () => getViewportMetrics,
   globalImageCache: () => globalImageCache,
   handleImageInsertion: () => handleImageInsertion,
@@ -280,6 +283,18 @@ function getLatestVersion(template) {
   }
   return template.versions[template.versions.length - 1];
 }
+var TEMPLATE_LOOP_ERROR = "[Template loop detected]";
+var TEMPLATE_DEPTH_ERROR = "[Template max depth exceeded]";
+function getTemplateBody(template, bindings) {
+  const boundVersionId = bindings?.[template.name];
+  if (boundVersionId && template.versions) {
+    const boundVersion = template.versions.find(
+      (v) => v.id === boundVersionId || v.version === boundVersionId
+    );
+    return boundVersion?.body;
+  }
+  return getLatestVersion(template)?.body ?? template.body;
+}
 function resolveTemplates(text, templates = [], options) {
   const templateMap = /* @__PURE__ */ new Map();
   for (const t of templates) {
@@ -287,50 +302,27 @@ function resolveTemplates(text, templates = [], options) {
   }
   const maxDepth = options?.maxDepth ?? 10;
   function resolveRecursive(currentText, visited, depth) {
-    if (depth > maxDepth) {
-      return "[Template max depth exceeded]";
-    }
-    let result = currentText;
     const regex = new RegExp(TEMPLATE_REGEX.source, TEMPLATE_REGEX.flags);
-    let match;
-    while ((match = regex.exec(result)) !== null) {
-      const [fullMatch, rawTemplateName] = match;
+    return currentText.replace(regex, (fullMatch, rawTemplateName) => {
       const templateName = rawTemplateName.trim();
       if (visited.has(templateName)) {
-        return "[Template loop detected]";
+        return TEMPLATE_LOOP_ERROR;
       }
       const template = templateMap.get(templateName);
       if (!template) {
-        continue;
-      }
-      let versionBody;
-      const boundVersionId = options?.bindings?.[templateName];
-      if (boundVersionId && template.versions) {
-        const boundVersion = template.versions.find(
-          (v) => v.id === boundVersionId || v.version === boundVersionId
-        );
-        versionBody = boundVersion?.body;
-      } else {
-        const latest = getLatestVersion(template);
-        versionBody = latest?.body ?? template.body;
+        return fullMatch;
       }
+      const versionBody = getTemplateBody(template, options?.bindings);
       if (versionBody === void 0) {
-        continue;
+        return fullMatch;
+      }
+      if (depth + 1 > maxDepth) {
+        return TEMPLATE_DEPTH_ERROR;
       }
       const nextVisited = new Set(visited);
       nextVisited.add(templateName);
-      const resolvedBody = resolveRecursive(
-        versionBody,
-        nextVisited,
-        depth + 1
-      );
-      if (resolvedBody === "[Template loop detected]" || resolvedBody === "[Template max depth exceeded]") {
-        return resolvedBody;
-      }
-      result = result.replace(fullMatch, resolvedBody);
-      regex.lastIndex = 0;
-    }
-    return result;
+      return resolveRecursive(versionBody, nextVisited, depth + 1);
+    });
   }
   return resolveRecursive(text, /* @__PURE__ */ new Set(), 0);
 }
@@ -379,7 +371,7 @@ function extractInstructionNames(text) {
 }
 
 // src/grammar/sourcemap.ts
-function resolveTemplatesWithMapping(text, templates = [], templateBindings) {
+function resolveTemplatesWithMapping(text, templates = [], templateBindings, options) {
   if (!templates || templates.length === 0 || !text.includes("{{")) {
     return {
       text,
@@ -395,7 +387,7 @@ function resolveTemplatesWithMapping(text, templates = [], templateBindings) {
     };
   }
   const templateMap = new Map(templates.map((t) => [t.name, t]));
-  const regex = /{{\s*([^}]+?)\s*}}/g;
+  const regex = new RegExp(TEMPLATE_REGEX.source, TEMPLATE_REGEX.flags);
   let match;
   let lastIndex = 0;
   let resolvedText = "";
@@ -417,25 +409,13 @@ function resolveTemplatesWithMapping(text, templates = [], templateBindings) {
     }
     let resolvedBody = fullMatch;
     let isTemplate = false;
-    if (templateMap.has(templateName)) {
-      const template = templateMap.get(templateName);
-      let versionBody;
-      const boundVersionId = templateBindings?.[templateName];
-      if (boundVersionId && template.versions) {
-        const boundVersion = template.versions.find(
-          (v) => v.id === boundVersionId || v.version === boundVersionId
-        );
-        versionBody = boundVersion?.body;
-      } else {
-        const latestVersion = getLatestVersion(template);
-        versionBody = latestVersion?.body ?? template.body;
-      }
-      if (versionBody !== void 0) {
-        resolvedBody = resolveTemplates(versionBody, templates, {
-          bindings: templateBindings
-        });
-        isTemplate = true;
-      }
+    const template = templateMap.get(templateName);
+    if (template && getTemplateBody(template, templateBindings) !== void 0) {
+      resolvedBody = resolveTemplates(fullMatch, templates, {
+        bindings: templateBindings,
+        maxDepth: options?.maxDepth
+      });
+      isTemplate = true;
     }
     if (isTemplate) {
       map.push({
@@ -480,9 +460,11 @@ function mapResolvedOffsetToRaw(resolvedOffset, map) {
     if (inRange) {
       if (seg.source === "raw") {
         return seg.rawStart + (resolvedOffset - seg.resolvedStart);
-      } else {
-        return seg.rawStart;
       }
+      if (resolvedOffset === seg.resolvedEnd) {
+        return seg.rawEnd;
+      }
+      return seg.rawStart;
     }
   }
   return resolvedOffset;
@@ -495,9 +477,11 @@ function mapRawOffsetToResolved(rawOffset, map) {
     if (inRange) {
       if (seg.source === "raw") {
         return seg.resolvedStart + (rawOffset - seg.rawStart);
-      } else {
-        return seg.resolvedStart;
       }
+      if (rawOffset === seg.rawEnd) {
+        return seg.resolvedEnd;
+      }
+      return seg.resolvedStart;
     }
   }
   return rawOffset;
@@ -2508,38 +2492,98 @@ function escapeHtml(text) {
   if (!text) return "";
   return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
 }
+var PARAGRAPH_HTML_REGEX = /^\s*<p[\s>][\s\S]*<\/p>\s*$/i;
 function plainTextToTipTapHtml(text) {
   if (!text) return "<p></p>";
-  if (/<p[\s>]/i.test(text)) {
+  if (PARAGRAPH_HTML_REGEX.test(text)) {
     return text;
   }
   return text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").split("\n").map((line) => `<p>${escapeHtml(line)}</p>`).join("");
 }
+var BLOCK_TAGS = /* @__PURE__ */ new Set([
+  "P",
+  "DIV",
+  "LI",
+  "UL",
+  "OL",
+  "PRE",
+  "BLOCKQUOTE",
+  "TABLE",
+  "TR",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "HR"
+]);
+var MENTION_SPAN_REGEX = /<span\b(?=[^>]*\bdata-type=["']mention["'])([^>]*)>[\s\S]*?<\/span>/gi;
+function getHtmlAttribute(attrs, name) {
+  const match = new RegExp(`\\b${name}=(?:"([^"]*)"|'([^']*)')`, "i").exec(
+    attrs
+  );
+  return match ? match[1] ?? match[2] : void 0;
+}
+function parseHtmlFragment(html) {
+  const template = document.createElement("template");
+  template.innerHTML = html;
+  return template.content;
+}
+function decodeHtmlEntities(text) {
+  return text.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#0*39;/g, "'").replace(/&nbsp;/g, "\xA0").replace(/&amp;/g, "&");
+}
 function htmlToPlainText(html) {
   if (!html) return "";
-  const mentionNormalized = html.replace(
-    /<span[^>]*data-type=["']mention["'][^>]*data-label=["']([^"']+)["'][^>]*>.*?<\/span>/gi,
-    "@$1"
-  ).replace(
-    /<span[^>]*data-type=["']mention["'][^>]*data-id=["']([^"']+)["'][^>]*>.*?<\/span>/gi,
-    "@$1"
-  );
+  const mentionNormalized = html.replace(MENTION_SPAN_REGEX, (match, attrs) => {
+    const label = getHtmlAttribute(attrs, "data-label") || getHtmlAttribute(attrs, "data-id");
+    return label ? `@${label}` : match;
+  });
   if (typeof document !== "undefined") {
-    const tempDiv = document.createElement("div");
-    tempDiv.innerHTML = mentionNormalized;
-    tempDiv.querySelectorAll("br.ProseMirror-trailingBreak").forEach((br) => br.remove());
-    tempDiv.querySelectorAll("br").forEach((br) => br.replaceWith("\n"));
-    const paragraphs = tempDiv.querySelectorAll("p, div, li, h1, h2, h3, h4, h5, h6");
-    if (paragraphs.length > 0) {
-      const textParts = [];
-      paragraphs.forEach((p) => {
-        textParts.push(p.textContent || "");
-      });
-      return textParts.join("\n");
-    }
-    return tempDiv.textContent || "";
-  }
-  return mentionNormalized.replace(/<br\s*\/?>/gi, "\n").replace(/<\/p>/gi, "\n").replace(/<\/div>/gi, "\n").replace(/<\/li>/gi, "\n").replace(/<[^>]+>/g, "").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#039;/g, "'").trim();
+    const fragment = parseHtmlFragment(mentionNormalized);
+    fragment.querySelectorAll("br.ProseMirror-trailingBreak").forEach((br) => br.remove());
+    const lines = [];
+    let current = null;
+    const flush = () => {
+      if (current !== null) {
+        lines.push(current);
+        current = null;
+      }
+    };
+    const visit = (node) => {
+      if (node.nodeType === 3) {
+        const value = node.nodeValue ?? "";
+        if (current === null && value.trim() === "") return;
+        current = (current ?? "") + value;
+        return;
+      }
+      if (node.nodeType !== 1) return;
+      const tag = node.tagName.toUpperCase();
+      if (tag === "BR") {
+        current = (current ?? "") + "\n";
+        return;
+      }
+      if (!BLOCK_TAGS.has(tag)) {
+        node.childNodes.forEach(visit);
+        return;
+      }
+      flush();
+      const linesBefore = lines.length;
+      node.childNodes.forEach(visit);
+      flush();
+      if (lines.length === linesBefore && tag !== "HR") {
+        lines.push("");
+      }
+    };
+    fragment.childNodes.forEach(visit);
+    flush();
+    return lines.join("\n");
+  }
+  const text = mentionNormalized.replace(/<br\s*\/?>/gi, "\n").replace(
+    /<\/(?:p|div|li|pre|blockquote|h[1-6])>(?:\s*<\/(?:li|ul|ol|blockquote|div)>)*/gi,
+    "\n"
+  ).replace(/<[^>]+>/g, "");
+  return decodeHtmlEntities(text).replace(/\n$/, "");
 }
 function getEditorText(editor) {
   if (!editor) return "";
@@ -2598,9 +2642,7 @@ function extractMentionsFromDoc(docOrEditor) {
   }
   if (typeof docOrEditor === "string") {
     if (typeof document !== "undefined") {
-      const div = document.createElement("div");
-      div.innerHTML = docOrEditor;
-      div.querySelectorAll('span[data-type="mention"]').forEach((el) => {
+      parseHtmlFragment(docOrEditor).querySelectorAll('span[data-type="mention"]').forEach((el) => {
         mentions.push({
           id: el.getAttribute("data-id") || "",
           label: el.getAttribute("data-label") || "",
@@ -2693,6 +2735,20 @@ function getEditorMarkdown(editor) {
 // src/controller.ts
 var import_core10 = require("@tiptap/core");
 var import_model2 = require("@tiptap/pm/model");
+function plainTextToSlice(text, schema) {
+  const nodes = [];
+  text.replace(/\r\n?/g, "\n").split("\n").forEach((line) => {
+    const nodeJson = { type: "paragraph" };
+    if (line.length > 0) {
+      nodeJson.content = [{ type: "text", text: line }];
+    }
+    try {
+      nodes.push(import_model2.Node.fromJSON(schema, nodeJson));
+    } catch {
+    }
+  });
+  return import_model2.Slice.maxOpen(import_model2.Fragment.fromArray(nodes));
+}
 var EditorController = class {
   editor;
   plainTextMode;
@@ -2748,20 +2804,7 @@ var EditorController = class {
         clipboardTextParser: (text, context, _plain, view) => {
           const schema = context?.doc?.type?.schema || context?.schema || view?.state?.schema || this.editor.schema;
           if (!schema) return import_model2.Slice.empty;
-          const blocks = text.replace(/\r\n?/g, "\n").split("\n");
-          const nodes = [];
-          blocks.forEach((line) => {
-            const nodeJson = { type: "paragraph" };
-            if (line.length > 0) {
-              nodeJson.content = [{ type: "text", text: line }];
-            }
-            try {
-              const node = import_model2.Node.fromJSON(schema, nodeJson);
-              nodes.push(node);
-            } catch {
-            }
-          });
-          return import_model2.Slice.maxOpen(import_model2.Fragment.fromArray(nodes));
+          return plainTextToSlice(text, schema);
         }
       }
     });
@@ -2804,14 +2847,29 @@ var EditorController = class {
       this.editor.commands.setContent(html, emitUpdate);
     }
   }
+  /**
+   * Replaces `from`..`to` with literal text: HTML in `text` is not parsed, and
+   * newlines split paragraphs.
+   */
+  insertPlainText(from, to, text) {
+    const { state, view } = this.editor;
+    const tr = text.includes("\n") || text.includes("\r") ? state.tr.replace(from, to, plainTextToSlice(text, state.schema)) : text ? state.tr.insertText(text, from, to) : state.tr.delete(from, to);
+    view.dispatch(tr.scrollIntoView());
+  }
+  /** Inserts text literally at the selection; HTML in `text` is not parsed. */
   insertText(text) {
-    this.editor.commands.insertContent(text);
+    const { from, to } = this.editor.state.selection;
+    this.insertPlainText(from, to, text);
   }
+  /** Inserts text literally at `pos`; HTML in `text` is not parsed. */
   insertTextAt(pos, text) {
-    this.editor.chain().focus().insertContentAt(pos, text).run();
+    this.insertPlainText(pos, pos, text);
+    this.editor.commands.focus();
   }
+  /** Replaces a range with literal text; HTML in `text` is not parsed. */
   replaceRange(from, to, text) {
-    this.editor.chain().focus().deleteRange({ from, to }).insertContentAt(from, text).run();
+    this.insertPlainText(from, to, text);
+    this.editor.commands.focus();
   }
   getCurrentContentString() {
     if (this.plainTextMode) return this.getPlainText();
@@ -7025,6 +7083,8 @@ function hitTestAnnotation(imgPt, ann, padding = 10) {
   SmilieReplacer,
   SpreadsheetController,
   StreamingLayoutManager,
+  TEMPLATE_DEPTH_ERROR,
+  TEMPLATE_LOOP_ERROR,
   TEMPLATE_REGEX,
   TemplateSuggestions,
   VARIABLE_REGEX,
@@ -7070,6 +7130,7 @@ function hitTestAnnotation(imgPt, ann, padding = 10) {
   getEditorText,
   getLatestVersion,
   getLayoutedNodes,
+  getTemplateBody,
   getViewportMetrics,
   globalImageCache,
   handleImageInsertion,