@editorcn/static-renderer 0.1.0 → 0.2.2

package/dist/index.cjs

@@ -25,6 +25,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/static-renderer.tsx
+var import_static_renderer = require("@tiptap/static-renderer");
 var import_react = require("react");
 
 // src/lib/utils.ts
@@ -33,16 +34,41 @@ var import_tailwind_merge = require("tailwind-merge");
 var cn = (...inputs) => (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 
 // src/static-renderer.tsx
+var resolveUniqueExtensions = (extensions) => {
+  const byName = /* @__PURE__ */ new Map();
+  for (const extension of extensions) {
+    byName.set(extension.name, extension);
+  }
+  return [...byName.values()];
+};
 var StaticRenderer = ({
   as: Tag = "div",
   className,
   content,
+  extensions,
+  staticEditorOptions,
+  options,
   ...props
-}) => (0, import_react.createElement)(Tag, {
-  ...props,
-  className: cn("rte-static-renderer", className),
-  dangerouslySetInnerHTML: { __html: content }
-});
+}) => {
+  if (typeof content === "string") {
+    return (0, import_react.createElement)(Tag, {
+      ...props,
+      className: cn("rte-static-renderer", className),
+      dangerouslySetInnerHTML: { __html: content }
+    });
+  }
+  const children = (0, import_static_renderer.renderToReactElement)({
+    content,
+    extensions: resolveUniqueExtensions(extensions ?? []),
+    options,
+    staticEditorOptions
+  });
+  return (0, import_react.createElement)(
+    Tag,
+    { ...props, className: cn("rte-static-renderer", className) },
+    children
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   StaticRenderer

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/static-renderer.tsx","../src/lib/utils.ts"],"sourcesContent":["export * from \"./static-renderer\";\n","import type { ElementType, HTMLAttributes } from \"react\";\nimport { createElement } from \"react\";\n\nimport { cn } from \"./lib/utils\";\n\nexport type StaticRendererProps = Omit<\n  HTMLAttributes<HTMLElement>,\n  \"dangerouslySetInnerHTML\"\n> & {\n  /**\n   * HTML produced by `editor.getHTML()` from either `@editorcn/editor` or\n   * `@editorcn/block-editor`. Rendered read-only.\n   */\n  content: string;\n  /**\n   * Element used as the renderer's root. Defaults to `\"div\"`.\n   */\n  as?: ElementType;\n};\n\nexport const StaticRenderer = ({\n  as: Tag = \"div\",\n  className,\n  content,\n  ...props\n}: StaticRendererProps) =>\n  createElement(Tag, {\n    ...props,\n    className: cn(\"rte-static-renderer\", className),\n    dangerouslySetInnerHTML: { __html: content },\n  });\n","import { clsx } from \"clsx\";\nimport type { ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,mBAA8B;;;ACD9B,kBAAqB;AAErB,4BAAwB;AAEjB,IAAM,KAAK,IAAI,eAAyB,mCAAQ,kBAAK,MAAM,CAAC;;;ADgB5D,IAAM,iBAAiB,CAAC;AAAA,EAC7B,IAAI,MAAM;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,UACE,4BAAc,KAAK;AAAA,EACjB,GAAG;AAAA,EACH,WAAW,GAAG,uBAAuB,SAAS;AAAA,EAC9C,yBAAyB,EAAE,QAAQ,QAAQ;AAC7C,CAAC;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/static-renderer.tsx","../src/lib/utils.ts"],"sourcesContent":["export * from \"./static-renderer\";\r\n","import type { Extensions, JSONContent } from \"@tiptap/core\";\r\nimport type { Mark, Node } from \"@tiptap/pm/model\";\r\nimport { renderToReactElement } from \"@tiptap/static-renderer\";\r\nimport type {\r\n  StaticEditorOptions,\r\n  TiptapStaticRendererOptions,\r\n} from \"@tiptap/static-renderer\";\r\nimport { createElement } from \"react\";\r\nimport type { ElementType, HTMLAttributes, ReactNode } from \"react\";\r\n\r\nimport { cn } from \"./lib/utils\";\r\n\r\nconst resolveUniqueExtensions = (extensions: Extensions) => {\r\n  const byName = new Map<string, (typeof extensions)[number]>();\r\n  for (const extension of extensions) {\r\n    byName.set(extension.name, extension);\r\n  }\r\n  return [...byName.values()];\r\n};\r\n\r\nexport type StaticRendererProps = Omit<\r\n  HTMLAttributes<HTMLElement>,\r\n  \"content\" | \"dangerouslySetInnerHTML\"\r\n> & {\r\n  // HTML from editor.getHTML() rendered read-only, or a ProseMirror JSON document.\r\n  content: string | JSONContent | Node;\r\n  // Root element, defaults to \"div\".\r\n  as?: ElementType;\r\n  // Tiptap extensions used to render JSON content; every node/mark in the document must be registered.\r\n  extensions?: Extensions;\r\n  // Editor-level options applied while rendering JSON.\r\n  staticEditorOptions?: StaticEditorOptions;\r\n  // renderToReactElement options — nodeMapping/markMapping for custom nodes.\r\n  options?: Partial<TiptapStaticRendererOptions<ReactNode, Mark, Node>>;\r\n};\r\n\r\nexport const StaticRenderer = ({\r\n  as: Tag = \"div\",\r\n  className,\r\n  content,\r\n  extensions,\r\n  staticEditorOptions,\r\n  options,\r\n  ...props\r\n}: StaticRendererProps) => {\r\n  if (typeof content === \"string\") {\r\n    return createElement(Tag, {\r\n      ...props,\r\n      className: cn(\"rte-static-renderer\", className),\r\n      dangerouslySetInnerHTML: { __html: content },\r\n    });\r\n  }\r\n\r\n  const children = renderToReactElement({\r\n    content,\r\n    extensions: resolveUniqueExtensions(extensions ?? []),\r\n    options,\r\n    staticEditorOptions,\r\n  });\r\n\r\n  return createElement(\r\n    Tag,\r\n    { ...props, className: cn(\"rte-static-renderer\", className) },\r\n    children\r\n  );\r\n};\r\n","import { clsx } from \"clsx\";\r\nimport type { ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,6BAAqC;AAKrC,mBAA8B;;;ACP9B,kBAAqB;AAErB,4BAAwB;AAEjB,IAAM,KAAK,IAAI,eAAyB,mCAAQ,kBAAK,MAAM,CAAC;;;ADQnE,IAAM,0BAA0B,CAAC,eAA2B;AAC1D,QAAM,SAAS,oBAAI,IAAyC;AAC5D,aAAW,aAAa,YAAY;AAClC,WAAO,IAAI,UAAU,MAAM,SAAS;AAAA,EACtC;AACA,SAAO,CAAC,GAAG,OAAO,OAAO,CAAC;AAC5B;AAkBO,IAAM,iBAAiB,CAAC;AAAA,EAC7B,IAAI,MAAM;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,MAAI,OAAO,YAAY,UAAU;AAC/B,eAAO,4BAAc,KAAK;AAAA,MACxB,GAAG;AAAA,MACH,WAAW,GAAG,uBAAuB,SAAS;AAAA,MAC9C,yBAAyB,EAAE,QAAQ,QAAQ;AAAA,IAC7C,CAAC;AAAA,EACH;AAEA,QAAM,eAAW,6CAAqB;AAAA,IACpC;AAAA,IACA,YAAY,wBAAwB,cAAc,CAAC,CAAC;AAAA,IACpD;AAAA,IACA;AAAA,EACF,CAAC;AAED,aAAO;AAAA,IACL;AAAA,IACA,EAAE,GAAG,OAAO,WAAW,GAAG,uBAAuB,SAAS,EAAE;AAAA,IAC5D;AAAA,EACF;AACF;","names":[]}

package/dist/index.d.cts

@@ -1,17 +1,16 @@
 import * as react from 'react';
-import { HTMLAttributes, ElementType } from 'react';
+import { HTMLAttributes, ElementType, ReactNode } from 'react';
+import { JSONContent, Extensions } from '@tiptap/core';
+import { Node, Mark } from '@tiptap/pm/model';
+import { StaticEditorOptions, TiptapStaticRendererOptions } from '@tiptap/static-renderer';
 
-type StaticRendererProps = Omit<HTMLAttributes<HTMLElement>, "dangerouslySetInnerHTML"> & {
-    /**
-     * HTML produced by `editor.getHTML()` from either `@editorcn/editor` or
-     * `@editorcn/block-editor`. Rendered read-only.
-     */
-    content: string;
-    /**
-     * Element used as the renderer's root. Defaults to `"div"`.
-     */
+type StaticRendererProps = Omit<HTMLAttributes<HTMLElement>, "content" | "dangerouslySetInnerHTML"> & {
+    content: string | JSONContent | Node;
     as?: ElementType;
+    extensions?: Extensions;
+    staticEditorOptions?: StaticEditorOptions;
+    options?: Partial<TiptapStaticRendererOptions<ReactNode, Mark, Node>>;
 };
-declare const StaticRenderer: ({ as: Tag, className, content, ...props }: StaticRendererProps) => react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare const StaticRenderer: ({ as: Tag, className, content, extensions, staticEditorOptions, options, ...props }: StaticRendererProps) => react.ReactElement<any, string | react.JSXElementConstructor<any>>;
 
 export { StaticRenderer, type StaticRendererProps };

package/dist/index.d.ts

@@ -1,17 +1,16 @@
 import * as react from 'react';
-import { HTMLAttributes, ElementType } from 'react';
+import { HTMLAttributes, ElementType, ReactNode } from 'react';
+import { JSONContent, Extensions } from '@tiptap/core';
+import { Node, Mark } from '@tiptap/pm/model';
+import { StaticEditorOptions, TiptapStaticRendererOptions } from '@tiptap/static-renderer';
 
-type StaticRendererProps = Omit<HTMLAttributes<HTMLElement>, "dangerouslySetInnerHTML"> & {
-    /**
-     * HTML produced by `editor.getHTML()` from either `@editorcn/editor` or
-     * `@editorcn/block-editor`. Rendered read-only.
-     */
-    content: string;
-    /**
-     * Element used as the renderer's root. Defaults to `"div"`.
-     */
+type StaticRendererProps = Omit<HTMLAttributes<HTMLElement>, "content" | "dangerouslySetInnerHTML"> & {
+    content: string | JSONContent | Node;
     as?: ElementType;
+    extensions?: Extensions;
+    staticEditorOptions?: StaticEditorOptions;
+    options?: Partial<TiptapStaticRendererOptions<ReactNode, Mark, Node>>;
 };
-declare const StaticRenderer: ({ as: Tag, className, content, ...props }: StaticRendererProps) => react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare const StaticRenderer: ({ as: Tag, className, content, extensions, staticEditorOptions, options, ...props }: StaticRendererProps) => react.ReactElement<any, string | react.JSXElementConstructor<any>>;
 
 export { StaticRenderer, type StaticRendererProps };

package/dist/index.js

@@ -1,4 +1,5 @@
 // src/static-renderer.tsx
+import { renderToReactElement } from "@tiptap/static-renderer";
 import { createElement } from "react";
 
 // src/lib/utils.ts
@@ -7,16 +8,41 @@ import { twMerge } from "tailwind-merge";
 var cn = (...inputs) => twMerge(clsx(inputs));
 
 // src/static-renderer.tsx
+var resolveUniqueExtensions = (extensions) => {
+  const byName = /* @__PURE__ */ new Map();
+  for (const extension of extensions) {
+    byName.set(extension.name, extension);
+  }
+  return [...byName.values()];
+};
 var StaticRenderer = ({
   as: Tag = "div",
   className,
   content,
+  extensions,
+  staticEditorOptions,
+  options,
   ...props
-}) => createElement(Tag, {
-  ...props,
-  className: cn("rte-static-renderer", className),
-  dangerouslySetInnerHTML: { __html: content }
-});
+}) => {
+  if (typeof content === "string") {
+    return createElement(Tag, {
+      ...props,
+      className: cn("rte-static-renderer", className),
+      dangerouslySetInnerHTML: { __html: content }
+    });
+  }
+  const children = renderToReactElement({
+    content,
+    extensions: resolveUniqueExtensions(extensions ?? []),
+    options,
+    staticEditorOptions
+  });
+  return createElement(
+    Tag,
+    { ...props, className: cn("rte-static-renderer", className) },
+    children
+  );
+};
 export {
   StaticRenderer
 };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/static-renderer.tsx","../src/lib/utils.ts"],"sourcesContent":["import type { ElementType, HTMLAttributes } from \"react\";\nimport { createElement } from \"react\";\n\nimport { cn } from \"./lib/utils\";\n\nexport type StaticRendererProps = Omit<\n  HTMLAttributes<HTMLElement>,\n  \"dangerouslySetInnerHTML\"\n> & {\n  /**\n   * HTML produced by `editor.getHTML()` from either `@editorcn/editor` or\n   * `@editorcn/block-editor`. Rendered read-only.\n   */\n  content: string;\n  /**\n   * Element used as the renderer's root. Defaults to `\"div\"`.\n   */\n  as?: ElementType;\n};\n\nexport const StaticRenderer = ({\n  as: Tag = \"div\",\n  className,\n  content,\n  ...props\n}: StaticRendererProps) =>\n  createElement(Tag, {\n    ...props,\n    className: cn(\"rte-static-renderer\", className),\n    dangerouslySetInnerHTML: { __html: content },\n  });\n","import { clsx } from \"clsx\";\nimport type { ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));\n"],"mappings":";AACA,SAAS,qBAAqB;;;ACD9B,SAAS,YAAY;AAErB,SAAS,eAAe;AAEjB,IAAM,KAAK,IAAI,WAAyB,QAAQ,KAAK,MAAM,CAAC;;;ADgB5D,IAAM,iBAAiB,CAAC;AAAA,EAC7B,IAAI,MAAM;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE,cAAc,KAAK;AAAA,EACjB,GAAG;AAAA,EACH,WAAW,GAAG,uBAAuB,SAAS;AAAA,EAC9C,yBAAyB,EAAE,QAAQ,QAAQ;AAC7C,CAAC;","names":[]}
