@atlaskit/editor-plugin-block-type 3.0.16 → 3.0.18

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-block-type
 
+## 3.0.18
+
+### Patch Changes
+
+- [#67857](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67857) [`9f1035441959`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9f1035441959) - [ED-21835] Change EditorAPI type to always union with undefined
+- Updated dependencies
+
+## 3.0.17
+
+### Patch Changes
+
+- [#67557](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67557) [`124d0c6d5286`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/124d0c6d5286) - Migrating block-type, text-color, and text-formatting to use useSharedPluginState rather than WithPluginState. Removing unused option on default preset. Adding formattingIsPresent prop to TextFormattingState.
+- Updated dependencies
+
 ## 3.0.16
 
 ### Patch Changes

package/dist/cjs/plugin/index.js

@@ -19,14 +19,13 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _types = require("@atlaskit/editor-common/types");
-var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("./commands");
 var _blockType = require("./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 _ToolbarBlockType = _interopRequireDefault(require("./ui/ToolbarBlockType"));
+var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
 var headingPluginOptions = function headingPluginOptions(_ref, isAllowed, editorAnalyticsApi) {
   var formatMessage = _ref.formatMessage;
   if (!isAllowed) {
@@ -174,45 +173,28 @@ var blockTypePlugin = exports.blockTypePlugin = function blockTypePlugin(_ref3)
       return _main.pluginKey.getState(editorState);
     },
     primaryToolbarComponent: function primaryToolbarComponent(_ref7) {
-      var editorView = _ref7.editorView,
-        popupsMountPoint = _ref7.popupsMountPoint,
+      var popupsMountPoint = _ref7.popupsMountPoint,
         popupsBoundariesElement = _ref7.popupsBoundariesElement,
         popupsScrollableElement = _ref7.popupsScrollableElement,
         toolbarSize = _ref7.toolbarSize,
         disabled = _ref7.disabled,
-        isToolbarReducedSpacing = _ref7.isToolbarReducedSpacing,
-        eventDispatcher = _ref7.eventDispatcher;
+        isToolbarReducedSpacing = _ref7.isToolbarReducedSpacing;
       var isSmall = options && options.isUndoRedoButtonsEnabled ? toolbarSize < _types.ToolbarSize.XXL : toolbarSize < _types.ToolbarSize.XL;
-      var boundSetBlockType = function boundSetBlockType(name) {
-        var _api$core, _api$analytics5;
-        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute((0, _commands.setBlockTypeWithAnalytics)(name, _analytics.INPUT_METHOD.TOOLBAR, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions));
-      };
-      return /*#__PURE__*/_react.default.createElement(_withPluginState.WithPluginState, {
-        editorView: editorView,
-        eventDispatcher: eventDispatcher,
-        plugins: {
-          pluginState: _main.pluginKey
-        },
-        render: function render(_ref8) {
-          var pluginState = _ref8.pluginState;
-          return /*#__PURE__*/_react.default.createElement(_ToolbarBlockType.default, {
-            isSmall: isSmall,
-            isDisabled: disabled,
-            isReducedSpacing: isToolbarReducedSpacing,
-            setTextLevel: boundSetBlockType,
-            pluginState: pluginState,
-            popupsMountPoint: popupsMountPoint,
-            popupsBoundariesElement: popupsBoundariesElement,
-            popupsScrollableElement: popupsScrollableElement
-          });
-        }
+      return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
+        isSmall: isSmall,
+        disabled: disabled,
+        isToolbarReducedSpacing: isToolbarReducedSpacing,
+        api: api,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement
       });
     },
     pluginsOptions: {
       quickInsert: function quickInsert(intl) {
-        var _api$analytics6, _api$analytics7;
+        var _api$analytics5, _api$analytics6;
         var exclude = options && options.allowBlockType && options.allowBlockType.exclude ? options.allowBlockType.exclude : [];
-        return [].concat((0, _toConsumableArray2.default)(blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions)), (0, _toConsumableArray2.default)(headingPluginOptions(intl, exclude.indexOf('heading') === -1, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions)));
+        return [].concat((0, _toConsumableArray2.default)(blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)), (0, _toConsumableArray2.default)(headingPluginOptions(intl, exclude.indexOf('heading') === -1, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions)));
       }
     }
   };

package/dist/cjs/plugin/ui/PrimaryToolbarComponent.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PrimaryToolbarComponent = PrimaryToolbarComponent;
+var _react = _interopRequireDefault(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _ToolbarBlockType = _interopRequireDefault(require("./ToolbarBlockType"));
+function PrimaryToolbarComponent(_ref) {
+  var api = _ref.api,
+    isSmall = _ref.isSmall,
+    disabled = _ref.disabled,
+    isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['blockType']),
+    blockTypeState = _useSharedPluginState.blockTypeState;
+  var boundSetBlockType = function boundSetBlockType(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.TOOLBAR));
+  };
+  return /*#__PURE__*/_react.default.createElement(_ToolbarBlockType.default, {
+    isSmall: isSmall,
+    isDisabled: disabled,
+    isReducedSpacing: isToolbarReducedSpacing,
+    setTextLevel: boundSetBlockType,
+    pluginState: blockTypeState,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement
+  });
+}

