dn-react-text-editor 0.1.1 → 0.2.0

package/dist/text_editor_controller.mjs

@@ -0,0 +1,470 @@
+// 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);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+  return {
+    src: base64,
+    alt: file.name
+  };
+};
+
+// src/attach_file.tsx
+function createAttachFile({
+  schema,
+  generateMetadata,
+  uploadFile = base64FileUploader
+}) {
+  const attachEachFile = async (view, file, pos) => {
+    const metadata = generateMetadata ? await generateMetadata(file) : {};
+    const id = {};
+    view.focus();
+    const tr = view.state.tr;
+    if (!tr.selection.empty) {
+      tr.deleteSelection();
+    }
+    tr.setMeta(uploadPlaceholderPlugin, {
+      add: {
+        id,
+        pos: pos ?? tr.selection.from,
+        type: file.type,
+        ...metadata
+      }
+    });
+    view.dispatch(tr);
+    const $pos = findPlaceholder(view.state, id);
+    if (!$pos) {
+      return;
+    }
+    try {
+      const { src, alt } = await uploadFile(file);
+      const tr2 = view.state.tr.setMeta(uploadPlaceholderPlugin, {
+        remove: { id }
+      });
+      const createNode = () => {
+        if (file.type.startsWith("image/")) {
+          return schema.nodes.image.create({
+            src,
+            alt,
+            width: metadata.width,
+            height: metadata.height
+          });
+        }
+        if (file.type.startsWith("video/")) {
+          return schema.nodes.video.create({
+            src,
+            width: metadata.width,
+            height: metadata.height,
+            poster: metadata.poster
+          });
+        }
+      };
+      const node = createNode();
+      if (!node) {
+        return;
+      }
+      view.dispatch(tr2.replaceWith($pos, $pos, node));
+    } catch (e) {
+      view.dispatch(tr.setMeta(uploadPlaceholderPlugin, { remove: { id } }));
+    }
+  };
+  return async (view, files, pos) => {
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      await attachEachFile(view, file, pos);
+    }
+  };
+}
+
+// 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,
+  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;
+}
+export {
+  createTextEditorController
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dn-react-text-editor",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.mjs",
   "module": "./dist/index.js",
@@ -44,6 +44,8 @@
     "react-dom": "^19"
   },
   "dependencies": {
+    "highlight.js": "^11.11.1",
+    "html-entities": "^2.6.0",
     "prosemirror-commands": "^1.7.1",
     "prosemirror-history": "^1.5.0",
     "prosemirror-keymap": "^1.2.3",

package/dist/plugins/trailing_paragraph.d.mts

@@ -1,5 +0,0 @@
-import { Plugin } from 'prosemirror-state';
-
-declare function trailingParagraph(): Plugin<any>;
-
-export { trailingParagraph };

package/dist/plugins/trailing_paragraph.d.ts

@@ -1,5 +0,0 @@
-import { Plugin } from 'prosemirror-state';
-
-declare function trailingParagraph(): Plugin<any>;
-
-export { trailingParagraph };

package/dist/plugins/trailing_paragraph.mjs

@@ -1,21 +0,0 @@
-// src/plugins/trailing_paragraph.tsx
-import { Plugin } from "prosemirror-state";
-function trailingParagraph() {
-  return new Plugin({
-    appendTransaction(transactions, oldState, newState) {
-      const doc = newState.doc;
-      const lastNode = doc.lastChild;
-      if (lastNode && lastNode.type.name !== "paragraph") {
-        const paragraphType = newState.schema.nodes.paragraph;
-        const tr = newState.tr;
-        const endPos = doc.content.size;
-        tr.insert(endPos, paragraphType.create());
-        return tr;
-      }
-      return null;
-    }
-  });
-}
-export {
-  trailingParagraph
-};

package/dist/text_editor.d.mts

@@ -1,37 +0,0 @@
-import { createAttachFile, AttachFile } from './attach_file.mjs';
-import * as orderedmap from 'orderedmap';
-import * as prosemirror_model from 'prosemirror-model';
-import React, { DetailedHTMLProps, InputHTMLAttributes, Ref } from 'react';
-import { Transaction, EditorStateConfig } from 'prosemirror-state';
-import { EditorView, DirectEditorProps } from 'prosemirror-view';
-import { createSchema } from './schema.mjs';
-import { Subject } from 'rxjs';
-
-type TextEditorController = {
-    schema: ReturnType<typeof createSchema>;
-    view: EditorView;
-    subject: Subject<Transaction>;
-    set value(value: string);
-    get value(): string;
-    clear: () => void;
-};
-type TextEditorProps = Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: Ref<TextEditorController>;
-    state?: Partial<EditorStateConfig>;
-    editor?: Partial<DirectEditorProps>;
-    mode?: "html" | "text";
-    updateDelay?: number;
-    container?: string;
-};
-declare function createTextEditor(options?: {
-    attachFile?: {
-        generateMetadata: Parameters<typeof createAttachFile>[0]["generateMetadata"];
-        uploadFile: Parameters<typeof createAttachFile>[0]["uploadFile"];
-    };
-}): {
-    schema: prosemirror_model.Schema<keyof orderedmap.default<prosemirror_model.NodeSpec>, keyof orderedmap.default<prosemirror_model.MarkSpec>>;
-    attachFile: AttachFile;
-    Component: ({ ref, state, editor, mode, container, autoFocus, name, placeholder, className, defaultValue, onClick, onChange, updateDelay, ...props }?: TextEditorProps) => React.JSX.Element;
-};
-
-export { type TextEditorController, type TextEditorProps, createTextEditor };

package/dist/text_editor.d.ts

@@ -1,37 +0,0 @@
-import { createAttachFile, AttachFile } from './attach_file.js';
-import * as orderedmap from 'orderedmap';
-import * as prosemirror_model from 'prosemirror-model';
-import React, { DetailedHTMLProps, InputHTMLAttributes, Ref } from 'react';
-import { Transaction, EditorStateConfig } from 'prosemirror-state';
-import { EditorView, DirectEditorProps } from 'prosemirror-view';
-import { createSchema } from './schema.js';
-import { Subject } from 'rxjs';
-
-type TextEditorController = {
-    schema: ReturnType<typeof createSchema>;
-    view: EditorView;
-    subject: Subject<Transaction>;
-    set value(value: string);
-    get value(): string;
-    clear: () => void;
-};
-type TextEditorProps = Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: Ref<TextEditorController>;
-    state?: Partial<EditorStateConfig>;
-    editor?: Partial<DirectEditorProps>;
-    mode?: "html" | "text";
-    updateDelay?: number;
-    container?: string;
-};
-declare function createTextEditor(options?: {
-    attachFile?: {
-        generateMetadata: Parameters<typeof createAttachFile>[0]["generateMetadata"];
-        uploadFile: Parameters<typeof createAttachFile>[0]["uploadFile"];
-    };
-}): {
-    schema: prosemirror_model.Schema<keyof orderedmap.default<prosemirror_model.NodeSpec>, keyof orderedmap.default<prosemirror_model.MarkSpec>>;
-    attachFile: AttachFile;
-    Component: ({ ref, state, editor, mode, container, autoFocus, name, placeholder, className, defaultValue, onClick, onChange, updateDelay, ...props }?: TextEditorProps) => React.JSX.Element;
-};
-
-export { type TextEditorController, type TextEditorProps, createTextEditor };