@bendyline/squisq-editor-react 1.6.0 → 1.6.2

package/README.md

@@ -11,9 +11,14 @@ Part of the [Squisq](https://github.com/bendyline/squisq) monorepo.
 
 ```bash
 npm install @bendyline/squisq-editor-react @bendyline/squisq @bendyline/squisq-react
+# optional: add monaco-editor only if you use the Raw (Monaco) view
+npm install monaco-editor
 ```
 
-**Peer dependencies:** `react` and `react-dom` (v18 or v19).
+**Peer dependencies:** `react` and `react-dom` (v18 or v19). `monaco-editor`
+(^0.50.0) is an **optional** peer dependency (v1.5) — install it only if you use
+the Raw view; the WYSIWYG and Preview views work without it. Tiptap is bundled as
+a regular dependency — you don't need to install it yourself.
 
 ## Quick Start
 
@@ -36,22 +41,58 @@ function App() {
 
 ## Components
 
-| Component        | Description                                                      |
-| ---------------- | ---------------------------------------------------------------- |
-| `EditorShell`    | Top-level editor — combines all three views with a view switcher |
-| `EditorProvider` | Context provider for editor state management                     |
+| Component                                            | Description                                                      |
+| ---------------------------------------------------- | ---------------------------------------------------------------- |
+| `EditorShell`                                        | Top-level editor — combines all three views with a view switcher |
+| `EditorProvider`                                     | Context provider for editor state management                     |
+| `RawEditor` / `WysiwygEditor` / `PreviewPanel`       | The individual views, exported for custom layouts                |
+| `JsonEditor`                                         | Editable form for JSON values bound to a Squisq-annotated schema |
+| `ImageEditor` / `ImageViewer`                        | Layered raster authoring surface + read-only viewer              |
+| `RecorderPanel` / `RecorderButton` / `RecorderModal` | Browser audio/camera/screen recording (MediaRecorder)            |
+| `FolderView`                                         | Standalone folder browser surface                                |
+
+Beyond components, the package also exports Tiptap extensions (diagram editor,
+heading template annotations), the markdown ↔ Tiptap bridge
+(`markdownToTiptap` / `tiptapToMarkdown`), drag-and-drop helpers
+(`useFileDrop`, `processMediaFiles`), file-kind detection (`resolveFileKind`),
+and block-at-a-time / timeline editing primitives (`useBlockNavigator`,
+`BlockCardView`, `TimelineTrack`).
+
+## Notable `EditorShell` features
+
+- **Versioning** — pass `allowVersioning` + `workspaceContainer` to auto-save
+  snapshots on idle (`versioningAutoSaveIdleMs`, default 5000ms) with pruning
+  (`versioningPrunePolicy`, default keep-last-50); a Version History panel
+  appears in the toolbar.
+- **Recording** — with a `mediaProvider` wired, a record button appears in the
+  toolbar (`allowRecording`, default `true`).
+- **Panels** — `outline` (heading outline pane) and `inlinePreview` (per-block
+  SVG preview gutter, `inlinePreviewWidth` default 320).
+- **Code & image modes** — pass `fileName` / `language` to get a Monaco-only
+  code editor, or `imageSrc` (+ `imageMode: 'edit'`) for the image surface.
+- **Embedding** — `readOnly`, `placeholder`, `submitOnEnter`, `fullWidth`,
+  `thinMargins`, `minHeight`/`maxHeight` auto-grow for chat-composer use.
+- **Color scheme** — pass `colorScheme="light" | "dark"` for the editor chrome
+  (**v1.5:** renamed from the old `theme` prop; `RawEditor`'s own `theme` prop is
+  now `monacoTheme`).
+
+Also exported (v1.5): `useMonacoLoader` (share the load-once Monaco bootstrap),
+and the custom theme / template provider stacks — `CustomThemeProvider` /
+`useCustomThemes` / `useDocCustomThemes` and `CustomTemplateProvider` /
+`useCustomTemplates` / `useDocCustomTemplates`.
 
 ## Context API
 
-Use `useEditorContext()` to access editor state and actions from child components:
+Use `useEditorContext()` to access editor state and actions from child
+components. The context value is flat — state fields and action methods live
+side by side:
 
 ```tsx
-import { EditorProvider, useEditorContext } from '@bendyline/squisq-editor-react';
+import { useEditorContext } from '@bendyline/squisq-editor-react';
 
 function MyComponent() {
-  const { state, actions } = useEditorContext();
-  // state.markdown, state.view, state.doc
-  // actions.setMarkdown(), actions.setView()
+  const { markdownSource, doc, activeView, setMarkdownSource, setActiveView } = useEditorContext();
+  // markdownSource: string, doc: Doc | null, activeView: 'raw' | 'wysiwyg' | 'preview'
 }
 ```
 
@@ -63,6 +104,12 @@ Import the editor CSS:
 import '@bendyline/squisq-editor-react/styles';
 ```
 
+## Full API Reference
+
+See [docs/API.md](https://github.com/bendyline/squisq/blob/main/docs/API.md)
+for the complete `EditorShellProps` reference, context API, and every exported
+component, hook, and helper.
+
 ## Related Packages
 
 | Package                                                                              | Description                                                    |