dn-react-text-editor 0.1.0 → 0.1.2

package/README.md

@@ -1,222 +1,3 @@
-# React Store Input
+# React Text Editor
 
-The goal of this package is to make state management easier when using input elements in React.
-
-It eliminates repetitive code required to implement state changes and subscriptions for input elements, and provides a simple interface.
-
-At the same time, it allows you to use all the attributes originally provided by the input tag as-is, without needing to learn this package.
-
-## Get Started
-
-This is a simple example of how to use this package.
-
-```tsx
-import { useFormStore } from "dn-react-input";
-
-export default function App() {
-    const store = useFormStore({
-        email: "",
-        password: "",
-    });
-
-    const submit = async () => {
-        const { email, password } = store.state;
-
-        alert(`Email: ${email}\nPassword: ${password}`);
-    };
-
-    return (
-        <form
-            onSubmit={(e) => {
-                e.preventDefault();
-                submit();
-            }}
-        >
-            <store.input name="email" type="email" />
-            <store.input name="password" type="password" />
-            <button type="submit">Submit</button>
-        </form>
-    );
-}
-```
-
-## How to define state?
-
-You can define any state you want as an object when calling `useStore`.
-
-```tsx
-function Component() {
-    ...
-
-    const store = useStore({
-        email: "",
-        password: "",
-        rememberMe: false,
-    });
-
-    ...
-}
-```
-
-It's a single source of truth for your form state.
-
-## How to get input values?
-
-You can access the current values of the input elements through the `state` property of the store.
-
-```tsx
-function Component() {
-    ...
-
-    const submit = () => {
-        const { email, password, rememberMe } = store.state;
-    };
-
-    ...
-}
-```
-
-## How to add input elements?
-
-You can add input elements using the `Input` component provided by the store. There are 'Select' and 'Textarea' components as well.
-
-```tsx
-import { Input } from "dn-react-input";
-
-function Component() {
-    ...
-
-    return (
-        <form>
-            <Input store={store} name="email" type="email" />
-            <Input store={store} name="password" type="password" />
-            <Input store={store} name="rememberMe" type="checkbox" />
-        </form>
-    );
-}
-```
-
-If you want to avoid passing the store to each input component, use `useStoreInput`. This hook provides input components that are already connected to the store.
-
-```tsx
-import { useStoreInput } from "dn-react-input";
-
-function Component() {
-    ...
-    const Input = useStoreInput(store);
-
-    return (
-        <form>
-            <Input.input name="email" type="email" />
-            <Input.input name="password" type="password" />
-            <Input.input name="rememberMe" type="checkbox" />
-        </form>
-    );
-}
-```
-
-`useFormStore` is a facade that combines `useStore` and `useStoreInput` for convenience.
-
-```tsx
-import { useFormStore } from "dn-react-input";
-
-function Component() {
-    ...
-    const store = useFormStore({
-        email: "",
-        password: "",
-        rememberMe: false,
-    });
-
-    return (
-        <form>
-            <store.input name="email" type="email" />
-            <store.input name="password" type="password" />
-            <store.input name="rememberMe" type="checkbox" />
-        </form>
-    );
-}
-```
-
-## How to render components on state changes?
-
-If you want to render a component only when specific parts of the state change, use the `useSelector` hook.
-
-```tsx
-import { useSelector } from "dn-react-input";
-
-function Component() {
-    ...
-    const email = useSelector(store, (state) => state.email);
-
-    return <div>Your email is: {email}</div>;
-}
-```
-
-If you want to render components in an inline manner, use the `createRender` function. By using this, you can avoid creating separate components for each part of the state you want to track.
-
-```tsx
-import { createRender } from "dn-react-input";
-
-function Component() {
-    ...
-    return (
-        <div>
-            {createRender(store, (state) => <p>{state.email}</p>)}
-            {createRender(store, (state) => <p>{state.password}</p>)}
-        </div>
-    );
-}
-```
-
-## How to subscribe to state changes?
-
-You can subscribe to state changes using the `subscribe` method of the store.
-
-```tsx
-function Component() {
-    ...
-    useEffect(() => {
-        const unsubscribe = store.subscribe((state) => {
-            console.log(`State changed`, state);
-        });
-
-        return () => {
-            unsubscribe();
-        };
-    }, []);
-
-    ...
-}
-```
-
-## How to update state manually?
-
-You can update the state manually using the `dispatch` method of the store.
-
-```tsx
-function Component() {
-    ...
-    const updateEmail = () => {
-        store.dispatch({ email: "ohjinsu98@icloud.com" });
-    };
-
-    return <button onClick={updateEmail}>Update Email</button>;
-}
-```
-
-The `dispatch` method uses immerjs internally to update the state, so you can also use a function to update the state based on the previous state.
-
-```tsx
-function Component() {
-    ...
-
-    const updateEmail = () => {
-        store.dispatch((state) => {
-            state.email = "ohjinsu98@icloud.com";
-        });
-    };
-
-    return <button onClick={updateEmail}>Update Email</button>;
-}
-```
+A rich text editor component for React built on ProseMirror.

