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

package/dist/extensions/lists.js

@@ -0,0 +1,182 @@
+import { createId } from "../core/model.js";
+import { contentDOM, textBlock } from "../core/schema.js";
+import { defineEditorExtension } from "../core/extension.js";
+import { setBlockType } from "../core/commands.js";
+import { blockInputRule } from "../core/input-rules.js";
+import { numberingPlugin } from "../core/plugins.js";
+import { listItemMarkdown, prepareLists } from "./list-html.js";
+import { ListIcon, ListOrderedIcon, ListTodoIcon } from "@dou-ui/icons";
+// src/extensions/lists.ts
+var SVG = "http://www.w3.org/2000/svg";
+/** The check of `CheckIcon`, drawn at the checkbox's stroke width. */
+function checkMark() {
+	const svg = document.createElementNS(SVG, "svg");
+	svg.setAttribute("viewBox", "0 0 24 24");
+	svg.setAttribute("aria-hidden", "true");
+	const path = document.createElementNS(SVG, "path");
+	path.setAttribute("d", "m5 12.5 4.5 4.5L19 7.5");
+	for (const [name, value] of Object.entries({
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": "2",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	})) path.setAttribute(name, value);
+	svg.append(path);
+	return svg;
+}
+/** A to-do item: a real checkbox in front of the text, its state in the node's attributes. */
+var checkItemView = (node, view, getPos) => {
+	const dom = document.createElement("div");
+	dom.className = "dou-editor__content dou-editor__content--checkItem";
+	dom.dataset.contentType = "checkItem";
+	const box = document.createElement("span");
+	box.className = "dou-editor__check";
+	box.contentEditable = "false";
+	const button = document.createElement("button");
+	button.type = "button";
+	button.className = "dou-editor__checkbox";
+	button.setAttribute("role", "checkbox");
+	button.append(checkMark());
+	box.append(button);
+	const text = document.createElement("div");
+	text.className = "dou-editor__text";
+	text.id = `dou-editor-check-${createId()}`;
+	button.setAttribute("aria-labelledby", text.id);
+	dom.append(box, text);
+	let current = node;
+	const sync = () => {
+		const checked = !!current.attrs.checked;
+		dom.dataset.checked = String(checked);
+		button.setAttribute("aria-checked", String(checked));
+		button.disabled = !view.editable;
+	};
+	sync();
+	button.addEventListener("mousedown", (event) => event.preventDefault());
+	button.addEventListener("click", () => {
+		const pos = getPos();
+		if (pos === void 0 || !view.editable) return;
+		view.dispatch(view.state.tr.setNodeAttribute(pos, "checked", !current.attrs.checked));
+	});
+	return {
+		dom,
+		contentDOM: text,
+		update(next) {
+			if (next.type !== current.type) return false;
+			current = next;
+			sync();
+			return true;
+		},
+		ignoreMutation: (mutation) => box.contains(mutation.target),
+		stopEvent: (event) => box.contains(event.target)
+	};
+};
+/**
+* Bulleted, numbered and to-do lists. Each item is a block of its own:
+* `Enter` continues the list, `Tab` nests an item. Pasted HTML lists keep
+* their nesting, and task lists become to-do items.
+*/
+var lists = defineEditorExtension({
+	name: "lists",
+	blocks: {
+		bulletItem: textBlock("bulletItem", {
+			continues: true,
+			parseDOM: [{ tag: "div[data-content-type=\"bulletItem\"]" }, { tag: "ul > li" }]
+		}),
+		numberedItem: textBlock("numberedItem", {
+			continues: true,
+			parseDOM: [{ tag: "div[data-content-type=\"numberedItem\"]" }, { tag: "ol > li" }]
+		}),
+		checkItem: textBlock("checkItem", {
+			continues: true,
+			attrs: { checked: { default: false } },
+			parseDOM: [{
+				tag: "div[data-content-type=\"checkItem\"]",
+				getAttrs: (dom) => ({ checked: dom.dataset.checked === "true" })
+			}],
+			toDOM: (node) => contentDOM("checkItem", { "data-checked": String(node.attrs.checked) })
+		})
+	},
+	nodeViews: { checkItem: checkItemView },
+	plugins: () => [numberingPlugin()],
+	prepareHTML: prepareLists,
+	output: { blocks: {
+		bulletItem: {
+			group: "ul",
+			html: (_block, { content, children }) => `<li>${content}${children}</li>`,
+			markdown: (_block, context) => listItemMarkdown("- ", context)
+		},
+		numberedItem: {
+			group: "ol",
+			html: (_block, { content, children }) => `<li>${content}${children}</li>`,
+			markdown: (_block, context) => listItemMarkdown(`${context.index}. `, context)
+		},
+		checkItem: {
+			group: "ul class=\"task-list\"",
+			html: (block, { content, children }) => `<li><input type="checkbox" disabled${block.props.checked ? " checked" : ""}> ${content}${children}</li>`,
+			markdown: (block, context) => listItemMarkdown(block.props.checked ? "- [x] " : "- [ ] ", context)
+		}
+	} },
+	inputRules: () => [
+		blockInputRule(/^[-*+]\s$/, "bulletItem"),
+		blockInputRule(/^1[.)]\s$/, "numberedItem"),
+		blockInputRule(/^\[( |x)?\]\s$/i, "checkItem", (match) => ({ checked: match[1]?.toLowerCase() === "x" }))
+	],
+	keymap: () => ({
+		"mod+shift+7": setBlockType("numberedItem"),
+		"mod+shift+8": setBlockType("bulletItem"),
+		"mod+shift+9": setBlockType("checkItem")
+	}),
+	blockOptions: [
+		{
+			key: "bulletItem",
+			type: "bulletItem",
+			label: (m) => m.types.bulletItem,
+			hint: (m) => m.hints.bulletItem,
+			icon: ListIcon,
+			keywords: [
+				"ul",
+				"bullet",
+				"list",
+				"lb",
+				"liebiao"
+			],
+			shortcut: "-"
+		},
+		{
+			key: "numberedItem",
+			type: "numberedItem",
+			label: (m) => m.types.numberedItem,
+			hint: (m) => m.hints.numberedItem,
+			icon: ListOrderedIcon,
+			keywords: [
+				"ol",
+				"number",
+				"ordered",
+				"list",
+				"lb",
+				"bianhao"
+			],
+			shortcut: "1."
+		},
+		{
+			key: "checkItem",
+			type: "checkItem",
+			label: (m) => m.types.checkItem,
+			hint: (m) => m.hints.checkItem,
+			icon: ListTodoIcon,
+			keywords: [
+				"todo",
+				"task",
+				"check",
+				"db",
+				"daiban",
+				"renwu"
+			],
+			shortcut: "[]"
+		}
+	]
+});
+export { lists };
+
+//# sourceMappingURL=lists.js.map

package/dist/extensions/lists.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lists.js","names":[],"sources":["../../src/extensions/lists.ts"],"sourcesContent":["import { ListIcon, ListOrderedIcon, ListTodoIcon } from '@dou-ui/icons'\nimport type { NodeViewConstructor } from 'prosemirror-view'\nimport { setBlockType } from '../core/commands'\nimport { defineEditorExtension } from '../core/extension'\nimport { blockInputRule } from '../core/input-rules'\nimport { createId } from '../core/model'\nimport { numberingPlugin } from '../core/plugins'\nimport { contentDOM, textBlock } from '../core/schema'\nimport { listItemMarkdown, prepareLists } from './list-html'\n\nconst SVG = 'http://www.w3.org/2000/svg'\n\n/** The check of `CheckIcon`, drawn at the checkbox's stroke width. */\nfunction checkMark(): SVGSVGElement {\n  const svg = document.createElementNS(SVG, 'svg')\n  svg.setAttribute('viewBox', '0 0 24 24')\n  svg.setAttribute('aria-hidden', 'true')\n  const path = document.createElementNS(SVG, 'path')\n  path.setAttribute('d', 'm5 12.5 4.5 4.5L19 7.5')\n  for (const [name, value] of Object.entries({\n    fill: 'none',\n    stroke: 'currentColor',\n    'stroke-width': '2',\n    'stroke-linecap': 'round',\n    'stroke-linejoin': 'round',\n  }))\n    path.setAttribute(name, value)\n  svg.append(path)\n  return svg\n}\n\n/** A to-do item: a real checkbox in front of the text, its state in the node's attributes. */\nconst checkItemView: NodeViewConstructor = (node, view, getPos) => {\n  const dom = document.createElement('div')\n  dom.className = 'dou-editor__content dou-editor__content--checkItem'\n  dom.dataset.contentType = 'checkItem'\n  const box = document.createElement('span')\n  box.className = 'dou-editor__check'\n  box.contentEditable = 'false'\n  const button = document.createElement('button')\n  button.type = 'button'\n  button.className = 'dou-editor__checkbox'\n  button.setAttribute('role', 'checkbox')\n  button.append(checkMark())\n  box.append(button)\n  const text = document.createElement('div')\n  text.className = 'dou-editor__text'\n  // the item's own text names the checkbox\n  text.id = `dou-editor-check-${createId()}`\n  button.setAttribute('aria-labelledby', text.id)\n  dom.append(box, text)\n\n  let current = node\n  const sync = () => {\n    const checked = !!current.attrs.checked\n    dom.dataset.checked = String(checked)\n    button.setAttribute('aria-checked', String(checked))\n    button.disabled = !view.editable\n  }\n  sync()\n  button.addEventListener('mousedown', (event) => event.preventDefault())\n  button.addEventListener('click', () => {\n    const pos = getPos()\n    if (pos === undefined || !view.editable) return\n    view.dispatch(view.state.tr.setNodeAttribute(pos, 'checked', !current.attrs.checked))\n  })\n  return {\n    dom,\n    contentDOM: text,\n    update(next) {\n      if (next.type !== current.type) return false\n      current = next\n      sync()\n      return true\n    },\n    ignoreMutation: (mutation) => box.contains(mutation.target),\n    stopEvent: (event) => box.contains(event.target as Node),\n  }\n}\n\n/**\n * Bulleted, numbered and to-do lists. Each item is a block of its own:\n * `Enter` continues the list, `Tab` nests an item. Pasted HTML lists keep\n * their nesting, and task lists become to-do items.\n */\nexport const lists = defineEditorExtension({\n  name: 'lists',\n  blocks: {\n    bulletItem: textBlock('bulletItem', {\n      continues: true,\n      parseDOM: [{ tag: 'div[data-content-type=\"bulletItem\"]' }, { tag: 'ul > li' }],\n    }),\n    numberedItem: textBlock('numberedItem', {\n      continues: true,\n      parseDOM: [{ tag: 'div[data-content-type=\"numberedItem\"]' }, { tag: 'ol > li' }],\n    }),\n    checkItem: textBlock('checkItem', {\n      continues: true,\n      attrs: { checked: { default: false } },\n      parseDOM: [\n        {\n          tag: 'div[data-content-type=\"checkItem\"]',\n          getAttrs: (dom) => ({ checked: (dom as HTMLElement).dataset.checked === 'true' }),\n        },\n      ],\n      toDOM: (node) => contentDOM('checkItem', { 'data-checked': String(node.attrs.checked) }),\n    }),\n  },\n  nodeViews: { checkItem: checkItemView },\n  plugins: () => [numberingPlugin()],\n  prepareHTML: prepareLists,\n  output: {\n    blocks: {\n      bulletItem: {\n        group: 'ul',\n        html: (_block, { content, children }) => `<li>${content}${children}</li>`,\n        markdown: (_block, context) => listItemMarkdown('- ', context),\n      },\n      numberedItem: {\n        group: 'ol',\n        html: (_block, { content, children }) => `<li>${content}${children}</li>`,\n        markdown: (_block, context) => listItemMarkdown(`${context.index}. `, context),\n      },\n      checkItem: {\n        group: 'ul class=\"task-list\"',\n        html: (block, { content, children }) =>\n          `<li><input type=\"checkbox\" disabled${block.props.checked ? ' checked' : ''}> ${content}${children}</li>`,\n        markdown: (block, context) =>\n          listItemMarkdown(block.props.checked ? '- [x] ' : '- [ ] ', context),\n      },\n    },\n  },\n  inputRules: () => [\n    blockInputRule(/^[-*+]\\s$/, 'bulletItem'),\n    blockInputRule(/^1[.)]\\s$/, 'numberedItem'),\n    blockInputRule(/^\\[( |x)?\\]\\s$/i, 'checkItem', (match) => ({\n      checked: match[1]?.toLowerCase() === 'x',\n    })),\n  ],\n  keymap: () => ({\n    'mod+shift+7': setBlockType('numberedItem'),\n    'mod+shift+8': setBlockType('bulletItem'),\n    'mod+shift+9': setBlockType('checkItem'),\n  }),\n  blockOptions: [\n    {\n      key: 'bulletItem',\n      type: 'bulletItem',\n      label: (m) => m.types.bulletItem,\n      hint: (m) => m.hints.bulletItem,\n      icon: ListIcon,\n      keywords: ['ul', 'bullet', 'list', 'lb', 'liebiao'],\n      shortcut: '-',\n    },\n    {\n      key: 'numberedItem',\n      type: 'numberedItem',\n      label: (m) => m.types.numberedItem,\n      hint: (m) => m.hints.numberedItem,\n      icon: ListOrderedIcon,\n      keywords: ['ol', 'number', 'ordered', 'list', 'lb', 'bianhao'],\n      shortcut: '1.',\n    },\n    {\n      key: 'checkItem',\n      type: 'checkItem',\n      label: (m) => m.types.checkItem,\n      hint: (m) => m.hints.checkItem,\n      icon: ListTodoIcon,\n      keywords: ['todo', 'task', 'check', 'db', 'daiban', 'renwu'],\n      shortcut: '[]',\n    },\n  ],\n})\n"],"mappings":"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"}

package/dist/extensions/mention/index.js

@@ -0,0 +1,56 @@
+import { defineEditorExtension } from "../../core/extension.js";
+import { escapeHTML } from "../../core/output.js";
+import { mentionPlugin } from "./state.js";
+import mention_menu_default from "./mention-menu.js";
+import { defineComponent, h } from "vue";
+// src/extensions/mention/index.ts
+/**
+* Mentions: typing `@` suggests people (or anything else) from `search`,
+* and the chosen one goes into the text as a mention, kept in the
+* document as `{ type: 'inline', name: 'mention', props: { id, label } }`.
+*/
+var mentionHTML = (props) => `<span data-mention="${escapeHTML(String(props.id ?? ""))}">@${escapeHTML(String(props.label ?? ""))}</span>`;
+function mention(options) {
+	const Menu = defineComponent({
+		name: "DouEditorMentionMenu",
+		setup() {
+			return () => h(mention_menu_default, { search: options.search });
+		}
+	});
+	return defineEditorExtension({
+		name: "mention",
+		inlines: { mention: {
+			atom: true,
+			selectable: false,
+			attrs: {
+				id: { default: "" },
+				label: { default: "" }
+			},
+			leafText: (node) => `@${node.attrs.label}`,
+			parseDOM: [{
+				tag: "span[data-mention]",
+				getAttrs: (dom) => ({
+					id: dom.dataset.mention ?? "",
+					label: (dom.textContent ?? "").replace(/^@/, "")
+				})
+			}],
+			toDOM: (node) => [
+				"span",
+				{
+					class: "dou-editor__mention",
+					"data-mention": node.attrs.id
+				},
+				`@${node.attrs.label}`
+			]
+		} },
+		output: { inlines: { mention: {
+			html: mentionHTML,
+			markdown: mentionHTML
+		} } },
+		plugins: () => [mentionPlugin()],
+		overlays: [Menu]
+	});
+}
+export { mention };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["MentionMenu"],"sources":["../../../src/extensions/mention/index.ts"],"sourcesContent":["import { defineComponent, h } from 'vue'\nimport { escapeHTML } from '../../core/output'\nimport { defineEditorExtension, type EditorExtension } from '../../core/extension'\nimport MentionMenu from './mention-menu.vue'\nimport { mentionPlugin, type MentionItem } from './state'\n\nexport interface MentionOptions {\n  /**\n   * Finds who matches what was typed after the `@` (empty right after it).\n   * Can return a Promise; only the answer to the latest query is shown.\n   */\n  search: (query: string) => MentionItem[] | Promise<MentionItem[]>\n}\n\n/**\n * Mentions: typing `@` suggests people (or anything else) from `search`,\n * and the chosen one goes into the text as a mention, kept in the\n * document as `{ type: 'inline', name: 'mention', props: { id, label } }`.\n */\nconst mentionHTML = (props: Record<string, unknown>) =>\n  `<span data-mention=\"${escapeHTML(String(props.id ?? ''))}\">@${escapeHTML(String(props.label ?? ''))}</span>`\n\nexport function mention(options: MentionOptions): EditorExtension {\n  const Menu = defineComponent({\n    name: 'DouEditorMentionMenu',\n    setup() {\n      return () => h(MentionMenu, { search: options.search })\n    },\n  })\n  return defineEditorExtension({\n    name: 'mention',\n    inlines: {\n      mention: {\n        atom: true,\n        selectable: false,\n        attrs: { id: { default: '' }, label: { default: '' } },\n        leafText: (node) => `@${node.attrs.label}`,\n        parseDOM: [\n          {\n            tag: 'span[data-mention]',\n            getAttrs: (dom) => ({\n              id: (dom as HTMLElement).dataset.mention ?? '',\n              label: ((dom as HTMLElement).textContent ?? '').replace(/^@/, ''),\n            }),\n          },\n        ],\n        toDOM: (node) => [\n          'span',\n          { class: 'dou-editor__mention', 'data-mention': node.attrs.id },\n          `@${node.attrs.label}`,\n        ],\n      },\n    },\n    output: {\n      // Markdown has no mention: the same HTML keeps the id when it is read back\n      inlines: { mention: { html: mentionHTML, markdown: mentionHTML } },\n    },\n    plugins: () => [mentionPlugin()],\n    overlays: [Menu],\n  })\n}\n\nexport type { MentionItem }\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,eAAe,UACnB,uBAAuB,WAAW,OAAO,MAAM,MAAM,EAAE,CAAC,EAAE,KAAK,WAAW,OAAO,MAAM,SAAS,EAAE,CAAC,EAAE;AAEvG,SAAgB,QAAQ,SAA0C;CAChE,MAAM,OAAO,gBAAgB;EAC3B,MAAM;EACN,QAAQ;GACN,aAAa,EAAEA,sBAAa,EAAE,QAAQ,QAAQ,OAAO,CAAC;EACxD;CACF,CAAC;CACD,OAAO,sBAAsB;EAC3B,MAAM;EACN,SAAS,EACP,SAAS;GACP,MAAM;GACN,YAAY;GACZ,OAAO;IAAE,IAAI,EAAE,SAAS,GAAG;IAAG,OAAO,EAAE,SAAS,GAAG;GAAE;GACrD,WAAW,SAAS,IAAI,KAAK,MAAM;GACnC,UAAU,CACR;IACE,KAAK;IACL,WAAW,SAAS;KAClB,IAAK,IAAoB,QAAQ,WAAW;KAC5C,QAAS,IAAoB,eAAe,GAAA,CAAI,QAAQ,MAAM,EAAE;IAClE;GACF,CACF;GACA,QAAQ,SAAS;IACf;IACA;KAAE,OAAO;KAAuB,gBAAgB,KAAK,MAAM;IAAG;IAC9D,IAAI,KAAK,MAAM;GACjB;EACF,EACF;EACA,QAAQ,EAEN,SAAS,EAAE,SAAS;GAAE,MAAM;GAAa,UAAU;EAAY,EAAE,EACnE;EACA,eAAe,CAAC,cAAc,CAAC;EAC/B,UAAU,CAAC,IAAI;CACjB,CAAC;AACH"}

package/dist/extensions/mention/mention-menu.js

@@ -0,0 +1,6 @@
+import mention_menu_vue_vue_type_script_setup_true_lang_default from "./mention-menu.vue_vue_type_script_setup_true_lang.js";
+// src/extensions/mention/mention-menu.vue
+var mention_menu_default = mention_menu_vue_vue_type_script_setup_true_lang_default;
+export { mention_menu_default as default };
+
+//# sourceMappingURL=mention-menu.js.map

package/dist/extensions/mention/mention-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention-menu.js","names":["_sfc_main"],"sources":["../../../src/extensions/mention/mention-menu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouAvatar, useFloating, useLayer, useZIndex, type VirtualElement } from 'dou-ui'\nimport { computed, nextTick, shallowRef, useId, useTemplateRef, watch } from 'vue'\nimport { useEditor } from '../../editor'\nimport {\n  chooseMention,\n  closeMention,\n  getMention,\n  setMentionActive,\n  setMentionItems,\n  type MentionItem,\n} from './state'\n\nconst props = defineProps<{\n  search: (query: string) => MentionItem[] | Promise<MentionItem[]>\n}>()\n\nconst { view, state, messages } = useEditor()\nconst id = `dou-editor-mention-${useId()}`\nconst panel = useTemplateRef<HTMLElement>('panel')\n\nconst mention = computed(() => getMention(state.value))\nconst open = computed(() => !!mention.value)\nconst loading = shallowRef(false)\n\n// the list hangs below the `@` that opened it\nconst anchor: VirtualElement = {\n  getBoundingClientRect() {\n    const current = view.value\n    const from = mention.value?.from\n    if (!current || from === undefined) return new DOMRect()\n    const { left, top, bottom } = current.coordsAtPos(from)\n    return new DOMRect(left, top, 0, bottom - top)\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 })\n// a press outside the editor and the list closes it; inside, the cursor move does\nuseLayer({\n  open,\n  elements: () => [panel.value, view.value?.dom],\n  onOutside: () => view.value && closeMention(view.value),\n  onEscape: () => view.value && closeMention(view.value),\n})\n\n// search again as the query changes; a slower, older answer never wins\nlet run = 0\nwatch(\n  () => (mention.value ? mention.value.query : null),\n  async (query) => {\n    const current = ++run\n    if (query === null) {\n      loading.value = false\n      return\n    }\n    loading.value = true\n    let items: MentionItem[] = []\n    try {\n      items = await props.search(query)\n    } catch {\n      // a failed search shows nothing\n    }\n    if (current !== run || !view.value || !getMention(view.value.state)) return\n    loading.value = false\n    setMentionItems(view.value, items.slice(0, 50))\n    void nextTick(update)\n  },\n  { immediate: true },\n)\n\n// the editor keeps focus; the active item is announced through it\nwatch(\n  () => [open.value, mention.value?.active, mention.value?.items] as const,\n  () => {\n    const dom = view.value?.dom\n    if (!dom) return\n    const items = mention.value?.items ?? []\n    const option = open.value && items.length ? `${id}-${mention.value!.active}` : null\n    if (open.value) dom.setAttribute('aria-controls', id)\n    else dom.removeAttribute('aria-controls')\n    if (option) dom.setAttribute('aria-activedescendant', option)\n    else dom.removeAttribute('aria-activedescendant')\n    if (option) document.getElementById(option)?.scrollIntoView({ block: 'nearest' })\n  },\n  { flush: 'post' },\n)\n\nfunction choose(item: MentionItem) {\n  if (view.value) chooseMention(view.value, item)\n}\n\nfunction hover(index: number) {\n  if (view.value && mention.value?.active !== index) setMentionActive(view.value, index)\n}\n</script>\n\n<template>\n  <Transition name=\"dou-floating\">\n    <div\n      v-if=\"open\"\n      :id=\"id\"\n      ref=\"panel\"\n      role=\"listbox\"\n      :aria-label=\"messages.mention.label\"\n      class=\"dou-dropdown dou-floating dou-editor-mention\"\n      :style=\"[style, { zIndex }]\"\n      :data-placement=\"placement\"\n      @mousedown.prevent\n    >\n      <div\n        v-for=\"(item, index) in mention!.items\"\n        :id=\"`${id}-${index}`\"\n        :key=\"item.id\"\n        role=\"option\"\n        :aria-selected=\"index === mention!.active\"\n        :class=\"[\n          'dou-dropdown__item',\n          'dou-editor-mention__item',\n          { 'is-active': index === mention!.active },\n        ]\"\n        @pointermove=\"hover(index)\"\n        @click=\"choose(item)\"\n      >\n        <DouAvatar :src=\"item.avatar\" :name=\"item.label\" size=\"sm\" />\n        <span class=\"dou-editor-mention__text\">\n          <span class=\"dou-editor-mention__label\">{{ item.label }}</span>\n          <span v-if=\"item.description\" class=\"dou-editor-mention__description\">{{\n            item.description\n          }}</span>\n        </span>\n      </div>\n      <div v-if=\"!mention!.items.length\" class=\"dou-editor-slash__empty\">\n        {{ loading ? messages.mention.searching : messages.mention.noResults }}\n      </div>\n    </div>\n  </Transition>\n</template>\n"],"mappings":""}

package/dist/extensions/mention/mention-menu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,132 @@
+import { useEditor } from "../../editor.js";
+import { chooseMention, closeMention, getMention, setMentionActive, setMentionItems } from "./state.js";
+import { DouAvatar, useFloating, useLayer, useZIndex } from "dou-ui";
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, renderList, shallowRef, toDisplayString, unref, useId, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+// src/extensions/mention/mention-menu.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "data-placement"];
+var _hoisted_2 = [
+	"id",
+	"aria-selected",
+	"onPointermove",
+	"onClick"
+];
+var _hoisted_3 = { class: "dou-editor-mention__text" };
+var _hoisted_4 = { class: "dou-editor-mention__label" };
+var _hoisted_5 = {
+	key: 0,
+	class: "dou-editor-mention__description"
+};
+var _hoisted_6 = {
+	key: 0,
+	class: "dou-editor-slash__empty"
+};
+var mention_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "mention-menu",
+	props: { search: { type: Function } },
+	setup(__props) {
+		const props = __props;
+		const { view, state, messages } = useEditor();
+		const id = `dou-editor-mention-${useId()}`;
+		const panel = useTemplateRef("panel");
+		const mention = computed(() => getMention(state.value));
+		const open = computed(() => !!mention.value);
+		const loading = shallowRef(false);
+		const anchor = { getBoundingClientRect() {
+			const current = view.value;
+			const from = mention.value?.from;
+			if (!current || from === void 0) return new DOMRect();
+			const { left, top, bottom } = current.coordsAtPos(from);
+			return new DOMRect(left, top, 0, bottom - top);
+		} };
+		const { style, placement, update } = useFloating(() => open.value ? anchor : null, panel, {
+			open,
+			placement: "bottom-start",
+			offset: 6
+		});
+		const { next } = useZIndex();
+		const zIndex = shallowRef(0);
+		watch(open, (value) => value && (zIndex.value = next()), { immediate: true });
+		useLayer({
+			open,
+			elements: () => [panel.value, view.value?.dom],
+			onOutside: () => view.value && closeMention(view.value),
+			onEscape: () => view.value && closeMention(view.value)
+		});
+		let run = 0;
+		watch(() => mention.value ? mention.value.query : null, async (query) => {
+			const current = ++run;
+			if (query === null) {
+				loading.value = false;
+				return;
+			}
+			loading.value = true;
+			let items = [];
+			try {
+				items = await props.search(query);
+			} catch {}
+			if (current !== run || !view.value || !getMention(view.value.state)) return;
+			loading.value = false;
+			setMentionItems(view.value, items.slice(0, 50));
+			nextTick(update);
+		}, { immediate: true });
+		watch(() => [
+			open.value,
+			mention.value?.active,
+			mention.value?.items
+		], () => {
+			const dom = view.value?.dom;
+			if (!dom) return;
+			const items = mention.value?.items ?? [];
+			const option = open.value && items.length ? `${id}-${mention.value.active}` : null;
+			if (open.value) dom.setAttribute("aria-controls", id);
+			else dom.removeAttribute("aria-controls");
+			if (option) dom.setAttribute("aria-activedescendant", option);
+			else dom.removeAttribute("aria-activedescendant");
+			if (option) document.getElementById(option)?.scrollIntoView({ block: "nearest" });
+		}, { flush: "post" });
+		function choose(item) {
+			if (view.value) chooseMention(view.value, item);
+		}
+		function hover(index) {
+			if (view.value && mention.value?.active !== index) setMentionActive(view.value, index);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Transition, { name: "dou-floating" }, {
+				default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					id,
+					ref_key: "panel",
+					ref: panel,
+					role: "listbox",
+					"aria-label": unref(messages).mention.label,
+					class: "dou-dropdown dou-floating dou-editor-mention",
+					style: normalizeStyle([unref(style), { zIndex: zIndex.value }]),
+					"data-placement": unref(placement),
+					onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(mention.value.items, (item, index) => {
+					return openBlock(), createElementBlock("div", {
+						id: `${id}-${index}`,
+						key: item.id,
+						role: "option",
+						"aria-selected": index === mention.value.active,
+						class: normalizeClass([
+							"dou-dropdown__item",
+							"dou-editor-mention__item",
+							{ "is-active": index === mention.value.active }
+						]),
+						onPointermove: ($event) => hover(index),
+						onClick: ($event) => choose(item)
+					}, [createVNode(unref(DouAvatar), {
+						src: item.avatar,
+						name: item.label,
+						size: "sm"
+					}, null, 8, ["src", "name"]), createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(item.description), 1)) : createCommentVNode("", true)])], 42, _hoisted_2);
+				}), 128)), !mention.value.items.length ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(loading.value ? unref(messages).mention.searching : unref(messages).mention.noResults), 1)) : createCommentVNode("", true)], 44, _hoisted_1)) : createCommentVNode("", true)]),
+				_: 1
+			});
+		};
+	}
+});
+export { mention_menu_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=mention-menu.vue_vue_type_script_setup_true_lang.js.map

package/dist/extensions/mention/mention-menu.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention-menu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_Transition","_withCtx","_createElementBlock","_unref","_normalizeStyle","_withModifiers","_Fragment","_renderList","_normalizeClass","_createVNode","_createElementVNode","_toDisplayString","_createCommentVNode"],"sources":["../../../src/extensions/mention/mention-menu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouAvatar, useFloating, useLayer, useZIndex, type VirtualElement } from 'dou-ui'\nimport { computed, nextTick, shallowRef, useId, useTemplateRef, watch } from 'vue'\nimport { useEditor } from '../../editor'\nimport {\n  chooseMention,\n  closeMention,\n  getMention,\n  setMentionActive,\n  setMentionItems,\n  type MentionItem,\n} from './state'\n\nconst props = defineProps<{\n  search: (query: string) => MentionItem[] | Promise<MentionItem[]>\n}>()\n\nconst { view, state, messages } = useEditor()\nconst id = `dou-editor-mention-${useId()}`\nconst panel = useTemplateRef<HTMLElement>('panel')\n\nconst mention = computed(() => getMention(state.value))\nconst open = computed(() => !!mention.value)\nconst loading = shallowRef(false)\n\n// the list hangs below the `@` that opened it\nconst anchor: VirtualElement = {\n  getBoundingClientRect() {\n    const current = view.value\n    const from = mention.value?.from\n    if (!current || from === undefined) return new DOMRect()\n    const { left, top, bottom } = current.coordsAtPos(from)\n    return new DOMRect(left, top, 0, bottom - top)\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 })\n// a press outside the editor and the list closes it; inside, the cursor move does\nuseLayer({\n  open,\n  elements: () => [panel.value, view.value?.dom],\n  onOutside: () => view.value && closeMention(view.value),\n  onEscape: () => view.value && closeMention(view.value),\n})\n\n// search again as the query changes; a slower, older answer never wins\nlet run = 0\nwatch(\n  () => (mention.value ? mention.value.query : null),\n  async (query) => {\n    const current = ++run\n    if (query === null) {\n      loading.value = false\n      return\n    }\n    loading.value = true\n    let items: MentionItem[] = []\n    try {\n      items = await props.search(query)\n    } catch {\n      // a failed search shows nothing\n    }\n    if (current !== run || !view.value || !getMention(view.value.state)) return\n    loading.value = false\n    setMentionItems(view.value, items.slice(0, 50))\n    void nextTick(update)\n  },\n  { immediate: true },\n)\n\n// the editor keeps focus; the active item is announced through it\nwatch(\n  () => [open.value, mention.value?.active, mention.value?.items] as const,\n  () => {\n    const dom = view.value?.dom\n    if (!dom) return\n    const items = mention.value?.items ?? []\n    const option = open.value && items.length ? `${id}-${mention.value!.active}` : null\n    if (open.value) dom.setAttribute('aria-controls', id)\n    else dom.removeAttribute('aria-controls')\n    if (option) dom.setAttribute('aria-activedescendant', option)\n    else dom.removeAttribute('aria-activedescendant')\n    if (option) document.getElementById(option)?.scrollIntoView({ block: 'nearest' })\n  },\n  { flush: 'post' },\n)\n\nfunction choose(item: MentionItem) {\n  if (view.value) chooseMention(view.value, item)\n}\n\nfunction hover(index: number) {\n  if (view.value && mention.value?.active !== index) setMentionActive(view.value, index)\n}\n</script>\n\n<template>\n  <Transition name=\"dou-floating\">\n    <div\n      v-if=\"open\"\n      :id=\"id\"\n      ref=\"panel\"\n      role=\"listbox\"\n      :aria-label=\"messages.mention.label\"\n      class=\"dou-dropdown dou-floating dou-editor-mention\"\n      :style=\"[style, { zIndex }]\"\n      :data-placement=\"placement\"\n      @mousedown.prevent\n    >\n      <div\n        v-for=\"(item, index) in mention!.items\"\n        :id=\"`${id}-${index}`\"\n        :key=\"item.id\"\n        role=\"option\"\n        :aria-selected=\"index === mention!.active\"\n        :class=\"[\n          'dou-dropdown__item',\n          'dou-editor-mention__item',\n          { 'is-active': index === mention!.active },\n        ]\"\n        @pointermove=\"hover(index)\"\n        @click=\"choose(item)\"\n      >\n        <DouAvatar :src=\"item.avatar\" :name=\"item.label\" size=\"sm\" />\n        <span class=\"dou-editor-mention__text\">\n          <span class=\"dou-editor-mention__label\">{{ item.label }}</span>\n          <span v-if=\"item.description\" class=\"dou-editor-mention__description\">{{\n            item.description\n          }}</span>\n        </span>\n      </div>\n      <div v-if=\"!mention!.items.length\" class=\"dou-editor-slash__empty\">\n        {{ loading ? messages.mention.searching : messages.mention.noResults }}\n      </div>\n    </div>\n  </Transition>\n</template>\n"],"mappings":"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"}

