@dou-ui/editor 0.0.0-stage → 0.1.0-alpha.1

package/dist/extensions/image/image-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-block.js","names":["_sfc_main"],"sources":["../../../src/extensions/image/image-block.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ImageIcon, LinkIcon, UploadIcon } from '@dou-ui/icons'\nimport { DouButton, DouInput, DouSpinner } from 'dou-ui'\nimport { computed, onBeforeUnmount, shallowRef, useTemplateRef } from 'vue'\nimport type { BlockProps } from '../../core/model'\nimport { useEditor } from '../../editor'\nimport { isSafeImageSrc, type Uploads } from './uploads'\n\nconst props = defineProps<{\n  block: { id: string; type: string; props: BlockProps }\n  updateProps: (props: BlockProps) => void\n  selected: boolean\n  editable: boolean\n  uploads: Uploads\n}>()\n\nconst { messages, view } = useEditor()\nconst text = computed(() => messages.value.image)\n\nconst src = computed(() => {\n  const value = String(props.block.props.src ?? '')\n  return value && isSafeImageSrc(value) ? value : ''\n})\nconst upload = computed(() => props.uploads.items.get(props.block.id))\nconst shown = computed(() => src.value || upload.value?.preview || '')\n// without a width the image shows at its own size, up to the full line\nconst width = computed(() => {\n  const value = Number(props.block.props.width)\n  return value > 0 ? Math.min(100, Math.max(20, value)) : null\n})\nconst caption = computed(() => String(props.block.props.caption ?? ''))\n\n/* adding an image */\n\nconst fileInput = useTemplateRef<HTMLInputElement>('fileInput')\nconst embedding = shallowRef(false)\nconst url = shallowRef('')\n\nfunction pick() {\n  fileInput.value?.click()\n}\n\nfunction onFile(event: Event) {\n  const input = event.target as HTMLInputElement\n  const file = input.files?.[0]\n  input.value = ''\n  if (file && view.value) props.uploads.start(view.value, props.block.id, file)\n}\n\nfunction embed() {\n  const value = url.value.trim()\n  if (!value || !isSafeImageSrc(value)) return\n  props.updateProps({ src: value })\n  embedding.value = false\n  url.value = ''\n}\n\n/* resizing: the image stays centered, so a handle moves both edges */\n\nconst figure = useTemplateRef<HTMLElement>('figure')\nconst dragWidth = shallowRef<number | null>(null)\nlet stop: (() => void) | null = null\n\nfunction startResize(event: PointerEvent, side: -1 | 1) {\n  const container = figure.value?.parentElement\n  if (!container || event.button !== 0) return\n  event.preventDefault()\n  const startX = event.clientX\n  const total = container.getBoundingClientRect().width\n  const startWidth = (figure.value!.getBoundingClientRect().width * 100) / total\n  const onMove = (move: PointerEvent) => {\n    const delta = ((move.clientX - startX) * side * 2 * 100) / total\n    dragWidth.value = Math.round(Math.min(100, Math.max(20, startWidth + delta)))\n  }\n  const onUp = () => {\n    stop?.()\n    if (dragWidth.value !== null && dragWidth.value !== width.value)\n      props.updateProps({ width: dragWidth.value })\n    dragWidth.value = null\n  }\n  const onCancel = () => {\n    stop?.()\n    dragWidth.value = null\n  }\n  window.addEventListener('pointermove', onMove)\n  window.addEventListener('pointerup', onUp)\n  window.addEventListener('pointercancel', onCancel)\n  stop = () => {\n    window.removeEventListener('pointermove', onMove)\n    window.removeEventListener('pointerup', onUp)\n    window.removeEventListener('pointercancel', onCancel)\n    stop = null\n  }\n}\n\nonBeforeUnmount(() => stop?.())\n\n/** Enter ends the caption, unless it picks a word in an input method. */\nfunction onCaptionEnter(event: KeyboardEvent) {\n  if (event.isComposing || event.keyCode === 229) return\n  event.preventDefault()\n  ;(event.target as HTMLInputElement).blur()\n}\n\nfunction onCaption(value: string) {\n  props.updateProps({ caption: value })\n}\n</script>\n\n<template>\n  <div class=\"dou-editor-image\" :class=\"{ 'is-selected': selected }\">\n    <figure\n      v-if=\"shown\"\n      ref=\"figure\"\n      class=\"dou-editor-image__figure\"\n      :class=\"{ 'is-sized': (dragWidth ?? width) !== null }\"\n      :style=\"(dragWidth ?? width) !== null ? { width: `${dragWidth ?? width}%` } : undefined\"\n    >\n      <div class=\"dou-editor-image__frame\">\n        <img\n          class=\"dou-editor-image__img\"\n          :src=\"shown\"\n          :alt=\"String(block.props.alt ?? '') || caption\"\n          draggable=\"false\"\n        />\n        <div v-if=\"upload && !upload.failed\" class=\"dou-editor-image__status\">\n          <DouSpinner size=\"sm\" />\n          {{ text.uploading }}\n        </div>\n        <div v-else-if=\"upload?.failed\" class=\"dou-editor-image__status is-failed\">\n          {{ text.failed }}\n          <DouButton v-if=\"editable\" size=\"sm\" variant=\"outline\" @click=\"pick\">\n            <template #leading><UploadIcon /></template>\n            {{ text.upload }}\n          </DouButton>\n        </div>\n        <template v-if=\"editable && src\">\n          <span\n            v-for=\"side in [-1, 1] as const\"\n            :key=\"side\"\n            class=\"dou-editor-image__handle\"\n            :class=\"side < 0 ? 'is-left' : 'is-right'\"\n            :title=\"text.resize\"\n            data-editor-control\n            @pointerdown=\"startResize($event, side)\"\n          />\n        </template>\n      </div>\n      <figcaption v-if=\"editable\" class=\"dou-editor-image__caption\">\n        <input\n          class=\"dou-editor-image__caption-input\"\n          :value=\"caption\"\n          :placeholder=\"text.caption\"\n          @change=\"onCaption(($event.target as HTMLInputElement).value)\"\n          @keydown.enter=\"onCaptionEnter\"\n        />\n      </figcaption>\n      <figcaption v-else-if=\"caption\" class=\"dou-editor-image__caption\">{{ caption }}</figcaption>\n    </figure>\n\n    <div v-else-if=\"editable\" class=\"dou-editor-image__empty\">\n      <ImageIcon class=\"dou-editor-image__empty-icon\" />\n      <template v-if=\"!embedding\">\n        <span class=\"dou-editor-image__empty-text\">{{ text.empty }}</span>\n        <div class=\"dou-editor-image__actions\">\n          <DouButton size=\"sm\" variant=\"outline\" @click=\"pick\">\n            <template #leading><UploadIcon /></template>\n            {{ text.upload }}\n          </DouButton>\n          <DouButton size=\"sm\" variant=\"ghost\" @click=\"embedding = true\">\n            <template #leading><LinkIcon /></template>\n            {{ text.embed }}\n          </DouButton>\n        </div>\n      </template>\n      <form v-else class=\"dou-editor-image__embed\" @submit.prevent=\"embed\">\n        <DouInput\n          v-model=\"url\"\n          size=\"sm\"\n          :placeholder=\"text.urlPlaceholder\"\n          autofocus\n          @keydown.esc=\"embedding = false\"\n        />\n        <DouButton size=\"sm\" variant=\"solid\" native-type=\"submit\">{{ text.apply }}</DouButton>\n      </form>\n    </div>\n\n    <input v-if=\"editable\" ref=\"fileInput\" type=\"file\" accept=\"image/*\" hidden @change=\"onFile\" />\n  </div>\n</template>\n"],"mappings":""}

