@mdaemon/html-editor-react 1.4.0 → 1.5.0

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-react%2Fmaster%2Fpackage.json&query=%24.version&prefix=v&label=npm&color=blue)](https://www.npmjs.com/package/@mdaemon/html-editor-react) [![install size](https://packagephobia.com/badge?p=@mdaemon/html-editor-react)](https://packagephobia.com/result?p=@mdaemon/html-editor-react) [![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fmdaemon-technologies%2FMDHTMLEditor-react%2Fmaster%2Fpackage.json&query=%24.license&prefix=v&label=license&color=green)](https://github.com/mdaemon-technologies/MDHTMLEditor-react/blob/master/LICENSE) [![Node.js CI](https://github.com/mdaemon-technologies/MDHTMLEditor-react/actions/workflows/ci.yml/badge.svg)](https://github.com/mdaemon-technologies/MDHTMLEditor-react/actions/workflows/ci.yml)
+
 # MDHTMLEditor React
 
 A React wrapper for [MDHTMLEditor](https://github.com/mdaemon-technologies/MDHTMLEditor) — a WYSIWYG HTML editor built on TipTap. Provides a drop-in replacement for `@tinymce/tinymce-react` with no license key required.
@@ -222,8 +224,8 @@ The `config` prop (or `useEditor`'s `config` option) accepts an `EditorConfig` o
 | `skin` | `'oxide' \| 'oxide-dark' \| 'confab' \| 'confab-dark'` | `'oxide'` | Toolbar and dialog theme. |
 | `content_css` | `'default' \| 'dark' \| 'confab' \| 'confab-dark'` | `'default'` | Content area theme. |
 | `content_style` | `string` | — | Custom CSS injected into the editing surface. |
-| `fontName` | `string` | — | Default font family. |
-| `fontSize` | `string` | — | Default font size. |
+| `fontName` | `string` | `'arial, helvetica, sans-serif'` | Default font family. Inlined on every block in the exported HTML — see [Fonts](#fonts). |
+| `fontSize` | `string` | `'12pt'` | Default font size. Inlined on every paragraph in the exported HTML — see [Fonts](#fonts). |
 | `font_family_formats` | `string` | *(TinyMCE defaults)* | Semicolon-delimited font list (`Name=family,...`). |
 | `font_size_formats` | `string` | `'8pt 9pt 10pt 12pt 14pt 18pt 24pt 36pt'` | Space-delimited size options. |
 | `font_names` | `string` | — | CKEditor alias for `font_family_formats`. |
@@ -334,6 +336,77 @@ const isReadOnly = editorRef.current?.getEditor()?.isReadOnly();
 
 > The `disabled` prop applies a lightweight visual lock (pointer-events off, reduced opacity). For true non-editable behavior that also dims the toolbar, prefer `readonly` / `setReadOnly()`.
 
+## Fonts
+
+`fontName` and `fontSize` set the editor's default font. The defaults are written directly onto each block in the exported HTML (`font-family` on `<p>`/`<div>`/`<hN>`, `font-size` on `<p>`/`<div>`) rather than relying on the editor's stylesheet being present, so the content keeps its font when it is rendered somewhere else &mdash; an email body opened in another client, for example. Headings keep their level-based sizing and carry no block `font-size`.
+
+```tsx
+<Editor
+  config={{
+    fontName: 'Georgia, serif',
+    fontSize: '14pt',
+  }}
+/>
+```
+
+Selecting text and picking a font or size from the `fontfamily` / `fontsize` toolbar dropdowns produces an inline `<span>` that overrides the block default, so a single paragraph can mix fonts and sizes.
+
+### The Toolbar Shows the Font at the Cursor
+
+The `fontfamily` and `fontsize` toolbar buttons display the value in effect at the cursor &mdash; "Georgia", "14pt" &mdash; and update as the caret moves, instead of showing the static words "Font" and "Font size". A family is shown by its configured name (the label side of `font_family_formats`); a font that is not in the configured list, such as one pasted in from another editor, is shown by its first family name. Labels are width-constrained and ellipsized so the toolbar does not reflow as the caret moves, with the full text on each button's `title`.
+
+Where no single value applies, the button falls back to the generic word. That happens for a selection spanning two different fonts or sizes, and for font size inside a heading.
+
+> This is styled by rules in `@mdaemon/html-editor/dist/styles.css` &mdash; make sure the [stylesheet import](#styles) is present, and re-check any custom CSS you have layered on top of the toolbar buttons.
+
+### Reading the Current Font
+
+`getFontFamily()` and `getFontSize()` report the font in effect at the cursor, resolving an inline `<span>` override first, then the block's own font, then the configured default:
+
+```tsx
+const editor = editorRef.current?.getEditor();
+
+const family = editor?.getFontFamily(); // e.g. 'Georgia, serif'
+const size = editor?.getFontSize();     // e.g. '14pt'
+```
+
+Use these to drive a custom font picker outside the toolbar. Unlike reading the inline mark directly, they still return a value when the font comes from the block or the configured default.
+
+Both return `''` when there is no single value to report:
+
+- the selection spans more than one font family / size
+- for `getFontSize()`, the cursor is in a heading with no inline override (headings size by level and carry no block `font-size`)
+
+Treat `''` as "mixed / not applicable" and blank your picker, rather than falling back to a default &mdash; that is what the toolbar does.
+
+The editor emits no selection event of its own, so subscribe on the TipTap instance to keep a readout in sync with the caret:
+
+```tsx
+const handleInit = useCallback((editor: HTMLEditor) => {
+  const sync = () => {
+    setFamily(editor.getFontFamily());
+    setSize(editor.getFontSize());
+  };
+
+  sync();
+  editor.getTipTap()?.on('selectionUpdate', sync);
+  editor.getTipTap()?.on('transaction', sync);
+}, []);
+
+<Editor config={{ fontName: 'Georgia, serif', fontSize: '14pt' }} onInit={handleInit} />
+```
+
+### Setting a Block Font
+
+To change the font on every block the selection touches &mdash; instead of adding an inline override &mdash; use the `setBlockFontFamily` / `setBlockFontSize` commands on the underlying TipTap instance:
+
+```tsx
+const tiptap = editorRef.current?.getEditor()?.getTipTap();
+
+tiptap?.chain().focus().setBlockFontFamily('Georgia, serif').run();
+tiptap?.chain().focus().setBlockFontSize('14pt').run();
+```
+
 ## Templates
 
 Enable the template dropdown and provide a `templates` array:
@@ -664,7 +737,26 @@ A demo app is included to see the editor in action:
 npm run demo
 ```
 
-This starts a Vite dev server at `http://localhost:5173` with examples of both the `<Editor>` component and `useEditor` hook.
+This starts a Vite dev server at `http://localhost:5173` with three sections: the `<Editor>` component, the `useEditor` hook, and a [Fonts](#fonts) panel with a live `getFontFamily()` / `getFontSize()` readout that follows the cursor and buttons for the block-font commands.
+
+## Development
+
+The package is bundled with [Vite 8](https://vite.dev/) (Rolldown) and ships ES, CommonJS, and TypeScript declaration outputs.
+
+| Script | Description |
+|--------|-------------|
+| `npm run build` | Production build to `dist/` (ES + CJS + `.d.ts`). |
+| `npm run build:dev` | Development build (unminified, sourcemaps). |
+| `npm run dev` | Rebuild on change (watch mode). |
+| `npm test` | Run the Jest test suite. |
+| `npm run test:coverage` | Run tests with coverage. |
+| `npm run lint` | Lint `src` with ESLint. |
+| `npm run typecheck` | Type-check `src` and `demo` with `tsc --noEmit`. |
+| `npm run demo` | Launch the demo app. |
+
+> **Node.js:** building the package requires Node `^20.19.0 || >=22.12.0` (a Vite 8 requirement). Consumers of the published package are unaffected.
+
+Lint, typecheck, and tests run automatically in [CI](.github/workflows/ci.yml) on every push and pull request to `master` across Node 20, 22, 24, and 26.
 
 ## License
 

package/dist/Editor.d.ts

@@ -0,0 +1,88 @@
+import { HTMLEditor, EditorConfig } from '@mdaemon/html-editor';
+export interface EditorProps {
+    /**
+     * Editor configuration - TinyMCE compatible
+     */
+    config: EditorConfig;
+    /**
+     * Initial HTML content (also known as 'body' for TinyMCE compat)
+     */
+    body?: string;
+    /**
+     * Initial HTML content (alias for body)
+     */
+    initialValue?: string;
+    /**
+     * Name attribute for the hidden textarea
+     */
+    name?: string;
+    /**
+     * Called when content is modified
+     */
+    onDirty?: (dirty: boolean) => void;
+    /**
+     * Called on content change (debounced)
+     */
+    onChange?: (content: string) => void;
+    /**
+     * Called when editor is fully initialized
+     */
+    onInit?: (editor: HTMLEditor) => void;
+    /**
+     * Called when editor receives focus
+     */
+    onFocus?: () => void;
+    /**
+     * Called when editor loses focus
+     */
+    onBlur?: () => void;
+    /**
+     * Translation function
+     */
+    translate?: (key: string) => string;
+    /**
+     * Function to resolve file paths (like TinyMCE's tinymceScriptSrc path)
+     */
+    getFileSrc?: (path: string) => string;
+    /**
+     * Disable the editor
+     */
+    disabled?: boolean;
+}
+export interface EditorRef {
+    /**
+     * Get the underlying HTMLEditor instance
+     */
+    getEditor: () => HTMLEditor | null;
+    /**
+     * Get the editor content as HTML
+     */
+    getContent: () => string;
+    /**
+     * Set the editor content
+     */
+    setContent: (html: string) => void;
+    /**
+     * Insert content at cursor position
+     */
+    insertContent: (html: string) => void;
+    /**
+     * Focus the editor
+     */
+    focus: () => void;
+}
+/**
+ * Get content from the global editor instance
+ * Note: Only works with single editor on the page
+ */
+export declare function getEditorContent(): string;
+/**
+ * Set content on the global editor instance
+ * Note: Only works with single editor on the page
+ */
+export declare function setEditorContent(html: string): void;
+/**
+ * MDHTMLEditor React Component
+ */
+export declare const Editor: import('react').ForwardRefExoticComponent<EditorProps & import('react').RefAttributes<EditorRef>>;
+export default Editor;

package/dist/index.d.ts

@@ -1,168 +1,9 @@
-import { EditorConfig } from '@mdaemon/html-editor';
-import { EditorEvents } from '@mdaemon/html-editor';
-import { fontNames } from '@mdaemon/html-editor';
-import { ForwardRefExoticComponent } from 'react';
-import { HTMLEditor } from '@mdaemon/html-editor';
-import { RefAttributes } from 'react';
-import { setGetFileSrc } from '@mdaemon/html-editor';
-import { setTranslate } from '@mdaemon/html-editor';
-import { Template } from '@mdaemon/html-editor';
-import { ToolbarButtonAPI } from '@mdaemon/html-editor';
-import { ToolbarButtonSpec } from '@mdaemon/html-editor';
-
-/**
- * MDHTMLEditor React Component
- */
-declare const Editor: ForwardRefExoticComponent<EditorProps & RefAttributes<EditorRef>>;
-export { Editor }
-export { Editor as MDEditor }
-
-export { EditorConfig }
-
-export { EditorEvents }
-
-export declare interface EditorProps {
-    /**
-     * Editor configuration - TinyMCE compatible
-     */
-    config: EditorConfig;
-    /**
-     * Initial HTML content (also known as 'body' for TinyMCE compat)
-     */
-    body?: string;
-    /**
-     * Initial HTML content (alias for body)
-     */
-    initialValue?: string;
-    /**
-     * Name attribute for the hidden textarea
-     */
-    name?: string;
-    /**
-     * Called when content is modified
-     */
-    onDirty?: (dirty: boolean) => void;
-    /**
-     * Called on content change (debounced)
-     */
-    onChange?: (content: string) => void;
-    /**
-     * Called when editor is fully initialized
-     */
-    onInit?: (editor: HTMLEditor) => void;
-    /**
-     * Called when editor receives focus
-     */
-    onFocus?: () => void;
-    /**
-     * Called when editor loses focus
-     */
-    onBlur?: () => void;
-    /**
-     * Translation function
-     */
-    translate?: (key: string) => string;
-    /**
-     * Function to resolve file paths (like TinyMCE's tinymceScriptSrc path)
-     */
-    getFileSrc?: (path: string) => string;
-    /**
-     * Disable the editor
-     */
-    disabled?: boolean;
-}
-
-export declare interface EditorRef {
-    /**
-     * Get the underlying HTMLEditor instance
-     */
-    getEditor: () => HTMLEditor | null;
-    /**
-     * Get the editor content as HTML
-     */
-    getContent: () => string;
-    /**
-     * Set the editor content
-     */
-    setContent: (html: string) => void;
-    /**
-     * Insert content at cursor position
-     */
-    insertContent: (html: string) => void;
-    /**
-     * Focus the editor
-     */
-    focus: () => void;
-}
-
-export { fontNames }
-
-/**
- * Get content from the global editor instance
- * Note: Only works with single editor on the page
- */
-export declare function getEditorContent(): string;
-
-/**
- * Set content on the global editor instance
- * Note: Only works with single editor on the page
- */
-export declare function setEditorContent(html: string): void;
-
-export { setGetFileSrc }
-
-export { setTranslate }
-
-export { Template }
-
-export { ToolbarButtonAPI }
-
-export { ToolbarButtonSpec }
-
-/**
- * Hook for programmatic editor control
- */
-export declare function useEditor(options?: UseEditorOptions): UseEditorReturn;
-
-export declare interface UseEditorOptions {
-    config?: EditorConfig;
-    content?: string;
-    onUpdate?: (html: string) => void;
-}
-
-export declare interface UseEditorReturn {
-    /**
-     * The editor instance
-     */
-    editor: HTMLEditor | null;
-    /**
-     * Ref to attach to the container element
-     */
-    containerRef: React.RefObject<HTMLDivElement | null>;
-    /**
-     * Whether the editor is ready
-     */
-    ready: boolean;
-    /**
-     * Get the current HTML content
-     */
-    getContent: () => string;
-    /**
-     * Set the HTML content
-     */
-    setContent: (html: string) => void;
-    /**
-     * Insert HTML at cursor
-     */
-    insertContent: (html: string) => void;
-    /**
-     * Focus the editor
-     */
-    focus: () => void;
-    /**
-     * Check if editor is dirty
-     */
-    isDirty: () => boolean;
-}
-
-export { }
+/**
+ * MDHTMLEditor React - Main Entry Point
+ */
+export { Editor as MDEditor, Editor, getEditorContent, setEditorContent } from './Editor';
+export type { EditorProps, EditorRef } from './Editor';
+export { useEditor } from './useEditor';
+export type { UseEditorOptions, UseEditorReturn } from './useEditor';
+export { fontNames, setTranslate, setGetFileSrc, } from '@mdaemon/html-editor';
+export type { EditorConfig, EditorEvents, Template, ToolbarButtonSpec, ToolbarButtonAPI, } from '@mdaemon/html-editor';

package/dist/index.js

@@ -1,173 +1,178 @@
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const htmlEditor = require("@mdaemon/html-editor");
-let globalEditor = null;
+let react = require("react");
+let _mdaemon_html_editor = require("@mdaemon/html-editor");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Editor.tsx
+/**
+* MDHTMLEditor React Component
+* A TinyMCE-compatible React wrapper for MDHTMLEditor
+*/
+var globalEditor = null;
+/**
+* Get content from the global editor instance
+* Note: Only works with single editor on the page
+*/
 function getEditorContent() {
-  return globalEditor?.getContent() ?? "";
+	return globalEditor?.getContent() ?? "";
 }
+/**
+* Set content on the global editor instance
+* Note: Only works with single editor on the page
+*/
 function setEditorContent(html) {
-  globalEditor?.setContent(html);
+	globalEditor?.setContent(html);
 }
-const Editor = react.forwardRef(function Editor2(props, ref) {
-  const {
-    config,
-    body,
-    initialValue,
-    name,
-    onDirty,
-    onChange,
-    onInit,
-    onFocus,
-    onBlur,
-    translate,
-    getFileSrc,
-    disabled
-  } = props;
-  const containerRef = react.useRef(null);
-  const editorRef = react.useRef(null);
-  const [ready, setReady] = react.useState(false);
-  react.useEffect(() => {
-    if (translate) {
-      htmlEditor.setTranslate(translate);
-    }
-  }, [translate]);
-  react.useEffect(() => {
-    if (getFileSrc) {
-      htmlEditor.setGetFileSrc(getFileSrc);
-    }
-  }, [getFileSrc]);
-  react.useEffect(() => {
-    if (!containerRef.current) return;
-    const editor = new htmlEditor.HTMLEditor(containerRef.current, {
-      ...config,
-      // Pass setup through to allow custom buttons
-      setup: (ed) => {
-        config.setup?.(ed);
-      }
-    });
-    editorRef.current = editor;
-    globalEditor = editor;
-    const content = body ?? initialValue ?? "";
-    if (content) {
-      editor.setContent(content);
-    }
-    editor.on("init", () => {
-      setReady(true);
-      onInit?.(editor);
-    });
-    editor.on("dirty", (dirty) => {
-      onDirty?.(dirty);
-    });
-    editor.on("change", (content2) => {
-      onChange?.(content2);
-      editor.setDirty(false);
-    });
-    editor.on("focus", () => {
-      onFocus?.();
-    });
-    editor.on("blur", () => {
-      onBlur?.();
-    });
-    return () => {
-      editor.destroy();
-      editorRef.current = null;
-      if (globalEditor === editor) {
-        globalEditor = null;
-      }
-    };
-  }, []);
-  react.useEffect(() => {
-    if (containerRef.current) {
-      containerRef.current.style.pointerEvents = disabled ? "none" : "";
-      containerRef.current.style.opacity = disabled ? "0.6" : "";
-    }
-  }, [disabled]);
-  react.useImperativeHandle(ref, () => ({
-    getEditor: () => editorRef.current,
-    getContent: () => editorRef.current?.getContent() ?? "",
-    setContent: (html) => editorRef.current?.setContent(html),
-    insertContent: (html) => editorRef.current?.insertContent(html),
-    focus: () => editorRef.current?.focus()
-  }), []);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md-editor-react-wrapper", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "md-editor-container" }),
-    name && ready && /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        type: "hidden",
-        name,
-        value: editorRef.current?.getContent() ?? ""
-      }
-    )
-  ] });
+/**
+* MDHTMLEditor React Component
+*/
+var Editor = (0, react.forwardRef)(function Editor(props, ref) {
+	const { config, body, initialValue, name, onDirty, onChange, onInit, onFocus, onBlur, translate, getFileSrc, disabled } = props;
+	const containerRef = (0, react.useRef)(null);
+	const editorRef = (0, react.useRef)(null);
+	const [ready, setReady] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (translate) (0, _mdaemon_html_editor.setTranslate)(translate);
+	}, [translate]);
+	(0, react.useEffect)(() => {
+		if (getFileSrc) (0, _mdaemon_html_editor.setGetFileSrc)(getFileSrc);
+	}, [getFileSrc]);
+	(0, react.useEffect)(() => {
+		if (!containerRef.current) return;
+		const editor = new _mdaemon_html_editor.HTMLEditor(containerRef.current, {
+			...config,
+			setup: (ed) => {
+				config.setup?.(ed);
+			}
+		});
+		editorRef.current = editor;
+		globalEditor = editor;
+		const content = body ?? initialValue ?? "";
+		if (content) editor.setContent(content);
+		editor.on("init", () => {
+			setReady(true);
+			onInit?.(editor);
+		});
+		editor.on("dirty", (dirty) => {
+			onDirty?.(dirty);
+		});
+		editor.on("change", (content) => {
+			onChange?.(content);
+			editor.setDirty(false);
+		});
+		editor.on("focus", () => {
+			onFocus?.();
+		});
+		editor.on("blur", () => {
+			onBlur?.();
+		});
+		return () => {
+			editor.destroy();
+			editorRef.current = null;
+			if (globalEditor === editor) globalEditor = null;
+		};
+	}, []);
+	(0, react.useEffect)(() => {
+		if (containerRef.current) {
+			containerRef.current.style.pointerEvents = disabled ? "none" : "";
+			containerRef.current.style.opacity = disabled ? "0.6" : "";
+		}
+	}, [disabled]);
+	(0, react.useImperativeHandle)(ref, () => ({
+		getEditor: () => editorRef.current,
+		getContent: () => editorRef.current?.getContent() ?? "",
+		setContent: (html) => editorRef.current?.setContent(html),
+		insertContent: (html) => editorRef.current?.insertContent(html),
+		focus: () => editorRef.current?.focus()
+	}), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "md-editor-react-wrapper",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: containerRef,
+			className: "md-editor-container"
+		}), name && ready && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			type: "hidden",
+			name,
+			value: editorRef.current?.getContent() ?? ""
+		})]
+	});
 });
 Editor.displayName = "MDHTMLEditor";
