@atlaskit/editor-plugin-code-block-advanced 3.0.0 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 3.0.1
+
+### Patch Changes
+
+- [#182587](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/182587)
+  [`ab1ee31f25e9c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ab1ee31f25e9c) -
+  Fixes issue where right click menu would select entire code block.
+- Updated dependencies
+
 ## 3.0.0
 
 ### Major Changes

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -17,6 +17,7 @@ var _codeBlock = require("@atlaskit/editor-common/code-block");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _view2 = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _syntaxHighlightingTheme = require("../ui/syntaxHighlightingTheme");
 var _theme = require("../ui/theme");
@@ -74,7 +75,15 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
         onMaybeNodeSelection: onMaybeNodeSelection,
         customFindReplace: Boolean((_config$api3 = config.api) === null || _config$api3 === void 0 ? void 0 : _config$api3.findReplace)
-      }), _theme.cmTheme, (0, _language.syntaxHighlighting)(_syntaxHighlightingTheme.highlightStyle), (0, _language.bracketMatching)(), (0, _view.lineNumbers)(),
+      }), _theme.cmTheme, (0, _language.syntaxHighlighting)(_syntaxHighlightingTheme.highlightStyle), (0, _language.bracketMatching)(), (0, _view.lineNumbers)({
+        domEventHandlers: (0, _platformFeatureFlags.fg)('platform_editor_fix_right_click_paste') ? {
+          click: function click() {
+            _this.selectCodeBlockNode(undefined);
+            _this.view.focus();
+            return true;
+          }
+        } : undefined
+      }),
       // Explicitly disable "sticky" positioning on line numbers to match
       // Renderer behaviour
       (0, _view.gutters)({
@@ -243,23 +252,25 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     value: function stopEvent(e) {
       var _this2 = this,
         _this$getPos5;
-      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(function () {
-          // Ensure the CM selection is reset - if we have a ranged selection when we do node selection can
-          // cause funky behaviour
-          _this2.updating = true;
-          _this2.cm.dispatch({
-            selection: _state.EditorSelection.create([_state.EditorSelection.cursor(0)], 0)
-          });
-          _this2.updating = false;
-          _this2.selectCodeBlockNode(undefined);
-          _this2.view.focus();
-        }, 20);
+      if (!(0, _platformFeatureFlags.fg)('platform_editor_fix_right_click_paste')) {
+        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(function () {
+            // Ensure the CM selection is reset - if we have a ranged selection when we do node selection can
+            // cause funky behaviour
+            _this2.updating = true;
+            _this2.cm.dispatch({
+              selection: _state.EditorSelection.create([_state.EditorSelection.cursor(0)], 0)
+            });
+            _this2.updating = false;
+            _this2.selectCodeBlockNode(undefined);
+            _this2.view.focus();
+          }, 20);
+        }
       }
       // If we have selected the node we should not stop these events
       if ((e instanceof KeyboardEvent || e instanceof ClipboardEvent) && this.view.state.selection instanceof _state2.NodeSelection && this.view.state.selection.from === ((_this$getPos5 = this.getPos) === null || _this$getPos5 === void 0 ? void 0 : _this$getPos5.call(this))) {

package/dist/cjs/ui/theme.js

@@ -51,10 +51,13 @@ var cmTheme = exports.cmTheme = _view.EditorView.theme({
   '&.cm-focused .cm-cursor': {
     borderLeftColor: "var(--ds-text, #172B4D)"
   },
+  '.cm-gutter': {
+    padding: "var(--ds-space-100, 8px)"
+  },
   '.cm-gutters': {
     backgroundColor: "var(--ds-background-neutral, #091E420F)",
     border: 'none',
-    padding: "var(--ds-space-100, 8px)",
+    padding: "var(--ds-space-0, 0px)",
     color: "var(--ds-text-subtlest, #626F86)"
   },
   '.cm-lineNumbers .cm-gutterElement': {

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -7,6 +7,7 @@ import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
 import { cmTheme } from '../ui/theme';
@@ -54,7 +55,15 @@ class CodeBlockAdvancedNodeView {
         selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
         onMaybeNodeSelection,
         customFindReplace: Boolean((_config$api3 = config.api) === null || _config$api3 === void 0 ? void 0 : _config$api3.findReplace)
-      }), cmTheme, syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers(),
+      }), cmTheme, syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers({
+        domEventHandlers: fg('platform_editor_fix_right_click_paste') ? {
+          click: () => {
+            this.selectCodeBlockNode(undefined);
+            this.view.focus();
+            return true;
+          }
+        } : undefined
+      }),
       // Explicitly disable "sticky" positioning on line numbers to match
       // Renderer behaviour
       gutters({
@@ -192,23 +201,25 @@ class CodeBlockAdvancedNodeView {
   }
   stopEvent(e) {
     var _this$getPos5;
-    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 (!fg('platform_editor_fix_right_click_paste')) {
+      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 || e instanceof ClipboardEvent) && this.view.state.selection instanceof NodeSelection && this.view.state.selection.from === ((_this$getPos5 = this.getPos) === null || _this$getPos5 === void 0 ? void 0 : _this$getPos5.call(this))) {

package/dist/es2019/ui/theme.js

@@ -45,10 +45,13 @@ export const cmTheme = CodeMirror.theme({
   '&.cm-focused .cm-cursor': {
     borderLeftColor: "var(--ds-text, #172B4D)"
   },
+  '.cm-gutter': {
+    padding: "var(--ds-space-100, 8px)"
+  },
   '.cm-gutters': {
     backgroundColor: "var(--ds-background-neutral, #091E420F)",
     border: 'none',
-    padding: "var(--ds-space-100, 8px)",
+    padding: "var(--ds-space-0, 0px)",
     color: "var(--ds-text-subtlest, #626F86)"
   },
   '.cm-lineNumbers .cm-gutterElement': {

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -10,6 +10,7 @@ import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
 import { cmTheme } from '../ui/theme';
@@ -67,7 +68,15 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
         onMaybeNodeSelection: onMaybeNodeSelection,
         customFindReplace: Boolean((_config$api3 = config.api) === null || _config$api3 === void 0 ? void 0 : _config$api3.findReplace)
-      }), cmTheme, syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers(),
+      }), cmTheme, syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers({
+        domEventHandlers: fg('platform_editor_fix_right_click_paste') ? {
+          click: function click() {
+            _this.selectCodeBlockNode(undefined);
+            _this.view.focus();
+            return true;
+          }
+        } : undefined
+      }),
       // Explicitly disable "sticky" positioning on line numbers to match
       // Renderer behaviour
       gutters({
@@ -236,23 +245,25 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     value: function stopEvent(e) {
       var _this2 = this,
         _this$getPos5;
-      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(function () {
-          // Ensure the CM selection is reset - if we have a ranged selection when we do node selection can
-          // cause funky behaviour
-          _this2.updating = true;
-          _this2.cm.dispatch({
-            selection: EditorSelection.create([EditorSelection.cursor(0)], 0)
-          });
-          _this2.updating = false;
-          _this2.selectCodeBlockNode(undefined);
-          _this2.view.focus();
-        }, 20);
+      if (!fg('platform_editor_fix_right_click_paste')) {
+        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(function () {
+            // Ensure the CM selection is reset - if we have a ranged selection when we do node selection can
+            // cause funky behaviour
+            _this2.updating = true;
+            _this2.cm.dispatch({
+              selection: EditorSelection.create([EditorSelection.cursor(0)], 0)
+            });
+            _this2.updating = false;
+            _this2.selectCodeBlockNode(undefined);
+            _this2.view.focus();
+          }, 20);
+        }
       }
       // If we have selected the node we should not stop these events
       if ((e instanceof KeyboardEvent || e instanceof ClipboardEvent) && this.view.state.selection instanceof NodeSelection && this.view.state.selection.from === ((_this$getPos5 = this.getPos) === null || _this$getPos5 === void 0 ? void 0 : _this$getPos5.call(this))) {

package/dist/esm/ui/theme.js

@@ -45,10 +45,13 @@ export var cmTheme = CodeMirror.theme({
   '&.cm-focused .cm-cursor': {
     borderLeftColor: "var(--ds-text, #172B4D)"
   },
+  '.cm-gutter': {
+    padding: "var(--ds-space-100, 8px)"
+  },
   '.cm-gutters': {
     backgroundColor: "var(--ds-background-neutral, #091E420F)",
     border: 'none',
-    padding: "var(--ds-space-100, 8px)",
+    padding: "var(--ds-space-0, 0px)",
     color: "var(--ds-text-subtlest, #626F86)"
   },
   '.cm-lineNumbers .cm-gutterElement': {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "3.0.0",
+	"version": "3.0.1",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,7 +39,7 @@
 		"@atlaskit/editor-plugin-selection-marker": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^8.7.0",
+		"@atlaskit/tmp-editor-statsig": "^8.8.0",
 		"@atlaskit/tokens": "^5.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/autocomplete": "6.18.4",
@@ -54,7 +54,7 @@
 		"codemirror-lang-elixir": "4.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.6.0",
+		"@atlaskit/editor-common": "^107.7.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
@@ -100,6 +100,9 @@
 	"platform-feature-flags": {
 		"platform_editor_breakout_resizing_hello_release": {
 			"type": "boolean"
+		},
+		"platform_editor_fix_right_click_paste": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/codeBlockAdvanced.ts

@@ -28,6 +28,7 @@ import type {
 	NodeView,
 } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
@@ -110,7 +111,17 @@ class CodeBlockAdvancedNodeView implements NodeView {
 				cmTheme,
 				syntaxHighlighting(highlightStyle),
 				bracketMatching(),
-				lineNumbers(),
+				lineNumbers({
+					domEventHandlers: fg('platform_editor_fix_right_click_paste')
+						? {
+								click: () => {
+									this.selectCodeBlockNode(undefined);
+									this.view.focus();
+									return true;
+								},
+							}
+						: undefined,
+				}),
 				// Explicitly disable "sticky" positioning on line numbers to match
 				// Renderer behaviour
 				gutters({ fixed: false }),
@@ -264,23 +275,25 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	}
 
 	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 (!fg('platform_editor_fix_right_click_paste')) {
+			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 (

package/src/ui/theme.ts

@@ -49,10 +49,13 @@ export const cmTheme = CodeMirror.theme({
 	'&.cm-focused .cm-cursor': {
 		borderLeftColor: token('color.text'),
 	},
+	'.cm-gutter': {
+		padding: token('space.100'),
+	},
 	'.cm-gutters': {
 		backgroundColor: token('color.background.neutral'),
 		border: 'none',
-		padding: token('space.100'),
+		padding: token('space.0'),
 		color: token('color.text.subtlest'),
 	},
 	'.cm-lineNumbers .cm-gutterElement': {