dn-react-text-editor 0.1.2 → 0.2.1

package/README.md

@@ -1,3 +1,22 @@
 # React Text Editor
 
 A rich text editor component for React built on ProseMirror.
+
+## Example
+
+```tsx
+import { TextEditor } from "dn-react-text-editor";
+
+const TextEditor = useTextEditor();
+
+function App() {
+  return (
+    <TextEditor
+      placeholder="Write something..."
+      onChange={(e) => {
+        console.log(e.target.value);
+      }}
+    />
+  );
+}
+```

package/dist/attach_file.d.mts

@@ -3,30 +3,28 @@ import { createSchema } from './schema.mjs';
 import 'orderedmap';
 import 'prosemirror-model';
 
-type AttachFile = (view: EditorView, files: File[]) => Promise<void>;
+type GenerateMetadata = (file: File) => Promise<{
+    width?: number;
+    height?: number;
+    poster?: string;
+}> | {
+    width?: number;
+    height?: number;
+    poster?: string;
+};
+type UploadFile = (file: File) => Promise<{
+    src: string;
+    alt?: string;
+}> | {
+    src: string;
+    alt?: string;
+};
 type AttachFileOptions = {
     schema: ReturnType<typeof createSchema>;
-    generateMetadata?: (file: File) => Promise<{
-        width?: number;
-        height?: number;
-        poster?: string;
-    }> | {
-        width?: number;
-        height?: number;
-        poster?: string;
-    };
-    uploadFile?: (file: File) => Promise<{
-        src: string;
-        alt?: string;
-    }> | {
-        src: string;
-        alt?: string;
-    };
+    generateMetadata?: GenerateMetadata;
+    uploadFile?: UploadFile;
 };
-declare const base64ImageUploader: (file: File) => Promise<{
-    src: string;
-    alt: string;
-}>;
+type AttachFile = (view: EditorView, files: File[]) => Promise<void>;
 declare function createAttachFile({ schema, generateMetadata, uploadFile, }: AttachFileOptions): AttachFile;
 
-export { type AttachFile, base64ImageUploader, createAttachFile };
+export { type AttachFile, type AttachFileOptions, type GenerateMetadata, type UploadFile, createAttachFile };

package/dist/attach_file.d.ts

@@ -3,30 +3,28 @@ import { createSchema } from './schema.js';
 import 'orderedmap';
 import 'prosemirror-model';
 
-type AttachFile = (view: EditorView, files: File[]) => Promise<void>;
+type GenerateMetadata = (file: File) => Promise<{
+    width?: number;
+    height?: number;
+    poster?: string;
+}> | {
+    width?: number;
+    height?: number;
+    poster?: string;
+};
+type UploadFile = (file: File) => Promise<{
+    src: string;
+    alt?: string;
+}> | {
+    src: string;
+    alt?: string;
+};
 type AttachFileOptions = {
     schema: ReturnType<typeof createSchema>;
-    generateMetadata?: (file: File) => Promise<{
-        width?: number;
-        height?: number;
-        poster?: string;
-    }> | {
-        width?: number;
-        height?: number;
-        poster?: string;
-    };
-    uploadFile?: (file: File) => Promise<{
-        src: string;
-        alt?: string;
-    }> | {
-        src: string;
-        alt?: string;
-    };
+    generateMetadata?: GenerateMetadata;
+    uploadFile?: UploadFile;
 };
-declare const base64ImageUploader: (file: File) => Promise<{
-    src: string;
-    alt: string;
-}>;
+type AttachFile = (view: EditorView, files: File[]) => Promise<void>;
 declare function createAttachFile({ schema, generateMetadata, uploadFile, }: AttachFileOptions): AttachFile;
 
-export { type AttachFile, base64ImageUploader, createAttachFile };
+export { type AttachFile, type AttachFileOptions, type GenerateMetadata, type UploadFile, createAttachFile };

package/dist/attach_file.js

@@ -20,7 +20,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/attach_file.tsx
 var attach_file_exports = {};
 __export(attach_file_exports, {
-  base64ImageUploader: () => base64ImageUploader,
   createAttachFile: () => createAttachFile
 });
 module.exports = __toCommonJS(attach_file_exports);
