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

package/dist/components/bubble-toolbar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,381 @@
+import { blockFromNode } from "../core/model.js";
+import { isSafeHref } from "../core/schema.js";
+import { labelOf } from "../core/extension.js";
+import { isCurrent } from "../catalog.js";
+import { blockAround } from "../core/blocks.js";
+import { setBlockType } from "../core/commands.js";
+import { getBlockSelection } from "../core/block-selection.js";
+import { editorKey, provideToolbarMenus } from "../editor.js";
+import { DouButton, DouDropdown, DouDropdownItem, DouInput, DouToggle, DouToggleGroup, DouToolbar, DouToolbarSeparator, DouTooltip, isComposing, useFloating, useZIndex } from "dou-ui";
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createSlots, createTextVNode, createVNode, defineComponent, inject, nextTick, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderList, resolveDynamicComponent, shallowRef, toDisplayString, unref, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+import { TextSelection } from "prosemirror-state";
+import { CheckIcon, ChevronDownIcon, LinkIcon, MessagePlusIcon, UnlinkIcon } from "@dou-ui/icons";
+import { toggleMark } from "prosemirror-commands";
+// src/components/bubble-toolbar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-placement"];
+var _hoisted_2 = {
+	key: 0,
+	class: "dou-editor-bubble__link"
+};
+var bubble_toolbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "bubble-toolbar",
+	setup(__props, { expose: __expose }) {
+		const { view, state, focused, dragging, messages, kit, comments } = inject(editorKey);
+		const panel = useTemplateRef("panel");
+		const pressing = shallowRef(false);
+		const menuOpen = shallowRef(false);
+		const toolbarMenus = provideToolbarMenus();
+		const panelFocused = shallowRef(false);
+		watch(focused, (value) => value && (panelFocused.value = false));
+		function onPanelFocusOut(event) {
+			if (!panel.value?.contains(event.relatedTarget)) panelFocused.value = false;
+		}
+		function onPanelKeyDown(event) {
+			if (event.key !== "Escape" || linking.value || event.defaultPrevented) return;
+			event.preventDefault();
+			view.value?.focus();
+		}
+		const linking = shallowRef(null);
+		const href = shallowRef("");
+		const linkInput = useTemplateRef("linkInput");
+		const formattable = computed(() => {
+			const current = state.value;
+			if (!current || getBlockSelection(current)) return false;
+			const { selection } = current;
+			if (!(selection instanceof TextSelection) || selection.empty) return false;
+			let text = false;
+			current.doc.nodesBetween(selection.from, selection.to, (node) => {
+				if (node.isTextblock && !node.type.spec.code) text = true;
+				return !text;
+			});
+			return text;
+		});
+		const open = computed(() => !!linking.value || menuOpen.value || [...toolbarMenus].some((menu) => menu.value) || panelFocused.value || focused.value && formattable.value && !pressing.value && !dragging.value);
+		const anchor = { getBoundingClientRect() {
+			const current = view.value;
+			const range = linking.value ?? current?.state.selection;
+			if (!current || !range) return new DOMRect();
+			const start = current.coordsAtPos(range.from, 1);
+			const end = current.coordsAtPos(range.to, -1);
+			const sameLine = Math.abs(start.top - end.top) < 4;
+			const left = sameLine ? start.left : start.left;
+			const right = sameLine ? end.right : Math.max(start.left + 1, current.dom.getBoundingClientRect().right);
+			return new DOMRect(left, start.top, Math.max(1, right - left), start.bottom - start.top);
+		} };
+		const { style, placement, update } = useFloating(() => open.value ? anchor : null, panel, {
+			open,
+			placement: "top",
+			offset: 8
+		});
+		const { next } = useZIndex();
+		const zIndex = shallowRef(0);
+		watch(open, (value) => value && (zIndex.value = next()), { immediate: true });
+		watch(state, () => open.value && void nextTick(update));
+		function onPointerDown(event) {
+			if (event.button === 0 && view.value?.dom.contains(event.target)) pressing.value = true;
+		}
+		function onPointerUp() {
+			if (pressing.value) pressing.value = false;
+		}
+		function onKeyDown(event) {
+			if (!view.value?.dom.contains(event.target)) return;
+			const trigger = panel.value?.querySelector("[aria-expanded=\"true\"][aria-controls]");
+			if (!trigger) return;
+			const menu = document.getElementById(trigger.getAttribute("aria-controls"));
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				menuOpen.value = false;
+				for (const item of toolbarMenus) item.value = false;
+				return;
+			}
+			if (!menu || ![
+				"ArrowDown",
+				"ArrowUp",
+				"Home",
+				"End",
+				"Enter"
+			].includes(event.key)) return;
+			event.preventDefault();
+			event.stopPropagation();
+			const items = Array.from(menu.querySelectorAll("[role^=\"menuitem\"]:not([aria-disabled=\"true\"])"));
+			(event.key === "ArrowUp" || event.key === "End" ? items.at(-1) : items[0])?.focus();
+		}
+		onMounted(() => {
+			document.addEventListener("pointerdown", onPointerDown, true);
+			document.addEventListener("pointerup", onPointerUp, true);
+			document.addEventListener("keydown", onKeyDown, true);
+		});
+		onBeforeUnmount(() => {
+			document.removeEventListener("pointerdown", onPointerDown, true);
+			document.removeEventListener("pointerup", onPointerUp, true);
+			document.removeEventListener("keydown", onKeyDown, true);
+		});
+		const schema = kit.schema;
+		const marks = kit.formats.filter((format) => schema.marks[format.mark]);
+		const active = computed(() => {
+			const current = state.value;
+			if (!current) return [];
+			const { from, to } = current.selection;
+			return marks.filter((mark) => current.doc.rangeHasMark(from, to, schema.marks[mark.mark])).map((mark) => mark.mark);
+		});
+		function onMarks(value) {
+			const pressed = Array.isArray(value) ? value : [];
+			const changed = marks.find((mark) => pressed.includes(mark.mark) !== active.value.includes(mark.mark));
+			const current = view.value;
+			if (!changed || !current) return;
+			toggleMark(schema.marks[changed.mark])(current.state, current.dispatch);
+		}
+		const turnOptions = kit.blockOptions.filter((option) => !!kit.schema.nodes[option.type]?.isTextblock);
+		const currentBlock = computed(() => {
+			const current = state.value;
+			const info = current && blockAround(current.selection.$from);
+			return info ? blockFromNode(info.node) : null;
+		});
+		const turnable = computed(() => {
+			const $from = state.value?.selection.$from;
+			return !!$from && $from.depth > 0 && $from.node($from.depth - 1).type.name === "block";
+		});
+		const currentOption = computed(() => {
+			const block = currentBlock.value;
+			return block ? turnOptions.find((option) => isCurrent(option, block.type, block.props)) : void 0;
+		});
+		function turnInto(option) {
+			const current = view.value;
+			if (!current) return;
+			setBlockType(option.type, option.props)(current.state, current.dispatch);
+			requestAnimationFrame(() => current.focus());
+		}
+		const linkMark = schema.marks.link;
+		const currentHref = computed(() => {
+			const current = state.value;
+			if (!current) return "";
+			const { from, to } = current.selection;
+			let found = "";
+			current.doc.nodesBetween(from, to, (node) => {
+				const mark = linkMark?.isInSet(node.marks);
+				if (mark) found ||= mark.attrs.href;
+			});
+			return found;
+		});
+		/** `Mod+K` and the link button: edit the link of the selected text. */
+		function editLink() {
+			const current = view.value;
+			if (!current || !linkMark || !formattable.value) return false;
+			const { from, to } = current.state.selection;
+			linking.value = {
+				from,
+				to
+			};
+			href.value = currentHref.value;
+			nextTick(() => linkInput.value?.focus());
+			return true;
+		}
+		/** `example.com` becomes `https://example.com`; other relative links stay. */
+		function normalise(value) {
+			const text = value.trim();
+			if (/^[\w-]+(\.[\w-]+)+(?:[/?#:]|$)/.test(text) && !text.includes(" ")) return `https://${text}`;
+			return text;
+		}
+		function applyLink() {
+			const current = view.value;
+			const range = linking.value;
+			if (!current || !range || !linkMark) return;
+			const value = normalise(href.value);
+			const tr = current.state.tr.removeMark(range.from, range.to, linkMark);
+			if (value && isSafeHref(value)) tr.addMark(range.from, range.to, linkMark.create({ href: value }));
+			current.dispatch(tr);
+			closeLink();
+		}
+		function removeLink() {
+			href.value = "";
+			applyLink();
+		}
+		function closeLink() {
+			const current = view.value;
+			const range = linking.value;
+			linking.value = null;
+			if (!current) return;
+			if (range) current.dispatch(current.state.tr.setSelection(TextSelection.create(current.state.doc, range.from, range.to)));
+			current.focus();
+		}
+		function onLinkKey(event) {
+			if (isComposing(event)) return;
+			if (event.key === "Enter") {
+				event.preventDefault();
+				applyLink();
+			} else if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				closeLink();
+			}
+		}
+		function onLinkBlur(event) {
+			if (!panel.value?.contains(event.relatedTarget)) linking.value = null;
+		}
+		__expose({ editLink });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Transition, { name: "dou-floating" }, {
+				default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "panel",
+					ref: panel,
+					class: "dou-floating dou-editor-bubble",
+					style: normalizeStyle([unref(style), { zIndex: zIndex.value }]),
+					"data-placement": unref(placement),
+					onMousedown: _cache[5] || (_cache[5] = ($event) => !linking.value && $event.preventDefault()),
+					onFocusin: _cache[6] || (_cache[6] = ($event) => panelFocused.value = true),
+					onFocusout: onPanelFocusOut,
+					onKeydown: onPanelKeyDown
+				}, [linking.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+					createVNode(unref(DouInput), {
+						ref_key: "linkInput",
+						ref: linkInput,
+						modelValue: href.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => href.value = $event),
+						size: "sm",
+						placeholder: unref(messages).linkPlaceholder,
+						"aria-label": unref(messages).link,
+						onKeydown: onLinkKey,
+						onBlur: onLinkBlur
+					}, {
+						prefix: withCtx(() => [createVNode(unref(LinkIcon))]),
+						_: 1
+					}, 8, [
+						"modelValue",
+						"placeholder",
+						"aria-label"
+					]),
+					createVNode(unref(DouButton), {
+						size: "sm",
+						variant: "ghost",
+						"aria-label": unref(messages).applyLink,
+						onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+						onClick: applyLink
+					}, {
+						default: withCtx(() => [createVNode(unref(CheckIcon))]),
+						_: 1
+					}, 8, ["aria-label"]),
+					currentHref.value ? (openBlock(), createBlock(unref(DouButton), {
+						key: 0,
+						size: "sm",
+						variant: "ghost",
+						"aria-label": unref(messages).removeLink,
+						onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+						onClick: removeLink
+					}, {
+						default: withCtx(() => [createVNode(unref(UnlinkIcon))]),
+						_: 1
+					}, 8, ["aria-label"])) : createCommentVNode("", true)
+				])) : (openBlock(), createBlock(unref(DouToolbar), {
+					key: 1,
+					size: "sm",
+					"aria-label": unref(messages).formatting
+				}, {
+					default: withCtx(() => [
+						turnable.value ? (openBlock(), createBlock(unref(DouDropdown), {
+							key: 0,
+							open: menuOpen.value,
+							"onUpdate:open": _cache[3] || (_cache[3] = ($event) => menuOpen.value = $event),
+							placement: "bottom-start",
+							class: "dou-editor-menu"
+						}, {
+							menu: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(turnOptions), (option) => {
+								return openBlock(), createBlock(unref(DouDropdownItem), {
+									key: option.key,
+									onClick: ($event) => turnInto(option)
+								}, createSlots({
+									prefix: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(option.icon)))]),
+									default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(labelOf)(option.label, unref(messages))) + " ", 1)]),
+									_: 2
+								}, [option === currentOption.value ? {
+									name: "suffix",
+									fn: withCtx(() => [createVNode(unref(CheckIcon))]),
+									key: "0"
+								} : void 0]), 1032, ["onClick"]);
+							}), 128))]),
+							default: withCtx(() => [createVNode(unref(DouButton), {
+								size: "sm",
+								variant: "ghost",
+								class: "dou-editor-bubble__type"
+							}, {
+								trailing: withCtx(() => [createVNode(unref(ChevronDownIcon))]),
+								default: withCtx(() => [createTextVNode(toDisplayString(currentOption.value ? unref(labelOf)(currentOption.value.label, unref(messages)) : unref(messages).turnInto) + " ", 1)]),
+								_: 1
+							})]),
+							_: 1
+						}, 8, ["open"])) : createCommentVNode("", true),
+						turnable.value && unref(marks).length ? (openBlock(), createBlock(unref(DouToolbarSeparator), { key: 1 })) : createCommentVNode("", true),
+						unref(marks).length ? (openBlock(), createBlock(unref(DouToggleGroup), {
+							key: 2,
+							type: "multiple",
+							"model-value": active.value,
+							"aria-label": unref(messages).formatting,
+							"onUpdate:modelValue": onMarks
+						}, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(marks), (mark) => {
+								return openBlock(), createBlock(unref(DouTooltip), {
+									key: mark.mark,
+									content: unref(labelOf)(mark.label, unref(messages)),
+									shortcut: mark.hotkey,
+									placement: "bottom"
+								}, {
+									default: withCtx(() => [createVNode(unref(DouToggle), {
+										value: mark.mark,
+										"aria-label": unref(labelOf)(mark.label, unref(messages))
+									}, {
+										default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(mark.icon)))]),
+										_: 2
+									}, 1032, ["value", "aria-label"])]),
+									_: 2
+								}, 1032, ["content", "shortcut"]);
+							}), 128))]),
+							_: 1
+						}, 8, ["model-value", "aria-label"])) : createCommentVNode("", true),
+						unref(kit).toolbar.length ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [unref(marks).length ? (openBlock(), createBlock(unref(DouToolbarSeparator), { key: 0 })) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(kit).toolbar, (control, index) => {
+							return openBlock(), createBlock(resolveDynamicComponent(control), { key: index });
+						}), 128))], 64)) : createCommentVNode("", true),
+						unref(linkMark) ? (openBlock(), createBlock(unref(DouToolbarSeparator), { key: 4 })) : createCommentVNode("", true),
+						unref(linkMark) ? (openBlock(), createBlock(unref(DouTooltip), {
+							key: 5,
+							content: unref(messages).link,
+							shortcut: "mod+k",
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createVNode(unref(DouToggle), {
+								pressed: !!currentHref.value,
+								"aria-label": unref(messages).link,
+								"onUpdate:pressed": editLink
+							}, {
+								default: withCtx(() => [createVNode(unref(LinkIcon))]),
+								_: 1
+							}, 8, ["pressed", "aria-label"])]),
+							_: 1
+						}, 8, ["content"])) : createCommentVNode("", true),
+						unref(comments).writable.value ? (openBlock(), createElementBlock(Fragment, { key: 6 }, [createVNode(unref(DouToolbarSeparator)), createVNode(unref(DouTooltip), {
+							content: unref(messages).comment,
+							shortcut: "mod+alt+m",
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createVNode(unref(DouButton), {
+								size: "sm",
+								variant: "ghost",
+								"aria-label": unref(messages).comment,
+								onClick: _cache[4] || (_cache[4] = ($event) => unref(comments).start())
+							}, {
+								default: withCtx(() => [createVNode(unref(MessagePlusIcon))]),
+								_: 1
+							}, 8, ["aria-label"])]),
+							_: 1
+						}, 8, ["content"])], 64)) : createCommentVNode("", true)
+					]),
+					_: 1
+				}, 8, ["aria-label"]))], 44, _hoisted_1)) : createCommentVNode("", true)]),
+				_: 1
+			});
+		};
+	}
+});
+export { bubble_toolbar_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=bubble-toolbar.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/bubble-toolbar.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubble-toolbar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_Transition","_withCtx","_createElementBlock","_normalizeStyle","_unref","_createVNode","_withModifiers","_createCommentVNode","_Fragment","_renderList","_createSlots","_resolveDynamicComponent","_createTextVNode","_toDisplayString"],"sources":["../../src/components/bubble-toolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CheckIcon, ChevronDownIcon, LinkIcon, MessagePlusIcon, UnlinkIcon } from '@dou-ui/icons'\nimport {\n  DouButton,\n  DouDropdown,\n  DouDropdownItem,\n  DouInput,\n  DouToggle,\n  DouToggleGroup,\n  DouToolbar,\n  DouToolbarSeparator,\n  DouTooltip,\n  isComposing,\n  useFloating,\n  useZIndex,\n  type ToggleValue,\n  type VirtualElement,\n} from 'dou-ui'\nimport { toggleMark } from 'prosemirror-commands'\nimport { TextSelection } from 'prosemirror-state'\nimport {\n  computed,\n  inject,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\nimport { isCurrent } from '../catalog'\nimport { labelOf, type BlockOption } from '../core/extension'\nimport { getBlockSelection } from '../core/block-selection'\nimport { blockAround } from '../core/blocks'\nimport { setBlockType } from '../core/commands'\nimport { blockFromNode } from '../core/model'\nimport { isSafeHref } from '../core/schema'\nimport { editorKey, provideToolbarMenus } from '../editor'\n\nconst { view, state, focused, dragging, messages, kit, comments } = inject(editorKey)!\nconst panel = useTemplateRef<HTMLElement>('panel')\n\n// while the pointer is down the selection is still being made\nconst pressing = shallowRef(false)\nconst menuOpen = shallowRef(false)\n// the extensions' menus keep the toolbar too\nconst toolbarMenus = provideToolbarMenus()\n// so does the focus in the toolbar, e.g. back on a menu's button after Escape\nconst panelFocused = shallowRef(false)\nwatch(focused, (value) => value && (panelFocused.value = false))\nfunction onPanelFocusOut(event: FocusEvent) {\n  if (!panel.value?.contains(event.relatedTarget as Node | null)) panelFocused.value = false\n}\nfunction onPanelKeyDown(event: KeyboardEvent) {\n  if (event.key !== 'Escape' || linking.value || event.defaultPrevented) return\n  event.preventDefault()\n  view.value?.focus()\n}\nconst linking = shallowRef<{ from: number; to: number } | null>(null)\nconst href = shallowRef('')\nconst linkInput = useTemplateRef<InstanceType<typeof DouInput>>('linkInput')\n\nconst formattable = computed(() => {\n  const current = state.value\n  if (!current || getBlockSelection(current)) return false\n  const { selection } = current\n  if (!(selection instanceof TextSelection) || selection.empty) return false\n  // nothing to format in code, or across a divider only\n  let text = false\n  current.doc.nodesBetween(selection.from, selection.to, (node) => {\n    if (node.isTextblock && !node.type.spec.code) text = true\n    return !text\n  })\n  return text\n})\n\nconst open = computed(\n  () =>\n    !!linking.value ||\n    menuOpen.value ||\n    [...toolbarMenus].some((menu) => menu.value) ||\n    panelFocused.value ||\n    (focused.value && formattable.value && !pressing.value && !dragging.value),\n)\n\nconst anchor: VirtualElement = {\n  getBoundingClientRect() {\n    const current = view.value\n    const range = linking.value ?? current?.state.selection\n    if (!current || !range) return new DOMRect()\n    const start = current.coordsAtPos(range.from, 1)\n    const end = current.coordsAtPos(range.to, -1)\n    // a selection over several lines: centre on the first one\n    const sameLine = Math.abs(start.top - end.top) < 4\n    const left = sameLine ? start.left : start.left\n    const right = sameLine\n      ? end.right\n      : Math.max(start.left + 1, current.dom.getBoundingClientRect().right)\n    return new DOMRect(left, start.top, Math.max(1, right - left), start.bottom - start.top)\n  },\n}\nconst { style, placement, update } = useFloating(() => (open.value ? anchor : null), panel, {\n  open,\n  placement: 'top',\n  offset: 8,\n})\n// stacked like DouUI's own popups, above whatever opened before\nconst { next } = useZIndex()\nconst zIndex = shallowRef(0)\nwatch(open, (value) => value && (zIndex.value = next()), { immediate: true })\nwatch(state, () => open.value && void nextTick(update))\n\nfunction onPointerDown(event: PointerEvent) {\n  if (event.button === 0 && view.value?.dom.contains(event.target as Node)) pressing.value = true\n}\nfunction onPointerUp() {\n  if (pressing.value) pressing.value = false\n}\n/*\n * A menu opened with the mouse leaves the focus in the text: until it\n * closes, Escape closes it and the arrow keys and Enter go into it,\n * instead of acting on the text.\n */\nfunction onKeyDown(event: KeyboardEvent) {\n  if (!view.value?.dom.contains(event.target as Node)) return\n  const trigger = panel.value?.querySelector<HTMLElement>('[aria-expanded=\"true\"][aria-controls]')\n  if (!trigger) return\n  const menu = document.getElementById(trigger.getAttribute('aria-controls')!)\n  if (event.key === 'Escape') {\n    event.preventDefault()\n    event.stopPropagation()\n    menuOpen.value = false\n    for (const item of toolbarMenus) item.value = false\n    return\n  }\n  if (!menu || !['ArrowDown', 'ArrowUp', 'Home', 'End', 'Enter'].includes(event.key)) return\n  event.preventDefault()\n  event.stopPropagation()\n  const items = Array.from(\n    menu.querySelectorAll<HTMLElement>('[role^=\"menuitem\"]:not([aria-disabled=\"true\"])'),\n  )\n  const last = event.key === 'ArrowUp' || event.key === 'End'\n  ;(last ? items.at(-1) : items[0])?.focus()\n}\n\nonMounted(() => {\n  document.addEventListener('pointerdown', onPointerDown, true)\n  document.addEventListener('pointerup', onPointerUp, true)\n  document.addEventListener('keydown', onKeyDown, true)\n})\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onPointerDown, true)\n  document.removeEventListener('pointerup', onPointerUp, true)\n  document.removeEventListener('keydown', onKeyDown, true)\n})\n\n/* marks */\n\nconst schema = kit.schema\nconst marks = kit.formats.filter((format) => schema.marks[format.mark])\n\nconst active = computed<ToggleValue[]>(() => {\n  const current = state.value\n  if (!current) return []\n  const { from, to } = current.selection\n  return marks\n    .filter((mark) => current.doc.rangeHasMark(from, to, schema.marks[mark.mark]!))\n    .map((mark) => mark.mark)\n})\n\nfunction onMarks(value: ToggleValue | ToggleValue[] | null) {\n  const pressed = Array.isArray(value) ? value : []\n  const changed = marks.find(\n    (mark) => pressed.includes(mark.mark) !== active.value.includes(mark.mark),\n  )\n  const current = view.value\n  if (!changed || !current) return\n  toggleMark(schema.marks[changed.mark]!)(current.state, current.dispatch)\n}\n\n/* turning the block into another type */\n\nconst turnOptions = kit.blockOptions.filter(\n  (option) => !!kit.schema.nodes[option.type]?.isTextblock,\n)\nconst currentBlock = computed(() => {\n  const current = state.value\n  const info = current && blockAround(current.selection.$from)\n  return info ? blockFromNode(info.node) : null\n})\n// text inside a table cell keeps its cell; only whole blocks change type\nconst turnable = computed(() => {\n  const $from = state.value?.selection.$from\n  return !!$from && $from.depth > 0 && $from.node($from.depth - 1).type.name === 'block'\n})\nconst currentOption = computed(() => {\n  const block = currentBlock.value\n  return block\n    ? turnOptions.find((option) => isCurrent(option, block.type, block.props))\n    : undefined\n})\n\nfunction turnInto(option: BlockOption) {\n  const current = view.value\n  if (!current) return\n  setBlockType(option.type, option.props)(current.state, current.dispatch)\n  requestAnimationFrame(() => current.focus())\n}\n\n/* links */\n\nconst linkMark = schema.marks.link\nconst currentHref = computed(() => {\n  const current = state.value\n  if (!current) return ''\n  const { from, to } = current.selection\n  let found = ''\n  current.doc.nodesBetween(from, to, (node) => {\n    const mark = linkMark?.isInSet(node.marks)\n    if (mark) found ||= mark.attrs.href as string\n  })\n  return found\n})\n\n/** `Mod+K` and the link button: edit the link of the selected text. */\nfunction editLink(): boolean {\n  const current = view.value\n  if (!current || !linkMark || !formattable.value) return false\n  const { from, to } = current.state.selection\n  linking.value = { from, to }\n  href.value = currentHref.value\n  void nextTick(() => linkInput.value?.focus())\n  return true\n}\n\n/** `example.com` becomes `https://example.com`; other relative links stay. */\nfunction normalise(value: string): string {\n  const text = value.trim()\n  if (/^[\\w-]+(\\.[\\w-]+)+(?:[/?#:]|$)/.test(text) && !text.includes(' ')) return `https://${text}`\n  return text\n}\n\nfunction applyLink() {\n  const current = view.value\n  const range = linking.value\n  if (!current || !range || !linkMark) return\n  const value = normalise(href.value)\n  const tr = current.state.tr.removeMark(range.from, range.to, linkMark)\n  if (value && isSafeHref(value)) tr.addMark(range.from, range.to, linkMark.create({ href: value }))\n  current.dispatch(tr)\n  closeLink()\n}\n\nfunction removeLink() {\n  href.value = ''\n  applyLink()\n}\n\nfunction closeLink() {\n  const current = view.value\n  const range = linking.value\n  linking.value = null\n  if (!current) return\n  if (range)\n    current.dispatch(\n      current.state.tr.setSelection(TextSelection.create(current.state.doc, range.from, range.to)),\n    )\n  current.focus()\n}\n\nfunction onLinkKey(event: KeyboardEvent) {\n  if (isComposing(event)) return\n  if (event.key === 'Enter') {\n    event.preventDefault()\n    applyLink()\n  } else if (event.key === 'Escape') {\n    event.preventDefault()\n    event.stopPropagation()\n    closeLink()\n  }\n}\n\nfunction onLinkBlur(event: FocusEvent) {\n  // leaving for anywhere but the toolbar ends editing without saving\n  if (!panel.value?.contains(event.relatedTarget as Node)) linking.value = null\n}\n\ndefineExpose({ editLink })\n</script>\n\n<template>\n  <Transition name=\"dou-floating\">\n    <div\n      v-if=\"open\"\n      ref=\"panel\"\n      class=\"dou-floating dou-editor-bubble\"\n      :style=\"[style, { zIndex }]\"\n      :data-placement=\"placement\"\n      @mousedown=\"!linking && $event.preventDefault()\"\n      @focusin=\"panelFocused = true\"\n      @focusout=\"onPanelFocusOut\"\n      @keydown=\"onPanelKeyDown\"\n    >\n      <div v-if=\"linking\" class=\"dou-editor-bubble__link\">\n        <DouInput\n          ref=\"linkInput\"\n          v-model=\"href\"\n          size=\"sm\"\n          :placeholder=\"messages.linkPlaceholder\"\n          :aria-label=\"messages.link\"\n          @keydown=\"onLinkKey\"\n          @blur=\"onLinkBlur\"\n        >\n          <template #prefix><LinkIcon /></template>\n        </DouInput>\n        <DouButton\n          size=\"sm\"\n          variant=\"ghost\"\n          :aria-label=\"messages.applyLink\"\n          @mousedown.prevent\n          @click=\"applyLink\"\n        >\n          <CheckIcon />\n        </DouButton>\n        <DouButton\n          v-if=\"currentHref\"\n          size=\"sm\"\n          variant=\"ghost\"\n          :aria-label=\"messages.removeLink\"\n          @mousedown.prevent\n          @click=\"removeLink\"\n        >\n          <UnlinkIcon />\n        </DouButton>\n      </div>\n      <DouToolbar v-else size=\"sm\" :aria-label=\"messages.formatting\">\n        <DouDropdown\n          v-if=\"turnable\"\n          v-model:open=\"menuOpen\"\n          placement=\"bottom-start\"\n          class=\"dou-editor-menu\"\n        >\n          <DouButton size=\"sm\" variant=\"ghost\" class=\"dou-editor-bubble__type\">\n            {{ currentOption ? labelOf(currentOption.label, messages) : messages.turnInto }}\n            <template #trailing><ChevronDownIcon /></template>\n          </DouButton>\n          <template #menu>\n            <DouDropdownItem\n              v-for=\"option in turnOptions\"\n              :key=\"option.key\"\n              @click=\"turnInto(option)\"\n            >\n              <template #prefix><component :is=\"option.icon\" /></template>\n              {{ labelOf(option.label, messages) }}\n              <template v-if=\"option === currentOption\" #suffix><CheckIcon /></template>\n            </DouDropdownItem>\n          </template>\n        </DouDropdown>\n        <DouToolbarSeparator v-if=\"turnable && marks.length\" />\n        <DouToggleGroup\n          v-if=\"marks.length\"\n          type=\"multiple\"\n          :model-value=\"active\"\n          :aria-label=\"messages.formatting\"\n          @update:model-value=\"onMarks\"\n        >\n          <DouTooltip\n            v-for=\"mark in marks\"\n            :key=\"mark.mark\"\n            :content=\"labelOf(mark.label, messages)\"\n            :shortcut=\"mark.hotkey\"\n            placement=\"bottom\"\n          >\n            <DouToggle :value=\"mark.mark\" :aria-label=\"labelOf(mark.label, messages)\">\n              <component :is=\"mark.icon\" />\n            </DouToggle>\n          </DouTooltip>\n        </DouToggleGroup>\n        <template v-if=\"kit.toolbar.length\">\n          <DouToolbarSeparator v-if=\"marks.length\" />\n          <component :is=\"control\" v-for=\"(control, index) in kit.toolbar\" :key=\"index\" />\n        </template>\n        <DouToolbarSeparator v-if=\"linkMark\" />\n        <DouTooltip v-if=\"linkMark\" :content=\"messages.link\" shortcut=\"mod+k\" placement=\"bottom\">\n          <DouToggle\n            :pressed=\"!!currentHref\"\n            :aria-label=\"messages.link\"\n            @update:pressed=\"editLink\"\n          >\n            <LinkIcon />\n          </DouToggle>\n        </DouTooltip>\n        <template v-if=\"comments.writable.value\">\n          <DouToolbarSeparator />\n          <DouTooltip :content=\"messages.comment\" shortcut=\"mod+alt+m\" placement=\"bottom\">\n            <DouButton\n              size=\"sm\"\n              variant=\"ghost\"\n              :aria-label=\"messages.comment\"\n              @click=\"comments.start()\"\n            >\n              <MessagePlusIcon />\n            </DouButton>\n          </DouTooltip>\n        </template>\n      </DouToolbar>\n    </div>\n  </Transition>\n</template>\n"],"mappings":"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"}

package/dist/components/comment-button.js

@@ -0,0 +1,6 @@
+import comment_button_vue_vue_type_script_setup_true_lang_default from "./comment-button.vue_vue_type_script_setup_true_lang.js";
+// src/components/comment-button.vue
+var comment_button_default = comment_button_vue_vue_type_script_setup_true_lang_default;
+export { comment_button_default as default };
+
+//# sourceMappingURL=comment-button.js.map

package/dist/components/comment-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"comment-button.js","names":["_sfc_main"],"sources":["../../src/components/comment-button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MessagePlusIcon } from '@dou-ui/icons'\nimport { DouButton, useFloating, useZIndex, type VirtualElement } from 'dou-ui'\nimport { computed, inject, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'\nimport type { CommentRange } from '../core/comments'\nimport { editorKey } from '../editor'\n\n/*\n * A read-only editor has no formatting toolbar; selecting text there\n * shows this one button, to start a thread on it.\n */\n\nconst { view, comments, messages } = inject(editorKey)!\nconst panel = shallowRef<HTMLElement | null>(null)\nconst range = shallowRef<CommentRange | null>(null)\nconst pressing = shallowRef(false)\n\nconst open = computed(\n  () => !!range.value && !pressing.value && !comments.pending.value && comments.writable.value,\n)\n\nconst anchor: VirtualElement = {\n  getBoundingClientRect() {\n    const current = view.value\n    const at = range.value\n    if (!current || !at) return new DOMRect()\n    const first = current.coordsAtPos(at.from, 1)\n    const last = current.coordsAtPos(at.to, -1)\n    const right = Math.abs(first.top - last.top) < 4 ? last.right : first.left + 1\n    return new DOMRect(\n      first.left,\n      first.top,\n      Math.max(1, right - first.left),\n      first.bottom - first.top,\n    )\n  },\n}\n\nconst { style, placement } = useFloating(() => (open.value ? anchor : null), panel, {\n  open,\n  placement: 'top',\n  offset: 8,\n})\nconst { next } = useZIndex()\nconst zIndex = shallowRef(0)\nwatch(open, (value) => value && (zIndex.value = next()), { immediate: true })\n\nfunction read() {\n  range.value = comments.selection()\n  // selecting other text closes an open thread, as in an editable editor\n  if (range.value && comments.active.value && !comments.pending.value) comments.open(null)\n}\nfunction onPointerDown(event: PointerEvent) {\n  if (event.button === 0 && view.value?.dom.contains(event.target as Node)) pressing.value = true\n}\nfunction onPointerUp() {\n  if (!pressing.value) return\n  pressing.value = false\n  read()\n}\nonMounted(() => {\n  document.addEventListener('selectionchange', read)\n  document.addEventListener('pointerdown', onPointerDown, true)\n  document.addEventListener('pointerup', onPointerUp, true)\n})\nonBeforeUnmount(() => {\n  document.removeEventListener('selectionchange', read)\n  document.removeEventListener('pointerdown', onPointerDown, true)\n  document.removeEventListener('pointerup', onPointerUp, true)\n})\n\nfunction start() {\n  if (comments.start()) range.value = null\n}\n</script>\n\n<template>\n  <Transition name=\"dou-floating\">\n    <div\n      v-if=\"open\"\n      ref=\"panel\"\n      class=\"dou-floating dou-editor-bubble\"\n      :style=\"[style, { zIndex }]\"\n      :data-placement=\"placement\"\n      @mousedown.prevent\n    >\n      <DouButton size=\"sm\" variant=\"ghost\" @click=\"start\">\n        <template #leading><MessagePlusIcon /></template>\n        {{ messages.comment }}\n      </DouButton>\n    </div>\n  </Transition>\n</template>\n"],"mappings":""}

