@kyro-cms/kyro-rich-text-react 0.12.15

package/README.md

@@ -0,0 +1,172 @@
+# kyro-rich-text-react
+
+A lightweight, headless React renderer for [Kyro CMS](https://kyro.dev) rich text content.
+
+When you use the `richText` field in Kyro CMS, it stores the content as structured Tiptap/ProseMirror JSON (not raw HTML). This package allows you to easily render that JSON structure into React components.
+
+By default, it is **completely headless and unstyled**, outputting clean semantic HTML (`<p>`, `<h1>`, `<strong>`). You have full control over the rendering by passing in custom components.
+
+---
+
+## Installation
+
+```bash
+npm install kyro-rich-text-react
+# or
+pnpm add kyro-rich-text-react
+# or
+yarn add kyro-rich-text-react
+```
+
+---
+
+## Quick Start
+
+Import the `KyroRichTextRenderer` component and pass the JSON array from your Kyro API to the `content` prop.
+
+```tsx
+import React from 'react';
+import { KyroRichTextRenderer } from 'kyro-rich-text-react';
+
+export default function BlogPost({ post }) {
+  // post.content is the JSON array from Kyro
+  return (
+    <article className="blog-content">
+      <KyroRichTextRenderer content={post.content} />
+    </article>
+  );
+}
+```
+
+---
+
+## Customizing Components (Advanced)
+
+Because the renderer is headless, it doesn't come with CSS classes. If you use a CSS framework like Tailwind, or if you simply want to use your own custom React components for specific nodes (like links or headings), use the `components` prop.
+
+The `components` prop accepts an object with two keys:
+- `types`: For block-level nodes (paragraphs, headings, blockquotes, images)
+- `marks`: For inline text formatting (bold, italic, links)
+
+### Example: Tailwind CSS & Custom Components
+
+```tsx
+import React from 'react';
+import { KyroRichTextRenderer, KyroRichTextComponents } from 'kyro-rich-text-react';
+import Link from 'next/link';
+
+const customComponents: KyroRichTextComponents = {
+  types: {
+    // Override headings to include Tailwind classes
+    heading: ({ node, children }) => {
+      const level = node.attrs?.level || 1;
+      const classes = {
+        1: 'text-4xl font-extrabold mb-6 mt-8',
+        2: 'text-2xl font-bold mb-4 mt-6',
+        3: 'text-xl font-semibold mb-3 mt-4',
+      };
+      const Tag = `h${level}` as keyof JSX.IntrinsicElements;
+      
+      return <Tag className={classes[level] || ''}>{children}</Tag>;
+    },
+    
+    // Custom Paragraphs
+    paragraph: ({ children }) => (
+      <p className="text-gray-700 leading-relaxed mb-4">{children}</p>
+    ),
+
+    // Render Kyro uploads as responsive images
+    image: ({ node }) => (
+      <img 
+        src={node.attrs?.src} 
+        alt={node.attrs?.alt || 'Image'} 
+        className="w-full rounded-xl shadow-lg my-6"
+      />
+    ),
+  },
+  
+  marks: {
+    // Map links to Next.js Link component for internal routing
+    link: ({ mark, children }) => {
+      const href = mark.attrs?.href || '#';
+      const isInternal = href.startsWith('/') || href.startsWith('#');
+
+      if (isInternal) {
+        return <Link href={href} className="text-blue-600 hover:underline">{children}</Link>;
+      }
+
+      // External link
+      return (
+        <a href={href} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+          {children}
+        </a>
+      );
+    },
+    
+    // Style bold text
+    bold: ({ children }) => <strong className="font-bold text-gray-900">{children}</strong>
+  }
+};
+
+export default function BlogPost({ post }) {
+  return (
+    <KyroRichTextRenderer 
+      content={post.content} 
+      components={customComponents} 
+    />
+  );
+}
+```
+
+---
+
+## Using with Tailwind Typography
+
+If you use the Tailwind `@tailwindcss/typography` plugin, you don't even need to write custom overrides. You can simply wrap the default headless output in a `.prose` class, and Tailwind will style all the semantic HTML automatically:
+
+```tsx
+import { KyroRichTextRenderer } from 'kyro-rich-text-react';
+
+export default function BlogPost({ post }) {
+  return (
+    <div className="prose prose-blue lg:prose-xl mx-auto">
+      <KyroRichTextRenderer content={post.content} />
+    </div>
+  );
+}
+```
+
+---
+
+## Supported Nodes and Marks
+
+By default, the renderer supports mapping these Tiptap formats to standard HTML tags:
+
+**Types (Blocks):**
+- `doc` -> `<React.Fragment>`
+- `paragraph` -> `<p>`
+- `heading` -> `<h1>` - `<h6>`
+- `blockquote` -> `<blockquote>`
+- `bulletList` -> `<ul>`
+- `orderedList` -> `<ol>`
+- `listItem` -> `<li>`
+- `codeBlock` -> `<pre><code>`
+- `horizontalRule` -> `<hr />`
+- `hardBreak` -> `<br />`
+- `image` -> `<img>`
+
+**Marks (Inline):**
+- `bold` -> `<strong>`
+- `italic` -> `<em>`
+- `strike` -> `<s>`
+- `code` -> `<code>`
+- `underline` -> `<u>`
+- `link` -> `<a>`
+
+If your Kyro CMS uses custom blocks in the rich text editor, you can handle them by adding a new key to the `types` object in your `components` prop matching your custom block's `type` string.
+
+---
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,134 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  KyroRichTextRenderer: () => KyroRichTextRenderer,
+  defaultMarks: () => defaultMarks,
+  defaultTypes: () => defaultTypes
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/KyroRichTextRenderer.tsx
+var import_react = __toESM(require("react"), 1);
+
+// src/defaultComponents.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultTypes = {
+  doc: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }),
+  paragraph: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children }),
+  heading: ({ node, children }) => {
+    const level = node.attrs?.level || 1;
+    const Tag = `h${level}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { children });
+  },
+  blockquote: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("blockquote", { children }),
+  bulletList: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children }),
+  orderedList: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { children }),
+  listItem: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children }),
+  codeBlock: ({ node, children }) => {
+    const language = node.attrs?.language;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: language ? `language-${language}` : "", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children }) });
+  },
+  horizontalRule: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", {}),
+  hardBreak: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+  image: ({ node }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "img",
+      {
+        src: node.attrs?.src,
+        alt: node.attrs?.alt || "",
+        title: node.attrs?.title || ""
+      }
+    );
+  }
+};
+var defaultMarks = {
+  bold: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children }),
+  italic: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("em", { children }),
+  strike: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("s", { children }),
+  code: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children }),
+  underline: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("u", { children }),
+  link: ({ mark, children }) => {
+    const { href, target, rel } = mark.attrs || {};
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href, target, rel: rel || (target === "_blank" ? "noopener noreferrer" : void 0), children });
+  }
+};
+
+// src/KyroRichTextRenderer.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var KyroRichTextRenderer = ({ content, components = {} }) => {
+  const mergedTypes = (0, import_react.useMemo)(
+    () => ({ ...defaultTypes, ...components.types }),
+    [components.types]
+  );
+  const mergedMarks = (0, import_react.useMemo)(
+    () => ({ ...defaultMarks, ...components.marks }),
+    [components.marks]
+  );
+  const renderNode = (node, index) => {
+    if (node.type === "text") {
+      let element = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.default.Fragment, { children: node.text }, index);
+      if (node.marks && node.marks.length > 0) {
+        const marks = [...node.marks].reverse();
+        marks.forEach((mark, markIndex) => {
+          const MarkComponent = mergedMarks[mark.type];
+          if (MarkComponent) {
+            element = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MarkComponent, { mark, children: element }, `${index}-${markIndex}`);
+          }
+        });
+      }
+      return element;
+    }
+    if (node.type) {
+      const NodeComponent = mergedTypes[node.type];
+      let children = null;
+      if (node.content && node.content.length > 0) {
+        children = node.content.map((child, childIndex) => renderNode(child, childIndex));
+      }
+      if (NodeComponent) {
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NodeComponent, { node, children }, index);
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.default.Fragment, { children }, index);
+    }
+    return null;
+  };
+  if (!content) return null;
+  if (Array.isArray(content)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: content.map((node, index) => renderNode(node, index)) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: renderNode(content, 0) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  KyroRichTextRenderer,
+  defaultMarks,
+  defaultTypes
+});

package/dist/index.d.cts

@@ -0,0 +1,40 @@
+import React$1 from 'react';
+
+interface JSONContent {
+    type?: string;
+    attrs?: Record<string, any>;
+    content?: JSONContent[];
+    marks?: {
+        type: string;
+        attrs?: Record<string, any>;
+        [key: string]: any;
+    }[];
+    text?: string;
+    [key: string]: any;
+}
+type CustomComponentProps = {
+    node: JSONContent;
+    children?: React.ReactNode;
+};
+type MarkComponentProps = {
+    mark: {
+        type: string;
+        attrs?: Record<string, any>;
+    };
+    children?: React.ReactNode;
+};
+interface KyroRichTextComponents {
+    types?: Record<string, React.ComponentType<CustomComponentProps>>;
+    marks?: Record<string, React.ComponentType<MarkComponentProps>>;
+}
+
+interface KyroRichTextRendererProps {
+    content: JSONContent | JSONContent[];
+    components?: KyroRichTextComponents;
+}
+declare const KyroRichTextRenderer: React$1.FC<KyroRichTextRendererProps>;
+
+declare const defaultTypes: Record<string, React$1.ComponentType<CustomComponentProps>>;
+declare const defaultMarks: Record<string, React$1.ComponentType<MarkComponentProps>>;
+
+export { type CustomComponentProps, type JSONContent, type KyroRichTextComponents, KyroRichTextRenderer, type MarkComponentProps, defaultMarks, defaultTypes };

package/dist/index.d.ts

@@ -0,0 +1,40 @@
+import React$1 from 'react';
+
+interface JSONContent {
+    type?: string;
+    attrs?: Record<string, any>;
+    content?: JSONContent[];
+    marks?: {
+        type: string;
+        attrs?: Record<string, any>;
+        [key: string]: any;
+    }[];
+    text?: string;
+    [key: string]: any;
+}
+type CustomComponentProps = {
+    node: JSONContent;
+    children?: React.ReactNode;
+};
+type MarkComponentProps = {
+    mark: {
+        type: string;
+        attrs?: Record<string, any>;
+    };
+    children?: React.ReactNode;
+};
+interface KyroRichTextComponents {
+    types?: Record<string, React.ComponentType<CustomComponentProps>>;
+    marks?: Record<string, React.ComponentType<MarkComponentProps>>;
+}
+
+interface KyroRichTextRendererProps {
+    content: JSONContent | JSONContent[];
+    components?: KyroRichTextComponents;
+}
+declare const KyroRichTextRenderer: React$1.FC<KyroRichTextRendererProps>;
+
+declare const defaultTypes: Record<string, React$1.ComponentType<CustomComponentProps>>;
+declare const defaultMarks: Record<string, React$1.ComponentType<MarkComponentProps>>;
+
+export { type CustomComponentProps, type JSONContent, type KyroRichTextComponents, KyroRichTextRenderer, type MarkComponentProps, defaultMarks, defaultTypes };

package/dist/index.js

@@ -0,0 +1,95 @@
+// src/KyroRichTextRenderer.tsx
+import React, { useMemo } from "react";
+
+// src/defaultComponents.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var defaultTypes = {
+  doc: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+  paragraph: ({ children }) => /* @__PURE__ */ jsx("p", { children }),
+  heading: ({ node, children }) => {
+    const level = node.attrs?.level || 1;
+    const Tag = `h${level}`;
+    return /* @__PURE__ */ jsx(Tag, { children });
+  },
+  blockquote: ({ children }) => /* @__PURE__ */ jsx("blockquote", { children }),
+  bulletList: ({ children }) => /* @__PURE__ */ jsx("ul", { children }),
+  orderedList: ({ children }) => /* @__PURE__ */ jsx("ol", { children }),
+  listItem: ({ children }) => /* @__PURE__ */ jsx("li", { children }),
+  codeBlock: ({ node, children }) => {
+    const language = node.attrs?.language;
+    return /* @__PURE__ */ jsx("pre", { className: language ? `language-${language}` : "", children: /* @__PURE__ */ jsx("code", { children }) });
+  },
+  horizontalRule: () => /* @__PURE__ */ jsx("hr", {}),
+  hardBreak: () => /* @__PURE__ */ jsx("br", {}),
+  image: ({ node }) => {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: node.attrs?.src,
+        alt: node.attrs?.alt || "",
+        title: node.attrs?.title || ""
+      }
+    );
+  }
+};
+var defaultMarks = {
+  bold: ({ children }) => /* @__PURE__ */ jsx("strong", { children }),
+  italic: ({ children }) => /* @__PURE__ */ jsx("em", { children }),
+  strike: ({ children }) => /* @__PURE__ */ jsx("s", { children }),
+  code: ({ children }) => /* @__PURE__ */ jsx("code", { children }),
+  underline: ({ children }) => /* @__PURE__ */ jsx("u", { children }),
+  link: ({ mark, children }) => {
+    const { href, target, rel } = mark.attrs || {};
+    return /* @__PURE__ */ jsx("a", { href, target, rel: rel || (target === "_blank" ? "noopener noreferrer" : void 0), children });
+  }
+};
+
+// src/KyroRichTextRenderer.tsx
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+var KyroRichTextRenderer = ({ content, components = {} }) => {
+  const mergedTypes = useMemo(
+    () => ({ ...defaultTypes, ...components.types }),
+    [components.types]
+  );
+  const mergedMarks = useMemo(
+    () => ({ ...defaultMarks, ...components.marks }),
+    [components.marks]
+  );
+  const renderNode = (node, index) => {
+    if (node.type === "text") {
+      let element = /* @__PURE__ */ jsx2(React.Fragment, { children: node.text }, index);
+      if (node.marks && node.marks.length > 0) {
+        const marks = [...node.marks].reverse();
+        marks.forEach((mark, markIndex) => {
+          const MarkComponent = mergedMarks[mark.type];
+          if (MarkComponent) {
+            element = /* @__PURE__ */ jsx2(MarkComponent, { mark, children: element }, `${index}-${markIndex}`);
+          }
+        });
+      }
+      return element;
+    }
+    if (node.type) {
+      const NodeComponent = mergedTypes[node.type];
+      let children = null;
+      if (node.content && node.content.length > 0) {
+        children = node.content.map((child, childIndex) => renderNode(child, childIndex));
+      }
+      if (NodeComponent) {
+        return /* @__PURE__ */ jsx2(NodeComponent, { node, children }, index);
+      }
+      return /* @__PURE__ */ jsx2(React.Fragment, { children }, index);
+    }
+    return null;
+  };
+  if (!content) return null;
+  if (Array.isArray(content)) {
+    return /* @__PURE__ */ jsx2(Fragment2, { children: content.map((node, index) => renderNode(node, index)) });
+  }
+  return /* @__PURE__ */ jsx2(Fragment2, { children: renderNode(content, 0) });
+};
+export {
+  KyroRichTextRenderer,
+  defaultMarks,
+  defaultTypes
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@kyro-cms/kyro-rich-text-react",
+  "version": "0.12.15",
+  "description": "React renderer for Kyro CMS Tiptap rich text content",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "pnpm build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/danielDozie/kyro-cms"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^18.0.0",
+    "jsdom": "^29.1.1",
+    "react": "^18.0.0",
+    "react-dom": "18.3.1",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^4.1.9"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}