@witchcraft/editor 0.0.3 → 0.0.5

package/dist/runtime/pm/features/FileLoader/FileLoader.js

@@ -1,99 +0,0 @@
-import { mergeAttributes, Node } from "@tiptap/core";
-import { insertFile } from "./commands/insertFile.js";
-import { fileLoaderPlugin } from "./plugins/fileLoaderPlugin.js";
-import { optionsCheck } from "./utils/optionsCheck.js";
-import { isValidId } from "../Blocks/utils/isValidId.js";
-export const FileLoader = Node.create({
-  name: "fileLoader",
-  content: "",
-  marks: "",
-  group: "block",
-  addOptions() {
-    return {
-      cleanupOnLoad: true,
-      onDrop: void 0,
-      onPaste: void 0,
-      // there are checks on init to throw if the user didn't configure a handler
-      handler: void 0,
-      embeddedBlockCommandRedirect: void 0,
-      HTMLAttributes: {
-        class: `
-					rounded-sm
-					animate-pulse
-					bg-accent-200
-					text-accent-800
-					dark:bg-accent-700
-					dark:text-accent-300
-					px-2
-				`
-      }
-    };
-  },
-  addAttributes() {
-    return {
-      HTMLAttributes: {
-        default: {}
-      },
-      /** For the optional FileLoaderNodeView. */
-      preview: {
-        default: void 0
-      },
-      fileName: {
-        default: void 0
-      },
-      loading: {
-        default: true
-      },
-      loadingId: {
-        default: void 0
-      }
-    };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: `div[type=${this.name}]`,
-        getAttrs: (dom) => {
-          const fileName = dom.getAttribute("file-name");
-          const loading = dom.getAttribute("file-loading");
-          const loadingId = dom.getAttribute("file-loading-id");
-          return {
-            fileName,
-            loadingId: isValidId(loadingId, 10) ? loadingId : void 0,
-            loading: loading === "true"
-          };
-        }
-      }
-    ];
-  },
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  renderHTML({ node, HTMLAttributes }) {
-    return [
-      "div",
-      mergeAttributes(
-        this.options.HTMLAttributes,
-        HTMLAttributes,
-        {
-          "file-loading-id": node.attrs.loadingId,
-          "file-name": node.attrs.fileName,
-          "file-loading": node.attrs.loading,
-          type: this.name
-        }
-      ),
-      `Loading "${node.attrs.fileName ?? "Unknown"}" ...`
-    ];
-  },
-  addCommands() {
-    optionsCheck(this.editor, this.options);
-    const self = this;
-    return {
-      insertFile: insertFile(self.options.handler)
-    };
-  },
-  addProseMirrorPlugins() {
-    const self = this;
-    return [
-      fileLoaderPlugin(self.editor, self.options)
-    ];
-  }
-});

package/dist/runtime/pm/features/FileLoader/FileLoaderHandler/FileLoaderHandler.d.ts

@@ -1,28 +0,0 @@
-import type { MakeOptional } from "@alanscodelog/utils/types";
-import type { Editor } from "@tiptap/core";
-import type { IFileLoaderHandler } from "../types.js.js";
-/**
- * A partial implementation of {@link IFileLoaderHandler}.
- *
- * Using the defaults of this class, you only need to specify the handler's `loadFile` and `replaceLoadingNode` properties.
- *
- * It assumes the use of the {@link Item} extension since it uses the node to wrap the fileLoader node.
- *
- * To identify each fileLoader node and fetch it again once the file is loaded, it uses a 10 character nanoid.
- */
-export declare class FileLoaderHandler<TFile extends File, T = {
-    file: TFile;
-    result: string | ArrayBuffer | null;
-}, TKey = string> implements IFileLoaderHandler<TFile, T, TKey> {
-    loadFile: IFileLoaderHandler<TFile, T, TKey>["loadFile"];
-    onLoadError: IFileLoaderHandler<TFile, T, TKey>["onLoadError"];
-    insertPosition: IFileLoaderHandler<TFile, T, TKey>["insertPosition"];
-    insertLoadingNode: IFileLoaderHandler<TFile, T, TKey>["insertLoadingNode"];
-    replaceLoadingNode: IFileLoaderHandler<TFile, T, TKey>["replaceLoadingNode"];
-    filterFile: IFileLoaderHandler<TFile, T, TKey>["filterFile"];
-    constructor(opts: MakeOptional<IFileLoaderHandler<TFile, T, TKey>, "onLoadError" | "insertPosition" | "insertLoadingNode">);
-    defaultFilterFile(file: File): TFile | undefined;
-    defaultInsertPosition(_file: TFile, editor: Editor, pos?: number): number | undefined;
-    defaultOnLoadError(_file: TFile, editor: Editor, pos: number | undefined): void;
-    defaultInsertLoadingNode(file: TFile, editor: Editor, insertPos: number): TKey;
-}

