@atlaskit/editor-plugin-code-block-advanced 2.2.2 → 2.2.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 2.2.4
+
+### Patch Changes
+
+- [#149738](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/149738)
+  [`3098e65159385`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3098e65159385) -
+  Fix selection when the editor is disabled.
+
+## 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

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -76,7 +76,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         fixed: false
       }), _view.EditorView.updateListener.of(function (update) {
         return _this.forwardUpdate(update);
-      }), this.readOnlyCompartment.of(_view.EditorView.editable.of(this.view.editable)), (0, _autocomplete.closeBrackets)(), _view.EditorView.editorAttributes.of({
+      }), this.readOnlyCompartment.of([_state.EditorState.readOnly.of(!this.view.editable), _view.EditorView.contentAttributes.of({
+        contentEditable: "".concat(this.view.editable)
+      })]), (0, _autocomplete.closeBrackets)(), _view.EditorView.editorAttributes.of({
         class: 'code-block'
       }), (0, _manageSelectionMarker.manageSelectionMarker)(config.api), (0, _prosemirrorDecorations.prosemirrorDecorationPlugin)(this.pmFacet, view, getPos)])
     });
@@ -141,7 +143,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     value: function updateReadonlyState() {
       this.updating = true;
       this.cm.dispatch({
-        effects: this.readOnlyCompartment.reconfigure(_view.EditorView.editable.of(this.view.editable))
+        effects: this.readOnlyCompartment.reconfigure([_state.EditorState.readOnly.of(!this.view.editable), _view.EditorView.contentAttributes.of({
+          contentEditable: "".concat(this.view.editable)
+        })])
       });
       this.updating = false;
     }

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/cjs/ui/theme.js

@@ -26,6 +26,9 @@ var cmTheme = exports.cmTheme = _view.EditorView.theme({
   '&.cm-editor.code-block.danger': {
     backgroundColor: "var(--ds-background-danger, #FFECEB)"
   },
+  '.cm-content[aria-readonly="true"]': {
+    caretColor: 'transparent'
+  },
   '.cm-content': {
     cursor: 'text',
     caretColor: "var(--ds-text, #172B4D)",

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { closeBrackets } from '@codemirror/autocomplete';
 import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
-import { Compartment, EditorSelection, Facet } from '@codemirror/state';
+import { Compartment, EditorSelection, Facet, EditorState as CodeMirrorState } 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';
@@ -56,7 +56,9 @@ class CodeBlockAdvancedNodeView {
       // Renderer behaviour
       gutters({
         fixed: false
-      }), CodeMirror.updateListener.of(update => this.forwardUpdate(update)), this.readOnlyCompartment.of(CodeMirror.editable.of(this.view.editable)), closeBrackets(), CodeMirror.editorAttributes.of({
+      }), CodeMirror.updateListener.of(update => this.forwardUpdate(update)), this.readOnlyCompartment.of([CodeMirrorState.readOnly.of(!this.view.editable), CodeMirror.contentAttributes.of({
+        contentEditable: `${this.view.editable}`
+      })]), closeBrackets(), CodeMirror.editorAttributes.of({
         class: 'code-block'
       }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos)]
     });
@@ -113,7 +115,9 @@ class CodeBlockAdvancedNodeView {
   updateReadonlyState() {
     this.updating = true;
     this.cm.dispatch({
-      effects: this.readOnlyCompartment.reconfigure(CodeMirror.editable.of(this.view.editable))
+      effects: this.readOnlyCompartment.reconfigure([CodeMirrorState.readOnly.of(!this.view.editable), CodeMirror.contentAttributes.of({
+        contentEditable: `${this.view.editable}`
+      })])
     });
     this.updating = false;
   }

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

@@ -20,6 +20,9 @@ export const cmTheme = CodeMirror.theme({
   '&.cm-editor.code-block.danger': {
     backgroundColor: "var(--ds-background-danger, #FFECEB)"
   },
+  '.cm-content[aria-readonly="true"]': {
+    caretColor: 'transparent'
+  },
   '.cm-content': {
     cursor: 'text',
     caretColor: "var(--ds-text, #172B4D)",

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -4,7 +4,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { closeBrackets } from '@codemirror/autocomplete';
 import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
-import { Compartment, EditorSelection, Facet } from '@codemirror/state';
+import { Compartment, EditorSelection, Facet, EditorState as CodeMirrorState } 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';
@@ -69,7 +69,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         fixed: false
       }), CodeMirror.updateListener.of(function (update) {
         return _this.forwardUpdate(update);
-      }), this.readOnlyCompartment.of(CodeMirror.editable.of(this.view.editable)), closeBrackets(), CodeMirror.editorAttributes.of({
+      }), this.readOnlyCompartment.of([CodeMirrorState.readOnly.of(!this.view.editable), CodeMirror.contentAttributes.of({
+        contentEditable: "".concat(this.view.editable)
+      })]), closeBrackets(), CodeMirror.editorAttributes.of({
         class: 'code-block'
       }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos)])
     });