@@ -91,8 +90,8 @@ var findPlaceholder = (state, id) => {
   return found.length ? found[0].from : null;
 };
 
-// src/attach_file.tsx
-var base64ImageUploader = async (file) => {
+// src/base64_file_uploader.ts
+var base64FileUploader = async (file) => {
   const base64 = await new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.onload = () => {
@@ -106,10 +105,12 @@ var base64ImageUploader = async (file) => {
     alt: file.name
   };
 };
+
+// src/attach_file.tsx
 function createAttachFile({
   schema,
   generateMetadata,
-  uploadFile = base64ImageUploader
+  uploadFile = base64FileUploader
 }) {
   const attachEachFile = async (view, file, pos) => {
     const metadata = generateMetadata ? await generateMetadata(file) : {};
@@ -173,6 +174,5 @@ function createAttachFile({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  base64ImageUploader,
   createAttachFile
 });

package/dist/attach_file.mjs

@@ -66,8 +66,8 @@ var findPlaceholder = (state, id) => {
   return found.length ? found[0].from : null;
 };
 
-// src/attach_file.tsx
-var base64ImageUploader = async (file) => {
+// src/base64_file_uploader.ts
+var base64FileUploader = async (file) => {
   const base64 = await new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.onload = () => {
@@ -81,10 +81,12 @@ var base64ImageUploader = async (file) => {
     alt: file.name
   };
 };
+
+// src/attach_file.tsx
 function createAttachFile({
   schema,
   generateMetadata,
-  uploadFile = base64ImageUploader
+  uploadFile = base64FileUploader
 }) {
   const attachEachFile = async (view, file, pos) => {
     const metadata = generateMetadata ? await generateMetadata(file) : {};
@@ -147,6 +149,5 @@ function createAttachFile({
   };
 }
 export {
-  base64ImageUploader,
   createAttachFile
 };

package/dist/base64_file_uploader.d.mts

@@ -0,0 +1,6 @@
+declare const base64FileUploader: (file: File) => Promise<{
+    src: string;
+    alt: string;
+}>;
+
+export { base64FileUploader };

package/dist/base64_file_uploader.d.ts

@@ -0,0 +1,6 @@
+declare const base64FileUploader: (file: File) => Promise<{
+    src: string;
+    alt: string;
+}>;
+
+export { base64FileUploader };

package/dist/{plugins/trailing_paragraph.js → base64_file_uploader.js}

@@ -17,30 +17,27 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/plugins/trailing_paragraph.tsx
-var trailing_paragraph_exports = {};
-__export(trailing_paragraph_exports, {
-  trailingParagraph: () => trailingParagraph
+// src/base64_file_uploader.ts
+var base64_file_uploader_exports = {};
+__export(base64_file_uploader_exports, {
+  base64FileUploader: () => base64FileUploader
 });
-module.exports = __toCommonJS(trailing_paragraph_exports);
-var import_prosemirror_state = require("prosemirror-state");
-function trailingParagraph() {
-  return new import_prosemirror_state.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;
-    }
+module.exports = __toCommonJS(base64_file_uploader_exports);
+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
+  };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  trailingParagraph
+  base64FileUploader
 });

package/dist/base64_file_uploader.mjs

@@ -0,0 +1,18 @@
+// 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
+  };
+};
+export {
+  base64FileUploader
+};

package/dist/commands.d.mts

@@ -0,0 +1,23 @@
+import { Schema, NodeType, Attrs } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import { AttachFile } from './attach_file.mjs';
+import './schema.mjs';
+import 'orderedmap';
+
+declare const createCommands: (schema: Schema, view: EditorView, options?: {
+    attachFile?: AttachFile;
+}) => {
+    isBlockTypeActive: (node: NodeType, attrs?: Attrs | null, excludes?: NodeType[]) => false | undefined;
+    setBlockType: (node: string, attrs?: Attrs | null) => void;
+    toggleBlockType: (node: string, attrs?: Attrs | null) => void;
+    toggleMark: (mark: string, attrs?: Attrs | null, options?: {
+        removeWhenPresent?: boolean;
+        enterInlineAtoms?: boolean;
+        includeWhitespace?: boolean;
+    }) => void;
+    wrapInList: (listType: string, attrs?: Attrs | null) => void;
+    clear: () => void;
+    attachFile: (files: File[]) => void;
+};
+
+export { createCommands };

package/dist/commands.d.ts

@@ -0,0 +1,23 @@
+import { Schema, NodeType, Attrs } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import { AttachFile } from './attach_file.js';
+import './schema.js';
+import 'orderedmap';
+
+declare const createCommands: (schema: Schema, view: EditorView, options?: {
+    attachFile?: AttachFile;
+}) => {
+    isBlockTypeActive: (node: NodeType, attrs?: Attrs | null, excludes?: NodeType[]) => false | undefined;
+    setBlockType: (node: string, attrs?: Attrs | null) => void;
+    toggleBlockType: (node: string, attrs?: Attrs | null) => void;
+    toggleMark: (mark: string, attrs?: Attrs | null, options?: {
+        removeWhenPresent?: boolean;
+        enterInlineAtoms?: boolean;
+        includeWhitespace?: boolean;
+    }) => void;
+    wrapInList: (listType: string, attrs?: Attrs | null) => void;
+    clear: () => void;
+    attachFile: (files: File[]) => void;
+};
+
+export { createCommands };

package/dist/commands.js

@@ -0,0 +1,110 @@
+"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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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/commands.tsx
+var commands_exports = {};
+__export(commands_exports, {
+  createCommands: () => createCommands
+});
+module.exports = __toCommonJS(commands_exports);
+var commands = __toESM(require("prosemirror-commands"));
+var schemaList = __toESM(require("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);
+      }
+    };
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createCommands
+});

package/dist/commands.mjs

@@ -0,0 +1,75 @@
+// 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);
+      }
+    };
+  }
+};
+export {
+  createCommands
+};

