fable-editor 1.0.2 → 1.1.0

package/README.md

@@ -13,8 +13,10 @@ A rich text editor packaged as an npm library with first-class React and Angular
 | Fonts & formatting | Configurable font list (`fontFamilyFormats`), sizes, line-height, word-spacing, text/background color, change case |
 | 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. |
+| Math formulas | Insert inline or multi-line LaTeX derivations, rendered with [KaTeX](https://katex.org) — click an inserted formula to edit or delete it. Pasting LaTeX from the clipboard (`$…$`, `$$…$$`, `\(…\)`, `\[…\]`, `\begin{…}…\end{…}`) auto-renders it, and typing `$x^2$` inline converts as soon as the closing `$` is typed |
 | Documents | Import `.docx` files, source-code view, print preview |
-| Productivity | Undo/redo, revision history, autosave draft restore, word count, special characters, page breaks |
+| 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 |
 
@@ -68,9 +70,38 @@ editor.destroy();
 | `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. |
 | `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). |
 
+> **Math formulas:** the "Insert math formula" toolbar/menu item renders LaTeX with [KaTeX](https://katex.org), which FableEditor uses as a rendering dependency but does not bundle the stylesheet for (to avoid shipping KaTeX's webfonts in every install). If you use this feature, also import KaTeX's CSS once in your app: `import 'katex/dist/katex.min.css'`.
+
+### Math from the clipboard / keyboard
+
+Besides the dialog, formulas can enter the document two more ways — the regular paste pipeline is untouched, these only kick in when the clipboard is *entirely* one formula:
+
+- **Paste** `$$…$$`, `\[…\]` or a `\begin{…}…\end{…}` environment → a **block** formula on its own line. A derivation pasted as separate lines gets each step on its own row automatically.
+- **Paste** `\(…\)` or a LaTeX-looking `$…$` → an **inline** formula at the caret (same line). Plain text like `$5 and $10` is left alone.
+- **Type** `$x^2$` — the moment the closing `$` is typed, the run converts to an inline formula (only when it parses as valid LaTeX; a literal `$5` stays text).
+
+### 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 changecase lineheight wordspacing removeformat blocks ltr rtl quickimage quickvideo quicktable mathformula 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
@@ -86,12 +117,15 @@ function App() {
       onChange={setValue}
       language="en"
       height={400}
+      toolbar="undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
     />
   );
 }
 ```
 
-Props: `value`, `defaultValue`, `onChange`, `language`, `height`, `menubar`, `toolbar`, `statusbar`, `readonly`, `fontFamilyFormats`, `contentStyle`, `imageFileTypes`, `imageUploadHandler`, `onImageUploadError`, `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`.
+`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`, `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
 
@@ -118,10 +152,15 @@ export class AppModule {}
 Use in a template:
 
 ```html
-<fable-editor [(ngModel)]="content" language="en" [height]="400"></fable-editor>
+<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`, `init`. `menubar`/`toolbar` accept a string directly (e.g. `[toolbar]="'undo redo | bold italic'"`); `fontFamilyFormats`, `contentStyle`, `imageFileTypes`, `imageUploadHandler`, and `onImageUploadError` 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`.
+Inputs: `language`, `height`, `menubar`, `toolbar`, `statusbar`, `readonly`, `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
 

package/dist/angular/README.md

@@ -13,8 +13,10 @@ A rich text editor packaged as an npm library with first-class React and Angular
 | Fonts & formatting | Configurable font list (`fontFamilyFormats`), sizes, line-height, word-spacing, text/background color, change case |
 | 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. |
+| Math formulas | Insert inline or multi-line LaTeX derivations, rendered with [KaTeX](https://katex.org) — click an inserted formula to edit or delete it. Pasting LaTeX from the clipboard (`$…$`, `$$…$$`, `\(…\)`, `\[…\]`, `\begin{…}…\end{…}`) auto-renders it, and typing `$x^2$` inline converts as soon as the closing `$` is typed |
 | Documents | Import `.docx` files, source-code view, print preview |
-| Productivity | Undo/redo, revision history, autosave draft restore, word count, special characters, page breaks |
+| 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 |
 
@@ -68,9 +70,38 @@ editor.destroy();
 | `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. |
 | `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). |
 
