@mdaemon/html-editor-react 1.0.0

package/LICENSE

@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

package/README.md

@@ -0,0 +1,171 @@
+# MDHTMLEditor React
+
+React wrapper for MDHTMLEditor, providing a TinyMCE-compatible React component.
+
+## Installation
+
+```bash
+npm install @mdaemon/html-editor-react
+```
+
+Note: This package requires `@mdaemon/html-editor` as a peer dependency.
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import React, { useRef } from 'react';
+import { MDEditor, EditorRef } from '@mdaemon/html-editor-react';
+
+function MyComponent() {
+  const editorRef = useRef<EditorRef>(null);
+
+  const handleInit = (editor) => {
+    console.log('Editor ready:', editor);
+  };
+
+  const handleChange = (content) => {
+    console.log('Content changed:', content);
+  };
+
+  return (
+    <MDEditor
+      ref={editorRef}
+      init={{
+        height: 400,
+        basicEditor: false,
+      }}
+      initialValue="<p>Hello World</p>"
+      onInit={handleInit}
+      onEditorChange={handleChange}
+    />
+  );
+}
+```
+
+### useEditor Hook
+
+For more control, use the `useEditor` hook:
+
+```tsx
+import { useEditor } from '@mdaemon/html-editor-react';
+
+function MyComponent() {
+  const { containerRef, editor, content, setContent, isDirty } = useEditor({
+    initialValue: '<p>Hello</p>',
+    onChange: (html) => console.log('Changed:', html),
+  });
+
+  const handleSave = () => {
+    if (isDirty) {
+      saveContent(content);
+      editor?.setDirty(false);
+    }
+  };
+
+  return (
+    <div>
+      <div ref={containerRef} />
+      <button onClick={handleSave}>Save</button>
+    </div>
+  );
+}
+```
+
+### Global Access
+
+For legacy compatibility, editors can be accessed globally:
+
+```tsx
+import { getEditorContent, setEditorContent } from '@mdaemon/html-editor-react';
+
+// Get content from any editor by ID
+const content = getEditorContent('myEditor');
+
+// Set content
+setEditorContent('myEditor', '<p>New content</p>');
+```
+
+## Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `id` | string | Editor identifier for global access |
+| `init` | EditorConfig | Configuration object passed to HTMLEditor |
+| `initialValue` | string | Initial HTML content |
+| `value` | string | Controlled content value |
+| `disabled` | boolean | Disable editing |
+| `onInit` | (editor) => void | Called when editor initializes |
+| `onEditorChange` | (content) => void | Called on content change |
+| `onDirtyChange` | (isDirty) => void | Called when dirty state changes |
+| `onFocus` | () => void | Called on focus |
+| `onBlur` | () => void | Called on blur |
+
+## EditorRef Methods
+
+When using the `ref` prop, you have access to:
+
+- `getContent(): string` - Get current HTML
+- `setContent(html: string): void` - Set HTML content
+- `insertContent(html: string): void` - Insert at cursor
+- `execCommand(cmd, ui?, value?): boolean` - Run command
+- `focus(): void` - Focus editor
+- `isDirty(): boolean` - Check dirty state
+- `setDirty(state): void` - Set dirty state
+
+## Configuration
+
+All configuration options from `@mdaemon/html-editor` are supported in the `init` prop:
+
+```tsx
+<MDEditor
+  init={{
+    basicEditor: false,
+    includeTemplates: true,
+    templates: [
+      { title: 'Signature', content: '<p>Best regards,<br/>John</p>' }
+    ],
+    dropbox: true,
+    images_upload_url: '/api/upload',
+    font_family_formats: 'Arial=arial;Times=times new roman',
+    font_size_formats: '10pt 12pt 14pt 16pt',
+    fontName: 'Arial',
+    fontSize: '12pt',
+    directionality: 'ltr',
+    skin: 'oxide',
+    height: 400,
+  }}
+/>
+```
+
+## Migration from @tinymce/tinymce-react
+
+This package provides a similar API to `@tinymce/tinymce-react`:
+
+```tsx
+// Before (TinyMCE)
+import { Editor } from '@tinymce/tinymce-react';
+
+<Editor
+  init={{ height: 400, plugins: 'link image' }}
+  onEditorChange={handleChange}
+/>
+
+// After (MDHTMLEditor)
+import { MDEditor } from '@mdaemon/html-editor-react';
+
+<MDEditor
+  init={{ height: 400 }}
+  onEditorChange={handleChange}
+/>
+```
+
+Key differences:
+- No `licenseKey` or `apiKey` required
+- `plugins` option not needed (features built-in)
+- Toolbar customization uses `basicEditor` boolean instead of `toolbar` string
+
+## License
+
+LGPL 3.0 or later - MDaemon Technologies

package/dist/index.d.ts

@@ -0,0 +1,168 @@
+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 { }

package/dist/index.js

@@ -0,0 +1,193 @@
+"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;
+function getEditorContent() {
+  return (globalEditor == null ? void 0 : globalEditor.getContent()) ?? "";
+}
+function setEditorContent(html) {
+  globalEditor == null ? void 0 : globalEditor.setContent(html);
+}
+const Editor = react.forwardRef(function Editor2(props, ref) {
+  var _a;
+  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) => {
+        var _a2;
+        (_a2 = config.setup) == null ? void 0 : _a2.call(config, ed);
+      }
+    });
+    editorRef.current = editor;
+    globalEditor = editor;
+    const content = body ?? initialValue ?? "";
+    if (content) {
+      editor.setContent(content);
+    }
+    editor.on("init", () => {
+      setReady(true);
+      onInit == null ? void 0 : onInit(editor);
+    });
+    editor.on("dirty", (dirty) => {
+      onDirty == null ? void 0 : onDirty(dirty);
+    });
+    editor.on("change", (content2) => {
+      onChange == null ? void 0 : onChange(content2);
+      editor.setDirty(false);
+    });
+    editor.on("focus", () => {
+      onFocus == null ? void 0 : onFocus();
+    });
+    editor.on("blur", () => {
+      onBlur == null ? void 0 : 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: () => {
+      var _a2;
+      return ((_a2 = editorRef.current) == null ? void 0 : _a2.getContent()) ?? "";
+    },
+    setContent: (html) => {
+      var _a2;
+      return (_a2 = editorRef.current) == null ? void 0 : _a2.setContent(html);
+    },
+    insertContent: (html) => {
+      var _a2;
+      return (_a2 = editorRef.current) == null ? void 0 : _a2.insertContent(html);
+    },
+    focus: () => {
+      var _a2;
+      return (_a2 = editorRef.current) == null ? void 0 : _a2.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: ((_a = editorRef.current) == null ? void 0 : _a.getContent()) ?? ""
+      }
+    )
+  ] });
+});
+Editor.displayName = "MDHTMLEditor";
+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(() => {
+    var _a;
+    return ((_a = editorRef.current) == null ? void 0 : _a.getContent()) ?? "";
+  }, []);
+  const setContent = react.useCallback((html) => {
+    var _a;
+    (_a = editorRef.current) == null ? void 0 : _a.setContent(html);
+  }, []);
+  const insertContent = react.useCallback((html) => {
+    var _a;
+    (_a = editorRef.current) == null ? void 0 : _a.insertContent(html);
+  }, []);
+  const focus = react.useCallback(() => {
+    var _a;
+    (_a = editorRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  const isDirty = react.useCallback(() => {
+    var _a;
+    return ((_a = editorRef.current) == null ? void 0 : _a.isDirty()) ?? false;
+  }, []);
+  return {
+    editor: editorRef.current,
+    containerRef,
+    ready,
+    getContent,
+    setContent,
+    insertContent,
+    focus,
+    isDirty
+  };
+}
+Object.defineProperty(exports, "fontNames", {
+  enumerable: true,
+  get: () => htmlEditor.fontNames
+});
+Object.defineProperty(exports, "setGetFileSrc", {
+  enumerable: true,
+  get: () => htmlEditor.setGetFileSrc
+});
+Object.defineProperty(exports, "setTranslate", {
+  enumerable: true,
+  get: () => htmlEditor.setTranslate
+});
+exports.Editor = Editor;
+exports.MDEditor = Editor;
+exports.getEditorContent = getEditorContent;
+exports.setEditorContent = setEditorContent;
+exports.useEditor = useEditor;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/Editor.tsx","../src/useEditor.ts"],"sourcesContent":["/**\r\n * MDHTMLEditor React Component\r\n * A TinyMCE-compatible React wrapper for MDHTMLEditor\r\n */\r\n\r\nimport {\r\n  useEffect,\r\n  useRef,\r\n  useState,\r\n  useImperativeHandle,\r\n  forwardRef,\r\n} from 'react';\r\nimport {\r\n  HTMLEditor,\r\n  EditorConfig,\r\n  setTranslate,\r\n  setGetFileSrc,\r\n} from '@mdaemon/html-editor';\r\n\r\nexport interface EditorProps {\r\n  /**\r\n   * Editor configuration - TinyMCE compatible\r\n   */\r\n  config: EditorConfig;\r\n  \r\n  /**\r\n   * Initial HTML content (also known as 'body' for TinyMCE compat)\r\n   */\r\n  body?: string;\r\n  \r\n  /**\r\n   * Initial HTML content (alias for body)\r\n   */\r\n  initialValue?: string;\r\n  \r\n  /**\r\n   * Name attribute for the hidden textarea\r\n   */\r\n  name?: string;\r\n  \r\n  /**\r\n   * Called when content is modified\r\n   */\r\n  onDirty?: (dirty: boolean) => void;\r\n  \r\n  /**\r\n   * Called on content change (debounced)\r\n   */\r\n  onChange?: (content: string) => void;\r\n  \r\n  /**\r\n   * Called when editor is fully initialized\r\n   */\r\n  onInit?: (editor: HTMLEditor) => void;\r\n  \r\n  /**\r\n   * Called when editor receives focus\r\n   */\r\n  onFocus?: () => void;\r\n  \r\n  /**\r\n   * Called when editor loses focus\r\n   */\r\n  onBlur?: () => void;\r\n  \r\n  /**\r\n   * Translation function\r\n   */\r\n  translate?: (key: string) => string;\r\n  \r\n  /**\r\n   * Function to resolve file paths (like TinyMCE's tinymceScriptSrc path)\r\n   */\r\n  getFileSrc?: (path: string) => string;\r\n  \r\n  /**\r\n   * Disable the editor\r\n   */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface EditorRef {\r\n  /**\r\n   * Get the underlying HTMLEditor instance\r\n   */\r\n  getEditor: () => HTMLEditor | null;\r\n  \r\n  /**\r\n   * Get the editor content as HTML\r\n   */\r\n  getContent: () => string;\r\n  \r\n  /**\r\n   * Set the editor content\r\n   */\r\n  setContent: (html: string) => void;\r\n  \r\n  /**\r\n   * Insert content at cursor position\r\n   */\r\n  insertContent: (html: string) => void;\r\n  \r\n  /**\r\n   * Focus the editor\r\n   */\r\n  focus: () => void;\r\n}\r\n\r\n// Global editor instance for single-editor APIs\r\nlet globalEditor: HTMLEditor | null = null;\r\n\r\n/**\r\n * Get content from the global editor instance\r\n * Note: Only works with single editor on the page\r\n */\r\nexport function getEditorContent(): string {\r\n  return globalEditor?.getContent() ?? '';\r\n}\r\n\r\n/**\r\n * Set content on the global editor instance\r\n * Note: Only works with single editor on the page\r\n */\r\nexport function setEditorContent(html: string): void {\r\n  globalEditor?.setContent(html);\r\n}\r\n\r\n/**\r\n * MDHTMLEditor React Component\r\n */\r\nexport const Editor = forwardRef<EditorRef, EditorProps>(function Editor(\r\n  props,\r\n  ref\r\n) {\r\n  const {\r\n    config,\r\n    body,\r\n    initialValue,\r\n    name,\r\n    onDirty,\r\n    onChange,\r\n    onInit,\r\n    onFocus,\r\n    onBlur,\r\n    translate,\r\n    getFileSrc,\r\n    disabled,\r\n  } = props;\r\n  \r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const editorRef = useRef<HTMLEditor | null>(null);\r\n  const [ready, setReady] = useState(false);\r\n  \r\n  // Set global translation function if provided\r\n  useEffect(() => {\r\n    if (translate) {\r\n      setTranslate(translate);\r\n    }\r\n  }, [translate]);\r\n  \r\n  // Set global file source resolver if provided\r\n  useEffect(() => {\r\n    if (getFileSrc) {\r\n      setGetFileSrc(getFileSrc);\r\n    }\r\n  }, [getFileSrc]);\r\n  \r\n  // Initialize editor\r\n  useEffect(() => {\r\n    if (!containerRef.current) return;\r\n    \r\n    // Create the editor\r\n    const editor = new HTMLEditor(containerRef.current, {\r\n      ...config,\r\n      // Pass setup through to allow custom buttons\r\n      setup: (ed) => {\r\n        config.setup?.(ed);\r\n      },\r\n    });\r\n    \r\n    editorRef.current = editor;\r\n    globalEditor = editor;\r\n    \r\n    // Set initial content\r\n    const content = body ?? initialValue ?? '';\r\n    if (content) {\r\n      editor.setContent(content);\r\n    }\r\n    \r\n    // Bind events\r\n    editor.on('init', () => {\r\n      setReady(true);\r\n      onInit?.(editor);\r\n    });\r\n    \r\n    editor.on('dirty', (dirty) => {\r\n      onDirty?.(dirty);\r\n    });\r\n    \r\n    editor.on('change', (content) => {\r\n      onChange?.(content);\r\n      editor.setDirty(false);\r\n    });\r\n    \r\n    editor.on('focus', () => {\r\n      onFocus?.();\r\n    });\r\n    \r\n    editor.on('blur', () => {\r\n      onBlur?.();\r\n    });\r\n    \r\n    // Cleanup\r\n    return () => {\r\n      editor.destroy();\r\n      editorRef.current = null;\r\n      if (globalEditor === editor) {\r\n        globalEditor = null;\r\n      }\r\n    };\r\n  }, []); // Only run once on mount\r\n  \r\n  // Update disabled state\r\n  useEffect(() => {\r\n    // Note: TipTap has setEditable() but our wrapper would need to expose it\r\n    // For now, we apply a visual disabled state\r\n    if (containerRef.current) {\r\n      containerRef.current.style.pointerEvents = disabled ? 'none' : '';\r\n      containerRef.current.style.opacity = disabled ? '0.6' : '';\r\n    }\r\n  }, [disabled]);\r\n  \r\n  // Expose methods via ref\r\n  useImperativeHandle(ref, () => ({\r\n    getEditor: () => editorRef.current,\r\n    getContent: () => editorRef.current?.getContent() ?? '',\r\n    setContent: (html: string) => editorRef.current?.setContent(html),\r\n    insertContent: (html: string) => editorRef.current?.insertContent(html),\r\n    focus: () => editorRef.current?.focus(),\r\n  }), []);\r\n  \r\n  return (\r\n    <div className=\"md-editor-react-wrapper\">\r\n      <div ref={containerRef} className=\"md-editor-container\" />\r\n      {/* Hidden textarea for form submission */}\r\n      {name && ready && (\r\n        <input\r\n          type=\"hidden\"\r\n          name={name}\r\n          value={editorRef.current?.getContent() ?? ''}\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\nEditor.displayName = 'MDHTMLEditor';\r\n\r\nexport default Editor;\r\n","/**\r\n * useEditor Hook\r\n * Custom hook for advanced editor usage\r\n */\r\n\r\nimport { useEffect, useRef, useState, useCallback } from 'react';\r\nimport { HTMLEditor, EditorConfig } from '@mdaemon/html-editor';\r\n\r\nexport interface UseEditorOptions {\r\n  config?: EditorConfig;\r\n  content?: string;\r\n  onUpdate?: (html: string) => void;\r\n}\r\n\r\nexport interface UseEditorReturn {\r\n  /**\r\n   * The editor instance\r\n   */\r\n  editor: HTMLEditor | null;\r\n  \r\n  /**\r\n   * Ref to attach to the container element\r\n   */\r\n  containerRef: React.RefObject<HTMLDivElement | null>;\r\n  \r\n  /**\r\n   * Whether the editor is ready\r\n   */\r\n  ready: boolean;\r\n  \r\n  /**\r\n   * Get the current HTML content\r\n   */\r\n  getContent: () => string;\r\n  \r\n  /**\r\n   * Set the HTML content\r\n   */\r\n  setContent: (html: string) => void;\r\n  \r\n  /**\r\n   * Insert HTML at cursor\r\n   */\r\n  insertContent: (html: string) => void;\r\n  \r\n  /**\r\n   * Focus the editor\r\n   */\r\n  focus: () => void;\r\n  \r\n  /**\r\n   * Check if editor is dirty\r\n   */\r\n  isDirty: () => boolean;\r\n}\r\n\r\n/**\r\n * Hook for programmatic editor control\r\n */\r\nexport function useEditor(options: UseEditorOptions = {}): UseEditorReturn {\r\n  const { config = {}, content = '', onUpdate } = options;\r\n  \r\n  const containerRef = useRef<HTMLDivElement | null>(null);\r\n  const editorRef = useRef<HTMLEditor | null>(null);\r\n  const [ready, setReady] = useState(false);\r\n  \r\n  useEffect(() => {\r\n    if (!containerRef.current) return;\r\n    \r\n    const editor = new HTMLEditor(containerRef.current, config);\r\n    editorRef.current = editor;\r\n    \r\n    if (content) {\r\n      editor.setContent(content);\r\n    }\r\n    \r\n    editor.on('init', () => {\r\n      setReady(true);\r\n    });\r\n    \r\n    if (onUpdate) {\r\n      editor.on('change', onUpdate);\r\n    }\r\n    \r\n    return () => {\r\n      editor.destroy();\r\n      editorRef.current = null;\r\n      setReady(false);\r\n    };\r\n  }, []); // Only mount once\r\n  \r\n  const getContent = useCallback(() => {\r\n    return editorRef.current?.getContent() ?? '';\r\n  }, []);\r\n  \r\n  const setContent = useCallback((html: string) => {\r\n    editorRef.current?.setContent(html);\r\n  }, []);\r\n  \r\n  const insertContent = useCallback((html: string) => {\r\n    editorRef.current?.insertContent(html);\r\n  }, []);\r\n  \r\n  const focus = useCallback(() => {\r\n    editorRef.current?.focus();\r\n  }, []);\r\n  \r\n  const isDirty = useCallback(() => {\r\n    return editorRef.current?.isDirty() ?? false;\r\n  }, []);\r\n  \r\n  return {\r\n    editor: editorRef.current,\r\n    containerRef,\r\n    ready,\r\n    getContent,\r\n    setContent,\r\n    insertContent,\r\n    focus,\r\n    isDirty,\r\n  };\r\n}\r\n"],"names":["forwardRef","Editor","useRef","useState","useEffect","setTranslate","setGetFileSrc","HTMLEditor","_a","content","useImperativeHandle","jsxs","jsx","useCallback"],"mappings":"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"}

package/dist/index.mjs

@@ -0,0 +1,185 @@
+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;
+function getEditorContent() {
+  return (globalEditor == null ? void 0 : globalEditor.getContent()) ?? "";
+}
+function setEditorContent(html) {
+  globalEditor == null ? void 0 : globalEditor.setContent(html);
+}
+const Editor = forwardRef(function Editor2(props, ref) {
+  var _a;
+  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) => {
+        var _a2;
+        (_a2 = config.setup) == null ? void 0 : _a2.call(config, ed);
+      }
+    });
+    editorRef.current = editor;
+    globalEditor = editor;
+    const content = body ?? initialValue ?? "";
+    if (content) {
+      editor.setContent(content);
+    }
+    editor.on("init", () => {
+      setReady(true);
+      onInit == null ? void 0 : onInit(editor);
+    });
+    editor.on("dirty", (dirty) => {
+      onDirty == null ? void 0 : onDirty(dirty);
+    });
+    editor.on("change", (content2) => {
+      onChange == null ? void 0 : onChange(content2);
+      editor.setDirty(false);
+    });
+    editor.on("focus", () => {
+      onFocus == null ? void 0 : onFocus();
+    });
+    editor.on("blur", () => {
+      onBlur == null ? void 0 : 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: () => {
+      var _a2;
+      return ((_a2 = editorRef.current) == null ? void 0 : _a2.getContent()) ?? "";
+    },
+    setContent: (html) => {
+      var _a2;
+      return (_a2 = editorRef.current) == null ? void 0 : _a2.setContent(html);
+    },
+    insertContent: (html) => {
+      var _a2;
+      return (_a2 = editorRef.current) == null ? void 0 : _a2.insertContent(html);
+    },
+    focus: () => {
+      var _a2;
+      return (_a2 = editorRef.current) == null ? void 0 : _a2.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: ((_a = editorRef.current) == null ? void 0 : _a.getContent()) ?? ""
+      }
+    )
+  ] });
+});
+Editor.displayName = "MDHTMLEditor";
+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(() => {
+    var _a;
+    return ((_a = editorRef.current) == null ? void 0 : _a.getContent()) ?? "";
+  }, []);
+  const setContent = useCallback((html) => {
+    var _a;
+    (_a = editorRef.current) == null ? void 0 : _a.setContent(html);
+  }, []);
+  const insertContent = useCallback((html) => {
+    var _a;
+    (_a = editorRef.current) == null ? void 0 : _a.insertContent(html);
+  }, []);
+  const focus = useCallback(() => {
+    var _a;
+    (_a = editorRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  const isDirty = useCallback(() => {
+    var _a;
+    return ((_a = editorRef.current) == null ? void 0 : _a.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
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/Editor.tsx","../src/useEditor.ts"],"sourcesContent":["/**\r\n * MDHTMLEditor React Component\r\n * A TinyMCE-compatible React wrapper for MDHTMLEditor\r\n */\r\n\r\nimport {\r\n  useEffect,\r\n  useRef,\r\n  useState,\r\n  useImperativeHandle,\r\n  forwardRef,\r\n} from 'react';\r\nimport {\r\n  HTMLEditor,\r\n  EditorConfig,\r\n  setTranslate,\r\n  setGetFileSrc,\r\n} from '@mdaemon/html-editor';\r\n\r\nexport interface EditorProps {\r\n  /**\r\n   * Editor configuration - TinyMCE compatible\r\n   */\r\n  config: EditorConfig;\r\n  \r\n  /**\r\n   * Initial HTML content (also known as 'body' for TinyMCE compat)\r\n   */\r\n  body?: string;\r\n  \r\n  /**\r\n   * Initial HTML content (alias for body)\r\n   */\r\n  initialValue?: string;\r\n  \r\n  /**\r\n   * Name attribute for the hidden textarea\r\n   */\r\n  name?: string;\r\n  \r\n  /**\r\n   * Called when content is modified\r\n   */\r\n  onDirty?: (dirty: boolean) => void;\r\n  \r\n  /**\r\n   * Called on content change (debounced)\r\n   */\r\n  onChange?: (content: string) => void;\r\n  \r\n  /**\r\n   * Called when editor is fully initialized\r\n   */\r\n  onInit?: (editor: HTMLEditor) => void;\r\n  \r\n  /**\r\n   * Called when editor receives focus\r\n   */\r\n  onFocus?: () => void;\r\n  \r\n  /**\r\n   * Called when editor loses focus\r\n   */\r\n  onBlur?: () => void;\r\n  \r\n  /**\r\n   * Translation function\r\n   */\r\n  translate?: (key: string) => string;\r\n  \r\n  /**\r\n   * Function to resolve file paths (like TinyMCE's tinymceScriptSrc path)\r\n   */\r\n  getFileSrc?: (path: string) => string;\r\n  \r\n  /**\r\n   * Disable the editor\r\n   */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface EditorRef {\r\n  /**\r\n   * Get the underlying HTMLEditor instance\r\n   */\r\n  getEditor: () => HTMLEditor | null;\r\n  \r\n  /**\r\n   * Get the editor content as HTML\r\n   */\r\n  getContent: () => string;\r\n  \r\n  /**\r\n   * Set the editor content\r\n   */\r\n  setContent: (html: string) => void;\r\n  \r\n  /**\r\n   * Insert content at cursor position\r\n   */\r\n  insertContent: (html: string) => void;\r\n  \r\n  /**\r\n   * Focus the editor\r\n   */\r\n  focus: () => void;\r\n}\r\n\r\n// Global editor instance for single-editor APIs\r\nlet globalEditor: HTMLEditor | null = null;\r\n\r\n/**\r\n * Get content from the global editor instance\r\n * Note: Only works with single editor on the page\r\n */\r\nexport function getEditorContent(): string {\r\n  return globalEditor?.getContent() ?? '';\r\n}\r\n\r\n/**\r\n * Set content on the global editor instance\r\n * Note: Only works with single editor on the page\r\n */\r\nexport function setEditorContent(html: string): void {\r\n  globalEditor?.setContent(html);\r\n}\r\n\r\n/**\r\n * MDHTMLEditor React Component\r\n */\r\nexport const Editor = forwardRef<EditorRef, EditorProps>(function Editor(\r\n  props,\r\n  ref\r\n) {\r\n  const {\r\n    config,\r\n    body,\r\n    initialValue,\r\n    name,\r\n    onDirty,\r\n    onChange,\r\n    onInit,\r\n    onFocus,\r\n    onBlur,\r\n    translate,\r\n    getFileSrc,\r\n    disabled,\r\n  } = props;\r\n  \r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const editorRef = useRef<HTMLEditor | null>(null);\r\n  const [ready, setReady] = useState(false);\r\n  \r\n  // Set global translation function if provided\r\n  useEffect(() => {\r\n    if (translate) {\r\n      setTranslate(translate);\r\n    }\r\n  }, [translate]);\r\n  \r\n  // Set global file source resolver if provided\r\n  useEffect(() => {\r\n    if (getFileSrc) {\r\n      setGetFileSrc(getFileSrc);\r\n    }\r\n  }, [getFileSrc]);\r\n  \r\n  // Initialize editor\r\n  useEffect(() => {\r\n    if (!containerRef.current) return;\r\n    \r\n    // Create the editor\r\n    const editor = new HTMLEditor(containerRef.current, {\r\n      ...config,\r\n      // Pass setup through to allow custom buttons\r\n      setup: (ed) => {\r\n        config.setup?.(ed);\r\n      },\r\n    });\r\n    \r\n    editorRef.current = editor;\r\n    globalEditor = editor;\r\n    \r\n    // Set initial content\r\n    const content = body ?? initialValue ?? '';\r\n    if (content) {\r\n      editor.setContent(content);\r\n    }\r\n    \r\n    // Bind events\r\n    editor.on('init', () => {\r\n      setReady(true);\r\n      onInit?.(editor);\r\n    });\r\n    \r\n    editor.on('dirty', (dirty) => {\r\n      onDirty?.(dirty);\r\n    });\r\n    \r\n    editor.on('change', (content) => {\r\n      onChange?.(content);\r\n      editor.setDirty(false);\r\n    });\r\n    \r\n    editor.on('focus', () => {\r\n      onFocus?.();\r\n    });\r\n    \r\n    editor.on('blur', () => {\r\n      onBlur?.();\r\n    });\r\n    \r\n    // Cleanup\r\n    return () => {\r\n      editor.destroy();\r\n      editorRef.current = null;\r\n      if (globalEditor === editor) {\r\n        globalEditor = null;\r\n      }\r\n    };\r\n  }, []); // Only run once on mount\r\n  \r\n  // Update disabled state\r\n  useEffect(() => {\r\n    // Note: TipTap has setEditable() but our wrapper would need to expose it\r\n    // For now, we apply a visual disabled state\r\n    if (containerRef.current) {\r\n      containerRef.current.style.pointerEvents = disabled ? 'none' : '';\r\n      containerRef.current.style.opacity = disabled ? '0.6' : '';\r\n    }\r\n  }, [disabled]);\r\n  \r\n  // Expose methods via ref\r\n  useImperativeHandle(ref, () => ({\r\n    getEditor: () => editorRef.current,\r\n    getContent: () => editorRef.current?.getContent() ?? '',\r\n    setContent: (html: string) => editorRef.current?.setContent(html),\r\n    insertContent: (html: string) => editorRef.current?.insertContent(html),\r\n    focus: () => editorRef.current?.focus(),\r\n  }), []);\r\n  \r\n  return (\r\n    <div className=\"md-editor-react-wrapper\">\r\n      <div ref={containerRef} className=\"md-editor-container\" />\r\n      {/* Hidden textarea for form submission */}\r\n      {name && ready && (\r\n        <input\r\n          type=\"hidden\"\r\n          name={name}\r\n          value={editorRef.current?.getContent() ?? ''}\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\nEditor.displayName = 'MDHTMLEditor';\r\n\r\nexport default Editor;\r\n","/**\r\n * useEditor Hook\r\n * Custom hook for advanced editor usage\r\n */\r\n\r\nimport { useEffect, useRef, useState, useCallback } from 'react';\r\nimport { HTMLEditor, EditorConfig } from '@mdaemon/html-editor';\r\n\r\nexport interface UseEditorOptions {\r\n  config?: EditorConfig;\r\n  content?: string;\r\n  onUpdate?: (html: string) => void;\r\n}\r\n\r\nexport interface UseEditorReturn {\r\n  /**\r\n   * The editor instance\r\n   */\r\n  editor: HTMLEditor | null;\r\n  \r\n  /**\r\n   * Ref to attach to the container element\r\n   */\r\n  containerRef: React.RefObject<HTMLDivElement | null>;\r\n  \r\n  /**\r\n   * Whether the editor is ready\r\n   */\r\n  ready: boolean;\r\n  \r\n  /**\r\n   * Get the current HTML content\r\n   */\r\n  getContent: () => string;\r\n  \r\n  /**\r\n   * Set the HTML content\r\n   */\r\n  setContent: (html: string) => void;\r\n  \r\n  /**\r\n   * Insert HTML at cursor\r\n   */\r\n  insertContent: (html: string) => void;\r\n  \r\n  /**\r\n   * Focus the editor\r\n   */\r\n  focus: () => void;\r\n  \r\n  /**\r\n   * Check if editor is dirty\r\n   */\r\n  isDirty: () => boolean;\r\n}\r\n\r\n/**\r\n * Hook for programmatic editor control\r\n */\r\nexport function useEditor(options: UseEditorOptions = {}): UseEditorReturn {\r\n  const { config = {}, content = '', onUpdate } = options;\r\n  \r\n  const containerRef = useRef<HTMLDivElement | null>(null);\r\n  const editorRef = useRef<HTMLEditor | null>(null);\r\n  const [ready, setReady] = useState(false);\r\n  \r\n  useEffect(() => {\r\n    if (!containerRef.current) return;\r\n    \r\n    const editor = new HTMLEditor(containerRef.current, config);\r\n    editorRef.current = editor;\r\n    \r\n    if (content) {\r\n      editor.setContent(content);\r\n    }\r\n    \r\n    editor.on('init', () => {\r\n      setReady(true);\r\n    });\r\n    \r\n    if (onUpdate) {\r\n      editor.on('change', onUpdate);\r\n    }\r\n    \r\n    return () => {\r\n      editor.destroy();\r\n      editorRef.current = null;\r\n      setReady(false);\r\n    };\r\n  }, []); // Only mount once\r\n  \r\n  const getContent = useCallback(() => {\r\n    return editorRef.current?.getContent() ?? '';\r\n  }, []);\r\n  \r\n  const setContent = useCallback((html: string) => {\r\n    editorRef.current?.setContent(html);\r\n  }, []);\r\n  \r\n  const insertContent = useCallback((html: string) => {\r\n    editorRef.current?.insertContent(html);\r\n  }, []);\r\n  \r\n  const focus = useCallback(() => {\r\n    editorRef.current?.focus();\r\n  }, []);\r\n  \r\n  const isDirty = useCallback(() => {\r\n    return editorRef.current?.isDirty() ?? false;\r\n  }, []);\r\n  \r\n  return {\r\n    editor: editorRef.current,\r\n    containerRef,\r\n    ready,\r\n    getContent,\r\n    setContent,\r\n    insertContent,\r\n    focus,\r\n    isDirty,\r\n  };\r\n}\r\n"],"names":["Editor","_a","content"],"mappings":";;;;AA6GA,IAAI,eAAkC;AAM/B,SAAS,mBAA2B;AACzC,UAAO,6CAAc,iBAAgB;AACvC;AAMO,SAAS,iBAAiB,MAAoB;AACnD,+CAAc,WAAW;AAC3B;AAKO,MAAM,SAAS,WAAmC,SAASA,QAChE,OACA,KACA;;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,YAAY,OAA0B,IAAI;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AAGxC,YAAU,MAAM;AACd,QAAI,WAAW;AACb,mBAAa,SAAS;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAGd,YAAU,MAAM;AACd,QAAI,YAAY;AACd,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAGf,YAAU,MAAM;AACd,QAAI,CAAC,aAAa,QAAS;AAG3B,UAAM,SAAS,IAAI,WAAW,aAAa,SAAS;AAAA,MAClD,GAAG;AAAA;AAAA,MAEH,OAAO,CAAC,OAAO;;AACb,SAAAC,MAAA,OAAO,UAAP,gBAAAA,IAAA,aAAe;AAAA,MACjB;AAAA,IAAA,CACD;AAED,cAAU,UAAU;AACpB,mBAAe;AAGf,UAAM,UAAU,QAAQ,gBAAgB;AACxC,QAAI,SAAS;AACX,aAAO,WAAW,OAAO;AAAA,IAC3B;AAGA,WAAO,GAAG,QAAQ,MAAM;AACtB,eAAS,IAAI;AACb,uCAAS;AAAA,IACX,CAAC;AAED,WAAO,GAAG,SAAS,CAAC,UAAU;AAC5B,yCAAU;AAAA,IACZ,CAAC;AAED,WAAO,GAAG,UAAU,CAACC,aAAY;AAC/B,2CAAWA;AACX,aAAO,SAAS,KAAK;AAAA,IACvB,CAAC;AAED,WAAO,GAAG,SAAS,MAAM;AACvB;AAAA,IACF,CAAC;AAED,WAAO,GAAG,QAAQ,MAAM;AACtB;AAAA,IACF,CAAC;AAGD,WAAO,MAAM;AACX,aAAO,QAAA;AACP,gBAAU,UAAU;AACpB,UAAI,iBAAiB,QAAQ;AAC3B,uBAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AAGd,QAAI,aAAa,SAAS;AACxB,mBAAa,QAAQ,MAAM,gBAAgB,WAAW,SAAS;AAC/D,mBAAa,QAAQ,MAAM,UAAU,WAAW,QAAQ;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAGb,sBAAoB,KAAK,OAAO;AAAA,IAC9B,WAAW,MAAM,UAAU;AAAA,IAC3B,YAAY,MAAA;;AAAM,eAAAD,MAAA,UAAU,YAAV,gBAAAA,IAAmB,iBAAgB;AAAA;AAAA,IACrD,YAAY,CAAC,SAAA;;AAAiB,cAAAA,MAAA,UAAU,YAAV,gBAAAA,IAAmB,WAAW;AAAA;AAAA,IAC5D,eAAe,CAAC,SAAA;;AAAiB,cAAAA,MAAA,UAAU,YAAV,gBAAAA,IAAmB,cAAc;AAAA;AAAA,IAClE,OAAO,MAAA;;AAAM,cAAAA,MAAA,UAAU,YAAV,gBAAAA,IAAmB;AAAA;AAAA,EAAM,IACpC,CAAA,CAAE;AAEN,SACE,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,KAAK,cAAc,WAAU,uBAAsB;AAAA,IAEvD,QAAQ,SACP;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,SAAO,eAAU,YAAV,mBAAmB,iBAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5C,GAEJ;AAEJ,CAAC;AAED,OAAO,cAAc;ACrMd,SAAS,UAAU,UAA4B,IAAqB;AACzE,QAAM,EAAE,SAAS,CAAA,GAAI,UAAU,IAAI,aAAa;AAEhD,QAAM,eAAe,OAA8B,IAAI;AACvD,QAAM,YAAY,OAA0B,IAAI;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AAExC,YAAU,MAAM;AACd,QAAI,CAAC,aAAa,QAAS;AAE3B,UAAM,SAAS,IAAI,WAAW,aAAa,SAAS,MAAM;AAC1D,cAAU,UAAU;AAEpB,QAAI,SAAS;AACX,aAAO,WAAW,OAAO;AAAA,IAC3B;AAEA,WAAO,GAAG,QAAQ,MAAM;AACtB,eAAS,IAAI;AAAA,IACf,CAAC;AAED,QAAI,UAAU;AACZ,aAAO,GAAG,UAAU,QAAQ;AAAA,IAC9B;AAEA,WAAO,MAAM;AACX,aAAO,QAAA;AACP,gBAAU,UAAU;AACpB,eAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,aAAa,YAAY,MAAM;;AACnC,aAAO,eAAU,YAAV,mBAAmB,iBAAgB;AAAA,EAC5C,GAAG,CAAA,CAAE;AAEL,QAAM,aAAa,YAAY,CAAC,SAAiB;;AAC/C,oBAAU,YAAV,mBAAmB,WAAW;AAAA,EAChC,GAAG,CAAA,CAAE;AAEL,QAAM,gBAAgB,YAAY,CAAC,SAAiB;;AAClD,oBAAU,YAAV,mBAAmB,cAAc;AAAA,EACnC,GAAG,CAAA,CAAE;AAEL,QAAM,QAAQ,YAAY,MAAM;;AAC9B,oBAAU,YAAV,mBAAmB;AAAA,EACrB,GAAG,CAAA,CAAE;AAEL,QAAM,UAAU,YAAY,MAAM;;AAChC,aAAO,eAAU,YAAV,mBAAmB,cAAa;AAAA,EACzC,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACL,QAAQ,UAAU;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@mdaemon/html-editor-react",
+  "version": "1.0.0",
+  "description": "React wrapper for MDHTMLEditor",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "html-editor",
+    "wysiwyg",
+    "react",
+    "tiptap"
+  ],
+  "author": {
+    "name": "MDaemon Technologies, Ltd.",
+    "email": "jonathan.ehman@mdaemon.com",
+    "url": "https://www.mdaemon.com"
+  },
+  "license": "LGPL-3.0-or-later",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^17.0.0",
+    "react-dom": "^18.0.0 || ^17.0.0"
+  },
+  "dependencies": {
+    "@tiptap/react": "^3.19.0"
+  },
+  "devDependencies": {
+    "@mdaemon/html-editor": "^1.0.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/jest": "^29.5.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^5.1.4",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-jest": "^29.4.6",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}