@synerise/ds-rich-text 0.1.0

package/dist/blockModel/serializers/htmlToDocument.js

@@ -0,0 +1,242 @@
+import { sanitizeUrl } from "../../utils/sanitizeUrl.js";
+const HEADING_TAGS = /* @__PURE__ */ new Set(["H1", "H2", "H3", "H4", "H5", "H6"]);
+const INLINE_MARK_TAGS = {
+  STRONG: "bold",
+  B: "bold",
+  EM: "italic",
+  I: "italic",
+  U: "underline",
+  S: "strike",
+  DEL: "strike",
+  CODE: "code"
+};
+const getTextAlign = (el) => {
+  const align = el.style.textAlign;
+  if (align === "left" || align === "center" || align === "right") {
+    return align;
+  }
+  return void 0;
+};
+const parseInlineNodes = (node, inheritedMarks = []) => {
+  const result = [];
+  for (const child of Array.from(node.childNodes)) {
+    if (child.nodeType === 3) {
+      const text = child.textContent || "";
+      if (text) {
+        result.push({
+          type: "text",
+          text,
+          ...inheritedMarks.length && {
+            marks: [...inheritedMarks]
+          }
+        });
+      }
+      continue;
+    }
+    if (child.nodeType !== 1) {
+      continue;
+    }
+    const el = child;
+    const tag = el.tagName;
+    if (tag === "BR") {
+      result.push({
+        type: "hardBreak"
+      });
+      continue;
+    }
+    if (tag === "A") {
+      const linkMark = {
+        type: "link",
+        // Reject javascript:/data:/… so parsed HTML can't smuggle a script href.
+        href: sanitizeUrl(el.getAttribute("href") || ""),
+        ...el.getAttribute("target") && {
+          target: el.getAttribute("target")
+        },
+        ...el.getAttribute("rel") && {
+          rel: el.getAttribute("rel")
+        }
+      };
+      result.push(...parseInlineNodes(el, [...inheritedMarks, linkMark]));
+      continue;
+    }
+    const markType = INLINE_MARK_TAGS[tag];
+    if (markType) {
+      const mark = {
+        type: markType
+      };
+      result.push(...parseInlineNodes(el, [...inheritedMarks, mark]));
+      continue;
+    }
+    result.push(...parseInlineNodes(el, inheritedMarks));
+  }
+  return result;
+};
+const parseBlock = (el) => {
+  const tag = el.tagName;
+  if (tag === "P") {
+    const textAlign = getTextAlign(el);
+    return {
+      type: "paragraph",
+      ...textAlign && {
+        attrs: {
+          textAlign
+        }
+      },
+      children: parseInlineNodes(el)
+    };
+  }
+  if (HEADING_TAGS.has(tag)) {
+    const level = parseInt(tag[1], 10);
+    const textAlign = getTextAlign(el);
+    return {
+      type: "heading",
+      attrs: {
+        level,
+        ...textAlign && {
+          textAlign
+        }
+      },
+      children: parseInlineNodes(el)
+    };
+  }
+  if (tag === "UL") {
+    return {
+      type: "bulletList",
+      children: Array.from(el.children).filter((li) => li.tagName === "LI").map((li) => ({
+        type: "listItem",
+        children: parseListItemChildren(li)
+      }))
+    };
+  }
+  if (tag === "OL") {
+    const start = el.getAttribute("start");
+    return {
+      type: "orderedList",
+      ...start && parseInt(start, 10) !== 1 && {
+        attrs: {
+          start: parseInt(start, 10)
+        }
+      },
+      children: Array.from(el.children).filter((li) => li.tagName === "LI").map((li) => ({
+        type: "listItem",
+        children: parseListItemChildren(li)
+      }))
+    };
+  }
+  if (tag === "PRE") {
+    const code = el.querySelector("code");
+    const text = (code || el).textContent || "";
+    const isSnippet = el.getAttribute("data-type") === "code-snippet";
+    return {
+      type: isSnippet ? "codeSnippet" : "codeBlock",
+      children: text ? [{
+        type: "text",
+        text
+      }] : []
+    };
+  }
+  if (tag === "IMG") {
+    const src = el.getAttribute("src");
+    if (!src) {
+      return null;
+    }
+    return {
+      type: "image",
+      attrs: {
+        src,
+        ...el.getAttribute("alt") && {
+          alt: el.getAttribute("alt")
+        },
+        ...el.getAttribute("title") && {
+          title: el.getAttribute("title")
+        }
+      }
+    };
+  }
+  if (tag === "BLOCKQUOTE") {
+    return {
+      type: "blockquote",
+      children: parseChildren(el)
+    };
+  }
+  if (tag === "HR") {
+    return {
+      type: "horizontalRule"
+    };
+  }
+  if (tag === "TABLE") {
+    const rows = Array.from(el.querySelectorAll("tr")).map((tr) => ({
+      type: "tableRow",
+      children: Array.from(tr.children).filter((c) => c.tagName === "TD" || c.tagName === "TH").map((c) => parseCell(c))
+    }));
+    return {
+      type: "table",
+      children: rows
+    };
+  }
+  return null;
+};
+const parseSpan = (el) => {
+  const attrs = {};
+  const colspan = parseInt(el.getAttribute("colspan") || "", 10);
+  const rowspan = parseInt(el.getAttribute("rowspan") || "", 10);
+  if (colspan > 1) {
+    attrs.colspan = colspan;
+  }
+  if (rowspan > 1) {
+    attrs.rowspan = rowspan;
+  }
+  return Object.keys(attrs).length ? attrs : void 0;
+};
+const parseCell = (el) => {
+  const type = el.tagName === "TH" ? "tableHeader" : "tableCell";
+  const span = parseSpan(el);
+  const hasBlockChildren = Array.from(el.children).some((c) => ["P", "UL", "OL", "PRE", "BLOCKQUOTE", "H1", "H2", "H3", "H4", "H5", "H6"].includes(c.tagName));
+  const children = hasBlockChildren ? parseChildren(el) : [{
+    type: "paragraph",
+    children: parseInlineNodes(el)
+  }];
+  return {
+    type,
+    ...span && {
+      attrs: span
+    },
+    children
+  };
+};
+const parseListItemChildren = (li) => {
+  const blocks = [];
+  const hasBlockChildren = Array.from(li.children).some((c) => c.tagName === "P" || c.tagName === "UL" || c.tagName === "OL");
+  if (hasBlockChildren) {
+    return parseChildren(li);
+  }
+  const inlines = parseInlineNodes(li);
+  if (inlines.length) {
+    blocks.push({
+      type: "paragraph",
+      children: inlines
+    });
+  }
+  return blocks;
+};
+const parseChildren = (parent) => Array.from(parent.children).map((el) => parseBlock(el)).filter(Boolean);
+const htmlToDocument = (html) => {
+  const parser = new DOMParser();
+  const dom = parser.parseFromString(`<body>${html}</body>`, "text/html");
+  const body = dom.body;
+  const children = parseChildren(body);
+  return {
+    type: "doc",
+    version: 1,
+    // A doc must have at least one block (schema `block+`). Empty input must still yield an
+    // empty paragraph so the editor has a textblock node for the placeholder decoration to
+    // attach to — otherwise the placeholder is missing on an untouched empty editor.
+    children: children.length ? children : [{
+      type: "paragraph",
+      children: []
+    }]
+  };
+};
+export {
+  htmlToDocument
+};

