@atlaskit/editor-plugin-code-block-advanced 11.0.1 → 11.0.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 11.0.2
+
+### Patch Changes
+
+- [`10408fdb0f64b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/10408fdb0f64b) -
+  [ux] [EDITOR-7563] Select the whole node when clicking the border area of a code block
+- Updated dependencies
+
 ## 11.0.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -13,6 +13,7 @@ var _autocomplete = require("@codemirror/autocomplete");
 var _language = require("@codemirror/language");
 var _state = require("@codemirror/state");
 var _view = require("@codemirror/view");
+var _bindEventListener = require("bind-event-listener");
 var _browser = require("@atlaskit/editor-common/browser");
 var _codeBlock = require("@atlaskit/editor-common/code-block");
 var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
@@ -67,6 +68,18 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       _this.selectCodeBlockNode(undefined);
       _this.view.focus();
     });
+    (0, _defineProperty2.default)(this, "handleBorderAreaClick", function (event) {
+      if (!_this.isBorderAreaClick(event)) {
+        return;
+      }
+
+      // Prevent CodeMirror from restoring its inner selection after we hand focus and selection
+      // back to ProseMirror
+      event.preventDefault();
+      _this.maybeTryingToReachNodeSelection = true;
+      _this.view.focus();
+      _this.selectCodeBlockNode(undefined);
+    });
     this.config = config;
     this.node = node;
     this.view = view;
@@ -193,6 +206,12 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       });
       this.ro.observe(this.cm.contentDOM);
     }
+    if ((0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true)) {
+      this.cleanupBorderAreaClick = (0, _bindEventListener.bind)(this.cm.scrollDOM, {
+        type: 'click',
+        listener: this.handleBorderAreaClick
+      });
+    }
 
     // We append an additional element that fixes a selection bug on chrome if the code block
     // is the first element followed by subsequent code blocks
@@ -226,11 +245,12 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   return (0, _createClass2.default)(CodeBlockAdvancedNodeView, [{
     key: "destroy",
     value: function destroy() {
-      var _this$cleanupDisabled;
+      var _this$cleanupBorderAr, _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$cleanupBorderAr = this.cleanupBorderAreaClick) === null || _this$cleanupBorderAr === void 0 || _this$cleanupBorderAr.call(this);
       (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 || _this$cleanupDisabled.call(this);
       if ((0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true)) {
         var _this$unsubscribeCont;
@@ -462,6 +482,18 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       });
       this.updating = false;
     }
+  }, {
+    key: "isBorderAreaClick",
+    value: function isBorderAreaClick(event) {
+      var target = event.target;
+      if (!(target instanceof HTMLElement)) {
+        return false;
+      }
+
+      // CodeMirror does not expose a stable gutter DOM handle, so this relies on its
+      // class names to distinguish interactive content/gutters from border-area clicks.
+      return !target.closest('.cm-gutters') && !target.closest('.cm-line');
+    }
   }, {
     key: "stopEvent",
     value: function stopEvent(e) {

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -3,6 +3,7 @@ import { closeBrackets } from '@codemirror/autocomplete';
 import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
 import { Compartment, Facet, EditorState as CodeMirrorState } from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
+import { bind } from 'bind-event-listener';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { areCodeBlockLineNumbersHidden, isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { messages as floatingToolbarMessages } from '@atlaskit/editor-common/floating-toolbar';
@@ -47,6 +48,18 @@ class CodeBlockAdvancedNodeView {
       this.selectCodeBlockNode(undefined);
       this.view.focus();
     });
+    _defineProperty(this, "handleBorderAreaClick", event => {
+      if (!this.isBorderAreaClick(event)) {
+        return;
+      }
+
+      // Prevent CodeMirror from restoring its inner selection after we hand focus and selection
+      // back to ProseMirror
+      event.preventDefault();
+      this.maybeTryingToReachNodeSelection = true;
+      this.view.focus();
+      this.selectCodeBlockNode(undefined);
+    });
     this.config = config;
     this.node = node;
     this.view = view;
@@ -161,6 +174,12 @@ class CodeBlockAdvancedNodeView {
       });
       this.ro.observe(this.cm.contentDOM);
     }
+    if (expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true)) {
+      this.cleanupBorderAreaClick = bind(this.cm.scrollDOM, {
+        type: 'click',
+        listener: this.handleBorderAreaClick
+      });
+    }
 
     // We append an additional element that fixes a selection bug on chrome if the code block
     // is the first element followed by subsequent code blocks
@@ -192,11 +211,12 @@ class CodeBlockAdvancedNodeView {
     }
   }
   destroy() {
-    var _this$cleanupDisabled;
+    var _this$cleanupBorderAr, _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$cleanupBorderAr = this.cleanupBorderAreaClick) === null || _this$cleanupBorderAr === void 0 ? void 0 : _this$cleanupBorderAr.call(this);
     (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 ? void 0 : _this$cleanupDisabled.call(this);
     if (expValEquals('confluence_compact_text_format', 'isEnabled', true)) {
       var _this$unsubscribeCont;
@@ -390,6 +410,16 @@ class CodeBlockAdvancedNodeView {
     });
     this.updating = false;
   }
+  isBorderAreaClick(event) {
+    const target = event.target;
+    if (!(target instanceof HTMLElement)) {
+      return false;
+    }
+
+    // CodeMirror does not expose a stable gutter DOM handle, so this relies on its
+    // class names to distinguish interactive content/gutters from border-area clicks.
+    return !target.closest('.cm-gutters') && !target.closest('.cm-line');
+  }
   stopEvent(e) {
     var _this$getPos5;
     // If we have selected the node we should not stop these events

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -11,6 +11,7 @@ import { closeBrackets } from '@codemirror/autocomplete';
 import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
 import { Compartment, Facet, EditorState as CodeMirrorState } from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
+import { bind } from 'bind-event-listener';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { areCodeBlockLineNumbersHidden, isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { messages as floatingToolbarMessages } from '@atlaskit/editor-common/floating-toolbar';
@@ -61,6 +62,18 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       _this.selectCodeBlockNode(undefined);
       _this.view.focus();
     });
+    _defineProperty(this, "handleBorderAreaClick", function (event) {
+      if (!_this.isBorderAreaClick(event)) {
+        return;
+      }
+
+      // Prevent CodeMirror from restoring its inner selection after we hand focus and selection
+      // back to ProseMirror
+      event.preventDefault();
+      _this.maybeTryingToReachNodeSelection = true;
+      _this.view.focus();
+      _this.selectCodeBlockNode(undefined);
+    });
     this.config = config;
     this.node = node;
     this.view = view;
@@ -187,6 +200,12 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       });
       this.ro.observe(this.cm.contentDOM);
     }
+    if (expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true)) {
+      this.cleanupBorderAreaClick = bind(this.cm.scrollDOM, {
+        type: 'click',
+        listener: this.handleBorderAreaClick
+      });
+    }
 
     // We append an additional element that fixes a selection bug on chrome if the code block
     // is the first element followed by subsequent code blocks
@@ -220,11 +239,12 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   return _createClass(CodeBlockAdvancedNodeView, [{
     key: "destroy",
     value: function destroy() {
-      var _this$cleanupDisabled;
+      var _this$cleanupBorderAr, _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$cleanupBorderAr = this.cleanupBorderAreaClick) === null || _this$cleanupBorderAr === void 0 || _this$cleanupBorderAr.call(this);
       (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 || _this$cleanupDisabled.call(this);
       if (expValEquals('confluence_compact_text_format', 'isEnabled', true)) {
         var _this$unsubscribeCont;
@@ -456,6 +476,18 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       });
       this.updating = false;
     }
+  }, {
+    key: "isBorderAreaClick",
+    value: function isBorderAreaClick(event) {
+      var target = event.target;
+      if (!(target instanceof HTMLElement)) {
+        return false;
+      }
+
+      // CodeMirror does not expose a stable gutter DOM handle, so this relies on its
+      // class names to distinguish interactive content/gutters from border-area clicks.
+      return !target.closest('.cm-gutters') && !target.closest('.cm-line');
+    }
   }, {
     key: "stopEvent",
     value: function stopEvent(e) {

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

@@ -34,6 +34,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private unsubscribeContentFormat;
     private invisibleAriaDescription?;
     private config;
+    private cleanupBorderAreaClick;
     constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, innerDecorations: DecorationSource, config: ConfigProps);
     destroy(): void;
     forwardUpdate(update: ViewUpdate): void;
@@ -62,6 +63,8 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
      */
     private getProseMirrorDecorationEffects;
     private clearProseMirrorDecorations;
+    private handleBorderAreaClick;
+    private isBorderAreaClick;
     stopEvent(e: Event): boolean;
 }
 export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler, innerDecorations: DecorationSource) => CodeBlockAdvancedNodeView;

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

@@ -34,6 +34,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private unsubscribeContentFormat;
     private invisibleAriaDescription?;
     private config;
+    private cleanupBorderAreaClick;
     constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, innerDecorations: DecorationSource, config: ConfigProps);
     destroy(): void;
     forwardUpdate(update: ViewUpdate): void;
@@ -62,6 +63,8 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
      */
     private getProseMirrorDecorationEffects;
     private clearProseMirrorDecorations;
+    private handleBorderAreaClick;
+    private isBorderAreaClick;
     stopEvent(e: Event): boolean;
 }
 export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler, innerDecorations: DecorationSource) => CodeBlockAdvancedNodeView;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "11.0.1",
+	"version": "11.0.2",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,7 +30,7 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^52.16.0",
 		"@atlaskit/code": "^17.5.0",
-		"@atlaskit/editor-plugin-code-block": "^13.0.0",
+		"@atlaskit/editor-plugin-code-block": "^13.1.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^11.0.0",
 		"@atlaskit/editor-plugin-find-replace": "^11.0.0",
 		"@atlaskit/editor-plugin-selection": "^11.0.0",
@@ -38,7 +38,7 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
-		"@atlaskit/tmp-editor-statsig": "^89.0.0",
+		"@atlaskit/tmp-editor-statsig": "^89.1.0",
 		"@atlaskit/tokens": "^13.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/autocomplete": "6.18.4",
@@ -51,11 +51,12 @@
 		"@lezer/highlight": "1.2.1",
 		"@lezer/lr": "^1.4.2",
 		"@xiechao/codemirror-lang-handlebars": "^1.0.4",
+		"bind-event-listener": "^3.0.0",
 		"cm6-graphql": "0.2.0",
 		"codemirror-lang-elixir": "4.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^115.2.0",
+		"@atlaskit/editor-common": "^115.6.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},

package/src/nodeviews/codeBlockAdvanced.ts

@@ -4,6 +4,7 @@ import { Compartment, Facet, EditorState as CodeMirrorState } from '@codemirror/
 import type { Extension, StateEffect } from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
 import type { ViewUpdate } from '@codemirror/view';
+import { bind } from 'bind-event-listener';
 import type { IntlShape } from 'react-intl';
 
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
@@ -89,6 +90,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	private unsubscribeContentFormat: (() => void) | undefined;
 	private invisibleAriaDescription?: HTMLSpanElement;
 	private config: ConfigProps;
+	private cleanupBorderAreaClick: (() => void) | undefined;
 
 	constructor(
 		node: PMNode,
@@ -265,6 +267,13 @@ class CodeBlockAdvancedNodeView implements NodeView {
 			this.ro.observe(this.cm.contentDOM);
 		}
 
+		if (expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true)) {
+			this.cleanupBorderAreaClick = bind(this.cm.scrollDOM, {
+				type: 'click',
+				listener: this.handleBorderAreaClick,
+			});
+		}
+
 		// We append an additional element that fixes a selection bug on chrome if the code block
 		// is the first element followed by subsequent code blocks
 		const spaceContainer = document.createElement('span');
@@ -305,6 +314,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		// decorations. When we change the breakout we destroy the node and cleanup these decorations from
 		// codemirror
 		this.clearProseMirrorDecorations();
+		this.cleanupBorderAreaClick?.();
 		this.cleanupDisabledState?.();
 		if (expValEquals('confluence_compact_text_format', 'isEnabled', true)) {
 			this.unsubscribeContentFormat?.();
@@ -533,6 +543,31 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		this.updating = false;
 	}
 
+	private handleBorderAreaClick = (event: MouseEvent) => {
+		if (!this.isBorderAreaClick(event)) {
+			return;
+		}
+
+		// Prevent CodeMirror from restoring its inner selection after we hand focus and selection
+		// back to ProseMirror
+		event.preventDefault();
+		this.maybeTryingToReachNodeSelection = true;
+
+		this.view.focus();
+		this.selectCodeBlockNode(undefined);
+	};
+
+	private isBorderAreaClick(event: MouseEvent): boolean {
+		const target = event.target;
+		if (!(target instanceof HTMLElement)) {
+			return false;
+		}
+
+		// CodeMirror does not expose a stable gutter DOM handle, so this relies on its
+		// class names to distinguish interactive content/gutters from border-area clicks.
+		return !target.closest('.cm-gutters') && !target.closest('.cm-line');
+	}
+
 	stopEvent(e: Event): boolean {
 		// If we have selected the node we should not stop these events
 		if (