ckeditor5-elements-clickable 0.0.0-stage → 49.0.0-alpha.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ivan Kildyushov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,33 @@
-# Temporary Holding Version
+# ckeditor5-elements-clickable
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Clickable elements for CKEditor 5 Elements: `ElementClickable` calls a function, with the model element, when an element
+that matches a model name or a filter function is clicked or double-clicked.
+
+## Installation
+
+This package is part of `ckeditor5-elements`. Install the whole package to use it:
+
+```sh
+npm install ckeditor5 ckeditor5-elements
+```
+
+## Usage
+
+```ts
+import { ElementClickable } from 'ckeditor5-elements';
+
+// In the editor config:
+plugins: [..., ElementClickable],
+elementClickables: [
+	// By name. The default event is `click`.
+	{ element: 'imageBlock', callback: (element, editor) => console.log(element.getAttribute('src')) },
+	// By a filter, on double click.
+	{ element: element => element.name.startsWith('heading'), event: 'dblclick', callback: (element, editor) => {} }
+]
+```
+
+See the [Clickable elements guide](https://ivankild.github.io/ckeditor5-elements/guide/clickable) of the documentation.
+
+## License
+
+MIT

package/dist/augmentation.d.ts

@@ -0,0 +1,13 @@
+import type { ElementClickable, ElementClickableDefinition } from './index.js';
+declare module 'ckeditor5' {
+    interface PluginsMap {
+        [ElementClickable.pluginName]: ElementClickable;
+    }
+    interface EditorConfig {
+        /**
+         * The elements that react to clicks and double clicks. See {@link ElementClickable}.
+         */
+        elementClickables?: ElementClickableDefinition[];
+    }
+}
+//# sourceMappingURL=augmentation.d.ts.map

package/dist/augmentation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"augmentation.d.ts","sourceRoot":"","sources":["../src/augmentation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAE/E,OAAO,QAAQ,WAAW,CAAC;IAC1B,UAAU,UAAU;QACnB,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE,gBAAgB,CAAC;KAChD;IAED,UAAU,YAAY;QACrB;;WAEG;QACH,iBAAiB,CAAC,EAAE,0BAA0B,EAAE,CAAC;KACjD;CACD"}

package/dist/augmentation.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=augmentation.js.map

package/dist/augmentation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"augmentation.js","sourceRoot":"","sources":["../src/augmentation.ts"],"names":[],"mappings":""}

package/dist/doubleClickObserver.d.ts

@@ -0,0 +1,20 @@
+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'> {
+    get domEventType(): 'dblclick';
+    /**
+     * Fires `dblclick` on the view document for the DOM event.
+     */
+    onDomEvent(domEvent: MouseEvent): void;
+}
+/**
+ * Fired on the view document by the {@link DoubleClickObserver}.
+ */
+export interface ViewDocumentDoubleClickEvent {
+    name: 'dblclick';
+    args: [data: ViewDocumentDomEventData<MouseEvent>];
+}
+//# sourceMappingURL=doubleClickObserver.d.ts.map

package/dist/doubleClickObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"doubleClickObserver.d.ts","sourceRoot":"","sources":["../src/doubleClickObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,KAAK,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAE5E;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,gBAAgB,CAAC,UAAU,CAAC;IAG5E,IAAW,YAAY,IAAI,UAAU,CAEpC;IAED;;OAEG;IACI,UAAU,CAAC,QAAQ,EAAE,UAAU,GAAG,IAAI;CAG7C;AAED;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC5C,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,CAAC,IAAI,EAAE,wBAAwB,CAAC,UAAU,CAAC,CAAC,CAAC;CACnD"}

package/dist/doubleClickObserver.js

@@ -0,0 +1,19 @@
+import { DomEventObserver } 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 {
+    // 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
+    get domEventType() {
+        return 'dblclick';
+    }
+    /**
+     * Fires `dblclick` on the view document for the DOM event.
+     */
+    onDomEvent(domEvent) {
+        this.fire(domEvent.type, domEvent);
+    }
+}
+//# sourceMappingURL=doubleClickObserver.js.map

