ckeditor5-elements-interaction 0.0.0-stage → 49.0.0

package/dist/navigation.js

@@ -0,0 +1,49 @@
+import { getAncestorElements } from 'ckeditor5-elements-core';
+/**
+ * Returns the selectable element that the cursor reaches with one step in the direction, as the arrow key moves it, or
+ * `null`: the next element is not selectable, or the step stays in the text. The step is CKEditor's: a character in the
+ * text, and the boundary between blocks, an inline object or an element at the end of a block. The first selectable
+ * element the step enters or passes is the one: the outermost, when it enters nested ones.
+ */
+export function findSelectableAfterStep(model, selection, isForward, isSelectable) {
+    const probe = model.createSelection(selection);
+    model.modifySelection(probe, { direction: isForward ? 'forward' : 'backward' });
+    if (!selection.focus || !probe.focus || probe.isEqual(selection)) {
+        return null;
+    }
+    const range = isForward
+        ? model.createRange(selection.focus, probe.focus)
+        : model.createRange(probe.focus, selection.focus);
+    // The elements the step enters or passes: their start tag in the range when going forward, their end tag backward.
+    const tokenType = isForward ? 'elementStart' : 'elementEnd';
+    for (const { item, type } of range.getWalker({ direction: isForward ? 'forward' : 'backward' })) {
+        if (type === tokenType && item.is('element') && isSelectable(item)) {
+            return item;
+        }
+    }
+    return null;
+}
+/**
+ * Returns the range the selection goes to from the selected element in the direction: the next selectable element
+ * (selected as a whole) when it is just there, otherwise the nearest place of the content, or `null` when there is none.
+ */
+export function findLeaveTarget(model, element, isForward, isSelectable) {
+    const position = model.createPositionAt(element, isForward ? 'after' : 'before');
+    const neighbour = isForward ? position.nodeAfter : position.nodeBefore;
+    return neighbour?.is('element') && isSelectable(neighbour)
+        ? model.createRangeOn(neighbour)
+        : model.schema.getNearestSelectionRange(position, isForward ? 'forward' : 'backward');
+}
+/**
+ * Returns the closest selectable element around the selection, not the selected one, or `null`.
+ */
+export function findSelectableAround(selection, isSelectable) {
+    const selected = selection.getSelectedElement();
+    for (const element of getAncestorElements(selected ? selected.parent : selection.getFirstPosition()?.parent)) {
+        if (isSelectable(element)) {
+            return element;
+        }
+    }
+    return null;
+}
+//# sourceMappingURL=navigation.js.map

package/dist/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../src/navigation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAO9D;;;;;GAKG;AACH,MAAM,UAAU,uBAAuB,CACtC,KAAY,EACZ,SAAkD,EAClD,SAAkB,EAClB,YAA0B;IAE1B,MAAM,KAAK,GAAG,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;IAE/C,KAAK,CAAC,eAAe,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC;IAEhF,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;QAClE,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,KAAK,GAAG,SAAS;QACtB,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC;QACjD,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IAEnD,mHAAmH;IACnH,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;IAE5D,KAAK,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,KAAK,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC;QACjG,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;YACpE,OAAO,IAAI,CAAC;QACb,CAAC;IACF,CAAC;IAED,OAAO,IAAI,CAAC;AACb,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,eAAe,CAC9B,KAAY,EACZ,OAAqB,EACrB,SAAkB,EAClB,YAA0B;IAE1B,MAAM,QAAQ,GAAG,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjF,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC;IAEvE,OAAO,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,YAAY,CAAC,SAAS,CAAC;QACzD,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC;QAChC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,wBAAwB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;AACxF,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,oBAAoB,CACnC,SAAkD,EAClD,YAA0B;IAE1B,MAAM,QAAQ,GAAG,SAAS,CAAC,kBAAkB,EAAE,CAAC;IAEhD,KAAK,MAAM,OAAO,IAAI,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,gBAAgB,EAAE,EAAE,MAAM,CAAC,EAAE,CAAC;QAC9G,IAAI,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC;YAC3B,OAAO,OAAO,CAAC;QAChB,CAAC;IACF,CAAC;IAED,OAAO,IAAI,CAAC;AACb,CAAC"}

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "ckeditor5-elements-interaction",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "49.0.0",
+  "description": "Element interaction for CKEditor 5, without CKEditor's widgets: select an element as a whole by a click or by the arrow keys, and react to clicks and double clicks on elements.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-feature",
+    "ckeditor5-plugin"
+  ],
+  "license": "MIT",
+  "author": "Ivan Kildyushov",
+  "homepage": "https://ivankild.github.io/ckeditor5-elements/guide/selectable",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ivankild/ckeditor5-elements.git",
+    "directory": "packages/ckeditor5-elements-interaction"
+  },
+  "bugs": {
+    "url": "https://github.com/ivankild/ckeditor5-elements/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./index.css": "./theme/selectable.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "theme",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "ckeditor5-elements-core": "49.0.0"
+  },
+  "peerDependencies": {
+    "ckeditor5": "^49.0.0"
+  },
+  "scripts": {
+    "build": "tsc --build"
+  }
 }

