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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @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

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");
@@ -142,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 || '');
         }

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/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,5 +1,6 @@
 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 { fg } from '@atlaskit/platform-feature-flags';
@@ -119,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 || '');
       }

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/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,6 +2,7 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
@@ -135,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 || '');
         }

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/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/pm-plugins/main.d.ts

@@ -2,7 +2,7 @@ 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';
+import { type CodeBlockState } from './main-state';
 export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompositionInputOverride, api, isWrapped, }: {
     useLongPressSelection?: boolean | undefined;
     getIntl: () => IntlShape;

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/pm-plugins/main.d.ts

@@ -2,7 +2,7 @@ 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';
+import { type CodeBlockState } from './main-state';
 export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompositionInputOverride, api, isWrapped, }: {
     useLongPressSelection?: boolean | undefined;
     getIntl: () => IntlShape;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "3.2.2",
+	"version": "3.2.3",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",