@prosekit/extensions 0.10.0 → 0.11.0

package/dist/drop-indicator-CCCaHFvw.js

@@ -0,0 +1,239 @@
+import { defineFacet, defineFacetPayload, pluginFacet } from "@prosekit/core";
+import { NodeSelection, Plugin, PluginKey, TextSelection } from "@prosekit/pm/state";
+import { isHTMLElement } from "@ocavue/utils";
+
+//#region src/drop-indicator/drop-target.ts
+function getTargetsByView(view) {
+	let stack = [[-1, view.state.doc]];
+	let targets = [];
+	while (stack.length > 0) {
+		const [pos, node] = stack.pop();
+		if (pos >= 0) {
+			let dom = view.nodeDOM(pos);
+			if (dom && isHTMLElement(dom)) {
+				let rect = dom.getBoundingClientRect();
+				let { top, bottom, left: x1, right: x2 } = rect;
+				targets.push([pos, [
+					x1,
+					top,
+					x2,
+					top
+				]], [pos + node.nodeSize, [
+					x1,
+					bottom,
+					x2,
+					bottom
+				]]);
+			}
+		}
+		if (node.isBlock && !node.isTextblock) {
+			let childPos = pos + 1;
+			for (let child of node.children) {
+				stack.push([childPos, child]);
+				childPos += child.nodeSize;
+			}
+		}
+	}
+	return targets;
+}
+/**
+* @internal
+*/
+function buildGetTarget(view, onDrag) {
+	let prevTargets = [];
+	let prevDoc;
+	let prevRect;
+	const getTargets = () => {
+		const rect = view.dom.getBoundingClientRect();
+		const doc = view.state.doc;
+		if (prevTargets && prevDoc && prevRect && rect.width === prevRect.width && rect.height === prevRect.height && rect.x === prevRect.x && rect.y === prevRect.y && prevDoc.eq(doc)) return prevTargets;
+		prevRect = rect;
+		prevDoc = doc;
+		prevTargets = getTargetsByView(view);
+		return prevTargets;
+	};
+	const getTarget = (point, event) => {
+		if (!view.editable || view.isDestroyed) return;
+		const compare = (p1, p2) => {
+			const [pos1, line1] = p1;
+			const [pos2, line2] = p2;
+			const p1Distance = pointLineDistance(point, line1);
+			const p2Distance = pointLineDistance(point, line2);
+			return p1Distance - p2Distance || pos1 - pos2;
+		};
+		const targets = getTargets();
+		targets.sort(compare);
+		const target = targets.find((target$1) => onDrag({
+			view,
+			pos: target$1[0],
+			event
+		}) !== false);
+		return target;
+	};
+	return getTarget;
+}
+function pointPointDistance(a, b) {
+	return Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1]);
+}
+function pointLineDistance(point, line) {
+	return Math.min(pointPointDistance(point, [line[0], line[1]]), pointPointDistance(point, [line[2], line[3]]));
+}
+
+//#endregion
+//#region src/drop-indicator/drop-indicator-plugin.ts
+/**
+* @internal
+*/
+function createDropIndicatorPlugin(options) {
+	let getTarget;
+	return new Plugin({
+		key: new PluginKey("prosekit-drop-indicator"),
+		view: (view) => {
+			getTarget = buildGetTarget(view, options.onDrag);
+			return createDropIndicatorView(view, getTarget, options);
+		},
+		props: { handleDrop(view, event, slice, move) {
+			if (!getTarget) return false;
+			const target = getTarget([event.clientX, event.clientY], event);
+			if (!target) return false;
+			event.preventDefault();
+			let insertPos = target[0];
+			let tr = view.state.tr;
+			if (move) {
+				let { node } = view.dragging || {};
+				if (node) node.replace(tr);
+				else tr.deleteSelection();
+			}
+			let pos = tr.mapping.map(insertPos);
+			let isNode = slice.openStart == 0 && slice.openEnd == 0 && slice.content.childCount == 1;
+			let beforeInsert = tr.doc;
+			if (isNode) tr.replaceRangeWith(pos, pos, slice.content.firstChild);
+			else tr.replaceRange(pos, pos, slice);
+			if (tr.doc.eq(beforeInsert)) return true;
+			let $pos = tr.doc.resolve(pos);
+			if (isNode && NodeSelection.isSelectable(slice.content.firstChild) && $pos.nodeAfter && $pos.nodeAfter.sameMarkup(slice.content.firstChild)) tr.setSelection(new NodeSelection($pos));
+			else {
+				let end = tr.mapping.map(insertPos);
+				tr.mapping.maps[tr.mapping.maps.length - 1].forEach((_from, _to, _newFrom, newTo) => end = newTo);
+				tr.setSelection(selectionBetween(view, $pos, tr.doc.resolve(end)));
+			}
+			view.focus();
+			view.dispatch(tr.setMeta("uiEvent", "drop"));
+			return true;
+		} }
+	});
+}
+function selectionBetween(view, $anchor, $head, bias) {
+	return view.someProp("createSelectionBetween", (f) => f(view, $anchor, $head)) || TextSelection.between($anchor, $head, bias);
+}
+function createDropIndicatorView(view, getTarget, options) {
+	let dom = view.dom;
+	let hideId;
+	let prevX;
+	let prevY;
+	let hasDragOverEvent = false;
+	const scheduleHide = () => {
+		if (hideId) clearTimeout(hideId);
+		hasDragOverEvent = false;
+		hideId = setTimeout(() => {
+			if (hasDragOverEvent) return;
+			options.onHide();
+		}, 30);
+	};
+	const handleDragOver = (event) => {
+		hasDragOverEvent = true;
+		const { clientX, clientY } = event;
+		if (prevX === clientX && prevY === clientY) return;
+		prevX = clientX;
+		prevY = clientY;
+		let target = getTarget([clientX, clientY], event);
+		if (!target) {
+			scheduleHide();
+			return;
+		} else {
+			const [pos, [x1, y1, x2, y2]] = target;
+			const line = {
+				p1: {
+					x: x1,
+					y: y1
+				},
+				p2: {
+					x: x2,
+					y: y2
+				}
+			};
+			options.onShow({
+				view,
+				pos,
+				line
+			});
+		}
+	};
+	dom.addEventListener("dragover", handleDragOver);
+	dom.addEventListener("dragend", scheduleHide);
+	dom.addEventListener("drop", scheduleHide);
+	dom.addEventListener("dragleave", scheduleHide);
+	const destroy = () => {
+		dom.removeEventListener("dragover", handleDragOver);
+		dom.removeEventListener("dragend", scheduleHide);
+		dom.removeEventListener("drop", scheduleHide);
+		dom.removeEventListener("dragleave", scheduleHide);
+	};
+	return { destroy };
+}
+
+//#endregion
+//#region src/drop-indicator/drop-indicator-facet.ts
+/**
+* @internal
+*/
+function defineDropIndicatorPayload(payload) {
+	return defineFacetPayload(dropIndicatorFacet, [payload]);
+}
+const dropIndicatorFacet = defineFacet({
+	parent: pluginFacet,
+	singleton: true,
+	reducer: (payloads) => {
+		let showHandlers = payloads.map((p) => p.onShow).filter((x) => !!x);
+		let hideHandlers = payloads.map((p) => p.onHide).filter((x) => !!x);
+		let dragHandlers = payloads.map((p) => p.onDrag).filter((x) => !!x);
+		let showHandler = (options) => {
+			for (let fn of showHandlers) fn(options);
+		};
+		let hideHandler = () => {
+			for (let fn of hideHandlers) fn();
+		};
+		let dragHandler = (options) => {
+			for (let fn of dragHandlers) if (fn(options) === false) return false;
+			return true;
+		};
+		if (showHandlers.length === 0) return [];
+		return createDropIndicatorPlugin({
+			onDrag: dragHandler,
+			onShow: showHandler,
+			onHide: hideHandler
+		});
+	}
+});
+
+//#endregion
+//#region src/drop-indicator/drop-indicator.ts
+/**
+* Defines an extension that controls the behavior of the drop indicator.
+*
+* This extension itself doesn't draw the drop indicator, but it provides the
+* necessary callbacks to do so. You probably don't want to use this extension
+* directly, but rather use the `<DropIndicator>` component.
+*
+* You can add this extension multiple times. If any extension has `onDrag`
+* callback defined, and it returns `false`, then the drop point will be
+* discarded.
+*
+* @public
+*/
+function defineDropIndicator(options) {
+	return defineDropIndicatorPayload(options ?? {});
+}
+
+//#endregion
+export { defineDropIndicator };

