@vicacha-devs/astro-tiptap-blocks 0.0.0-stage → 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vicacha Devs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,168 @@
-# Temporary Holding Version
+# `@vicacha-devs/astro-tiptap-blocks`
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Render **Tiptap / ProseMirror** rich text content across **JSON**, **HTML**, and **Markdown** output modes using native, themeable **Astro** block components with zero `set:html` injection.
+
+> **Astro compatibility:** `^5.0.0 || ^6.0.0 || ^7.0.0`
+
+---
+
+## Features
+
+- **Zero `set:html` / `innerHTML` Rendering** — Every block and inline mark is parsed into a typed `TiptapDocNode` AST and rendered through native Astro components (`{text}`).
+- **Rich Tiptap & ProseMirror Extension Support**:
+  - **Typography & Inline Marks**: `bold`, `italic`, `underline`, `strike`, `code`, `subscript` (`<sub>`), `superscript` (`<sup>`), `highlight` (with custom color), `link` (with `tiptap://` / `internal://` link resolution), `textStyle` (`color`, `fontFamily`, `fontSize`, `lineHeight`), `abbr` (`<abbr title>`), `language` (`<span lang dir>`), inline `linker` chips, and inline `mathematics` formulas.
+  - **Headings & Lead Paragraphs**: `heading` (`h1`–`h6` with automatic slug `id` generation, optional `#` permalink anchors via `headingAnchors`, and SEO `tag` override) and `leadParagraph` (`data-lead="true"`).
+  - **Callouts & Accordions**: `informationPane` (`info`, `success`, `warning`, `danger`, `neutral`, `tip`), `conversationHistory` (author & timestamp), and collapsible `details` (`detailsSummary` + `detailsContent`).
+  - **Multi-Column Layouts**: `layoutContainer` and `layoutColumn` with configurable column ratios (`1:1`, `1:1:1`, `2:1`, `1:2`, `1:1:1:1`).
+  - **Lists & Checklists**: `bulletList`, `orderedList`, and `taskList` (`taskItem` with interactive-styled read-only checkboxes).
+  - **Code Blocks with Line Numbers & Copy Toolbar**: `codeBlock` with Shiki syntax highlighting, `showCodeLineNumbers` (`data-line-number`), and `copyableCodeBlocks` (`data-copy-code`).
+  - **Media, Responsive Images & Sandboxed Embeds**: `image` (with `mediaBaseUrl`, `srcset`, `sizes`, `loading`, `decoding`, `fetchpriority`, `caption`, `data-align`, `data-asset-id`, `data-document-id`), `video` (YouTube/Vimeo embeds & `<video controls>`), `audio` (`<audio controls>`), `attachment` (downloadable file card with formatted size & badge), and HTTPS-only sandboxed `iframe` (with optional `allowedIframeDomains` allowlist).
+  - **Mathematics, TOC & Page Breaks**: Display/inline `mathematics` (`role="math"` with Unicode formula preview), auto-populated `tableOfContents`, and `pageBreak`.
+  - **Advanced Tables**: `table`, `tableRow`, `tableHeader`, and `tableCell` supporting `colspan`, `rowspan`, `colwidth`, and sanitized `backgroundColor`.
+- **3-Format Input Normalization** — Seamlessly accepts ProseMirror JSON (`TiptapDocNode` or JSON string), Tiptap HTML strings, Tiptap Markdown strings (including lossless `<!-- tiptap-node:{...} -->` metadata comments), or `string[]` fallback arrays.
+- **Built-in SEO Metadata, Reading Time & Document Relation Extraction** — Includes `extractDocumentMetadata()`, `extractPlainTextFromTiptap()`, `calculateReadingTime()`, `extractHeadingsFromTiptap()`, and `extractRelationsFromTiptap()`.
+- **Granular Subpath Exports** — Import the Astro component from `@vicacha-devs/astro-tiptap-blocks`, built-in block components from `@vicacha-devs/astro-tiptap-blocks/components`, pure TypeScript utilities from `@vicacha-devs/astro-tiptap-blocks/lib`, or types from `@vicacha-devs/astro-tiptap-blocks/types`.
+
+---
+
+## Installation
+
+```bash
+pnpm add @vicacha-devs/astro-tiptap-blocks
+```
+
+### Tailwind CSS v4 (`@tailwindcss/vite`)
+
+```css
+/* src/styles/global.css */
+@import "tailwindcss";
+@source "../../node_modules/@vicacha-devs/astro-tiptap-blocks/src/**/*.{astro,ts}";
+```
+
+---
+
+## Quick Start
+
+```astro
+---
+import { TiptapBlocks, extractDocumentMetadata } from "@vicacha-devs/astro-tiptap-blocks";
+
+const articleContent = {
+  type: "doc",
+  content: [
+    { type: "tableOfContents" },
+    {
+      type: "leadParagraph",
+      content: [{ type: "text", text: "Executive summary of our new release." }],
+    },
+    {
+      type: "heading",
+      attrs: { level: 2, tag: "h2" },
+      content: [{ type: "text", text: "Key Highlights" }],
+    },
+    {
+      type: "informationPane",
+      attrs: { variant: "tip", title: "Pro Tip" },
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "Works with JSON, HTML, and Markdown!" }],
+        },
+      ],
+    },
+  ],
+};
+
+const { excerpt, readingTime, headings } = extractDocumentMetadata(articleContent);
+---
+
+<p class="text-sm text-slate-500">{readingTime.text}</p>
+
+<TiptapBlocks
+  data={articleContent}
+  mediaBaseUrl="https://cdn.example.com"
+  headingAnchors
+  showCodeLineNumbers
+  copyableCodeBlocks
+  allowedIframeDomains={["youtube.com", "player.vimeo.com", "openstreetmap.org"]}
+  resolveInternalLink={({ collectionName, documentId }) =>
+    `/blog/${collectionName.split(".").pop()}/${documentId}`
+  }
+/>
+```
+
+---
+
+## Programmatic Utilities (`@vicacha-devs/astro-tiptap-blocks/lib`)
+
+```ts
+import {
+  parseTiptapContent,
+  parseTiptapHtml,
+  parseTiptapMarkdown,
+  extractDocumentMetadata,
+  extractPlainTextFromTiptap,
+  calculateReadingTime,
+  extractHeadingsFromTiptap,
+  extractRelationsFromTiptap,
+  parseInternalLinkUri,
+  formatInternalLinkUri,
+  resolveInternalLinkHref,
+  resolveTiptapMediaUrl,
+  sanitizeTiptapUrl,
+  sanitizeTiptapIframeUrl,
+  sanitizeCssColor,
+  buildSafeInlineStyle,
+  buildThemeObject,
+  TiptapBlockThemeDefault,
+} from "@vicacha-devs/astro-tiptap-blocks/lib";
+```
+
+## Customizing Theme & Extending with Custom Components
+
+- **Theme & CSS (`theme.extend` / `theme.overwrite`)**: Customize Tailwind classes, replace slots with BEM/vanilla CSS, or style via `data-*` selectors. See **Guides / Customizing Theme & Styling** (`src/lib/theme/CustomizingTheme.docs.mdx`).
+- **Custom Block Components (`blocks` prop)**: Override any built-in block renderer (`TiptapBlockUserComponents`) or render custom Tiptap extensions (`TiptapCustomBlockNode` in JSON/Markdown or `data-tiptap-type="<nodeName>"` in HTML) by passing the custom node `type` key in `blocks`. See **Guides / Extending & Custom Components** (`src/components/blocks/TiptapBlockCustom/ExtendingCustomComponents.docs.mdx`):
+
+```astro
+---
+import { TiptapBlocks } from "@vicacha-devs/astro-tiptap-blocks";
+import BeforeAfterSlider from "./BeforeAfterSlider.astro";
+import CustomCallout from "./CustomCallout.astro";
+import CustomHeading from "./CustomHeading.astro";
+---
+
+<TiptapBlocks
+  data={articleContent}
+  blocks={{
+    heading: CustomHeading,
+    informationPane: CustomCallout,
+    beforeAfterSlider: BeforeAfterSlider,
+  }}
+/>
+```
+
+---
+
+## Interactive Documentation & Testing
+
+This repository includes a full TypeScript **Storybook for Astro** (`@storybook-astro/framework` + `@storybook/addon-docs` + `@storybook/addon-a11y` + themes, designs, RTL and tag badges) suite and **Vitest** unit/component tests for every `.astro` component and `src/lib/` module.
+
+```bash
+# Start Storybook dev server on http://localhost:6006
+pnpm storybook
+
+# Run Vitest unit & component tests with coverage
+pnpm test:coverage
+
+# Run every story as a browser test (first run: pnpm exec playwright install chromium)
+pnpm test:stories
+
+# Typecheck & build declaration files
+pnpm check && pnpm build
+```
+
+---
+
+## License
+
+MIT © Vicacha Devs

