@atlaskit/editor-plugin-code-block-advanced 2.2.10 → 2.2.12

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 2.2.12
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.2.11
+
+### Patch Changes
+
+- [#158523](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/158523)
+  [`3fe5dff3f49a5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3fe5dff3f49a5) -
+  Triple click should select entire code block.
+- Updated dependencies
+
 ## 2.2.10
 
 ### Patch Changes

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -24,6 +24,7 @@ var _updateCMSelection = require("./codemirrorSync/updateCMSelection");
 var _keymap = require("./extensions/keymap");
 var _manageSelectionMarker = require("./extensions/manageSelectionMarker");
 var _prosemirrorDecorations = require("./extensions/prosemirrorDecorations");
+var _tripleClickExtension = require("./extensions/tripleClickExtension");
 var _loader = require("./languages/loader");
 // Based on: https://prosemirror.net/examples/codemirror/
 var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
@@ -82,7 +83,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         contentEditable: "".concat(this.view.editable)
       })]), (0, _autocomplete.closeBrackets)(), _view.EditorView.editorAttributes.of({
         class: 'code-block'
-      }), (0, _manageSelectionMarker.manageSelectionMarker)(config.api), (0, _prosemirrorDecorations.prosemirrorDecorationPlugin)(this.pmFacet, view, getPos)])
+      }), (0, _manageSelectionMarker.manageSelectionMarker)(config.api), (0, _prosemirrorDecorations.prosemirrorDecorationPlugin)(this.pmFacet, view, getPos), (0, _tripleClickExtension.tripleClickSelectAllExtension)()])
     });
 
     // We append an additional element that fixes a selection bug on chrome if the code block

package/dist/cjs/nodeviews/extensions/tripleClickExtension.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tripleClickSelectAllExtension = void 0;
+var _state = require("@codemirror/state");
+var _view = require("@codemirror/view");
+/**
+ * To have consistent behaviour with previous code block when a triple click occurs in the editor
+ * we should select the entire code block rather than the line.
+ *
+ * @returns CodeMirror extension
+ */
+var tripleClickSelectAllExtension = exports.tripleClickSelectAllExtension = function tripleClickSelectAllExtension() {
+  return _view.EditorView.mouseSelectionStyle.of(function (view, event) {
+    // Check for a triple-click and avoid non-main "button" events
+    // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+    // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+    if (event.detail !== 3 || event.button !== 0) {
+      return null;
+    }
+    return {
+      // Select the entire document
+      get: function get() {
+        return _state.EditorSelection.single(0, view.state.doc.length);
+      },
+      update: function update() {}
+    };
+  });
+};

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -14,6 +14,7 @@ import { getCMSelectionChanges } from './codemirrorSync/updateCMSelection';
 import { keymapExtension } from './extensions/keymap';
 import { manageSelectionMarker } from './extensions/manageSelectionMarker';
 import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
+import { tripleClickSelectAllExtension } from './extensions/tripleClickExtension';
 import { LanguageLoader } from './languages/loader';
 // Based on: https://prosemirror.net/examples/codemirror/
 class CodeBlockAdvancedNodeView {
@@ -60,7 +61,7 @@ class CodeBlockAdvancedNodeView {
         contentEditable: `${this.view.editable}`
       })]), closeBrackets(), CodeMirror.editorAttributes.of({
         class: 'code-block'
-      }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos)]
+      }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos), tripleClickSelectAllExtension()]
     });
 
     // We append an additional element that fixes a selection bug on chrome if the code block

package/dist/es2019/nodeviews/extensions/tripleClickExtension.js

@@ -0,0 +1,24 @@
+import { EditorSelection } from '@codemirror/state';
+import { EditorView as CodeMirror } from '@codemirror/view';
+
+/**
+ * To have consistent behaviour with previous code block when a triple click occurs in the editor
+ * we should select the entire code block rather than the line.
+ *
+ * @returns CodeMirror extension
+ */
+export const tripleClickSelectAllExtension = () => CodeMirror.mouseSelectionStyle.of((view, event) => {
+  // Check for a triple-click and avoid non-main "button" events
+  // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+  // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+  if (event.detail !== 3 || event.button !== 0) {
+    return null;
+  }
+  return {
+    // Select the entire document
+    get() {
+      return EditorSelection.single(0, view.state.doc.length);
+    },
+    update() {}
+  };
+});

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -17,6 +17,7 @@ import { getCMSelectionChanges } from './codemirrorSync/updateCMSelection';
 import { keymapExtension } from './extensions/keymap';
 import { manageSelectionMarker } from './extensions/manageSelectionMarker';
 import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
+import { tripleClickSelectAllExtension } from './extensions/tripleClickExtension';
 import { LanguageLoader } from './languages/loader';
 // Based on: https://prosemirror.net/examples/codemirror/
 var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
@@ -75,7 +76,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         contentEditable: "".concat(this.view.editable)
       })]), closeBrackets(), CodeMirror.editorAttributes.of({
         class: 'code-block'
-      }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos)])
+      }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos), tripleClickSelectAllExtension()])
     });
 
     // We append an additional element that fixes a selection bug on chrome if the code block

package/dist/esm/nodeviews/extensions/tripleClickExtension.js

@@ -0,0 +1,26 @@
+import { EditorSelection } from '@codemirror/state';
+import { EditorView as CodeMirror } from '@codemirror/view';
+
+/**
+ * To have consistent behaviour with previous code block when a triple click occurs in the editor
+ * we should select the entire code block rather than the line.
+ *
+ * @returns CodeMirror extension
+ */
+export var tripleClickSelectAllExtension = function tripleClickSelectAllExtension() {
+  return CodeMirror.mouseSelectionStyle.of(function (view, event) {
+    // Check for a triple-click and avoid non-main "button" events
+    // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+    // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+    if (event.detail !== 3 || event.button !== 0) {
+      return null;
+    }
+    return {
+      // Select the entire document
+      get: function get() {
+        return EditorSelection.single(0, view.state.doc.length);
+      },
+      update: function update() {}
+    };
+  });
+};

package/dist/types/nodeviews/codemirrorSync/updateCMSelection.d.ts

@@ -1,4 +1,4 @@
-import { ChangeSpec } from '@codemirror/state';
+import type { ChangeSpec } from '@codemirror/state';
 /**
  *
  * Compares the updated text with the current to determine the transaction to fire

package/dist/types/nodeviews/extensions/prosemirrorDecorations.d.ts

@@ -1,5 +1,5 @@
 import { Facet } from '@codemirror/state';
-import { ViewPlugin, EditorView as CodeMirror, DecorationSet, ViewUpdate } from '@codemirror/view';
+import { ViewPlugin, EditorView as CodeMirror, type DecorationSet, ViewUpdate } from '@codemirror/view';
 import type { EditorView, DecorationSource } from '@atlaskit/editor-prosemirror/view';
 /**
  * Creates CodeMirror versions of the decorations provided by ProseMirror.

package/dist/types/nodeviews/extensions/tripleClickExtension.d.ts

@@ -0,0 +1,7 @@
+/**
+ * To have consistent behaviour with previous code block when a triple click occurs in the editor
+ * we should select the entire code block rather than the line.
+ *
+ * @returns CodeMirror extension
+ */
+export declare const tripleClickSelectAllExtension: () => import("@codemirror/state").Extension;

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

@@ -1,4 +1,4 @@
-import { ChangeSpec } from '@codemirror/state';
+import type { ChangeSpec } from '@codemirror/state';
 /**
  *
  * Compares the updated text with the current to determine the transaction to fire

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

@@ -1,5 +1,5 @@
 import { Facet } from '@codemirror/state';
-import { ViewPlugin, EditorView as CodeMirror, DecorationSet, ViewUpdate } from '@codemirror/view';
+import { ViewPlugin, EditorView as CodeMirror, type DecorationSet, ViewUpdate } from '@codemirror/view';
 import type { EditorView, DecorationSource } from '@atlaskit/editor-prosemirror/view';
 /**
  * Creates CodeMirror versions of the decorations provided by ProseMirror.

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

@@ -0,0 +1,7 @@
+/**
+ * To have consistent behaviour with previous code block when a triple click occurs in the editor
+ * we should select the entire code block rather than the line.
+ *
+ * @returns CodeMirror extension
+ */
+export declare const tripleClickSelectAllExtension: () => import("@codemirror/state").Extension;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "2.2.10",
+	"version": "2.2.12",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,12 +33,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^105.6.0",
+		"@atlaskit/editor-common": "^106.0.0",
 		"@atlaskit/editor-plugin-code-block": "^4.4.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-find-replace": "^2.2.0",
 		"@atlaskit/editor-plugin-selection": "^2.2.0",
-		"@atlaskit/editor-plugin-selection-marker": "^2.3.0",
+		"@atlaskit/editor-plugin-selection-marker": "^2.4.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",

package/src/nodeviews/codeBlockAdvanced.ts

@@ -38,6 +38,7 @@ import { getCMSelectionChanges } from './codemirrorSync/updateCMSelection';
 import { keymapExtension } from './extensions/keymap';
 import { manageSelectionMarker } from './extensions/manageSelectionMarker';
 import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
+import { tripleClickSelectAllExtension } from './extensions/tripleClickExtension';
 import { LanguageLoader } from './languages/loader';
 
 interface ConfigProps {
@@ -120,6 +121,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 				CodeMirror.editorAttributes.of({ class: 'code-block' }),
 				manageSelectionMarker(config.api),
 				prosemirrorDecorationPlugin(this.pmFacet, view, getPos),
+				tripleClickSelectAllExtension(),
 			],
 		});
 

package/src/nodeviews/codemirrorSync/updateCMSelection.ts

@@ -1,4 +1,4 @@
-import { ChangeSpec } from '@codemirror/state';
+import type { ChangeSpec } from '@codemirror/state';
 
 /**
  *

package/src/nodeviews/extensions/prosemirrorDecorations.ts

@@ -4,7 +4,7 @@ import {
 	WidgetType,
 	Decoration as CodeMirrorDecoration,
 	EditorView as CodeMirror,
-	DecorationSet,
+	type DecorationSet,
 	ViewUpdate,
 } from '@codemirror/view';
 

package/src/nodeviews/extensions/tripleClickExtension.ts

@@ -0,0 +1,25 @@
+import { EditorSelection } from '@codemirror/state';
+import { EditorView as CodeMirror } from '@codemirror/view';
+
+/**
+ * To have consistent behaviour with previous code block when a triple click occurs in the editor
+ * we should select the entire code block rather than the line.
+ *
+ * @returns CodeMirror extension
+ */
+export const tripleClickSelectAllExtension = () =>
+	CodeMirror.mouseSelectionStyle.of((view, event) => {
+		// Check for a triple-click and avoid non-main "button" events
+		// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+		// https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+		if (event.detail !== 3 || event.button !== 0) {
+			return null;
+		}
+		return {
+			// Select the entire document
+			get() {
+				return EditorSelection.single(0, view.state.doc.length);
+			},
+			update() {},
+		};
+	});

package/src/ui/syntaxHighlightingTheme.ts

@@ -39,11 +39,12 @@ export const highlightStyle = HighlightStyle.define([
 	},
 	{
 		tag: tags.inserted,
-		color: token('color.text.accent.green')
+		color: token('color.text.accent.green'),
 	},
 	{ tag: [tags.string], color: token('color.text.accent.green') },
 	{
-		tag: [tags.deleted], color: token('color.text.accent.red')
+		tag: [tags.deleted],
+		color: token('color.text.accent.red'),
 	},
 	{
 		tag: [tags.special(tags.string)],