+{"version":3,"sources":["../src/static-renderer.tsx","../src/lib/utils.ts"],"sourcesContent":["import type { Extensions, JSONContent } from \"@tiptap/core\";\r\nimport type { Mark, Node } from \"@tiptap/pm/model\";\r\nimport { renderToReactElement } from \"@tiptap/static-renderer\";\r\nimport type {\r\n  StaticEditorOptions,\r\n  TiptapStaticRendererOptions,\r\n} from \"@tiptap/static-renderer\";\r\nimport { createElement } from \"react\";\r\nimport type { ElementType, HTMLAttributes, ReactNode } from \"react\";\r\n\r\nimport { cn } from \"./lib/utils\";\r\n\r\nconst resolveUniqueExtensions = (extensions: Extensions) => {\r\n  const byName = new Map<string, (typeof extensions)[number]>();\r\n  for (const extension of extensions) {\r\n    byName.set(extension.name, extension);\r\n  }\r\n  return [...byName.values()];\r\n};\r\n\r\nexport type StaticRendererProps = Omit<\r\n  HTMLAttributes<HTMLElement>,\r\n  \"content\" | \"dangerouslySetInnerHTML\"\r\n> & {\r\n  // HTML from editor.getHTML() rendered read-only, or a ProseMirror JSON document.\r\n  content: string | JSONContent | Node;\r\n  // Root element, defaults to \"div\".\r\n  as?: ElementType;\r\n  // Tiptap extensions used to render JSON content; every node/mark in the document must be registered.\r\n  extensions?: Extensions;\r\n  // Editor-level options applied while rendering JSON.\r\n  staticEditorOptions?: StaticEditorOptions;\r\n  // renderToReactElement options — nodeMapping/markMapping for custom nodes.\r\n  options?: Partial<TiptapStaticRendererOptions<ReactNode, Mark, Node>>;\r\n};\r\n\r\nexport const StaticRenderer = ({\r\n  as: Tag = \"div\",\r\n  className,\r\n  content,\r\n  extensions,\r\n  staticEditorOptions,\r\n  options,\r\n  ...props\r\n}: StaticRendererProps) => {\r\n  if (typeof content === \"string\") {\r\n    return createElement(Tag, {\r\n      ...props,\r\n      className: cn(\"rte-static-renderer\", className),\r\n      dangerouslySetInnerHTML: { __html: content },\r\n    });\r\n  }\r\n\r\n  const children = renderToReactElement({\r\n    content,\r\n    extensions: resolveUniqueExtensions(extensions ?? []),\r\n    options,\r\n    staticEditorOptions,\r\n  });\r\n\r\n  return createElement(\r\n    Tag,\r\n    { ...props, className: cn(\"rte-static-renderer\", className) },\r\n    children\r\n  );\r\n};\r\n","import { clsx } from \"clsx\";\r\nimport type { ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));\r\n"],"mappings":";AAEA,SAAS,4BAA4B;AAKrC,SAAS,qBAAqB;;;ACP9B,SAAS,YAAY;AAErB,SAAS,eAAe;AAEjB,IAAM,KAAK,IAAI,WAAyB,QAAQ,KAAK,MAAM,CAAC;;;ADQnE,IAAM,0BAA0B,CAAC,eAA2B;AAC1D,QAAM,SAAS,oBAAI,IAAyC;AAC5D,aAAW,aAAa,YAAY;AAClC,WAAO,IAAI,UAAU,MAAM,SAAS;AAAA,EACtC;AACA,SAAO,CAAC,GAAG,OAAO,OAAO,CAAC;AAC5B;AAkBO,IAAM,iBAAiB,CAAC;AAAA,EAC7B,IAAI,MAAM;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,cAAc,KAAK;AAAA,MACxB,GAAG;AAAA,MACH,WAAW,GAAG,uBAAuB,SAAS;AAAA,MAC9C,yBAAyB,EAAE,QAAQ,QAAQ;AAAA,IAC7C,CAAC;AAAA,EACH;AAEA,QAAM,WAAW,qBAAqB;AAAA,IACpC;AAAA,IACA,YAAY,wBAAwB,cAAc,CAAC,CAAC;AAAA,IACpD;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA,EAAE,GAAG,OAAO,WAAW,GAAG,uBAAuB,SAAS,EAAE;AAAA,IAC5D;AAAA,EACF;AACF;","names":[]}

