@synerise/ds-rich-text 0.1.0

package/dist/RichText.types.js

@@ -0,0 +1,44 @@
+const ALL_TOOLBAR_FEATURES = ["bold", "italic", "underline", "strikethrough", "heading", "bulletList", "orderedList", "link", "textAlign", "codeSnippet", "table", "image"];
+const DEFAULT_HEADING_LEVELS = [1, 2, 3];
+const DEFAULT_TEXTS = {
+  paragraph: "Paragraph",
+  bold: "Bold",
+  italic: "Italic",
+  underline: "Underline",
+  strikethrough: "Strikethrough",
+  heading: "Heading",
+  bulletList: "Bullet list",
+  orderedList: "Ordered list",
+  link: "Link",
+  align: "Align",
+  alignLeft: "Align left",
+  alignCenter: "Align center",
+  alignRight: "Align right",
+  codeBlock: "Code block",
+  codeSnippet: "Code snippet",
+  copySnippet: "Copy",
+  copiedSnippet: "Copied",
+  editWithAI: "Edit with AI",
+  more: "More",
+  table: "Table",
+  insertTable: "Insert table",
+  addRowBefore: "Add row above",
+  addRowAfter: "Add row below",
+  addColumnBefore: "Add column left",
+  addColumnAfter: "Add column right",
+  deleteRow: "Delete row",
+  deleteColumn: "Delete column",
+  deleteTable: "Delete table",
+  linkPlaceholder: "Enter URL...",
+  linkConfirm: "Apply",
+  linkRemove: "Remove link",
+  image: "Image",
+  imagePlaceholder: "Enter image URL...",
+  imageConfirm: "Insert",
+  imageUpload: "Upload file"
+};
+export {
+  ALL_TOOLBAR_FEATURES,
+  DEFAULT_HEADING_LEVELS,
+  DEFAULT_TEXTS
+};

package/dist/blockModel/blockModel.types.d.ts

@@ -0,0 +1,130 @@
+export type TextAlign = 'left' | 'center' | 'right';
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type BoldMark = {
+    type: 'bold';
+};
+export type ItalicMark = {
+    type: 'italic';
+};
+export type UnderlineMark = {
+    type: 'underline';
+};
+export type StrikeMark = {
+    type: 'strike';
+};
+export type CodeMark = {
+    type: 'code';
+};
+export type LinkMark = {
+    type: 'link';
+    href: string;
+    target?: string;
+    rel?: string;
+};
+export type Mark = BoldMark | ItalicMark | UnderlineMark | StrikeMark | CodeMark | LinkMark;
+export type TextNode = {
+    type: 'text';
+    text: string;
+    marks?: Mark[];
+};
+export type HardBreakNode = {
+    type: 'hardBreak';
+};
+export type InlineNode = TextNode | HardBreakNode;
+export type ParagraphBlock = {
+    type: 'paragraph';
+    attrs?: {
+        textAlign?: TextAlign;
+    };
+    children: InlineNode[];
+};
+export type HeadingBlock = {
+    type: 'heading';
+    attrs: {
+        level: HeadingLevel;
+        textAlign?: TextAlign;
+    };
+    children: InlineNode[];
+};
+export type CodeBlockBlock = {
+    type: 'codeBlock';
+    attrs?: {
+        language?: string;
+    };
+    children: InlineNode[];
+};
+export type CodeSnippetBlock = {
+    type: 'codeSnippet';
+    children: InlineNode[];
+};
+export type ImageBlock = {
+    type: 'image';
+    attrs: {
+        src: string;
+        alt?: string;
+        title?: string;
+    };
+};
+export type ListItemBlock = {
+    type: 'listItem';
+    children: Block[];
+};
+export type BulletListBlock = {
+    type: 'bulletList';
+    children: ListItemBlock[];
+};
+export type OrderedListBlock = {
+    type: 'orderedList';
+    attrs?: {
+        start?: number;
+    };
+    children: ListItemBlock[];
+};
+export type BlockquoteBlock = {
+    type: 'blockquote';
+    children: Block[];
+};
+export type HorizontalRuleBlock = {
+    type: 'horizontalRule';
+};
+export type TableCellBlock = {
+    type: 'tableCell';
+    attrs?: {
+        colspan?: number;
+        rowspan?: number;
+    };
+    children: Block[];
+};
+export type TableHeaderBlock = {
+    type: 'tableHeader';
+    attrs?: {
+        colspan?: number;
+        rowspan?: number;
+    };
+    children: Block[];
+};
+export type TableRowBlock = {
+    type: 'tableRow';
+    children: (TableCellBlock | TableHeaderBlock)[];
+};
+export type TableBlock = {
+    type: 'table';
+    children: TableRowBlock[];
+};
+export type Block = ParagraphBlock | HeadingBlock | CodeBlockBlock | CodeSnippetBlock | ImageBlock | BulletListBlock | OrderedListBlock | BlockquoteBlock | HorizontalRuleBlock | TableBlock;
+export type RichTextDocument = {
+    type: 'doc';
+    version: 1;
+    children: Block[];
+};
+export type PMNode = {
+    type: string;
+    attrs?: Record<string, unknown>;
+    content?: PMNode[];
+    marks?: PMMark[];
+    text?: string;
+};
+export type PMMark = {
+    type: string;
+    attrs?: Record<string, unknown>;
+};