package/src/augmentation.ts

@@ -0,0 +1,26 @@
+import type {
+	ElementClickable,
+	ElementClickableDefinition,
+	ElementSelectable,
+	ElementSelectableMatcher
+} from './index.js';
+
+declare module 'ckeditor5' {
+	interface PluginsMap {
+		[ElementSelectable.pluginName]: ElementSelectable;
+		[ElementClickable.pluginName]: ElementClickable;
+	}
+
+	interface EditorConfig {
+		/**
+		 * The elements that can be selected as a whole: names of model elements, or filter functions. See
+		 * {@link ElementSelectable}.
+		 */
+		elementSelectable?: ElementSelectableMatcher[];
+
+		/**
+		 * The elements that react to clicks and double clicks. See {@link ElementClickable}.
+		 */
+		elementClickable?: ElementClickableDefinition[];
+	}
+}

package/src/doubleClickObserver.ts

@@ -0,0 +1,28 @@
+import { DomEventObserver, type ViewDocumentDomEventData } from 'ckeditor5';
+
+/**
+ * Fires `dblclick` on the view document when the user double-clicks in the editing view. (CKEditor has an observer for
+ * `click`, but not for `dblclick`.)
+ */
+export default class DoubleClickObserver extends DomEventObserver<'dblclick'> {
+	// The base class declares it as an accessor, so it cannot be a field here.
+	// eslint-disable-next-line @typescript-eslint/class-literal-property-style
+	public get domEventType(): 'dblclick' {
+		return 'dblclick';
+	}
+
+	/**
+	 * Fires `dblclick` on the view document for the DOM event.
+	 */
+	public onDomEvent(domEvent: MouseEvent): void {
+		this.fire(domEvent.type, domEvent);
+	}
+}
+
+/**
+ * Fired on the view document by the {@link DoubleClickObserver}.
+ */
+export interface ViewDocumentDoubleClickEvent {
+	name: 'dblclick';
+	args: [data: ViewDocumentDomEventData<MouseEvent>];
+}

package/src/elementClickable.ts

