fable-editor 1.2.1 → 1.2.2

package/LICENSE

@@ -1,21 +1,23 @@
-MIT License
+ 
+# Fable Editor License
 
 Copyright (c) 2026 Sajin Satheesan
 
-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.
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and its associated documentation files (the "Software"), to use the Software in personal, educational, and commercial projects.
+
+You may:
+
+* Use the Software in your own applications and websites.
+* Modify the Software for your own internal use.
+* Include the Software as part of a project or product you develop.
+
+You may NOT:
+
+* Sell, sublicense, rent, lease, or redistribute the Software, in whole or in part, as a standalone product.
+* Publish modified or unmodified versions of the Software for others to download or use.
+* Repackage or rebrand the Software under another name.
+* Remove or modify this copyright notice.
+
+This license does not grant ownership of the Software. All intellectual property rights remain with the copyright holder.
+
+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 AUTHOR 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

@@ -1,226 +1,226 @@
-# FableEditor
-
-A rich text editor packaged as an npm library with first-class React and Angular wrappers. Built from the original standalone `fable-editor.html`/`fable-editor.js` demo, preserving the full feature set.
-
-![FableEditor preview](https://raw.githubusercontent.com/an-sajinsatheesan/fable-editor/main/docs/preview.png)
-
-## Features
-
-| Feature | Details |
-|---|---|
-| Toolbar & menubar | Configurable via `toolbar`/`menubar` strings (`\|`-separated groups), or use the built-in defaults. Menus: File, Edit, View, Insert, Format, Tools, Table, Help |
-| Responsive toolbar | On narrow screens (mobile/tablet) — or in a narrow host container — the toolbar collapses to a single row with a trailing `…` button that expands/collapses the full set. Automatic, width-driven, no configuration needed |
-| Tables | Resize handles, row/column insert & delete, row/column reordering (move a row up/down or a column left/right from the context toolbar or Table menu), cell background color picker (build header rows in one click), cell/row/column/table properties, context toolbar |
-| Paste handling | PowerPaste-style clean paste from Word / Google Docs / Excel |
-| Internationalization | English / Arabic, automatic RTL/LTR switching |
-| Fonts & formatting | Configurable font list (`fontFamilyFormats`), sizes, line-height, word-spacing, letter-spacing, text/background color, change case |
-| Theming | `primaryColor` (accent, default `#df3c2b`), `toolbarGroupBackground` and `uiFontFamily` (default Noto Sans stack) options restyle the editor chrome via CSS variables |
-| Custom content styling | `contentStyle` injects scoped CSS into the editable area (e.g. default font/size) |
-| Images | Placeholder upload UI, drag-and-drop, configurable accepted file types (`imageFileTypes`), pluggable async upload handler |
-| Video | Insert/edit dialog with **General** (source URL / upload / width / height), **Embed** (paste embed code) and **Advanced** (alternative source, poster image) tabs. YouTube / Vimeo / Dailymotion page URLs become embedded players — including when pasted directly into the editor. Template media slots can host a video instead of an image. |
-| Code | Inline `code` (toolbar button, or type `` `snippet` `` — converts on the closing backtick) and code sample blocks: a dialog with language dropdown + paste-in textarea inserts a styled block with a language header; click a block to edit, copy or delete it. No dependencies, no highlighting engine |
-| Documents | Import `.docx` files, source-code view, print preview |
-| Productivity | Undo/redo, revision history, autosave draft restore, word count, special characters & emoji pickers (category tabs + glyph grid), page breaks |
-| Fullscreen | Toggle fullscreen editing |
-| Help | Built-in shortcuts/help dialog |
-
-## Install
-
-```bash
-npm install fable-editor
-```
-
-> **Note:** the package ships framework wrappers as optional peer dependencies. Install React or Angular dependencies only if you use those wrappers.
-
-## Vanilla / Core
-
-Import the CSS once in your app, then create an editor instance:
-
-```ts
-import 'fable-editor/style.css';
-import { FableEditor } from 'fable-editor';
-
-const editor = new FableEditor({
-  target: document.getElementById('editor')!,
-  language: 'en',           // 'en' | 'ar'
-  height: 400,
-  initialContent: '<p><br></p>',
-  onChange: (html) => console.log(html)
-});
-
-// API
-editor.getContent();
-editor.setContent('<p>Hello</p>');
-editor.insertContent('<strong>bold</strong>');
-editor.setLanguage('ar');
-editor.focus();
-editor.destroy();
-```
-
-### `init` options
-
-| Option | Type | Default | Description |
-|---|---|---|---|
-| `target` | `HTMLElement` | — | Required. Element to mount the editor into. |
-| `language` | `'en' \| 'ar'` | `'en'` | UI language; also switches text direction. |
-| `height` | `number` | `302` | Editable area height in px. |
-| `initialContent` | `string` | `'<p><br></p>'` | Starting HTML content. |
-| `menubar` | `boolean \| string` | `true` | `true`/omitted = default menu set. `false` = hidden. A string is a space-separated subset/reorder, e.g. `'file edit view insert format tools table help'`. |
-| `toolbar` | `boolean \| string` | `true` | `true`/omitted = default toolbar. `false` = hidden. A string lays out the toolbar: `\|` separates groups, spaces separate items, e.g. `'undo redo \| bold italic'`. |
-| `statusbar` | `boolean` | `true` | Show/hide the status bar. |
-| `readonly` | `boolean` | `false` | Disable editing. |
-| `fontFamilyFormats` | `[string, string][]` | built-in list | Overrides the font dropdown. Tuples of `[displayName, cssFontFamilyValue]`. |
-| `contentStyle` | `string` | — | Custom CSS for the editable area. The literal word `body` is scoped to this editor instance; other selectors are used verbatim (your responsibility to scope). |
-| `imageFileTypes` | `string[]` | common image MIME types | `accept` list for the native image file picker. |
-| `imageUploadHandler` | `(file: File) => Promise<string>` | — | Resolve with a URL after uploading; omit to inline images as base64. |
-| `onImageUploadError` | `(error, file) => void` | — | Called when `imageUploadHandler` rejects. |
-| `videoFileTypes` | `string[]` | `['video/mp4','video/webm','video/ogg']` | `accept` list for the native video file picker. |
-| `videoUploadHandler` | `(file: File) => Promise<string>` | — | Resolve with a URL after uploading; omit to inline videos as base64. |
-| `onVideoUploadError` | `(error, file) => void` | — | Called when `videoUploadHandler` rejects. |
-| `primaryColor` | `string` | `'#df3c2b'` | Accent color for active states, primary buttons and selection outlines. Any CSS color. Applied as the `--fable-primary` CSS variable. |
-| `toolbarGroupBackground` | `string` | `'#f1f3f6'` | Background of each toolbar button group (the rounded pills). Applied as `--fable-tgrp-bg`. |
-| `uiFontFamily` | `string` | Noto Sans stack | Font family for the editor UI (menubar, toolbar, dialogs). Load the Noto Sans webfont in your app to use the default, or pass your own family. Applied as `--fable-ui-font`. |
-| `draftKey` | `string` | current page path | Storage key suffix for autosaved drafts. |
-| `onChange` / `onReady` | functions | — | Content-change and ready callbacks (usually set by the React/Angular wrapper instead). |
-
-### Theming
-
-The editor's accent color, toolbar group background and UI font are driven by CSS variables, so they can be set per instance:
-
-```ts
-new FableEditor({
-  target: el,
-  primaryColor: '#df3c2b',                 // accent (default)
-  toolbarGroupBackground: '#f1f3f6',       // toolbar pill background (default)
-  uiFontFamily: "'Noto Sans', sans-serif"  // UI font (default stack)
-});
-```
-
-The same values are available as React props / Angular inputs. The UI font defaults to a **Noto Sans** stack — load the webfont in your app (e.g. from Google Fonts) or pass any family you've already loaded. Alternatively, set the variables yourself in CSS: `--fable-primary`, `--fable-tgrp-bg`, `--fable-ui-font`.
-
-### Toolbar & menubar configuration
-
-The `toolbar`/`menubar` options accept the same style of layout string as TinyMCE — `|` separates visual groups, spaces separate items:
-
-```ts
-new FableEditor({
-  target: document.querySelector('#default-editor')!,
-  toolbar:
-    'undo redo | styles | bold italic underline strikethrough | ' +
-    'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
-  menubar: 'file edit insert format'
-});
-```
-
-Available toolbar items: `undo redo preview print importword revhistory fontfamily fontsize fontsizeincrease fontsizedecrease bold italic underline strikethrough forecolor backcolor alignleft aligncenter alignright alignjustify bullist numlist outdent indent link blockquote code changecase lineheight wordspacing letterspacing removeformat blocks ltr rtl quickimage quickvideo quicktable codesample template charmap emoji fullscreen sourcecode`. The TinyMCE names `styles` (→ `blocks`), `image` (→ `quickimage`), `media` (→ `quickvideo`) and `table` (→ `quicktable`) are accepted as aliases, so a typical TinyMCE toolbar string works unchanged. Unknown tokens are skipped with a console warning. Menubar keys: `file edit view insert format tools table help`.
-
-## React
-
-```tsx
-import 'fable-editor/style.css';
-import { FableEditor } from 'fable-editor/react';
-
-function App() {
-  const [value, setValue] = useState('<p><br></p>');
-
-  return (
-    <FableEditor
-      value={value}
-      onChange={setValue}
-      language="en"
-      height={400}
-      toolbar="undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
-    />
-  );
-}
-```
-
-`toolbar`/`menubar` accept the same layout strings as the core option (see [Toolbar & menubar configuration](#toolbar--menubar-configuration)), so each app can show exactly the controls it needs.
-
-Props: `value`, `defaultValue`, `onChange`, `language`, `height`, `menubar`, `toolbar`, `statusbar`, `readonly`, `primaryColor`, `toolbarGroupBackground`, `uiFontFamily`, `fontFamilyFormats`, `contentStyle`, `imageFileTypes`, `imageUploadHandler`, `onImageUploadError`, `videoFileTypes`, `videoUploadHandler`, `onVideoUploadError`, `init`, `className`, `style` (see the [`init` options](#init-options) table above — every option is also a top-level prop). A ref exposes `getContent`, `setContent`, `insertContent`, `setLanguage`, `focus`, `destroy`.
-
-## Angular
-
-Add to `angular.json` styles:
-
-```json
-"styles": [
-  "src/styles.css",
-  "node_modules/fable-editor/style.css"
-]
-```
-
-Import the module:
-
-```ts
-import { FableEditorModule } from 'fable-editor/angular';
-
-@NgModule({
-  imports: [FableEditorModule]
-})
-export class AppModule {}
-```
-
-Use in a template:
-
-```html
-<fable-editor
-  [(ngModel)]="content"
-  language="en"
-  [height]="400"
-  toolbar="undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image">
-</fable-editor>
-```
-
-Inputs: `language`, `height`, `menubar`, `toolbar`, `statusbar`, `readonly`, `primaryColor`, `toolbarGroupBackground`, `uiFontFamily`, `init`. `menubar`/`toolbar` accept a string directly (e.g. `[toolbar]="'undo redo | bold italic'"`); `fontFamilyFormats`, `contentStyle`, `imageFileTypes`, `imageUploadHandler`, `onImageUploadError`, `videoFileTypes`, `videoUploadHandler`, and `onVideoUploadError` aren't top-level inputs — pass them via `[init]="{ contentStyle: '...' }"` (see the [`init` options](#init-options) table above). Outputs: `editorChange`, `editorReady`. Works with `ngModel` and `formControlName`.
-
-## Development & testing
-
-```bash
-npm install
-npm run build      # builds core, react, and angular
-npm test           # automated core tests (Vitest + jsdom)
-```
-
-### Manual smoke tests
-
-```bash
-# Vanilla demo
-npm run demo
-# open http://localhost:5173/demo/index.html
-
-# React example
-npm run demo:react
-# open http://localhost:5173
-
-# Angular example
-npm run demo:angular
-# open http://localhost:4200
-```
-
-> Run `npm run build` before the Angular demo so the library files are up to date.
-
-## Project layout
-
-```
-src/
-  core/         # framework-agnostic editor engine
-  react/        # React wrapper
-  angular/      # Angular wrapper + module
-  index.ts      # Angular library entry point
-examples/
-  react/        # runnable React test app
-  angular/      # runnable Angular CLI test app
-demo/
-  index.html    # manual vanilla test page
-test/
-  core.test.ts  # automated core tests
-```
-
-## Author
-
-Sajin Satheesan <an.sajinsatheesan@gmail.com>
-
-## License
-
-MIT
+# FableEditor
+
+A rich text editor packaged as an npm library with first-class React and Angular wrappers. Built from the original standalone `fable-editor.html`/`fable-editor.js` demo, preserving the full feature set.
+
+![FableEditor preview](https://raw.githubusercontent.com/an-sajinsatheesan/fable-editor/main/docs/preview.png)
+
+## Features
+
+| Feature | Details |
+|---|---|
+| Toolbar & menubar | Configurable via `toolbar`/`menubar` strings (`\|`-separated groups), or use the built-in defaults. Menus: File, Edit, View, Insert, Format, Tools, Table, Help |
+| Responsive toolbar | On narrow screens (mobile/tablet) — or in a narrow host container — the toolbar collapses to a single row with a trailing `…` button that expands/collapses the full set. Automatic, width-driven, no configuration needed |
+| Tables | Resize handles, row/column insert & delete, row/column reordering (move a row up/down or a column left/right from the context toolbar or Table menu), cell background color picker (build header rows in one click), cell/row/column/table properties, context toolbar |
+| Paste handling | PowerPaste-style clean paste from Word / Google Docs / Excel |
+| Internationalization | English / Arabic, automatic RTL/LTR switching |
+| Fonts & formatting | Configurable font list (`fontFamilyFormats`), sizes, line-height, word-spacing, letter-spacing, text/background color, change case |
+| Theming | `primaryColor` (accent, default `#df3c2b`), `toolbarGroupBackground` and `uiFontFamily` (default Noto Sans stack) options restyle the editor chrome via CSS variables |
+| Custom content styling | `contentStyle` injects scoped CSS into the editable area (e.g. default font/size) |
+| Images | Placeholder upload UI, drag-and-drop, configurable accepted file types (`imageFileTypes`), pluggable async upload handler |
+| Video | Insert/edit dialog with **General** (source URL / upload / width / height), **Embed** (paste embed code) and **Advanced** (alternative source, poster image) tabs. YouTube / Vimeo / Dailymotion page URLs become embedded players — including when pasted directly into the editor. Template media slots can host a video instead of an image. |
+| Code | Inline `code` (toolbar button, or type `` `snippet` `` — converts on the closing backtick) and code sample blocks: a dialog with language dropdown + paste-in textarea inserts a styled block with a language header; click a block to edit, copy or delete it. No dependencies, no highlighting engine |
+| Documents | Import `.docx` files, source-code view, print preview |
+| Productivity | Undo/redo, revision history, autosave draft restore, word count, special characters & emoji pickers (category tabs + glyph grid), page breaks |
+| Fullscreen | Toggle fullscreen editing |
+| Help | Built-in shortcuts/help dialog |
+
+## Install
+
+```bash
+npm install fable-editor
+```
+
+> **Note:** the package ships framework wrappers as optional peer dependencies. Install React or Angular dependencies only if you use those wrappers.
+
+## Vanilla / Core
+
+Import the CSS once in your app, then create an editor instance:
+
+```ts
+import 'fable-editor/style.css';
+import { FableEditor } from 'fable-editor';
+
+const editor = new FableEditor({
+  target: document.getElementById('editor')!,
+  language: 'en',           // 'en' | 'ar'
+  height: 400,
+  initialContent: '<p><br></p>',
+  onChange: (html) => console.log(html)
+});
+
+// API
+editor.getContent();
+editor.setContent('<p>Hello</p>');
+editor.insertContent('<strong>bold</strong>');
+editor.setLanguage('ar');
+editor.focus();
+editor.destroy();
+```
+
+### `init` options
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `target` | `HTMLElement` | — | Required. Element to mount the editor into. |
+| `language` | `'en' \| 'ar'` | `'en'` | UI language; also switches text direction. |
+| `height` | `number` | `302` | Editable area height in px. |
+| `initialContent` | `string` | `'<p><br></p>'` | Starting HTML content. |
+| `menubar` | `boolean \| string` | `true` | `true`/omitted = default menu set. `false` = hidden. A string is a space-separated subset/reorder, e.g. `'file edit view insert format tools table help'`. |
+| `toolbar` | `boolean \| string` | `true` | `true`/omitted = default toolbar. `false` = hidden. A string lays out the toolbar: `\|` separates groups, spaces separate items, e.g. `'undo redo \| bold italic'`. |
+| `statusbar` | `boolean` | `true` | Show/hide the status bar. |
+| `readonly` | `boolean` | `false` | Disable editing. |
+| `fontFamilyFormats` | `[string, string][]` | built-in list | Overrides the font dropdown. Tuples of `[displayName, cssFontFamilyValue]`. |
+| `contentStyle` | `string` | — | Custom CSS for the editable area. The literal word `body` is scoped to this editor instance; other selectors are used verbatim (your responsibility to scope). |
+| `imageFileTypes` | `string[]` | common image MIME types | `accept` list for the native image file picker. |
+| `imageUploadHandler` | `(file: File) => Promise<string>` | — | Resolve with a URL after uploading; omit to inline images as base64. |
+| `onImageUploadError` | `(error, file) => void` | — | Called when `imageUploadHandler` rejects. |
+| `videoFileTypes` | `string[]` | `['video/mp4','video/webm','video/ogg']` | `accept` list for the native video file picker. |
+| `videoUploadHandler` | `(file: File) => Promise<string>` | — | Resolve with a URL after uploading; omit to inline videos as base64. |
+| `onVideoUploadError` | `(error, file) => void` | — | Called when `videoUploadHandler` rejects. |
+| `primaryColor` | `string` | `'#df3c2b'` | Accent color for active states, primary buttons and selection outlines. Any CSS color. Applied as the `--fable-primary` CSS variable. |
+| `toolbarGroupBackground` | `string` | `'#f1f3f6'` | Background of each toolbar button group (the rounded pills). Applied as `--fable-tgrp-bg`. |
+| `uiFontFamily` | `string` | Noto Sans stack | Font family for the editor UI (menubar, toolbar, dialogs). Load the Noto Sans webfont in your app to use the default, or pass your own family. Applied as `--fable-ui-font`. |
+| `draftKey` | `string` | current page path | Storage key suffix for autosaved drafts. |
+| `onChange` / `onReady` | functions | — | Content-change and ready callbacks (usually set by the React/Angular wrapper instead). |
+
+### Theming
+
+The editor's accent color, toolbar group background and UI font are driven by CSS variables, so they can be set per instance:
+
+```ts
+new FableEditor({
+  target: el,
+  primaryColor: '#df3c2b',                 // accent (default)
+  toolbarGroupBackground: '#f1f3f6',       // toolbar pill background (default)
+  uiFontFamily: "'Noto Sans', sans-serif"  // UI font (default stack)
+});
+```
+
+The same values are available as React props / Angular inputs. The UI font defaults to a **Noto Sans** stack — load the webfont in your app (e.g. from Google Fonts) or pass any family you've already loaded. Alternatively, set the variables yourself in CSS: `--fable-primary`, `--fable-tgrp-bg`, `--fable-ui-font`.
+
+### Toolbar & menubar configuration
+
+The `toolbar`/`menubar` options accept the same style of layout string as TinyMCE — `|` separates visual groups, spaces separate items:
+
+```ts
+new FableEditor({
+  target: document.querySelector('#default-editor')!,
+  toolbar:
+    'undo redo | styles | bold italic underline strikethrough | ' +
+    'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
+  menubar: 'file edit insert format'
+});
+```
+
+Available toolbar items: `undo redo preview print importword revhistory fontfamily fontsize fontsizeincrease fontsizedecrease bold italic underline strikethrough forecolor backcolor alignleft aligncenter alignright alignjustify bullist numlist outdent indent link blockquote code changecase lineheight wordspacing letterspacing removeformat blocks ltr rtl quickimage quickvideo quicktable codesample template charmap emoji fullscreen sourcecode`. The TinyMCE names `styles` (→ `blocks`), `image` (→ `quickimage`), `media` (→ `quickvideo`) and `table` (→ `quicktable`) are accepted as aliases, so a typical TinyMCE toolbar string works unchanged. Unknown tokens are skipped with a console warning. Menubar keys: `file edit view insert format tools table help`.
+
+## React
+
+```tsx
+import 'fable-editor/style.css';
+import { FableEditor } from 'fable-editor/react';
+
+function App() {
+  const [value, setValue] = useState('<p><br></p>');
+
+  return (
+    <FableEditor
+      value={value}
+      onChange={setValue}
+      language="en"
+      height={400}
+      toolbar="undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
+    />
+  );
+}
+```
+
+`toolbar`/`menubar` accept the same layout strings as the core option (see [Toolbar & menubar configuration](#toolbar--menubar-configuration)), so each app can show exactly the controls it needs.
+
+Props: `value`, `defaultValue`, `onChange`, `language`, `height`, `menubar`, `toolbar`, `statusbar`, `readonly`, `primaryColor`, `toolbarGroupBackground`, `uiFontFamily`, `fontFamilyFormats`, `contentStyle`, `imageFileTypes`, `imageUploadHandler`, `onImageUploadError`, `videoFileTypes`, `videoUploadHandler`, `onVideoUploadError`, `init`, `className`, `style` (see the [`init` options](#init-options) table above — every option is also a top-level prop). A ref exposes `getContent`, `setContent`, `insertContent`, `setLanguage`, `focus`, `destroy`.
+
+## Angular
+
+Add to `angular.json` styles:
+
+```json
+"styles": [
+  "src/styles.css",
+  "node_modules/fable-editor/style.css"
+]
+```
+
+Import the module:
+
+```ts
+import { FableEditorModule } from 'fable-editor/angular';
+
+@NgModule({
+  imports: [FableEditorModule]
+})
+export class AppModule {}
+```
+
+Use in a template:
+
+```html
+<fable-editor
+  [(ngModel)]="content"
+  language="en"
+  [height]="400"
+  toolbar="undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image">
+</fable-editor>
+```
+
+Inputs: `language`, `height`, `menubar`, `toolbar`, `statusbar`, `readonly`, `primaryColor`, `toolbarGroupBackground`, `uiFontFamily`, `init`. `menubar`/`toolbar` accept a string directly (e.g. `[toolbar]="'undo redo | bold italic'"`); `fontFamilyFormats`, `contentStyle`, `imageFileTypes`, `imageUploadHandler`, `onImageUploadError`, `videoFileTypes`, `videoUploadHandler`, and `onVideoUploadError` aren't top-level inputs — pass them via `[init]="{ contentStyle: '...' }"` (see the [`init` options](#init-options) table above). Outputs: `editorChange`, `editorReady`. Works with `ngModel` and `formControlName`.
+
+## Development & testing
+
+```bash
+npm install
+npm run build      # builds core, react, and angular
+npm test           # automated core tests (Vitest + jsdom)
+```
+
+### Manual smoke tests
+
+```bash
+# Vanilla demo
+npm run demo
+# open http://localhost:5173/demo/index.html
+
+# React example
+npm run demo:react
+# open http://localhost:5173
+
+# Angular example
+npm run demo:angular
+# open http://localhost:4200
+```
+
+> Run `npm run build` before the Angular demo so the library files are up to date.
+
+## Project layout
+
+```
+src/
+  core/         # framework-agnostic editor engine
+  react/        # React wrapper
+  angular/      # Angular wrapper + module
+  index.ts      # Angular library entry point
+examples/
+  react/        # runnable React test app
+  angular/      # runnable Angular CLI test app
+demo/
+  index.html    # manual vanilla test page
+test/
+  core.test.ts  # automated core tests
+```
+
+## Author
+
+Sajin Satheesan <an.sajinsatheesan@gmail.com> — [LinkedIn](https://www.linkedin.com/in/sajin-satheesan-b5759a126/)
+
+## License
+
+MIT