package/dist/runtime/pm/features/FileLoader/FileLoaderHandler/FileLoaderHandler.js

@@ -1,69 +0,0 @@
-import { unreachable } from "@alanscodelog/utils/unreachable";
-import { nanoid } from "nanoid";
-import { findUpwards } from "../../../utils/findUpwards.js";
-import { cleanupFileLoaderNode } from "../utils/cleanupFileLoaderNode.js";
-export class FileLoaderHandler {
-  loadFile;
-  onLoadError;
-  insertPosition;
-  insertLoadingNode;
-  replaceLoadingNode;
-  filterFile;
-  constructor(opts) {
-    this.loadFile = opts.loadFile;
-    this.replaceLoadingNode = opts.replaceLoadingNode;
-    if (opts.onLoadError) this.onLoadError = opts.onLoadError;
-    else this.onLoadError = this.defaultOnLoadError;
-    if (opts.insertPosition) this.insertPosition = opts.insertPosition;
-    else this.insertPosition = this.defaultInsertPosition;
-    if (opts.insertLoadingNode) this.insertLoadingNode = opts.insertLoadingNode;
-    else this.insertLoadingNode = this.defaultInsertLoadingNode;
-    if (opts.filterFile) this.filterFile = opts.filterFile;
-    else this.filterFile = this.defaultFilterFile;
-  }
-  defaultFilterFile(file) {
-    return file;
-  }
-  defaultInsertPosition(_file, editor, pos) {
-    const position = pos ?? editor.state.selection.anchor;
-    const $insertionNode = findUpwards(editor.state.doc, position, ($node) => {
-      if ($node.node().type.name === "item") {
-        return true;
-      }
-      return false;
-    }).$pos;
-    return $insertionNode ? $insertionNode.end() + 1 : void 0;
-  }
-  defaultOnLoadError(_file, editor, pos) {
-    if (pos === void 0) unreachable();
-    editor.commands.command(({ tr }) => {
-      cleanupFileLoaderNode(
-        tr,
-        pos,
-        editor.schema.nodes.fileLoader,
-        [
-          editor.state.schema.nodes.item,
-          editor.state.schema.nodes.list
-        ],
-        editor.schema.nodes.paragraph
-      );
-      return true;
-    });
-  }
-  defaultInsertLoadingNode(file, editor, insertPos) {
-    const attrs = {
-      loadingId: nanoid(10),
-      fileName: file.name,
-      loading: true
-    };
-    editor.commands.command(({ tr }) => {
-      const pm = editor.schema.nodes;
-      tr.insert(insertPos, pm.item.create(
-        {},
-        pm.fileLoader.create(attrs)
-      ));
-      return true;
-    });
-    return attrs.loadingId;
-  }
-}

package/dist/runtime/pm/features/FileLoader/FileLoaderHandler/TestFileLoaderHandler.d.ts

@@ -1,11 +0,0 @@
-import { FileLoaderHandler } from "./FileLoaderHandler.js.js";
-export declare const testFileLoaderDelay = 2000;
-/** Instance of {@link FileLoaderHandler} for testing. */
-export declare const TestFileLoaderHandler: FileLoaderHandler<File & {
-    parsedMime: string;
-}, {
-    file: File & {
-        parsedMime: string;
-    };
-    result: string | ArrayBuffer | null;
-}, string>;

package/dist/runtime/pm/features/FileLoader/FileLoaderHandler/TestFileLoaderHandler.js