@@ -0,0 +1,117 @@
+import {
+	ClickObserver,
+	Plugin,
+	type Editor,
+	type ModelElement,
+	type ViewDocumentClickEvent,
+	type ViewElement
+} from 'ckeditor5';
+import { getElementsAround, matchesElement, type ElementMatcher } from 'ckeditor5-elements-core';
+import DoubleClickObserver, { type ViewDocumentDoubleClickEvent } from './doubleClickObserver.js';
+
+/**
+ * The mouse events an element can be made clickable with.
+ */
+export type ElementClickableEvent = 'click' | 'dblclick';
+
+/**
+ * Makes the elements that match `element` react to clicks.
+ */
+export interface ElementClickableDefinition {
+	/**
+	 * The elements the definition is for: the name of a model element (e.g. `'imageBlock'`), or a function that returns
+	 * whether it is for the given element (e.g. `element => element.hasAttribute('linkHref')`).
+	 */
+	element: ElementMatcher;
+
+	/**
+	 * The mouse event: `'click'` (the default) or `'dblclick'`.
+	 */
+	event?: ElementClickableEvent;
+
+	/**
+	 * Called with the element that was clicked, the editor, and the DOM event.
+	 */
+	callback: (element: ModelElement, editor: Editor, domEvent: MouseEvent) => void;
+}
+
+/**
+ * Calls a function when an element is clicked or double-clicked, with the model element. Elements are matched by name or
+ * by a filter function, and the definitions are the `elementClickable` editor config option (see
+ * {@link ElementClickableDefinition}):
+ *
+ * ```ts
+ * elementClickable: [
+ * 	{ element: 'imageBlock', callback: (element, editor) => console.log(element.getAttribute('src')) },
+ * 	{ element: element => element.name.startsWith('heading'), event: 'dblclick', callback: edit }
+ * ];
+ * ```
+ *
+ * The click is matched against the element that was clicked and its ancestors, the innermost first: the first element
+ * that matches a definition for the event calls its callback, and the event goes no further. For two definitions that
+ * match the same element, the first one in the config wins.
+ *
+ * It works in read-only mode too. The click still does what it does in the editor, e.g. selects an image: the plugin
+ * only reports it, before the other plugins handle it (some of them stop the event), and does not stop it.
+ */
+export default class ElementClickable extends Plugin {
+	public static get pluginName(): 'ElementClickable' {
+		return 'ElementClickable' as const;
+	}
+
+	public init(): void {
+		const view = this.editor.editing.view;
+
+		view.addObserver(ClickObserver);
+		view.addObserver(DoubleClickObserver);
+
+		// With the highest priority, before other plugins: some stop the click, e.g. CKEditor's link handling stops the
+		// click on a link, with a high priority. The plugin reports the click and does not stop it.
+		this.listenTo<ViewDocumentClickEvent>(
+			view.document,
+			'click',
+			(evt, data) => {
+				this._handle('click', data.target, data.domEvent);
+			},
+			{ priority: 'highest' }
+		);
+		this.listenTo<ViewDocumentDoubleClickEvent>(
+			view.document,
+			'dblclick',
+			(evt, data) => {
+				this._handle('dblclick', data.target, data.domEvent);
+			},
+			{ priority: 'highest' }
+		);
+	}
+
+	/**
+	 * Returns the definition and the element that a click on the view element is for: the innermost element, among the
+	 * view element and its ancestors, that matches a definition for the event. `null` when there is none.
+	 */
+	public find(
+		viewElement: ViewElement,
+		event: ElementClickableEvent = 'click'
+	): { element: ModelElement; definition: ElementClickableDefinition } | null {
+		const mapper = this.editor.editing.mapper;
+		const definitions = (this.editor.config.get('elementClickable') ?? []).filter(
+			definition => (definition.event ?? 'click') === event
+		);
+
+		for (const { element } of getElementsAround(mapper, viewElement)) {
+			const definition = definitions.find(({ element: matcher }) => matchesElement(matcher, element));
+
+			if (definition) {
+				return { element, definition };
+			}
+		}
+
+		return null;
+	}
+
+	private _handle(event: ElementClickableEvent, target: ViewElement, domEvent: MouseEvent): void {
+		const found = this.isEnabled ? this.find(target, event) : null;
+
+		found?.definition.callback(found.element, this.editor, domEvent);
+	}
+}

package/src/elementSelectable.ts

