@atlaskit/editor-plugin-code-block-advanced 12.0.0 → 12.0.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 12.0.1
+
+### Patch Changes
+
+- [`4543a53261907`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4543a53261907) -
+  Fix code block language picker behaviour for auto-detection state, cap the picker trigger width,
+  keep detected labels stable across toolbar updates, and avoid selecting the whole code block when
+  dragging across multiple code lines.
+- Updated dependencies
+
 ## 12.0.0
 
 ### Major Changes

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -61,6 +61,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "pmDecorationsCompartment", new _state.Compartment());
     (0, _defineProperty2.default)(this, "themeCompartment", new _state.Compartment());
     (0, _defineProperty2.default)(this, "maybeTryingToReachNodeSelection", false);
+    (0, _defineProperty2.default)(this, "mouseDownInsideCodeMirror", false);
     (0, _defineProperty2.default)(this, "pmFacet", _state.Facet.define());
     (0, _defineProperty2.default)(this, "wordWrappingEnabled", false);
     (0, _defineProperty2.default)(this, "lineNumbersHidden", false);
@@ -68,10 +69,22 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       _this.selectCodeBlockNode(undefined);
       _this.view.focus();
     });
+    (0, _defineProperty2.default)(this, "handleBorderAreaMouseDown", function (event) {
+      var isBorderArea = _this.isBorderAreaClick(event);
+      // Later click can follow a drag; remember where the interaction began.
+      _this.mouseDownInsideCodeMirror = !isBorderArea;
+      if (isBorderArea && event.target === _this.cm.scrollDOM) {
+        // Stop CodeMirror from restoring stale inner selection before node selection.
+        event.preventDefault();
+      }
+    });
     (0, _defineProperty2.default)(this, "handleBorderAreaClick", function (event) {
-      if (!_this.isBorderAreaClick(event)) {
+      // Dragging across lines leaves a CodeMirror selection; keep it instead of selecting the node.
+      if (_this.mouseDownInsideCodeMirror && _this.hasCodeMirrorTextSelection() || !_this.isBorderAreaClick(event)) {
+        _this.mouseDownInsideCodeMirror = false;
         return;
       }
+      _this.mouseDownInsideCodeMirror = false;
 
       // Prevent CodeMirror from restoring its inner selection after we hand focus and selection
       // back to ProseMirror
@@ -207,6 +220,10 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       this.ro.observe(this.cm.contentDOM);
     }
     if ((0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true)) {
+      this.cleanupBorderAreaMouseDown = (0, _bindEventListener.bind)(this.cm.scrollDOM, {
+        type: 'mousedown',
+        listener: this.handleBorderAreaMouseDown
+      });
       this.cleanupBorderAreaClick = (0, _bindEventListener.bind)(this.cm.scrollDOM, {
         type: 'click',
         listener: this.handleBorderAreaClick
@@ -245,12 +262,13 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   return (0, _createClass2.default)(CodeBlockAdvancedNodeView, [{
     key: "destroy",
     value: function destroy() {
-      var _this$cleanupBorderAr, _this$cleanupDisabled;
+      var _this$cleanupBorderAr, _this$cleanupBorderAr2, _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$cleanupBorderAr = this.cleanupBorderAreaMouseDown) === null || _this$cleanupBorderAr === void 0 || _this$cleanupBorderAr.call(this);
+      (_this$cleanupBorderAr2 = this.cleanupBorderAreaClick) === null || _this$cleanupBorderAr2 === void 0 || _this$cleanupBorderAr2.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;
@@ -482,6 +500,13 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       });
       this.updating = false;
     }
+  }, {
+    key: "hasCodeMirrorTextSelection",
+    value: function hasCodeMirrorTextSelection() {
+      return this.cm.state.selection.ranges.some(function (range) {
+        return !range.empty;
+      });
+    }
   }, {
     key: "isBorderAreaClick",
     value: function isBorderAreaClick(event) {

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -41,6 +41,7 @@ class CodeBlockAdvancedNodeView {
     _defineProperty(this, "pmDecorationsCompartment", new Compartment());
     _defineProperty(this, "themeCompartment", new Compartment());
     _defineProperty(this, "maybeTryingToReachNodeSelection", false);
+    _defineProperty(this, "mouseDownInsideCodeMirror", false);
     _defineProperty(this, "pmFacet", Facet.define());
     _defineProperty(this, "wordWrappingEnabled", false);
     _defineProperty(this, "lineNumbersHidden", false);
@@ -48,10 +49,22 @@ class CodeBlockAdvancedNodeView {
       this.selectCodeBlockNode(undefined);
       this.view.focus();
     });
+    _defineProperty(this, "handleBorderAreaMouseDown", event => {
+      const isBorderArea = this.isBorderAreaClick(event);
+      // Later click can follow a drag; remember where the interaction began.
+      this.mouseDownInsideCodeMirror = !isBorderArea;
+      if (isBorderArea && event.target === this.cm.scrollDOM) {
+        // Stop CodeMirror from restoring stale inner selection before node selection.
+        event.preventDefault();
+      }
+    });
     _defineProperty(this, "handleBorderAreaClick", event => {
-      if (!this.isBorderAreaClick(event)) {
+      // Dragging across lines leaves a CodeMirror selection; keep it instead of selecting the node.
+      if (this.mouseDownInsideCodeMirror && this.hasCodeMirrorTextSelection() || !this.isBorderAreaClick(event)) {
+        this.mouseDownInsideCodeMirror = false;
         return;
       }
+      this.mouseDownInsideCodeMirror = false;
 
       // Prevent CodeMirror from restoring its inner selection after we hand focus and selection
       // back to ProseMirror
@@ -175,6 +188,10 @@ class CodeBlockAdvancedNodeView {
       this.ro.observe(this.cm.contentDOM);
     }
     if (expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true)) {
+      this.cleanupBorderAreaMouseDown = bind(this.cm.scrollDOM, {
+        type: 'mousedown',
+        listener: this.handleBorderAreaMouseDown
+      });
       this.cleanupBorderAreaClick = bind(this.cm.scrollDOM, {
         type: 'click',
         listener: this.handleBorderAreaClick
@@ -211,12 +228,13 @@ class CodeBlockAdvancedNodeView {
     }
   }
   destroy() {
-    var _this$cleanupBorderAr, _this$cleanupDisabled;
+    var _this$cleanupBorderAr, _this$cleanupBorderAr2, _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$cleanupBorderAr = this.cleanupBorderAreaMouseDown) === null || _this$cleanupBorderAr === void 0 ? void 0 : _this$cleanupBorderAr.call(this);
+    (_this$cleanupBorderAr2 = this.cleanupBorderAreaClick) === null || _this$cleanupBorderAr2 === void 0 ? void 0 : _this$cleanupBorderAr2.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;
@@ -410,6 +428,9 @@ class CodeBlockAdvancedNodeView {
     });
     this.updating = false;
   }
+  hasCodeMirrorTextSelection() {
+    return this.cm.state.selection.ranges.some(range => !range.empty);
+  }
   isBorderAreaClick(event) {
     const target = event.target;
     if (!(target instanceof HTMLElement)) {

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -55,6 +55,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     _defineProperty(this, "pmDecorationsCompartment", new Compartment());
     _defineProperty(this, "themeCompartment", new Compartment());
     _defineProperty(this, "maybeTryingToReachNodeSelection", false);
+    _defineProperty(this, "mouseDownInsideCodeMirror", false);
     _defineProperty(this, "pmFacet", Facet.define());
     _defineProperty(this, "wordWrappingEnabled", false);
     _defineProperty(this, "lineNumbersHidden", false);
@@ -62,10 +63,22 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       _this.selectCodeBlockNode(undefined);
       _this.view.focus();
     });
+    _defineProperty(this, "handleBorderAreaMouseDown", function (event) {
+      var isBorderArea = _this.isBorderAreaClick(event);
+      // Later click can follow a drag; remember where the interaction began.
+      _this.mouseDownInsideCodeMirror = !isBorderArea;
+      if (isBorderArea && event.target === _this.cm.scrollDOM) {
+        // Stop CodeMirror from restoring stale inner selection before node selection.
+        event.preventDefault();
+      }
+    });
     _defineProperty(this, "handleBorderAreaClick", function (event) {
-      if (!_this.isBorderAreaClick(event)) {
+      // Dragging across lines leaves a CodeMirror selection; keep it instead of selecting the node.
+      if (_this.mouseDownInsideCodeMirror && _this.hasCodeMirrorTextSelection() || !_this.isBorderAreaClick(event)) {
+        _this.mouseDownInsideCodeMirror = false;
         return;
       }
+      _this.mouseDownInsideCodeMirror = false;
 
       // Prevent CodeMirror from restoring its inner selection after we hand focus and selection
       // back to ProseMirror
@@ -201,6 +214,10 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       this.ro.observe(this.cm.contentDOM);
     }
     if (expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true)) {
+      this.cleanupBorderAreaMouseDown = bind(this.cm.scrollDOM, {
+        type: 'mousedown',
+        listener: this.handleBorderAreaMouseDown
+      });
       this.cleanupBorderAreaClick = bind(this.cm.scrollDOM, {
         type: 'click',
         listener: this.handleBorderAreaClick
@@ -239,12 +256,13 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   return _createClass(CodeBlockAdvancedNodeView, [{
     key: "destroy",
     value: function destroy() {
-      var _this$cleanupBorderAr, _this$cleanupDisabled;
+      var _this$cleanupBorderAr, _this$cleanupBorderAr2, _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$cleanupBorderAr = this.cleanupBorderAreaMouseDown) === null || _this$cleanupBorderAr === void 0 || _this$cleanupBorderAr.call(this);
+      (_this$cleanupBorderAr2 = this.cleanupBorderAreaClick) === null || _this$cleanupBorderAr2 === void 0 || _this$cleanupBorderAr2.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;
@@ -476,6 +494,13 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       });
       this.updating = false;
     }
+  }, {
+    key: "hasCodeMirrorTextSelection",
+    value: function hasCodeMirrorTextSelection() {
+      return this.cm.state.selection.ranges.some(function (range) {
+        return !range.empty;
+      });
+    }
   }, {
     key: "isBorderAreaClick",
     value: function isBorderAreaClick(event) {

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

@@ -27,6 +27,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private contentMode;
     private selectionAPI;
     private maybeTryingToReachNodeSelection;
+    private mouseDownInsideCodeMirror;
     private cleanupDisabledState;
     private languageLoader;
     private pmFacet;
@@ -35,6 +36,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private invisibleAriaDescription?;
     private config;
     private cleanupBorderAreaClick;
+    private cleanupBorderAreaMouseDown;
     constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, innerDecorations: DecorationSource, config: ConfigProps);
     destroy(): void;
     forwardUpdate(update: ViewUpdate): void;
@@ -63,7 +65,9 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
      */
     private getProseMirrorDecorationEffects;
     private clearProseMirrorDecorations;
+    private handleBorderAreaMouseDown;
     private handleBorderAreaClick;
+    private hasCodeMirrorTextSelection;
     private isBorderAreaClick;
     stopEvent(e: Event): boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "12.0.0",
+	"version": "12.0.1",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,7 +30,7 @@
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/prosemirror-history": "^1.0.0",
-		"@atlaskit/tmp-editor-statsig": "^104.0.0",
+		"@atlaskit/tmp-editor-statsig": "^105.0.0",
 		"@atlaskit/tokens": "^14.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/autocomplete": "6.18.4",
@@ -48,7 +48,7 @@
 		"codemirror-lang-elixir": "4.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.0.0",
+		"@atlaskit/editor-common": "^116.1.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},

package/src/nodeviews/codeBlockAdvanced.ts

@@ -83,6 +83,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	private contentMode: EditorContentMode | undefined;
 	private selectionAPI: EditorSelectionAPI | undefined;
 	private maybeTryingToReachNodeSelection = false;
+	private mouseDownInsideCodeMirror = false;
 	private cleanupDisabledState: (() => void) | undefined;
 	private languageLoader: LanguageLoader;
 	private pmFacet = Facet.define<DecorationSource>();
@@ -91,6 +92,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	private invisibleAriaDescription?: HTMLSpanElement;
 	private config: ConfigProps;
 	private cleanupBorderAreaClick: (() => void) | undefined;
+	private cleanupBorderAreaMouseDown: (() => void) | undefined;
 
 	constructor(
 		node: PMNode,
@@ -268,6 +270,10 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		}
 
 		if (expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true)) {
+			this.cleanupBorderAreaMouseDown = bind(this.cm.scrollDOM, {
+				type: 'mousedown',
+				listener: this.handleBorderAreaMouseDown,
+			});
 			this.cleanupBorderAreaClick = bind(this.cm.scrollDOM, {
 				type: 'click',
 				listener: this.handleBorderAreaClick,
@@ -314,6 +320,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		// decorations. When we change the breakout we destroy the node and cleanup these decorations from
 		// codemirror
 		this.clearProseMirrorDecorations();
+		this.cleanupBorderAreaMouseDown?.();
 		this.cleanupBorderAreaClick?.();
 		this.cleanupDisabledState?.();
 		if (expValEquals('confluence_compact_text_format', 'isEnabled', true)) {
@@ -543,10 +550,27 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		this.updating = false;
 	}
 
+	private handleBorderAreaMouseDown = (event: MouseEvent) => {
+		const isBorderArea = this.isBorderAreaClick(event);
+		// Later click can follow a drag; remember where the interaction began.
+		this.mouseDownInsideCodeMirror = !isBorderArea;
+
+		if (isBorderArea && event.target === this.cm.scrollDOM) {
+			// Stop CodeMirror from restoring stale inner selection before node selection.
+			event.preventDefault();
+		}
+	};
+
 	private handleBorderAreaClick = (event: MouseEvent) => {
-		if (!this.isBorderAreaClick(event)) {
+		// Dragging across lines leaves a CodeMirror selection; keep it instead of selecting the node.
+		if (
+			(this.mouseDownInsideCodeMirror && this.hasCodeMirrorTextSelection()) ||
+			!this.isBorderAreaClick(event)
+		) {
+			this.mouseDownInsideCodeMirror = false;
 			return;
 		}
+		this.mouseDownInsideCodeMirror = false;
 
 		// Prevent CodeMirror from restoring its inner selection after we hand focus and selection
 		// back to ProseMirror
@@ -557,6 +581,10 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		this.selectCodeBlockNode(undefined);
 	};
 
+	private hasCodeMirrorTextSelection(): boolean {
+		return this.cm.state.selection.ranges.some((range) => !range.empty);
+	}
+
 	private isBorderAreaClick(event: MouseEvent): boolean {
 		const target = event.target;
 		if (!(target instanceof HTMLElement)) {