@atlaskit/editor-plugin-code-block-advanced 2.1.3 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 2.2.0
+
+### Minor Changes
+
+- [#137683](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137683)
+  [`c1020ef8cdf87`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c1020ef8cdf87) -
+  Adds support for Handlebars syntax highlighting.
+
+### Patch Changes
+
+- [#137043](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137043)
+  [`616c9cd4a2c60`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/616c9cd4a2c60) -
+  Fix line wrapping and decorations being lost on breakout in advanced codeblocks
+- Updated dependencies
+
+## 2.1.4
+
+### Patch Changes
+
+- [#136263](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/136263)
+  [`602e9a7824b0c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/602e9a7824b0c) -
+  Fix editor crashing with advanced code blocks due to infinite codemirror loop with decorations
+  when changing breakout.
+- Updated dependencies
+
 ## 2.1.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -15,6 +15,7 @@ var _state = require("@codemirror/state");
 var _view = require("@codemirror/view");
 var _codeBlock = require("@atlaskit/editor-common/code-block");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
+var _view2 = require("@atlaskit/editor-prosemirror/view");
 var _syntaxHighlightingTheme = require("../ui/syntaxHighlightingTheme");
 var _theme = require("../ui/theme");
 var _syncCMWithPM = require("./codemirrorSync/syncCMWithPM");
@@ -25,7 +26,7 @@ var _prosemirrorDecorations = require("./extensions/prosemirrorDecorations");
 var _loader = require("./languages/loader");
 // Based on: https://prosemirror.net/examples/codemirror/
 var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
-  function CodeBlockAdvancedNodeView(node, view, getPos, config) {
+  function CodeBlockAdvancedNodeView(node, view, getPos, innerDecorations, config) {
     var _config$api,
       _this = this,
       _config$api2,
@@ -86,11 +87,17 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     // inner editor
     this.updating = false;
     this.updateLanguage();
+    this.updateWordWrap(node);
+    this.updateProseMirrorDecorations(innerDecorations);
   }
   return (0, _createClass2.default)(CodeBlockAdvancedNodeView, [{
     key: "destroy",
     value: function destroy() {
       var _this$cleanupDisabled;
+      // ED-27428: CodeMirror gets into an infinite loop as it detects mutations on removed
+      // decorations. When we change the breakout we destroy the node and cleanup these decorations from
+      // codemirror
+      this.clearProseMirrorDecorations();
       (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 || _this$cleanupDisabled.call(this);
     }
   }, {
@@ -202,6 +209,18 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       });
       this.updating = false;
     }
+  }, {
+    key: "clearProseMirrorDecorations",
+    value: function clearProseMirrorDecorations() {
+      this.updating = true;
+      var computedFacet = this.pmFacet.compute([], function () {
+        return _view2.DecorationSet.empty;
+      });
+      this.cm.dispatch({
+        effects: this.pmDecorationsCompartment.reconfigure(computedFacet)
+      });
+      this.updating = false;
+    }
   }, {
     key: "stopEvent",
     value: function stopEvent(e) {
@@ -234,7 +253,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   }]);
 }();
 var getCodeBlockAdvancedNodeView = exports.getCodeBlockAdvancedNodeView = function getCodeBlockAdvancedNodeView(props) {
-  return function (node, view, getPos) {
-    return new CodeBlockAdvancedNodeView(node, view, getPos, props);
+  return function (node, view, getPos, innerDecorations) {
+    return new CodeBlockAdvancedNodeView(node, view, getPos, innerDecorations, props);
   };
 };

package/dist/cjs/nodeviews/languages/languageMap.js

@@ -68,6 +68,18 @@ var mapLanguageToCodeMirror = exports.mapLanguageToCodeMirror = function mapLang
       return _languageData.languages.find(function (l) {
         return l.name === 'VB.NET';
       });
+    case 'handlebars':
+      return _language.LanguageDescription.of({
+        name: 'Handlebars',
+        load: function load() {
+          return Promise.resolve().then(function () {
+            return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_@atlaskit/editor-plugin-code-block-advanced-lang-handlebars" */
+            '@xiechao/codemirror-lang-handlebars'));
+          }).then(function (m) {
+            return new _language.LanguageSupport(m.handlebarsLanguage);
+          });
+        }
+      });
     case 'elixir':
       return _language.LanguageDescription.of({
         name: 'Elixir',

package/dist/cjs/nodeviews/lazyCodeBlockAdvanced.js

@@ -1,29 +1,47 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.lazyCodeBlockView = void 0;
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var lazyCodeBlockView = exports.lazyCodeBlockView = function lazyCodeBlockView(props) {
   return (0, _lazyNodeView.withLazyLoading)({
     nodeName: 'codeBlock',
     getNodeViewOptions: function getNodeViewOptions() {},
-    loader: function loader() {
-      var result = Promise.resolve().then(function () {
-        return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-advanced-nodeview" */
-        './codeBlockAdvanced'));
-      }).then(function (_ref) {
-        var getCodeBlockAdvancedNodeView = _ref.getCodeBlockAdvancedNodeView;
-        return function (node, view, getPos) {
-          return getCodeBlockAdvancedNodeView(props)(node, view, getPos);
-        };
-      });
-      return result;
-    }
+    loader: function () {
+      var _loader = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var _yield$import, getCodeBlockAdvancedNodeView;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return Promise.resolve().then(function () {
+                return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-advanced-nodeview" */
+                './codeBlockAdvanced'));
+              });
+            case 2:
+              _yield$import = _context.sent;
+              getCodeBlockAdvancedNodeView = _yield$import.getCodeBlockAdvancedNodeView;
+              return _context.abrupt("return", function (node, view, getPos, _decs, _nodeViewOptions, innerDecorations) {
+                return getCodeBlockAdvancedNodeView(props)(node, view, getPos, innerDecorations);
+              });
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function loader() {
+        return _loader.apply(this, arguments);
+      }
+      return loader;
+    }()
   });
 };

package/dist/cjs/pm-plugins/main.js

@@ -6,11 +6,25 @@ Object.defineProperty(exports, "__esModule", {
 exports.createPlugin = void 0;
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _lazyCodeBlockAdvanced = require("../nodeviews/lazyCodeBlockAdvanced");
+var _shiftArrowKeyWorkaround = require("./shiftArrowKeyWorkaround");
 var createPlugin = exports.createPlugin = function createPlugin(props) {
   return new _safePlugin.SafePlugin({
     props: {
       nodeViews: {
         codeBlock: (0, _lazyCodeBlockAdvanced.lazyCodeBlockView)(props)
+      },
+      // Custom selection behaviour to fix issues with codeblocks with Shift + Arrow{Up || Down}
+      // These issues are also present in the prosemirror codemirror example and @marijnh suggests to
+      // use custom event handlers: https://github.com/ProseMirror/website/issues/83
+      handleKeyDown: function handleKeyDown(view, event) {
+        if (!(event instanceof KeyboardEvent)) {
+          return false;
+        }
+        if (event.key === 'ArrowUp' && event.shiftKey) {
+          return (0, _shiftArrowKeyWorkaround.shiftArrowUpWorkaround)(view, event);
+        } else if (event.key === 'ArrowDown' && event.shiftKey) {
+          return (0, _shiftArrowKeyWorkaround.shiftArrowDownWorkaround)(view, event);
+        }
       }
     }
   });

package/dist/cjs/pm-plugins/shiftArrowKeyWorkaround.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shiftArrowUpWorkaround = exports.shiftArrowDownWorkaround = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var shiftArrowUpWorkaround = exports.shiftArrowUpWorkaround = function shiftArrowUpWorkaround(view, event) {
+  var _doc$resolve$nodeBefo;
+  var _view$state = view.state,
+    doc = _view$state.doc,
+    _view$state$selection = _view$state.selection,
+    $head = _view$state$selection.$head,
+    $anchor = _view$state$selection.$anchor,
+    tr = _view$state.tr,
+    codeBlock = _view$state.schema.nodes.codeBlock;
+
+  // Position we want to check (directly after our current position)
+  var pos = Math.max($head.pos - 1, 1);
+  var isNodeBefore = ((_doc$resolve$nodeBefo = doc.resolve(pos).nodeBefore) === null || _doc$resolve$nodeBefo === void 0 ? void 0 : _doc$resolve$nodeBefo.type) === codeBlock;
+  var maybeProblematicNode = isNodeBefore ? doc.resolve(pos).nodeBefore : doc.resolve(pos).node();
+  if ((maybeProblematicNode === null || maybeProblematicNode === void 0 ? void 0 : maybeProblematicNode.type) === codeBlock) {
+    var nodeSize = maybeProblematicNode.nodeSize;
+    var startPos = isNodeBefore ? pos : $head.pos;
+    tr.setSelection(_state.TextSelection.create(doc, $anchor.pos, Math.max(startPos - nodeSize, 0)));
+    view.dispatch(tr);
+    event.preventDefault();
+    return true;
+  }
+  return false;
+};
+var shiftArrowDownWorkaround = exports.shiftArrowDownWorkaround = function shiftArrowDownWorkaround(view, event) {
+  var _doc$resolve$nodeAfte;
+  var _view$state2 = view.state,
+    doc = _view$state2.doc,
+    _view$state2$selectio = _view$state2.selection,
+    $head = _view$state2$selectio.$head,
+    $anchor = _view$state2$selectio.$anchor,
+    tr = _view$state2.tr,
+    codeBlock = _view$state2.schema.nodes.codeBlock;
+
+  // Position we want to check (directly after our current position)
+  var pos = $head.pos + 1;
+  var isNodeAfter = ((_doc$resolve$nodeAfte = doc.resolve(pos).nodeAfter) === null || _doc$resolve$nodeAfte === void 0 ? void 0 : _doc$resolve$nodeAfte.type) === codeBlock;
+  var maybeProblematicNode = isNodeAfter ? doc.resolve(pos).nodeAfter : doc.resolve(pos).node();
+  if ((maybeProblematicNode === null || maybeProblematicNode === void 0 ? void 0 : maybeProblematicNode.type) === codeBlock) {
+    var nodeSize = maybeProblematicNode.nodeSize;
+    var startPos = isNodeAfter ? pos : $head.pos;
+    tr.setSelection(_state.TextSelection.create(doc, $anchor.pos, Math.min(startPos + nodeSize, doc.content.size)));
+    view.dispatch(tr);
+    event.preventDefault();
+    return true;
+  }
+  return false;
+};

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -5,6 +5,7 @@ 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';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
 import { cmTheme } from '../ui/theme';
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
@@ -15,7 +16,7 @@ import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations
 import { LanguageLoader } from './languages/loader';
 // Based on: https://prosemirror.net/examples/codemirror/
 class CodeBlockAdvancedNodeView {
-  constructor(node, view, getPos, config) {
+  constructor(node, view, getPos, innerDecorations, config) {
     var _config$api, _config$api$selection, _config$api2, _config$api2$editorDi, _config$api3;
     _defineProperty(this, "lineWrappingCompartment", new Compartment());
     _defineProperty(this, "languageCompartment", new Compartment());
@@ -66,9 +67,15 @@ class CodeBlockAdvancedNodeView {
     // inner editor
     this.updating = false;
     this.updateLanguage();
+    this.updateWordWrap(node);
+    this.updateProseMirrorDecorations(innerDecorations);
   }
   destroy() {
     var _this$cleanupDisabled;
+    // ED-27428: CodeMirror gets into an infinite loop as it detects mutations on removed
+    // decorations. When we change the breakout we destroy the node and cleanup these decorations from
+    // codemirror
+    this.clearProseMirrorDecorations();
     (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 ? void 0 : _this$cleanupDisabled.call(this);
   }
   forwardUpdate(update) {
@@ -161,6 +168,14 @@ class CodeBlockAdvancedNodeView {
     });
     this.updating = false;
   }
+  clearProseMirrorDecorations() {
+    this.updating = true;
+    const computedFacet = this.pmFacet.compute([], () => DecorationSet.empty);
+    this.cm.dispatch({
+      effects: this.pmDecorationsCompartment.reconfigure(computedFacet)
+    });
+    this.updating = false;
+  }
   stopEvent(e) {
     var _this$getPos5;
     if (e instanceof MouseEvent && e.type === 'mousedown') {
@@ -188,6 +203,6 @@ class CodeBlockAdvancedNodeView {
     return true;
   }
 }
-export const getCodeBlockAdvancedNodeView = props => (node, view, getPos) => {
-  return new CodeBlockAdvancedNodeView(node, view, getPos, props);
+export const getCodeBlockAdvancedNodeView = props => (node, view, getPos, innerDecorations) => {
+  return new CodeBlockAdvancedNodeView(node, view, getPos, innerDecorations, props);
 };

package/dist/es2019/nodeviews/languages/languageMap.js

@@ -1,4 +1,4 @@
-import { LanguageDescription } from '@codemirror/language';
+import { LanguageDescription, LanguageSupport } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 // getLanguageIdentifier defines `language.alias[0]`
 export const mapLanguageToCodeMirror = language => {
@@ -58,6 +58,14 @@ export const mapLanguageToCodeMirror = language => {
       return languages.find(l => {
         return l.name === 'VB.NET';
       });
+    case 'handlebars':
+      return LanguageDescription.of({
+        name: 'Handlebars',
+        load() {
+          return import( /* webpackChunkName: "@atlaskit-internal_@atlaskit/editor-plugin-code-block-advanced-lang-handlebars" */
+          '@xiechao/codemirror-lang-handlebars').then(m => new LanguageSupport(m.handlebarsLanguage));
+        }
+      });
     case 'elixir':
       return LanguageDescription.of({
         name: 'Elixir',

package/dist/es2019/nodeviews/lazyCodeBlockAdvanced.js

@@ -3,16 +3,12 @@ export const lazyCodeBlockView = props => {
   return withLazyLoading({
     nodeName: 'codeBlock',
     getNodeViewOptions: () => {},
-    loader: () => {
-      const result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-advanced-nodeview" */
-      './codeBlockAdvanced').then(({
+    loader: async () => {
+      const {
         getCodeBlockAdvancedNodeView
-      }) => {
-        return (node, view, getPos) => {
-          return getCodeBlockAdvancedNodeView(props)(node, view, getPos);
-        };
-      });
-      return result;
+      } = await import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-advanced-nodeview" */
+      './codeBlockAdvanced');
+      return (node, view, getPos, _decs, _nodeViewOptions, innerDecorations) => getCodeBlockAdvancedNodeView(props)(node, view, getPos, innerDecorations);
     }
   });
 };

package/dist/es2019/pm-plugins/main.js

@@ -1,10 +1,24 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { lazyCodeBlockView } from '../nodeviews/lazyCodeBlockAdvanced';
+import { shiftArrowDownWorkaround, shiftArrowUpWorkaround } from './shiftArrowKeyWorkaround';
 export const createPlugin = props => {
   return new SafePlugin({
     props: {
       nodeViews: {
         codeBlock: lazyCodeBlockView(props)
+      },
+      // Custom selection behaviour to fix issues with codeblocks with Shift + Arrow{Up || Down}
+      // These issues are also present in the prosemirror codemirror example and @marijnh suggests to
+      // use custom event handlers: https://github.com/ProseMirror/website/issues/83
+      handleKeyDown(view, event) {
+        if (!(event instanceof KeyboardEvent)) {
+          return false;
+        }
+        if (event.key === 'ArrowUp' && event.shiftKey) {
+          return shiftArrowUpWorkaround(view, event);
+        } else if (event.key === 'ArrowDown' && event.shiftKey) {
+          return shiftArrowDownWorkaround(view, event);
+        }
       }
     }
   });

package/dist/es2019/pm-plugins/shiftArrowKeyWorkaround.js

@@ -0,0 +1,61 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export const shiftArrowUpWorkaround = (view, event) => {
+  var _doc$resolve$nodeBefo;
+  const {
+    doc,
+    selection: {
+      $head,
+      $anchor
+    },
+    tr,
+    schema: {
+      nodes: {
+        codeBlock
+      }
+    }
+  } = view.state;
+
+  // Position we want to check (directly after our current position)
+  const pos = Math.max($head.pos - 1, 1);
+  const isNodeBefore = ((_doc$resolve$nodeBefo = doc.resolve(pos).nodeBefore) === null || _doc$resolve$nodeBefo === void 0 ? void 0 : _doc$resolve$nodeBefo.type) === codeBlock;
+  const maybeProblematicNode = isNodeBefore ? doc.resolve(pos).nodeBefore : doc.resolve(pos).node();
+  if ((maybeProblematicNode === null || maybeProblematicNode === void 0 ? void 0 : maybeProblematicNode.type) === codeBlock) {
+    const nodeSize = maybeProblematicNode.nodeSize;
+    const startPos = isNodeBefore ? pos : $head.pos;
+    tr.setSelection(TextSelection.create(doc, $anchor.pos, Math.max(startPos - nodeSize, 0)));
+    view.dispatch(tr);
+    event.preventDefault();
+    return true;
+  }
+  return false;
+};
+export const shiftArrowDownWorkaround = (view, event) => {
+  var _doc$resolve$nodeAfte;
+  const {
+    doc,
+    selection: {
+      $head,
+      $anchor
+    },
+    tr,
+    schema: {
+      nodes: {
+        codeBlock
+      }
+    }
+  } = view.state;
+
+  // Position we want to check (directly after our current position)
+  const pos = $head.pos + 1;
+  const isNodeAfter = ((_doc$resolve$nodeAfte = doc.resolve(pos).nodeAfter) === null || _doc$resolve$nodeAfte === void 0 ? void 0 : _doc$resolve$nodeAfte.type) === codeBlock;
+  const maybeProblematicNode = isNodeAfter ? doc.resolve(pos).nodeAfter : doc.resolve(pos).node();
+  if ((maybeProblematicNode === null || maybeProblematicNode === void 0 ? void 0 : maybeProblematicNode.type) === codeBlock) {
+    const nodeSize = maybeProblematicNode.nodeSize;
+    const startPos = isNodeAfter ? pos : $head.pos;
+    tr.setSelection(TextSelection.create(doc, $anchor.pos, Math.min(startPos + nodeSize, doc.content.size)));
+    view.dispatch(tr);
+    event.preventDefault();
+    return true;
+  }
+  return false;
+};

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -8,6 +8,7 @@ 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';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
 import { cmTheme } from '../ui/theme';
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
@@ -18,7 +19,7 @@ import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations
 import { LanguageLoader } from './languages/loader';
 // Based on: https://prosemirror.net/examples/codemirror/
 var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
-  function CodeBlockAdvancedNodeView(node, view, getPos, config) {
+  function CodeBlockAdvancedNodeView(node, view, getPos, innerDecorations, config) {
     var _config$api,
       _this = this,
       _config$api2,
@@ -79,11 +80,17 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     // inner editor
     this.updating = false;
     this.updateLanguage();
+    this.updateWordWrap(node);
+    this.updateProseMirrorDecorations(innerDecorations);
   }
   return _createClass(CodeBlockAdvancedNodeView, [{
     key: "destroy",
     value: function destroy() {
       var _this$cleanupDisabled;
+      // ED-27428: CodeMirror gets into an infinite loop as it detects mutations on removed
+      // decorations. When we change the breakout we destroy the node and cleanup these decorations from
+      // codemirror
+      this.clearProseMirrorDecorations();
       (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 || _this$cleanupDisabled.call(this);
     }
   }, {
@@ -195,6 +202,18 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       });
       this.updating = false;
     }
+  }, {
+    key: "clearProseMirrorDecorations",
+    value: function clearProseMirrorDecorations() {
+      this.updating = true;
+      var computedFacet = this.pmFacet.compute([], function () {
+        return DecorationSet.empty;
+      });
+      this.cm.dispatch({
+        effects: this.pmDecorationsCompartment.reconfigure(computedFacet)
+      });
+      this.updating = false;
+    }
   }, {
     key: "stopEvent",
     value: function stopEvent(e) {
@@ -227,7 +246,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   }]);
 }();
 export var getCodeBlockAdvancedNodeView = function getCodeBlockAdvancedNodeView(props) {
-  return function (node, view, getPos) {
-    return new CodeBlockAdvancedNodeView(node, view, getPos, props);
+  return function (node, view, getPos, innerDecorations) {
+    return new CodeBlockAdvancedNodeView(node, view, getPos, innerDecorations, props);
   };
 };

package/dist/esm/nodeviews/languages/languageMap.js

@@ -1,4 +1,4 @@
-import { LanguageDescription } from '@codemirror/language';
+import { LanguageDescription, LanguageSupport } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 // getLanguageIdentifier defines `language.alias[0]`
 export var mapLanguageToCodeMirror = function mapLanguageToCodeMirror(language) {
@@ -58,6 +58,16 @@ export var mapLanguageToCodeMirror = function mapLanguageToCodeMirror(language)
       return languages.find(function (l) {
         return l.name === 'VB.NET';
       });
+    case 'handlebars':
+      return LanguageDescription.of({
+        name: 'Handlebars',
+        load: function load() {
+          return import( /* webpackChunkName: "@atlaskit-internal_@atlaskit/editor-plugin-code-block-advanced-lang-handlebars" */
+          '@xiechao/codemirror-lang-handlebars').then(function (m) {
+            return new LanguageSupport(m.handlebarsLanguage);
+          });
+        }
+      });
     case 'elixir':
       return LanguageDescription.of({
         name: 'Elixir',

package/dist/esm/nodeviews/lazyCodeBlockAdvanced.js

@@ -1,17 +1,35 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
 export var lazyCodeBlockView = function lazyCodeBlockView(props) {
   return withLazyLoading({
     nodeName: 'codeBlock',
     getNodeViewOptions: function getNodeViewOptions() {},
-    loader: function loader() {
-      var result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-advanced-nodeview" */
-      './codeBlockAdvanced').then(function (_ref) {
-        var getCodeBlockAdvancedNodeView = _ref.getCodeBlockAdvancedNodeView;
-        return function (node, view, getPos) {
-          return getCodeBlockAdvancedNodeView(props)(node, view, getPos);
-        };
-      });
-      return result;
-    }
+    loader: function () {
+      var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var _yield$import, getCodeBlockAdvancedNodeView;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-advanced-nodeview" */
+              './codeBlockAdvanced');
+            case 2:
+              _yield$import = _context.sent;
+              getCodeBlockAdvancedNodeView = _yield$import.getCodeBlockAdvancedNodeView;
+              return _context.abrupt("return", function (node, view, getPos, _decs, _nodeViewOptions, innerDecorations) {
+                return getCodeBlockAdvancedNodeView(props)(node, view, getPos, innerDecorations);
+              });
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function loader() {
+        return _loader.apply(this, arguments);
+      }
+      return loader;
+    }()
   });
 };

package/dist/esm/pm-plugins/main.js

@@ -1,10 +1,24 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { lazyCodeBlockView } from '../nodeviews/lazyCodeBlockAdvanced';
+import { shiftArrowDownWorkaround, shiftArrowUpWorkaround } from './shiftArrowKeyWorkaround';
 export var createPlugin = function createPlugin(props) {
   return new SafePlugin({
     props: {
       nodeViews: {
         codeBlock: lazyCodeBlockView(props)
+      },
+      // Custom selection behaviour to fix issues with codeblocks with Shift + Arrow{Up || Down}
+      // These issues are also present in the prosemirror codemirror example and @marijnh suggests to
+      // use custom event handlers: https://github.com/ProseMirror/website/issues/83
+      handleKeyDown: function handleKeyDown(view, event) {
+        if (!(event instanceof KeyboardEvent)) {
+          return false;
+        }
+        if (event.key === 'ArrowUp' && event.shiftKey) {
+          return shiftArrowUpWorkaround(view, event);
+        } else if (event.key === 'ArrowDown' && event.shiftKey) {
+          return shiftArrowDownWorkaround(view, event);
+        }
       }
     }
   });

package/dist/esm/pm-plugins/shiftArrowKeyWorkaround.js

@@ -0,0 +1,49 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export var shiftArrowUpWorkaround = function shiftArrowUpWorkaround(view, event) {
+  var _doc$resolve$nodeBefo;
+  var _view$state = view.state,
+    doc = _view$state.doc,
+    _view$state$selection = _view$state.selection,
+    $head = _view$state$selection.$head,
+    $anchor = _view$state$selection.$anchor,
+    tr = _view$state.tr,
+    codeBlock = _view$state.schema.nodes.codeBlock;
+
+  // Position we want to check (directly after our current position)
+  var pos = Math.max($head.pos - 1, 1);
+  var isNodeBefore = ((_doc$resolve$nodeBefo = doc.resolve(pos).nodeBefore) === null || _doc$resolve$nodeBefo === void 0 ? void 0 : _doc$resolve$nodeBefo.type) === codeBlock;
+  var maybeProblematicNode = isNodeBefore ? doc.resolve(pos).nodeBefore : doc.resolve(pos).node();
+  if ((maybeProblematicNode === null || maybeProblematicNode === void 0 ? void 0 : maybeProblematicNode.type) === codeBlock) {
+    var nodeSize = maybeProblematicNode.nodeSize;
+    var startPos = isNodeBefore ? pos : $head.pos;
+    tr.setSelection(TextSelection.create(doc, $anchor.pos, Math.max(startPos - nodeSize, 0)));
+    view.dispatch(tr);
+    event.preventDefault();
+    return true;
+  }
+  return false;
+};
+export var shiftArrowDownWorkaround = function shiftArrowDownWorkaround(view, event) {
+  var _doc$resolve$nodeAfte;
+  var _view$state2 = view.state,
+    doc = _view$state2.doc,
+    _view$state2$selectio = _view$state2.selection,
+    $head = _view$state2$selectio.$head,
+    $anchor = _view$state2$selectio.$anchor,
+    tr = _view$state2.tr,
+    codeBlock = _view$state2.schema.nodes.codeBlock;
+
+  // Position we want to check (directly after our current position)
+  var pos = $head.pos + 1;
+  var isNodeAfter = ((_doc$resolve$nodeAfte = doc.resolve(pos).nodeAfter) === null || _doc$resolve$nodeAfte === void 0 ? void 0 : _doc$resolve$nodeAfte.type) === codeBlock;
+  var maybeProblematicNode = isNodeAfter ? doc.resolve(pos).nodeAfter : doc.resolve(pos).node();
+  if ((maybeProblematicNode === null || maybeProblematicNode === void 0 ? void 0 : maybeProblematicNode.type) === codeBlock) {
+    var nodeSize = maybeProblematicNode.nodeSize;
+    var startPos = isNodeAfter ? pos : $head.pos;
+    tr.setSelection(TextSelection.create(doc, $anchor.pos, Math.min(startPos + nodeSize, doc.content.size)));
+    view.dispatch(tr);
+    event.preventDefault();
+    return true;
+  }
+  return false;
+};

package/dist/types/nodeviews/codeBlockAdvanced.d.ts

@@ -24,7 +24,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private cleanupDisabledState;
     private languageLoader;
     private pmFacet;
-    constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, config: ConfigProps);
+    constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, innerDecorations: DecorationSource, config: ConfigProps);
     destroy(): void;
     forwardUpdate(update: ViewUpdate): void;
     setSelection(anchor: number, head: number): void;
@@ -40,7 +40,8 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
      * This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
      */
     private updateProseMirrorDecorations;
+    private clearProseMirrorDecorations;
     stopEvent(e: Event): boolean;
 }
-export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler) => CodeBlockAdvancedNodeView;
+export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler, innerDecorations: DecorationSource) => CodeBlockAdvancedNodeView;
 export {};

package/dist/types/pm-plugins/shiftArrowKeyWorkaround.d.ts

@@ -0,0 +1,3 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const shiftArrowUpWorkaround: (view: EditorView, event: KeyboardEvent) => boolean;
+export declare const shiftArrowDownWorkaround: (view: EditorView, event: KeyboardEvent) => boolean;

package/dist/types-ts4.5/nodeviews/codeBlockAdvanced.d.ts

@@ -24,7 +24,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private cleanupDisabledState;
     private languageLoader;
     private pmFacet;
-    constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, config: ConfigProps);
+    constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, innerDecorations: DecorationSource, config: ConfigProps);
     destroy(): void;
     forwardUpdate(update: ViewUpdate): void;
     setSelection(anchor: number, head: number): void;
@@ -40,7 +40,8 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
      * This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
      */
     private updateProseMirrorDecorations;
+    private clearProseMirrorDecorations;
     stopEvent(e: Event): boolean;
 }
-export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler) => CodeBlockAdvancedNodeView;
+export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler, innerDecorations: DecorationSource) => CodeBlockAdvancedNodeView;
 export {};

package/dist/types-ts4.5/pm-plugins/shiftArrowKeyWorkaround.d.ts

@@ -0,0 +1,3 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const shiftArrowUpWorkaround: (view: EditorView, event: KeyboardEvent) => boolean;
+export declare const shiftArrowDownWorkaround: (view: EditorView, event: KeyboardEvent) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "2.1.3",
+	"version": "2.2.0",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,14 +33,14 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^102.0.0",
-		"@atlaskit/editor-plugin-code-block": "^4.1.0",
+		"@atlaskit/editor-common": "^102.19.0",
+		"@atlaskit/editor-plugin-code-block": "^4.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-find-replace": "^2.0.0",
-		"@atlaskit/editor-plugin-selection": "^2.0.0",
-		"@atlaskit/editor-plugin-selection-marker": "^2.0.0",
+		"@atlaskit/editor-plugin-selection": "^2.1.0",
+		"@atlaskit/editor-plugin-selection-marker": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/tokens": "^4.3.0",
+		"@atlaskit/tokens": "^4.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/autocomplete": "6.18.4",
 		"@codemirror/commands": "6.7.1",
@@ -49,6 +49,7 @@
 		"@codemirror/state": "6.5.1",
 		"@codemirror/view": "6.36.2",
 		"@lezer/highlight": "1.2.1",
+		"@xiechao/codemirror-lang-handlebars": "^1.0.4",
 		"cm6-graphql": "0.2.0",
 		"codemirror-lang-elixir": "4.0.0"
 	},
@@ -56,7 +57,7 @@
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@atlaskit/code": "^16.0.0",
+		"@atlaskit/code": "^17.0.0",
 		"typescript": "~5.4.2"
 	},
 	"techstack": {

package/src/nodeviews/codeBlockAdvanced.ts

@@ -19,6 +19,7 @@ import type {
 	EditorView,
 	NodeView,
 } from '@atlaskit/editor-prosemirror/view';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
@@ -54,7 +55,13 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	private languageLoader: LanguageLoader;
 	private pmFacet = Facet.define<DecorationSource>();
 
-	constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, config: ConfigProps) {
+	constructor(
+		node: PMNode,
+		view: EditorView,
+		getPos: getPosHandlerNode,
+		innerDecorations: DecorationSource,
+		config: ConfigProps,
+	) {
 		this.node = node;
 		this.view = view;
 		this.getPos = getPos;
@@ -110,9 +117,15 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		// inner editor
 		this.updating = false;
 		this.updateLanguage();
+		this.updateWordWrap(node);
+		this.updateProseMirrorDecorations(innerDecorations);
 	}
 
 	destroy() {
+		// ED-27428: CodeMirror gets into an infinite loop as it detects mutations on removed
+		// decorations. When we change the breakout we destroy the node and cleanup these decorations from
+		// codemirror
+		this.clearProseMirrorDecorations();
 		this.cleanupDisabledState?.();
 	}
 
@@ -214,6 +227,15 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		this.updating = false;
 	}
 
+	private clearProseMirrorDecorations() {
+		this.updating = true;
+		const computedFacet = this.pmFacet.compute([], () => DecorationSet.empty);
+		this.cm.dispatch({
+			effects: this.pmDecorationsCompartment.reconfigure(computedFacet),
+		});
+		this.updating = false;
+	}
+
 	stopEvent(e: Event) {
 		if (e instanceof MouseEvent && e.type === 'mousedown') {
 			// !Warning: Side effect!
@@ -247,6 +269,17 @@ class CodeBlockAdvancedNodeView implements NodeView {
 
 export const getCodeBlockAdvancedNodeView =
 	(props: ConfigProps) =>
-	(node: PMNode, view: EditorView, getPos: getPosHandler): CodeBlockAdvancedNodeView => {
-		return new CodeBlockAdvancedNodeView(node, view, getPos as getPosHandlerNode, props);
+	(
+		node: PMNode,
+		view: EditorView,
+		getPos: getPosHandler,
+		innerDecorations: DecorationSource,
+	): CodeBlockAdvancedNodeView => {
+		return new CodeBlockAdvancedNodeView(
+			node,
+			view,
+			getPos as getPosHandlerNode,
+			innerDecorations,
+			props,
+		);
 	};

package/src/nodeviews/languages/languageMap.ts

@@ -1,4 +1,4 @@
-import { LanguageDescription } from '@codemirror/language';
+import { LanguageDescription, LanguageSupport } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 
 import type { LanguageAlias } from '@atlaskit/code';
@@ -63,6 +63,16 @@ export const mapLanguageToCodeMirror = (language: LanguageAliasValue) => {
 			return languages.find((l) => {
 				return l.name === 'VB.NET';
 			});
+		case 'handlebars':
+			return LanguageDescription.of({
+				name: 'Handlebars',
+				load() {
+					return import(
+						/* webpackChunkName: "@atlaskit-internal_@atlaskit/editor-plugin-code-block-advanced-lang-handlebars" */
+						'@xiechao/codemirror-lang-handlebars'
+					).then((m) => new LanguageSupport(m.handlebarsLanguage));
+				},
+			});
 		case 'elixir':
 			return LanguageDescription.of({
 				name: 'Elixir',

package/src/nodeviews/lazyCodeBlockAdvanced.ts

@@ -3,7 +3,7 @@ import { Extension } from '@codemirror/state';
 import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView, DecorationSource, Decoration } from '@atlaskit/editor-prosemirror/view';
 
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 
@@ -16,16 +16,19 @@ export const lazyCodeBlockView = (props: Props) => {
 	return withLazyLoading({
 		nodeName: 'codeBlock',
 		getNodeViewOptions: () => {},
-		loader: () => {
-			const result = import(
+		loader: async () => {
+			const { getCodeBlockAdvancedNodeView } = await import(
 				/* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-advanced-nodeview" */
 				'./codeBlockAdvanced'
-			).then(({ getCodeBlockAdvancedNodeView }) => {
-				return (node: PMNode, view: EditorView, getPos: () => number | undefined) => {
-					return getCodeBlockAdvancedNodeView(props)(node, view, getPos);
-				};
-			});
-			return result;
+			);
+			return (
+				node: PMNode,
+				view: EditorView,
+				getPos: () => number | undefined,
+				_decs: readonly Decoration[],
+				_nodeViewOptions: () => void,
+				innerDecorations: DecorationSource,
+			) => getCodeBlockAdvancedNodeView(props)(node, view, getPos, innerDecorations);
 		},
 	});
 };

package/src/pm-plugins/main.ts

@@ -2,10 +2,13 @@ import type { Extension } from '@codemirror/state';
 
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 import { lazyCodeBlockView } from '../nodeviews/lazyCodeBlockAdvanced';
 
+import { shiftArrowDownWorkaround, shiftArrowUpWorkaround } from './shiftArrowKeyWorkaround';
+
 interface Props {
 	api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
 	extensions: Extension[];
@@ -17,6 +20,20 @@ export const createPlugin = (props: Props) => {
 			nodeViews: {
 				codeBlock: lazyCodeBlockView(props),
 			},
+			// Custom selection behaviour to fix issues with codeblocks with Shift + Arrow{Up || Down}
+			// These issues are also present in the prosemirror codemirror example and @marijnh suggests to
+			// use custom event handlers: https://github.com/ProseMirror/website/issues/83
+			handleKeyDown(view: EditorView, event: KeyboardEvent) {
+				if (!(event instanceof KeyboardEvent)) {
+					return false;
+				}
+
+				if (event.key === 'ArrowUp' && event.shiftKey) {
+					return shiftArrowUpWorkaround(view, event);
+				} else if (event.key === 'ArrowDown' && event.shiftKey) {
+					return shiftArrowDownWorkaround(view, event);
+				}
+			},
 		},
 	});
 };

package/src/pm-plugins/shiftArrowKeyWorkaround.ts

@@ -0,0 +1,58 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+
+export const shiftArrowUpWorkaround = (view: EditorView, event: KeyboardEvent) => {
+	const {
+		doc,
+		selection: { $head, $anchor },
+		tr,
+		schema: {
+			nodes: { codeBlock },
+		},
+	} = view.state;
+
+	// Position we want to check (directly after our current position)
+	const pos = Math.max($head.pos - 1, 1);
+	const isNodeBefore = doc.resolve(pos).nodeBefore?.type === codeBlock;
+	const maybeProblematicNode = isNodeBefore ? doc.resolve(pos).nodeBefore : doc.resolve(pos).node();
+
+	if (maybeProblematicNode?.type === codeBlock) {
+		const nodeSize = maybeProblematicNode.nodeSize;
+		const startPos = isNodeBefore ? pos : $head.pos;
+
+		tr.setSelection(TextSelection.create(doc, $anchor.pos, Math.max(startPos - nodeSize, 0)));
+		view.dispatch(tr);
+		event.preventDefault();
+		return true;
+	}
+	return false;
+};
+
+export const shiftArrowDownWorkaround = (view: EditorView, event: KeyboardEvent) => {
+	const {
+		doc,
+		selection: { $head, $anchor },
+		tr,
+		schema: {
+			nodes: { codeBlock },
+		},
+	} = view.state;
+
+	// Position we want to check (directly after our current position)
+	const pos = $head.pos + 1;
+	const isNodeAfter = doc.resolve(pos).nodeAfter?.type === codeBlock;
+	const maybeProblematicNode = isNodeAfter ? doc.resolve(pos).nodeAfter : doc.resolve(pos).node();
+
+	if (maybeProblematicNode?.type === codeBlock) {
+		const nodeSize = maybeProblematicNode.nodeSize;
+		const startPos = isNodeAfter ? pos : $head.pos;
+
+		tr.setSelection(
+			TextSelection.create(doc, $anchor.pos, Math.min(startPos + nodeSize, doc.content.size)),
+		);
+		view.dispatch(tr);
+		event.preventDefault();
+		return true;
+	}
+	return false;
+};