@mdaemon/html-editor-react 1.8.2 → 1.8.4
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 +48 -17
- package/package.json +90 -87
package/README.md
CHANGED
|
@@ -1,19 +1,25 @@
|
|
|
1
|
-
|
|
1
|
+
# @mdaemon/html-editor-react
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@mdaemon/html-editor-react)
|
|
4
|
+
[](LICENSE)
|
|
5
|
+
[](https://nodejs.org)
|
|
6
|
+
[](https://packagephobia.com/result?p=@mdaemon/html-editor-react)
|
|
7
|
+
[](https://github.com/mdaemon-technologies/MDHTMLEditor-react/actions/workflows/ci.yml)
|
|
8
|
+
|
|
9
|
+
React wrapper for MDHTMLEditor
|
|
4
10
|
|
|
5
11
|
A React wrapper for [MDHTMLEditor](https://github.com/mdaemon-technologies/MDHTMLEditor) — a WYSIWYG HTML editor built on TipTap. Provides a drop-in replacement for `@tinymce/tinymce-react` with no license key required.
|
|
6
12
|
|
|
7
|
-
##
|
|
13
|
+
## Install
|
|
8
14
|
|
|
9
15
|
```bash
|
|
10
|
-
npm install @mdaemon/html-editor-react
|
|
16
|
+
npm install @mdaemon/html-editor-react
|
|
11
17
|
```
|
|
12
18
|
|
|
13
19
|
**Peer dependencies:** `react` and `react-dom` (v18 or v19).
|
|
14
20
|
|
|
15
21
|
**TipTap:** the editor is built on TipTap 3, and this package tracks the same version the
|
|
16
|
-
engine uses — currently **3.31.3** (`@mdaemon/html-editor` `^1.12.
|
|
22
|
+
engine uses — currently **3.31.3** (`@mdaemon/html-editor` `^1.12.3`,
|
|
17
23
|
`@tiptap/react` `^3.31.3`). If your app depends on any `@tiptap/*` package directly, keep
|
|
18
24
|
it on that version too: ProseMirror throws at runtime if two copies of `@tiptap/core` /
|
|
19
25
|
`@tiptap/pm` end up in the bundle. If you only use `<Editor>` or `useEditor`, there is
|
|
@@ -484,7 +490,7 @@ const templates: Template[] = [
|
|
|
484
490
|
|
|
485
491
|
The `Template` interface:
|
|
486
492
|
|
|
487
|
-
```
|
|
493
|
+
```ts
|
|
488
494
|
interface Template {
|
|
489
495
|
id?: number | string;
|
|
490
496
|
title: string;
|
|
@@ -498,6 +504,23 @@ tabs between block elements are collapsed per the usual HTML rules when the temp
|
|
|
498
504
|
inserted, so they do not become extra list items or blank blocks. Indentation inside a
|
|
499
505
|
`<pre>` or code block is preserved.
|
|
500
506
|
|
|
507
|
+
Stored templates are also tolerant of the wrappers and placeholders real-world HTML
|
|
508
|
+
carries:
|
|
509
|
+
|
|
510
|
+
- **Container `<div>`s do not become blank lines.** A body swaddled in several nested
|
|
511
|
+
`<div>`s (the shape mail clients and CMSes produce) is flattened on import rather than
|
|
512
|
+
leaving one empty line per wrapper.
|
|
513
|
+
- **A wrapper's font reaches the lines it wrapped.** `font-family`, `font-size`, `color`,
|
|
514
|
+
`line-height`, `text-align` and the other inherited properties on a container are
|
|
515
|
+
carried down to its children, so a body wrapped in
|
|
516
|
+
`<div style="font-family:Georgia;font-size:10pt">` keeps that font instead of falling
|
|
517
|
+
back to the editor default. A child that states its own value wins.
|
|
518
|
+
- **`<a href="">` survives.** A link whose target was left for later keeps its anchor
|
|
519
|
+
element instead of collapsing to plain text. Non-empty targets are still validated, so
|
|
520
|
+
`javascript:` and `data:` URLs are rejected as before.
|
|
521
|
+
|
|
522
|
+
`<blockquote>`, list items, table cells and the signature container keep their structure.
|
|
523
|
+
|
|
501
524
|
## Custom Toolbar Buttons
|
|
502
525
|
|
|
503
526
|
Register custom buttons via the `setup` callback in `config`:
|
|
@@ -790,16 +813,6 @@ Key differences:
|
|
|
790
813
|
- `plugins` option is not needed — all features are built in
|
|
791
814
|
- Toolbar customization uses `basicEditor: true/false` or a `toolbar` string
|
|
792
815
|
|
|
793
|
-
## Running the Demo
|
|
794
|
-
|
|
795
|
-
A demo app is included to see the editor in action:
|
|
796
|
-
|
|
797
|
-
```bash
|
|
798
|
-
npm run demo
|
|
799
|
-
```
|
|
800
|
-
|
|
801
|
-
This starts a Vite dev server at `http://localhost:5173` with three sections: the `<Editor>` component, the `useEditor` hook, and a [Fonts](#fonts) panel with a live `getFontFamily()` / `getFontSize()` readout that follows the cursor and buttons for the block-font commands.
|
|
802
|
-
|
|
803
816
|
## Development
|
|
804
817
|
|
|
805
818
|
The package is bundled with [Vite 8](https://vite.dev/) (Rolldown) and ships ES, CommonJS, and TypeScript declaration outputs.
|
|
@@ -819,6 +832,24 @@ The package is bundled with [Vite 8](https://vite.dev/) (Rolldown) and ships ES,
|
|
|
819
832
|
|
|
820
833
|
Lint, typecheck, and tests run automatically in [CI](.github/workflows/ci.yml) on every push and pull request to `master` across Node 20, 22, 24, and 26.
|
|
821
834
|
|
|
835
|
+
### Running the Demo
|
|
836
|
+
|
|
837
|
+
A demo app is included to see the editor in action:
|
|
838
|
+
|
|
839
|
+
```bash
|
|
840
|
+
npm run demo
|
|
841
|
+
```
|
|
842
|
+
|
|
843
|
+
This starts a Vite dev server at `http://localhost:5173` with three sections: the `<Editor>` component, the `useEditor` hook, and a [Fonts](#fonts) panel with a live `getFontFamily()` / `getFontSize()` readout that follows the cursor and buttons for the block-font commands.
|
|
844
|
+
|
|
845
|
+
## Changelog
|
|
846
|
+
|
|
847
|
+
See [CHANGELOG.md](CHANGELOG.md).
|
|
848
|
+
|
|
822
849
|
## License
|
|
823
850
|
|
|
824
|
-
LGPL-3.0-or-later
|
|
851
|
+
Published under the [LGPL-3.0-or-later](LICENSE) license.
|
|
852
|
+
|
|
853
|
+
Published by **MDaemon Technologies, Ltd.**
|
|
854
|
+
Simple Secure Email
|
|
855
|
+
[https://www.mdaemon.com](https://www.mdaemon.com)
|
package/package.json
CHANGED
|
@@ -1,87 +1,90 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@mdaemon/html-editor-react",
|
|
3
|
-
"version": "1.8.
|
|
4
|
-
"description": "React wrapper for MDHTMLEditor",
|
|
5
|
-
"homepage": "https://github.com/mdaemon-technologies/MDHTMLEditor-react",
|
|
6
|
-
"repository": {
|
|
7
|
-
"type": "git",
|
|
8
|
-
"url": "https://github.com/mdaemon-technologies/MDHTMLEditor-react.git"
|
|
9
|
-
},
|
|
10
|
-
"bugs": {
|
|
11
|
-
"url": "https://github.com/mdaemon-technologies/MDHTMLEditor-react/issues"
|
|
12
|
-
},
|
|
13
|
-
"main": "dist/index.js",
|
|
14
|
-
"module": "dist/index.mjs",
|
|
15
|
-
"types": "dist/index.d.ts",
|
|
16
|
-
"exports": {
|
|
17
|
-
".": {
|
|
18
|
-
"types": "./dist/index.d.ts",
|
|
19
|
-
"import": "./dist/index.mjs",
|
|
20
|
-
"require": "./dist/index.js"
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
"publishConfig": {
|
|
24
|
-
"access": "public"
|
|
25
|
-
},
|
|
26
|
-
"files": [
|
|
27
|
-
"dist"
|
|
28
|
-
],
|
|
29
|
-
"scripts": {
|
|
30
|
-
"build": "vite build --mode production",
|
|
31
|
-
"build:dev": "vite build --mode development",
|
|
32
|
-
"dev": "vite build --watch --mode development",
|
|
33
|
-
"demo": "vite serve --config vite.demo.config.ts",
|
|
34
|
-
"test": "jest",
|
|
35
|
-
"test:coverage": "jest --coverage",
|
|
36
|
-
"lint": "eslint src --ext .ts,.tsx",
|
|
37
|
-
"typecheck": "tsc --noEmit"
|
|
38
|
-
},
|
|
39
|
-
"keywords": [
|
|
40
|
-
"html-editor",
|
|
41
|
-
"wysiwyg",
|
|
42
|
-
"react",
|
|
43
|
-
"tiptap"
|
|
44
|
-
],
|
|
45
|
-
"author": {
|
|
46
|
-
"name": "MDaemon Technologies, Ltd.",
|
|
47
|
-
"email": "jonathan.ehman@mdaemon.com",
|
|
48
|
-
"url": "https://www.mdaemon.com"
|
|
49
|
-
},
|
|
50
|
-
"license": "LGPL-3.0-or-later",
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
"
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
"@
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
"@
|
|
64
|
-
"@
|
|
65
|
-
"@
|
|
66
|
-
"@
|
|
67
|
-
"@
|
|
68
|
-
"@
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
"
|
|
79
|
-
"
|
|
80
|
-
"
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
"
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "@mdaemon/html-editor-react",
|
|
3
|
+
"version": "1.8.4",
|
|
4
|
+
"description": "React wrapper for MDHTMLEditor",
|
|
5
|
+
"homepage": "https://github.com/mdaemon-technologies/MDHTMLEditor-react",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/mdaemon-technologies/MDHTMLEditor-react.git"
|
|
9
|
+
},
|
|
10
|
+
"bugs": {
|
|
11
|
+
"url": "https://github.com/mdaemon-technologies/MDHTMLEditor-react/issues"
|
|
12
|
+
},
|
|
13
|
+
"main": "dist/index.js",
|
|
14
|
+
"module": "dist/index.mjs",
|
|
15
|
+
"types": "dist/index.d.ts",
|
|
16
|
+
"exports": {
|
|
17
|
+
".": {
|
|
18
|
+
"types": "./dist/index.d.ts",
|
|
19
|
+
"import": "./dist/index.mjs",
|
|
20
|
+
"require": "./dist/index.js"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"publishConfig": {
|
|
24
|
+
"access": "public"
|
|
25
|
+
},
|
|
26
|
+
"files": [
|
|
27
|
+
"dist"
|
|
28
|
+
],
|
|
29
|
+
"scripts": {
|
|
30
|
+
"build": "vite build --mode production",
|
|
31
|
+
"build:dev": "vite build --mode development",
|
|
32
|
+
"dev": "vite build --watch --mode development",
|
|
33
|
+
"demo": "vite serve --config vite.demo.config.ts",
|
|
34
|
+
"test": "jest",
|
|
35
|
+
"test:coverage": "jest --coverage",
|
|
36
|
+
"lint": "eslint src --ext .ts,.tsx",
|
|
37
|
+
"typecheck": "tsc --noEmit"
|
|
38
|
+
},
|
|
39
|
+
"keywords": [
|
|
40
|
+
"html-editor",
|
|
41
|
+
"wysiwyg",
|
|
42
|
+
"react",
|
|
43
|
+
"tiptap"
|
|
44
|
+
],
|
|
45
|
+
"author": {
|
|
46
|
+
"name": "MDaemon Technologies, Ltd.",
|
|
47
|
+
"email": "jonathan.ehman@mdaemon.com",
|
|
48
|
+
"url": "https://www.mdaemon.com"
|
|
49
|
+
},
|
|
50
|
+
"license": "LGPL-3.0-or-later",
|
|
51
|
+
"engines": {
|
|
52
|
+
"node": ">=20"
|
|
53
|
+
},
|
|
54
|
+
"peerDependencies": {
|
|
55
|
+
"react": "^19.0.0 || ^18.0.0",
|
|
56
|
+
"react-dom": "^19.0.0 || ^18.0.0"
|
|
57
|
+
},
|
|
58
|
+
"dependencies": {
|
|
59
|
+
"@mdaemon/html-editor": "^1.12.3",
|
|
60
|
+
"@tiptap/react": "^3.31.3"
|
|
61
|
+
},
|
|
62
|
+
"devDependencies": {
|
|
63
|
+
"@eslint/js": "^9.39.4",
|
|
64
|
+
"@swc/core": "^1.11.0",
|
|
65
|
+
"@swc/jest": "^0.2.39",
|
|
66
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
67
|
+
"@testing-library/react": "^16.3.2",
|
|
68
|
+
"@types/jest": "^30.0.0",
|
|
69
|
+
"@types/react": "^19.2.0",
|
|
70
|
+
"@types/react-dom": "^19.2.0",
|
|
71
|
+
"@vitejs/plugin-react": "^6.0.2",
|
|
72
|
+
"eslint": "^9.39.4",
|
|
73
|
+
"eslint-plugin-react": "^7.37.5",
|
|
74
|
+
"eslint-plugin-react-hooks": "^5.2.0",
|
|
75
|
+
"globals": "^15.15.0",
|
|
76
|
+
"jest": "^30.3.0",
|
|
77
|
+
"jest-environment-jsdom": "^30.3.0",
|
|
78
|
+
"react": "^19.2.0",
|
|
79
|
+
"react-dom": "^19.2.0",
|
|
80
|
+
"typescript": "^6.0.2",
|
|
81
|
+
"typescript-eslint": "^8.61.0",
|
|
82
|
+
"vite": "^8.0.16",
|
|
83
|
+
"vite-plugin-dts": "^5.0.2"
|
|
84
|
+
},
|
|
85
|
+
"allowScripts": {
|
|
86
|
+
"@swc/core": true,
|
|
87
|
+
"esbuild": true,
|
|
88
|
+
"unrs-resolver": true
|
|
89
|
+
}
|
|
90
|
+
}
|