@pixerate/editor 0.14.0 → 0.14.2

package/dist/index.d.cts

@@ -55,8 +55,16 @@ declare class EditorController {
     setPlainText(text: string, emitUpdate?: boolean): void;
     getMarkdown(): string;
     setMarkdown(markdown: string, emitUpdate?: boolean): void;
+    /**
+     * Replaces `from`..`to` with literal text: HTML in `text` is not parsed, and
+     * newlines split paragraphs.
+     */
+    private insertPlainText;
+    /** Inserts text literally at the selection; HTML in `text` is not parsed. */
     insertText(text: string): void;
+    /** Inserts text literally at `pos`; HTML in `text` is not parsed. */
     insertTextAt(pos: number, text: string): void;
+    /** Replaces a range with literal text; HTML in `text` is not parsed. */
     replaceRange(from: number, to: number, text: string): void;
     getCurrentContentString(): string;
     isDirty(): boolean;

package/dist/index.d.ts

@@ -55,8 +55,16 @@ declare class EditorController {
     setPlainText(text: string, emitUpdate?: boolean): void;
     getMarkdown(): string;
     setMarkdown(markdown: string, emitUpdate?: boolean): void;
+    /**
+     * Replaces `from`..`to` with literal text: HTML in `text` is not parsed, and
+     * newlines split paragraphs.
+     */
+    private insertPlainText;
+    /** Inserts text literally at the selection; HTML in `text` is not parsed. */
     insertText(text: string): void;
+    /** Inserts text literally at `pos`; HTML in `text` is not parsed. */
     insertTextAt(pos: number, text: string): void;
+    /** Replaces a range with literal text; HTML in `text` is not parsed. */
     replaceRange(from: number, to: number, text: string): void;
     getCurrentContentString(): string;
     isDirty(): boolean;

package/dist/index.js

@@ -2330,38 +2330,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 "";
@@ -2420,9 +2480,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") || "",
@@ -2478,6 +2536,114 @@ md2.validateLink = (url) => {
   }
   return defaultValidateLink.call(md2, url);
 };
+var ALLOWED_HTML_TAGS = /* @__PURE__ */ new Set([
+  "a",
+  "abbr",
+  "b",
+  "blockquote",
+  "br",
+  "code",
+  "del",
+  "details",
+  "div",
+  "em",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "hr",
+  "i",
+  "img",
+  "input",
+  "kbd",
+  "li",
+  "mark",
+  "ol",
+  "p",
+  "pre",
+  "s",
+  "span",
+  "strong",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "tfoot",
+  "th",
+  "thead",
+  "tr",
+  "u",
+  "ul"
+]);
+var ALLOWED_HTML_ATTRS = /* @__PURE__ */ new Set([
+  "alt",
+  "align",
+  "checked",
+  "class",
+  "colspan",
+  "disabled",
+  "height",
+  "href",
+  "rel",
+  "rowspan",
+  "src",
+  "start",
+  "target",
+  "title",
+  "type",
+  "width"
+]);
+var HTML_TAG_REGEX = /<(\/?)([a-zA-Z][a-zA-Z0-9-]*)((?:\s+[^\s"'>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s"'=<>`]+))?)*)\s*\/?>/g;
+var HTML_ATTR_REGEX = /([^\s"'>\/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+function sanitizeTag(tagText, isClosing, rawTagName, rawAttrs) {
+  const tagName = rawTagName.toLowerCase();
+  if (!ALLOWED_HTML_TAGS.has(tagName)) return escapeHtml(tagText);
+  if (isClosing) return `</${tagName}>`;
+  if (tagName === "input" && !/\stype\s*=\s*["']?checkbox["']?[\s>/]/i.test(tagText)) {
+    return escapeHtml(tagText);
+  }
+  let attrs = "";
+  let attrMatch;
+  HTML_ATTR_REGEX.lastIndex = 0;
+  while ((attrMatch = HTML_ATTR_REGEX.exec(rawAttrs)) !== null) {
+    const name = attrMatch[1].toLowerCase();
+    if (!ALLOWED_HTML_ATTRS.has(name) && !/^data-[a-z0-9_.-]+$/.test(name)) {
+      continue;
+    }
+    const rawValue = attrMatch[2] ?? attrMatch[3] ?? attrMatch[4];
+    if (rawValue === void 0) {
+      attrs += ` ${name}`;
+      continue;
+    }
+    const value = md2.utils.unescapeAll(rawValue);
+    if ((name === "href" || name === "src") && // Browsers ignore control characters and whitespace inside schemes.
+    !md2.validateLink(value.replace(/[\u0000-\u0020\u007f]/g, ""))) {
+      continue;
+    }
+    attrs += ` ${name}="${escapeHtml(value)}"`;
+  }
+  return `<${tagName}${attrs}>`;
+}
+function sanitizeEmbeddedHtml(html) {
+  let result = "";
+  let lastIndex = 0;
+  let match;
+  HTML_TAG_REGEX.lastIndex = 0;
+  while ((match = HTML_TAG_REGEX.exec(html)) !== null) {
+    result += html.slice(lastIndex, match.index).replace(/</g, "&lt;");
+    result += sanitizeTag(match[0], match[1], match[2], match[3]);
+    lastIndex = match.index + match[0].length;
+  }
+  return result + html.slice(lastIndex).replace(/</g, "&lt;");
+}
+var defaultHtmlInline = md2.renderer.rules.html_inline;
+var defaultHtmlBlock = md2.renderer.rules.html_block;
+md2.renderer.rules.html_inline = (tokens, idx, options, env, self) => env?.allowUnsafeHtml ? defaultHtmlInline(tokens, idx, options, env, self) : sanitizeEmbeddedHtml(tokens[idx].content);
+md2.renderer.rules.html_block = (tokens, idx, options, env, self) => env?.allowUnsafeHtml ? defaultHtmlBlock(tokens, idx, options, env, self) : sanitizeEmbeddedHtml(tokens[idx].content);
 function preprocessMarkdownFileLinks(content) {
   if (!content) return "";
   return content.replace(
@@ -2485,8 +2651,8 @@ function preprocessMarkdownFileLinks(content) {
     (_match, rawLabel, href) => {
       const trimmed = rawLabel.trim();
       const codeMatch = trimmed.match(/^`([^`]+)`$/);
-      const labelContent = codeMatch ? `<code>${codeMatch[1]}</code>` : trimmed;
-      return `<a href="${href}" data-file-link="true" title="Click to copy file path">${labelContent}</a>`;
+      const labelContent = codeMatch ? `<code>${escapeHtml(codeMatch[1])}</code>` : escapeHtml(trimmed);
+      return `<a href="${escapeHtml(href)}" data-file-link="true" title="Click to copy file path">${labelContent}</a>`;
     }
   );
 }
@@ -2502,7 +2668,7 @@ function markdownToTipTapHtml(markdown, options) {
     };
     content = preprocessMarkdownMentions(content, mentionOpts);
   }
-  return md2.render(content);
+  return md2.render(content, { allowUnsafeHtml: options?.allowUnsafeHtml });
 }
 function getEditorMarkdown(editor) {
   if (!editor) return "";
@@ -2514,7 +2680,25 @@ function getEditorMarkdown(editor) {
 
 // src/controller.ts
 import { Editor } from "@tiptap/core";
-import { Slice, Fragment as Fragment2, Node as ProsemirrorNode } from "@tiptap/pm/model";
+import {
+  Slice,
+  Fragment as Fragment2,
+  Node as ProsemirrorNode
+} from "@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(ProsemirrorNode.fromJSON(schema, nodeJson));
+    } catch {
+    }
+  });
+  return Slice.maxOpen(Fragment2.fromArray(nodes));
+}
 var EditorController = class {
   editor;
   plainTextMode;
@@ -2570,20 +2754,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 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 = ProsemirrorNode.fromJSON(schema, nodeJson);
-              nodes.push(node);
-            } catch {
-            }
-          });
-          return Slice.maxOpen(Fragment2.fromArray(nodes));
+          return plainTextToSlice(text, schema);
         }
       }
     });
@@ -2626,14 +2797,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();