dn-react-text-editor 0.1.0

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright (c) 2025 Dndnsoft.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,222 @@
+# React Store Input
+
+The goal of this package is to make state management easier when using input elements in React.
+
+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.
+
+```tsx
+function Component() {
+    ...
+
+    const updateEmail = () => {
+        store.dispatch((state) => {
+            state.email = "ohjinsu98@icloud.com";
+        });
+    };
+
+    return <button onClick={updateEmail}>Update Email</button>;
+}
+```

package/dist/attach_file.d.mts

@@ -0,0 +1,28 @@
+import { EditorView } from 'prosemirror-view';
+import { createSchema } from './schema.mjs';
+import 'orderedmap';
+import 'prosemirror-model';
+
+type AttachFile = (view: EditorView, files: File[]) => Promise<void>;
+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;
+    };
+};
+declare function createAttachFile({ schema, generateMetadata, uploadFile, }: AttachFileOptions): AttachFile;
+
+export { type AttachFile, createAttachFile };

package/dist/attach_file.d.ts

@@ -0,0 +1,28 @@
+import { EditorView } from 'prosemirror-view';
+import { createSchema } from './schema.js';
+import 'orderedmap';
+import 'prosemirror-model';
+
+type AttachFile = (view: EditorView, files: File[]) => Promise<void>;
+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;
+    };
+};
+declare function createAttachFile({ schema, generateMetadata, uploadFile, }: AttachFileOptions): AttachFile;
+
+export { type AttachFile, createAttachFile };

package/dist/attach_file.js

@@ -0,0 +1,169 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/attach_file.tsx
+var attach_file_exports = {};
+__export(attach_file_exports, {
+  createAttachFile: () => createAttachFile
+});
+module.exports = __toCommonJS(attach_file_exports);
+var import_prosemirror_view2 = require("prosemirror-view");
+
+// src/plugins/upload_placeholder.tsx
+var import_prosemirror_state = require("prosemirror-state");
+var import_prosemirror_view = require("prosemirror-view");
+var uploadPlaceholderPlugin = new import_prosemirror_state.Plugin({
+  state: {
+    init() {
+      return import_prosemirror_view.DecorationSet.empty;
+    },
+    apply(tr, set) {
+      set = set.map(tr.mapping, tr.doc);
+      const action = tr.getMeta(this);
+      if (action && action.add) {
+        const { type, width, height } = action.add;
+        const widget = document.createElement("div");
+        widget.className = "upload-placeholder";
+        widget.style.width = `100%`;
+        if (type.startsWith("image/") || type.startsWith("video/")) {
+          widget.style.aspectRatio = `${width} / ${height}`;
+          widget.style.maxWidth = `${width}px`;
+        } else {
+          widget.style.height = "80px";
+        }
+        const progress = document.createElement("div");
+        progress.className = "upload-progress";
+        widget.appendChild(progress);
+        const deco = import_prosemirror_view.Decoration.widget(action.add.pos, widget, {
+          id: action.add.id
+        });
+        set = set.add(tr.doc, [deco]);
+      } else if (action && action.progress) {
+        const found = set.find(
+          void 0,
+          void 0,
+          (spec) => spec.id === action.progress.id
+        );
+        if (found.length) {
+          const widget = found[0].type.toDOM;
+          const progress = widget.querySelector(".upload-progress");
+          if (progress) {
+            progress.innerHTML = `${Math.round(action.progress.progress)}%`;
+          }
+        }
+      } else if (action && action.remove) {
+        set = set.remove(
+          set.find(void 0, void 0, (spec) => spec.id === action.remove.id)
+        );
+      }
+      return set;
+    }
+  },
+  props: {
+    decorations(state) {
+      return this.getState(state);
+    }
+  }
+});
+var findPlaceholder = (state, id) => {
+  const decos = uploadPlaceholderPlugin.getState(state);
+  if (!decos) {
+    return null;
+  }
+  const found = decos.find(void 0, void 0, (spec) => spec.id === id);
+  return found.length ? found[0].from : null;
+};
+
+// src/attach_file.tsx
+function createAttachFile({
+  schema,
+  generateMetadata,
+  uploadFile = (file) => {
+    return {
+      src: URL.createObjectURL(file),
+      alt: file.name
+    };
+  }
+}) {
+  const attachEachFile = async (view, file, pos) => {
+    const metadata = generateMetadata ? await generateMetadata(file) : {};
+    const id = {};
+    view.focus();
+    const tr = view.state.tr;
+    if (!tr.selection.empty) {
+      tr.deleteSelection();
+    }
+    tr.setMeta(uploadPlaceholderPlugin, {
+      add: {
+        id,
+        pos: pos ?? tr.selection.from,
+        type: file.type,
+        ...metadata
+      }
+    });
+    view.dispatch(tr);
+    const $pos = findPlaceholder(view.state, id);
+    if (!$pos) {
+      return;
+    }
+    try {
+      const { src, alt } = await uploadFile(file);
+      const tr2 = view.state.tr.setMeta(uploadPlaceholderPlugin, {
+        remove: { id }
+      });
+      const createNode = () => {
+        if (file.type.startsWith("image/")) {
+          return schema.nodes.image.create({
+            src,
+            alt,
+            width: metadata.width,
+            height: metadata.height
+          });
+        }
+        if (file.type.startsWith("video/")) {
+          return schema.nodes.video.create({
+            src,
+            width: metadata.width,
+            height: metadata.height,
+            poster: metadata.poster
+          });
+        }
+      };
+      const node = createNode();
+      if (!node) {
+        return;
+      }
+      view.dispatch(tr2.replaceWith($pos, $pos, node));
+    } catch (e) {
+      view.dispatch(
+        tr.setMeta(uploadPlaceholderPlugin, { remove: { id } })
+      );
+    }
+  };
+  return async (view, files, pos) => {
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      await attachEachFile(view, file, pos);
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createAttachFile
+});

