Method #showMenu

src/cm/touchSelectionMenu.js:466–552

(anchor)

	}

	#showMenu(anchor) {
		const hasSelection = this.#hasSelection();
		const items = filterSelectionMenuItems(selectionMenu(), {
			readOnly: this.#isReadOnly(),
			hasSelection,
		});

		this.$menu.innerHTML = "";
		if (!items.length) {
			this.#menuRequested = false;
			this.#hideMenu(true);
			return;
		}

		items.forEach(({ onclick, text }) => {
			const $item = document.createElement("div");
			if (typeof text === "string") {
				$item.textContent = text;
			} else if (text instanceof Node) {
				$item.append(text.cloneNode(true));
			}
			let handled = false;
			const runAction = (event) => {
				if (handled) return;
				handled = true;
				event.preventDefault();
				event.stopPropagation();
				this.#handlingMenuAction = true;
				try {
					onclick?.();
				} finally {
					this.#handlingMenuAction = false;
					this.#menuRequested = false;
					this.#hideMenu();
					this.#view.focus();
				}
			};
			$item.addEventListener("pointerdown", runAction);
			$item.addEventListener("click", runAction);
			this.$menu.append($item);
		});

		if (!this.$menu.isConnected) {
			this.#container.append(this.$menu);
		}

		const containerRect = this.#container.getBoundingClientRect();
		this.$menu.style.left = "0px";
		this.$menu.style.top = "0px";
		this.$menu.style.visibility = "hidden";

		const menuRect = this.$menu.getBoundingClientRect();
		const preferredLeft = anchor.x - menuRect.width / 2;
		const aboveGap = anchor.hasSelection ? MENU_SELECTION_GAP : MENU_CARET_GAP;
		const belowGap = anchor.hasSelection
			? MENU_HANDLE_CLEARANCE
			: MENU_CARET_GAP;
		const topAbove = anchor.top - menuRect.height - aboveGap;