@atlaskit/editor-plugin-code-block-advanced 1.0.0

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

@@ -0,0 +1,15 @@
+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 { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
+export type CodeBlockAdvancedPlugin = NextEditorPlugin<'codeBlockAdvanced', {
+    dependencies: [
+        CodeBlockPlugin,
+        SelectionPlugin,
+        OptionalPlugin<EditorDisabledPlugin>
+    ];
+    pluginConfiguration: {
+        extensions?: Extension[];
+    } | undefined;
+}>;

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

@@ -0,0 +1,2 @@
+export { codeBlockAdvancedPlugin } from './codeBlockAdvancedPlugin';
+export type { CodeBlockAdvancedPlugin } from './codeBlockAdvancedPluginType';

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

@@ -0,0 +1,38 @@
+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 { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
+interface ConfigProps {
+    api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
+    extensions: Extension[];
+}
+declare class CodeBlockAdvancedNodeView implements NodeView {
+    dom: Node;
+    private updating;
+    private view;
+    private lineWrappingCompartment;
+    private languageCompartment;
+    private readOnlyCompartment;
+    private node;
+    private getPos;
+    private cm;
+    private selectionAPI;
+    private maybeTryingToReachNodeSelection;
+    private cleanupDisabledState;
+    private languageLoader;
+    constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, config: ConfigProps);
+    destroy(): void;
+    forwardUpdate(update: ViewUpdate): void;
+    setSelection(anchor: number, head: number): void;
+    private updateReadonlyState;
+    private updateLanguage;
+    private selectCodeBlockNode;
+    private wordWrappingEnabled;
+    private updateWordWrap;
+    update(node: PMNode): boolean;
+    stopEvent(e: Event): boolean;
+}
+export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler) => CodeBlockAdvancedNodeView;
+export {};

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

@@ -0,0 +1,2 @@
+import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+export declare const codeBlockNodeWithFixedToDOM: () => NodeSpec;

package/dist/types-ts4.5/nodeviews/codemirrorSync/syncCMWithPM.d.ts

@@ -0,0 +1,17 @@
+import { ViewUpdate } from '@codemirror/view';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+interface Props {
+    view: EditorView;
+    update: ViewUpdate;
+    offset: number;
+}
+/**
+ *
+ * Synchronises the CodeMirror update changes with the Prosemirror editor
+ *
+ * @param props.view EditorView - Prosemirror EditorView
+ * @param props.update ViewUpdate - CodeMirror ViewUpdate
+ * @param props.offset number - position where the code block starts in prosemirror
+ */
+export declare const syncCMWithPM: ({ view, update, offset }: Props) => void;
+export {};

package/dist/types-ts4.5/nodeviews/codemirrorSync/updateCMSelection.d.ts

@@ -0,0 +1,11 @@
+import { TransactionSpec as CMTransactionSpec } from '@codemirror/state';
+/**
+ *
+ * Compares the updated text with the current to determine the transaction to fire
+ * in the CodeMirror editor.
+ *
+ * @param curText string - the current CodeMirror text
+ * @param newText string - the new CodeMirror text
+ * @param updateCallback Callback to process the CodeMirror transaction
+ */
+export declare const updateCMSelection: (curText: string, newText: string, updateCallback: (value: CMTransactionSpec) => void) => void;

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

@@ -0,0 +1,8 @@
+/**
+ * Code based on warning from @atlaskit/code
+ */
+import { ViewPlugin, ViewUpdate, DecorationSet } from '@codemirror/view';
+export declare const bidiCharWarningExtension: ViewPlugin<{
+    placeholders: DecorationSet;
+    update(update: ViewUpdate): void;
+}>;

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

@@ -0,0 +1,12 @@
+import { EditorView as CodeMirror } from '@codemirror/view';
+import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+interface BackspaceProps {
+    view: EditorView;
+    cm: CodeMirror;
+    getPos: getPosHandlerNode;
+    getNode: () => PMNode;
+}
+export declare const backspaceKeymap: ({ cm, view, getPos, getNode }: BackspaceProps) => boolean;
+export {};

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