package/dist/create_text_editor.d.mts

@@ -0,0 +1,28 @@
+import { DetailedHTMLProps, InputHTMLAttributes, Ref, FC } from 'react';
+import { Transaction } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { createSchema } from './schema.mjs';
+import { Subject } from 'rxjs';
+import { createCommands } from './commands.mjs';
+import { TextEditorControllerProps, CreateTextEditorOptions } from './text_editor_controller.mjs';
+import 'orderedmap';
+import 'prosemirror-model';
+import './attach_file.mjs';
+
+type TextEditorController = {
+    schema: ReturnType<typeof createSchema>;
+    view: EditorView;
+    subject: Subject<Transaction>;
+    set value(value: string);
+    get value(): string;
+} & {
+    commands: ReturnType<typeof createCommands>;
+};
+type HTMLElementProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+type TextEditorProps = Omit<HTMLElementProps, "ref"> & {
+    ref?: Ref<TextEditorController>;
+    name?: string;
+} & TextEditorControllerProps;
+declare function createTextEditor(options?: CreateTextEditorOptions): FC<TextEditorProps>;
+
+export { type TextEditorController, type TextEditorProps, createTextEditor };

package/dist/create_text_editor.d.ts

@@ -0,0 +1,28 @@
+import { DetailedHTMLProps, InputHTMLAttributes, Ref, FC } from 'react';
+import { Transaction } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { createSchema } from './schema.js';
+import { Subject } from 'rxjs';
+import { createCommands } from './commands.js';
+import { TextEditorControllerProps, CreateTextEditorOptions } from './text_editor_controller.js';
+import 'orderedmap';
+import 'prosemirror-model';
+import './attach_file.js';
+
+type TextEditorController = {
+    schema: ReturnType<typeof createSchema>;
+    view: EditorView;
+    subject: Subject<Transaction>;
+    set value(value: string);
+    get value(): string;
+} & {
+    commands: ReturnType<typeof createCommands>;
+};
+type HTMLElementProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+type TextEditorProps = Omit<HTMLElementProps, "ref"> & {
+    ref?: Ref<TextEditorController>;
+    name?: string;
+} & TextEditorControllerProps;
+declare function createTextEditor(options?: CreateTextEditorOptions): FC<TextEditorProps>;
+
+export { type TextEditorController, type TextEditorProps, createTextEditor };