@mdaemon/html-editor 1.5.0 → 1.6.1

package/README.md

@@ -1,3 +1,5 @@
+[![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fmdaemon-technologies%2FMDHTMLEditor%2Fmaster%2Fpackage.json&query=%24.version&prefix=v&label=npm&color=blue)](https://www.npmjs.com/package/@mdaemon/html-editor) [![install size](https://packagephobia.com/badge?p=@mdaemon/html-editor)](https://packagephobia.com/result?p=@mdaemon/html-editor) [![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fmdaemon-technologies%2FMDHTMLEditor%2Fmaster%2Fpackage.json&query=%24.license&prefix=v&label=license&color=green)](https://github.com/mdaemon-technologies/MDHTMLEditor/blob/master/LICENSE) [![Node.js CI](https://github.com/mdaemon-technologies/MDHTMLEditor/actions/workflows/ci.yml/badge.svg)](https://github.com/mdaemon-technologies/MDHTMLEditor/actions/workflows/ci.yml)
+
 # MDHTMLEditor
 
 A TinyMCE-compatible HTML editor built on TipTap. This is the core vanilla TypeScript package - for React usage, see `@mdaemon/html-editor-react`.
@@ -95,8 +97,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) |
@@ -402,6 +404,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,11 @@ 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[];
@@ -828,22 +846,6 @@ export declare interface UIRegistry {
 export { }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        fontSize: {
-            /**
-             * Set the font size
-             */
-            setFontSize: (size: string) => ReturnType;
-            /**
-             * Unset the font size
-             */
-            unsetFontSize: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         lineHeight: {
@@ -878,9 +880,11 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        anchor: {
-            /** Insert a named anchor at the cursor. */
-            setAnchor: (name: string) => ReturnType;
+        inlineStyle: {
+            /** Apply a CSS class to the current selection via the textStyle mark. */
+            setInlineClass: (className: string) => ReturnType;
+            /** Remove the textStyle class. */
+            unsetInlineClass: () => ReturnType;
         };
     }
 }
@@ -888,11 +892,25 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        inlineStyle: {
-            /** Apply a CSS class to the current selection via the textStyle mark. */
-            setInlineClass: (className: string) => ReturnType;
-            /** Remove the textStyle class. */
-            unsetInlineClass: () => ReturnType;
+        fontSize: {
+            /**
+             * Set the font size
+             */
+            setFontSize: (size: string) => ReturnType;
+            /**
+             * Unset the font size
+             */
+            unsetFontSize: () => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        anchor: {
+            /** Insert a named anchor at the cursor. */
+            setAnchor: (name: string) => ReturnType;
         };
     }
 }