@@ -0,0 +1,14 @@
+import { Extension } from '@codemirror/state';
+import { RelativeSelectionPos } from '@atlaskit/editor-common/selection';
+import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+interface KeymapProps {
+    view: EditorView;
+    getNode: () => PMNode;
+    getPos: getPosHandlerNode;
+    selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
+    onMaybeNodeSelection: () => void;
+}
+export declare const keymapExtension: ({ view, getNode, getPos, selectCodeBlockNode, onMaybeNodeSelection, }: KeymapProps) => Extension;
+export {};

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

@@ -0,0 +1,17 @@
+import { EditorView as CodeMirror } from '@codemirror/view';
+import { RelativeSelectionPos } from '@atlaskit/editor-common/selection';
+import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+interface MaybeEscapeProps {
+    unit: 'line' | 'char';
+    dir: -1 | 1;
+    view: EditorView;
+    cm: CodeMirror;
+    getPos: getPosHandlerNode;
+    getNode: () => PMNode;
+    onMaybeNodeSelection: () => void;
+    selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
+}
+export declare const maybeEscapeKeymap: ({ unit, dir, view, cm, getPos, getNode, onMaybeNodeSelection, selectCodeBlockNode, }: MaybeEscapeProps) => boolean;
+export {};

package/dist/types-ts4.5/nodeviews/languages/languageMap.d.ts

@@ -0,0 +1,5 @@
+import { LanguageDescription } from '@codemirror/language';
+import type { LanguageAlias } from '@atlaskit/code';
+type LanguageAliasValue = LanguageAlias[0];
+export declare const mapLanguageToCodeMirror: (language: LanguageAliasValue) => LanguageDescription | undefined;
+export {};

package/dist/types-ts4.5/nodeviews/languages/loader.d.ts

@@ -0,0 +1,12 @@
+import { LanguageSupport } from '@codemirror/language';
+/**
+ * Manages loading the languages (for syntax highlighting, etc.)
+ * from CodeMirror and updating the language in the CodeMirror view
+ */
+export declare class LanguageLoader {
+    private updateLanguageCompartment;
+    private languageName;
+    constructor(updateLanguageCompartment: (value: LanguageSupport | [
+    ]) => void);
+    updateLanguage(languageName: string): void;
+}

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

@@ -0,0 +1,9 @@
+import { Extension } from '@codemirror/state';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
+interface Props {
+    api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
+    extensions: Extension[];
+}
+export declare const lazyCodeBlockView: (props: Props) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;
+export {};

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -0,0 +1,10 @@
+import type { Extension } from '@codemirror/state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
+interface Props {
+    api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
+    extensions: Extension[];
+}
+export declare const createPlugin: (props: Props) => SafePlugin<any>;
+export {};

package/dist/types-ts4.5/ui/syntaxHighlightingTheme.d.ts

@@ -0,0 +1,2 @@
+import { HighlightStyle } from '@codemirror/language';
+export declare const highlightStyle: HighlightStyle;

package/dist/types-ts4.5/ui/theme.d.ts

@@ -0,0 +1 @@
+export declare const cmTheme: import("@codemirror/state").Extension;

package/docs/0-intro.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { AtlassianInternalWarning, code, md } from '@atlaskit/docs';
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import { createEditorUseOnlyNotice } from '@atlaskit/editor-common/doc-utils';
+import { token } from '@atlaskit/tokens';
+
+export default md`
+
+${createEditorUseOnlyNotice('Editor Plugin Code Block Advanced', [
+	{ name: 'Editor Core', link: '/packages/editor/editor-core' },
+])}
+
+
+  ${
+		(
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+			<div style={{ marginTop: token('space.100', '8px') }}>
+				<AtlassianInternalWarning />
+			</div>
+		)
+	}
+
+  This package includes the code block advanced plugin used by \`@atlaskit/editor-core\`.
+
+  This can be used to extend \`@atlaskit/editor-plugin-code-block\` by using a CodeMirror editor for
+  the nodeview to use rich functionality. Extensions can be injected via its configuration.
+
+  ## Usage
+---
+
+The \`dependencies\`, \`configuration\`, \`state\`, \`actions\`, and \`commands\` of the plugin are defined
+below:
+
+${code`
+type CodeBlockAdvancedPlugin = NextEditorPlugin<
+	'codeBlockAdvanced',
+	{
+		dependencies: [CodeBlockPlugin];
+		pluginConfiguration:
+			| {
+					extensions?: Extension[];
+			  }
+			| undefined;
+	}
+>;
+`}
+
+
+  ## Support
+---
+For internal Atlassian, visit the slack channel [#help-editor](https://atlassian.slack.com/archives/CFG3PSQ9E) for support or visit [go/editor-help](https://go/editor-help) to submit a bug.
+## License
+---
+ Please see [Atlassian Frontend - License](https://hello.atlassian.net/wiki/spaces/AF/pages/2589099144/Documentation#License) for more licensing information.
+`;

