@atlaskit/editor-plugin-code-block 3.0.2 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-code-block
 
+## 3.1.0
+
+### Minor Changes
+
+- [#122895](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122895)
+  [`49b8c7658f3b5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/49b8c7658f3b5) -
+  [ED-24173] bump @atlaskit/adf-schema to 40.3.0 and @atlassian/adf-schema-json to 1.18.0
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.0.3
+
+### Patch Changes
+
+- [#122977](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122977)
+  [`41748db2c12de`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/41748db2c12de) -
+  [ux]ED-24225 add wrap button inside editor-plugin-block
+- Updated dependencies
+
 ## 3.0.2
 
 ### Patch Changes

package/dist/cjs/actions.js

@@ -7,7 +7,7 @@ exports.copyContentToClipboard = exports.changeLanguage = void 0;
 exports.createInsertCodeBlockTransaction = createInsertCodeBlockTransaction;
 exports.ignoreFollowingMutations = void 0;
 exports.insertCodeBlockWithAnalytics = insertCodeBlockWithAnalytics;
-exports.resetShouldIgnoreFollowingMutations = exports.resetCopiedState = exports.removeCodeBlock = void 0;
+exports.wrapCodeBlock = exports.resetShouldIgnoreFollowingMutations = exports.resetCopiedState = exports.removeCodeBlock = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _clipboard = require("@atlaskit/editor-common/clipboard");
 var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
@@ -32,6 +32,11 @@ 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) {

package/dist/cjs/toolbar.js

@@ -10,10 +10,12 @@ var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/message
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _copy = _interopRequireDefault(require("@atlaskit/icon/glyph/copy"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actions = require("./actions");
 var _languageList = require("./language-list");
 var _pluginKey = require("./plugin-key");
 var _codeBlockCopySelectionPlugin = require("./pm-plugins/codeBlockCopySelectionPlugin");
+var _WrapIcon = require("./ui/icons/WrapIcon");
 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" != _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 && Object.prototype.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 languageList = (0, _languageList.createLanguageList)(_languageList.DEFAULT_LANGUAGES);
@@ -99,13 +101,21 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
       title: formatMessage(_messages.default.remove),
       tabIndex: null
     };
+    var codeBlockWrapButton = {
+      id: 'editor.codeBlock.wrap',
+      type: 'button',
+      icon: _WrapIcon.WrapIcon,
+      onClick: _actions.wrapCodeBlock,
+      title: formatMessage(_messages.codeBlockButtonMessages.wrapCode),
+      tabIndex: null
+    };
     return {
       title: 'CodeBlock floating controls',
       getDomRef: function getDomRef(view) {
         return (0, _utils.findDomRefAtPos)(pos, view.domAtPos.bind(view));
       },
       nodeType: nodeType,
-      items: [languageSelect, separator].concat(copyToClipboardItems, [deleteButton]),
+      items: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? [languageSelect, separator, codeBlockWrapButton, separator].concat(copyToClipboardItems, [deleteButton]) : [languageSelect, separator].concat(copyToClipboardItems, [deleteButton]),
       scrollable: true
     };
   };

package/dist/cjs/ui/icons/WrapIcon.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WrapIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+var CustomGlyph = function CustomGlyph() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "24",
+    height: "24",
+    fill: "none",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    fill: "currentColor",
+    clipPath: "url(#clip0_654_431)"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M20 4h-1v16h1V4ZM3 8a1 1 0 0 1 1-1h9.5a4.5 4.5 0 1 1 0 9h-2.086l.293.293a1 1 0 0 1-1.414 1.414l-2-2a1 1 0 0 1 0-1.414l2-2a1 1 0 0 1 1.414 1.414l-.293.293H13.5a2.5 2.5 0 0 0 0-5H4a1 1 0 0 1-1-1Z",
+    clipRule: "evenodd",
+    fillRule: "evenodd"
+  })));
+};
+var WrapIcon = exports.WrapIcon = function WrapIcon() {
+  return /*#__PURE__*/_react.default.createElement(_icon.default, {
+    glyph: CustomGlyph,
+    label: "wrapIcon"
+  });
+};

package/dist/es2019/actions.js

@@ -26,6 +26,11 @@ 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 {

package/dist/es2019/toolbar.js

@@ -2,10 +2,12 @@ import commonMessages, { codeBlockButtonMessages } from '@atlaskit/editor-common
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
-import { changeLanguage, copyContentToClipboard, removeCodeBlock, resetCopiedState } from './actions';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { changeLanguage, copyContentToClipboard, removeCodeBlock, resetCopiedState, wrapCodeBlock } from './actions';
 import { createLanguageList, DEFAULT_LANGUAGES, getLanguageIdentifier } from './language-list';
 import { pluginKey } from './plugin-key';
 import { provideVisualFeedbackForCopyButton, removeVisualFeedbackForCopyButton } from './pm-plugins/codeBlockCopySelectionPlugin';
+import { WrapIcon } from './ui/icons/WrapIcon';
 const languageList = createLanguageList(DEFAULT_LANGUAGES);
 export const getToolbarConfig = (allowCopyToClipboard = false, api) => (state, {
   formatMessage
@@ -80,11 +82,19 @@ export const getToolbarConfig = (allowCopyToClipboard = false, api) => (state, {
     title: formatMessage(commonMessages.remove),
     tabIndex: null
   };
+  const codeBlockWrapButton = {
+    id: 'editor.codeBlock.wrap',
+    type: 'button',
+    icon: WrapIcon,
+    onClick: wrapCodeBlock,
+    title: formatMessage(codeBlockButtonMessages.wrapCode),
+    tabIndex: null
+  };
   return {
     title: 'CodeBlock floating controls',
     getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
     nodeType,
-    items: [languageSelect, separator, ...copyToClipboardItems, deleteButton],
+    items: fg('editor_support_code_block_wrapping') ? [languageSelect, separator, codeBlockWrapButton, separator, ...copyToClipboardItems, deleteButton] : [languageSelect, separator, ...copyToClipboardItems, deleteButton],
     scrollable: true
   };
 };

package/dist/es2019/ui/icons/WrapIcon.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Icon from '@atlaskit/icon';
+const CustomGlyph = () => /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, /*#__PURE__*/React.createElement("g", {
+  fill: "currentColor",
+  clipPath: "url(#clip0_654_431)"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M20 4h-1v16h1V4ZM3 8a1 1 0 0 1 1-1h9.5a4.5 4.5 0 1 1 0 9h-2.086l.293.293a1 1 0 0 1-1.414 1.414l-2-2a1 1 0 0 1 0-1.414l2-2a1 1 0 0 1 1.414 1.414l-.293.293H13.5a2.5 2.5 0 0 0 0-5H4a1 1 0 0 1-1-1Z",
+  clipRule: "evenodd",
+  fillRule: "evenodd"
+})));
+export const WrapIcon = () => {
+  return /*#__PURE__*/React.createElement(Icon, {
+    glyph: CustomGlyph,
+    label: "wrapIcon"
+  });
+};

package/dist/esm/actions.js

@@ -22,6 +22,11 @@ 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) {

package/dist/esm/toolbar.js

@@ -2,10 +2,12 @@ import commonMessages, { codeBlockButtonMessages } from '@atlaskit/editor-common
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
-import { changeLanguage, copyContentToClipboard, removeCodeBlock, resetCopiedState } from './actions';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { changeLanguage, copyContentToClipboard, removeCodeBlock, resetCopiedState, wrapCodeBlock } from './actions';
 import { createLanguageList, DEFAULT_LANGUAGES, getLanguageIdentifier } from './language-list';
 import { pluginKey } from './plugin-key';
 import { provideVisualFeedbackForCopyButton, removeVisualFeedbackForCopyButton } from './pm-plugins/codeBlockCopySelectionPlugin';
+import { WrapIcon } from './ui/icons/WrapIcon';
 var languageList = createLanguageList(DEFAULT_LANGUAGES);
 export var getToolbarConfig = function getToolbarConfig() {
   var allowCopyToClipboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -89,13 +91,21 @@ export var getToolbarConfig = function getToolbarConfig() {
       title: formatMessage(commonMessages.remove),
       tabIndex: null
     };
+    var codeBlockWrapButton = {
+      id: 'editor.codeBlock.wrap',
+      type: 'button',
+      icon: WrapIcon,
+      onClick: wrapCodeBlock,
+      title: formatMessage(codeBlockButtonMessages.wrapCode),
+      tabIndex: null
+    };
     return {
       title: 'CodeBlock floating controls',
       getDomRef: function getDomRef(view) {
         return findDomRefAtPos(pos, view.domAtPos.bind(view));
       },
       nodeType: nodeType,
-      items: [languageSelect, separator].concat(copyToClipboardItems, [deleteButton]),
+      items: fg('editor_support_code_block_wrapping') ? [languageSelect, separator, codeBlockWrapButton, separator].concat(copyToClipboardItems, [deleteButton]) : [languageSelect, separator].concat(copyToClipboardItems, [deleteButton]),
       scrollable: true
     };
   };

package/dist/esm/ui/icons/WrapIcon.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Icon from '@atlaskit/icon';
+var CustomGlyph = function CustomGlyph() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    fill: "none",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "currentColor",
+    clipPath: "url(#clip0_654_431)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M20 4h-1v16h1V4ZM3 8a1 1 0 0 1 1-1h9.5a4.5 4.5 0 1 1 0 9h-2.086l.293.293a1 1 0 0 1-1.414 1.414l-2-2a1 1 0 0 1 0-1.414l2-2a1 1 0 0 1 1.414 1.414l-.293.293H13.5a2.5 2.5 0 0 0 0-5H4a1 1 0 0 1-1-1Z",
+    clipRule: "evenodd",
+    fillRule: "evenodd"
+  })));
+};
+export var WrapIcon = function WrapIcon() {
+  return /*#__PURE__*/React.createElement(Icon, {
+    glyph: CustomGlyph,
+    label: "wrapIcon"
+  });
+};

package/dist/types/actions.d.ts

@@ -2,6 +2,7 @@ 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;

package/dist/types/ui/icons/WrapIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapIcon: () => JSX.Element;

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

@@ -2,6 +2,7 @@ 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;

package/dist/types-ts4.5/ui/icons/WrapIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapIcon: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "3.0.2",
+	"version": "3.1.0",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,15 +33,15 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^39.0.3",
+		"@atlaskit/adf-schema": "^40.3.0",
 		"@atlaskit/code": "^15.4.0",
-		"@atlaskit/editor-common": "^86.0.0",
-		"@atlaskit/editor-plugin-analytics": "^1.4.0",
+		"@atlaskit/editor-common": "^86.7.0",
+		"@atlaskit/editor-plugin-analytics": "^1.5.0",
 		"@atlaskit/editor-plugin-composition": "^1.1.0",
 		"@atlaskit/editor-plugin-decorations": "^1.1.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.1.0",
 		"@atlaskit/editor-prosemirror": "4.0.1",
-		"@atlaskit/icon": "^22.6.0",
+		"@atlaskit/icon": "^22.7.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/prosemirror-input-rules": "^3.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -93,6 +93,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"editor_support_code_block_wrapping": {
+			"type": "boolean"
+		},
 		"platform.editor.live-view.disable-editing-in-view-mode_fi1rx": {
 			"type": "boolean"
 		},