package/dist/attach_file.d.mts

@@ -23,6 +23,10 @@ type AttachFileOptions = {
         alt?: string;
     };
 };
+declare const base64ImageUploader: (file: File) => Promise<{
+    src: string;
+    alt: string;
+}>;
 declare function createAttachFile({ schema, generateMetadata, uploadFile, }: AttachFileOptions): AttachFile;
 
-export { type AttachFile, createAttachFile };
+export { type AttachFile, base64ImageUploader, createAttachFile };

package/dist/attach_file.d.ts

@@ -23,6 +23,10 @@ type AttachFileOptions = {
         alt?: string;
     };
 };
+declare const base64ImageUploader: (file: File) => Promise<{
+    src: string;
+    alt: string;
+}>;
 declare function createAttachFile({ schema, generateMetadata, uploadFile, }: AttachFileOptions): AttachFile;
 
-export { type AttachFile, createAttachFile };
+export { type AttachFile, base64ImageUploader, createAttachFile };

package/dist/attach_file.js

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/attach_file.tsx
 var attach_file_exports = {};
 __export(attach_file_exports, {
+  base64ImageUploader: () => base64ImageUploader,
   createAttachFile: () => createAttachFile
 });
 module.exports = __toCommonJS(attach_file_exports);
@@ -91,15 +92,24 @@ var findPlaceholder = (state, id) => {
 };
 
 // src/attach_file.tsx