package/package.json

@@ -0,0 +1,96 @@
+{
+	"name": "@atlaskit/editor-plugin-code-block-advanced",
+	"version": "1.0.0",
+	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
+	"author": "Atlassian Pty Ltd",
+	"license": "Apache-2.0",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	},
+	"atlassian": {
+		"team": "Editor: Lego",
+		"releaseModel": "continuous",
+		"singleton": true,
+		"runReact18": true
+	},
+	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"module:es2019": "dist/es2019/index.js",
+	"types": "dist/types/index.d.ts",
+	"typesVersions": {
+		">=4.5 <4.9": {
+			"*": [
+				"dist/types-ts4.5/*",
+				"dist/types-ts4.5/index.d.ts"
+			]
+		}
+	},
+	"sideEffects": false,
+	"atlaskit:src": "src/index.ts",
+	"af:exports": {
+		".": "./src/index.ts"
+	},
+	"dependencies": {
+		"@atlaskit/adf-schema": "^46.1.0",
+		"@atlaskit/editor-common": "^99.1.0",
+		"@atlaskit/editor-plugin-code-block": "^3.5.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.0.0",
+		"@babel/runtime": "^7.0.0",
+		"@codemirror/autocomplete": "6.18.4",
+		"@codemirror/commands": "6.7.1",
+		"@codemirror/language": "6.10.8",
+		"@codemirror/language-data": "6.5.1",
+		"@codemirror/state": "6.5.1",
+		"@codemirror/view": "6.36.2",
+		"@lezer/highlight": "1.2.1",
+		"cm6-graphql": "0.2.0",
+		"codemirror-lang-elixir": "4.0.0"
+	},
+	"peerDependencies": {
+		"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
+	},
+	"devDependencies": {
+		"@atlaskit/code": "^15.6.0",
+		"typescript": "~5.4.2"
+	},
+	"techstack": {
+		"@atlassian/frontend": {
+			"code-structure": [
+				"editor-plugin"
+			],
+			"import-structure": [
+				"atlassian-conventions"
+			],
+			"circular-dependencies": [
+				"file-and-folder-level"
+			]
+		},
+		"@repo/internal": {
+			"dom-events": "use-bind-event-listener",
+			"analytics": [
+				"analytics-next"
+			],
+			"design-tokens": [
+				"color"
+			],
+			"theming": [
+				"react-context"
+			],
+			"ui-components": [
+				"lite-mode"
+			],
+			"deprecation": "no-deprecated-imports",
+			"styling": [
+				"emotion",
+				"emotion"
+			],
+			"imports": [
+				"import-no-extraneous-disable-for-examples-and-docs"
+			]
+		}
+	}
+}

package/src/codeBlockAdvancedPlugin.tsx

@@ -0,0 +1,25 @@
+import type { CodeBlockAdvancedPlugin } from './codeBlockAdvancedPluginType';
+import { codeBlockNodeWithFixedToDOM } from './nodeviews/codeBlockNodeWithToDOMFixed';
+import { createPlugin } from './pm-plugins/main';
+
+export const codeBlockAdvancedPlugin: CodeBlockAdvancedPlugin = ({ api, config }) => ({
+	name: 'codeBlockAdvanced',
+
+	nodes() {
+		return [
+			{
+				name: 'codeBlock',
+				node: codeBlockNodeWithFixedToDOM(),
+			},
+		];
+	},
+
+	pmPlugins() {
+		return [
+			{
+				name: 'codeBlockAdvancedPlugin',
+				plugin: () => createPlugin({ api, extensions: config?.extensions ?? [] }),
+			},
+		];
+	},
+});

package/src/codeBlockAdvancedPluginType.ts

