@atlaskit/editor-plugin-code-block-advanced 2.2.3 → 2.2.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 2.2.4
+
+### Patch Changes
+
+- [#149738](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/149738)
+  [`3098e65159385`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3098e65159385) -
+  Fix selection when the editor is disabled.
+
 ## 2.2.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -76,7 +76,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         fixed: false
       }), _view.EditorView.updateListener.of(function (update) {
         return _this.forwardUpdate(update);
-      }), this.readOnlyCompartment.of(_view.EditorView.editable.of(this.view.editable)), (0, _autocomplete.closeBrackets)(), _view.EditorView.editorAttributes.of({
+      }), this.readOnlyCompartment.of([_state.EditorState.readOnly.of(!this.view.editable), _view.EditorView.contentAttributes.of({
+        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)])
     });
@@ -141,7 +143,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     value: function updateReadonlyState() {
       this.updating = true;
       this.cm.dispatch({
-        effects: this.readOnlyCompartment.reconfigure(_view.EditorView.editable.of(this.view.editable))
+        effects: this.readOnlyCompartment.reconfigure([_state.EditorState.readOnly.of(!this.view.editable), _view.EditorView.contentAttributes.of({
+          contentEditable: "".concat(this.view.editable)
+        })])
       });
       this.updating = false;
     }

package/dist/cjs/ui/theme.js

@@ -26,6 +26,9 @@ var cmTheme = exports.cmTheme = _view.EditorView.theme({
   '&.cm-editor.code-block.danger': {
     backgroundColor: "var(--ds-background-danger, #FFECEB)"
   },
+  '.cm-content[aria-readonly="true"]': {
+    caretColor: 'transparent'
+  },
   '.cm-content': {
     cursor: 'text',
     caretColor: "var(--ds-text, #172B4D)",

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { closeBrackets } from '@codemirror/autocomplete';
 import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
-import { Compartment, EditorSelection, Facet } from '@codemirror/state';
+import { Compartment, EditorSelection, Facet, EditorState as CodeMirrorState } from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
@@ -56,7 +56,9 @@ class CodeBlockAdvancedNodeView {
       // Renderer behaviour
       gutters({
         fixed: false
-      }), CodeMirror.updateListener.of(update => this.forwardUpdate(update)), this.readOnlyCompartment.of(CodeMirror.editable.of(this.view.editable)), closeBrackets(), CodeMirror.editorAttributes.of({
+      }), CodeMirror.updateListener.of(update => this.forwardUpdate(update)), this.readOnlyCompartment.of([CodeMirrorState.readOnly.of(!this.view.editable), CodeMirror.contentAttributes.of({
+        contentEditable: `${this.view.editable}`
+      })]), closeBrackets(), CodeMirror.editorAttributes.of({
         class: 'code-block'
       }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos)]
     });
@@ -113,7 +115,9 @@ class CodeBlockAdvancedNodeView {
   updateReadonlyState() {
     this.updating = true;
     this.cm.dispatch({
-      effects: this.readOnlyCompartment.reconfigure(CodeMirror.editable.of(this.view.editable))
+      effects: this.readOnlyCompartment.reconfigure([CodeMirrorState.readOnly.of(!this.view.editable), CodeMirror.contentAttributes.of({
+        contentEditable: `${this.view.editable}`
+      })])
     });
     this.updating = false;
   }

package/dist/es2019/ui/theme.js

@@ -20,6 +20,9 @@ export const cmTheme = CodeMirror.theme({
   '&.cm-editor.code-block.danger': {
     backgroundColor: "var(--ds-background-danger, #FFECEB)"
   },
+  '.cm-content[aria-readonly="true"]': {
+    caretColor: 'transparent'
+  },
   '.cm-content': {
     cursor: 'text',
     caretColor: "var(--ds-text, #172B4D)",

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -4,7 +4,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { closeBrackets } from '@codemirror/autocomplete';
 import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
-import { Compartment, EditorSelection, Facet } from '@codemirror/state';
+import { Compartment, EditorSelection, Facet, EditorState as CodeMirrorState } from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
@@ -69,7 +69,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         fixed: false
       }), CodeMirror.updateListener.of(function (update) {
         return _this.forwardUpdate(update);
-      }), this.readOnlyCompartment.of(CodeMirror.editable.of(this.view.editable)), closeBrackets(), CodeMirror.editorAttributes.of({
+      }), this.readOnlyCompartment.of([CodeMirrorState.readOnly.of(!this.view.editable), CodeMirror.contentAttributes.of({
+        contentEditable: "".concat(this.view.editable)
+      })]), closeBrackets(), CodeMirror.editorAttributes.of({
         class: 'code-block'
       }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos)])
     });