+//#endregion
+//#region src/useEditor.ts
+/**
+* useEditor Hook
+* Custom hook for advanced editor usage
+*/
+/**
+* Hook for programmatic editor control
+*/
 function useEditor(options = {}) {
-  const { config = {}, content = "", onUpdate } = options;
-  const containerRef = react.useRef(null);
-  const editorRef = react.useRef(null);
-  const [ready, setReady] = react.useState(false);
-  react.useEffect(() => {
-    if (!containerRef.current) return;
-    const editor = new htmlEditor.HTMLEditor(containerRef.current, config);
-    editorRef.current = editor;
-    if (content) {
-      editor.setContent(content);
-    }
-    editor.on("init", () => {
-      setReady(true);
-    });
-    if (onUpdate) {
-      editor.on("change", onUpdate);
-    }
-    return () => {
-      editor.destroy();
-      editorRef.current = null;
-      setReady(false);
-    };
-  }, []);
-  const getContent = react.useCallback(() => {
-    return editorRef.current?.getContent() ?? "";
-  }, []);
-  const setContent = react.useCallback((html) => {
-    editorRef.current?.setContent(html);
-  }, []);
-  const insertContent = react.useCallback((html) => {
-    editorRef.current?.insertContent(html);
-  }, []);
-  const focus = react.useCallback(() => {
-    editorRef.current?.focus();
-  }, []);
-  const isDirty = react.useCallback(() => {
-    return editorRef.current?.isDirty() ?? false;
-  }, []);
-  return {
-    editor: editorRef.current,
-    containerRef,
-    ready,
-    getContent,
-    setContent,
-    insertContent,
-    focus,
-    isDirty
-  };
+	const { config = {}, content = "", onUpdate } = options;
+	const containerRef = (0, react.useRef)(null);
+	const editorRef = (0, react.useRef)(null);
+	const [ready, setReady] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (!containerRef.current) return;
+		const editor = new _mdaemon_html_editor.HTMLEditor(containerRef.current, config);
+		editorRef.current = editor;
+		if (content) editor.setContent(content);
+		editor.on("init", () => {
+			setReady(true);
+		});
+		if (onUpdate) editor.on("change", onUpdate);
+		return () => {
+			editor.destroy();
+			editorRef.current = null;
+			setReady(false);
+		};
+	}, []);
+	const getContent = (0, react.useCallback)(() => {
+		return editorRef.current?.getContent() ?? "";
+	}, []);
+	const setContent = (0, react.useCallback)((html) => {
+		editorRef.current?.setContent(html);
+	}, []);
+	const insertContent = (0, react.useCallback)((html) => {
+		editorRef.current?.insertContent(html);
+	}, []);
+	const focus = (0, react.useCallback)(() => {
+		editorRef.current?.focus();
+	}, []);
+	const isDirty = (0, react.useCallback)(() => {
+		return editorRef.current?.isDirty() ?? false;
+	}, []);
+	return {
+		editor: editorRef.current,
+		containerRef,
+		ready,
+		getContent,
+		setContent,
+		insertContent,
+		focus,
+		isDirty
+	};
 }