@@ -0,0 +1,18 @@
+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 { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
+
+export type CodeBlockAdvancedPlugin = NextEditorPlugin<
+	'codeBlockAdvanced',
+	{
+		dependencies: [CodeBlockPlugin, SelectionPlugin, OptionalPlugin<EditorDisabledPlugin>];
+		pluginConfiguration:
+			| {
+					extensions?: Extension[];
+			  }
+			| undefined;
+	}
+>;

package/src/index.ts

@@ -0,0 +1,5 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
+export { codeBlockAdvancedPlugin } from './codeBlockAdvancedPlugin';
+export type { CodeBlockAdvancedPlugin } from './codeBlockAdvancedPluginType';

package/src/nodeviews/codeBlockAdvanced.ts

@@ -0,0 +1,223 @@
+import { closeBrackets } from '@codemirror/autocomplete';
+import { syntaxHighlighting } from '@codemirror/language';
+import { Compartment, Extension, EditorSelection } from '@codemirror/state';
+import { EditorView as CodeMirror, lineNumbers, ViewUpdate } from '@codemirror/view';
+
+import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
+import { RelativeSelectionPos } from '@atlaskit/editor-common/selection';
+import type {
+	getPosHandler,
+	getPosHandlerNode,
+	ExtractInjectionAPI,
+} from '@atlaskit/editor-common/types';
+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 { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
+import { highlightStyle } from '../ui/syntaxHighlightingTheme';
+import { cmTheme } from '../ui/theme';
+
+import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
+import { updateCMSelection } from './codemirrorSync/updateCMSelection';
+import { bidiCharWarningExtension } from './extensions/bidiCharWarning';
+import { keymapExtension } from './extensions/keymap';
+import { LanguageLoader } from './languages/loader';
+
+interface ConfigProps {
+	api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
+	extensions: Extension[];
+}
+
+// Based on: https://prosemirror.net/examples/codemirror/
+class CodeBlockAdvancedNodeView implements NodeView {
+	dom: Node;
+	private updating: boolean;
+	private view: EditorView;
+	private lineWrappingCompartment = new Compartment();
+	private languageCompartment = new Compartment();
+	private readOnlyCompartment = new Compartment();
+	private node: PMNode;
+	private getPos: getPosHandlerNode;
+	private cm: CodeMirror;
+	private selectionAPI: EditorSelectionAPI | undefined;
+	private maybeTryingToReachNodeSelection = false;
+	private cleanupDisabledState: (() => void) | undefined;
+	private languageLoader: LanguageLoader;
+
+	// eslint-disable-next-line @typescript-eslint/max-params
+	constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, config: ConfigProps) {
+		this.node = node;
+		this.view = view;
+		this.getPos = getPos;
+		this.selectionAPI = config.api?.selection?.actions;
+		const getNode = () => this.node;
+		const onMaybeNodeSelection = () => (this.maybeTryingToReachNodeSelection = true);
+		this.cleanupDisabledState = config.api?.editorDisabled?.sharedState.onChange(() => {
+			this.updateReadonlyState();
+		});
+		this.languageLoader = new LanguageLoader((lang) => {
+			this.updating = true;
+			this.cm.dispatch({
+				effects: this.languageCompartment.reconfigure(lang),
+			});
+			this.updating = false;
+		});
+
+		this.cm = new CodeMirror({
+			doc: this.node.textContent,
+			extensions: [
+				...config.extensions,
+				this.lineWrappingCompartment.of([]),
+				this.languageCompartment.of([]),
+				keymapExtension({
+					view,
+					getPos,
+					getNode,
+					selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
+					onMaybeNodeSelection,
+				}),
+				cmTheme,
+				syntaxHighlighting(highlightStyle),
+				lineNumbers(),
+				CodeMirror.updateListener.of((update) => this.forwardUpdate(update)),
+				this.readOnlyCompartment.of(CodeMirror.editable.of(this.view.editable)),
+				closeBrackets(),
+				CodeMirror.editorAttributes.of({ class: 'code-block' }),
+				bidiCharWarningExtension,
+			],
+		});
+
+		// The editor's outer node is our DOM representation
+		this.dom = this.cm.dom;
+
+		// This flag is used to avoid an update loop between the outer and
+		// inner editor
+		this.updating = false;
+		this.updateLanguage();
+	}
+
+	destroy() {
+		this.cleanupDisabledState?.();
+	}
+
+	forwardUpdate(update: ViewUpdate) {
+		if (this.updating || !this.cm.hasFocus) {
+			return;
+		}
+		const offset = (this.getPos?.() ?? 0) + 1;
+
+		syncCMWithPM({
+			view: this.view,
+			update,
+			offset,
+		});
+	}
+
+	setSelection(anchor: number, head: number) {
+		if (!this.maybeTryingToReachNodeSelection) {
+			this.cm.focus();
+		}
+		this.updating = true;
+		this.cm.dispatch({ selection: { anchor, head } });
+		this.updating = false;
+	}
+
+	private updateReadonlyState() {
+		this.updating = true;
+		this.cm.dispatch({
+			effects: this.readOnlyCompartment.reconfigure(CodeMirror.editable.of(this.view.editable)),
+		});
+		this.updating = false;
+	}
+
+	private updateLanguage() {
+		this.languageLoader.updateLanguage(this.node.attrs.language);
+	}
+
+	private selectCodeBlockNode(relativeSelectionPos: RelativeSelectionPos | undefined) {
+		const tr = this.selectionAPI?.selectNearNode({
+			selectionRelativeToNode: relativeSelectionPos,
+			selection: NodeSelection.create(this.view.state.doc, this.getPos?.() ?? 0),
+		})(this.view.state);
+		if (tr) {
+			this.view.dispatch(tr);
+		}
+	}
+
+	private wordWrappingEnabled = false;
+
+	private updateWordWrap(node: PMNode) {
+		if (this.wordWrappingEnabled !== isCodeBlockWordWrapEnabled(node)) {
+			this.updating = true;
+			this.cm.dispatch({
+				effects: [
+					this.lineWrappingCompartment.reconfigure(
+						isCodeBlockWordWrapEnabled(node) ? CodeMirror.lineWrapping : [],
+					),
+				],
+			});
+			this.updating = false;
+			this.wordWrappingEnabled = !this.wordWrappingEnabled;
+		}
+	}
+
+	update(node: PMNode) {
+		this.maybeTryingToReachNodeSelection = false;
+
+		if (node.type !== this.node.type) {
+			return false;
+		}
+		this.updateWordWrap(node);
+		this.node = node;
+		if (this.updating) {
+			return true;
+		}
+		this.updateLanguage();
+		const newText = node.textContent,
+			curText = this.cm.state.doc.toString();
+		updateCMSelection(curText, newText, (tr) => {
+			this.updating = true;
+			this.cm.dispatch(tr);
+			this.updating = false;
+		});
+		return true;
+	}
+
+	stopEvent(e: Event) {
+		if (e instanceof MouseEvent && e.type === 'mousedown') {
+			// !Warning: Side effect!
+			// CodeMirror on blur updates the dom observer with a `setTimeout(..., 10);`
+			// We need to select the nodeview after this has taken place to ensure
+			// ProseMirror takes over
+			// https://github.com/codemirror/view/commit/70a9a253df04a57004247b9463198c17832f92f4#diff-cb8cbffa623ff0975389e7e8c315e69d5e10345239ffe2c9b4b7986a56ad95efR720
+			setTimeout(() => {
+				// Ensure the CM selection is reset - if we have a ranged selection when we do node selection can
+				// cause funky behaviour
+				this.updating = true;
+				this.cm.dispatch({
+					selection: EditorSelection.create([EditorSelection.cursor(0)], 0),
+				});
+				this.updating = false;
+				this.selectCodeBlockNode(undefined);
+				this.view.focus();
+			}, 20);
+		}
+		// If we have selected the node we should not stop these events
+		if (
+			e instanceof KeyboardEvent &&
+			this.view.state.selection instanceof NodeSelection &&
+			this.view.state.selection.from === this.getPos?.()
+		) {
+			return false;
+		}
+		return true;
+	}
+}
+
+export const getCodeBlockAdvancedNodeView =
+	(props: ConfigProps) =>
+	(node: PMNode, view: EditorView, getPos: getPosHandler): CodeBlockAdvancedNodeView => {
+		return new CodeBlockAdvancedNodeView(node, view, getPos as getPosHandlerNode, props);
+	};