package/dist/blockModel/serializers/index.d.ts

@@ -0,0 +1,6 @@
+export { tiptapJsonToDocument } from './tiptapToDocument';
+export { documentToTiptapJson } from './documentToTiptap';
+export { documentToHtml } from './documentToHtml';
+export { documentToMarkdown } from './documentToMarkdown';
+export { markdownToDocument } from './markdownToDocument';
+export { htmlToDocument } from './htmlToDocument';

package/dist/blockModel/serializers/index.js

@@ -0,0 +1,14 @@
+import { tiptapJsonToDocument } from "./tiptapToDocument.js";
+import { documentToTiptapJson } from "./documentToTiptap.js";
+import { documentToHtml } from "./documentToHtml.js";
+import { documentToMarkdown } from "./documentToMarkdown.js";
+import { markdownToDocument } from "./markdownToDocument.js";
+import { htmlToDocument } from "./htmlToDocument.js";
+export {
+  documentToHtml,
+  documentToMarkdown,
+  documentToTiptapJson,
+  htmlToDocument,
+  markdownToDocument,
+  tiptapJsonToDocument
+};

package/dist/blockModel/serializers/markdownToDocument.d.ts

@@ -0,0 +1,10 @@
+import { RichTextDocument } from '../blockModel.types';
+/**
+ * Parse a Markdown string into a `RichTextDocument` by rendering it to HTML with
+ * markdown-it and reusing the existing `htmlToDocument` parser.
+ *
+ * Note: Markdown has no single-line code-snippet concept, so a `codeSnippet` block
+ * serialized to `` `code` `` parses back as an inline-code paragraph, and a fenced block
+ * parses back as a multi-line `codeBlock`.
+ */
+export declare const markdownToDocument: (md: string) => RichTextDocument;

