@domternal/angular 0.2.0 → 0.2.1

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.
Files changed (2) hide show
  1. package/README.md +23 -58
  2. package/package.json +8 -8
package/README.md CHANGED
@@ -1,70 +1,35 @@
1
1
  # @domternal/angular
2
2
 
3
- Angular components for the Domternal editor: editor, toolbar, bubble menu, floating menu, and emoji picker. Standalone components with signals, OnPush change detection, reactive forms (`ControlValueAccessor`), and zoneless mode support.
3
+ [![Version](https://img.shields.io/npm/v/@domternal/angular.svg)](https://www.npmjs.com/package/@domternal/angular)
4
+ [![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/domternal/domternal/blob/main/LICENSE)
4
5
 
5
- Part of the [Domternal](https://github.com/domternal/domternal) toolkit. Full docs at [domternal.dev](https://domternal.dev).
6
+ A lightweight, extensible rich text editor toolkit built on [ProseMirror](https://prosemirror.net/). Framework-agnostic headless core with first-class **Angular** support. Use it headless with vanilla JS/TS, add the built-in toolbar and theme, or drop in ready-made Angular components. Fully tree-shakeable, import only what you use, unused extensions are stripped from your bundle.
6
7
 
7
- Requires Angular 17.1+.
8
+ **[Website](https://domternal.dev)** · **[Documentation](https://domternal.dev/v1/introduction)** · **[StackBlitz (Vanilla TS)](https://stackblitz.com/edit/domternal-vanilla-full-example)** · **[StackBlitz (Angular)](https://stackblitz.com/edit/domternal-angular-full-example)**
8
9
 
9
- ## Installation
10
+ ## Features
10
11
 
11
- ```bash
12
- npm install @domternal/core @domternal/theme @domternal/angular
13
- ```
12
+ See [Packages & Bundle Size](https://domternal.dev/v1/packages) for a full breakdown of all packages and what each one includes.
14
13
 
15
- ## Quick Start
14
+ - **Headless core** - use with any framework or vanilla JS/TS
15
+ - **Angular components** - editor, toolbar, bubble menu, floating menu, emoji picker (signals, OnPush, zoneless-ready)
16
+ - **57 extensions across 10 packages** - 23 nodes, 9 marks, and 25 behavior extensions
17
+ - **140+ chainable commands** - `editor.chain().focus().toggleBold().run()`
18
+ - **Full table support** - cell merging, column resize, row/column controls, cell toolbar, all free and MIT licensed
19
+ - **Tree-shakeable** - import only what you use, your bundler strips the rest
20
+ - **~38 KB gzipped** (own code), [~108 KB total](https://domternal.dev/v1/packages) with ProseMirror
21
+ - **TypeScript first** - 100% typed, zero `any`
22
+ - **4,200+ tests** - 2,675 unit tests and 1,550 E2E tests across 34 Playwright specs
23
+ - **Light and dark theme** - 70+ CSS custom properties for full visual control
24
+ - **Inline styles export** - `getHTML({ styled: true })` produces inline CSS ready for email clients, CMS, and Google Docs
25
+ - **SSR helpers** - `generateHTML`, `generateJSON`, `generateText` for server-side rendering
16
26
 
17
- ```ts
18
- import { Component, signal } from '@angular/core';
19
- import {
20
- DomternalEditorComponent,
21
- DomternalToolbarComponent,
22
- DomternalBubbleMenuComponent,
23
- } from '@domternal/angular';
24
- import { Editor, StarterKit, BubbleMenu } from '@domternal/core';
27
+ ## Documentation
25
28
 
26
- @Component({
27
- imports: [DomternalEditorComponent, DomternalToolbarComponent, DomternalBubbleMenuComponent],
28
- template: `
29
- @if (editor(); as ed) {
30
- <domternal-toolbar [editor]="ed" />
31
- }
32
- <domternal-editor
33
- [extensions]="extensions"
34
- [content]="content"
35
- (editorCreated)="editor.set($event)"
36
- />
37
- @if (editor(); as ed) {
38
- <domternal-bubble-menu [editor]="ed" />
39
- }
40
- `,
41
- })
42
- export class EditorComponent {
43
- editor = signal<Editor | null>(null);
44
- extensions = [StarterKit, BubbleMenu];
45
- content = '<p>Hello from Angular!</p>';
46
- }
47
- ```
48
-
49
- ### Global Styles
50
-
51
- Add the theme to your global stylesheet to load editor and toolbar styles:
52
-
53
- ```scss
54
- @use '@domternal/theme';
55
- ```
56
-
57
- ### Available Components
58
-
59
- | Component | Description |
60
- |---|---|
61
- | `<domternal-editor>` | The core editor surface |
62
- | `<domternal-toolbar>` | Auto-renders toolbar buttons based on provided extensions |
63
- | `<domternal-bubble-menu>` | Contextual formatting menu on text selection |
64
- | `<domternal-floating-menu>` | Block-level insertion menu on empty lines |
65
- | `<domternal-emoji-picker>` | Emoji picker panel for the Emoji extension |
66
-
67
- The toolbar and bubble menu components auto-render buttons based on the extensions you provide. No manual button wiring needed.
29
+ - [Getting Started](https://domternal.dev/v1/getting-started) - install and create your first editor
30
+ - [Introduction](https://domternal.dev/v1/introduction) - core concepts, architecture, and design decisions
31
+ - [Packages & Bundle Size](https://domternal.dev/v1/packages) - what each package includes and bundle size breakdown
32
+ - [Blog](https://domternal.dev/blog)
68
33
 
69
34
  ## License
70
35
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@domternal/angular",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "description": "Angular components for Domternal editor",
5
5
  "author": "https://github.com/ThomasNowHere",
6
6
  "license": "MIT",
@@ -31,12 +31,9 @@
31
31
  "@angular/core": "^21.2.4",
32
32
  "@angular/forms": "^21.2.4",
33
33
  "@angular/platform-browser": "^21.2.4",
34
- "@domternal/core": "workspace:*",
35
34
  "ng-packagr": "^21.0.0",
36
- "typescript": "~5.9.3"
37
- },
38
- "scripts": {
39
- "build": "ng-packagr -p ng-package.json"
35
+ "typescript": "~5.9.3",
36
+ "@domternal/core": "0.2.1"
40
37
  },
41
38
  "keywords": [
42
39
  "angular",
@@ -53,5 +50,8 @@
53
50
  "bugs": {
54
51
  "url": "https://github.com/domternal/domternal/issues"
55
52
  },
56
- "homepage": "https://domternal.dev"
57
- }
53
+ "homepage": "https://domternal.dev",
54
+ "scripts": {
55
+ "build": "ng-packagr -p ng-package.json"
56
+ }
57
+ }