@clepit/react 0.2.0-beta.324

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bomdisoft
+
+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

@@ -0,0 +1,53 @@
+# @clepit/react
+
+React adapter for the [Clepit](https://clepit.com) editor. [`@clepit/core`](https://www.npmjs.com/package/@clepit/core) already draws documents with or without a browser; this package adds only what React itself needs: a server-first content component that emits finished HTML during SSR, and a client-only editor component that owns the `Editor.create` lifecycle (effect timing, StrictMode-safe teardown).
+
+## Install
+
+```bash
+bun add @clepit/core @clepit/react
+```
+
+`react >= 19` and `@clepit/core` are peer dependencies.
+
+## Display content
+
+`ClepitContent` renders a document to finished HTML through `renderBlocks`, so it works in Server Components, during SSR inside `'use client'` pages, and in the browser. The markup is in the initial response: crawlers read it, and nothing repaints on mount.
+
+```tsx
+import { ClepitContent } from '@clepit/react';
+
+export const Article = ({ document }) => <ClepitContent data={document} />;
+```
+
+The core stylesheet rides along as a hoisted `<style>` tag, deduplicated across instances by React. Interactive blocks come alive after mount through `activateBlocks` from `@clepit/core`: code variant tabs, language sync and the copy button, openapi response tabs, and the table CSV download all work on the server-rendered markup, and only the interactive blocks' data crosses to the browser. Optional props:
+
+- `theme`: `'auto' | 'light' | 'dark'` (default `'auto'`)
+- `themeOverrides`: `{ light?, dark? }` token overrides, emitted as a scoped stylesheet
+- `context`: `docHref` for doc-card links, `mapsEmbedKey` for map embeds, `activeVariant` for code blocks
+- `transformHtml`: pure post-processing of the rendered HTML string, e.g. injecting anchor ids
+- `className`, `testId`
+
+## Edit content
+
+`ClepitEditor` is client-only and lives on its own subpath so importing the display component never pulls editing code into a server bundle.
+
+```tsx
+'use client';
+
+import { ClepitEditor } from '@clepit/react/editor';
+
+export const Compose = ({ initialData, onSave }) => (
+  <ClepitEditor
+    initialData={initialData}
+    onChange={data => onSave(data)}
+    placeholder='Start writing'
+  />
+);
+```
+
+Props are `EditorConfig` from `@clepit/core` minus `containerId` (the component renders its own holder element), plus `id`, `className`, `testId`, and `onApi`, which receives the `EditorAPI` returned by `Editor.create`. The editor is uncontrolled: value fields are read once at mount, callbacks always see the latest render's props, and unmounting destroys the instance.
+
+## License
+
+MIT

package/dist/content-shell.cjs

@@ -0,0 +1,3 @@
+'use client';
+"use strict";"use client";var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var r in t)c(e,r,{get:t[r],enumerable:!0})},h=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of d(t))!m.call(e,n)&&n!==r&&c(e,n,{get:()=>t[n],enumerable:!(s=f(t,n))||s.enumerable});return e};var k=e=>h(c({},"__esModule",{value:!0}),e);var y={};g(y,{ContentShell:()=>S});module.exports=k(y);var p=require("@clepit/core"),o=require("react"),u=require("react/jsx-runtime"),S=({blocks:e,className:t,html:r,testId:s,theme:n})=>{let l=(0,o.useRef)(null),a=JSON.stringify(e);return(0,o.useEffect)(()=>{if(!l.current||!r)return;let i=JSON.parse(a);if(i.length!==0)return(0,p.activateBlocks)(l.current,i)},[r,a]),(0,u.jsx)("div",{className:t,dangerouslySetInnerHTML:{__html:r},"data-clepit-theme":n,"data-testid":s,ref:l})};0&&(module.exports={ContentShell});
+//# sourceMappingURL=content-shell.cjs.map

package/dist/content-shell.d.cts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { Block } from '@clepit/core';
+
+type ContentShellProps = {
+    blocks: Block[];
+    className: string;
+    html: string;
+    testId?: string;
+    theme: 'auto' | 'light' | 'dark';
+};
+/**
+ * The client half of `ClepitContent`: renders the finished HTML and, once a
+ * browser exists, wires the behaviors the markup deliberately leaves out
+ * (code tabs and clipboard, openapi response tabs, table CSV download).
+ * Without JavaScript the markup stays fully readable; this only adds the
+ * interactions.
+ */
+declare const ContentShell: ({ blocks, className, html, testId, theme }: ContentShellProps) => react.JSX.Element;
+
+export { ContentShell, type ContentShellProps };