package/dist/es2019/plugin/index.js

@@ -5,14 +5,13 @@ import { keymap, toggleBlockQuote, tooltip } from '@atlaskit/editor-common/keyma
 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 { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { setBlockTypeWithAnalytics } from './commands';
 import { insertBlockQuoteWithAnalytics } from './commands/block-type';
 import inputRulePlugin from './pm-plugins/input-rule';
 import keymapPlugin from './pm-plugins/keymap';
 import { createPlugin, pluginKey } from './pm-plugins/main';
-import ToolbarBlockType from './ui/ToolbarBlockType';
+import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
 const headingPluginOptions = ({
   formatMessage
 }, isAllowed, editorAnalyticsApi) => {
@@ -157,47 +156,29 @@ const blockTypePlugin = ({
     return pluginKey.getState(editorState);
   },
   primaryToolbarComponent({
-    editorView,
     popupsMountPoint,
     popupsBoundariesElement,
     popupsScrollableElement,
     toolbarSize,
     disabled,
-    isToolbarReducedSpacing,
-    eventDispatcher
+    isToolbarReducedSpacing
   }) {
     const isSmall = options && options.isUndoRedoButtonsEnabled ? toolbarSize < ToolbarSize.XXL : toolbarSize < ToolbarSize.XL;
-    const boundSetBlockType = name => {
-      var _api$core, _api$analytics5;
-      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(setBlockTypeWithAnalytics(name, INPUT_METHOD.TOOLBAR, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions));
-    };
-    return /*#__PURE__*/React.createElement(WithPluginState, {
-      editorView: editorView,
-      eventDispatcher: eventDispatcher,
-      plugins: {
-        pluginState: pluginKey
-      },
-      render: ({
-        pluginState
-      }) => {
-        return /*#__PURE__*/React.createElement(ToolbarBlockType, {
-          isSmall: isSmall,
-          isDisabled: disabled,
-          isReducedSpacing: isToolbarReducedSpacing,
-          setTextLevel: boundSetBlockType,
-          pluginState: pluginState,
-          popupsMountPoint: popupsMountPoint,
-          popupsBoundariesElement: popupsBoundariesElement,
-          popupsScrollableElement: popupsScrollableElement
-        });
-      }
+    return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
+      isSmall: isSmall,
+      disabled: disabled,
+      isToolbarReducedSpacing: isToolbarReducedSpacing,
+      api: api,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement
     });
   },
   pluginsOptions: {
     quickInsert: intl => {
-      var _api$analytics6, _api$analytics7;
+      var _api$analytics5, _api$analytics6;
       const exclude = options && options.allowBlockType && options.allowBlockType.exclude ? options.allowBlockType.exclude : [];
-      return [...blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions), ...headingPluginOptions(intl, exclude.indexOf('heading') === -1, api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions)];
+      return [...blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions), ...headingPluginOptions(intl, exclude.indexOf('heading') === -1, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions)];
     }
   }
 });

package/dist/es2019/plugin/ui/PrimaryToolbarComponent.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import ToolbarBlockType from './ToolbarBlockType';
+export function PrimaryToolbarComponent({
+  api,
+  isSmall,
+  disabled,
+  isToolbarReducedSpacing,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement
+}) {
+  const {
+    blockTypeState
+  } = useSharedPluginState(api, ['blockType']);
+  const boundSetBlockType = 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.TOOLBAR));
+  };
+  return /*#__PURE__*/React.createElement(ToolbarBlockType, {
+    isSmall: isSmall,
+    isDisabled: disabled,
+    isReducedSpacing: isToolbarReducedSpacing,
+    setTextLevel: boundSetBlockType,
+    pluginState: blockTypeState,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement
+  });
+}

package/dist/esm/plugin/index.js

