@atlaskit/editor-plugin-code-block-advanced 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 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
+
+- [#105726](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105726)
+  [`2eb0f22c4b065`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2eb0f22c4b065) -
+  [ux] Fix toDOM implementation whitespace with 100+ lines of code
+- [#103918](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103918)
+  [`29844093c6ab4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/29844093c6ab4) -
+  Expose new shared state for code block plugin which indicates the current node that the copy text
+  button is hovered for. Display highlight decorations for the copy text button in the advanced code
+  block plugin.
+- Updated dependencies
+
 ## 1.0.1
 
 ### 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,21 +19,24 @@ 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 _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,
-      _config$api2;
+      _config$api2,
+      _config$api3;
     (0, _classCallCheck2.default)(this, CodeBlockAdvancedNodeView);
     (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, "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;
@@ -57,13 +60,14 @@ 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([]), (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
-      }), _theme.cmTheme, (0, _language.syntaxHighlighting)(_syntaxHighlightingTheme.highlightStyle), (0, _view.lineNumbers)(),
+        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
       (0, _view.gutters)({
@@ -72,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
@@ -158,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) {
@@ -177,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/codeBlockNodeWithToDOMFixed.js

@@ -60,7 +60,8 @@ var _toDOM = function toDOM(node, formattedAriaLabel) {
     style: (0, _lazyNodeView.convertToInlineCss)({
       textAlign: 'right',
       color: "var(--ds-text-subtlest, #626F86)",
-      fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
+      fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+      whiteSpace: 'pre-wrap'
     }),
     'data-label': content
   }]], ['div', {

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,142 @@
+"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) {
+          // Temporary: this only exists on prosemirror-view@1.34.0. Since post-office is lower it causes an error.
+          // Once we do our prosemirror bump (very soon) we should remove this.
+          // https://product-fabric.atlassian.net/browse/ED-26398
+          // @ts-ignore
+          source === null || source === void 0 || source.forEachSet(function (set) {
+            var decorations = set.find(from, to)
+            // Do not render the code block line decorations
+            // Temporary: this only exists on prosemirror-view@1.34.0. Since post-office is lower it causes an error.
+            // Once we do our prosemirror bump (very soon) we should remove this.
+            // https://product-fabric.atlassian.net/browse/ED-26398
+            // @ts-ignore
+            .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/es2019/nodeviews/codeBlockAdvanced.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { closeBrackets } from '@codemirror/autocomplete';
-import { syntaxHighlighting } from '@codemirror/language';
-import { Compartment, EditorSelection } from '@codemirror/state';
+import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
+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,18 +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 { 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;
+    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, "pmDecorationsCompartment", new Compartment());
     _defineProperty(this, "maybeTryingToReachNodeSelection", false);
+    _defineProperty(this, "pmFacet", Facet.define());
     _defineProperty(this, "wordWrappingEnabled", false);
     this.node = node;
     this.view = view;
@@ -40,20 +42,21 @@ class CodeBlockAdvancedNodeView {
     });
     this.cm = new CodeMirror({
       doc: this.node.textContent,
-      extensions: [...config.extensions, this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), keymapExtension({
+      extensions: [...config.extensions, this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), this.pmDecorationsCompartment.of([]), keymapExtension({
         view,
         getPos,
         getNode,
         selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
-        onMaybeNodeSelection
-      }), cmTheme, syntaxHighlighting(highlightStyle), lineNumbers(),
+        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
       gutters({
         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
@@ -123,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;
@@ -141,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/codeBlockNodeWithToDOMFixed.js

@@ -48,7 +48,8 @@ const toDOM = (node, formattedAriaLabel) => {
     style: convertToInlineCss({
       textAlign: 'right',
       color: "var(--ds-text-subtlest, #626F86)",
-      fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
+      fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+      whiteSpace: 'pre-wrap'
     }),
     'data-label': content
   }]], ['div', {

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()));

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

@@ -1,5 +1,6 @@
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 import { keymap as cmKeymap } from '@codemirror/view';
+import { browser } from '@atlaskit/editor-common/browser';
 import { exitCode } from '@atlaskit/editor-prosemirror/commands';
 import { undo, redo } from '@atlaskit/editor-prosemirror/history';
 import { backspaceKeymap } from './backspace';
@@ -9,14 +10,16 @@ export const keymapExtension = ({
   getNode,
   getPos,
   selectCodeBlockNode,
-  onMaybeNodeSelection
+  onMaybeNodeSelection,
+  customFindReplace
 }) => {
   return cmKeymap.of(codeBlockKeymap({
     view,
     getNode,
     getPos,
     selectCodeBlockNode,
-    onMaybeNodeSelection
+    onMaybeNodeSelection,
+    customFindReplace
   }));
 };
 const codeBlockKeymap = ({
@@ -24,7 +27,8 @@ const codeBlockKeymap = ({
   getNode,
   getPos,
   selectCodeBlockNode,
-  onMaybeNodeSelection
+  onMaybeNodeSelection,
+  customFindReplace
 }) => {
   return [{
     key: 'ArrowUp',
@@ -74,6 +78,22 @@ const codeBlockKeymap = ({
       selectCodeBlockNode,
       onMaybeNodeSelection
     })
+  }, {
+    key: 'Ctrl-f',
+    mac: 'Cmd-f',
+    run: () => {
+      // Pass synthetic event to prosemirror
+      if (customFindReplace) {
+        view.dispatchEvent(new KeyboardEvent('keydown', {
+          key: 'f',
+          code: 'KeyF',
+          metaKey: browser.mac ? true : false,
+          ctrlKey: browser.mac ? false : true
+        }));
+        return true;
+      }
+      return false;
+    }
   }, {
     key: 'Ctrl-Enter',
     run: () => {

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

@@ -0,0 +1,22 @@
+import { EditorView as CodeMirror } from '@codemirror/view';
+/**
+ * Hides selection marker decoration when focused on codemirror editor and re-enables on blur
+ *
+ * @param api
+ * @returns CodeMirror Extension
+ */
+export const manageSelectionMarker = api => {
+  let decoHide;
+  return CodeMirror.focusChangeEffect.of((_state, focusing) => {
+    if (focusing) {
+      var _api$selectionMarker;
+      api === null || api === void 0 ? void 0 : (_api$selectionMarker = api.selectionMarker) === null || _api$selectionMarker === void 0 ? void 0 : _api$selectionMarker.actions.queueHideDecoration(hideDecoration => {
+        decoHide = hideDecoration;
+      });
+    } else {
+      var _decoHide;
+      (_decoHide = decoHide) === null || _decoHide === void 0 ? void 0 : _decoHide();
+    }
+    return null;
+  });
+};