@brett_lamy/docstream-editor 0.3.4 → 0.3.6
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 +12 -0
- package/package.json +9 -1
- package/src/editor/Editor.tsx +10 -0
- package/src/styles.css +24 -0
package/README.md
CHANGED
|
@@ -73,11 +73,15 @@ export function EditorPage() {
|
|
|
73
73
|
export interface GitbookEditorProps {
|
|
74
74
|
markdown: string
|
|
75
75
|
onChange: (markdown: string) => void
|
|
76
|
+
onKeyDown?: (event: KeyboardEvent) => boolean
|
|
77
|
+
onPaste?: (event: ClipboardEvent) => boolean
|
|
76
78
|
}
|
|
77
79
|
```
|
|
78
80
|
|
|
79
81
|
- `markdown`: Source markdown to load into the editor.
|
|
80
82
|
- `onChange`: Called with serialized markdown whenever TipTap content changes.
|
|
83
|
+
- `onKeyDown` / `onPaste`: Optional host hooks that run before the built-in editor behavior;
|
|
84
|
+
return `true` when the application handled the event.
|
|
81
85
|
|
|
82
86
|
The editor tracks the last markdown it emitted so normal controlled updates do not continuously reset the TipTap document. Passing a different external `markdown` value replaces the editor content.
|
|
83
87
|
|
|
@@ -158,6 +162,14 @@ Exports:
|
|
|
158
162
|
- `SourceFileEditor`
|
|
159
163
|
- `SourceFileEditorProps`
|
|
160
164
|
|
|
165
|
+
Applications that only need the core editor can import the narrow entrypoint. It avoids loading
|
|
166
|
+
the source-file and React playground integrations:
|
|
167
|
+
|
|
168
|
+
```tsx
|
|
169
|
+
import { GitbookEditor } from "@brett_lamy/docstream-editor/editor"
|
|
170
|
+
import { astToTiptap } from "@brett_lamy/docstream-editor/convert"
|
|
171
|
+
```
|
|
172
|
+
|
|
161
173
|
## Styling and Theming
|
|
162
174
|
|
|
163
175
|
The editor CSS is designed to sit beside `@brett_lamy/docstream/styles.css` and inherit the same application theme tokens. In a shadcn-style app, define your theme variables globally and import both CSS entrypoints once.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brett_lamy/docstream-editor",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.6",
|
|
4
4
|
"description": "TipTap editor for Docstream GitBook-style markdown documents.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -21,6 +21,14 @@
|
|
|
21
21
|
"types": "./src/index.ts",
|
|
22
22
|
"import": "./src/index.ts"
|
|
23
23
|
},
|
|
24
|
+
"./editor": {
|
|
25
|
+
"types": "./src/editor/Editor.tsx",
|
|
26
|
+
"import": "./src/editor/Editor.tsx"
|
|
27
|
+
},
|
|
28
|
+
"./convert": {
|
|
29
|
+
"types": "./src/editor/convert.ts",
|
|
30
|
+
"import": "./src/editor/convert.ts"
|
|
31
|
+
},
|
|
24
32
|
"./styles.css": "./src/styles.css"
|
|
25
33
|
},
|
|
26
34
|
"dependencies": {
|
package/src/editor/Editor.tsx
CHANGED
|
@@ -39,6 +39,10 @@ export interface GitbookEditorProps {
|
|
|
39
39
|
disableHistory?: boolean
|
|
40
40
|
/** Extra TipTap extensions appended last (e.g. Collaboration, CollaborationCursor). */
|
|
41
41
|
extensions?: AnyExtension[]
|
|
42
|
+
/** Handle a key before the editor's built-in keymaps. Return true when handled. */
|
|
43
|
+
onKeyDown?: (event: KeyboardEvent) => boolean
|
|
44
|
+
/** Handle clipboard content before the editor's built-in paste behavior. Return true when handled. */
|
|
45
|
+
onPaste?: (event: ClipboardEvent) => boolean
|
|
42
46
|
/** Receive the underlying TipTap editor instance (and null on teardown). */
|
|
43
47
|
onEditorReady?: (editor: TiptapEditor | null) => void
|
|
44
48
|
}
|
|
@@ -114,6 +118,8 @@ export function GitbookEditor({
|
|
|
114
118
|
autofocus = false,
|
|
115
119
|
disableHistory,
|
|
116
120
|
extensions,
|
|
121
|
+
onKeyDown,
|
|
122
|
+
onPaste,
|
|
117
123
|
onEditorReady,
|
|
118
124
|
}: GitbookEditorProps) {
|
|
119
125
|
// Tracks the markdown the editor itself produced, so external updates
|
|
@@ -130,6 +136,10 @@ export function GitbookEditor({
|
|
|
130
136
|
...(disableHistory !== undefined ? { disableHistory } : {}),
|
|
131
137
|
...(extensions ? { extensions } : {}),
|
|
132
138
|
}),
|
|
139
|
+
editorProps: {
|
|
140
|
+
handleKeyDown: (_view, event) => onKeyDown?.(event) ?? false,
|
|
141
|
+
handlePaste: (_view, event) => onPaste?.(event) ?? false,
|
|
142
|
+
},
|
|
133
143
|
...(controlled ? { content: astToTiptap(parseMarkdown(markdown as string)) } : {}),
|
|
134
144
|
onUpdate({ editor }) {
|
|
135
145
|
if (!onChange) return
|
package/src/styles.css
CHANGED
|
@@ -538,6 +538,30 @@
|
|
|
538
538
|
}
|
|
539
539
|
.gb-code pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
|
|
540
540
|
.gb-code pre code .hljs-comment { font-style: italic; }
|
|
541
|
+
.gb-code .hljs-keyword,
|
|
542
|
+
.gb-code .hljs-selector-tag,
|
|
543
|
+
.gb-code .hljs-built_in,
|
|
544
|
+
.gb-code .hljs-type,
|
|
545
|
+
.gb-code .hljs-tag,
|
|
546
|
+
.gb-code .hljs-name { color: #c792ea; }
|
|
547
|
+
.gb-code .hljs-string,
|
|
548
|
+
.gb-code .hljs-attr,
|
|
549
|
+
.gb-code .hljs-symbol,
|
|
550
|
+
.gb-code .hljs-bullet { color: #a5d6a7; }
|
|
551
|
+
.gb-code .hljs-title,
|
|
552
|
+
.gb-code .hljs-section,
|
|
553
|
+
.gb-code .hljs-function .hljs-title { color: #82aaff; }
|
|
554
|
+
.gb-code .hljs-number,
|
|
555
|
+
.gb-code .hljs-literal,
|
|
556
|
+
.gb-code .hljs-variable,
|
|
557
|
+
.gb-code .hljs-template-variable { color: #f78c6c; }
|
|
558
|
+
.gb-code .hljs-comment,
|
|
559
|
+
.gb-code .hljs-quote,
|
|
560
|
+
.gb-code .hljs-meta { color: #777784; }
|
|
561
|
+
.gb-code .hljs-operator,
|
|
562
|
+
.gb-code .hljs-punctuation { color: #89ddff; }
|
|
563
|
+
.gb-code .hljs-deletion { color: #ff6b6b; }
|
|
564
|
+
.gb-code .hljs-addition { color: #69db7c; }
|
|
541
565
|
|
|
542
566
|
/* ── Updates / changelog (mirrors .docs-updates) ────────── */
|
|
543
567
|
.gb-updates { margin: 0.85em 0; border-top: 1px solid var(--gb-border); }
|