@atlaskit/editor-common 59.0.0 → 60.2.0

package/dist/cjs/utils/validator.js

@@ -387,21 +387,44 @@ var getValidNode = function getValidNode(originalNode) {
           break;
         }
 
-      case 'media':
+      case 'mediaInline':
         {
           var mediaId = '';
-          var mediaType = '';
           var mediaCollection = [];
-          var mediaUrl = '';
 
           if (attrs) {
             var id = attrs.id,
-                collection = attrs.collection,
+                collection = attrs.collection;
+            mediaId = id;
+            mediaCollection = collection;
+          }
+
+          if (mediaId && mediaCollection && adfStage === 'stage0') {
+            return {
+              type: type,
+              attrs: attrs,
+              marks: marks
+            };
+          }
+
+          break;
+        }
+
+      case 'media':
+        {
+          var _mediaId = '';
+          var mediaType = '';
+          var _mediaCollection = [];
+          var mediaUrl = '';
+
+          if (attrs) {
+            var _id = attrs.id,
+                _collection = attrs.collection,
                 _type = attrs.type,
                 url = attrs.url;
-            mediaId = id;
+            _mediaId = _id;
             mediaType = _type;
-            mediaCollection = collection;
+            _mediaCollection = _collection;
             mediaUrl = url;
           }
 
@@ -421,11 +444,11 @@ var getValidNode = function getValidNode(originalNode) {
               type: type,
               attrs: mediaAttrs
             };
-          } else if (mediaId && mediaType) {
+          } else if (_mediaId && mediaType) {
             var _mediaAttrs = {
               type: mediaType,
-              id: mediaId,
-              collection: mediaCollection
+              id: _mediaId,
+              collection: _mediaCollection
             };
 
             if (attrs.width) {
@@ -494,10 +517,10 @@ var getValidNode = function getValidNode(originalNode) {
           if (attrs) {
             var _text = attrs.text,
                 displayName = attrs.displayName,
-                _id = attrs.id,
+                _id2 = attrs.id,
                 accessLevel = attrs.accessLevel;
             mentionText = _text || displayName;
-            mentionId = _id;
+            mentionId = _id2;
             mentionAccess = accessLevel;
           }
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "59.0.0",
+	"version": "60.2.0",
 	"sideEffects": false
 }

package/dist/es2019/in-product.js

@@ -1 +1 @@
-export { editorFundamentalsTestCollection, editorUploadMediaTestCase, EditorPageObject } from './__tests_external__';
+export { fundamentalsTestCollection, blueLinksTestCollection, inlineSmartLinksTestCollection, blockSmartLinksTestCollection, embedSmartLinksTestCollection, mediaTestCollection, EditorPageObject } from './__tests_external__';

package/dist/es2019/index.js

@@ -1,4 +1,4 @@
-export { ADFTraversor, ErrorReporter, ZERO_WIDTH_SPACE, absoluteBreakoutWidth, browser, calcBreakoutWidth, breakoutConsts, calcTableColumnWidths, calcWideWidth, clearMeasure, compose, convertProsemirrorTableNodeToArrayOfRows, createCompareNodes, findAndTrackUnsupportedContentNodes, getAnalyticsAppearance, analyticsEventKey, getAnalyticsEventSeverity, getUnsupportedContentLevelData, UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEFAULTS, getExtensionLozengeData, getExtensionRenderer, getMarksByOrder, getModeFromTheme, getResponseEndTime, getValidContent, getValidDocument, getValidMark, getValidNode, getValidUnknownNode, hasMergedCell, isPastDate, isPerformanceAPIAvailable, isPerformanceObserverAvailable, isSameMark, isSubSupType, markOrder, measureRender, startMeasure, stopMeasure, measureTTI, getTTISeverity, TTI_SEVERITY_THRESHOLD_DEFAULTS, TTI_FROM_INVOCATION_SEVERITY_THRESHOLD_DEFAULTS, timestampToIsoFormat, timestampToString, timestampToTaskContext, timestampToUTCDate, todayTimestampInUTC, withImageLoader, canApplyAnnotationOnRange, getAnnotationIdsFromRange, SEVERITY, UNSUPPORTED_CONTENT_LEVEL_SEVERITY, shouldForceTracking, sniffUserBrowserExtensions } from './utils';
+export { ADFTraversor, ErrorReporter, ZERO_WIDTH_SPACE, absoluteBreakoutWidth, browser, calcBreakoutWidth, breakoutConsts, calcTableColumnWidths, calcWideWidth, clearMeasure, compose, convertProsemirrorTableNodeToArrayOfRows, createCompareNodes, findAndTrackUnsupportedContentNodes, getAnalyticsAppearance, analyticsEventKey, getAnalyticsEventSeverity, getUnsupportedContentLevelData, UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEFAULTS, getExtensionLozengeData, getExtensionRenderer, getMarksByOrder, getModeFromTheme, getResponseEndTime, getValidContent, getValidDocument, getValidMark, getValidNode, getValidUnknownNode, hasMergedCell, isPastDate, isPerformanceAPIAvailable, isPerformanceObserverAvailable, isSameMark, isSubSupType, markOrder, measureRender, startMeasure, stopMeasure, measureTTI, getTTISeverity, TTI_SEVERITY_THRESHOLD_DEFAULTS, TTI_FROM_INVOCATION_SEVERITY_THRESHOLD_DEFAULTS, timestampToIsoFormat, timestampToString, timestampToTaskContext, timestampToUTCDate, todayTimestampInUTC, withImageLoader, canApplyAnnotationOnRange, getAnnotationIdsFromRange, SEVERITY, UNSUPPORTED_CONTENT_LEVEL_SEVERITY, shouldForceTracking, sniffUserBrowserExtensions, RenderCountProfiler } from './utils';
 export { SortOrder, AnnotationUpdateEmitter, AnnotationUpdateEvent } from './types';
 export { DefaultExtensionProvider, combineExtensionProviders, getExtensionKeyAndNodeKey, getExtensionModuleNode, getExtensionModuleNodePrivateProps, getQuickInsertItemsFromModule, getNodeRenderer, getContextualToolbarItemsFromModule, buildMenuItem, resolveImport } from './extensions';
 export { ProviderFactory, WithProviders } from './provider-factory';

package/dist/es2019/styles/shared/panel.js

@@ -1,6 +1,8 @@
 import { css } from 'styled-components';
 import { hexToRgba, PanelType } from '@atlaskit/adf-schema';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
+import { emojiImage, emojiSprite } from '@atlaskit/emoji';
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
@@ -53,6 +55,7 @@ const darkTextColor = {
   warning: colors.Y75,
   error: colors.R75
 };
+const verticalAlignment = -((gridSize() * 3 - akEditorCustomIconSize) / 2);
 const prefix = 'ak-editor-panel';
 export const PanelSharedCssClassName = {
   prefix,
@@ -66,7 +69,13 @@ export const PanelSharedSelectors = {
   errorPanel: `.${prefix}[data-panel-type=${PanelType.ERROR}]`,
   successPanel: `.${prefix}[data-panel-type=${PanelType.SUCCESS}]`,
   noteButton: `button[aria-label="Note"]`,
-  removeButton: `button[aria-label="Remove"]`
+  removeButton: `button[aria-label="Remove"]`,
+  colorPalette: `[aria-label="Background color"]`,
+  selectedColor: `[aria-label="The smell"]`,
+  removeEmojiIcon: `[aria-label="Remove emoji"]`,
+  emojiIcon: `[aria-label="editor-add-emoji"]`,
+  selectedEmoji: `[aria-label=":grinning:"]`,
+  title: `#editor-title`
 };
 
 const iconDynamicStyles = panelType => props => {
@@ -117,24 +126,33 @@ export const panelSharedStyles = css`
     padding: ${gridSize()}px;
     min-width: ${akEditorTableCellMinWidth}px;
     display: flex;
+    position: relative;
     align-items: baseline;
     word-break: break-word;
 
     ${mainDynamicStyles(PanelType.INFO)}
 
     .${PanelSharedCssClassName.icon} {
-      display: block;
       flex-shrink: 0;
       height: ${gridSize() * 3}px;
       width: ${gridSize() * 3}px;
       box-sizing: content-box;
       padding-right: ${gridSize()}px;
+      text-align: center;
+      user-select: none;
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
       ${iconDynamicStyles(PanelType.INFO)}
 
       > span {
         vertical-align: middle;
         display: inline;
       }
+
+      .${emojiSprite}, .${emojiImage} {
+        vertical-align: ${verticalAlignment}px;
+      }
     }
 
     .ak-editor-panel__content {

package/dist/es2019/styles/shared/table.js

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { tableCellContentDomSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
+import { tableCellContentDomSelector, tableCellSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
 import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorWideLayoutWidth, getTableCellBackgroundDarkModeColors, overflowShadow } from '@atlaskit/editor-shared-styles';
 import { DN20 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
@@ -22,7 +22,8 @@ export const TableSharedCssClassName = {
   TABLE_STICKY_WRAPPER: `${tablePrefixSelector}-sticky-wrapper`,
   TABLE_STICKY_SENTINEL_TOP: `${tablePrefixSelector}-sticky-sentinel-top`,
   TABLE_STICKY_SENTINEL_BOTTOM: `${tablePrefixSelector}-sticky-sentinel-bottom`,
-  TABLE_CELL_NODEVIEW_CONTENT_DOM: tableCellContentDomSelector
+  TABLE_CELL_NODEVIEW_CONTENT_DOM: tableCellContentDomSelector,
+  TABLE_CELL_WRAPPER: tableCellSelector
 };
 const tableSharedStyle = css`
   .${TableSharedCssClassName.TABLE_CONTAINER} {
@@ -87,7 +88,7 @@ const tableSharedStyle = css`
         border-bottom-width: 0;
         padding: ${tableCellPadding}px;
         /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */
-        ${browser.gecko || browser.ie ? 'background-clip: padding-box;' : ''}
+        ${browser.gecko || browser.ie || browser.mac && browser.chrome ? 'background-clip: padding-box;' : ''}
 
         ${themed({
   dark: getTableCellBackgroundDarkModeColors

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

@@ -0,0 +1,17 @@
+export let TypeAheadAvailableNodes;
+
+(function (TypeAheadAvailableNodes) {
+  TypeAheadAvailableNodes["EMOJI"] = "emojiTypeAhead";
+  TypeAheadAvailableNodes["MENTION"] = "mentionTypeAhead";
+  TypeAheadAvailableNodes["QUICK_INSERT"] = "quickInsertTypeAhead";
+})(TypeAheadAvailableNodes || (TypeAheadAvailableNodes = {}));
+
+export let SelectItemMode;
+
+(function (SelectItemMode) {
+  SelectItemMode["SHIFT_ENTER"] = "shift-enter";
+  SelectItemMode["ENTER"] = "enter";
+  SelectItemMode["SPACE"] = "space";
+  SelectItemMode["SELECTED"] = "selected";
+  SelectItemMode["TAB"] = "tab";
+})(SelectItemMode || (SelectItemMode = {}));

package/dist/es2019/ufo/experience-store.js

@@ -0,0 +1,115 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ExperiencePerformanceTypes, ExperienceTypes, UFOExperience } from '@atlaskit/ufo';
+export const experienceConfig = {
+  type: ExperienceTypes.Operation,
+  performanceType: ExperiencePerformanceTypes.Custom,
+  platform: {
+    component: 'editor'
+  }
+};
+export let EditorExperience;
+
+(function (EditorExperience) {
+  EditorExperience["loadEditor"] = "load";
+  EditorExperience["typing"] = "type";
+  EditorExperience["interaction"] = "interact";
+})(EditorExperience || (EditorExperience = {}));
+
+export const RELIABILITY_INTERVAL = 30000;
+export class ExperienceStore {
+  constructor() {
+    this.experiences = new Map();
+
+    for (const experienceId of Object.values(EditorExperience)) {
+      const experience = new UFOExperience(experienceId, experienceConfig);
+      this.experiences.set(experienceId, experience);
+    }
+  }
+
+  static getInstance(view, options = {}) {
+    if (!this.stores.get(view) || options !== null && options !== void 0 && options.forceNewInstance) {
+      const store = new ExperienceStore();
+      this.stores.set(view, store);
+    }
+
+    return this.stores.get(view);
+  }
+
+  get(experienceId) {
+    return this.experiences.get(experienceId);
+  }
+
+  getActive(experienceId) {
+    const experience = this.experiences.get(experienceId);
+
+    if (!(experience !== null && experience !== void 0 && experience.state.final)) {
+      return experience;
+    }
+  }
+
+  getAll() {
+    return Array.from(this.experiences.values());
+  }
+
+  start(experienceId, startTime) {
+    var _this$get;
+
+    (_this$get = this.get(experienceId)) === null || _this$get === void 0 ? void 0 : _this$get.start(startTime);
+  }
+
+  addMetadata(experienceId, metadata) {
+    var _this$get2;
+
+    (_this$get2 = this.get(experienceId)) === null || _this$get2 === void 0 ? void 0 : _this$get2.addMetadata(metadata);
+  }
+
+  mark(experienceId, mark, value) {
+    var _this$get3;
+
+    (_this$get3 = this.get(experienceId)) === null || _this$get3 === void 0 ? void 0 : _this$get3.mark(mark, value);
+  }
+
+  success(experienceId, metadata) {
+    var _this$getActive;
+
+    (_this$getActive = this.getActive(experienceId)) === null || _this$getActive === void 0 ? void 0 : _this$getActive.success({
+      metadata
+    });
+  }
+
+  fail(experienceId, metadata) {
+    var _this$getActive2;
+
+    (_this$getActive2 = this.getActive(experienceId)) === null || _this$getActive2 === void 0 ? void 0 : _this$getActive2.failure({
+      metadata
+    });
+  }
+
+  abort(experienceId, metadata) {
+    // We add this wait in here because when React catches an error it unmounts the component
+    // before the error boundary's componentDidCatch is called
+    // In this case we want to fail the experience, but without this wait, abort is called first
+    setTimeout(() => {
+      var _this$getActive3;
+
+      (_this$getActive3 = this.getActive(experienceId)) === null || _this$getActive3 === void 0 ? void 0 : _this$getActive3.abort({
+        metadata
+      });
+    }, 0);
+  }
+
+  abortAll(metadata) {
+    this.experiences.forEach(experience => {
+      this.abort(experience.id, metadata);
+    });
+  }
+
+  failAll(metadata) {
+    this.experiences.forEach(experience => {
+      this.fail(experience.id, metadata);
+    });
+  }
+
+}
+
+_defineProperty(ExperienceStore, "stores", new WeakMap());

package/dist/es2019/ufo/index.js

@@ -0,0 +1 @@
+export { ExperienceStore, EditorExperience, RELIABILITY_INTERVAL } from './experience-store';

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

@@ -4,7 +4,6 @@ import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { G400, N200, R400 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-import { multiply } from '@atlaskit/theme/math';
 import { h200 } from '@atlaskit/theme/typography';
 const Message = styled.div`
   ${h200} font-weight: normal;
@@ -19,7 +18,7 @@ const Message = styled.div`
 
   return N200;
 }};
-  margin-top: ${multiply(gridSize, 0.5)}px;
+  margin-top: ${gridSize() / 2}px;
   display: flex;
   justify-content: baseline;
 `;

package/dist/es2019/utils/browser.js

@@ -7,7 +7,10 @@ const result = {
   chrome_version: 0,
   android: false,
   ios: false,
-  webkit: false
+  webkit: false,
+  safari: false,
+  supportsIntersectionObserver: false,
+  supportsResizeObserver: false
 };
 
 if (typeof navigator !== 'undefined') {
@@ -23,6 +26,9 @@ if (typeof navigator !== 'undefined') {
   result.android = /Android \d/.test(navigator.userAgent);
   result.ios = !ie && /AppleWebKit/.test(navigator.userAgent) && /Mobile\/\w+/.test(navigator.userAgent);
   result.webkit = !ie && !!document.documentElement && 'WebkitAppearance' in document.documentElement.style;
+  result.safari = Boolean(navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && navigator.userAgent.indexOf('CriOS') === -1 && navigator.userAgent.indexOf('FxiOS') === -1);
+  result.supportsIntersectionObserver = typeof window !== 'undefined' && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype;
+  result.supportsResizeObserver = typeof window !== 'undefined' && 'ResizeObserver' in window && 'ResizeObserverEntry' in window;
 }
 
 export default result;

package/dist/es2019/utils/index.js

@@ -21,4 +21,5 @@ export { compose } from './compose';
 export { ZERO_WIDTH_SPACE } from './whitespace';
 export { shouldForceTracking } from './should-force-tracking';
 export { getModeFromTheme } from './getModeFromTheme';
-export { sniffUserBrowserExtensions } from './browser-extensions';
+export { sniffUserBrowserExtensions } from './browser-extensions';
+export { RenderCountProfiler } from './profiler/render-count';

package/dist/es2019/utils/profiler/render-count.js

@@ -0,0 +1,107 @@
+export const PROFILER_KEY = '__editorRenderCountProfiler';
+export class RenderCountProfiler {
+  /**
+   * The singleton/cached instance of RenderCountProfiler that will be shared
+   * betweenRenderCountProfiler.getInstance() calls
+   */
+  constructor({
+    store
+  }) {
+    this.store = store;
+  }
+  /**
+   * Returns the singleton/cached instance of RenderCountProfiler that
+   * currently exists. If it hasn't been instantiated yet, the singleton
+   * instance will be created using the given params. Returns the latest
+   * singleton/instance.
+   */
+
+
+  static getInstance(params) {
+    if (!RenderCountProfiler.instance) {
+      RenderCountProfiler.instance = new RenderCountProfiler({
+        store: params.store
+      });
+    }
+
+    return RenderCountProfiler.instance;
+  }
+
+  getData(profilerKey) {
+    var _this$store;
+
+    return (_this$store = this.store) === null || _this$store === void 0 ? void 0 : _this$store[profilerKey];
+  }
+
+  enable() {
+    this.store[PROFILER_KEY] = { ...this.store[PROFILER_KEY],
+      enabled: true
+    };
+  }
+
+  remove() {
+    delete this.store[PROFILER_KEY];
+  }
+
+  isEnabled() {
+    var _this$store2, _this$store2$PROFILER;
+
+    return Boolean((_this$store2 = this.store) === null || _this$store2 === void 0 ? void 0 : (_this$store2$PROFILER = _this$store2[PROFILER_KEY]) === null || _this$store2$PROFILER === void 0 ? void 0 : _this$store2$PROFILER.enabled);
+  }
+
+  setRenderCount({
+    componentId,
+    renderCount,
+    instanceId
+  }) {
+    const profilerData = this.store[PROFILER_KEY];
+    const instance = {
+      count: renderCount
+    };
+    const existingComponents = profilerData === null || profilerData === void 0 ? void 0 : profilerData.components;
+    const existingInstances = existingComponents === null || existingComponents === void 0 ? void 0 : existingComponents[componentId];
+    const updatedComponent = { ...existingInstances,
+      [instanceId]: instance
+    };
+    this.store[PROFILER_KEY] = { ...profilerData,
+      components: { ...existingComponents,
+        [componentId]: updatedComponent
+      }
+    };
+  }
+
+  getInstanceRenderCounters({
+    componentId
+  }) {
+    var _this$store$PROFILER_, _this$store3, _this$store3$PROFILER, _this$store3$PROFILER2;
+
+    const component = (_this$store$PROFILER_ = (_this$store3 = this.store) === null || _this$store3 === void 0 ? void 0 : (_this$store3$PROFILER = _this$store3[PROFILER_KEY]) === null || _this$store3$PROFILER === void 0 ? void 0 : (_this$store3$PROFILER2 = _this$store3$PROFILER.components) === null || _this$store3$PROFILER2 === void 0 ? void 0 : _this$store3$PROFILER2[componentId]) !== null && _this$store$PROFILER_ !== void 0 ? _this$store$PROFILER_ : {};
+    const counters = [];
+
+    for (let instanceId in component) {
+      const counter = {
+        instanceId,
+        count: component[instanceId].count
+      };
+      counters.push(counter);
+    }
+
+    return counters;
+  }
+
+  getRenderCount({
+    componentId
+  }) {
+    var _this$store$PROFILER_2, _this$store4, _this$store4$PROFILER, _this$store4$PROFILER2;
+
+    const component = (_this$store$PROFILER_2 = (_this$store4 = this.store) === null || _this$store4 === void 0 ? void 0 : (_this$store4$PROFILER = _this$store4[PROFILER_KEY]) === null || _this$store4$PROFILER === void 0 ? void 0 : (_this$store4$PROFILER2 = _this$store4$PROFILER.components) === null || _this$store4$PROFILER2 === void 0 ? void 0 : _this$store4$PROFILER2[componentId]) !== null && _this$store$PROFILER_2 !== void 0 ? _this$store$PROFILER_2 : {};
+    let total = 0;
+
+    for (let instanceId in component) {
+      total += component[instanceId].count;
+    }
+
+    return total;
+  }
+
+}

package/dist/es2019/utils/validator.js

@@ -342,6 +342,31 @@ export const getValidNode = (originalNode, schema = defaultSchema, adfStage = 'f
           break;
         }
 
+      case 'mediaInline':
+        {
+          let mediaId = '';
+          let mediaCollection = [];
+
+          if (attrs) {
+            const {
+              id,
+              collection
+            } = attrs;
+            mediaId = id;
+            mediaCollection = collection;
+          }
+
+          if (mediaId && mediaCollection && adfStage === 'stage0') {
+            return {
+              type,
+              attrs,
+              marks
+            };
+          }
+
+          break;
+        }
+
       case 'media':
         {
           let mediaId = '';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "59.0.0",
+	"version": "60.2.0",
 	"sideEffects": false
 }

package/dist/esm/in-product.js

@@ -1 +1 @@
-export { editorFundamentalsTestCollection, editorUploadMediaTestCase, EditorPageObject } from './__tests_external__';
+export { fundamentalsTestCollection, blueLinksTestCollection, inlineSmartLinksTestCollection, blockSmartLinksTestCollection, embedSmartLinksTestCollection, mediaTestCollection, EditorPageObject } from './__tests_external__';

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-export { ADFTraversor, ErrorReporter, ZERO_WIDTH_SPACE, absoluteBreakoutWidth, browser, calcBreakoutWidth, breakoutConsts, calcTableColumnWidths, calcWideWidth, clearMeasure, compose, convertProsemirrorTableNodeToArrayOfRows, createCompareNodes, findAndTrackUnsupportedContentNodes, getAnalyticsAppearance, analyticsEventKey, getAnalyticsEventSeverity, getUnsupportedContentLevelData, UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEFAULTS, getExtensionLozengeData, getExtensionRenderer, getMarksByOrder, getModeFromTheme, getResponseEndTime, getValidContent, getValidDocument, getValidMark, getValidNode, getValidUnknownNode, hasMergedCell, isPastDate, isPerformanceAPIAvailable, isPerformanceObserverAvailable, isSameMark, isSubSupType, markOrder, measureRender, startMeasure, stopMeasure, measureTTI, getTTISeverity, TTI_SEVERITY_THRESHOLD_DEFAULTS, TTI_FROM_INVOCATION_SEVERITY_THRESHOLD_DEFAULTS, timestampToIsoFormat, timestampToString, timestampToTaskContext, timestampToUTCDate, todayTimestampInUTC, withImageLoader, canApplyAnnotationOnRange, getAnnotationIdsFromRange, SEVERITY, UNSUPPORTED_CONTENT_LEVEL_SEVERITY, shouldForceTracking, sniffUserBrowserExtensions } from './utils';
+export { ADFTraversor, ErrorReporter, ZERO_WIDTH_SPACE, absoluteBreakoutWidth, browser, calcBreakoutWidth, breakoutConsts, calcTableColumnWidths, calcWideWidth, clearMeasure, compose, convertProsemirrorTableNodeToArrayOfRows, createCompareNodes, findAndTrackUnsupportedContentNodes, getAnalyticsAppearance, analyticsEventKey, getAnalyticsEventSeverity, getUnsupportedContentLevelData, UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEFAULTS, getExtensionLozengeData, getExtensionRenderer, getMarksByOrder, getModeFromTheme, getResponseEndTime, getValidContent, getValidDocument, getValidMark, getValidNode, getValidUnknownNode, hasMergedCell, isPastDate, isPerformanceAPIAvailable, isPerformanceObserverAvailable, isSameMark, isSubSupType, markOrder, measureRender, startMeasure, stopMeasure, measureTTI, getTTISeverity, TTI_SEVERITY_THRESHOLD_DEFAULTS, TTI_FROM_INVOCATION_SEVERITY_THRESHOLD_DEFAULTS, timestampToIsoFormat, timestampToString, timestampToTaskContext, timestampToUTCDate, todayTimestampInUTC, withImageLoader, canApplyAnnotationOnRange, getAnnotationIdsFromRange, SEVERITY, UNSUPPORTED_CONTENT_LEVEL_SEVERITY, shouldForceTracking, sniffUserBrowserExtensions, RenderCountProfiler } from './utils';
 export { SortOrder, AnnotationUpdateEmitter, AnnotationUpdateEvent } from './types';
 export { DefaultExtensionProvider, combineExtensionProviders, getExtensionKeyAndNodeKey, getExtensionModuleNode, getExtensionModuleNodePrivateProps, getQuickInsertItemsFromModule, getNodeRenderer, getContextualToolbarItemsFromModule, buildMenuItem, resolveImport } from './extensions';
 export { ProviderFactory, WithProviders } from './provider-factory';

package/dist/esm/styles/shared/panel.js

@@ -5,6 +5,8 @@ var _templateObject;
 import { css } from 'styled-components';
 import { hexToRgba, PanelType } from '@atlaskit/adf-schema';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
+import { emojiImage, emojiSprite } from '@atlaskit/emoji';
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
@@ -57,6 +59,7 @@ var darkTextColor = {
   warning: colors.Y75,
   error: colors.R75
 };
+var verticalAlignment = -((gridSize() * 3 - akEditorCustomIconSize) / 2);
 var prefix = 'ak-editor-panel';
 export var PanelSharedCssClassName = {
   prefix: prefix,
@@ -70,7 +73,13 @@ export var PanelSharedSelectors = {
   errorPanel: ".".concat(prefix, "[data-panel-type=").concat(PanelType.ERROR, "]"),
   successPanel: ".".concat(prefix, "[data-panel-type=").concat(PanelType.SUCCESS, "]"),
   noteButton: "button[aria-label=\"Note\"]",
-  removeButton: "button[aria-label=\"Remove\"]"
+  removeButton: "button[aria-label=\"Remove\"]",
+  colorPalette: "[aria-label=\"Background color\"]",
+  selectedColor: "[aria-label=\"The smell\"]",
+  removeEmojiIcon: "[aria-label=\"Remove emoji\"]",
+  emojiIcon: "[aria-label=\"editor-add-emoji\"]",
+  selectedEmoji: "[aria-label=\":grinning:\"]",
+  title: "#editor-title"
 };
 
 var iconDynamicStyles = function iconDynamicStyles(panelType) {
@@ -113,4 +122,4 @@ var mainDynamicStyles = function mainDynamicStyles(panelType) {
   };
 };
 
-export var panelSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", "px;\n    margin: ", " 0 0;\n    padding: ", "px;\n    min-width: ", "px;\n    display: flex;\n    align-items: baseline;\n    word-break: break-word;\n\n    ", "\n\n    .", " {\n      display: block;\n      flex-shrink: 0;\n      height: ", "px;\n      width: ", "px;\n      box-sizing: content-box;\n      padding-right: ", "px;\n      ", "\n\n      > span {\n        vertical-align: middle;\n        display: inline;\n      }\n    }\n\n    .ak-editor-panel__content {\n      margin: 1px 0 1px;\n      flex: 1 0 0;\n      /*\n        https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n        The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n      */\n      min-width: 0;\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n  }\n"])), PanelSharedCssClassName.prefix, borderRadius(), blockNodesVerticalMargin, gridSize(), akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO), PanelSharedCssClassName.icon, gridSize() * 3, gridSize() * 3, gridSize(), iconDynamicStyles(PanelType.INFO), PanelType.NOTE, mainDynamicStyles(PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE), PanelType.TIP, mainDynamicStyles(PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS));
+export var panelSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", "px;\n    margin: ", " 0 0;\n    padding: ", "px;\n    min-width: ", "px;\n    display: flex;\n    position: relative;\n    align-items: baseline;\n    word-break: break-word;\n\n    ", "\n\n    .", " {\n      flex-shrink: 0;\n      height: ", "px;\n      width: ", "px;\n      box-sizing: content-box;\n      padding-right: ", "px;\n      text-align: center;\n      user-select: none;\n      -moz-user-select: none;\n      -webkit-user-select: none;\n      -ms-user-select: none;\n      ", "\n\n      > span {\n        vertical-align: middle;\n        display: inline;\n      }\n\n      .", ", .", " {\n        vertical-align: ", "px;\n      }\n    }\n\n    .ak-editor-panel__content {\n      margin: 1px 0 1px;\n      flex: 1 0 0;\n      /*\n        https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n        The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n      */\n      min-width: 0;\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n\n    &[data-panel-type='", "'] {\n      ", "\n\n      .", " {\n        ", "\n      }\n    }\n  }\n"])), PanelSharedCssClassName.prefix, borderRadius(), blockNodesVerticalMargin, gridSize(), akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO), PanelSharedCssClassName.icon, gridSize() * 3, gridSize() * 3, gridSize(), iconDynamicStyles(PanelType.INFO), emojiSprite, emojiImage, verticalAlignment, PanelType.NOTE, mainDynamicStyles(PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE), PanelType.TIP, mainDynamicStyles(PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS));

package/dist/esm/styles/shared/table.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import { css } from 'styled-components';
-import { tableCellContentDomSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
+import { tableCellContentDomSelector, tableCellSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
 import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorWideLayoutWidth, getTableCellBackgroundDarkModeColors, overflowShadow } from '@atlaskit/editor-shared-styles';
 import { DN20 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
@@ -26,7 +26,8 @@ export var TableSharedCssClassName = {
   TABLE_STICKY_WRAPPER: "".concat(tablePrefixSelector, "-sticky-wrapper"),
   TABLE_STICKY_SENTINEL_TOP: "".concat(tablePrefixSelector, "-sticky-sentinel-top"),
   TABLE_STICKY_SENTINEL_BOTTOM: "".concat(tablePrefixSelector, "-sticky-sentinel-bottom"),
-  TABLE_CELL_NODEVIEW_CONTENT_DOM: tableCellContentDomSelector
+  TABLE_CELL_NODEVIEW_CONTENT_DOM: tableCellContentDomSelector,
+  TABLE_CELL_WRAPPER: tableCellSelector
 };
 var tableSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-child > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n  }\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    margin: ", "px ", "px 0 0;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: white;\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, tableCellBorderWidth, themed({
   light: akEditorTableBorder,
@@ -34,7 +35,7 @@ var tableSharedStyle = css(_templateObject || (_templateObject = _taggedTemplate
 }), tableCellMinWidth, themed({
   light: akEditorTableBorder,
   dark: akEditorTableBorderDark
-}), tableCellPadding, browser.gecko || browser.ie ? 'background-clip: padding-box;' : '', themed({
+}), tableCellPadding, browser.gecko || browser.ie || browser.mac && browser.chrome ? 'background-clip: padding-box;' : '', themed({
   dark: getTableCellBackgroundDarkModeColors
 }), themed({
   light: akEditorTableToolbar,

package/dist/esm/type-ahead/index.js

@@ -0,0 +1,17 @@
+export var TypeAheadAvailableNodes;
+
+(function (TypeAheadAvailableNodes) {
+  TypeAheadAvailableNodes["EMOJI"] = "emojiTypeAhead";
+  TypeAheadAvailableNodes["MENTION"] = "mentionTypeAhead";
+  TypeAheadAvailableNodes["QUICK_INSERT"] = "quickInsertTypeAhead";
+})(TypeAheadAvailableNodes || (TypeAheadAvailableNodes = {}));
+
+export var SelectItemMode;
+
+(function (SelectItemMode) {
+  SelectItemMode["SHIFT_ENTER"] = "shift-enter";
+  SelectItemMode["ENTER"] = "enter";
+  SelectItemMode["SPACE"] = "space";
+  SelectItemMode["SELECTED"] = "selected";
+  SelectItemMode["TAB"] = "tab";
+})(SelectItemMode || (SelectItemMode = {}));