+var base64ImageUploader = async (file) => {
+  const base64 = await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+  return {
+    src: base64,
+    alt: file.name
+  };
+};
 function createAttachFile({
   schema,
   generateMetadata,
-  uploadFile = (file) => {
-    return {
-      src: URL.createObjectURL(file),
-      alt: file.name
-    };
-  }
+  uploadFile = base64ImageUploader
 }) {
   const attachEachFile = async (view, file, pos) => {
     const metadata = generateMetadata ? await generateMetadata(file) : {};
@@ -151,9 +161,7 @@ function createAttachFile({
       }
       view.dispatch(tr2.replaceWith($pos, $pos, node));
     } catch (e) {
-      view.dispatch(
-        tr.setMeta(uploadPlaceholderPlugin, { remove: { id } })
-      );
+      view.dispatch(tr.setMeta(uploadPlaceholderPlugin, { remove: { id } }));
     }
   };
   return async (view, files, pos) => {
@@ -165,5 +173,6 @@ function createAttachFile({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  base64ImageUploader,
   createAttachFile
 });

package/dist/attach_file.mjs

@@ -67,15 +67,24 @@ var findPlaceholder = (state, id) => {
 };
 
 // src/attach_file.tsx
+var base64ImageUploader = async (file) => {
+  const base64 = await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+  return {
+    src: base64,
+    alt: file.name
+  };
+};
 function createAttachFile({
   schema,
   generateMetadata,
-  uploadFile = (file) => {
-    return {
-      src: URL.createObjectURL(file),
-      alt: file.name
-    };
-  }
+  uploadFile = base64ImageUploader
 }) {
   const attachEachFile = async (view, file, pos) => {
     const metadata = generateMetadata ? await generateMetadata(file) : {};
@@ -127,9 +136,7 @@ function createAttachFile({
       }
       view.dispatch(tr2.replaceWith($pos, $pos, node));
     } catch (e) {
-      view.dispatch(
-        tr.setMeta(uploadPlaceholderPlugin, { remove: { id } })
-      );
+      view.dispatch(tr.setMeta(uploadPlaceholderPlugin, { remove: { id } }));
     }
   };
   return async (view, files, pos) => {
@@ -140,5 +147,6 @@ function createAttachFile({
   };
 }
 export {
+  base64ImageUploader,
   createAttachFile
 };

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 export { TextEditorController, TextEditorProps, createTextEditor } from './text_editor.mjs';
 export { createSchema } from './schema.mjs';
-export { AttachFile, createAttachFile } from './attach_file.mjs';
+export { AttachFile, base64ImageUploader, createAttachFile } from './attach_file.mjs';
 import 'orderedmap';
 import 'prosemirror-model';
 import 'react';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { TextEditorController, TextEditorProps, createTextEditor } from './text_editor.js';
 export { createSchema } from './schema.js';
-export { AttachFile, createAttachFile } from './attach_file.js';
+export { AttachFile, base64ImageUploader, createAttachFile } from './attach_file.js';
 import 'orderedmap';
 import 'prosemirror-model';
 import 'react';

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  base64ImageUploader: () => base64ImageUploader,
   createAttachFile: () => createAttachFile,
   createSchema: () => createSchema,
   createTextEditor: () => createTextEditor
@@ -472,15 +473,24 @@ function cn(...classes) {
 
 // src/attach_file.tsx
 var import_prosemirror_view3 = require("prosemirror-view");
+var base64ImageUploader = async (file) => {
+  const base64 = await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+  return {
+    src: base64,
+    alt: file.name
+  };
+};
 function createAttachFile({
   schema,
   generateMetadata,
-  uploadFile = (file) => {
-    return {
-      src: URL.createObjectURL(file),
-      alt: file.name
-    };
-  }
+  uploadFile = base64ImageUploader
 }) {
   const attachEachFile = async (view, file, pos) => {
     const metadata = generateMetadata ? await generateMetadata(file) : {};
@@ -532,9 +542,7 @@ function createAttachFile({
       }
       view.dispatch(tr2.replaceWith($pos, $pos, node));
     } catch (e) {
-      view.dispatch(
-        tr.setMeta(uploadPlaceholderPlugin, { remove: { id } })
-      );
+      view.dispatch(tr.setMeta(uploadPlaceholderPlugin, { remove: { id } }));
     }
   };
   return async (view, files, pos) => {
@@ -573,12 +581,9 @@ function createTextEditor(options = {}) {
   } = {}) {
     const containerRef = (0, import_react2.useRef)(null);
     const inputRef = (0, import_react2.useRef)(null);
-    (0, import_react2.useEffect)(() => {
-      const element = containerRef.current;
-      if (!element) {
-        return;
-      }
-      const subject = new import_rxjs.Subject();
+    const controllerRef = (0, import_react2.useRef)(null);
+    const subject = (0, import_react.useMemo)(() => new import_rxjs.Subject(), []);
+    (0, import_react.useImperativeHandle)(ref, () => {
       const wrapper = document.createElement("div");
       const toInnerHTML = (value) => {
         if (mode === "html") {
@@ -586,10 +591,8 @@ function createTextEditor(options = {}) {
         }
         return value.split("\n").map((line) => `<p>${line}</p>`).join("");
       };
-      wrapper.innerHTML = toInnerHTML(
-        defaultValue ? String(defaultValue) : ""
-      );
-      const view = new import_prosemirror_view4.EditorView(element, {
+      wrapper.innerHTML = toInnerHTML(defaultValue ? String(defaultValue) : "");
+      const view = new import_prosemirror_view4.EditorView(containerRef.current, {
         ...editor,
         attributes: (state2) => {
           const propsAttributes = (() => {
@@ -664,27 +667,11 @@ function createTextEditor(options = {}) {
         const state2 = view.state;
         return state2.doc.textBetween(0, state2.doc.content.size, "\n");
       }
-      const sub = subject.pipe(
-        (0, import_rxjs.filter)((tr) => tr.docChanged),
-        (0, import_rxjs.debounceTime)(updateDelay)
-      ).subscribe(() => {
-        if (inputRef.current) {
-          switch (mode) {
-            case "text":
-              inputRef.current.value = toTextContent();
-              break;
-            default:
-              inputRef.current.value = toHTML();
-              break;
-          }
-          const event = new Event("input", { bubbles: true });
-          inputRef.current.dispatchEvent(event);
-        }
-      });
       if (autoFocus) {
         view.focus();
       }
       const textEditorController = {
+        schema,
         view,
         subject,
         set value(value) {
@@ -700,26 +687,33 @@ function createTextEditor(options = {}) {
         },
         clear
       };
-      if (typeof ref === "function") {
-        ref(textEditorController);
-      } else if (ref) {
-        ref.current = textEditorController;
+      controllerRef.current = textEditorController;
+      return textEditorController;
+    });
+    (0, import_react2.useEffect)(() => {
+      const controller = controllerRef.current;
+      if (!controller) {
+        return;
+      }
+      const sub = controller.subject.pipe(
+        (0, import_rxjs.filter)((tr) => tr.docChanged),
+        (0, import_rxjs.debounceTime)(updateDelay)
+      ).subscribe(() => {
+        if (inputRef.current) {
+          inputRef.current.value = controller.value;
+          const event = new Event("input", { bubbles: true });
+          inputRef.current.dispatchEvent(event);
+        }
+      });
+      if (autoFocus) {
+        controller.view.focus();
       }
       return () => {
         sub.unsubscribe();
-        view.destroy();
-        element.innerHTML = "";
+        controller.view.destroy();
       };
     }, []);
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef, className: container, ...props }), /* @__PURE__ */ import_react.default.createElement(
-      "input",
-      {
-        ref: inputRef,
-        type: "hidden",
-        name,
-        onInput: onChange
-      }
-    ));
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef, className: container, ...props }), /* @__PURE__ */ import_react.default.createElement("input", { ref: inputRef, type: "hidden", name, onInput: onChange }));
   }
   return {
     schema,
@@ -729,6 +723,7 @@ function createTextEditor(options = {}) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  base64ImageUploader,
   createAttachFile,
   createSchema,
   createTextEditor

package/dist/index.mjs

@@ -1,5 +1,8 @@
 // src/text_editor.tsx
-import React from "react";
+import React, {
+  useImperativeHandle,
+  useMemo
+} from "react";
 import {
   EditorState as EditorState2
 } from "prosemirror-state";
@@ -436,15 +439,24 @@ function cn(...classes) {
 
 // src/attach_file.tsx
 import "prosemirror-view";
+var base64ImageUploader = async (file) => {
+  const base64 = await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+  return {
+    src: base64,
+    alt: file.name
+  };
+};
 function createAttachFile({
   schema,
   generateMetadata,
-  uploadFile = (file) => {
-    return {
-      src: URL.createObjectURL(file),
-      alt: file.name
-    };
-  }
+  uploadFile = base64ImageUploader
 }) {
   const attachEachFile = async (view, file, pos) => {
     const metadata = generateMetadata ? await generateMetadata(file) : {};
@@ -496,9 +508,7 @@ function createAttachFile({
       }
       view.dispatch(tr2.replaceWith($pos, $pos, node));
     } catch (e) {
-      view.dispatch(
-        tr.setMeta(uploadPlaceholderPlugin, { remove: { id } })
-      );
+      view.dispatch(tr.setMeta(uploadPlaceholderPlugin, { remove: { id } }));
     }
   };
   return async (view, files, pos) => {
@@ -537,12 +547,9 @@ function createTextEditor(options = {}) {
   } = {}) {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
-    useEffect(() => {
-      const element = containerRef.current;
-      if (!element) {
-        return;
-      }
-      const subject = new Subject();
+    const controllerRef = useRef(null);
+    const subject = useMemo(() => new Subject(), []);
+    useImperativeHandle(ref, () => {
       const wrapper = document.createElement("div");
       const toInnerHTML = (value) => {
         if (mode === "html") {
@@ -550,10 +557,8 @@ function createTextEditor(options = {}) {
         }
         return value.split("\n").map((line) => `<p>${line}</p>`).join("");
       };
-      wrapper.innerHTML = toInnerHTML(
-        defaultValue ? String(defaultValue) : ""
-      );
-      const view = new EditorView3(element, {
+      wrapper.innerHTML = toInnerHTML(defaultValue ? String(defaultValue) : "");
+      const view = new EditorView3(containerRef.current, {
         ...editor,
         attributes: (state2) => {
           const propsAttributes = (() => {
@@ -628,27 +633,11 @@ function createTextEditor(options = {}) {
         const state2 = view.state;
         return state2.doc.textBetween(0, state2.doc.content.size, "\n");
       }
-      const sub = subject.pipe(
-        filter((tr) => tr.docChanged),
-        debounceTime(updateDelay)
-      ).subscribe(() => {
-        if (inputRef.current) {
-          switch (mode) {
-            case "text":
-              inputRef.current.value = toTextContent();
-              break;
-            default:
-              inputRef.current.value = toHTML();
-              break;
-          }
-          const event = new Event("input", { bubbles: true });
-          inputRef.current.dispatchEvent(event);
-        }
-      });
       if (autoFocus) {
         view.focus();
       }
       const textEditorController = {
+        schema,
         view,
         subject,
         set value(value) {
@@ -664,26 +653,33 @@ function createTextEditor(options = {}) {
         },
         clear
       };
-      if (typeof ref === "function") {
-        ref(textEditorController);
-      } else if (ref) {
-        ref.current = textEditorController;
+      controllerRef.current = textEditorController;
+      return textEditorController;
+    });
+    useEffect(() => {
+      const controller = controllerRef.current;
+      if (!controller) {
+        return;
+      }
+      const sub = controller.subject.pipe(
+        filter((tr) => tr.docChanged),
+        debounceTime(updateDelay)
+      ).subscribe(() => {
+        if (inputRef.current) {
+          inputRef.current.value = controller.value;
+          const event = new Event("input", { bubbles: true });
+          inputRef.current.dispatchEvent(event);
+        }
+      });
+      if (autoFocus) {
+        controller.view.focus();
       }
       return () => {
         sub.unsubscribe();
-        view.destroy();
-        element.innerHTML = "";
+        controller.view.destroy();
       };
     }, []);
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { ref: containerRef, className: container, ...props }), /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        ref: inputRef,
-        type: "hidden",
-        name,
-        onInput: onChange
-      }
-    ));
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { ref: containerRef, className: container, ...props }), /* @__PURE__ */ React.createElement("input", { ref: inputRef, type: "hidden", name, onInput: onChange }));
   }
   return {
     schema,
@@ -692,6 +688,7 @@ function createTextEditor(options = {}) {
   };
 }
 export {
+  base64ImageUploader,
   createAttachFile,
   createSchema,
   createTextEditor

package/dist/text_editor.d.mts

@@ -4,10 +4,11 @@ import * as prosemirror_model from 'prosemirror-model';
 import React, { DetailedHTMLProps, InputHTMLAttributes, Ref } from 'react';
 import { Transaction, EditorStateConfig } from 'prosemirror-state';
 import { EditorView, DirectEditorProps } from 'prosemirror-view';
+import { createSchema } from './schema.mjs';
 import { Subject } from 'rxjs';
-import './schema.mjs';
 
 type TextEditorController = {
+    schema: ReturnType<typeof createSchema>;
     view: EditorView;
     subject: Subject<Transaction>;
     set value(value: string);

package/dist/text_editor.d.ts

@@ -4,10 +4,11 @@ import * as prosemirror_model from 'prosemirror-model';
 import React, { DetailedHTMLProps, InputHTMLAttributes, Ref } from 'react';
 import { Transaction, EditorStateConfig } from 'prosemirror-state';
 import { EditorView, DirectEditorProps } from 'prosemirror-view';
+import { createSchema } from './schema.js';
 import { Subject } from 'rxjs';
-import './schema.js';
 
 type TextEditorController = {
+    schema: ReturnType<typeof createSchema>;
     view: EditorView;
     subject: Subject<Transaction>;
     set value(value: string);

package/dist/text_editor.js

@@ -468,15 +468,24 @@ function cn(...classes) {
 
 // src/attach_file.tsx
 var import_prosemirror_view3 = require("prosemirror-view");
+var base64ImageUploader = async (file) => {
+  const base64 = await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+  return {
+    src: base64,
+    alt: file.name
+  };
+};
 function createAttachFile({
   schema,
   generateMetadata,
-  uploadFile = (file) => {
-    return {
-      src: URL.createObjectURL(file),
-      alt: file.name
-    };
-  }
+  uploadFile = base64ImageUploader
 }) {
   const attachEachFile = async (view, file, pos) => {
     const metadata = generateMetadata ? await generateMetadata(file) : {};
@@ -528,9 +537,7 @@ function createAttachFile({
       }
       view.dispatch(tr2.replaceWith($pos, $pos, node));
     } catch (e) {
-      view.dispatch(
-        tr.setMeta(uploadPlaceholderPlugin, { remove: { id } })
-      );
+      view.dispatch(tr.setMeta(uploadPlaceholderPlugin, { remove: { id } }));
     }
   };
   return async (view, files, pos) => {
@@ -569,12 +576,9 @@ function createTextEditor(options = {}) {
   } = {}) {
     const containerRef = (0, import_react2.useRef)(null);
     const inputRef = (0, import_react2.useRef)(null);
-    (0, import_react2.useEffect)(() => {
-      const element = containerRef.current;
-      if (!element) {
-        return;
-      }
-      const subject = new import_rxjs.Subject();
+    const controllerRef = (0, import_react2.useRef)(null);
+    const subject = (0, import_react.useMemo)(() => new import_rxjs.Subject(), []);
+    (0, import_react.useImperativeHandle)(ref, () => {
       const wrapper = document.createElement("div");
       const toInnerHTML = (value) => {
         if (mode === "html") {
@@ -582,10 +586,8 @@ function createTextEditor(options = {}) {
         }
         return value.split("\n").map((line) => `<p>${line}</p>`).join("");
       };
-      wrapper.innerHTML = toInnerHTML(
-        defaultValue ? String(defaultValue) : ""
-      );
-      const view = new import_prosemirror_view4.EditorView(element, {
+      wrapper.innerHTML = toInnerHTML(defaultValue ? String(defaultValue) : "");
+      const view = new import_prosemirror_view4.EditorView(containerRef.current, {
         ...editor,
         attributes: (state2) => {
           const propsAttributes = (() => {
@@ -660,27 +662,11 @@ function createTextEditor(options = {}) {
         const state2 = view.state;
         return state2.doc.textBetween(0, state2.doc.content.size, "\n");
       }
-      const sub = subject.pipe(
-        (0, import_rxjs.filter)((tr) => tr.docChanged),
-        (0, import_rxjs.debounceTime)(updateDelay)
-      ).subscribe(() => {
-        if (inputRef.current) {
-          switch (mode) {
-            case "text":
-              inputRef.current.value = toTextContent();
-              break;
-            default:
-              inputRef.current.value = toHTML();
-              break;
-          }
-          const event = new Event("input", { bubbles: true });
-          inputRef.current.dispatchEvent(event);
-        }
-      });
       if (autoFocus) {
         view.focus();
       }
       const textEditorController = {
+        schema,
         view,
         subject,
         set value(value) {
@@ -696,26 +682,33 @@ function createTextEditor(options = {}) {
         },
         clear
       };
-      if (typeof ref === "function") {
-        ref(textEditorController);
-      } else if (ref) {
-        ref.current = textEditorController;
+      controllerRef.current = textEditorController;
+      return textEditorController;
+    });
+    (0, import_react2.useEffect)(() => {
+      const controller = controllerRef.current;
+      if (!controller) {
+        return;
+      }
+      const sub = controller.subject.pipe(
+        (0, import_rxjs.filter)((tr) => tr.docChanged),
+        (0, import_rxjs.debounceTime)(updateDelay)
+      ).subscribe(() => {
+        if (inputRef.current) {
+          inputRef.current.value = controller.value;
+          const event = new Event("input", { bubbles: true });
+          inputRef.current.dispatchEvent(event);
+        }
+      });
+      if (autoFocus) {
+        controller.view.focus();
       }
       return () => {
         sub.unsubscribe();
-        view.destroy();
-        element.innerHTML = "";
+        controller.view.destroy();
       };
     }, []);
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef, className: container, ...props }), /* @__PURE__ */ import_react.default.createElement(
-      "input",
-      {
-        ref: inputRef,
-        type: "hidden",
-        name,
-        onInput: onChange
-      }
-    ));
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef, className: container, ...props }), /* @__PURE__ */ import_react.default.createElement("input", { ref: inputRef, type: "hidden", name, onInput: onChange }));
   }
   return {
     schema,

package/dist/text_editor.mjs

@@ -1,5 +1,8 @@
 // src/text_editor.tsx
-import React from "react";
+import React, {
+  useImperativeHandle,
+  useMemo
+} from "react";
 import {
   EditorState as EditorState2
 } from "prosemirror-state";
@@ -436,15 +439,24 @@ function cn(...classes) {
 
 // src/attach_file.tsx
 import "prosemirror-view";
+var base64ImageUploader = async (file) => {
+  const base64 = await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+  return {
+    src: base64,
+    alt: file.name
+  };
+};
 function createAttachFile({
   schema,
   generateMetadata,
-  uploadFile = (file) => {
-    return {
-      src: URL.createObjectURL(file),
-      alt: file.name
-    };
-  }
+  uploadFile = base64ImageUploader
 }) {
   const attachEachFile = async (view, file, pos) => {
     const metadata = generateMetadata ? await generateMetadata(file) : {};
@@ -496,9 +508,7 @@ function createAttachFile({
       }
       view.dispatch(tr2.replaceWith($pos, $pos, node));
     } catch (e) {
-      view.dispatch(
-        tr.setMeta(uploadPlaceholderPlugin, { remove: { id } })
-      );
+      view.dispatch(tr.setMeta(uploadPlaceholderPlugin, { remove: { id } }));
     }
   };
   return async (view, files, pos) => {
@@ -537,12 +547,9 @@ function createTextEditor(options = {}) {
   } = {}) {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
-    useEffect(() => {
-      const element = containerRef.current;
-      if (!element) {
-        return;
-      }
-      const subject = new Subject();
+    const controllerRef = useRef(null);
+    const subject = useMemo(() => new Subject(), []);
+    useImperativeHandle(ref, () => {
       const wrapper = document.createElement("div");
       const toInnerHTML = (value) => {
         if (mode === "html") {
@@ -550,10 +557,8 @@ function createTextEditor(options = {}) {
         }
         return value.split("\n").map((line) => `<p>${line}</p>`).join("");
       };
-      wrapper.innerHTML = toInnerHTML(
-        defaultValue ? String(defaultValue) : ""
-      );
-      const view = new EditorView3(element, {
+      wrapper.innerHTML = toInnerHTML(defaultValue ? String(defaultValue) : "");
+      const view = new EditorView3(containerRef.current, {
         ...editor,
         attributes: (state2) => {
           const propsAttributes = (() => {
@@ -628,27 +633,11 @@ function createTextEditor(options = {}) {
         const state2 = view.state;
         return state2.doc.textBetween(0, state2.doc.content.size, "\n");
       }
-      const sub = subject.pipe(
-        filter((tr) => tr.docChanged),
-        debounceTime(updateDelay)
-      ).subscribe(() => {
-        if (inputRef.current) {
-          switch (mode) {
-            case "text":
-              inputRef.current.value = toTextContent();
-              break;
-            default:
-              inputRef.current.value = toHTML();
-              break;
-          }
-          const event = new Event("input", { bubbles: true });
-          inputRef.current.dispatchEvent(event);
-        }
-      });
       if (autoFocus) {
         view.focus();
       }
       const textEditorController = {
+        schema,
         view,
         subject,
         set value(value) {
@@ -664,26 +653,33 @@ function createTextEditor(options = {}) {
         },
         clear
       };
-      if (typeof ref === "function") {
-        ref(textEditorController);
-      } else if (ref) {
-        ref.current = textEditorController;
+      controllerRef.current = textEditorController;
+      return textEditorController;
+    });
+    useEffect(() => {
+      const controller = controllerRef.current;
+      if (!controller) {
+        return;
+      }
+      const sub = controller.subject.pipe(
+        filter((tr) => tr.docChanged),
+        debounceTime(updateDelay)
+      ).subscribe(() => {
+        if (inputRef.current) {
+          inputRef.current.value = controller.value;
+          const event = new Event("input", { bubbles: true });
+          inputRef.current.dispatchEvent(event);
+        }
+      });
+      if (autoFocus) {
+        controller.view.focus();
       }
       return () => {
         sub.unsubscribe();
-        view.destroy();
-        element.innerHTML = "";
+        controller.view.destroy();
       };
     }, []);
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { ref: containerRef, className: container, ...props }), /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        ref: inputRef,
-        type: "hidden",
-        name,
-        onInput: onChange
-      }
-    ));
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { ref: containerRef, className: container, ...props }), /* @__PURE__ */ React.createElement("input", { ref: inputRef, type: "hidden", name, onInput: onChange }));
   }
   return {
     schema,

package/package.json

@@ -1,56 +1,56 @@
 {
-    "name": "dn-react-text-editor",
-    "version": "0.1.0",
-    "types": "./dist/index.d.ts",
-    "main": "./dist/index.mjs",
-    "module": "./dist/index.js",
-    "sideEffects": false,
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "import": "./dist/index.mjs",
-            "require": "./dist/index.js"
-        },
-        "./prosemirror": {
-            "types": "./dist/prosemirror/index.d.ts",
-            "import": "./dist/prosemirror/index.mjs",
-            "require": "./dist/prosemirror/index.js"
-        }
+  "name": "dn-react-text-editor",
+  "version": "0.1.2",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.js",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
-    "scripts": {
-        "build": "NODE_OPTIONS='--max-old-space-size=16384' tsup",
-        "dev": "tsup --watch"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/dndnsoft/dn-react-text-editor.git"
-    },
-    "author": "",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/dndnsoft/dn-react-text-editor/issues"
-    },
-    "homepage": "https://github.com/dndnsoft/dn-react-text-editor#readme",
-    "description": "",
-    "devDependencies": {
-        "@types/node": "^24.10.1",
-        "@types/react": "^19",
-        "@types/react-dom": "^19",
-        "tsup": "^8.5.1",
-        "typescript": "^5.7.3"
-    },
-    "peerDependencies": {
-        "react": "^19",
-        "react-dom": "^19"
-    },
-    "dependencies": {
-        "prosemirror-commands": "^1.7.1",
-        "prosemirror-history": "^1.5.0",
-        "prosemirror-keymap": "^1.2.3",
-        "prosemirror-model": "^1.25.4",
-        "prosemirror-schema-list": "^1.5.1",
-        "prosemirror-state": "^1.4.4",
-        "prosemirror-view": "^1.41.3",
-        "rxjs": "^7.8.2"
+    "./prosemirror": {
+      "types": "./dist/prosemirror/index.d.ts",
+      "import": "./dist/prosemirror/index.mjs",
+      "require": "./dist/prosemirror/index.js"
     }
-}
+  },
+  "scripts": {
+    "build": "NODE_OPTIONS='--max-old-space-size=16384' tsup",
+    "dev": "tsup --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dndnsoft/dn-react-text-editor.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dndnsoft/dn-react-text-editor/issues"
+  },
+  "homepage": "https://github.com/dndnsoft/dn-react-text-editor#readme",
+  "description": "",
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tsup": "^8.5.1",
+    "typescript": "^5.7.3"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "dependencies": {
+    "prosemirror-commands": "^1.7.1",
+    "prosemirror-history": "^1.5.0",
+    "prosemirror-keymap": "^1.2.3",
+    "prosemirror-model": "^1.25.4",
+    "prosemirror-schema-list": "^1.5.1",
+    "prosemirror-state": "^1.4.4",
+    "prosemirror-view": "^1.41.3",
+    "rxjs": "^7.8.2"
+  }
+}