dn-react-text-editor 0.2.4 → 0.3.1

package/dist/index.mjs

@@ -1,11 +1,265 @@
 // src/create_text_editor.tsx
 import React2, {
-  useImperativeHandle
+  useMemo
 } from "react";
-import "prosemirror-state";
-import "prosemirror-view";
 import { useEffect as useEffect2, useRef } from "react";
 
+// src/input.tsx
+import React, {
+  useEffect
+} from "react";
+import { debounceTime, filter } from "rxjs";
+function TextEditorInput({ controller, onChange, ...props }) {
+  const inputRef = React.useRef(null);
+  useEffect(() => {
+    const sub = controller.subject.pipe(
+      filter((tr) => tr.docChanged),
+      debounceTime(controller.props.updateDelay || 0)
+    ).subscribe(() => {
+      if (inputRef.current) {
+        inputRef.current.value = controller.value;
+        const event = new Event("input", { bubbles: true });
+        inputRef.current.dispatchEvent(event);
+      }
+    });
+    return () => {
+      sub.unsubscribe();
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ...props,
+      ref: inputRef,
+      type: "hidden",
+      onInput: onChange,
+      defaultValue: controller.props.defaultValue
+    }
+  );
+}
+
+// src/text_editor_controller.tsx
+import {
+  EditorState as EditorState2
+} from "prosemirror-state";
+import { EditorView as EditorView3 } from "prosemirror-view";
+import * as commands2 from "prosemirror-commands";
+import { keymap } from "prosemirror-keymap";
+
+// src/plugins/drag_and_drop.tsx
+import { Plugin } from "prosemirror-state";
+function dragAndDropPlugin({ attachFile }) {
+  return new Plugin({
+    props: {
+      handleDOMEvents: {
+        drop(view, event) {
+          if (!attachFile) {
+            return;
+          }
+          const files = event.dataTransfer?.files;
+          if (!files || files.length === 0) {
+            return;
+          }
+          event.preventDefault();
+          const pos = view.state.selection.$from.pos || view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY
+          })?.pos || null;
+          if (pos === null) {
+            return;
+          }
+          const medias = Array.from(files).filter(
+            (file) => file.type.startsWith("image/") || file.type.startsWith("video/")
+          );
+          attachFile(view, medias);
+          return true;
+        }
+      }
+    }
+  });
+}
+
+// src/plugins/upload_placeholder.tsx
+import { Plugin as Plugin2 } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+var uploadPlaceholderPlugin = new Plugin2({
+  state: {
+    init() {
+      return DecorationSet.empty;
+    },
+    apply(tr, set) {
+      set = set.map(tr.mapping, tr.doc);
+      const action = tr.getMeta(this);
+      if (action && action.add) {
+        const { type, width, height } = action.add;
+        const widget = document.createElement("div");
+        widget.className = "upload-placeholder";
+        widget.style.width = `100%`;
+        if (type.startsWith("image/") || type.startsWith("video/")) {
+          widget.style.aspectRatio = `${width} / ${height}`;
+          widget.style.maxWidth = `${width}px`;
+        } else {
+          widget.style.height = "80px";
+        }
+        const progress = document.createElement("div");
+        progress.className = "upload-progress";
+        widget.appendChild(progress);
+        const deco = Decoration.widget(action.add.pos, widget, {
+          id: action.add.id
+        });
+        set = set.add(tr.doc, [deco]);
+      } else if (action && action.progress) {
+        const found = set.find(
+          void 0,
+          void 0,
+          (spec) => spec.id === action.progress.id
+        );
+        if (found.length) {
+          const widget = found[0].type.toDOM;
+          const progress = widget.querySelector(".upload-progress");
+          if (progress) {
+            progress.innerHTML = `${Math.round(action.progress.progress)}%`;
+          }
+        }
+      } else if (action && action.remove) {
+        set = set.remove(
+          set.find(void 0, void 0, (spec) => spec.id === action.remove.id)
+        );
+      }
+      return set;
+    }
+  },
+  props: {
+    decorations(state) {
+      return this.getState(state);
+    }
+  }
+});
+var findPlaceholder = (state, id) => {
+  const decos = uploadPlaceholderPlugin.getState(state);
+  if (!decos) {
+    return null;
+  }
+  const found = decos.find(void 0, void 0, (spec) => spec.id === id);
+  return found.length ? found[0].from : null;
+};
+
+// src/plugins/placehoder.tsx
+import "prosemirror-model";
+import { Plugin as Plugin3 } from "prosemirror-state";
+import "prosemirror-view";
+var getFirstChildDescendants = (view) => {
+  const nodes = [];
+  view.state.doc?.descendants((n) => {
+    nodes.push(n);
+  });
+  return nodes;
+};
+function placeholderPlugin(text) {
+  const update = (view) => {
+    const decos = uploadPlaceholderPlugin.getState(view.state);
+    if (decos && decos.find().length > 0 || view.state.doc.content.content.some((e) => e.type.name !== "paragraph") || view.state.doc.childCount > 1 || getFirstChildDescendants(view).length > 1 || view.state.doc.textContent) {
+      view.dom.removeAttribute("data-placeholder");
+    } else {
+      view.dom.setAttribute("data-placeholder", text);
+    }
+  };
+  return new Plugin3({
+    view(view) {
+      update(view);
+      return { update };
+    }
+  });
+}
+
+// src/text_editor_controller.tsx
+import { history } from "prosemirror-history";
+
+// src/plugins/keymap.tsx
+import { TextSelection } from "prosemirror-state";
+import { undo, redo } from "prosemirror-history";
+import { chainCommands, splitBlockAs } from "prosemirror-commands";
+import { splitListItem } from "prosemirror-schema-list";
+function buildKeymap(schema) {
+  const keys = {};
+  function bind(key, cmd) {
+    keys[key] = cmd;
+  }
+  bind("Mod-z", undo);
+  bind("Shift-Mod-z", redo);
+  bind("Mod-y", redo);
+  bind("ArrowDown", (state, dispatch) => {
+    const doc = state.doc;
+    const lastNode = doc.lastChild;
+    if (lastNode && lastNode.type.name !== "paragraph") {
+      const paragraphType = state.schema.nodes.paragraph;
+      let tr = state.tr;
+      const endPos = doc.content.size;
+      tr = tr.insert(endPos, paragraphType.create());
+      tr = tr.setSelection(TextSelection.create(tr.doc, tr.doc.content.size));
+      if (dispatch) {
+        dispatch(tr);
+      }
+      return true;
+    }
+    return false;
+  });
+  const li = schema.nodes.list_item;
+  bind(
+    "Enter",
+    chainCommands(
+      splitListItem(li),
+      (state, dispatch) => {
+        const { $head } = state.selection;
+        if ($head.parent.type === state.schema.nodes.paragraph) {
+          splitBlockAs((n) => {
+            return {
+              type: n.type,
+              attrs: n.attrs
+            };
+          })(state, dispatch);
+          return true;
+        }
+        return false;
+      },
+      (state, dispatch) => {
+        const { selection } = state;
+        const { $from, $to } = selection;
+        const lines = state.doc.textBetween($from.before(), $to.pos).split("\n");
+        const currentLine = lines[lines.length - 1];
+        const match = currentLine.match(/^(\s+).*$/);
+        if (match) {
+          if (dispatch) {
+            dispatch(state.tr.insertText("\n" + match[1], $from.pos));
+          }
+          return true;
+        }
+        return false;
+      }
+    )
+  );
+  bind("Tab", (state, dispatch) => {
+    const { selection } = state;
+    const { $from, $to } = selection;
+    if ($from.parent.type === schema.nodes.code_block) {
+      if (dispatch) {
+        dispatch(state.tr.insertText("  ", $from.pos, $to.pos));
+      }
+      return true;
+    }
+    return false;
+  });
+  return keys;
+}
+
+// src/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ").trim();
+}
+
+// src/attach_file.tsx
+import "prosemirror-view";
+
 // src/schema.tsx
 import { Schema } from "prosemirror-model";
 import { addListNodes } from "prosemirror-schema-list";
