dn-react-text-editor 0.2.3 → 0.3.0

package/dist/text_editor_controller.mjs

@@ -192,6 +192,496 @@ function cn(...classes) {
 // src/attach_file.tsx
 import "prosemirror-view";
 
+// src/schema.tsx
+import { Schema } from "prosemirror-model";
+import { addListNodes } from "prosemirror-schema-list";
+
+// 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+" },
+      paragraph: {
+        attrs: { align: { default: null } },
+        content: "inline*",
+        group: "block",
+        parseDOM: [
+          {
+            tag: "p",
+            getAttrs(dom) {
+              return {
+                align: dom.style.textAlign || null
+              };
+            }
+          }
+        ],
+        toDOM(node) {
+          return [
+            "p",
+            {
+              style: node.attrs.align ? `text-align: ${node.attrs.align}` : null
+            },
+            0
+          ];
+        }
+      },
+      text: {
+        group: "inline"
+      },
+      hard_break: {
+        inline: true,
+        group: "inline",
+        selectable: false,
+        parseDOM: [{ tag: "br" }],
+        toDOM() {
+          return ["br"];
+        }
+      },
+      heading: {
+        attrs: { level: { default: 1 }, align: { default: null } },
+        content: "inline*",
+        group: "block",
+        defining: true,
+        parseDOM: [
+          {
+            tag: "h1",
+            getAttrs(node) {
+              return {
+                level: 1,
+                algin: node.style.textAlign || null
+              };
+            }
+          },
+          {
+            tag: "h2",
+            getAttrs(node) {
+              return {
+                level: 2,
+                algin: node.style.textAlign || null
+              };
+            }
+          },
+          {
+            tag: "h3",
+            getAttrs(node) {
+              return {
+                level: 3,
+                algin: node.style.textAlign || null
+              };
+            }
+          },
+          {
+            tag: "h4",
+            getAttrs(node) {
+              return {
+                level: 4,
+                algin: node.style.textAlign || null
+              };
+            }
+          },
+          {
+            tag: "h5",
+            getAttrs(node) {
+              return {
+                level: 5,
+                algin: node.style.textAlign || null
+              };
+            }
+          },
+          {
+            tag: "h6",
+            getAttrs(node) {
+              return {
+                level: 6,
+                algin: node.style.textAlign || null
+              };
+            }
+          }
+        ],
+        toDOM(node) {
+          return [
+            "h" + node.attrs.level,
+            {
+              id: node.textContent.toLowerCase().replace(/\s+/g, "-"),
+              style: node.attrs.align ? `text-align: ${node.attrs.align};` : null
+            },
+            0
+          ];
+        }
+      },
+      horizontal_rule: {
+        group: "block",
+        parseDOM: [{ tag: "hr" }],
+        toDOM() {
+          return ["hr"];
+        }
+      },
+      image: {
+        attrs: {
+          src: { validate: "string" },
+          alt: { default: null, validate: "string|null" },
+          title: {
+            default: null,
+            validate: "string|null"
+          },
+          width: {
+            default: null,
+            validate: "number|null"
+          },
+          height: {
+            default: null,
+            validate: "number|null"
+          }
+        },
+        inline: false,
+        group: "block",
+        draggable: true,
+        parseDOM: [
+          {
+            tag: "img",
+            getAttrs(dom) {
+              return {
+                src: dom.getAttribute("src"),
+                alt: dom.getAttribute("alt"),
+                width: dom.getAttribute("width"),
+                height: dom.getAttribute("height")
+              };
+            }
+          }
+        ],
+        toDOM(node) {
+          const { src, alt, srcSet, sizes, width, height } = node.attrs;
+          return [
+            "img",
+            {
+              src,
+              alt,
+              srcSet,
+              sizes,
+              width,
+              height
+            }
+          ];
+        }
+      },
+      video: {
+        inline: false,
+        group: "block",
+        draggable: true,
+        attrs: {
+          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"
+          }
+        },
+        parseDOM: [
+          {
+            tag: "video",
+            getAttrs(dom) {
+              return {
+                src: dom.getAttribute("src"),
+                title: dom.getAttribute("title"),
+                width: dom.getAttribute("width"),
+                height: dom.getAttribute("height"),
+                poster: dom.getAttribute("poster")
+              };
+            }
+          }
+        ],
+        toDOM(node) {
+          const { src, title, width, height, poster } = node.attrs;
+          return [
+            "video",
+            {
+              src,
+              title,
+              poster,
+              width,
+              height,
+              playsinline: "true",
+              controls: "controls",
+              style: `aspect-ratio: ${width} / ${height}`
+            }
+          ];
+        }
+      },
+      iframe: {
+        group: "block",
+        draggable: true,
+        attrs: {
+          src: { validate: "string" },
+          title: {
+            default: null,
+            validate: "string|null"
+          },
+          width: {
+            default: null,
+            validate: "number|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"
+          }
+        },
+        parseDOM: [
+          {
+            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];
+        }
+      },
+      underline: {
+        parseDOM: [
+          { tag: "u" },
+          {
+            style: "text-decoration",
+            getAttrs: (value) => value === "underline" && null
+          }
+        ],
+        toDOM() {
+          return ["u", 0];
+        }
+      },
+      ...spec.marks
+    },
+    topNode: spec.topNode
+  });
+  const prosemirrorSchema = new Schema({
+    nodes: addListNodes(customSchema.spec.nodes, "paragraph block*", "block"),
+    marks: customSchema.spec.marks
+  });
+  return prosemirrorSchema;
+}
+
 // src/base64_file_uploader.ts
 var base64FileUploader = async (file) => {
   const base64 = await new Promise((resolve, reject) => {
@@ -351,120 +841,127 @@ var createCommands = (schema, view, options = {}) => {
 // 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") {
+var TextEditorController = class {
+  schema;
+  options;
+  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(options = {}, props = {}) {
+    this.schema = createSchema();
+    this.options = options;
+    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.options.attachFile?.generateMetadata,
+      uploadFile: this.options.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.options?.className, propsAttributes?.class),
+          spellcheck: propsAttributes?.spellcheck || "false",
+          style: this.options.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)
+        ].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();
+  }
+};
 export {
-  createTextEditorController
+  TextEditorController
 };