@atlaskit/editor-plugin-insert-block 1.8.0 → 1.8.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 1.8.1
+
+### Patch Changes
+
+- [#127194](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127194)
+  [`8d7f9ef047d37`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d7f9ef047d37) -
+  [ED-24504] Add dropdown options UI
+
 ## 1.8.0
 
 ### Minor Changes

package/dist/cjs/assets/expand.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ExpandIcon;
+var _react = require("@emotion/react");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+var iconContainer = (0, _react.css)({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '24px',
+  height: '24px'
+});
+function ExpandIcon() {
+  return (0, _react.jsx)("span", {
+    css: iconContainer
+  }, (0, _react.jsx)("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "16",
+    viewBox: "0 0 18 16",
+    fill: "none"
+  }, (0, _react.jsx)("path", {
+    d: "M2 2V14H16V2H2ZM2 0H16C16.5304 0 17.0391 0.210714 17.4142 0.585786C17.7893 0.960859 18 1.46957 18 2V14C18 14.5304 17.7893 15.0391 17.4142 15.4142C17.0391 15.7893 16.5304 16 16 16H2C1.46957 16 0.960859 15.7893 0.585786 15.4142C0.210714 15.0391 0 14.5304 0 14V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0Z",
+    fill: "var(--ds-icon, #44546F)"
+  }), (0, _react.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.29158 6.29294C5.10477 6.48183 5 6.73678 5 7.00244C5 7.2681 5.10477 7.52305 5.29158 7.71194L8.23058 10.6769C8.44858 10.8919 8.73058 10.9989 9.00958 10.9989C9.28858 10.9989 9.56558 10.8919 9.77858 10.6769L12.7086 7.72194C12.8951 7.53292 12.9998 7.27803 12.9998 7.01244C12.9998 6.74686 12.8951 6.49196 12.7086 6.30294C12.6167 6.20976 12.5073 6.13576 12.3866 6.08525C12.2659 6.03474 12.1364 6.00873 12.0056 6.00873C11.8748 6.00873 11.7452 6.03474 11.6245 6.08525C11.5039 6.13576 11.3944 6.20976 11.3026 6.30294L9.00458 8.61994L6.69758 6.29294C6.60554 6.20012 6.49604 6.12644 6.37538 6.07617C6.25472 6.02589 6.1253 6 5.99458 6C5.86386 6 5.73444 6.02589 5.61378 6.07617C5.49312 6.12644 5.38362 6.20012 5.29158 6.29294Z",
+    fill: "var(--ds-icon, #44546F)"
+  })));
+}

package/dist/cjs/plugin.js

@@ -15,6 +15,7 @@ var _types = require("@atlaskit/editor-common/types");
 var _consts = require("@atlaskit/editor-plugin-block-type/consts");
 var _switch = _interopRequireDefault(require("./assets/switch"));
 var _ToolbarInsertBlock = _interopRequireDefault(require("./ui/ToolbarInsertBlock"));