@@ -496,317 +750,12 @@ function createSchema(spec = { nodes: {}, marks: {} }) {
   return prosemirrorSchema;
 }
 
-// src/create_text_editor.tsx
-import "rxjs";
-
-// src/commands.tsx
-import * as commands from "prosemirror-commands";
-import * as schemaList from "prosemirror-schema-list";
-var createCommands = (schema, view, options = {}) => {
-  {
-    const isBlockTypeActive = (node, attrs, excludes = []) => {
-      const state = view.state;
-      const ranges = state.selection.ranges;
-      let active = false;
-      for (const range of ranges) {
-        const { $from, $to } = range;
-        state.doc.nodesBetween($from.pos, $to.pos, (n) => {
-          if (active) {
-            return true;
-          }
-          if (n.type !== node || excludes.includes(n.type)) {
-            return;
-          }
-          if (!attrs || Object.keys(attrs).every((key) => n.attrs[key] === attrs[key])) {
-            active = true;
-          }
-        });
-        return active;
-      }
-    };
-    const setBlockType2 = (node, attrs) => {
-      view.focus();
-      const nodeType = schema.nodes[node];
-      const command = commands.setBlockType(nodeType, attrs);
-      command(view.state, view.dispatch);
-    };
-    const toggleBlockType = (node, attrs) => {
-      view.focus();
-      const nodeType = schema.nodes[node];
-      const command = commands.setBlockType(nodeType, attrs);
-      if (isBlockTypeActive(nodeType, attrs)) {
-        command(view.state, view.dispatch);
-      }
-    };
-    const toggleMark2 = (mark, attrs, options2) => {
-      view.focus();
-      const markType = schema.marks[mark];
-      const command = commands.toggleMark(markType, attrs, options2);
-      command(view.state, view.dispatch);
-    };
-    const wrapInList2 = (listType, attrs) => {
-      view.focus();
-      const nodeType = schema.nodes[listType];
-      const command = schemaList.wrapInList(nodeType, attrs);
-      command(view.state, view.dispatch);
-    };
-    const clear = () => {
-      const tr = view.state.tr.replaceWith(
-        0,
-        view.state.doc.content.size,
-        schema.nodes.doc.createAndFill()
-      );
-      view.dispatch(tr);
-    };
-    return {
-      isBlockTypeActive,
-      setBlockType: setBlockType2,
-      toggleBlockType,
-      toggleMark: toggleMark2,
-      wrapInList: wrapInList2,
-      clear,
-      attachFile: (files) => {
-        options.attachFile?.(view, files);
-      }
-    };
-  }
-};
-
-// src/input.tsx
-import React, {
-  useEffect
-} from "react";
-import { debounceTime, filter } from "rxjs";
-function TextEditorInput({
-  ref,
-  onChange,
-  updateDelay = 0,
-  ...props
-}) {
-  const inputRef = React.useRef(null);
-  useEffect(() => {
-    const controller = ref.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);
-      }
-    });
-    return () => {
-      sub.unsubscribe();
-      controller.view.destroy();
-    };
-  }, []);
-  return /* @__PURE__ */ React.createElement("input", { ...props, ref: inputRef, type: "hidden", onInput: onChange });
-}
-
-// src/text_editor_controller.tsx
-import {
-  EditorState as EditorState2
-} from "prosemirror-state";
-import { EditorView as EditorView3 } from "prosemirror-view";
-import * as commands2 from "prosemirror-commands";
-import { keymap } from "prosemirror-keymap";
-
-// src/plugins/drag_and_drop.tsx
-import { Plugin } from "prosemirror-state";
-function dragAndDropPlugin({ attachFile }) {
-  return new Plugin({
-    props: {
-      handleDOMEvents: {
-        drop(view, event) {
-          if (!attachFile) {
-            return;
-          }
-          const files = event.dataTransfer?.files;
-          if (!files || files.length === 0) {
-            return;
-          }
-          event.preventDefault();
-          const pos = view.state.selection.$from.pos || view.posAtCoords({
-            left: event.clientX,
-            top: event.clientY
-          })?.pos || null;
-          if (pos === null) {
-            return;
-          }
-          const medias = Array.from(files).filter(
-            (file) => file.type.startsWith("image/") || file.type.startsWith("video/")
-          );
-          attachFile(view, medias);
-          return true;
-        }
-      }
-    }
-  });
-}
-
-// src/plugins/upload_placeholder.tsx
-import { Plugin as Plugin2 } from "prosemirror-state";
-import { Decoration, DecorationSet } from "prosemirror-view";
-var uploadPlaceholderPlugin = new Plugin2({
-  state: {
-    init() {
-      return DecorationSet.empty;
-    },
-    apply(tr, set) {
-      set = set.map(tr.mapping, tr.doc);
-      const action = tr.getMeta(this);
-      if (action && action.add) {
-        const { type, width, height } = action.add;
-        const widget = document.createElement("div");
-        widget.className = "upload-placeholder";
-        widget.style.width = `100%`;
-        if (type.startsWith("image/") || type.startsWith("video/")) {
-          widget.style.aspectRatio = `${width} / ${height}`;
-          widget.style.maxWidth = `${width}px`;
-        } else {
-          widget.style.height = "80px";
-        }
-        const progress = document.createElement("div");
-        progress.className = "upload-progress";
-        widget.appendChild(progress);
-        const deco = Decoration.widget(action.add.pos, widget, {
-          id: action.add.id
-        });
-        set = set.add(tr.doc, [deco]);
-      } else if (action && action.progress) {
-        const found = set.find(
-          void 0,
-          void 0,
-          (spec) => spec.id === action.progress.id
-        );
-        if (found.length) {
-          const widget = found[0].type.toDOM;
-          const progress = widget.querySelector(".upload-progress");
-          if (progress) {
-            progress.innerHTML = `${Math.round(action.progress.progress)}%`;
-          }
-        }
-      } else if (action && action.remove) {
-        set = set.remove(
-          set.find(void 0, void 0, (spec) => spec.id === action.remove.id)
-        );
-      }
-      return set;
-    }
-  },
-  props: {
-    decorations(state) {
-      return this.getState(state);
-    }
-  }
-});
-var findPlaceholder = (state, id) => {
-  const decos = uploadPlaceholderPlugin.getState(state);
-  if (!decos) {
-    return null;
-  }
-  const found = decos.find(void 0, void 0, (spec) => spec.id === id);
-  return found.length ? found[0].from : null;
-};
-
-// src/plugins/placehoder.tsx
-import "prosemirror-model";
-import { Plugin as Plugin3 } from "prosemirror-state";
-import "prosemirror-view";
-var getFirstChildDescendants = (view) => {
-  const nodes = [];
-  view.state.doc?.descendants((n) => {
-    nodes.push(n);
-  });
-  return nodes;
-};
-function placeholderPlugin(text) {
-  const update = (view) => {
-    const decos = uploadPlaceholderPlugin.getState(view.state);
-    if (decos && decos.find().length > 0 || view.state.doc.content.content.some((e) => e.type.name !== "paragraph") || view.state.doc.childCount > 1 || getFirstChildDescendants(view).length > 1 || view.state.doc.textContent) {
-      view.dom.removeAttribute("data-placeholder");
-    } else {
-      view.dom.setAttribute("data-placeholder", text);
-    }
-  };
-  return new Plugin3({
-    view(view) {
-      update(view);
-      return { update };
-    }
-  });
-}
-
-// src/text_editor_controller.tsx
-import { history } from "prosemirror-history";
-
-// src/plugins/keymap.tsx
-import { TextSelection } from "prosemirror-state";
-import { undo, redo } from "prosemirror-history";
-import { chainCommands, splitBlockAs } from "prosemirror-commands";
-import { splitListItem } from "prosemirror-schema-list";
-function buildKeymap(schema) {
-  const keys = {};
-  function bind(key, cmd) {
-    keys[key] = cmd;
-  }
-  bind("Mod-z", undo);
-  bind("Shift-Mod-z", redo);
-  bind("Mod-y", redo);
-  const li = schema.nodes.list_item;
-  bind(
-    "Enter",
-    chainCommands(splitListItem(li), (state, dispatch) => {
-      const { $head } = state.selection;
-      if ($head.parent.type === state.schema.nodes.paragraph) {
-        splitBlockAs((n) => {
-          return {
-            type: n.type,
-            attrs: n.attrs
-          };
-        })(state, dispatch);
-        return true;
-      }
-      return false;
-    })
-  );
-  bind("ArrowDown", (state, dispatch) => {
-    const doc = state.doc;
-    const lastNode = doc.lastChild;
-    if (lastNode && lastNode.type.name !== "paragraph") {
-      const paragraphType = state.schema.nodes.paragraph;
-      let tr = state.tr;
-      const endPos = doc.content.size;
-      tr = tr.insert(endPos, paragraphType.create());
-      tr = tr.setSelection(TextSelection.create(tr.doc, tr.doc.content.size));
-      if (dispatch) {
-        dispatch(tr);
-      }
-      return true;
-    }
-    return false;
-  });
-  return keys;
-}
-
-// src/cn.ts
-function cn(...classes) {
-  return classes.filter(Boolean).join(" ").trim();
-}
-
-// src/attach_file.tsx
-import "prosemirror-view";
-
-// src/base64_file_uploader.ts
-var base64FileUploader = async (file) => {
-  const base64 = await new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      resolve(reader.result);
+// src/base64_file_uploader.ts
+var base64FileUploader = async (file) => {
+  const base64 = await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve(reader.result);
     };
     reader.onerror = reject;
     reader.readAsDataURL(file);
@@ -871,7 +820,12 @@ function createAttachFile({
       if (!node) {
         return;
       }
-      view.dispatch(tr2.replaceWith($pos, $pos, node));
+      const current = view.state.doc.resolve($pos);
+      if (current.parentOffset === 0) {
+        view.dispatch(tr2.replaceWith($pos - 1, $pos, node));
+      } else {
+        view.dispatch(tr2.replaceWith($pos, $pos, node));
+      }
     } catch (e) {
       view.dispatch(tr.setMeta(uploadPlaceholderPlugin, { remove: { id } }));
     }
@@ -884,129 +838,212 @@ function createAttachFile({
   };
 }
 
+// src/commands.tsx
+import * as commands from "prosemirror-commands";
+import * as schemaList from "prosemirror-schema-list";
+var createCommands = (schema, view, options = {}) => {
+  {
+    const isBlockTypeActive = (node, attrs, excludes = []) => {
+      const state = view.state;
+      const ranges = state.selection.ranges;
+      let active = false;
+      for (const range of ranges) {
+        const { $from, $to } = range;
+        state.doc.nodesBetween($from.pos, $to.pos, (n) => {
+          if (active) {
+            return true;
+          }
+          if (n.type !== node || excludes.includes(n.type)) {
+            return;
+          }
+          if (!attrs || Object.keys(attrs).every((key) => n.attrs[key] === attrs[key])) {
+            active = true;
+          }
+        });
+        return active;
+      }
+    };
+    const setBlockType2 = (node, attrs) => {
+      view.focus();
+      const nodeType = schema.nodes[node];
+      const command = commands.setBlockType(nodeType, attrs);
+      command(view.state, view.dispatch);
+    };
+    const toggleBlockType = (node, attrs) => {
+      view.focus();
+      const nodeType = schema.nodes[node];
+      const command = commands.setBlockType(nodeType, attrs);
+      if (isBlockTypeActive(nodeType, attrs)) {
+        command(view.state, view.dispatch);
+      }
+    };
+    const toggleMark2 = (mark, attrs, options2) => {
+      view.focus();
+      const markType = schema.marks[mark];
+      const command = commands.toggleMark(markType, attrs, options2);
+      command(view.state, view.dispatch);
+    };
+    const wrapInList2 = (listType, attrs) => {
+      view.focus();
+      const nodeType = schema.nodes[listType];
+      const command = schemaList.wrapInList(nodeType, attrs);
+      command(view.state, view.dispatch);
+    };
+    const clear = () => {
+      const tr = view.state.tr.replaceWith(
+        0,
+        view.state.doc.content.size,
+        schema.nodes.doc.createAndFill()
+      );
+      view.dispatch(tr);
+    };
+    return {
+      isBlockTypeActive,
+      setBlockType: setBlockType2,
+      toggleBlockType,
+      toggleMark: toggleMark2,
+      wrapInList: wrapInList2,
+      clear,
+      attachFile: (files) => {
+        options.attachFile?.(view, files);
+      }
+    };
+  }
+};
+
 // src/text_editor_controller.tsx
 import { DOMParser, DOMSerializer } from "prosemirror-model";
 import { Subject } from "rxjs";
-function createTextEditorController(container, schema, options, {
-  mode = "html",
-  state,
-  editor,
-  defaultValue,
-  updateDelay = 500,
-  placeholder
-}) {
-  const subject = new Subject();
-  const prosemirrorParser = DOMParser.fromSchema(schema);
-  const prosemirrorSerializer = DOMSerializer.fromSchema(schema);
-  const wrapper = document.createElement("div");
-  const toInnerHTML = (value) => {
-    if (mode === "text") {
+import { highlightPlugin } from "prosemirror-highlightjs";
+var TextEditorController = class {
+  schema;
+  props;
+  subject;
+  view;
+  prosemirrorParser;
+  prosemirrorSerializer;
+  get value() {
+    if (this.props.mode === "text") {
+      return this.toTextContent();
+    }
+    return this.toHTML();
+  }
+  set value(value) {
+    const wrap = document.createElement("div");
+    wrap.innerHTML = this.toInnerHTML(value);
+    const doc = this.prosemirrorParser.parse(wrap);
+    const tr = this.view.state.tr.replaceWith(
+      0,
+      this.view.state.doc.content.size,
+      doc.content
+    );
+    this.view.dispatch(tr);
+  }
+  constructor(props = {}) {
+    this.schema = createSchema();
+    this.props = props;
+    this.subject = new Subject();
+    this.prosemirrorParser = DOMParser.fromSchema(this.schema);
+    this.prosemirrorSerializer = DOMSerializer.fromSchema(this.schema);
+  }
+  toInnerHTML(value) {
+    if (this.props.mode === "text") {
       return value.split("\n").map((line) => `<p>${line}</p>`).join("");
     }
     return value;
-  };
-  wrapper.innerHTML = toInnerHTML(defaultValue ? String(defaultValue) : "");
-  const attachFile = createAttachFile({
-    schema,
-    generateMetadata: options.attachFile?.generateMetadata,
-    uploadFile: options.attachFile?.uploadFile
-  });
-  const view = new EditorView3(container, {
-    ...editor,
-    attributes: (state2) => {
-      const propsAttributes = (() => {
-        if (typeof editor?.attributes === "function") {
-          return editor.attributes(state2);
+  }
+  attachFile(files) {
+    return createAttachFile({
+      schema: this.schema,
+      generateMetadata: this.props.attachFile?.generateMetadata,
+      uploadFile: this.props.attachFile?.uploadFile
+    })(this.view, files);
+  }
+  bind(container) {
+    const wrapper = document.createElement("div");
+    wrapper.innerHTML = this.toInnerHTML(
+      this.props.defaultValue ? String(this.props.defaultValue) : ""
+    );
+    this.view = new EditorView3(container, {
+      ...this.props.editor,
+      attributes: (state) => {
+        const propsAttributes = (() => {
+          if (typeof this.props.editor?.attributes === "function") {
+            return this.props.editor.attributes(state);
+          }
+          return this.props.editor?.attributes;
+        })();
+        return {
+          ...propsAttributes,
+          class: cn(this.props?.className, propsAttributes?.class),
+          spellcheck: propsAttributes?.spellcheck || "false",
+          style: this.props.style || "width: 100%; height: inherit; outline: none;"
+        };
+      },
+      state: EditorState2.create({
+        ...this.props.state,
+        schema: this.props.state?.schema || this.schema,
+        doc: this.props.state?.doc || this.prosemirrorParser.parse(wrapper),
+        plugins: [
+          ...this.props.state?.plugins || [],
+          history({
+            newGroupDelay: this.props.updateDelay
+          }),
+          keymap(buildKeymap(this.schema)),
+          keymap(commands2.baseKeymap),
+          uploadPlaceholderPlugin,
+          dragAndDropPlugin({
+            attachFile: (view, files) => this.attachFile(files)
+          }),
+          this.props.placeholder && placeholderPlugin(this.props.placeholder),
+          highlightPlugin(highlighter, ["code_block"], (node) => {
+            const auto = highlighter.highlightAuto(node.textContent);
+            return auto.language || "";
+          })
+        ].filter((e) => !!e)
+      }),
+      dispatchTransaction: (tr) => {
+        let result;
+        if (this.props.editor?.dispatchTransaction) {
+          result = this.props.editor.dispatchTransaction(tr);
+        } else {
+          this.view?.updateState(this.view.state.apply(tr));
         }
-        return editor?.attributes;
-      })();
-      return {
-        ...propsAttributes,
-        class: cn(options?.className, propsAttributes?.class),
-        spellcheck: propsAttributes?.spellcheck || "false",
-        style: options.style || "width: 100%; height: inherit; outline: none;"
-      };
-    },
-    state: EditorState2.create({
-      ...state,
-      schema: state?.schema || schema,
-      doc: state?.doc || prosemirrorParser.parse(wrapper),
-      plugins: [
-        ...state?.plugins || [],
-        history({
-          newGroupDelay: updateDelay
-        }),
-        keymap(buildKeymap(schema)),
-        keymap(commands2.baseKeymap),
-        uploadPlaceholderPlugin,
-        dragAndDropPlugin({
-          attachFile
-        }),
-        placeholder && placeholderPlugin(placeholder)
-      ].filter((e) => !!e)
-    }),
-    dispatchTransaction(tr) {
-      let result;
-      if (editor?.dispatchTransaction) {
-        result = editor.dispatchTransaction(tr);
-      } else {
-        view.updateState(view.state.apply(tr));
+        this.subject.next(tr);
+        return result;
       }
-      subject.next(tr);
-      return result;
+    });
+    if (this.props.autoFocus) {
+      this.view?.focus();
     }
-  });
-  function setValue(value) {
-    const wrap = document.createElement("div");
-    wrap.innerHTML = toInnerHTML(value);
-    const doc = prosemirrorParser.parse(wrap);
-    const tr = view.state.tr.replaceWith(
-      0,
-      view.state.doc.content.size,
-      doc.content
-    );
-    view.dispatch(tr);
   }
-  function toHTML() {
-    const fragment = prosemirrorSerializer.serializeFragment(
-      view.state.doc.content
+  toHTML() {
+    const fragment = this.prosemirrorSerializer.serializeFragment(
+      this.view.state.doc.content
     );
-    const container2 = document.createElement("div");
-    container2.appendChild(fragment);
-    return container2.innerHTML;
+    const container = document.createElement("div");
+    container.appendChild(fragment);
+    return container.innerHTML;
   }
-  function toTextContent() {
-    const state2 = view.state;
-    return state2.doc.textBetween(0, state2.doc.content.size, "\n");
+  toTextContent() {
+    const state = this.view.state;
+    return state.doc.textBetween(0, state.doc.content.size, "\n");
   }
-  const textEditorCommands = createCommands(schema, view, {
-    attachFile
-  });
-  const textEditorController = {
-    schema,
-    view,
-    subject,
-    set value(value) {
-      setValue(value);
-    },
-    get value() {
-      switch (mode) {
-        case "text":
-          return toTextContent();
-        default:
-          return toHTML();
-      }
-    },
-    commands: textEditorCommands
-  };
-  return textEditorController;
-}
+  get commands() {
+    return createCommands(this.schema, this.view, {
+      attachFile: (view, files) => this.attachFile(files)
+    });
+  }
+  dispose() {
+    this.view?.destroy();
+  }
+};
 
 // src/create_text_editor.tsx
 function createTextEditor(options = {}) {
-  const schema = createSchema();
   function Component({
-    ref,
+    controller: externalController,
+    name,
     className,
     autoFocus,
     onChange,
@@ -1019,47 +1056,37 @@ function createTextEditor(options = {}) {
     ...props
   } = {}) {
     const containerRef = useRef(null);
-    const controllerRef = useRef(null);
-    useImperativeHandle(
-      ref || controllerRef,
-      () => {
-        const container = containerRef.current;
-        const textEditorController = createTextEditorController(
-          container,
-          schema,
-          options,
-          {
-            mode,
-            state,
-            editor,
-            defaultValue,
-            updateDelay,
-            placeholder
-          }
-        );
-        controllerRef.current = textEditorController;
-        return textEditorController;
-      },
+    const innerController = useMemo(
+      () => new TextEditorController({
+        mode,
+        state,
+        editor,
+        autoFocus,
+        placeholder,
+        updateDelay,
+        defaultValue,
+        className: options.className,
+        style: options.style,
+        attachFile: options.attachFile
+      }),
       []
     );
+    const controller = externalController || innerController;
     useEffect2(() => {
-      const controller = controllerRef.current;
-      if (!controller) {
+      const container = containerRef.current;
+      if (!container) {
         return;
       }
-      if (autoFocus) {
-        controller.view.focus();
-      }
+      controller.bind(container);
       return () => {
-        controller.view.destroy();
+        controller.dispose();
       };
-    }, []);
+    }, [controller]);
     return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { ...props, ref: containerRef, className }), /* @__PURE__ */ React2.createElement(
       TextEditorInput,
       {
-        ref: controllerRef,
-        updateDelay,
-        defaultValue,
+        name,
+        controller,
         onChange
       }
     ));
@@ -1074,11 +1101,12 @@ function createInnerHTML(raw) {
   return raw.replace(/<\/p>/g, "<br></p>").replace(/(<p><br><\/p>)+$/g, "").replace(
     /<code class="language-(\w+)">([\s\S]*?)<\/code>/g,
     (_, lang, code) => {
+      if (lang === "undefined") {
+        return `<code>${decode(code)}</code>`;
+      }
       try {
-        const highlighted = highlighter.highlight(code, {
-          language: lang
-        }).value;
-        return `<code class="language-${lang}">${decode(highlighted)}</code>`;
+        const { language, value } = highlighter.highlightAuto(code);
+        return `<code class="language-${language}">${decode(value)}</code>`;
       } catch (e) {
         return `<code class="language-${lang}">${decode(code)}</code>`;
       }
@@ -1086,7 +1114,7 @@ function createInnerHTML(raw) {
   ).replace(
     /<a([^>]*target="_blank"[^>]*)>(.*?)<\/a>/g,
     (_, attrs, content) => {
-      return `<a${attrs} rel="noopener noreferrer" target="_blank">${content}<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.25 15.5a.75.75 0 0 1-.75-.75V7.56L7.28 17.78a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L16.44 6.5H9.25a.75.75 0 0 1 0-1.5h9a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-.75.75Z"></path></svg></a>`;
+      return `<a${attrs} rel="noopener noreferrer" target="_blank">${content}<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="display:inline; height:1em;"><path d="M18.25 15.5a.75.75 0 0 1-.75-.75V7.56L7.28 17.78a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L16.44 6.5H9.25a.75.75 0 0 1 0-1.5h9a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-.75.75Z"></path></svg></a>`;
     }
   );
 }
@@ -1111,6 +1139,7 @@ function createTextEditorView(options = {}) {
   };
 }
 export {
+  TextEditorController,
   createAttachFile,
   createInnerHTML,
   createSchema,