@clepit/react 0.2.0 → 0.2.1-beta.350

package/README.md

@@ -1,18 +1,16 @@
 # @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).
+React components for the [Clepit](https://clepit.com) block-style editor. `ClepitContent` renders saved documents to finished HTML on the server, so crawlers see real markup and nothing repaints on mount. `ClepitEditor` is the client-only editing component that owns the `Editor.create` lifecycle.
 
 ## Install
 
-```bash
+```sh
 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.
+## Quick start
 
 ```tsx
 import { ClepitContent } from '@clepit/react';
@@ -20,34 +18,24 @@ 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'
-  />
-);
+export const Compose = ({ initialData, onSave }) => <ClepitEditor initialData={initialData} onChange={onSave} />;
 ```
 
-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.
+## Documentation
+
+The full documentation lives at [clepit.com/docs](https://clepit.com/docs) and is rendered with these components:
+
+- [React components](https://clepit.com/docs/react)
+- [Getting started](https://clepit.com/docs/getting-started)
+- [Block types](https://clepit.com/docs/blocks)
+- [Theming](https://clepit.com/docs/themes)
+- [API reference](https://clepit.com/docs/api)
 
 ## License
 
-MIT
+MIT.

package/dist/editor.cjs

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

package/dist/editor.js

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

package/package.json

@@ -1,15 +1,16 @@
 {
-  "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",
+  "author": "Bomdisoft",
+  "description": "React components for the Clepit block-style editor: server-first content rendering and a client-only editor component",
   "devDependencies": {
     "@bomdisoft/typescript-config": "0.0.0",
-    "@clepit/core": "0.3.0",
-    "@happy-dom/global-registrator": "^20.10.3",
+    "@clepit/core": "0.5.0",
+    "@happy-dom/global-registrator": "^20.11.6",
     "@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",
+    "@types/bun": "^1.4.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "tsup": "8.5.1",
     "typescript": "^6.0.3"
   },
@@ -28,12 +29,13 @@
   },
   "files": ["dist", "!dist/**/*.map"],
   "homepage": "https://clepit.com",
+  "keywords": ["clepit", "react", "editor", "block-editor", "block-style editor", "rich-text", "ssr", "server-components", "renderer", "editorjs"],
   "license": "MIT",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "name": "@clepit/react",
   "peerDependencies": {
-    "@clepit/core": "^0.3.0",
+    "@clepit/core": "^0.5.0",
     "react": ">=19"
   },
   "publishConfig": {
@@ -52,5 +54,5 @@
   "sideEffects": false,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.2.0"
+  "version": "0.2.1-beta.350"
 }