package/dist/doubleClickObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"doubleClickObserver.js","sourceRoot":"","sources":["../src/doubleClickObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAiC,MAAM,WAAW,CAAC;AAE5E;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,gBAA4B;IAC5E,2EAA2E;IAC3E,2EAA2E;IAC3E,IAAW,YAAY;QACtB,OAAO,UAAU,CAAC;IACnB,CAAC;IAED;;OAEG;IACI,UAAU,CAAC,QAAoB;QACrC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IACpC,CAAC;CACD"}

package/dist/elementClickable.d.ts

@@ -0,0 +1,57 @@
+import { Plugin, type Editor, type ModelElement, type ViewElement } from 'ckeditor5';
+import { type ElementMatcher } from 'ckeditor5-elements-core';
+/**
+ * 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 `elementClickables` editor config option (see
+ * {@link ElementClickableDefinition}):
+ *
+ * ```ts
+ * elementClickables: [
+ * 	{ 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 {
+    static get pluginName(): 'ElementClickable';
+    init(): void;
+    /**
+     * 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.
+     */
+    find(viewElement: ViewElement, event?: ElementClickableEvent): {
+        element: ModelElement;
+        definition: ElementClickableDefinition;
+    } | null;
+    private _handle;
+}
+//# sourceMappingURL=elementClickable.d.ts.map

package/dist/elementClickable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementClickable.d.ts","sourceRoot":"","sources":["../src/elementClickable.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,MAAM,EACN,KAAK,MAAM,EACX,KAAK,YAAY,EAEjB,KAAK,WAAW,EAChB,MAAM,WAAW,CAAC;AACnB,OAAO,EAAqC,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGjG;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,0BAA0B;IAC1C;;;OAGG;IACH,OAAO,EAAE,cAAc,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAE9B;;OAEG;IACH,QAAQ,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,KAAK,IAAI,CAAC;CAChF;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,MAAM;IACnD,WAAkB,UAAU,IAAI,kBAAkB,CAEjD;IAEM,IAAI,IAAI,IAAI;IA0BnB;;;OAGG;IACI,IAAI,CACV,WAAW,EAAE,WAAW,EACxB,KAAK,GAAE,qBAA+B,GACpC;QAAE,OAAO,EAAE,YAAY,CAAC;QAAC,UAAU,EAAE,0BAA0B,CAAA;KAAE,GAAG,IAAI;IAiB3E,OAAO,CAAC,OAAO;CAKf"}

package/dist/elementClickable.js

@@ -0,0 +1,60 @@
+import { ClickObserver, Plugin } from 'ckeditor5';
+import { getElementsAround, matchesElement } from 'ckeditor5-elements-core';
+import DoubleClickObserver, {} from './doubleClickObserver.js';
+/**
+ * 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 `elementClickables` editor config option (see
+ * {@link ElementClickableDefinition}):
+ *
+ * ```ts
+ * elementClickables: [
+ * 	{ 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 {
+    static get pluginName() {
+        return 'ElementClickable';
+    }
+    init() {
+        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(view.document, 'click', (evt, data) => {
+            this._handle('click', data.target, data.domEvent);
+        }, { priority: 'highest' });
+        this.listenTo(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.
+     */
+    find(viewElement, event = 'click') {
+        const mapper = this.editor.editing.mapper;
+        const definitions = (this.editor.config.get('elementClickables') ?? []).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;
+    }
+    _handle(event, target, domEvent) {
+        const found = this.isEnabled ? this.find(target, event) : null;
+        found?.definition.callback(found.element, this.editor, domEvent);
+    }
+}
+//# sourceMappingURL=elementClickable.js.map