@@ -134,7 +136,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     value: function updateReadonlyState() {
       this.updating = true;
       this.cm.dispatch({
-        effects: this.readOnlyCompartment.reconfigure(CodeMirror.editable.of(this.view.editable))
+        effects: this.readOnlyCompartment.reconfigure([CodeMirrorState.readOnly.of(!this.view.editable), CodeMirror.contentAttributes.of({
+          contentEditable: "".concat(this.view.editable)
+        })])
       });
       this.updating = false;
     }

package/dist/esm/ui/theme.js

@@ -20,6 +20,9 @@ export var cmTheme = CodeMirror.theme({
   '&.cm-editor.code-block.danger': {
     backgroundColor: "var(--ds-background-danger, #FFECEB)"
   },
+  '.cm-content[aria-readonly="true"]': {
+    caretColor: 'transparent'
+  },
   '.cm-content': {
     cursor: 'text',
     caretColor: "var(--ds-text, #172B4D)",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "2.2.3",
+	"version": "2.2.4",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,11 +33,11 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^103.9.0",
+		"@atlaskit/editor-common": "^103.22.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.1.0",
+		"@atlaskit/editor-plugin-selection": "^2.2.0",
 		"@atlaskit/editor-plugin-selection-marker": "^2.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/tokens": "^4.8.0",
@@ -57,7 +57,7 @@
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@atlaskit/code": "^17.0.0",
+		"@atlaskit/code": "^17.1.0",
 		"typescript": "~5.4.2"
 	},
 	"techstack": {

package/src/nodeviews/codeBlockAdvanced.ts

@@ -1,6 +1,12 @@
 import { closeBrackets } from '@codemirror/autocomplete';
 import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
-import { Compartment, Extension, EditorSelection, Facet } from '@codemirror/state';
+import {
+	Compartment,
+	Extension,
+	EditorSelection,
+	Facet,
+	EditorState as CodeMirrorState,
+} from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, ViewUpdate, gutters } from '@codemirror/view';
 
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
@@ -103,7 +109,10 @@ class CodeBlockAdvancedNodeView implements NodeView {
 				// Renderer behaviour
 				gutters({ fixed: false }),
 				CodeMirror.updateListener.of((update) => this.forwardUpdate(update)),
-				this.readOnlyCompartment.of(CodeMirror.editable.of(this.view.editable)),
+				this.readOnlyCompartment.of([
+					CodeMirrorState.readOnly.of(!this.view.editable),
+					CodeMirror.contentAttributes.of({ contentEditable: `${this.view.editable}` }),
+				]),
 				closeBrackets(),
 				CodeMirror.editorAttributes.of({ class: 'code-block' }),
 				manageSelectionMarker(config.api),
@@ -161,7 +170,10 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	private updateReadonlyState() {
 		this.updating = true;
 		this.cm.dispatch({
-			effects: this.readOnlyCompartment.reconfigure(CodeMirror.editable.of(this.view.editable)),
+			effects: this.readOnlyCompartment.reconfigure([
+				CodeMirrorState.readOnly.of(!this.view.editable),
+				CodeMirror.contentAttributes.of({ contentEditable: `${this.view.editable}` }),
+			]),
 		});
 		this.updating = false;
 	}

package/src/ui/theme.ts

@@ -23,6 +23,9 @@ export const cmTheme = CodeMirror.theme({
 	'&.cm-editor.code-block.danger': {
 		backgroundColor: token('color.background.danger'),
 	},
+	'.cm-content[aria-readonly="true"]': {
+		caretColor: 'transparent',
+	},
 	'.cm-content': {
 		cursor: 'text',
 		caretColor: token('color.text'),