dn-react-router-toolkit 0.2.7 → 0.3.2

package/dist/text_editor/text_editor.mjs

@@ -1,806 +0,0 @@
-// 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({
-        autofocus,
-        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;
-          if (autofocus) {
-            editorView.focus();
-          }
-          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
-};