dn-react-text-editor 0.1.1 → 0.2.0

package/dist/schema.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/schema.tsx
@@ -25,7 +35,75 @@ __export(schema_exports, {
 module.exports = __toCommonJS(schema_exports);
 var import_prosemirror_model = require("prosemirror-model");
 var import_prosemirror_schema_list = require("prosemirror-schema-list");
-function createSchema() {
+
+// src/plugins/highlighter.ts
+var import_highlight = __toESM(require("highlight.js"));
+var import_bash = __toESM(require("highlight.js/lib/languages/bash"));
+var import_c = __toESM(require("highlight.js/lib/languages/c"));
+var import_cpp = __toESM(require("highlight.js/lib/languages/cpp"));
+var import_css = __toESM(require("highlight.js/lib/languages/css"));
+var import_java = __toESM(require("highlight.js/lib/languages/java"));
+var import_typescript = __toESM(require("highlight.js/lib/languages/typescript"));
+var import_javascript = __toESM(require("highlight.js/lib/languages/javascript"));
+var import_json = __toESM(require("highlight.js/lib/languages/json"));
+var import_xml = __toESM(require("highlight.js/lib/languages/xml"));
+var import_python = __toESM(require("highlight.js/lib/languages/python"));
+var import_dart = __toESM(require("highlight.js/lib/languages/dart"));
+var import_csharp = __toESM(require("highlight.js/lib/languages/csharp"));
+var import_markdown = __toESM(require("highlight.js/lib/languages/markdown"));
+var import_nginx = __toESM(require("highlight.js/lib/languages/nginx"));
+var import_php = __toESM(require("highlight.js/lib/languages/php"));
+var import_ruby = __toESM(require("highlight.js/lib/languages/ruby"));
+var import_sql = __toESM(require("highlight.js/lib/languages/sql"));
+var import_swift = __toESM(require("highlight.js/lib/languages/swift"));
+var import_yaml = __toESM(require("highlight.js/lib/languages/yaml"));
+var import_rust = __toESM(require("highlight.js/lib/languages/rust"));
+import_highlight.default.registerLanguage("bash", import_bash.default);
+import_highlight.default.registerLanguage("c", import_c.default);
+import_highlight.default.registerLanguage("cpp", import_cpp.default);
+import_highlight.default.registerLanguage("css", import_css.default);
+import_highlight.default.registerLanguage("java", import_java.default);
+import_highlight.default.registerLanguage("markdown", import_markdown.default);
+import_highlight.default.registerLanguage("nginx", import_nginx.default);
+import_highlight.default.registerLanguage("php", import_php.default);
+import_highlight.default.registerLanguage("ruby", import_ruby.default);
+import_highlight.default.registerLanguage("sql", import_sql.default);
+import_highlight.default.registerLanguage("swift", import_swift.default);
+import_highlight.default.registerLanguage("yaml", import_yaml.default);
+import_highlight.default.registerLanguage("rust", import_rust.default);
+import_highlight.default.registerLanguage("json", import_json.default);
+import_highlight.default.registerLanguage("javascript", import_javascript.default);
+import_highlight.default.registerLanguage("typescript", import_typescript.default);
+import_highlight.default.registerLanguage("xml", import_xml.default);
+import_highlight.default.registerLanguage("python", import_python.default);
+import_highlight.default.registerLanguage("dart", import_dart.default);
+import_highlight.default.registerLanguage("csharp", import_csharp.default);
+var supportedLanguages = [
+  "bash",
+  "c",
+  "cpp",
+  "css",
+  "java",
+  "markdown",
+  "nginx",
+  "php",
+  "ruby",
+  "sql",
+  "swift",
+  "yaml",
+  "rust",
+  "json",
+  "javascript",
+  "typescript",
+  "xml",
+  "python",
+  "dart",
+  "csharp"
+];
+var highlighter = import_highlight.default;
+
+// src/schema.tsx
+function createSchema(spec = { nodes: {}, marks: {} }) {
   const customSchema = new import_prosemirror_model.Schema({
     nodes: {
       doc: { content: "block+" },
@@ -191,7 +269,176 @@ function createSchema() {
             }
           ];
         }
-      }
+      },
+      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: {
@@ -215,11 +462,7 @@ function createSchema() {
           const { href, title } = node.attrs;
           const target = "_blank";
           const rel = "noopener noreferrer";
-          return [
-            "a",
-            { href, title: title || href, target, rel },
-            0
-          ];
+          return ["a", { href, title: title || href, target, rel }, 0];
         }
       },
       bold: {
@@ -267,15 +510,13 @@ function createSchema() {
         toDOM() {
           return ["u", 0];
         }
-      }
-    }
+      },
+      ...spec.marks
+    },
+    topNode: spec.topNode
   });
   const prosemirrorSchema = new import_prosemirror_model.Schema({
-    nodes: (0, import_prosemirror_schema_list.addListNodes)(
-      customSchema.spec.nodes,
-      "paragraph block*",
-      "block"
-    ),
+    nodes: (0, import_prosemirror_schema_list.addListNodes)(customSchema.spec.nodes, "paragraph block*", "block"),
     marks: customSchema.spec.marks
   });
   return prosemirrorSchema;