package/dist/content-shell.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { Block } from '@clepit/core';
+
+type ContentShellProps = {
+    blocks: Block[];
+    className: string;
+    html: string;
+    testId?: string;
+    theme: 'auto' | 'light' | 'dark';
+};
+/**
+ * The client half of `ClepitContent`: renders the finished HTML and, once a
+ * browser exists, wires the behaviors the markup deliberately leaves out
+ * (code tabs and clipboard, openapi response tabs, table CSV download).
+ * Without JavaScript the markup stays fully readable; this only adds the
+ * interactions.
+ */
+declare const ContentShell: ({ blocks, className, html, testId, theme }: ContentShellProps) => react.JSX.Element;
+
+export { ContentShell, type ContentShellProps };

package/dist/content-shell.js

@@ -0,0 +1,3 @@
+'use client';
+"use client";import{activateBlocks as a}from"@clepit/core";import{useEffect as i,useRef as p}from"react";import{jsx as u}from"react/jsx-runtime";var m=({blocks:s,className:o,html:t,testId:l,theme:c})=>{let e=p(null),r=JSON.stringify(s);return i(()=>{if(!e.current||!t)return;let n=JSON.parse(r);if(n.length!==0)return a(e.current,n)},[t,r]),u("div",{className:o,dangerouslySetInnerHTML:{__html:t},"data-clepit-theme":c,"data-testid":l,ref:e})};export{m as ContentShell};
+//# sourceMappingURL=content-shell.js.map

package/dist/editor.cjs

@@ -0,0 +1,3 @@
+'use client';
+"use strict";"use client";var s=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var E=(r,o)=>{for(var d in o)s(r,d,{get:o[d],enumerable:!0})},P=(r,o,d,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of v(o))!I.call(r,t)&&t!==d&&s(r,t,{get:()=>o[t],enumerable:!(l=U(o,t))||l.enumerable});return r};var C=r=>P(s({},"__esModule",{value:!0}),r);var R={};E(R,{ClepitEditor:()=>y});module.exports=C(R);var p=require("@clepit/core"),a=require("react"),u=require("react/jsx-runtime"),y=({className:r,id:o,onApi:d,testId:l,...t})=>{let f=(0,a.useId)(),c=o??`clepit-editor-${f.replace(/[^a-zA-Z0-9_-]/g,"")}`,n=(0,a.useRef)({config:t,onApi:d});return n.current={config:t,onApi:d},(0,a.useEffect)(()=>{let i=n.current.config,g=p.Editor.create({...i,audioUploader:i.audioUploader?e=>n.current.config.audioUploader?.(e)??Promise.resolve(""):void 0,containerId:c,fileUploader:i.fileUploader?e=>n.current.config.fileUploader?.(e)??Promise.resolve(""):void 0,imageUploader:i.imageUploader?e=>n.current.config.imageUploader?.(e)??Promise.resolve(""):void 0,onChange:i.onChange?e=>n.current.config.onChange?.(e):void 0,onInlineRewrite:i.onInlineRewrite?(e,m)=>n.current.config.onInlineRewrite?.(e,m)??Promise.resolve(null):void 0,onLocaleFallback:i.onLocaleFallback?e=>n.current.config.onLocaleFallback?.(e):void 0,onReady:i.onReady?()=>n.current.config.onReady?.():void 0,videoUploader:i.videoUploader?e=>n.current.config.videoUploader?.(e)??Promise.resolve(""):void 0});return n.current.onApi?.(g),()=>p.Editor.destroy(c)},[c]),(0,u.jsx)("div",{className:r,"data-testid":l,id:c})};0&&(module.exports={ClepitEditor});
+//# sourceMappingURL=editor.cjs.map

package/dist/editor.d.cts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { EditorConfig, EditorAPI } from '@clepit/core';
+
+type ClepitEditorProps = Omit<EditorConfig, 'containerId'> & {
+    className?: string;
+    /** The container element's DOM id. Generated when omitted. */
+    id?: string;
+    /** Receives the `EditorAPI` returned by `Editor.create` once the editor is mounted. */
+    onApi?: (api: EditorAPI) => void;
+    testId?: string;
+};
+/**
+ * The Clepit editor as a React component: renders the holder element and owns
+ * the `Editor.create` / `Editor.destroy` lifecycle.
+ *
+ * The editor is uncontrolled. Value fields (`initialData`, `placeholder`,
+ * labels, theming) are read once at mount; callbacks always invoke the latest
+ * prop, so a re-render never tears down editing state. StrictMode's doubled
+ * effect is safe: `Editor.create` destroys any instance in its container
+ * first, and the cleanup destroy is symmetric.
+ */
+declare const ClepitEditor: ({ className, id, onApi, testId, ...config }: ClepitEditorProps) => react.JSX.Element;
+
+export { ClepitEditor, type ClepitEditorProps };

