dn-react-text-editor 0.3.0 → 0.3.2

package/dist/index.mjs

@@ -1,4 +1,4 @@
-// src/create_text_editor.tsx
+// src/text_editor.tsx
 import React2, {
   useMemo
 } from "react";
@@ -9,17 +9,12 @@ import React, {
   useEffect
 } from "react";
 import { debounceTime, filter } from "rxjs";
-function TextEditorInput({
-  controller,
-  onChange,
-  updateDelay = 0,
-  ...props
-}) {
+function TextEditorInput({ controller, onChange, ...props }) {
   const inputRef = React.useRef(null);
   useEffect(() => {
     const sub = controller.subject.pipe(
       filter((tr) => tr.docChanged),
-      debounceTime(updateDelay)
+      debounceTime(controller.props.updateDelay || 0)
     ).subscribe(() => {
       if (inputRef.current) {
         inputRef.current.value = controller.value;
@@ -31,7 +26,16 @@ function TextEditorInput({
       sub.unsubscribe();
     };
   }, []);
-  return /* @__PURE__ */ React.createElement("input", { ...props, ref: inputRef, type: "hidden", onInput: onChange });
+  return /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ...props,
+      ref: inputRef,
+      type: "hidden",
+      onInput: onChange,
+      defaultValue: controller.props.defaultValue
+    }
+  );
 }
 
 // src/text_editor_controller.tsx
@@ -184,23 +188,6 @@ function buildKeymap(schema) {
   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;
@@ -217,6 +204,51 @@ function buildKeymap(schema) {
     }
     return false;
   });
+  const li = schema.nodes.list_item;
+  bind(
+    "Enter",
+    chainCommands(
+      splitListItem(li),
+      (state, dispatch) => {
+        const { $head } = state.selection;
+        if ($head.parent.type === state.schema.nodes.paragraph) {
+          splitBlockAs((n) => {
+            return {
+              type: n.type,
+              attrs: n.attrs
+            };
+          })(state, dispatch);
+          return true;
+        }
+        return false;
+      },
+      (state, dispatch) => {
+        const { selection } = state;
+        const { $from, $to } = selection;
+        const lines = state.doc.textBetween($from.before(), $to.pos).split("\n");
+        const currentLine = lines[lines.length - 1];
+        const match = currentLine.match(/^(\s+).*$/);
+        if (match) {
+          if (dispatch) {
+            dispatch(state.tr.insertText("\n" + match[1], $from.pos));
+          }
+          return true;
+        }
+        return false;
+      }
+    )
+  );
+  bind("Tab", (state, dispatch) => {
+    const { selection } = state;
+    const { $from, $to } = selection;
+    if ($from.parent.type === schema.nodes.code_block) {
+      if (dispatch) {
+        dispatch(state.tr.insertText("  ", $from.pos, $to.pos));
+      }
+      return true;
+    }
+    return false;
+  });
   return keys;
 }
 
@@ -788,7 +820,12 @@ function createAttachFile({
       if (!node) {
         return;
       }
-      view.dispatch(tr2.replaceWith($pos, $pos, node));
+      const current = view.state.doc.resolve($pos);
+      if (current.parentOffset === 0) {
+        view.dispatch(tr2.replaceWith($pos - 1, $pos, node));
+      } else {
+        view.dispatch(tr2.replaceWith($pos, $pos, node));
+      }
     } catch (e) {
       view.dispatch(tr.setMeta(uploadPlaceholderPlugin, { remove: { id } }));
     }
@@ -877,9 +914,9 @@ var createCommands = (schema, view, options = {}) => {
 // src/text_editor_controller.tsx
 import { DOMParser, DOMSerializer } from "prosemirror-model";
 import { Subject } from "rxjs";
+import { highlightPlugin } from "prosemirror-highlightjs";
 var TextEditorController = class {
   schema;
-  options;
   props;
   subject;
   view;
@@ -902,9 +939,8 @@ var TextEditorController = class {
     );
     this.view.dispatch(tr);
   }
-  constructor(options = {}, props = {}) {
+  constructor(props = {}) {
     this.schema = createSchema();
-    this.options = options;
     this.props = props;
     this.subject = new Subject();
     this.prosemirrorParser = DOMParser.fromSchema(this.schema);
@@ -919,8 +955,8 @@ var TextEditorController = class {
   attachFile(files) {
     return createAttachFile({
       schema: this.schema,
-      generateMetadata: this.options.attachFile?.generateMetadata,
-      uploadFile: this.options.attachFile?.uploadFile
+      generateMetadata: this.props.attachFile?.generateMetadata,
+      uploadFile: this.props.attachFile?.uploadFile
     })(this.view, files);
   }
   bind(container) {
@@ -939,9 +975,9 @@ var TextEditorController = class {
         })();
         return {
           ...propsAttributes,
-          class: cn(this.options?.className, propsAttributes?.class),
+          class: cn(this.props.className, propsAttributes?.class),
           spellcheck: propsAttributes?.spellcheck || "false",
-          style: this.options.style || "width: 100%; height: inherit; outline: none;"
+          style: this.props.style || "width: 100%; height: inherit; outline: none;"
         };
       },
       state: EditorState2.create({
@@ -959,7 +995,11 @@ var TextEditorController = class {
           dragAndDropPlugin({
             attachFile: (view, files) => this.attachFile(files)
           }),
-          this.props.placeholder && placeholderPlugin(this.props.placeholder)
+          this.props.placeholder && placeholderPlugin(this.props.placeholder),
+          highlightPlugin(highlighter, ["code_block"], (node) => {
+            const auto = highlighter.highlightAuto(node.textContent);
+            return auto.language || "";
+          })
         ].filter((e) => !!e)
       }),
       dispatchTransaction: (tr) => {
@@ -998,57 +1038,66 @@ var TextEditorController = class {
     this.view?.destroy();
   }
 };
+var configTextEditorController = (options = {}) => {
+  return (props) => new TextEditorController({
+    ...props,
+    className: props.className || options.className,
+    style: props.style || options.style,
+    attachFile: props.attachFile || options.attachFile
+  });
+};
 
-// src/create_text_editor.tsx
-function createTextEditor(options = {}) {
-  function Component({
-    controller: externalController,
-    className,
-    autoFocus,
-    onChange,
-    mode,
-    state,
-    editor,
-    defaultValue,
-    updateDelay,
-    placeholder,
-    ...props
-  } = {}) {
-    const containerRef = useRef(null);
-    const innerController = useMemo(
-      () => new TextEditorController(options, {
-        mode,
-        state,
-        editor,
-        autoFocus,
-        placeholder,
-        updateDelay,
-        defaultValue
-      }),
-      []
-    );
-    const controller = externalController || innerController;
-    useEffect2(() => {
-      const container = containerRef.current;
-      if (!container) {
-        return;
-      }
-      controller.bind(container);
-      return () => {
-        controller.dispose();
-      };
-    }, [controller]);
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { ...props, ref: containerRef, className }), /* @__PURE__ */ React2.createElement(
-      TextEditorInput,
-      {
-        controller,
-        updateDelay,
-        defaultValue,
-        onChange
-      }
-    ));
-  }
-  return Component;
+// src/text_editor.tsx
+function TextEditor({
+  controller: externalController,
+  name,
+  className,
+  autoFocus,
+  onChange,
+  mode,
+  state,
+  editor,
+  defaultValue,
+  updateDelay,
+  placeholder,
+  attachFile,
+  style,
+  ...props
+} = {}) {
+  const containerRef = useRef(null);
+  const innerController = useMemo(
+    () => new TextEditorController({
+      mode,
+      state,
+      editor,
+      autoFocus,
+      placeholder,
+      updateDelay,
+      defaultValue,
+      attachFile,
+      style
+    }),
+    []
+  );
+  const controller = externalController || innerController;
+  useEffect2(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    controller.bind(container);
+    return () => {
+      controller.dispose();
+    };
+  }, [controller]);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { ...props, ref: containerRef, className }), /* @__PURE__ */ React2.createElement(
+    TextEditorInput,
+    {
+      name,
+      controller,
+      onChange
+    }
+  ));
 }
 
 // src/html.tsx
@@ -1058,11 +1107,12 @@ function createInnerHTML(raw) {
   return raw.replace(/<\/p>/g, "<br></p>").replace(/(<p><br><\/p>)+$/g, "").replace(
     /<code class="language-(\w+)">([\s\S]*?)<\/code>/g,
     (_, lang, code) => {
+      if (lang === "undefined") {
+        return `<code>${decode(code)}</code>`;
+      }
       try {
-        const highlighted = highlighter.highlight(code, {
-          language: lang
-        }).value;
-        return `<code class="language-${lang}">${decode(highlighted)}</code>`;
+        const { language, value } = highlighter.highlightAuto(code);
+        return `<code class="language-${language}">${decode(value)}</code>`;
       } catch (e) {
         return `<code class="language-${lang}">${decode(code)}</code>`;
       }
@@ -1095,10 +1145,11 @@ function createTextEditorView(options = {}) {
   };
 }
 export {
+  TextEditor,
   TextEditorController,
+  configTextEditorController,
   createAttachFile,
   createInnerHTML,
   createSchema,
-  createTextEditor,
   createTextEditorView
 };

package/dist/input.d.mts

@@ -10,10 +10,9 @@ import 'rxjs';
 
 type Props = Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     controller: TextEditorController;
-    updateDelay?: number;
     name?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
-declare function TextEditorInput({ controller, onChange, updateDelay, ...props }: Props): React.JSX.Element;
+declare function TextEditorInput({ controller, onChange, ...props }: Props): React.JSX.Element;
 
 export { TextEditorInput };

package/dist/input.d.ts

@@ -10,10 +10,9 @@ import 'rxjs';
 
 type Props = Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     controller: TextEditorController;
-    updateDelay?: number;
     name?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
-declare function TextEditorInput({ controller, onChange, updateDelay, ...props }: Props): React.JSX.Element;
+declare function TextEditorInput({ controller, onChange, ...props }: Props): React.JSX.Element;
 
 export { TextEditorInput };

package/dist/input.js

@@ -35,17 +35,12 @@ __export(input_exports, {
 module.exports = __toCommonJS(input_exports);
 var import_react = __toESM(require("react"));
 var import_rxjs = require("rxjs");
-function TextEditorInput({
-  controller,
-  onChange,
-  updateDelay = 0,
-  ...props
-}) {
+function TextEditorInput({ controller, onChange, ...props }) {
   const inputRef = import_react.default.useRef(null);
   (0, import_react.useEffect)(() => {
     const sub = controller.subject.pipe(
       (0, import_rxjs.filter)((tr) => tr.docChanged),
-      (0, import_rxjs.debounceTime)(updateDelay)
+      (0, import_rxjs.debounceTime)(controller.props.updateDelay || 0)
     ).subscribe(() => {
       if (inputRef.current) {
         inputRef.current.value = controller.value;
@@ -57,7 +52,16 @@ function TextEditorInput({
       sub.unsubscribe();
     };
   }, []);
-  return /* @__PURE__ */ import_react.default.createElement("input", { ...props, ref: inputRef, type: "hidden", onInput: onChange });
+  return /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      ...props,
+      ref: inputRef,
+      type: "hidden",
+      onInput: onChange,
+      defaultValue: controller.props.defaultValue
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/input.mjs

@@ -3,17 +3,12 @@ import React, {
   useEffect
 } from "react";
 import { debounceTime, filter } from "rxjs";
-function TextEditorInput({
-  controller,
-  onChange,
-  updateDelay = 0,
-  ...props
-}) {
+function TextEditorInput({ controller, onChange, ...props }) {
   const inputRef = React.useRef(null);
   useEffect(() => {
     const sub = controller.subject.pipe(
       filter((tr) => tr.docChanged),
-      debounceTime(updateDelay)
+      debounceTime(controller.props.updateDelay || 0)
     ).subscribe(() => {
       if (inputRef.current) {
         inputRef.current.value = controller.value;
@@ -25,7 +20,16 @@ function TextEditorInput({
       sub.unsubscribe();
     };
   }, []);
-  return /* @__PURE__ */ React.createElement("input", { ...props, ref: inputRef, type: "hidden", onInput: onChange });
+  return /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ...props,
+      ref: inputRef,
+      type: "hidden",
+      onInput: onChange,
+      defaultValue: controller.props.defaultValue
+    }
+  );
 }
 export {
   TextEditorInput

package/dist/plugins/keymap.js

@@ -35,23 +35,6 @@ function buildKeymap(schema) {
   bind("Mod-z", import_prosemirror_history.undo);
   bind("Shift-Mod-z", import_prosemirror_history.redo);
   bind("Mod-y", import_prosemirror_history.redo);
-  const li = schema.nodes.list_item;
-  bind(
-    "Enter",
-    (0, import_prosemirror_commands.chainCommands)((0, import_prosemirror_schema_list.splitListItem)(li), (state, dispatch) => {
-      const { $head } = state.selection;
-      if ($head.parent.type === state.schema.nodes.paragraph) {
-        (0, import_prosemirror_commands.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;
@@ -68,6 +51,51 @@ function buildKeymap(schema) {
     }
     return false;
   });
+  const li = schema.nodes.list_item;
+  bind(
+    "Enter",
+    (0, import_prosemirror_commands.chainCommands)(
+      (0, import_prosemirror_schema_list.splitListItem)(li),
+      (state, dispatch) => {
+        const { $head } = state.selection;
+        if ($head.parent.type === state.schema.nodes.paragraph) {
+          (0, import_prosemirror_commands.splitBlockAs)((n) => {
+            return {
+              type: n.type,
+              attrs: n.attrs
+            };
+          })(state, dispatch);
+          return true;
+        }
+        return false;
+      },
+      (state, dispatch) => {
+        const { selection } = state;
+        const { $from, $to } = selection;
+        const lines = state.doc.textBetween($from.before(), $to.pos).split("\n");
+        const currentLine = lines[lines.length - 1];
+        const match = currentLine.match(/^(\s+).*$/);
+        if (match) {
+          if (dispatch) {
+            dispatch(state.tr.insertText("\n" + match[1], $from.pos));
+          }
+          return true;
+        }
+        return false;
+      }
+    )
+  );
+  bind("Tab", (state, dispatch) => {
+    const { selection } = state;
+    const { $from, $to } = selection;
+    if ($from.parent.type === schema.nodes.code_block) {
+      if (dispatch) {
+        dispatch(state.tr.insertText("  ", $from.pos, $to.pos));
+      }
+      return true;
+    }
+    return false;
+  });
   return keys;
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/plugins/keymap.mjs

@@ -11,23 +11,6 @@ function buildKeymap(schema) {
   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;
@@ -44,6 +27,51 @@ function buildKeymap(schema) {
     }
     return false;
   });
+  const li = schema.nodes.list_item;
+  bind(
+    "Enter",
+    chainCommands(
+      splitListItem(li),
+      (state, dispatch) => {
+        const { $head } = state.selection;
+        if ($head.parent.type === state.schema.nodes.paragraph) {
+          splitBlockAs((n) => {
+            return {
+              type: n.type,
+              attrs: n.attrs
+            };
+          })(state, dispatch);
+          return true;
+        }
+        return false;
+      },
+      (state, dispatch) => {
+        const { selection } = state;
+        const { $from, $to } = selection;
+        const lines = state.doc.textBetween($from.before(), $to.pos).split("\n");
+        const currentLine = lines[lines.length - 1];
+        const match = currentLine.match(/^(\s+).*$/);
+        if (match) {
+          if (dispatch) {
+            dispatch(state.tr.insertText("\n" + match[1], $from.pos));
+          }
+          return true;
+        }
+        return false;
+      }
+    )
+  );
+  bind("Tab", (state, dispatch) => {
+    const { selection } = state;
+    const { $from, $to } = selection;
+    if ($from.parent.type === schema.nodes.code_block) {
+      if (dispatch) {
+        dispatch(state.tr.insertText("  ", $from.pos, $to.pos));
+      }
+      return true;
+    }
+    return false;
+  });
   return keys;
 }
 export {

package/dist/text_editor.d.mts

@@ -0,0 +1,18 @@
+import React, { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { TextEditorController, TextEditorControllerProps } from './text_editor_controller.mjs';
+import 'prosemirror-model';
+import 'prosemirror-state';
+import 'prosemirror-view';
+import './attach_file.mjs';
+import './schema.mjs';
+import 'orderedmap';
+import 'rxjs';
+
+type HTMLElementProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+type TextEditorProps = Omit<HTMLElementProps, "ref"> & {
+    controller?: TextEditorController;
+    name?: string;
+} & TextEditorControllerProps;
+declare function TextEditor({ controller: externalController, name, className, autoFocus, onChange, mode, state, editor, defaultValue, updateDelay, placeholder, attachFile, style, ...props }?: TextEditorProps): React.JSX.Element;
+
+export { TextEditor, type TextEditorProps };

package/dist/text_editor.d.ts

@@ -0,0 +1,18 @@
+import React, { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { TextEditorController, TextEditorControllerProps } from './text_editor_controller.js';
+import 'prosemirror-model';
+import 'prosemirror-state';
+import 'prosemirror-view';
+import './attach_file.js';
+import './schema.js';
+import 'orderedmap';
+import 'rxjs';
+
+type HTMLElementProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+type TextEditorProps = Omit<HTMLElementProps, "ref"> & {
+    controller?: TextEditorController;
+    name?: string;
+} & TextEditorControllerProps;
+declare function TextEditor({ controller: externalController, name, className, autoFocus, onChange, mode, state, editor, defaultValue, updateDelay, placeholder, attachFile, style, ...props }?: TextEditorProps): React.JSX.Element;
+
+export { TextEditor, type TextEditorProps };