@atlaskit/editor-common 100.4.3 → 101.0.0

package/dist/es2019/react-node-view/getInlineNodeViewProducer.js

@@ -8,7 +8,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { analyticsEventKey, browser, getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from '../utils';
@@ -16,9 +16,30 @@ import { ZERO_WIDTH_SPACE } from '../whitespace';
 import { generateUniqueNodeKey } from './generateUniqueNodeKey';
 import { getOrCreateOnVisibleObserver } from './onVisibleObserverFactory';
 export const inlineNodeViewClassname = 'inlineNodeView';
+
+// number of initial nodes to allow React to render before switching to fallback
+let initialReactRenderedNodeCount = 0;
 const canRenderFallback = node => {
   return node.type.isInline && node.type.isAtom && node.type.isLeaf;
 };
+const virtualisationConfiguration = () => {
+  let enableVirtualization = false;
+  let reactRenderedDocumentPositionThreshold = 0;
+  if (editorExperiment('platform_editor_inline_node_virtualization', 'off')) {
+    enableVirtualization = false;
+  } else if (editorExperiment('platform_editor_inline_node_virtualization', 'fallbackall')) {
+    enableVirtualization = true;
+    reactRenderedDocumentPositionThreshold = 0;
+  } else if (editorExperiment('platform_editor_inline_node_virtualization', 'fallbackoffscreen')) {
+    enableVirtualization = true;
+    reactRenderedDocumentPositionThreshold = 100;
+  }
+  return {
+    enableVirtualization,
+    reactRenderedDocumentPositionThreshold,
+    virtualizeCurrentNode: () => enableVirtualization && !(initialReactRenderedNodeCount < reactRenderedDocumentPositionThreshold)
+  };
+};
 function createNodeView({
   nodeViewParams,
   pmPluginFactoryParams,
@@ -26,7 +47,11 @@ function createNodeView({
   extraComponentProps,
   extraNodeViewProps
 }) {
-  const shouldVirtualize = fg('platform_editor_lego__inline_node_virtualization');
+  const {
+    enableVirtualization,
+    virtualizeCurrentNode
+  } = virtualisationConfiguration();
+  const virtualizeNode = virtualizeCurrentNode();
   // We set a variable for the current node which is
   // used for comparisions when doing updates, before being
   // overwritten to the updated node.
@@ -92,7 +117,7 @@ function createNodeView({
       });
     }
   }
-  if (shouldVirtualize) {
+  if (virtualizeNode) {
     renderFallback();
     // allow the fallback to render first before attaching the observer.
     // Will tweak this in a follow up PR to optimise rendering of visible
@@ -101,6 +126,7 @@ function createNodeView({
       attachNodeViewObserver();
     }, 0);
   } else {
+    initialReactRenderedNodeCount = initialReactRenderedNodeCount + 1;
     const {
       samplingRate,
       slowThreshold,
@@ -121,9 +147,9 @@ function createNodeView({
   }
   const extraNodeViewPropsWithStopEvent = {
     ...extraNodeViewProps,
-    ...(fg('platform_editor_lego__inline_node_virtualization') ? {
+    ...(enableVirtualization ? {
       // This is not related to virtualization, but it's something we should fix/handle
-      // Remove this comment when `platform_editor_lego__inline_node_virtualization` FF is cleaned up
+      // Remove this comment when virtualization experiment is cleaned up
       stopEvent(event) {
         const maybeStopEvent = extraNodeViewProps === null || extraNodeViewProps === void 0 ? void 0 : extraNodeViewProps.stopEvent;
         if (typeof maybeStopEvent === 'function') {
@@ -164,7 +190,7 @@ function createNodeView({
         setDomAttrs(nextNode, domRef);
       }
       currentNode = nextNode;
-      if (shouldVirtualize) {
+      if (virtualizeNode) {
         if (didRenderComponentWithIntersectionObserver) {
           renderComponent();
         }
@@ -174,7 +200,7 @@ function createNodeView({
       return true;
     },
     destroy() {
-      if (shouldVirtualize) {
+      if (virtualizeNode) {
         removeIntersectionObserver();
       }
 
@@ -186,7 +212,7 @@ function createNodeView({
       // of HTMLSpanElement type however once the node view has
       // been destroyed no other consumers should still be using it.
       domRef = undefined;
-      if (shouldVirtualize) {
+      if (virtualizeNode) {
         destroyed = true;
       }
     },

package/dist/es2019/selection/gap-cursor/styles.js

@@ -10,7 +10,7 @@ const gapCursorBlink = keyframes({
 });
 export const hideCaretModifier = 'ProseMirror-hide-gapcursor';
 const gapCursor = '.ProseMirror-gapcursor';
-const prosemirrorwidgetNotBlock = '.ProseMirror-widget:not([data-blocks-decoration-container="true"]):not([data-blocks-drag-handle-container="true"])';
+const prosemirrorwidgetNotBlock = '.ProseMirror-widget:not([data-blocks-decoration-container="true"]):not([data-blocks-drag-handle-container="true"]):not([data-blocks-quick-insert-container="true"])';
 const wrapLeft = '[layout="wrap-left"]';
 const wrapRight = '[layout="wrap-right"]';
 

package/dist/es2019/type-ahead/messages.js

@@ -89,5 +89,15 @@ export const typeAheadListMessages = defineMessages({
     id: 'fablric.editor.viewAllInserts',
     defaultMessage: 'View all inserts',
     description: 'a text on a button that opens a side panel with a list of all insertable editor elements'
+  },
+  emptySearchResults: {
+    id: 'fabric.editor.emptySearchResults',
+    defaultMessage: "We couldn't find any results.",
+    description: 'a message displayed when there are no search results'
+  },
+  emptySearchResultsSuggestion: {
+    id: 'fabric.editor.emptySearchResultsSuggestion',
+    defaultMessage: 'Select {buttonName} to browse inserts.',
+    description: 'a prompt to suggest user to click a button to browse inserts when there are no search results'
   }
 });

package/dist/es2019/ui/DropList/index.js

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "100.4.3";
+const packageVersion = "101.0.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/es2019/ui/FloatingToolbar/Button.js

@@ -6,6 +6,9 @@ import Tooltip from '@atlaskit/tooltip';
 import { Pulse } from '../Pulse/Pulse';
 import { ButtonSpotlightCard } from './ButtonSpotlightCard';
 import { getButtonStyles, iconOnlySpacing } from './styles';
+const minWidthStyle = {
+  minWidth: "var(--ds-space-400, 32px)"
+};
 export default (({
   title,
   icon,
@@ -87,7 +90,8 @@ export default (({
             appearance,
             state: themeProps.state,
             mode: themeProps.mode
-          }))
+          })),
+          ...(editorExperiment('platform_editor_controls', 'variant1') ? minWidthStyle : {})
         },
         ...rest
       };

package/dist/es2019/ui/FloatingToolbar/Separator.js

@@ -4,6 +4,7 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 const separator = css({
   background: "var(--ds-border, #091E4224)",
   width: '1px',
@@ -11,14 +12,20 @@ const separator = css({
   margin: `0 ${"var(--ds-space-050, 4px)"}`,
   alignSelf: 'center'
 });
+const separatorNew = css({
+  background: "var(--ds-border, #091E4224)",
+  width: '1px',
+  height: '20px',
+  alignSelf: 'center'
+});
 const separatorFullHeight = css({
   height: '40px'
 });
 export default (({
   fullHeight
-}) =>
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-jsx("div", {
-  css: [separator, fullHeight && separatorFullHeight],
+}) => jsx("div", {
+  css: [editorExperiment('platform_editor_controls', 'variant1') ? separatorNew : separator, fullHeight && separatorFullHeight]
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  ,
   className: "separator"
 }));

package/dist/es2019/ui-menu/ColorPickerButton/index.js

@@ -14,6 +14,7 @@ import LegacyExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss, Inline } from '@atlaskit/primitives';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
 import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
@@ -248,7 +249,7 @@ const ColorPickerButton = props => {
     ref: buttonRef,
     "aria-label": title,
     "aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
-    spacing: "compact",
+    spacing: editorExperiment('platform_editor_controls', 'variant1') ? 'default' : 'compact',
     onClick: togglePopup,
     onKeyDown: event => {
       if (event.key === 'Enter' || event.key === ' ') {