+//#endregion
+exports.Editor = Editor;
+exports.MDEditor = Editor;
 Object.defineProperty(exports, "fontNames", {
-  enumerable: true,
-  get: () => htmlEditor.fontNames
+	enumerable: true,
+	get: function() {
+		return _mdaemon_html_editor.fontNames;
+	}
 });
+exports.getEditorContent = getEditorContent;
+exports.setEditorContent = setEditorContent;
 Object.defineProperty(exports, "setGetFileSrc", {
-  enumerable: true,
-  get: () => htmlEditor.setGetFileSrc
+	enumerable: true,
+	get: function() {
+		return _mdaemon_html_editor.setGetFileSrc;
+	}
 });
 Object.defineProperty(exports, "setTranslate", {
-  enumerable: true,
-  get: () => htmlEditor.setTranslate
+	enumerable: true,
+	get: function() {
+		return _mdaemon_html_editor.setTranslate;
+	}
 });
-exports.Editor = Editor;
-exports.MDEditor = Editor;
-exports.getEditorContent = getEditorContent;
-exports.setEditorContent = setEditorContent;
 exports.useEditor = useEditor;

package/dist/index.mjs

@@ -1,165 +1,155 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback } from "react";
-import { setTranslate, setGetFileSrc, HTMLEditor } from "@mdaemon/html-editor";
-import { fontNames, setGetFileSrc as setGetFileSrc2, setTranslate as setTranslate2 } from "@mdaemon/html-editor";
-let globalEditor = null;
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { HTMLEditor, fontNames, setGetFileSrc, setGetFileSrc as setGetFileSrc$1, setTranslate, setTranslate as setTranslate$1 } from "@mdaemon/html-editor";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Editor.tsx
+/**
+* MDHTMLEditor React Component
+* A TinyMCE-compatible React wrapper for MDHTMLEditor
+*/
+var globalEditor = null;
+/**
+* Get content from the global editor instance
+* Note: Only works with single editor on the page
+*/
 function getEditorContent() {
-  return globalEditor?.getContent() ?? "";
+	return globalEditor?.getContent() ?? "";
 }
