@atlaskit/editor-plugin-block-type 4.0.3 → 4.0.5

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-block-type
 
+## 4.0.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.0.4
+
+### Patch Changes
+
+- [#165097](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165097)
+  [`0bca145c96b65`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0bca145c96b65) -
+  [ux] Adds test styles options to the Selection toolbar under Contextual toolbar experiment
+- Updated dependencies
+
 ## 4.0.3
 
 ### Patch Changes

package/dist/cjs/blockTypePlugin.js

@@ -20,11 +20,13 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _types = require("@atlaskit/editor-common/types");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("./pm-plugins/commands");
 var _blockType = require("./pm-plugins/commands/block-type");
 var _inputRule = _interopRequireDefault(require("./pm-plugins/input-rule"));
 var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
 var _main = require("./pm-plugins/main");
+var _FloatingToolbarComponent = require("./pm-plugins/ui/FloatingToolbarComponent");
 var _PrimaryToolbarComponent = require("./pm-plugins/ui/PrimaryToolbarComponent");
 var headingPluginOptions = function headingPluginOptions(_ref, isAllowed, editorAnalyticsApi) {
   var formatMessage = _ref.formatMessage;
@@ -201,6 +203,28 @@ var blockTypePlugin = exports.blockTypePlugin = function blockTypePlugin(_ref3)
     },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined,
     pluginsOptions: {
+      selectionToolbar: function selectionToolbar() {
+        if ((0, _experiments.editorExperiment)('contextual_formatting_toolbar', true)) {
+          var toolbarCustom = {
+            type: 'custom',
+            render: function render(view, _idx, _dispatchAnalyticsEvent) {
+              if (!view) {
+                return;
+              }
+              return /*#__PURE__*/_react.default.createElement(_FloatingToolbarComponent.FloatingToolbarComponent, {
+                api: api
+              });
+            },
+            fallback: []
+          };
+          return {
+            isToolbarAbove: true,
+            items: [toolbarCustom]
+          };
+        } else {
+          return undefined;
+        }
+      },
       quickInsert: function quickInsert(intl) {
         var _api$analytics5, _api$analytics6;
         var exclude = options && options.allowBlockType && options.allowBlockType.exclude ? options.allowBlockType.exclude : [];

package/dist/cjs/pm-plugins/ui/FloatingToolbarComponent.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingToolbarComponent = FloatingToolbarComponent;
+var _react = _interopRequireWildcard(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _ToolbarBlockType = _interopRequireDefault(require("./ToolbarBlockType"));
+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 && {}.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 FloatingToolbarSettings = {
+  isSmall: true,
+  disabled: false,
+  isToolbarReducedSpacing: true,
+  shouldUseDefaultRole: false
+};
+function FloatingToolbarComponent(_ref) {
+  var api = _ref.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['blockType']),
+    blockTypeState = _useSharedPluginState.blockTypeState;
+  (0, _react.useEffect)(function () {
+    (0, _experiments.editorExperiment)('contextual_formatting_toolbar', true, {
+      exposure: true
+    });
+  }, []);
+  var boundSetBlockType = (0, _react.useCallback)(function (name) {
+    var _api$core, _api$blockType;
+    return api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 || (_api$blockType = _api$blockType.commands) === null || _api$blockType === void 0 ? void 0 : _api$blockType.setTextLevel(name, _analytics.INPUT_METHOD.FLOATING_TB));
+  }, [api]);
+  return /*#__PURE__*/_react.default.createElement(_ToolbarBlockType.default, {
+    isSmall: FloatingToolbarSettings.isSmall,
+    isDisabled: FloatingToolbarSettings.disabled,
+    isReducedSpacing: FloatingToolbarSettings.isToolbarReducedSpacing,
+    setTextLevel: boundSetBlockType,
+    pluginState: blockTypeState,
+    shouldUseDefaultRole: FloatingToolbarSettings.shouldUseDefaultRole,
+    api: api
+  });
+}

package/dist/es2019/blockTypePlugin.js

@@ -6,11 +6,13 @@ import { blockTypeMessages as messages } from '@atlaskit/editor-common/messages'
 import { IconHeading, IconQuote } from '@atlaskit/editor-common/quick-insert';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setBlockTypeWithAnalytics } from './pm-plugins/commands';
 import { insertBlockQuoteWithAnalytics } from './pm-plugins/commands/block-type';
 import inputRulePlugin from './pm-plugins/input-rule';
 import keymapPlugin from './pm-plugins/keymap';
 import { createPlugin, pluginKey } from './pm-plugins/main';
+import { FloatingToolbarComponent } from './pm-plugins/ui/FloatingToolbarComponent';
 import { PrimaryToolbarComponent } from './pm-plugins/ui/PrimaryToolbarComponent';
 const headingPluginOptions = ({
   formatMessage
@@ -186,6 +188,28 @@ const blockTypePlugin = ({
     },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined,
     pluginsOptions: {
+      selectionToolbar: () => {
+        if (editorExperiment('contextual_formatting_toolbar', true)) {
+          const toolbarCustom = {
+            type: 'custom',
+            render: (view, _idx, _dispatchAnalyticsEvent) => {
+              if (!view) {
+                return;
+              }
+              return /*#__PURE__*/React.createElement(FloatingToolbarComponent, {
+                api: api
+              });
+            },
+            fallback: []
+          };
+          return {
+            isToolbarAbove: true,
+            items: [toolbarCustom]
+          };
+        } else {
+          return undefined;
+        }
+      },
       quickInsert: intl => {
         var _api$analytics5, _api$analytics6;
         const exclude = options && options.allowBlockType && options.allowBlockType.exclude ? options.allowBlockType.exclude : [];

package/dist/es2019/pm-plugins/ui/FloatingToolbarComponent.js

@@ -0,0 +1,36 @@
+import React, { useCallback, useEffect } from 'react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import ToolbarBlockType from './ToolbarBlockType';
+const FloatingToolbarSettings = {
+  isSmall: true,
+  disabled: false,
+  isToolbarReducedSpacing: true,
+  shouldUseDefaultRole: false
+};
+export function FloatingToolbarComponent({
+  api
+}) {
+  const {
+    blockTypeState
+  } = useSharedPluginState(api, ['blockType']);
+  useEffect(() => {
+    editorExperiment('contextual_formatting_toolbar', true, {
+      exposure: true
+    });
+  }, []);
+  const boundSetBlockType = useCallback(name => {
+    var _api$core, _api$blockType, _api$blockType$comman;
+    return api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockType = api.blockType) === null || _api$blockType === void 0 ? void 0 : (_api$blockType$comman = _api$blockType.commands) === null || _api$blockType$comman === void 0 ? void 0 : _api$blockType$comman.setTextLevel(name, INPUT_METHOD.FLOATING_TB));
+  }, [api]);
+  return /*#__PURE__*/React.createElement(ToolbarBlockType, {
+    isSmall: FloatingToolbarSettings.isSmall,
+    isDisabled: FloatingToolbarSettings.disabled,
+    isReducedSpacing: FloatingToolbarSettings.isToolbarReducedSpacing,
+    setTextLevel: boundSetBlockType,
+    pluginState: blockTypeState,
+    shouldUseDefaultRole: FloatingToolbarSettings.shouldUseDefaultRole,
+    api: api
+  });
+}

package/dist/esm/blockTypePlugin.js

@@ -7,11 +7,13 @@ import { blockTypeMessages as messages } from '@atlaskit/editor-common/messages'
 import { IconHeading, IconQuote } from '@atlaskit/editor-common/quick-insert';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setBlockTypeWithAnalytics } from './pm-plugins/commands';
 import { insertBlockQuoteWithAnalytics } from './pm-plugins/commands/block-type';
 import inputRulePlugin from './pm-plugins/input-rule';
 import keymapPlugin from './pm-plugins/keymap';
 import { createPlugin, pluginKey } from './pm-plugins/main';
+import { FloatingToolbarComponent } from './pm-plugins/ui/FloatingToolbarComponent';
 import { PrimaryToolbarComponent } from './pm-plugins/ui/PrimaryToolbarComponent';
 var headingPluginOptions = function headingPluginOptions(_ref, isAllowed, editorAnalyticsApi) {
   var formatMessage = _ref.formatMessage;
@@ -188,6 +190,28 @@ var blockTypePlugin = function blockTypePlugin(_ref3) {
     },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined,
     pluginsOptions: {
+      selectionToolbar: function selectionToolbar() {
+        if (editorExperiment('contextual_formatting_toolbar', true)) {
+          var toolbarCustom = {
+            type: 'custom',
+            render: function render(view, _idx, _dispatchAnalyticsEvent) {
+              if (!view) {
+                return;
+              }
+              return /*#__PURE__*/React.createElement(FloatingToolbarComponent, {
+                api: api
+              });
+            },
+            fallback: []
+          };
+          return {
+            isToolbarAbove: true,
+            items: [toolbarCustom]
+          };
+        } else {
+          return undefined;
+        }
+      },
       quickInsert: function quickInsert(intl) {
         var _api$analytics5, _api$analytics6;
         var exclude = options && options.allowBlockType && options.allowBlockType.exclude ? options.allowBlockType.exclude : [];

package/dist/esm/pm-plugins/ui/FloatingToolbarComponent.js

@@ -0,0 +1,34 @@
+import React, { useCallback, useEffect } from 'react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import ToolbarBlockType from './ToolbarBlockType';
+var FloatingToolbarSettings = {
+  isSmall: true,
+  disabled: false,
+  isToolbarReducedSpacing: true,
+  shouldUseDefaultRole: false
+};
+export function FloatingToolbarComponent(_ref) {
+  var api = _ref.api;
+  var _useSharedPluginState = useSharedPluginState(api, ['blockType']),
+    blockTypeState = _useSharedPluginState.blockTypeState;
+  useEffect(function () {
+    editorExperiment('contextual_formatting_toolbar', true, {
+      exposure: true
+    });
+  }, []);
+  var boundSetBlockType = useCallback(function (name) {
+    var _api$core, _api$blockType;
+    return api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 || (_api$blockType = _api$blockType.commands) === null || _api$blockType === void 0 ? void 0 : _api$blockType.setTextLevel(name, INPUT_METHOD.FLOATING_TB));
+  }, [api]);
+  return /*#__PURE__*/React.createElement(ToolbarBlockType, {
+    isSmall: FloatingToolbarSettings.isSmall,
+    isDisabled: FloatingToolbarSettings.disabled,
+    isReducedSpacing: FloatingToolbarSettings.isToolbarReducedSpacing,
+    setTextLevel: boundSetBlockType,
+    pluginState: blockTypeState,
+    shouldUseDefaultRole: FloatingToolbarSettings.shouldUseDefaultRole,
+    api: api
+  });
+}

package/dist/types/pm-plugins/ui/FloatingToolbarComponent.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockTypePlugin } from '../../blockTypePluginType';
+interface FloatingToolbarComponentProps {
+    api: ExtractInjectionAPI<BlockTypePlugin> | undefined;
+}
+export declare function FloatingToolbarComponent({ api }: FloatingToolbarComponentProps): JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockTypePlugin } from '../../blockTypePluginType';
+interface FloatingToolbarComponentProps {
+    api: ExtractInjectionAPI<BlockTypePlugin> | undefined;
+}
+export declare function FloatingToolbarComponent({ api }: FloatingToolbarComponentProps): JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-type",
-	"version": "4.0.3",
+	"version": "4.0.5",
 	"description": "BlockType plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^44.2.0",
-		"@atlaskit/editor-common": "^94.12.0",
+		"@atlaskit/editor-common": "^95.0.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^2.0.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
@@ -42,11 +42,11 @@
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^13.0.0",
+		"@atlaskit/primitives": "^13.2.0",
 		"@atlaskit/prosemirror-input-rules": "^3.2.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.11.0",
-		"@atlaskit/tokens": "^2.1.0",
+		"@atlaskit/tmp-editor-statsig": "^2.19.0",
+		"@atlaskit/tokens": "^2.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -58,7 +58,7 @@
 	"devDependencies": {
 		"@af/visual-regression": "*",
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/editor-plugin-quick-insert": "^1.6.0",
+		"@atlaskit/editor-plugin-quick-insert": "^1.7.0",
 		"@atlaskit/editor-plugin-type-ahead": "^1.10.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",