@editorcn/static-renderer 0.1.0

package/dist/index.cjs

@@ -0,0 +1,50 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  StaticRenderer: () => StaticRenderer
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/static-renderer.tsx
+var import_react = require("react");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+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 StaticRenderer = ({
+  as: Tag = "div",
+  className,
+  content,
+  ...props
+}) => (0, import_react.createElement)(Tag, {
+  ...props,
+  className: cn("rte-static-renderer", className),
+  dangerouslySetInnerHTML: { __html: content }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StaticRenderer
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +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":[]}

package/dist/index.d.cts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { HTMLAttributes, ElementType } from 'react';
+
+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"`.
+     */
+    as?: ElementType;
+};
+declare const StaticRenderer: ({ as: Tag, className, content, ...props }: StaticRendererProps) => react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+export { StaticRenderer, type StaticRendererProps };

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { HTMLAttributes, ElementType } from 'react';
+
+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"`.
+     */
+    as?: ElementType;
+};
+declare const StaticRenderer: ({ as: Tag, className, content, ...props }: StaticRendererProps) => react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+export { StaticRenderer, type StaticRendererProps };

package/dist/index.js

@@ -0,0 +1,23 @@
+// src/static-renderer.tsx
+import { createElement } from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+var cn = (...inputs) => twMerge(clsx(inputs));
+
+// src/static-renderer.tsx
+var StaticRenderer = ({
+  as: Tag = "div",
+  className,
+  content,
+  ...props
+}) => createElement(Tag, {
+  ...props,
+  className: cn("rte-static-renderer", className),
+  dangerouslySetInnerHTML: { __html: content }
+});
+export {
+  StaticRenderer
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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":[]}

package/dist/style.css

@@ -0,0 +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);
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "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"
+  }
+}