feat: Initial clean release of CHM

packages/editor/CodeMirror/extensions/rendering/utils/makeInlineReplaceExtension.ts

@@ -0,0 +1,185 @@
+// Ref: https://codemirror.net/examples/bundle/
+// and  https://codemirror.net/examples/decoration/
+
+import { EditorView, Decoration, DecorationSet, WidgetType } from '@codemirror/view';
+import { ViewPlugin, ViewUpdate } from '@codemirror/view';
+import { syntaxTree } from '@codemirror/language';
+import { EditorSelection, EditorState, Range, StateEffect } from '@codemirror/state';
+import { SyntaxNodeRef } from '@lezer/common';
+import { ReplacementExtension } from '../types';
+import nodeIntersectsSelection from './nodeIntersectsSelection';
+import clampSelectionToDocument from '../../../utils/clampSelectionToDocument';
+
+const updateInlineDecorationsEffect = StateEffect.define();
+
+interface MouseSelectionState {
+	initialSelection: EditorSelection;
+}
+
+interface VisibleRange {
+	from: number;
+	to: number;
+}
+
+export const makeInlineReplaceExtension = (extensionSpec: ReplacementExtension) => ViewPlugin.fromClass(class {
+	public decorations: DecorationSet = Decoration.set([]);
+	private mouseSelectionBefore_: MouseSelectionState|null = null;
+
+	public constructor(private view: EditorView) {
+		view.dom.addEventListener('mousedown', this.onMouseDown, true);
+		view.dom.ownerDocument.addEventListener('mouseup', this.onMouseUp);
+		this.updateDecorations(view.state, view.visibleRanges);
+	}
+
+	public destroy() {
+		this.view.dom.removeEventListener('mousedown', this.onMouseDown, true);
+		this.view.dom.ownerDocument.removeEventListener('mouseup', this.onMouseUp);
+	}
+
+	private onMouseDown = (event: MouseEvent) => {
+		if (event.button === 0) {
+			this.mouseSelectionBefore_ = { initialSelection: this.view.state.selection };
+		}
+	};
+
+	private onMouseUp = () => {
+		if (this.mouseSelectionBefore_) {
+			// To prevent unnecessary scroll on iOS, decoration changes need to
+			// happen *after* the gesture ends.
+			requestAnimationFrame(() => {
+				this.mouseSelectionBefore_ = null;
+				this.view.dispatch({
+					effects: updateInlineDecorationsEffect.of(null),
+				});
+			});
+		}
+	};
+
+	private updateDecorations(state: EditorState, visibleRanges: readonly VisibleRange[]) {
+		const doc = state.doc;
+		let selection = state.selection;
+		if (this.mouseSelectionBefore_?.initialSelection) {
+			selection = clampSelectionToDocument(this.mouseSelectionBefore_.initialSelection, doc);
+		}
+		if (this.mouseSelectionBefore_) {
+			state = state.update({ selection }).state;
+		}
+		const cursorLine = doc.lineAt(selection.main.anchor);
+
+		const parentTagCounts = new Map<string, number>();
+		const decorateNode = (node: SyntaxNodeRef) => {
+			const widgetOrDecoration = extensionSpec.createDecoration(node, state, parentTagCounts);
+			let decoration;
+			if (widgetOrDecoration instanceof WidgetType) {
+				decoration = Decoration.replace({
+					widget: widgetOrDecoration,
+				});
+			} else if (widgetOrDecoration instanceof Decoration) {
+				decoration = widgetOrDecoration;
+			}
+
+			if (decoration) {
+				const range = extensionSpec.getDecorationRange?.(node, state, parentTagCounts) ?? [node.from, node.to];
+				const rangeLineFrom = doc.lineAt(range[0]);
+				const rangeLineTo = range.length === 2 ? doc.lineAt(range[1]) : rangeLineFrom;
+
+				// A different start/end line causes errors.
+				if (rangeLineFrom.number === rangeLineTo.number) {
+					if (range.length === 1) {
+						widgets.push(decoration.range(range[0]));
+					} else {
+						widgets.push(decoration.range(range[0], range[1]));
+					}
+				}
+			}
+		};
+
+		let widgets: Range<Decoration>[] = [];
+		for (const { from, to } of visibleRanges) {
+			parentTagCounts.clear();
+			syntaxTree(state).iterate({
+				from, to,
+				enter: node => {
+					parentTagCounts.set(node.name, (parentTagCounts.get(node.name) ?? 0) + 1);
+
+					const strategy = extensionSpec.getRevealStrategy?.(node, state, parentTagCounts) ?? 'line';
+
+					let isSelected = false;
+					if (typeof strategy === 'boolean') {
+						isSelected = strategy;
+					} else if (strategy === 'line') {
+						const nodeLine = doc.lineAt(node.from);
+						const lineContainsSelection = cursorLine.number === nodeLine.number;
+						isSelected = lineContainsSelection || nodeIntersectsSelection(selection, node);
+					} else if (strategy === 'select') {
+						isSelected = nodeIntersectsSelection(selection, node);
+					} else if (strategy === 'active') {
+						const parent = node.node.parent;
+						isSelected = nodeIntersectsSelection(selection, node) || (!!parent && nodeIntersectsSelection(selection, parent));
+					}
+
+					const shouldHide = (
+						(extensionSpec.hideWhenContainsSelection ?? true) && isSelected
+					);
+
+					if (!shouldHide) {
+						decorateNode(node);
+					}
+				},
+				leave: node => {
+					parentTagCounts.set(node.name, (parentTagCounts.get(node.name) ?? 0) - 1);
+				},
+			});
+		}
+		this.decorations = Decoration.set(widgets, true);
+
+		if (extensionSpec.mergeNeighbors && widgets.length > 0) {
+			const originalLength = widgets.length;
+			widgets = [];
+
+			const iter = this.decorations.iter();
+			let previous = iter.value;
+			let previousFrom = iter.from;
+			let previousTo = iter.to;
+			widgets.push(iter.value.range(iter.from, iter.to));
+
+			for (iter.next(); iter.value; iter.next()) {
+				let from = iter.from;
+				if (previousTo === iter.from && previous.eq(iter.value)) {
+					from = previousFrom;
+					widgets.pop();
+				}
+				widgets.push(iter.value.range(from, iter.to));
+
+				previous = iter.value;
+				previousTo = iter.to;
+				previousFrom = from;
+			}
+
+			if (widgets.length < originalLength) {
+				this.decorations = Decoration.set(widgets, true);
+			}
+		}
+	}
+
+	public update(update: ViewUpdate) {
+		const forceUpdate = update.transactions.some(transaction => (
+			transaction.effects.some(effect => effect.is(updateInlineDecorationsEffect))
+			|| extensionSpec.shouldFullReRender?.(transaction)
+		));
+
+		// Document changes move the selection, so the original selection may no longer
+		// be valid:
+		if (update.docChanged) {
+			this.mouseSelectionBefore_ = null;
+		}
+
+		if (update.docChanged || update.viewportChanged || update.selectionSet || forceUpdate) {
+			this.updateDecorations(update.state, update.view.visibleRanges);
+		}
+	}
+}, {
+	decorations: view => view.decorations,
+});
+
+export default makeInlineReplaceExtension;