package/dist/extensions/image/image-block.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,206 @@
+import { useEditor } from "../../editor.js";
+import { isSafeImageSrc } from "./uploads.js";
+import { DouButton, DouInput, DouSpinner } from "dou-ui";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, renderList, shallowRef, toDisplayString, unref, useTemplateRef, withCtx, withKeys, withModifiers } from "vue";
+import { ImageIcon, LinkIcon, UploadIcon } from "@dou-ui/icons";
+// src/extensions/image/image-block.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "dou-editor-image__frame" };
+var _hoisted_2 = ["src", "alt"];
+var _hoisted_3 = {
+	key: 0,
+	class: "dou-editor-image__status"
+};
+var _hoisted_4 = {
+	key: 1,
+	class: "dou-editor-image__status is-failed"
+};
+var _hoisted_5 = ["title", "onPointerdown"];
+var _hoisted_6 = {
+	key: 0,
+	class: "dou-editor-image__caption"
+};
+var _hoisted_7 = ["value", "placeholder"];
+var _hoisted_8 = {
+	key: 1,
+	class: "dou-editor-image__caption"
+};
+var _hoisted_9 = {
+	key: 1,
+	class: "dou-editor-image__empty"
+};
+var _hoisted_10 = { class: "dou-editor-image__empty-text" };
+var _hoisted_11 = { class: "dou-editor-image__actions" };
+var image_block_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "image-block",
+	props: {
+		block: {},
+		updateProps: { type: Function },
+		selected: { type: Boolean },
+		editable: { type: Boolean },
+		uploads: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { messages, view } = useEditor();
+		const text = computed(() => messages.value.image);
+		const src = computed(() => {
+			const value = String(props.block.props.src ?? "");
+			return value && isSafeImageSrc(value) ? value : "";
+		});
+		const upload = computed(() => props.uploads.items.get(props.block.id));
+		const shown = computed(() => src.value || upload.value?.preview || "");
+		const width = computed(() => {
+			const value = Number(props.block.props.width);
+			return value > 0 ? Math.min(100, Math.max(20, value)) : null;
+		});
+		const caption = computed(() => String(props.block.props.caption ?? ""));
+		const fileInput = useTemplateRef("fileInput");
+		const embedding = shallowRef(false);
+		const url = shallowRef("");
+		function pick() {
+			fileInput.value?.click();
+		}
+		function onFile(event) {
+			const input = event.target;
+			const file = input.files?.[0];
+			input.value = "";
+			if (file && view.value) props.uploads.start(view.value, props.block.id, file);
+		}
+		function embed() {
+			const value = url.value.trim();
+			if (!value || !isSafeImageSrc(value)) return;
+			props.updateProps({ src: value });
+			embedding.value = false;
+			url.value = "";
+		}
+		const figure = useTemplateRef("figure");
+		const dragWidth = shallowRef(null);
+		let stop = null;
+		function startResize(event, side) {
+			const container = figure.value?.parentElement;
+			if (!container || event.button !== 0) return;
+			event.preventDefault();
+			const startX = event.clientX;
+			const total = container.getBoundingClientRect().width;
+			const startWidth = figure.value.getBoundingClientRect().width * 100 / total;
+			const onMove = (move) => {
+				const delta = (move.clientX - startX) * side * 2 * 100 / total;
+				dragWidth.value = Math.round(Math.min(100, Math.max(20, startWidth + delta)));
+			};
+			const onUp = () => {
+				stop?.();
+				if (dragWidth.value !== null && dragWidth.value !== width.value) props.updateProps({ width: dragWidth.value });
+				dragWidth.value = null;
+			};
+			const onCancel = () => {
+				stop?.();
+				dragWidth.value = null;
+			};
+			window.addEventListener("pointermove", onMove);
+			window.addEventListener("pointerup", onUp);
+			window.addEventListener("pointercancel", onCancel);
+			stop = () => {
+				window.removeEventListener("pointermove", onMove);
+				window.removeEventListener("pointerup", onUp);
+				window.removeEventListener("pointercancel", onCancel);
+				stop = null;
+			};
+		}
+		onBeforeUnmount(() => stop?.());
+		/** Enter ends the caption, unless it picks a word in an input method. */
+		function onCaptionEnter(event) {
+			if (event.isComposing || event.keyCode === 229) return;
+			event.preventDefault();
+			event.target.blur();
+		}
+		function onCaption(value) {
+			props.updateProps({ caption: value });
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["dou-editor-image", { "is-selected": __props.selected }]) }, [shown.value ? (openBlock(), createElementBlock("figure", {
+				key: 0,
+				ref_key: "figure",
+				ref: figure,
+				class: normalizeClass(["dou-editor-image__figure", { "is-sized": (dragWidth.value ?? width.value) !== null }]),
+				style: normalizeStyle((dragWidth.value ?? width.value) !== null ? { width: `${dragWidth.value ?? width.value}%` } : void 0)
+			}, [createElementVNode("div", _hoisted_1, [
+				createElementVNode("img", {
+					class: "dou-editor-image__img",
+					src: shown.value,
+					alt: String(__props.block.props.alt ?? "") || caption.value,
+					draggable: "false"
+				}, null, 8, _hoisted_2),
+				upload.value && !upload.value.failed ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(DouSpinner), { size: "sm" }), createTextVNode(" " + toDisplayString(text.value.uploading), 1)])) : upload.value?.failed ? (openBlock(), createElementBlock("div", _hoisted_4, [createTextVNode(toDisplayString(text.value.failed) + " ", 1), __props.editable ? (openBlock(), createBlock(unref(DouButton), {
+					key: 0,
+					size: "sm",
+					variant: "outline",
+					onClick: pick
+				}, {
+					leading: withCtx(() => [createVNode(unref(UploadIcon))]),
+					default: withCtx(() => [createTextVNode(" " + toDisplayString(text.value.upload), 1)]),
+					_: 1
+				})) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				__props.editable && src.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, renderList([-1, 1], (side) => {
+					return createElementVNode("span", {
+						key: side,
+						class: normalizeClass(["dou-editor-image__handle", side < 0 ? "is-left" : "is-right"]),
+						title: text.value.resize,
+						"data-editor-control": "",
+						onPointerdown: ($event) => startResize($event, side)
+					}, null, 42, _hoisted_5);
+				}), 64)) : createCommentVNode("", true)
+			]), __props.editable ? (openBlock(), createElementBlock("figcaption", _hoisted_6, [createElementVNode("input", {
+				class: "dou-editor-image__caption-input",
+				value: caption.value,
+				placeholder: text.value.caption,
+				onChange: _cache[0] || (_cache[0] = ($event) => onCaption($event.target.value)),
+				onKeydown: withKeys(onCaptionEnter, ["enter"])
+			}, null, 40, _hoisted_7)])) : caption.value ? (openBlock(), createElementBlock("figcaption", _hoisted_8, toDisplayString(caption.value), 1)) : createCommentVNode("", true)], 6)) : __props.editable ? (openBlock(), createElementBlock("div", _hoisted_9, [createVNode(unref(ImageIcon), { class: "dou-editor-image__empty-icon" }), !embedding.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", _hoisted_10, toDisplayString(text.value.empty), 1), createElementVNode("div", _hoisted_11, [createVNode(unref(DouButton), {
+				size: "sm",
+				variant: "outline",
+				onClick: pick
+			}, {
+				leading: withCtx(() => [createVNode(unref(UploadIcon))]),
+				default: withCtx(() => [createTextVNode(" " + toDisplayString(text.value.upload), 1)]),
+				_: 1
+			}), createVNode(unref(DouButton), {
+				size: "sm",
+				variant: "ghost",
+				onClick: _cache[1] || (_cache[1] = ($event) => embedding.value = true)
+			}, {
+				leading: withCtx(() => [createVNode(unref(LinkIcon))]),
+				default: withCtx(() => [createTextVNode(" " + toDisplayString(text.value.embed), 1)]),
+				_: 1
+			})])], 64)) : (openBlock(), createElementBlock("form", {
+				key: 1,
+				class: "dou-editor-image__embed",
+				onSubmit: withModifiers(embed, ["prevent"])
+			}, [createVNode(unref(DouInput), {
+				modelValue: url.value,
+				"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => url.value = $event),
+				size: "sm",
+				placeholder: text.value.urlPlaceholder,
+				autofocus: "",
+				onKeydown: _cache[3] || (_cache[3] = withKeys(($event) => embedding.value = false, ["esc"]))
+			}, null, 8, ["modelValue", "placeholder"]), createVNode(unref(DouButton), {
+				size: "sm",
+				variant: "solid",
+				"native-type": "submit"
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(text.value.apply), 1)]),
+				_: 1
+			})], 32))])) : createCommentVNode("", true), __props.editable ? (openBlock(), createElementBlock("input", {
+				key: 2,
+				ref_key: "fileInput",
+				ref: fileInput,
+				type: "file",
+				accept: "image/*",
+				hidden: "",
+				onChange: onFile
+			}, null, 544)) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+export { image_block_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=image-block.vue_vue_type_script_setup_true_lang.js.map

package/dist/extensions/image/image-block.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-block.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createElementVNode","_createVNode","_unref","_createTextVNode","_toDisplayString","_createBlock","_withCtx","_createCommentVNode","_Fragment","_renderList","_withKeys","_withModifiers"],"sources":["../../../src/extensions/image/image-block.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ImageIcon, LinkIcon, UploadIcon } from '@dou-ui/icons'\nimport { DouButton, DouInput, DouSpinner } from 'dou-ui'\nimport { computed, onBeforeUnmount, shallowRef, useTemplateRef } from 'vue'\nimport type { BlockProps } from '../../core/model'\nimport { useEditor } from '../../editor'\nimport { isSafeImageSrc, type Uploads } from './uploads'\n\nconst props = defineProps<{\n  block: { id: string; type: string; props: BlockProps }\n  updateProps: (props: BlockProps) => void\n  selected: boolean\n  editable: boolean\n  uploads: Uploads\n}>()\n\nconst { messages, view } = useEditor()\nconst text = computed(() => messages.value.image)\n\nconst src = computed(() => {\n  const value = String(props.block.props.src ?? '')\n  return value && isSafeImageSrc(value) ? value : ''\n})\nconst upload = computed(() => props.uploads.items.get(props.block.id))\nconst shown = computed(() => src.value || upload.value?.preview || '')\n// without a width the image shows at its own size, up to the full line\nconst width = computed(() => {\n  const value = Number(props.block.props.width)\n  return value > 0 ? Math.min(100, Math.max(20, value)) : null\n})\nconst caption = computed(() => String(props.block.props.caption ?? ''))\n\n/* adding an image */\n\nconst fileInput = useTemplateRef<HTMLInputElement>('fileInput')\nconst embedding = shallowRef(false)\nconst url = shallowRef('')\n\nfunction pick() {\n  fileInput.value?.click()\n}\n\nfunction onFile(event: Event) {\n  const input = event.target as HTMLInputElement\n  const file = input.files?.[0]\n  input.value = ''\n  if (file && view.value) props.uploads.start(view.value, props.block.id, file)\n}\n\nfunction embed() {\n  const value = url.value.trim()\n  if (!value || !isSafeImageSrc(value)) return\n  props.updateProps({ src: value })\n  embedding.value = false\n  url.value = ''\n}\n\n/* resizing: the image stays centered, so a handle moves both edges */\n\nconst figure = useTemplateRef<HTMLElement>('figure')\nconst dragWidth = shallowRef<number | null>(null)\nlet stop: (() => void) | null = null\n\nfunction startResize(event: PointerEvent, side: -1 | 1) {\n  const container = figure.value?.parentElement\n  if (!container || event.button !== 0) return\n  event.preventDefault()\n  const startX = event.clientX\n  const total = container.getBoundingClientRect().width\n  const startWidth = (figure.value!.getBoundingClientRect().width * 100) / total\n  const onMove = (move: PointerEvent) => {\n    const delta = ((move.clientX - startX) * side * 2 * 100) / total\n    dragWidth.value = Math.round(Math.min(100, Math.max(20, startWidth + delta)))\n  }\n  const onUp = () => {\n    stop?.()\n    if (dragWidth.value !== null && dragWidth.value !== width.value)\n      props.updateProps({ width: dragWidth.value })\n    dragWidth.value = null\n  }\n  const onCancel = () => {\n    stop?.()\n    dragWidth.value = null\n  }\n  window.addEventListener('pointermove', onMove)\n  window.addEventListener('pointerup', onUp)\n  window.addEventListener('pointercancel', onCancel)\n  stop = () => {\n    window.removeEventListener('pointermove', onMove)\n    window.removeEventListener('pointerup', onUp)\n    window.removeEventListener('pointercancel', onCancel)\n    stop = null\n  }\n}\n\nonBeforeUnmount(() => stop?.())\n\n/** Enter ends the caption, unless it picks a word in an input method. */\nfunction onCaptionEnter(event: KeyboardEvent) {\n  if (event.isComposing || event.keyCode === 229) return\n  event.preventDefault()\n  ;(event.target as HTMLInputElement).blur()\n}\n\nfunction onCaption(value: string) {\n  props.updateProps({ caption: value })\n}\n</script>\n\n<template>\n  <div class=\"dou-editor-image\" :class=\"{ 'is-selected': selected }\">\n    <figure\n      v-if=\"shown\"\n      ref=\"figure\"\n      class=\"dou-editor-image__figure\"\n      :class=\"{ 'is-sized': (dragWidth ?? width) !== null }\"\n      :style=\"(dragWidth ?? width) !== null ? { width: `${dragWidth ?? width}%` } : undefined\"\n    >\n      <div class=\"dou-editor-image__frame\">\n        <img\n          class=\"dou-editor-image__img\"\n          :src=\"shown\"\n          :alt=\"String(block.props.alt ?? '') || caption\"\n          draggable=\"false\"\n        />\n        <div v-if=\"upload && !upload.failed\" class=\"dou-editor-image__status\">\n          <DouSpinner size=\"sm\" />\n          {{ text.uploading }}\n        </div>\n        <div v-else-if=\"upload?.failed\" class=\"dou-editor-image__status is-failed\">\n          {{ text.failed }}\n          <DouButton v-if=\"editable\" size=\"sm\" variant=\"outline\" @click=\"pick\">\n            <template #leading><UploadIcon /></template>\n            {{ text.upload }}\n          </DouButton>\n        </div>\n        <template v-if=\"editable && src\">\n          <span\n            v-for=\"side in [-1, 1] as const\"\n            :key=\"side\"\n            class=\"dou-editor-image__handle\"\n            :class=\"side < 0 ? 'is-left' : 'is-right'\"\n            :title=\"text.resize\"\n            data-editor-control\n            @pointerdown=\"startResize($event, side)\"\n          />\n        </template>\n      </div>\n      <figcaption v-if=\"editable\" class=\"dou-editor-image__caption\">\n        <input\n          class=\"dou-editor-image__caption-input\"\n          :value=\"caption\"\n          :placeholder=\"text.caption\"\n          @change=\"onCaption(($event.target as HTMLInputElement).value)\"\n          @keydown.enter=\"onCaptionEnter\"\n        />\n      </figcaption>\n      <figcaption v-else-if=\"caption\" class=\"dou-editor-image__caption\">{{ caption }}</figcaption>\n    </figure>\n\n    <div v-else-if=\"editable\" class=\"dou-editor-image__empty\">\n      <ImageIcon class=\"dou-editor-image__empty-icon\" />\n      <template v-if=\"!embedding\">\n        <span class=\"dou-editor-image__empty-text\">{{ text.empty }}</span>\n        <div class=\"dou-editor-image__actions\">\n          <DouButton size=\"sm\" variant=\"outline\" @click=\"pick\">\n            <template #leading><UploadIcon /></template>\n            {{ text.upload }}\n          </DouButton>\n          <DouButton size=\"sm\" variant=\"ghost\" @click=\"embedding = true\">\n            <template #leading><LinkIcon /></template>\n            {{ text.embed }}\n          </DouButton>\n        </div>\n      </template>\n      <form v-else class=\"dou-editor-image__embed\" @submit.prevent=\"embed\">\n        <DouInput\n          v-model=\"url\"\n          size=\"sm\"\n          :placeholder=\"text.urlPlaceholder\"\n          autofocus\n          @keydown.esc=\"embedding = false\"\n        />\n        <DouButton size=\"sm\" variant=\"solid\" native-type=\"submit\">{{ text.apply }}</DouButton>\n      </form>\n    </div>\n\n    <input v-if=\"editable\" ref=\"fileInput\" type=\"file\" accept=\"image/*\" hidden @change=\"onFile\" />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/extensions/image/index.js

