dn-react-text-editor 0.1.1 → 0.2.0

package/dist/index.mjs

@@ -1,176 +1,83 @@
-// src/text_editor.tsx
-import React from "react";
-import {
-  EditorState as EditorState2
-} from "prosemirror-state";
-import { EditorView as EditorView3 } from "prosemirror-view";
-import { useEffect, useRef } from "react";
-import { baseKeymap } 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) {
-          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";
+// src/create_text_editor.tsx
+import React2, {
+  useImperativeHandle
+} from "react";
+import "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.tsx
-import { DOMSerializer, DOMParser } from "prosemirror-model";
-import { history } from "prosemirror-history";
-
-// src/plugins/keymap.tsx
-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;
-    })
-  );
-  return keys;
-}
+import { useEffect as useEffect2, useRef } from "react";
 
 // src/schema.tsx
 import { Schema } from "prosemirror-model";
 import { addListNodes } from "prosemirror-schema-list";
-function createSchema() {
+
+// src/plugins/highlighter.ts
+import hljs from "highlight.js";
+import bash from "highlight.js/lib/languages/bash";
+import c from "highlight.js/lib/languages/c";
+import cpp from "highlight.js/lib/languages/cpp";
+import css from "highlight.js/lib/languages/css";
+import java from "highlight.js/lib/languages/java";
+import ts from "highlight.js/lib/languages/typescript";
+import js from "highlight.js/lib/languages/javascript";
+import json from "highlight.js/lib/languages/json";
+import xml from "highlight.js/lib/languages/xml";
+import python from "highlight.js/lib/languages/python";
+import dart from "highlight.js/lib/languages/dart";
+import csharp from "highlight.js/lib/languages/csharp";
+import markdown from "highlight.js/lib/languages/markdown";
+import nginx from "highlight.js/lib/languages/nginx";
+import php from "highlight.js/lib/languages/php";
+import ruby from "highlight.js/lib/languages/ruby";
+import sql from "highlight.js/lib/languages/sql";
+import swift from "highlight.js/lib/languages/swift";
+import yaml from "highlight.js/lib/languages/yaml";
+import rust from "highlight.js/lib/languages/rust";
+hljs.registerLanguage("bash", bash);
+hljs.registerLanguage("c", c);
+hljs.registerLanguage("cpp", cpp);
+hljs.registerLanguage("css", css);
+hljs.registerLanguage("java", java);
+hljs.registerLanguage("markdown", markdown);
+hljs.registerLanguage("nginx", nginx);
+hljs.registerLanguage("php", php);
+hljs.registerLanguage("ruby", ruby);
+hljs.registerLanguage("sql", sql);
+hljs.registerLanguage("swift", swift);
+hljs.registerLanguage("yaml", yaml);
+hljs.registerLanguage("rust", rust);
+hljs.registerLanguage("json", json);
+hljs.registerLanguage("javascript", js);
+hljs.registerLanguage("typescript", ts);
+hljs.registerLanguage("xml", xml);
+hljs.registerLanguage("python", python);
+hljs.registerLanguage("dart", dart);
+hljs.registerLanguage("csharp", csharp);
+var supportedLanguages = [
+  "bash",
+  "c",
+  "cpp",
+  "css",
+  "java",
+  "markdown",
+  "nginx",
+  "php",
+  "ruby",
+  "sql",
+  "swift",
+  "yaml",
+  "rust",
+  "json",
+  "javascript",
+  "typescript",
+  "xml",
+  "python",
+  "dart",
+  "csharp"
+];
+var highlighter = hljs;
+
+// src/schema.tsx
+function createSchema(spec = { nodes: {}, marks: {} }) {
   const customSchema = new Schema({
     nodes: {
       doc: { content: "block+" },
@@ -336,68 +243,233 @@ function createSchema() {
             }
           ];
         }
-      }
-    },
-    marks: {
-      link: {
+      },
+      video: {
+        inline: false,
+        group: "block",
+        draggable: true,
         attrs: {
-          href: { default: "" },
-          title: { default: null }
+          src: { validate: "string" },
+          title: {
+            default: null,
+            validate: "string|null"
+          },
+          width: {
+            default: null,
+            validate: "number|null"
+          },
+          height: {
+            default: null,
+            validate: "number|null"
+          },
+          poster: {
+            default: null,
+            validate: "string|null"
+          }
         },
-        inclusive: false,
         parseDOM: [
           {
-            tag: "a[href]",
+            tag: "video",
             getAttrs(dom) {
               return {
-                href: dom.getAttribute("href"),
-                title: dom.getAttribute("title")
+                src: dom.getAttribute("src"),
+                title: dom.getAttribute("title"),
+                width: dom.getAttribute("width"),
+                height: dom.getAttribute("height"),
+                poster: dom.getAttribute("poster")
               };
             }
           }
         ],
         toDOM(node) {
-          const { href, title } = node.attrs;
-          const target = "_blank";
-          const rel = "noopener noreferrer";
+          const { src, title, width, height, poster } = node.attrs;
           return [
-            "a",
-            { href, title: title || href, target, rel },
-            0
+            "video",
+            {
+              src,
+              title,
+              poster,
+              width,
+              height,
+              playsinline: "true",
+              controls: "controls",
+              style: `aspect-ratio: ${width} / ${height}`
+            }
           ];
         }
       },
-      bold: {
-        parseDOM: [
-          { tag: "strong" },
-          {
-            tag: "b",
-            getAttrs: (node) => node.style.fontWeight != "normal" && null
+      iframe: {
+        group: "block",
+        draggable: true,
+        attrs: {
+          src: { validate: "string" },
+          title: {
+            default: null,
+            validate: "string|null"
           },
-          {
-            style: "font-weight=400",
-            clearMark: (m) => m.type.name == "strong"
+          width: {
+            default: null,
+            validate: "number|null"
           },
-          {
-            style: "font-weight",
-            getAttrs: (value) => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null
+          height: {
+            default: null,
+            validate: "number|null"
+          },
+          allow: {
+            default: null,
+            validate: "string|null"
+          },
+          allowfullscreen: {
+            default: null,
+            validate: "string|null"
+          },
+          referrerPolicy: {
+            default: null,
+            validate: "string|null"
+          },
+          style: {
+            default: null,
+            validate: "string|null"
           }
-        ],
-        toDOM() {
-          return ["strong", 0];
-        }
-      },
-      italic: {
+        },
         parseDOM: [
-          { tag: "em" },
-          { tag: "i" },
-          { style: "font-style=italic" },
           {
-            style: "font-style=normal",
-            clearMark: (m) => m.type.name == "em"
-          }
-        ],
-        toDOM() {
+            tag: "iframe[src]",
+            getAttrs(dom) {
+              return {
+                src: dom.getAttribute("src"),
+                title: dom.getAttribute("title"),
+                width: dom.getAttribute("width"),
+                height: dom.getAttribute("height"),
+                style: dom.getAttribute("style"),
+                allow: dom.getAttribute("allow"),
+                allowfullscreen: dom.getAttribute("allowfullscreen"),
+                referrerpolicy: dom.getAttribute("referrerpolicy")
+              };
+            }
+          }
+        ],
+        toDOM(node) {
+          const {
+            src,
+            title,
+            width,
+            height,
+            allow,
+            allowfullscreen,
+            referrerpolicy,
+            style
+          } = node.attrs;
+          return [
+            "iframe",
+            {
+              src,
+              title,
+              width,
+              height,
+              style,
+              allow,
+              allowfullscreen,
+              referrerpolicy,
+              frameborder: "0"
+            }
+          ];
+        }
+      },
+      blockquote: {
+        content: "block+",
+        group: "block",
+        defining: true,
+        parseDOM: [{ tag: "blockquote" }],
+        toDOM() {
+          return ["blockquote", 0];
+        }
+      },
+      code_block: {
+        content: "text*",
+        marks: "",
+        group: "block",
+        code: true,
+        defining: true,
+        parseDOM: [{ tag: "pre", preserveWhitespace: "full" }],
+        toDOM(node) {
+          const auto = highlighter.highlightAuto(
+            node.textContent,
+            supportedLanguages
+          );
+          return [
+            "pre",
+            {
+              class: "hljs"
+            },
+            [
+              "code",
+              {
+                class: `language-${auto.language}`
+              },
+              0
+            ]
+          ];
+        }
+      },
+      ...spec.nodes
+    },
+    marks: {
+      link: {
+        attrs: {
+          href: { default: "" },
+          title: { default: null }
+        },
+        inclusive: false,
+        parseDOM: [
+          {
+            tag: "a[href]",
+            getAttrs(dom) {
+              return {
+                href: dom.getAttribute("href"),
+                title: dom.getAttribute("title")
+              };
+            }
+          }
+        ],
+        toDOM(node) {
+          const { href, title } = node.attrs;
+          const target = "_blank";
+          const rel = "noopener noreferrer";
+          return ["a", { href, title: title || href, target, rel }, 0];
+        }
+      },
+      bold: {
+        parseDOM: [
+          { tag: "strong" },
+          {
+            tag: "b",
+            getAttrs: (node) => node.style.fontWeight != "normal" && null
+          },
+          {
+            style: "font-weight=400",
+            clearMark: (m) => m.type.name == "strong"
+          },
+          {
+            style: "font-weight",
+            getAttrs: (value) => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null
+          }
+        ],
+        toDOM() {
+          return ["strong", 0];
+        }
+      },
+      italic: {
+        parseDOM: [
+          { tag: "em" },
+          { tag: "i" },
+          { style: "font-style=italic" },
+          {
+            style: "font-style=normal",
+            clearMark: (m) => m.type.name == "em"
+          }
+        ],
+        toDOM() {
           return ["em", 0];
         }
       },
@@ -412,22 +484,314 @@ function createSchema() {
         toDOM() {
           return ["u", 0];
         }
-      }
-    }
+      },
+      ...spec.marks
+    },
+    topNode: spec.topNode
   });
   const prosemirrorSchema = new Schema({
-    nodes: addListNodes(
-      customSchema.spec.nodes,
-      "paragraph block*",
-      "block"
-    ),
+    nodes: addListNodes(customSchema.spec.nodes, "paragraph block*", "block"),
     marks: customSchema.spec.marks
   });
   return prosemirrorSchema;
 }
 
