@atlaskit/editor-plugin-code-block 4.2.5 → 4.2.7

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-code-block
 
+## 4.2.7
+
+### 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
+
+## 4.2.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.2.5
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorators.js

@@ -9,6 +9,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _codeBlock = require("@atlaskit/editor-common/code-block");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _classNames = require("../ui/class-names");
 var _utils = require("./utils");
 /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
@@ -163,14 +164,27 @@ var updateDecorationSetWithWordWrappedDecorator = exports.updateDecorationSetWit
   if (!isNodeWrapped) {
     var currentWrappedBlockDecorationSet = getWordWrapDecoratorsFromNodePos(pos, updatedDecorationSet);
     updatedDecorationSet = updatedDecorationSet.remove(currentWrappedBlockDecorationSet);
+
+    // In code block advanced we don't use the node decoration - however a change in decorations
+    // is how we detect updates to the word wrap. If we have no decorations attached we've
+    // likely changed the breakout width with the toggle ON - we add an empty decoration to force
+    // prosemirror to recognise the change so we can update in our node view. This gets filtered
+    // out on the next toggle.
+    if (currentWrappedBlockDecorationSet.length === 0 && (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true)) {
+      var wrappedBlock = _view.Decoration.node(pos, pos + innerNode.nodeSize, {}, {
+        type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
+      } // Allows for quick filtering of decorations while using `find`
+      );
+      updatedDecorationSet = updatedDecorationSet.add(tr.doc, [wrappedBlock]);
+    }
   } else {
-    var wrappedBlock = _view.Decoration.node(pos, pos + innerNode.nodeSize, {
+    var _wrappedBlock = _view.Decoration.node(pos, pos + innerNode.nodeSize, {
       class: _classNames.codeBlockClassNames.contentWrapped
     }, {
       type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
     } // Allows for quick filtering of decorations while using `find`
     );
-    updatedDecorationSet = updatedDecorationSet.add(tr.doc, [wrappedBlock]);
+    updatedDecorationSet = updatedDecorationSet.add(tr.doc, [_wrappedBlock]);
   }
   return updatedDecorationSet;
 };

package/dist/es2019/pm-plugins/decorators.js

@@ -3,6 +3,7 @@
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { codeBlockClassNames } from '../ui/class-names';
 import { getAllCodeBlockNodesInDoc } from './utils';
 export const DECORATION_WIDGET_TYPE = 'decorationWidgetType';
@@ -155,6 +156,19 @@ export const updateDecorationSetWithWordWrappedDecorator = (decorationSet, tr, n
   if (!isNodeWrapped) {
     const currentWrappedBlockDecorationSet = getWordWrapDecoratorsFromNodePos(pos, updatedDecorationSet);
     updatedDecorationSet = updatedDecorationSet.remove(currentWrappedBlockDecorationSet);
+
+    // In code block advanced we don't use the node decoration - however a change in decorations
+    // is how we detect updates to the word wrap. If we have no decorations attached we've
+    // likely changed the breakout width with the toggle ON - we add an empty decoration to force
+    // prosemirror to recognise the change so we can update in our node view. This gets filtered
+    // out on the next toggle.
+    if (currentWrappedBlockDecorationSet.length === 0 && editorExperiment('platform_editor_advanced_code_blocks', true)) {
+      const wrappedBlock = Decoration.node(pos, pos + innerNode.nodeSize, {}, {
+        type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
+      } // Allows for quick filtering of decorations while using `find`
+      );
+      updatedDecorationSet = updatedDecorationSet.add(tr.doc, [wrappedBlock]);
+    }
   } else {
     const wrappedBlock = Decoration.node(pos, pos + innerNode.nodeSize, {
       class: codeBlockClassNames.contentWrapped

package/dist/esm/pm-plugins/decorators.js

@@ -4,6 +4,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { codeBlockClassNames } from '../ui/class-names';
 import { getAllCodeBlockNodesInDoc } from './utils';
 export var DECORATION_WIDGET_TYPE = 'decorationWidgetType';
@@ -156,14 +157,27 @@ export var updateDecorationSetWithWordWrappedDecorator = function updateDecorati
   if (!isNodeWrapped) {
     var currentWrappedBlockDecorationSet = getWordWrapDecoratorsFromNodePos(pos, updatedDecorationSet);
     updatedDecorationSet = updatedDecorationSet.remove(currentWrappedBlockDecorationSet);
+
+    // In code block advanced we don't use the node decoration - however a change in decorations
+    // is how we detect updates to the word wrap. If we have no decorations attached we've
+    // likely changed the breakout width with the toggle ON - we add an empty decoration to force
+    // prosemirror to recognise the change so we can update in our node view. This gets filtered
+    // out on the next toggle.
+    if (currentWrappedBlockDecorationSet.length === 0 && editorExperiment('platform_editor_advanced_code_blocks', true)) {
+      var wrappedBlock = Decoration.node(pos, pos + innerNode.nodeSize, {}, {
+        type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
+      } // Allows for quick filtering of decorations while using `find`
+      );
+      updatedDecorationSet = updatedDecorationSet.add(tr.doc, [wrappedBlock]);
+    }
   } else {
-    var wrappedBlock = Decoration.node(pos, pos + innerNode.nodeSize, {
+    var _wrappedBlock = Decoration.node(pos, pos + innerNode.nodeSize, {
       class: codeBlockClassNames.contentWrapped
     }, {
       type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
     } // Allows for quick filtering of decorations while using `find`
     );
-    updatedDecorationSet = updatedDecorationSet.add(tr.doc, [wrappedBlock]);
+    updatedDecorationSet = updatedDecorationSet.add(tr.doc, [_wrappedBlock]);
   }
   return updatedDecorationSet;
 };

package/dist/types/pm-plugins/language-list.d.ts

@@ -318,6 +318,10 @@ export declare const DEFAULT_LANGUAGES: ({
     readonly name: "Protocol Buffers";
     readonly alias: readonly ["protobuf", "proto"];
     readonly value: "protobuf";
+} | {
+    readonly name: "Handlebars";
+    readonly alias: readonly ["handlebars", "mustache"];
+    readonly value: "handlebars";
 } | {
     readonly name: "ABAP";
     readonly alias: readonly ["abap"];
@@ -648,6 +652,10 @@ export declare function findMatchedLanguage(supportedLanguages: Language[], lang
     readonly name: "Protocol Buffers";
     readonly alias: readonly ["protobuf", "proto"];
     readonly value: "protobuf";
+} | {
+    readonly name: "Handlebars";
+    readonly alias: readonly ["handlebars", "mustache"];
+    readonly value: "handlebars";
 } | {
     readonly name: "ABAP";
     readonly alias: readonly ["abap"];
@@ -979,6 +987,10 @@ export declare function createLanguageList(supportedLanguages: Language[]): ({
     readonly name: "Protocol Buffers";
     readonly alias: readonly ["protobuf", "proto"];
     readonly value: "protobuf";
+} | {
+    readonly name: "Handlebars";
+    readonly alias: readonly ["handlebars", "mustache"];
+    readonly value: "handlebars";
 } | {
     readonly name: "ABAP";
     readonly alias: readonly ["abap"];

package/dist/types-ts4.5/pm-plugins/language-list.d.ts

@@ -560,6 +560,13 @@ export declare const DEFAULT_LANGUAGES: ({
         "proto"
     ];
     readonly value: "protobuf";
+} | {
+    readonly name: "Handlebars";
+    readonly alias: readonly [
+        "handlebars",
+        "mustache"
+    ];
+    readonly value: "handlebars";
 } | {
     readonly name: "ABAP";
     readonly alias: readonly [
@@ -1134,6 +1141,13 @@ export declare function findMatchedLanguage(supportedLanguages: Language[], lang
         "proto"
     ];
     readonly value: "protobuf";
+} | {
+    readonly name: "Handlebars";
+    readonly alias: readonly [
+        "handlebars",
+        "mustache"
+    ];
+    readonly value: "handlebars";
 } | {
     readonly name: "ABAP";
     readonly alias: readonly [
@@ -1709,6 +1723,13 @@ export declare function createLanguageList(supportedLanguages: Language[]): ({
         "proto"
     ];
     readonly value: "protobuf";
+} | {
+    readonly name: "Handlebars";
+    readonly alias: readonly [
+        "handlebars",
+        "mustache"
+    ];
+    readonly value: "handlebars";
 } | {
     readonly name: "ABAP";
     readonly alias: readonly [

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "4.2.5",
+	"version": "4.2.7",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,8 +32,8 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/code": "^16.2.0",
-		"@atlaskit/editor-common": "^102.18.0",
+		"@atlaskit/code": "^17.0.0",
+		"@atlaskit/editor-common": "^102.19.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-composition": "^1.3.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",