@atlaskit/editor-plugin-code-block-advanced 1.0.2 → 1.1.0

package/dist/types/codeBlockAdvancedPluginType.d.ts

@@ -2,9 +2,17 @@ import type { Extension } from '@codemirror/state';
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
+import type { FindReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
+import type { SelectionMarkerPlugin } from '@atlaskit/editor-plugin-selection-marker';
 export type CodeBlockAdvancedPlugin = NextEditorPlugin<'codeBlockAdvanced', {
-    dependencies: [CodeBlockPlugin, SelectionPlugin, OptionalPlugin<EditorDisabledPlugin>];
+    dependencies: [
+        CodeBlockPlugin,
+        SelectionPlugin,
+        OptionalPlugin<EditorDisabledPlugin>,
+        OptionalPlugin<SelectionMarkerPlugin>,
+        OptionalPlugin<FindReplacePlugin>
+    ];
     pluginConfiguration: {
         extensions?: Extension[];
     } | undefined;

package/dist/types/nodeviews/codeBlockAdvanced.d.ts

@@ -2,7 +2,7 @@ import { Extension } from '@codemirror/state';
 import { ViewUpdate } from '@codemirror/view';
 import type { getPosHandler, getPosHandlerNode, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 interface ConfigProps {
     api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
@@ -15,15 +15,15 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private lineWrappingCompartment;
     private languageCompartment;
     private readOnlyCompartment;
-    private copyDecoCompartment;
+    private pmDecorationsCompartment;
     private node;
     private getPos;
     private cm;
     private selectionAPI;
     private maybeTryingToReachNodeSelection;
     private cleanupDisabledState;
-    private cleanupCopyButtonDecoration;
     private languageLoader;
+    private pmFacet;
     constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, config: ConfigProps);
     destroy(): void;
     forwardUpdate(update: ViewUpdate): void;
@@ -31,10 +31,15 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private updateReadonlyState;
     private updateLanguage;
     private selectCodeBlockNode;
-    private addCopyButtonDecoration;
     private wordWrappingEnabled;
     private updateWordWrap;
-    update(node: PMNode): boolean;
+    update(node: PMNode, _: readonly Decoration[], innerDecorations: DecorationSource): boolean;
+    /**
+     * Updates a facet which stores information on the prosemirror decorations
+     *
+     * This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
+     */
+    private updateProseMirrorDecorations;
     stopEvent(e: Event): boolean;
 }
 export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler) => CodeBlockAdvancedNodeView;

package/dist/types/nodeviews/extensions/keymap/index.d.ts

@@ -9,6 +9,7 @@ interface KeymapProps {
     getPos: getPosHandlerNode;
     selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
     onMaybeNodeSelection: () => void;
+    customFindReplace: boolean;
 }
-export declare const keymapExtension: ({ view, getNode, getPos, selectCodeBlockNode, onMaybeNodeSelection, }: KeymapProps) => Extension;
+export declare const keymapExtension: ({ view, getNode, getPos, selectCodeBlockNode, onMaybeNodeSelection, customFindReplace, }: KeymapProps) => Extension;
 export {};

package/dist/types/nodeviews/extensions/manageSelectionMarker.d.ts

@@ -0,0 +1,10 @@
+import { Extension } from '@codemirror/state';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { CodeBlockAdvancedPlugin } from '../../codeBlockAdvancedPluginType';
+/**
+ * Hides selection marker decoration when focused on codemirror editor and re-enables on blur
+ *
+ * @param api
+ * @returns CodeMirror Extension
+ */
+export declare const manageSelectionMarker: (api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined) => Extension;

package/dist/types/nodeviews/extensions/prosemirrorDecorations.d.ts

@@ -0,0 +1,20 @@
+import { Facet } from '@codemirror/state';
+import { ViewPlugin, EditorView as CodeMirror, DecorationSet, ViewUpdate } from '@codemirror/view';
+import type { EditorView, DecorationSource } from '@atlaskit/editor-prosemirror/view';
+/**
+ * Creates CodeMirror versions of the decorations provided by ProseMirror.
+ *
+ * Inline ProseMirror decorations -> Mark CodeMirror decorations
+ * Widget ProseMirror decorations -> Widget CodeMirror decorations
+ *
+ * This way any decorations applied in ProseMirror land should automatically be supported
+ * by the CodeMirror editor
+ *
+ * @param updateDecorationsEffect Facet for the prosemirror decorations
+ * @returns CodeMirror extension
+ */
+export declare const prosemirrorDecorationPlugin: (updateDecorationsEffect: Facet<DecorationSource>, editorView: EditorView, getPos: () => number | undefined) => ViewPlugin<{
+    decorations: DecorationSet;
+    updateDecorations(view: CodeMirror): DecorationSet;
+    update(update: ViewUpdate): void;
+}>;

package/dist/types-ts4.5/codeBlockAdvancedPluginType.d.ts

@@ -2,12 +2,16 @@ import type { Extension } from '@codemirror/state';
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
+import type { FindReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
+import type { SelectionMarkerPlugin } from '@atlaskit/editor-plugin-selection-marker';
 export type CodeBlockAdvancedPlugin = NextEditorPlugin<'codeBlockAdvanced', {
     dependencies: [
         CodeBlockPlugin,
         SelectionPlugin,
-        OptionalPlugin<EditorDisabledPlugin>
+        OptionalPlugin<EditorDisabledPlugin>,
+        OptionalPlugin<SelectionMarkerPlugin>,
+        OptionalPlugin<FindReplacePlugin>
     ];
     pluginConfiguration: {
         extensions?: Extension[];

package/dist/types-ts4.5/nodeviews/codeBlockAdvanced.d.ts

@@ -2,7 +2,7 @@ import { Extension } from '@codemirror/state';
 import { ViewUpdate } from '@codemirror/view';
 import type { getPosHandler, getPosHandlerNode, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 interface ConfigProps {
     api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
@@ -15,15 +15,15 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private lineWrappingCompartment;
     private languageCompartment;
     private readOnlyCompartment;
-    private copyDecoCompartment;
+    private pmDecorationsCompartment;
     private node;
     private getPos;
     private cm;
     private selectionAPI;
     private maybeTryingToReachNodeSelection;
     private cleanupDisabledState;
-    private cleanupCopyButtonDecoration;
     private languageLoader;
+    private pmFacet;
     constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, config: ConfigProps);
     destroy(): void;
     forwardUpdate(update: ViewUpdate): void;
@@ -31,10 +31,15 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private updateReadonlyState;
     private updateLanguage;
     private selectCodeBlockNode;
-    private addCopyButtonDecoration;
     private wordWrappingEnabled;
     private updateWordWrap;
-    update(node: PMNode): boolean;
+    update(node: PMNode, _: readonly Decoration[], innerDecorations: DecorationSource): boolean;
+    /**
+     * Updates a facet which stores information on the prosemirror decorations
+     *
+     * This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
+     */
+    private updateProseMirrorDecorations;
     stopEvent(e: Event): boolean;
 }
 export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler) => CodeBlockAdvancedNodeView;

package/dist/types-ts4.5/nodeviews/extensions/keymap/index.d.ts

@@ -9,6 +9,7 @@ interface KeymapProps {
     getPos: getPosHandlerNode;
     selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
     onMaybeNodeSelection: () => void;
+    customFindReplace: boolean;
 }
-export declare const keymapExtension: ({ view, getNode, getPos, selectCodeBlockNode, onMaybeNodeSelection, }: KeymapProps) => Extension;
+export declare const keymapExtension: ({ view, getNode, getPos, selectCodeBlockNode, onMaybeNodeSelection, customFindReplace, }: KeymapProps) => Extension;
 export {};

package/dist/types-ts4.5/nodeviews/extensions/manageSelectionMarker.d.ts

@@ -0,0 +1,10 @@
+import { Extension } from '@codemirror/state';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { CodeBlockAdvancedPlugin } from '../../codeBlockAdvancedPluginType';
+/**
+ * Hides selection marker decoration when focused on codemirror editor and re-enables on blur
+ *
+ * @param api
+ * @returns CodeMirror Extension
+ */
+export declare const manageSelectionMarker: (api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined) => Extension;

package/dist/types-ts4.5/nodeviews/extensions/prosemirrorDecorations.d.ts

@@ -0,0 +1,20 @@
+import { Facet } from '@codemirror/state';
+import { ViewPlugin, EditorView as CodeMirror, DecorationSet, ViewUpdate } from '@codemirror/view';
+import type { EditorView, DecorationSource } from '@atlaskit/editor-prosemirror/view';
+/**
+ * Creates CodeMirror versions of the decorations provided by ProseMirror.
+ *
+ * Inline ProseMirror decorations -> Mark CodeMirror decorations
+ * Widget ProseMirror decorations -> Widget CodeMirror decorations
+ *
+ * This way any decorations applied in ProseMirror land should automatically be supported
+ * by the CodeMirror editor
+ *
+ * @param updateDecorationsEffect Facet for the prosemirror decorations
+ * @returns CodeMirror extension
+ */
+export declare const prosemirrorDecorationPlugin: (updateDecorationsEffect: Facet<DecorationSource>, editorView: EditorView, getPos: () => number | undefined) => ViewPlugin<{
+    decorations: DecorationSet;
+    updateDecorations(view: CodeMirror): DecorationSet;
+    update(update: ViewUpdate): void;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "1.0.2",
+	"version": "1.1.0",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,12 +33,14 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^46.1.0",
-		"@atlaskit/editor-common": "^99.5.0",
-		"@atlaskit/editor-plugin-code-block": "^3.6.0",
-		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
-		"@atlaskit/editor-plugin-selection": "^1.6.0",
-		"@atlaskit/editor-prosemirror": "6.2.1",
-		"@atlaskit/tokens": "^3.2.0",
+		"@atlaskit/editor-common": "^99.10.0",
+		"@atlaskit/editor-plugin-code-block": "^3.7.0",
+		"@atlaskit/editor-plugin-editor-disabled": "^1.5.0",
+		"@atlaskit/editor-plugin-find-replace": "^1.9.0",
+		"@atlaskit/editor-plugin-selection": "^1.7.0",
+		"@atlaskit/editor-plugin-selection-marker": "^1.8.0",
+		"@atlaskit/editor-prosemirror": "7.0.0",
+		"@atlaskit/tokens": "^3.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/autocomplete": "6.18.4",
 		"@codemirror/commands": "6.7.1",
@@ -54,7 +56,7 @@
 		"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
 	},
 	"devDependencies": {
-		"@atlaskit/code": "^15.6.0",
+		"@atlaskit/code": "^15.7.0",
 		"typescript": "~5.4.2"
 	},
 	"techstack": {

package/src/codeBlockAdvancedPluginType.ts

@@ -3,12 +3,20 @@ import type { Extension } from '@codemirror/state';
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
+import type { FindReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
+import type { SelectionMarkerPlugin } from '@atlaskit/editor-plugin-selection-marker';
 
 export type CodeBlockAdvancedPlugin = NextEditorPlugin<
 	'codeBlockAdvanced',
 	{
-		dependencies: [CodeBlockPlugin, SelectionPlugin, OptionalPlugin<EditorDisabledPlugin>];
+		dependencies: [
+			CodeBlockPlugin,
+			SelectionPlugin,
+			OptionalPlugin<EditorDisabledPlugin>,
+			OptionalPlugin<SelectionMarkerPlugin>,
+			OptionalPlugin<FindReplacePlugin>,
+		];
 		pluginConfiguration:
 			| {
 					extensions?: Extension[];

package/src/nodeviews/codeBlockAdvanced.ts

@@ -1,6 +1,6 @@
 import { closeBrackets } from '@codemirror/autocomplete';
 import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
-import { Compartment, Extension, EditorSelection } from '@codemirror/state';
+import { Compartment, Extension, EditorSelection, Facet } from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, ViewUpdate, gutters } from '@codemirror/view';
 
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
@@ -13,7 +13,12 @@ import type {
 import { EditorSelectionAPI } from '@atlaskit/editor-plugin-selection';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import type {
+	Decoration,
+	DecorationSource,
+	EditorView,
+	NodeView,
+} from '@atlaskit/editor-prosemirror/view';
 
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
@@ -21,9 +26,9 @@ import { cmTheme } from '../ui/theme';
 
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
 import { updateCMSelection } from './codemirrorSync/updateCMSelection';
-import { bidiCharWarningExtension } from './extensions/bidiCharWarning';
-import { copyButtonDecorations } from './extensions/copyButtonDecorations';
 import { keymapExtension } from './extensions/keymap';
+import { manageSelectionMarker } from './extensions/manageSelectionMarker';
+import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
 import { LanguageLoader } from './languages/loader';
 
 interface ConfigProps {
@@ -39,17 +44,16 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	private lineWrappingCompartment = new Compartment();
 	private languageCompartment = new Compartment();
 	private readOnlyCompartment = new Compartment();
-	private copyDecoCompartment = new Compartment();
+	private pmDecorationsCompartment = new Compartment();
 	private node: PMNode;
 	private getPos: getPosHandlerNode;
 	private cm: CodeMirror;
 	private selectionAPI: EditorSelectionAPI | undefined;
 	private maybeTryingToReachNodeSelection = false;
 	private cleanupDisabledState: (() => void) | undefined;
-	private cleanupCopyButtonDecoration: (() => void) | undefined;
 	private languageLoader: LanguageLoader;
+	private pmFacet = Facet.define<DecorationSource>();
 
-	// eslint-disable-next-line @typescript-eslint/max-params
 	constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, config: ConfigProps) {
 		this.node = node;
 		this.view = view;
@@ -60,13 +64,6 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		this.cleanupDisabledState = config.api?.editorDisabled?.sharedState.onChange(() => {
 			this.updateReadonlyState();
 		});
-		this.cleanupCopyButtonDecoration = config.api?.codeBlock?.sharedState.onChange(
-			({ nextSharedState, prevSharedState }) => {
-				if (nextSharedState?.copyButtonHoverNode !== prevSharedState?.copyButtonHoverNode) {
-					this.addCopyButtonDecoration(nextSharedState?.copyButtonHoverNode);
-				}
-			},
-		);
 		this.languageLoader = new LanguageLoader((lang) => {
 			this.updating = true;
 			this.cm.dispatch({
@@ -81,13 +78,14 @@ class CodeBlockAdvancedNodeView implements NodeView {
 				...config.extensions,
 				this.lineWrappingCompartment.of([]),
 				this.languageCompartment.of([]),
-				this.copyDecoCompartment.of([]),
+				this.pmDecorationsCompartment.of([]),
 				keymapExtension({
 					view,
 					getPos,
 					getNode,
 					selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
 					onMaybeNodeSelection,
+					customFindReplace: Boolean(config.api?.findReplace),
 				}),
 				cmTheme,
 				syntaxHighlighting(highlightStyle),
@@ -100,7 +98,8 @@ class CodeBlockAdvancedNodeView implements NodeView {
 				this.readOnlyCompartment.of(CodeMirror.editable.of(this.view.editable)),
 				closeBrackets(),
 				CodeMirror.editorAttributes.of({ class: 'code-block' }),
-				bidiCharWarningExtension,
+				manageSelectionMarker(config.api),
+				prosemirrorDecorationPlugin(this.pmFacet, view, getPos),
 			],
 		});
 
@@ -115,7 +114,6 @@ class CodeBlockAdvancedNodeView implements NodeView {
 
 	destroy() {
 		this.cleanupDisabledState?.();
-		this.cleanupCopyButtonDecoration?.();
 	}
 
 	forwardUpdate(update: ViewUpdate) {
@@ -162,18 +160,6 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		}
 	}
 
-	private addCopyButtonDecoration(node: PMNode | undefined) {
-		this.updating = true;
-		this.cm.dispatch({
-			effects: [
-				this.copyDecoCompartment.reconfigure(
-					node && node === this.node ? copyButtonDecorations : [],
-				),
-			],
-		});
-		this.updating = false;
-	}
-
 	private wordWrappingEnabled = false;
 
 	private updateWordWrap(node: PMNode) {
@@ -191,7 +177,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		}
 	}
 
-	update(node: PMNode) {
+	update(node: PMNode, _: readonly Decoration[], innerDecorations: DecorationSource) {
 		this.maybeTryingToReachNodeSelection = false;
 
 		if (node.type !== this.node.type) {
@@ -210,9 +196,24 @@ class CodeBlockAdvancedNodeView implements NodeView {
 			this.cm.dispatch(tr);
 			this.updating = false;
 		});
+		this.updateProseMirrorDecorations(innerDecorations);
 		return true;
 	}
 
+	/**
+	 * Updates a facet which stores information on the prosemirror decorations
+	 *
+	 * This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
+	 */
+	private updateProseMirrorDecorations(decorationSource: DecorationSource) {
+		this.updating = true;
+		const computedFacet = this.pmFacet.compute([], () => decorationSource);
+		this.cm.dispatch({
+			effects: this.pmDecorationsCompartment.reconfigure(computedFacet),
+		});
+		this.updating = false;
+	}
+
 	stopEvent(e: Event) {
 		if (e instanceof MouseEvent && e.type === 'mousedown') {
 			// !Warning: Side effect!

package/src/nodeviews/codemirrorSync/syncCMWithPM.ts

@@ -25,7 +25,6 @@ export const syncCMWithPM = ({ view, update, offset }: Props): void => {
 	const pmSel = view.state.selection;
 	if (update.docChanged || pmSel.from !== selFrom || pmSel.to !== selTo) {
 		const tr = view.state.tr;
-		// eslint-disable-next-line @typescript-eslint/max-params
 		update.changes.iterChanges((fromA, toA, fromB, toB, text) => {
 			if (text.length) {
 				tr.replaceWith(offset + fromA, offset + toA, view.state.schema.text(text.toString()));

package/src/nodeviews/extensions/keymap/index.ts

@@ -2,6 +2,7 @@ import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 import { Extension } from '@codemirror/state';
 import { KeyBinding, keymap as cmKeymap } from '@codemirror/view';
 
+import { browser } from '@atlaskit/editor-common/browser';
 import { RelativeSelectionPos } from '@atlaskit/editor-common/selection';
 import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
 import { exitCode } from '@atlaskit/editor-prosemirror/commands';
@@ -18,6 +19,7 @@ interface KeymapProps {
 	getPos: getPosHandlerNode;
 	selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
 	onMaybeNodeSelection: () => void;
+	customFindReplace: boolean;
 }
 
 export const keymapExtension = ({
@@ -26,9 +28,17 @@ export const keymapExtension = ({
 	getPos,
 	selectCodeBlockNode,
 	onMaybeNodeSelection,
+	customFindReplace,
 }: KeymapProps): Extension => {
 	return cmKeymap.of(
-		codeBlockKeymap({ view, getNode, getPos, selectCodeBlockNode, onMaybeNodeSelection }),
+		codeBlockKeymap({
+			view,
+			getNode,
+			getPos,
+			selectCodeBlockNode,
+			onMaybeNodeSelection,
+			customFindReplace,
+		}),
 	);
 };
 
@@ -38,6 +48,7 @@ const codeBlockKeymap = ({
 	getPos,
 	selectCodeBlockNode,
 	onMaybeNodeSelection,
+	customFindReplace,
 }: KeymapProps): readonly KeyBinding[] => {
 	return [
 		{
@@ -96,6 +107,25 @@ const codeBlockKeymap = ({
 					onMaybeNodeSelection,
 				}),
 		},
+		{
+			key: 'Ctrl-f',
+			mac: 'Cmd-f',
+			run: () => {
+				// Pass synthetic event to prosemirror
+				if (customFindReplace) {
+					view.dispatchEvent(
+						new KeyboardEvent('keydown', {
+							key: 'f',
+							code: 'KeyF',
+							metaKey: browser.mac ? true : false,
+							ctrlKey: browser.mac ? false : true,
+						}),
+					);
+					return true;
+				}
+				return false;
+			},
+		},
 		{
 			key: 'Ctrl-Enter',
 			run: () => {

package/src/nodeviews/extensions/manageSelectionMarker.ts

@@ -0,0 +1,28 @@
+import { Extension } from '@codemirror/state';
+import { EditorView as CodeMirror } from '@codemirror/view';
+
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+
+import { CodeBlockAdvancedPlugin } from '../../codeBlockAdvancedPluginType';
+
+/**
+ * Hides selection marker decoration when focused on codemirror editor and re-enables on blur
+ *
+ * @param api
+ * @returns CodeMirror Extension
+ */
+export const manageSelectionMarker = (
+	api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined,
+): Extension => {
+	let decoHide: (() => void) | undefined;
+	return CodeMirror.focusChangeEffect.of((_state, focusing) => {
+		if (focusing) {
+			api?.selectionMarker?.actions.queueHideDecoration((hideDecoration) => {
+				decoHide = hideDecoration;
+			});
+		} else {
+			decoHide?.();
+		}
+		return null;
+	});
+};