@mdaemon/html-editor-react 1.3.0 → 1.4.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-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.
@@ -236,7 +238,18 @@ The `config` prop (or `useEditor`'s `config` option) accepts an `EditorConfig` o
 | `toolbar` | `string` | *(preset)* | Custom toolbar layout string. |
 | `toolbar_mode` | `'sliding' \| 'floating' \| 'wrap'` | `'wrap'` | Toolbar overflow behavior. |
 | `toolbar_sticky` | `boolean` | `true` | Pin toolbar at top when scrolling. |
+| `toolbar_narrow_breakpoint` | `number` | — | Pixel width below which the toolbar collapses into the overflow toggle. |
+| `toolbar_priority` | `Record<string, number>` | &mdash; | Per-button overflow priority &mdash; higher values stay visible longer as the toolbar narrows. |
+| `menubar` | `boolean` | `false` | Show a TinyMCE-style menu bar above the toolbar. |
+| `contextmenu` | `boolean \| string` | `''` | Enable a right-click context menu. Pass a button-list string to customize its contents. |
+| `quickbars_selection_toolbar` | `string` | `'bold italic \| quicklink blockquote'` | Inline floating toolbar shown over a text selection. |
+| `quickbars_image_toolbar` | `boolean` | `false` | Inline floating toolbar shown when an image is selected. |
+| `quickbars_insert_toolbar` | `boolean` | `false` | Inline floating toolbar shown on empty lines for quick insertion. |
+| `elementpath` | `boolean` | `false` | Show a breadcrumb of the node path at the cursor in the status bar. |
+| `valid_children` | `string` | &mdash; | TinyMCE-style rules controlling which child elements are allowed. |
 | `auto_focus` | `string` | &mdash; | Auto-focus on init. |
+| `setFocus` | `string` | &mdash; | CSS selector for the element to focus on init (used when `auto_focus` is not set). |
+| `plugins` | `string` | &mdash; | Accepted for TinyMCE compatibility and ignored &mdash; all features are built in. |
 | `browser_spellcheck` | `boolean` | `true` | Enable browser spell check. |
 | `entity_encoding` | `'raw' \| 'named' \| 'numeric'` | `'raw'` | HTML entity encoding mode. |
 | `paste_from_office` | `boolean` | `true` | Clean and preserve formatting when pasting from Microsoft Word/Excel. |
@@ -290,6 +303,25 @@ The `confab` / `confab-dark` skins integrate with the WorldClient theming system
 />
 ```
 
+### Menu Bar, Context Menu & Quick Toolbars
+
+Opt into the additional editing surfaces exposed by `@mdaemon/html-editor` 1.6.0:
+
+```tsx
+<Editor
+  config={{
+    menubar: true,                  // menu bar above the toolbar
+    contextmenu: true,              // right-click context menu
+    quickbars_selection_toolbar: 'bold italic | quicklink blockquote',
+    quickbars_image_toolbar: true,  // floating toolbar when an image is selected
+    elementpath: true,              // breadcrumb status bar at the cursor
+  }}
+/>
+```
+
+`contextmenu` also accepts a button-list string to customize its contents, and
+`quickbars_insert_toolbar` shows a floating insert toolbar on empty lines.
+
 ### Read-Only Mode
 
 Start the editor read-only with `readonly: true`, or toggle it at runtime through the underlying editor instance:
@@ -636,6 +668,25 @@ npm run demo
 
 This starts a Vite dev server at `http://localhost:5173` with examples of both the `<Editor>` component and `useEditor` hook.
 
+## 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 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
 
 LGPL-3.0-or-later &mdash; [MDaemon Technologies, Ltd.](https://www.mdaemon.com)

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.3.0",
+  "version": "1.4.1",
   "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.5.0",
+    "@mdaemon/html-editor": "^1.6.0",
     "@tiptap/react": "^3.23.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,14 +65,19 @@
     "@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,