@open-wysiwyg-editor/react 0.0.0-stage → 1.0.1

package/dist/index.d.cts

@@ -0,0 +1,43 @@
+import { ReactElement, RefObject } from 'react';
+import { EditorOptions, Content, Editor } from 'open-wysiwyg-editor';
+export * from 'open-wysiwyg-editor';
+
+interface UseEditorResult {
+    /** Attach to the element the editor mounts in: `<div ref={ref} />`. */
+    ref: RefObject<HTMLDivElement | null>;
+    /** The live editor, or `null` before mount and during server rendering. */
+    editor: Editor | null;
+}
+/**
+ * Creates an editor in the element behind `ref` and destroys it on unmount.
+ * Callbacks and the runtime options (`editable`, `placeholder`, `aria*`, `dir`, `contentLang`)
+ * follow every render; everything else (`extensions`, `ui`, `language`…) is read once at mount.
+ * Give the component a new `key` to apply those.
+ */
+declare function useEditor(options?: EditorOptions): UseEditorResult;
+interface RichTextEditorProps extends Omit<EditorOptions, "element" | "content"> {
+    /** Controlled HTML. The editor loads it whenever it differs from what the editor last produced. */
+    value?: string;
+    /** Initial content (HTML or JSON) for an uncontrolled editor. */
+    defaultValue?: Content;
+    /** Called with the new HTML on every change. */
+    onChange?: (html: string, editor: Editor) => void;
+    /**
+     * Form field name. The HTML is kept in a hidden input, so `<form action={serverAction}>`
+     * (Next.js, React 19) and plain form posts receive it.
+     */
+    name?: string;
+    className?: string;
+    id?: string;
+}
+/**
+ * The full editor (toolbar, dialogs, status bar) as a component.
+ *
+ * ```tsx
+ * const [html, setHtml] = useState("<p>Hello</p>");
+ * <RichTextEditor value={html} onChange={setHtml} />
+ * ```
+ */
+declare function RichTextEditor(props: RichTextEditorProps): ReactElement;
+
+export { RichTextEditor, type RichTextEditorProps, type UseEditorResult, useEditor };

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+import { ReactElement, RefObject } from 'react';
+import { EditorOptions, Content, Editor } from 'open-wysiwyg-editor';
+export * from 'open-wysiwyg-editor';
+
+interface UseEditorResult {
+    /** Attach to the element the editor mounts in: `<div ref={ref} />`. */
+    ref: RefObject<HTMLDivElement | null>;
+    /** The live editor, or `null` before mount and during server rendering. */
+    editor: Editor | null;
+}
+/**
+ * Creates an editor in the element behind `ref` and destroys it on unmount.
+ * Callbacks and the runtime options (`editable`, `placeholder`, `aria*`, `dir`, `contentLang`)
+ * follow every render; everything else (`extensions`, `ui`, `language`…) is read once at mount.
+ * Give the component a new `key` to apply those.
+ */
+declare function useEditor(options?: EditorOptions): UseEditorResult;
+interface RichTextEditorProps extends Omit<EditorOptions, "element" | "content"> {
+    /** Controlled HTML. The editor loads it whenever it differs from what the editor last produced. */
+    value?: string;
+    /** Initial content (HTML or JSON) for an uncontrolled editor. */
+    defaultValue?: Content;
+    /** Called with the new HTML on every change. */
+    onChange?: (html: string, editor: Editor) => void;
+    /**
+     * Form field name. The HTML is kept in a hidden input, so `<form action={serverAction}>`
+     * (Next.js, React 19) and plain form posts receive it.
+     */
+    name?: string;
+    className?: string;
+    id?: string;
+}
+/**
+ * The full editor (toolbar, dialogs, status bar) as a component.
+ *
+ * ```tsx
+ * const [html, setHtml] = useState("<p>Hello</p>");
+ * <RichTextEditor value={html} onChange={setHtml} />
+ * ```
+ */
+declare function RichTextEditor(props: RichTextEditorProps): ReactElement;
+
+export { RichTextEditor, type RichTextEditorProps, type UseEditorResult, useEditor };

package/dist/index.js