package/dist/blockModel/serializers/markdownToDocument.js

@@ -0,0 +1,11 @@
+import MarkdownIt from "markdown-it";
+import { htmlToDocument } from "./htmlToDocument.js";
+const markdown = new MarkdownIt({
+  html: true,
+  linkify: true,
+  breaks: false
+});
+const markdownToDocument = (md) => htmlToDocument(markdown.render(md ?? ""));
+export {
+  markdownToDocument
+};

package/dist/blockModel/serializers/tiptapToDocument.d.ts

@@ -0,0 +1,2 @@
+import { PMNode, RichTextDocument } from '../blockModel.types';
+export declare const tiptapJsonToDocument: (json: PMNode) => RichTextDocument;

package/dist/blockModel/serializers/tiptapToDocument.js

@@ -0,0 +1,189 @@
+const SIMPLE_MARK_TYPES = /* @__PURE__ */ new Set(["bold", "italic", "underline", "strike", "code"]);
+const convertMark = (pm) => {
+  if (SIMPLE_MARK_TYPES.has(pm.type)) {
+    return {
+      type: pm.type
+    };
+  }
+  if (pm.type === "link") {
+    const link = {
+      type: "link",
+      href: pm.attrs?.href
+    };
+    if (pm.attrs?.target) {
+      link.target = pm.attrs.target;
+    }
+    if (pm.attrs?.rel) {
+      link.rel = pm.attrs.rel;
+    }
+    return link;
+  }
+  return null;
+};
+const convertInlineNode = (pm) => {
+  if (pm.type === "text" && pm.text) {
+    const marks = pm.marks?.map(convertMark).filter(Boolean);
+    const node = {
+      type: "text",
+      text: pm.text
+    };
+    if (marks && marks.length > 0) {
+      node.marks = marks;
+    }
+    return node;
+  }
+  if (pm.type === "hardBreak") {
+    return {
+      type: "hardBreak"
+    };
+  }
+  return null;
+};
+const convertBlock = (pm) => {
+  switch (pm.type) {
+    case "paragraph": {
+      const children = (pm.content || []).map(convertInlineNode).filter(Boolean);
+      const textAlign = pm.attrs?.textAlign;
+      if (textAlign) {
+        return {
+          type: "paragraph",
+          attrs: {
+            textAlign
+          },
+          children
+        };
+      }
+      return {
+        type: "paragraph",
+        children
+      };
+    }
+    case "heading": {
+      const children = (pm.content || []).map(convertInlineNode).filter(Boolean);
+      const level = pm.attrs?.level || 1;
+      const textAlign = pm.attrs?.textAlign;
+      if (textAlign) {
+        return {
+          type: "heading",
+          attrs: {
+            level,
+            textAlign
+          },
+          children
+        };
+      }
+      return {
+        type: "heading",
+        attrs: {
+          level
+        },
+        children
+      };
+    }
+    case "codeBlock": {
+      const children = (pm.content || []).map(convertInlineNode).filter(Boolean);
+      const language = pm.attrs?.language;
+      if (language) {
+        return {
+          type: "codeBlock",
+          attrs: {
+            language
+          },
+          children
+        };
+      }
+      return {
+        type: "codeBlock",
+        children
+      };
+    }
+    case "codeSnippet": {
+      const children = (pm.content || []).map(convertInlineNode).filter(Boolean);
+      return {
+        type: "codeSnippet",
+        children
+      };
+    }
+    case "image": {
+      const attrs = {
+        src: pm.attrs?.src
+      };
+      if (pm.attrs?.alt) {
+        attrs.alt = pm.attrs.alt;
+      }
+      if (pm.attrs?.title) {
+        attrs.title = pm.attrs.title;
+      }
+      return {
+        type: "image",
+        attrs
+      };
+    }
+    case "bulletList":
+      return {
+        type: "bulletList",
+        children: (pm.content || []).filter((n) => n.type === "listItem").map((li) => ({
+          type: "listItem",
+          children: (li.content || []).map(convertBlock).filter(Boolean)
+        }))
+      };
+    case "orderedList": {
+      const start = pm.attrs?.start;
+      const block = {
+        type: "orderedList",
+        children: (pm.content || []).filter((n) => n.type === "listItem").map((li) => ({
+          type: "listItem",
+          children: (li.content || []).map(convertBlock).filter(Boolean)
+        }))
+      };
+      if (start && start !== 1) {
+        block.attrs = {
+          start
+        };
+      }
+      return block;
+    }
+    case "blockquote":
+      return {
+        type: "blockquote",
+        children: (pm.content || []).map(convertBlock).filter(Boolean)
+      };
+    case "horizontalRule":
+      return {
+        type: "horizontalRule"
+      };
+    case "table":
+      return {
+        type: "table",
+        children: (pm.content || []).filter((row) => row.type === "tableRow").map((row) => ({
+          type: "tableRow",
+          children: (row.content || []).filter((cell) => cell.type === "tableCell" || cell.type === "tableHeader").map((cell) => {
+            const span = {};
+            if (typeof cell.attrs?.colspan === "number" && cell.attrs.colspan > 1) {
+              span.colspan = cell.attrs.colspan;
+            }
+            if (typeof cell.attrs?.rowspan === "number" && cell.attrs.rowspan > 1) {
+              span.rowspan = cell.attrs.rowspan;
+            }
+            return {
+              type: cell.type,
+              ...Object.keys(span).length && {
+                attrs: span
+              },
+              children: (cell.content || []).map(convertBlock).filter(Boolean)
+            };
+          })
+        }))
+      };
+    default:
+      return null;
+  }
+};
+const tiptapJsonToDocument = (json) => ({
+  type: "doc",
+  version: 1,
+  children: (json.content || []).map(convertBlock).filter(Boolean)
+});
+export {
+  tiptapJsonToDocument
+};