package/dist/extensions/mention/state.js

@@ -0,0 +1,113 @@
+import { isComposing } from "dou-ui";
+import { Plugin, PluginKey, TextSelection } from "prosemirror-state";
+// src/extensions/mention/state.ts
+var mentionKey = new PluginKey("dou-editor-mention");
+var TRIGGER = "@";
+function getMention(state) {
+	return state ? mentionKey.getState(state) ?? null : null;
+}
+function setMeta(view, meta) {
+	view.dispatch(view.state.tr.setMeta(mentionKey, meta).setMeta("addToHistory", false));
+}
+var closeMention = (view) => setMeta(view, { close: true });
+var setMentionItems = (view, items) => setMeta(view, { items });
+var setMentionActive = (view, active) => setMeta(view, { active });
+/** Replace the `@query` with a mention and a space after it. */
+function chooseMention(view, item) {
+	const current = getMention(view.state);
+	if (!current) return;
+	const type = view.state.schema.nodes.mention;
+	const { head } = view.state.selection;
+	const tr = view.state.tr.replaceWith(current.from, head, [type.create({
+		id: item.id,
+		label: item.label
+	}), view.state.schema.text(" ")]);
+	tr.setSelection(TextSelection.create(tr.doc, current.from + 2));
+	view.dispatch(tr.setMeta(mentionKey, { close: true }).scrollIntoView());
+	view.focus();
+}
+function mentionPlugin() {
+	let opening = null;
+	return new Plugin({
+		key: mentionKey,
+		appendTransaction(_trs, _old, state) {
+			if (opening === null) return null;
+			const from = opening;
+			opening = null;
+			if (state.doc.textBetween(from, from + 1) !== TRIGGER) return null;
+			return state.tr.setMeta(mentionKey, { open: from });
+		},
+		state: {
+			init: () => null,
+			apply(tr, value, _old, state) {
+				const meta = tr.getMeta(mentionKey);
+				if (meta?.close) return null;
+				if (meta?.open !== void 0) return {
+					from: meta.open,
+					query: "",
+					items: [],
+					active: 0
+				};
+				if (!value) return null;
+				const from = tr.mapping.map(value.from);
+				const { $head, empty } = state.selection;
+				if (!empty || $head.pos <= from || $head.pos - from > 33) return null;
+				if (!state.doc.resolve(from).sameParent($head)) return null;
+				const text = state.doc.textBetween(from, $head.pos, "\n", "\n");
+				if (text[0] !== TRIGGER) return null;
+				const query = text.slice(1);
+				if (/\s/.test(query)) return null;
+				let { items, active } = value;
+				if (meta?.items) {
+					items = meta.items;
+					active = 0;
+				}
+				if (meta?.active !== void 0) active = meta.active;
+				if (from === value.from && query === value.query && items === value.items && active === value.active) return value;
+				return {
+					from,
+					query,
+					items,
+					active
+				};
+			}
+		},
+		props: {
+			handleTextInput(view, from, _to, text) {
+				if (text !== TRIGGER || getMention(view.state)) return false;
+				const $from = view.state.doc.resolve(from);
+				if (!$from.parent.isTextblock || $from.parent.type.spec.code) return false;
+				const before = $from.parent.textBetween(0, $from.parentOffset, "", "");
+				if (/[\w.+-]$/.test(before)) return false;
+				opening = from;
+				return false;
+			},
+			handleKeyDown(view, event) {
+				const current = getMention(view.state);
+				if (!current || isComposing(event)) return false;
+				const count = current.items.length;
+				switch (event.key) {
+					case "Escape":
+						closeMention(view);
+						return true;
+					case "ArrowDown":
+					case "ArrowUp":
+						if (!count) return false;
+						setMentionActive(view, (current.active + (event.key === "ArrowDown" ? 1 : -1) + count) % count);
+						return true;
+					case "Enter":
+					case "Tab": {
+						const item = current.items[current.active];
+						if (!item) return false;
+						chooseMention(view, item);
+						return true;
+					}
+					default: return false;
+				}
+			}
+		}
+	});
+}
+export { chooseMention, closeMention, getMention, mentionKey, mentionPlugin, setMentionActive, setMentionItems };
+
+//# sourceMappingURL=state.js.map

