dn-react-text-editor 0.3.0 → 0.3.1

package/dist/attach_file.js

@@ -160,7 +160,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 } }));
     }

package/dist/attach_file.mjs

@@ -136,7 +136,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 } }));
     }

package/dist/create_text_editor.d.mts

@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, InputHTMLAttributes, FC } from 'react';
-import { TextEditorController, TextEditorControllerProps, CreateTextEditorOptions } from './text_editor_controller.mjs';
+import { TextEditorController, TextEditorControllerProps } from './text_editor_controller.mjs';
 import 'prosemirror-model';
 import 'prosemirror-state';
 import 'prosemirror-view';
@@ -13,6 +13,7 @@ type TextEditorProps = Omit<HTMLElementProps, "ref"> & {
     controller?: TextEditorController;
     name?: string;
 } & TextEditorControllerProps;
+type CreateTextEditorOptions = Pick<TextEditorControllerProps, "className" | "style" | "attachFile">;
 declare function createTextEditor(options?: CreateTextEditorOptions): FC<TextEditorProps>;
 
 export { type TextEditorProps, createTextEditor };

package/dist/create_text_editor.d.ts

@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, InputHTMLAttributes, FC } from 'react';
-import { TextEditorController, TextEditorControllerProps, CreateTextEditorOptions } from './text_editor_controller.js';
+import { TextEditorController, TextEditorControllerProps } from './text_editor_controller.js';
 import 'prosemirror-model';
 import 'prosemirror-state';
 import 'prosemirror-view';
@@ -13,6 +13,7 @@ type TextEditorProps = Omit<HTMLElementProps, "ref"> & {
     controller?: TextEditorController;
     name?: string;
 } & TextEditorControllerProps;
+type CreateTextEditorOptions = Pick<TextEditorControllerProps, "className" | "style" | "attachFile">;
 declare function createTextEditor(options?: CreateTextEditorOptions): FC<TextEditorProps>;
 
 export { type TextEditorProps, createTextEditor };

package/dist/create_text_editor.js

@@ -39,17 +39,12 @@ var import_react3 = require("react");
 // src/input.tsx
 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;
@@ -61,7 +56,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
+    }
+  );
 }
 
 // src/text_editor_controller.tsx
@@ -212,23 +216,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;
@@ -245,6 +232,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;
 }
 
@@ -816,7 +848,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 } }));
     }
@@ -905,9 +942,9 @@ var createCommands = (schema, view, options = {}) => {
 // src/text_editor_controller.tsx
 var import_prosemirror_model3 = require("prosemirror-model");
 var import_rxjs2 = require("rxjs");
+var import_prosemirror_highlightjs = require("prosemirror-highlightjs");
 var TextEditorController = class {
   schema;
-  options;
   props;
   subject;
   view;
@@ -930,9 +967,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 import_rxjs2.Subject();
     this.prosemirrorParser = import_prosemirror_model3.DOMParser.fromSchema(this.schema);
@@ -947,8 +983,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) {
@@ -967,9 +1003,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: import_prosemirror_state5.EditorState.create({
@@ -987,7 +1023,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),
+          (0, import_prosemirror_highlightjs.highlightPlugin)(highlighter, ["code_block"], (node) => {
+            const auto = highlighter.highlightAuto(node.textContent);
+            return auto.language || "";
+          })
         ].filter((e) => !!e)
       }),
       dispatchTransaction: (tr) => {
@@ -1031,6 +1071,7 @@ var TextEditorController = class {
 function createTextEditor(options = {}) {
   function Component({
     controller: externalController,
+    name,
     className,
     autoFocus,
     onChange,
@@ -1044,14 +1085,17 @@ function createTextEditor(options = {}) {
   } = {}) {
     const containerRef = (0, import_react3.useRef)(null);
     const innerController = (0, import_react2.useMemo)(
-      () => new TextEditorController(options, {
+      () => new TextEditorController({
         mode,
         state,
         editor,
         autoFocus,
         placeholder,
         updateDelay,
-        defaultValue
+        defaultValue,
+        className: options.className,
+        style: options.style,
+        attachFile: options.attachFile
       }),
       []
     );
@@ -1069,9 +1113,8 @@ function createTextEditor(options = {}) {
     return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("div", { ...props, ref: containerRef, className }), /* @__PURE__ */ import_react2.default.createElement(
       TextEditorInput,
       {
+        name,
         controller,
-        updateDelay,
-        defaultValue,
         onChange
       }
     ));

package/dist/create_text_editor.mjs

@@ -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) => {
@@ -1003,6 +1043,7 @@ var TextEditorController = class {
 function createTextEditor(options = {}) {
   function Component({
     controller: externalController,
+    name,
     className,
     autoFocus,
     onChange,
@@ -1016,14 +1057,17 @@ function createTextEditor(options = {}) {
   } = {}) {
     const containerRef = useRef(null);
     const innerController = useMemo(
-      () => new TextEditorController(options, {
+      () => new TextEditorController({
         mode,
         state,
         editor,
         autoFocus,
         placeholder,
         updateDelay,
-        defaultValue
+        defaultValue,
+        className: options.className,
+        style: options.style,
+        attachFile: options.attachFile
       }),
       []
     );
@@ -1041,9 +1085,8 @@ function createTextEditor(options = {}) {
     return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { ...props, ref: containerRef, className }), /* @__PURE__ */ React2.createElement(
       TextEditorInput,
       {
+        name,
         controller,
-        updateDelay,
-        defaultValue,
         onChange
       }
     ));

package/dist/html.js

@@ -93,11 +93,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>${(0, import_html_entities.decode)(code)}</code>`;
+      }
       try {
-        const highlighted = highlighter.highlight(code, {
-          language: lang
-        }).value;
-        return `<code class="language-${lang}">${(0, import_html_entities.decode)(highlighted)}</code>`;
+        const { language, value } = highlighter.highlightAuto(code);
+        return `<code class="language-${language}">${(0, import_html_entities.decode)(value)}</code>`;
       } catch (e) {
         return `<code class="language-${lang}">${(0, import_html_entities.decode)(code)}</code>`;
       }

package/dist/html.mjs

@@ -56,11 +56,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>`;
       }

package/dist/index.d.mts

@@ -2,7 +2,7 @@ export { TextEditorProps, createTextEditor } from './create_text_editor.mjs';
 export { createSchema } from './schema.mjs';
 export { AttachFile, AttachFileOptions, GenerateMetadata, UploadFile, createAttachFile } from './attach_file.mjs';
 export { createInnerHTML, createTextEditorView } from './html.mjs';
-export { CreateTextEditorOptions, TextEditorController, TextEditorControllerProps } from './text_editor_controller.mjs';
+export { TextEditorController, TextEditorControllerProps } from './text_editor_controller.mjs';
 import 'react';
 import 'orderedmap';
 import 'prosemirror-model';

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { TextEditorProps, createTextEditor } from './create_text_editor.js';
 export { createSchema } from './schema.js';
 export { AttachFile, AttachFileOptions, GenerateMetadata, UploadFile, createAttachFile } from './attach_file.js';
 export { createInnerHTML, createTextEditorView } from './html.js';
-export { CreateTextEditorOptions, TextEditorController, TextEditorControllerProps } from './text_editor_controller.js';
+export { TextEditorController, TextEditorControllerProps } from './text_editor_controller.js';
 import 'react';
 import 'orderedmap';
 import 'prosemirror-model';