+> **Math formulas:** the "Insert math formula" toolbar/menu item renders LaTeX with [KaTeX](https://katex.org), which FableEditor uses as a rendering dependency but does not bundle the stylesheet for (to avoid shipping KaTeX's webfonts in every install). If you use this feature, also import KaTeX's CSS once in your app: `import 'katex/dist/katex.min.css'`.
+
+### Math from the clipboard / keyboard
+
+Besides the dialog, formulas can enter the document two more ways — the regular paste pipeline is untouched, these only kick in when the clipboard is *entirely* one formula:
+
+- **Paste** `$$…$$`, `\[…\]` or a `\begin{…}…\end{…}` environment → a **block** formula on its own line. A derivation pasted as separate lines gets each step on its own row automatically.
+- **Paste** `\(…\)` or a LaTeX-looking `$…$` → an **inline** formula at the caret (same line). Plain text like `$5 and $10` is left alone.
+- **Type** `$x^2$` — the moment the closing `$` is typed, the run converts to an inline formula (only when it parses as valid LaTeX; a literal `$5` stays text).
+
+### 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 changecase lineheight wordspacing removeformat blocks ltr rtl quickimage quickvideo quicktable mathformula 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
@@ -86,12 +117,15 @@ function App() {
       onChange={setValue}
       language="en"
       height={400}
+      toolbar="undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
     />
   );
 }
 ```
 
-Props: `value`, `defaultValue`, `onChange`, `language`, `height`, `menubar`, `toolbar`, `statusbar`, `readonly`, `fontFamilyFormats`, `contentStyle`, `imageFileTypes`, `imageUploadHandler`, `onImageUploadError`, `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`.
+`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`, `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
 
@@ -118,10 +152,15 @@ export class AppModule {}
 Use in a template:
 
 ```html
-<fable-editor [(ngModel)]="content" language="en" [height]="400"></fable-editor>
+<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`, `init`. `menubar`/`toolbar` accept a string directly (e.g. `[toolbar]="'undo redo | bold italic'"`); `fontFamilyFormats`, `contentStyle`, `imageFileTypes`, `imageUploadHandler`, and `onImageUploadError` 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`.
+Inputs: `language`, `height`, `menubar`, `toolbar`, `statusbar`, `readonly`, `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
 

package/dist/angular/core/config.d.ts

@@ -14,4 +14,14 @@ export declare const BLOCKS: [string, string][];
 /** Quick-access text color chips shown directly in the toolbar. */
 export declare const QUICK_COLORS: string[];
 export declare const COLORS: string[];
+/** Category key = i18n string key for the tab label in the picker dialogs. */
+export interface GlyphCategory {
+    key: string;
+    chars: string[];
+}
+/** Special-character map, grouped for the two-pane picker (tabs left, glyphs right).
+ *  `CHARS` below is the legacy flat list and is kept exported for back-compat. */
+export declare const CHAR_CATEGORIES: GlyphCategory[];
+/** Emoji map for the emoji picker — same two-pane dialog as the character map. */
+export declare const EMOJI_CATEGORIES: GlyphCategory[];
 export declare const CHARS: string[];

package/dist/angular/core/editor.d.ts