+/**
+* Set content on the global editor instance
+* Note: Only works with single editor on the page
+*/
 function setEditorContent(html) {
-  globalEditor?.setContent(html);
+	globalEditor?.setContent(html);
 }
-const Editor = forwardRef(function Editor2(props, ref) {
-  const {
-    config,
-    body,
-    initialValue,
-    name,
-    onDirty,
-    onChange,
-    onInit,
-    onFocus,
-    onBlur,
-    translate,
-    getFileSrc,
-    disabled
-  } = props;
-  const containerRef = useRef(null);
-  const editorRef = useRef(null);
-  const [ready, setReady] = useState(false);
-  useEffect(() => {
-    if (translate) {
-      setTranslate(translate);
-    }
-  }, [translate]);
-  useEffect(() => {
-    if (getFileSrc) {
-      setGetFileSrc(getFileSrc);
-    }
-  }, [getFileSrc]);
-  useEffect(() => {
-    if (!containerRef.current) return;
-    const editor = new HTMLEditor(containerRef.current, {
-      ...config,
-      // Pass setup through to allow custom buttons
-      setup: (ed) => {
-        config.setup?.(ed);
-      }
-    });
-    editorRef.current = editor;
-    globalEditor = editor;
-    const content = body ?? initialValue ?? "";
-    if (content) {
-      editor.setContent(content);
-    }
-    editor.on("init", () => {
-      setReady(true);
-      onInit?.(editor);
-    });
-    editor.on("dirty", (dirty) => {
-      onDirty?.(dirty);
-    });
-    editor.on("change", (content2) => {
-      onChange?.(content2);
-      editor.setDirty(false);
-    });
-    editor.on("focus", () => {
-      onFocus?.();
-    });
-    editor.on("blur", () => {
-      onBlur?.();
-    });
-    return () => {
-      editor.destroy();
-      editorRef.current = null;
-      if (globalEditor === editor) {
-        globalEditor = null;
-      }
-    };
-  }, []);
-  useEffect(() => {
-    if (containerRef.current) {
-      containerRef.current.style.pointerEvents = disabled ? "none" : "";
-      containerRef.current.style.opacity = disabled ? "0.6" : "";
-    }
-  }, [disabled]);
-  useImperativeHandle(ref, () => ({
-    getEditor: () => editorRef.current,
-    getContent: () => editorRef.current?.getContent() ?? "",
-    setContent: (html) => editorRef.current?.setContent(html),
-    insertContent: (html) => editorRef.current?.insertContent(html),
-    focus: () => editorRef.current?.focus()
-  }), []);
-  return /* @__PURE__ */ jsxs("div", { className: "md-editor-react-wrapper", children: [
-    /* @__PURE__ */ jsx("div", { ref: containerRef, className: "md-editor-container" }),
-    name && ready && /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "hidden",
-        name,
-        value: editorRef.current?.getContent() ?? ""
-      }
-    )
-  ] });
+/**
+* MDHTMLEditor React Component
+*/
+var Editor = forwardRef(function Editor(props, ref) {
+	const { config, body, initialValue, name, onDirty, onChange, onInit, onFocus, onBlur, translate, getFileSrc, disabled } = props;
+	const containerRef = useRef(null);
+	const editorRef = useRef(null);
+	const [ready, setReady] = useState(false);
+	useEffect(() => {
+		if (translate) setTranslate$1(translate);
+	}, [translate]);
+	useEffect(() => {
+		if (getFileSrc) setGetFileSrc$1(getFileSrc);
+	}, [getFileSrc]);
+	useEffect(() => {
+		if (!containerRef.current) return;
+		const editor = new HTMLEditor(containerRef.current, {
+			...config,
+			setup: (ed) => {
+				config.setup?.(ed);
+			}
+		});
+		editorRef.current = editor;
+		globalEditor = editor;
+		const content = body ?? initialValue ?? "";
+		if (content) editor.setContent(content);
+		editor.on("init", () => {
+			setReady(true);
+			onInit?.(editor);
+		});
+		editor.on("dirty", (dirty) => {
+			onDirty?.(dirty);
+		});
+		editor.on("change", (content) => {
+			onChange?.(content);
+			editor.setDirty(false);
+		});
+		editor.on("focus", () => {
+			onFocus?.();
+		});
+		editor.on("blur", () => {
+			onBlur?.();
+		});
+		return () => {
+			editor.destroy();
+			editorRef.current = null;
+			if (globalEditor === editor) globalEditor = null;
+		};
+	}, []);
+	useEffect(() => {
+		if (containerRef.current) {
+			containerRef.current.style.pointerEvents = disabled ? "none" : "";
+			containerRef.current.style.opacity = disabled ? "0.6" : "";
+		}
+	}, [disabled]);
+	useImperativeHandle(ref, () => ({
+		getEditor: () => editorRef.current,
+		getContent: () => editorRef.current?.getContent() ?? "",
+		setContent: (html) => editorRef.current?.setContent(html),
+		insertContent: (html) => editorRef.current?.insertContent(html),
+		focus: () => editorRef.current?.focus()
+	}), []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "md-editor-react-wrapper",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			className: "md-editor-container"
+		}), name && ready && /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: editorRef.current?.getContent() ?? ""
+		})]
+	});
 });
 Editor.displayName = "MDHTMLEditor";