package/dist/extensions/mention/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","names":[],"sources":["../../../src/extensions/mention/state.ts"],"sourcesContent":["import { isComposing } from 'dou-ui'\nimport { Plugin, PluginKey, TextSelection, type EditorState } from 'prosemirror-state'\nimport type { EditorView } from 'prosemirror-view'\n\n/** Someone (or something) that can be mentioned. */\nexport interface MentionItem {\n  /** Stored in the document. */\n  id: string\n  /** Shown after the `@`, and stored too so the mention reads without a lookup. */\n  label: string\n  /** A second line in the suggestions, e.g. a team or an email. */\n  description?: string\n  /** An image shown in the suggestions. */\n  avatar?: string\n}\n\n/** The suggestions: open from the `@` at `from` to the cursor, with what was typed as the query. */\nexport interface MentionState {\n  from: number\n  query: string\n  items: MentionItem[]\n  active: number\n}\n\ninterface MentionMeta {\n  open?: number\n  close?: true\n  items?: MentionItem[]\n  active?: number\n}\n\nexport const mentionKey = new PluginKey<MentionState | null>('dou-editor-mention')\n\nconst TRIGGER = '@'\nconst MAX_QUERY = 32\n\nexport function getMention(state: EditorState | null): MentionState | null {\n  return state ? (mentionKey.getState(state) ?? null) : null\n}\n\nfunction setMeta(view: EditorView, meta: MentionMeta) {\n  view.dispatch(view.state.tr.setMeta(mentionKey, meta).setMeta('addToHistory', false))\n}\n\nexport const closeMention = (view: EditorView) => setMeta(view, { close: true })\nexport const setMentionItems = (view: EditorView, items: MentionItem[]) => setMeta(view, { items })\nexport const setMentionActive = (view: EditorView, active: number) => setMeta(view, { active })\n\n/** Replace the `@query` with a mention and a space after it. */\nexport function chooseMention(view: EditorView, item: MentionItem) {\n  const current = getMention(view.state)\n  if (!current) return\n  const type = view.state.schema.nodes.mention!\n  const { head } = view.state.selection\n  const tr = view.state.tr.replaceWith(current.from, head, [\n    type.create({ id: item.id, label: item.label }),\n    view.state.schema.text(' '),\n  ])\n  tr.setSelection(TextSelection.create(tr.doc, current.from + 2))\n  view.dispatch(tr.setMeta(mentionKey, { close: true } satisfies MentionMeta).scrollIntoView())\n  view.focus()\n}\n\nexport function mentionPlugin(): Plugin<MentionState | null> {\n  let opening: number | null = null\n  return new Plugin<MentionState | null>({\n    key: mentionKey,\n    // the browser types the `@` itself; the suggestions open once it is in\n    appendTransaction(_trs, _old, state) {\n      if (opening === null) return null\n      const from = opening\n      opening = null\n      if (state.doc.textBetween(from, from + 1) !== TRIGGER) return null\n      return state.tr.setMeta(mentionKey, { open: from } satisfies MentionMeta)\n    },\n    state: {\n      init: () => null,\n      apply(tr, value, _old, state) {\n        const meta = tr.getMeta(mentionKey) as MentionMeta | undefined\n        if (meta?.close) return null\n        if (meta?.open !== undefined) return { from: meta.open, query: '', items: [], active: 0 }\n        if (!value) return null\n        const from = tr.mapping.map(value.from)\n        const { $head, empty } = state.selection\n        // close when the cursor leaves the query, or the `@` is deleted\n        if (!empty || $head.pos <= from || $head.pos - from > MAX_QUERY + 1) return null\n        if (!state.doc.resolve(from).sameParent($head)) return null\n        const text = state.doc.textBetween(from, $head.pos, '\\n', '\\n')\n        if (text[0] !== TRIGGER) return null\n        const query = text.slice(1)\n        if (/\\s/.test(query)) return null\n        let { items, active } = value\n        if (meta?.items) {\n          items = meta.items\n          active = 0\n        }\n        if (meta?.active !== undefined) active = meta.active\n        if (\n          from === value.from &&\n          query === value.query &&\n          items === value.items &&\n          active === value.active\n        )\n          return value\n        return { from, query, items, active }\n      },\n    },\n    props: {\n      handleTextInput(view, from, _to, text) {\n        if (text !== TRIGGER || getMention(view.state)) return false\n        const $from = view.state.doc.resolve(from)\n        if (!$from.parent.isTextblock || $from.parent.type.spec.code) return false\n        const before = $from.parent.textBetween(0, $from.parentOffset, '', '')\n        // not inside a word or an email address\n        if (/[\\w.+-]$/.test(before)) return false\n        opening = from\n        return false\n      },\n      handleKeyDown(view, event) {\n        const current = getMention(view.state)\n        if (!current || isComposing(event)) return false\n        const count = current.items.length\n        switch (event.key) {\n          case 'Escape':\n            closeMention(view)\n            return true\n          case 'ArrowDown':\n          case 'ArrowUp':\n            if (!count) return false\n            setMentionActive(\n              view,\n              (current.active + (event.key === 'ArrowDown' ? 1 : -1) + count) % count,\n            )\n            return true\n          case 'Enter':\n          case 'Tab': {\n            const item = current.items[current.active]\n            if (!item) return false\n            chooseMention(view, item)\n            return true\n          }\n          default:\n            return false\n        }\n      },\n    },\n  })\n}\n"],"mappings":"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"}