@@ -37,6 +37,17 @@ export declare class FableEditor implements FableEditorApi {
     private imageUploadHandler?;
     private onImageUploadError?;
     private contentStyle?;
+    private vidInput;
+    private vidActive;
+    private vidCtx;
+    private vidHideTimer;
+    private vphActive;
+    private vphCtx;
+    private vphUploadTarget;
+    private videoUploadHandler?;
+    private onVideoUploadError?;
+    private mathActive;
+    private mathCtx;
     private selCtx;
     private tplActive;
     private tplCtx;
@@ -156,7 +167,11 @@ export declare class FableEditor implements FableEditorApi {
     private helpDlg;
     private wordCountDlg;
     private previewDlg;
+    /** Two-pane picker shared by the special-character map and the emoji map:
+     *  fixed category tabs on the left, the active category's glyphs on the right. */
+    private glyphPickerDlg;
     private charMap;
+    private emojiMap;
     private printDoc;
     private pickImage;
     private imgPhHTML;
@@ -165,6 +180,9 @@ export declare class FableEditor implements FableEditorApi {
     private removeImgPlaceholder;
     private selectImgPlaceholder;
     private renderPhCtxButtons;
+    /** Swaps a template slot's placeholder between image and video kinds, so the
+     *  same media slot can be filled with either. */
+    private swapPlaceholderKind;
     private renderPhCtxUrlInput;
     private readImageFileInto;
     /** Runs the host-supplied imageUploadHandler instead of inlining base64,
@@ -172,6 +190,68 @@ export declare class FableEditor implements FableEditorApi {
     private uploadImageFile;
     private replacePlaceholderWithImage;
     private positionImgPhCtx;
+    private pickVideo;
+    private vidPhHTML;
+    private insertVideoPlaceholder;
+    private clearVphPlaceholderSel;
+    private removeVphPlaceholder;
+    private selectVphPlaceholder;
+    private renderVphCtxButtons;
+    private renderVphCtxUrlInput;
+    private readVideoFileInto;
+    /** Runs the host-supplied videoUploadHandler instead of inlining base64,
+     *  so apps can route the file to S3 / Azure Blob / their own server. */
+    private uploadVideoFile;
+    private replacePlaceholderWithVideo;
+    /** Swaps a video placeholder for a hosted player iframe (YouTube & co.). */
+    private replacePlaceholderWithEmbed;
+    private positionVphCtx;
+    private cancelVidHide;
+    private clearVidHandles;
+    private selectVideo;
+    private buildVideoCtxToolbar;
+    private setVideoAlign;
+    private positionVidCtx;
+    /** Maps a page URL from a known video host to its iframe player URL. Returns
+     *  null for anything else (e.g. direct .mp4 file URLs). */
+    private videoEmbedUrl;
+    private videoEmbedHTML;
+    /** Insert/edit-video dialog with General (source/width/height), Embed (embed
+     *  code) and Advanced (alternative source, poster image) tabs. Hosted page
+     *  URLs (YouTube & co.) become iframe players; anything else becomes a
+     *  <video> tag. The General tab also offers the same upload path as before
+     *  (videoUploadHandler when configured, else inline base64). */
+    private videoDlg;
+    private renderMathHTML;
+    /** Shared by the math dialog, math paste, and math typing: renders `src` with
+     *  KaTeX and inserts it at the caret as the standard math element (inline span /
+     *  block div carrying its LaTeX source in data-latex). Block formulas get the
+     *  same \begin{aligned} wrapping the dialog applies, so pasted derivations align
+     *  their steps and re-open correctly in the edit dialog. */
+    private insertMathElement;
+    /** Recognizes a plain-text clipboard payload that is entirely one math formula:
+     *  $$…$$ / \[…\] (block), \(…\) (inline), a \begin{…}…\end{…} environment (block),
+     *  or $…$ (inline — only when the inside looks like LaTeX, so "$50" stays text).
+     *  Multi-line block content (a derivation pasted as separate lines) gets its lines
+     *  joined with \\ so each step lands on its own line. Returns null for anything
+     *  else, letting the normal paste pipeline run unchanged. */
+    private mathFromClipboard;
+    /** A derivation pasted as separate lines has no explicit \\ row breaks — add them.
+     *  Content that already breaks rows itself (\\ present, or a \begin environment
+     *  managing its own layout) only has its newlines collapsed to spaces. */
+    private joinDerivationLines;
+    /** Typing "$…$" converts to an inline formula the moment the closing "$" is typed,
+     *  so math can be written in place without opening the dialog. Only kicks in when
+     *  the run since the opening "$" parses as valid LaTeX and contains LaTeX-ish
+     *  syntax (\ ^ _ { } =) — a literal "$5 and 3$" stays plain text. */
+    private tryMathTyping;
+    private mathDlg;
+    private escapeAttr;
+    private unescapeAttr;
+    private clearMathSel;
+    private selectMathEl;
+    private buildMathCtxToolbar;
+    private positionMathCtx;
     private templateMenu;
     /** Miniature div-based mockup of a layout, mirroring what the block looks
         like in the editor: grey box = image slot, bars = heading/paragraph. */

package/dist/angular/core/i18n.d.ts

@@ -140,6 +140,45 @@ export interface I18nStrings {
     tplimgtop: string;
     tplimgcenter: string;
     deltemplate: string;
+    video: string;
+    quickvideo: string;
+    deletevideo: string;
+    uploadvideo: string;
+    videolink: string;
+    videourlph: string;
+    insertvideo: string;
+    dropvideo: string;
+    mathformula: string;
+    mathdlgttl: string;
+    mathderivation: string;
+    mathlatex: string;
+    editmath: string;
+    deletemath: string;
+    videodlgttl: string;
+    vidgeneral: string;
+    vidembed: string;
+    vidadvanced: string;
+    vidsource: string;
+    vidembedhint: string;
+    vidaltsource: string;
+    vidposter: string;
+    emoji: string;
+    chcat_currency: string;
+    chcat_text: string;
+    chcat_math: string;
+    chcat_arrows: string;
+    chcat_symbols: string;
+    chcat_latin: string;
+    chcat_arabic: string;
+    emcat_smileys: string;
+    emcat_people: string;
+    emcat_animals: string;
+    emcat_food: string;
+    emcat_travel: string;
+    emcat_activities: string;
+    emcat_objects: string;
+    emcat_symbols: string;
+    emcat_flags: string;
 }
 export declare const I18N: Record<EditorLanguage, I18nStrings>;
 export declare function getStrings(lang: EditorLanguage): I18nStrings;

package/dist/angular/core/types.d.ts

@@ -50,6 +50,16 @@ export interface EditorInitOptions {
     imageUploadHandler?: (file: File) => Promise<string>;
     /** Called when imageUploadHandler rejects, so the host app can surface it. */
     onImageUploadError?: (error: unknown, file: File) => void;
+    /** MIME types accepted by the native video file picker (the `accept` attribute).
+     *  Defaults to `['video/mp4','video/webm','video/ogg']`. */
+    videoFileTypes?: string[];
+    /** Called when a user picks or drops a video. Resolve with the URL to
+     *  insert (e.g. after uploading to S3/Azure Blob/your own server). If
+     *  omitted, videos are inlined as base64 data URIs instead. Mirrors
+     *  `imageUploadHandler` — the engine owns all placeholder/progress/insert UI. */
+    videoUploadHandler?: (file: File) => Promise<string>;
+    /** Called when videoUploadHandler rejects, so the host app can surface it. */
+    onVideoUploadError?: (error: unknown, file: File) => void;
 }
 export interface FableEditorApi {
     getContent(): string;