package/dist/components/ImagePopover.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { ImagePopoverProps } from '../RichText.types';
+export declare const ImagePopover: ({ editor, texts, onClose, onImageUpload, }: ImagePopoverProps) => React.JSX.Element;

package/dist/components/ImagePopover.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback } from "react";
+import Button from "@synerise/ds-button";
+import { Input } from "@synerise/ds-input";
+import { PopoverForm, PopoverActions } from "../RichText.styles.js";
+import "@tiptap/extension-image";
+import "@tiptap/extension-link";
+import "@tiptap/extension-placeholder";
+import "@tiptap/extension-table";
+import "@tiptap/extension-table-cell";
+import "@tiptap/extension-table-header";
+import "@tiptap/extension-table-row";
+import "@tiptap/extension-text-align";
+import "@tiptap/extension-underline";
+import "@tiptap/starter-kit";
+import "../extensions/CodeSnippet.js";
+import { normalizeUrl } from "../utils/normalizeUrl.js";
+const ImagePopover = ({
+  editor,
+  texts,
+  onClose,
+  onImageUpload
+}) => {
+  const fileInputRef = useRef(null);
+  const [url, setUrl] = useState("");
+  const [isUploading, setIsUploading] = useState(false);
+  const insertImage = useCallback((src) => {
+    editor.chain().focus().setImage({
+      src
+    }).run();
+    onClose();
+  }, [editor, onClose]);
+  const handleApply = useCallback(() => {
+    if (url) {
+      insertImage(normalizeUrl(url));
+    }
+  }, [url, insertImage]);
+  const handleFileChange = useCallback(async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) {
+      return;
+    }
+    if (onImageUpload) {
+      setIsUploading(true);
+      try {
+        const src = await onImageUpload(file);
+        insertImage(src);
+      } catch (error) {
+        console.error("RichText: image upload failed", error);
+      } finally {
+        setIsUploading(false);
+      }
+    } else {
+      const reader = new FileReader();
+      reader.onload = () => {
+        if (typeof reader.result === "string") {
+          insertImage(reader.result);
+        }
+      };
+      reader.onerror = () => {
+        console.error("RichText: failed to read image file", reader.error);
+      };
+      reader.readAsDataURL(file);
+    }
+  }, [onImageUpload, insertImage]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleApply();
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+    }
+  }, [handleApply, onClose]);
+  return /* @__PURE__ */ jsxs(PopoverForm, { onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsx(Input, { value: url, onChange: (e) => setUrl(e.target.value), placeholder: texts.imagePlaceholder, autoFocus: true, resetMargin: true }),
+    /* @__PURE__ */ jsxs(PopoverActions, { children: [
+      /* @__PURE__ */ jsx(Button, { type: "primary", size: "small", onClick: handleApply, disabled: !url, children: texts.imageConfirm }),
+      /* @__PURE__ */ jsx(Button, { type: "ghost", size: "small", onClick: () => fileInputRef.current?.click(), disabled: isUploading, children: texts.imageUpload })
+    ] }),
+    /* @__PURE__ */ jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileChange, style: {
+      display: "none"
+    } })
+  ] });
+};
+export {
+  ImagePopover
+};

