@bendyline/squisq-editor-react 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -0
- package/package.json +5 -5
package/README.md
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
# @bendyline/squisq-editor-react
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
Part of the [Squisq](https://github.com/bendyline/squisq) monorepo.
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@bendyline/squisq-editor-react)
|
|
8
|
+
[](https://github.com/bendyline/squisq/blob/main/LICENSE)
|
|
9
|
+
|
|
10
|
+
## Install
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @bendyline/squisq-editor-react @bendyline/squisq @bendyline/squisq-react
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
**Peer dependencies:** `react` and `react-dom` (v18 or v19).
|
|
17
|
+
|
|
18
|
+
## Quick Start
|
|
19
|
+
|
|
20
|
+
```tsx
|
|
21
|
+
import { EditorShell } from '@bendyline/squisq-editor-react';
|
|
22
|
+
import '@bendyline/squisq-editor-react/styles';
|
|
23
|
+
|
|
24
|
+
function App() {
|
|
25
|
+
return <EditorShell initialMarkdown="# Hello World" />;
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Editor Views
|
|
30
|
+
|
|
31
|
+
| View | Powered By | Description |
|
|
32
|
+
| ----------- | ------------- | ----------------------------------------------------- |
|
|
33
|
+
| **Raw** | Monaco Editor | Full Markdown source editing with syntax highlighting |
|
|
34
|
+
| **WYSIWYG** | Tiptap | Rich text editing with a formatting toolbar |
|
|
35
|
+
| **Preview** | DocPlayer | Live rendered block preview with theme selection |
|
|
36
|
+
|
|
37
|
+
## Components
|
|
38
|
+
|
|
39
|
+
| Component | Description |
|
|
40
|
+
| ---------------- | ---------------------------------------------------------------- |
|
|
41
|
+
| `EditorShell` | Top-level editor — combines all three views with a view switcher |
|
|
42
|
+
| `EditorProvider` | Context provider for editor state management |
|
|
43
|
+
|
|
44
|
+
## Context API
|
|
45
|
+
|
|
46
|
+
Use `useEditorContext()` to access editor state and actions from child components:
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import { EditorProvider, useEditorContext } from '@bendyline/squisq-editor-react';
|
|
50
|
+
|
|
51
|
+
function MyComponent() {
|
|
52
|
+
const { state, actions } = useEditorContext();
|
|
53
|
+
// state.markdown, state.view, state.doc
|
|
54
|
+
// actions.setMarkdown(), actions.setView()
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Styles
|
|
59
|
+
|
|
60
|
+
Import the editor CSS:
|
|
61
|
+
|
|
62
|
+
```ts
|
|
63
|
+
import '@bendyline/squisq-editor-react/styles';
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Related Packages
|
|
67
|
+
|
|
68
|
+
| Package | Description |
|
|
69
|
+
| ------------------------------------------------------------------------------------ | -------------------------------------------------------------- |
|
|
70
|
+
| [@bendyline/squisq](https://www.npmjs.com/package/@bendyline/squisq) | Headless core — schemas, templates, spatial, markdown, storage |
|
|
71
|
+
| [@bendyline/squisq-react](https://www.npmjs.com/package/@bendyline/squisq-react) | React components for rendering docs |
|
|
72
|
+
| [@bendyline/squisq-formats](https://www.npmjs.com/package/@bendyline/squisq-formats) | DOCX, PDF, HTML import/export |
|
|
73
|
+
|
|
74
|
+
## License
|
|
75
|
+
|
|
76
|
+
[MIT](https://github.com/bendyline/squisq/blob/main/LICENSE)
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bendyline/squisq-editor-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Bendyline",
|
|
7
7
|
"repository": {
|
|
8
8
|
"type": "git",
|
|
9
|
-
"url": "https://github.com/
|
|
9
|
+
"url": "https://github.com/bendyline/squisq.git",
|
|
10
10
|
"directory": "packages/editor-react"
|
|
11
11
|
},
|
|
12
|
-
"homepage": "https://github.com/
|
|
12
|
+
"homepage": "https://github.com/bendyline/squisq",
|
|
13
13
|
"keywords": [
|
|
14
14
|
"editor",
|
|
15
15
|
"react",
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@bendyline/squisq": "^0.1.
|
|
50
|
-
"@bendyline/squisq-react": "^0.1.
|
|
49
|
+
"@bendyline/squisq": "^0.1.2",
|
|
50
|
+
"@bendyline/squisq-react": "^0.1.3",
|
|
51
51
|
"@monaco-editor/react": "^4.6.0",
|
|
52
52
|
"@tiptap/extension-placeholder": "^2.11.0",
|
|
53
53
|
"@tiptap/extension-table": "^2.11.0",
|