@@ -6,14 +6,13 @@ import { keymap, toggleBlockQuote, tooltip } from '@atlaskit/editor-common/keyma
 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 { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { setBlockTypeWithAnalytics } from './commands';
 import { insertBlockQuoteWithAnalytics } from './commands/block-type';
 import inputRulePlugin from './pm-plugins/input-rule';
 import keymapPlugin from './pm-plugins/keymap';
 import { createPlugin, pluginKey } from './pm-plugins/main';
-import ToolbarBlockType from './ui/ToolbarBlockType';
+import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
 var headingPluginOptions = function headingPluginOptions(_ref, isAllowed, editorAnalyticsApi) {
   var formatMessage = _ref.formatMessage;
   if (!isAllowed) {
@@ -161,45 +160,28 @@ var blockTypePlugin = function blockTypePlugin(_ref3) {
       return pluginKey.getState(editorState);
     },
     primaryToolbarComponent: function primaryToolbarComponent(_ref7) {
-      var editorView = _ref7.editorView,
-        popupsMountPoint = _ref7.popupsMountPoint,
+      var popupsMountPoint = _ref7.popupsMountPoint,
         popupsBoundariesElement = _ref7.popupsBoundariesElement,
         popupsScrollableElement = _ref7.popupsScrollableElement,
         toolbarSize = _ref7.toolbarSize,
         disabled = _ref7.disabled,
-        isToolbarReducedSpacing = _ref7.isToolbarReducedSpacing,
-        eventDispatcher = _ref7.eventDispatcher;
+        isToolbarReducedSpacing = _ref7.isToolbarReducedSpacing;
       var isSmall = options && options.isUndoRedoButtonsEnabled ? toolbarSize < ToolbarSize.XXL : toolbarSize < ToolbarSize.XL;
-      var boundSetBlockType = function boundSetBlockType(name) {
-        var _api$core, _api$analytics5;
-        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(setBlockTypeWithAnalytics(name, INPUT_METHOD.TOOLBAR, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions));
-      };
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        editorView: editorView,
-        eventDispatcher: eventDispatcher,
-        plugins: {
-          pluginState: pluginKey
-        },
-        render: function render(_ref8) {
-          var pluginState = _ref8.pluginState;
-          return /*#__PURE__*/React.createElement(ToolbarBlockType, {
-            isSmall: isSmall,
-            isDisabled: disabled,
-            isReducedSpacing: isToolbarReducedSpacing,
-            setTextLevel: boundSetBlockType,
-            pluginState: pluginState,
-            popupsMountPoint: popupsMountPoint,
-            popupsBoundariesElement: popupsBoundariesElement,
-            popupsScrollableElement: popupsScrollableElement
-          });
-        }
+      return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
+        isSmall: isSmall,
+        disabled: disabled,
+        isToolbarReducedSpacing: isToolbarReducedSpacing,
+        api: api,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement
       });
     },
     pluginsOptions: {
       quickInsert: function quickInsert(intl) {
-        var _api$analytics6, _api$analytics7;
+        var _api$analytics5, _api$analytics6;
         var exclude = options && options.allowBlockType && options.allowBlockType.exclude ? options.allowBlockType.exclude : [];
-        return [].concat(_toConsumableArray(blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions)), _toConsumableArray(headingPluginOptions(intl, exclude.indexOf('heading') === -1, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions)));
+        return [].concat(_toConsumableArray(blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)), _toConsumableArray(headingPluginOptions(intl, exclude.indexOf('heading') === -1, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions)));
       }
     }
   };

package/dist/esm/plugin/ui/PrimaryToolbarComponent.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import ToolbarBlockType from './ToolbarBlockType';
+export function PrimaryToolbarComponent(_ref) {
+  var api = _ref.api,
+    isSmall = _ref.isSmall,
+    disabled = _ref.disabled,
+    isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement;
+  var _useSharedPluginState = useSharedPluginState(api, ['blockType']),
+    blockTypeState = _useSharedPluginState.blockTypeState;
+  var boundSetBlockType = function boundSetBlockType(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.TOOLBAR));
+  };
+  return /*#__PURE__*/React.createElement(ToolbarBlockType, {
+    isSmall: isSmall,
+    isDisabled: disabled,
+    isReducedSpacing: isToolbarReducedSpacing,
+    setTextLevel: boundSetBlockType,
+    pluginState: blockTypeState,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement
+  });
+}

package/dist/types/plugin/ui/PrimaryToolbarComponent.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockTypePlugin } from '../index';
+interface PrimaryToolbarComponentProps {
+    isSmall: boolean;
+    isToolbarReducedSpacing: boolean;
+    disabled: boolean;
+    api: ExtractInjectionAPI<BlockTypePlugin> | undefined;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+}
+export declare function PrimaryToolbarComponent({ api, isSmall, disabled, isToolbarReducedSpacing, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: PrimaryToolbarComponentProps): JSX.Element;
+export {};

package/dist/types-ts4.5/plugin/ui/PrimaryToolbarComponent.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockTypePlugin } from '../index';
+interface PrimaryToolbarComponentProps {
+    isSmall: boolean;
+    isToolbarReducedSpacing: boolean;
+    disabled: boolean;
+    api: ExtractInjectionAPI<BlockTypePlugin> | undefined;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+}
+export declare function PrimaryToolbarComponent({ api, isSmall, disabled, isToolbarReducedSpacing, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: PrimaryToolbarComponentProps): JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-block-type",
-  "version": "3.0.16",
+  "version": "3.0.18",
   "description": "BlockType plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^35.3.0",
-    "@atlaskit/editor-common": "^76.39.0",
+    "@atlaskit/editor-common": "^76.41.0",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",