@domternal/extension-block-controls 0.11.0 → 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 +63 -29
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,42 +3,76 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/@domternal/extension-block-controls)
|
|
4
4
|
[](https://github.com/domternal/domternal/blob/main/LICENSE)
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
Notion-style block controls for the [Domternal](https://domternal.dev) editor. Ships
|
|
7
|
+
six coordinated extensions: `BlockHandle`, `BlockContextMenu`, `SlashCommand`,
|
|
8
|
+
`SmartPaste`, `KeyboardReorder`, and `FloatingMenu` (each described under
|
|
9
|
+
[Extensions](#extensions) below). They cooperate through DOM events, so opening one
|
|
10
|
+
overlay closes the others.
|
|
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/extensions/block-controls)</u> • <u>[Live examples](https://domternal.dev/examples)</u>
|
|
13
15
|
|
|
14
|
-
##
|
|
16
|
+
## Install
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
```bash
|
|
19
|
+
pnpm add @domternal/extension-block-controls
|
|
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
|
+
`@domternal/core` and `@domternal/pm` are peer dependencies and are pulled in by any
|
|
23
|
+
Domternal editor setup.
|
|
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
|
+
Add the extensions you want to your editor's extension list. Most apps use the full set
|
|
28
|
+
together for the Notion experience:
|
|
41
29
|
|
|
42
|
-
|
|
30
|
+
```ts
|
|
31
|
+
import { Editor, StarterKit } from '@domternal/core';
|
|
32
|
+
import {
|
|
33
|
+
BlockHandle,
|
|
34
|
+
BlockContextMenu,
|
|
35
|
+
SlashCommand,
|
|
36
|
+
SmartPaste,
|
|
37
|
+
KeyboardReorder,
|
|
38
|
+
FloatingMenu,
|
|
39
|
+
} from '@domternal/extension-block-controls';
|
|
40
|
+
import '@domternal/theme';
|
|
43
41
|
|
|
44
|
-
|
|
42
|
+
const editor = new Editor({
|
|
43
|
+
element: document.getElementById('editor')!,
|
|
44
|
+
extensions: [
|
|
45
|
+
StarterKit,
|
|
46
|
+
BlockHandle.configure({ nested: true }),
|
|
47
|
+
BlockContextMenu,
|
|
48
|
+
SlashCommand,
|
|
49
|
+
SmartPaste,
|
|
50
|
+
KeyboardReorder,
|
|
51
|
+
FloatingMenu.configure({
|
|
52
|
+
element: document.getElementById('floating-menu')!,
|
|
53
|
+
requireExplicitTrigger: true,
|
|
54
|
+
}),
|
|
55
|
+
],
|
|
56
|
+
});
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
The `SlashCommand` and `FloatingMenu` popups draw their items from
|
|
60
|
+
`editor.floatingMenuItems` (collected from every extension's `addFloatingMenuItems()`
|
|
61
|
+
hook), so installed extensions register their own insert actions automatically.
|
|
62
|
+
|
|
63
|
+
## Extensions
|
|
64
|
+
|
|
65
|
+
- **`BlockHandle`** - hover gutter with a `+` insert button and a drag handle. The `+`
|
|
66
|
+
button inserts an empty paragraph and opens the `FloatingMenu`; the drag handle opens
|
|
67
|
+
the context menu on click and reorders with a nesting-aware drop indicator on drag.
|
|
68
|
+
- **`BlockContextMenu`** - Delete / Duplicate / Turn into actions, opened from the drag
|
|
69
|
+
handle. Also shows a "Copy link" item when the block has an id (and `UniqueID` is
|
|
70
|
+
loaded), and a "Colors" section when the `BlockColor` extension is loaded; each is
|
|
71
|
+
toggleable via `turnIntoEnabled` / `copyLinkEnabled` / `blockColorEnabled`.
|
|
72
|
+
- **`SlashCommand`** - typing `/` opens a filtered, ranked popup of insertable blocks;
|
|
73
|
+
selecting one replaces the `/query` range and runs the item's command.
|
|
74
|
+
- **`SmartPaste`** - keeps block-level formatting intact when pasting at an inline cursor.
|
|
75
|
+
- **`KeyboardReorder`** - `Mod-Shift-ArrowUp` / `Mod-Shift-ArrowDown` move the current
|
|
76
|
+
top-level block.
|
|
77
|
+
- **`FloatingMenu`** - the empty-line insert menu; `requireExplicitTrigger` gates it
|
|
78
|
+
behind the `+` button for Notion mode.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@domternal/extension-block-controls",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.2",
|
|
4
4
|
"description": "Notion-style block controls for the Domternal editor: BlockHandle (hover gutter + drag), SlashCommand, FloatingMenu, ContextMenu, keyboard reorder, and SmartPaste",
|
|
5
5
|
"author": "https://github.com/ThomasNowHere",
|
|
6
6
|
"license": "MIT",
|