+var _transformOptions = require("./ui/transformOptions");
 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 toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize) {
@@ -127,12 +128,25 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
         if (!(api !== null && api !== void 0 && (_api$featureFlags = api.featureFlags) !== null && _api$featureFlags !== void 0 && (_api$featureFlags = _api$featureFlags.sharedState.currentState()) !== null && _api$featureFlags !== void 0 && _api$featureFlags.basicTextTransformations)) {
           return;
         }
+        var formatMessage = intl.formatMessage;
+        var options = _transformOptions.transformationOptions.map(function (option) {
+          var IconBefore = option.icon;
+          return {
+            title: formatMessage(option.title),
+            icon: /*#__PURE__*/_react.default.createElement(IconBefore, {
+              label: ""
+            }),
+            onClick: function onClick() {
+              return true;
+            }
+          };
+        });
         return {
           items: [{
             type: 'dropdown',
-            title: intl.formatMessage(_messages.toolbarInsertBlockMessages.turnInto),
+            title: formatMessage(_messages.toolbarInsertBlockMessages.turnInto),
             iconBefore: _switch.default,
-            options: []
+            options: options
           }],
           rank: -9
         };

package/dist/cjs/ui/transformOptions.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformationOptions = void 0;
+var _messages = require("@atlaskit/editor-common/messages");
+var _code = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/code"));
+var _info = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/info"));
+var _quote = _interopRequireDefault(require("@atlaskit/icon/glyph/quote"));
+var _expand = _interopRequireDefault(require("../assets/expand"));
+var transformationOptions = exports.transformationOptions = [{
+  title: _messages.blockTypeMessages.panel,
+  icon: _info.default
+}, {
+  title: _messages.toolbarInsertBlockMessages.expand,
+  icon: _expand.default
+}, {
+  title: _messages.blockTypeMessages.codeblock,
+  icon: _code.default
+}, {
+  title: _messages.blockTypeMessages.blockquote,
+  icon: _quote.default
+}];

package/dist/es2019/assets/expand.js

@@ -0,0 +1,32 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+const iconContainer = css({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '24px',
+  height: '24px'
+});
+export default function ExpandIcon() {
+  return jsx("span", {
+    css: iconContainer
+  }, jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "16",
+    viewBox: "0 0 18 16",
+    fill: "none"
+  }, jsx("path", {
+    d: "M2 2V14H16V2H2ZM2 0H16C16.5304 0 17.0391 0.210714 17.4142 0.585786C17.7893 0.960859 18 1.46957 18 2V14C18 14.5304 17.7893 15.0391 17.4142 15.4142C17.0391 15.7893 16.5304 16 16 16H2C1.46957 16 0.960859 15.7893 0.585786 15.4142C0.210714 15.0391 0 14.5304 0 14V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0Z",
+    fill: "var(--ds-icon, #44546F)"
+  }), jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.29158 6.29294C5.10477 6.48183 5 6.73678 5 7.00244C5 7.2681 5.10477 7.52305 5.29158 7.71194L8.23058 10.6769C8.44858 10.8919 8.73058 10.9989 9.00958 10.9989C9.28858 10.9989 9.56558 10.8919 9.77858 10.6769L12.7086 7.72194C12.8951 7.53292 12.9998 7.27803 12.9998 7.01244C12.9998 6.74686 12.8951 6.49196 12.7086 6.30294C12.6167 6.20976 12.5073 6.13576 12.3866 6.08525C12.2659 6.03474 12.1364 6.00873 12.0056 6.00873C11.8748 6.00873 11.7452 6.03474 11.6245 6.08525C11.5039 6.13576 11.3944 6.20976 11.3026 6.30294L9.00458 8.61994L6.69758 6.29294C6.60554 6.20012 6.49604 6.12644 6.37538 6.07617C6.25472 6.02589 6.1253 6 5.99458 6C5.86386 6 5.73444 6.02589 5.61378 6.07617C5.49312 6.12644 5.38362 6.20012 5.29158 6.29294Z",
+    fill: "var(--ds-icon, #44546F)"
+  })));
+}

package/dist/es2019/plugin.js

@@ -7,6 +7,7 @@ import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
 import SwitchIcon from './assets/switch';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
