@webwriter/quiz 1.1.3 → 2.0.0

package/src/lib/hint-popup.ts

@@ -0,0 +1,152 @@
+import SlIconButton from "@shoelace-style/shoelace/dist/components/icon-button/icon-button.component.js";
+import SlPopup from "@shoelace-style/shoelace/dist/components/popup/popup.component.js";
+import "@shoelace-style/shoelace/dist/themes/light.css";
+import { LitElementWw } from "@webwriter/lit";
+import IconQuestionCircleFill from "bootstrap-icons/icons/question-circle-fill.svg";
+import IconQuestionCircle from "bootstrap-icons/icons/question-circle.svg";
+import { css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+
+/**
+ * A reusable popup with a "?" trigger that manages a `<webwriter-quiz-hint>`
+ * element on its host.
+ *
+ * Use it inside your widget like this:
+ * <hint-popup>
+ *   <slot name="hint"></slot>
+ * </hint-popup>
+ *
+ * Make sure to include `webwriter-quiz-hint?` in your widget's content property.
+ */
+export class HintPopup extends LitElementWw {
+	static readonly CONTENT_TAG = "webwriter-quiz-hint";
+
+	static scopedElements = {
+		"sl-icon-button": SlIconButton,
+		"sl-popup": SlPopup,
+	};
+
+	static styles = css`
+		:host {
+			display: inline-block;
+			height: 1.5em;
+		}
+
+		sl-icon-button::part(base) {
+			padding: var(--sl-spacing-2x-small);
+		}
+
+		sl-popup {
+			--arrow-color: var(--sl-color-neutral-700);
+
+			&::part(popup) {
+				padding: var(--sl-spacing-x-small);
+				max-width: 20rem;
+				background: var(--sl-color-neutral-700);
+				border-radius: var(--sl-border-radius-medium);
+				color: var(--sl-color-neutral-0);
+				font-size: var(--sl-font-size-small);
+			}
+		}
+	`;
+
+	@property({ type: String, attribute: "slot-name", reflect: true })
+	accessor slotName = "hint";
+
+	@property({ type: String, attribute: "position", reflect: true })
+	accessor position: "start" | "end" = "end";
+
+	@state()
+	private accessor open = false;
+
+	private get host(): HTMLElement | null {
+		const root = this.getRootNode();
+		if (root instanceof ShadowRoot) {
+			return root.host as HTMLElement;
+		}
+		return this.parentElement;
+	}
+
+	private get hostContentEls(): HTMLElement[] {
+		const host = this.host;
+		if (!host || !this.slotName) return [];
+		return Array.from(host.querySelectorAll<HTMLElement>(`:scope > [slot="${this.slotName}"]`));
+	}
+
+	private get hasContent(): boolean {
+		return this.hostContentEls.some(el => el.innerText.trim() !== "");
+	}
+
+	private insertHintElement(host: HTMLElement): HTMLElement {
+		const el = host.ownerDocument.createElement(HintPopup.CONTENT_TAG);
+		el.slot = this.slotName;
+
+		if (this.position === "start") {
+			host.prepend(el);
+		} else {
+			host.append(el);
+		}
+
+		return el;
+	}
+
+	private toggle() {
+		this.open = !this.open;
+		const host = this.host;
+		if (!host) return;
+
+		if (host.isContentEditable && this.open) {
+			if (this.hostContentEls.length === 0) this.insertHintElement(host);
+
+			// Move cursor to the end of the hint content when opening the popup
+			setTimeout(() => {
+				if (!(this.children[0] instanceof HTMLSlotElement)) return;
+				const assignedElements = this.children[0].assignedElements();
+				const hintContent = assignedElements[assignedElements.length - 1];
+				if (!(hintContent instanceof HTMLElement)) return;
+
+				let endContainer: Node = hintContent;
+				while (endContainer.lastChild) endContainer = endContainer.lastChild;
+
+				const range = hintContent.ownerDocument.createRange();
+				range.setStart(
+					endContainer,
+					endContainer.nodeType === Node.TEXT_NODE
+						? (endContainer.textContent ?? "").length
+						: endContainer.childNodes.length,
+				);
+				range.collapse(true);
+
+				const selection = hintContent.ownerDocument.getSelection();
+				selection?.removeAllRanges();
+				selection?.addRange(range);
+			}, 0);
+		} else if (host.isContentEditable && !this.open) {
+			if (!this.hasContent) {
+				this.hostContentEls.forEach(el => el.remove());
+			}
+		}
+	}
+
+	render() {
+		if (this.host && !this.host.isContentEditable && !this.hasContent) return nothing;
+
+		return html`<sl-popup
+			?active=${this.open}
+			placement="left"
+			arrow
+			auto-size
+			shift
+			distance="5"
+			@selectstart=${(e: Event) => e.stopImmediatePropagation()}
+		>
+			<sl-icon-button
+				part=${this.hasContent || this.open ? "filled" : "empty"}
+				slot="anchor"
+				src=${this.hasContent || this.open ? IconQuestionCircleFill : IconQuestionCircle}
+				@click=${() => this.toggle()}
+			></sl-icon-button>
+			<slot @slotchange=${() => this.requestUpdate()}></slot>
+		</sl-popup>`;
+	}
+}

package/src/lib/utils.ts

@@ -0,0 +1,97 @@
+import { css } from "lit";
+
+export const commonStyles = css`
+	:host(:not([contenteditable="true"]):not([contenteditable=""])) .author-only {
+		display: none;
+	}
+
+	:host(:is([contenteditable="true"], [contenteditable=""])) .user-only {
+		display: none;
+	}
+`;
+
+export function randomizeArray<T>(items: T[]): T[] {
+	const randomized = [...items];
+	for (let i = randomized.length - 1; i > 0; i--) {
+		const j = Math.floor(Math.random() * (i + 1));
+		[randomized[i], randomized[j]] = [randomized[j], randomized[i]];
+	}
+	return randomized;
+}
+
+const resolvedCssVariableCache = new Map<string, string>();
+
+export function resolveCssVariable(variableName: `--${string}`, fallback: string) {
+	const cachedValue = resolvedCssVariableCache.get(variableName);
+	if (cachedValue) return cachedValue;
+
+	const value = getComputedStyle(document.body).getPropertyValue(variableName).trim() || fallback;
+
+	resolvedCssVariableCache.set(variableName, value);
+	return value;
+}
+
+export class BiMap<K, V> {
+	private readonly keyToValue = new Map<K, V>();
+	private readonly valueToKey = new Map<V, K>();
+
+	set(key: K, value: V): this {
+		if (this.keyToValue.has(key)) {
+			const oldValue = this.keyToValue.get(key)!;
+			this.valueToKey.delete(oldValue);
+		}
+
+		if (this.valueToKey.has(value)) {
+			const oldKey = this.valueToKey.get(value)!;
+			this.keyToValue.delete(oldKey);
+		}
+
+		this.keyToValue.set(key, value);
+		this.valueToKey.set(value, key);
+
+		return this;
+	}
+
+	getValue(key: K): V | undefined {
+		return this.keyToValue.get(key);
+	}
+
+	getKey(value: V): K | undefined {
+		return this.valueToKey.get(value);
+	}
+
+	hasKey(key: K): boolean {
+		return this.keyToValue.has(key);
+	}
+
+	hasValue(value: V): boolean {
+		return this.valueToKey.has(value);
+	}
+
+	deleteKey(key: K): boolean {
+		if (!this.keyToValue.has(key)) return false;
+
+		const value = this.keyToValue.get(key)!;
+		this.keyToValue.delete(key);
+		this.valueToKey.delete(value);
+		return true;
+	}
+
+	deleteValue(value: V): boolean {
+		if (!this.valueToKey.has(value)) return false;
+
+		const key = this.valueToKey.get(value)!;
+		this.valueToKey.delete(value);
+		this.keyToValue.delete(key);
+		return true;
+	}
+
+	clear(): void {
+		this.keyToValue.clear();
+		this.valueToKey.clear();
+	}
+
+	get size(): number {
+		return this.keyToValue.size;
+	}
+}

package/src/lib/webwriter-quirks.ts

@@ -0,0 +1,121 @@
+/**
+ * @returns True if the user is using WebWriter, false otherwise.
+ */
+export const isWebWriter = () => document.documentElement.id.startsWith("ww-");
+
+/**
+ * Equivalent to the check used in ProseMirror to determine if the user is on a Mac or iOS device,
+ * which is used to determined if the `Mod-` key refers to `Meta` or `Control`.
+ * @see https://code.haverbeke.berlin/prosemirror/prosemirror-keymap/src/commit/176de4152dca0e473f74504e8995d7a281392eb5/src/keymap.ts#L5
+ *
+ * @returns True if the user is on a Mac or iOS device, false otherwise.
+ */
+export const isMac = () => typeof navigator != "undefined" && /Mac|iP(hone|[oa]d)/.test(navigator.platform);
+
+let enterCreatesNewSelectors = new Set<string>();
+let enterCreatesNewInitialized = false;
+
+export function registerAsEnterCreatesNew(selector: string) {
+	if (!isWebWriter()) return;
+
+	enterCreatesNewSelectors.add(selector.toLowerCase());
+	if (!enterCreatesNewInitialized) {
+		document.body.addEventListener(
+			"keydown",
+			event => {
+				if (!event.isTrusted) return;
+
+				const focus = document.getSelection()?.focusNode;
+				const closestElement = focus?.parentElement?.closest(Array.from(enterCreatesNewSelectors).join(","));
+				const insideHint = !!focus?.parentElement?.closest("webwriter-quiz-hint");
+
+				if (closestElement && !insideHint && event.key === "Enter") {
+					event.preventDefault();
+					event.stopImmediatePropagation();
+
+					const modKey = !event.shiftKey;
+					const ctrlEnterEvent = new KeyboardEvent("keydown", {
+						key: "Enter",
+						metaKey: modKey && isMac(),
+						ctrlKey: modKey && !isMac(),
+					});
+					document.body.dispatchEvent(ctrlEnterEvent);
+				}
+			},
+			true,
+		);
+		enterCreatesNewInitialized = true;
+	}
+}
+
+export interface RelativeSelectionEndpoint {
+	path: number[];
+	offset: number;
+}
+
+export interface RelativeSelection {
+	anchor: RelativeSelectionEndpoint;
+	focus: RelativeSelectionEndpoint;
+}
+
+/**
+ * Serializes the current selection relative to `root`
+ * @returns the serialized selection, or `undefined` if there is no selection or if the selection is not fully contained in `root`
+ */
+export function serializeRelativeSelection(root: Node): RelativeSelection | undefined {
+	const selection = root.ownerDocument?.getSelection();
+	if (!selection?.anchorNode || !selection.focusNode) return;
+
+	const serialize = (node: Node, offset: number): RelativeSelectionEndpoint | undefined => {
+		const path = [];
+		while (node !== root) {
+			const parent = node.parentNode;
+			if (!parent) return;
+			path.unshift(Array.prototype.indexOf.call(parent.childNodes, node));
+			node = parent;
+		}
+		return { path, offset };
+	};
+
+	const anchor = serialize(selection.anchorNode, selection.anchorOffset);
+	const focus = serialize(selection.focusNode, selection.focusOffset);
+	if (anchor && focus) return { anchor, focus };
+}
+
+/**
+ * Restores a selection previously serialized with `serializeRelativeSelection` on the given `root` element.
+ * @returns true if the selection was successfully restored
+ */
+export function restoreRelativeSelection(root: Node, relative: RelativeSelection): boolean {
+	const resolve = ({ path, offset }: RelativeSelectionEndpoint) => {
+		let node = root;
+		for (const index of path) {
+			node = node.childNodes[index];
+			if (!node) return;
+		}
+		const maxOffset =
+			node.nodeType === Node.TEXT_NODE || node.nodeType === Node.COMMENT_NODE
+				? (node.textContent?.length ?? 0)
+				: node.childNodes.length;
+		return offset >= 0 && offset <= maxOffset ? { node, offset } : undefined;
+	};
+
+	const anchor = resolve(relative.anchor);
+	const focus = resolve(relative.focus);
+	const selection = root.ownerDocument?.getSelection();
+	if (!anchor || !focus || !selection) return false;
+
+	selection.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
+	return true;
+}
+
+/**
+ * Runs a DOM mutation and restores the selection in the replacement element with the same ID.
+ * This overrides ProseMirror's behavior of trying to select the old "same" position from the old document
+ */
+export function mutateWithStableSelection(root: HTMLElement, mutator: () => void) {
+	const savedSelection = serializeRelativeSelection(root);
+	mutator();
+	const newRoot = document.getElementById(root.id);
+	if (newRoot && savedSelection) restoreRelativeSelection(newRoot, savedSelection);
+}