package/dist/attach_file.mjs

@@ -0,0 +1,144 @@
+// src/attach_file.tsx
+import "prosemirror-view";
+
+// src/plugins/upload_placeholder.tsx
+import { Plugin } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+var uploadPlaceholderPlugin = new Plugin({
+  state: {
+    init() {
+      return DecorationSet.empty;
+    },
+    apply(tr, set) {
+      set = set.map(tr.mapping, tr.doc);
+      const action = tr.getMeta(this);
+      if (action && action.add) {
+        const { type, width, height } = action.add;
+        const widget = document.createElement("div");
+        widget.className = "upload-placeholder";
+        widget.style.width = `100%`;
+        if (type.startsWith("image/") || type.startsWith("video/")) {
+          widget.style.aspectRatio = `${width} / ${height}`;
+          widget.style.maxWidth = `${width}px`;
+        } else {
+          widget.style.height = "80px";
+        }
+        const progress = document.createElement("div");
+        progress.className = "upload-progress";
+        widget.appendChild(progress);
+        const deco = Decoration.widget(action.add.pos, widget, {
+          id: action.add.id
+        });
+        set = set.add(tr.doc, [deco]);
+      } else if (action && action.progress) {
+        const found = set.find(
+          void 0,
+          void 0,
+          (spec) => spec.id === action.progress.id
+        );
+        if (found.length) {
+          const widget = found[0].type.toDOM;
+          const progress = widget.querySelector(".upload-progress");
+          if (progress) {
+            progress.innerHTML = `${Math.round(action.progress.progress)}%`;
+          }
+        }
+      } else if (action && action.remove) {
+        set = set.remove(
+          set.find(void 0, void 0, (spec) => spec.id === action.remove.id)
+        );
+      }
+      return set;
+    }
+  },
+  props: {
+    decorations(state) {
+      return this.getState(state);
+    }
+  }
+});
+var findPlaceholder = (state, id) => {
+  const decos = uploadPlaceholderPlugin.getState(state);
+  if (!decos) {
+    return null;
+  }
+  const found = decos.find(void 0, void 0, (spec) => spec.id === id);
+  return found.length ? found[0].from : null;
+};
+
+// src/attach_file.tsx
+function createAttachFile({
+  schema,
+  generateMetadata,
+  uploadFile = (file) => {
+    return {
+      src: URL.createObjectURL(file),
+      alt: file.name
+    };
+  }
+}) {
+  const attachEachFile = async (view, file, pos) => {
+    const metadata = generateMetadata ? await generateMetadata(file) : {};
+    const id = {};
+    view.focus();
+    const tr = view.state.tr;
+    if (!tr.selection.empty) {
+      tr.deleteSelection();
+    }
+    tr.setMeta(uploadPlaceholderPlugin, {
+      add: {
+        id,
+        pos: pos ?? tr.selection.from,
+        type: file.type,
+        ...metadata
+      }
+    });
+    view.dispatch(tr);
+    const $pos = findPlaceholder(view.state, id);
+    if (!$pos) {
+      return;
+    }
+    try {
+      const { src, alt } = await uploadFile(file);
+      const tr2 = view.state.tr.setMeta(uploadPlaceholderPlugin, {
+        remove: { id }
+      });
+      const createNode = () => {
+        if (file.type.startsWith("image/")) {
+          return schema.nodes.image.create({
+            src,
+            alt,
+            width: metadata.width,
+            height: metadata.height
+          });
+        }
+        if (file.type.startsWith("video/")) {
+          return schema.nodes.video.create({
+            src,
+            width: metadata.width,
+            height: metadata.height,
+            poster: metadata.poster
+          });
+        }
+      };
+      const node = createNode();
+      if (!node) {
+        return;
+      }
+      view.dispatch(tr2.replaceWith($pos, $pos, node));
+    } catch (e) {
+      view.dispatch(
+        tr.setMeta(uploadPlaceholderPlugin, { remove: { id } })
+      );
+    }
+  };
+  return async (view, files, pos) => {
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      await attachEachFile(view, file, pos);
+    }
+  };
+}
+export {
+  createAttachFile
+};

package/dist/cn.d.mts

@@ -0,0 +1,3 @@
+declare function cn(...classes: (string | false | undefined)[]): string;
+
+export { cn };

package/dist/cn.d.ts

@@ -0,0 +1,3 @@
+declare function cn(...classes: (string | false | undefined)[]): string;
+
+export { cn };

package/dist/cn.js

@@ -0,0 +1,32 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/cn.ts
+var cn_exports = {};
+__export(cn_exports, {
+  cn: () => cn
+});
+module.exports = __toCommonJS(cn_exports);
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ").trim();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  cn
+});

package/dist/cn.mjs

@@ -0,0 +1,7 @@
+// src/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ").trim();
+}
+export {
+  cn
+};

package/dist/index.d.mts

@@ -0,0 +1,9 @@
+export { TextEditorController, TextEditorProps, createTextEditor } from './text_editor.mjs';
+export { createSchema } from './schema.mjs';
+export { AttachFile, createAttachFile } from './attach_file.mjs';
+import 'orderedmap';
+import 'prosemirror-model';
+import 'react';
+import 'prosemirror-state';
+import 'prosemirror-view';
+import 'rxjs';

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { TextEditorController, TextEditorProps, createTextEditor } from './text_editor.js';
+export { createSchema } from './schema.js';
+export { AttachFile, createAttachFile } from './attach_file.js';
+import 'orderedmap';
+import 'prosemirror-model';
+import 'react';
+import 'prosemirror-state';
+import 'prosemirror-view';
+import 'rxjs';