+import { transformationOptions } from './ui/transformOptions';
 const toolbarSizeToButtons = toolbarSize => {
   switch (toolbarSize) {
     case ToolbarSize.XXL:
@@ -116,12 +117,27 @@ export const insertBlockPlugin = ({
         if (!(api !== null && api !== void 0 && (_api$featureFlags = api.featureFlags) !== null && _api$featureFlags !== void 0 && (_api$featureFlags$sha = _api$featureFlags.sharedState.currentState()) !== null && _api$featureFlags$sha !== void 0 && _api$featureFlags$sha.basicTextTransformations)) {
           return;
         }
+        const {
+          formatMessage
+        } = intl;
+        const options = transformationOptions.map(option => {
+          const IconBefore = option.icon;
+          return {
+            title: formatMessage(option.title),
+            icon: /*#__PURE__*/React.createElement(IconBefore, {
+              label: ""
+            }),
+            onClick: () => {
+              return true;
+            }
+          };
+        });
         return {
           items: [{
             type: 'dropdown',
-            title: intl.formatMessage(messages.turnInto),
+            title: formatMessage(messages.turnInto),
             iconBefore: SwitchIcon,
-            options: []
+            options
           }],
           rank: -9
         };

package/dist/es2019/ui/transformOptions.js

@@ -0,0 +1,18 @@
+import { blockTypeMessages as messages, toolbarInsertBlockMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
+import EditorCodeIcon from '@atlaskit/icon/glyph/editor/code';
+import EditorInfoIcon from '@atlaskit/icon/glyph/editor/info';
+import QuoteIcon from '@atlaskit/icon/glyph/quote';
+import ExpandIcon from '../assets/expand';
+export const transformationOptions = [{
+  title: messages.panel,
+  icon: EditorInfoIcon
+}, {
+  title: toolbarMessages.expand,
+  icon: ExpandIcon
+}, {
+  title: messages.codeblock,
+  icon: EditorCodeIcon
+}, {
+  title: messages.blockquote,
+  icon: QuoteIcon
+}];

package/dist/esm/assets/expand.js

@@ -0,0 +1,32 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+var iconContainer = css({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '24px',
+  height: '24px'
+});
+export default function ExpandIcon() {
+  return jsx("span", {
+    css: iconContainer
+  }, jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "16",
+    viewBox: "0 0 18 16",
+    fill: "none"
+  }, jsx("path", {
+    d: "M2 2V14H16V2H2ZM2 0H16C16.5304 0 17.0391 0.210714 17.4142 0.585786C17.7893 0.960859 18 1.46957 18 2V14C18 14.5304 17.7893 15.0391 17.4142 15.4142C17.0391 15.7893 16.5304 16 16 16H2C1.46957 16 0.960859 15.7893 0.585786 15.4142C0.210714 15.0391 0 14.5304 0 14V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0Z",
+    fill: "var(--ds-icon, #44546F)"
+  }), jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.29158 6.29294C5.10477 6.48183 5 6.73678 5 7.00244C5 7.2681 5.10477 7.52305 5.29158 7.71194L8.23058 10.6769C8.44858 10.8919 8.73058 10.9989 9.00958 10.9989C9.28858 10.9989 9.56558 10.8919 9.77858 10.6769L12.7086 7.72194C12.8951 7.53292 12.9998 7.27803 12.9998 7.01244C12.9998 6.74686 12.8951 6.49196 12.7086 6.30294C12.6167 6.20976 12.5073 6.13576 12.3866 6.08525C12.2659 6.03474 12.1364 6.00873 12.0056 6.00873C11.8748 6.00873 11.7452 6.03474 11.6245 6.08525C11.5039 6.13576 11.3944 6.20976 11.3026 6.30294L9.00458 8.61994L6.69758 6.29294C6.60554 6.20012 6.49604 6.12644 6.37538 6.07617C6.25472 6.02589 6.1253 6 5.99458 6C5.86386 6 5.73444 6.02589 5.61378 6.07617C5.49312 6.12644 5.38362 6.20012 5.29158 6.29294Z",
+    fill: "var(--ds-icon, #44546F)"
+  })));
+}

package/dist/esm/plugin.js

@@ -7,6 +7,7 @@ import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
 import SwitchIcon from './assets/switch';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
+import { transformationOptions } from './ui/transformOptions';
 var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize) {
   switch (toolbarSize) {
     case ToolbarSize.XXL:
@@ -117,12 +118,25 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
         if (!(api !== null && api !== void 0 && (_api$featureFlags = api.featureFlags) !== null && _api$featureFlags !== void 0 && (_api$featureFlags = _api$featureFlags.sharedState.currentState()) !== null && _api$featureFlags !== void 0 && _api$featureFlags.basicTextTransformations)) {
           return;
         }
+        var formatMessage = intl.formatMessage;
+        var options = transformationOptions.map(function (option) {
+          var IconBefore = option.icon;
+          return {
+            title: formatMessage(option.title),
+            icon: /*#__PURE__*/React.createElement(IconBefore, {
+              label: ""
+            }),
+            onClick: function onClick() {
+              return true;
+            }
+          };
+        });
         return {
           items: [{
             type: 'dropdown',
-            title: intl.formatMessage(messages.turnInto),
+            title: formatMessage(messages.turnInto),
             iconBefore: SwitchIcon,
-            options: []
+            options: options
           }],
           rank: -9
         };

package/dist/esm/ui/transformOptions.js

@@ -0,0 +1,18 @@
+import { blockTypeMessages as messages, toolbarInsertBlockMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
+import EditorCodeIcon from '@atlaskit/icon/glyph/editor/code';
+import EditorInfoIcon from '@atlaskit/icon/glyph/editor/info';
+import QuoteIcon from '@atlaskit/icon/glyph/quote';
+import ExpandIcon from '../assets/expand';
+export var transformationOptions = [{
+  title: messages.panel,
+  icon: EditorInfoIcon
+}, {
+  title: toolbarMessages.expand,
+  icon: ExpandIcon
+}, {
+  title: messages.codeblock,
+  icon: EditorCodeIcon
+}, {
+  title: messages.blockquote,
+  icon: QuoteIcon
+}];

package/dist/types/assets/expand.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+export default function ExpandIcon(): jsx.JSX.Element;

package/dist/types/ui/transformOptions.d.ts

@@ -0,0 +1,17 @@
+import EditorInfoIcon from '@atlaskit/icon/glyph/editor/info';
+import ExpandIcon from '../assets/expand';
+export declare const transformationOptions: ({
+    title: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    icon: typeof EditorInfoIcon;
+} | {
+    title: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    icon: typeof ExpandIcon;
+})[];

package/dist/types-ts4.5/assets/expand.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+export default function ExpandIcon(): jsx.JSX.Element;

package/dist/types-ts4.5/ui/transformOptions.d.ts

@@ -0,0 +1,17 @@
+import EditorInfoIcon from '@atlaskit/icon/glyph/editor/info';
+import ExpandIcon from '../assets/expand';
+export declare const transformationOptions: ({
+    title: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    icon: typeof EditorInfoIcon;
+} | {
+    title: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    icon: typeof ExpandIcon;
+})[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "1.8.0",
+	"version": "1.8.1",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^87.4.0",
+		"@atlaskit/editor-common": "^87.5.0",
 		"@atlaskit/editor-plugin-analytics": "^1.6.0",
 		"@atlaskit/editor-plugin-block-type": "^3.11.0",
 		"@atlaskit/editor-plugin-code-block": "^3.2.0",