@@ -1,49 +0,0 @@
-import { delay } from "@alanscodelog/utils/delay";
-import mime from "mime/lite";
-import { FileLoaderHandler } from "./FileLoaderHandler.js";
-import { findLoadingNodePos } from "../utils/findLoadingNodePos.js";
-import { readAsDataUrl } from "../utils/readAsDataUrl.js";
-export const testFileLoaderDelay = 2e3;
-export const TestFileLoaderHandler = new FileLoaderHandler({
-  filterFile: (file) => {
-    const mimeExtension = mime.getExtension(file.type);
-    if (!mimeExtension) return void 0;
-    const normalizedMimeType = mime.getType(mimeExtension);
-    file.parsedMime = normalizedMimeType;
-    if (!normalizedMimeType?.startsWith("image")) return void 0;
-    return file;
-  },
-  replaceLoadingNode(editor, pos, res) {
-    const pm = editor.schema.nodes;
-    const parsedMime = res.file.parsedMime;
-    const returnVal = editor.commands.command(({ tr }) => {
-      if (parsedMime.startsWith("image")) {
-        tr.replaceWith(pos, pos + 1, pm.image.create({
-          src: res.result
-        }));
-        return true;
-      }
-      tr.delete(pos, pos + 1);
-      return false;
-    });
-    return returnVal;
-  },
-  loadFile: async (file, insertId, editor) => {
-    const result = await readAsDataUrl(file);
-    const replacePos = findLoadingNodePos(editor.state, insertId);
-    if (replacePos !== void 0) {
-      editor.commands.command(({ tr }) => {
-        tr.setNodeAttribute(replacePos, "preview", result);
-        return true;
-      });
-    }
-    if (file.parsedMime.startsWith("image")) {
-      await delay(testFileLoaderDelay * Math.random());
-      return {
-        file,
-        result
-      };
-    }
-    return void 0;
-  }
-});

package/dist/runtime/pm/features/FileLoader/commands/insertFile.d.ts

@@ -1,17 +0,0 @@
-import type { Command } from "@tiptap/core";
-import type { IFileLoaderHandler } from "../types.js.js";
-declare module "@tiptap/core" {
-    interface Commands<ReturnType> {
-        fileLoader: {
-            /**
-             * Insert a file into the editor using the FileLoader extension. The configured {@link IFileLoaderHandler} determines where exactly it's inserted (in an item node after by default).
-             *
-             * You can technically test if this will work with `can` but it's not 100% accurate. We only check if at least one file passes the file filter, not everything else.
-             *
-             * @redirectable
-             */
-            insertFile(files: File[], pos?: number): ReturnType;
-        };
-    }
-}
-export declare const insertFile: (handler: IFileLoaderHandler<any, any>, debug?: boolean) => (files: File[], pos?: number) => Command;

package/dist/runtime/pm/features/FileLoader/commands/insertFile.js

@@ -1,39 +0,0 @@
-import { redirectFromEmbedded } from "../../EmbeddedDocument/utils/redirectFromEmbedded.js";
-import { findLoadingNodePos } from "../utils/findLoadingNodePos.js";
-export const insertFile = (handler, debug = false) => (files, pos) => ({ tr, editor, view, commands, dispatch }) => {
-  const redirect = redirectFromEmbedded(view, "insertFile", { args: [files, pos], view, commands });
-  if (redirect.redirected) {
-    return redirect.result;
-  }
-  if (dispatch) tr.setMeta("fileLoaderIgnore", true);
-  if (!dispatch) {
-    return files.some((file) => handler.filterFile?.(file) ?? true);
-  }
-  void Promise.allSettled(files.reverse().map(async (file) => {
-    if (debug) console.log(`insertFile for ${file.name}`, file);
-    const f = handler.filterFile ? handler.filterFile(file) : file;
-    if (!f) return;
-    if (debug) console.log(`filterFile for ${file.name}`, f);
-    const insertPosition = handler.insertPosition(f, editor, pos);
-    if (debug) console.log(`insertPosition for ${file.name}`, insertPosition);
-    if (insertPosition === void 0) return;
-    const insertLoadingNode = handler.insertLoadingNode;
-    const insertId = insertLoadingNode(f, editor, insertPosition, pos);
-    if (debug) console.log(`insertId for ${file.name}`, insertId);
-    if (!insertId) return;
-    const res = await handler.loadFile?.(f, insertId, editor);
-    if (debug) console.log(`result for ${file.name}`, res);
-    if (!res) {
-      return handler.onLoadError(f, editor, void 0, new Error("fileLoader returned nothing."), insertId);
-    }
-    const replacePos = findLoadingNodePos(editor.state, insertId);
-    if (debug) console.log(`replacePos for ${file.name}`, replacePos);
-    if (replacePos === void 0) {
-      return handler.onLoadError(f, editor, replacePos, new Error("Could not find node to replace."), insertId);
-    }
-    const replaceRes = handler.replaceLoadingNode(editor, replacePos, res, insertId);
-    if (debug) console.log(`called replaceLoadingNode for ${file.name}, replaced node:`, replaceRes);
-  })).then(() => {
-  });
-  return true;
-};