package/dist/blockModel/blockModel.types.js

@@ -0,0 +1 @@
+

package/dist/blockModel/index.d.ts

@@ -0,0 +1,2 @@
+export type { TextAlign, HeadingLevel, BoldMark, ItalicMark, UnderlineMark, StrikeMark, CodeMark, LinkMark, Mark, TextNode, HardBreakNode, InlineNode, ParagraphBlock, HeadingBlock, CodeBlockBlock, ImageBlock, ListItemBlock, BulletListBlock, OrderedListBlock, BlockquoteBlock, HorizontalRuleBlock, TableCellBlock, TableHeaderBlock, TableRowBlock, TableBlock, Block, RichTextDocument, PMNode, PMMark, } from './blockModel.types';
+export { tiptapJsonToDocument, documentToTiptapJson, documentToHtml, documentToMarkdown, markdownToDocument, htmlToDocument, } from './serializers';

package/dist/blockModel/index.js

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

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

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

package/dist/blockModel/serializers/documentToHtml.js

@@ -0,0 +1,101 @@
+import { sanitizeUrl } from "../../utils/sanitizeUrl.js";
+const escapeHtml = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+const serializeMark = (mark, inner) => {
+  switch (mark.type) {
+    case "bold":
+      return `<strong>${inner}</strong>`;
+    case "italic":
+      return `<em>${inner}</em>`;
+    case "underline":
+      return `<u>${inner}</u>`;
+    case "strike":
+      return `<s>${inner}</s>`;
+    case "code":
+      return `<code>${inner}</code>`;
+    case "link": {
+      const attrs = [`href="${escapeHtml(sanitizeUrl(mark.href))}"`];
+      if (mark.target) {
+        attrs.push(`target="${escapeHtml(mark.target)}"`);
+      }
+      if (mark.rel) {
+        attrs.push(`rel="${escapeHtml(mark.rel)}"`);
+      }
+      return `<a ${attrs.join(" ")}>${inner}</a>`;
+    }
+  }
+};
+const serializeInline = (node) => {
+  if (node.type === "hardBreak") {
+    return "<br>";
+  }
+  let html = escapeHtml(node.text);
+  if (node.marks) {
+    for (const mark of node.marks) {
+      html = serializeMark(mark, html);
+    }
+  }
+  return html;
+};
+const alignAttr = (textAlign) => textAlign ? ` style="text-align: ${textAlign}"` : "";
+const serializeBlock = (block) => {
+  switch (block.type) {
+    case "paragraph": {
+      const inner = block.children.map(serializeInline).join("");
+      return `<p${alignAttr(block.attrs?.textAlign)}>${inner}</p>`;
+    }
+    case "heading": {
+      const tag = `h${block.attrs.level}`;
+      const inner = block.children.map(serializeInline).join("");
+      return `<${tag}${alignAttr(block.attrs.textAlign)}>${inner}</${tag}>`;
+    }
+    case "codeBlock": {
+      const inner = block.children.map(serializeInline).join("");
+      return `<pre><code>${inner}</code></pre>`;
+    }
+    case "codeSnippet": {
+      const inner = block.children.map(serializeInline).join("");
+      return `<pre data-type="code-snippet"><code>${inner}</code></pre>`;
+    }
+    case "image": {
+      const attrs = [`src="${escapeHtml(block.attrs.src)}"`];
+      if (block.attrs.alt) {
+        attrs.push(`alt="${escapeHtml(block.attrs.alt)}"`);
+      }
+      if (block.attrs.title) {
+        attrs.push(`title="${escapeHtml(block.attrs.title)}"`);
+      }
+      return `<img ${attrs.join(" ")}>`;
+    }
+    case "bulletList":
+      return `<ul>${block.children.map((li) => `<li>${li.children.map(serializeBlock).join("")}</li>`).join("")}</ul>`;
+    case "orderedList": {
+      const startAttr = block.attrs?.start && block.attrs.start !== 1 ? ` start="${block.attrs.start}"` : "";
+      return `<ol${startAttr}>${block.children.map((li) => `<li>${li.children.map(serializeBlock).join("")}</li>`).join("")}</ol>`;
+    }
+    case "blockquote":
+      return `<blockquote>${block.children.map(serializeBlock).join("")}</blockquote>`;
+    case "horizontalRule":
+      return "<hr>";
+    case "table":
+      return `<table><tbody>${block.children.map(serializeRow).join("")}</tbody></table>`;
+  }
+};
+const spanAttrs = (cell) => {
+  const attrs = [];
+  if (cell.attrs?.colspan && cell.attrs.colspan !== 1) {
+    attrs.push(`colspan="${cell.attrs.colspan}"`);
+  }
+  if (cell.attrs?.rowspan && cell.attrs.rowspan !== 1) {
+    attrs.push(`rowspan="${cell.attrs.rowspan}"`);
+  }
+  return attrs.length ? ` ${attrs.join(" ")}` : "";
+};
+const serializeCell = (cell) => {
+  const tag = cell.type === "tableHeader" ? "th" : "td";
+  return `<${tag}${spanAttrs(cell)}>${cell.children.map(serializeBlock).join("")}</${tag}>`;
+};
+const serializeRow = (row) => `<tr>${row.children.map(serializeCell).join("")}</tr>`;
+const documentToHtml = (doc) => doc.children.map(serializeBlock).join("");
+export {
+  documentToHtml
+};

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

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

