@atlaskit/editor-plugin-selection-toolbar 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-selection-toolbar
 
+## 1.8.0
+
+### Minor Changes
+
+- [#113466](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113466)
+  [`756bb7e35a24d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/756bb7e35a24d) -
+  Add new FloatingToolbarOverflowDropdown item to floating toolbar config to support new editor
+  controls, add config in selection-toolbar plugin to add new button to text selection
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.7.0
 
 ### Minor Changes

package/dist/cjs/selectionToolbarPlugin.js

@@ -14,6 +14,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("./pm-plugins/commands");
 var _pluginKey = require("./pm-plugins/plugin-key");
+var _overflowToolbarConfig = require("./ui/overflow-toolbar-config");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selectionToolbarPlugin(options) {
@@ -166,6 +167,9 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
             }
           }
         }
+        if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+          items.push.apply(items, (0, _toConsumableArray2.default)(_overflowToolbarConfig.overflowToolbarConfig));
+        }
         var calcToolbarPosition = options.config.preferenceToolbarAboveSelection ? _utils.calculateToolbarPositionAboveSelection : _utils.calculateToolbarPositionTrackHead;
         var toolbarTitle = 'Selection toolbar';
         var onPositionCalculated = calcToolbarPosition(toolbarTitle);

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContextualToolbarIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var ContextualToolbarIcon = exports.ContextualToolbarIcon = function ContextualToolbarIcon(props) {
+  var primaryColor = props.primaryColor,
+    label = props.label;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    style: {
+      color: primaryColor,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      fill: "var(--ds-background-neutral-subtle, #00000000)"
+    },
+    "aria-label": label || undefined,
+    role: label ? 'img' : 'presentation'
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M14 8.75H2V7.25H14V8.75Z",
+    fill: "currentColor"
+  }));
+};

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

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FixedToolbarIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var FixedToolbarIcon = exports.FixedToolbarIcon = function FixedToolbarIcon(props) {
+  var primaryColor = props.primaryColor,
+    label = props.label;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    style: {
+      color: primaryColor,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      fill: "var(--ds-background-neutral-subtle, #00000000)"
+    },
+    "aria-label": label || undefined,
+    role: label ? 'img' : 'presentation'
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "0.75",
+    y: "1.00586",
+    width: "14.5",
+    height: "13.9879",
+    rx: "2.25",
+    stroke: "currentColor",
+    "stroke-width": "1.5"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "4",
+    y: "3.75586",
+    width: "8",
+    height: "1.5",
+    fill: "currentColor"
+  }));
+};

package/dist/cjs/ui/overflow-toolbar-config.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.overflowToolbarConfig = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ContextualToolbarIcon = require("./icons/ContextualToolbarIcon");
+var _FixedToolbarIcon = require("./icons/FixedToolbarIcon");
+// New editor controls
+var overflowToolbarConfig = exports.overflowToolbarConfig = [{
+  type: 'separator'
+}, {
+  type: 'overflow-dropdown',
+  options: [{
+    type: 'separator'
+  }, {
+    type: 'overflow-dropdown-heading',
+    title: 'Toolbar position'
+  }, {
+    title: 'Contextual',
+    onClick: function onClick() {
+      return true;
+    },
+    icon: /*#__PURE__*/_react.default.createElement(_ContextualToolbarIcon.ContextualToolbarIcon, {
+      label: "Contextual toolbar"
+    })
+  }, {
+    title: 'Fixed at top',
+    onClick: function onClick() {
+      return true;
+    },
+    icon: /*#__PURE__*/_react.default.createElement(_FixedToolbarIcon.FixedToolbarIcon, {
+      label: "Fixed toolbar"
+    })
+  }]
+}];

package/dist/es2019/selectionToolbarPlugin.js

@@ -5,6 +5,7 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { toggleToolbar } from './pm-plugins/commands';
 import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
+import { overflowToolbarConfig } from './ui/overflow-toolbar-config';
 export const selectionToolbarPlugin = options => {
   const __selectionToolbarHandlers = [];
   return {
@@ -155,6 +156,9 @@ export const selectionToolbarPlugin = options => {
             }
           }
         }
+        if (editorExperiment('platform_editor_controls', 'variant1')) {
+          items.push(...overflowToolbarConfig);
+        }
         const calcToolbarPosition = options.config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
         const toolbarTitle = 'Selection toolbar';
         const onPositionCalculated = calcToolbarPosition(toolbarTitle);

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

@@ -0,0 +1,24 @@
+import React from 'react';
+export const ContextualToolbarIcon = props => {
+  const {
+    primaryColor,
+    label
+  } = props;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    style: {
+      color: primaryColor,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      fill: "var(--ds-background-neutral-subtle, #00000000)"
+    },
+    "aria-label": label || undefined,
+    role: label ? 'img' : 'presentation'
+  }, /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M14 8.75H2V7.25H14V8.75Z",
+    fill: "currentColor"
+  }));
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+export const FixedToolbarIcon = props => {
+  const {
+    primaryColor,
+    label
+  } = props;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    style: {
+      color: primaryColor,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      fill: "var(--ds-background-neutral-subtle, #00000000)"
+    },
+    "aria-label": label || undefined,
+    role: label ? 'img' : 'presentation'
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "0.75",
+    y: "1.00586",
+    width: "14.5",
+    height: "13.9879",
+    rx: "2.25",
+    stroke: "currentColor",
+    "stroke-width": "1.5"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "4",
+    y: "3.75586",
+    width: "8",
+    height: "1.5",
+    fill: "currentColor"
+  }));
+};

package/dist/es2019/ui/overflow-toolbar-config.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ContextualToolbarIcon } from './icons/ContextualToolbarIcon';
+import { FixedToolbarIcon } from './icons/FixedToolbarIcon';
+
+// New editor controls
+export const overflowToolbarConfig = [{
+  type: 'separator'
+}, {
+  type: 'overflow-dropdown',
+  options: [{
+    type: 'separator'
+  }, {
+    type: 'overflow-dropdown-heading',
+    title: 'Toolbar position'
+  }, {
+    title: 'Contextual',
+    onClick: () => {
+      return true;
+    },
+    icon: /*#__PURE__*/React.createElement(ContextualToolbarIcon, {
+      label: "Contextual toolbar"
+    })
+  }, {
+    title: 'Fixed at top',
+    onClick: () => {
+      return true;
+    },
+    icon: /*#__PURE__*/React.createElement(FixedToolbarIcon, {
+      label: "Fixed toolbar"
+    })
+  }]
+}];

package/dist/esm/selectionToolbarPlugin.js

@@ -9,6 +9,7 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { toggleToolbar } from './pm-plugins/commands';
 import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
+import { overflowToolbarConfig } from './ui/overflow-toolbar-config';
 export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
   var __selectionToolbarHandlers = [];
   return {
@@ -159,6 +160,9 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
             }
           }
         }
+        if (editorExperiment('platform_editor_controls', 'variant1')) {
+          items.push.apply(items, _toConsumableArray(overflowToolbarConfig));
+        }
         var calcToolbarPosition = options.config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
         var toolbarTitle = 'Selection toolbar';
         var onPositionCalculated = calcToolbarPosition(toolbarTitle);

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

@@ -0,0 +1,22 @@
+import React from 'react';
+export var ContextualToolbarIcon = function ContextualToolbarIcon(props) {
+  var primaryColor = props.primaryColor,
+    label = props.label;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    style: {
+      color: primaryColor,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      fill: "var(--ds-background-neutral-subtle, #00000000)"
+    },
+    "aria-label": label || undefined,
+    role: label ? 'img' : 'presentation'
+  }, /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M14 8.75H2V7.25H14V8.75Z",
+    fill: "currentColor"
+  }));
+};

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

@@ -0,0 +1,31 @@
+import React from 'react';
+export var FixedToolbarIcon = function FixedToolbarIcon(props) {
+  var primaryColor = props.primaryColor,
+    label = props.label;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    style: {
+      color: primaryColor,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      fill: "var(--ds-background-neutral-subtle, #00000000)"
+    },
+    "aria-label": label || undefined,
+    role: label ? 'img' : 'presentation'
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "0.75",
+    y: "1.00586",
+    width: "14.5",
+    height: "13.9879",
+    rx: "2.25",
+    stroke: "currentColor",
+    "stroke-width": "1.5"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "4",
+    y: "3.75586",
+    width: "8",
+    height: "1.5",
+    fill: "currentColor"
+  }));
+};

package/dist/esm/ui/overflow-toolbar-config.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ContextualToolbarIcon } from './icons/ContextualToolbarIcon';
+import { FixedToolbarIcon } from './icons/FixedToolbarIcon';
+
+// New editor controls
+export var overflowToolbarConfig = [{
+  type: 'separator'
+}, {
+  type: 'overflow-dropdown',
+  options: [{
+    type: 'separator'
+  }, {
+    type: 'overflow-dropdown-heading',
+    title: 'Toolbar position'
+  }, {
+    title: 'Contextual',
+    onClick: function onClick() {
+      return true;
+    },
+    icon: /*#__PURE__*/React.createElement(ContextualToolbarIcon, {
+      label: "Contextual toolbar"
+    })
+  }, {
+    title: 'Fixed at top',
+    onClick: function onClick() {
+      return true;
+    },
+    icon: /*#__PURE__*/React.createElement(FixedToolbarIcon, {
+      label: "Fixed toolbar"
+    })
+  }]
+}];

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { SVGProps } from '@atlaskit/icon/types';
+export declare const ContextualToolbarIcon: (props: SVGProps) => React.JSX.Element;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { SVGProps } from '@atlaskit/icon/types';
+export declare const FixedToolbarIcon: (props: SVGProps) => React.JSX.Element;

package/dist/types/ui/overflow-toolbar-config.d.ts

@@ -0,0 +1,2 @@
+import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
+export declare const overflowToolbarConfig: FloatingToolbarItem<Command>[];

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { SVGProps } from '@atlaskit/icon/types';
+export declare const ContextualToolbarIcon: (props: SVGProps) => React.JSX.Element;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { SVGProps } from '@atlaskit/icon/types';
+export declare const FixedToolbarIcon: (props: SVGProps) => React.JSX.Element;

package/dist/types-ts4.5/ui/overflow-toolbar-config.d.ts

@@ -0,0 +1,2 @@
+import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
+export declare const overflowToolbarConfig: FloatingToolbarItem<Command>[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-toolbar",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,11 +31,11 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^99.10.0",
+		"@atlaskit/editor-common": "^99.15.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/platform-feature-flags": "^1.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.43.0",
+		"@atlaskit/tmp-editor-statsig": "^2.46.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},