@mdaemon/html-editor 1.4.2 → 1.6.0

package/README.md

@@ -77,6 +77,7 @@ const editor = new HTMLEditor(container, {
 | `basicEditor` | boolean | false | Use simplified toolbar for notes/tasks |
 | `readonly` | boolean | false | Start the editor in read-only mode (see `setReadOnly`) |
 | `forced_root_block` | 'p' \| 'div' | 'p' | Block element produced on Enter. `'div'` gives CKEditor `ENTER_DIV` parity |
+| `trailingNode` | boolean | false | Append an empty trailing paragraph when the document ends in a block node (table, image, code block) so the cursor can be placed after it |
 | `includeTemplates` | boolean | false | Show template dropdown |
 | `templates` | Template[] | [] | Array of templates |
 | `dropbox` | boolean | false | Enable Dropbox integration |
@@ -94,8 +95,8 @@ const editor = new HTMLEditor(container, {
 | `fontSize_sizes` | string | - | CKEditor alias for `font_size_formats` |
 | `block_formats` | string | 'Paragraph=p;Heading 1=h1;…' | Block-format dropdown definitions (`blocks` button) |
 | `style_formats` | StyleFormat[] | *(subset)* | Named styles for the Styles dropdown (`styles` button) |
-| `fontName` | string | - | Default font family |
-| `fontSize` | string | - | Default font size |
+| `fontName` | string | `arial, helvetica, sans-serif` | Default font family, inlined on every block element (see [Font Family & Size](#font-family--size)) |
+| `fontSize` | string | `12pt` | Default font size, inlined on every paragraph (see [Font Family & Size](#font-family--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 (fixed) |
@@ -401,6 +402,48 @@ Tables are resizable by dragging column borders.
 
   > Note: block elements map to headings/paragraph, `color`/`background-color` map to the editor's text-color/highlight marks, and `classes` apply a CSS class to the selection. Arbitrary element wrapping from CKEditor's stylesSet (e.g. `big`, `tt`, `cite`) is not supported by the underlying TipTap schema.
 
+## Font Family & Size
+
+The editor inlines a **default font directly on the block elements** of the
+exported HTML so content keeps its font when rendered outside the editor (for
+example, an email body opened in another client that doesn't load the editor's
+CSS). Set the base font with `fontName` / `fontSize`:
+
+```typescript
+const editor = new HTMLEditor(container, {
+  fontName: 'Georgia, serif',
+  fontSize: '14pt',
+});
+```
+
+With the config above, `getContent()` produces blocks that carry the font inline:
+
+```html
+<p style="font-family: Georgia, serif; font-size: 14pt;">Hello</p>
+```
+
+Defaults when the options are omitted: `arial, helvetica, sans-serif` and `12pt`.
+
+- `font-family` is inlined on paragraphs **and** headings.
+- `font-size` is inlined on paragraphs only — headings keep their level-based
+  sizing (`h1` = 2em, `h2` = 1.5em, …), which a forced default would otherwise
+  clobber.
+
+**Per-selection changes still work.** Selecting text and picking a font or size
+from the `fontfamily` / `fontsize` toolbar dropdowns (or `execCommand('fontname', …)`
+/ `execCommand('fontsize', …)`) produces an inline `<span>` that overrides the
+block default for just that text — so a single paragraph can mix fonts and sizes:
+
+```html
+<p style="font-family: Georgia, serif; font-size: 14pt;">
+  this is <span style="font-size: 24pt;">A BIG font</span>, and this is a small font
+</p>
+```
+
+This is handled by the exported `BlockFontStyle` extension (block defaults) layered
+with the inline `FontSize` mark and TipTap's `FontFamily` mark (per-selection
+overrides).
+
 ## Read-Only Mode
 
 Start the editor read-only with `readonly: true`, or toggle it at runtime. Read-only mode disables editing and dims/blocks the toolbar.

package/dist/index.d.ts

@@ -33,6 +33,19 @@ export declare interface AnchorOptions {
 /** List of all supported locale codes */
 export declare const availableLocales: string[];
 
+export declare const BlockFontStyle: Extension<BlockFontStyleOptions, any>;
+
+export declare interface BlockFontStyleOptions {
+    /** Node types that receive the default font-family. */
+    fontFamilyTypes: string[];
+    /** Node types that receive the default font-size. */
+    fontSizeTypes: string[];
+    /** Default font-family inlined on every matching block. */
+    defaultFontFamily: string;
+    /** Default font-size inlined on every matching block. */
+    defaultFontSize: string;
+}
+
 declare type BlurCallback = () => void;
 
 declare type ChangeCallback = (content: string) => void;
@@ -172,6 +185,12 @@ export declare interface EditorConfig {
      * 'p' (default) emits <p>; 'div' emits <div> (CKEditor ENTER_DIV parity).
      */
     forced_root_block?: 'p' | 'div';
+    /**
+     * Append an empty trailing paragraph when the document ends in a block node
+     * (table, image, code block, etc.) so the cursor can be placed after it.
+     * Disabled by default.
+     */
+    trailingNode?: boolean;
     includeTemplates?: boolean;
     templates?: Template[];
     dropbox?: boolean;

package/dist/index.js

@@ -47404,6 +47404,59 @@ const FontSize = Extension.create({
     };
   }
 });
+const BlockFontStyle = Extension.create({
+  name: "blockFontStyle",
+  addOptions() {
+    return {
+      fontFamilyTypes: ["paragraph", "heading"],
+      fontSizeTypes: ["paragraph"],
+      defaultFontFamily: "arial, helvetica, sans-serif",
+      defaultFontSize: "12pt"
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.fontFamilyTypes,
+        attributes: {
+          // Named blockFontFamily to avoid colliding with the inline
+          // FontFamily mark's `fontFamily` attribute on textStyle.
+          blockFontFamily: {
+            default: this.options.defaultFontFamily,
+            parseHTML: (element) => element.style.fontFamily?.replace(/['"]+/g, "") || this.options.defaultFontFamily,
+            renderHTML: (attributes) => {
+              if (!attributes.blockFontFamily) {
+                return {};
+              }
+              return {
+                style: `font-family: ${attributes.blockFontFamily}`
+              };
+            }
+          }
+        }
+      },
+      {
+        types: this.options.fontSizeTypes,
+        attributes: {
+          // Named blockFontSize to avoid colliding with the inline FontSize
+          // mark's `fontSize` attribute on textStyle.
+          blockFontSize: {
+            default: this.options.defaultFontSize,
+            parseHTML: (element) => element.style.fontSize?.replace(/['"]+/g, "") || this.options.defaultFontSize,
+            renderHTML: (attributes) => {
+              if (!attributes.blockFontSize) {
+                return {};
+              }
+              return {
+                style: `font-size: ${attributes.blockFontSize}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  }
+});
 const LineHeight = Extension.create({
   name: "lineHeight",
   addOptions() {
@@ -51631,6 +51684,8 @@ const fontNames = "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-ser
 const FULL_TOOLBAR = "bold italic underline strikethrough subscript superscript | blocks styles | bullist numlist outdent indent blockquote | fontfamily fontsize | lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | image table charmap emoticons hr | fullscreen preview | code link unlink anchor codesample | ltr rtl | searchreplace";
 const BASIC_TOOLBAR = "bold italic underline strikethrough subscript superscript | bullist numlist outdent indent | fontfamily fontsize blockquote | lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | charmap emoticons | link unlink | ltr rtl | searchreplace";
 const DEFAULT_FONT_SIZES = "8pt 9pt 10pt 12pt 14pt 18pt 24pt 36pt";
+const DEFAULT_FONT_FAMILY = "arial, helvetica, sans-serif";
+const DEFAULT_FONT_SIZE = "12pt";
 let editorIdCounter = 0;
 let globalTranslate = (key) => key;
 let globalTranslateCustomized = false;
@@ -51907,6 +51962,10 @@ class HTMLEditor {
         // We use CodeBlockLowlight instead
         // When forced_root_block is 'div', swap StarterKit's <p> paragraph for
         // a custom Paragraph that renders as <div> (CKEditor ENTER_DIV parity).
+        // StarterKit enables trailingNode by default; it accepts `false` to
+        // disable or an options object, but not `true`. Map our boolean toggle:
+        // truthy → undefined (use StarterKit's default/enabled), otherwise disable.
+        trailingNode: this.config.trailingNode ? void 0 : false,
         ...useDivBlocks ? { paragraph: false } : {}
       }),
       SignatureBlock,
@@ -51917,8 +51976,19 @@ class HTMLEditor {
       Underline,
       TextStyle,
       InlineStyle,
+      // Inline (mark-based) font styling for per-selection changes: produces
+      // <span style="font-family|font-size:…"> so a single paragraph can mix
+      // fonts/sizes.
       FontFamily,
       FontSize,
+      // Block-level default font: inlines font-family on <p>/<div>/<hN> and
+      // font-size on <p>/<div>, from the configured fontName/fontSize, so
+      // exported content carries the base font on the block itself. Inline
+      // spans above still override it for the text they wrap.
+      BlockFontStyle.configure({
+        defaultFontFamily: this.config.fontName ?? DEFAULT_FONT_FAMILY,
+        defaultFontSize: this.config.fontSize ?? DEFAULT_FONT_SIZE
+      }),
       LineHeight,
       Color,
       Highlight.configure({
@@ -52208,6 +52278,7 @@ class HTMLEditor {
 }
 exports.Anchor = Anchor;
 exports.AnchorDialog = AnchorDialog;
+exports.BlockFontStyle = BlockFontStyle;
 exports.CHAR_MAP = CHAR_MAP;
 exports.CONFAB_ICONS = CONFAB_ICONS;
 exports.CharacterMap = CharacterMap;

package/dist/index.mjs

@@ -47402,6 +47402,59 @@ const FontSize = Extension.create({
     };
   }
 });
+const BlockFontStyle = Extension.create({
+  name: "blockFontStyle",
+  addOptions() {
+    return {
+      fontFamilyTypes: ["paragraph", "heading"],
+      fontSizeTypes: ["paragraph"],
+      defaultFontFamily: "arial, helvetica, sans-serif",
+      defaultFontSize: "12pt"
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.fontFamilyTypes,
+        attributes: {
+          // Named blockFontFamily to avoid colliding with the inline
+          // FontFamily mark's `fontFamily` attribute on textStyle.
+          blockFontFamily: {
+            default: this.options.defaultFontFamily,
+            parseHTML: (element) => element.style.fontFamily?.replace(/['"]+/g, "") || this.options.defaultFontFamily,
+            renderHTML: (attributes) => {
+              if (!attributes.blockFontFamily) {
+                return {};
+              }
+              return {
+                style: `font-family: ${attributes.blockFontFamily}`
+              };
+            }
+          }
+        }
+      },
+      {
+        types: this.options.fontSizeTypes,
+        attributes: {
+          // Named blockFontSize to avoid colliding with the inline FontSize
+          // mark's `fontSize` attribute on textStyle.
+          blockFontSize: {
+            default: this.options.defaultFontSize,
+            parseHTML: (element) => element.style.fontSize?.replace(/['"]+/g, "") || this.options.defaultFontSize,
+            renderHTML: (attributes) => {
+              if (!attributes.blockFontSize) {
+                return {};
+              }
+              return {
+                style: `font-size: ${attributes.blockFontSize}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  }
+});
 const LineHeight = Extension.create({
   name: "lineHeight",
   addOptions() {
@@ -51629,6 +51682,8 @@ const fontNames = "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-ser
 const FULL_TOOLBAR = "bold italic underline strikethrough subscript superscript | blocks styles | bullist numlist outdent indent blockquote | fontfamily fontsize | lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | image table charmap emoticons hr | fullscreen preview | code link unlink anchor codesample | ltr rtl | searchreplace";
 const BASIC_TOOLBAR = "bold italic underline strikethrough subscript superscript | bullist numlist outdent indent | fontfamily fontsize blockquote | lineheight alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat copy cut paste | undo redo | charmap emoticons | link unlink | ltr rtl | searchreplace";
 const DEFAULT_FONT_SIZES = "8pt 9pt 10pt 12pt 14pt 18pt 24pt 36pt";
+const DEFAULT_FONT_FAMILY = "arial, helvetica, sans-serif";
+const DEFAULT_FONT_SIZE = "12pt";
 let editorIdCounter = 0;
 let globalTranslate = (key) => key;
 let globalTranslateCustomized = false;
@@ -51905,6 +51960,10 @@ class HTMLEditor {
         // We use CodeBlockLowlight instead
         // When forced_root_block is 'div', swap StarterKit's <p> paragraph for
         // a custom Paragraph that renders as <div> (CKEditor ENTER_DIV parity).
+        // StarterKit enables trailingNode by default; it accepts `false` to
+        // disable or an options object, but not `true`. Map our boolean toggle:
+        // truthy → undefined (use StarterKit's default/enabled), otherwise disable.
+        trailingNode: this.config.trailingNode ? void 0 : false,
         ...useDivBlocks ? { paragraph: false } : {}
       }),
       SignatureBlock,
@@ -51915,8 +51974,19 @@ class HTMLEditor {
       Underline,
       TextStyle,
       InlineStyle,
+      // Inline (mark-based) font styling for per-selection changes: produces
+      // <span style="font-family|font-size:…"> so a single paragraph can mix
+      // fonts/sizes.
       FontFamily,
       FontSize,
+      // Block-level default font: inlines font-family on <p>/<div>/<hN> and
+      // font-size on <p>/<div>, from the configured fontName/fontSize, so
+      // exported content carries the base font on the block itself. Inline
+      // spans above still override it for the text they wrap.
+      BlockFontStyle.configure({
+        defaultFontFamily: this.config.fontName ?? DEFAULT_FONT_FAMILY,
+        defaultFontSize: this.config.fontSize ?? DEFAULT_FONT_SIZE
+      }),
       LineHeight,
       Color,
       Highlight.configure({
@@ -52207,6 +52277,7 @@ class HTMLEditor {
 export {
   Anchor,
   AnchorDialog,
+  BlockFontStyle,
   CHAR_MAP,
   CONFAB_ICONS,
   CharacterMap,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdaemon/html-editor",
-  "version": "1.4.2",
+  "version": "1.6.0",
   "description": "A TinyMCE-compatible HTML editor built on TipTap",
   "homepage": "https://github.com/mdaemon-technologies/MDHTMLEditor",
   "repository": {