package/dist/lib/html-parser/html-custom-blocks.d.ts

@@ -0,0 +1,4 @@
+import type { TiptapBlockNode } from "../../types";
+import { type SimpleElement } from "./html-inline";
+export declare const findChildByTag: (el: SimpleElement, tag: string) => SimpleElement | undefined;
+export declare const convertCustomHtmlElement: (el: SimpleElement, convertTree: (nodes: Array<SimpleElement | string>) => TiptapBlockNode[]) => TiptapBlockNode[] | null;

package/dist/lib/html-parser/html-custom-blocks.js

@@ -0,0 +1,162 @@
+import { sanitizeTiptapIframeUrl, sanitizeTiptapUrl } from "../sanitize";
+import { collectInlineNodes, extractRawText } from "./html-inline";
+export const findChildByTag = (el, tag) => el.children.find((c) => typeof c !== "string" && c.tag === tag);
+export const convertCustomHtmlElement = (el, convertTree) => {
+    const dataType = el.attrs["data-type"] || "";
+    if (dataType === "page-break" || (el.tag === "hr" && el.attrs["data-page-break"])) {
+        return [{ type: "pageBreak" }];
+    }
+    if (dataType === "table-of-contents") {
+        return [{ type: "tableOfContents", attrs: { title: el.attrs["data-title"] || null } }];
+    }
+    if (dataType === "mathematics") {
+        const latex = el.attrs["data-latex"] || extractRawText(el.children);
+        return [{ type: "mathematics", attrs: { latex, displayMode: "block" } }];
+    }
+    if (dataType === "information-pane") {
+        const variant = (el.attrs["data-variant"] || "info");
+        const titleEl = el.children.find((c) => typeof c !== "string" && (c.attrs["data-type"] === "pane-title" || c.tag === "strong"));
+        const title = el.attrs["data-title"] || (titleEl ? extractRawText(titleEl.children) : null);
+        const rest = titleEl ? el.children.filter((c) => c !== titleEl) : el.children;
+        return [{ type: "informationPane", attrs: { variant, title }, content: convertTree(rest) }];
+    }
+    if (dataType === "conversation-history") {
+        return [
+            {
+                type: "conversationHistory",
+                attrs: {
+                    author: el.attrs["data-author"] || null,
+                    timestamp: el.attrs["data-timestamp"] || null,
+                },
+                content: convertTree(el.children),
+            },
+        ];
+    }
+    if (dataType === "layout-container") {
+        const columns = el.children
+            .filter((c) => typeof c !== "string" && (c.attrs["data-type"] === "layout-column" || c.tag === "div"))
+            .map((col) => ({ type: "layoutColumn", content: convertTree(col.children) }));
+        return [
+            {
+                type: "layoutContainer",
+                attrs: { columns: el.attrs["data-columns"] || "1:1" },
+                content: columns,
+            },
+        ];
+    }
+    if (dataType === "attachment") {
+        const link = findChildByTag(el, "a") || el;
+        const href = sanitizeTiptapUrl(link.attrs.href || el.attrs["data-href"]);
+        if (href === "#")
+            return [];
+        return [
+            {
+                type: "attachment",
+                attrs: {
+                    href,
+                    "filename": el.attrs["data-filename"] ||
+                        link.attrs.download ||
+                        extractRawText(link.children) ||
+                        "Attachment",
+                    "title": el.attrs["data-title"] || link.attrs.title || null,
+                    "size": el.attrs["data-size"] || null,
+                    "mime": el.attrs["data-mime"] || null,
+                    "ext": el.attrs["data-ext"] || null,
+                    "data-asset-id": el.attrs["data-asset-id"] || null,
+                    "data-document-id": el.attrs["data-document-id"] || null,
+                },
+            },
+        ];
+    }
+    if (el.tag === "iframe" || dataType === "iframe-wrapper") {
+        const iframeEl = el.tag === "iframe" ? el : findChildByTag(el, "iframe");
+        const safeSrc = sanitizeTiptapIframeUrl(iframeEl?.attrs.src || el.attrs["data-src"]);
+        if (safeSrc === "#")
+            return [];
+        return [
+            {
+                type: "iframe",
+                attrs: {
+                    "src": safeSrc,
+                    "title": iframeEl?.attrs.title || el.attrs.title || null,
+                    "width": iframeEl?.attrs.width || el.attrs.width || "100%",
+                    "height": iframeEl?.attrs.height || el.attrs.height || 400,
+                    "data-align": el.attrs["data-align"] || null,
+                },
+            },
+        ];
+    }
+    if (el.tag === "video" || dataType === "video") {
+        const videoEl = el.tag === "video" ? el : findChildByTag(el, "video") || findChildByTag(el, "iframe");
+        const src = sanitizeTiptapUrl(videoEl?.attrs.src || el.attrs["data-src"]);
+        if (src === "#")
+            return [];
+        const embedType = videoEl?.tag === "iframe" || el.attrs["data-embed-type"] === "embed" ? "embed" : "file";
+        const capEl = findChildByTag(el, "figcaption");
+        return [
+            {
+                type: "video",
+                attrs: {
+                    src,
+                    embedType,
+                    "title": videoEl?.attrs.title || el.attrs.title || null,
+                    "caption": el.attrs["data-caption"] || (capEl ? extractRawText(capEl.children) : null),
+                    "data-align": el.attrs["data-align"] || null,
+                    "data-asset-id": el.attrs["data-asset-id"] || null,
+                    "data-document-id": el.attrs["data-document-id"] || null,
+                },
+            },
+        ];
+    }
+    if (el.tag === "audio" || dataType === "audio") {
+        const audioEl = el.tag === "audio" ? el : findChildByTag(el, "audio");
+        const src = sanitizeTiptapUrl(audioEl?.attrs.src || el.attrs["data-src"]);
+        if (src === "#")
+            return [];
+        const capEl = findChildByTag(el, "figcaption");
+        return [
+            {
+                type: "audio",
+                attrs: {
+                    src,
+                    "title": audioEl?.attrs.title || el.attrs.title || null,
+                    "caption": el.attrs["data-caption"] || (capEl ? extractRawText(capEl.children) : null),
+                    "data-align": el.attrs["data-align"] || null,
+                    "data-asset-id": el.attrs["data-asset-id"] || null,
+                    "data-document-id": el.attrs["data-document-id"] || null,
+                },
+            },
+        ];
+    }
+    if (el.tag === "details") {
+        const summaryEl = findChildByTag(el, "summary");
+        const rest = el.children.filter((c) => c !== summaryEl);
+        return [
+            {
+                type: "details",
+                attrs: { open: "open" in el.attrs && el.attrs.open !== "false" },
+                content: [
+                    {
+                        type: "detailsSummary",
+                        content: summaryEl ? collectInlineNodes(summaryEl.children) : [],
+                    },
+                    { type: "detailsContent", content: convertTree(rest) },
+                ],
+            },
+        ];
+    }
+    const customNodeType = el.attrs["data-tiptap-type"];
+    if (customNodeType) {
+        const attrs = {};
+        for (const [k, v] of Object.entries(el.attrs)) {
+            if (k === "data-tiptap-type" || k === "class")
+                continue;
+            const propKey = k
+                .replace(/^data-/, "")
+                .replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+            attrs[propKey] = v;
+        }
+        return [{ type: customNodeType, attrs }];
+    }
+    return null;
+};

