@domternal/vanilla 0.11.1 → 0.12.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Domternal contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -3,42 +3,78 @@
 [![Version](https://img.shields.io/npm/v/@domternal/vanilla.svg)](https://www.npmjs.com/package/@domternal/vanilla)
 [![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/domternal/domternal/blob/main/LICENSE)
 
-A lightweight, extensible rich text editor toolkit built on <u>[ProseMirror](https://prosemirror.net/)</u>. Framework-agnostic headless core with first-class Angular, React, Vue, and Vanilla wrappers.
-Use it headless with vanilla JS/TS, add the built-in toolbar and theme, or drop in ready-made framework components. Fully tree-shakeable, import only what you use, unused extensions are stripped from your bundle.
+Framework-free DOM components for the [Domternal](https://domternal.dev) editor.
+Each component is a class you instantiate against a host element:
+`DomternalEditor`, `DomternalToolbar`, `DomternalBubbleMenu`, `DomternalFloatingMenu`,
+`DomternalEmojiPicker`, and `DomternalNotionColorPicker`. Every class extends
+`EventTarget`, exposes plain getters and mutator methods, dispatches `CustomEvent`s for state
+changes, and tears down with an idempotent `destroy()`. Use it in Astro, Svelte, Solid,
+Lit, Web Components, or plain HTML - anywhere without a framework runtime.
 
 ## Links
 
-<u>[Website](https://domternal.dev)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[Documentation](https://domternal.dev/v1/introduction)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;
-<u>[StackBlitz (Angular)](https://stackblitz.com/edit/domternal-angular-full-example)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[StackBlitz (React)](https://stackblitz.com/edit/domternal-react-full-example)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[StackBlitz (Vue)](https://stackblitz.com/edit/domternal-vue-full-example)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[StackBlitz (Vanilla TS)](https://stackblitz.com/edit/domternal-vanilla-full-example)</u>
+<u>[Website](https://domternal.dev)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[Documentation](https://domternal.dev/v1/guides/vanilla)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[Live examples](https://domternal.dev/examples)</u>
 
-## Features
+## Install
 
-See <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> for a full breakdown of all packages and what each one includes.
+```bash
+pnpm add @domternal/core @domternal/theme @domternal/vanilla
+```
 
-- **Headless core** - use with any framework or vanilla JS/TS
-- **Angular components** - editor, toolbar, bubble menu, floating menu, emoji picker, notion color picker (signals, OnPush, zoneless-ready)
-- **React components** - composable `Domternal` component, toolbar, bubble menu, floating menu, emoji picker, notion color picker, custom node views (React 18+)
-- **Vue components** - composable `Domternal` component, `useEditor`/`useEditorState` composables, toolbar, bubble menu, floating menu, emoji picker, notion color picker, custom node views (Vue 3.3+)
-- **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
-- **Notion-style block UX** - drag-to-reorder, block context menu, slash command, smart paste, keyboard reorder, floating Table of Contents
-- **70+ extensions across 16 packages** - nodes, marks, and behavior extensions
-- **125+ chainable commands** - `editor.chain().focus().toggleBold().run()`
-- **Full table support** - cell merging, column resize, row/column controls, cell toolbar, all free and MIT licensed
-- **Tree-shakeable** - import only what you use, your bundler strips the rest
-- **~44 KB gzipped** (own code), <u>[see Packages](https://domternal.dev/v1/packages)</u> for full bundle breakdown with ProseMirror
-- **TypeScript first** - 100% typed, zero `any`
-- **15,000+ tests** - 4,000+ unit and 11,000+ E2E across 230+ Playwright specs and 4 demo apps
-- **Light and dark theme** - 120+ CSS custom properties for full visual control
-- **Inline styles export** - `getHTML({ styled: true })` produces inline CSS ready for email clients, CMS, and Google Docs
-- **SSR helpers** - `generateHTML`, `generateJSON`, `generateText` for server-side rendering
+`@domternal/core` is a peer dependency. `@domternal/theme` supplies the editor styles
+(import it once in your app).
 
-## Documentation
+## Usage
 
-- <u>[Getting Started](https://domternal.dev/v1/getting-started)</u> - install and create your first editor
-- <u>[Introduction](https://domternal.dev/v1/introduction)</u> - core concepts, architecture, and design decisions
-- <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> - what each package includes and bundle size breakdown
-- <u>[Blog](https://domternal.dev/blog)</u>
+```ts
+import { StarterKit } from '@domternal/core';
+import {
+  DomternalEditor,
+  DomternalToolbar,
+  DomternalBubbleMenu,
+} from '@domternal/vanilla';
+import '@domternal/theme';
 
-## License
+const toolbarEl = document.getElementById('toolbar')!;
+const editorEl = document.getElementById('editor')!;
+const bubbleEl = document.getElementById('bubble')!;
 
-<u>[MIT](https://github.com/domternal/domternal/blob/main/LICENSE)</u>
+const dm = new DomternalEditor(editorEl, {
+  extensions: [StarterKit],
+  content: '<p>Hello world</p>',
+  onUpdate: ({ editor }) => console.log(editor.getHTML()),
+});
+
+new DomternalToolbar(toolbarEl, { editor: dm.editor });
+new DomternalBubbleMenu(bubbleEl, { editor: dm.editor });
+
+// Reactive-friendly getters:
+console.log(dm.htmlContent, dm.isEmpty);
+
+// CustomEvent subscription:
+dm.addEventListener('update', () => console.log('content changed'));
+
+// Cleanup (idempotent):
+dm.destroy();
+```
+
+The matching mount points:
+
+```html
+<div id="toolbar"></div>
+<div id="editor" class="dm-editor"></div>
+<div id="bubble" class="dm-bubble-menu"></div>
+```
+
+> Construction is browser-only: every constructor calls `assertBrowser()` and throws in
+> SSR. Module-scope imports stay SSR-safe, so gate instantiation behind a client-side
+> entry point (e.g. an Astro `<script>` block or `client:only`).
+
+## Exports
+
+- `DomternalEditor` / `DomternalEditorOptions` - wraps core's `Editor`, plus
+  `DEFAULT_EXTENSIONS` (Document, Paragraph, Text, BaseKeymap, History).
+- `DomternalToolbar`, `DomternalBubbleMenu`, `DomternalFloatingMenu`,
+  `DomternalEmojiPicker`, `DomternalNotionColorPicker` - the floating UI components.
+- Shared helpers: `isBrowser`, `assertBrowser`, `createPluginKey`, `renderIconInto`,
+  `resolveIcon`, `subscribe`.

package/dist/index.d.ts

@@ -190,6 +190,12 @@ declare const DEFAULT_EXTENSIONS: AnyExtension[];
 interface DomternalEditorOptions {
     /** Custom extensions to add. Merged on top of `DEFAULT_EXTENSIONS`. */
     extensions?: AnyExtension[];
+    /**
+     * Whether the built-in History extension is included. Disable it when an
+     * extension brings its own undo/redo, such as collaborative editing.
+     * @default true
+     */
+    history?: boolean;
     /** Initial editor content (HTML string or JSON). */
     content?: Content;
     /** Whether the editor is editable. @default true */

package/dist/index.js

@@ -76,9 +76,10 @@ var DomternalEditor = class extends EventTarget {
     this.#onFocus = options.onFocus;
     this.#onBlur = options.onBlur;
     this.#onDestroy = options.onDestroy;
+    const defaults = options.history ?? true ? DEFAULT_EXTENSIONS : DEFAULT_EXTENSIONS.filter((extension) => extension.name !== "history");
     this.editor = new Editor({
       element: host,
-      extensions: [...DEFAULT_EXTENSIONS, ...options.extensions ?? []],
+      extensions: [...defaults, ...options.extensions ?? []],
       content: options.content ?? "",
       editable: options.editable ?? true,
       autofocus: options.autofocus ?? false