package/dist/components/comment-button.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,83 @@
+import { editorKey } from "../editor.js";
+import { DouButton, useFloating, useZIndex } from "dou-ui";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, inject, normalizeStyle, onBeforeUnmount, onMounted, openBlock, shallowRef, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
+import { MessagePlusIcon } from "@dou-ui/icons";
+// src/components/comment-button.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-placement"];
+var comment_button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "comment-button",
+	setup(__props) {
+		const { view, comments, messages } = inject(editorKey);
+		const panel = shallowRef(null);
+		const range = shallowRef(null);
+		const pressing = shallowRef(false);
+		const open = computed(() => !!range.value && !pressing.value && !comments.pending.value && comments.writable.value);
+		const anchor = { getBoundingClientRect() {
+			const current = view.value;
+			const at = range.value;
+			if (!current || !at) return new DOMRect();
+			const first = current.coordsAtPos(at.from, 1);
+			const last = current.coordsAtPos(at.to, -1);
+			const right = Math.abs(first.top - last.top) < 4 ? last.right : first.left + 1;
+			return new DOMRect(first.left, first.top, Math.max(1, right - first.left), first.bottom - first.top);
+		} };
+		const { style, placement } = useFloating(() => open.value ? anchor : null, panel, {
+			open,
+			placement: "top",
+			offset: 8
+		});
+		const { next } = useZIndex();
+		const zIndex = shallowRef(0);
+		watch(open, (value) => value && (zIndex.value = next()), { immediate: true });
+		function read() {
+			range.value = comments.selection();
+			if (range.value && comments.active.value && !comments.pending.value) comments.open(null);
+		}
+		function onPointerDown(event) {
+			if (event.button === 0 && view.value?.dom.contains(event.target)) pressing.value = true;
+		}
+		function onPointerUp() {
+			if (!pressing.value) return;
+			pressing.value = false;
+			read();
+		}
+		onMounted(() => {
+			document.addEventListener("selectionchange", read);
+			document.addEventListener("pointerdown", onPointerDown, true);
+			document.addEventListener("pointerup", onPointerUp, true);
+		});
+		onBeforeUnmount(() => {
+			document.removeEventListener("selectionchange", read);
+			document.removeEventListener("pointerdown", onPointerDown, true);
+			document.removeEventListener("pointerup", onPointerUp, true);
+		});
+		function start() {
+			if (comments.start()) range.value = null;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Transition, { name: "dou-floating" }, {
+				default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "panel",
+					ref: panel,
+					class: "dou-floating dou-editor-bubble",
+					style: normalizeStyle([unref(style), { zIndex: zIndex.value }]),
+					"data-placement": unref(placement),
+					onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+				}, [createVNode(unref(DouButton), {
+					size: "sm",
+					variant: "ghost",
+					onClick: start
+				}, {
+					leading: withCtx(() => [createVNode(unref(MessagePlusIcon))]),
+					default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).comment), 1)]),
+					_: 1
+				})], 44, _hoisted_1)) : createCommentVNode("", true)]),
+				_: 1
+			});
+		};
+	}
+});
+export { comment_button_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=comment-button.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/comment-button.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"comment-button.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_Transition","_withCtx","_createElementBlock","_normalizeStyle","_unref","_withModifiers","_createVNode","_createTextVNode","_toDisplayString","_createCommentVNode"],"sources":["../../src/components/comment-button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { MessagePlusIcon } from '@dou-ui/icons'\nimport { DouButton, useFloating, useZIndex, type VirtualElement } from 'dou-ui'\nimport { computed, inject, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'\nimport type { CommentRange } from '../core/comments'\nimport { editorKey } from '../editor'\n\n/*\n * A read-only editor has no formatting toolbar; selecting text there\n * shows this one button, to start a thread on it.\n */\n\nconst { view, comments, messages } = inject(editorKey)!\nconst panel = shallowRef<HTMLElement | null>(null)\nconst range = shallowRef<CommentRange | null>(null)\nconst pressing = shallowRef(false)\n\nconst open = computed(\n  () => !!range.value && !pressing.value && !comments.pending.value && comments.writable.value,\n)\n\nconst anchor: VirtualElement = {\n  getBoundingClientRect() {\n    const current = view.value\n    const at = range.value\n    if (!current || !at) return new DOMRect()\n    const first = current.coordsAtPos(at.from, 1)\n    const last = current.coordsAtPos(at.to, -1)\n    const right = Math.abs(first.top - last.top) < 4 ? last.right : first.left + 1\n    return new DOMRect(\n      first.left,\n      first.top,\n      Math.max(1, right - first.left),\n      first.bottom - first.top,\n    )\n  },\n}\n\nconst { style, placement } = useFloating(() => (open.value ? anchor : null), panel, {\n  open,\n  placement: 'top',\n  offset: 8,\n})\nconst { next } = useZIndex()\nconst zIndex = shallowRef(0)\nwatch(open, (value) => value && (zIndex.value = next()), { immediate: true })\n\nfunction read() {\n  range.value = comments.selection()\n  // selecting other text closes an open thread, as in an editable editor\n  if (range.value && comments.active.value && !comments.pending.value) comments.open(null)\n}\nfunction onPointerDown(event: PointerEvent) {\n  if (event.button === 0 && view.value?.dom.contains(event.target as Node)) pressing.value = true\n}\nfunction onPointerUp() {\n  if (!pressing.value) return\n  pressing.value = false\n  read()\n}\nonMounted(() => {\n  document.addEventListener('selectionchange', read)\n  document.addEventListener('pointerdown', onPointerDown, true)\n  document.addEventListener('pointerup', onPointerUp, true)\n})\nonBeforeUnmount(() => {\n  document.removeEventListener('selectionchange', read)\n  document.removeEventListener('pointerdown', onPointerDown, true)\n  document.removeEventListener('pointerup', onPointerUp, true)\n})\n\nfunction start() {\n  if (comments.start()) range.value = null\n}\n</script>\n\n<template>\n  <Transition name=\"dou-floating\">\n    <div\n      v-if=\"open\"\n      ref=\"panel\"\n      class=\"dou-floating dou-editor-bubble\"\n      :style=\"[style, { zIndex }]\"\n      :data-placement=\"placement\"\n      @mousedown.prevent\n    >\n      <DouButton size=\"sm\" variant=\"ghost\" @click=\"start\">\n        <template #leading><MessagePlusIcon /></template>\n        {{ messages.comment }}\n      </DouButton>\n    </div>\n  </Transition>\n</template>\n"],"mappings":";;;;;;;;;EAYA,MAAM,EAAE,MAAM,UAAU,aAAa,OAAO,SAAS;EACrD,MAAM,QAAQ,WAA+B,IAAI;EACjD,MAAM,QAAQ,WAAgC,IAAI;EAClD,MAAM,WAAW,WAAW,KAAK;EAEjC,MAAM,OAAO,eACL,CAAC,CAAC,MAAM,SAAS,CAAC,SAAS,SAAS,CAAC,SAAS,QAAQ,SAAS,SAAS,SAAS,KACzF;EAEA,MAAM,SAAyB,EAC7B,wBAAwB;GACtB,MAAM,UAAU,KAAK;GACrB,MAAM,KAAK,MAAM;GACjB,IAAI,CAAC,WAAW,CAAC,IAAI,OAAO,IAAI,QAAQ;GACxC,MAAM,QAAQ,QAAQ,YAAY,GAAG,MAAM,CAAC;GAC5C,MAAM,OAAO,QAAQ,YAAY,GAAG,IAAI,EAAE;GAC1C,MAAM,QAAQ,KAAK,IAAI,MAAM,MAAM,KAAK,GAAG,IAAI,IAAI,KAAK,QAAQ,MAAM,OAAO;GAC7E,OAAO,IAAI,QACT,MAAM,MACN,MAAM,KACN,KAAK,IAAI,GAAG,QAAQ,MAAM,IAAI,GAC9B,MAAM,SAAS,MAAM,GACvB;EACF,EACF;EAEA,MAAM,EAAE,OAAO,cAAc,kBAAmB,KAAK,QAAQ,SAAS,MAAO,OAAO;GAClF;GACA,WAAW;GACX,QAAQ;EACV,CAAC;EACD,MAAM,EAAE,SAAS,UAAU;EAC3B,MAAM,SAAS,WAAW,CAAC;EAC3B,MAAM,OAAO,UAAU,UAAU,OAAO,QAAQ,KAAK,IAAI,EAAE,WAAW,KAAK,CAAC;EAE5E,SAAS,OAAO;GACd,MAAM,QAAQ,SAAS,UAAU;GAEjC,IAAI,MAAM,SAAS,SAAS,OAAO,SAAS,CAAC,SAAS,QAAQ,OAAO,SAAS,KAAK,IAAI;EACzF;EACA,SAAS,cAAc,OAAqB;GAC1C,IAAI,MAAM,WAAW,KAAK,KAAK,OAAO,IAAI,SAAS,MAAM,MAAc,GAAG,SAAS,QAAQ;EAC7F;EACA,SAAS,cAAc;GACrB,IAAI,CAAC,SAAS,OAAO;GACrB,SAAS,QAAQ;GACjB,KAAK;EACP;EACA,gBAAgB;GACd,SAAS,iBAAiB,mBAAmB,IAAI;GACjD,SAAS,iBAAiB,eAAe,eAAe,IAAI;GAC5D,SAAS,iBAAiB,aAAa,aAAa,IAAI;EAC1D,CAAC;EACD,sBAAsB;GACpB,SAAS,oBAAoB,mBAAmB,IAAI;GACpD,SAAS,oBAAoB,eAAe,eAAe,IAAI;GAC/D,SAAS,oBAAoB,aAAa,aAAa,IAAI;EAC7D,CAAC;EAED,SAAS,QAAQ;GACf,IAAI,SAAS,MAAM,GAAG,MAAM,QAAQ;EACtC;;GAIE,OAAAA,UAAA,GAAAC,YAcaC,YAAA,EAdD,MAAK,eAAc,GAAA;IAC7B,SAAAC,cAYM,CAXE,KAAA,SADRH,UAAA,GAAAI,mBAYM,OAAA;;KAVA,SAAA;KAAJ,KAAI;KACJ,OAAM;KACL,OAAKC,eAAA,CAAGC,MAAA,KAAA,GAAK,EAAA,QAAI,OAAA,MAAM,CAAA,CAAA;KACvB,kBAAgBA,MAAA,SAAA;KAChB,aAAS,OAAA,OAAA,OAAA,KAAAC,oBAAV,CAAA,GAAkB,CAAA,SAAA,CAAA;I,IAElBC,YAGYF,MAAA,SAAA,GAAA;KAHD,MAAK;KAAK,SAAQ;KAAS,SAAO;;KAChC,SAAOH,cAAoB,CAAnBK,YAAmBF,MAAA,eAAA,CAAA,C;KAAW,SAAAH,cACjD,CADiDM,gBAAA,MACjDC,gBAAGJ,MAAA,QAAA,CAAQ,CAAC,OAAO,GAAA,CAAA,C"}

