dn-react-router-toolkit 0.2.4 → 0.2.5

package/dist/text_editor/text_editor.mjs

@@ -0,0 +1,802 @@
+// src/text_editor/text_editor.tsx
+import React2 from "react";
+import { EditorState as EditorState2 } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { baseKeymap, setBlockType, toggleMark } from "prosemirror-commands";
+import { keymap } from "prosemirror-keymap";
+
+// src/text_editor/plugins/drag_and_drop.tsx
+import { Plugin } from "prosemirror-state";
+function dragAndDropPlugin({
+  attachMedia
+}) {
+  return new Plugin({
+    props: {
+      handleDOMEvents: {
+        drop(view, event) {
+          const files = event.dataTransfer?.files;
+          if (!files || files.length === 0) {
+            return;
+          }
+          event.preventDefault();
+          const pos = view.state.selection.$from.pos || view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY
+          })?.pos || null;
+          if (pos === null) {
+            return;
+          }
+          const medias = Array.from(files).filter(
+            (file) => file.type.startsWith("image/") || file.type.startsWith("video/")
+          );
+          attachMedia(view, medias);
+          return true;
+        }
+      }
+    }
+  });
+}
+
+// src/text_editor/plugins/upload_placeholder.tsx
+import { Plugin as Plugin2 } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+var uploadPlaceholderPlugin = new Plugin2({
+  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/file/client/metadata.ts
+function generateMetadata(blob, {
+  uploadBlob
+} = {}) {
+  return new Promise((resolve) => {
+    if (blob.type.startsWith("image/")) {
+      const img = new Image();
+      img.src = URL.createObjectURL(blob);
+      img.onload = () => {
+        resolve({
+          width: img.width,
+          height: img.height
+        });
+      };
+      img.onerror = () => resolve({});
+      return;
+    }
+    if (blob.type.startsWith("video/")) {
+      const video = document.createElement("video");
+      video.onloadeddata = () => {
+        const canvas = document.createElement("canvas");
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const context = canvas.getContext("2d");
+        if (!context || !uploadBlob) {
+          return resolve({
+            width: video.videoWidth,
+            height: video.videoHeight
+          });
+        }
+        video.addEventListener("seeked", () => {
+          context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+          canvas.toBlob((blob2) => {
+            if (!blob2) {
+              return resolve({
+                width: video.videoWidth,
+                height: video.videoHeight
+              });
+            }
+            uploadBlob(blob2, "poster").then(({ url }) => {
+              resolve({
+                width: video.videoWidth,
+                height: video.videoHeight,
+                poster: url
+              });
+            });
+          }, "image/jpeg");
+        });
+        video.currentTime = 0;
+      };
+      video.onerror = () => resolve({});
+      video.src = URL.createObjectURL(blob);
+      return;
+    }
+    resolve({});
+  });
+}
+
+// src/file/cdn.ts
+var createCDN = (origin) => {
+  return (key, { width } = {}) => {
+    return key ? `${origin}/${key}${width ? `?w=${width}` : ""}` : void 0;
+  };
+};
+
+// src/text_editor/attach_media.tsx
+function createAttachMedia({
+  schema,
+  cdnOrigin,
+  fileUploader
+}) {
+  const cdn = createCDN(cdnOrigin);
+  const attachEachMedia = async (view, file, pos) => {
+    const metadata = await generateMetadata(file, {
+      uploadBlob: (blob, type) => fileUploader.uploadBlob(blob, type).then(({ key }) => ({
+        url: cdn(key)
+      }))
+    });
+    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 { name, key } = await fileUploader.uploadFile(file);
+      const src = cdn(key);
+      const tr2 = view.state.tr.setMeta(uploadPlaceholderPlugin, {
+        remove: { id }
+      });
+      const media = (() => {
+        if (file.type.startsWith("image/")) {
+          return schema.nodes.image.create({
+            src,
+            alt: name,
+            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
+          });
+        }
+      })();
+      if (!media) {
+        return;
+      }
+      view.dispatch(tr2.replaceWith($pos, $pos, media));
+      return media;
+    } catch (e) {
+      view.dispatch(tr.setMeta(uploadPlaceholderPlugin, { remove: { id } }));
+    }
+  };
+  return async (view, medias, pos) => {
+    const result = [];
+    for (let i = 0; i < medias.length; i++) {
+      const file = medias[i];
+      const item = await attachEachMedia(view, file, pos);
+      if (item) {
+        result.push(item);
+      }
+    }
+    return result;
+  };
+}
+
+// src/text_editor/plugins/placehoder.tsx
+import { Plugin as Plugin3 } from "prosemirror-state";
+var getFirstChildDescendants = (view) => {
+  const nodes = [];
+  view.state.doc?.descendants((n) => {
+    nodes.push(n);
+  });
+  return nodes;
+};
+function placeholderPlugin(text) {
+  const update = (view) => {
+    const decos = uploadPlaceholderPlugin.getState(view.state);
+    if (decos && decos.find().length > 0 || view.state.doc.content.content.some((e) => e.type.name !== "paragraph") || view.state.doc.childCount > 1 || getFirstChildDescendants(view).length > 1 || view.state.doc.textContent) {
+      view.dom.removeAttribute("data-placeholder");
+    } else {
+      view.dom.setAttribute("data-placeholder", text);
+    }
+  };
+  return new Plugin3({
+    view(view) {
+      update(view);
+      return { update };
+    }
+  });
+}
+
+// src/text_editor/text_editor.tsx
+import {
+  DOMSerializer,
+  DOMParser
+} from "prosemirror-model";
+import { history } from "prosemirror-history";
+
+// src/text_editor/plugins/keymap.tsx
+import { undo, redo } from "prosemirror-history";
+function buildKeymap() {
+  const keys = {};
+  function bind(key, cmd) {
+    keys[key] = cmd;
+  }
+  bind("Mod-z", undo);
+  bind("Shift-Mod-z", redo);
+  bind("Mod-y", redo);
+  return keys;
+}
+
+// src/text_editor/schema.tsx
+import { Schema } from "prosemirror-model";
+import { addListNodes } from "prosemirror-schema-list";
+
+// src/file/responsive_image.tsx
+import React from "react";
+var sizes = [
+  64,
+  128,
+  256,
+  320,
+  480,
+  640,
+  768,
+  1080,
+  1200,
+  1536,
+  1920,
+  2560,
+  3840
+];
+var generateSrc = (cdnOrigin, src, width, height, ratio, image = {}) => {
+  const searchParams = new URLSearchParams();
+  if (image.width) {
+    searchParams.set("w", image.width.toString());
+  }
+  if (width) {
+    searchParams.set("w", width.toString());
+    if (ratio) {
+      searchParams.set("h", Math.round(width / ratio).toString());
+    }
+  }
+  if (image.height) {
+    searchParams.set("h", image.height.toString());
+  }
+  if (height) {
+    searchParams.set("h", height.toString());
+  }
+  const search = searchParams.toString() ? `?${searchParams.toString()}` : "";
+  if (!src.includes(cdnOrigin)) {
+    return src;
+  }
+  return `${encodeURI(decodeURI(src))}${search}`;
+};
+function generateSrcSet(cdnOrigin, image, ratio, props = {}) {
+  const src = typeof image === "string" ? image : image.src;
+  const isGif = src.endsWith(".gif");
+  if (isGif) {
+    return void 0;
+  }
+  if (props.width) {
+    return [1, 2, 3].map((scale) => {
+      const genWidth = Number(props.width) * scale;
+      return `${generateSrc(
+        cdnOrigin,
+        src,
+        genWidth,
+        props.height ? Number(props.height) * scale : ratio ? Math.round(genWidth / ratio) : void 0
+      )} ${scale}x`;
+    }).join(", ");
+  }
+  return sizes.map(
+    (size) => `${generateSrc(cdnOrigin, src, size, void 0, ratio, props)} ${size}w`
+  ).join(", ");
+}
+
+// src/text_editor/schema.tsx
+function createSchema({ cdnOrigin }) {
+  const customSchema = new Schema({
+    nodes: {
+      doc: { content: "block+" },
+      paragraph: {
+        attrs: { align: { default: null } },
+        content: "inline*",
+        group: "block",
+        parseDOM: [
+          {
+            tag: "p",
+            getAttrs(dom) {
+              return {
+                align: dom.style.textAlign || null
+              };
+            }
+          }
+        ],
+        toDOM(node) {
+          return [
+            "p",
+            {
+              style: node.attrs.align ? `text-align: ${node.attrs.align}` : null
+            },
+            0
+          ];
+        }
+      },
+      text: {
+        group: "inline"
+      },
+      hard_break: {
+        inline: true,
+        group: "inline",
+        selectable: false,
+        parseDOM: [{ tag: "br" }],
+        toDOM() {
+          return ["br"];
+        }
+      },
+      heading: {
+        attrs: { level: { default: 1 }, align: { default: null } },
+        content: "inline*",
+        group: "block",
+        defining: true,
+        parseDOM: [
+          {
+            tag: "h1",
+            getAttrs(node) {
+              return {
+                level: 1,
+                algin: node.style.textAlign || null
+              };
+            }
+          },
+          {
+            tag: "h2",
+            getAttrs(node) {
+              return {
+                level: 2,
+                algin: node.style.textAlign || null
+              };
+            }
+          },
+          {
+            tag: "h3",
+            getAttrs(node) {
+              return {
+                level: 3,
+                algin: node.style.textAlign || null
+              };
+            }
+          },
+          {
+            tag: "h4",
+            getAttrs(node) {
+              return {
+                level: 4,
+                algin: node.style.textAlign || null
+              };
+            }
+          },
+          {
+            tag: "h5",
+            getAttrs(node) {
+              return {
+                level: 5,
+                algin: node.style.textAlign || null
+              };
+            }
+          },
+          {
+            tag: "h6",
+            getAttrs(node) {
+              return {
+                level: 6,
+                algin: node.style.textAlign || null
+              };
+            }
+          }
+        ],
+        toDOM(node) {
+          return [
+            "h" + node.attrs.level,
+            {
+              id: node.textContent.toLowerCase().replace(/\s+/g, "-"),
+              style: node.attrs.align ? `text-align: ${node.attrs.align};` : null
+            },
+            0
+          ];
+        }
+      },
+      horizontal_rule: {
+        group: "block",
+        parseDOM: [{ tag: "hr" }],
+        toDOM() {
+          return ["hr"];
+        }
+      },
+      image: {
+        attrs: {
+          src: { validate: "string" },
+          alt: { default: null, validate: "string|null" },
+          title: {
+            default: null,
+            validate: "string|null"
+          },
+          width: {
+            default: null,
+            validate: "number|null"
+          },
+          height: {
+            default: null,
+            validate: "number|null"
+          }
+        },
+        inline: true,
+        group: "inline",
+        draggable: true,
+        parseDOM: [
+          {
+            tag: "img",
+            getAttrs(dom) {
+              return {
+                src: dom.getAttribute("src"),
+                title: dom.getAttribute("title"),
+                alt: dom.getAttribute("alt"),
+                width: dom.getAttribute("width"),
+                height: dom.getAttribute("height")
+              };
+            }
+          }
+        ],
+        toDOM(node) {
+          const { src, alt, title, width, height } = node.attrs;
+          return [
+            "img",
+            {
+              src,
+              alt,
+              title,
+              width,
+              height,
+              srcSet: cdnOrigin ? generateSrcSet(cdnOrigin, src) : void 0,
+              sizes: cdnOrigin ? "(max-width: 768px) 100vw, 768px" : void 0
+            }
+          ];
+        }
+      }
+    },
+    marks: {
+      link: {
+        attrs: {
+          href: { default: "" },
+          title: { default: null }
+        },
+        inclusive: false,
+        parseDOM: [
+          {
+            tag: "a[href]",
+            getAttrs(dom) {
+              return {
+                href: dom.getAttribute("href"),
+                title: dom.getAttribute("title")
+              };
+            }
+          }
+        ],
+        toDOM(node) {
+          const { href, title } = node.attrs;
+          const target = "_blank";
+          const rel = "noopener noreferrer";
+          return ["a", { href, title: title || href, target, rel }, 0];
+        }
+      },
+      bold: {
+        parseDOM: [
+          { tag: "strong" },
+          {
+            tag: "b",
+            getAttrs: (node) => node.style.fontWeight != "normal" && null
+          },
+          {
+            style: "font-weight=400",
+            clearMark: (m) => m.type.name == "strong"
+          },
+          {
+            style: "font-weight",
+            getAttrs: (value) => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null
+          }
+        ],
+        toDOM() {
+          return ["strong", 0];
+        }
+      },
+      italic: {
+        parseDOM: [
+          { tag: "em" },
+          { tag: "i" },
+          { style: "font-style=italic" },
+          {
+            style: "font-style=normal",
+            clearMark: (m) => m.type.name == "em"
+          }
+        ],
+        toDOM() {
+          return ["em", 0];
+        }
+      },
+      underline: {
+        parseDOM: [
+          { tag: "u" },
+          {
+            style: "text-decoration",
+            getAttrs: (value) => value === "underline" && null
+          }
+        ],
+        toDOM() {
+          return ["u", 0];
+        }
+      }
+    }
+  });
+  const prosemirrorSchema = new Schema({
+    nodes: addListNodes(customSchema.spec.nodes, "paragraph block*", "block"),
+    marks: customSchema.spec.marks
+  });
+  return prosemirrorSchema;
+}
+
+// src/cn.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ").trim();
+}
+
+// src/text_editor/text_editor.tsx
+function createTextEditor({
+  fileUploader,
+  cdnOrigin
+} = {}) {
+  const schema = createSchema({ cdnOrigin });
+  const prosemirrorParser = DOMParser.fromSchema(schema);
+  const prosemirrorSerializer = DOMSerializer.fromSchema(schema);
+  const attachMediaComponent = cdnOrigin && fileUploader ? createAttachMedia({
+    schema,
+    cdnOrigin,
+    fileUploader
+  }) : null;
+  function useTextEditor() {
+    const view = useRef(null);
+    const observers = useMemo(() => [], []);
+    const Component = useCallback(
+      function Component2({
+        name,
+        placeholder,
+        className,
+        defaultValue,
+        onClick,
+        onHTMLChanged,
+        editor,
+        state,
+        ...props
+      }) {
+        const ref = useRef(null);
+        useEffect(() => {
+          const container = ref.current;
+          if (!container) {
+            return;
+          }
+          const wrapper = document.createElement("div");
+          wrapper.innerHTML = defaultValue || "";
+          const editorView = new EditorView(container, {
+            ...editor,
+            attributes: (state2) => {
+              const propsAttributes = (() => {
+                if (typeof editor?.attributes === "function") {
+                  return editor.attributes(state2);
+                }
+                return editor?.attributes;
+              })();
+              return {
+                ...propsAttributes,
+                class: cn(propsAttributes?.class, "outline-none"),
+                spellcheck: propsAttributes?.spellcheck || "false"
+              };
+            },
+            state: EditorState2.create({
+              schema: state?.schema || schema,
+              doc: state?.doc || prosemirrorParser.parse(wrapper),
+              plugins: [
+                ...state?.plugins || [],
+                history(),
+                keymap(baseKeymap),
+                keymap(buildKeymap()),
+                uploadPlaceholderPlugin,
+                attachMediaComponent ? dragAndDropPlugin({ attachMedia: attachMediaComponent }) : null,
+                placeholder && placeholderPlugin(placeholder)
+              ].filter((e) => !!e)
+            }),
+            dispatchTransaction(tr) {
+              let result;
+              if (editor?.dispatchTransaction) {
+                result = editor.dispatchTransaction(tr);
+              } else {
+                editorView.updateState(editorView.state.apply(tr));
+              }
+              observers.forEach((observer) => {
+                observer(editorView);
+              });
+              if (tr.docChanged) {
+                const html = serialize();
+                onHTMLChanged?.(html);
+                if (inputRef.current) {
+                  inputRef.current.value = html;
+                }
+              }
+              return result;
+            }
+          });
+          view.current = editorView;
+          return () => {
+            view.current = null;
+            editorView.destroy();
+            container.innerHTML = "";
+          };
+        }, [editor, state, defaultValue, placeholder, onHTMLChanged]);
+        const inputRef = useRef(null);
+        return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+          "div",
+          {
+            ref,
+            className: cn("cursor-text", className),
+            onClick: (e) => {
+              e.stopPropagation();
+              view?.current?.focus();
+              onClick?.(e);
+            },
+            ...props
+          }
+        ), name && /* @__PURE__ */ React2.createElement("input", { ref: inputRef, type: "hidden", name }));
+      },
+      [observers]
+    );
+    const commands = {
+      async attachMedia(files) {
+        if (view.current && attachMediaComponent) {
+          return attachMediaComponent(view.current, files);
+        }
+      },
+      toggleMark(type, attrs, options) {
+        const markType = schema.marks[type];
+        if (view.current && markType) {
+          const command = toggleMark(markType, attrs, options);
+          command(view.current.state, view.current.dispatch);
+        }
+      },
+      setBlockType(type, attrs) {
+        const blockType = schema.nodes[type];
+        if (view.current && blockType) {
+          const command = setBlockType(blockType, attrs);
+          command(view.current.state, view.current.dispatch);
+        }
+      },
+      insertNode(type, attrs, content, marks) {
+        const nodeType = schema.nodes[type];
+        if (view.current && nodeType) {
+          const node = nodeType.create(attrs, content, marks);
+          view.current.dispatch(
+            view.current.state.tr.replaceSelectionWith(node)
+          );
+        }
+      },
+      setHTML(html) {
+        if (!view.current) {
+          return;
+        }
+        const wrap = document.createElement("div");
+        wrap.innerHTML = html;
+        const doc = prosemirrorParser.parse(wrap);
+        const tr = view.current.state.tr.replaceWith(
+          0,
+          view.current.state.doc.content.size,
+          doc.content
+        );
+        view.current.dispatch(tr);
+      }
+    };
+    const serialize = () => {
+      if (!view.current) {
+        return "";
+      }
+      const fragment = prosemirrorSerializer.serializeFragment(
+        view.current.state.doc.content
+      );
+      const container = document.createElement("div");
+      container.appendChild(fragment);
+      return container.innerHTML;
+    };
+    const getTextContent = () => {
+      if (!view.current) {
+        return "";
+      }
+      return view.current.state.doc.textContent;
+    };
+    return {
+      schema,
+      view,
+      commands,
+      Component,
+      serialize,
+      getTextContent
+    };
+  }
+  return {
+    schema,
+    useTextEditor
+  };
+}
+export {
+  createTextEditor as default
+};