package/dist/list/style.css

@@ -1,89 +1,129 @@
-/* src/style.css */
-.prosemirror-flat-list {
-  padding: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-left: 32px;
-  margin-bottom: 0;
-  position: relative;
-  display: list-item;
-  list-style: none;
-}
-.prosemirror-flat-list.ProseMirror-selectednode {
-  outline: none;
-}
-.prosemirror-flat-list.ProseMirror-selectednode:after {
-  content: "";
-  position: absolute;
-  left: -32px;
-  right: -2px;
-  top: -2px;
-  bottom: -2px;
-  border: 2px solid #8cf;
-  pointer-events: none;
-}
-.prosemirror-flat-list[data-list-kind=bullet] {
-  list-style: disc;
-}
-.prosemirror-flat-list[data-list-kind=ordered] > * {
-  contain: style;
-}
-.prosemirror-flat-list[data-list-kind=ordered]::before {
-  position: absolute;
-  right: 100%;
-  font-variant-numeric: tabular-nums;
-  content: counter(prosemirror-flat-list-counter, decimal) ". ";
+:root {
+  --prosekit-list-bullet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='currentColor'/%3E%3C/svg%3E");
+  --prosekit-list-toggle-open-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='8,10 12,14 16,10' fill='currentColor'/%3E%3C/svg%3E");
+  --prosekit-list-toggle-closed-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='10,8 14,12 10,16' fill='currentColor'/%3E%3C/svg%3E");
 }
-.prosemirror-flat-list[data-list-kind=ordered] {
-  counter-increment: prosemirror-flat-list-counter;
-}
-.prosemirror-flat-list[data-list-kind=ordered]:first-child,
-:not(.prosemirror-flat-list[data-list-kind=ordered]) + .prosemirror-flat-list[data-list-kind=ordered] {
-  counter-reset: prosemirror-flat-list-counter;
-}
-@supports (counter-set: prosemirror-flat-list-counter 1) {
-  [data-list-order]:is(.prosemirror-flat-list[data-list-kind=ordered]:first-child, :not(.prosemirror-flat-list[data-list-kind=ordered]) + .prosemirror-flat-list[data-list-kind=ordered]) {
-    counter-set: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
+
+.prosemirror-flat-list {
+  & {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    list-style: none;
   }
-}
-@supports not (counter-set: prosemirror-flat-list-counter 1) {
-  [data-list-order]:is(.prosemirror-flat-list[data-list-kind=ordered]:first-child, :not(.prosemirror-flat-list[data-list-kind=ordered]) + .prosemirror-flat-list[data-list-kind=ordered]) {
-    counter-increment: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
+
+  & > .list-marker {
+    position: absolute;
+    left: 0;
+    width: 1.5em;
+    width: 1lh;
+    height: 1.5em;
+    height: 1lh;
+    text-align: center;
   }
-}
-.prosemirror-flat-list[data-list-kind=task] > .list-marker {
-  position: absolute;
-  right: 100%;
-  text-align: center;
-  width: 1.5em;
-  width: 1lh;
-}
-:is(.prosemirror-flat-list[data-list-kind=task] > .list-marker),
-:is(.prosemirror-flat-list[data-list-kind=task] > .list-marker) * {
-  cursor: pointer;
-}
-.prosemirror-flat-list[data-list-kind=toggle] > .list-marker {
-  position: absolute;
-  right: 100%;
-  text-align: center;
-  width: 1.5em;
-  width: 1lh;
-}
-.prosemirror-flat-list[data-list-kind=toggle] > .list-marker::before {
-  content: "\23f7";
-}
-.prosemirror-flat-list[data-list-kind=toggle][data-list-collapsable][data-list-collapsed] > .list-marker::before {
-  content: "\23f5";
-}
-.prosemirror-flat-list[data-list-kind=toggle][data-list-collapsable] > .list-marker {
-  cursor: pointer;
-}
-.prosemirror-flat-list[data-list-kind=toggle]:not([data-list-collapsable]) > .list-marker {
-  opacity: 40%;
-  pointer-events: none;
-}
-.prosemirror-flat-list[data-list-kind=toggle][data-list-collapsable][data-list-collapsed] > .list-content > *:nth-child(n+2) {
-  display: none;
-}
 
+  & > .list-content {
+    margin-left: 1.5em;
+    margin-left: 1lh;
+  }
+
+  &[data-list-kind="bullet"] > .list-marker,
+  &[data-list-kind="toggle"] > .list-marker {
+    background-color: currentColor;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+  }
+
+  &[data-list-kind="bullet"] {
+    & > .list-marker {
+      mask-image: var(--prosekit-list-bullet-icon);
+    }
+  }
+
+  &[data-list-kind="toggle"] {
+    & > .list-marker {
+      mask-image: var(--prosekit-list-toggle-open-icon);
+    }
+
+    &[data-list-collapsable][data-list-collapsed] > .list-marker {
+      mask-image: var(--prosekit-list-toggle-closed-icon);
+    }
+  }
+
+  &[data-list-kind="ordered"] {
+    /*
+      Ensure that the counters in children don't escape, so that the sub lists
+      won't affect the counter of the parent list.
+  
+      See also https://github.com/ocavue/prosemirror-flat-list/issues/23
+      */
+    & > * {
+      contain: style;
+    }
+
+    &::before {
+      position: absolute;
+      right: calc(100% - 1.5em);
+      right: calc(100% - 1lh);
+      content: counter(prosemirror-flat-list-counter, decimal) ". ";
+      font-variant-numeric: tabular-nums;
+    }
+    counter-increment: prosemirror-flat-list-counter;
+
+    /* 
+      Reset the counter for the first list node in the sequence.
+      */
+    &:first-child,
+    :not(&) + & {
+      counter-reset: prosemirror-flat-list-counter;
+
+      /* 
+        If the first list node has a custom order number, set the counter to that value.
+        */
+      &[data-list-order] {
+        @supports (counter-set: prosemirror-flat-list-counter 1) {
+          counter-set: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
+        }
+
+        /* 
+          Safari older than version 17.2 doesn't support `counter-set` 
+          */
+        @supports not (counter-set: prosemirror-flat-list-counter 1) {
+          counter-increment: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
+        }
+      }
+    }
+  }
+
+  &[data-list-kind="task"] {
+    & > .list-marker {
+      &,
+      & * {
+        /* Make sure that the checkbox is at the center */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        padding: 0;
+        cursor: pointer;
+      }
+    }
+  }
+
+  &[data-list-kind="toggle"] {
+    &[data-list-collapsable] > .list-marker {
+      cursor: pointer;
+    }
+    &:not([data-list-collapsable]) > .list-marker {
+      opacity: 40%;
+      pointer-events: none;
+    }
+
+    /* If collapsed, hide the second and futher children */
+    &[data-list-collapsable][data-list-collapsed] > .list-content > *:nth-child(n+2) {
+      display: none;
+    }
+  }
+}
 

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

@@ -60,7 +60,7 @@ interface AutocompleteRuleOptions {
   * The regular expression to match against the text before the cursor. The
   * last match before the cursor is used.
   *
-  * For a slash menu, you might use `/\/(|\S.*)$/u`.
+  * For a slash menu, you might use `/(?<!\S)\/(|\S.*)$/u`.
   * For a mention, you might use `/@\w*$/`
   */
   regex: RegExp;
@@ -102,4 +102,4 @@ declare class AutocompleteRule {
 //#region src/autocomplete/autocomplete.d.ts
 declare function defineAutocomplete(rule: AutocompleteRule): Extension;
 //#endregion
-export { AutocompleteRule, AutocompleteRuleOptions, CanMatchOptions, CanMatchPredicate, MatchHandler, MatchHandlerOptions, defineAutocomplete };
+export { AutocompleteRule, type AutocompleteRuleOptions, type CanMatchOptions, type CanMatchPredicate, type MatchHandler, type MatchHandlerOptions, defineAutocomplete };

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

@@ -45,4 +45,4 @@ declare function defineBlockquoteInputRule(): PlainExtension;
 */
 declare function defineBlockquoteKeymap(): PlainExtension;
 //#endregion
-export { BlockquoteCommandsExtension, BlockquoteExtension, BlockquoteSpecExtension, defineBlockquote, defineBlockquoteCommands, defineBlockquoteInputRule, defineBlockquoteKeymap, defineBlockquoteSpec };
+export { type BlockquoteCommandsExtension, type BlockquoteExtension, type BlockquoteSpecExtension, defineBlockquote, defineBlockquoteCommands, defineBlockquoteInputRule, defineBlockquoteKeymap, defineBlockquoteSpec };

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

@@ -51,4 +51,4 @@ declare function defineBoldInputRule(): PlainExtension;
 */
 declare function defineBoldKeymap(): PlainExtension;
 //#endregion
-export { BoldCommandsExtension, BoldExtension, BoldSpecExtension, defineBold, defineBoldCommands, defineBoldInputRule, defineBoldKeymap, defineBoldSpec };
+export { type BoldCommandsExtension, type BoldExtension, type BoldSpecExtension, defineBold, defineBoldCommands, defineBoldInputRule, defineBoldKeymap, defineBoldSpec };

package/dist/prosekit-extensions-code-block.d.ts

@@ -1,4 +1,4 @@
-import { ShikiHighlighterOptions } from "./shiki-highlighter-chunk-CZGvZlhf.js";
+import { ShikiHighlighterOptions } from "./shiki-highlighter-chunk-NV2F_Qjl.js";
 import { Extension, PlainExtension, Union } from "@prosekit/core";
 import { Parser } from "prosemirror-highlight";
 import { BundledLanguage as ShikiBundledLanguage, BundledLanguageInfo as ShikiBundledLanguageInfo, BundledTheme as ShikiBundledTheme, BundledThemeInfo as ShikiBundledThemeInfo, SpecialLanguage, bundledLanguagesInfo as shikiBundledLanguagesInfo, bundledThemesInfo as shikiBundledThemesInfo } from "shiki";
@@ -156,4 +156,4 @@ declare function defineCodeBlockShiki({
   ...rest
 }?: CodeBlockShikiOptions): Extension;
 //#endregion
-export { CodeBlockAttrs, CodeBlockCommandsExtension, CodeBlockExtension, CodeBlockHighlightOptions, CodeBlockSpecExtension, HighlightParser, ShikiBundledLanguage, ShikiBundledLanguageInfo, ShikiBundledTheme, ShikiBundledThemeInfo, defineCodeBlock, defineCodeBlockCommands, defineCodeBlockEnterRule, defineCodeBlockHighlight, defineCodeBlockInputRule, defineCodeBlockKeymap, defineCodeBlockShiki, defineCodeBlockSpec, shikiBundledLanguagesInfo, shikiBundledThemesInfo };
+export { type CodeBlockAttrs, type CodeBlockCommandsExtension, type CodeBlockExtension, type CodeBlockHighlightOptions, type CodeBlockSpecExtension, type HighlightParser, type ShikiBundledLanguage, type ShikiBundledLanguageInfo, type ShikiBundledTheme, type ShikiBundledThemeInfo, defineCodeBlock, defineCodeBlockCommands, defineCodeBlockEnterRule, defineCodeBlockHighlight, defineCodeBlockInputRule, defineCodeBlockKeymap, defineCodeBlockShiki, defineCodeBlockSpec, shikiBundledLanguagesInfo, shikiBundledThemesInfo };

package/dist/prosekit-extensions-code-block.js

@@ -130,18 +130,34 @@ function defineCodeBlockSpec() {
 		parseDOM: [{
 			tag: "pre",
 			preserveWhitespace: "full",
-			getAttrs: (node) => ({ language: node.getAttribute("data-language") || "" })
+			getAttrs: (node) => {
+				const language = extractLanguageFromElement(node) || extractLanguageFromElement(node.querySelector("code"));
+				return { language };
+			}
 		}],
 		toDOM(node) {
-			const attrs = node.attrs;
+			const { language } = node.attrs;
 			return [
 				"pre",
-				{ "data-language": attrs.language },
-				["code", 0]
+				{ "data-language": language || void 0 },
+				[
+					"code",
+					{ class: language ? `language-${language}` : void 0 },
+					0
+				]
 			];
 		}
 	});
 }
+function extractLanguageFromElement(element) {
+	if (!element) return "";
+	const attr = element.getAttribute("data-language");
+	if (attr) return attr;
+	const className = element.className;
+	const match = className.match(/language-(\w+)/);
+	if (match) return match[1];
+	return "";
+}
 
 //#endregion
 //#region src/code-block/code-block.ts

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

@@ -51,4 +51,4 @@ declare function defineCodeInputRule(): PlainExtension;
 */
 declare function defineCodeKeymap(): PlainExtension;
 //#endregion
-export { CodeCommandsExtension, CodeExtension, CodeSpecExtension, defineCode, defineCodeCommands, defineCodeInputRule, defineCodeKeymap, defineCodeSpec };
+export { type CodeCommandsExtension, type CodeExtension, type CodeSpecExtension, defineCode, defineCodeCommands, defineCodeInputRule, defineCodeKeymap, defineCodeSpec };

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

@@ -49,4 +49,4 @@ declare class CommitRecorder {
 */
 declare function defineCommitRecorder(commitRecorder: CommitRecorder): PlainExtension;
 //#endregion
-export { Commit, CommitRecorder, defineCommitRecorder, defineCommitViewer };
+export { type Commit, CommitRecorder, defineCommitRecorder, defineCommitViewer };

package/dist/prosekit-extensions-drop-cursor.d.ts

@@ -28,8 +28,10 @@ type DropCursorExtension = PlainExtension;
 *
 * See [prosemirror-dropcursor](https://github.com/ProseMirror/prosemirror-dropcursor) for more information.
 *
+* You probably want to use `<DropIndicator />` component instead of this extension.
+*
 * @public
 */
 declare function defineDropCursor(options?: DropCursorOptions): DropCursorExtension;
 //#endregion
-export { DropCursorExtension, DropCursorOptions, defineDropCursor };
+export { type DropCursorExtension, type DropCursorOptions, defineDropCursor };

package/dist/prosekit-extensions-drop-cursor.js

@@ -7,6 +7,8 @@ import { dropCursor } from "prosemirror-dropcursor";
 *
 * See [prosemirror-dropcursor](https://github.com/ProseMirror/prosemirror-dropcursor) for more information.
 *
+* You probably want to use `<DropIndicator />` component instead of this extension.
+*
 * @public
 */
 function defineDropCursor(options) {

package/dist/prosekit-extensions-drop-indicator.d.ts

@@ -0,0 +1,120 @@
+import { PlainExtension } from "@prosekit/core";
+import { EditorView } from "@prosekit/pm/view";
+
+//#region src/drop-indicator/types.d.ts
+
+/**
+* A function that will be called when the `dragover` event is fired. You can
+* return `false` to disable the current drop point and thus hide the drop
+* indicator.
+*
+* @public
+*/
+type DragEventHandler = (options: DragEventHandlerOptions) => boolean;
+/**
+* Options for {@link DragEventHandler}.
+*
+* @public
+*/
+interface DragEventHandlerOptions {
+  /**
+  * The editor's view.
+  */
+  view: EditorView;
+  /**
+  * The drop position in current document.
+  */
+  pos: number;
+  /**
+  * The `dragover` event.
+  */
+  event: DragEvent;
+}
+/**
+* A function that will be called when the drop indicator should be shown.
+*
+* @public
+*/
+type ShowHandler = (options: ShowHandlerOptions) => void;
+/**
+* Options for {@link ShowHandler}.
+*
+* @public
+*/
+interface ShowHandlerOptions {
+  /**
+  * The editor's view.
+  */
+  view: EditorView;
+  /**
+  * The ProseMirror position that the drop indicator should be shown at.
+  */
+  pos: number;
+  /**
+  * The line that the drop indicator should be shown at.
+  */
+  line: Line;
+}
+/**
+* @internal
+*/
+interface Point {
+  readonly x: number;
+  readonly y: number;
+}
+/**
+* @internal
+*/
+interface Line {
+  readonly p1: Point;
+  readonly p2: Point;
+}
+//#endregion
+//#region src/drop-indicator/drop-indicator-facet.d.ts
+/**
+* @internal
+*/
+interface DropIndicatorPayload {
+  /**
+  * A callback that is called when the drop indicator should be shown.
+  */
+  onShow?: ShowHandler;
+  /**
+  * A callback that is called when the drop indicator should be hidden.
+  */
+  onHide?: VoidFunction;
+  /**
+  * A callback that is called when the `dragover` event is fired. You can
+  * return `false` to disable the current drop point and thus hide the drop
+  * indicator.
+  */
+  onDrag?: DragEventHandler;
+}
+//#endregion
+//#region src/drop-indicator/drop-indicator.d.ts
+/**
+* @internal
+*/
+type DropIndicatorExtension = PlainExtension;
+/**
+* Defines an extension that controls the behavior of the drop indicator.
+*
+* This extension itself doesn't draw the drop indicator, but it provides the
+* necessary callbacks to do so. You probably don't want to use this extension
+* directly, but rather use the `<DropIndicator>` component.
+*
+* You can add this extension multiple times. If any extension has `onDrag`
+* callback defined, and it returns `false`, then the drop point will be
+* discarded.
+*
+* @public
+*/
+declare function defineDropIndicator(options?: DropIndicatorOptions): DropIndicatorExtension;
+/**
+* Options for {@link defineDropIndicator}.
+*
+* @public
+*/
+interface DropIndicatorOptions extends DropIndicatorPayload {}
+//#endregion
+export { type DragEventHandler, type DragEventHandlerOptions, type DropIndicatorExtension, type DropIndicatorOptions, type Line, type Point, type ShowHandler, type ShowHandlerOptions, defineDropIndicator };

package/dist/prosekit-extensions-drop-indicator.js

@@ -0,0 +1,3 @@
+import { defineDropIndicator } from "./drop-indicator-CCCaHFvw.js";
+
+export { defineDropIndicator };

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

@@ -58,11 +58,7 @@ declare function defineFilePasteHandler(handler: FilePasteHandler): PlainExtensi
 * An interface representing the upload progress.
 */
 interface UploadProgress {
-  // A number representing the amount of work already performed by the
-  // underlying process.
   loaded: number;
-  // A number representing the total amount of work that the underlying
-  // process is in the progress of performing.
   total: number;
 }
 interface UploaderOptions {
@@ -126,4 +122,4 @@ declare class UploadTask<Result> {
   static delete(objectURL: string): void;
 }
 //#endregion
-export { FileDropHandlerOptions, FilePasteHandlerOptions, UploadProgress, UploadTask, Uploader, UploaderOptions, defineFileDropHandler, defineFilePasteHandler };
+export { type FileDropHandlerOptions, type FilePasteHandlerOptions, type UploadProgress, UploadTask, type Uploader, type UploaderOptions, defineFileDropHandler, defineFilePasteHandler };

package/dist/prosekit-extensions-gap-cursor.d.ts

@@ -23,4 +23,4 @@ type GapCursorExtension = PlainExtension;
 */
 declare function defineGapCursor(): GapCursorExtension;
 //#endregion
-export { GapCursorExtension, defineGapCursor };
+export { type GapCursorExtension, defineGapCursor };

package/dist/prosekit-extensions-hard-break.d.ts

@@ -50,4 +50,4 @@ declare function defineHardBreak(): HardBreakExtension;
 */
 declare function defineHardBreakKeymap(): PlainExtension;
 //#endregion
-export { HardBreakCommandsExtension, HardBreakExtension, HardBreakSpecExtension, defineHardBreak, defineHardBreakCommands, defineHardBreakKeymap, defineHardBreakSpec };
+export { type HardBreakCommandsExtension, type HardBreakExtension, type HardBreakSpecExtension, defineHardBreak, defineHardBreakCommands, defineHardBreakKeymap, defineHardBreakSpec };

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

@@ -60,4 +60,4 @@ declare function defineHeadingInputRule(): PlainExtension;
 */
 declare function defineHeadingKeymap(): PlainExtension;
 //#endregion
-export { HeadingAttrs, HeadingCommandsExtension, HeadingExtension, HeadingSpecExtension, defineHeading, defineHeadingCommands, defineHeadingInputRule, defineHeadingKeymap, defineHeadingSpec };
+export { type HeadingAttrs, type HeadingCommandsExtension, type HeadingExtension, type HeadingSpecExtension, defineHeading, defineHeadingCommands, defineHeadingInputRule, defineHeadingKeymap, defineHeadingSpec };

package/dist/prosekit-extensions-horizontal-rule.d.ts

@@ -35,4 +35,4 @@ declare function defineHorizontalRule(): HorizontalRuleExtension;
 */
 declare function defineHorizontalRuleInputRule(): PlainExtension;
 //#endregion
-export { HorizontalRuleCommandsExtension, HorizontalRuleExtension, HorizontalRuleSpecExtension, defineHorizontalRule, defineHorizontalRuleCommands, defineHorizontalRuleInputRule, defineHorizontalRuleSpec, insertHorizontalRule };
+export { type HorizontalRuleCommandsExtension, type HorizontalRuleExtension, type HorizontalRuleSpecExtension, defineHorizontalRule, defineHorizontalRuleCommands, defineHorizontalRuleInputRule, defineHorizontalRuleSpec, insertHorizontalRule };

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

@@ -47,4 +47,4 @@ type ImageExtension = Union<[ImageSpecExtension, ImageCommandsExtension]>;
 */
 declare function defineImage(): ImageExtension;
 //#endregion
-export { ImageAttrs, ImageCommandsExtension, ImageExtension, ImageSpecExtension, defineImage, defineImageCommands, defineImageSpec };
+export { type ImageAttrs, type ImageCommandsExtension, type ImageExtension, type ImageSpecExtension, defineImage, defineImageCommands, defineImageSpec };

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

@@ -51,4 +51,4 @@ declare function defineItalicInputRule(): PlainExtension;
 */
 declare function defineItalicKeymap(): PlainExtension;
 //#endregion
-export { ItalicCommandsExtension, ItalicExtension, ItalicSpecExtension, defineItalic, defineItalicCommands, defineItalicInputRule, defineItalicKeymap, defineItalicSpec };
+export { type ItalicCommandsExtension, type ItalicExtension, type ItalicSpecExtension, defineItalic, defineItalicCommands, defineItalicInputRule, defineItalicKeymap, defineItalicSpec };

package/dist/prosekit-extensions-link.js

@@ -1,6 +1,6 @@
 import { defineInputRule } from "./input-rule-Gji4N7Oe.js";
 import { defineEnterRule } from "./enter-rule-RdhEA900.js";
-import { defineMarkRule } from "./mark-rule-wEOcDt6i.js";
+import { defineMarkRule } from "./mark-rule-D7zaa32n.js";
 import { addMark, defineCommands, defineMarkSpec, expandMark, removeMark, toggleMark, union } from "@prosekit/core";
 import { InputRule } from "@prosekit/pm/inputrules";
 

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

@@ -101,4 +101,4 @@ declare function defineList(): ListExtension;
 */
 declare function defineListSerializer(): PlainExtension;
 //#endregion
-export { DedentListOptions, IndentListOptions, ListAttrs, ListCommandsExtension, ListDOMSerializer, ListExtension, ListSpecExtension, ToggleCollapsedOptions, UnwrapListOptions, WrapInListGetAttrs, defineList, defineListCommands, defineListInputRules, defineListKeymap, defineListPlugins, defineListSerializer, defineListSpec };
+export { type DedentListOptions, type IndentListOptions, type ListAttrs, type ListCommandsExtension, ListDOMSerializer, type ListExtension, type ListSpecExtension, type ToggleCollapsedOptions, type UnwrapListOptions, type WrapInListGetAttrs, defineList, defineListCommands, defineListInputRules, defineListKeymap, defineListPlugins, defineListSerializer, defineListSpec };

package/dist/prosekit-extensions-list.js

@@ -1,9 +1,10 @@
 import { defineInputRule } from "./input-rule-Gji4N7Oe.js";
+import { defineDropIndicator } from "./drop-indicator-CCCaHFvw.js";
 import { defineClipboardSerializer, defineCommands, defineKeymap, defineNodeSpec, definePlugin, insertNode, union } from "@prosekit/core";
 import { Plugin } from "@prosekit/pm/state";
 import { chainCommands, deleteSelection } from "@prosekit/pm/commands";
-import { ListDOMSerializer, createDedentListCommand, createIndentListCommand, createListEventPlugin, createListRenderingPlugin, createListSpec, createMoveListCommand, createSafariInputMethodWorkaroundPlugin, createSplitListCommand, createToggleCollapsedCommand, createToggleListCommand, createUnwrapListCommand, createWrapInListCommand, deleteCommand, enterCommand, joinCollapsedListBackward, joinListElements, joinListUp, listInputRules, listToDOM, protectCollapsed, unwrapListSlice } from "prosemirror-flat-list";
 import { isElementLike } from "@ocavue/utils";
+import { ListDOMSerializer, createDedentListCommand, createIndentListCommand, createListEventPlugin, createListRenderingPlugin, createListSpec, createMoveListCommand, createSafariInputMethodWorkaroundPlugin, createSplitListCommand, createToggleCollapsedCommand, createToggleListCommand, createUnwrapListCommand, createWrapInListCommand, deleteCommand, enterCommand, joinCollapsedListBackward, joinListElements, joinListUp, listInputRules, listToDOM, protectCollapsed, unwrapListSlice } from "prosemirror-flat-list";
 
 //#region src/list/list-commands.ts
 function insertList(attrs) {
@@ -31,6 +32,31 @@ function defineListCommands() {
 	});
 }
 
+//#endregion
+//#region src/list/list-drop-indicator.ts
+/**
+* Configures drop indicator to avoid unexpected drop point.
+*
+* We don't want to drag a list node and drop it as the first
+* child of another list node.
+*
+* @internal
+*/
+function defineListDropIndicator() {
+	return defineDropIndicator({ onDrag });
+}
+const onDrag = ({ view, pos }) => {
+	const slice = view.dragging?.slice;
+	if (slice && slice.openStart === 0 && slice.openEnd === 0 && slice.content.childCount === 1) {
+		const node = slice.content.child(0);
+		if (node.type.name === "list") {
+			const $pos = view.state.doc.resolve(pos);
+			if ($pos.parent.type.name === "list" && $pos.index() === 0) return false;
+		}
+	}
+	return true;
+};
+
 //#endregion
 //#region src/list/list-input-rules.ts
 /**
@@ -120,12 +146,29 @@ function defineListSerializer() {
 
 //#endregion
 //#region src/list/list-spec.ts
+function getMarkers(node) {
+	const attrs = node.attrs;
+	switch (attrs.kind) {
+		case "task": return [["label", ["input", {
+			type: "checkbox",
+			checked: attrs.checked ? "" : void 0
+		}]]];
+		default: return [];
+	}
+}
 /**
 * @internal
 */
 function defineListSpec() {
+	const spec = createListSpec();
 	return defineNodeSpec({
-		...createListSpec(),
+		...spec,
+		toDOM: (node) => {
+			return listToDOM({
+				node,
+				getMarkers
+			});
+		},
 		name: "list"
 	});
 }
@@ -136,7 +179,7 @@ function defineListSpec() {
 * @public
 */
 function defineList() {
-	return union(defineListSpec(), defineListPlugins(), defineListKeymap(), defineListInputRules(), defineListCommands(), defineListSerializer());
+	return union(defineListSpec(), defineListPlugins(), defineListKeymap(), defineListInputRules(), defineListCommands(), defineListSerializer(), defineListDropIndicator());
 }
 
 //#endregion

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

@@ -66,4 +66,4 @@ type LoroExtension = Union<[LoroCommandsExtension, PlainExtension]>;
 */
 declare function defineLoro(options: LoroOptions): LoroExtension;
 //#endregion
-export { LoroCursorOptions, LoroExtension, LoroOptions, LoroSyncPluginProps, LoroUndoPluginProps, defineLoro, defineLoroCommands, defineLoroCursorPlugin, defineLoroKeymap, defineLoroSyncPlugin, defineLoroUndoPlugin };
+export { type LoroCursorOptions, type LoroExtension, type LoroOptions, type LoroSyncPluginProps, type LoroUndoPluginProps, defineLoro, defineLoroCommands, defineLoroCursorPlugin, defineLoroKeymap, defineLoroSyncPlugin, defineLoroUndoPlugin };

package/dist/prosekit-extensions-mark-rule.d.ts

@@ -34,4 +34,4 @@ interface MarkRuleOptions {
 */
 declare function defineMarkRule(options: MarkRuleOptions): PlainExtension;
 //#endregion
-export { MarkRuleOptions, defineMarkRule };
+export { type MarkRuleOptions, defineMarkRule };

package/dist/prosekit-extensions-mark-rule.js

@@ -1,3 +1,3 @@
-import { defineMarkRule } from "./mark-rule-wEOcDt6i.js";
+import { defineMarkRule } from "./mark-rule-D7zaa32n.js";
 
 export { defineMarkRule };

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

@@ -57,4 +57,4 @@ declare function defineParagraph(): ParagraphExtension;
 */
 declare function defineParagraphKeymap(): PlainExtension;
 //#endregion
-export { ParagraphCommandsExtension, ParagraphExtension, ParagraphSpecExtension, defineParagraph, defineParagraphCommands, defineParagraphKeymap, defineParagraphSpec };
+export { type ParagraphCommandsExtension, type ParagraphExtension, type ParagraphSpecExtension, defineParagraph, defineParagraphCommands, defineParagraphKeymap, defineParagraphSpec };

package/dist/prosekit-extensions-placeholder.js

@@ -1,4 +1,4 @@
-import { findTable } from "./table-dVQqzLlz.js";
+import { findTable } from "./table-3rDWFyBH.js";
 import { definePlugin, isInCodeBlock, maybeRun } from "@prosekit/core";
 import { Plugin, PluginKey } from "@prosekit/pm/state";
 import { Decoration, DecorationSet } from "@prosekit/pm/view";

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

@@ -296,4 +296,4 @@ declare function findTable($pos: ResolvedPos): FindParentNodeResult | undefined;
 */
 
 //#endregion
-export { InsertTableOptions, MoveTableColumnOptions, MoveTableRowOptions, SelectTableCellOptions, SelectTableColumnOptions, SelectTableOptions, SelectTableRowOptions, TableCellSpecExtension, TableCommandsExtension, TableExtension, TableHeaderCellSpecExtension, TableRowSpecExtension, TableSpecExtension, defineTable, defineTableCellSpec, defineTableCommands, defineTableHeaderCellSpec, defineTablePlugins, defineTableRowSpec, defineTableSpec, exitTable, findTable, insertTable, isCellSelection, moveTableColumn, moveTableRow, selectTable, selectTableCell, selectTableColumn, selectTableRow };
+export { type InsertTableOptions, type MoveTableColumnOptions, type MoveTableRowOptions, type SelectTableCellOptions, type SelectTableColumnOptions, type SelectTableOptions, type SelectTableRowOptions, type TableCellSpecExtension, type TableCommandsExtension, type TableExtension, type TableHeaderCellSpecExtension, type TableRowSpecExtension, type TableSpecExtension, defineTable, defineTableCellSpec, defineTableCommands, defineTableHeaderCellSpec, defineTablePlugins, defineTableRowSpec, defineTableSpec, exitTable, findTable, insertTable, isCellSelection, moveTableColumn, moveTableRow, selectTable, selectTableCell, selectTableColumn, selectTableRow };

package/dist/prosekit-extensions-table.js

@@ -1,3 +1,3 @@
-import { defineTable, defineTableCellSpec, defineTableCommands, defineTableHeaderCellSpec, defineTablePlugins, defineTableRowSpec, defineTableSpec, exitTable, findTable, insertTable, isCellSelection, moveTableColumn, moveTableRow, selectTable, selectTableCell, selectTableColumn, selectTableRow } from "./table-dVQqzLlz.js";
+import { defineTable, defineTableCellSpec, defineTableCommands, defineTableHeaderCellSpec, defineTablePlugins, defineTableRowSpec, defineTableSpec, exitTable, findTable, insertTable, isCellSelection, moveTableColumn, moveTableRow, selectTable, selectTableCell, selectTableColumn, selectTableRow } from "./table-3rDWFyBH.js";
 
 export { defineTable, defineTableCellSpec, defineTableCommands, defineTableHeaderCellSpec, defineTablePlugins, defineTableRowSpec, defineTableSpec, exitTable, findTable, insertTable, isCellSelection, moveTableColumn, moveTableRow, selectTable, selectTableCell, selectTableColumn, selectTableRow };

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

@@ -86,4 +86,4 @@ declare function defineYjs(options: YjsOptions): YjsExtension;
 //#region src/yjs/yjs-keymap.d.ts
 declare function defineYjsKeymap(): PlainExtension;
 //#endregion
-export { YjsCursorOptions, YjsCursorPluginOptions, YjsExtension, YjsOptions, YjsSyncOptions, YjsSyncPluginOptions, YjsUndoOptions, YjsUndoPluginOptions, defineYjs, defineYjsCommands, defineYjsCursorPlugin, defineYjsKeymap, defineYjsSyncPlugin, defineYjsUndoPlugin };
+export { type YjsCursorOptions, type YjsCursorPluginOptions, type YjsExtension, type YjsOptions, type YjsSyncOptions, type YjsSyncPluginOptions, type YjsUndoOptions, type YjsUndoPluginOptions, defineYjs, defineYjsCommands, defineYjsCursorPlugin, defineYjsKeymap, defineYjsSyncPlugin, defineYjsUndoPlugin };

package/dist/shiki-highlighter-chunk.d.ts

@@ -1,2 +1,2 @@
-import { HighlighterOptions, HighlighterResult, ShikiHighlighterOptions, createOrGetHighlighter } from "./shiki-highlighter-chunk-CZGvZlhf.js";
+import { HighlighterOptions, HighlighterResult, ShikiHighlighterOptions, createOrGetHighlighter } from "./shiki-highlighter-chunk-NV2F_Qjl.js";
 export { HighlighterOptions, HighlighterResult, ShikiHighlighterOptions, createOrGetHighlighter };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/extensions",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "private": false,
   "description": "A collection of common extensions for ProseKit",
   "author": {
@@ -65,6 +65,10 @@
       "types": "./dist/prosekit-extensions-drop-cursor.d.ts",
       "default": "./dist/prosekit-extensions-drop-cursor.js"
     },
+    "./drop-indicator": {
+      "types": "./dist/prosekit-extensions-drop-indicator.d.ts",
+      "default": "./dist/prosekit-extensions-drop-indicator.js"
+    },
     "./enter-rule": {
       "types": "./dist/prosekit-extensions-enter-rule.d.ts",
       "default": "./dist/prosekit-extensions-enter-rule.js"
@@ -198,7 +202,7 @@
     "dist"
   ],
   "dependencies": {
-    "@ocavue/utils": "^0.5.0",
+    "@ocavue/utils": "^0.6.0",
     "prosemirror-changeset": "^2.3.1",
     "prosemirror-dropcursor": "^1.8.2",
     "prosemirror-flat-list": "^0.5.5",
@@ -206,9 +210,9 @@
     "prosemirror-highlight": "^0.13.0",
     "prosemirror-search": "^1.1.0",
     "prosemirror-tables": "^1.7.1",
-    "shiki": "^3.7.0",
-    "@prosekit/pm": "^0.1.11",
-    "@prosekit/core": "^0.8.3"
+    "shiki": "^3.9.1",
+    "@prosekit/core": "^0.8.3",
+    "@prosekit/pm": "^0.1.11"
   },
   "peerDependencies": {
     "loro-crdt": ">= 0.16.7",
@@ -231,16 +235,23 @@
     }
   },
   "devDependencies": {
+    "@types/diffable-html": "^5.0.2",
     "@vitest/browser": "^3.2.4",
+    "diffable-html": "^6.0.1",
     "just-pick": "^4.2.0",
     "loro-crdt": "^1.5.9",
     "loro-prosemirror": "^0.2.3",
-    "prettier": "^3.6.0",
-    "tsdown": "^0.12.9",
+    "rehype-parse": "^9.0.1",
+    "rehype-remark": "^10.0.1",
+    "remark-html": "^16.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-stringify": "^11.0.0",
+    "tsdown": "^0.13.1",
     "type-fest": "^4.41.0",
     "typescript": "~5.8.3",
+    "unified": "^11.0.5",
     "vitest": "^3.2.4",
-    "y-prosemirror": "^1.3.6",
+    "y-prosemirror": "^1.3.7",
     "y-protocols": "^1.0.6",
     "yjs": "^13.6.27",
     "@prosekit/config-vitest": "0.0.0",
@@ -261,6 +272,7 @@
       "commit/style": "./src/commit/style.css",
       "prosekit-extensions-doc": "./src/doc/index.ts",
       "prosekit-extensions-drop-cursor": "./src/drop-cursor/index.ts",
+      "prosekit-extensions-drop-indicator": "./src/drop-indicator/index.ts",
       "prosekit-extensions-enter-rule": "./src/enter-rule/index.ts",
       "prosekit-extensions-file": "./src/file/index.ts",
       "prosekit-extensions-gap-cursor": "./src/gap-cursor/index.ts",
@@ -331,6 +343,9 @@
       "drop-cursor": [
         "./dist/prosekit-extensions-drop-cursor.d.ts"
       ],
+      "drop-indicator": [
+        "./dist/prosekit-extensions-drop-indicator.d.ts"
+      ],
       "enter-rule": [
         "./dist/prosekit-extensions-enter-rule.d.ts"
       ],