@@ -0,0 +1,274 @@
+import {
+	MouseObserver,
+	Plugin,
+	keyCodes,
+	isArrowKeyCode,
+	isForwardArrowKeyCode,
+	type DowncastSelectionEvent,
+	type ModelElement,
+	type ViewDocumentKeyDownEvent,
+	type ViewDocumentMouseDownEvent,
+	type ViewDowncastWriter,
+	type ViewElement
+} from 'ckeditor5';
+import { getElementsAround, keyboardPriorities, matchesElement, type ElementMatcher } from 'ckeditor5-elements-core';
+import { findLeaveTarget, findSelectableAfterStep, findSelectableAround } from './navigation.js';
+
+/**
+ * Matches the elements that can be selected: the name of a model element (e.g. `'callout'`), or a function that returns
+ * whether it is for the given element (e.g. `element => element.hasAttribute('card')`).
+ */
+export type ElementSelectableMatcher = ElementMatcher;
+
+/**
+ * The class of the selected element in the editing view.
+ */
+const SELECTED_CLASS = 'ck-elements-selected';
+
+/**
+ * Makes elements selectable as a whole, which is what CKEditor's widgets do, without them: it does not change the view
+ * of the element, and does not need the `Widget` plugin. The elements are matched by name or by a filter function, and
+ * they are the `elementSelectable` editor config option:
+ *
+ * ```ts
+ * elementSelectable: ['callout', 'divider', element => element.hasAttribute('card')];
+ * ```
+ *
+ * An element is selected (the model selection is *on* it, and the view has a fake selection and the
+ * `ck-elements-selected` class):
+ *
+ * * **By a click** on the element. An element that has content, e.g. a container, is selected by a click on the element
+ *   itself, not on its content: a click in its text puts the cursor there, as it does without the plugin. An element
+ *   with no content (an object) is selected by a click anywhere in it.
+ * * **By the left and right arrow keys**: when the next step of the cursor enters or passes a selectable element (at the
+ *   end of a block, or before an inline element), the key selects it instead. With an element selected, the arrow keys
+ *   move the cursor to the content after (right, down) or before (left, up) it, or select the next selectable element,
+ *   if it is just there.
+ * * **By the Esc key**: with the cursor in an element, it selects the closest selectable one around the cursor, unless
+ *   something else handles Esc first, e.g. closes a balloon.
+ *
+ * A selected element is deleted, replaced by typing and copied, as any selected content.
+ *
+ * Names are made selectable in the model schema (`isSelectable`), so the selection on them is kept: a filter cannot,
+ * so the elements it matches must be selectable already (e.g. objects). Features can add elements with
+ * {@link ElementSelectable#add}.
+ */
+export default class ElementSelectable extends Plugin {
+	private readonly _matchers: ElementSelectableMatcher[] = [];
+	private _selected: ViewElement | null = null;
+
+	public static get pluginName(): 'ElementSelectable' {
+		return 'ElementSelectable' as const;
+	}
+
+	public init(): void {
+		const editor = this.editor;
+		const view = editor.editing.view;
+		const viewDocument = view.document;
+
+		this._matchers.push(...(editor.config.get('elementSelectable') ?? []));
+
+		// The selection of an element is a fake one, as for widgets: the browser does not draw the selection on its own.
+		editor.editing.downcastDispatcher.on<DowncastSelectionEvent>('selection', (evt, data, conversionApi) => {
+			const element = data.selection.getSelectedElement();
+			const viewElement =
+				element && this.isSelectable(element) ? editor.editing.mapper.toViewElement(element) : null;
+
+			if (element && viewElement && conversionApi.consumable.consume(data.selection, 'selection')) {
+				conversionApi.writer.setSelection(conversionApi.writer.createRangeOn(viewElement), {
+					fake: true,
+					label: `<${element.name}>`
+				});
+			}
+		});
+		editor.editing.downcastDispatcher.on<DowncastSelectionEvent>(
+			'selection',
+			(evt, data, conversionApi) => {
+				this._mark(conversionApi.writer, viewDocument.selection.getSelectedElement());
+			},
+			{ priority: 'low' }
+		);
+
+		view.addObserver(MouseObserver);
+		this.listenTo<ViewDocumentMouseDownEvent>(viewDocument, 'mousedown', (evt, data) => {
+			const element = this.isEnabled ? this._findToSelect(data.target) : null;
+
+			if (element) {
+				// The browser would put the cursor where the click is, and move the focus.
+				data.preventDefault();
+				view.focus();
+				this._select(element);
+			}
+		});
+
+		// The arrow keys are handled on `keydown`, before CKEditor's widgets, and not as the `arrowKey` event: that one
+		// bubbles from the selection, and CKEditor's widgets (loaded by other features, e.g. the clipboard) handle it for
+		// every object, in a context that is reached before this plugin could.
+		this.listenTo<ViewDocumentKeyDownEvent>(
+			viewDocument,
+			'keydown',
+			(evt, data) => {
+				const isPlain = !data.shiftKey && !data.ctrlKey && !data.altKey && !data.metaKey;
+
+				if (
+					this.isEnabled &&
+					isPlain &&
+					isArrowKeyCode(data.keyCode) &&
+					this._handleArrowKey(
+						data.keyCode,
+						isForwardArrowKeyCode(data.keyCode, editor.locale.contentLanguageDirection)
+					)
+				) {
+					data.preventDefault();
+					evt.stop();
+				}
+			},
+			{ priority: keyboardPriorities.selectable }
+		);
+
+		// Esc goes after what else uses it, e.g. closing a balloon. Editor keystrokes (`cancel()`)
+		// do not stop this event, they prevent the default action of the DOM event: then Esc is handled already.
+		this.listenTo<ViewDocumentKeyDownEvent>(
+			viewDocument,
+			'keydown',
+			(evt, data) => {
+				const isFree = data.keystroke === keyCodes.esc && !data.domEvent.defaultPrevented;
+				const element = this.isEnabled && isFree ? this._findAround() : null;
+
+				if (element) {
+					this._select(element);
+					data.preventDefault();
+					evt.stop();
+				}
+			},
+			{ priority: keyboardPriorities.selectableEsc }
+		);
+	}
+
+	public afterInit(): void {
+		// Before the data is loaded, once all the elements are registered: also the ones that other plugins register in
+		// `afterInit()`, e.g. the element schema, whichever plugin comes first.
+		this.listenTo(
+			this.editor.data,
+			'init',
+			() => {
+				this._makeSelectable(this._matchers);
+			},
+			{ priority: 'high' }
+		);
+	}
+
+	/**
+	 * Makes more elements selectable, as the `elementSelectable` option does: a name of a model element, or a filter.
+	 * Used by features that add elements, e.g. the element schema.
+	 */
+	public add(...matchers: ElementSelectableMatcher[]): void {
+		this._matchers.push(...matchers);
+		this._makeSelectable(matchers);
+	}
+
+	/**
+	 * Returns whether the element can be selected by this plugin: it matches a name or a filter.
+	 */
+	public isSelectable(element: ModelElement): boolean {
+		return !element.is('rootElement') && this._matchers.some(matcher => matchesElement(matcher, element));
+	}
+
+	/**
+	 * Selects the element as a whole.
+	 */
+	private _select(element: ModelElement): void {
+		this.editor.model.change(writer => {
+			writer.setSelection(element, 'on');
+		});
+	}
+
+	/**
+	 * Makes the model elements named in the matchers selectable in the schema, for the ones that are registered.
+	 */
+	private _makeSelectable(matchers: readonly ElementSelectableMatcher[]): void {
+		const schema = this.editor.model.schema;
+
+		for (const matcher of matchers) {
+			if (typeof matcher === 'string' && schema.isRegistered(matcher) && !schema.isSelectable(matcher)) {
+				schema.extend(matcher, { isSelectable: true });
+			}
+		}
+	}
+
+	/**
+	 * Returns the element a mouse down on the view element selects: the closest selectable element around it (or it), if
+	 * the click is on the element itself, or the element has no content.
+	 */
+	private _findToSelect(target: ViewElement): ModelElement | null {
+		for (const { element, viewElement } of getElementsAround(this.editor.editing.mapper, target)) {
+			if (this.isSelectable(element) && (viewElement === target || element.isEmpty)) {
+				return element;
+			}
+		}
+
+		return null;
+	}
+
+	/**
+	 * Handles an arrow key. Returns whether the key moved the selection, and the browser must not.
+	 */
+	private _handleArrowKey(keyCode: number, isForward: boolean): boolean {
+		const model = this.editor.model;
+		const selection = model.document.selection;
+		const selected = selection.getSelectedElement();
+		const isSelectable = (element: ModelElement): boolean => this.isSelectable(element);
+
+		if (selected && this.isSelectable(selected)) {
+			const target = findLeaveTarget(model, selected, isForward, isSelectable);
+
+			if (target) {
+				model.change(writer => {
+					writer.setSelection(target);
+				});
+			}
+
+			// Also when there is nowhere to go: the browser would move the cursor into the fake selection.
+			return true;
+		}
+
+		// The up and down keys move in the lines of the text: only the browser knows where.
+		const isHorizontal = keyCode === keyCodes.arrowleft || keyCode === keyCodes.arrowright;
+		const next =
+			isHorizontal && selection.isCollapsed
+				? findSelectableAfterStep(model, selection, isForward, isSelectable)
+				: null;
+
+		if (next) {
+			this._select(next);
+		}
+
+		return !!next;
+	}
+
+	/**
+	 * Returns the closest selectable element around the selection, not the selected one.
+	 */
+	private _findAround(): ModelElement | null {
+		return findSelectableAround(this.editor.model.document.selection, element => this.isSelectable(element));
+	}
+
+	/**
+	 * Marks the selected view element with the class, and unmarks the one that was selected.
+	 */
+	private _mark(writer: ViewDowncastWriter, selected: ViewElement | null): void {
+		const mapper = this.editor.editing.mapper;
+		const element = selected && mapper.toModelElement(selected);
+		const marked = element && this.isSelectable(element) ? selected : null;
+
+		if (this._selected && this._selected !== marked) {
+			writer.removeClass(SELECTED_CLASS, this._selected);
+		}
+
+		if (marked) {
+			writer.addClass(SELECTED_CLASS, marked);
+		}
+
+		this._selected = marked;
+	}
+}

