fable-editor 1.0.2 → 1.2.0

package/README.md

@@ -7,14 +7,18 @@ A rich text editor packaged as an npm library with first-class React and Angular
 | 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 |
-| Tables | Resize handles, row/column insert & delete, cell/row/column/table properties, context toolbar |
+| 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, text/background color, change case |
+| 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, 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 +72,46 @@ 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. |
+| `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
@@ -86,12 +127,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`, `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
 
@@ -118,10 +162,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`, `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
 

package/dist/angular/README.md

@@ -7,14 +7,18 @@ A rich text editor packaged as an npm library with first-class React and Angular
 | 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 |
-| Tables | Resize handles, row/column insert & delete, cell/row/column/table properties, context toolbar |
+| 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, text/background color, change case |
+| 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, 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 +72,46 @@ 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. |
+| `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
@@ -86,12 +127,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`, `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
 
@@ -118,10 +162,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`, `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
 

package/dist/angular/angular/fable-editor.component.d.ts

@@ -9,6 +9,9 @@ export declare class FableEditorComponent implements OnInit, OnChanges, OnDestro
     toolbar: boolean | string;
     statusbar: boolean;
     readonly: boolean;
+    primaryColor?: string;
+    toolbarGroupBackground?: string;
+    uiFontFamily?: string;
     init: Partial<Omit<EditorInitOptions, 'target'>>;
     value: string;
     editorChange: EventEmitter<string>;
