dn-react-text-editor 0.3.0 → 0.3.2

package/README.md

@@ -7,8 +7,6 @@ A rich text editor component for React built on ProseMirror.
 ```tsx
 import { TextEditor } from "dn-react-text-editor";
 
-const TextEditor = useTextEditor();
-
 function App() {
   return (
     <TextEditor

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/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

@@ -1,8 +1,8 @@
-export { TextEditorProps, createTextEditor } from './create_text_editor.mjs';
+export { TextEditor, TextEditorProps } from './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 { ConfigTextEditorOptions, TextEditorController, TextEditorControllerProps, configTextEditorController } from './text_editor_controller.mjs';
 import 'react';
 import 'orderedmap';
 import 'prosemirror-model';

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-export { TextEditorProps, createTextEditor } from './create_text_editor.js';
+export { TextEditor, TextEditorProps } from './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 { ConfigTextEditorOptions, TextEditorController, TextEditorControllerProps, configTextEditorController } from './text_editor_controller.js';
 import 'react';
 import 'orderedmap';
 import 'prosemirror-model';

package/dist/index.js

@@ -30,33 +30,29 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  TextEditor: () => TextEditor,
   TextEditorController: () => TextEditorController,
+  configTextEditorController: () => configTextEditorController,
   createAttachFile: () => createAttachFile,
   createInnerHTML: () => createInnerHTML,
   createSchema: () => createSchema,
-  createTextEditor: () => createTextEditor,
   createTextEditorView: () => createTextEditorView
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/create_text_editor.tsx
+// src/text_editor.tsx
 var import_react2 = __toESM(require("react"));
 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;
@@ -68,7 +64,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
@@ -219,23 +224,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;
@@ -252,6 +240,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;
 }
 
@@ -823,7 +856,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 } }));
     }
@@ -912,9 +950,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;
@@ -937,9 +975,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);
@@ -954,8 +991,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) {
@@ -974,9 +1011,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({
@@ -994,7 +1031,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) => {
@@ -1033,57 +1074,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 = (0, import_react3.useRef)(null);
-    const innerController = (0, import_react2.useMemo)(
-      () => new TextEditorController(options, {
-        mode,
-        state,
-        editor,
-        autoFocus,
-        placeholder,
-        updateDelay,
-        defaultValue
-      }),
-      []
-    );
-    const controller = externalController || innerController;
-    (0, import_react3.useEffect)(() => {
-      const container = containerRef.current;
-      if (!container) {
-        return;
-      }
-      controller.bind(container);
-      return () => {
-        controller.dispose();
-      };
-    }, [controller]);
-    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,
-      {
-        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 = (0, import_react3.useRef)(null);
+  const innerController = (0, import_react2.useMemo)(
+    () => new TextEditorController({
+      mode,
+      state,
+      editor,
+      autoFocus,
+      placeholder,
+      updateDelay,
+      defaultValue,
+      attachFile,
+      style
+    }),
+    []
+  );
+  const controller = externalController || innerController;
+  (0, import_react3.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    controller.bind(container);
+    return () => {
+      controller.dispose();
+    };
+  }, [controller]);
+  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,
+      onChange
+    }
+  ));
 }
 
 // src/html.tsx
@@ -1093,11 +1143,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>`;
       }
@@ -1131,10 +1182,11 @@ function createTextEditorView(options = {}) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  TextEditor,
   TextEditorController,
+  configTextEditorController,
   createAttachFile,
   createInnerHTML,
   createSchema,
-  createTextEditor,
   createTextEditorView
 });