@@ -134,7 +136,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     value: function updateReadonlyState() {
       this.updating = true;
       this.cm.dispatch({
-        effects: this.readOnlyCompartment.reconfigure(CodeMirror.editable.of(this.view.editable))
+        effects: this.readOnlyCompartment.reconfigure([CodeMirrorState.readOnly.of(!this.view.editable), CodeMirror.contentAttributes.of({
+          contentEditable: "".concat(this.view.editable)
+        })])
       });
       this.updating = false;
     }

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

@@ -20,6 +20,9 @@ export var cmTheme = CodeMirror.theme({
   '&.cm-editor.code-block.danger': {
     backgroundColor: "var(--ds-background-danger, #FFECEB)"
   },
+  '.cm-content[aria-readonly="true"]': {
+    caretColor: 'transparent'
+  },
   '.cm-content': {
     cursor: 'text',
     caretColor: "var(--ds-text, #172B4D)",

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.2",
+	"version": "2.2.4",
 	"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.3.0",
-		"@atlaskit/editor-plugin-code-block": "^4.2.0",
+		"@atlaskit/editor-common": "^103.22.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-selection": "^2.1.0",
-		"@atlaskit/editor-plugin-selection-marker": "^2.1.0",
+		"@atlaskit/editor-plugin-find-replace": "^2.2.0",
+		"@atlaskit/editor-plugin-selection": "^2.2.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",
@@ -57,7 +57,7 @@
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@atlaskit/code": "^17.0.0",
+		"@atlaskit/code": "^17.1.0",
 		"typescript": "~5.4.2"
 	},
 	"techstack": {

package/src/nodeviews/codeBlockAdvanced.ts

@@ -1,6 +1,12 @@
 import { closeBrackets } from '@codemirror/autocomplete';
 import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
-import { Compartment, Extension, EditorSelection, Facet } from '@codemirror/state';
+import {
+	Compartment,
+	Extension,
+	EditorSelection,
+	Facet,
+	EditorState as CodeMirrorState,
+} from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, ViewUpdate, gutters } from '@codemirror/view';
 
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
@@ -103,7 +109,10 @@ class CodeBlockAdvancedNodeView implements NodeView {
 				// Renderer behaviour
 				gutters({ fixed: false }),
 				CodeMirror.updateListener.of((update) => this.forwardUpdate(update)),
-				this.readOnlyCompartment.of(CodeMirror.editable.of(this.view.editable)),
+				this.readOnlyCompartment.of([
+					CodeMirrorState.readOnly.of(!this.view.editable),
+					CodeMirror.contentAttributes.of({ contentEditable: `${this.view.editable}` }),
+				]),
 				closeBrackets(),
 				CodeMirror.editorAttributes.of({ class: 'code-block' }),
 				manageSelectionMarker(config.api),
@@ -161,7 +170,10 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	private updateReadonlyState() {
 		this.updating = true;
 		this.cm.dispatch({
-			effects: this.readOnlyCompartment.reconfigure(CodeMirror.editable.of(this.view.editable)),
+			effects: this.readOnlyCompartment.reconfigure([
+				CodeMirrorState.readOnly.of(!this.view.editable),
+				CodeMirror.contentAttributes.of({ contentEditable: `${this.view.editable}` }),
+			]),
 		});
 		this.updating = false;
 	}

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,
+				},
+			);
+	}
+};

package/src/ui/theme.ts

@@ -23,6 +23,9 @@ export const cmTheme = CodeMirror.theme({
 	'&.cm-editor.code-block.danger': {
 		backgroundColor: token('color.background.danger'),
 	},
+	'.cm-content[aria-readonly="true"]': {
+		caretColor: 'transparent',
+	},
 	'.cm-content': {
 		cursor: 'text',
 		caretColor: token('color.text'),