@@ -0,0 +1,75 @@
+"use client";
+
+// src/index.ts
+import { createElement, useEffect, useRef, useState } from "react";
+import {
+  RUNTIME_OPTIONS,
+  createEditor,
+  forwardCallbacks,
+  pickRuntimeOptions,
+  syncContent
+} from "open-wysiwyg-editor";
+export * from "open-wysiwyg-editor";
+function useEditor(options = {}) {
+  const ref = useRef(null);
+  const [editor, setEditor] = useState(null);
+  const latest = useRef(options);
+  useEffect(() => {
+    latest.current = options;
+  });
+  useEffect(() => {
+    const instance = createEditor({
+      ...latest.current,
+      element: ref.current,
+      ...forwardCallbacks(() => latest.current)
+    });
+    setEditor(instance);
+    return () => {
+      instance.destroy();
+      setEditor(null);
+    };
+  }, []);
+  const runtime = RUNTIME_OPTIONS.map((key) => options[key]);
+  useEffect(() => {
+    editor?.setOptions(pickRuntimeOptions(latest.current));
+  }, [editor, ...runtime]);
+  return { ref, editor };
+}
+function RichTextEditor(props) {
+  const { value, defaultValue, onChange, name, className, id, ...options } = props;
+  const applied = useRef(value);
+  const field = useRef(null);
+  const { ref, editor } = useEditor({
+    ...options,
+    content: value ?? defaultValue,
+    onCreate: (instance) => {
+      if (field.current) field.current.value = instance.getHTML();
+      options.onCreate?.(instance);
+    },
+    onUpdate: (instance) => {
+      const html = instance.getHTML();
+      applied.current = html;
+      if (field.current) field.current.value = html;
+      options.onUpdate?.(instance);
+      onChange?.(html, instance);
+    }
+  });
+  useEffect(() => {
+    if (!editor || value === void 0 || value === applied.current) return;
+    applied.current = value;
+    syncContent(editor, value);
+    if (field.current) field.current.value = editor.getHTML();
+  }, [editor, value]);
+  const initial = typeof (value ?? defaultValue) === "string" ? value ?? defaultValue : "";
+  return createElement(
+    "div",
+    { className, id },
+    createElement("div", { ref }),
+    name ? createElement("input", { ref: field, type: "hidden", name, defaultValue: initial }) : null
+  );
+}
+export {
+  RichTextEditor,
+  useEditor
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// React adapter (React 18+, Next.js App and Pages Router, Remix, Gatsby, Vite). The build marks\n// this file \"use client\", so Server Components can render <RichTextEditor> directly.\nimport { createElement, useEffect, useRef, useState, type ReactElement, type RefObject } from \"react\";\nimport {\n  RUNTIME_OPTIONS,\n  createEditor,\n  forwardCallbacks,\n  pickRuntimeOptions,\n  syncContent,\n  type Content,\n  type Editor,\n  type EditorOptions,\n} from \"open-wysiwyg-editor\";\n\n// One install gives the whole API: StarterKit, getUI, types…\nexport * from \"open-wysiwyg-editor\";\n\nexport interface UseEditorResult {\n  /** Attach to the element the editor mounts in: `<div ref={ref} />`. */\n  ref: RefObject<HTMLDivElement | null>;\n  /** The live editor, or `null` before mount and during server rendering. */\n  editor: Editor | null;\n}\n\n/**\n * Creates an editor in the element behind `ref` and destroys it on unmount.\n * Callbacks and the runtime options (`editable`, `placeholder`, `aria*`, `dir`, `contentLang`)\n * follow every render; everything else (`extensions`, `ui`, `language`…) is read once at mount.\n * Give the component a new `key` to apply those.\n */\nexport function useEditor(options: EditorOptions = {}): UseEditorResult {\n  const ref = useRef<HTMLDivElement>(null);\n  const [editor, setEditor] = useState<Editor | null>(null);\n  const latest = useRef(options);\n\n  useEffect(() => {\n    latest.current = options;\n  });\n\n  useEffect(() => {\n    const instance = createEditor({\n      ...latest.current,\n      element: ref.current,\n      ...forwardCallbacks(() => latest.current),\n    });\n    setEditor(instance);\n    return () => {\n      instance.destroy();\n      setEditor(null);\n    };\n  }, []);\n\n  const runtime = RUNTIME_OPTIONS.map((key) => options[key]);\n  useEffect(() => {\n    editor?.setOptions(pickRuntimeOptions(latest.current));\n  }, [editor, ...runtime]);\n\n  return { ref, editor };\n}\n\nexport interface RichTextEditorProps extends Omit<EditorOptions, \"element\" | \"content\"> {\n  /** Controlled HTML. The editor loads it whenever it differs from what the editor last produced. */\n  value?: string;\n  /** Initial content (HTML or JSON) for an uncontrolled editor. */\n  defaultValue?: Content;\n  /** Called with the new HTML on every change. */\n  onChange?: (html: string, editor: Editor) => void;\n  /**\n   * Form field name. The HTML is kept in a hidden input, so `<form action={serverAction}>`\n   * (Next.js, React 19) and plain form posts receive it.\n   */\n  name?: string;\n  className?: string;\n  id?: string;\n}\n\n/**\n * The full editor (toolbar, dialogs, status bar) as a component.\n *\n * ```tsx\n * const [html, setHtml] = useState(\"<p>Hello</p>\");\n * <RichTextEditor value={html} onChange={setHtml} />\n * ```\n */\nexport function RichTextEditor(props: RichTextEditorProps): ReactElement {\n  const { value, defaultValue, onChange, name, className, id, ...options } = props;\n  const applied = useRef<Content>(value);\n  const field = useRef<HTMLInputElement>(null);\n  const { ref, editor } = useEditor({\n    ...options,\n    content: value ?? defaultValue,\n    onCreate: (instance) => {\n      if (field.current) field.current.value = instance.getHTML();\n      options.onCreate?.(instance);\n    },\n    onUpdate: (instance) => {\n      const html = instance.getHTML();\n      applied.current = html;\n      if (field.current) field.current.value = html;\n      options.onUpdate?.(instance);\n      onChange?.(html, instance);\n    },\n  });\n\n  useEffect(() => {\n    if (!editor || value === undefined || value === applied.current) return;\n    applied.current = value;\n    syncContent(editor, value);\n    if (field.current) field.current.value = editor.getHTML();\n  }, [editor, value]);\n\n  // Uncontrolled hidden input: the server renders the initial HTML, the editor keeps it current.\n  const initial = typeof (value ?? defaultValue) === \"string\" ? ((value ?? defaultValue) as string) : \"\";\n  return createElement(\n    \"div\",\n    { className, id },\n    createElement(\"div\", { ref }),\n    name ? createElement(\"input\", { ref: field, type: \"hidden\", name, defaultValue: initial }) : null,\n  );\n}\n"],"mappings":";;;AAEA,SAAS,eAAe,WAAW,QAAQ,gBAAmD;AAC9F;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP,cAAc;AAeP,SAAS,UAAU,UAAyB,CAAC,GAAoB;AACtE,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAwB,IAAI;AACxD,QAAM,SAAS,OAAO,OAAO;AAE7B,YAAU,MAAM;AACd,WAAO,UAAU;AAAA,EACnB,CAAC;AAED,YAAU,MAAM;AACd,UAAM,WAAW,aAAa;AAAA,MAC5B,GAAG,OAAO;AAAA,MACV,SAAS,IAAI;AAAA,MACb,GAAG,iBAAiB,MAAM,OAAO,OAAO;AAAA,IAC1C,CAAC;AACD,cAAU,QAAQ;AAClB,WAAO,MAAM;AACX,eAAS,QAAQ;AACjB,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,gBAAgB,IAAI,CAAC,QAAQ,QAAQ,GAAG,CAAC;AACzD,YAAU,MAAM;AACd,YAAQ,WAAW,mBAAmB,OAAO,OAAO,CAAC;AAAA,EACvD,GAAG,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEvB,SAAO,EAAE,KAAK,OAAO;AACvB;AA0BO,SAAS,eAAe,OAA0C;AACvE,QAAM,EAAE,OAAO,cAAc,UAAU,MAAM,WAAW,IAAI,GAAG,QAAQ,IAAI;AAC3E,QAAM,UAAU,OAAgB,KAAK;AACrC,QAAM,QAAQ,OAAyB,IAAI;AAC3C,QAAM,EAAE,KAAK,OAAO,IAAI,UAAU;AAAA,IAChC,GAAG;AAAA,IACH,SAAS,SAAS;AAAA,IAClB,UAAU,CAAC,aAAa;AACtB,UAAI,MAAM,QAAS,OAAM,QAAQ,QAAQ,SAAS,QAAQ;AAC1D,cAAQ,WAAW,QAAQ;AAAA,IAC7B;AAAA,IACA,UAAU,CAAC,aAAa;AACtB,YAAM,OAAO,SAAS,QAAQ;AAC9B,cAAQ,UAAU;AAClB,UAAI,MAAM,QAAS,OAAM,QAAQ,QAAQ;AACzC,cAAQ,WAAW,QAAQ;AAC3B,iBAAW,MAAM,QAAQ;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,UAAU,UAAa,UAAU,QAAQ,QAAS;AACjE,YAAQ,UAAU;AAClB,gBAAY,QAAQ,KAAK;AACzB,QAAI,MAAM,QAAS,OAAM,QAAQ,QAAQ,OAAO,QAAQ;AAAA,EAC1D,GAAG,CAAC,QAAQ,KAAK,CAAC;AAGlB,QAAM,UAAU,QAAQ,SAAS,kBAAkB,WAAa,SAAS,eAA2B;AACpG,SAAO;AAAA,IACL;AAAA,IACA,EAAE,WAAW,GAAG;AAAA,IAChB,cAAc,OAAO,EAAE,IAAI,CAAC;AAAA,IAC5B,OAAO,cAAc,SAAS,EAAE,KAAK,OAAO,MAAM,UAAU,MAAM,cAAc,QAAQ,CAAC,IAAI;AAAA,EAC/F;AACF;","names":[]}