@wizeworks/silicaui-editor 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 WizeWorks
+
+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,55 @@
+# @wizeworks/silicaui-editor
+
+Silica UI's `<RichTextEditor>` — [TipTap](https://tiptap.dev/) wrapped with a
+Silica-styled formatting toolbar and content surface. Controlled or
+uncontrolled, HTML in and out.
+
+[![Website](https://img.shields.io/badge/website-silicaui.com-8b5cf6?style=flat-square)](https://silicaui.com)
+[![npm version](https://img.shields.io/npm/v/@wizeworks/silicaui-editor.svg?style=flat-square)](https://www.npmjs.com/package/@wizeworks/silicaui-editor)
+[![npm downloads](https://img.shields.io/npm/dm/@wizeworks/silicaui-editor.svg?style=flat-square)](https://www.npmjs.com/package/@wizeworks/silicaui-editor)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/@wizeworks/silicaui-editor?style=flat-square)](https://bundlephobia.com/package/@wizeworks/silicaui-editor)
+[![license](https://img.shields.io/npm/l/@wizeworks/silicaui-editor.svg?style=flat-square)](https://github.com/silicaui/silicaui/blob/main/LICENSE)
+[![CI](https://img.shields.io/github/actions/workflow/status/silicaui/silicaui/ci.yml?branch=main&style=flat-square&label=CI)](https://github.com/silicaui/silicaui/actions/workflows/ci.yml)
+
+## Install
+
+```bash
+pnpm add @wizeworks/silicaui-editor @wizeworks/silicaui-react
+pnpm add -D @wizeworks/silicaui tailwindcss
+```
+
+## Usage
+
+```tsx
+import { RichTextEditor } from "@wizeworks/silicaui-editor";
+
+const [html, setHtml] = React.useState("<p>Hello world</p>");
+
+<RichTextEditor value={html} onValueChange={setHtml} placeholder="Write something…" />
+```
+
+Ships with `StarterKit`, link, and placeholder extensions preconfigured.
+
+## `<RichTextEditor>` props
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `value` | `string` — controlled HTML value | — |
+| `defaultValue` | `string` — uncontrolled initial HTML | — |
+| `onValueChange` | `(html: string) => void` — fires with the editor's HTML on every change | — |
+| `placeholder` | `string` — empty-state placeholder text | — |
+| `editable` | `boolean` | `true` |
+| `toolbar` | `boolean` — show the formatting toolbar | `true` |
+| `contentClassName` | `string` — class for the editable content surface | — |
+
+Also re-exports TipTap's `useEditor`, `EditorContent`, and `Editor` (plus
+`EditorOptions`), so you can extend the editor — add extensions, drive
+commands imperatively — without a separate TipTap install.
+
+## Links
+
+- [silicaui.com](https://silicaui.com) — website & docs
+
+- [GitHub repo](https://github.com/silicaui/silicaui)
+- [Issues](https://github.com/silicaui/silicaui/issues)
+- [`@wizeworks/silicaui-react`](https://www.npmjs.com/package/@wizeworks/silicaui-react) — the component layer this package extends

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export { Editor, EditorContent, EditorOptions, useEditor } from '@tiptap/react';
+
+interface RichTextEditorProps {
+    /** Controlled HTML value. */
+    value?: string;
+    /** Uncontrolled initial HTML. */
+    defaultValue?: string;
+    /** Fires with the editor's HTML on every change. */
+    onValueChange?: (html: string) => void;
+    /** Empty-state placeholder text. */
+    placeholder?: string;
+    /** Allow editing. Default `true`. */
+    editable?: boolean;
+    /** Show the formatting toolbar. Default `true`. */
+    toolbar?: boolean;
+    className?: string;
+    /** Class for the editable content surface. */
+    contentClassName?: string;
+}
+/**
+ * RichTextEditor — a TipTap editor with a Silica-styled toolbar and content
+ * surface. Emits HTML via `onValueChange`; control it with `value` or run
+ * uncontrolled with `defaultValue`. StarterKit + Link + Placeholder are wired in;
+ * drop `toolbar={false}` for a bare editable surface.
+ */
+declare function RichTextEditor({ value, defaultValue, onValueChange, placeholder, editable, toolbar, className, contentClassName, }: RichTextEditorProps): React.JSX.Element;
+
+export { RichTextEditor, type RichTextEditorProps };

package/dist/index.js

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+export { Editor, EditorContent, useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Link from '@tiptap/extension-link';
+import Placeholder from '@tiptap/extension-placeholder';
+import { useSilicaClass, cx } from '@wizeworks/silicaui-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/rich-text-editor.tsx
+var icons = {
+  bulletList: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M8 6h13M8 12h13M8 18h13" }),
+    /* @__PURE__ */ jsx("circle", { cx: "3.5", cy: "6", r: "1.2", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "3.5", cy: "12", r: "1.2", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "3.5", cy: "18", r: "1.2", fill: "currentColor", stroke: "none" })
+  ] }),
+  orderedList: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M10 6h11M10 12h11M10 18h11M4 4v4M3 8h2M3 16h2a1 1 0 0 1 0 2H3a1 1 0 0 0 0 2h2" }) }),
+  quote: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", children: /* @__PURE__ */ jsx("path", { d: "M7 7H4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h2v1a2 2 0 0 1-2 2H3v2h1a4 4 0 0 0 4-4V9a2 2 0 0 0-1-2Zm11 0h-3a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h2v1a2 2 0 0 1-2 2h-1v2h1a4 4 0 0 0 4-4V9a2 2 0 0 0-1-2Z" }) }),
+  code: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m8 8-4 4 4 4M16 8l4 4-4 4M13 5l-2 14" }) }),
+  link: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1" })
+  ] }),
+  undo: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 14 4 9l5-5" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 9h11a5 5 0 0 1 0 10h-1" })
+  ] }),
+  redo: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "m15 14 5-5-5-5" }),
+    /* @__PURE__ */ jsx("path", { d: "M20 9H9a5 5 0 0 0 0 10h1" })
+  ] })
+};
+function Toolbar({ editor }) {
+  const sc = useSilicaClass();
+  const Btn = ({ onClick, active, disabled, title, children }) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cx(sc("rich-text-editor-btn")),
+      "data-active": active || void 0,
+      disabled,
+      title,
+      "aria-label": title,
+      "aria-pressed": active || void 0,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick,
+      children
+    }
+  );
+  const sep = /* @__PURE__ */ jsx("span", { className: cx(sc("rich-text-editor-sep")), "aria-hidden": "true" });
+  const setLink = () => {
+    const prev = editor.getAttributes("link").href;
+    const url = window.prompt("Link URL", prev ?? "");
+    if (url === null) return;
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      return;
+    }
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx(sc("rich-text-editor-toolbar")), role: "toolbar", "aria-label": "Formatting", children: [
+    /* @__PURE__ */ jsx(Btn, { title: "Bold", active: editor.isActive("bold"), onClick: () => editor.chain().focus().toggleBold().run(), children: /* @__PURE__ */ jsx("span", { style: { fontWeight: 800 }, children: "B" }) }),
+    /* @__PURE__ */ jsx(Btn, { title: "Italic", active: editor.isActive("italic"), onClick: () => editor.chain().focus().toggleItalic().run(), children: /* @__PURE__ */ jsx("span", { style: { fontStyle: "italic", fontFamily: "Georgia, serif" }, children: "I" }) }),
+    /* @__PURE__ */ jsx(Btn, { title: "Strikethrough", active: editor.isActive("strike"), onClick: () => editor.chain().focus().toggleStrike().run(), children: /* @__PURE__ */ jsx("span", { style: { textDecoration: "line-through" }, children: "S" }) }),
+    sep,
+    /* @__PURE__ */ jsx(Btn, { title: "Heading 1", active: editor.isActive("heading", { level: 1 }), onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), children: "H1" }),
+    /* @__PURE__ */ jsx(Btn, { title: "Heading 2", active: editor.isActive("heading", { level: 2 }), onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), children: "H2" }),
+    sep,
+    /* @__PURE__ */ jsx(Btn, { title: "Bullet list", active: editor.isActive("bulletList"), onClick: () => editor.chain().focus().toggleBulletList().run(), children: icons.bulletList }),
+    /* @__PURE__ */ jsx(Btn, { title: "Ordered list", active: editor.isActive("orderedList"), onClick: () => editor.chain().focus().toggleOrderedList().run(), children: icons.orderedList }),
+    sep,
+    /* @__PURE__ */ jsx(Btn, { title: "Quote", active: editor.isActive("blockquote"), onClick: () => editor.chain().focus().toggleBlockquote().run(), children: icons.quote }),
+    /* @__PURE__ */ jsx(Btn, { title: "Code block", active: editor.isActive("codeBlock"), onClick: () => editor.chain().focus().toggleCodeBlock().run(), children: icons.code }),
+    /* @__PURE__ */ jsx(Btn, { title: "Link", active: editor.isActive("link"), onClick: setLink, children: icons.link }),
+    sep,
+    /* @__PURE__ */ jsx(Btn, { title: "Undo", disabled: !editor.can().undo(), onClick: () => editor.chain().focus().undo().run(), children: icons.undo }),
+    /* @__PURE__ */ jsx(Btn, { title: "Redo", disabled: !editor.can().redo(), onClick: () => editor.chain().focus().redo().run(), children: icons.redo })
+  ] });
+}
+function RichTextEditor({
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder = "Write something\u2026",
+  editable = true,
+  toolbar = true,
+  className,
+  contentClassName
+}) {
+  const sc = useSilicaClass();
+  const editor = useEditor({
+    editable,
+    immediatelyRender: false,
+    extensions: [
+      StarterKit,
+      Link.configure({ openOnClick: false, autolink: true }),
+      Placeholder.configure({ placeholder })
+    ],
+    content: value ?? defaultValue ?? "",
+    onUpdate: ({ editor: editor2 }) => onValueChange?.(editor2.getHTML())
+  });
+  React.useEffect(() => {
+    if (!editor || value === void 0) return;
+    if (value !== editor.getHTML()) {
+      editor.commands.setContent(value, false);
+    }
+  }, [value, editor]);
+  React.useEffect(() => {
+    editor?.setEditable(editable);
+  }, [editable, editor]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(sc("rich-text-editor"), className),
+      "data-disabled": !editable || void 0,
+      children: [
+        toolbar && editor && /* @__PURE__ */ jsx(Toolbar, { editor }),
+        /* @__PURE__ */ jsx(
+          EditorContent,
+          {
+            editor,
+            className: cx(sc("rich-text-editor-content"), contentClassName)
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { RichTextEditor };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/rich-text-editor.tsx"],"names":["editor"],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { useEditor, EditorContent, type Editor } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport Link from \"@tiptap/extension-link\";\nimport Placeholder from \"@tiptap/extension-placeholder\";\nimport { cx, useSilicaClass } from \"@wizeworks/silicaui-react\";\n\nexport interface RichTextEditorProps {\n  /** Controlled HTML value. */\n  value?: string;\n  /** Uncontrolled initial HTML. */\n  defaultValue?: string;\n  /** Fires with the editor's HTML on every change. */\n  onValueChange?: (html: string) => void;\n  /** Empty-state placeholder text. */\n  placeholder?: string;\n  /** Allow editing. Default `true`. */\n  editable?: boolean;\n  /** Show the formatting toolbar. Default `true`. */\n  toolbar?: boolean;\n  className?: string;\n  /** Class for the editable content surface. */\n  contentClassName?: string;\n}\n\nconst icons = {\n  bulletList: (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M8 6h13M8 12h13M8 18h13\" />\n      <circle cx=\"3.5\" cy=\"6\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\" />\n      <circle cx=\"3.5\" cy=\"12\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\" />\n      <circle cx=\"3.5\" cy=\"18\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\" />\n    </svg>\n  ),\n  orderedList: (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M10 6h11M10 12h11M10 18h11M4 4v4M3 8h2M3 16h2a1 1 0 0 1 0 2H3a1 1 0 0 0 0 2h2\" />\n    </svg>\n  ),\n  quote: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\">\n      <path d=\"M7 7H4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h2v1a2 2 0 0 1-2 2H3v2h1a4 4 0 0 0 4-4V9a2 2 0 0 0-1-2Zm11 0h-3a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h2v1a2 2 0 0 1-2 2h-1v2h1a4 4 0 0 0 4-4V9a2 2 0 0 0-1-2Z\" />\n    </svg>\n  ),\n  code: (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"m8 8-4 4 4 4M16 8l4 4-4 4M13 5l-2 14\" />\n    </svg>\n  ),\n  link: (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1\" />\n      <path d=\"M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1\" />\n    </svg>\n  ),\n  undo: (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M9 14 4 9l5-5\" />\n      <path d=\"M4 9h11a5 5 0 0 1 0 10h-1\" />\n    </svg>\n  ),\n  redo: (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"m15 14 5-5-5-5\" />\n      <path d=\"M20 9H9a5 5 0 0 0 0 10h1\" />\n    </svg>\n  ),\n};\n\ninterface BtnProps {\n  onClick: () => void;\n  active?: boolean;\n  disabled?: boolean;\n  title: string;\n  children: React.ReactNode;\n}\n\nfunction Toolbar({ editor }: { editor: Editor }) {\n  const sc = useSilicaClass();\n\n  const Btn = ({ onClick, active, disabled, title, children }: BtnProps) => (\n    <button\n      type=\"button\"\n      className={cx(sc(\"rich-text-editor-btn\"))}\n      data-active={active || undefined}\n      disabled={disabled}\n      title={title}\n      aria-label={title}\n      aria-pressed={active || undefined}\n      // Keep the editor selection instead of blurring to the button.\n      onMouseDown={(e) => e.preventDefault()}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n\n  const sep = <span className={cx(sc(\"rich-text-editor-sep\"))} aria-hidden=\"true\" />;\n\n  const setLink = () => {\n    const prev = editor.getAttributes(\"link\").href as string | undefined;\n    const url = window.prompt(\"Link URL\", prev ?? \"\");\n    if (url === null) return;\n    if (url === \"\") {\n      editor.chain().focus().extendMarkRange(\"link\").unsetLink().run();\n      return;\n    }\n    editor.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n  };\n\n  return (\n    <div className={cx(sc(\"rich-text-editor-toolbar\"))} role=\"toolbar\" aria-label=\"Formatting\">\n      <Btn title=\"Bold\" active={editor.isActive(\"bold\")} onClick={() => editor.chain().focus().toggleBold().run()}>\n        <span style={{ fontWeight: 800 }}>B</span>\n      </Btn>\n      <Btn title=\"Italic\" active={editor.isActive(\"italic\")} onClick={() => editor.chain().focus().toggleItalic().run()}>\n        <span style={{ fontStyle: \"italic\", fontFamily: \"Georgia, serif\" }}>I</span>\n      </Btn>\n      <Btn title=\"Strikethrough\" active={editor.isActive(\"strike\")} onClick={() => editor.chain().focus().toggleStrike().run()}>\n        <span style={{ textDecoration: \"line-through\" }}>S</span>\n      </Btn>\n      {sep}\n      <Btn title=\"Heading 1\" active={editor.isActive(\"heading\", { level: 1 })} onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}>\n        H1\n      </Btn>\n      <Btn title=\"Heading 2\" active={editor.isActive(\"heading\", { level: 2 })} onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}>\n        H2\n      </Btn>\n      {sep}\n      <Btn title=\"Bullet list\" active={editor.isActive(\"bulletList\")} onClick={() => editor.chain().focus().toggleBulletList().run()}>\n        {icons.bulletList}\n      </Btn>\n      <Btn title=\"Ordered list\" active={editor.isActive(\"orderedList\")} onClick={() => editor.chain().focus().toggleOrderedList().run()}>\n        {icons.orderedList}\n      </Btn>\n      {sep}\n      <Btn title=\"Quote\" active={editor.isActive(\"blockquote\")} onClick={() => editor.chain().focus().toggleBlockquote().run()}>\n        {icons.quote}\n      </Btn>\n      <Btn title=\"Code block\" active={editor.isActive(\"codeBlock\")} onClick={() => editor.chain().focus().toggleCodeBlock().run()}>\n        {icons.code}\n      </Btn>\n      <Btn title=\"Link\" active={editor.isActive(\"link\")} onClick={setLink}>\n        {icons.link}\n      </Btn>\n      {sep}\n      <Btn title=\"Undo\" disabled={!editor.can().undo()} onClick={() => editor.chain().focus().undo().run()}>\n        {icons.undo}\n      </Btn>\n      <Btn title=\"Redo\" disabled={!editor.can().redo()} onClick={() => editor.chain().focus().redo().run()}>\n        {icons.redo}\n      </Btn>\n    </div>\n  );\n}\n\n/**\n * RichTextEditor — a TipTap editor with a Silica-styled toolbar and content\n * surface. Emits HTML via `onValueChange`; control it with `value` or run\n * uncontrolled with `defaultValue`. StarterKit + Link + Placeholder are wired in;\n * drop `toolbar={false}` for a bare editable surface.\n */\nexport function RichTextEditor({\n  value,\n  defaultValue,\n  onValueChange,\n  placeholder = \"Write something…\",\n  editable = true,\n  toolbar = true,\n  className,\n  contentClassName,\n}: RichTextEditorProps) {\n  const sc = useSilicaClass();\n\n  const editor = useEditor({\n    editable,\n    immediatelyRender: false,\n    extensions: [\n      StarterKit,\n      Link.configure({ openOnClick: false, autolink: true }),\n      Placeholder.configure({ placeholder }),\n    ],\n    content: value ?? defaultValue ?? \"\",\n    onUpdate: ({ editor }) => onValueChange?.(editor.getHTML()),\n  });\n\n  // Sync a controlled value in without firing onUpdate (avoids a loop) or\n  // stomping the cursor when the change already came from the editor.\n  React.useEffect(() => {\n    if (!editor || value === undefined) return;\n    if (value !== editor.getHTML()) {\n      editor.commands.setContent(value, false);\n    }\n  }, [value, editor]);\n\n  React.useEffect(() => {\n    editor?.setEditable(editable);\n  }, [editable, editor]);\n\n  return (\n    <div\n      className={cx(sc(\"rich-text-editor\"), className)}\n      data-disabled={!editable || undefined}\n    >\n      {toolbar && editor && <Toolbar editor={editor} />}\n      <EditorContent\n        editor={editor}\n        className={cx(sc(\"rich-text-editor-content\"), contentClassName)}\n      />\n    </div>\n  );\n}\n"]}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@wizeworks/silicaui-editor",
+  "version": "0.3.0",
+  "description": "Silica UI rich-text editor — TipTap wrapped with a Silica-styled toolbar and content surface.",
+  "type": "module",
+  "license": "MIT",
+  "author": "WizeWorks",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/silicaui/silicaui.git",
+    "directory": "packages/silicaui-editor"
+  },
+  "homepage": "https://silicaui.com",
+  "bugs": "https://github.com/silicaui/silicaui/issues",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@wizeworks/silicaui-react": ">=0.0.0"
+  },
+  "dependencies": {
+    "@tiptap/react": "^2.10.0",
+    "@tiptap/pm": "^2.10.0",
+    "@tiptap/starter-kit": "^2.10.0",
+    "@tiptap/extension-link": "^2.10.0",
+    "@tiptap/extension-placeholder": "^2.10.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0",
+    "@wizeworks/silicaui-react": "0.3.0"
+  },
+  "keywords": [
+    "react",
+    "rich-text",
+    "editor",
+    "tiptap",
+    "wysiwyg",
+    "design-system",
+    "silica"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}