@prosekit/extensions 0.7.17 → 0.7.19

package/dist/_tsup-dts-rollup.d.ts

@@ -17,6 +17,7 @@ import { DedentListOptions } from 'prosemirror-flat-list';
 import { config as default_alias_1 } from '@prosekit/dev/config-vitest';
 import { DocExtension } from '@prosekit/core';
 import { EditorState } from '@prosekit/pm/state';
+import type { EditorView } from '@prosekit/pm/view';
 import { Extension } from '@prosekit/core';
 import { ExtensionTyping } from '@prosekit/core';
 import { ExtractMarkActions } from '@prosekit/core';
@@ -572,6 +573,14 @@ export { defineDropCursor as defineDropCursor_alias_1 }
  */
 export declare function defineEnterRule({ regex, handler, stop, }: EnterRuleOptions): PlainExtension;
 
+declare function defineFileDropHandler(handler: FileDropHandler): PlainExtension;
+export { defineFileDropHandler }
+export { defineFileDropHandler as defineFileDropHandler_alias_1 }
+
+declare function defineFilePasteHandler(handler: FilePasteHandler): PlainExtension;
+export { defineFilePasteHandler }
+export { defineFilePasteHandler as defineFilePasteHandler_alias_1 }
+
 /**
  * Capture clicks near and arrow-key-motion past places that don't have a
  * normally selectable position nearby, and create a gap cursor selection for
@@ -1234,6 +1243,66 @@ declare const exitTable: Command;
 export { exitTable }
 export { exitTable as exitTable_alias_1 }
 
+/**
+ * A function that handles one of the files in a drop event.
+ *
+ * Returns `true` if the file was handled and thus should not be handled by
+ * other handlers.
+ */
+export declare type FileDropHandler = (options: FileDropHandlerOptions) => boolean | void;
+
+declare interface FileDropHandlerOptions {
+    /**
+     * The editor view.
+     */
+    view: EditorView;
+    /**
+     * The event that triggered the drop.
+     */
+    event: DragEvent;
+    /**
+     * The file that was dropped.
+     */
+    file: File;
+    /**
+     * The position of the document where the file was dropped.
+     */
+    pos: number;
+}
+export { FileDropHandlerOptions }
+export { FileDropHandlerOptions as FileDropHandlerOptions_alias_1 }
+
+declare type FileHandler<E extends Event> = (options: {
+    view: EditorView;
+    event: E;
+    file: File;
+}) => boolean | void;
+
+/**
+ * A function that handles one of the files in a paste event.
+ *
+ * Returns `true` if the file was handled and thus should not be handled by
+ * other handlers.
+ */
+export declare type FilePasteHandler = (options: FilePasteHandlerOptions) => boolean | void;
+
+declare interface FilePasteHandlerOptions {
+    /**
+     * The editor view.
+     */
+    view: EditorView;
+    /**
+     * The event that triggered the paste.
+     */
+    event: ClipboardEvent;
+    /**
+     * The file that was pasted.
+     */
+    file: File;
+}
+export { FilePasteHandlerOptions }
+export { FilePasteHandlerOptions as FilePasteHandlerOptions_alias_1 }
+
 /**
  * Try to find a resolved pos of a cell by using the given pos as a hit point.
  *
@@ -1267,6 +1336,8 @@ export declare function getPluginState(state: EditorState): PredictionPluginStat
 
 export declare function getTrMeta(tr: Transaction): PredictionPluginState;
 
+export declare function handleEvent<E extends Event>(view: EditorView, event: E, handlers: FileHandler<E>[], getFiles: (event: E) => File[]): boolean;
+
 declare interface HeadingAttrs {
     level: number;
 }
@@ -1359,6 +1430,8 @@ export { HorizontalRuleSpecExtension as HorizontalRuleSpecExtension_alias_1 }
  */
 declare interface ImageAttrs {
     src?: string | null;
+    width?: number | null;
+    height?: number | null;
 }
 export { ImageAttrs }
 export { ImageAttrs as ImageAttrs_alias_1 }
