fix(editor): partially disable at mention in code block

.gitignore

@@ -36,6 +36,7 @@ Thumbs.db
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
 test-output
+**/__screenshots__/
 
 apps/*/data*
 apps/*/out

packages/ckeditor5/package.json

@@ -16,7 +16,17 @@
     "ckeditor5-premium-features": "47.4.0"
   },
   "devDependencies": {
+    "@smithy/middleware-retry": "4.4.27",
     "@smithy/middleware-retry": "4.4.29",
-    "@types/jquery": "3.5.33"
+    "@types/jquery": "3.5.33",
+    "@vitest/browser": "4.0.17",
+    "@vitest/coverage-istanbul": "4.0.17",
+    "vite-plugin-svgo": "2.0.0",
+    "vitest": "4.0.17",
+    "webdriverio": "9.23.0"
+  },
+  "scripts": {
+    "test": "vitest",
+    "test:debug": "vitest --inspect-brk --no-file-parallelism --browser.headless=false"
   }
 }

packages/ckeditor5/src/plugins.ts

@@ -31,6 +31,7 @@ import CodeBlockLanguageDropdown from "./plugins/code_block_language_dropdown.js
 import MoveBlockUpDownPlugin from "./plugins/move_block_updown.js";
 import ScrollOnUndoRedoPlugin from "./plugins/scroll_on_undo_redo.js"
 import InlineCodeNoSpellcheck from "./plugins/inline_code_no_spellcheck.js";
+import DisableMentionInCodeBlock from "./plugins/disable_mention_in_codeblock.js";
 
 /**
  * Plugins that are specific to Trilium and not part of the CKEditor 5 core, included in both text editors but not in the attribute editor.
@@ -53,6 +54,7 @@ const TRILIUM_PLUGINS: typeof Plugin[] = [
     MoveBlockUpDownPlugin,
     ScrollOnUndoRedoPlugin,
     InlineCodeNoSpellcheck,
+    DisableMentionInCodeBlock,
 ];
 
 /**

packages/ckeditor5/src/plugins/disable_mention_in_codeblock.ts

@@ -0,0 +1,23 @@
+import { Plugin } from "ckeditor5";
+
+/**
+ * Disables the mention feature inside code blocks.
+ * This prevents the autocomplete popup from appearing when typing `@` or `/` within code blocks.
+ */
+export default class DisableMentionInCodeBlock extends Plugin {
+    public static get pluginName() {
+        return "DisableMentionInCodeBlock" as const;
+    }
+
+    init() {
+        const editor = this.editor;
+        const schema = editor.model.schema;
+
+        // Disallow mention attribute inside code blocks
+        schema.addAttributeCheck((context, attributeName) => {
+            if (attributeName === 'mention' && context.endsWith('codeBlock $text')) {
+                return false;
+            }
+        });
+    }
+}

packages/ckeditor5/tests/disable_mention_in_codeblock.ts

@@ -0,0 +1,65 @@
+import { ClassicEditor, CodeBlock, Mention } from 'ckeditor5';
+import DisableMentionInCodeBlock from '../src/plugins/disable_mention_in_codeblock.js';
+import { describe, beforeEach, it, afterEach, expect } from "vitest";
+
+describe( 'DisableMentionInCodeBlock', () => {
+	let editorElement: HTMLDivElement, editor: ClassicEditor;
+
+	beforeEach( async () => {
+		editorElement = document.createElement( 'div' );
+		document.body.appendChild( editorElement );
+
+		return ClassicEditor
+			.create( editorElement, {
+				plugins: [ CodeBlock, Mention, DisableMentionInCodeBlock ],
+				licenseKey: "GPL"
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+			} );
+	} );
+
+	afterEach( () => {
+		editorElement.remove();
+
+		return editor.destroy();
+	} );
+
+	it( 'should be loaded', () => {
+		expect( editor.plugins.get( DisableMentionInCodeBlock ) ).to.instanceOf( DisableMentionInCodeBlock );
+	} );
+
+	it( 'has proper name', () => {
+		expect( DisableMentionInCodeBlock.pluginName ).to.equal( 'DisableMentionInCodeBlock' );
+	} );
+
+	it( 'should prevent mention attribute inside code blocks', () => {
+		const schema = editor.model.schema;
+
+		// Test that mention attribute is disallowed in code block context
+		const context = schema.createContext( [ 'codeBlock', '$text' ] );
+		const isAllowed = schema.checkAttribute( context, 'mention' );
+
+		expect( isAllowed ).to.be.false;
+	} );
+
+	it( 'should allow mention attribute outside code blocks', () => {
+		const schema = editor.model.schema;
+
+		// Test that mention attribute is still allowed in regular paragraphs
+		const context = schema.createContext( [ 'paragraph', '$text' ] );
+		const isAllowed = schema.checkAttribute( context, 'mention' );
+
+		expect( isAllowed ).to.be.true;
+	} );
+
+	it( 'should allow mention attribute in list items', () => {
+		const schema = editor.model.schema;
+
+		// Test that mention attribute is still allowed in list items
+		const context = schema.createContext( [ 'listItem', '$text' ] );
+		const isAllowed = schema.checkAttribute( context, 'mention' );
+
+		expect( isAllowed ).to.be.true;
+	} );
+} );

packages/ckeditor5/vitest.config.ts

@@ -0,0 +1,43 @@
+/**
+ * @license Copyright (c) 2023-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { defineConfig } from 'vitest/config';
+import svg from 'vite-plugin-svgo';
+import { webdriverio } from "@vitest/browser-webdriverio";
+
+export default defineConfig( {
+	plugins: [
+		svg()
+	],
+	test: {
+		browser: {
+			enabled: true,
+			provider: webdriverio(),
+			headless: true,
+			ui: false,
+			instances: [ { browser: 'chrome' } ]
+		},
+		include: [
+			'tests/**/*.[jt]s'
+		],
+		exclude: [
+			'tests/setup.ts'
+		],
+		globals: true,
+		watch: false,
+		coverage: {
+			thresholds: {
+				lines: 100,
+				functions: 100,
+				branches: 100,
+				statements: 100
+			},
+			provider: 'istanbul',
+			include: [
+				'src'
+			]
+		}
+	}
+} );