@atlaskit/editor-core 187.8.11 → 187.9.0

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/resizable-media-single-messages.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = (0, _reactIntlNext.defineMessages)({
+  fullWidthImage: {
+    id: 'fabric.editor.image.fullWidthImage',
+    defaultMessage: 'Full width image',
+    description: 'The image has reached its full width'
+  }
+});
+exports.messages = messages;

package/dist/cjs/ui/ElementBrowser/components/ElementSearch.js

@@ -29,6 +29,7 @@ function ElementSearch(_ref) {
     formatMessage = _ref.intl.formatMessage,
     focus = _ref.focus,
     onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown,
     searchTerm = _ref.searchTerm;
   var ref = (0, _useFocus.default)(focus);
   var onChange = function onChange(_ref2) {
@@ -44,6 +45,7 @@ function ElementSearch(_ref) {
     onChange: onChange,
     onClick: onClick,
     onFocus: onFocus,
+    onKeyDown: onKeyDown,
     onBlur: onBlur,
     elemBeforeInput: (0, _react2.jsx)("div", {
       css: elementBeforeInput,
@@ -75,10 +77,10 @@ var placeHolderMessage = {
   description: 'Search field placeholder'
 };
 var styledShortcut = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: ", "px ", "px;\n  width: ", "px;\n"])), _styles.shortcutStyle, _constants.GRID_SIZE / 2, _constants.GRID_SIZE, _constants.GRID_SIZE * 6);
-var wrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  & > [data-ds--text-field--container] {\n    height: ", "px;\n    border-radius: ", "px;\n    flex: 1 1 100%;\n    overflow: visible;\n    & > [data-ds--text-field--input] {\n      margin-bottom: 3px;\n      font-size: ", ";\n      padding: ", "px 6px ", "px 0;\n    }\n  }\n"])), _constants.GRID_SIZE * 6, _constants.GRID_SIZE, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _constants.GRID_SIZE, _constants.GRID_SIZE);
+var wrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  & > [data-ds--text-field--container] {\n    height: ", "px;\n    border-radius: ", "px;\n    flex: 1 1 100%;\n    overflow: visible;\n    & > [data-ds--text-field--input] {\n      margin-bottom: 3px;\n      font-size: ", ";\n      padding: ", "px ", " ", "px 0;\n    }\n  }\n"])), _constants.GRID_SIZE * 6, _constants.GRID_SIZE, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _constants.GRID_SIZE, "var(--ds-space-075, 6px)", _constants.GRID_SIZE);
 var wrapperInline = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  & > [data-ds--text-field--container] {\n    height: ", "px;\n    flex: none;\n    overflow: revert;\n  }\n"])), _constants.GRID_SIZE * 5);
-var elementBeforeInput = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 1px 6px 0 8px;\n  color: ", ";\n\n  // Custom SearchIcon style\n  span,\n  svg {\n    height: 20px;\n    width: 20px;\n  }\n"])), "var(--ds-icon, ".concat(_colors.N200, ")"));
-var elementAfterInput = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 8px;\n  height: ", ";\n  text-align: center;\n"])), _constants.SEARCH_ITEM_HEIGHT_WIDTH);
+var elementBeforeInput = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 1px ", " 0 ", ";\n  color: ", ";\n\n  // Custom SearchIcon style\n  span,\n  svg {\n    height: 20px;\n    width: 20px;\n  }\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-100, 8px)", "var(--ds-icon, ".concat(_colors.N200, ")"));
+var elementAfterInput = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 ", ";\n  height: ", ";\n  text-align: center;\n"])), "var(--ds-space-100, 8px)", _constants.SEARCH_ITEM_HEIGHT_WIDTH);
 var MemoizedElementSearchWithAnalytics = /*#__PURE__*/(0, _react.memo)((0, _analyticsNext.withAnalyticsContext)({
   component: 'Searchbar'
 })((0, _reactIntlNext.injectIntl)(ElementSearch)));

package/dist/cjs/ui/ElementBrowser/components/StatelessElementBrowser.js

@@ -30,7 +30,7 @@ var baseBrowserContainerStyles = (0, _react2.css)(_templateObject2 || (_template
 var mobileElementBrowserContainer = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex-direction: column;\n"])), baseBrowserContainerStyles);
 var elementBrowserContainer = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex-direction: row;\n"])), baseBrowserContainerStyles);
 var baseSidebarStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: auto;\n  overflow-y: hidden;\n"])));
-var mobileSideBar = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0 ", ";\n  padding: 12px 12px 0 12px;\n"])), baseSidebarStyles, _constants.INLINE_SIDEBAR_HEIGHT);
+var mobileSideBar = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0 ", ";\n  padding: ", " ", " 0\n    ", ";\n"])), baseSidebarStyles, _constants.INLINE_SIDEBAR_HEIGHT, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
 var mobileSideBarShowCategories = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
 var sideBar = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0 'auto';\n"])), baseSidebarStyles);
 var sideBarShowCategories = (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0 ", ";\n"])), baseSidebarStyles, _constants.SIDEBAR_WIDTH);
@@ -43,6 +43,7 @@ var categoryListWrapper = (0, _react2.css)(_templateObject15 || (_templateObject
 function StatelessElementBrowser(props) {
   var items = props.items,
     onSelectItem = props.onSelectItem,
+    onInsertItem = props.onInsertItem,
     viewMoreItem = props.viewMoreItem;
   var _useContainerWidth = (0, _useContainerWidth2.default)(),
     containerWidth = _useContainerWidth.containerWidth,
@@ -92,10 +93,11 @@ function StatelessElementBrowser(props) {
     if (e.key !== 'Enter') {
       return;
     }
-    if (onSelectItem && selectedItem != null) {
-      onSelectItem(selectedItem);
+    if (onInsertItem && selectedItem != null) {
+      onInsertItem(selectedItem);
     }
-  }, [onSelectItem, selectedItem]);
+    e.preventDefault();
+  }, [onInsertItem, selectedItem]);
 
   /**
    * On arrow key selection and clicks the selectedItemIndex will change.
@@ -156,13 +158,13 @@ function MobileBrowser(_ref) {
     viewMoreItem = _ref.viewMoreItem;
   return (0, _react2.jsx)("div", {
     css: mobileElementBrowserContainer,
-    onKeyPress: onKeyPress,
     onKeyDown: onKeyDown,
     "data-testid": "mobile__element-browser"
   }, (0, _react2.jsx)("div", {
     css: showCategories ? [mobileSideBar, mobileSideBarShowCategories] : mobileSideBar
   }, showSearch && (0, _react2.jsx)(_ElementSearch.default, {
     onSearch: onSearch,
+    onKeyDown: onKeyPress,
     mode: mode,
     focus: focusOnSearch,
     onClick: setFocusOnSearch,
@@ -235,13 +237,13 @@ function DesktopBrowser(_ref2) {
     createAnalyticsEvent: createAnalyticsEvent
   }))), (0, _react2.jsx)("div", {
     css: mainContent,
-    onKeyPress: onKeyPress,
     onKeyDown: onKeyDown,
     "data-testid": "main-content"
   }, showSearch && (0, _react2.jsx)("div", {
     css: searchContainer
   }, (0, _react2.jsx)(_ElementSearch.default, {
     onSearch: onSearch,
+    onKeyDown: onKeyPress,
     mode: mode,
     focus: focusOnSearch,
     onClick: setFocusOnSearch,

package/dist/cjs/ui/Resizer/ResizeLabel/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _styles = require("./styles");
+/** @jsx jsx */
+
+var ResizeLabelBreakoutWidth = 110;
+var ResizeLabel = function ResizeLabel(props) {
+  return (0, _react.jsx)("div", {
+    css: _styles.wrapper
+  }, (0, _react.jsx)("span", {
+    css: [_styles.text, props.containerWidth < ResizeLabelBreakoutWidth && _styles.smallText]
+  }, props.label));
+};
+var _default = ResizeLabel;
+exports.default = _default;

package/dist/cjs/ui/Resizer/ResizeLabel/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapper = exports.text = exports.smallText = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _templateObject, _templateObject2, _templateObject3;
+var wrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n  width: 100%;\n  text-align: center;\n  position: absolute;\n  transform: translateY(-125%);\n  top: 0;\n"])), "var(--ds-font-size-100, 14px)");
+exports.wrapper = wrapper;
+var text = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  border-radius: 6px;\n  min-width: 75px;\n  background-color: ", ";\n  color: ", ";\n  padding: ", " ", ";\n  letter-spacing: 0.5px;\n"])), "var(--ds-text-accent-blue, ".concat(_colors.B300, ")"), "var(--ds-text-inverse, white)", "var(--ds-space-050, 4px)", "var(--ds-space-200, 16px)");
+exports.text = text;
+var smallText = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  letter-spacing: -0.5px;\n  font-size: ", ";\n  min-width: 27px;\n  padding: ", " ", ";\n"])), "var(--ds-font-size-050, 8px)", "var(--ds-space-0, 0px)", "var(--ds-space-025, 2px)");
+exports.smallText = smallText;

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.8.11";
+var version = "187.9.0";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.8.11",
+	"version": "187.9.0",
 	"sideEffects": false
 }

package/dist/es2019/plugins/floating-toolbar/index.js

@@ -315,7 +315,7 @@ function floatingToolbarPluginFactory(options) {
   };
   const apply = (tr, pluginState) => {
     const newPluginState = {
-      getConfigWithNodeInfo
+      ...pluginState
     };
     dispatch(pluginKey, newPluginState);
     return newPluginState;

package/dist/es2019/plugins/media/nodeviews/mediaSingle.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
@@ -8,6 +7,7 @@ import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaski
 import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import { setNodeSelection, setTextSelection } from '../../../utils';
+import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
@@ -22,6 +22,8 @@ import CaptionPlaceholder from '../ui/CaptionPlaceholder';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { getMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export default class MediaSingleNode extends Component {
   constructor(...args) {
     super(...args);
@@ -133,7 +135,8 @@ export default class MediaSingleNode extends Component {
       const tr = state.tr.setNodeMarkup(pos, undefined, {
         ...this.props.node.attrs,
         layout,
-        width
+        width,
+        widthType: 'pixel'
       });
       tr.setMeta('scrollIntoView', false);
       /**
@@ -220,14 +223,21 @@ export default class MediaSingleNode extends Component {
       view: {
         state
       },
-      view
+      view,
+      pluginInjectionApi,
+      width: containerWidth,
+      lineLength,
+      dispatchAnalyticsEvent
     } = this.props;
     const {
       layout,
-      width: mediaSingleWidth
+      widthType,
+      width: mediaSingleWidthAttribute
     } = node.attrs;
     const childNode = node.firstChild;
     const attrs = childNode.attrs;
+
+    // original width and height of child media node (scaled)
     let {
       width,
       height
@@ -259,15 +269,29 @@ export default class MediaSingleNode extends Component {
       width = DEFAULT_IMAGE_WIDTH;
       height = DEFAULT_IMAGE_HEIGHT;
     }
+    const isSelected = selected();
     const mediaSingleProps = {
       layout,
       width,
       height,
-      containerWidth: this.props.width,
-      lineLength: this.props.lineLength,
-      pctWidth: mediaSingleWidth,
+      containerWidth: containerWidth,
+      lineLength: this.getLineLength(view, getPos()) || lineLength,
+      pctWidth: mediaSingleWidthAttribute,
       fullWidthMode,
-      hasFallbackContainer: false
+      hasFallbackContainer: false,
+      mediaSingleWidth: mediaSingleWidthAttribute && getMediaSinglePixelWidth(mediaSingleWidthAttribute, lineLength, widthType)
+    };
+    const ResizableMediaSingleProps = {
+      view: view,
+      getPos: getPos,
+      updateSize: this.updateSize,
+      gridSize: 12,
+      viewMediaClientConfig: this.state.viewMediaClientConfig,
+      allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+      selected: isSelected,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: pluginInjectionApi,
+      ...mediaSingleProps
     };
     let canResize = !!this.props.mediaOptions.allowResizing;
     if (!this.props.mediaOptions.allowResizingInTables) {
@@ -282,12 +306,10 @@ export default class MediaSingleNode extends Component {
         canResize = canResize && !disabledNode;
       }
     }
-    const lineLength = this.getLineLength(view, getPos()) || this.props.lineLength;
-    const isSelected = selected();
     const shouldShowPlaceholder = getMediaFeatureFlag('captions', mediaOptions.featureFlags) && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
     const MediaChildren = jsx("figure", {
       ref: this.mediaSingleWrapperRef,
-      css: figureWrapper,
+      css: [figureWrapper],
       className: MediaSingleNodeSelector,
       onClick: this.onMediaSingleClicked
     }, jsx("div", {
@@ -296,18 +318,7 @@ export default class MediaSingleNode extends Component {
       ref: this.captionPlaceHolderRef,
       onClick: this.clickPlaceholder
     }));
-    return canResize ? jsx(ResizableMediaSingle, _extends({}, mediaSingleProps, {
-      lineLength: lineLength,
-      view: this.props.view,
-      getPos: getPos,
-      updateSize: this.updateSize,
-      gridSize: 12,
-      viewMediaClientConfig: this.state.viewMediaClientConfig,
-      allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
-      selected: isSelected,
-      dispatchAnalyticsEvent: this.props.dispatchAnalyticsEvent,
-      pluginInjectionApi: this.props.pluginInjectionApi
-    }), MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
+    return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, ResizableMediaSingleProps, MediaChildren) : jsx(ResizableMediaSingle, ResizableMediaSingleProps, MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
   }
 }
 _defineProperty(MediaSingleNode, "defaultProps", {

package/dist/es2019/plugins/media/toolbar/index.js

@@ -16,8 +16,9 @@ import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { messages } from '@atlaskit/media-ui';
 import { cardMessages } from '@atlaskit/editor-common/messages';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { FilePreviewItem } from './filePreviewItem';
-import { downloadMedia, removeMediaGroupNode } from './utils';
+import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
 import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
 import ImageBorderItem from '../ui/ImageBorder';
@@ -231,7 +232,22 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   }
   if (allowAdvancedToolBarOptions) {
     var _pluginInjectionApi$d;
-    const layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions, allowResizing, allowResizingInTables);
+    const widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width;
+    let isChangingLayoutDisabled = false;
+    if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
+      var _widthPlugin$sharedSt;
+      const contentWidth = widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength;
+      const selectedNode = getSelectedMediaSingle(state);
+      if (selectedNode && contentWidth) {
+        const {
+          width
+        } = selectedNode.node.attrs;
+        if (width >= contentWidth) {
+          isChangingLayoutDisabled = true;
+        }
+      }
+    }
+    const layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
     toolbarButtons = [...toolbarButtons, ...layoutButtons];
     if (layoutButtons.length) {
       toolbarButtons.push({
@@ -342,7 +358,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
   const {
     hoverDecoration
   } = (_pluginInjectionApi$d4 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d4 !== void 0 ? _pluginInjectionApi$d4 : {};
-  if (!mediaPluginState) {
+  if (!mediaPluginState || mediaPluginState.isResizing) {
     return;
   }
   const nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];

package/dist/es2019/plugins/media/toolbar/utils.js

@@ -1,5 +1,5 @@
 import { getMediaClient } from '@atlaskit/media-client';
-import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 export const getSelectedMediaContainerNodeAttrs = mediaPluginState => {
   const selectedNode = mediaPluginState.selectedMediaContainerNode();
   if (selectedNode && selectedNode.attrs) {
@@ -40,4 +40,10 @@ export const removeMediaGroupNode = state => {
     tr = removeSelectedNode(tr);
   }
   return tr;
+};
+export const getSelectedMediaSingle = state => {
+  const {
+    mediaSingle
+  } = state.schema.nodes;
+  return findSelectedNodeOfType(mediaSingle)(state.selection) || findParentNodeOfType(mediaSingle)(state.selection);
 };