package/dist/lib/html-parser/html-inline.d.ts

@@ -0,0 +1,17 @@
+import type { TiptapInlineNode, TiptapMark } from "../../types";
+export interface HtmlToken {
+    type: "open" | "close" | "self" | "text";
+    tag?: string;
+    attrs?: Record<string, string>;
+    text?: string;
+}
+export interface SimpleElement {
+    tag: string;
+    attrs: Record<string, string>;
+    children: Array<SimpleElement | string>;
+}
+export declare const tokenizeHtml: (html: string) => HtmlToken[];
+export declare const buildElementTree: (tokens: HtmlToken[]) => Array<SimpleElement | string>;
+export declare const extractRawText: (nodes: Array<SimpleElement | string>) => string;
+export declare const parseInlineStyleProps: (style?: string) => Record<string, string>;
+export declare const collectInlineNodes: (nodes: Array<SimpleElement | string>, activeMarks?: TiptapMark[]) => TiptapInlineNode[];

package/dist/lib/html-parser/html-inline.js

@@ -0,0 +1,181 @@
+import { decodeHtmlEntities, sanitizeCssColor, sanitizeCssDimension, sanitizeCssFontFamily, sanitizeTiptapUrl, } from "../sanitize";
+const SELF_CLOSING_TAGS = new Set(["br", "hr", "img", "input", "meta", "link", "source"]);
+const IGNORED_CONTAINERS = new Set(["script", "style", "object", "embed"]);
+const parseAttributes = (attrString) => {
+    const attrs = {};
+    const attrRegex = /([a-zA-Z0-9_:-]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+    let match;
+    while ((match = attrRegex.exec(attrString)) !== null) {
+        const key = match[1].toLowerCase();
+        const val = match[2] ?? match[3] ?? match[4] ?? "";
+        attrs[key] = decodeHtmlEntities(val);
+    }
+    return attrs;
+};
+export const tokenizeHtml = (html) => {
+    const sanitized = html
+        .replace(/<!--[\s\S]*?-->/g, "")
+        .replace(/<(script|style|object|embed)\b[^>]*>[\s\S]*?<\/\1>/gi, "");
+    const tokens = [];
+    const tagRegex = /<\/?([a-zA-Z0-9-]+)([^>]*)>/g;
+    let lastIndex = 0;
+    let match;
+    while ((match = tagRegex.exec(sanitized)) !== null) {
+        if (match.index > lastIndex) {
+            tokens.push({ type: "text", text: sanitized.slice(lastIndex, match.index) });
+        }
+        const fullMatch = match[0];
+        const tag = match[1].toLowerCase();
+        const rawAttrs = match[2] || "";
+        const isClosing = fullMatch.startsWith("</");
+        const isSelfClosing = fullMatch.endsWith("/>") || SELF_CLOSING_TAGS.has(tag);
+        if (!IGNORED_CONTAINERS.has(tag)) {
+            if (isClosing)
+                tokens.push({ type: "close", tag });
+            else if (isSelfClosing)
+                tokens.push({ type: "self", tag, attrs: parseAttributes(rawAttrs) });
+            else
+                tokens.push({ type: "open", tag, attrs: parseAttributes(rawAttrs) });
+        }
+        lastIndex = tagRegex.lastIndex;
+    }
+    if (lastIndex < sanitized.length) {
+        tokens.push({ type: "text", text: sanitized.slice(lastIndex) });
+    }
+    return tokens;
+};
+export const buildElementTree = (tokens) => {
+    const root = { tag: "root", attrs: {}, children: [] };
+    const stack = [root];
+    for (const token of tokens) {
+        const current = stack[stack.length - 1];
+        if (token.type === "text" && token.text !== undefined) {
+            current.children.push(token.text);
+        }
+        else if (token.type === "self" && token.tag) {
+            current.children.push({ tag: token.tag, attrs: token.attrs || {}, children: [] });
+        }
+        else if (token.type === "open" && token.tag) {
+            const el = { tag: token.tag, attrs: token.attrs || {}, children: [] };
+            current.children.push(el);
+            stack.push(el);
+        }
+        else if (token.type === "close" && token.tag) {
+            for (let i = stack.length - 1; i >= 1; i--) {
+                if (stack[i].tag === token.tag) {
+                    stack.length = i;
+                    break;
+                }
+            }
+        }
+    }
+    return root.children;
+};
+export const extractRawText = (nodes) => nodes
+    .map((n) => typeof n === "string"
+    ? decodeHtmlEntities(n)
+    : n.tag === "br"
+        ? "\n"
+        : extractRawText(n.children))
+    .join("");
+export const parseInlineStyleProps = (style) => {
+    const map = {};
+    if (!style)
+        return map;
+    for (const part of style.split(";")) {
+        const idx = part.indexOf(":");
+        if (idx > 0)
+            map[part.slice(0, idx).trim().toLowerCase()] = part.slice(idx + 1).trim();
+    }
+    return map;
+};
+export const collectInlineNodes = (nodes, activeMarks = []) => {
+    const result = [];
+    for (const node of nodes) {
+        if (typeof node === "string") {
+            const decoded = decodeHtmlEntities(node);
+            if (decoded.length > 0) {
+                result.push({
+                    type: "text",
+                    text: decoded,
+                    ...(activeMarks.length > 0 ? { marks: [...activeMarks] } : {}),
+                });
+            }
+            continue;
+        }
+        if (node.tag === "br") {
+            result.push({ type: "hardBreak" });
+            continue;
+        }
+        if (node.attrs["data-type"] === "mathematics") {
+            const latex = node.attrs["data-latex"] || extractRawText(node.children);
+            result.push({ type: "mathematics", attrs: { latex, displayMode: "inline" } });
+            continue;
+        }
+        if (node.tag === "a" &&
+            (node.attrs["data-type"] === "linker" || node.attrs["data-collection"])) {
+            result.push({
+                type: "linker",
+                attrs: {
+                    collectionName: node.attrs["data-collection"] || null,
+                    documentId: node.attrs["data-document-id"] || null,
+                    label: node.attrs["data-label"] || extractRawText(node.children) || null,
+                    href: sanitizeTiptapUrl(node.attrs.href),
+                },
+            });
+            continue;
+        }
+        const nextMarks = [...activeMarks];
+        const styles = parseInlineStyleProps(node.attrs.style);
+        if (node.tag === "strong" || node.tag === "b")
+            nextMarks.push({ type: "bold" });
+        else if (node.tag === "em" || node.tag === "i")
+            nextMarks.push({ type: "italic" });
+        else if (node.tag === "u")
+            nextMarks.push({ type: "underline" });
+        else if (node.tag === "s" || node.tag === "strike" || node.tag === "del")
+            nextMarks.push({ type: "strike" });
+        else if (node.tag === "code")
+            nextMarks.push({ type: "code" });
+        else if (node.tag === "sub")
+            nextMarks.push({ type: "subscript" });
+        else if (node.tag === "sup")
+            nextMarks.push({ type: "superscript" });
+        else if (node.tag === "abbr")
+            nextMarks.push({ type: "abbr", attrs: { title: node.attrs.title || null } });
+        else if (node.tag === "mark") {
+            const color = sanitizeCssColor(node.attrs["data-color"] || styles["background-color"]);
+            nextMarks.push({ type: "highlight", ...(color ? { attrs: { color } } : {}) });
+        }
+        else if (node.tag === "a") {
+            nextMarks.push({
+                type: "link",
+                attrs: {
+                    href: sanitizeTiptapUrl(node.attrs.href),
+                    target: node.attrs.target || null,
+                    rel: node.attrs.rel || null,
+                    title: node.attrs.title || null,
+                    class: node.attrs.class || null,
+                },
+            });
+        }
+        if (node.attrs.lang || node.attrs.dir) {
+            nextMarks.push({
+                type: "language",
+                attrs: {
+                    lang: node.attrs.lang || null,
+                    dir: node.attrs.dir || null,
+                },
+            });
+        }
+        const color = sanitizeCssColor(styles.color);
+        const fontFamily = sanitizeCssFontFamily(styles["font-family"]);
+        const fontSize = sanitizeCssDimension(styles["font-size"]);
+        const lineHeight = sanitizeCssDimension(styles["line-height"]);
+        if (color || fontFamily || fontSize || lineHeight) {
+            nextMarks.push({ type: "textStyle", attrs: { color, fontFamily, fontSize, lineHeight } });
+        }
+        result.push(...collectInlineNodes(node.children, nextMarks));
+    }
+    return result;
+};

package/dist/lib/html-parser/html-parser.d.ts

@@ -0,0 +1,4 @@
+import type { TiptapBlockNode, TiptapDocNode } from "../../types";
+import { type SimpleElement } from "./html-inline";
+export declare const convertTreeToBlocks: (nodes: Array<SimpleElement | string>) => TiptapBlockNode[];
+export declare const parseTiptapHtml: (html: string) => TiptapDocNode;