@domternal/vue 0.11.1 → 0.11.2
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 +66 -29
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,42 +3,79 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/@domternal/vue)
|
|
4
4
|
[](https://github.com/domternal/domternal/blob/main/LICENSE)
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
Vue 3 bindings for the [Domternal](https://domternal.dev) editor. Provides the composable
|
|
7
|
+
`Domternal` component with namespaced subcomponents, the `useEditor` and `useEditorState`
|
|
8
|
+
composables for full control, provide/inject helpers for sharing one editor across descendants,
|
|
9
|
+
and `VueNodeViewRenderer` for writing custom node views as Vue SFCs. SSR-safe by default: the
|
|
10
|
+
editor is created in `onMounted`. Requires Vue 3.3+ and the Composition API.
|
|
8
11
|
|
|
9
12
|
## Links
|
|
10
13
|
|
|
11
|
-
<u>[Website](https://domternal.dev)</u> • <u>[Documentation](https://domternal.dev/v1/
|
|
12
|
-
<u>[StackBlitz (Angular)](https://stackblitz.com/edit/domternal-angular-full-example)</u> • <u>[StackBlitz (React)](https://stackblitz.com/edit/domternal-react-full-example)</u> • <u>[StackBlitz (Vue)](https://stackblitz.com/edit/domternal-vue-full-example)</u> • <u>[StackBlitz (Vanilla TS)](https://stackblitz.com/edit/domternal-vanilla-full-example)</u>
|
|
14
|
+
<u>[Website](https://domternal.dev)</u> • <u>[Documentation](https://domternal.dev/v1/guides/vue)</u> • <u>[Live examples](https://domternal.dev/examples)</u>
|
|
13
15
|
|
|
14
|
-
##
|
|
16
|
+
## Install
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
```bash
|
|
19
|
+
pnpm add @domternal/vue @domternal/core @domternal/theme vue
|
|
20
|
+
```
|
|
17
21
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
- **React components** - composable `Domternal` component, toolbar, bubble menu, floating menu, emoji picker, notion color picker, custom node views (React 18+)
|
|
21
|
-
- **Vue components** - composable `Domternal` component, `useEditor`/`useEditorState` composables, toolbar, bubble menu, floating menu, emoji picker, notion color picker, custom node views (Vue 3.3+)
|
|
22
|
-
- **Vanilla wrapper** - framework-free class-based API for Astro, Svelte, Solid, plain HTML, and Web Components - editor, toolbar, bubble menu, floating menu, emoji picker, notion color picker
|
|
23
|
-
- **Notion-style block UX** - drag-to-reorder, block context menu, slash command, smart paste, keyboard reorder, floating Table of Contents
|
|
24
|
-
- **70+ extensions across 16 packages** - nodes, marks, and behavior extensions
|
|
25
|
-
- **125+ chainable commands** - `editor.chain().focus().toggleBold().run()`
|
|
26
|
-
- **Full table support** - cell merging, column resize, row/column controls, cell toolbar, all free and MIT licensed
|
|
27
|
-
- **Tree-shakeable** - import only what you use, your bundler strips the rest
|
|
28
|
-
- **~44 KB gzipped** (own code), <u>[see Packages](https://domternal.dev/v1/packages)</u> for full bundle breakdown with ProseMirror
|
|
29
|
-
- **TypeScript first** - 100% typed, zero `any`
|
|
30
|
-
- **15,000+ tests** - 4,000+ unit and 11,000+ E2E across 230+ Playwright specs and 4 demo apps
|
|
31
|
-
- **Light and dark theme** - 120+ CSS custom properties for full visual control
|
|
32
|
-
- **Inline styles export** - `getHTML({ styled: true })` produces inline CSS ready for email clients, CMS, and Google Docs
|
|
33
|
-
- **SSR helpers** - `generateHTML`, `generateJSON`, `generateText` for server-side rendering
|
|
22
|
+
`vue` (>=3.3) and `@domternal/core` are peer dependencies. `@domternal/theme` supplies the
|
|
23
|
+
editor styles.
|
|
34
24
|
|
|
35
|
-
##
|
|
25
|
+
## Usage
|
|
36
26
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
- <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> - what each package includes and bundle size breakdown
|
|
40
|
-
- <u>[Blog](https://domternal.dev/blog)</u>
|
|
27
|
+
Composable component pattern (recommended): `Domternal` creates the editor and provides it to all
|
|
28
|
+
subcomponents via inject, so children need no `editor` prop.
|
|
41
29
|
|
|
42
|
-
|
|
30
|
+
```vue
|
|
31
|
+
<script setup lang="ts">
|
|
32
|
+
import { Domternal } from '@domternal/vue';
|
|
33
|
+
import { StarterKit, BubbleMenu } from '@domternal/core';
|
|
34
|
+
import '@domternal/theme';
|
|
43
35
|
|
|
44
|
-
|
|
36
|
+
const extensions = [StarterKit, BubbleMenu];
|
|
37
|
+
</script>
|
|
38
|
+
|
|
39
|
+
<template>
|
|
40
|
+
<Domternal :extensions="extensions" content="<p>Hello from Vue!</p>">
|
|
41
|
+
<Domternal.Toolbar />
|
|
42
|
+
<Domternal.Content />
|
|
43
|
+
<Domternal.BubbleMenu :contexts="{ text: ['bold', 'italic', 'underline'] }" />
|
|
44
|
+
</Domternal>
|
|
45
|
+
</template>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Composable hook
|
|
49
|
+
|
|
50
|
+
Use `useEditor` directly when you need the editor instance, then read reactive state with
|
|
51
|
+
`useEditorState`:
|
|
52
|
+
|
|
53
|
+
```vue
|
|
54
|
+
<script setup lang="ts">
|
|
55
|
+
import { useEditor, useEditorState, provideEditor, DomternalToolbar } from '@domternal/vue';
|
|
56
|
+
import { StarterKit } from '@domternal/core';
|
|
57
|
+
|
|
58
|
+
const { editor, editorRef } = useEditor({
|
|
59
|
+
extensions: [StarterKit],
|
|
60
|
+
content: '<p>Start typing...</p>',
|
|
61
|
+
onUpdate: ({ editor }) => console.log(editor.getHTML()),
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
provideEditor(editor);
|
|
65
|
+
|
|
66
|
+
const { htmlContent, isEmpty } = useEditorState(editor);
|
|
67
|
+
</script>
|
|
68
|
+
|
|
69
|
+
<template>
|
|
70
|
+
<DomternalToolbar />
|
|
71
|
+
<div ref="editorRef" class="dm-editor" />
|
|
72
|
+
</template>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
`useEditor` returns `editor` (a `ShallowRef<Editor | null>`, null until mounted) and `editorRef`
|
|
76
|
+
(bind to the mount element). `useEditorState` returns `htmlContent`, `jsonContent`, `isEmpty`,
|
|
77
|
+
`isFocused`, and `isEditable`, or pass a selector for a granular `ComputedRef`:
|
|
78
|
+
|
|
79
|
+
```ts
|
|
80
|
+
const isBold = useEditorState(editor, (ed) => ed.isActive('bold'));
|
|
81
|
+
```
|