@domternal/vanilla 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 +65 -29
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,42 +3,78 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/@domternal/vanilla)
|
|
4
4
|
[](https://github.com/domternal/domternal/blob/main/LICENSE)
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
Framework-free DOM components for the [Domternal](https://domternal.dev) editor.
|
|
7
|
+
Each component is a class you instantiate against a host element:
|
|
8
|
+
`DomternalEditor`, `DomternalToolbar`, `DomternalBubbleMenu`, `DomternalFloatingMenu`,
|
|
9
|
+
`DomternalEmojiPicker`, and `DomternalNotionColorPicker`. Every class extends
|
|
10
|
+
`EventTarget`, exposes plain getters and mutator methods, dispatches `CustomEvent`s for state
|
|
11
|
+
changes, and tears down with an idempotent `destroy()`. Use it in Astro, Svelte, Solid,
|
|
12
|
+
Lit, Web Components, or plain HTML - anywhere without a framework runtime.
|
|
8
13
|
|
|
9
14
|
## Links
|
|
10
15
|
|
|
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>
|
|
16
|
+
<u>[Website](https://domternal.dev)</u> • <u>[Documentation](https://domternal.dev/v1/guides/vanilla)</u> • <u>[Live examples](https://domternal.dev/examples)</u>
|
|
13
17
|
|
|
14
|
-
##
|
|
18
|
+
## Install
|
|
15
19
|
|
|
16
|
-
|
|
20
|
+
```bash
|
|
21
|
+
pnpm add @domternal/core @domternal/theme @domternal/vanilla
|
|
22
|
+
```
|
|
17
23
|
|
|
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
|
|
24
|
+
`@domternal/core` is a peer dependency. `@domternal/theme` supplies the editor styles
|
|
25
|
+
(import it once in your app).
|
|
34
26
|
|
|
35
|
-
##
|
|
27
|
+
## Usage
|
|
36
28
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
29
|
+
```ts
|
|
30
|
+
import { StarterKit } from '@domternal/core';
|
|
31
|
+
import {
|
|
32
|
+
DomternalEditor,
|
|
33
|
+
DomternalToolbar,
|
|
34
|
+
DomternalBubbleMenu,
|
|
35
|
+
} from '@domternal/vanilla';
|
|
36
|
+
import '@domternal/theme';
|
|
41
37
|
|
|
42
|
-
|
|
38
|
+
const toolbarEl = document.getElementById('toolbar')!;
|
|
39
|
+
const editorEl = document.getElementById('editor')!;
|
|
40
|
+
const bubbleEl = document.getElementById('bubble')!;
|
|
43
41
|
|
|
44
|
-
|
|
42
|
+
const dm = new DomternalEditor(editorEl, {
|
|
43
|
+
extensions: [StarterKit],
|
|
44
|
+
content: '<p>Hello world</p>',
|
|
45
|
+
onUpdate: ({ editor }) => console.log(editor.getHTML()),
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
new DomternalToolbar(toolbarEl, { editor: dm.editor });
|
|
49
|
+
new DomternalBubbleMenu(bubbleEl, { editor: dm.editor });
|
|
50
|
+
|
|
51
|
+
// Reactive-friendly getters:
|
|
52
|
+
console.log(dm.htmlContent, dm.isEmpty);
|
|
53
|
+
|
|
54
|
+
// CustomEvent subscription:
|
|
55
|
+
dm.addEventListener('update', () => console.log('content changed'));
|
|
56
|
+
|
|
57
|
+
// Cleanup (idempotent):
|
|
58
|
+
dm.destroy();
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
The matching mount points:
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<div id="toolbar"></div>
|
|
65
|
+
<div id="editor" class="dm-editor"></div>
|
|
66
|
+
<div id="bubble" class="dm-bubble-menu"></div>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
> Construction is browser-only: every constructor calls `assertBrowser()` and throws in
|
|
70
|
+
> SSR. Module-scope imports stay SSR-safe, so gate instantiation behind a client-side
|
|
71
|
+
> entry point (e.g. an Astro `<script>` block or `client:only`).
|
|
72
|
+
|
|
73
|
+
## Exports
|
|
74
|
+
|
|
75
|
+
- `DomternalEditor` / `DomternalEditorOptions` - wraps core's `Editor`, plus
|
|
76
|
+
`DEFAULT_EXTENSIONS` (Document, Paragraph, Text, BaseKeymap, History).
|
|
77
|
+
- `DomternalToolbar`, `DomternalBubbleMenu`, `DomternalFloatingMenu`,
|
|
78
|
+
`DomternalEmojiPicker`, `DomternalNotionColorPicker` - the floating UI components.
|
|
79
|
+
- Shared helpers: `isBrowser`, `assertBrowser`, `createPluginKey`, `renderIconInto`,
|
|
80
|
+
`resolveIcon`, `subscribe`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@domternal/vanilla",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.2",
|
|
4
4
|
"description": "Polished DOM components for the Domternal rich-text editor. Use in Astro, Svelte, Solid, plain HTML.",
|
|
5
5
|
"author": "https://github.com/ThomasNowHere",
|
|
6
6
|
"license": "MIT",
|