package/dist/editor.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { EditorConfig, EditorAPI } from '@clepit/core';
+
+type ClepitEditorProps = Omit<EditorConfig, 'containerId'> & {
+    className?: string;
+    /** The container element's DOM id. Generated when omitted. */
+    id?: string;
+    /** Receives the `EditorAPI` returned by `Editor.create` once the editor is mounted. */
+    onApi?: (api: EditorAPI) => void;
+    testId?: string;
+};
+/**
+ * The Clepit editor as a React component: renders the holder element and owns
+ * the `Editor.create` / `Editor.destroy` lifecycle.
+ *
+ * The editor is uncontrolled. Value fields (`initialData`, `placeholder`,
+ * labels, theming) are read once at mount; callbacks always invoke the latest
+ * prop, so a re-render never tears down editing state. StrictMode's doubled
+ * effect is safe: `Editor.create` destroys any instance in its container
+ * first, and the cleanup destroy is symmetric.
+ */
+declare const ClepitEditor: ({ className, id, onApi, testId, ...config }: ClepitEditorProps) => react.JSX.Element;
+
+export { ClepitEditor, type ClepitEditorProps };

package/dist/editor.js

@@ -0,0 +1,3 @@
+'use client';
+"use client";import{Editor as d}from"@clepit/core";import{useEffect as f,useId as g,useRef as m}from"react";import{jsx as U}from"react/jsx-runtime";var E=({className:a,id:l,onApi:i,testId:c,...t})=>{let s=g(),r=l??`clepit-editor-${s.replace(/[^a-zA-Z0-9_-]/g,"")}`,o=m({config:t,onApi:i});return o.current={config:t,onApi:i},f(()=>{let n=o.current.config,p=d.create({...n,audioUploader:n.audioUploader?e=>o.current.config.audioUploader?.(e)??Promise.resolve(""):void 0,containerId:r,fileUploader:n.fileUploader?e=>o.current.config.fileUploader?.(e)??Promise.resolve(""):void 0,imageUploader:n.imageUploader?e=>o.current.config.imageUploader?.(e)??Promise.resolve(""):void 0,onChange:n.onChange?e=>o.current.config.onChange?.(e):void 0,onInlineRewrite:n.onInlineRewrite?(e,u)=>o.current.config.onInlineRewrite?.(e,u)??Promise.resolve(null):void 0,onLocaleFallback:n.onLocaleFallback?e=>o.current.config.onLocaleFallback?.(e):void 0,onReady:n.onReady?()=>o.current.config.onReady?.():void 0,videoUploader:n.videoUploader?e=>o.current.config.videoUploader?.(e)??Promise.resolve(""):void 0});return o.current.onApi?.(p),()=>d.destroy(r)},[r]),U("div",{className:a,"data-testid":c,id:r})};export{E as ClepitEditor};
+//# sourceMappingURL=editor.js.map

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";var h=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var I=(e,n)=>{for(var t in n)h(e,t,{get:n[t],enumerable:!0})},S=(e,n,t,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of $(n))!x.call(e,s)&&s!==t&&h(e,s,{get:()=>n[s],enumerable:!(a=B(n,s))||a.enumerable});return e};var v=e=>S(h({},"__esModule",{value:!0}),e);var A={};I(A,{ClepitContent:()=>w});module.exports=v(A);var C=require("./content-shell.cjs"),l=require("@clepit/core"),o=require("react/jsx-runtime"),D=e=>{let n=2166136261;for(let t=0;t<e.length;t++)n^=e.charCodeAt(t),n=Math.imul(n,16777619);return(n>>>0).toString(36)},E=new Set(["code","openapi","table"]),m=(e,n)=>e.map((t,a)=>{let s=`${n}-${a}`,r=t;return t.type==="collapsible"&&(r={...t,data:{...t.data,children:m(t.data.children??[],s)}}),t.type==="columns"&&(r={...t,data:{...t.data,columns:t.data.columns.map((i,c)=>m(i,`${s}-${c}`))}}),r.id?r:{...r,id:`clepit-anon-${s}`}}),y=e=>E.has(e.type)?!0:e.type==="collapsible"?(e.data.children??[]).some(y):e.type==="columns"?e.data.columns.some(n=>n.some(y)):!1,w=({className:e,context:n,data:t,testId:a,theme:s="auto",themeOverrides:r,transformHtml:i})=>{let c=m(Array.isArray(t?.blocks)?t.blocks:[],"cb"),u=(0,l.renderBlocks)(c,n),T=i?i(u):u,d="",p="";if(r){let f=r.light??{},g=r.dark??{};p=`clepit-ov-${D((0,l.tokensToLightDarkBlock)(f,g,"&"))}`,d=(0,l.tokensToLightDarkBlock)(f,g,`.${p}`)}let k=["clepit-renderer-content",p,e].filter(Boolean).join(" ");return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("style",{href:"clepit-core-stylesheet",precedence:"clepit",children:(0,l.pageStylesheet)()}),d?(0,o.jsx)("style",{href:`clepit-overrides-${p}`,precedence:"clepit",children:d}):null,(0,o.jsx)(C.ContentShell,{blocks:c.filter(y),className:k,html:T,testId:a,theme:s})]})};0&&(module.exports={ClepitContent});
+//# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { EditorData, DrawContext, ThemeTokens } from '@clepit/core';
+
+type ClepitContentProps = {
+    data: EditorData;
+    className?: string;
+    /** Passed through to `renderBlocks`: `docHref` for doc-card links, `mapsEmbedKey` for map embeds, `activeVariant` for code blocks. */
+    context?: DrawContext;
+    testId?: string;
+    theme?: 'auto' | 'light' | 'dark';
+    themeOverrides?: {
+        light?: ThemeTokens;
+        dark?: ThemeTokens;
+    };
+    /** Post-processes the rendered HTML string before it is emitted, e.g. to
+     *  inject anchor ids. Must be pure: it runs on the server and again during
+     *  hydration, and the two results must match. */
+    transformHtml?: (html: string) => string;
+};
+declare const ClepitContent: ({ className, context, data, testId, theme, themeOverrides, transformHtml }: ClepitContentProps) => react.JSX.Element;
+
+export { ClepitContent, type ClepitContentProps };