package/dist/blockModel/serializers/documentToMarkdown.js

@@ -0,0 +1,84 @@
+const serializeMark = (mark, inner) => {
+  switch (mark.type) {
+    case "bold":
+      return `**${inner}**`;
+    case "italic":
+      return `*${inner}*`;
+    case "underline":
+      return `<u>${inner}</u>`;
+    case "strike":
+      return `~~${inner}~~`;
+    case "code":
+      return `\`${inner}\``;
+    case "link":
+      return `[${inner}](${mark.href})`;
+  }
+};
+const serializeInline = (node) => {
+  if (node.type === "hardBreak") {
+    return "  \n";
+  }
+  let text = node.text;
+  if (node.marks) {
+    for (const mark of node.marks) {
+      text = serializeMark(mark, text);
+    }
+  }
+  return text;
+};
+const serializeInlines = (children) => children.map(serializeInline).join("");
+const indentLines = (text, indent) => text.split("\n").map((line) => line ? indent + line : line).join("\n");
+const serializeListItem = (item, marker, indent) => {
+  const [first, ...rest] = item.children;
+  const firstText = first ? serializeBlock(first) : "";
+  const continuation = indent + " ".repeat(marker.length);
+  let line = `${indent}${marker}${firstText}`;
+  for (const child of rest) {
+    line += `
+${indentLines(serializeBlock(child), continuation)}`;
+  }
+  return line;
+};
+const serializeBlock = (block, indent = "") => {
+  switch (block.type) {
+    case "paragraph":
+      return serializeInlines(block.children);
+    case "heading":
+      return `${"#".repeat(block.attrs.level)} ${serializeInlines(block.children)}`;
+    case "codeBlock":
+      return `\`\`\`
+${serializeInlines(block.children)}
+\`\`\``;
+    case "codeSnippet":
+      return `\`${serializeInlines(block.children)}\``;
+    case "image":
+      return `![${block.attrs.alt ?? ""}](${block.attrs.src})`;
+    case "bulletList":
+      return block.children.map((li) => serializeListItem(li, "- ", indent)).join("\n");
+    case "orderedList": {
+      const start = block.attrs?.start ?? 1;
+      return block.children.map((li, i) => serializeListItem(li, `${start + i}. `, indent)).join("\n");
+    }
+    case "blockquote":
+      return block.children.map((child) => indentLines(serializeBlock(child), "> ")).join("\n>\n");
+    case "horizontalRule":
+      return "---";
+    case "table": {
+      const rows = block.children;
+      if (rows.length === 0) {
+        return "";
+      }
+      const renderRow = (cells) => `| ${cells.map(cellToMarkdown).join(" | ")} |`;
+      const colCount = rows[0].children.length;
+      const header = renderRow(rows[0].children);
+      const separator = `| ${Array(colCount).fill("---").join(" | ")} |`;
+      const body = rows.slice(1).map((row) => renderRow(row.children));
+      return [header, separator, ...body].join("\n");
+    }
+  }
+};
+const cellToMarkdown = (cell) => cell.children.map((child) => serializeBlock(child)).join(" ").replace(/\n+/g, " ").replace(/\|/g, "\\|").trim();
+const documentToMarkdown = (doc) => doc.children.map((block) => serializeBlock(block)).join("\n\n");
+export {
+  documentToMarkdown
+};

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

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

