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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 2.2.10
+
+### Patch Changes
+
+- [#156937](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156937)
+  [`0a144ecb9fd2b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0a144ecb9fd2b) -
+  [ux] Improve the syntax highlighting for diff language.
+- Updated dependencies
+
+## 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/cjs/ui/syntaxHighlightingTheme.js

@@ -40,11 +40,17 @@ var highlightStyle = exports.highlightStyle = _language.HighlightStyle.define([{
   tag: [_highlight.tags.atom, _highlight.tags.bool, _highlight.tags.url, _highlight.tags.contentSeparator, _highlight.tags.labelName],
   color: "var(--ds-text-accent-blue, #0055CC)"
 }, {
-  tag: [_highlight.tags.literal, _highlight.tags.inserted],
+  tag: [_highlight.tags.literal],
   color: "var(--ds-text-accent-blue, #0055CC)"
 }, {
-  tag: [_highlight.tags.string, _highlight.tags.deleted],
+  tag: _highlight.tags.inserted,
   color: "var(--ds-text-accent-green, #216E4E)"
+}, {
+  tag: [_highlight.tags.string],
+  color: "var(--ds-text-accent-green, #216E4E)"
+}, {
+  tag: [_highlight.tags.deleted],
+  color: "var(--ds-text-accent-red, #AE2E24)"
 }, {
   tag: [_highlight.tags.special(_highlight.tags.string)],
   color: "var(--ds-text-accent-green, #216E4E)"

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/es2019/ui/syntaxHighlightingTheme.js

@@ -34,11 +34,17 @@ export const highlightStyle = HighlightStyle.define([{
   tag: [tags.atom, tags.bool, tags.url, tags.contentSeparator, tags.labelName],
   color: "var(--ds-text-accent-blue, #0055CC)"
 }, {
-  tag: [tags.literal, tags.inserted],
+  tag: [tags.literal],
   color: "var(--ds-text-accent-blue, #0055CC)"
 }, {
-  tag: [tags.string, tags.deleted],
+  tag: tags.inserted,
   color: "var(--ds-text-accent-green, #216E4E)"
+}, {
+  tag: [tags.string],
+  color: "var(--ds-text-accent-green, #216E4E)"
+}, {
+  tag: [tags.deleted],
+  color: "var(--ds-text-accent-red, #AE2E24)"
 }, {
   tag: [tags.special(tags.string)],
   color: "var(--ds-text-accent-green, #216E4E)"

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