package/dist/index.js

@@ -0,0 +1,2 @@
+import{ContentShell as T}from"./content-shell.js";import{pageStylesheet as k,renderBlocks as B,tokensToLightDarkBlock as f}from"@clepit/core";import{Fragment as I,jsx as p,jsxs as S}from"react/jsx-runtime";var $=e=>{let n=2166136261;for(let t=0;t<e.length;t++)n^=e.charCodeAt(t),n=Math.imul(n,16777619);return(n>>>0).toString(36)},x=new Set(["code","openapi","table"]),d=(e,n)=>e.map((t,i)=>{let r=`${n}-${i}`,s=t;return t.type==="collapsible"&&(s={...t,data:{...t.data,children:d(t.data.children??[],r)}}),t.type==="columns"&&(s={...t,data:{...t.data,columns:t.data.columns.map((o,l)=>d(o,`${r}-${l}`))}}),s.id?s:{...s,id:`clepit-anon-${r}`}}),h=e=>x.has(e.type)?!0:e.type==="collapsible"?(e.data.children??[]).some(h):e.type==="columns"?e.data.columns.some(n=>n.some(h)):!1,w=({className:e,context:n,data:t,testId:i,theme:r="auto",themeOverrides:s,transformHtml:o})=>{let l=d(Array.isArray(t?.blocks)?t.blocks:[],"cb"),m=B(l,n),g=o?o(m):m,c="",a="";if(s){let y=s.light??{},u=s.dark??{};a=`clepit-ov-${$(f(y,u,"&"))}`,c=f(y,u,`.${a}`)}let C=["clepit-renderer-content",a,e].filter(Boolean).join(" ");return S(I,{children:[p("style",{href:"clepit-core-stylesheet",precedence:"clepit",children:k()}),c?p("style",{href:`clepit-overrides-${a}`,precedence:"clepit",children:c}):null,p(T,{blocks:l.filter(h),className:C,html:g,testId:i,theme:r})]})};export{w as ClepitContent};
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,56 @@
+{
+  "description": "React adapter for the Clepit editor: a server-first content component that emits finished HTML during SSR, and a client-only editor component that owns the Editor.create lifecycle",
+  "devDependencies": {
+    "@bomdisoft/typescript-config": "0.0.0",
+    "@clepit/core": "0.3.0",
+    "@happy-dom/global-registrator": "^20.10.3",
+    "@testing-library/react": "^16.3.2",
+    "@types/bun": "^1.3.14",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "tsup": "8.5.1",
+    "typescript": "^6.0.3"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./editor": {
+      "import": "./dist/editor.js",
+      "require": "./dist/editor.cjs",
+      "types": "./dist/editor.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": ["dist", "!dist/**/*.map"],
+  "homepage": "https://clepit.com",
+  "license": "MIT",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "name": "@clepit/react",
+  "peerDependencies": {
+    "@clepit/core": "^0.3.0",
+    "react": ">=19"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "format": "biome format --write .",
+    "format:check": "biome format --check .",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "test:unit": "bun test --pass-with-no-tests",
+    "typecheck": "tsc --noEmit"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "version": "0.2.0-beta.324"
+}