package/src/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Element interaction, without CKEditor's widgets: select an element as a whole by a click or by the arrow keys, and call
+ * a function, with the model element, when an element that matches a name or a filter is clicked or double-clicked.
+ *
+ * @module ckeditor5-elements-interaction
+ */
+
+// Plugins.
+export { default as ElementSelectable, type ElementSelectableMatcher } from './elementSelectable.js';
+export {
+	default as ElementClickable,
+	type ElementClickableDefinition,
+	type ElementClickableEvent
+} from './elementClickable.js';
+
+// Observers.
+export { default as DoubleClickObserver, type ViewDocumentDoubleClickEvent } from './doubleClickObserver.js';
+
+import './augmentation.js';

package/src/navigation.ts

@@ -0,0 +1,79 @@
+import type { Model, ModelDocumentSelection, ModelElement, ModelRange, ModelSelection } from 'ckeditor5';
+import { getAncestorElements } from 'ckeditor5-elements-core';
+
+/**
+ * Whether an element can be selected as a whole.
+ */
+export type IsSelectable = (element: ModelElement) => boolean;
+
+/**
+ * Returns the selectable element that the cursor reaches with one step in the direction, as the arrow key moves it, or
+ * `null`: the next element is not selectable, or the step stays in the text. The step is CKEditor's: a character in the
+ * text, and the boundary between blocks, an inline object or an element at the end of a block. The first selectable
+ * element the step enters or passes is the one: the outermost, when it enters nested ones.
+ */
+export function findSelectableAfterStep(
+	model: Model,
+	selection: ModelSelection | ModelDocumentSelection,
+	isForward: boolean,
+	isSelectable: IsSelectable
+): ModelElement | null {
+	const probe = model.createSelection(selection);
+
+	model.modifySelection(probe, { direction: isForward ? 'forward' : 'backward' });
+
+	if (!selection.focus || !probe.focus || probe.isEqual(selection)) {
+		return null;
+	}
+
+	const range = isForward
+		? model.createRange(selection.focus, probe.focus)
+		: model.createRange(probe.focus, selection.focus);
+
+	// The elements the step enters or passes: their start tag in the range when going forward, their end tag backward.
+	const tokenType = isForward ? 'elementStart' : 'elementEnd';
+
+	for (const { item, type } of range.getWalker({ direction: isForward ? 'forward' : 'backward' })) {
+		if (type === tokenType && item.is('element') && isSelectable(item)) {
+			return item;
+		}
+	}
+
+	return null;
+}
+
+/**
+ * Returns the range the selection goes to from the selected element in the direction: the next selectable element
+ * (selected as a whole) when it is just there, otherwise the nearest place of the content, or `null` when there is none.
+ */
+export function findLeaveTarget(
+	model: Model,
+	element: ModelElement,
+	isForward: boolean,
+	isSelectable: IsSelectable
+): ModelRange | null {
+	const position = model.createPositionAt(element, isForward ? 'after' : 'before');
+	const neighbour = isForward ? position.nodeAfter : position.nodeBefore;
+
+	return neighbour?.is('element') && isSelectable(neighbour)
+		? model.createRangeOn(neighbour)
+		: model.schema.getNearestSelectionRange(position, isForward ? 'forward' : 'backward');
+}
+
+/**
+ * Returns the closest selectable element around the selection, not the selected one, or `null`.
+ */
+export function findSelectableAround(
+	selection: ModelSelection | ModelDocumentSelection,
+	isSelectable: IsSelectable
+): ModelElement | null {
+	const selected = selection.getSelectedElement();
+
+	for (const element of getAncestorElements(selected ? selected.parent : selection.getFirstPosition()?.parent)) {
+		if (isSelectable(element)) {
+			return element;
+		}
+	}
+
+	return null;
+}

package/theme/selectable.css

@@ -0,0 +1,8 @@
+/*
+ * A selected element: the editing view marks it with this class, and the selection is a fake one, so the browser draws
+ * nothing on the element itself.
+ */
+.ck-content .ck-elements-selected {
+	outline: 2px solid var(--ck-color-focus-border);
+	outline-offset: 1px;
+}