@meowdown/core 0.74.2 → 0.75.0

package/dist/index.d.ts

@@ -808,14 +808,23 @@ type PostEmbedSnapshot = {
 export declare function parsePostEmbedSnapshot(value: unknown): PostEmbedSnapshot | undefined;
 //#endregion
 //#region src/extensions/image.d.ts
-type ImageUrlResolver = (src: string) => string | undefined;
+/**
+ * Maps a markdown `src` to a displayable URL, or `undefined` to skip rendering
+ * that image. May return a `Promise` when the answer needs data that is not
+ * loaded yet: the image appears once it resolves, and a rejection or an
+ * `undefined` result leaves the source without a preview.
+ */
+type ImageUrlResolver = (src: string) => string | undefined | Promise<string | undefined>;
 /**
  * Options for {@link defineImage}.
  */
 interface ImageOptions {
   /**
    * Map a markdown `src` to a displayable URL, or `undefined` to skip rendering
-   * that image. Defaults to `defaultResolveImageUrl`.
+   * that image. May return a `Promise`; while it is pending, an image whose
+   * `width` and `height` are both persisted shows a sized placeholder so the
+   * resolved image does not shift the layout. Defaults to
+   * `defaultResolveImageUrl`.
    */
   resolveImageUrl?: ImageUrlResolver;
   /**
@@ -1680,4 +1689,4 @@ export declare function getSelectedText(state: EditorState): string;
  */
 export declare function getVirtualElementFromRange(view: EditorView, range: PositionRange): VirtualElement;
 //#endregion
-export { type AcceptPendingReplacementOptions, type CheckRoundTripOptions, type CodeBlockAttrs, type CodeBlockFenceStyle, type CodeToken, type DocToMarkdownOptions, type EditorConfig, type EditorExtension, type EditorExtensionOptions, type ExitBoundaryHandler, type ExitBoundaryOptions, type FileClickHandler, type FileClickPayload, type FileInfo, type FileInfoResolver, type FileLinkOptions, type FileLinkPayload, type FileLinkResolver, type FilePasteHandler, type FilePasteOptions, type FileSaveErrorHandler, type FileViewOptions, type FollowLinkHandlers, type ImageClickHandler, type ImageClickPayload, type ImageOptions, type InlineMarkContext, type InlineMarkOptions, type KaTeXRender, type LanguageItem, type LinkAttrs, type LinkClickHandler, type LinkClickPayload, type LinkCopyHandler, type LinkCopyPayload, type LinkEditHandler, type LinkEditOptions, type LinkHoverHandler, type LinkHoverOptions, type LinkPreview, type LinkPreviewResolver, type LinkUnit, type ListMarker, type MarkChunk, type MarkMode, type MarkName, type MarkdownToDocOptions, type MdFileAttrs, type MdImageAttrs, type MdLinkTextAttrs, type MdMathAttrs, type MdWikilinkAttrs, type MeowdownCodeBlockAttrs, type MeowdownHTMLCommentAttrs, type MeowdownListAttrs, type MeowdownTableCellAttrs, type NodeName, type ParsedWikiEmbed, type PendingReplacement, type PendingReplacementEvent, type PendingReplacementHandler, type PendingReplacementMode, type PendingReplacementOutcome, type PlaceholderOptions, type PositionRange, type PostEmbedSnapshot, Priority, type ReferenceDefinition, type ReferenceDefinitionIndex, type ReferenceDefinitions, type RoundTripFidelity, type SearchStatus, type SearchStatusHandler, type StartPendingReplacementOptions, type TableColumnAlign, type TagClickHandler, type TagClickPayload, type TypedEditor, type TypedMarkBuilders, type VirtualElement, type WikiEmbedOptions, type WikiEmbedResolution, type WikiEmbedResolver, type WikilinkClickHandler, type WikilinkClickPayload, type WikilinkHoverHandler, type WikilinkHoverHit, type WikilinkOptions, type WikilinkPayload, type WikilinkResolution, type WikilinkResolver, type XPostMediaClickHandler, type XPostResolver, type YouTubeVideoClickHandler, type YouTubeVideoResolver, defineCodeBlockPreviewPlugin, definePlaceholder, defineSearchStatusHandler, getSearchStatus, isCodeBlockPreviewHiddenDecoration, withPriority };
+export { type AcceptPendingReplacementOptions, type CheckRoundTripOptions, type CodeBlockAttrs, type CodeBlockFenceStyle, type CodeToken, type DocToMarkdownOptions, type EditorConfig, type EditorExtension, type EditorExtensionOptions, type ExitBoundaryHandler, type ExitBoundaryOptions, type FileClickHandler, type FileClickPayload, type FileInfo, type FileInfoResolver, type FileLinkOptions, type FileLinkPayload, type FileLinkResolver, type FilePasteHandler, type FilePasteOptions, type FileSaveErrorHandler, type FileViewOptions, type FollowLinkHandlers, type ImageClickHandler, type ImageClickPayload, type ImageOptions, type ImageUrlResolver, type InlineMarkContext, type InlineMarkOptions, type KaTeXRender, type LanguageItem, type LinkAttrs, type LinkClickHandler, type LinkClickPayload, type LinkCopyHandler, type LinkCopyPayload, type LinkEditHandler, type LinkEditOptions, type LinkHoverHandler, type LinkHoverOptions, type LinkPreview, type LinkPreviewResolver, type LinkUnit, type ListMarker, type MarkChunk, type MarkMode, type MarkName, type MarkdownToDocOptions, type MdFileAttrs, type MdImageAttrs, type MdLinkTextAttrs, type MdMathAttrs, type MdWikilinkAttrs, type MeowdownCodeBlockAttrs, type MeowdownHTMLCommentAttrs, type MeowdownListAttrs, type MeowdownTableCellAttrs, type NodeName, type ParsedWikiEmbed, type PendingReplacement, type PendingReplacementEvent, type PendingReplacementHandler, type PendingReplacementMode, type PendingReplacementOutcome, type PlaceholderOptions, type PositionRange, type PostEmbedSnapshot, Priority, type ReferenceDefinition, type ReferenceDefinitionIndex, type ReferenceDefinitions, type RoundTripFidelity, type SearchStatus, type SearchStatusHandler, type StartPendingReplacementOptions, type TableColumnAlign, type TagClickHandler, type TagClickPayload, type TypedEditor, type TypedMarkBuilders, type VirtualElement, type WikiEmbedOptions, type WikiEmbedResolution, type WikiEmbedResolver, type WikilinkClickHandler, type WikilinkClickPayload, type WikilinkHoverHandler, type WikilinkHoverHit, type WikilinkOptions, type WikilinkPayload, type WikilinkResolution, type WikilinkResolver, type XPostMediaClickHandler, type XPostResolver, type YouTubeVideoClickHandler, type YouTubeVideoResolver, defineCodeBlockPreviewPlugin, definePlaceholder, defineSearchStatusHandler, getSearchStatus, isCodeBlockPreviewHiddenDecoration, withPriority };

package/dist/index.js

@@ -3992,12 +3992,8 @@ var ImageMarkView = class {
 		this.#contentDOM.className = "md-image-view-content md-atom-view-content";
 		this.#contentDOM.dataset.testid = "image-source";
 		for (const [name, value] of Object.entries(NON_PROSE_ATTRS)) this.#contentDOM.setAttribute(name, value);
-		const preview = this.#renderPreview();
-		if (preview) {
-			preview.contentEditable = "false";
-			this.#dom.appendChild(preview);
-		}
 		this.#dom.appendChild(this.#contentDOM);
+		this.#mountPreview();
 	}
 	get dom() {
 		return this.#dom;
@@ -4024,22 +4020,67 @@ var ImageMarkView = class {
 		this.#destroyed = true;
 	}
 	/**
-	* Build the inline preview for the image `src`: a post-embed card or a
-	* resizable `<img>`.
+	* Mount the inline preview for the image `src`, if any: a post-embed card, a
+	* resizable `<img>`, or, while an asynchronous resolver is pending and the
+	* size is persisted, an empty box of that size that the image later fills.
 	*/
-	#renderPreview() {
+	#mountPreview() {
 		const { src } = this.#attrs;
-		const wrapper = document.createElement("span");
-		wrapper.className = "md-image-view-preview md-atom-view-preview";
 		const kind = matchEmbed(src);
 		if (kind) {
+			const wrapper = this.#createWrapper();
 			wrapper.dataset.testid = `${kind}-embed`;
 			wrapper.dataset.postEmbed = kind;
 			wrapper.appendChild(this.#buildPostEmbed(kind, src));
-			return wrapper;
+			this.#insertPreview(wrapper);
+			return;
+		}
+		const resolved = (this.#resolveImageUrl ?? defaultResolveImageUrl)(src);
+		if (resolved instanceof Promise) {
+			const placeholder = this.#hasPersistedSize() ? this.#renderImage(null) : void 0;
+			if (placeholder) this.#insertPreview(placeholder);
+			resolved.then((url) => this.#settle(placeholder, url), () => this.#settle(placeholder, void 0));
+			return;
+		}
+		if (resolved) this.#insertPreview(this.#renderImage(resolved));
+	}
+	#hasPersistedSize() {
+		return this.#attrs.width != null && this.#attrs.height != null;
+	}
+	/**
+	* Apply a resolver's asynchronous answer: fill the placeholder with the
+	* image, mount the image from scratch, or drop the placeholder when there is
+	* nothing to show. A view destroyed in the meantime (its `src` changed, or it
+	* left the document) ignores the answer.
+	*/
+	#settle(placeholder, url) {
+		if (this.#destroyed) return;
+		if (!url) {
+			placeholder?.remove();
+			this.#resizableRoot = void 0;
+			return;
 		}
-		const url = (this.#resolveImageUrl ?? defaultResolveImageUrl)(src);
-		if (!url) return void 0;
+		if (placeholder && this.#resizableRoot) this.#attachImage(this.#resizableRoot, url);
+		else this.#insertPreview(this.#renderImage(url));
+	}
+	#createWrapper() {
+		const wrapper = document.createElement("span");
+		wrapper.className = "md-image-view-preview md-atom-view-preview";
+		return wrapper;
+	}
+	/**
+	* Insert a preview in front of the source text.
+	*/
+	#insertPreview(preview) {
+		preview.contentEditable = "false";
+		this.#dom.insertBefore(preview, this.#contentDOM);
+	}
+	/**
+	* The resizable image preview. `null` builds the sized box without its
+	* `<img>`, for an asynchronous resolver to fill through `#attachImage`.
+	*/
+	#renderImage(url) {
+		const wrapper = this.#createWrapper();
 		wrapper.dataset.testid = "image-preview";
 		wrapper.appendChild(this.#buildResizableImage(url));
 		return wrapper;
@@ -4122,6 +4163,25 @@ var ImageMarkView = class {
 		root.className = "md-image-resizable";
 		root.dataset.testid = "image-resizable";
 		root.setAttribute("data-loading", "");
+		applySize(root, this.#attrs.width, this.#attrs.height);
+		const handle = document.createElement("prosekit-resizable-handle");
+		handle.className = "md-image-resize-handle";
+		handle.setAttribute("position", "bottom-right");
+		handle.addEventListener("click", (event) => event.stopPropagation());
+		root.appendChild(handle);
+		root.addEventListener("resizeEnd", (event) => {
+			const { width: nextWidth, height: nextHeight } = event.detail;
+			commitImageSize(this.#view, this.#contentDOM, nextWidth, nextHeight);
+		});
+		this.#resizableRoot = root;
+		if (url != null) this.#attachImage(root, url);
+		return root;
+	}
+	/**
+	* Put the `<img>` for `url` into a resizable root built by
+	* `#buildResizableImage`, in front of its handle.
+	*/
+	#attachImage(root, url) {
 		const image = document.createElement("img");
 		image.src = url;
 		image.alt = this.#attrs.alt;
@@ -4137,19 +4197,8 @@ var ImageMarkView = class {
 		image.addEventListener("error", () => {
 			root.removeAttribute("data-loading");
 		});
-		root.appendChild(image);
-		const handle = document.createElement("prosekit-resizable-handle");
-		handle.className = "md-image-resize-handle";
-		handle.setAttribute("position", "bottom-right");
-		handle.addEventListener("click", (event) => event.stopPropagation());
-		root.appendChild(handle);
-		root.addEventListener("resizeEnd", (event) => {
-			const { width: nextWidth, height: nextHeight } = event.detail;
-			commitImageSize(this.#view, this.#contentDOM, nextWidth, nextHeight);
-		});
-		this.#resizableRoot = root;
+		root.prepend(image);
 		this.#image = image;
-		return root;
 	}
 };
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/core",
   "type": "module",
-  "version": "0.74.2",
+  "version": "0.75.0",
   "license": "MIT",
   "repository": {
     "type": "git",