@atlaskit/editor-plugin-code-block-advanced 2.1.2 → 2.1.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 2.1.4
+
+### Patch Changes
+
+- [#136263](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/136263)
+  [`602e9a7824b0c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/602e9a7824b0c) -
+  Fix editor crashing with advanced code blocks due to infinite codemirror loop with decorations
+  when changing breakout.
+- Updated dependencies
+
+## 2.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.1.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -15,6 +15,7 @@ var _state = require("@codemirror/state");
 var _view = require("@codemirror/view");
 var _codeBlock = require("@atlaskit/editor-common/code-block");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
+var _view2 = require("@atlaskit/editor-prosemirror/view");
 var _syntaxHighlightingTheme = require("../ui/syntaxHighlightingTheme");
 var _theme = require("../ui/theme");
 var _syncCMWithPM = require("./codemirrorSync/syncCMWithPM");
@@ -91,6 +92,10 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     key: "destroy",
     value: function destroy() {
       var _this$cleanupDisabled;
+      // ED-27428: CodeMirror gets into an infinite loop as it detects mutations on removed
+      // decorations. When we change the breakout we destroy the node and cleanup these decorations from
+      // codemirror
+      this.clearProseMirrorDecorations();
       (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 || _this$cleanupDisabled.call(this);
     }
   }, {
@@ -202,6 +207,18 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       });
       this.updating = false;
     }
+  }, {
+    key: "clearProseMirrorDecorations",
+    value: function clearProseMirrorDecorations() {
+      this.updating = true;
+      var computedFacet = this.pmFacet.compute([], function () {
+        return _view2.DecorationSet.empty;
+      });
+      this.cm.dispatch({
+        effects: this.pmDecorationsCompartment.reconfigure(computedFacet)
+      });
+      this.updating = false;
+    }
   }, {
     key: "stopEvent",
     value: function stopEvent(e) {

package/dist/cjs/pm-plugins/main.js

@@ -6,11 +6,25 @@ Object.defineProperty(exports, "__esModule", {
 exports.createPlugin = void 0;
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _lazyCodeBlockAdvanced = require("../nodeviews/lazyCodeBlockAdvanced");
+var _shiftArrowKeyWorkaround = require("./shiftArrowKeyWorkaround");
 var createPlugin = exports.createPlugin = function createPlugin(props) {
   return new _safePlugin.SafePlugin({
     props: {
       nodeViews: {
         codeBlock: (0, _lazyCodeBlockAdvanced.lazyCodeBlockView)(props)
+      },
+      // Custom selection behaviour to fix issues with codeblocks with Shift + Arrow{Up || Down}
+      // These issues are also present in the prosemirror codemirror example and @marijnh suggests to
+      // use custom event handlers: https://github.com/ProseMirror/website/issues/83
+      handleKeyDown: function handleKeyDown(view, event) {
+        if (!(event instanceof KeyboardEvent)) {
+          return false;
+        }
+        if (event.key === 'ArrowUp' && event.shiftKey) {
+          return (0, _shiftArrowKeyWorkaround.shiftArrowUpWorkaround)(view, event);
+        } else if (event.key === 'ArrowDown' && event.shiftKey) {
+          return (0, _shiftArrowKeyWorkaround.shiftArrowDownWorkaround)(view, event);
+        }
       }
     }
   });

package/dist/cjs/pm-plugins/shiftArrowKeyWorkaround.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shiftArrowUpWorkaround = exports.shiftArrowDownWorkaround = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var shiftArrowUpWorkaround = exports.shiftArrowUpWorkaround = function shiftArrowUpWorkaround(view, event) {
+  var _doc$resolve$nodeBefo;
+  var _view$state = view.state,
+    doc = _view$state.doc,
+    _view$state$selection = _view$state.selection,
+    $head = _view$state$selection.$head,
+    $anchor = _view$state$selection.$anchor,
+    tr = _view$state.tr,
+    codeBlock = _view$state.schema.nodes.codeBlock;
+
+  // Position we want to check (directly after our current position)
+  var pos = Math.max($head.pos - 1, 1);
+  var isNodeBefore = ((_doc$resolve$nodeBefo = doc.resolve(pos).nodeBefore) === null || _doc$resolve$nodeBefo === void 0 ? void 0 : _doc$resolve$nodeBefo.type) === codeBlock;
+  var maybeProblematicNode = isNodeBefore ? doc.resolve(pos).nodeBefore : doc.resolve(pos).node();
+  if ((maybeProblematicNode === null || maybeProblematicNode === void 0 ? void 0 : maybeProblematicNode.type) === codeBlock) {
+    var nodeSize = maybeProblematicNode.nodeSize;
+    var startPos = isNodeBefore ? pos : $head.pos;
+    tr.setSelection(_state.TextSelection.create(doc, $anchor.pos, Math.max(startPos - nodeSize, 0)));
+    view.dispatch(tr);
+    event.preventDefault();
+    return true;
+  }
+  return false;
+};
+var shiftArrowDownWorkaround = exports.shiftArrowDownWorkaround = function shiftArrowDownWorkaround(view, event) {
+  var _doc$resolve$nodeAfte;
+  var _view$state2 = view.state,
+    doc = _view$state2.doc,
+    _view$state2$selectio = _view$state2.selection,
+    $head = _view$state2$selectio.$head,
+    $anchor = _view$state2$selectio.$anchor,
+    tr = _view$state2.tr,
+    codeBlock = _view$state2.schema.nodes.codeBlock;
+
+  // Position we want to check (directly after our current position)
+  var pos = $head.pos + 1;
+  var isNodeAfter = ((_doc$resolve$nodeAfte = doc.resolve(pos).nodeAfter) === null || _doc$resolve$nodeAfte === void 0 ? void 0 : _doc$resolve$nodeAfte.type) === codeBlock;
+  var maybeProblematicNode = isNodeAfter ? doc.resolve(pos).nodeAfter : doc.resolve(pos).node();
+  if ((maybeProblematicNode === null || maybeProblematicNode === void 0 ? void 0 : maybeProblematicNode.type) === codeBlock) {
+    var nodeSize = maybeProblematicNode.nodeSize;
+    var startPos = isNodeAfter ? pos : $head.pos;
+    tr.setSelection(_state.TextSelection.create(doc, $anchor.pos, Math.min(startPos + nodeSize, doc.content.size)));
+    view.dispatch(tr);
+    event.preventDefault();
+    return true;
+  }
+  return false;
+};

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -5,6 +5,7 @@ import { Compartment, EditorSelection, Facet } from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
 import { cmTheme } from '../ui/theme';
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
@@ -69,6 +70,10 @@ class CodeBlockAdvancedNodeView {
   }
   destroy() {
     var _this$cleanupDisabled;
+    // ED-27428: CodeMirror gets into an infinite loop as it detects mutations on removed
+    // decorations. When we change the breakout we destroy the node and cleanup these decorations from
+    // codemirror
+    this.clearProseMirrorDecorations();
     (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 ? void 0 : _this$cleanupDisabled.call(this);
   }
   forwardUpdate(update) {
@@ -161,6 +166,14 @@ class CodeBlockAdvancedNodeView {
     });
     this.updating = false;
   }
+  clearProseMirrorDecorations() {
+    this.updating = true;
+    const computedFacet = this.pmFacet.compute([], () => DecorationSet.empty);
+    this.cm.dispatch({
+      effects: this.pmDecorationsCompartment.reconfigure(computedFacet)
+    });
+    this.updating = false;
+  }
   stopEvent(e) {
     var _this$getPos5;
     if (e instanceof MouseEvent && e.type === 'mousedown') {

package/dist/es2019/pm-plugins/main.js

@@ -1,10 +1,24 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { lazyCodeBlockView } from '../nodeviews/lazyCodeBlockAdvanced';
+import { shiftArrowDownWorkaround, shiftArrowUpWorkaround } from './shiftArrowKeyWorkaround';
 export const createPlugin = props => {
   return new SafePlugin({
     props: {
       nodeViews: {
         codeBlock: lazyCodeBlockView(props)
+      },
+      // Custom selection behaviour to fix issues with codeblocks with Shift + Arrow{Up || Down}
+      // These issues are also present in the prosemirror codemirror example and @marijnh suggests to
+      // use custom event handlers: https://github.com/ProseMirror/website/issues/83
+      handleKeyDown(view, event) {
+        if (!(event instanceof KeyboardEvent)) {
+          return false;
+        }
+        if (event.key === 'ArrowUp' && event.shiftKey) {
+          return shiftArrowUpWorkaround(view, event);
+        } else if (event.key === 'ArrowDown' && event.shiftKey) {
+          return shiftArrowDownWorkaround(view, event);
+        }
       }
     }
   });

package/dist/es2019/pm-plugins/shiftArrowKeyWorkaround.js

@@ -0,0 +1,61 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export const shiftArrowUpWorkaround = (view, event) => {
+  var _doc$resolve$nodeBefo;
+  const {
+    doc,
+    selection: {
+      $head,
+      $anchor
+    },
+    tr,
+    schema: {
+      nodes: {
+        codeBlock
+      }
+    }
+  } = view.state;
+
+  // Position we want to check (directly after our current position)
+  const pos = Math.max($head.pos - 1, 1);
+  const isNodeBefore = ((_doc$resolve$nodeBefo = doc.resolve(pos).nodeBefore) === null || _doc$resolve$nodeBefo === void 0 ? void 0 : _doc$resolve$nodeBefo.type) === codeBlock;
+  const maybeProblematicNode = isNodeBefore ? doc.resolve(pos).nodeBefore : doc.resolve(pos).node();
+  if ((maybeProblematicNode === null || maybeProblematicNode === void 0 ? void 0 : maybeProblematicNode.type) === codeBlock) {
+    const nodeSize = maybeProblematicNode.nodeSize;
+    const startPos = isNodeBefore ? pos : $head.pos;
+    tr.setSelection(TextSelection.create(doc, $anchor.pos, Math.max(startPos - nodeSize, 0)));
+    view.dispatch(tr);
+    event.preventDefault();
+    return true;
+  }
+  return false;
+};
+export const shiftArrowDownWorkaround = (view, event) => {
+  var _doc$resolve$nodeAfte;
+  const {
+    doc,
+    selection: {
+      $head,
+      $anchor
+    },
+    tr,
+    schema: {
+      nodes: {
+        codeBlock
+      }
+    }
+  } = view.state;
+
+  // Position we want to check (directly after our current position)
+  const pos = $head.pos + 1;
+  const isNodeAfter = ((_doc$resolve$nodeAfte = doc.resolve(pos).nodeAfter) === null || _doc$resolve$nodeAfte === void 0 ? void 0 : _doc$resolve$nodeAfte.type) === codeBlock;
+  const maybeProblematicNode = isNodeAfter ? doc.resolve(pos).nodeAfter : doc.resolve(pos).node();
+  if ((maybeProblematicNode === null || maybeProblematicNode === void 0 ? void 0 : maybeProblematicNode.type) === codeBlock) {
+    const nodeSize = maybeProblematicNode.nodeSize;
+    const startPos = isNodeAfter ? pos : $head.pos;
+    tr.setSelection(TextSelection.create(doc, $anchor.pos, Math.min(startPos + nodeSize, doc.content.size)));
+    view.dispatch(tr);
+    event.preventDefault();
+    return true;
+  }
+  return false;
+};

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -8,6 +8,7 @@ import { Compartment, EditorSelection, Facet } from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
 import { cmTheme } from '../ui/theme';
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
@@ -84,6 +85,10 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     key: "destroy",
     value: function destroy() {
       var _this$cleanupDisabled;
+      // ED-27428: CodeMirror gets into an infinite loop as it detects mutations on removed
+      // decorations. When we change the breakout we destroy the node and cleanup these decorations from
+      // codemirror
+      this.clearProseMirrorDecorations();
       (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 || _this$cleanupDisabled.call(this);
     }
   }, {
@@ -195,6 +200,18 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       });
       this.updating = false;
     }
+  }, {
+    key: "clearProseMirrorDecorations",
+    value: function clearProseMirrorDecorations() {
+      this.updating = true;
+      var computedFacet = this.pmFacet.compute([], function () {
+        return DecorationSet.empty;
+      });
+      this.cm.dispatch({
+        effects: this.pmDecorationsCompartment.reconfigure(computedFacet)
+      });
+      this.updating = false;
+    }
   }, {
     key: "stopEvent",
     value: function stopEvent(e) {

package/dist/esm/pm-plugins/main.js

@@ -1,10 +1,24 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { lazyCodeBlockView } from '../nodeviews/lazyCodeBlockAdvanced';
+import { shiftArrowDownWorkaround, shiftArrowUpWorkaround } from './shiftArrowKeyWorkaround';
 export var createPlugin = function createPlugin(props) {
   return new SafePlugin({
     props: {
       nodeViews: {
         codeBlock: lazyCodeBlockView(props)
+      },
+      // Custom selection behaviour to fix issues with codeblocks with Shift + Arrow{Up || Down}
+      // These issues are also present in the prosemirror codemirror example and @marijnh suggests to
+      // use custom event handlers: https://github.com/ProseMirror/website/issues/83
+      handleKeyDown: function handleKeyDown(view, event) {
+        if (!(event instanceof KeyboardEvent)) {
+          return false;
+        }
+        if (event.key === 'ArrowUp' && event.shiftKey) {
+          return shiftArrowUpWorkaround(view, event);
+        } else if (event.key === 'ArrowDown' && event.shiftKey) {
+          return shiftArrowDownWorkaround(view, event);
+        }
       }
     }
   });

package/dist/esm/pm-plugins/shiftArrowKeyWorkaround.js

@@ -0,0 +1,49 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export var shiftArrowUpWorkaround = function shiftArrowUpWorkaround(view, event) {
+  var _doc$resolve$nodeBefo;
+  var _view$state = view.state,
+    doc = _view$state.doc,
+    _view$state$selection = _view$state.selection,
+    $head = _view$state$selection.$head,
+    $anchor = _view$state$selection.$anchor,
+    tr = _view$state.tr,
+    codeBlock = _view$state.schema.nodes.codeBlock;
+
+  // Position we want to check (directly after our current position)
+  var pos = Math.max($head.pos - 1, 1);
+  var isNodeBefore = ((_doc$resolve$nodeBefo = doc.resolve(pos).nodeBefore) === null || _doc$resolve$nodeBefo === void 0 ? void 0 : _doc$resolve$nodeBefo.type) === codeBlock;
+  var maybeProblematicNode = isNodeBefore ? doc.resolve(pos).nodeBefore : doc.resolve(pos).node();
+  if ((maybeProblematicNode === null || maybeProblematicNode === void 0 ? void 0 : maybeProblematicNode.type) === codeBlock) {
+    var nodeSize = maybeProblematicNode.nodeSize;
+    var startPos = isNodeBefore ? pos : $head.pos;
+    tr.setSelection(TextSelection.create(doc, $anchor.pos, Math.max(startPos - nodeSize, 0)));
+    view.dispatch(tr);
+    event.preventDefault();
+    return true;
+  }
+  return false;
+};
+export var shiftArrowDownWorkaround = function shiftArrowDownWorkaround(view, event) {
+  var _doc$resolve$nodeAfte;
+  var _view$state2 = view.state,
+    doc = _view$state2.doc,
+    _view$state2$selectio = _view$state2.selection,
+    $head = _view$state2$selectio.$head,
+    $anchor = _view$state2$selectio.$anchor,
+    tr = _view$state2.tr,
+    codeBlock = _view$state2.schema.nodes.codeBlock;
+
+  // Position we want to check (directly after our current position)
+  var pos = $head.pos + 1;
+  var isNodeAfter = ((_doc$resolve$nodeAfte = doc.resolve(pos).nodeAfter) === null || _doc$resolve$nodeAfte === void 0 ? void 0 : _doc$resolve$nodeAfte.type) === codeBlock;
+  var maybeProblematicNode = isNodeAfter ? doc.resolve(pos).nodeAfter : doc.resolve(pos).node();
+  if ((maybeProblematicNode === null || maybeProblematicNode === void 0 ? void 0 : maybeProblematicNode.type) === codeBlock) {
+    var nodeSize = maybeProblematicNode.nodeSize;
+    var startPos = isNodeAfter ? pos : $head.pos;
+    tr.setSelection(TextSelection.create(doc, $anchor.pos, Math.min(startPos + nodeSize, doc.content.size)));
+    view.dispatch(tr);
+    event.preventDefault();
+    return true;
+  }
+  return false;
+};

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

@@ -40,6 +40,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
      * This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
      */
     private updateProseMirrorDecorations;
+    private clearProseMirrorDecorations;
     stopEvent(e: Event): boolean;
 }
 export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler) => CodeBlockAdvancedNodeView;

package/dist/types/pm-plugins/shiftArrowKeyWorkaround.d.ts

@@ -0,0 +1,3 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const shiftArrowUpWorkaround: (view: EditorView, event: KeyboardEvent) => boolean;
+export declare const shiftArrowDownWorkaround: (view: EditorView, event: KeyboardEvent) => boolean;

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

@@ -40,6 +40,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
      * This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
      */
     private updateProseMirrorDecorations;
+    private clearProseMirrorDecorations;
     stopEvent(e: Event): boolean;
 }
 export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler) => CodeBlockAdvancedNodeView;

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

@@ -0,0 +1,3 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const shiftArrowUpWorkaround: (view: EditorView, event: KeyboardEvent) => boolean;
+export declare const shiftArrowDownWorkaround: (view: EditorView, event: KeyboardEvent) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "2.1.2",
+	"version": "2.1.4",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,14 +33,14 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^101.1.0",
-		"@atlaskit/editor-plugin-code-block": "^4.1.0",
+		"@atlaskit/editor-common": "^102.18.0",
+		"@atlaskit/editor-plugin-code-block": "^4.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-find-replace": "^2.0.0",
-		"@atlaskit/editor-plugin-selection": "^2.0.0",
-		"@atlaskit/editor-plugin-selection-marker": "^2.0.0",
+		"@atlaskit/editor-plugin-selection": "^2.1.0",
+		"@atlaskit/editor-plugin-selection-marker": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/tokens": "^4.3.0",
+		"@atlaskit/tokens": "^4.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/autocomplete": "6.18.4",
 		"@codemirror/commands": "6.7.1",
@@ -56,7 +56,7 @@
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@atlaskit/code": "^16.0.0",
+		"@atlaskit/code": "^16.2.0",
 		"typescript": "~5.4.2"
 	},
 	"techstack": {

package/src/nodeviews/codeBlockAdvanced.ts

@@ -19,6 +19,7 @@ import type {
 	EditorView,
 	NodeView,
 } from '@atlaskit/editor-prosemirror/view';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
@@ -113,6 +114,10 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	}
 
 	destroy() {
+		// ED-27428: CodeMirror gets into an infinite loop as it detects mutations on removed
+		// decorations. When we change the breakout we destroy the node and cleanup these decorations from
+		// codemirror
+		this.clearProseMirrorDecorations();
 		this.cleanupDisabledState?.();
 	}
 
@@ -214,6 +219,15 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		this.updating = false;
 	}
 
+	private clearProseMirrorDecorations() {
+		this.updating = true;
+		const computedFacet = this.pmFacet.compute([], () => DecorationSet.empty);
+		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/pm-plugins/main.ts

@@ -2,10 +2,13 @@ import type { Extension } from '@codemirror/state';
 
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 import { lazyCodeBlockView } from '../nodeviews/lazyCodeBlockAdvanced';
 
+import { shiftArrowDownWorkaround, shiftArrowUpWorkaround } from './shiftArrowKeyWorkaround';
+
 interface Props {
 	api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
 	extensions: Extension[];
@@ -17,6 +20,20 @@ export const createPlugin = (props: Props) => {
 			nodeViews: {
 				codeBlock: lazyCodeBlockView(props),
 			},
+			// Custom selection behaviour to fix issues with codeblocks with Shift + Arrow{Up || Down}
+			// These issues are also present in the prosemirror codemirror example and @marijnh suggests to
+			// use custom event handlers: https://github.com/ProseMirror/website/issues/83
+			handleKeyDown(view: EditorView, event: KeyboardEvent) {
+				if (!(event instanceof KeyboardEvent)) {
+					return false;
+				}
+
+				if (event.key === 'ArrowUp' && event.shiftKey) {
+					return shiftArrowUpWorkaround(view, event);
+				} else if (event.key === 'ArrowDown' && event.shiftKey) {
+					return shiftArrowDownWorkaround(view, event);
+				}
+			},
 		},
 	});
 };

package/src/pm-plugins/shiftArrowKeyWorkaround.ts

@@ -0,0 +1,58 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+
+export const shiftArrowUpWorkaround = (view: EditorView, event: KeyboardEvent) => {
+	const {
+		doc,
+		selection: { $head, $anchor },
+		tr,
+		schema: {
+			nodes: { codeBlock },
+		},
+	} = view.state;
+
+	// Position we want to check (directly after our current position)
+	const pos = Math.max($head.pos - 1, 1);
+	const isNodeBefore = doc.resolve(pos).nodeBefore?.type === codeBlock;
+	const maybeProblematicNode = isNodeBefore ? doc.resolve(pos).nodeBefore : doc.resolve(pos).node();
+
+	if (maybeProblematicNode?.type === codeBlock) {
+		const nodeSize = maybeProblematicNode.nodeSize;
+		const startPos = isNodeBefore ? pos : $head.pos;
+
+		tr.setSelection(TextSelection.create(doc, $anchor.pos, Math.max(startPos - nodeSize, 0)));
+		view.dispatch(tr);
+		event.preventDefault();
+		return true;
+	}
+	return false;
+};
+
+export const shiftArrowDownWorkaround = (view: EditorView, event: KeyboardEvent) => {
+	const {
+		doc,
+		selection: { $head, $anchor },
+		tr,
+		schema: {
+			nodes: { codeBlock },
+		},
+	} = view.state;
+
+	// Position we want to check (directly after our current position)
+	const pos = $head.pos + 1;
+	const isNodeAfter = doc.resolve(pos).nodeAfter?.type === codeBlock;
+	const maybeProblematicNode = isNodeAfter ? doc.resolve(pos).nodeAfter : doc.resolve(pos).node();
+
+	if (maybeProblematicNode?.type === codeBlock) {
+		const nodeSize = maybeProblematicNode.nodeSize;
+		const startPos = isNodeAfter ? pos : $head.pos;
+
+		tr.setSelection(
+			TextSelection.create(doc, $anchor.pos, Math.min(startPos + nodeSize, doc.content.size)),
+		);
+		view.dispatch(tr);
+		event.preventDefault();
+		return true;
+	}
+	return false;
+};