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

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;
+  });
+};

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

@@ -0,0 +1,99 @@
+import { ViewPlugin, WidgetType, Decoration as CodeMirrorDecoration } from '@codemirror/view';
+class PMWidget extends WidgetType {
+  constructor(toDOMElement) {
+    super();
+    this.toDOMElement = toDOMElement;
+  }
+  toDOM() {
+    return this.toDOMElement;
+  }
+  ignoreEvent() {
+    return false;
+  }
+}
+
+// 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;
+}
+const getHTMLElement = (toDOM, view, getPos) => {
+  if (toDOM instanceof Function) {
+    const element = toDOM(view, getPos);
+    return element instanceof HTMLElement ? element : undefined;
+  } else if (toDOM instanceof HTMLElement) {
+    return toDOM;
+  }
+};
+const mapPMDecorationToCMDecoration = (decoration, view, getPos) => {
+  if (!isExtendedDecoration(decoration)) {
+    return undefined;
+  }
+  if (decoration.inline) {
+    const markDecoration = CodeMirrorDecoration.mark({
+      attributes: decoration.type.attrs
+    });
+    return markDecoration.range(decoration.from, decoration.to);
+  } else if (decoration.widget) {
+    var _decoration$type;
+    const toDOM = getHTMLElement(decoration === null || decoration === void 0 ? void 0 : (_decoration$type = decoration.type) === null || _decoration$type === void 0 ? void 0 : _decoration$type.toDOM, view, getPos);
+    if (!toDOM) {
+      return undefined;
+    }
+    const widgetDecoration = CodeMirrorDecoration.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
+ */
+export const prosemirrorDecorationPlugin = (updateDecorationsEffect, editorView, getPos) => ViewPlugin.fromClass(class {
+  constructor(view) {
+    this.decorations = this.updateDecorations(view);
+  }
+  updateDecorations(view) {
+    const {
+      from,
+      to
+    } = view.viewport;
+    const innnerDecorations = view.state.facet(updateDecorationsEffect);
+    const allDecorations = [];
+    innnerDecorations === null || innnerDecorations === void 0 ? void 0 : innnerDecorations.map(source => {
+      source === null || source === void 0 ? void 0 : source.forEachSet(set => {
+        const decorations = set.find(from, to)
+        // Do not render the code block line decorations
+        .filter(dec => dec.spec.type !== 'decorationWidgetType');
+        allDecorations.push(...decorations);
+      });
+    });
+    const cmDecorations = allDecorations.sort((a, b) => a.from < b.from ? -1 : 1).map(decoration => mapPMDecorationToCMDecoration(decoration, editorView, getPos)).filter(isDefined);
+    return CodeMirrorDecoration.set(cmDecorations);
+  }
+  update(update) {
+    this.decorations = this.updateDecorations(update.view);
+  }
+}, {
+  decorations: v => v.decorations
+});

package/dist/es2019/ui/theme.js

@@ -5,6 +5,7 @@ export const cmTheme = CodeMirror.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
@@ -31,7 +32,11 @@ export const cmTheme = CodeMirror.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)"
@@ -47,4 +52,59 @@ export const cmTheme = CodeMirror.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({
+  leftCoverWidth,
+  rightCoverWidth
+}) {
+  const width = "var(--ds-space-100, 8px)";
+  const leftCoverWidthResolved = leftCoverWidth || width;
+  const rightCoverWidthResolved = rightCoverWidth || width;
+  return `
+  linear-gradient(
+    to right,
+    ${"var(--ds-background-neutral, #091E420F)"} ${leftCoverWidthResolved},
+    transparent ${leftCoverWidthResolved}
+  ),
+  linear-gradient(
+    to right,
+    ${"var(--ds-surface-raised, #FFFFFF)"} ${leftCoverWidthResolved},
+    transparent ${leftCoverWidthResolved}
+  ),
+  linear-gradient(
+    to left,
+    ${"var(--ds-background-neutral, #091E420F)"} ${rightCoverWidthResolved},
+    transparent ${rightCoverWidthResolved}
+  ),
+  linear-gradient(
+    to left,
+    ${"var(--ds-surface-raised, #FFFFFF)"} ${rightCoverWidthResolved},
+    transparent ${rightCoverWidthResolved}
+  ),
+  linear-gradient(
+    to left,
+    ${"var(--ds-shadow-overflow-spread, #091e4229)"} 0,
+    ${"var(--ds-UNSAFE-transparent, transparent)"}  ${width}
+  ),
+  linear-gradient(
+    to left,
+    ${"var(--ds-shadow-overflow-perimeter, #091e421f)"} 0,
+    ${"var(--ds-UNSAFE-transparent, transparent)"}  ${width}
+  ),
+  linear-gradient(
+    to right,
+    ${"var(--ds-shadow-overflow-spread, #091e4229)"} 0,
+    ${"var(--ds-UNSAFE-transparent, transparent)"}  ${width}
+  ),
+  linear-gradient(
+    to right,
+    ${"var(--ds-shadow-overflow-perimeter, #091e421f)"} 0,
+    ${"var(--ds-UNSAFE-transparent, transparent)"}  ${width}
+  )
+`;
+}

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 } 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';
@@ -12,13 +12,12 @@ 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/
 var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