-// src/text_editor.tsx
-import { debounceTime, filter, Subject } from "rxjs";
+// 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) {
@@ -436,15 +800,28 @@ function cn(...classes) {
 
 // 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);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+  return {
+    src: base64,
+    alt: file.name
+  };
+};
+
+// src/attach_file.tsx
 function createAttachFile({
   schema,
   generateMetadata,
-  uploadFile = (file) => {
-    return {
-      src: URL.createObjectURL(file),
-      alt: file.name
-    };
-  }
+  uploadFile = base64FileUploader
 }) {
   const attachEachFile = async (view, file, pos) => {
     const metadata = generateMetadata ? await generateMetadata(file) : {};
@@ -496,9 +873,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) => {
@@ -509,181 +884,218 @@ function createAttachFile({
   };
 }
 
-// src/text_editor.tsx
-function createTextEditor(options = {}) {
-  const schema = createSchema();
+// src/text_editor_controller.tsx
+import { DOMParser, DOMSerializer } from "prosemirror-model";
+import { Subject } from "rxjs";
+function createTextEditorController(container, schema, options, {
+  mode,
+  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 === "html") {
+      return value;
+    }
+    return value.split("\n").map((line) => `<p>${line}</p>`).join("");
+  };
+  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);
+        }
+        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));
+      }
+      subject.next(tr);
+      return result;
+    }
+  });
+  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
+    );
+    const container2 = document.createElement("div");
+    container2.appendChild(fragment);
+    return container2.innerHTML;
+  }
+  function toTextContent() {
+    const state2 = view.state;
+    return state2.doc.textBetween(0, state2.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;
+}
+
+// src/create_text_editor.tsx
+function createTextEditor(options = {}) {
+  const schema = createSchema();
   function Component({
     ref,
-    state,
-    editor,
-    mode = "html",
-    container,
+    className,
     autoFocus,
-    name,
     placeholder,
-    className,
     defaultValue,
-    onClick,
     onChange,
-    updateDelay = 0,
+    updateDelay,
     ...props
   } = {}) {
     const containerRef = useRef(null);
-    const inputRef = useRef(null);
-    useEffect(() => {
-      const element = containerRef.current;
-      if (!element) {
+    const controllerRef = useRef(null);
+    useImperativeHandle(ref, () => {
+      const container = containerRef.current;
+      const textEditorController = createTextEditorController(
+        container,
+        schema,
+        options,
+        props
+      );
+      controllerRef.current = textEditorController;
+      return textEditorController;
+    });
+    useEffect2(() => {
+      const controller = controllerRef.current;
+      if (!controller) {
         return;
       }
-      const subject = new Subject();
-      const wrapper = document.createElement("div");
-      const toInnerHTML = (value) => {
-        if (mode === "html") {
-          return value;
-        }
-        return value.split("\n").map((line) => `<p>${line}</p>`).join("");
-      };
-      wrapper.innerHTML = toInnerHTML(defaultValue ? String(defaultValue) : "");
-      const view = new EditorView3(element, {
-        ...editor,
-        attributes: (state2) => {
-          const propsAttributes = (() => {
-            if (typeof editor?.attributes === "function") {
-              return editor.attributes(state2);
-            }
-            return editor?.attributes;
-          })();
-          return {
-            ...propsAttributes,
-            class: cn(propsAttributes?.class, className),
-            spellcheck: propsAttributes?.spellcheck || "false"
-          };
-        },
-        state: EditorState2.create({
-          ...state,
-          schema: state?.schema || schema,
-          doc: state?.doc || prosemirrorParser.parse(wrapper),
-          plugins: [
-            ...state?.plugins || [],
-            history({
-              newGroupDelay: updateDelay
-            }),
-            keymap(buildKeymap(schema)),
-            keymap(baseKeymap),
-            uploadPlaceholderPlugin,
-            attachFile ? dragAndDropPlugin({
-              attachFile
-            }) : null,
-            placeholder && placeholderPlugin(placeholder)
-          ].filter((e) => !!e)
-        }),
-        dispatchTransaction(tr) {
-          let result;
-          if (editor?.dispatchTransaction) {
-            result = editor.dispatchTransaction(tr);
-          } else {
-            view.updateState(view.state.apply(tr));
-          }
-          subject.next(tr);
-          return result;
-        }
-      });
-      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 clear() {
-        const tr = view.state.tr.replaceWith(
-          0,
-          view.state.doc.content.size,
-          schema.nodes.doc.createAndFill()
-        );
-        view.dispatch(tr);
+      if (autoFocus) {
+        controller.view.focus();
       }
-      function toHTML() {
-        const fragment = prosemirrorSerializer.serializeFragment(
-          view.state.doc.content
-        );
-        const container2 = document.createElement("div");
-        container2.appendChild(fragment);
-        return container2.innerHTML;
+    }, []);
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { ...props, ref: containerRef, className }), /* @__PURE__ */ React2.createElement(
+      TextEditorInput,
+      {
+        ref: controllerRef,
+        updateDelay,
+        onChange
       }
-      function toTextContent() {
-        const state2 = view.state;
-        return state2.doc.textBetween(0, state2.doc.content.size, "\n");
+    ));
+  }
+  return Component;
+}
+
+// src/html.tsx
+import { decode } from "html-entities";
+import React3 from "react";
+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) => {
+      try {
+        const highlighted = highlighter.highlight(code, {
+          language: lang
+        }).value;
+        return `<code class="language-${lang}">${decode(highlighted)}</code>`;
+      } catch (e) {
+        return `<code class="language-${lang}">${decode(code)}</code>`;
       }
-      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);
+    }
+  ).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>`;
+    }
+  );
+}
+function createTextEditorView(options = {}) {
+  return function Component({
+    className,
+    dangerouslySetInnerHTML,
+    ...props
+  }) {
+    return /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        ...props,
+        className: cn(options?.className, className),
+        dangerouslySetInnerHTML: {
+          __html: createInnerHTML(
+            String(dangerouslySetInnerHTML?.__html || "")
+          )
         }
-      });
-      if (autoFocus) {
-        view.focus();
       }
-      const textEditorController = {
-        schema,
-        view,
-        subject,
-        set value(value) {
-          setValue(value);
-        },
-        get value() {
-          switch (mode) {
-            case "text":
-              return toTextContent();
-            default:
-              return toHTML();
-          }
-        },
-        clear
-      };
-      if (typeof ref === "function") {
-        ref(textEditorController);
-      } else if (ref) {
-        ref.current = textEditorController;
-      }
-      return () => {
-        sub.unsubscribe();
-        view.destroy();
-        element.innerHTML = "";
-      };
-    }, []);
-    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,
-    attachFile,
-    Component
+    );
   };
 }
 export {
   createAttachFile,
+  createInnerHTML,
   createSchema,
-  createTextEditor
+  createTextEditor,
+  createTextEditorView
 };