dn-react-text-editor 0.1.1 → 0.2.0

package/README.md

@@ -1,222 +1,22 @@
-# React Store Input
+# React Text Editor
 
-The goal of this package is to make state management easier when using input elements in React.
+A rich text editor component for React built on ProseMirror.
 
-It eliminates repetitive code required to implement state changes and subscriptions for input elements, and provides a simple interface.
-
-At the same time, it allows you to use all the attributes originally provided by the input tag as-is, without needing to learn this package.
-
-## Get Started
-
-This is a simple example of how to use this package.
-
-```tsx
-import { useFormStore } from "dn-react-input";
-
-export default function App() {
-    const store = useFormStore({
-        email: "",
-        password: "",
-    });
-
-    const submit = async () => {
-        const { email, password } = store.state;
-
-        alert(`Email: ${email}\nPassword: ${password}`);
-    };
-
-    return (
-        <form
-            onSubmit={(e) => {
-                e.preventDefault();
-                submit();
-            }}
-        >
-            <store.input name="email" type="email" />
-            <store.input name="password" type="password" />
-            <button type="submit">Submit</button>
-        </form>
-    );
-}
-```
-
-## How to define state?
-
-You can define any state you want as an object when calling `useStore`.
-
-```tsx
-function Component() {
-    ...
-
-    const store = useStore({
-        email: "",
-        password: "",
-        rememberMe: false,
-    });
-
-    ...
-}
-```
-
-It's a single source of truth for your form state.
-
-## How to get input values?
-
-You can access the current values of the input elements through the `state` property of the store.
-
-```tsx
-function Component() {
-    ...
-
-    const submit = () => {
-        const { email, password, rememberMe } = store.state;
-    };
-
-    ...
-}
-```
-
-## How to add input elements?
-
-You can add input elements using the `Input` component provided by the store. There are 'Select' and 'Textarea' components as well.
-
-```tsx
-import { Input } from "dn-react-input";
-
-function Component() {
-    ...
-
-    return (
-        <form>
-            <Input store={store} name="email" type="email" />
-            <Input store={store} name="password" type="password" />
-            <Input store={store} name="rememberMe" type="checkbox" />
-        </form>
-    );
-}
-```
-
-If you want to avoid passing the store to each input component, use `useStoreInput`. This hook provides input components that are already connected to the store.
-
-```tsx
-import { useStoreInput } from "dn-react-input";
-
-function Component() {
-    ...
-    const Input = useStoreInput(store);
-
-    return (
-        <form>
-            <Input.input name="email" type="email" />
-            <Input.input name="password" type="password" />
-            <Input.input name="rememberMe" type="checkbox" />
-        </form>
-    );
-}
-```
-
-`useFormStore` is a facade that combines `useStore` and `useStoreInput` for convenience.
-
-```tsx
-import { useFormStore } from "dn-react-input";
-
-function Component() {
-    ...
-    const store = useFormStore({
-        email: "",
-        password: "",
-        rememberMe: false,
-    });
-
-    return (
-        <form>
-            <store.input name="email" type="email" />
-            <store.input name="password" type="password" />
-            <store.input name="rememberMe" type="checkbox" />
-        </form>
-    );
-}
-```
-
-## How to render components on state changes?
-
-If you want to render a component only when specific parts of the state change, use the `useSelector` hook.
-
-```tsx
-import { useSelector } from "dn-react-input";
-
-function Component() {
-    ...
-    const email = useSelector(store, (state) => state.email);
-
-    return <div>Your email is: {email}</div>;
-}
-```
-
-If you want to render components in an inline manner, use the `createRender` function. By using this, you can avoid creating separate components for each part of the state you want to track.
-
-```tsx
-import { createRender } from "dn-react-input";
-
-function Component() {
-    ...
-    return (
-        <div>
-            {createRender(store, (state) => <p>{state.email}</p>)}
-            {createRender(store, (state) => <p>{state.password}</p>)}
-        </div>
-    );
-}
-```
-
-## How to subscribe to state changes?
-
-You can subscribe to state changes using the `subscribe` method of the store.
-
-```tsx
-function Component() {
-    ...
-    useEffect(() => {
-        const unsubscribe = store.subscribe((state) => {
-            console.log(`State changed`, state);
-        });
-
-        return () => {
-            unsubscribe();
-        };
-    }, []);
-
-    ...
-}
-```
-
-## How to update state manually?
-
-You can update the state manually using the `dispatch` method of the store.
-
-```tsx
-function Component() {
-    ...
-    const updateEmail = () => {
-        store.dispatch({ email: "ohjinsu98@icloud.com" });
-    };
-
-    return <button onClick={updateEmail}>Update Email</button>;
-}
-```
-
-The `dispatch` method uses immerjs internally to update the state, so you can also use a function to update the state based on the previous state.
+## Example
 
 ```tsx
-function Component() {
-    ...
+import { TextEditor } from "dn-react-text-editor";
 
-    const updateEmail = () => {
-        store.dispatch((state) => {
-            state.email = "ohjinsu98@icloud.com";
-        });
-    };
+const TextEditor = useTextEditor();
 
-    return <button onClick={updateEmail}>Update Email</button>;
+function App() {
+  return (
+    <TextEditor
+      placeholder="Write something..."
+      onChange={(e) => {
+        console.log(e.target.value);
+      }}
+    />
+  );
 }
 ```