+//#endregion
+//#region src/useEditor.ts
+/**
+* useEditor Hook
+* Custom hook for advanced editor usage
+*/
+/**
+* Hook for programmatic editor control
+*/
 function useEditor(options = {}) {
-  const { config = {}, content = "", onUpdate } = options;
-  const containerRef = useRef(null);
-  const editorRef = useRef(null);
-  const [ready, setReady] = useState(false);
-  useEffect(() => {
-    if (!containerRef.current) return;
-    const editor = new HTMLEditor(containerRef.current, config);
-    editorRef.current = editor;
-    if (content) {
-      editor.setContent(content);
-    }
-    editor.on("init", () => {
-      setReady(true);
-    });
-    if (onUpdate) {
-      editor.on("change", onUpdate);
-    }
-    return () => {
-      editor.destroy();
-      editorRef.current = null;
-      setReady(false);
-    };
-  }, []);
-  const getContent = useCallback(() => {
-    return editorRef.current?.getContent() ?? "";
-  }, []);
-  const setContent = useCallback((html) => {
-    editorRef.current?.setContent(html);
-  }, []);
-  const insertContent = useCallback((html) => {
-    editorRef.current?.insertContent(html);
-  }, []);
-  const focus = useCallback(() => {
-    editorRef.current?.focus();
-  }, []);
-  const isDirty = useCallback(() => {
-    return editorRef.current?.isDirty() ?? false;
-  }, []);
-  return {
-    editor: editorRef.current,
-    containerRef,
-    ready,
-    getContent,
-    setContent,
-    insertContent,
-    focus,
-    isDirty
-  };
+	const { config = {}, content = "", onUpdate } = options;
+	const containerRef = useRef(null);
+	const editorRef = useRef(null);
+	const [ready, setReady] = useState(false);
+	useEffect(() => {
+		if (!containerRef.current) return;
+		const editor = new HTMLEditor(containerRef.current, config);
+		editorRef.current = editor;
+		if (content) editor.setContent(content);
+		editor.on("init", () => {
+			setReady(true);
+		});
+		if (onUpdate) editor.on("change", onUpdate);
+		return () => {
+			editor.destroy();
+			editorRef.current = null;
+			setReady(false);
+		};
+	}, []);
+	const getContent = useCallback(() => {
+		return editorRef.current?.getContent() ?? "";
+	}, []);
+	const setContent = useCallback((html) => {
+		editorRef.current?.setContent(html);
+	}, []);
+	const insertContent = useCallback((html) => {
+		editorRef.current?.insertContent(html);
+	}, []);
+	const focus = useCallback(() => {
+		editorRef.current?.focus();
+	}, []);
+	const isDirty = useCallback(() => {
+		return editorRef.current?.isDirty() ?? false;
+	}, []);
+	return {
+		editor: editorRef.current,
+		containerRef,
+		ready,
+		getContent,
+		setContent,
+		insertContent,
+		focus,
+		isDirty
+	};
 }
