Skip to content

Commit 1db3dcd

Browse files
North15North15
committed
Refactor plugin registration and toolbar management for improved readability and consistency
- Updated the `registerPlugin` function to use consistent formatting and arrow functions. - Enhanced the `parseToolbar`, `getToolbarButton`, and `buildToolbarLayout` functions for better readability. - Refactored the `cloneButton` and `validatePlugins` functions to maintain consistent code style. - Reformatted plugin registrations for core, formatting, blocks, lists, links, tables, tasks, and math plugins to use consistent string quotes. - Improved test cases in `editor-core-behavior.spec.mjs` for consistency in string quotes and formatting. - Updated TypeScript definitions in `index.d.ts` to use consistent string quotes and formatting.
1 parent 690322e commit 1db3dcd

7 files changed

Lines changed: 1101 additions & 804 deletions

File tree

‎README.md‎

Lines changed: 77 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@
66
![Package Version](https://img.shields.io/badge/version-0.5.3-informational.svg)
77
![License](https://img.shields.io/badge/license-MIT-blue.svg)
88

9-
10-
119
A rich text editor with security-first design, accessibility focus, and modern developer experience. Plugin system, declarative toolbar, CSS variables theming, and TypeScript support.
1210

1311
## ⚡ Quick Start
@@ -16,19 +14,23 @@ A rich text editor with security-first design, accessibility focus, and modern d
1614

1715
```html
1816
<!-- Include CSS and JS -->
19-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ednotes-richtext@0.5.3/dist/ednotes.richtext.css">
17+
<link
18+
rel="stylesheet"
19+
href="https://cdn.jsdelivr.net/npm/ednotes-richtext@0.5.3/dist/ednotes.richtext.css"
20+
/>
2021
<script src="https://cdn.jsdelivr.net/npm/ednotes-richtext@0.5.3/dist/ednotes.richtext.umd.min.js"></script>
2122

2223
<!-- Your textarea -->
2324
<textarea id="content">Start typing...</textarea>
2425

2526
<!-- Initialize -->
2627
<script>
27-
EdNotesRichText.init({
28-
selector: '#content',
29-
plugins: 'core formatting blocks lists links tables tasks math',
30-
toolbar: 'undo redo | blocks | bold italic underline | link unlink | numlist bullist task | table math | removeformat'
31-
});
28+
EdNotesRichText.init({
29+
selector: "#content",
30+
plugins: "core formatting blocks lists links tables tasks math",
31+
toolbar:
32+
"undo redo | blocks | bold italic underline | link unlink | numlist bullist task | table math | removeformat",
33+
});
3234
</script>
3335
```
3436

@@ -39,66 +41,69 @@ npm install ednotes-richtext
3941
```
4042

4143
```javascript
42-
import EdNotesRichText from 'ednotes-richtext';
44+
import EdNotesRichText from "ednotes-richtext";
4345

4446
EdNotesRichText.init({
45-
selector: 'textarea',
46-
plugins: 'core formatting lists links',
47-
toolbar: 'undo redo | bold italic | numlist bullist | link'
47+
selector: "textarea",
48+
plugins: "core formatting lists links",
49+
toolbar: "undo redo | bold italic | numlist bullist | link",
4850
});
4951
```
5052

5153
### ASP.NET Core / .NET Framework
5254

5355
```html
5456
<!-- Include CSS -->
55-
<link rel="stylesheet" href="~/_content/EdNotes.RichText/editor/ednotes.richtext.css">
57+
<link
58+
rel="stylesheet"
59+
href="~/_content/EdNotes.RichText/editor/ednotes.richtext.css"
60+
/>
5661

5762
<!-- Auto-loading script -->
5863
<script src="~/_content/EdNotes.RichText/editor/ednotes.richtext.loader.js"></script>
5964

6065
<textarea id="notes"></textarea>
6166
<script>
62-
EdNotesRichText.init({ selector: '#notes' });
67+
EdNotesRichText.init({ selector: "#notes" });
6368
</script>
6469
```
6570

6671
## Feature Highlights
6772

68-
* Strict schema (allowed tags only): paragraphs, h1‑h3, lists (ul/ol/li), blockquote, code/pre, tables (thead/tbody/tr/th/td), task lists (ul[data-list="task"]).
69-
* Marks: strong / em / u / a / math (KaTeX rendering).
70-
* Sanitization: client normalization + server `HtmlPolicySanitizer` (allowlist attributes, link protocol enforcement, removal of scripts/iframes/styles, whitespace & encoded `javascript:` defense).
71-
* Undo/redo history with idle typing batching & size cap.
72-
* List indent/outdent via Tab / Shift+Tab.
73-
* Task list toggle, ensures default `data-checked` flags.
74-
* Table structural repair (moves stray `tr` into `tbody`, strips disallowed descendants).
75-
* Link add/remove with protocol allowlist (`https:`, `http:`, `mailto:`, `tel:`) and automatic `target="_blank" rel="noopener noreferrer"`.
76-
* Autosave hook (interval + change detection) for persistence.
77-
* Exports: plain text (block separated) and minimal Markdown mapping.
78-
* Accessibility: toolbar `role=toolbar` + roving tabindex, ARIA pressed state reflection, live region announcements (`Applied bold`, `Applied heading h2`), keyboard shortcuts (Ctrl+B/I/U, Ctrl+Alt+1/2/3, Tab indent), polite updates.
79-
* Headless/test resilience: graceful fallback when `document.execCommand` not present (jsdom) and safe custom event dispatch.
73+
- Strict schema (allowed tags only): paragraphs, h1‑h3, lists (ul/ol/li), blockquote, code/pre, tables (thead/tbody/tr/th/td), task lists (ul[data-list="task"]).
74+
- Marks: strong / em / u / a / math (KaTeX rendering).
75+
- Sanitization: client normalization + server `HtmlPolicySanitizer` (allowlist attributes, link protocol enforcement, removal of scripts/iframes/styles, whitespace & encoded `javascript:` defense).
76+
- Undo/redo history with idle typing batching & size cap.
77+
- List indent/outdent via Tab / Shift+Tab.
78+
- Task list toggle, ensures default `data-checked` flags.
79+
- Table structural repair (moves stray `tr` into `tbody`, strips disallowed descendants).
80+
- Link add/remove with protocol allowlist (`https:`, `http:`, `mailto:`, `tel:`) and automatic `target="_blank" rel="noopener noreferrer"`.
81+
- Autosave hook (interval + change detection) for persistence.
82+
- Exports: plain text (block separated) and minimal Markdown mapping.
83+
- Accessibility: toolbar `role=toolbar` + roving tabindex, ARIA pressed state reflection, live region announcements (`Applied bold`, `Applied heading h2`), keyboard shortcuts (Ctrl+B/I/U, Ctrl+Alt+1/2/3, Tab indent), polite updates.
84+
- Headless/test resilience: graceful fallback when `document.execCommand` not present (jsdom) and safe custom event dispatch.
8085

8186
## JavaScript API
8287

83-
| Method | Description |
84-
| ------ | ----------- |
85-
| `RichText.attach(selector, options)` | Enhance all matching `<textarea>` elements. |
86-
| `RichText.undo()` / `redo()` | Global undo/redo across instances. |
87-
| `RichText.triggerSave()` | Sync underlying textarea values. |
88-
| `RichText.exportAllPlain()` | Array of plain text for each instance. |
89-
| `RichText.exportAllMarkdown()` | Array of Markdown outputs. |
90-
| `RichText.exportAllHTML()` | Array of HTML outputs. |
91-
| `RichText._all()` | (Internal) array of editor instances (useful for tests). |
88+
| Method | Description |
89+
| ------------------------------------ | -------------------------------------------------------- |
90+
| `RichText.attach(selector, options)` | Enhance all matching `<textarea>` elements. |
91+
| `RichText.undo()` / `redo()` | Global undo/redo across instances. |
92+
| `RichText.triggerSave()` | Sync underlying textarea values. |
93+
| `RichText.exportAllPlain()` | Array of plain text for each instance. |
94+
| `RichText.exportAllMarkdown()` | Array of Markdown outputs. |
95+
| `RichText.exportAllHTML()` | Array of HTML outputs. |
96+
| `RichText._all()` | (Internal) array of editor instances (useful for tests). |
9297

9398
### Options
9499

95-
| Option | Type | Purpose |
96-
| ------ | ---- | ------- |
97-
| `historyLimit` | number | Max history entries (default 100). |
98-
| `onChange` | `(html)=>void` | Called after each transactional change. |
99-
| `autosaveIntervalMs` | number | Start autosave timer if provided. |
100-
| `onAutosave` | `(html)=>void` | Receives html only when changed since last autosave tick. |
101-
| `promptLink` | function | Override link input acquisition (testable). |
100+
| Option | Type | Purpose |
101+
| -------------------- | -------------- | --------------------------------------------------------- |
102+
| `historyLimit` | number | Max history entries (default 100). |
103+
| `onChange` | `(html)=>void` | Called after each transactional change. |
104+
| `autosaveIntervalMs` | number | Start autosave timer if provided. |
105+
| `onAutosave` | `(html)=>void` | Receives html only when changed since last autosave tick. |
106+
| `promptLink` | function | Override link input acquisition (testable). |
102107

103108
## Security Model
104109

@@ -110,17 +115,17 @@ EdNotesRichText.init({ selector: '#notes' });
110115

111116
## Accessibility (WCAG 2.2 AA Intent)
112117

113-
* Toolbar: roving tabindex with arrow key navigation; each button has `aria-label`.
114-
* Live region (polite) announces successful command application.
115-
* Keyboard shortcuts documented above; headings via Ctrl+Alt+1/2/3 for quick structure.
116-
* Focus stays in editor; undo/redo notifies via updated content (consider adding optional audible notifications later).
118+
- Toolbar: roving tabindex with arrow key navigation; each button has `aria-label`.
119+
- Live region (polite) announces successful command application.
120+
- Keyboard shortcuts documented above; headings via Ctrl+Alt+1/2/3 for quick structure.
121+
- Focus stays in editor; undo/redo notifies via updated content (consider adding optional audible notifications later).
117122

118123
## Themes
119124

120125
Apply CSS classes to the editor root for education-friendly themes:
121126

122-
* `.theme-high-contrast`: Black background, white text/borders.
123-
* `.theme-dyslexia`: Comic Sans font, light blue background.
127+
- `.theme-high-contrast`: Black background, white text/borders.
128+
- `.theme-dyslexia`: Comic Sans font, light blue background.
124129

125130
Example:
126131

@@ -134,43 +139,42 @@ Example:
134139

135140
`scripts/bench-normalize.mjs` benchmarks normalization over synthetic documents. CI captures the JSON and invokes `scripts/perf-regression-check.mjs` with:
136141

137-
* PERF_BASELINE_MS_PER_BLOCK=0.60
138-
* PERF_TOLERANCE_PCT=20
142+
- PERF_BASELINE_MS_PER_BLOCK=0.60
143+
- PERF_TOLERANCE_PCT=20
139144

140-
If average ms/block > baseline * (1 + tolerance/100) the build fails. After intentional performance-affecting changes capture a fresh benchmark and update env values in `.github/workflows/ci.yml`.
145+
If average ms/block > baseline \* (1 + tolerance/100) the build fails. After intentional performance-affecting changes capture a fresh benchmark and update env values in `.github/workflows/ci.yml`.
141146

142147
## Development Scripts
143148

144-
| Command | Action |
145-
| ------- | ------ |
146-
| `npm run test` | JS tests + coverage output under `artifacts/coverage/js`. |
147-
| `npm run lint` | ESLint over editor sources. |
148-
| `npm run bench:normalize` | Run normalization benchmark locally. |
149-
| `npm run build:js` | Build ESM + UMD + minified bundles to `dist/`. |
150-
| `npm run build:js:prod` | Build JS bundles (including min) and list outputs. |
151-
| `npm run coverage:check` | Enforce JS coverage threshold (CI gate). |
152-
| `dotnet test` | Run .NET unit tests (sanitizer parity, etc.). |
149+
| Command | Action |
150+
| ------------------------- | --------------------------------------------------------- |
151+
| `npm run test` | JS tests + coverage output under `artifacts/coverage/js`. |
152+
| `npm run lint` | ESLint over editor sources. |
153+
| `npm run bench:normalize` | Run normalization benchmark locally. |
154+
| `npm run build:js` | Build ESM + UMD + minified bundles to `dist/`. |
155+
| `npm run build:js:prod` | Build JS bundles (including min) and list outputs. |
156+
| `npm run coverage:check` | Enforce JS coverage threshold (CI gate). |
157+
| `dotnet test` | Run .NET unit tests (sanitizer parity, etc.). |
153158

154159
## Contributing
155160

156161
Please open issues for feature proposals (keep scope small). PRs should include:
157162

158-
* Tests (Jest or xUnit) for new logic / edge cases.
159-
* No expansion of allowed tags without a security review rationale.
160-
* Accessibility impact assessment (keyboard & screen reader).
163+
- Tests (Jest or xUnit) for new logic / edge cases.
164+
- No expansion of allowed tags without a security review rationale.
165+
- Accessibility impact assessment (keyboard & screen reader).
161166

162167
## Roadmap (Next)
163168

164-
* Math equation rendering (KaTeX) ✅
165-
* Mobile responsiveness improvements ✅
166-
* Education-friendly themes ✅
167-
* HTML export ✅
168-
* Increased test coverage ✅
169-
* More sanitizer parity tests (.NET) for encoded edge cases ✅
170-
* Task list interaction (toggle checked state via keyboard) ✅
171-
* Heading level cycling / remove heading shortcut ✅
172-
* Documentation site sample & theming guidance ✅
173-
169+
- Math equation rendering (KaTeX) ✅
170+
- Mobile responsiveness improvements ✅
171+
- Education-friendly themes ✅
172+
- HTML export ✅
173+
- Increased test coverage ✅
174+
- More sanitizer parity tests (.NET) for encoded edge cases ✅
175+
- Task list interaction (toggle checked state via keyboard) ✅
176+
- Heading level cycling / remove heading shortcut ✅
177+
- Documentation site sample & theming guidance ✅
174178

175179
## Versioning
176180

0 commit comments

Comments
 (0)