@pixerate/editor 0.14.0 → 0.14.1

package/dist/index.cjs

@@ -2492,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 "";
@@ -2582,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") || "",
@@ -2677,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;
@@ -2732,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);
         }
       }
     });
@@ -2788,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();