package/dist/attach_file.d.mts

@@ -3,26 +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;
 };
+type AttachFile = (view: EditorView, files: File[]) => Promise<void>;
 declare function createAttachFile({ schema, generateMetadata, uploadFile, }: AttachFileOptions): AttachFile;
 
-export { type AttachFile, createAttachFile };
+export { type AttachFile, type AttachFileOptions, type GenerateMetadata, type UploadFile, createAttachFile };

package/dist/attach_file.d.ts

@@ -3,26 +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;
 };
+type AttachFile = (view: EditorView, files: File[]) => Promise<void>;
 declare function createAttachFile({ schema, generateMetadata, uploadFile, }: AttachFileOptions): AttachFile;
 
-export { type AttachFile, createAttachFile };
+export { type AttachFile, type AttachFileOptions, type GenerateMetadata, type UploadFile, createAttachFile };

package/dist/attach_file.js

@@ -90,16 +90,27 @@ var findPlaceholder = (state, id) => {
   return found.length ? found[0].from : null;
 };
 
+// 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 = (file) => {
-    return {
-      src: URL.createObjectURL(file),
-      alt: file.name
-    };
-  }
+  uploadFile = base64FileUploader
 }) {
   const attachEachFile = async (view, file, pos) => {
     const metadata = generateMetadata ? await generateMetadata(file) : {};
@@ -151,9 +162,7 @@ function createAttachFile({
       }
       view.dispatch(tr2.replaceWith($pos, $pos, node));
     } catch (e) {
-      view.dispatch(
-        tr.setMeta(uploadPlaceholderPlugin, { remove: { id } })
-      );
+      view.dispatch(tr.setMeta(uploadPlaceholderPlugin, { remove: { id } }));
     }
   };
   return async (view, files, pos) => {

package/dist/attach_file.mjs

@@ -66,16 +66,27 @@ var findPlaceholder = (state, id) => {
   return found.length ? found[0].from : null;
 };
 
+// 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 = (file) => {
-    return {
-      src: URL.createObjectURL(file),
-      alt: file.name
-    };
-  }
+  uploadFile = base64FileUploader
 }) {
   const attachEachFile = async (view, file, pos) => {
     const metadata = generateMetadata ? await generateMetadata(file) : {};
@@ -127,9 +138,7 @@ function createAttachFile({
       }
       view.dispatch(tr2.replaceWith($pos, $pos, node));
     } catch (e) {
-      view.dispatch(
-        tr.setMeta(uploadPlaceholderPlugin, { remove: { id } })
-      );
+      view.dispatch(tr.setMeta(uploadPlaceholderPlugin, { remove: { id } }));
     }
   };
   return async (view, files, pos) => {

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