package/dist/components/LinkPopover.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { LinkPopoverProps } from '../RichText.types';
+export declare const LinkPopover: ({ editor, texts, onClose }: LinkPopoverProps) => React.JSX.Element;

package/dist/components/LinkPopover.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import Button from "@synerise/ds-button";
+import { Input } from "@synerise/ds-input";
+import { PopoverForm, PopoverActions } from "../RichText.styles.js";
+import "@tiptap/extension-image";
+import "@tiptap/extension-link";
+import "@tiptap/extension-placeholder";
+import "@tiptap/extension-table";
+import "@tiptap/extension-table-cell";
+import "@tiptap/extension-table-header";
+import "@tiptap/extension-table-row";
+import "@tiptap/extension-text-align";
+import "@tiptap/extension-underline";
+import "@tiptap/starter-kit";
+import "../extensions/CodeSnippet.js";
+import { normalizeUrl } from "../utils/normalizeUrl.js";
+const LinkPopover = ({
+  editor,
+  texts,
+  onClose
+}) => {
+  const currentHref = editor.getAttributes("link").href || "";
+  const [url, setUrl] = useState(currentHref);
+  const handleApply = useCallback(() => {
+    if (url) {
+      editor.chain().focus().extendMarkRange("link").setLink({
+        href: normalizeUrl(url)
+      }).run();
+    }
+    onClose();
+  }, [editor, url, onClose]);
+  const handleRemove = useCallback(() => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    onClose();
+  }, [editor, onClose]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleApply();
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+    }
+  }, [handleApply, onClose]);
+  return /* @__PURE__ */ jsxs(PopoverForm, { onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsx(Input, { value: url, onChange: (e) => setUrl(e.target.value), placeholder: texts.linkPlaceholder, autoFocus: true, resetMargin: true }),
+    /* @__PURE__ */ jsxs(PopoverActions, { children: [
+      /* @__PURE__ */ jsx(Button, { type: "primary", size: "small", onClick: handleApply, children: texts.linkConfirm }),
+      currentHref && /* @__PURE__ */ jsx(Button, { type: "ghost", size: "small", onClick: handleRemove, children: texts.linkRemove })
+    ] })
+  ] });
+};
+export {
+  LinkPopover
+};

package/dist/components/Toolbar.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { ToolbarProps } from '../RichText.types';
+export declare const Toolbar: ({ editor, features, headingLevels, texts, disabled, onImageUpload, onEditWithAI, editWithAIOptions, }: ToolbarProps) => React.JSX.Element | null;