@@ -0,0 +1,125 @@
+import { escapeHTML, escapeMarkdown } from "../../core/output.js";
+import { defineBlock } from "../../define-block.js";
+import { fileDropPlugin } from "../../core/file-drop.js";
+import { createUploads, isSafeImageSrc, readAsDataUrl } from "./uploads.js";
+import image_block_default from "./image-block.js";
+import { defineComponent, h } from "vue";
+import { ImageIcon } from "@dou-ui/icons";
+// src/extensions/image/index.ts
+/** A width in percent, as `blocksToHTML` writes it on the figure. */
+function widthOf(dom) {
+	const match = /^(\d+(?:\.\d+)?)%$/.exec(dom.style?.width ?? "");
+	return match ? Math.min(100, Math.max(20, Number(match[1]))) : null;
+}
+var attrsOf = (dom) => {
+	const img = dom.tagName === "IMG" ? dom : dom.querySelector("img");
+	const src = img?.getAttribute("src") ?? "";
+	if (!src || !isSafeImageSrc(src)) return false;
+	return {
+		src,
+		alt: img?.getAttribute("alt") ?? "",
+		caption: dom.querySelector("figcaption")?.textContent?.trim() ?? img?.getAttribute("title") ?? "",
+		width: widthOf(dom)
+	};
+};
+/**
+* Image blocks: upload a file, paste or drop images, or embed a link. The
+* image can be resized and given a caption.
+*/
+function image(options = {}) {
+	const uploads = createUploads(options.upload ?? readAsDataUrl);
+	const View = defineComponent({
+		name: "DouEditorImageView",
+		inheritAttrs: false,
+		setup(_props, { attrs }) {
+			return () => h(image_block_default, {
+				...attrs,
+				uploads
+			});
+		}
+	});
+	return {
+		...defineBlock({
+			type: "image",
+			props: {
+				src: "",
+				alt: "",
+				caption: "",
+				width: null
+			},
+			content: "none",
+			component: View,
+			menu: {
+				label: (m) => m.types.image,
+				hint: (m) => m.hints.image,
+				icon: ImageIcon,
+				keywords: [
+					"image",
+					"picture",
+					"img",
+					"tp",
+					"tupian",
+					"zhaopian"
+				]
+			},
+			spec: {
+				parseDOM: [{
+					tag: "figure",
+					getAttrs: (dom) => attrsOf(dom)
+				}, {
+					tag: "img[src]",
+					getAttrs: (dom) => attrsOf(dom)
+				}],
+				toDOM: (node) => {
+					const img = ["img", {
+						src: node.attrs.src,
+						alt: node.attrs.alt || node.attrs.caption
+					}];
+					return [
+						"figure",
+						{
+							class: "dou-editor__content dou-editor__content--image",
+							"data-content-type": "image",
+							style: node.attrs.width ? `width: ${node.attrs.width}%` : null
+						},
+						img,
+						...node.attrs.caption ? [["figcaption", node.attrs.caption]] : []
+					];
+				}
+			}
+		}),
+		output: { blocks: { image: {
+			html: (node, { children }) => {
+				const { src, alt, caption, width } = node.props;
+				if (!src || !isSafeImageSrc(String(src))) return children;
+				const style = width ? ` style="width: ${Number(width)}%"` : "";
+				const label = escapeHTML(String(alt || caption || ""));
+				const figcaption = caption ? `<figcaption>${escapeHTML(String(caption))}</figcaption>` : "";
+				return `<figure${style}><img src="${escapeHTML(String(src))}" alt="${label}">${figcaption}</figure>${children}`;
+			},
+			markdown: (node, { children }) => {
+				const { src, alt, caption } = node.props;
+				if (!src || !isSafeImageSrc(String(src))) return children;
+				const label = escapeMarkdown(String(alt || caption || ""));
+				const title = caption ? ` "${String(caption).replace(/["\\]/g, "\\$&")}"` : "";
+				const written = `![${label}](${/[\s()<>]/.test(String(src)) ? `<${String(src)}>` : String(src)}${title})`;
+				return children ? `${written}\n\n${children}` : written;
+			}
+		} } },
+		prepareHTML: (root) => {
+			for (const img of Array.from(root.querySelectorAll("p > img"))) {
+				const paragraph = img.parentElement;
+				if (paragraph.textContent?.trim() || paragraph.children.length > 1) continue;
+				paragraph.replaceWith(img);
+			}
+		},
+		plugins: () => [fileDropPlugin({
+			accepts: (file) => file.type.startsWith("image/"),
+			insert: uploads.insert,
+			skipPaste: (event) => /<img/i.test(event.clipboardData?.getData("text/html") ?? "")
+		})]
+	};
+}
+export { image, isSafeImageSrc, readAsDataUrl };
+
+//# sourceMappingURL=index.js.map

