@mdaemon/html-editor 1.0.6 → 1.0.8

package/README.md

@@ -89,10 +89,12 @@ const editor = new HTMLEditor(container, {
 | `fontSize` | string | - | Default font size |
 | `directionality` | 'ltr' \| 'rtl' | 'ltr' | Text direction |
 | `language` | string | 'en' | UI language code (built-in translations for 31 languages) |
-| `height` | string \| number | 300 | Editor height |
+| `height` | string \| number | 300 | Editor height (fixed) |
+| `min_height` | string \| number | - | Minimum editor height |
+| `max_height` | string \| number | - | Maximum editor height |
 | `auto_focus` | string | - | Auto-focus the editor on init |
-| `skin` | 'oxide' \| 'oxide-dark' | 'oxide' | Theme |
-| `content_css` | 'default' \| 'dark' | 'default' | Content area styling |
+| `skin` | 'oxide' \| 'oxide-dark' \| 'confab' \| 'confab-dark' | 'oxide' | Theme (see Theming section) |
+| `content_css` | 'default' \| 'dark' \| 'confab' \| 'confab-dark' | 'default' | Content area styling |
 | `content_style` | string | - | Custom CSS injected into the content area |
 | `toolbar` | string | *(see Toolbar section)* | Custom toolbar button layout |
 | `toolbar_mode` | 'sliding' \| 'floating' \| 'wrap' | 'wrap' | Toolbar overflow behavior |
@@ -250,8 +252,8 @@ All built-in toolbar button names that can be used in the `toolbar` config strin
 | `image` | Insert image dialog (upload file or enter URL) |
 | `charmap` | Special character picker (currency, math, arrows, symbols, Greek, punctuation) |
 | `emoticons` | Emoji picker with search (smileys, gestures, hearts, objects, symbols, arrows) |
-| `code` | Toggle code block |
-| `link` | Insert/edit hyperlink dialog |
+| `code` | Open HTML source code editor dialog |
+| `link` | Open Insert/Edit Link dialog |
 | `codesample` | Toggle code sample block |
 | `fullscreen` | Toggle fullscreen editing mode |
 | `preview` | Open content preview in a new window |
@@ -296,6 +298,23 @@ const editor = new HTMLEditor(container, {
 });
 ```
 
+## Source Code Editor
+
+The `code` toolbar button opens a modal dialog for viewing and editing the raw HTML source of the editor content. The dialog features a full-size monospace textarea with the current HTML, **Cancel** and **Save** buttons, and supports Escape to close and Tab to indent.
+
+The dialog inherits the active skin theme — oxide, oxide-dark, confab, and confab-dark are all supported automatically.
+
+## Insert/Edit Link
+
+The `link` toolbar button opens a modal dialog for inserting or editing hyperlinks with the following fields:
+
+- **URL** — the link destination
+- **Text to display** — the visible link text (pre-populated from selection)
+- **Title** — the HTML `title` attribute (shown as a tooltip on hover)
+- **Open link in…** — dropdown to choose between _Current window_ or _New window_ (`target="_blank"`)
+
+When editing an existing link, all fields are pre-populated from the current link attributes. Clearing the URL and saving removes the link. The dialog inherits the active skin theme.
+
 ## Search & Replace
 
 The `searchreplace` toolbar button (or **Ctrl/Cmd+F**) opens a Find & Replace dialog with:
@@ -482,6 +501,45 @@ const editor = new HTMLEditor(container, {
 });
 ```
 
+### Confab skin
+
+The `confab` and `confab-dark` skins integrate with the WorldClient theming system. They use CSS custom properties from the host application so the editor automatically adapts when the app theme changes.
+
+The confab skins also replace the default text/emoji toolbar icons with clean SVG line icons for a more polished look.
+
+```typescript
+// Light mode
+const editor = new HTMLEditor(container, {
+  skin: 'confab',
+  content_css: 'confab',
+});
+
+// Dark mode
+const editor = new HTMLEditor(container, {
+  skin: 'confab-dark',
+  content_css: 'confab-dark',
+});
+```
+
+The confab skins expect the following CSS custom properties to be defined by the host application:
+
+| Variable | Purpose |
+|----------|---------||
+| `--theme-primary` | Primary brand color (buttons, active states) |
+| `--theme-primary-hover` | Hover state for primary color |
+| `--color-confab-gray-50` to `--color-confab-gray-900` | Gray scale for backgrounds, text, borders |
+| `--color-confab-500` | Focus ring color |
+| `--color-dark-bg-primary` | Dark mode primary background |
+| `--color-dark-bg-secondary` | Dark mode toolbar/panel background |
+| `--color-dark-bg-tertiary` | Dark mode inset/recessed background |
+| `--color-dark-bg-hover` | Dark mode hover state |
+| `--color-dark-text-primary` | Dark mode primary text |
+| `--color-dark-text-secondary` | Dark mode secondary text |
+| `--color-dark-text-muted` | Dark mode muted text |
+| `--color-dark-border` | Dark mode border color |
+
+All variables include fallback values so the editor remains usable without the host CSS, though colors may not match the intended design.
+
 ### Custom content styles
 
 Inject additional CSS into the editor content area:
@@ -498,7 +556,8 @@ The editor DOM uses BEM-style classes you can target for further customization:
 
 - `.md-editor` — outer wrapper
 - `.md-editor-fullscreen` — applied in fullscreen mode
-- `.md-editor-oxide` / `.md-editor-oxide-dark` — theme variant
+- `.md-editor-oxide` / `.md-editor-oxide-dark` — oxide theme variant
+- `.md-editor-confab` / `.md-editor-confab-dark` — confab theme variant
 - `.md-toolbar` — toolbar container
 - `.md-toolbar-sticky` — sticky toolbar
 - `.md-toolbar-primary` / `.md-toolbar-overflow` — primary and collapsible toolbar rows

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { Editor } from '@tiptap/core';
 import { Extension } from '@tiptap/core';
+import { Node as Node_2 } from '@tiptap/core';
 
 /** List of all supported locale codes */
 export declare const availableLocales: string[];
@@ -54,6 +55,13 @@ export declare interface ColorOption {
     label?: string;
 }
 
+/**
+ * Confab icon set — clean SVG stroke icons for the confab and confab-dark skins.
+ * All icons use viewBox="0 0 24 24", stroke="currentColor", stroke-width="2".
+ * Emoticons and charmap keep their emoji/text icons.
+ */
+export declare const CONFAB_ICONS: IconSet;
+
 /**
  * Create a TranslateFunction for a given language code.
  * Returns a function that looks up keys in the locale map,
@@ -61,6 +69,12 @@ export declare interface ColorOption {
  */
 export declare function createTranslateFunction(code: string): TranslateFunction;
 
+/**
+ * Default icon set — used by oxide and oxide-dark skins.
+ * Text characters and emoji for most buttons, inline SVGs for alignment/image/code.
+ */
+export declare const DEFAULT_ICONS: IconSet;
+
 declare type DirtyCallback = (dirty: boolean) => void;
 
 /**
@@ -107,10 +121,12 @@ export declare interface EditorConfig {
     directionality?: 'ltr' | 'rtl';
     language?: string;
     height?: string | number;
+    min_height?: string | number;
+    max_height?: string | number;
     auto_focus?: string;
     setFocus?: string;
-    skin?: 'oxide' | 'oxide-dark';
-    content_css?: 'default' | 'dark';
+    skin?: 'oxide' | 'oxide-dark' | 'confab' | 'confab-dark';
+    content_css?: 'default' | 'dark' | 'confab' | 'confab-dark';
     content_style?: string;
     toolbar?: string;
     toolbar_mode?: 'sliding' | 'floating' | 'wrap';
@@ -271,6 +287,12 @@ export declare class HTMLEditor implements MDHTMLEditor {
     isBasicEditor(): boolean;
 }
 
+/**
+ * MDHTMLEditor Icon Sets
+ * Skin-specific icon registries for toolbar buttons
+ */
+export declare type IconSet = Record<string, string>;
+
 /**
  * Image upload handler
  */
@@ -300,6 +322,29 @@ declare interface LineHeightOptions {
     defaultLineHeight: string;
 }
 
+export declare class LinkEditor {
+    private options;
+    private overlay;
+    private dialog;
+    private urlInput;
+    private textInput;
+    private titleInput;
+    private targetSelect;
+    constructor(options: LinkEditorOptions);
+    private get tiptap();
+    open(): void;
+    close(): void;
+    private populateFromSelection;
+    private save;
+    private createDialog;
+    destroy(): void;
+}
+
+export declare interface LinkEditorOptions {
+    editor: HTMLEditor;
+    trans: (key: string) => string;
+}
+
 /**
  * Main HTMLEditor class interface
  */
@@ -380,6 +425,27 @@ export declare function setGetFileSrc(fn: (path: string) => string): void;
  */
 export declare function setTranslate(fn: TranslateFunction): void;
 
+export declare const SignatureBlock: Node_2<any, any>;
+
+export declare class SourceEditor {
+    private options;
+    private overlay;
+    private dialog;
+    private textarea;
+    constructor(options: SourceEditorOptions);
+    private get tiptap();
+    open(): void;
+    close(): void;
+    private save;
+    private createDialog;
+    destroy(): void;
+}
+
+export declare interface SourceEditorOptions {
+    editor: HTMLEditor;
+    trans: (key: string) => string;
+}
+
 /**
  * Template object for email templates
  */
@@ -409,6 +475,8 @@ export declare class Toolbar {
     private emojiPicker;
     private imageUpload;
     private searchReplace;
+    private sourceEditor;
+    private linkEditor;
     private updateInterval;
     private boundClickHandler;
     private boundKeydownHandler;
@@ -417,6 +485,7 @@ export declare class Toolbar {
     constructor(container: HTMLElement, options: ToolbarOptions);
     private get tiptap();
     private get trans();
+    private icon;
     private render;
     private renderGroups;
     private createToggleButton;
@@ -473,6 +542,7 @@ declare interface ToolbarOptions {
     sticky: boolean;
     customButtons: Map<string, ToolbarButtonSpec>;
     config: EditorConfig;
+    iconSet: IconSet;
 }
 
 /**