@atlaskit/editor-plugin-code-block-advanced 1.0.2 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 1.1.0
+
+### Minor Changes
+
+- [#105322](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105322)
+  [`8876083532adc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8876083532adc) -
+  Bumped editor-prosemirror version to 7.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.0.3
+
+### Patch Changes
+
+- [#107185](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107185)
+  [`f0dd5f5bd4d4e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f0dd5f5bd4d4e) -
+  [ux] Sync all prosemirror decorations with codemirror decorations.
+- Updated dependencies
+
 ## 1.0.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -26,9 +26,15 @@
         {
             "path": "../../editor-plugin-editor-disabled/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../editor-plugin-find-replace/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../editor-plugin-selection/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../editor-plugin-selection-marker/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/tokens/afm-cc/tsconfig.json"
         }

package/afm-jira/tsconfig.json

@@ -26,9 +26,15 @@
 		{
 			"path": "../../editor-plugin-editor-disabled/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-find-replace/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-selection-marker/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-jira/tsconfig.json"
 		}

package/afm-post-office/tsconfig.json

@@ -26,9 +26,15 @@
 		{
 			"path": "../../editor-plugin-editor-disabled/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-find-replace/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-selection-marker/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-post-office/tsconfig.json"
 		}

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -19,13 +19,12 @@ var _syntaxHighlightingTheme = require("../ui/syntaxHighlightingTheme");
 var _theme = require("../ui/theme");
 var _syncCMWithPM = require("./codemirrorSync/syncCMWithPM");
 var _updateCMSelection = require("./codemirrorSync/updateCMSelection");
-var _bidiCharWarning = require("./extensions/bidiCharWarning");
-var _copyButtonDecorations = require("./extensions/copyButtonDecorations");
 var _keymap = require("./extensions/keymap");
+var _manageSelectionMarker = require("./extensions/manageSelectionMarker");
+var _prosemirrorDecorations = require("./extensions/prosemirrorDecorations");
 var _loader = require("./languages/loader");
 // Based on: https://prosemirror.net/examples/codemirror/
 var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
-  // eslint-disable-next-line @typescript-eslint/max-params
   function CodeBlockAdvancedNodeView(node, view, getPos, config) {
     var _config$api,
       _this = this,
@@ -35,8 +34,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "lineWrappingCompartment", new _state.Compartment());
     (0, _defineProperty2.default)(this, "languageCompartment", new _state.Compartment());
     (0, _defineProperty2.default)(this, "readOnlyCompartment", new _state.Compartment());
-    (0, _defineProperty2.default)(this, "copyDecoCompartment", new _state.Compartment());
+    (0, _defineProperty2.default)(this, "pmDecorationsCompartment", new _state.Compartment());
     (0, _defineProperty2.default)(this, "maybeTryingToReachNodeSelection", false);
+    (0, _defineProperty2.default)(this, "pmFacet", _state.Facet.define());
     (0, _defineProperty2.default)(this, "wordWrappingEnabled", false);
     this.node = node;
     this.view = view;
@@ -51,13 +51,6 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     this.cleanupDisabledState = (_config$api2 = config.api) === null || _config$api2 === void 0 || (_config$api2 = _config$api2.editorDisabled) === null || _config$api2 === void 0 ? void 0 : _config$api2.sharedState.onChange(function () {
       _this.updateReadonlyState();
     });
-    this.cleanupCopyButtonDecoration = (_config$api3 = config.api) === null || _config$api3 === void 0 || (_config$api3 = _config$api3.codeBlock) === null || _config$api3 === void 0 ? void 0 : _config$api3.sharedState.onChange(function (_ref) {
-      var nextSharedState = _ref.nextSharedState,
-        prevSharedState = _ref.prevSharedState;
-      if ((nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.copyButtonHoverNode) !== (prevSharedState === null || prevSharedState === void 0 ? void 0 : prevSharedState.copyButtonHoverNode)) {
-        _this.addCopyButtonDecoration(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.copyButtonHoverNode);
-      }
-    });
     this.languageLoader = new _loader.LanguageLoader(function (lang) {
       _this.updating = true;
       _this.cm.dispatch({
@@ -67,12 +60,13 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     });
     this.cm = new _view.EditorView({
       doc: this.node.textContent,
-      extensions: [].concat((0, _toConsumableArray2.default)(config.extensions), [this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), this.copyDecoCompartment.of([]), (0, _keymap.keymapExtension)({
+      extensions: [].concat((0, _toConsumableArray2.default)(config.extensions), [this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), this.pmDecorationsCompartment.of([]), (0, _keymap.keymapExtension)({
         view: view,
         getPos: getPos,
         getNode: getNode,
         selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
-        onMaybeNodeSelection: onMaybeNodeSelection
+        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)(),
       // Explicitly disable "sticky" positioning on line numbers to match
       // Renderer behaviour
@@ -82,7 +76,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         return _this.forwardUpdate(update);
       }), this.readOnlyCompartment.of(_view.EditorView.editable.of(this.view.editable)), (0, _autocomplete.closeBrackets)(), _view.EditorView.editorAttributes.of({
         class: 'code-block'
-      }), _bidiCharWarning.bidiCharWarningExtension])
+      }), (0, _manageSelectionMarker.manageSelectionMarker)(config.api), (0, _prosemirrorDecorations.prosemirrorDecorationPlugin)(this.pmFacet, view, getPos)])
     });
 
     // The editor's outer node is our DOM representation