@@ -25,5 +28,5 @@ export declare class FableEditorComponent implements OnInit, OnChanges, OnDestro
     focus(): void;
     writeValue(value: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FableEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FableEditorComponent, "fable-editor", never, { "language": { "alias": "language"; "required": false; }; "height": { "alias": "height"; "required": false; }; "menubar": { "alias": "menubar"; "required": false; }; "toolbar": { "alias": "toolbar"; "required": false; }; "statusbar": { "alias": "statusbar"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "init": { "alias": "init"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "editorChange": "editorChange"; "editorReady": "editorReady"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FableEditorComponent, "fable-editor", never, { "language": { "alias": "language"; "required": false; }; "height": { "alias": "height"; "required": false; }; "menubar": { "alias": "menubar"; "required": false; }; "toolbar": { "alias": "toolbar"; "required": false; }; "statusbar": { "alias": "statusbar"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "primaryColor": { "alias": "primaryColor"; "required": false; }; "toolbarGroupBackground": { "alias": "toolbarGroupBackground"; "required": false; }; "uiFontFamily": { "alias": "uiFontFamily"; "required": false; }; "init": { "alias": "init"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "editorChange": "editorChange"; "editorReady": "editorReady"; }, never, never, true, never>;
 }

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

@@ -10,8 +10,23 @@ export declare const MIN_FONT_PX = 1;
 export declare const MAX_FONT_PX = 100;
 export declare const LINE_HEIGHTS: string[];
 export declare const WORD_SPACINGS: string[];
+export declare const LETTER_SPACINGS: string[];
+/** Languages offered by the code-sample dialog: [value stored in data-lang, label]. */
+export declare const CODE_LANGS: [string, string][];
 export declare const BLOCKS: [string, string][];
 /** Quick-access text color chips shown directly in the toolbar. */
 export declare const QUICK_COLORS: string[];
+/** 25 swatches — a 5×5 grid in the picker (pastels, brights, darks, grays,
+ *  then pink/brown/cyan + black/white). Shared by fore/back color and cell fill. */
 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,7 +37,20 @@ 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 selCtx;
+    private tbrMore;
+    private tbrExpanded;
+    private codeActive;
+    private codeCtx;
     private tplActive;
     private tplCtx;
     private docInput;
@@ -52,6 +65,10 @@ export declare class FableEditor implements FableEditorApi {
     private tArr;
     private dir;
     private initDOM;
+    /** Theme options land as CSS variables on the document root rather than the editor
+     *  shell, because dialogs, popups and floating context toolbars are appended to
+     *  document.body and would not inherit variables scoped to the shell. */
+    private applyTheme;
     /** Rewrites the literal word `body` in a user-supplied `contentStyle` string to a
      *  selector scoped to this instance's content div. Everything else passes through
      *  verbatim, since `.ed` is a plain div in the host page (not an iframe) and an
@@ -100,6 +117,10 @@ export declare class FableEditor implements FableEditorApi {
     private tsel;
     private setListStyle;
     private listMenu;
+    /** Shared color-picker popup body — swatch grid plus the current-color /
+     *  no-color / custom-picker footer — so the fore/back toolbar menus and the
+     *  table cell-background menu all show the identical popup. */
+    private buildPaletteInto;
     private colorMenu;
     private applyColor;
     private syncColorSwatches;
@@ -117,6 +138,7 @@ export declare class FableEditor implements FableEditorApi {
     private currentBlockStyle;
     private lineHeightMenu;
     private wordSpacingMenu;
+    private letterSpacingMenu;
     private closestAnchor;
     private linkDlg;
     private blocksMenu;
@@ -135,9 +157,31 @@ export declare class FableEditor implements FableEditorApi {
      *  (the quick color chips); everything else yields one. */
     private buildToolbarRegistry;
     private buildToolbar;
+    /** xs/sm/md editors (< 992px wide) collapse an overflowing toolbar to one row +
+     *  "…" expander; at lg widths and up the toolbar wraps to multiple rows as before. */
+    private static readonly TBR_COLLAPSE_MAX;
+    /** Responsive one-line toolbar: on mobile/tablet widths (or a narrow host
+     *  container) a toolbar that can't fit on a single row collapses to one
+     *  clipped row plus a trailing "…" button that expands/collapses the full
+     *  set. Driven by the editor's own width, so it also applies to narrow
+     *  panels on desktop. */
+    private updateToolbarOverflow;
     private mItem;
     private buildMenubar;
     private tableOp;
+    /** Reorders the current row/column: 'rowup'/'rowdown' swap the caret's row with
+     *  its neighbour, 'colleft'/'colright' move the caret's column one position in
+     *  DOM order across every row. The caret travels with the moved cell. */
+    private tableMove;
+    /** Align the whole table via auto margins — same semantics as the align
+     *  field in the table-properties dialog. */
+    private alignTable;
+    /** Color grid applying a background to the caret's cell — the direct way to
+     *  build header rows (the toolbar's backcolor highlights text, not cells). */
+    private buildCellFillInto;
+    /** style.backgroundColor reads back as rgb(...) — normalise to #rrggbb for the picker. */
+    private cssToHex;
+    private cellFillMenu;
     private applyTableProps;
     private tablePropsDlg;
     private currentCell;
@@ -156,7 +200,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 +213,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 +223,62 @@ 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 escapeAttr;
+    private escHtml;
+    /** The inline <code> run the caret sits in, if any (code blocks don't count). */
+    private closestInlineCode;
+    /** Wraps the selection in an inline <code> run, or unwraps the run the caret is
+     *  in. Selections spanning multiple blocks are left alone (a <code> can't wrap
+     *  across paragraphs without producing invalid markup). */
+    private toggleInlineCode;
+    /** Typing `snippet` converts to an inline <code> run the moment the closing
+     *  backtick is typed, so code can be marked up without reaching for the toolbar. */
+    private tryCodeTyping;
+    /** Custom dropdown for dialog fields (a native <select> popup can't be styled):
+     *  a field-styled button showing the current choice that opens a floating,
+     *  scrollable option list. Read the current choice via `.value()`. */
+    private dlgSelect;
+    /** Insert/edit-code-sample dialog: language dropdown + monospace textarea to
+     *  paste or type code into. Inserts a non-editable <pre class="code-block">
+     *  whose header shows the language; click the block to edit / copy / delete. */
+    private codeDlg;
+    private clearCodeSel;
+    private selectCodeEl;
+    private buildCodeCtxToolbar;
+    private copyCodeBlock;
+    private positionCodeCtx;
     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

@@ -38,9 +38,14 @@ export interface I18nStrings {
     rowabove: string;
     rowbelow: string;
     delrow: string;
+    moverowup: string;
+    moverowdown: string;
     colbefore: string;
     colafter: string;
     delcol: string;
+    movecolleft: string;
+    movecolright: string;
+    cellbg: string;
     deltable: string;
     ltr: string;
     rtl: string;
@@ -87,6 +92,9 @@ export interface I18nStrings {
     tblcellpadding: string;
     tblborder: string;
     tblalign: string;
+    tblalignleft: string;
+    tblaligncenter: string;
+    tblalignright: string;
     alignnone: string;
     quote: string;
     link: string;
@@ -95,6 +103,7 @@ export interface I18nStrings {
     unlink: string;
     lineheight: string;
     wordspacing: string;
+    letterspacing: string;
     changecase: string;
     lowercase: string;
     uppercase: string;
@@ -140,6 +149,46 @@ 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;
+    videodlgttl: string;
+    vidgeneral: string;
+    vidembed: string;
+    vidadvanced: string;
+    vidsource: string;
+    vidembedhint: string;
+    vidaltsource: string;
+    vidposter: string;
+    emoji: string;
+    code: string;
+    codesample: string;
+    codedlgttl: string;
+    codelang: string;
+    editcode: string;
+    deletecode: string;
+    copycode: 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,27 @@ 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;
+    /** Accent color used for active states, primary buttons and selection outlines.
+     *  Any CSS color. Defaults to `#df3c2b`. Applied as the `--fable-primary` CSS
+     *  variable on the document root (dialogs/popups render outside the editor shell). */
+    primaryColor?: string;
+    /** Background of each toolbar button group (the rounded pills). Any CSS
+     *  color/gradient. Defaults to `#f1f3f6`. Applied as `--fable-tgrp-bg`. */
+    toolbarGroupBackground?: string;
+    /** Font family for the editor UI (menubar, toolbar, dialogs, popups). Defaults to
+     *  a 'Noto Sans' stack — load the Noto Sans webfont in your app to use it, or pass
+     *  your own family here. Applied as `--fable-ui-font`. */
+    uiFontFamily?: string;
 }
 export interface FableEditorApi {
     getContent(): string;

package/dist/angular/esm2022/angular/fable-editor.component.mjs

@@ -9,6 +9,9 @@ export class FableEditorComponent {
     toolbar = true;
     statusbar = true;
     readonly = false;
+    primaryColor;
+    toolbarGroupBackground;
+    uiFontFamily;
     init = {};
     value = '';
     editorChange = new EventEmitter();
@@ -25,6 +28,9 @@ export class FableEditorComponent {
             toolbar: this.toolbar,
             statusbar: this.statusbar,
             readonly: this.readonly,
+            primaryColor: this.primaryColor,
+            toolbarGroupBackground: this.toolbarGroupBackground,
+            uiFontFamily: this.uiFontFamily,
             initialContent: this.value,
             ...this.init,
             onChange: (content) => {
@@ -69,7 +75,7 @@ export class FableEditorComponent {
         this.editor?.setContent(value ?? '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FableEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FableEditorComponent, isStandalone: true, selector: "fable-editor", inputs: { language: "language", height: "height", menubar: "menubar", toolbar: "toolbar", statusbar: "statusbar", readonly: "readonly", init: "init", value: "value" }, outputs: { editorChange: "editorChange", editorReady: "editorReady" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<div #container></div>`, isInline: true, styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FableEditorComponent, isStandalone: true, selector: "fable-editor", inputs: { language: "language", height: "height", menubar: "menubar", toolbar: "toolbar", statusbar: "statusbar", readonly: "readonly", primaryColor: "primaryColor", toolbarGroupBackground: "toolbarGroupBackground", uiFontFamily: "uiFontFamily", init: "init", value: "value" }, outputs: { editorChange: "editorChange", editorReady: "editorReady" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<div #container></div>`, isInline: true, styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FableEditorComponent, decorators: [{
             type: Component,
@@ -89,6 +95,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], readonly: [{
                 type: Input
+            }], primaryColor: [{
+                type: Input
+            }], toolbarGroupBackground: [{
+                type: Input
+            }], uiFontFamily: [{
+                type: Input
             }], init: [{
                 type: Input
             }], value: [{
@@ -98,4 +110,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], editorReady: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmFibGUtZWRpdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hbmd1bGFyL2ZhYmxlLWVkaXRvci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFFVCxZQUFZLEVBQ1osS0FBSyxFQUlMLE1BQU0sRUFFTixTQUFTLEVBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFdBQVcsRUFBcUQsTUFBTSxTQUFTLENBQUM7O0FBUXpGLE1BQU0sT0FBTyxvQkFBb0I7SUFDVyxTQUFTLENBQThCO0lBRXhFLFFBQVEsR0FBbUIsSUFBSSxDQUFDO0lBQ2hDLE1BQU0sR0FBRyxHQUFHLENBQUM7SUFDYixPQUFPLEdBQXFCLElBQUksQ0FBQztJQUNqQyxPQUFPLEdBQXFCLElBQUksQ0FBQztJQUNqQyxTQUFTLEdBQUcsSUFBSSxDQUFDO0lBQ2pCLFFBQVEsR0FBRyxLQUFLLENBQUM7SUFDakIsSUFBSSxHQUErQyxFQUFFLENBQUM7SUFDdEQsS0FBSyxHQUFHLEVBQUUsQ0FBQztJQUVWLFlBQVksR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0lBQzFDLFdBQVcsR0FBRyxJQUFJLFlBQVksRUFBa0IsQ0FBQztJQUVuRCxNQUFNLENBQWU7SUFDckIsV0FBVyxHQUFHLEVBQUUsQ0FBQztJQUV6QixRQUFRO1FBQ04sSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQzlCLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxXQUFXLENBQUM7WUFDNUIsTUFBTSxFQUFFLElBQUksQ0FBQyxTQUFTLENBQUMsYUFBYTtZQUNwQyxRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVE7WUFDdkIsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNO1lBQ25CLE9BQU8sRUFBRSxJQUFJLENBQUMsT0FBTztZQUNyQixPQUFPLEVBQUUsSUFBSSxDQUFDLE9BQU87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QUVJLFlBQVk7c0JBQXJCLE1BQU07Z0JBQ0csV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPbkRlc3Ryb3ksXG4gIE9uSW5pdCxcbiAgT3V0cHV0LFxuICBTaW1wbGVDaGFuZ2VzLFxuICBWaWV3Q2hpbGRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGYWJsZUVkaXRvciwgRWRpdG9ySW5pdE9wdGlvbnMsIEVkaXRvckxhbmd1YWdlLCBGYWJsZUVkaXRvckFwaSB9IGZyb20gJy4uL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmYWJsZS1lZGl0b3InLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZTogYDxkaXYgI2NvbnRhaW5lcj48L2Rpdj5gLFxuICBzdHlsZXM6IFsnOmhvc3QgeyBkaXNwbGF5OiBibG9jazsgfSddXG59KVxuZXhwb3J0IGNsYXNzIEZhYmxlRWRpdG9yQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMsIE9uRGVzdHJveSB7XG4gIEBWaWV3Q2hpbGQoJ2NvbnRhaW5lcicsIHsgc3RhdGljOiB0cnVlIH0pIGNvbnRhaW5lciE6IEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+O1xuXG4gIEBJbnB1dCgpIGxhbmd1YWdlOiBFZGl0b3JMYW5ndWFnZSA9ICdlbic7XG4gIEBJbnB1dCgpIGhlaWdodCA9IDMwMjtcbiAgQElucHV0KCkgbWVudWJhcjogYm9vbGVhbiB8IHN0cmluZyA9IHRydWU7XG4gIEBJbnB1dCgpIHRvb2xiYXI6IGJvb2xlYW4gfCBzdHJpbmcgPSB0cnVlO1xuICBASW5wdXQoKSBzdGF0dXNiYXIgPSB0cnVlO1xuICBASW5wdXQoKSByZWFkb25seSA9IGZhbHNlO1xuICBASW5wdXQoKSBpbml0OiBQYXJ0aWFsPE9taXQ8RWRpdG9ySW5pdE9wdGlvbnMsICd0YXJnZXQnPj4gPSB7fTtcbiAgQElucHV0KCkgdmFsdWUgPSAnJztcblxuICBAT3V0cHV0KCkgZWRpdG9yQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG4gIEBPdXRwdXQoKSBlZGl0b3JSZWFkeSA9IG5ldyBFdmVudEVtaXR0ZXI8RmFibGVFZGl0b3JBcGk+KCk7XG5cbiAgcHJpdmF0ZSBlZGl0b3I/OiBGYWJsZUVkaXRvcjtcbiAgcHJpdmF0ZSBsYXN0Q29udGVudCA9ICcnO1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMubGFzdENvbnRlbnQgPSB0aGlzLnZhbHVlO1xuICAgIHRoaXMuZWRpdG9yID0gbmV3IEZhYmxlRWRpdG9yKHtcbiAgICAgIHRhcmdldDogdGhpcy5jb250YWluZXIubmF0aXZlRWxlbWVudCxcbiAgICAgIGxhbmd1YWdlOiB0aGlzLmxhbmd1YWdlLFxuICAgICAgaGVpZ2h0OiB0aGlzLmhlaWdodCxcbiAgICAgIG1lbnViYXI6IHRoaXMubWVudWJhcixcbiAgICAgIHRvb2xiYXI6IHRoaXMudG9vbGJhcixcbiAgICAgIHN0YXR1c2JhcjogdGhpcy5zdGF0dXNiYXIsXG4gICAgICByZWFkb25seTogdGhpcy5yZWFkb25seSxcbiAgICAgIGluaXRpYWxDb250ZW50OiB0aGlzLnZhbHVlLFxuICAgICAgLi4udGhpcy5pbml0LFxuICAgICAgb25DaGFuZ2U6IChjb250ZW50KSA9PiB7XG4gICAgICAgIHRoaXMubGFzdENvbnRlbnQgPSBjb250ZW50O1xuICAgICAgICB0aGlzLmVkaXRvckNoYW5nZS5lbWl0KGNvbnRlbnQpO1xuICAgICAgfSxcbiAgICAgIG9uUmVhZHk6IChhcGkpID0+IHRoaXMuZWRpdG9yUmVhZHkuZW1pdChhcGkpXG4gICAgfSk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLmVkaXRvcikgcmV0dXJuO1xuICAgIGlmIChjaGFuZ2VzWydsYW5ndWFnZSddICYmICFjaGFuZ2VzWydsYW5ndWFnZSddLmZpcnN0Q2hhbmdlKSB7XG4gICAgICB0aGlzLmVkaXRvci5zZXRMYW5ndWFnZSh0aGlzLmxhbmd1YWdlKTtcbiAgICB9XG4gICAgaWYgKGNoYW5nZXNbJ3ZhbHVlJ10gJiYgIWNoYW5nZXNbJ3ZhbHVlJ10uZmlyc3RDaGFuZ2UgJiYgdGhpcy52YWx1ZSAhPT0gdGhpcy5sYXN0Q29udGVudCkge1xuICAgICAgdGhpcy5sYXN0Q29udGVudCA9IHRoaXMudmFsdWU7XG4gICAgICB0aGlzLmVkaXRvci5zZXRDb250ZW50KHRoaXMudmFsdWUgPz8gJycpO1xuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuZWRpdG9yPy5kZXN0cm95KCk7XG4gICAgdGhpcy5lZGl0b3IgPSB1bmRlZmluZWQ7XG4gIH1cblxuICBnZXRDb250ZW50KCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuZWRpdG9yPy5nZXRDb250ZW50KCkgPz8gJyc7XG4gIH1cblxuICBzZXRDb250ZW50KGh0bWw6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMubGFzdENvbnRlbnQgPSBodG1sO1xuICAgIHRoaXMuZWRpdG9yPy5zZXRDb250ZW50KGh0bWwgPz8gJycpO1xuICB9XG5cbiAgaW5zZXJ0Q29udGVudChodG1sOiBzdHJpbmcpOiB2b2lkIHtcbiAgICB0aGlzLmVkaXRvcj8uaW5zZXJ0Q29udGVudChodG1sKTtcbiAgfVxuXG4gIHNldExhbmd1YWdlKGxhbmc6IEVkaXRvckxhbmd1YWdlKTogdm9pZCB7XG4gICAgdGhpcy5lZGl0b3I/LnNldExhbmd1YWdlKGxhbmcpO1xuICB9XG5cbiAgZm9jdXMoKTogdm9pZCB7XG4gICAgdGhpcy5lZGl0b3I/LmZvY3VzKCk7XG4gIH1cblxuICB3cml0ZVZhbHVlKHZhbHVlOiBzdHJpbmcpOiB2b2lkIHtcbiAgICB0aGlzLmVkaXRvcj8uc2V0Q29udGVudCh2YWx1ZSA/PyAnJyk7XG4gIH1cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmFibGUtZWRpdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hbmd1bGFyL2ZhYmxlLWVkaXRvci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFFVCxZQUFZLEVBQ1osS0FBSyxFQUlMLE1BQU0sRUFFTixTQUFTLEVBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFdBQVcsRUFBcUQsTUFBTSxTQUFTLENBQUM7O0FBUXpGLE1BQU0sT0FBTyxvQkFBb0I7SUFDVyxTQUFTLENBQThCO0lBRXhFLFFBQVEsR0FBbUIsSUFBSSxDQUFDO0lBQ2hDLE1BQU0sR0FBRyxHQUFHLENBQUM7SUFDYixPQUFPLEdBQXFCLElBQUksQ0FBQztJQUNqQyxPQUFPLEdBQXFCLElBQUksQ0FBQztJQUNqQyxTQUFTLEdBQUcsSUFBSSxDQUFDO0lBQ2pCLFFBQVEsR0FBRyxLQUFLLENBQUM7SUFDakIsWUFBWSxDQUFVO0lBQ3RCLHNCQUFzQixDQUFVO0lBQ2hDLFlBQVksQ0FBVTtJQUN0QixJQUFJLEdBQStDLEVBQUUsQ0FBQztJQUN0RCxLQUFLLEdBQUcsRUFBRSxDQUFDO0lBRVYsWUFBWSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7SUFDMUMsV0FBVyxHQUFHLElBQUksWUFBWSxFQUFrQixDQUFDO0lBRW5ELE1BQU0sQ0FBZTtJQUNyQixXQUFXLEdBQUcsRUFBRSxDQUFDO0lBRXpCLFFBQVE7UUFDTixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7UUFDOUIsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLFdBQVcsQ0FBQztZQUM1QixNQUFNLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxhQUFhO1lBQ3BDLFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUTtZQUN2QixNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU07WUFDbkIsT0FBTyxF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O3NCQUFkLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxzQkFBc0I7c0JBQTlCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUVJLFlBQVk7c0JBQXJCLE1BQU07Z0JBQ0csV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPbkRlc3Ryb3ksXG4gIE9uSW5pdCxcbiAgT3V0cHV0LFxuICBTaW1wbGVDaGFuZ2VzLFxuICBWaWV3Q2hpbGRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGYWJsZUVkaXRvciwgRWRpdG9ySW5pdE9wdGlvbnMsIEVkaXRvckxhbmd1YWdlLCBGYWJsZUVkaXRvckFwaSB9IGZyb20gJy4uL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmYWJsZS1lZGl0b3InLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZTogYDxkaXYgI2NvbnRhaW5lcj48L2Rpdj5gLFxuICBzdHlsZXM6IFsnOmhvc3QgeyBkaXNwbGF5OiBibG9jazsgfSddXG59KVxuZXhwb3J0IGNsYXNzIEZhYmxlRWRpdG9yQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMsIE9uRGVzdHJveSB7XG4gIEBWaWV3Q2hpbGQoJ2NvbnRhaW5lcicsIHsgc3RhdGljOiB0cnVlIH0pIGNvbnRhaW5lciE6IEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+O1xuXG4gIEBJbnB1dCgpIGxhbmd1YWdlOiBFZGl0b3JMYW5ndWFnZSA9ICdlbic7XG4gIEBJbnB1dCgpIGhlaWdodCA9IDMwMjtcbiAgQElucHV0KCkgbWVudWJhcjogYm9vbGVhbiB8IHN0cmluZyA9IHRydWU7XG4gIEBJbnB1dCgpIHRvb2xiYXI6IGJvb2xlYW4gfCBzdHJpbmcgPSB0cnVlO1xuICBASW5wdXQoKSBzdGF0dXNiYXIgPSB0cnVlO1xuICBASW5wdXQoKSByZWFkb25seSA9IGZhbHNlO1xuICBASW5wdXQoKSBwcmltYXJ5Q29sb3I/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHRvb2xiYXJHcm91cEJhY2tncm91bmQ/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHVpRm9udEZhbWlseT86IHN0cmluZztcbiAgQElucHV0KCkgaW5pdDogUGFydGlhbDxPbWl0PEVkaXRvckluaXRPcHRpb25zLCAndGFyZ2V0Jz4+ID0ge307XG4gIEBJbnB1dCgpIHZhbHVlID0gJyc7XG5cbiAgQE91dHB1dCgpIGVkaXRvckNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuICBAT3V0cHV0KCkgZWRpdG9yUmVhZHkgPSBuZXcgRXZlbnRFbWl0dGVyPEZhYmxlRWRpdG9yQXBpPigpO1xuXG4gIHByaXZhdGUgZWRpdG9yPzogRmFibGVFZGl0b3I7XG4gIHByaXZhdGUgbGFzdENvbnRlbnQgPSAnJztcblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmxhc3RDb250ZW50ID0gdGhpcy52YWx1ZTtcbiAgICB0aGlzLmVkaXRvciA9IG5ldyBGYWJsZUVkaXRvcih7XG4gICAgICB0YXJnZXQ6IHRoaXMuY29udGFpbmVyLm5hdGl2ZUVsZW1lbnQsXG4gICAgICBsYW5ndWFnZTogdGhpcy5sYW5ndWFnZSxcbiAgICAgIGhlaWdodDogdGhpcy5oZWlnaHQsXG4gICAgICBtZW51YmFyOiB0aGlzLm1lbnViYXIsXG4gICAgICB0b29sYmFyOiB0aGlzLnRvb2xiYXIsXG4gICAgICBzdGF0dXNiYXI6IHRoaXMuc3RhdHVzYmFyLFxuICAgICAgcmVhZG9ubHk6IHRoaXMucmVhZG9ubHksXG4gICAgICBwcmltYXJ5Q29sb3I6IHRoaXMucHJpbWFyeUNvbG9yLFxuICAgICAgdG9vbGJhckdyb3VwQmFja2dyb3VuZDogdGhpcy50b29sYmFyR3JvdXBCYWNrZ3JvdW5kLFxuICAgICAgdWlGb250RmFtaWx5OiB0aGlzLnVpRm9udEZhbWlseSxcbiAgICAgIGluaXRpYWxDb250ZW50OiB0aGlzLnZhbHVlLFxuICAgICAgLi4udGhpcy5pbml0LFxuICAgICAgb25DaGFuZ2U6IChjb250ZW50KSA9PiB7XG4gICAgICAgIHRoaXMubGFzdENvbnRlbnQgPSBjb250ZW50O1xuICAgICAgICB0aGlzLmVkaXRvckNoYW5nZS5lbWl0KGNvbnRlbnQpO1xuICAgICAgfSxcbiAgICAgIG9uUmVhZHk6IChhcGkpID0+IHRoaXMuZWRpdG9yUmVhZHkuZW1pdChhcGkpXG4gICAgfSk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLmVkaXRvcikgcmV0dXJuO1xuICAgIGlmIChjaGFuZ2VzWydsYW5ndWFnZSddICYmICFjaGFuZ2VzWydsYW5ndWFnZSddLmZpcnN0Q2hhbmdlKSB7XG4gICAgICB0aGlzLmVkaXRvci5zZXRMYW5ndWFnZSh0aGlzLmxhbmd1YWdlKTtcbiAgICB9XG4gICAgaWYgKGNoYW5nZXNbJ3ZhbHVlJ10gJiYgIWNoYW5nZXNbJ3ZhbHVlJ10uZmlyc3RDaGFuZ2UgJiYgdGhpcy52YWx1ZSAhPT0gdGhpcy5sYXN0Q29udGVudCkge1xuICAgICAgdGhpcy5sYXN0Q29udGVudCA9IHRoaXMudmFsdWU7XG4gICAgICB0aGlzLmVkaXRvci5zZXRDb250ZW50KHRoaXMudmFsdWUgPz8gJycpO1xuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuZWRpdG9yPy5kZXN0cm95KCk7XG4gICAgdGhpcy5lZGl0b3IgPSB1bmRlZmluZWQ7XG4gIH1cblxuICBnZXRDb250ZW50KCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuZWRpdG9yPy5nZXRDb250ZW50KCkgPz8gJyc7XG4gIH1cblxuICBzZXRDb250ZW50KGh0bWw6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMubGFzdENvbnRlbnQgPSBodG1sO1xuICAgIHRoaXMuZWRpdG9yPy5zZXRDb250ZW50KGh0bWwgPz8gJycpO1xuICB9XG5cbiAgaW5zZXJ0Q29udGVudChodG1sOiBzdHJpbmcpOiB2b2lkIHtcbiAgICB0aGlzLmVkaXRvcj8uaW5zZXJ0Q29udGVudChodG1sKTtcbiAgfVxuXG4gIHNldExhbmd1YWdlKGxhbmc6IEVkaXRvckxhbmd1YWdlKTogdm9pZCB7XG4gICAgdGhpcy5lZGl0b3I/LnNldExhbmd1YWdlKGxhbmcpO1xuICB9XG5cbiAgZm9jdXMoKTogdm9pZCB7XG4gICAgdGhpcy5lZGl0b3I/LmZvY3VzKCk7XG4gIH1cblxuICB3cml0ZVZhbHVlKHZhbHVlOiBzdHJpbmcpOiB2b2lkIHtcbiAgICB0aGlzLmVkaXRvcj8uc2V0Q29udGVudCh2YWx1ZSA/PyAnJyk7XG4gIH1cbn1cbiJdfQ==