package/dist/components/comment-card.js

@@ -0,0 +1,6 @@
+import comment_card_vue_vue_type_script_setup_true_lang_default from "./comment-card.vue_vue_type_script_setup_true_lang.js";
+// src/components/comment-card.vue
+var comment_card_default = comment_card_vue_vue_type_script_setup_true_lang_default;
+export { comment_card_default as default };
+
+//# sourceMappingURL=comment-card.js.map

package/dist/components/comment-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"comment-card.js","names":["_sfc_main"],"sources":["../../src/components/comment-card.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  DouCommentThread,\n  useFloating,\n  useLayer,\n  useZIndex,\n  type CommentThread,\n  type VirtualElement,\n} from 'dou-ui'\nimport { computed, inject, nextTick, shallowRef, watch } from 'vue'\nimport { commentRange, type CommentRange } from '../core/comments'\nimport { editorKey } from '../editor'\n\n/*\n * The thread a piece of text is about, beside that text: opened by a\n * click on highlighted text or `v-model:activeComment`, or empty while\n * a new thread's first comment is being written.\n */\n\nconst { view, state, comments, messages } = inject(editorKey)!\nconst panel = shallowRef<HTMLElement | null>(null)\n\nconst thread = computed<CommentThread | null>(() => {\n  const id = comments.active.value\n  return (id && comments.threads.value.find((item) => item.id === id)) || null\n})\n\nconst range = computed<CommentRange | null>(() => {\n  if (comments.pending.value) return comments.pending.value\n  const current = state.value\n  return thread.value && current ? commentRange(current.doc, thread.value.id) : null\n})\n\nconst open = computed(() => !!range.value)\n\nconst anchor: VirtualElement = {\n  getBoundingClientRect() {\n    const current = view.value\n    const at = range.value\n    if (!current || !at) return new DOMRect()\n    const start = current.coordsAtPos(at.from, 1)\n    const end = current.coordsAtPos(at.to, -1)\n    // text over several lines: from its start to the editor's right edge\n    const right =\n      Math.abs(start.top - end.top) < 4\n        ? end.right\n        : Math.max(start.left + 1, current.dom.getBoundingClientRect().right)\n    return new DOMRect(\n      start.left,\n      start.top,\n      Math.max(1, right - start.left),\n      end.bottom - start.top,\n    )\n  },\n}\n\nconst { style, placement, update } = useFloating(() => (open.value ? anchor : null), panel, {\n  open,\n  placement: 'bottom-start',\n  offset: 6,\n})\nconst { next } = useZIndex()\nconst zIndex = shallowRef(0)\nwatch(open, (value) => value && (zIndex.value = next()), { immediate: true })\nwatch(state, () => open.value && void nextTick(update))\n\nconst threadView = shallowRef<InstanceType<typeof DouCommentThread> | null>(null)\n\n/** Focus was in the card, or went nowhere when what held it went away. */\nconst focusLost = () => {\n  const el = document.activeElement\n  return !el || el === document.body || !!panel.value?.contains(el)\n}\n\nfunction close() {\n  const refocus = focusLost()\n  comments.close()\n  if (refocus) view.value?.focus()\n}\n\n// the card is a layer: Escape goes to a menu opened from it first, and a\n// press on such a menu isn't outside. A press on the editor's text is the\n// editor's: it opens the thread there, or closes the card.\nuseLayer({\n  open,\n  elements: () => [panel.value, view.value?.dom],\n  onEscape: () => close(),\n  onOutside: () => comments.close(),\n})\n\n// asked to (by the keyboard shortcut, or a thread just started): the reply box\nwatch(\n  () => comments.focusRequest.value,\n  async () => {\n    await nextTick()\n    await nextTick()\n    threadView.value?.focus()\n  },\n)\n\n// a thread resolved or removed from the card: back to the text, once\n// the card is gone (focus can sit in it while it fades out)\nfunction onClosed() {\n  const el = document.activeElement\n  if (!el || el === document.body) view.value?.focus()\n}\n</script>\n\n<template>\n  <Transition name=\"dou-floating\" @after-leave=\"onClosed\">\n    <div\n      v-if=\"open\"\n      ref=\"panel\"\n      class=\"dou-floating dou-editor-comment\"\n      role=\"dialog\"\n      :aria-label=\"messages.commentThread\"\n      :style=\"[style, { zIndex }]\"\n      :data-placement=\"placement\"\n    >\n      <DouCommentThread\n        ref=\"threadView\"\n        :key=\"thread?.id ?? 'new'\"\n        :thread=\"thread\"\n        :author=\"comments.author.value\"\n        :readonly=\"!comments.writable.value\"\n        :autofocus=\"!thread\"\n        @action=\"comments.apply\"\n        @cancel=\"close\"\n      />\n    </div>\n  </Transition>\n</template>\n"],"mappings":""}