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

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

@@ -34,11 +34,17 @@ export var 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/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.10",
 	"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": "^105.0.0",
+		"@atlaskit/editor-common": "^105.6.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",
 		"@atlaskit/editor-plugin-selection": "^2.2.0",
 		"@atlaskit/editor-plugin-selection-marker": "^2.3.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/tokens": "^4.8.0",
+		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/autocomplete": "6.18.4",
 		"@codemirror/commands": "6.7.1",
@@ -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';

package/src/ui/syntaxHighlightingTheme.ts

@@ -34,10 +34,17 @@ export const highlightStyle = HighlightStyle.define([
 		color: token('color.text.accent.blue'),
 	},
 	{
-		tag: [tags.literal, tags.inserted],
+		tag: [tags.literal],
 		color: token('color.text.accent.blue'),
 	},
-	{ tag: [tags.string, tags.deleted], color: token('color.text.accent.green') },
+	{
+		tag: tags.inserted,
+		color: token('color.text.accent.green')
+	},
+	{ tag: [tags.string], color: token('color.text.accent.green') },
+	{
+		tag: [tags.deleted], color: token('color.text.accent.red')
+	},
 	{
 		tag: [tags.special(tags.string)],
 		color: token('color.text.accent.green'),