package/dist/runtime/pm/features/FileLoader/components/FileLoaderNodeView.d.vue.ts

@@ -1,92 +0,0 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    editor: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["editor"]>;
-        required: true;
-    };
-    node: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["node"]>;
-        required: true;
-    };
-    decorations: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["decorations"]>;
-        required: true;
-    };
-    selected: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["selected"]>;
-        required: true;
-    };
-    extension: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["extension"]>;
-        required: true;
-    };
-    getPos: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["getPos"]>;
-        required: true;
-    };
-    updateAttributes: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["updateAttributes"]>;
-        required: true;
-    };
-    deleteNode: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["deleteNode"]>;
-        required: true;
-    };
-    view: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["view"]>;
-        required: true;
-    };
-    innerDecorations: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["innerDecorations"]>;
-        required: true;
-    };
-    HTMLAttributes: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["HTMLAttributes"]>;
-        required: true;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    editor: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["editor"]>;
-        required: true;
-    };
-    node: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["node"]>;
-        required: true;
-    };
-    decorations: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["decorations"]>;
-        required: true;
-    };
-    selected: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["selected"]>;
-        required: true;
-    };
-    extension: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["extension"]>;
-        required: true;
-    };
-    getPos: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["getPos"]>;
-        required: true;
-    };
-    updateAttributes: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["updateAttributes"]>;
-        required: true;
-    };
-    deleteNode: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["deleteNode"]>;
-        required: true;
-    };
-    view: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["view"]>;
-        required: true;
-    };
-    innerDecorations: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["innerDecorations"]>;
-        required: true;
-    };
-    HTMLAttributes: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["HTMLAttributes"]>;
-        required: true;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/pm/features/FileLoader/components/FileLoaderNodeView.vue

@@ -1,38 +0,0 @@
-<template>
-<!-- @vue-expect-error contenteditable exists -->
-<node-view-wrapper
-	:class="twMerge(
-  `
-		group/file-loader
-		rounded-sm
-		animate-pulse
-		bg-accent-200
-		text-accent-800
-		dark:bg-accent-700
-		dark:text-accent-300
-		px-2
-		flex
-		flex-col
-		items-center
-		gap-2
-	`
-)"
-	contenteditable="false"
->
-	<div class="self-start">
-		{{ `Loading "${node.attrs.fileName ?? `Unknown`}" ...` }}
-	</div>
-	<img
-		v-if="node.attrs.preview"
-		class="!max-h-[200px] !max-w-[200px] mb-2"
-		:src="node.attrs.preview"
-		alt="Loading Image"
-	>
-</node-view-wrapper>
-</template>
-
-<script setup>
-import { nodeViewProps, NodeViewWrapper } from "@tiptap/vue-3";
-import { twMerge } from "tailwind-merge";
-defineProps(nodeViewProps);
-</script>

package/dist/runtime/pm/features/FileLoader/components/FileLoaderNodeView.vue.d.ts