@@ -96,9 +90,8 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   return (0, _createClass2.default)(CodeBlockAdvancedNodeView, [{
     key: "destroy",
     value: function destroy() {
-      var _this$cleanupDisabled, _this$cleanupCopyButt;
+      var _this$cleanupDisabled;
       (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 || _this$cleanupDisabled.call(this);
-      (_this$cleanupCopyButt = this.cleanupCopyButtonDecoration) === null || _this$cleanupCopyButt === void 0 || _this$cleanupCopyButt.call(this);
     }
   }, {
     key: "forwardUpdate",
@@ -155,15 +148,6 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         this.view.dispatch(tr);
       }
     }
-  }, {
-    key: "addCopyButtonDecoration",
-    value: function addCopyButtonDecoration(node) {
-      this.updating = true;
-      this.cm.dispatch({
-        effects: [this.copyDecoCompartment.reconfigure(node && node === this.node ? _copyButtonDecorations.copyButtonDecorations : [])]
-      });
-      this.updating = false;
-    }
   }, {
     key: "updateWordWrap",
     value: function updateWordWrap(node) {
@@ -178,7 +162,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     }
   }, {
     key: "update",
-    value: function update(node) {
+    value: function update(node, _, innerDecorations) {
       var _this2 = this;
       this.maybeTryingToReachNodeSelection = false;
       if (node.type !== this.node.type) {
@@ -197,8 +181,27 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         _this2.cm.dispatch(tr);
         _this2.updating = false;
       });
+      this.updateProseMirrorDecorations(innerDecorations);
       return true;
     }
+
+    /**
+     * Updates a facet which stores information on the prosemirror decorations
+     *
+     * This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
+     */
+  }, {
+    key: "updateProseMirrorDecorations",
+    value: function updateProseMirrorDecorations(decorationSource) {
+      this.updating = true;
+      var computedFacet = this.pmFacet.compute([], function () {
+        return decorationSource;
+      });
+      this.cm.dispatch({
+        effects: this.pmDecorationsCompartment.reconfigure(computedFacet)
+      });
+      this.updating = false;
+    }
   }, {
     key: "stopEvent",
     value: function stopEvent(e) {

package/dist/cjs/nodeviews/codemirrorSync/syncCMWithPM.js

@@ -23,7 +23,6 @@ var syncCMWithPM = exports.syncCMWithPM = function syncCMWithPM(_ref) {
   var pmSel = view.state.selection;
   if (update.docChanged || pmSel.from !== selFrom || pmSel.to !== selTo) {
     var tr = view.state.tr;
-    // eslint-disable-next-line @typescript-eslint/max-params
     update.changes.iterChanges(function (fromA, toA, fromB, toB, text) {
       if (text.length) {
         tr.replaceWith(offset + fromA, offset + toA, view.state.schema.text(text.toString()));

package/dist/cjs/nodeviews/extensions/keymap/index.js

@@ -8,6 +8,7 @@ exports.keymapExtension = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _commands = require("@codemirror/commands");
 var _view = require("@codemirror/view");
+var _browser = require("@atlaskit/editor-common/browser");
 var _commands2 = require("@atlaskit/editor-prosemirror/commands");
 var _history = require("@atlaskit/editor-prosemirror/history");
 var _backspace = require("./backspace");
@@ -17,13 +18,15 @@ var keymapExtension = exports.keymapExtension = function keymapExtension(_ref) {
     getNode = _ref.getNode,
     getPos = _ref.getPos,
     selectCodeBlockNode = _ref.selectCodeBlockNode,
-    onMaybeNodeSelection = _ref.onMaybeNodeSelection;
+    onMaybeNodeSelection = _ref.onMaybeNodeSelection,
+    customFindReplace = _ref.customFindReplace;
   return _view.keymap.of(codeBlockKeymap({
     view: view,
     getNode: getNode,
     getPos: getPos,
     selectCodeBlockNode: selectCodeBlockNode,
-    onMaybeNodeSelection: onMaybeNodeSelection
+    onMaybeNodeSelection: onMaybeNodeSelection,
+    customFindReplace: customFindReplace
   }));
 };
 var codeBlockKeymap = function codeBlockKeymap(_ref2) {
@@ -31,7 +34,8 @@ var codeBlockKeymap = function codeBlockKeymap(_ref2) {
     getNode = _ref2.getNode,
     getPos = _ref2.getPos,
     selectCodeBlockNode = _ref2.selectCodeBlockNode,
-    onMaybeNodeSelection = _ref2.onMaybeNodeSelection;
+    onMaybeNodeSelection = _ref2.onMaybeNodeSelection,
+    customFindReplace = _ref2.customFindReplace;
   return [{
     key: 'ArrowUp',
     run: function run(cm) {
@@ -88,6 +92,22 @@ var codeBlockKeymap = function codeBlockKeymap(_ref2) {
         onMaybeNodeSelection: onMaybeNodeSelection
       });
     }
+  }, {
+    key: 'Ctrl-f',
+    mac: 'Cmd-f',
+    run: function run() {
+      // Pass synthetic event to prosemirror
+      if (customFindReplace) {
+        view.dispatchEvent(new KeyboardEvent('keydown', {
+          key: 'f',
+          code: 'KeyF',
+          metaKey: _browser.browser.mac ? true : false,
+          ctrlKey: _browser.browser.mac ? false : true
+        }));
+        return true;
+      }
+      return false;
+    }
   }, {
     key: 'Ctrl-Enter',
     run: function run() {

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.manageSelectionMarker = void 0;
+var _view = require("@codemirror/view");
+/**
+ * Hides selection marker decoration when focused on codemirror editor and re-enables on blur
+ *
+ * @param api
+ * @returns CodeMirror Extension
+ */
+var manageSelectionMarker = exports.manageSelectionMarker = function manageSelectionMarker(api) {
+  var decoHide;
+  return _view.EditorView.focusChangeEffect.of(function (_state, focusing) {
+    if (focusing) {
+      var _api$selectionMarker;
+      api === null || api === void 0 || (_api$selectionMarker = api.selectionMarker) === null || _api$selectionMarker === void 0 || _api$selectionMarker.actions.queueHideDecoration(function (hideDecoration) {
+        decoHide = hideDecoration;
+      });
+    } else {
+      var _decoHide;
+      (_decoHide = decoHide) === null || _decoHide === void 0 || _decoHide();
+    }
+    return null;
+  });
+};

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

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prosemirrorDecorationPlugin = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _view = require("@codemirror/view");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var PMWidget = /*#__PURE__*/function (_WidgetType) {
+  function PMWidget(toDOMElement) {
+    var _this;
+    (0, _classCallCheck2.default)(this, PMWidget);
+    _this = _callSuper(this, PMWidget);
+    _this.toDOMElement = toDOMElement;
+    return _this;
+  }
+  (0, _inherits2.default)(PMWidget, _WidgetType);
+  return (0, _createClass2.default)(PMWidget, [{
+    key: "toDOM",
+    value: function toDOM() {
+      return this.toDOMElement;
+    }
+  }, {
+    key: "ignoreEvent",
+    value: function ignoreEvent() {
+      return false;
+    }
+  }]);
+}(_view.WidgetType); // This type is not exposed publically by ProseMirror but we need it to map to CodeMirror
+// See: https://github.com/ProseMirror/prosemirror-view/blob/master/src/decoration.ts
+// This type is not exposed publically by ProseMirror but we need it to map to CodeMirror
+// See: https://github.com/ProseMirror/prosemirror-view/blob/master/src/decoration.ts
+// This type is not exposed publically by ProseMirror but we need it to map to CodeMirror
+// See: https://github.com/ProseMirror/prosemirror-view/blob/master/src/decoration.ts
+function isExtendedDecoration(decoration) {
+  return decoration.inline !== undefined && decoration.widget !== undefined && decoration.type !== undefined;
+}
+var getHTMLElement = function getHTMLElement(toDOM, view, getPos) {
+  if (toDOM instanceof Function) {
+    var element = toDOM(view, getPos);
+    return element instanceof HTMLElement ? element : undefined;
+  } else if (toDOM instanceof HTMLElement) {
+    return toDOM;
+  }
+};
+var mapPMDecorationToCMDecoration = function mapPMDecorationToCMDecoration(decoration, view, getPos) {
+  if (!isExtendedDecoration(decoration)) {
+    return undefined;
+  }
+  if (decoration.inline) {
+    var markDecoration = _view.Decoration.mark({
+      attributes: decoration.type.attrs
+    });
+    return markDecoration.range(decoration.from, decoration.to);
+  } else if (decoration.widget) {
+    var _decoration$type;
+    var toDOM = getHTMLElement(decoration === null || decoration === void 0 || (_decoration$type = decoration.type) === null || _decoration$type === void 0 ? void 0 : _decoration$type.toDOM, view, getPos);
+    if (!toDOM) {
+      return undefined;
+    }
+    var widgetDecoration = _view.Decoration.widget({
+      widget: new PMWidget(toDOM),
+      side: decoration.type.side
+    });
+    return widgetDecoration.range(decoration.from, decoration.to);
+  }
+};
+function isDefined(value) {
+  return value !== undefined;
+}
+
+/**
+ * Creates CodeMirror versions of the decorations provided by ProseMirror.
+ *
+ * Inline ProseMirror decorations -> Mark CodeMirror decorations
+ * Widget ProseMirror decorations -> Widget CodeMirror decorations
+ *
+ * This way any decorations applied in ProseMirror land should automatically be supported
+ * by the CodeMirror editor
+ *
+ * @param updateDecorationsEffect Facet for the prosemirror decorations
+ * @returns CodeMirror extension
+ */
+var prosemirrorDecorationPlugin = exports.prosemirrorDecorationPlugin = function prosemirrorDecorationPlugin(updateDecorationsEffect, editorView, getPos) {
+  return _view.ViewPlugin.fromClass( /*#__PURE__*/function () {
+    function _class(view) {
+      (0, _classCallCheck2.default)(this, _class);
+      this.decorations = this.updateDecorations(view);
+    }
+    return (0, _createClass2.default)(_class, [{
+      key: "updateDecorations",
+      value: function updateDecorations(view) {
+        var _view$viewport = view.viewport,
+          from = _view$viewport.from,
+          to = _view$viewport.to;
+        var innnerDecorations = view.state.facet(updateDecorationsEffect);
+        var allDecorations = [];
+        innnerDecorations === null || innnerDecorations === void 0 || innnerDecorations.map(function (source) {
+          source === null || source === void 0 || source.forEachSet(function (set) {
+            var decorations = set.find(from, to)
+            // Do not render the code block line decorations
+            .filter(function (dec) {
+              return dec.spec.type !== 'decorationWidgetType';
+            });
+            allDecorations.push.apply(allDecorations, (0, _toConsumableArray2.default)(decorations));
+          });
+        });
+        var cmDecorations = allDecorations.sort(function (a, b) {
+          return a.from < b.from ? -1 : 1;
+        }).map(function (decoration) {
+          return mapPMDecorationToCMDecoration(decoration, editorView, getPos);
+        }).filter(isDefined);
+        return _view.Decoration.set(cmDecorations);
+      }
+    }, {
+      key: "update",
+      value: function update(_update) {
+        this.decorations = this.updateDecorations(_update.view);
+      }
+    }]);
+  }(), {
+    decorations: function decorations(v) {
+      return v.decorations;
+    }
+  });
+};

package/dist/cjs/ui/theme.js

@@ -11,6 +11,7 @@ var cmTheme = exports.cmTheme = _view.EditorView.theme({
     padding: '0',
     marginTop: "var(--ds-space-100, 8px)",
     marginBottom: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: '0.875rem',
     // Custom syntax styling to match existing styling
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
@@ -37,7 +38,11 @@ var cmTheme = exports.cmTheme = _view.EditorView.theme({
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: 'unset',
     fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
-    borderRadius: "var(--ds-border-radius, 4px)"
+    borderRadius: "var(--ds-border-radius, 4px)",
+    backgroundImage: overflowShadow({
+      leftCoverWidth: "var(--ds-space-300, 24px)"
+    }),
+    backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll'
   },
   '&.cm-focused .cm-cursor': {
     borderLeftColor: "var(--ds-text, #172B4D)"
@@ -53,4 +58,17 @@ var cmTheme = exports.cmTheme = _view.EditorView.theme({
     paddingRight: "var(--ds-space-0, 0px)",
     minWidth: 'unset'
   }
-});
+});
+
+/**
+ * Copied directly from `packages/editor/editor-shared-styles/src/overflow-shadow/overflow-shadow.ts`
+ * `CodeMirror` does not support emotion styling so this has been re-created.
+ */
+function overflowShadow(_ref) {
+  var leftCoverWidth = _ref.leftCoverWidth,
+    rightCoverWidth = _ref.rightCoverWidth;
+  var width = "var(--ds-space-100, 8px)";
+  var leftCoverWidthResolved = leftCoverWidth || width;
+  var rightCoverWidthResolved = rightCoverWidth || width;
+  return "\n  linear-gradient(\n    to right,\n    ".concat("var(--ds-background-neutral, #091E420F)", " ", leftCoverWidthResolved, ",\n    transparent ").concat(leftCoverWidthResolved, "\n  ),\n  linear-gradient(\n    to right,\n    ", "var(--ds-surface-raised, #FFFFFF)", " ").concat(leftCoverWidthResolved, ",\n    transparent ").concat(leftCoverWidthResolved, "\n  ),\n  linear-gradient(\n    to left,\n    ", "var(--ds-background-neutral, #091E420F)", " ").concat(rightCoverWidthResolved, ",\n    transparent ").concat(rightCoverWidthResolved, "\n  ),\n  linear-gradient(\n    to left,\n    ", "var(--ds-surface-raised, #FFFFFF)", " ").concat(rightCoverWidthResolved, ",\n    transparent ").concat(rightCoverWidthResolved, "\n  ),\n  linear-gradient(\n    to left,\n    ", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n    ", "var(--ds-UNSAFE-transparent, transparent)", "  ").concat(width, "\n  ),\n  linear-gradient(\n    to left,\n    ", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n    ", "var(--ds-UNSAFE-transparent, transparent)", "  ").concat(width, "\n  ),\n  linear-gradient(\n    to right,\n    ", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n    ", "var(--ds-UNSAFE-transparent, transparent)", "  ").concat(width, "\n  ),\n  linear-gradient(\n    to right,\n    ", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n    ", "var(--ds-UNSAFE-transparent, transparent)", "  ").concat(width, "\n  )\n");
+}

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 } from '@codemirror/state';
+import { Compartment, EditorSelection, Facet } from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
@@ -9,20 +9,20 @@ import { highlightStyle } from '../ui/syntaxHighlightingTheme';
 import { cmTheme } from '../ui/theme';
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
 import { updateCMSelection } from './codemirrorSync/updateCMSelection';
-import { bidiCharWarningExtension } from './extensions/bidiCharWarning';
-import { copyButtonDecorations } from './extensions/copyButtonDecorations';
 import { keymapExtension } from './extensions/keymap';
+import { manageSelectionMarker } from './extensions/manageSelectionMarker';
+import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
 import { LanguageLoader } from './languages/loader';
 // Based on: https://prosemirror.net/examples/codemirror/
 class CodeBlockAdvancedNodeView {
-  // eslint-disable-next-line @typescript-eslint/max-params
   constructor(node, view, getPos, config) {
-    var _config$api, _config$api$selection, _config$api2, _config$api2$editorDi, _config$api3, _config$api3$codeBloc;
+    var _config$api, _config$api$selection, _config$api2, _config$api2$editorDi, _config$api3;
     _defineProperty(this, "lineWrappingCompartment", new Compartment());
     _defineProperty(this, "languageCompartment", new Compartment());
     _defineProperty(this, "readOnlyCompartment", new Compartment());
-    _defineProperty(this, "copyDecoCompartment", new Compartment());
+    _defineProperty(this, "pmDecorationsCompartment", new Compartment());
     _defineProperty(this, "maybeTryingToReachNodeSelection", false);
+    _defineProperty(this, "pmFacet", Facet.define());
     _defineProperty(this, "wordWrappingEnabled", false);
     this.node = node;
     this.view = view;
@@ -33,14 +33,6 @@ class CodeBlockAdvancedNodeView {
     this.cleanupDisabledState = (_config$api2 = config.api) === null || _config$api2 === void 0 ? void 0 : (_config$api2$editorDi = _config$api2.editorDisabled) === null || _config$api2$editorDi === void 0 ? void 0 : _config$api2$editorDi.sharedState.onChange(() => {
       this.updateReadonlyState();
     });
-    this.cleanupCopyButtonDecoration = (_config$api3 = config.api) === null || _config$api3 === void 0 ? void 0 : (_config$api3$codeBloc = _config$api3.codeBlock) === null || _config$api3$codeBloc === void 0 ? void 0 : _config$api3$codeBloc.sharedState.onChange(({
-      nextSharedState,
-      prevSharedState
-    }) => {
-      if ((nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.copyButtonHoverNode) !== (prevSharedState === null || prevSharedState === void 0 ? void 0 : prevSharedState.copyButtonHoverNode)) {
-        this.addCopyButtonDecoration(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.copyButtonHoverNode);
-      }
-    });
     this.languageLoader = new LanguageLoader(lang => {
       this.updating = true;
       this.cm.dispatch({
@@ -50,12 +42,13 @@ class CodeBlockAdvancedNodeView {
     });
     this.cm = new CodeMirror({
       doc: this.node.textContent,
-      extensions: [...config.extensions, this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), this.copyDecoCompartment.of([]), keymapExtension({
+      extensions: [...config.extensions, this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), this.pmDecorationsCompartment.of([]), keymapExtension({
         view,
         getPos,
         getNode,
         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(),
       // Explicitly disable "sticky" positioning on line numbers to match
       // Renderer behaviour
@@ -63,7 +56,7 @@ class CodeBlockAdvancedNodeView {
         fixed: false
       }), CodeMirror.updateListener.of(update => this.forwardUpdate(update)), this.readOnlyCompartment.of(CodeMirror.editable.of(this.view.editable)), closeBrackets(), CodeMirror.editorAttributes.of({
         class: 'code-block'
-      }), bidiCharWarningExtension]
+      }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos)]
     });
 
     // The editor's outer node is our DOM representation
@@ -75,9 +68,8 @@ class CodeBlockAdvancedNodeView {
     this.updateLanguage();
   }
   destroy() {
-    var _this$cleanupDisabled, _this$cleanupCopyButt;
+    var _this$cleanupDisabled;
     (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 ? void 0 : _this$cleanupDisabled.call(this);
-    (_this$cleanupCopyButt = this.cleanupCopyButtonDecoration) === null || _this$cleanupCopyButt === void 0 ? void 0 : _this$cleanupCopyButt.call(this);
   }
   forwardUpdate(update) {
     var _this$getPos, _this$getPos2;
@@ -124,13 +116,6 @@ class CodeBlockAdvancedNodeView {
       this.view.dispatch(tr);
     }
   }
-  addCopyButtonDecoration(node) {
-    this.updating = true;
-    this.cm.dispatch({
-      effects: [this.copyDecoCompartment.reconfigure(node && node === this.node ? copyButtonDecorations : [])]
-    });
-    this.updating = false;
-  }
   updateWordWrap(node) {
     if (this.wordWrappingEnabled !== isCodeBlockWordWrapEnabled(node)) {
       this.updating = true;
@@ -141,7 +126,7 @@ class CodeBlockAdvancedNodeView {
       this.wordWrappingEnabled = !this.wordWrappingEnabled;
     }
   }
-  update(node) {
+  update(node, _, innerDecorations) {
     this.maybeTryingToReachNodeSelection = false;
     if (node.type !== this.node.type) {
       return false;
@@ -159,8 +144,23 @@ class CodeBlockAdvancedNodeView {
       this.cm.dispatch(tr);
       this.updating = false;
     });
+    this.updateProseMirrorDecorations(innerDecorations);
     return true;
   }
+
+  /**
+   * Updates a facet which stores information on the prosemirror decorations
+   *
+   * This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
+   */
+  updateProseMirrorDecorations(decorationSource) {
+    this.updating = true;
+    const computedFacet = this.pmFacet.compute([], () => decorationSource);
+    this.cm.dispatch({
+      effects: this.pmDecorationsCompartment.reconfigure(computedFacet)
+    });
+    this.updating = false;
+  }
   stopEvent(e) {
     var _this$getPos5;
     if (e instanceof MouseEvent && e.type === 'mousedown') {

package/dist/es2019/nodeviews/codemirrorSync/syncCMWithPM.js

@@ -20,7 +20,6 @@ export const syncCMWithPM = ({
   const pmSel = view.state.selection;
   if (update.docChanged || pmSel.from !== selFrom || pmSel.to !== selTo) {
     const tr = view.state.tr;
-    // eslint-disable-next-line @typescript-eslint/max-params
     update.changes.iterChanges((fromA, toA, fromB, toB, text) => {
       if (text.length) {
         tr.replaceWith(offset + fromA, offset + toA, view.state.schema.text(text.toString()));