dn-react-router-toolkit 0.2.3 → 0.2.5

package/dist/text_editor/attach_media.js

@@ -0,0 +1,237 @@
+"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/text_editor/attach_media.tsx
+var attach_media_exports = {};
+__export(attach_media_exports, {
+  createAttachMedia: () => createAttachMedia
+});
+module.exports = __toCommonJS(attach_media_exports);
+
+// src/text_editor/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/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;
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createAttachMedia
+});

package/dist/text_editor/attach_media.mjs

@@ -0,0 +1,210 @@
+// src/text_editor/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/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;
+  };
+}
+export {
+  createAttachMedia
+};

package/dist/text_editor/plugins/drag_and_drop.d.mts

@@ -0,0 +1,13 @@
+import { Plugin } from 'prosemirror-state';
+import { createAttachMedia } from '../attach_media.mjs';
+import 'prosemirror-view';
+import 'prosemirror-model';
+import '../../file/client/file_uploader.mjs';
+import '../schema.mjs';
+import 'orderedmap';
+
+declare function dragAndDropPlugin({ attachMedia, }: {
+    attachMedia: ReturnType<typeof createAttachMedia>;
+}): Plugin<any>;
+
+export { dragAndDropPlugin };

package/dist/text_editor/plugins/drag_and_drop.d.ts

@@ -0,0 +1,13 @@
+import { Plugin } from 'prosemirror-state';
+import { createAttachMedia } from '../attach_media.js';
+import 'prosemirror-view';
+import 'prosemirror-model';
+import '../../file/client/file_uploader.js';
+import '../schema.js';
+import 'orderedmap';
+
+declare function dragAndDropPlugin({ attachMedia, }: {
+    attachMedia: ReturnType<typeof createAttachMedia>;
+}): Plugin<any>;
+
+export { dragAndDropPlugin };

package/dist/text_editor/plugins/drag_and_drop.js

@@ -0,0 +1,59 @@
+"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/text_editor/plugins/drag_and_drop.tsx
+var drag_and_drop_exports = {};
+__export(drag_and_drop_exports, {
+  dragAndDropPlugin: () => dragAndDropPlugin
+});
+module.exports = __toCommonJS(drag_and_drop_exports);
+var import_prosemirror_state = require("prosemirror-state");
+function dragAndDropPlugin({
+  attachMedia
+}) {
+  return new import_prosemirror_state.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;
+        }
+      }
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  dragAndDropPlugin
+});

package/dist/text_editor/plugins/drag_and_drop.mjs

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

package/dist/text_editor/plugins/keymap.d.mts

@@ -0,0 +1,5 @@
+import { Command } from 'prosemirror-state';
+
+declare function buildKeymap(): Record<string, Command>;
+
+export { buildKeymap };

package/dist/text_editor/plugins/keymap.d.ts

@@ -0,0 +1,5 @@
+import { Command } from 'prosemirror-state';
+
+declare function buildKeymap(): Record<string, Command>;
+
+export { buildKeymap };

package/dist/text_editor/plugins/keymap.js

@@ -0,0 +1,40 @@
+"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/text_editor/plugins/keymap.tsx
+var keymap_exports = {};
+__export(keymap_exports, {
+  buildKeymap: () => buildKeymap
+});
+module.exports = __toCommonJS(keymap_exports);
+var import_prosemirror_history = require("prosemirror-history");
+function buildKeymap() {
+  const keys = {};
+  function bind(key, cmd) {
+    keys[key] = cmd;
+  }
+  bind("Mod-z", import_prosemirror_history.undo);
+  bind("Shift-Mod-z", import_prosemirror_history.redo);
+  bind("Mod-y", import_prosemirror_history.redo);
+  return keys;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  buildKeymap
+});

package/dist/text_editor/plugins/keymap.mjs

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

package/dist/text_editor/plugins/placehoder.d.mts

@@ -0,0 +1,5 @@
+import { Plugin } from 'prosemirror-state';
+
+declare function placeholderPlugin(text: string): Plugin<any>;
+
+export { placeholderPlugin };

package/dist/text_editor/plugins/placehoder.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from 'prosemirror-state';
+
+declare function placeholderPlugin(text: string): Plugin<any>;
+
+export { placeholderPlugin };