@richhtmleditor/themes 1.0.0 → 1.1.0

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 (3) hide show
  1. package/README.md +90 -83
  2. package/package.json +1 -1
  3. package/src/richhtmleditor.css +1364 -95
package/README.md CHANGED
@@ -1,83 +1,90 @@
1
- # @richhtmleditor/themes
2
-
3
- Shared CSS for Rich HTML Editor — toolbar, content area, outline panel, selection mini-toolbar, tables, and dark mode tokens. Pair with [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) or any framework wrapper.
4
-
5
- **Current release: 1.0.0**
6
-
7
- **Repository:** [github.com/rajkishorsahu89/richhtmleditor](https://github.com/rajkishorsahu89/richhtmleditor)
8
-
9
- **Demo:** [richhtmleditor.vercel.app](https://richhtmleditor.vercel.app/) — [demo](https://richhtmleditor.vercel.app/demo) · [guide](https://richhtmleditor.vercel.app/guide) · [API](https://richhtmleditor.vercel.app/api). Doc Preview joint demo: [doc-preview-app.vercel.app/demo/enterprise](https://doc-preview-app.vercel.app/demo/enterprise)
10
-
11
- ### What's in 1.0.0
12
-
13
- - **`richhtmleditor.css`** — complete editor chrome (toolbar rows, buttons, dropdowns, content area)
14
- - **Dark mode** — `.de-root--dark` class toggled when `dark: true` is passed to `createEditor`
15
- - **CSS variables** — `--de-primary`, `--de-toolbar-bg`, `--de-content-bg`, `--de-border`, and more for theming
16
- - **Component styles** — outline panel, TOC nav, selection mini-toolbar, tables, collapsible sections, workflow bar slots
17
-
18
- > Side-effect CSS package — import once globally or in your bundler entry. No JavaScript runtime.
19
-
20
- **Keywords:** `richhtmleditor` `css` `theme` `dark-mode` `wysiwyg`
21
-
22
- ## Install
23
-
24
- ```bash
25
- npm install @richhtmleditor/themes
26
- # Typically installed alongside @richhtmleditor/core or a framework wrapper.
27
- ```
28
-
29
- ## Usage — bundler import
30
-
31
- ```ts
32
- import "@richhtmleditor/themes/richhtmleditor.css";
33
- ```
34
-
35
- ## Usage — Angular `angular.json`
36
-
37
- ```json
38
- "styles": ["node_modules/@richhtmleditor/themes/richhtmleditor.css"]
39
- ```
40
-
41
- ## Usage — dark mode
42
-
43
- ```ts
44
- createEditor({
45
- element: el,
46
- dark: true,
47
- theme: {
48
- primary: "#7c3aed",
49
- toolbarBg: "#1e293b",
50
- contentBg: "#0f172a"
51
- }
52
- });
53
- ```
54
-
55
- The editor root receives `de-root--dark` and your `theme` tokens map to CSS variables on `#richhtmleditor-root.de-root`.
56
-
57
- ## API
58
-
59
- | Export | Description |
60
- | --- | --- |
61
- | `@richhtmleditor/themes` | Alias for `richhtmleditor.css`. |
62
- | `@richhtmleditor/themes/richhtmleditor.css` | Main stylesheet path. |
63
-
64
- ### Key CSS variables
65
-
66
- | Variable | Default (light) | Used for |
67
- | --- | --- | --- |
68
- | `--de-primary` | `#2563eb` | Buttons, links, accents |
69
- | `--de-toolbar-bg` | `#ffffff` | Toolbar background |
70
- | `--de-content-bg` | `#ffffff` | Editable content area |
71
- | `--de-text-primary` | `#0f172a` | Body text |
72
- | `--de-border` | `#e2e8f0` | Dividers and borders |
73
-
74
- ## Related packages
75
-
76
- - [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) — editor engine (auto-required by wrappers).
77
- - [`@richhtmleditor/angular`](https://www.npmjs.com/package/@richhtmleditor/angular) — Angular component.
78
- - [`@richhtmleditor/react`](https://www.npmjs.com/package/@richhtmleditor/react) — React component.
79
- - [`@richhtmleditor/vue`](https://www.npmjs.com/package/@richhtmleditor/vue) — Vue 3 component.
80
-
81
- ## License
82
-
83
- [MIT](./LICENSE)
1
+ # @richhtmleditor/themes
2
+
3
+ Shared CSS for Rich HTML Editor — toolbar, content area, outline panel, selection mini-toolbar, tables, and dark mode tokens. Pair with [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) or any framework wrapper.
4
+
5
+ **Current release: 1.1.0**
6
+
7
+ **Repository:** [github.com/rajkishorsahu89/richhtmleditor](https://github.com/rajkishorsahu89/richhtmleditor)
8
+
9
+ **Demo:** [richhtmleditor.vercel.app](https://richhtmleditor.vercel.app/) — [demo](https://richhtmleditor.vercel.app/demo) · [guide](https://richhtmleditor.vercel.app/guide) · [API](https://richhtmleditor.vercel.app/api). Doc Preview joint demo: [doc-preview-app.vercel.app/demo/enterprise](https://doc-preview-app.vercel.app/demo/enterprise)
10
+
11
+ ### What's in 1.1.0
12
+
13
+ - **`richhtmleditor.css`** — complete editor chrome (toolbar rows, buttons, dropdowns, content area)
14
+ - **Dark mode** — `.de-root--dark` class toggled when `dark: true` is passed to `createEditor`
15
+ - **CSS variables** — `--de-primary`, `--de-toolbar-bg`, `--de-content-bg`, `--de-border`, and more for theming
16
+ - **Component styles** — outline panel, TOC nav, selection mini-toolbar, tables, collapsible sections, workflow bar slots
17
+ - **New in 1.1.0** — slash command menu, block drag handles, drop indicator, paste special modal, track changes panel styles
18
+
19
+ > Side-effect CSS package — import once globally or in your bundler entry. No JavaScript runtime.
20
+
21
+ **Keywords:** `richhtmleditor` `css` `theme` `dark-mode` `wysiwyg`
22
+
23
+ ## Install
24
+
25
+ ```bash
26
+ npm install @richhtmleditor/themes
27
+ # Typically installed alongside @richhtmleditor/core or a framework wrapper.
28
+ ```
29
+
30
+ ## Usage — bundler import
31
+
32
+ ```ts
33
+ import "@richhtmleditor/themes/richhtmleditor.css";
34
+ ```
35
+
36
+ ## Usage — Angular `angular.json`
37
+
38
+ ```json
39
+ "styles": ["node_modules/@richhtmleditor/themes/richhtmleditor.css"]
40
+ ```
41
+
42
+ ## Usage — dark mode
43
+
44
+ ```ts
45
+ createEditor({
46
+ element: el,
47
+ dark: true,
48
+ theme: {
49
+ primary: "#7c3aed",
50
+ toolbarBg: "#1e293b",
51
+ contentBg: "#0f172a"
52
+ }
53
+ });
54
+ ```
55
+
56
+ The editor root receives `de-root--dark` and your `theme` tokens map to CSS variables on `#richhtmleditor-root.de-root`.
57
+
58
+ ## API
59
+
60
+ | Export | Description |
61
+ | --- | --- |
62
+ | `@richhtmleditor/themes` | Alias for `richhtmleditor.css`. |
63
+ | `@richhtmleditor/themes/richhtmleditor.css` | Main stylesheet path. |
64
+
65
+ ### Key CSS variables
66
+
67
+ | Variable | Default (light) | Used for |
68
+ | --- | --- | --- |
69
+ | `--de-primary` | `#2563eb` | Buttons, links, accents |
70
+ | `--de-toolbar-bg` | `#ffffff` | Toolbar background |
71
+ | `--de-content-bg` | `#ffffff` | Editable content area |
72
+ | `--de-text-primary` | `#0f172a` | Body text |
73
+ | `--de-border` | `#e2e8f0` | Dividers and borders |
74
+
75
+ ## Related packages
76
+
77
+ - [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) — editor engine (auto-required by wrappers).
78
+ - [`@richhtmleditor/angular`](https://www.npmjs.com/package/@richhtmleditor/angular) — Angular component.
79
+ - [`@richhtmleditor/react`](https://www.npmjs.com/package/@richhtmleditor/react) — React component.
80
+ - [`@richhtmleditor/vue`](https://www.npmjs.com/package/@richhtmleditor/vue) — Vue 3 component.
81
+ - [`@richhtmleditor/diagrams`](https://www.npmjs.com/package/@richhtmleditor/diagrams) — Mermaid diagrams plugin.
82
+ - [`@richhtmleditor/math`](https://www.npmjs.com/package/@richhtmleditor/math) — LaTeX/MathML equation plugin.
83
+ - [`@richhtmleditor/export`](https://www.npmjs.com/package/@richhtmleditor/export) — DOCX/PDF/HTML export plugin.
84
+ - [`@richhtmleditor/spellcheck`](https://www.npmjs.com/package/@richhtmleditor/spellcheck) — real-time spell check plugin.
85
+ - [`@richhtmleditor/templates`](https://www.npmjs.com/package/@richhtmleditor/templates) — document templates plugin.
86
+ - [`@richhtmleditor/mentions`](https://www.npmjs.com/package/@richhtmleditor/mentions) — @ mentions plugin.
87
+
88
+ ## License
89
+
90
+ [MIT](./LICENSE)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@richhtmleditor/themes",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "CSS themes for Rich HTML Editor.",
5
5
  "type": "module",
6
6
  "style": "./src/richhtmleditor.css",