@bendyline/squisq-editor-react 0.1.0 → 1.0.0

package/README.md

@@ -0,0 +1,76 @@
+# @bendyline/squisq-editor-react
+
+React editor shell for Squisq documents with three integrated views: a Monaco-powered raw Markdown editor, a Tiptap WYSIWYG rich text editor, and a live block preview. Switching between views keeps the document in sync automatically.
+
+Part of the [Squisq](https://github.com/bendyline/squisq) monorepo.
+
+[![npm](https://img.shields.io/npm/v/@bendyline/squisq-editor-react)](https://www.npmjs.com/package/@bendyline/squisq-editor-react)
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/bendyline/squisq/blob/main/LICENSE)
+
+## Install
+
+```bash
+npm install @bendyline/squisq-editor-react @bendyline/squisq @bendyline/squisq-react
+```
+
+**Peer dependencies:** `react` and `react-dom` (v18 or v19).
+
+## Quick Start
+
+```tsx
+import { EditorShell } from '@bendyline/squisq-editor-react';
+import '@bendyline/squisq-editor-react/styles';
+
+function App() {
+  return <EditorShell initialMarkdown="# Hello World" />;
+}
+```
+
+## Editor Views
+
+| View        | Powered By    | Description                                           |
+| ----------- | ------------- | ----------------------------------------------------- |
+| **Raw**     | Monaco Editor | Full Markdown source editing with syntax highlighting |
+| **WYSIWYG** | Tiptap        | Rich text editing with a formatting toolbar           |
+| **Preview** | DocPlayer     | Live rendered block preview with theme selection      |
+
+## Components
+
+| Component        | Description                                                      |
+| ---------------- | ---------------------------------------------------------------- |
+| `EditorShell`    | Top-level editor — combines all three views with a view switcher |
+| `EditorProvider` | Context provider for editor state management                     |
+
+## Context API
+
+Use `useEditorContext()` to access editor state and actions from child components:
+
+```tsx
+import { EditorProvider, useEditorContext } from '@bendyline/squisq-editor-react';
+
+function MyComponent() {
+  const { state, actions } = useEditorContext();
+  // state.markdown, state.view, state.doc
+  // actions.setMarkdown(), actions.setView()
+}
+```
+
+## Styles
+
+Import the editor CSS:
+
+```ts
+import '@bendyline/squisq-editor-react/styles';
+```
+
+## Related Packages
+
+| Package                                                                              | Description                                                    |
+| ------------------------------------------------------------------------------------ | -------------------------------------------------------------- |
+| [@bendyline/squisq](https://www.npmjs.com/package/@bendyline/squisq)                 | Headless core — schemas, templates, spatial, markdown, storage |
+| [@bendyline/squisq-react](https://www.npmjs.com/package/@bendyline/squisq-react)     | React components for rendering docs                            |
+| [@bendyline/squisq-formats](https://www.npmjs.com/package/@bendyline/squisq-formats) | DOCX, PDF, HTML import/export                                  |
+
+## License
+
+[MIT](https://github.com/bendyline/squisq/blob/main/LICENSE)

package/dist/index.js

@@ -472,43 +472,51 @@ function Toolbar({ className }) {
           },
           view.id
         )) }),
-        !isPreview && /* @__PURE__ */ jsx2("div", { className: "squisq-toolbar-separator" }),
-        !isPreview && groups.map((group, gi) => /* @__PURE__ */ jsxs("div", { className: "squisq-toolbar-group", children: [
-          gi > 0 && /* @__PURE__ */ jsx2("div", { className: "squisq-toolbar-separator" }),
-          BUTTONS.filter((b) => b.group === group).map((btn) => {
-            const active = isWysiwyg ? isTiptapActive(tiptapEditor, btn.id) : false;
-            return /* @__PURE__ */ jsx2(
-              "button",
-              {
-                className: `squisq-toolbar-button${active ? " squisq-toolbar-button--active" : ""}`,
-                title: btn.title,
-                onClick: () => handleAction(btn.id),
-                "aria-label": btn.title,
-                "aria-pressed": active,
-                style: btn.iconStyle,
-                children: btn.icon
-              },
-              btn.id
-            );
-          })
-        ] }, group)),
-        !isPreview && currentTemplate !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx2("div", { className: "squisq-toolbar-separator" }),
-          /* @__PURE__ */ jsx2("div", { className: "squisq-toolbar-group squisq-template-picker", children: /* @__PURE__ */ jsxs("label", { className: "squisq-template-picker-label", title: "Block template for this heading", children: [
-            "Template:",
-            /* @__PURE__ */ jsxs(
-              "select",
+        !isPreview && /* @__PURE__ */ jsxs("div", { className: "squisq-toolbar-actions", children: [
+          groups.map((group, gi) => /* @__PURE__ */ jsxs("div", { className: "squisq-toolbar-group", children: [
+            gi > 0 && /* @__PURE__ */ jsx2("div", { className: "squisq-toolbar-separator" }),
+            BUTTONS.filter((b) => b.group === group).map((btn) => {
+              const active = isWysiwyg ? isTiptapActive(tiptapEditor, btn.id) : false;
+              return /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  className: `squisq-toolbar-button${active ? " squisq-toolbar-button--active" : ""}`,
+                  title: btn.title,
+                  onClick: () => handleAction(btn.id),
+                  "aria-label": btn.title,
+                  "aria-pressed": active,
+                  style: btn.iconStyle,
+                  children: btn.icon
+                },
+                btn.id
+              );
+            })
+          ] }, group)),
+          currentTemplate !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx2("div", { className: "squisq-toolbar-separator" }),
+            /* @__PURE__ */ jsx2("div", { className: "squisq-toolbar-group squisq-template-picker", children: /* @__PURE__ */ jsxs(
+              "label",
               {
-                className: "squisq-template-picker-select",
-                value: currentTemplate,
-                onChange: (e) => handleTemplatePick(e.target.value),
+                className: "squisq-template-picker-label",
+                title: "Block template for this heading",
                 children: [
-                  /* @__PURE__ */ jsx2("option", { value: "", children: "\u2014 none \u2014" }),
-                  templateNames.map((name) => /* @__PURE__ */ jsx2("option", { value: name, children: name }, name))
+                  "Template:",
+                  /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      className: "squisq-template-picker-select",
+                      value: currentTemplate,
+                      onChange: (e) => handleTemplatePick(e.target.value),
+                      children: [
+                        /* @__PURE__ */ jsx2("option", { value: "", children: "\u2014 none \u2014" }),
+                        templateNames.map((name) => /* @__PURE__ */ jsx2("option", { value: name, children: name }, name))
+                      ]
+                    }
+                  )
                 ]
               }
-            )
-          ] }) })
+            ) })
+          ] })
         ] })
       ]
     }