@atlaskit/editor-plugin-code-block-advanced 2.1.4 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 2.2.0
+
+### Minor Changes
+
+- [#137683](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137683)
+  [`c1020ef8cdf87`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c1020ef8cdf87) -
+  Adds support for Handlebars syntax highlighting.
+
+### Patch Changes
+
+- [#137043](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137043)
+  [`616c9cd4a2c60`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/616c9cd4a2c60) -
+  Fix line wrapping and decorations being lost on breakout in advanced codeblocks
+- Updated dependencies
+
 ## 2.1.4
 
 ### Patch Changes

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -26,7 +26,7 @@ var _prosemirrorDecorations = require("./extensions/prosemirrorDecorations");
 var _loader = require("./languages/loader");
 // Based on: https://prosemirror.net/examples/codemirror/
 var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
-  function CodeBlockAdvancedNodeView(node, view, getPos, config) {
+  function CodeBlockAdvancedNodeView(node, view, getPos, innerDecorations, config) {
     var _config$api,
       _this = this,
       _config$api2,
@@ -87,6 +87,8 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     // inner editor
     this.updating = false;
     this.updateLanguage();
+    this.updateWordWrap(node);
+    this.updateProseMirrorDecorations(innerDecorations);
   }
   return (0, _createClass2.default)(CodeBlockAdvancedNodeView, [{
     key: "destroy",
@@ -251,7 +253,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   }]);
 }();
 var getCodeBlockAdvancedNodeView = exports.getCodeBlockAdvancedNodeView = function getCodeBlockAdvancedNodeView(props) {
-  return function (node, view, getPos) {
-    return new CodeBlockAdvancedNodeView(node, view, getPos, props);
+  return function (node, view, getPos, innerDecorations) {
+    return new CodeBlockAdvancedNodeView(node, view, getPos, innerDecorations, props);
   };
 };

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

@@ -68,6 +68,18 @@ var mapLanguageToCodeMirror = exports.mapLanguageToCodeMirror = function mapLang
       return _languageData.languages.find(function (l) {
         return l.name === 'VB.NET';
       });
+    case 'handlebars':
+      return _language.LanguageDescription.of({
+        name: 'Handlebars',
+        load: function load() {
+          return Promise.resolve().then(function () {
+            return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_@atlaskit/editor-plugin-code-block-advanced-lang-handlebars" */
+            '@xiechao/codemirror-lang-handlebars'));
+          }).then(function (m) {
+            return new _language.LanguageSupport(m.handlebarsLanguage);
+          });
+        }
+      });
     case 'elixir':
       return _language.LanguageDescription.of({
         name: 'Elixir',

package/dist/cjs/nodeviews/lazyCodeBlockAdvanced.js

@@ -1,29 +1,47 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.lazyCodeBlockView = void 0;
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var lazyCodeBlockView = exports.lazyCodeBlockView = function lazyCodeBlockView(props) {
   return (0, _lazyNodeView.withLazyLoading)({
     nodeName: 'codeBlock',
     getNodeViewOptions: function getNodeViewOptions() {},
-    loader: function loader() {
-      var result = Promise.resolve().then(function () {
-        return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-advanced-nodeview" */
-        './codeBlockAdvanced'));
-      }).then(function (_ref) {
-        var getCodeBlockAdvancedNodeView = _ref.getCodeBlockAdvancedNodeView;
-        return function (node, view, getPos) {
-          return getCodeBlockAdvancedNodeView(props)(node, view, getPos);
-        };
-      });
-      return result;
-    }
+    loader: function () {
+      var _loader = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var _yield$import, getCodeBlockAdvancedNodeView;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return Promise.resolve().then(function () {
+                return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-advanced-nodeview" */
+                './codeBlockAdvanced'));
+              });
+            case 2:
+              _yield$import = _context.sent;
+              getCodeBlockAdvancedNodeView = _yield$import.getCodeBlockAdvancedNodeView;
+              return _context.abrupt("return", function (node, view, getPos, _decs, _nodeViewOptions, innerDecorations) {
+                return getCodeBlockAdvancedNodeView(props)(node, view, getPos, innerDecorations);
+              });
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function loader() {
+        return _loader.apply(this, arguments);
+      }
+      return loader;
+    }()
   });
 };

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -16,7 +16,7 @@ import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations
 import { LanguageLoader } from './languages/loader';
 // Based on: https://prosemirror.net/examples/codemirror/
 class CodeBlockAdvancedNodeView {
-  constructor(node, view, getPos, config) {
+  constructor(node, view, getPos, innerDecorations, config) {
     var _config$api, _config$api$selection, _config$api2, _config$api2$editorDi, _config$api3;
     _defineProperty(this, "lineWrappingCompartment", new Compartment());
     _defineProperty(this, "languageCompartment", new Compartment());
@@ -67,6 +67,8 @@ class CodeBlockAdvancedNodeView {
     // inner editor
     this.updating = false;
     this.updateLanguage();
+    this.updateWordWrap(node);
+    this.updateProseMirrorDecorations(innerDecorations);
   }
   destroy() {
     var _this$cleanupDisabled;
@@ -201,6 +203,6 @@ class CodeBlockAdvancedNodeView {
     return true;
   }
 }
-export const getCodeBlockAdvancedNodeView = props => (node, view, getPos) => {
-  return new CodeBlockAdvancedNodeView(node, view, getPos, props);
+export const getCodeBlockAdvancedNodeView = props => (node, view, getPos, innerDecorations) => {
+  return new CodeBlockAdvancedNodeView(node, view, getPos, innerDecorations, props);
 };

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

@@ -1,4 +1,4 @@
-import { LanguageDescription } from '@codemirror/language';
+import { LanguageDescription, LanguageSupport } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 // getLanguageIdentifier defines `language.alias[0]`
 export const mapLanguageToCodeMirror = language => {
@@ -58,6 +58,14 @@ export const mapLanguageToCodeMirror = language => {
       return languages.find(l => {
         return l.name === 'VB.NET';
       });
+    case 'handlebars':
+      return LanguageDescription.of({
+        name: 'Handlebars',
+        load() {
+          return import( /* webpackChunkName: "@atlaskit-internal_@atlaskit/editor-plugin-code-block-advanced-lang-handlebars" */
+          '@xiechao/codemirror-lang-handlebars').then(m => new LanguageSupport(m.handlebarsLanguage));
+        }
+      });
     case 'elixir':
       return LanguageDescription.of({
         name: 'Elixir',

package/dist/es2019/nodeviews/lazyCodeBlockAdvanced.js

@@ -3,16 +3,12 @@ export const lazyCodeBlockView = props => {
   return withLazyLoading({
     nodeName: 'codeBlock',
     getNodeViewOptions: () => {},
-    loader: () => {
-      const result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-advanced-nodeview" */
-      './codeBlockAdvanced').then(({
+    loader: async () => {
+      const {
         getCodeBlockAdvancedNodeView
-      }) => {
-        return (node, view, getPos) => {
-          return getCodeBlockAdvancedNodeView(props)(node, view, getPos);
-        };
-      });
-      return result;
+      } = await import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-advanced-nodeview" */
+      './codeBlockAdvanced');
+      return (node, view, getPos, _decs, _nodeViewOptions, innerDecorations) => getCodeBlockAdvancedNodeView(props)(node, view, getPos, innerDecorations);
     }
   });
 };

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -19,7 +19,7 @@ import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations
 import { LanguageLoader } from './languages/loader';
 // Based on: https://prosemirror.net/examples/codemirror/
 var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
-  function CodeBlockAdvancedNodeView(node, view, getPos, config) {
+  function CodeBlockAdvancedNodeView(node, view, getPos, innerDecorations, config) {
     var _config$api,
       _this = this,
       _config$api2,
@@ -80,6 +80,8 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     // inner editor
     this.updating = false;
     this.updateLanguage();
+    this.updateWordWrap(node);
+    this.updateProseMirrorDecorations(innerDecorations);
   }
   return _createClass(CodeBlockAdvancedNodeView, [{
     key: "destroy",
@@ -244,7 +246,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   }]);
 }();
 export var getCodeBlockAdvancedNodeView = function getCodeBlockAdvancedNodeView(props) {
-  return function (node, view, getPos) {
-    return new CodeBlockAdvancedNodeView(node, view, getPos, props);
+  return function (node, view, getPos, innerDecorations) {
+    return new CodeBlockAdvancedNodeView(node, view, getPos, innerDecorations, props);
   };
 };

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

@@ -1,4 +1,4 @@
-import { LanguageDescription } from '@codemirror/language';
+import { LanguageDescription, LanguageSupport } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 // getLanguageIdentifier defines `language.alias[0]`
 export var mapLanguageToCodeMirror = function mapLanguageToCodeMirror(language) {
@@ -58,6 +58,16 @@ export var mapLanguageToCodeMirror = function mapLanguageToCodeMirror(language)
       return languages.find(function (l) {
         return l.name === 'VB.NET';
       });
+    case 'handlebars':
+      return LanguageDescription.of({
+        name: 'Handlebars',
+        load: function load() {
+          return import( /* webpackChunkName: "@atlaskit-internal_@atlaskit/editor-plugin-code-block-advanced-lang-handlebars" */
+          '@xiechao/codemirror-lang-handlebars').then(function (m) {
+            return new LanguageSupport(m.handlebarsLanguage);
+          });
+        }
+      });
     case 'elixir':
       return LanguageDescription.of({
         name: 'Elixir',

package/dist/esm/nodeviews/lazyCodeBlockAdvanced.js

@@ -1,17 +1,35 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
 export var lazyCodeBlockView = function lazyCodeBlockView(props) {
   return withLazyLoading({
     nodeName: 'codeBlock',
     getNodeViewOptions: function getNodeViewOptions() {},
-    loader: function loader() {
-      var result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-advanced-nodeview" */
-      './codeBlockAdvanced').then(function (_ref) {
-        var getCodeBlockAdvancedNodeView = _ref.getCodeBlockAdvancedNodeView;
-        return function (node, view, getPos) {
-          return getCodeBlockAdvancedNodeView(props)(node, view, getPos);
-        };
-      });
-      return result;
-    }
+    loader: function () {
+      var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var _yield$import, getCodeBlockAdvancedNodeView;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-advanced-nodeview" */
+              './codeBlockAdvanced');
+            case 2:
+              _yield$import = _context.sent;
+              getCodeBlockAdvancedNodeView = _yield$import.getCodeBlockAdvancedNodeView;
+              return _context.abrupt("return", function (node, view, getPos, _decs, _nodeViewOptions, innerDecorations) {
+                return getCodeBlockAdvancedNodeView(props)(node, view, getPos, innerDecorations);
+              });
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function loader() {
+        return _loader.apply(this, arguments);
+      }
+      return loader;
+    }()
   });
 };

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

@@ -24,7 +24,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private cleanupDisabledState;
     private languageLoader;
     private pmFacet;
-    constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, config: ConfigProps);
+    constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, innerDecorations: DecorationSource, config: ConfigProps);
     destroy(): void;
     forwardUpdate(update: ViewUpdate): void;
     setSelection(anchor: number, head: number): void;
@@ -43,5 +43,5 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private clearProseMirrorDecorations;
     stopEvent(e: Event): boolean;
 }
-export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler) => CodeBlockAdvancedNodeView;
+export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler, innerDecorations: DecorationSource) => CodeBlockAdvancedNodeView;
 export {};

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

@@ -24,7 +24,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private cleanupDisabledState;
     private languageLoader;
     private pmFacet;
-    constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, config: ConfigProps);
+    constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, innerDecorations: DecorationSource, config: ConfigProps);
     destroy(): void;
     forwardUpdate(update: ViewUpdate): void;
     setSelection(anchor: number, head: number): void;
@@ -43,5 +43,5 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private clearProseMirrorDecorations;
     stopEvent(e: Event): boolean;
 }
-export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler) => CodeBlockAdvancedNodeView;
+export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler, innerDecorations: DecorationSource) => CodeBlockAdvancedNodeView;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "2.1.4",
+	"version": "2.2.0",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^102.18.0",
+		"@atlaskit/editor-common": "^102.19.0",
 		"@atlaskit/editor-plugin-code-block": "^4.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-find-replace": "^2.0.0",