package/dist/blockModel/serializers/documentToTiptap.js

@@ -0,0 +1,133 @@
+const convertMark = (mark) => {
+  if (mark.type === "link") {
+    return {
+      type: "link",
+      attrs: {
+        href: mark.href,
+        ...mark.target && {
+          target: mark.target
+        },
+        ...mark.rel && {
+          rel: mark.rel
+        }
+      }
+    };
+  }
+  return {
+    type: mark.type
+  };
+};
+const convertInlineNode = (node) => {
+  if (node.type === "hardBreak") {
+    return {
+      type: "hardBreak"
+    };
+  }
+  return {
+    type: "text",
+    text: node.text,
+    ...node.marks?.length && {
+      marks: node.marks.map(convertMark)
+    }
+  };
+};
+const convertBlock = (block) => {
+  switch (block.type) {
+    case "paragraph":
+      return {
+        type: "paragraph",
+        ...block.attrs?.textAlign && {
+          attrs: {
+            textAlign: block.attrs.textAlign
+          }
+        },
+        content: block.children.map(convertInlineNode)
+      };
+    case "heading":
+      return {
+        type: "heading",
+        attrs: {
+          level: block.attrs.level,
+          ...block.attrs.textAlign && {
+            textAlign: block.attrs.textAlign
+          }
+        },
+        content: block.children.map(convertInlineNode)
+      };
+    case "codeBlock":
+      return {
+        type: "codeBlock",
+        ...block.attrs?.language && {
+          attrs: {
+            language: block.attrs.language
+          }
+        },
+        content: block.children.map(convertInlineNode)
+      };
+    case "codeSnippet":
+      return {
+        type: "codeSnippet",
+        content: block.children.map(convertInlineNode)
+      };
+    case "image":
+      return {
+        type: "image",
+        attrs: {
+          ...block.attrs
+        }
+      };
+    case "bulletList":
+      return {
+        type: "bulletList",
+        content: block.children.map((li) => ({
+          type: "listItem",
+          content: li.children.map(convertBlock)
+        }))
+      };
+    case "orderedList":
+      return {
+        type: "orderedList",
+        ...block.attrs?.start && {
+          attrs: {
+            start: block.attrs.start
+          }
+        },
+        content: block.children.map((li) => ({
+          type: "listItem",
+          content: li.children.map(convertBlock)
+        }))
+      };
+    case "blockquote":
+      return {
+        type: "blockquote",
+        content: block.children.map(convertBlock)
+      };
+    case "horizontalRule":
+      return {
+        type: "horizontalRule"
+      };
+    case "table":
+      return {
+        type: "table",
+        content: block.children.map((row) => ({
+          type: "tableRow",
+          content: row.children.map((cell) => ({
+            type: cell.type,
+            ...cell.attrs && {
+              attrs: {
+                ...cell.attrs
+              }
+            },
+            content: cell.children.map(convertBlock)
+          }))
+        }))
+      };
+  }
+};
+const documentToTiptapJson = (doc) => ({
+  type: "doc",
+  content: doc.children.map(convertBlock)
+});
+export {
+  documentToTiptapJson
+};

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

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