@atlaskit/editor-plugin-code-block 3.2.1 → 3.2.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-code-block
 
+## 3.2.3
+
+### Patch Changes
+
+- [#125133](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125133)
+  [`d804e5dd3216b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d804e5dd3216b) -
+  ED-24226 - Add state to manage the toggle word wrap state of code blocks. New WeakMap added in
+  editor-common/src/code-block, as word wrap state is shared throughout the editor. Covers regular
+  changes to code block by the user via the node view update function. Covers breakout of code block
+  node. Does not cover drag&drop & cut&paste edge cases.
+
+## 3.2.2
+
+### Patch Changes
+
+- [#124302](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124302)
+  [`45dc9b6543007`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/45dc9b6543007) -
+  [ux] ED-24228 adding wrap content functionality with feature gate
+
 ## 3.2.1
 
 ### Patch Changes

package/dist/cjs/actions.js

@@ -7,17 +7,20 @@ exports.copyContentToClipboard = exports.changeLanguage = void 0;
 exports.createInsertCodeBlockTransaction = createInsertCodeBlockTransaction;
 exports.ignoreFollowingMutations = void 0;
 exports.insertCodeBlockWithAnalytics = insertCodeBlockWithAnalytics;
-exports.wrapCodeBlock = exports.resetShouldIgnoreFollowingMutations = exports.resetCopiedState = exports.removeCodeBlock = void 0;
+exports.toggleWordWrapStateForCodeBlockNode = exports.resetShouldIgnoreFollowingMutations = exports.resetCopiedState = exports.removeCodeBlock = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _clipboard = require("@atlaskit/editor-common/clipboard");
+var _codeBlock = require("@atlaskit/editor-common/code-block");
 var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
 var _insert = require("@atlaskit/editor-common/insert");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pluginKey = require("./plugin-key");
 var _actions = require("./pm-plugins/actions");
 var _codeBlockCopySelectionPlugin = require("./pm-plugins/codeBlockCopySelectionPlugin");
 var _transformToCodeBlock = require("./transform-to-code-block");
+var _utils2 = require("./utils");
 var removeCodeBlock = exports.removeCodeBlock = function removeCodeBlock(state, dispatch) {
   var nodes = state.schema.nodes,
     tr = state.tr;
@@ -32,11 +35,6 @@ var removeCodeBlock = exports.removeCodeBlock = function removeCodeBlock(state,
   }
   return true;
 };
-
-// we will be hooking the button up in this follow up card ED-24222
-var wrapCodeBlock = exports.wrapCodeBlock = function wrapCodeBlock(state, dispatch) {
-  return false;
-};
 var changeLanguage = exports.changeLanguage = function changeLanguage(editorAnalyticsAPI) {
   return function (language) {
     return function (state, dispatch) {
@@ -203,4 +201,25 @@ function insertCodeBlockWithAnalytics(inputMethod, analyticsAPI) {
     }
     return true;
   });
-}
+}
+
+/**
+ * Add the given node to the codeBlockWrappedStates WeakMap with the toggle boolean value.
+ */
+var toggleWordWrapStateForCodeBlockNode = exports.toggleWordWrapStateForCodeBlockNode = function toggleWordWrapStateForCodeBlockNode(state) {
+  var _findCodeBlock;
+  if (!(0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
+    return false;
+  }
+  var codeBlockNode = (_findCodeBlock = (0, _utils2.findCodeBlock)(state)) === null || _findCodeBlock === void 0 ? void 0 : _findCodeBlock.node;
+  if (!_codeBlock.codeBlockWrappedStates || !codeBlockNode) {
+    return false;
+  }
+  var currentValue = (0, _codeBlock.isCodeBlockWordWrapEnabled)(codeBlockNode);
+  _codeBlock.codeBlockWrappedStates.set(codeBlockNode, !currentValue);
+
+  // TODO: Remove in ED-24222. Leaving here for demo purposes.
+  // eslint-disable-next-line no-console
+  console.log("Code Block Word Wrap: Updating codeBlockWrappedStates with: ".concat(_codeBlock.codeBlockWrappedStates.get(codeBlockNode)));
+  return true;
+};

package/dist/cjs/nodeviews/code-block.js

@@ -9,6 +9,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _codeBlock = require("@atlaskit/editor-common/code-block");
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -16,7 +17,7 @@ var _actions = require("../actions");
 var _mainState = require("../pm-plugins/main-state");
 var _classNames = require("../ui/class-names");
 var MATCH_NEWLINES = new RegExp('\n', 'g');
-var toDOM = function toDOM(node, contentEditable) {
+var toDOM = function toDOM(node, contentEditable, isWrapped) {
   return ['div', {
     class: 'code-block'
   }, ['div', {
@@ -27,12 +28,14 @@ var toDOM = function toDOM(node, contentEditable) {
   }, ['div', {
     class: _classNames.codeBlockClassNames.gutter,
     contenteditable: 'false'
-  }], ['div', {
+  }], ['div', isWrapped && (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? {
+    class: "".concat(_classNames.codeBlockClassNames.content, " ").concat(_classNames.codeBlockClassNames.contentWrapped)
+  } : {
     class: _classNames.codeBlockClassNames.content
   }, ['code', {
     'data-language': node.attrs.language || '',
     spellcheck: 'false',
-    contenteditable: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') ? contentEditable ? 'true' : 'false' : 'true',
+    contenteditable: (0, _platformFeatureFlags.fg)('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') ? contentEditable ? 'true' : 'false' : 'true',
     'data-testid': 'code-block--code'
   }, 0]]], ['div', {
     class: _classNames.codeBlockClassNames.end,
@@ -40,7 +43,7 @@ var toDOM = function toDOM(node, contentEditable) {
   }]];
 };
 var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
-  function CodeBlockView(_node, view, getPos, api, cleanupEditorDisabledListener) {
+  function CodeBlockView(_node, view, getPos, api, isWrapped, cleanupEditorDisabledListener) {
     var _this = this,
       _api$editorDisabled;
     (0, _classCallCheck2.default)(this, CodeBlockView);
@@ -60,7 +63,7 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
       }
     }));
     this.cleanupEditorDisabledListener = cleanupEditorDisabledListener;
-    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled !== void 0 && _api$editorDisabled.editorDisabled))),
+    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled !== void 0 && _api$editorDisabled.editorDisabled), isWrapped)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
     this.getPos = getPos;
@@ -70,6 +73,7 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
     this.contentDOM = contentDOM;
     this.lineNumberGutter = this.dom.querySelector(".".concat(_classNames.codeBlockClassNames.gutter));
     this.api = api;
+    this.isWrapped = isWrapped;
     this.ensureLineNumbers();
     this.handleEditorDisabledChanged();
   }
@@ -78,7 +82,7 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
     value: function handleEditorDisabledChanged() {
       var _this$api,
         _this2 = this;
-      if ((_this$api = this.api) !== null && _this$api !== void 0 && _this$api.editorDisabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
+      if ((_this$api = this.api) !== null && _this$api !== void 0 && _this$api.editorDisabled && (0, _platformFeatureFlags.fg)('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
         this.cleanupEditorDisabledListener = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
           if (_this2.contentDOM) {
             _this2.contentDOM.setAttribute('contenteditable', sharedState.nextSharedState.editorDisabled ? 'false' : 'true');
@@ -139,6 +143,9 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
         return false;
       }
       if (node !== this.node) {
+        if ((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
+          (0, _codeBlock.transferCodeBlockWrappedValue)(this.node, node);
+        }
         if (node.attrs.language !== this.node.attrs.language) {
           this.contentDOM.setAttribute('data-language', node.attrs.language || '');
         }
@@ -173,6 +180,6 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
   }]);
   return CodeBlockView;
 }();
-var codeBlockNodeView = exports.codeBlockNodeView = function codeBlockNodeView(node, view, getPos, api) {
-  return new CodeBlockView(node, view, getPos, api);
+var codeBlockNodeView = exports.codeBlockNodeView = function codeBlockNodeView(node, view, getPos, api, isWrapped) {
+  return new CodeBlockView(node, view, getPos, api, isWrapped);
 };

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

@@ -24,7 +24,9 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
     getIntl = _ref.getIntl,
     _ref$allowComposition = _ref.allowCompositionInputOverride,
     allowCompositionInputOverride = _ref$allowComposition === void 0 ? false : _ref$allowComposition,
-    api = _ref.api;
+    api = _ref.api,
+    _ref$isWrapped = _ref.isWrapped,
+    isWrapped = _ref$isWrapped === void 0 ? false : _ref$isWrapped;
   var handleDOMEvents = {};
 
   // ME-1599: Composition on mobile was causing the DOM observer to mutate the code block
@@ -102,7 +104,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
     props: {
       nodeViews: {
         codeBlock: function codeBlock(node, view, getPos) {
-          return (0, _codeBlock.codeBlockNodeView)(node, view, getPos, api);
+          return (0, _codeBlock.codeBlockNodeView)(node, view, getPos, api, isWrapped);
         }
       },
       handleClickOn: (0, _selection.createSelectionClickHandler)(['codeBlock'], function (target) {

package/dist/cjs/toolbar.js

@@ -105,7 +105,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
       id: 'editor.codeBlock.wrap',
       type: 'button',
       icon: _WrapIcon.WrapIcon,
-      onClick: _actions.wrapCodeBlock,
+      onClick: _actions.toggleWordWrapStateForCodeBlockNode,
+      // Hooking up here for demo purposes. To be revisited with ED-24222.
       title: formatMessage(_messages.codeBlockButtonMessages.wrapCode),
       tabIndex: null
     };

package/dist/cjs/ui/class-names.js

@@ -11,5 +11,6 @@ var codeBlockClassNames = exports.codeBlockClassNames = {
   end: _styles.CodeBlockSharedCssClassName.CODEBLOCK_END,
   contentWrapper: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
   gutter: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER,
-  content: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
+  content: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
+  contentWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED
 };

package/dist/es2019/actions.js

@@ -1,13 +1,16 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { copyToClipboard } from '@atlaskit/editor-common/clipboard';
+import { codeBlockWrappedStates, isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType, isNodeSelection, removeParentNodeOfType, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { pluginKey } from './plugin-key';
 import { ACTIONS } from './pm-plugins/actions';
 import { copySelectionPluginKey } from './pm-plugins/codeBlockCopySelectionPlugin';
 import { transformToCodeBlockAction } from './transform-to-code-block';
+import { findCodeBlock } from './utils';
 export const removeCodeBlock = (state, dispatch) => {
   const {
     schema: {
@@ -26,11 +29,6 @@ export const removeCodeBlock = (state, dispatch) => {
   }
   return true;
 };
-
-// we will be hooking the button up in this follow up card ED-24222
-export const wrapCodeBlock = (state, dispatch) => {
-  return false;
-};
 export const changeLanguage = editorAnalyticsAPI => language => (state, dispatch) => {
   var _pluginKey$getState;
   const {
@@ -213,4 +211,25 @@ export function insertCodeBlockWithAnalytics(inputMethod, analyticsAPI) {
     }
     return true;
   });
-}
+}
+
+/**
+ * Add the given node to the codeBlockWrappedStates WeakMap with the toggle boolean value.
+ */
+export const toggleWordWrapStateForCodeBlockNode = state => {
+  var _findCodeBlock;
+  if (!fg('editor_support_code_block_wrapping')) {
+    return false;
+  }
+  const codeBlockNode = (_findCodeBlock = findCodeBlock(state)) === null || _findCodeBlock === void 0 ? void 0 : _findCodeBlock.node;
+  if (!codeBlockWrappedStates || !codeBlockNode) {
+    return false;
+  }
+  const currentValue = isCodeBlockWordWrapEnabled(codeBlockNode);
+  codeBlockWrappedStates.set(codeBlockNode, !currentValue);
+
+  // TODO: Remove in ED-24222. Leaving here for demo purposes.
+  // eslint-disable-next-line no-console
+  console.log(`Code Block Word Wrap: Updating codeBlockWrappedStates with: ${codeBlockWrappedStates.get(codeBlockNode)}`);
+  return true;
+};

package/dist/es2019/nodeviews/code-block.js

@@ -1,13 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import rafSchedule from 'raf-schd';
+import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
 import { browser } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { resetShouldIgnoreFollowingMutations } from '../actions';
 import { getPluginState } from '../pm-plugins/main-state';
 import { codeBlockClassNames } from '../ui/class-names';
 const MATCH_NEWLINES = new RegExp('\n', 'g');
-const toDOM = (node, contentEditable) => ['div', {
+const toDOM = (node, contentEditable, isWrapped) => ['div', {
   class: 'code-block'
 }, ['div', {
   class: codeBlockClassNames.start,
@@ -17,19 +18,21 @@ const toDOM = (node, contentEditable) => ['div', {
 }, ['div', {
   class: codeBlockClassNames.gutter,
   contenteditable: 'false'
-}], ['div', {
+}], ['div', isWrapped && fg('editor_support_code_block_wrapping') ? {
+  class: `${codeBlockClassNames.content} ${codeBlockClassNames.contentWrapped}`
+} : {
   class: codeBlockClassNames.content
 }, ['code', {
   'data-language': node.attrs.language || '',
   spellcheck: 'false',
-  contenteditable: getBooleanFF('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') ? contentEditable ? 'true' : 'false' : 'true',
+  contenteditable: fg('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') ? contentEditable ? 'true' : 'false' : 'true',
   'data-testid': 'code-block--code'
 }, 0]]], ['div', {
   class: codeBlockClassNames.end,
   contenteditable: 'false'
 }]];
 export class CodeBlockView {
-  constructor(_node, view, getPos, api, cleanupEditorDisabledListener) {
+  constructor(_node, view, getPos, api, isWrapped, cleanupEditorDisabledListener) {
     var _api$editorDisabled, _api$editorDisabled$s;
     _defineProperty(this, "ensureLineNumbers", rafSchedule(() => {
       let lines = 1;
@@ -50,7 +53,7 @@ export class CodeBlockView {
     const {
       dom,
       contentDOM
-    } = DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled$s !== void 0 && _api$editorDisabled$s.editorDisabled)));
+    } = DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled$s !== void 0 && _api$editorDisabled$s.editorDisabled), isWrapped));
     this.getPos = getPos;
     this.view = view;
     this.node = _node;
@@ -58,12 +61,13 @@ export class CodeBlockView {
     this.contentDOM = contentDOM;
     this.lineNumberGutter = this.dom.querySelector(`.${codeBlockClassNames.gutter}`);
     this.api = api;
+    this.isWrapped = isWrapped;
     this.ensureLineNumbers();
     this.handleEditorDisabledChanged();
   }
   handleEditorDisabledChanged() {
     var _this$api;
-    if ((_this$api = this.api) !== null && _this$api !== void 0 && _this$api.editorDisabled && getBooleanFF('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
+    if ((_this$api = this.api) !== null && _this$api !== void 0 && _this$api.editorDisabled && fg('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
       this.cleanupEditorDisabledListener = this.api.editorDisabled.sharedState.onChange(sharedState => {
         if (this.contentDOM) {
           this.contentDOM.setAttribute('contenteditable', sharedState.nextSharedState.editorDisabled ? 'false' : 'true');
@@ -116,6 +120,9 @@ export class CodeBlockView {
       return false;
     }
     if (node !== this.node) {
+      if (fg('editor_support_code_block_wrapping')) {
+        transferCodeBlockWrappedValue(this.node, node);
+      }
       if (node.attrs.language !== this.node.attrs.language) {
         this.contentDOM.setAttribute('data-language', node.attrs.language || '');
       }
@@ -144,4 +151,4 @@ export class CodeBlockView {
     this.cleanupEditorDisabledListener = undefined;
   }
 }
-export const codeBlockNodeView = (node, view, getPos, api) => new CodeBlockView(node, view, getPos, api);
+export const codeBlockNodeView = (node, view, getPos, api, isWrapped) => new CodeBlockView(node, view, getPos, api, isWrapped);

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

@@ -12,7 +12,8 @@ export const createPlugin = ({
   useLongPressSelection = false,
   getIntl,
   allowCompositionInputOverride = false,
-  api
+  api,
+  isWrapped = false
 }) => {
   const handleDOMEvents = {};
 
@@ -91,7 +92,7 @@ export const createPlugin = ({
     key: pluginKey,
     props: {
       nodeViews: {
-        codeBlock: (node, view, getPos) => codeBlockNodeView(node, view, getPos, api)
+        codeBlock: (node, view, getPos) => codeBlockNodeView(node, view, getPos, api, isWrapped)
       },
       handleClickOn: createSelectionClickHandler(['codeBlock'], target => !!(target.closest(`.${codeBlockClassNames.gutter}`) || target.classList.contains(codeBlockClassNames.content)), {
         useLongPressSelection

package/dist/es2019/toolbar.js

@@ -3,7 +3,7 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { changeLanguage, copyContentToClipboard, removeCodeBlock, resetCopiedState, wrapCodeBlock } from './actions';
+import { changeLanguage, copyContentToClipboard, removeCodeBlock, resetCopiedState, toggleWordWrapStateForCodeBlockNode } from './actions';
 import { createLanguageList, DEFAULT_LANGUAGES, getLanguageIdentifier } from './language-list';
 import { pluginKey } from './plugin-key';
 import { provideVisualFeedbackForCopyButton, removeVisualFeedbackForCopyButton } from './pm-plugins/codeBlockCopySelectionPlugin';
@@ -86,7 +86,8 @@ export const getToolbarConfig = (allowCopyToClipboard = false, api) => (state, {
     id: 'editor.codeBlock.wrap',
     type: 'button',
     icon: WrapIcon,
-    onClick: wrapCodeBlock,
+    onClick: toggleWordWrapStateForCodeBlockNode,
+    // Hooking up here for demo purposes. To be revisited with ED-24222.
     title: formatMessage(codeBlockButtonMessages.wrapCode),
     tabIndex: null
   };

package/dist/es2019/ui/class-names.js

@@ -5,5 +5,6 @@ export const codeBlockClassNames = {
   end: CodeBlockSharedCssClassName.CODEBLOCK_END,
   contentWrapper: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
   gutter: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER,
-  content: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
+  content: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
+  contentWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED
 };

package/dist/esm/actions.js

@@ -1,13 +1,16 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { copyToClipboard } from '@atlaskit/editor-common/clipboard';
+import { codeBlockWrappedStates, isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType, isNodeSelection, removeParentNodeOfType, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { pluginKey } from './plugin-key';
 import { ACTIONS } from './pm-plugins/actions';
 import { copySelectionPluginKey } from './pm-plugins/codeBlockCopySelectionPlugin';
 import { transformToCodeBlockAction } from './transform-to-code-block';
+import { findCodeBlock } from './utils';
 export var removeCodeBlock = function removeCodeBlock(state, dispatch) {
   var nodes = state.schema.nodes,
     tr = state.tr;
@@ -22,11 +25,6 @@ export var removeCodeBlock = function removeCodeBlock(state, dispatch) {
   }
   return true;
 };
-
-// we will be hooking the button up in this follow up card ED-24222
-export var wrapCodeBlock = function wrapCodeBlock(state, dispatch) {
-  return false;
-};
 export var changeLanguage = function changeLanguage(editorAnalyticsAPI) {
   return function (language) {
     return function (state, dispatch) {
@@ -193,4 +191,25 @@ export function insertCodeBlockWithAnalytics(inputMethod, analyticsAPI) {
     }
     return true;
   });
-}
+}
+
+/**
+ * Add the given node to the codeBlockWrappedStates WeakMap with the toggle boolean value.
+ */
+export var toggleWordWrapStateForCodeBlockNode = function toggleWordWrapStateForCodeBlockNode(state) {
+  var _findCodeBlock;
+  if (!fg('editor_support_code_block_wrapping')) {
+    return false;
+  }
+  var codeBlockNode = (_findCodeBlock = findCodeBlock(state)) === null || _findCodeBlock === void 0 ? void 0 : _findCodeBlock.node;
+  if (!codeBlockWrappedStates || !codeBlockNode) {
+    return false;
+  }
+  var currentValue = isCodeBlockWordWrapEnabled(codeBlockNode);
+  codeBlockWrappedStates.set(codeBlockNode, !currentValue);
+
+  // TODO: Remove in ED-24222. Leaving here for demo purposes.
+  // eslint-disable-next-line no-console
+  console.log("Code Block Word Wrap: Updating codeBlockWrappedStates with: ".concat(codeBlockWrappedStates.get(codeBlockNode)));
+  return true;
+};

package/dist/esm/nodeviews/code-block.js

@@ -2,14 +2,15 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import rafSchedule from 'raf-schd';
+import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
 import { browser } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { resetShouldIgnoreFollowingMutations } from '../actions';
 import { getPluginState } from '../pm-plugins/main-state';
 import { codeBlockClassNames } from '../ui/class-names';
 var MATCH_NEWLINES = new RegExp('\n', 'g');
-var toDOM = function toDOM(node, contentEditable) {
+var toDOM = function toDOM(node, contentEditable, isWrapped) {
   return ['div', {
     class: 'code-block'
   }, ['div', {
@@ -20,12 +21,14 @@ var toDOM = function toDOM(node, contentEditable) {
   }, ['div', {
     class: codeBlockClassNames.gutter,
     contenteditable: 'false'
-  }], ['div', {
+  }], ['div', isWrapped && fg('editor_support_code_block_wrapping') ? {
+    class: "".concat(codeBlockClassNames.content, " ").concat(codeBlockClassNames.contentWrapped)
+  } : {
     class: codeBlockClassNames.content
   }, ['code', {
     'data-language': node.attrs.language || '',
     spellcheck: 'false',
-    contenteditable: getBooleanFF('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') ? contentEditable ? 'true' : 'false' : 'true',
+    contenteditable: fg('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') ? contentEditable ? 'true' : 'false' : 'true',
     'data-testid': 'code-block--code'
   }, 0]]], ['div', {
     class: codeBlockClassNames.end,
@@ -33,7 +36,7 @@ var toDOM = function toDOM(node, contentEditable) {
   }]];
 };
 export var CodeBlockView = /*#__PURE__*/function () {
-  function CodeBlockView(_node, view, getPos, api, cleanupEditorDisabledListener) {
+  function CodeBlockView(_node, view, getPos, api, isWrapped, cleanupEditorDisabledListener) {
     var _this = this,
       _api$editorDisabled;
     _classCallCheck(this, CodeBlockView);
@@ -53,7 +56,7 @@ export var CodeBlockView = /*#__PURE__*/function () {
       }
     }));
     this.cleanupEditorDisabledListener = cleanupEditorDisabledListener;
-    var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled !== void 0 && _api$editorDisabled.editorDisabled))),
+    var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled !== void 0 && _api$editorDisabled.editorDisabled), isWrapped)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
     this.getPos = getPos;
@@ -63,6 +66,7 @@ export var CodeBlockView = /*#__PURE__*/function () {
     this.contentDOM = contentDOM;
     this.lineNumberGutter = this.dom.querySelector(".".concat(codeBlockClassNames.gutter));
     this.api = api;
+    this.isWrapped = isWrapped;
     this.ensureLineNumbers();
     this.handleEditorDisabledChanged();
   }
@@ -71,7 +75,7 @@ export var CodeBlockView = /*#__PURE__*/function () {
     value: function handleEditorDisabledChanged() {
       var _this$api,
         _this2 = this;
-      if ((_this$api = this.api) !== null && _this$api !== void 0 && _this$api.editorDisabled && getBooleanFF('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
+      if ((_this$api = this.api) !== null && _this$api !== void 0 && _this$api.editorDisabled && fg('platform.editor.live-view.disable-editing-in-view-mode_fi1rx')) {
         this.cleanupEditorDisabledListener = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
           if (_this2.contentDOM) {
             _this2.contentDOM.setAttribute('contenteditable', sharedState.nextSharedState.editorDisabled ? 'false' : 'true');
@@ -132,6 +136,9 @@ export var CodeBlockView = /*#__PURE__*/function () {
         return false;
       }
       if (node !== this.node) {
+        if (fg('editor_support_code_block_wrapping')) {
+          transferCodeBlockWrappedValue(this.node, node);
+        }
         if (node.attrs.language !== this.node.attrs.language) {
           this.contentDOM.setAttribute('data-language', node.attrs.language || '');
         }
@@ -166,6 +173,6 @@ export var CodeBlockView = /*#__PURE__*/function () {
   }]);
   return CodeBlockView;
 }();
-export var codeBlockNodeView = function codeBlockNodeView(node, view, getPos, api) {
-  return new CodeBlockView(node, view, getPos, api);
+export var codeBlockNodeView = function codeBlockNodeView(node, view, getPos, api, isWrapped) {
+  return new CodeBlockView(node, view, getPos, api, isWrapped);
 };

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

@@ -17,7 +17,9 @@ export var createPlugin = function createPlugin(_ref) {
     getIntl = _ref.getIntl,
     _ref$allowComposition = _ref.allowCompositionInputOverride,
     allowCompositionInputOverride = _ref$allowComposition === void 0 ? false : _ref$allowComposition,
-    api = _ref.api;
+    api = _ref.api,
+    _ref$isWrapped = _ref.isWrapped,
+    isWrapped = _ref$isWrapped === void 0 ? false : _ref$isWrapped;
   var handleDOMEvents = {};
 
   // ME-1599: Composition on mobile was causing the DOM observer to mutate the code block
@@ -95,7 +97,7 @@ export var createPlugin = function createPlugin(_ref) {
     props: {
       nodeViews: {
         codeBlock: function codeBlock(node, view, getPos) {
-          return codeBlockNodeView(node, view, getPos, api);
+          return codeBlockNodeView(node, view, getPos, api, isWrapped);
         }
       },
       handleClickOn: createSelectionClickHandler(['codeBlock'], function (target) {

package/dist/esm/toolbar.js

@@ -3,7 +3,7 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { changeLanguage, copyContentToClipboard, removeCodeBlock, resetCopiedState, wrapCodeBlock } from './actions';
+import { changeLanguage, copyContentToClipboard, removeCodeBlock, resetCopiedState, toggleWordWrapStateForCodeBlockNode } from './actions';
 import { createLanguageList, DEFAULT_LANGUAGES, getLanguageIdentifier } from './language-list';
 import { pluginKey } from './plugin-key';
 import { provideVisualFeedbackForCopyButton, removeVisualFeedbackForCopyButton } from './pm-plugins/codeBlockCopySelectionPlugin';
@@ -95,7 +95,8 @@ export var getToolbarConfig = function getToolbarConfig() {
       id: 'editor.codeBlock.wrap',
       type: 'button',
       icon: WrapIcon,
-      onClick: wrapCodeBlock,
+      onClick: toggleWordWrapStateForCodeBlockNode,
+      // Hooking up here for demo purposes. To be revisited with ED-24222.
       title: formatMessage(codeBlockButtonMessages.wrapCode),
       tabIndex: null
     };

package/dist/esm/ui/class-names.js

@@ -5,5 +5,6 @@ export var codeBlockClassNames = {
   end: CodeBlockSharedCssClassName.CODEBLOCK_END,
   contentWrapper: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
   gutter: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER,
-  content: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
+  content: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
+  contentWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED
 };

package/dist/types/actions.d.ts

@@ -2,7 +2,6 @@ import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/a
 import type { Command } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 export declare const removeCodeBlock: Command;
-export declare const wrapCodeBlock: Command;
 export declare const changeLanguage: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (language: string) => Command;
 export declare const copyContentToClipboard: Command;
 export declare const resetCopiedState: Command;
@@ -17,3 +16,7 @@ export declare function createInsertCodeBlockTransaction({ state }: {
     state: EditorState;
 }): import("prosemirror-state").Transaction;
 export declare function insertCodeBlockWithAnalytics(inputMethod: INPUT_METHOD, analyticsAPI?: EditorAnalyticsAPI): Command;
+/**
+ * Add the given node to the codeBlockWrappedStates WeakMap with the toggle boolean value.
+ */
+export declare const toggleWordWrapStateForCodeBlockNode: Command;

package/dist/types/nodeviews/code-block.d.ts

@@ -11,7 +11,8 @@ export declare class CodeBlockView {
     getPos: getPosHandlerNode;
     view: EditorView;
     api?: ExtractInjectionAPI<CodeBlockPlugin>;
-    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, api?: ExtractInjectionAPI<CodeBlockPlugin>, cleanupEditorDisabledListener?: (() => void) | undefined);
+    isWrapped?: boolean;
+    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, api?: ExtractInjectionAPI<CodeBlockPlugin>, isWrapped?: boolean, cleanupEditorDisabledListener?: (() => void) | undefined);
     handleEditorDisabledChanged(): void;
     updateDOMAndSelection(savedInnerHTML: string, newCursorPosition: number): void;
     coalesceDOMElements(): void;
@@ -23,4 +24,4 @@ export declare class CodeBlockView {
     }): boolean;
     destroy(): void;
 }
-export declare const codeBlockNodeView: (node: Node, view: EditorView, getPos: getPosHandler, api: ExtractInjectionAPI<CodeBlockPlugin> | undefined) => CodeBlockView;
+export declare const codeBlockNodeView: (node: Node, view: EditorView, getPos: getPosHandler, api: ExtractInjectionAPI<CodeBlockPlugin> | undefined, isWrapped: boolean | undefined) => CodeBlockView;

package/dist/types/pm-plugins/main.d.ts

@@ -2,8 +2,8 @@ import type { IntlShape } from 'react-intl-next';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { CodeBlockPlugin } from '../index';
-import type { CodeBlockState } from './main-state';
-export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompositionInputOverride, api, }: {
+import { type CodeBlockState } from './main-state';
+export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompositionInputOverride, api, isWrapped, }: {
     useLongPressSelection?: boolean | undefined;
     getIntl: () => IntlShape;
     allowCompositionInputOverride?: boolean | undefined;
@@ -36,4 +36,5 @@ export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompo
             insertCodeBlock: (inputMethod: import("@atlaskit/editor-common/analytics").INPUT_METHOD) => import("@atlaskit/editor-common/types").Command;
         };
     }> | undefined;
+    isWrapped?: boolean | undefined;
 }) => SafePlugin<CodeBlockState>;

package/dist/types/ui/class-names.d.ts

@@ -5,4 +5,5 @@ export declare const codeBlockClassNames: {
     contentWrapper: string;
     gutter: string;
     content: string;
+    contentWrapped: string;
 };

package/dist/types-ts4.5/actions.d.ts

@@ -2,7 +2,6 @@ import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/a
 import type { Command } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 export declare const removeCodeBlock: Command;
-export declare const wrapCodeBlock: Command;
 export declare const changeLanguage: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (language: string) => Command;
 export declare const copyContentToClipboard: Command;
 export declare const resetCopiedState: Command;
@@ -17,3 +16,7 @@ export declare function createInsertCodeBlockTransaction({ state }: {
     state: EditorState;
 }): import("prosemirror-state").Transaction;
 export declare function insertCodeBlockWithAnalytics(inputMethod: INPUT_METHOD, analyticsAPI?: EditorAnalyticsAPI): Command;
+/**
+ * Add the given node to the codeBlockWrappedStates WeakMap with the toggle boolean value.
+ */
+export declare const toggleWordWrapStateForCodeBlockNode: Command;

package/dist/types-ts4.5/nodeviews/code-block.d.ts

@@ -11,7 +11,8 @@ export declare class CodeBlockView {
     getPos: getPosHandlerNode;
     view: EditorView;
     api?: ExtractInjectionAPI<CodeBlockPlugin>;
-    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, api?: ExtractInjectionAPI<CodeBlockPlugin>, cleanupEditorDisabledListener?: (() => void) | undefined);
+    isWrapped?: boolean;
+    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, api?: ExtractInjectionAPI<CodeBlockPlugin>, isWrapped?: boolean, cleanupEditorDisabledListener?: (() => void) | undefined);
     handleEditorDisabledChanged(): void;
     updateDOMAndSelection(savedInnerHTML: string, newCursorPosition: number): void;
     coalesceDOMElements(): void;
@@ -23,4 +24,4 @@ export declare class CodeBlockView {
     }): boolean;
     destroy(): void;
 }
-export declare const codeBlockNodeView: (node: Node, view: EditorView, getPos: getPosHandler, api: ExtractInjectionAPI<CodeBlockPlugin> | undefined) => CodeBlockView;
+export declare const codeBlockNodeView: (node: Node, view: EditorView, getPos: getPosHandler, api: ExtractInjectionAPI<CodeBlockPlugin> | undefined, isWrapped: boolean | undefined) => CodeBlockView;

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

@@ -2,8 +2,8 @@ import type { IntlShape } from 'react-intl-next';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { CodeBlockPlugin } from '../index';
-import type { CodeBlockState } from './main-state';
-export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompositionInputOverride, api, }: {
+import { type CodeBlockState } from './main-state';
+export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompositionInputOverride, api, isWrapped, }: {
     useLongPressSelection?: boolean | undefined;
     getIntl: () => IntlShape;
     allowCompositionInputOverride?: boolean | undefined;
@@ -43,4 +43,5 @@ export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompo
             insertCodeBlock: (inputMethod: import("@atlaskit/editor-common/analytics").INPUT_METHOD) => import("@atlaskit/editor-common/types").Command;
         };
     }> | undefined;
+    isWrapped?: boolean | undefined;
 }) => SafePlugin<CodeBlockState>;

package/dist/types-ts4.5/ui/class-names.d.ts

@@ -5,4 +5,5 @@ export declare const codeBlockClassNames: {
     contentWrapper: string;
     gutter: string;
     content: string;
+    contentWrapped: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "3.2.1",
+	"version": "3.2.3",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -41,7 +41,7 @@
 		"@atlaskit/editor-plugin-decorations": "^1.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.2.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
-		"@atlaskit/icon": "^22.7.0",
+		"@atlaskit/icon": "^22.8.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/prosemirror-input-rules": "^3.2.0",
 		"@babel/runtime": "^7.0.0",