@atlaskit/editor-plugin-code-block-advanced 2.2.8 → 2.2.9

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 2.2.9
+
+### Patch Changes
+
+- [#156363](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156363)
+  [`fa74bacdec758`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fa74bacdec758) -
+  Reduce number of codemirror transactions fired for performance.
+- Updated dependencies
+
 ## 2.2.8
 
 ### Patch Changes

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -62,7 +62,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     });
     this.cm = new _view.EditorView({
       doc: this.node.textContent,
-      extensions: [].concat((0, _toConsumableArray2.default)(config.extensions), [this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), this.pmDecorationsCompartment.of([]), (0, _keymap.keymapExtension)({
+      extensions: [].concat((0, _toConsumableArray2.default)(config.extensions), [this.lineWrappingCompartment.of((0, _codeBlock.isCodeBlockWordWrapEnabled)(node) ? _view.EditorView.lineWrapping : []), this.languageCompartment.of([]), this.pmDecorationsCompartment.of(this.pmFacet.compute([], function () {
+        return innerDecorations;
+      })), (0, _keymap.keymapExtension)({
         view: view,
         getPos: getPos,
         getNode: getNode,
@@ -96,8 +98,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     // inner editor
     this.updating = false;
     this.updateLanguage();
-    this.updateWordWrap(node);
-    this.updateProseMirrorDecorations(innerDecorations);
+    this.wordWrappingEnabled = (0, _codeBlock.isCodeBlockWordWrapEnabled)(node);
   }
   return (0, _createClass2.default)(CodeBlockAdvancedNodeView, [{
     key: "destroy",
@@ -167,26 +168,21 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       }
     }
   }, {
-    key: "updateWordWrap",
-    value: function updateWordWrap(node) {
+    key: "getWordWrapEffects",
+    value: function getWordWrapEffects(node) {
       if (this.wordWrappingEnabled !== (0, _codeBlock.isCodeBlockWordWrapEnabled)(node)) {
-        this.updating = true;
-        this.cm.dispatch({
-          effects: [this.lineWrappingCompartment.reconfigure((0, _codeBlock.isCodeBlockWordWrapEnabled)(node) ? _view.EditorView.lineWrapping : [])]
-        });
-        this.updating = false;
         this.wordWrappingEnabled = !this.wordWrappingEnabled;
+        return this.lineWrappingCompartment.reconfigure((0, _codeBlock.isCodeBlockWordWrapEnabled)(node) ? _view.EditorView.lineWrapping : []);
       }
+      return undefined;
     }
   }, {
     key: "update",
     value: function update(node, _, innerDecorations) {
-      var _this2 = this;
       this.maybeTryingToReachNodeSelection = false;
       if (node.type !== this.node.type) {
         return false;
       }
-      this.updateWordWrap(node);
       this.node = node;
       if (this.updating) {
         return true;
@@ -194,12 +190,21 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       this.updateLanguage();
       var newText = node.textContent,
         curText = this.cm.state.doc.toString();
-      (0, _updateCMSelection.updateCMSelection)(curText, newText, function (tr) {
-        _this2.updating = true;
-        _this2.cm.dispatch(tr);
-        _this2.updating = false;
-      });
-      this.updateProseMirrorDecorations(innerDecorations);
+
+      // Updates bundled for performance (to avoid multiple-dispatches)
+      var changes = (0, _updateCMSelection.getCMSelectionChanges)(curText, newText);
+      var wordWrapEffect = this.getWordWrapEffects(node);
+      var prosemirrorDecorationsEffect = this.getProseMirrorDecorationEffects(innerDecorations);
+      if (changes || wordWrapEffect || prosemirrorDecorationsEffect) {
+        this.updating = true;
+        this.cm.dispatch({
+          effects: [wordWrapEffect, prosemirrorDecorationsEffect].filter(function (effect) {
+            return !!effect;
+          }),
+          changes: changes
+        });
+        this.updating = false;
+      }
       return true;
     }
 
@@ -207,18 +212,16 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
      * Updates a facet which stores information on the prosemirror decorations
      *
      * This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
+     * @param decorationSource
+     * @example
      */
   }, {
-    key: "updateProseMirrorDecorations",
-    value: function updateProseMirrorDecorations(decorationSource) {
-      this.updating = true;
+    key: "getProseMirrorDecorationEffects",
+    value: function getProseMirrorDecorationEffects(decorationSource) {
       var computedFacet = this.pmFacet.compute([], function () {
         return decorationSource;
       });
-      this.cm.dispatch({
-        effects: this.pmDecorationsCompartment.reconfigure(computedFacet)
-      });
-      this.updating = false;
+      return this.pmDecorationsCompartment.reconfigure(computedFacet);
     }
   }, {
     key: "clearProseMirrorDecorations",
@@ -235,7 +238,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   }, {
     key: "stopEvent",
     value: function stopEvent(e) {
-      var _this3 = this,
+      var _this2 = this,
         _this$getPos5;
       if (e instanceof MouseEvent && e.type === 'mousedown') {
         // !Warning: Side effect!
@@ -246,13 +249,13 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         setTimeout(function () {
           // Ensure the CM selection is reset - if we have a ranged selection when we do node selection can
           // cause funky behaviour
-          _this3.updating = true;
-          _this3.cm.dispatch({
+          _this2.updating = true;
+          _this2.cm.dispatch({
             selection: _state.EditorSelection.create([_state.EditorSelection.cursor(0)], 0)
           });
-          _this3.updating = false;
-          _this3.selectCodeBlockNode(undefined);
-          _this3.view.focus();
+          _this2.updating = false;
+          _this2.selectCodeBlockNode(undefined);
+          _this2.view.focus();
         }, 20);
       }
       // If we have selected the node we should not stop these events

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateCMSelection = void 0;
+exports.getCMSelectionChanges = void 0;
 /**
  *
  * Compares the updated text with the current to determine the transaction to fire
@@ -11,9 +11,9 @@ exports.updateCMSelection = void 0;
  *
  * @param curText string - the current CodeMirror text
  * @param newText string - the new CodeMirror text
- * @param updateCallback Callback to process the CodeMirror transaction
+ * @returns The changes or undefined if no change
  */
-var updateCMSelection = exports.updateCMSelection = function updateCMSelection(curText, newText, updateCallback) {
+var getCMSelectionChanges = exports.getCMSelectionChanges = function getCMSelectionChanges(curText, newText) {
   if (newText !== curText) {
     var start = 0,
       curEnd = curText.length,
@@ -25,12 +25,10 @@ var updateCMSelection = exports.updateCMSelection = function updateCMSelection(c
       curEnd--;
       newEnd--;
     }
-    updateCallback({
-      changes: {
-        from: start,
-        to: curEnd,
-        insert: newText.slice(start, newEnd)
-      }
-    });
+    return {
+      from: start,
+      to: curEnd,
+      insert: newText.slice(start, newEnd)
+    };
   }
 };

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

@@ -10,6 +10,7 @@ var _view = require("@codemirror/view");
  *
  * @param api
  * @returns CodeMirror Extension
+ * @example
  */
 var manageSelectionMarker = exports.manageSelectionMarker = function manageSelectionMarker(api) {
   var decoHide;

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

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LanguageLoader = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -23,35 +25,65 @@ var LanguageLoader = exports.LanguageLoader = /*#__PURE__*/function () {
   }
   return (0, _createClass2.default)(LanguageLoader, [{
     key: "updateLanguage",
-    value: function updateLanguage(languageName) {
-      var _this = this;
-      if (languageName === this.languageName) {
-        return;
-      }
-      var language = (0, _languageMap.mapLanguageToCodeMirror)(languageName);
-      var configureEmpty = function configureEmpty() {
-        _this.updateLanguageCompartment([]);
-        _this.languageName = '';
-      };
-      if (!language) {
-        configureEmpty();
-        return;
-      }
-      language.load().then(function (lang) {
-        if (lang) {
-          var styling = (0, _syntaxHighlightingTheme.languageStyling)(lang.language);
-          if (styling) {
-            _this.updateLanguageCompartment([lang, (0, _language.syntaxHighlighting)(styling)]);
-          } else {
-            _this.updateLanguageCompartment(lang);
+    value: function () {
+      var _updateLanguage = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(languageName) {
+        var _this = this;
+        var language, configureEmpty, lang, styling;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!(languageName === this.languageName)) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return");
+            case 2:
+              language = (0, _languageMap.mapLanguageToCodeMirror)(languageName);
+              configureEmpty = function configureEmpty() {
+                if (_this.languageName) {
+                  _this.updateLanguageCompartment([]);
+                }
+                _this.languageName = '';
+              };
+              if (language) {
+                _context.next = 7;
+                break;
+              }
+              configureEmpty();
+              return _context.abrupt("return");
+            case 7:
+              _context.prev = 7;
+              _context.next = 10;
+              return language.load();
+            case 10:
+              lang = _context.sent;
+              if (lang) {
+                styling = (0, _syntaxHighlightingTheme.languageStyling)(lang.language);
+                if (styling) {
+                  this.updateLanguageCompartment([lang, (0, _language.syntaxHighlighting)(styling)]);
+                } else {
+                  this.updateLanguageCompartment(lang);
+                }
+                this.languageName = languageName;
+              } else {
+                configureEmpty();
+              }
+              _context.next = 17;
+              break;
+            case 14:
+              _context.prev = 14;
+              _context.t0 = _context["catch"](7);
+              configureEmpty();
+            case 17:
+            case "end":
+              return _context.stop();
           }
-          _this.languageName = languageName;
-        } else {
-          configureEmpty();
-        }
-      }).catch(function () {
-        configureEmpty();
-      });
-    }
+        }, _callee, this, [[7, 14]]);
+      }));
+      function updateLanguage(_x) {
+        return _updateLanguage.apply(this, arguments);
+      }
+      return updateLanguage;
+    }()
   }]);
 }();

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -10,7 +10,7 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
 import { cmTheme } from '../ui/theme';
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
-import { updateCMSelection } from './codemirrorSync/updateCMSelection';
+import { getCMSelectionChanges } from './codemirrorSync/updateCMSelection';
 import { keymapExtension } from './extensions/keymap';
 import { manageSelectionMarker } from './extensions/manageSelectionMarker';
 import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
@@ -44,7 +44,7 @@ class CodeBlockAdvancedNodeView {
     });
     this.cm = new CodeMirror({
       doc: this.node.textContent,
-      extensions: [...config.extensions, this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), this.pmDecorationsCompartment.of([]), keymapExtension({
+      extensions: [...config.extensions, this.lineWrappingCompartment.of(isCodeBlockWordWrapEnabled(node) ? CodeMirror.lineWrapping : []), this.languageCompartment.of([]), this.pmDecorationsCompartment.of(this.pmFacet.compute([], () => innerDecorations)), keymapExtension({
         view,
         getPos,
         getNode,
@@ -76,8 +76,7 @@ class CodeBlockAdvancedNodeView {
     // inner editor
     this.updating = false;
     this.updateLanguage();
-    this.updateWordWrap(node);
-    this.updateProseMirrorDecorations(innerDecorations);
+    this.wordWrappingEnabled = isCodeBlockWordWrapEnabled(node);
   }
   destroy() {
     var _this$cleanupDisabled;
@@ -134,22 +133,18 @@ class CodeBlockAdvancedNodeView {
       this.view.dispatch(tr);
     }
   }
-  updateWordWrap(node) {
+  getWordWrapEffects(node) {
     if (this.wordWrappingEnabled !== isCodeBlockWordWrapEnabled(node)) {
-      this.updating = true;
-      this.cm.dispatch({
-        effects: [this.lineWrappingCompartment.reconfigure(isCodeBlockWordWrapEnabled(node) ? CodeMirror.lineWrapping : [])]
-      });
-      this.updating = false;
       this.wordWrappingEnabled = !this.wordWrappingEnabled;
+      return this.lineWrappingCompartment.reconfigure(isCodeBlockWordWrapEnabled(node) ? CodeMirror.lineWrapping : []);
     }
+    return undefined;
   }
   update(node, _, innerDecorations) {
     this.maybeTryingToReachNodeSelection = false;
     if (node.type !== this.node.type) {
       return false;
     }
-    this.updateWordWrap(node);
     this.node = node;
     if (this.updating) {
       return true;
@@ -157,12 +152,19 @@ class CodeBlockAdvancedNodeView {
     this.updateLanguage();
     const newText = node.textContent,
       curText = this.cm.state.doc.toString();
-    updateCMSelection(curText, newText, tr => {
+
+    // Updates bundled for performance (to avoid multiple-dispatches)
+    const changes = getCMSelectionChanges(curText, newText);
+    const wordWrapEffect = this.getWordWrapEffects(node);
+    const prosemirrorDecorationsEffect = this.getProseMirrorDecorationEffects(innerDecorations);
+    if (changes || wordWrapEffect || prosemirrorDecorationsEffect) {
       this.updating = true;
-      this.cm.dispatch(tr);
+      this.cm.dispatch({
+        effects: [wordWrapEffect, prosemirrorDecorationsEffect].filter(effect => !!effect),
+        changes
+      });
       this.updating = false;
-    });
-    this.updateProseMirrorDecorations(innerDecorations);
+    }
     return true;
   }
 
@@ -170,14 +172,12 @@ class CodeBlockAdvancedNodeView {
    * Updates a facet which stores information on the prosemirror decorations
    *
    * This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
+   * @param decorationSource
+   * @example
    */
-  updateProseMirrorDecorations(decorationSource) {
-    this.updating = true;
+  getProseMirrorDecorationEffects(decorationSource) {
     const computedFacet = this.pmFacet.compute([], () => decorationSource);
-    this.cm.dispatch({
-      effects: this.pmDecorationsCompartment.reconfigure(computedFacet)
-    });
-    this.updating = false;
+    return this.pmDecorationsCompartment.reconfigure(computedFacet);
   }
   clearProseMirrorDecorations() {
     this.updating = true;

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

@@ -5,9 +5,9 @@
  *
  * @param curText string - the current CodeMirror text
  * @param newText string - the new CodeMirror text
- * @param updateCallback Callback to process the CodeMirror transaction
+ * @returns The changes or undefined if no change
  */
-export const updateCMSelection = (curText, newText, updateCallback) => {
+export const getCMSelectionChanges = (curText, newText) => {
   if (newText !== curText) {
     let start = 0,
       curEnd = curText.length,
@@ -19,12 +19,10 @@ export const updateCMSelection = (curText, newText, updateCallback) => {
       curEnd--;
       newEnd--;
     }
-    updateCallback({
-      changes: {
-        from: start,
-        to: curEnd,
-        insert: newText.slice(start, newEnd)
-      }
-    });
+    return {
+      from: start,
+      to: curEnd,
+      insert: newText.slice(start, newEnd)
+    };
   }
 };

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

@@ -4,6 +4,7 @@ import { EditorView as CodeMirror } from '@codemirror/view';
  *
  * @param api
  * @returns CodeMirror Extension
+ * @example
  */
 export const manageSelectionMarker = api => {
   let decoHide;

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

@@ -12,20 +12,23 @@ export class LanguageLoader {
     _defineProperty(this, "languageName", '');
     this.updateLanguageCompartment = updateLanguageCompartment;
   }
-  updateLanguage(languageName) {
+  async updateLanguage(languageName) {
     if (languageName === this.languageName) {
       return;
     }
     const language = mapLanguageToCodeMirror(languageName);
     const configureEmpty = () => {
-      this.updateLanguageCompartment([]);
+      if (this.languageName) {
+        this.updateLanguageCompartment([]);
+      }
       this.languageName = '';
     };
     if (!language) {
       configureEmpty();
       return;
     }
-    language.load().then(lang => {
+    try {
+      const lang = await language.load();
       if (lang) {
         const styling = languageStyling(lang.language);
         if (styling) {
@@ -37,8 +40,8 @@ export class LanguageLoader {
       } else {
         configureEmpty();
       }
-    }).catch(() => {
+    } catch (e) {
       configureEmpty();
-    });
+    }
   }
 }

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -13,7 +13,7 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
 import { cmTheme } from '../ui/theme';
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
-import { updateCMSelection } from './codemirrorSync/updateCMSelection';
+import { getCMSelectionChanges } from './codemirrorSync/updateCMSelection';
 import { keymapExtension } from './extensions/keymap';
 import { manageSelectionMarker } from './extensions/manageSelectionMarker';
 import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
@@ -55,7 +55,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     });
     this.cm = new CodeMirror({
       doc: this.node.textContent,
-      extensions: [].concat(_toConsumableArray(config.extensions), [this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), this.pmDecorationsCompartment.of([]), keymapExtension({
+      extensions: [].concat(_toConsumableArray(config.extensions), [this.lineWrappingCompartment.of(isCodeBlockWordWrapEnabled(node) ? CodeMirror.lineWrapping : []), this.languageCompartment.of([]), this.pmDecorationsCompartment.of(this.pmFacet.compute([], function () {
+        return innerDecorations;
+      })), keymapExtension({
         view: view,
         getPos: getPos,
         getNode: getNode,
@@ -89,8 +91,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     // inner editor
     this.updating = false;
     this.updateLanguage();
-    this.updateWordWrap(node);
-    this.updateProseMirrorDecorations(innerDecorations);
+    this.wordWrappingEnabled = isCodeBlockWordWrapEnabled(node);
   }
   return _createClass(CodeBlockAdvancedNodeView, [{
     key: "destroy",
@@ -160,26 +161,21 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       }
     }
   }, {
-    key: "updateWordWrap",
-    value: function updateWordWrap(node) {
+    key: "getWordWrapEffects",
+    value: function getWordWrapEffects(node) {
       if (this.wordWrappingEnabled !== isCodeBlockWordWrapEnabled(node)) {
-        this.updating = true;
-        this.cm.dispatch({
-          effects: [this.lineWrappingCompartment.reconfigure(isCodeBlockWordWrapEnabled(node) ? CodeMirror.lineWrapping : [])]
-        });
-        this.updating = false;
         this.wordWrappingEnabled = !this.wordWrappingEnabled;
+        return this.lineWrappingCompartment.reconfigure(isCodeBlockWordWrapEnabled(node) ? CodeMirror.lineWrapping : []);
       }
+      return undefined;
     }
   }, {
     key: "update",
     value: function update(node, _, innerDecorations) {
-      var _this2 = this;
       this.maybeTryingToReachNodeSelection = false;
       if (node.type !== this.node.type) {
         return false;
       }
-      this.updateWordWrap(node);
       this.node = node;
       if (this.updating) {
         return true;
@@ -187,12 +183,21 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       this.updateLanguage();
       var newText = node.textContent,
         curText = this.cm.state.doc.toString();
-      updateCMSelection(curText, newText, function (tr) {
-        _this2.updating = true;
-        _this2.cm.dispatch(tr);
-        _this2.updating = false;
-      });
-      this.updateProseMirrorDecorations(innerDecorations);
+
+      // Updates bundled for performance (to avoid multiple-dispatches)
+      var changes = getCMSelectionChanges(curText, newText);
+      var wordWrapEffect = this.getWordWrapEffects(node);
+      var prosemirrorDecorationsEffect = this.getProseMirrorDecorationEffects(innerDecorations);
+      if (changes || wordWrapEffect || prosemirrorDecorationsEffect) {
+        this.updating = true;
+        this.cm.dispatch({
+          effects: [wordWrapEffect, prosemirrorDecorationsEffect].filter(function (effect) {
+            return !!effect;
+          }),
+          changes: changes
+        });
+        this.updating = false;
+      }
       return true;
     }
 
@@ -200,18 +205,16 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
      * Updates a facet which stores information on the prosemirror decorations
      *
      * This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
+     * @param decorationSource
+     * @example
      */
   }, {
-    key: "updateProseMirrorDecorations",
-    value: function updateProseMirrorDecorations(decorationSource) {
-      this.updating = true;
+    key: "getProseMirrorDecorationEffects",
+    value: function getProseMirrorDecorationEffects(decorationSource) {
       var computedFacet = this.pmFacet.compute([], function () {
         return decorationSource;
       });
-      this.cm.dispatch({
-        effects: this.pmDecorationsCompartment.reconfigure(computedFacet)
-      });
-      this.updating = false;
+      return this.pmDecorationsCompartment.reconfigure(computedFacet);
     }
   }, {
     key: "clearProseMirrorDecorations",
@@ -228,7 +231,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   }, {
     key: "stopEvent",
     value: function stopEvent(e) {
-      var _this3 = this,
+      var _this2 = this,
         _this$getPos5;
       if (e instanceof MouseEvent && e.type === 'mousedown') {
         // !Warning: Side effect!
@@ -239,13 +242,13 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         setTimeout(function () {
           // Ensure the CM selection is reset - if we have a ranged selection when we do node selection can
           // cause funky behaviour
-          _this3.updating = true;
-          _this3.cm.dispatch({
+          _this2.updating = true;
+          _this2.cm.dispatch({
             selection: EditorSelection.create([EditorSelection.cursor(0)], 0)
           });
-          _this3.updating = false;
-          _this3.selectCodeBlockNode(undefined);
-          _this3.view.focus();
+          _this2.updating = false;
+          _this2.selectCodeBlockNode(undefined);
+          _this2.view.focus();
         }, 20);
       }
       // If we have selected the node we should not stop these events

package/dist/esm/nodeviews/codemirrorSync/updateCMSelection.js

@@ -5,9 +5,9 @@
  *
  * @param curText string - the current CodeMirror text
  * @param newText string - the new CodeMirror text
- * @param updateCallback Callback to process the CodeMirror transaction
+ * @returns The changes or undefined if no change
  */
-export var updateCMSelection = function updateCMSelection(curText, newText, updateCallback) {
+export var getCMSelectionChanges = function getCMSelectionChanges(curText, newText) {
   if (newText !== curText) {
     var start = 0,
       curEnd = curText.length,
@@ -19,12 +19,10 @@ export var updateCMSelection = function updateCMSelection(curText, newText, upda
       curEnd--;
       newEnd--;
     }
-    updateCallback({
-      changes: {
-        from: start,
-        to: curEnd,
-        insert: newText.slice(start, newEnd)
-      }
-    });
+    return {
+      from: start,
+      to: curEnd,
+      insert: newText.slice(start, newEnd)
+    };
   }
 };

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

@@ -4,6 +4,7 @@ import { EditorView as CodeMirror } from '@codemirror/view';
  *
  * @param api
  * @returns CodeMirror Extension
+ * @example
  */
 export var manageSelectionMarker = function manageSelectionMarker(api) {
   var decoHide;

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

@@ -1,6 +1,8 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { syntaxHighlighting } from '@codemirror/language';
 import { languageStyling } from '../../ui/syntaxHighlightingTheme';
 import { mapLanguageToCodeMirror } from './languageMap';
@@ -17,35 +19,65 @@ export var LanguageLoader = /*#__PURE__*/function () {
   }
   return _createClass(LanguageLoader, [{
     key: "updateLanguage",
-    value: function updateLanguage(languageName) {
-      var _this = this;
-      if (languageName === this.languageName) {
-        return;
-      }
-      var language = mapLanguageToCodeMirror(languageName);
-      var configureEmpty = function configureEmpty() {
-        _this.updateLanguageCompartment([]);
-        _this.languageName = '';
-      };
-      if (!language) {
-        configureEmpty();
-        return;
-      }
-      language.load().then(function (lang) {
-        if (lang) {
-          var styling = languageStyling(lang.language);
-          if (styling) {
-            _this.updateLanguageCompartment([lang, syntaxHighlighting(styling)]);
-          } else {
-            _this.updateLanguageCompartment(lang);
+    value: function () {
+      var _updateLanguage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(languageName) {
+        var _this = this;
+        var language, configureEmpty, lang, styling;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!(languageName === this.languageName)) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return");
+            case 2:
+              language = mapLanguageToCodeMirror(languageName);
+              configureEmpty = function configureEmpty() {
+                if (_this.languageName) {
+                  _this.updateLanguageCompartment([]);
+                }
+                _this.languageName = '';
+              };
+              if (language) {
+                _context.next = 7;
+                break;
+              }
+              configureEmpty();
+              return _context.abrupt("return");
+            case 7:
+              _context.prev = 7;
+              _context.next = 10;
+              return language.load();
+            case 10:
+              lang = _context.sent;
+              if (lang) {
+                styling = languageStyling(lang.language);
+                if (styling) {
+                  this.updateLanguageCompartment([lang, syntaxHighlighting(styling)]);
+                } else {
+                  this.updateLanguageCompartment(lang);
+                }
+                this.languageName = languageName;
+              } else {
+                configureEmpty();
+              }
+              _context.next = 17;
+              break;
+            case 14:
+              _context.prev = 14;
+              _context.t0 = _context["catch"](7);
+              configureEmpty();
+            case 17:
+            case "end":
+              return _context.stop();
           }
-          _this.languageName = languageName;
-        } else {
-          configureEmpty();
-        }
-      }).catch(function () {
-        configureEmpty();
-      });
-    }
+        }, _callee, this, [[7, 14]]);
+      }));
+      function updateLanguage(_x) {
+        return _updateLanguage.apply(this, arguments);
+      }
+      return updateLanguage;
+    }()
   }]);
 }();

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

@@ -1,4 +1,4 @@
-import { Extension } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import { ViewUpdate } from '@codemirror/view';
 import type { getPosHandler, getPosHandlerNode, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
@@ -32,14 +32,16 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private updateLanguage;
     private selectCodeBlockNode;
     private wordWrappingEnabled;
-    private updateWordWrap;
+    private getWordWrapEffects;
     update(node: PMNode, _: readonly Decoration[], innerDecorations: DecorationSource): boolean;
     /**
      * Updates a facet which stores information on the prosemirror decorations
      *
      * This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
+     * @param decorationSource
+     * @example
      */
-    private updateProseMirrorDecorations;
+    private getProseMirrorDecorationEffects;
     private clearProseMirrorDecorations;
     stopEvent(e: Event): boolean;
 }

package/dist/types/nodeviews/codemirrorSync/updateCMSelection.d.ts

@@ -1,4 +1,4 @@
-import { TransactionSpec as CMTransactionSpec } from '@codemirror/state';
+import { ChangeSpec } from '@codemirror/state';
 /**
  *
  * Compares the updated text with the current to determine the transaction to fire
@@ -6,6 +6,6 @@ import { TransactionSpec as CMTransactionSpec } from '@codemirror/state';
  *
  * @param curText string - the current CodeMirror text
  * @param newText string - the new CodeMirror text
- * @param updateCallback Callback to process the CodeMirror transaction
+ * @returns The changes or undefined if no change
  */
-export declare const updateCMSelection: (curText: string, newText: string, updateCallback: (value: CMTransactionSpec) => void) => void;
+export declare const getCMSelectionChanges: (curText: string, newText: string) => ChangeSpec | undefined;

package/dist/types/nodeviews/extensions/keymap/index.d.ts

@@ -1,4 +1,4 @@
-import { Extension } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import { RelativeSelectionPos } from '@atlaskit/editor-common/selection';
 import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';

package/dist/types/nodeviews/extensions/manageSelectionMarker.d.ts

@@ -1,10 +1,11 @@
-import { Extension } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { CodeBlockAdvancedPlugin } from '../../codeBlockAdvancedPluginType';
+import type { CodeBlockAdvancedPlugin } from '../../codeBlockAdvancedPluginType';
 /**
  * Hides selection marker decoration when focused on codemirror editor and re-enables on blur
  *
  * @param api
  * @returns CodeMirror Extension
+ * @example
  */
 export declare const manageSelectionMarker: (api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined) => Extension;

package/dist/types/nodeviews/languages/loader.d.ts

@@ -8,5 +8,5 @@ export declare class LanguageLoader {
     private updateLanguageCompartment;
     private languageName;
     constructor(updateLanguageCompartment: (value: LanguageSupport | [LanguageSupport, Extension] | []) => void);
-    updateLanguage(languageName: string): void;
+    updateLanguage(languageName: string): Promise<void>;
 }

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

@@ -1,4 +1,4 @@
-import { Extension } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 interface Props {

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

@@ -1,4 +1,4 @@
-import { Extension } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import { ViewUpdate } from '@codemirror/view';
 import type { getPosHandler, getPosHandlerNode, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
@@ -32,14 +32,16 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private updateLanguage;
     private selectCodeBlockNode;
     private wordWrappingEnabled;
-    private updateWordWrap;
+    private getWordWrapEffects;
     update(node: PMNode, _: readonly Decoration[], innerDecorations: DecorationSource): boolean;
     /**
      * Updates a facet which stores information on the prosemirror decorations
      *
      * This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
+     * @param decorationSource
+     * @example
      */
-    private updateProseMirrorDecorations;
+    private getProseMirrorDecorationEffects;
     private clearProseMirrorDecorations;
     stopEvent(e: Event): boolean;
 }

package/dist/types-ts4.5/nodeviews/codemirrorSync/updateCMSelection.d.ts

@@ -1,4 +1,4 @@
-import { TransactionSpec as CMTransactionSpec } from '@codemirror/state';
+import { ChangeSpec } from '@codemirror/state';
 /**
  *
  * Compares the updated text with the current to determine the transaction to fire
@@ -6,6 +6,6 @@ import { TransactionSpec as CMTransactionSpec } from '@codemirror/state';
  *
  * @param curText string - the current CodeMirror text
  * @param newText string - the new CodeMirror text
- * @param updateCallback Callback to process the CodeMirror transaction
+ * @returns The changes or undefined if no change
  */
-export declare const updateCMSelection: (curText: string, newText: string, updateCallback: (value: CMTransactionSpec) => void) => void;
+export declare const getCMSelectionChanges: (curText: string, newText: string) => ChangeSpec | undefined;

package/dist/types-ts4.5/nodeviews/extensions/keymap/index.d.ts

@@ -1,4 +1,4 @@
-import { Extension } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import { RelativeSelectionPos } from '@atlaskit/editor-common/selection';
 import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';

package/dist/types-ts4.5/nodeviews/extensions/manageSelectionMarker.d.ts

@@ -1,10 +1,11 @@
-import { Extension } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { CodeBlockAdvancedPlugin } from '../../codeBlockAdvancedPluginType';
+import type { CodeBlockAdvancedPlugin } from '../../codeBlockAdvancedPluginType';
 /**
  * Hides selection marker decoration when focused on codemirror editor and re-enables on blur
  *
  * @param api
  * @returns CodeMirror Extension
+ * @example
  */
 export declare const manageSelectionMarker: (api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined) => Extension;

package/dist/types-ts4.5/nodeviews/languages/loader.d.ts

@@ -12,5 +12,5 @@ export declare class LanguageLoader {
         Extension
     ] | [
     ]) => void);
-    updateLanguage(languageName: string): void;
+    updateLanguage(languageName: string): Promise<void>;
 }

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

@@ -1,4 +1,4 @@
-import { Extension } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 interface Props {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "2.2.8",
+	"version": "2.2.9",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^105.0.0",
+		"@atlaskit/editor-common": "^105.5.0",
 		"@atlaskit/editor-plugin-code-block": "^4.4.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-find-replace": "^2.2.0",
@@ -57,7 +57,7 @@
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@atlaskit/code": "^17.1.0",
+		"@atlaskit/code": "^17.2.0",
 		"typescript": "~5.4.2"
 	},
 	"techstack": {

package/src/nodeviews/codeBlockAdvanced.ts

@@ -2,10 +2,11 @@ import { closeBrackets } from '@codemirror/autocomplete';
 import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
 import {
 	Compartment,
-	Extension,
+	type Extension,
 	EditorSelection,
 	Facet,
 	EditorState as CodeMirrorState,
+	StateEffect,
 } from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, ViewUpdate, gutters } from '@codemirror/view';
 
@@ -17,7 +18,7 @@ import type {
 	ExtractInjectionAPI,
 } from '@atlaskit/editor-common/types';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
-import { EditorSelectionAPI } from '@atlaskit/editor-plugin-selection';
+import { type EditorSelectionAPI } from '@atlaskit/editor-plugin-selection';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import type {
@@ -33,7 +34,7 @@ import { highlightStyle } from '../ui/syntaxHighlightingTheme';
 import { cmTheme } from '../ui/theme';
 
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
-import { updateCMSelection } from './codemirrorSync/updateCMSelection';
+import { getCMSelectionChanges } from './codemirrorSync/updateCMSelection';
 import { keymapExtension } from './extensions/keymap';
 import { manageSelectionMarker } from './extensions/manageSelectionMarker';
 import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
@@ -90,9 +91,11 @@ class CodeBlockAdvancedNodeView implements NodeView {
 			doc: this.node.textContent,
 			extensions: [
 				...config.extensions,
-				this.lineWrappingCompartment.of([]),
+				this.lineWrappingCompartment.of(
+					isCodeBlockWordWrapEnabled(node) ? CodeMirror.lineWrapping : [],
+				),
 				this.languageCompartment.of([]),
-				this.pmDecorationsCompartment.of([]),
+				this.pmDecorationsCompartment.of(this.pmFacet.compute([], () => innerDecorations)),
 				keymapExtension({
 					view,
 					getPos,
@@ -133,8 +136,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		// inner editor
 		this.updating = false;
 		this.updateLanguage();
-		this.updateWordWrap(node);
-		this.updateProseMirrorDecorations(innerDecorations);
+		this.wordWrappingEnabled = isCodeBlockWordWrapEnabled(node);
 	}
 
 	destroy() {
@@ -194,19 +196,14 @@ class CodeBlockAdvancedNodeView implements NodeView {
 
 	private wordWrappingEnabled = false;
 
-	private updateWordWrap(node: PMNode) {
+	private getWordWrapEffects(node: PMNode) {
 		if (this.wordWrappingEnabled !== isCodeBlockWordWrapEnabled(node)) {
-			this.updating = true;
-			this.cm.dispatch({
-				effects: [
-					this.lineWrappingCompartment.reconfigure(
-						isCodeBlockWordWrapEnabled(node) ? CodeMirror.lineWrapping : [],
-					),
-				],
-			});
-			this.updating = false;
 			this.wordWrappingEnabled = !this.wordWrappingEnabled;
+			return this.lineWrappingCompartment.reconfigure(
+				isCodeBlockWordWrapEnabled(node) ? CodeMirror.lineWrapping : [],
+			);
 		}
+		return undefined;
 	}
 
 	update(node: PMNode, _: readonly Decoration[], innerDecorations: DecorationSource) {
@@ -215,7 +212,6 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		if (node.type !== this.node.type) {
 			return false;
 		}
-		this.updateWordWrap(node);
 		this.node = node;
 		if (this.updating) {
 			return true;
@@ -223,12 +219,21 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		this.updateLanguage();
 		const newText = node.textContent,
 			curText = this.cm.state.doc.toString();
-		updateCMSelection(curText, newText, (tr) => {
+
+		// Updates bundled for performance (to avoid multiple-dispatches)
+		const changes = getCMSelectionChanges(curText, newText);
+		const wordWrapEffect = this.getWordWrapEffects(node);
+		const prosemirrorDecorationsEffect = this.getProseMirrorDecorationEffects(innerDecorations);
+		if (changes || wordWrapEffect || prosemirrorDecorationsEffect) {
 			this.updating = true;
-			this.cm.dispatch(tr);
+			this.cm.dispatch({
+				effects: [wordWrapEffect, prosemirrorDecorationsEffect].filter(
+					(effect): effect is StateEffect<unknown> => !!effect,
+				),
+				changes,
+			});
 			this.updating = false;
-		});
-		this.updateProseMirrorDecorations(innerDecorations);
+		}
 		return true;
 	}
 
@@ -236,14 +241,12 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	 * Updates a facet which stores information on the prosemirror decorations
 	 *
 	 * This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
+	 * @param decorationSource
+	 * @example
 	 */
-	private updateProseMirrorDecorations(decorationSource: DecorationSource) {
-		this.updating = true;
+	private getProseMirrorDecorationEffects(decorationSource: DecorationSource) {
 		const computedFacet = this.pmFacet.compute([], () => decorationSource);
-		this.cm.dispatch({
-			effects: this.pmDecorationsCompartment.reconfigure(computedFacet),
-		});
-		this.updating = false;
+		return this.pmDecorationsCompartment.reconfigure(computedFacet);
 	}
 
 	private clearProseMirrorDecorations() {

package/src/nodeviews/codemirrorSync/updateCMSelection.ts

@@ -1,4 +1,4 @@
-import { TransactionSpec as CMTransactionSpec } from '@codemirror/state';
+import { ChangeSpec } from '@codemirror/state';
 
 /**
  *
@@ -7,13 +7,9 @@ import { TransactionSpec as CMTransactionSpec } from '@codemirror/state';
  *
  * @param curText string - the current CodeMirror text
  * @param newText string - the new CodeMirror text
- * @param updateCallback Callback to process the CodeMirror transaction
+ * @returns The changes or undefined if no change
  */
-export const updateCMSelection = (
-	curText: string,
-	newText: string,
-	updateCallback: (value: CMTransactionSpec) => void,
-) => {
+export const getCMSelectionChanges = (curText: string, newText: string): ChangeSpec | undefined => {
 	if (newText !== curText) {
 		let start = 0,
 			curEnd = curText.length,
@@ -29,12 +25,10 @@ export const updateCMSelection = (
 			curEnd--;
 			newEnd--;
 		}
-		updateCallback({
-			changes: {
-				from: start,
-				to: curEnd,
-				insert: newText.slice(start, newEnd),
-			},
-		});
+		return {
+			from: start,
+			to: curEnd,
+			insert: newText.slice(start, newEnd),
+		};
 	}
 };

package/src/nodeviews/extensions/keymap/index.ts

@@ -1,6 +1,6 @@
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';
-import { Extension } from '@codemirror/state';
-import { KeyBinding, keymap as cmKeymap } from '@codemirror/view';
+import { type Extension } from '@codemirror/state';
+import { type KeyBinding, keymap as cmKeymap } from '@codemirror/view';
 
 import { browser } from '@atlaskit/editor-common/browser';
 import { RelativeSelectionPos } from '@atlaskit/editor-common/selection';

package/src/nodeviews/extensions/manageSelectionMarker.ts

@@ -1,15 +1,16 @@
-import { Extension } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import { EditorView as CodeMirror } from '@codemirror/view';
 
 import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 
-import { CodeBlockAdvancedPlugin } from '../../codeBlockAdvancedPluginType';
+import type { CodeBlockAdvancedPlugin } from '../../codeBlockAdvancedPluginType';
 
 /**
  * Hides selection marker decoration when focused on codemirror editor and re-enables on blur
  *
  * @param api
  * @returns CodeMirror Extension
+ * @example
  */
 export const manageSelectionMarker = (
 	api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined,

package/src/nodeviews/languages/loader.ts

@@ -18,14 +18,16 @@ export class LanguageLoader {
 		) => void,
 	) {}
 
-	updateLanguage(languageName: string) {
+	async updateLanguage(languageName: string) {
 		if (languageName === this.languageName) {
 			return;
 		}
 		const language = mapLanguageToCodeMirror(languageName);
 
 		const configureEmpty = () => {
-			this.updateLanguageCompartment([]);
+			if (this.languageName) {
+				this.updateLanguageCompartment([]);
+			}
 			this.languageName = '';
 		};
 
@@ -34,23 +36,22 @@ export class LanguageLoader {
 			return;
 		}
 
-		language
-			.load()
-			.then((lang) => {
-				if (lang) {
-					const styling = languageStyling(lang.language);
-					if (styling) {
-						this.updateLanguageCompartment([lang, syntaxHighlighting(styling)]);
-					} else {
-						this.updateLanguageCompartment(lang);
-					}
-					this.languageName = languageName;
+		try {
+			const lang = await language.load();
+
+			if (lang) {
+				const styling = languageStyling(lang.language);
+				if (styling) {
+					this.updateLanguageCompartment([lang, syntaxHighlighting(styling)]);
 				} else {
-					configureEmpty();
+					this.updateLanguageCompartment(lang);
 				}
-			})
-			.catch(() => {
+				this.languageName = languageName;
+			} else {
 				configureEmpty();
-			});
+			}
+		} catch (e) {
+			configureEmpty();
+		}
 	}
 }

package/src/nodeviews/lazyCodeBlockAdvanced.ts

@@ -1,4 +1,4 @@
-import { Extension } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 
 import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';