package/dist/style.css

@@ -1,335 +1,335 @@
-/* Static renderer styles using shadcn CSS variables.
- * Targets the HTML produced by editor.getHTML() from both
- * @editorcn/editor and @editorcn/block-editor.
- */
-.rte-static-renderer {
-  color: var(--foreground);
-}
-
-.rte-static-renderer > *:last-child {
-  margin-bottom: 0;
-}
-
-/* ── Typography ── */
-.rte-static-renderer h1 {
-  font-size: 1.875rem;
-  font-weight: 700;
-  line-height: 1.2;
-  margin: 0.5em 0 0.25em;
-}
-
-.rte-static-renderer h2 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.25;
-  margin: 0.5em 0 0.25em;
-}
-
-.rte-static-renderer h3 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  line-height: 1.3;
-  margin: 0.5em 0 0.25em;
-}
-
-.rte-static-renderer h4 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  line-height: 1.35;
-  margin: 0.5em 0 0.25em;
-}
-
-.rte-static-renderer h5 {
-  font-size: 1rem;
-  font-weight: 600;
-  line-height: 1.4;
-  margin: 0.5em 0 0.25em;
-}
-
-.rte-static-renderer h6 {
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.45;
-  margin: 0.5em 0 0.25em;
-}
-
-.rte-static-renderer h1:first-child,
-.rte-static-renderer h2:first-child,
-.rte-static-renderer h3:first-child,
-.rte-static-renderer h4:first-child,
-.rte-static-renderer h5:first-child,
-.rte-static-renderer h6:first-child {
-  margin-top: 0;
-}
-
-.rte-static-renderer p {
-  margin: 0.25em 0;
-  line-height: 1.6;
-}
-
-.rte-static-renderer ul {
-  list-style-type: disc;
-  padding-left: 1.5rem;
-  margin: 0.25em 0;
-}
-
-.rte-static-renderer ul ul {
-  list-style-type: circle;
-}
-
-.rte-static-renderer ul ul ul {
-  list-style-type: square;
-}
-
-.rte-static-renderer ol {
-  list-style-type: decimal;
-  padding-left: 1.5rem;
-  margin: 0.25em 0;
-}
-
-.rte-static-renderer li {
-  margin: 0.125em 0;
-}
-
-.rte-static-renderer li > p {
-  margin: 0;
-}
-
-.rte-static-renderer blockquote {
-  border-left: 3px solid var(--border);
-  padding-left: 1rem;
-  color: var(--muted-foreground);
-  margin: 0.5em 0;
-}
-
-/* ── Links ── */
-.rte-static-renderer a {
-  color: var(--primary);
-  text-decoration: underline;
-  text-underline-offset: 4px;
-  text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent);
-}
-
-/* ── Horizontal rule ── */
-.rte-static-renderer hr {
-  border: none;
-  border-top: 1px solid var(--border);
-  margin: 1em 0;
-}
-
-/* ── Inline code ── */
-.rte-static-renderer code {
-  font-size: 0.875em;
-  font-weight: 500;
-  font-family: var(--font-mono, monospace);
-  background: color-mix(in srgb, var(--muted) 70%, transparent);
-  padding: 0.125rem 0.375rem;
-  border-radius: calc(var(--radius) - 4px);
-}
-
-/* ── Code blocks ── */
-.rte-static-renderer pre {
-  background: #1e1e2e;
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  padding: 1rem;
-  overflow-x: auto;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  margin: 0.5em 0;
-  color: #cdd6f4;
-}
-
-.rte-static-renderer pre code {
-  color: inherit;
-  background: none;
-  padding: 0;
-  font-weight: 400;
-  font-family: var(--font-mono, monospace);
-}
-
-/* ── Syntax Highlighting (lowlight / highlight.js) ── */
-.rte-static-renderer pre .hljs-comment,
-.rte-static-renderer pre .hljs-quote {
-  color: #6c7086;
-}
-
-.rte-static-renderer pre .hljs-variable,
-.rte-static-renderer pre .hljs-template-variable,
-.rte-static-renderer pre .hljs-attribute,
-.rte-static-renderer pre .hljs-tag,
-.rte-static-renderer pre .hljs-regexp,
-.rte-static-renderer pre .hljs-link,
-.rte-static-renderer pre .hljs-name,
-.rte-static-renderer pre .hljs-selector-id,
-.rte-static-renderer pre .hljs-selector-class {
-  color: #89b4fa;
-}
-
-.rte-static-renderer pre .hljs-number,
-.rte-static-renderer pre .hljs-meta,
-.rte-static-renderer pre .hljs-built_in,
-.rte-static-renderer pre .hljs-builtin-name,
-.rte-static-renderer pre .hljs-literal,
-.rte-static-renderer pre .hljs-type,
-.rte-static-renderer pre .hljs-params {
-  color: #fab387;
-}
-
-.rte-static-renderer pre .hljs-string,
-.rte-static-renderer pre .hljs-symbol,
-.rte-static-renderer pre .hljs-bullet {
-  color: #a6e3a1;
-}
-
-.rte-static-renderer pre .hljs-title,
-.rte-static-renderer pre .hljs-section {
-  color: #f9e2af;
-}
-
-.rte-static-renderer pre .hljs-keyword,
-.rte-static-renderer pre .hljs-selector-tag {
-  color: #cba6f7;
-}
-
-/* Object/JSON keys & HTML/XML attribute names */
-.rte-static-renderer pre .hljs-attr {
-  color: #89b4fa;
-}
-
-/* JSDoc-style tags, e.g. @param, @returns */
-.rte-static-renderer pre .hljs-doctag {
-  color: #f38ba8;
-  font-weight: 600;
-}
-
-/* Operators & punctuation (finer-grained grammars) */
-.rte-static-renderer pre .hljs-operator,
-.rte-static-renderer pre .hljs-punctuation {
-  color: #9399b2;
-}
-
-/* CSS selector attributes/pseudo-classes, e.g. [type="text"], :hover */
-.rte-static-renderer pre .hljs-selector-attr,
-.rte-static-renderer pre .hljs-selector-pseudo {
-  color: #94e2d5;
-}
-
-/* Language-level variables, e.g. this, super */
-.rte-static-renderer pre .hljs-variable.language_ {
-  color: #cba6f7;
-  font-style: italic;
-}
-
-/* Template literal substitutions, e.g. ${...} */
-.rte-static-renderer pre .hljs-subst {
-  color: #cdd6f4;
-}
-
-.rte-static-renderer pre .hljs-emphasis {
-  font-style: italic;
-}
-
-.rte-static-renderer pre .hljs-strong {
-  font-weight: 700;
-}
-
-.rte-static-renderer pre .hljs-addition {
-  color: #a6e3a1;
-  background-color: color-mix(in srgb, #a6e3a1 10%, transparent);
-}
-
-.rte-static-renderer pre .hljs-deletion {
-  color: #f38ba8;
-  background-color: color-mix(in srgb, #f38ba8 10%, transparent);
-}
-
-/* ── Images ── */
-.rte-static-renderer img {
-  max-width: 100%;
-  height: auto;
-  border-radius: var(--radius);
-}
-
-/* ── Tables ── */
-.rte-static-renderer table {
-  border-collapse: collapse;
-  width: 100%;
-  margin: 0.5em 0;
-}
-
-.rte-static-renderer th,
-.rte-static-renderer td {
-  border: 1px solid var(--border);
-  padding: 0.5rem;
-  min-width: 100px;
-  text-align: left;
-  vertical-align: top;
-}
-
-.rte-static-renderer th {
-  background: var(--muted);
-  font-weight: 600;
-}
-
-/* Table wrapper for horizontal scroll */
-.rte-static-renderer .tableWrapper {
-  overflow-x: auto;
-}
-
-/* ── Task lists ── */
-.rte-static-renderer ul[data-type="taskList"] {
-  list-style: none;
-  padding-left: 0;
-}
-
-.rte-static-renderer ul[data-type="taskList"] li {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-}
-
-.rte-static-renderer ul[data-type="taskList"] li > label {
-  flex-shrink: 0;
-  margin-top: 0.25rem;
-}
-
-.rte-static-renderer ul[data-type="taskList"] li > div > p {
-  margin: 0;
-}
-
-.rte-static-renderer
-  ul[data-type="taskList"]
-  li[data-checked="true"]
-  > div
-  > p {
-  text-decoration: line-through;
-  color: var(--muted-foreground);
-}
-
-.rte-static-renderer ul[data-type="taskList"] input[type="checkbox"] {
-  accent-color: var(--primary);
-}
-
-/* ── Embeds (toolbar editor only) ──
- * Serialized as empty divs with data attributes. Styled as 16:9 placeholder
- * cards; swap the inner markup for an iframe/widget if you need the live
- * media to render. */
-.rte-static-renderer div[data-type="youtube"],
-.rte-static-renderer div[data-type="twitter"] {
-  width: 100%;
-  max-width: 100%;
-  margin: 0.5em 0;
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  background: var(--muted);
-  aspect-ratio: 16 / 9;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* ── Selection ── */
-.rte-static-renderer ::selection {
-  background: color-mix(in srgb, var(--primary) 20%, transparent);
-}
+/* Static renderer styles using shadcn CSS variables.
+ * Targets the HTML produced by editor.getHTML() from both
+ * @editorcn/editor and @editorcn/block-editor.
+ */
+.rte-static-renderer {
+  color: var(--foreground);
+}
+
+.rte-static-renderer > *:last-child {
+  margin-bottom: 0;
+}
+
+/* ── Typography ── */
+.rte-static-renderer h1 {
+  font-size: 1.875rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.5em 0 0.25em;
+}
+
+.rte-static-renderer h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.25;
+  margin: 0.5em 0 0.25em;
+}
+
+.rte-static-renderer h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.3;
+  margin: 0.5em 0 0.25em;
+}
+
+.rte-static-renderer h4 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.35;
+  margin: 0.5em 0 0.25em;
+}
+
+.rte-static-renderer h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.4;
+  margin: 0.5em 0 0.25em;
+}
+
+.rte-static-renderer h6 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.45;
+  margin: 0.5em 0 0.25em;
+}
+
+.rte-static-renderer h1:first-child,
+.rte-static-renderer h2:first-child,
+.rte-static-renderer h3:first-child,
+.rte-static-renderer h4:first-child,
+.rte-static-renderer h5:first-child,
+.rte-static-renderer h6:first-child {
+  margin-top: 0;
+}
+
+.rte-static-renderer p {
+  margin: 0.25em 0;
+  line-height: 1.6;
+}
+
+.rte-static-renderer ul {
+  list-style-type: disc;
+  padding-left: 1.5rem;
+  margin: 0.25em 0;
+}
+
+.rte-static-renderer ul ul {
+  list-style-type: circle;
+}
+
+.rte-static-renderer ul ul ul {
+  list-style-type: square;
+}
+
+.rte-static-renderer ol {
+  list-style-type: decimal;
+  padding-left: 1.5rem;
+  margin: 0.25em 0;
+}
+
+.rte-static-renderer li {
+  margin: 0.125em 0;
+}
+
+.rte-static-renderer li > p {
+  margin: 0;
+}
+
+.rte-static-renderer blockquote {
+  border-left: 3px solid var(--border);
+  padding-left: 1rem;
+  color: var(--muted-foreground);
+  margin: 0.5em 0;
+}
+
+/* ── Links ── */
+.rte-static-renderer a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent);
+}
+
+/* ── Horizontal rule ── */
+.rte-static-renderer hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 1em 0;
+}
+
+/* ── Inline code ── */
+.rte-static-renderer code {
+  font-size: 0.875em;
+  font-weight: 500;
+  font-family: var(--font-mono, monospace);
+  background: color-mix(in srgb, var(--muted) 70%, transparent);
+  padding: 0.125rem 0.375rem;
+  border-radius: calc(var(--radius) - 4px);
+}
+
+/* ── Code blocks ── */
+.rte-static-renderer pre {
+  background: #1e1e2e;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  padding: 1rem;
+  overflow-x: auto;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin: 0.5em 0;
+  color: #cdd6f4;
+}
+
+.rte-static-renderer pre code {
+  color: inherit;
+  background: none;
+  padding: 0;
+  font-weight: 400;
+  font-family: var(--font-mono, monospace);
+}
+
+/* ── Syntax Highlighting (lowlight / highlight.js) ── */
+.rte-static-renderer pre .hljs-comment,
+.rte-static-renderer pre .hljs-quote {
+  color: #6c7086;
+}
+
+.rte-static-renderer pre .hljs-variable,
+.rte-static-renderer pre .hljs-template-variable,
+.rte-static-renderer pre .hljs-attribute,
+.rte-static-renderer pre .hljs-tag,
+.rte-static-renderer pre .hljs-regexp,
+.rte-static-renderer pre .hljs-link,
+.rte-static-renderer pre .hljs-name,
+.rte-static-renderer pre .hljs-selector-id,
+.rte-static-renderer pre .hljs-selector-class {
+  color: #89b4fa;
+}
+
+.rte-static-renderer pre .hljs-number,
+.rte-static-renderer pre .hljs-meta,
+.rte-static-renderer pre .hljs-built_in,
+.rte-static-renderer pre .hljs-builtin-name,
+.rte-static-renderer pre .hljs-literal,
+.rte-static-renderer pre .hljs-type,
+.rte-static-renderer pre .hljs-params {
+  color: #fab387;
+}
+
+.rte-static-renderer pre .hljs-string,
+.rte-static-renderer pre .hljs-symbol,
+.rte-static-renderer pre .hljs-bullet {
+  color: #a6e3a1;
+}
+
+.rte-static-renderer pre .hljs-title,
+.rte-static-renderer pre .hljs-section {
+  color: #f9e2af;
+}
+
+.rte-static-renderer pre .hljs-keyword,
+.rte-static-renderer pre .hljs-selector-tag {
+  color: #cba6f7;
+}
+
+/* Object/JSON keys & HTML/XML attribute names */
+.rte-static-renderer pre .hljs-attr {
+  color: #89b4fa;
+}
+
+/* JSDoc-style tags, e.g. @param, @returns */
+.rte-static-renderer pre .hljs-doctag {
+  color: #f38ba8;
+  font-weight: 600;
+}
+
+/* Operators & punctuation (finer-grained grammars) */
+.rte-static-renderer pre .hljs-operator,
+.rte-static-renderer pre .hljs-punctuation {
+  color: #9399b2;
+}
+
+/* CSS selector attributes/pseudo-classes, e.g. [type="text"], :hover */
+.rte-static-renderer pre .hljs-selector-attr,
+.rte-static-renderer pre .hljs-selector-pseudo {
+  color: #94e2d5;
+}
+
+/* Language-level variables, e.g. this, super */
+.rte-static-renderer pre .hljs-variable.language_ {
+  color: #cba6f7;
+  font-style: italic;
+}
+
+/* Template literal substitutions, e.g. ${...} */
+.rte-static-renderer pre .hljs-subst {
+  color: #cdd6f4;
+}
+
+.rte-static-renderer pre .hljs-emphasis {
+  font-style: italic;
+}
+
+.rte-static-renderer pre .hljs-strong {
+  font-weight: 700;
+}
+
+.rte-static-renderer pre .hljs-addition {
+  color: #a6e3a1;
+  background-color: color-mix(in srgb, #a6e3a1 10%, transparent);
+}
+
+.rte-static-renderer pre .hljs-deletion {
+  color: #f38ba8;
+  background-color: color-mix(in srgb, #f38ba8 10%, transparent);
+}
+
+/* ── Images ── */
+.rte-static-renderer img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+}
+
+/* ── Tables ── */
+.rte-static-renderer table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.5em 0;
+}
+
+.rte-static-renderer th,
+.rte-static-renderer td {
+  border: 1px solid var(--border);
+  padding: 0.5rem;
+  min-width: 100px;
+  text-align: left;
+  vertical-align: top;
+}
+
+.rte-static-renderer th {
+  background: var(--muted);
+  font-weight: 600;
+}
+
+/* Table wrapper for horizontal scroll */
+.rte-static-renderer .tableWrapper {
+  overflow-x: auto;
+}
+
+/* ── Task lists ── */
+.rte-static-renderer ul[data-type="taskList"] {
+  list-style: none;
+  padding-left: 0;
+}
+
+.rte-static-renderer ul[data-type="taskList"] li {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.rte-static-renderer ul[data-type="taskList"] li > label {
+  flex-shrink: 0;
+  margin-top: 0.25rem;
+}
+
+.rte-static-renderer ul[data-type="taskList"] li > div > p {
+  margin: 0;
+}
+
+.rte-static-renderer
+  ul[data-type="taskList"]
+  li[data-checked="true"]
+  > div
+  > p {
+  text-decoration: line-through;
+  color: var(--muted-foreground);
+}
+
+.rte-static-renderer ul[data-type="taskList"] input[type="checkbox"] {
+  accent-color: var(--primary);
+}
+
+/* ── Embeds (toolbar editor only) ──
+ * Serialized as empty divs with data attributes. Styled as 16:9 placeholder
+ * cards; swap the inner markup for an iframe/widget if you need the live
+ * media to render. */
+.rte-static-renderer div[data-type="youtube"],
+.rte-static-renderer div[data-type="twitter"] {
+  width: 100%;
+  max-width: 100%;
+  margin: 0.5em 0;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--muted);
+  aspect-ratio: 16 / 9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ── Selection ── */
+.rte-static-renderer ::selection {
+  background: color-mix(in srgb, var(--primary) 20%, transparent);
+}

package/package.json

@@ -1,41 +1,44 @@
-{
-  "name": "@editorcn/static-renderer",
-  "version": "0.1.0",
-  "files": [
-    "dist"
-  ],
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./style.css": "./dist/style.css"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "build": "tsup && node -e \"require('fs').copyFileSync('src/style.css','dist/style.css')\"",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "pnpm build"
-  },
-  "dependencies": {
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^3.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^19",
-    "tsup": "^8.4.0",
-    "typescript": "^5"
-  },
-  "peerDependencies": {
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
-  }
-}
+{
+  "name": "@editorcn/static-renderer",
+  "version": "0.2.2",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup && node -e \"require('fs').copyFileSync('src/style.css','dist/style.css')\"",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm build"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "tsup": "^8.4.0",
+    "typescript": "^5"
+  },
+  "peerDependencies": {
+    "@tiptap/core": ">=3.21.0 <4",
+    "@tiptap/pm": ">=3.21.0 <4",
+    "@tiptap/static-renderer": ">=3.21.0 <4",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  }
+}