@@ -49,6 +49,7 @@
 		"@codemirror/state": "6.5.1",
 		"@codemirror/view": "6.36.2",
 		"@lezer/highlight": "1.2.1",
+		"@xiechao/codemirror-lang-handlebars": "^1.0.4",
 		"cm6-graphql": "0.2.0",
 		"codemirror-lang-elixir": "4.0.0"
 	},
@@ -56,7 +57,7 @@
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@atlaskit/code": "^16.2.0",
+		"@atlaskit/code": "^17.0.0",
 		"typescript": "~5.4.2"
 	},
 	"techstack": {

package/src/nodeviews/codeBlockAdvanced.ts

@@ -55,7 +55,13 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	private languageLoader: LanguageLoader;
 	private pmFacet = Facet.define<DecorationSource>();
 
-	constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, config: ConfigProps) {
+	constructor(
+		node: PMNode,
+		view: EditorView,
+		getPos: getPosHandlerNode,
+		innerDecorations: DecorationSource,
+		config: ConfigProps,
+	) {
 		this.node = node;
 		this.view = view;
 		this.getPos = getPos;
@@ -111,6 +117,8 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		// inner editor
 		this.updating = false;
 		this.updateLanguage();
+		this.updateWordWrap(node);
+		this.updateProseMirrorDecorations(innerDecorations);
 	}
 
 	destroy() {
@@ -261,6 +269,17 @@ class CodeBlockAdvancedNodeView implements NodeView {
 
 export const getCodeBlockAdvancedNodeView =
 	(props: ConfigProps) =>
-	(node: PMNode, view: EditorView, getPos: getPosHandler): CodeBlockAdvancedNodeView => {
-		return new CodeBlockAdvancedNodeView(node, view, getPos as getPosHandlerNode, props);
+	(
+		node: PMNode,
+		view: EditorView,
+		getPos: getPosHandler,
+		innerDecorations: DecorationSource,
+	): CodeBlockAdvancedNodeView => {
+		return new CodeBlockAdvancedNodeView(
+			node,
+			view,
+			getPos as getPosHandlerNode,
+			innerDecorations,
+			props,
+		);
 	};

package/src/nodeviews/languages/languageMap.ts

@@ -1,4 +1,4 @@
-import { LanguageDescription } from '@codemirror/language';
+import { LanguageDescription, LanguageSupport } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 
 import type { LanguageAlias } from '@atlaskit/code';
@@ -63,6 +63,16 @@ export const mapLanguageToCodeMirror = (language: LanguageAliasValue) => {
 			return languages.find((l) => {
 				return l.name === 'VB.NET';
 			});
+		case 'handlebars':
+			return LanguageDescription.of({
+				name: 'Handlebars',
+				load() {
+					return import(
+						/* webpackChunkName: "@atlaskit-internal_@atlaskit/editor-plugin-code-block-advanced-lang-handlebars" */
+						'@xiechao/codemirror-lang-handlebars'
+					).then((m) => new LanguageSupport(m.handlebarsLanguage));
+				},
+			});
 		case 'elixir':
 			return LanguageDescription.of({
 				name: 'Elixir',

package/src/nodeviews/lazyCodeBlockAdvanced.ts

@@ -3,7 +3,7 @@ import { Extension } from '@codemirror/state';
 import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView, DecorationSource, Decoration } from '@atlaskit/editor-prosemirror/view';
 
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 
@@ -16,16 +16,19 @@ export const lazyCodeBlockView = (props: Props) => {
 	return withLazyLoading({
 		nodeName: 'codeBlock',
 		getNodeViewOptions: () => {},
-		loader: () => {
-			const result = import(
+		loader: async () => {
+			const { getCodeBlockAdvancedNodeView } = await import(
 				/* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-advanced-nodeview" */
 				'./codeBlockAdvanced'
-			).then(({ getCodeBlockAdvancedNodeView }) => {
-				return (node: PMNode, view: EditorView, getPos: () => number | undefined) => {
-					return getCodeBlockAdvancedNodeView(props)(node, view, getPos);
-				};
-			});
-			return result;
+			);
+			return (
+				node: PMNode,
+				view: EditorView,
+				getPos: () => number | undefined,
+				_decs: readonly Decoration[],
+				_nodeViewOptions: () => void,
+				innerDecorations: DecorationSource,
+			) => getCodeBlockAdvancedNodeView(props)(node, view, getPos, innerDecorations);
 		},
 	});
 };