package/dist/extensions/image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ImageBlock"],"sources":["../../../src/extensions/image/index.ts"],"sourcesContent":["import { ImageIcon } from '@dou-ui/icons'\nimport { fileDropPlugin } from '../../core/file-drop'\nimport { defineComponent, h } from 'vue'\nimport type { EditorExtension } from '../../core/extension'\nimport { escapeHTML, escapeMarkdown } from '../../core/output'\nimport { defineBlock } from '../../define-block'\nimport ImageBlock from './image-block.vue'\nimport { createUploads, isSafeImageSrc, readAsDataUrl, type FileUploader } from './uploads'\n\nexport interface ImageOptions {\n  /**\n   * Store a picked, pasted or dropped file and resolve with its address.\n   * Without it, images are kept in the document as data URLs, which suits\n   * trying things out but makes documents large.\n   */\n  upload?: FileUploader\n}\n\n/** A width in percent, as `blocksToHTML` writes it on the figure. */\nfunction widthOf(dom: HTMLElement): number | null {\n  const match = /^(\\d+(?:\\.\\d+)?)%$/.exec(dom.style?.width ?? '')\n  return match ? Math.min(100, Math.max(20, Number(match[1]))) : null\n}\n\nconst attrsOf = (dom: HTMLElement) => {\n  const img = dom.tagName === 'IMG' ? (dom as HTMLImageElement) : dom.querySelector('img')\n  const src = img?.getAttribute('src') ?? ''\n  if (!src || !isSafeImageSrc(src)) return false\n  return {\n    src,\n    alt: img?.getAttribute('alt') ?? '',\n    caption:\n      dom.querySelector('figcaption')?.textContent?.trim() ?? img?.getAttribute('title') ?? '',\n    width: widthOf(dom),\n  }\n}\n\n/**\n * Image blocks: upload a file, paste or drop images, or embed a link. The\n * image can be resized and given a caption.\n */\nexport function image(options: ImageOptions = {}): EditorExtension {\n  const uploads = createUploads(options.upload ?? readAsDataUrl)\n  const View = defineComponent({\n    name: 'DouEditorImageView',\n    inheritAttrs: false,\n    setup(_props, { attrs }) {\n      return () => h(ImageBlock, { ...attrs, uploads } as never)\n    },\n  })\n  const block = defineBlock({\n    type: 'image',\n    props: { src: '', alt: '', caption: '', width: null },\n    content: 'none',\n    component: View,\n    menu: {\n      label: (m) => m.types.image,\n      hint: (m) => m.hints.image,\n      icon: ImageIcon,\n      keywords: ['image', 'picture', 'img', 'tp', 'tupian', 'zhaopian'],\n    },\n    spec: {\n      parseDOM: [\n        { tag: 'figure', getAttrs: (dom) => attrsOf(dom as HTMLElement) },\n        { tag: 'img[src]', getAttrs: (dom) => attrsOf(dom as HTMLElement) },\n      ],\n      toDOM: (node) => {\n        const img = ['img', { src: node.attrs.src, alt: node.attrs.alt || node.attrs.caption }]\n        const style = node.attrs.width ? `width: ${node.attrs.width}%` : null\n        return [\n          'figure',\n          {\n            class: 'dou-editor__content dou-editor__content--image',\n            'data-content-type': 'image',\n            style,\n          },\n          img,\n          ...(node.attrs.caption ? [['figcaption', node.attrs.caption]] : []),\n        ] as never\n      },\n    },\n  })\n  return {\n    ...block,\n    output: {\n      blocks: {\n        image: {\n          html: (node, { children }) => {\n            const { src, alt, caption, width } = node.props\n            if (!src || !isSafeImageSrc(String(src))) return children\n            const style = width ? ` style=\"width: ${Number(width)}%\"` : ''\n            const label = escapeHTML(String(alt || caption || ''))\n            const figcaption = caption\n              ? `<figcaption>${escapeHTML(String(caption))}</figcaption>`\n              : ''\n            return `<figure${style}><img src=\"${escapeHTML(String(src))}\" alt=\"${label}\">${figcaption}</figure>${children}`\n          },\n          markdown: (node, { children }) => {\n            const { src, alt, caption } = node.props\n            if (!src || !isSafeImageSrc(String(src))) return children\n            const label = escapeMarkdown(String(alt || caption || ''))\n            const title = caption ? ` \"${String(caption).replace(/[\"\\\\]/g, '\\\\$&')}\"` : ''\n            const address = /[\\s()<>]/.test(String(src)) ? `<${String(src)}>` : String(src)\n            const written = `![${label}](${address}${title})`\n            return children ? `${written}\\n\\n${children}` : written\n          },\n        },\n      },\n    },\n    // Markdown puts an image inside a paragraph of its own\n    prepareHTML: (root) => {\n      for (const img of Array.from(root.querySelectorAll('p > img'))) {\n        const paragraph = img.parentElement!\n        if (paragraph.textContent?.trim() || paragraph.children.length > 1) continue\n        paragraph.replaceWith(img)\n      }\n    },\n    plugins: () => [\n      fileDropPlugin({\n        accepts: (file) => file.type.startsWith('image/'),\n        insert: uploads.insert,\n        // an image copied from a page comes with its address: keep that\n        skipPaste: (event) => /<img/i.test(event.clipboardData?.getData('text/html') ?? ''),\n      }),\n    ],\n  }\n}\n\nexport { isSafeImageSrc, readAsDataUrl, type FileUploader }\n"],"mappings":"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"}

package/dist/extensions/image/uploads.js

@@ -0,0 +1,96 @@
+import { createId, warnOnce } from "../../core/model.js";
+import { blockAround, findBlockById } from "../../core/blocks.js";
+import { reactive } from "vue";
+// src/extensions/image/uploads.ts
+/** Without an uploader the image is kept in the document as a data URL. */
+var readAsDataUrl = (file) => new Promise((resolve, reject) => {
+	const reader = new FileReader();
+	reader.addEventListener("load", () => resolve(String(reader.result)));
+	reader.addEventListener("error", () => reject(reader.error));
+	reader.readAsDataURL(file);
+});
+/** Image addresses that are safe to show: web, relative, and images held in the page. */
+function isSafeImageSrc(src) {
+	const value = src.replace(/[\u0000- ]/g, "");
+	const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(value)?.[1]?.toLowerCase();
+	if (!scheme) return true;
+	if (scheme === "data") return /^data:image\//i.test(value);
+	return [
+		"http",
+		"https",
+		"blob"
+	].includes(scheme);
+}
+var imageTarget = {
+	type: "image",
+	isSafe: (src) => isSafeImageSrc(src),
+	allowed: "http, https, blob, relative addresses or data:image/ URLs"
+};
+function setAttrs(view, id, type, attrs) {
+	const block = findBlockById(view.state.doc, id);
+	if (!block || block.content.type.name !== type) return;
+	const tr = view.state.tr.setNodeMarkup(block.contentPos, void 0, {
+		...block.content.attrs,
+		...attrs
+	});
+	tr.setMeta("addToHistory", false);
+	view.dispatch(tr);
+}
+/**
+* Uploads in progress, by block id. They live outside the document: only
+* the finished address is written into it, so other collaborators never
+* see a half-done image.
+*/
+function createUploads(upload, target = imageTarget) {
+	const items = reactive(/* @__PURE__ */ new Map());
+	const setSrc = (view, id, src) => setAttrs(view, id, target.type, { src });
+	/** Upload a file into the block `id`; `describe` writes its props (name, size) first. */
+	function start(view, id, file, describe = true) {
+		if (describe && target.propsOf) setAttrs(view, id, target.type, target.propsOf(file));
+		const old = items.get(id);
+		if (old) URL.revokeObjectURL(old.preview);
+		const preview = URL.createObjectURL(file);
+		items.set(id, {
+			preview,
+			failed: false
+		});
+		upload(file).then((src) => {
+			if (!target.isSafe(src)) {
+				const message = `the ${target.type} upload returned "${src}", which is not allowed: use ${target.allowed}`;
+				warnOnce(message);
+				throw new Error(`[@dou-ui/editor] ${message}`);
+			}
+			setSrc(view, id, src);
+			items.delete(id);
+			URL.revokeObjectURL(preview);
+		}).catch(() => {
+			if (items.get(id)?.preview === preview) items.set(id, {
+				preview,
+				failed: true
+			});
+		});
+	}
+	/** Insert one block per file after the block at `pos` and upload them; returns a position in the last one. */
+	function insert(view, files, pos) {
+		const { schema } = view.state;
+		const info = blockAround(view.state.doc.resolve(Math.min(pos, view.state.doc.content.size)));
+		const tr = view.state.tr;
+		const ids = files.map(() => createId());
+		const blocks = ids.map((id, index) => schema.nodes.block.create({ id }, schema.nodes[target.type].create(target.propsOf?.(files[index]) ?? null)));
+		if (!info) tr.insert(view.state.doc.content.size, blocks);
+		else if (info.content.type.name === "paragraph" && info.content.content.size === 0 && !info.group) tr.replaceWith(info.pos, info.pos + info.node.nodeSize, blocks);
+		else tr.insert(info.pos + info.node.nodeSize, blocks);
+		view.dispatch(tr.scrollIntoView());
+		files.forEach((file, index) => start(view, ids[index], file, false));
+		return findBlockById(view.state.doc, ids.at(-1))?.contentPos ?? pos;
+	}
+	return {
+		items,
+		start,
+		insert,
+		setSrc
+	};
+}
+export { createUploads, isSafeImageSrc, readAsDataUrl };
+
+//# sourceMappingURL=uploads.js.map

package/dist/extensions/image/uploads.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uploads.js","names":[],"sources":["../../../src/extensions/image/uploads.ts"],"sourcesContent":["import type { Node as PMNode } from 'prosemirror-model'\nimport type { EditorView } from 'prosemirror-view'\nimport { reactive } from 'vue'\nimport { blockAround, findBlockById } from '../../core/blocks'\nimport { createId, warnOnce } from '../../core/model'\n\n/** Stores a picked, pasted or dropped file (an image or an attachment) and resolves with its address. */\nexport type FileUploader = (file: File) => Promise<string>\n\n/** Without an uploader the image is kept in the document as a data URL. */\nexport const readAsDataUrl: FileUploader = (file) =>\n  new Promise((resolve, reject) => {\n    const reader = new FileReader()\n    reader.addEventListener('load', () => resolve(String(reader.result)))\n    reader.addEventListener('error', () => reject(reader.error))\n    reader.readAsDataURL(file)\n  })\n\n/** Image addresses that are safe to show: web, relative, and images held in the page. */\nexport function isSafeImageSrc(src: string): boolean {\n  // eslint-disable-next-line no-control-regex\n  const value = src.replace(/[\\u0000- ]/g, '')\n  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(value)?.[1]?.toLowerCase()\n  if (!scheme) return true\n  // an image element never runs scripts, so SVG is fine here too\n  if (scheme === 'data') return /^data:image\\//i.test(value)\n  return ['http', 'https', 'blob'].includes(scheme)\n}\n\nexport interface Upload {\n  /** A local copy shown while uploading. */\n  preview: string\n  failed: boolean\n}\n\n/** What blocks hold uploaded files: an image or an attachment. */\nexport interface UploadTarget {\n  /** The block type. */\n  type: string\n  /** Whether an uploader's address may be stored. */\n  isSafe: (src: string) => boolean\n  /** Props taken from the file when it is picked, e.g. its name and size. */\n  propsOf?: (file: File) => Record<string, unknown>\n  /** The addresses `isSafe` takes, for the warning when an uploader returns another. */\n  allowed: string\n}\n\nconst imageTarget: UploadTarget = {\n  type: 'image',\n  isSafe: (src) => isSafeImageSrc(src),\n  allowed: 'http, https, blob, relative addresses or data:image/ URLs',\n}\n\nfunction setAttrs(view: EditorView, id: string, type: string, attrs: Record<string, unknown>) {\n  const block = findBlockById(view.state.doc, id)\n  if (!block || block.content.type.name !== type) return\n  const tr = view.state.tr.setNodeMarkup(block.contentPos, undefined, {\n    ...block.content.attrs,\n    ...attrs,\n  })\n  // the file appearing is part of adding it, not a step of its own\n  tr.setMeta('addToHistory', false)\n  view.dispatch(tr)\n}\n\n/**\n * Uploads in progress, by block id. They live outside the document: only\n * the finished address is written into it, so other collaborators never\n * see a half-done image.\n */\nexport function createUploads(upload: FileUploader, target: UploadTarget = imageTarget) {\n  const items = reactive(new Map<string, Upload>())\n  const setSrc = (view: EditorView, id: string, src: string) =>\n    setAttrs(view, id, target.type, { src })\n\n  /** Upload a file into the block `id`; `describe` writes its props (name, size) first. */\n  function start(view: EditorView, id: string, file: File, describe = true) {\n    if (describe && target.propsOf) setAttrs(view, id, target.type, target.propsOf(file))\n    const old = items.get(id)\n    if (old) URL.revokeObjectURL(old.preview)\n    const preview = URL.createObjectURL(file)\n    items.set(id, { preview, failed: false })\n    upload(file)\n      .then((src) => {\n        if (!target.isSafe(src)) {\n          const message = `the ${target.type} upload returned \"${src}\", which is not allowed: use ${target.allowed}`\n          warnOnce(message)\n          throw new Error(`[@dou-ui/editor] ${message}`)\n        }\n        setSrc(view, id, src)\n        items.delete(id)\n        URL.revokeObjectURL(preview)\n      })\n      .catch(() => {\n        if (items.get(id)?.preview === preview) items.set(id, { preview, failed: true })\n      })\n  }\n\n  /** Insert one block per file after the block at `pos` and upload them; returns a position in the last one. */\n  function insert(view: EditorView, files: File[], pos: number): number {\n    const { schema } = view.state\n    const info = blockAround(view.state.doc.resolve(Math.min(pos, view.state.doc.content.size)))\n    const tr = view.state.tr\n    const ids = files.map(() => createId())\n    const blocks: PMNode[] = ids.map((id, index) =>\n      schema.nodes.block!.create(\n        { id },\n        schema.nodes[target.type]!.create(target.propsOf?.(files[index]!) ?? null),\n      ),\n    )\n    if (!info) {\n      tr.insert(view.state.doc.content.size, blocks)\n    } else if (\n      info.content.type.name === 'paragraph' &&\n      info.content.content.size === 0 &&\n      !info.group\n    ) {\n      // an empty paragraph makes room for the images\n      tr.replaceWith(info.pos, info.pos + info.node.nodeSize, blocks)\n    } else {\n      tr.insert(info.pos + info.node.nodeSize, blocks)\n    }\n    view.dispatch(tr.scrollIntoView())\n    files.forEach((file, index) => start(view, ids[index]!, file, false))\n    return findBlockById(view.state.doc, ids.at(-1)!)?.contentPos ?? pos\n  }\n\n  return { items, start, insert, setSrc }\n}\n\nexport type Uploads = ReturnType<typeof createUploads>\n"],"mappings":"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"}

package/dist/extensions/list-html.js

@@ -0,0 +1,58 @@
+import { blockElement, splitContainer } from "../core/prepare.js";
+import { indentLines } from "../core/output.js";
+// src/extensions/list-html.ts
+var TASK = /^\s*\[( |x|X)\]\s/;
+/**
+* Lists from other apps nest a list inside an item (`<li>text<ul>…</ul></li>`),
+* but a list item here is a block of text with child blocks. Rewrite them
+* into blocks before parsing, so nesting survives. Task lists
+* (`<li><input type="checkbox">`, or `[ ]` / `[x]` before the text as
+* Markdown writes them) become to-do items.
+*/
+function prepareLists(root) {
+	const outer = Array.from(root.querySelectorAll("ul, ol")).filter((list) => !list.parentElement?.closest("ul, ol"));
+	for (const list of outer) list.replaceWith(...convertList(list));
+}
+function convertList(list) {
+	const doc = list.ownerDocument;
+	const numbered = list.tagName === "OL";
+	const blocks = [];
+	for (const item of Array.from(list.children)) {
+		if (item.tagName !== "LI") continue;
+		let type = numbered ? "numberedItem" : "bulletItem";
+		const data = {};
+		const checkbox = item.querySelector(":scope > input[type=\"checkbox\"], :scope > p > input[type=\"checkbox\"]");
+		if (checkbox) {
+			type = "checkItem";
+			data.checked = String(checkbox.checked || checkbox.hasAttribute("checked"));
+			checkbox.remove();
+		} else {
+			const text = firstText(item);
+			const match = text && TASK.exec(text.data);
+			if (text && match) {
+				type = "checkItem";
+				data.checked = String(match[1] !== " ");
+				text.data = text.data.slice(match[0].length);
+			}
+		}
+		for (const nested of Array.from(item.children)) if (nested.tagName === "UL" || nested.tagName === "OL") nested.replaceWith(...convertList(nested));
+		const { content, children } = splitContainer(item);
+		blocks.push(blockElement(doc, type, content, children, data));
+	}
+	return blocks;
+}
+function firstText(item) {
+	const walker = item.ownerDocument.createTreeWalker(item, NodeFilter.SHOW_TEXT);
+	for (let node = walker.nextNode(); node; node = walker.nextNode()) if (node.textContent?.trim()) return node;
+	return null;
+}
+/** A list item in Markdown: the marker, the text, and the children indented under it. */
+function listItemMarkdown(marker, { content, children }) {
+	const width = marker.startsWith("- [") ? 2 : marker.length;
+	const item = indentLines(content, marker, " ".repeat(width));
+	if (!children) return item;
+	return `${item}${/^([-*+]|\d+[.)])( |$)/.test(children) ? "\n" : "\n\n"}${indentLines(children, " ".repeat(width))}`;
+}
+export { listItemMarkdown, prepareLists };
+
+//# sourceMappingURL=list-html.js.map

package/dist/extensions/list-html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-html.js","names":[],"sources":["../../src/extensions/list-html.ts"],"sourcesContent":["import { indentLines, type BlockOutputContext } from '../core/output'\nimport { blockElement, splitContainer } from '../core/prepare'\n\nconst TASK = /^\\s*\\[( |x|X)\\]\\s/\n\n/**\n * Lists from other apps nest a list inside an item (`<li>text<ul>…</ul></li>`),\n * but a list item here is a block of text with child blocks. Rewrite them\n * into blocks before parsing, so nesting survives. Task lists\n * (`<li><input type=\"checkbox\">`, or `[ ]` / `[x]` before the text as\n * Markdown writes them) become to-do items.\n */\nexport function prepareLists(root: HTMLElement) {\n  const outer = Array.from(root.querySelectorAll('ul, ol')).filter(\n    (list) => !list.parentElement?.closest('ul, ol'),\n  )\n  for (const list of outer) list.replaceWith(...convertList(list))\n}\n\nfunction convertList(list: Element): HTMLElement[] {\n  const doc = list.ownerDocument\n  const numbered = list.tagName === 'OL'\n  const blocks: HTMLElement[] = []\n  for (const item of Array.from(list.children)) {\n    if (item.tagName !== 'LI') continue\n    let type = numbered ? 'numberedItem' : 'bulletItem'\n    const data: Record<string, string> = {}\n    const checkbox = item.querySelector(\n      ':scope > input[type=\"checkbox\"], :scope > p > input[type=\"checkbox\"]',\n    )\n    if (checkbox) {\n      type = 'checkItem'\n      data.checked = String(\n        (checkbox as HTMLInputElement).checked || checkbox.hasAttribute('checked'),\n      )\n      checkbox.remove()\n    } else {\n      const text = firstText(item)\n      const match = text && TASK.exec(text.data)\n      if (text && match) {\n        type = 'checkItem'\n        data.checked = String(match[1] !== ' ')\n        text.data = text.data.slice(match[0].length)\n      }\n    }\n    // the first paragraph is the item's text; what follows becomes its children\n    for (const nested of Array.from(item.children))\n      if (nested.tagName === 'UL' || nested.tagName === 'OL')\n        nested.replaceWith(...convertList(nested))\n    const { content, children } = splitContainer(item)\n    blocks.push(blockElement(doc, type, content, children, data))\n  }\n  return blocks\n}\n\nfunction firstText(item: Element): Text | null {\n  const walker = item.ownerDocument.createTreeWalker(item, NodeFilter.SHOW_TEXT)\n  for (let node = walker.nextNode(); node; node = walker.nextNode()) {\n    if (node.textContent?.trim()) return node as Text\n  }\n  return null\n}\n\n/** A list item in Markdown: the marker, the text, and the children indented under it. */\nexport function listItemMarkdown(marker: string, { content, children }: BlockOutputContext) {\n  // a checkbox marker indents its children like the bullet in front of it\n  const width = marker.startsWith('- [') ? 2 : marker.length\n  const item = indentLines(content, marker, ' '.repeat(width))\n  if (!children) return item\n  // a nested list follows right after; other blocks need a blank line, or they join the text\n  const gap = /^([-*+]|\\d+[.)])( |$)/.test(children) ? '\\n' : '\\n\\n'\n  return `${item}${gap}${indentLines(children, ' '.repeat(width))}`\n}\n"],"mappings":";;;AAGA,IAAM,OAAO;;;;;;;;AASb,SAAgB,aAAa,MAAmB;CAC9C,MAAM,QAAQ,MAAM,KAAK,KAAK,iBAAiB,QAAQ,CAAC,CAAC,CAAC,QACvD,SAAS,CAAC,KAAK,eAAe,QAAQ,QAAQ,CACjD;CACA,KAAK,MAAM,QAAQ,OAAO,KAAK,YAAY,GAAG,YAAY,IAAI,CAAC;AACjE;AAEA,SAAS,YAAY,MAA8B;CACjD,MAAM,MAAM,KAAK;CACjB,MAAM,WAAW,KAAK,YAAY;CAClC,MAAM,SAAwB,CAAC;CAC/B,KAAK,MAAM,QAAQ,MAAM,KAAK,KAAK,QAAQ,GAAG;EAC5C,IAAI,KAAK,YAAY,MAAM;EAC3B,IAAI,OAAO,WAAW,iBAAiB;EACvC,MAAM,OAA+B,CAAC;EACtC,MAAM,WAAW,KAAK,cACpB,0EACF;EACA,IAAI,UAAU;GACZ,OAAO;GACP,KAAK,UAAU,OACZ,SAA8B,WAAW,SAAS,aAAa,SAAS,CAC3E;GACA,SAAS,OAAO;EAClB,OAAO;GACL,MAAM,OAAO,UAAU,IAAI;GAC3B,MAAM,QAAQ,QAAQ,KAAK,KAAK,KAAK,IAAI;GACzC,IAAI,QAAQ,OAAO;IACjB,OAAO;IACP,KAAK,UAAU,OAAO,MAAM,OAAO,GAAG;IACtC,KAAK,OAAO,KAAK,KAAK,MAAM,MAAM,EAAE,CAAC,MAAM;GAC7C;EACF;EAEA,KAAK,MAAM,UAAU,MAAM,KAAK,KAAK,QAAQ,GAC3C,IAAI,OAAO,YAAY,QAAQ,OAAO,YAAY,MAChD,OAAO,YAAY,GAAG,YAAY,MAAM,CAAC;EAC7C,MAAM,EAAE,SAAS,aAAa,eAAe,IAAI;EACjD,OAAO,KAAK,aAAa,KAAK,MAAM,SAAS,UAAU,IAAI,CAAC;CAC9D;CACA,OAAO;AACT;AAEA,SAAS,UAAU,MAA4B;CAC7C,MAAM,SAAS,KAAK,cAAc,iBAAiB,MAAM,WAAW,SAAS;CAC7E,KAAK,IAAI,OAAO,OAAO,SAAS,GAAG,MAAM,OAAO,OAAO,SAAS,GAC9D,IAAI,KAAK,aAAa,KAAK,GAAG,OAAO;CAEvC,OAAO;AACT;;AAGA,SAAgB,iBAAiB,QAAgB,EAAE,SAAS,YAAgC;CAE1F,MAAM,QAAQ,OAAO,WAAW,KAAK,IAAI,IAAI,OAAO;CACpD,MAAM,OAAO,YAAY,SAAS,QAAQ,IAAI,OAAO,KAAK,CAAC;CAC3D,IAAI,CAAC,UAAU,OAAO;CAGtB,OAAO,GAAG,OADE,wBAAwB,KAAK,QAAQ,IAAI,OAAO,SACrC,YAAY,UAAU,IAAI,OAAO,KAAK,CAAC;AAChE"}