package/dist/elementClickable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementClickable.js","sourceRoot":"","sources":["../src/elementClickable.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,aAAa,EACb,MAAM,EAKN,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAuB,MAAM,yBAAyB,CAAC;AACjG,OAAO,mBAAmB,EAAE,EAAqC,MAAM,0BAA0B,CAAC;AA4BlG;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,MAAM;IAC5C,MAAM,KAAK,UAAU;QAC3B,OAAO,kBAA2B,CAAC;IACpC,CAAC;IAEM,IAAI;QACV,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;QAEtC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;QAChC,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC;QAEtC,gHAAgH;QAChH,4FAA4F;QAC5F,IAAI,CAAC,QAAQ,CACZ,IAAI,CAAC,QAAQ,EACb,OAAO,EACP,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YACb,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACnD,CAAC,EACD,EAAE,QAAQ,EAAE,SAAS,EAAE,CACvB,CAAC;QACF,IAAI,CAAC,QAAQ,CACZ,IAAI,CAAC,QAAQ,EACb,UAAU,EACV,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YACb,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACtD,CAAC,EACD,EAAE,QAAQ,EAAE,SAAS,EAAE,CACvB,CAAC;IACH,CAAC;IAED;;;OAGG;IACI,IAAI,CACV,WAAwB,EACxB,QAA+B,OAAO;QAEtC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC;QAC1C,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAC7E,UAAU,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,IAAI,OAAO,CAAC,KAAK,KAAK,CACrD,CAAC;QAEF,KAAK,MAAM,EAAE,OAAO,EAAE,IAAI,iBAAiB,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,CAAC;YAClE,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;YAEhG,IAAI,UAAU,EAAE,CAAC;gBAChB,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;YAChC,CAAC;QACF,CAAC;QAED,OAAO,IAAI,CAAC;IACb,CAAC;IAEO,OAAO,CAAC,KAA4B,EAAE,MAAmB,EAAE,QAAoB;QACtF,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAE/D,KAAK,EAAE,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAClE,CAAC;CACD"}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Clickable elements: 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-clickable
+ */
+export { default as ElementClickable, type ElementClickableDefinition, type ElementClickableEvent } from './elementClickable.js';
+export { default as DoubleClickObserver, type ViewDocumentDoubleClickEvent } from './doubleClickObserver.js';
+import './augmentation.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EACN,OAAO,IAAI,gBAAgB,EAC3B,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAC1B,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,KAAK,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAE7G,OAAO,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,12 @@
+/**
+ * Clickable elements: 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-clickable
+ */
+// Plugins.
+export { default as ElementClickable } from './elementClickable.js';
+// Observers.
+export { default as DoubleClickObserver } from './doubleClickObserver.js';
+import './augmentation.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,WAAW;AACX,OAAO,EACN,OAAO,IAAI,gBAAgB,EAG3B,MAAM,uBAAuB,CAAC;AAE/B,aAAa;AACb,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAqC,MAAM,0BAA0B,CAAC;AAE7G,OAAO,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "ckeditor5-elements-clickable",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "49.0.0-alpha.2",
+  "description": "Clickable elements for CKEditor 5: call a function, with the model element, when an element that matches a name or a filter is clicked or double-clicked.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-feature",
+    "ckeditor5-plugin"
+  ],
+  "license": "MIT",
+  "author": "Ivan Kildyushov",
+  "homepage": "https://ivankild.github.io/ckeditor5-elements/guide/clickable",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ivankild/ckeditor5-elements.git",
+    "directory": "packages/ckeditor5-elements-clickable"
+  },
+  "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"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "ckeditor5-elements-core": "49.0.0-alpha.2"
+  },
+  "peerDependencies": {
+    "ckeditor5": "^49.0.0"
+  },
+  "scripts": {
+    "build": "tsc --build"
+  }
 }

package/src/augmentation.ts

@@ -0,0 +1,14 @@
+import type { ElementClickable, ElementClickableDefinition } from './index.js';
+
+declare module 'ckeditor5' {
+	interface PluginsMap {
+		[ElementClickable.pluginName]: ElementClickable;
+	}
+
+	interface EditorConfig {
+		/**
+		 * The elements that react to clicks and double clicks. See {@link ElementClickable}.
+		 */
+		elementClickables?: 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 `elementClickables` editor config option (see
+ * {@link ElementClickableDefinition}):
+ *
+ * ```ts
+ * elementClickables: [
+ * 	{ 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('elementClickables') ?? []).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/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Clickable elements: 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-clickable
+ */
+
+// Plugins.
+export {
+	default as ElementClickable,
+	type ElementClickableDefinition,
+	type ElementClickableEvent
+} from './elementClickable.js';
+
+// Observers.
+export { default as DoubleClickObserver, type ViewDocumentDoubleClickEvent } from './doubleClickObserver.js';
+
+import './augmentation.js';