@atlaskit/editor-plugin-code-block-advanced 2.2.1 → 2.2.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 2.2.3
+
+### Patch Changes
+
+- [#142712](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142712)
+  [`6eb10c572bdad`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6eb10c572bdad) -
+  [ux] Improve syntax highlighting for yaml.
+- Updated dependencies
+
+## 2.2.2
+
+### Patch Changes
+
+- [#139592](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139592)
+  [`fe3dc07ed6ab8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fe3dc07ed6ab8) -
+  Fixes a selection bug on chrome if there are multiple code blocks at the start of a document
+
 ## 2.2.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -14,6 +14,7 @@ var _language = require("@codemirror/language");
 var _state = require("@codemirror/state");
 var _view = require("@codemirror/view");
 var _codeBlock = require("@atlaskit/editor-common/code-block");
+var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _view2 = require("@atlaskit/editor-prosemirror/view");
 var _syntaxHighlightingTheme = require("../ui/syntaxHighlightingTheme");
@@ -80,8 +81,14 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       }), (0, _manageSelectionMarker.manageSelectionMarker)(config.api), (0, _prosemirrorDecorations.prosemirrorDecorationPlugin)(this.pmFacet, view, getPos)])
     });
 
+    // We append an additional element that fixes a selection bug on chrome if the code block
+    // is the first element followed by subsequent code blocks
+    var spaceContainer = document.createElement('span');
+    spaceContainer.innerText = _whitespace.ZERO_WIDTH_SPACE;
+    spaceContainer.style.height = '0';
     // The editor's outer node is our DOM representation
     this.dom = this.cm.dom;
+    this.dom.appendChild(spaceContainer);
 
     // This flag is used to avoid an update loop between the outer and
     // inner editor

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

@@ -8,6 +8,8 @@ exports.LanguageLoader = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _language = require("@codemirror/language");
+var _syntaxHighlightingTheme = require("../../ui/syntaxHighlightingTheme");
 var _languageMap = require("./languageMap");
 /**
  * Manages loading the languages (for syntax highlighting, etc.)
@@ -37,7 +39,12 @@ var LanguageLoader = exports.LanguageLoader = /*#__PURE__*/function () {
       }
       language.load().then(function (lang) {
         if (lang) {
-          _this.updateLanguageCompartment(lang);
+          var styling = (0, _syntaxHighlightingTheme.languageStyling)(lang.language);
+          if (styling) {
+            _this.updateLanguageCompartment([lang, (0, _language.syntaxHighlighting)(styling)]);
+          } else {
+            _this.updateLanguageCompartment(lang);
+          }
           _this.languageName = languageName;
         } else {
           configureEmpty();

package/dist/cjs/ui/syntaxHighlightingTheme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.highlightStyle = void 0;
+exports.languageStyling = exports.highlightStyle = void 0;
 var _language = require("@codemirror/language");
 var _highlight = require("@lezer/highlight");
 // Based on `platform/packages/design-system/code/src/internal/theme/styles.tsx`
@@ -76,4 +76,28 @@ var highlightStyle = exports.highlightStyle = _language.HighlightStyle.define([{
 }, {
   tag: _highlight.tags.invalid,
   color: "var(--ds-text, #172B4D)"
-}]);
+}]);
+
+/**
+ * Prismjs (renderer) and codemirror (editor) tokenise slightly differently,
+ * Occasionally we may want to override tokens for certain languages to
+ * get closer to renderer.
+ *
+ * Note the way that codemirror works - these styles get added on top of the styling above
+ * (and override existing tags).
+ *
+ * @param language Codemirror language to scope the changes to a specific language
+ * @returns Highlight style which can be used with the syntax highlighting extension
+ */
+var languageStyling = exports.languageStyling = function languageStyling(language) {
+  switch (language.name) {
+    case 'yaml':
+      return _language.HighlightStyle.define([{
+        tag: _highlight.tags.definition(_highlight.tags.propertyName),
+        color: "var(--ds-text-accent-green, #216E4E)",
+        fontWeight: "var(--ds-font-weight-bold, 700)"
+      }], {
+        scope: language
+      });
+  }
+};

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -4,6 +4,7 @@ import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
 import { Compartment, EditorSelection, Facet } from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
@@ -60,8 +61,14 @@ class CodeBlockAdvancedNodeView {
       }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos)]
     });
 
+    // We append an additional element that fixes a selection bug on chrome if the code block
+    // is the first element followed by subsequent code blocks
+    const spaceContainer = document.createElement('span');
+    spaceContainer.innerText = ZERO_WIDTH_SPACE;
+    spaceContainer.style.height = '0';
     // The editor's outer node is our DOM representation
     this.dom = this.cm.dom;
+    this.dom.appendChild(spaceContainer);
 
     // This flag is used to avoid an update loop between the outer and
     // inner editor

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

@@ -1,4 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { syntaxHighlighting } from '@codemirror/language';
+import { languageStyling } from '../../ui/syntaxHighlightingTheme';
 import { mapLanguageToCodeMirror } from './languageMap';
 
 /**
@@ -25,7 +27,12 @@ export class LanguageLoader {
     }
     language.load().then(lang => {
       if (lang) {
-        this.updateLanguageCompartment(lang);
+        const styling = languageStyling(lang.language);
+        if (styling) {
+          this.updateLanguageCompartment([lang, syntaxHighlighting(styling)]);
+        } else {
+          this.updateLanguageCompartment(lang);
+        }
         this.languageName = languageName;
       } else {
         configureEmpty();

package/dist/es2019/ui/syntaxHighlightingTheme.js

@@ -70,4 +70,28 @@ export const highlightStyle = HighlightStyle.define([{
 }, {
   tag: tags.invalid,
   color: "var(--ds-text, #172B4D)"
-}]);
+}]);
+
+/**
+ * Prismjs (renderer) and codemirror (editor) tokenise slightly differently,
+ * Occasionally we may want to override tokens for certain languages to
+ * get closer to renderer.
+ *
+ * Note the way that codemirror works - these styles get added on top of the styling above
+ * (and override existing tags).
+ *
+ * @param language Codemirror language to scope the changes to a specific language
+ * @returns Highlight style which can be used with the syntax highlighting extension
+ */
+export const languageStyling = language => {
+  switch (language.name) {
+    case 'yaml':
+      return HighlightStyle.define([{
+        tag: tags.definition(tags.propertyName),
+        color: "var(--ds-text-accent-green, #216E4E)",
+        fontWeight: "var(--ds-font-weight-bold, 700)"
+      }], {
+        scope: language
+      });
+  }
+};

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -7,6 +7,7 @@ import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
 import { Compartment, EditorSelection, Facet } from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
@@ -73,8 +74,14 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos)])
     });
 
+    // We append an additional element that fixes a selection bug on chrome if the code block
+    // is the first element followed by subsequent code blocks
+    var spaceContainer = document.createElement('span');
+    spaceContainer.innerText = ZERO_WIDTH_SPACE;
+    spaceContainer.style.height = '0';
     // The editor's outer node is our DOM representation
     this.dom = this.cm.dom;
+    this.dom.appendChild(spaceContainer);
 
     // This flag is used to avoid an update loop between the outer and
     // inner editor

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

@@ -1,6 +1,8 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { syntaxHighlighting } from '@codemirror/language';
+import { languageStyling } from '../../ui/syntaxHighlightingTheme';
 import { mapLanguageToCodeMirror } from './languageMap';
 
 /**
@@ -31,7 +33,12 @@ export var LanguageLoader = /*#__PURE__*/function () {
       }
       language.load().then(function (lang) {
         if (lang) {
-          _this.updateLanguageCompartment(lang);
+          var styling = languageStyling(lang.language);
+          if (styling) {
+            _this.updateLanguageCompartment([lang, syntaxHighlighting(styling)]);
+          } else {
+            _this.updateLanguageCompartment(lang);
+          }
           _this.languageName = languageName;
         } else {
           configureEmpty();

package/dist/esm/ui/syntaxHighlightingTheme.js

@@ -70,4 +70,28 @@ export var highlightStyle = HighlightStyle.define([{
 }, {
   tag: tags.invalid,
   color: "var(--ds-text, #172B4D)"
-}]);
+}]);
+
+/**
+ * Prismjs (renderer) and codemirror (editor) tokenise slightly differently,
+ * Occasionally we may want to override tokens for certain languages to
+ * get closer to renderer.
+ *
+ * Note the way that codemirror works - these styles get added on top of the styling above
+ * (and override existing tags).
+ *
+ * @param language Codemirror language to scope the changes to a specific language
+ * @returns Highlight style which can be used with the syntax highlighting extension
+ */
+export var languageStyling = function languageStyling(language) {
+  switch (language.name) {
+    case 'yaml':
+      return HighlightStyle.define([{
+        tag: tags.definition(tags.propertyName),
+        color: "var(--ds-text-accent-green, #216E4E)",
+        fontWeight: "var(--ds-font-weight-bold, 700)"
+      }], {
+        scope: language
+      });
+  }
+};

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

@@ -1,4 +1,5 @@
 import { LanguageSupport } from '@codemirror/language';
+import type { Extension } from '@codemirror/state';
 /**
  * Manages loading the languages (for syntax highlighting, etc.)
  * from CodeMirror and updating the language in the CodeMirror view
@@ -6,6 +7,6 @@ import { LanguageSupport } from '@codemirror/language';
 export declare class LanguageLoader {
     private updateLanguageCompartment;
     private languageName;
-    constructor(updateLanguageCompartment: (value: LanguageSupport | []) => void);
+    constructor(updateLanguageCompartment: (value: LanguageSupport | [LanguageSupport, Extension] | []) => void);
     updateLanguage(languageName: string): void;
 }

package/dist/types/ui/syntaxHighlightingTheme.d.ts

@@ -1,2 +1,14 @@
-import { HighlightStyle } from '@codemirror/language';
+import { HighlightStyle, Language } from '@codemirror/language';
 export declare const highlightStyle: HighlightStyle;
+/**
+ * Prismjs (renderer) and codemirror (editor) tokenise slightly differently,
+ * Occasionally we may want to override tokens for certain languages to
+ * get closer to renderer.
+ *
+ * Note the way that codemirror works - these styles get added on top of the styling above
+ * (and override existing tags).
+ *
+ * @param language Codemirror language to scope the changes to a specific language
+ * @returns Highlight style which can be used with the syntax highlighting extension
+ */
+export declare const languageStyling: (language: Language) => HighlightStyle | undefined;

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

@@ -1,4 +1,5 @@
 import { LanguageSupport } from '@codemirror/language';
+import type { Extension } from '@codemirror/state';
 /**
  * Manages loading the languages (for syntax highlighting, etc.)
  * from CodeMirror and updating the language in the CodeMirror view
@@ -7,6 +8,9 @@ export declare class LanguageLoader {
     private updateLanguageCompartment;
     private languageName;
     constructor(updateLanguageCompartment: (value: LanguageSupport | [
+        LanguageSupport,
+        Extension
+    ] | [
     ]) => void);
     updateLanguage(languageName: string): void;
 }

package/dist/types-ts4.5/ui/syntaxHighlightingTheme.d.ts

@@ -1,2 +1,14 @@
-import { HighlightStyle } from '@codemirror/language';
+import { HighlightStyle, Language } from '@codemirror/language';
 export declare const highlightStyle: HighlightStyle;
+/**
+ * Prismjs (renderer) and codemirror (editor) tokenise slightly differently,
+ * Occasionally we may want to override tokens for certain languages to
+ * get closer to renderer.
+ *
+ * Note the way that codemirror works - these styles get added on top of the styling above
+ * (and override existing tags).
+ *
+ * @param language Codemirror language to scope the changes to a specific language
+ * @returns Highlight style which can be used with the syntax highlighting extension
+ */
+export declare const languageStyling: (language: Language) => HighlightStyle | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "2.2.1",
+	"version": "2.2.3",
 	"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": "^103.0.0",
-		"@atlaskit/editor-plugin-code-block": "^4.2.0",
+		"@atlaskit/editor-common": "^103.9.0",
+		"@atlaskit/editor-plugin-code-block": "^4.4.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
-		"@atlaskit/editor-plugin-find-replace": "^2.0.0",
+		"@atlaskit/editor-plugin-find-replace": "^2.2.0",
 		"@atlaskit/editor-plugin-selection": "^2.1.0",
-		"@atlaskit/editor-plugin-selection-marker": "^2.1.0",
+		"@atlaskit/editor-plugin-selection-marker": "^2.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/autocomplete": "6.18.4",
 		"@codemirror/commands": "6.7.1",

package/src/nodeviews/codeBlockAdvanced.ts

@@ -10,6 +10,7 @@ import type {
 	getPosHandlerNode,
 	ExtractInjectionAPI,
 } from '@atlaskit/editor-common/types';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { EditorSelectionAPI } from '@atlaskit/editor-plugin-selection';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
@@ -110,8 +111,14 @@ class CodeBlockAdvancedNodeView implements NodeView {
 			],
 		});
 
+		// We append an additional element that fixes a selection bug on chrome if the code block
+		// is the first element followed by subsequent code blocks
+		const spaceContainer = document.createElement('span');
+		spaceContainer.innerText = ZERO_WIDTH_SPACE;
+		spaceContainer.style.height = '0';
 		// The editor's outer node is our DOM representation
 		this.dom = this.cm.dom;
+		this.dom.appendChild(spaceContainer);
 
 		// This flag is used to avoid an update loop between the outer and
 		// inner editor

package/src/nodeviews/languages/loader.ts

@@ -1,4 +1,7 @@
-import { LanguageSupport } from '@codemirror/language';
+import { LanguageSupport, syntaxHighlighting } from '@codemirror/language';
+import type { Extension } from '@codemirror/state';
+
+import { languageStyling } from '../../ui/syntaxHighlightingTheme';
 
 import { mapLanguageToCodeMirror } from './languageMap';
 
@@ -9,7 +12,11 @@ import { mapLanguageToCodeMirror } from './languageMap';
 export class LanguageLoader {
 	private languageName: string = '';
 
-	constructor(private updateLanguageCompartment: (value: LanguageSupport | []) => void) {}
+	constructor(
+		private updateLanguageCompartment: (
+			value: LanguageSupport | [LanguageSupport, Extension] | [],
+		) => void,
+	) {}
 
 	updateLanguage(languageName: string) {
 		if (languageName === this.languageName) {
@@ -31,7 +38,12 @@ export class LanguageLoader {
 			.load()
 			.then((lang) => {
 				if (lang) {
-					this.updateLanguageCompartment(lang);
+					const styling = languageStyling(lang.language);
+					if (styling) {
+						this.updateLanguageCompartment([lang, syntaxHighlighting(styling)]);
+					} else {
+						this.updateLanguageCompartment(lang);
+					}
 					this.languageName = languageName;
 				} else {
 					configureEmpty();

package/src/ui/syntaxHighlightingTheme.ts

@@ -1,4 +1,4 @@
-import { HighlightStyle } from '@codemirror/language';
+import { HighlightStyle, Language } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
 
 import { token } from '@atlaskit/tokens';
@@ -55,3 +55,32 @@ export const highlightStyle = HighlightStyle.define([
 	{ tag: tags.comment, color: token('color.text.subtlest'), fontStyle: 'italic' },
 	{ tag: tags.invalid, color: token('color.text') },
 ]);
+
+/**
+ * Prismjs (renderer) and codemirror (editor) tokenise slightly differently,
+ * Occasionally we may want to override tokens for certain languages to
+ * get closer to renderer.
+ *
+ * Note the way that codemirror works - these styles get added on top of the styling above
+ * (and override existing tags).
+ *
+ * @param language Codemirror language to scope the changes to a specific language
+ * @returns Highlight style which can be used with the syntax highlighting extension
+ */
+export const languageStyling = (language: Language): HighlightStyle | undefined => {
+	switch (language.name) {
+		case 'yaml':
+			return HighlightStyle.define(
+				[
+					{
+						tag: tags.definition(tags.propertyName),
+						color: token('color.text.accent.green'),
+						fontWeight: token('font.weight.bold'),
+					},
+				],
+				{
+					scope: language,
+				},
+			);
+	}
+};