@@ -1,92 +0,0 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    editor: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["editor"]>;
-        required: true;
-    };
-    node: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["node"]>;
-        required: true;
-    };
-    decorations: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["decorations"]>;
-        required: true;
-    };
-    selected: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["selected"]>;
-        required: true;
-    };
-    extension: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["extension"]>;
-        required: true;
-    };
-    getPos: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["getPos"]>;
-        required: true;
-    };
-    updateAttributes: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["updateAttributes"]>;
-        required: true;
-    };
-    deleteNode: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["deleteNode"]>;
-        required: true;
-    };
-    view: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["view"]>;
-        required: true;
-    };
-    innerDecorations: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["innerDecorations"]>;
-        required: true;
-    };
-    HTMLAttributes: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["HTMLAttributes"]>;
-        required: true;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    editor: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["editor"]>;
-        required: true;
-    };
-    node: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["node"]>;
-        required: true;
-    };
-    decorations: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["decorations"]>;
-        required: true;
-    };
-    selected: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["selected"]>;
-        required: true;
-    };
-    extension: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["extension"]>;
-        required: true;
-    };
-    getPos: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["getPos"]>;
-        required: true;
-    };
-    updateAttributes: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["updateAttributes"]>;
-        required: true;
-    };
-    deleteNode: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["deleteNode"]>;
-        required: true;
-    };
-    view: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["view"]>;
-        required: true;
-    };
-    innerDecorations: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["innerDecorations"]>;
-        required: true;
-    };
-    HTMLAttributes: {
-        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["HTMLAttributes"]>;
-        required: true;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/pm/features/FileLoader/plugins/fileLoaderPlugin.d.ts

@@ -1,5 +0,0 @@
-import type { Editor } from "@tiptap/core";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-import type { FileLoaderExtensionOptions } from "../types.js.js";
-export declare const fileLoaderPluginKey: PluginKey<any>;
-export declare function fileLoaderPlugin(editor: Editor, options: Pick<FileLoaderExtensionOptions, "cleanupOnLoad">): Plugin<any>;

package/dist/runtime/pm/features/FileLoader/plugins/fileLoaderPlugin.js

@@ -1,61 +0,0 @@
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { cleanupFileLoaderNodes } from "../utils/cleanupFileLoaderNodes.js";
-export const fileLoaderPluginKey = new PluginKey("fileLoader");
-export function fileLoaderPlugin(editor, options) {
-  let cleaned = false;
-  return new Plugin({
-    key: fileLoaderPluginKey,
-    /** See {@link DocumentApi} */
-    stateInit: (tr) => {
-      if (!options.cleanupOnLoad) return;
-      cleaned = true;
-      return cleanupFileLoaderNodes(
-        tr,
-        editor.schema,
-        editor.state.schema.nodes.fileLoader,
-        [
-          editor.state.schema.nodes.item,
-          editor.state.schema.nodes.list
-        ],
-        editor.state.schema.nodes.paragraph
-      );
-    },
-    // in case the documentApi isn't being used to load documents
-    appendTransaction: (_, _oldState, newState) => {
-      if (!newState.tr.getMeta("cleanFileLoaders") && (!options.cleanupOnLoad || cleaned)) return;
-      cleaned = true;
-      return cleanupFileLoaderNodes(
-        newState.tr,
-        editor.schema,
-        editor.state.schema.nodes.fileLoader,
-        [
-          editor.state.schema.nodes.item,
-          editor.state.schema.nodes.list
-        ],
-        editor.state.schema.nodes.paragraph
-      );
-    },
-    filterTransaction: (tr) => {
-      if (tr.getMeta("fileLoaderIgnore")) return false;
-      return true;
-    },
-    props: {
-      handleDOMEvents: {
-        drop: (view, event) => {
-          event.preventDefault();
-          const pos = view.posAtCoords({ left: event.clientX, top: event.clientY });
-          if (!pos) return;
-          const position = pos.inside > 0 ? pos.inside : pos.pos - 1;
-          const files = Array.from(event.dataTransfer?.files ?? []);
-          void editor.commands.insertFile(files, position);
-        },
-        paste: (_view, event) => {
-          const files = Array.from(event.clipboardData?.files ?? []);
-          const htmlContent = event.clipboardData?.getData("text/html");
-          if (htmlContent) return;
-          void editor.commands.insertFile(files);
-        }
-      }
-    }
-  });
-}