package/dist/schema.mjs

@@ -1,7 +1,75 @@
 // 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+" },
@@ -167,7 +235,176 @@ function createSchema() {
             }
           ];
         }
-      }
+      },
+      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: {
@@ -191,11 +428,7 @@ function createSchema() {
           const { href, title } = node.attrs;
           const target = "_blank";
           const rel = "noopener noreferrer";
-          return [
-            "a",
-            { href, title: title || href, target, rel },
-            0
-          ];
+          return ["a", { href, title: title || href, target, rel }, 0];
         }
       },
       bold: {
@@ -243,15 +476,13 @@ 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;

package/dist/text_editor_controller.d.mts

@@ -0,0 +1,46 @@
+import * as prosemirror_model from 'prosemirror-model';
+import { Schema } from 'prosemirror-model';
+import { EditorStateConfig, Transaction } from 'prosemirror-state';
+import { DirectEditorProps, EditorView } from 'prosemirror-view';
+import { GenerateMetadata, UploadFile } from './attach_file.mjs';
+import { Subject } from 'rxjs';
+import './schema.mjs';
+import 'orderedmap';
+
+type TextEditorControllerProps = {
+    mode?: "html" | "text";
+    state?: Partial<EditorStateConfig>;
+    editor?: Partial<DirectEditorProps>;
+    defaultValue?: string | readonly string[] | number;
+    updateDelay?: number;
+    placeholder?: string;
+};
+type CreateTextEditorOptions = {
+    className?: string;
+    style?: string;
+    attachFile?: {
+        generateMetadata?: GenerateMetadata;
+        uploadFile?: UploadFile;
+    };
+};
+declare function createTextEditorController(container: HTMLElement, schema: Schema, options: CreateTextEditorOptions, { mode, state, editor, defaultValue, updateDelay, placeholder, }: TextEditorControllerProps): {
+    schema: Schema<any, any>;
+    view: EditorView;
+    subject: Subject<Transaction>;
+    value: string;
+    commands: {
+        isBlockTypeActive: (node: prosemirror_model.NodeType, attrs?: prosemirror_model.Attrs | null, excludes?: prosemirror_model.NodeType[]) => false | undefined;
+        setBlockType: (node: string, attrs?: prosemirror_model.Attrs | null) => void;
+        toggleBlockType: (node: string, attrs?: prosemirror_model.Attrs | null) => void;
+        toggleMark: (mark: string, attrs?: prosemirror_model.Attrs | null, options?: {
+            removeWhenPresent?: boolean;
+            enterInlineAtoms?: boolean;
+            includeWhitespace?: boolean;
+        }) => void;
+        wrapInList: (listType: string, attrs?: prosemirror_model.Attrs | null) => void;
+        clear: () => void;
+        attachFile: (files: File[]) => void;
+    };
+};
+
+export { type CreateTextEditorOptions, type TextEditorControllerProps, createTextEditorController };

package/dist/text_editor_controller.d.ts

@@ -0,0 +1,46 @@
+import * as prosemirror_model from 'prosemirror-model';
+import { Schema } from 'prosemirror-model';
+import { EditorStateConfig, Transaction } from 'prosemirror-state';
+import { DirectEditorProps, EditorView } from 'prosemirror-view';
+import { GenerateMetadata, UploadFile } from './attach_file.js';
+import { Subject } from 'rxjs';
+import './schema.js';
+import 'orderedmap';
+
+type TextEditorControllerProps = {
+    mode?: "html" | "text";
+    state?: Partial<EditorStateConfig>;
+    editor?: Partial<DirectEditorProps>;
+    defaultValue?: string | readonly string[] | number;
+    updateDelay?: number;
+    placeholder?: string;
+};
+type CreateTextEditorOptions = {
+    className?: string;
+    style?: string;
+    attachFile?: {
+        generateMetadata?: GenerateMetadata;
+        uploadFile?: UploadFile;
+    };
+};
+declare function createTextEditorController(container: HTMLElement, schema: Schema, options: CreateTextEditorOptions, { mode, state, editor, defaultValue, updateDelay, placeholder, }: TextEditorControllerProps): {
+    schema: Schema<any, any>;
+    view: EditorView;
+    subject: Subject<Transaction>;
+    value: string;
+    commands: {
+        isBlockTypeActive: (node: prosemirror_model.NodeType, attrs?: prosemirror_model.Attrs | null, excludes?: prosemirror_model.NodeType[]) => false | undefined;
+        setBlockType: (node: string, attrs?: prosemirror_model.Attrs | null) => void;
+        toggleBlockType: (node: string, attrs?: prosemirror_model.Attrs | null) => void;
+        toggleMark: (mark: string, attrs?: prosemirror_model.Attrs | null, options?: {
+            removeWhenPresent?: boolean;
+            enterInlineAtoms?: boolean;
+            includeWhitespace?: boolean;
+        }) => void;
+        wrapInList: (listType: string, attrs?: prosemirror_model.Attrs | null) => void;
+        clear: () => void;
+        attachFile: (files: File[]) => void;
+    };
+};
+
+export { type CreateTextEditorOptions, type TextEditorControllerProps, createTextEditorController };