-export {
-  Editor,
-  Editor as MDEditor,
-  fontNames,
-  getEditorContent,
-  setEditorContent,
-  setGetFileSrc2 as setGetFileSrc,
-  setTranslate2 as setTranslate,
-  useEditor
-};
+//#endregion
+export { Editor, Editor as MDEditor, fontNames, getEditorContent, setEditorContent, setGetFileSrc, setTranslate, useEditor };

package/dist/useEditor.d.ts

@@ -0,0 +1,44 @@
+import { HTMLEditor, EditorConfig } from '@mdaemon/html-editor';
+export interface UseEditorOptions {
+    config?: EditorConfig;
+    content?: string;
+    onUpdate?: (html: string) => void;
+}
+export interface UseEditorReturn {
+    /**
+     * The editor instance
+     */
+    editor: HTMLEditor | null;
+    /**
+     * Ref to attach to the container element
+     */
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    /**
+     * Whether the editor is ready
+     */
+    ready: boolean;
+    /**
+     * Get the current HTML content
+     */
+    getContent: () => string;
+    /**
+     * Set the HTML content
+     */
+    setContent: (html: string) => void;
+    /**
+     * Insert HTML at cursor
+     */
+    insertContent: (html: string) => void;
+    /**
+     * Focus the editor
+     */
+    focus: () => void;
+    /**
+     * Check if editor is dirty
+     */
+    isDirty: () => boolean;
+}
+/**
+ * Hook for programmatic editor control
+ */
+export declare function useEditor(options?: UseEditorOptions): UseEditorReturn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdaemon/html-editor-react",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "React wrapper for MDHTMLEditor",
   "homepage": "https://github.com/mdaemon-technologies/MDHTMLEditor-react",
   "repository": {
@@ -53,10 +53,11 @@
     "react-dom": "^19.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@mdaemon/html-editor": "^1.6.0",
-    "@tiptap/react": "^3.23.4"
+    "@mdaemon/html-editor": "^1.9.0",
+    "@tiptap/react": "^3.27.4"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.4",
     "@swc/core": "^1.11.0",
     "@swc/jest": "^0.2.39",
     "@testing-library/jest-dom": "^6.9.1",
@@ -64,18 +65,23 @@
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
-    "@vitejs/plugin-react": "^5.1.4",
+    "@vitejs/plugin-react": "^6.0.2",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^15.15.0",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.3.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "typescript": "^6.0.2",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4"
+    "typescript-eslint": "^8.61.0",
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2"
   },
   "allowScripts": {
-    "@swc/core@1.15.24": true,
-    "esbuild@0.27.7": true,
-    "unrs-resolver@1.11.1": true
+    "@swc/core": true,
+    "esbuild": true,
+    "unrs-resolver": true
   }
 }