-  // eslint-disable-next-line @typescript-eslint/max-params
   function CodeBlockAdvancedNodeView(node, view, getPos, config) {
     var _config$api,
       _this = this,
@@ -28,8 +27,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     _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;
@@ -44,13 +44,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 LanguageLoader(function (lang) {
       _this.updating = true;
       _this.cm.dispatch({
@@ -60,12 +53,13 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     });
     this.cm = new CodeMirror({
       doc: this.node.textContent,
-      extensions: [].concat(_toConsumableArray(config.extensions), [this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), this.copyDecoCompartment.of([]), keymapExtension({
+      extensions: [].concat(_toConsumableArray(config.extensions), [this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), this.pmDecorationsCompartment.of([]), 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)
       }), cmTheme, syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers(),
       // Explicitly disable "sticky" positioning on line numbers to match
       // Renderer behaviour
@@ -75,7 +69,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         return _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
@@ -89,9 +83,8 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   return _createClass(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",
@@ -148,15 +141,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 : [])]
-      });
-      this.updating = false;
-    }
   }, {
     key: "updateWordWrap",
     value: function updateWordWrap(node) {
@@ -171,7 +155,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) {
@@ -190,8 +174,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/esm/nodeviews/codemirrorSync/syncCMWithPM.js

@@ -17,7 +17,6 @@ export var 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/esm/nodeviews/extensions/keymap/index.js

@@ -1,6 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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';
@@ -10,13 +11,15 @@ export var keymapExtension = function keymapExtension(_ref) {
     getNode = _ref.getNode,
     getPos = _ref.getPos,
     selectCodeBlockNode = _ref.selectCodeBlockNode,
-    onMaybeNodeSelection = _ref.onMaybeNodeSelection;
+    onMaybeNodeSelection = _ref.onMaybeNodeSelection,
+    customFindReplace = _ref.customFindReplace;
   return cmKeymap.of(codeBlockKeymap({
     view: view,
     getNode: getNode,
     getPos: getPos,
     selectCodeBlockNode: selectCodeBlockNode,
-    onMaybeNodeSelection: onMaybeNodeSelection
+    onMaybeNodeSelection: onMaybeNodeSelection,
+    customFindReplace: customFindReplace
   }));
 };
 var codeBlockKeymap = function codeBlockKeymap(_ref2) {
@@ -24,7 +27,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) {
@@ -81,6 +85,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.mac ? true : false,
+          ctrlKey: browser.mac ? false : true
+        }));
+        return true;
+      }
+      return false;
+    }
   }, {
     key: 'Ctrl-Enter',
     run: function run() {

package/dist/esm/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 var manageSelectionMarker = function manageSelectionMarker(api) {
+  var decoHide;
+  return CodeMirror.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/esm/nodeviews/extensions/prosemirrorDecorations.js

@@ -0,0 +1,127 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
+import { ViewPlugin, WidgetType, Decoration as CodeMirrorDecoration } from '@codemirror/view';
+var PMWidget = /*#__PURE__*/function (_WidgetType) {
+  function PMWidget(toDOMElement) {
+    var _this;
+    _classCallCheck(this, PMWidget);
+    _this = _callSuper(this, PMWidget);
+    _this.toDOMElement = toDOMElement;
+    return _this;
+  }
+  _inherits(PMWidget, _WidgetType);
+  return _createClass(PMWidget, [{
+    key: "toDOM",
+    value: function toDOM() {
+      return this.toDOMElement;
+    }
+  }, {
+    key: "ignoreEvent",
+    value: function ignoreEvent() {
+      return false;
+    }
+  }]);
+}(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 = CodeMirrorDecoration.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 = CodeMirrorDecoration.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
+ */
+export var prosemirrorDecorationPlugin = function prosemirrorDecorationPlugin(updateDecorationsEffect, editorView, getPos) {
+  return ViewPlugin.fromClass( /*#__PURE__*/function () {
+    function _class(view) {
+      _classCallCheck(this, _class);
+      this.decorations = this.updateDecorations(view);
+    }
+    return _createClass(_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, _toConsumableArray(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 CodeMirrorDecoration.set(cmDecorations);
+      }
+    }, {
+      key: "update",
+      value: function update(_update) {
+        this.decorations = this.updateDecorations(_update.view);
+      }
+    }]);
+  }(), {
+    decorations: function decorations(v) {
+      return v.decorations;
+    }
+  });
+};

package/dist/esm/ui/theme.js

@@ -5,6 +5,7 @@ export var cmTheme = CodeMirror.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
@@ -31,7 +32,11 @@ export var cmTheme = CodeMirror.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)"
@@ -47,4 +52,17 @@ export var cmTheme = CodeMirror.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");
+}