@@ -1706,9 +1779,10 @@ export declare type ModClickPreventionExtension = PlainExtension;
 
 export declare interface PlaceholderOptions {
     /**
-     * The placeholder text to use.
+     * The placeholder to use. It can be a static string or a function that
+     * receives the current editor state and returns a string.
      */
-    placeholder: string;
+    placeholder: string | ((state: EditorState) => string);
     /**
      * By default, the placeholder text will be shown whenever the current text
      * cursor is in an empty text node. If you only want to show the placeholder
@@ -1956,6 +2030,8 @@ export declare function setupTest(): {
         }>;
         image: NodeAction<    {
         src?: (string | null) | undefined;
+        width?: (number | null) | undefined;
+        height?: (number | null) | undefined;
         }>;
         list: NodeAction<    {
         kind?: ("bullet" | "ordered" | "task" | "toggle") | undefined;
@@ -2215,6 +2291,82 @@ export declare const undo: Command;
 export { UnwrapListOptions }
 export { UnwrapListOptions as UnwrapListOptions_alias_1 }
 
+/**
+ * The implementation of the actual upload function. You need to implement this
+ * function to upload files to your desired destination.
+ */
+declare type Uploader<Result> = (options: UploaderOptions) => Promise<Result>;
+export { Uploader }
+export { Uploader as Uploader_alias_1 }
+
+declare interface UploaderOptions {
+    /**
+     * The file to be uploaded.
+     */
+    file: File;
+    /**
+     * A callback function that should be called with the upload progress updates.
+     */
+    onProgress: (progress: UploadProgress) => void;
+}
+export { UploaderOptions }
+export { UploaderOptions as UploaderOptions_alias_1 }
+
+/**
+ * An interface representing the upload progress.
+ */
+declare interface UploadProgress {
+    loaded: number;
+    total: number;
+}
+export { UploadProgress }
+export { UploadProgress as UploadProgress_alias_1 }
+
+/**
+ * A class that represents a upload task.
+ */
+declare class UploadTask<Result> {
+    /**
+     * An [object URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL)
+     * representing the file to be uploaded. This URL will be revoked once the
+     * upload is complete successfully.
+     */
+    readonly objectURL: string;
+    /**
+     * A boolean indicating whether the upload is complete (either successfully or with an error).
+     */
+    protected done: boolean;
+    /**
+     * A promise that fulfills once the upload is complete, or rejects if an error occurs.
+     */
+    readonly finished: Promise<Result>;
+    private subscribers;
+    /**
+     * Creates a new upload task. You can find the upload task by its object URL
+     * later using `UploadTask.get()`.
+     *
+     * @param options - The options for the upload task.
+     */
+    constructor({ file, uploader }: {
+        file: File;
+        uploader: Uploader<Result>;
+    });
+    /**
+     * Subscribes to progress updates. Returns a function to unsubscribe.
+     */
+    subscribeProgress(callback: (progress: UploadProgress) => void): VoidFunction;
+    /**
+     * Finds an upload task by its object URL.
+     */
+    static get<Result = unknown>(objectURL: string): UploadTask<Result> | undefined;
+    /**
+     * Deletes an upload task by its object URL.
+     */
+    static delete(objectURL: string): void;
+}
+export { UploadTask }
+export { UploadTask as UploadTask_alias_1 }
+
 /**
  * @internal
  */

package/dist/prosekit-extensions-file.d.ts

@@ -0,0 +1,8 @@
+export { defineFilePasteHandler_alias_1 as defineFilePasteHandler } from './_tsup-dts-rollup';
+export { FilePasteHandlerOptions_alias_1 as FilePasteHandlerOptions } from './_tsup-dts-rollup';
+export { defineFileDropHandler_alias_1 as defineFileDropHandler } from './_tsup-dts-rollup';
+export { FileDropHandlerOptions_alias_1 as FileDropHandlerOptions } from './_tsup-dts-rollup';
+export { UploadProgress_alias_1 as UploadProgress } from './_tsup-dts-rollup';
+export { UploaderOptions_alias_1 as UploaderOptions } from './_tsup-dts-rollup';
+export { Uploader_alias_1 as Uploader } from './_tsup-dts-rollup';
+export { UploadTask_alias_1 as UploadTask } from './_tsup-dts-rollup';

package/dist/prosekit-extensions-file.js

@@ -0,0 +1,151 @@
+// src/file/file-paste-handler.ts
+import {
+  defineFacet,
+  defineFacetPayload,
+  editorEventFacet
+} from "@prosekit/core";
+
+// src/file/helpers.ts
+function handleFile(view, event, file, handlers) {
+  for (let i = handlers.length - 1; i >= 0; i--) {
+    const handler = handlers[i];
+    if (handler({ view, event, file })) {
+      return true;
+    }
+  }
+  return false;
+}
+function handleEvent(view, event, handlers, getFiles3) {
+  const files = getFiles3(event);
+  let handled = false;
+  for (const file of files) {
+    if (handleFile(view, event, file, handlers)) {
+      handled = true;
+    }
+  }
+  return handled;
+}
+
+// src/file/file-paste-handler.ts
+function defineFilePasteHandler(handler) {
+  return defineFacetPayload(facet, [handler]);
+}
+function getFiles(event) {
+  var _a, _b;
+  return Array.from((_b = (_a = event.clipboardData) == null ? void 0 : _a.files) != null ? _b : []);
+}
+var facet = defineFacet({
+  parent: editorEventFacet,
+  singleton: true,
+  reducer: (handlers) => {
+    const pasteHandler = (view, event) => {
+      return handleEvent(view, event, handlers, getFiles);
+    };
+    return ["paste", pasteHandler];
+  }
+});
+
+// src/file/file-drop-handler.ts
+import {
+  defineFacet as defineFacet2,
+  defineFacetPayload as defineFacetPayload2,
+  editorEventFacet as editorEventFacet2
+} from "@prosekit/core";
+function defineFileDropHandler(handler) {
+  return defineFacetPayload2(facet2, [handler]);
+}
+function getFiles2(event) {
+  var _a, _b;
+  return Array.from((_b = (_a = event.dataTransfer) == null ? void 0 : _a.files) != null ? _b : []);
+}
+var facet2 = defineFacet2({
+  parent: editorEventFacet2,
+  singleton: true,
+  reducer: (handlers) => {
+    const dropHandler = (view, event) => {
+      const position = view.posAtCoords({ left: event.x, top: event.y });
+      if (!position) {
+        return false;
+      }
+      const pos = position.inside > 0 ? position.inside : position.pos;
+      return handleEvent(
+        view,
+        event,
+        handlers.map((handler) => (options) => handler({ ...options, pos })),
+        getFiles2
+      );
+    };
+    return ["drop", dropHandler];
+  }
+});
+
+// src/file/file-upload.ts
+var UploadTask = class {
+  /**
+   * Creates a new upload task. You can find the upload task by its object URL
+   * later using `UploadTask.get()`.
+   *
+   * @param options - The options for the upload task.
+   */
+  constructor({ file, uploader }) {
+    /**
+     * A boolean indicating whether the upload is complete (either successfully or with an error).
+     */
+    this.done = false;
+    this.subscribers = [];
+    this.objectURL = URL.createObjectURL(file);
+    this.finished = new Promise((resolve, reject) => {
+      const maybePromise = uploader({
+        file,
+        onProgress: (progress) => {
+          for (const subscriber of this.subscribers) {
+            subscriber(progress);
+          }
+        }
+      });
+      Promise.resolve(maybePromise).then(
+        (result) => {
+          this.done = true;
+          URL.revokeObjectURL(this.objectURL);
+          resolve(result);
+        },
+        (error) => {
+          this.done = true;
+          reject(
+            new Error("[prosekit] Failed to upload file", { cause: error })
+          );
+        }
+      );
+    });
+    store.set(this.objectURL, this);
+  }
+  /**
+   * Subscribes to progress updates. Returns a function to unsubscribe.
+   */
+  subscribeProgress(callback) {
+    this.subscribers.push(callback);
+    return () => {
+      this.subscribers = this.subscribers.filter(
+        (subscriber) => subscriber !== callback
+      );
+    };
+  }
+  /**
+   * Finds an upload task by its object URL.
+   */
+  static get(objectURL) {
+    return store.get(objectURL);
+  }
+  /**
+   * Deletes an upload task by its object URL.
+   */
+  static delete(objectURL) {
+    store.delete(objectURL);
+  }
+};
+var store = /* @__PURE__ */ new Map();
+export {
+  UploadTask,
+  defineFileDropHandler,
+  defineFilePasteHandler
+};

package/dist/prosekit-extensions-image.js

@@ -17,7 +17,9 @@ function defineImageSpec() {
   return defineNodeSpec({
     name: "image",
     attrs: {
-      src: { default: null }
+      src: { default: null },
+      width: { default: null },
+      height: { default: null }
     },
     group: "block",
     defining: true,
@@ -30,7 +32,17 @@ function defineImageSpec() {
             return { src: null };
           }
           const src = element.getAttribute("src") || null;
-          return { src };
+          let width = null;
+          let height = null;
+          const rect = element.getBoundingClientRect();
+          if (rect.width > 0 && rect.height > 0) {
+            width = rect.width;
+            height = rect.height;
+          } else if (element instanceof HTMLImageElement && element.naturalWidth > 0 && element.naturalHeight > 0) {
+            width = element.naturalWidth;
+            height = element.naturalHeight;
+          }
+          return { src, width, height };
         }
       }
     ],

package/dist/prosekit-extensions-placeholder.js

@@ -1,22 +1,25 @@
 // src/placeholder/index.ts
-import { definePlugin, isInCodeBlock } from "@prosekit/core";
+import { definePlugin, isInCodeBlock, maybeRun } from "@prosekit/core";
 import { Plugin, PluginKey } from "@prosekit/pm/state";
 import { Decoration, DecorationSet } from "@prosekit/pm/view";
 function definePlaceholder(options) {
   return definePlugin(createPlaceholderPlugin(options));
 }
-function createPlaceholderPlugin(options) {
+function createPlaceholderPlugin({
+  placeholder,
+  strategy = "block"
+}) {
   return new Plugin({
     key: new PluginKey("prosekit-placeholder"),
     props: {
       decorations: (state) => {
-        if (options.strategy === "doc" && !isDocEmpty(state.doc)) {
+        if (strategy === "doc" && !isDocEmpty(state.doc)) {
           return null;
         }
         if (isInCodeBlock(state.selection)) {
           return null;
         }
-        const placeholderText = options.placeholder;
+        const placeholderText = maybeRun(placeholder, state);
         const deco = createPlaceholderDecoration(state, placeholderText);
         if (!deco) {
           return null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/extensions",
   "type": "module",
-  "version": "0.7.17",
+  "version": "0.7.19",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -73,6 +73,11 @@
       "import": "./dist/prosekit-extensions-enter-rule.js",
       "default": "./dist/prosekit-extensions-enter-rule.js"
     },
+    "./file": {
+      "types": "./dist/prosekit-extensions-file.d.ts",
+      "import": "./dist/prosekit-extensions-file.js",
+      "default": "./dist/prosekit-extensions-file.js"
+    },
     "./gap-cursor": {
       "types": "./dist/prosekit-extensions-gap-cursor.d.ts",
       "import": "./dist/prosekit-extensions-gap-cursor.js",
@@ -214,8 +219,8 @@
     "prosemirror-highlight": "^0.9.0",
     "prosemirror-search": "^1.0.0",
     "prosemirror-tables": "^1.5.0",
-    "shiki": "^1.16.2",
-    "@prosekit/core": "^0.7.11",
+    "shiki": "^1.22.0",
+    "@prosekit/core": "^0.7.12",
     "@prosekit/pm": "^0.1.8"
   },
   "peerDependencies": {
@@ -239,17 +244,17 @@
     }
   },
   "devDependencies": {
-    "@vitest/browser": "^2.0.5",
+    "@vitest/browser": "^2.1.3",
     "just-pick": "^4.2.0",
     "loro-crdt": "^0.16.12",
     "loro-prosemirror": "^0.0.7",
-    "tsup": "^8.2.4",
+    "tsup": "^8.3.0",
     "type-fest": "^4.26.1",
-    "typescript": "^5.5.4",
-    "vitest": "^2.0.5",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.3",
     "y-prosemirror": "^1.2.12",
     "y-protocols": "^1.0.6",
-    "yjs": "^13.6.18",
+    "yjs": "^13.6.20",
     "@prosekit/dev": "0.0.0"
   },
   "scripts": {
@@ -286,6 +291,9 @@
       "enter-rule": [
         "./dist/prosekit-extensions-enter-rule.d.ts"
       ],
+      "file": [
+        "./dist/prosekit-extensions-file.d.ts"
+      ],
       "gap-cursor": [
         "./dist/prosekit-extensions-gap-cursor.d.ts"
       ],