@atlaskit/editor-common 60.2.0 → 62.0.0

package/dist/es2019/i18n/fi.js

@@ -6,6 +6,7 @@
  */
 // Finnish
 export default {
+  'fabric.editor.codeBidiWarningLabel': 'Kaksisuuntaiset merkit muuttavat tekstin renderöintijärjestystä. Tätä voidaan hyödyntää haitallisen koodin peittämisessä.',
   'fabric.editor.captionPlaceholder': 'Lisää kuvateksti',
   'fabric.editor.collapseNode': 'piilota sisältö',
   'fabric.editor.expandDefaultTitle': 'Klikkaa tähän laajentaaksesi...',

package/dist/es2019/i18n/fr.js

@@ -6,6 +6,7 @@
  */
 // French
 export default {
+  'fabric.editor.codeBidiWarningLabel': "Les caractères bidirectionnels changent l'ordre de rendu du texte. Ils peuvent être utilisés pour masquer du code malveillant.",
   'fabric.editor.captionPlaceholder': 'Ajouter une légende',
   'fabric.editor.collapseNode': 'Réduire le contenu',
   'fabric.editor.expandDefaultTitle': 'Cliquez ici pour développer...',

package/dist/es2019/i18n/hu.js

@@ -6,6 +6,7 @@
  */
 // Hungarian
 export default {
+  'fabric.editor.codeBidiWarningLabel': 'A kétirányú karakterek megváltoztatják a szöveg renderelési sorrendjét. Ez felhasználható rosszindulatú kód elfedésére.',
   'fabric.editor.captionPlaceholder': 'Képaláírás hozzáadása',
   'fabric.editor.collapseNode': 'tartalom összecsukása',
   'fabric.editor.expandDefaultTitle': 'Kattints ide a kibontáshoz…',

package/dist/es2019/i18n/it.js

@@ -6,6 +6,7 @@
  */
 // Italian
 export default {
+  'fabric.editor.codeBidiWarningLabel': "I caratteri bidirezionali modificano l'ordine in cui è visualizzato il testo. Possono essere utilizzati per nascondere un codice dannoso.",
   'fabric.editor.captionPlaceholder': 'Aggiungi didascalia',
   'fabric.editor.collapseNode': 'Comprimi contenuto',
   'fabric.editor.expandDefaultTitle': 'Clicca qui per espandere...',

package/dist/es2019/i18n/ja.js

@@ -6,6 +6,7 @@
  */
 // Japanese
 export default {
+  'fabric.editor.codeBidiWarningLabel': '双方向文字はテキストのレンダリング順序を変更します。このため、悪意あるコードを隠すために使用される場合があります。',
   'fabric.editor.captionPlaceholder': 'キャプションを追加',
   'fabric.editor.collapseNode': 'コンテンツを折りたたむ',
   'fabric.editor.expandDefaultTitle': 'こちらをクリックして展開…',

package/dist/es2019/i18n/ko.js

@@ -6,6 +6,7 @@
  */
 // Korean
 export default {
+  'fabric.editor.codeBidiWarningLabel': '양방향 문자가 텍스트가 렌더링되는 순서를 변경합니다. 악성 코드를 가리는 데 사용할 수 있습니다.',
   'fabric.editor.captionPlaceholder': '캡션 추가',
   'fabric.editor.collapseNode': '콘텐츠 접기',
   'fabric.editor.expandDefaultTitle': '여기를 클릭하여 펼치기...',

package/dist/es2019/i18n/nb.js

@@ -6,6 +6,7 @@
  */
 // Norwegian Bokmål
 export default {
+  'fabric.editor.codeBidiWarningLabel': 'Toveistegn endrer rekkefølgen som tekst vises i. Dette kan brukes til å skjule skadelig kode.',
   'fabric.editor.captionPlaceholder': 'Legg til bildetekst',
   'fabric.editor.collapseNode': 'Minimer innhold',
   'fabric.editor.expandDefaultTitle': 'Klikk her for å utvide …',

package/dist/es2019/i18n/nl.js

@@ -6,6 +6,7 @@
  */
 // Dutch
 export default {
+  'fabric.editor.codeBidiWarningLabel': 'Bidirectionele tekens wijzigen de volgorde waarin de tekst wordt weergegeven. Dit kan worden gebruikt om schadelijke code te verdoezelen.',
   'fabric.editor.captionPlaceholder': 'Bijschrift toevoegen',
   'fabric.editor.collapseNode': 'Content inklappen',
   'fabric.editor.expandDefaultTitle': 'Klik hier om uit te breiden...',

package/dist/es2019/i18n/pl.js

@@ -6,6 +6,7 @@
  */
 // Polish
 export default {
+  'fabric.editor.codeBidiWarningLabel': 'Znaki dwukierunkowe zmieniają kolejność, w jakiej tekst jest renderowany. Może to zostać wykorzystane do ukrycia złośliwego kodu.',
   'fabric.editor.captionPlaceholder': 'Dodaj podpis',
   'fabric.editor.collapseNode': 'Zwiń zawartość',
   'fabric.editor.expandDefaultTitle': 'Kliknij tutaj, aby rozwinąć...',

package/dist/es2019/i18n/pt_BR.js

@@ -6,6 +6,7 @@
  */
 // Portuguese (Brazil)
 export default {
+  'fabric.editor.codeBidiWarningLabel': 'Caracteres bidirecionais alteram a ordem em que o texto é renderizado. Eles podem ser usados para ocultar códigos mal-intencionados.',
   'fabric.editor.captionPlaceholder': 'Adicionar legenda',
   'fabric.editor.collapseNode': 'Recolher conteúdo',
   'fabric.editor.expandDefaultTitle': 'Clique aqui para expandir...',

package/dist/es2019/i18n/ru.js

@@ -6,6 +6,7 @@
  */
 // Russian
 export default {
+  'fabric.editor.codeBidiWarningLabel': 'Двунаправленные символы изменяют порядок отображения текста. Они могут использоваться для маскировки вредоносного кода.',
   'fabric.editor.captionPlaceholder': 'Добавьте подпись',
   'fabric.editor.collapseNode': 'Свернуть содержимое',
   'fabric.editor.expandDefaultTitle': 'Нажмите здесь, чтобы развернуть…',

package/dist/es2019/i18n/sv.js

@@ -6,6 +6,7 @@
  */
 // Swedish
 export default {
+  'fabric.editor.codeBidiWarningLabel': 'Dubbelriktade tecken ändrar återgivningsordningen för text. Detta kan användas för att dölja skadlig kod.',
   'fabric.editor.captionPlaceholder': 'Lägg till en bildtext',
   'fabric.editor.collapseNode': 'komprimera innehåll',
   'fabric.editor.expandDefaultTitle': 'Klicka här för att expandera ...',

package/dist/es2019/i18n/th.js

@@ -6,6 +6,7 @@
  */
 // Thai
 export default {
+  'fabric.editor.codeBidiWarningLabel': 'ตัวอักษรแบบสองทิศทางเปลี่ยนลำดับการแสดงข้อความ ซึ่งอาจนำไปใช้เพื่อปิดบังรหัสที่มีวัตถุประสงค์ในทางที่ไม่ดีได้',
   'fabric.editor.captionPlaceholder': 'เพิ่มคำอธิบาย',
   'fabric.editor.collapseNode': 'ย่อเนื้อหา',
   'fabric.editor.expandDefaultTitle': 'คลิกที่นี่เพื่อขยาย...',

package/dist/es2019/i18n/tr.js

@@ -6,6 +6,7 @@
  */
 // Turkish
 export default {
+  'fabric.editor.codeBidiWarningLabel': 'Çift yönlü karakterler metnin oluşturulduğu sırayı değiştirir. Bu, kötü amaçlı kodu gizlemek için kullanılabilir.',
   'fabric.editor.captionPlaceholder': 'Açıklama yazısı ekleyin',
   'fabric.editor.collapseNode': 'içeriği daraltın',
   'fabric.editor.expandDefaultTitle': 'Genişletmek için buraya tıklayın...',

package/dist/es2019/i18n/uk.js

@@ -6,6 +6,7 @@
  */
 // Ukrainian
 export default {
+  'fabric.editor.codeBidiWarningLabel': 'Двонаправлені символи змінюють порядок відображення тексту. Такий спосіб може використовуватися, щоб приховати зловмисний код.',
   'fabric.editor.captionPlaceholder': 'Додати підпис',
   'fabric.editor.collapseNode': 'Згорніть вміст',
   'fabric.editor.expandDefaultTitle': 'Натисніть, щоб розгорнути…',

package/dist/es2019/i18n/vi.js

@@ -6,6 +6,7 @@
  */
 // Vietnamese
 export default {
+  'fabric.editor.codeBidiWarningLabel': 'Ký tự hai chiều thay đổi thứ tự kết xuất văn bản. Điều này có thể được dùng để che giấu mã độc hại.',
   'fabric.editor.captionPlaceholder': 'Thêm chú thích',
   'fabric.editor.collapseNode': 'thu gọn nội dung',
   'fabric.editor.expandDefaultTitle': 'Nhấp vào đây để mở rộng...',

package/dist/es2019/i18n/zh.js

@@ -4,8 +4,8 @@
  * This file is automatically generated by i18n-tools.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Chinese
 export default {
+  'fabric.editor.codeBidiWarningLabel': '双向字符会更改文本的呈现顺序。这可能被用于掩盖恶意代码。',
   'fabric.editor.captionPlaceholder': '添加标题',
   'fabric.editor.collapseNode': '收起内容',
   'fabric.editor.expandDefaultTitle': '点击此处展开...',

package/dist/es2019/i18n/zh_TW.js

@@ -6,6 +6,7 @@
  */
 // undefined
 export default {
+  'fabric.editor.codeBidiWarningLabel': '雙向字元會變更文字呈現的順序。這可用來將惡意程式碼模糊化。',
   'fabric.editor.captionPlaceholder': '新增標題',
   'fabric.editor.collapseNode': '摺疊內容',
   'fabric.editor.expandDefaultTitle': '按一下此處以展開...',

package/dist/es2019/index.js

@@ -1,9 +1,27 @@
-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';
-export { combineProviders } from './provider-helpers';
-export { TableSharedCssClassName, blockMarksSharedStyles, blockquoteSharedStyles, calcTableWidth, codeMarkSharedStyles, columnLayoutSharedStyle, dateSharedStyle, DateSharedCssClassName, annotationSharedStyles, AnnotationSharedCSSByState, AnnotationSharedClassNames, headingsSharedStyles, indentationSharedStyles, inlineNodeSharedStyle, linkSharedStyle, listsSharedStyles, richMediaClassName, mediaSingleSharedStyle, getPanelTypeBackground, panelSharedStyles, PanelSharedCssClassName, PanelSharedSelectors, paragraphSharedStyles, ruleSharedStyles, shadowSharedStyle, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginBottom, tableMarginSides, tableMarginTop, tableNewColumnMinWidth, tableResizeHandleWidth, tableSharedStyle, tasksAndDecisionsStyles, TaskDecisionSharedCssClassName, whitespaceSharedStyles, MentionSharedCssClassName, EmojiSharedCssClassName, StatusSharedCssClassName, smartCardSharedStyles, SmartCardSharedCssClassName } from './styles';
-export { BaseTheme, Caption, ClearNextSiblingMarginTop, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, Emoji, ErrorMessage, ExpandIconWrapper, ExpandLayoutWrapper, HelperMessage, MediaSingle, MediaSingleDimensionHelper, Mention, Popup, UnsupportedBlock, UnsupportedInline, ValidMessage, WidthConsumer, WidthProvider, WithCreateAnalyticsEvent, calcColumnsFromPx, calcPctFromPx, calcPxFromColumns, calcPxFromPct, expandMessages, findOverflowScrollParent, getBreakpoint, layoutSupportsWidth, mapBreakpointToLayoutMaxWidth, overflowShadow, shadowClassNames, sharedExpandStyles, snapToGrid, withOuterListeners, MediaLink, wrappedLayouts, shouldAddDefaultWrappedWidth } from './ui';
-export { linkMessages } from './messages/link';
+// new child entry point ./utils/index.ts
+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'; // new child entry point ./utils/index.ts
+
+// new child entry point ./types/index.ts
+export { SortOrder, AnnotationUpdateEmitter, AnnotationUpdateEvent } from './types'; // new child entry point ./types/index.ts
+
+// already exported by ./extensions.ts
+export { DefaultExtensionProvider, combineExtensionProviders, getExtensionKeyAndNodeKey, getExtensionModuleNode, getExtensionModuleNodePrivateProps, getQuickInsertItemsFromModule, getNodeRenderer, getContextualToolbarItemsFromModule, buildMenuItem, resolveImport } from './extensions'; // already exported by ./extensions.ts
+
+// already exported by ./provider-factory.ts
+export { ProviderFactory, WithProviders } from './provider-factory'; // already exported by ./provider-factory.ts
+
+// new child entry point ./provider-helpers/index.ts
+export { combineProviders } from './provider-helpers'; // already exported by ./styles/index.ts
+
+export { TableSharedCssClassName, blockMarksSharedStyles, blockquoteSharedStyles, calcTableWidth, codeMarkSharedStyles, columnLayoutSharedStyle, dateSharedStyle, DateSharedCssClassName, annotationSharedStyles, AnnotationSharedCSSByState, AnnotationSharedClassNames, headingsSharedStyles, indentationSharedStyles, inlineNodeSharedStyle, linkSharedStyle, listsSharedStyles, richMediaClassName, mediaSingleSharedStyle, getPanelTypeBackground, getPanelBackgroundDarkModeColors, panelSharedStyles, PanelSharedCssClassName, PanelSharedSelectors, paragraphSharedStyles, ruleSharedStyles, shadowSharedStyle, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginBottom, tableMarginSides, tableMarginTop, tableNewColumnMinWidth, tableResizeHandleWidth, tableSharedStyle, tasksAndDecisionsStyles, TaskDecisionSharedCssClassName, whitespaceSharedStyles, MentionSharedCssClassName, //exported from ./src/mention.ts
+EmojiSharedCssClassName, //exported from ./src/emoji.ts
+StatusSharedCssClassName, smartCardSharedStyles, SmartCardSharedCssClassName } from './styles'; // new child entry point ./ui/index.tsx
+
+export { BaseTheme, Caption, ClearNextSiblingMarginTop, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, Emoji, //exported from ./src/emoji.ts
+ErrorMessage, ExpandIconWrapper, ExpandLayoutWrapper, HelperMessage, MediaSingle, MediaSingleDimensionHelper, Mention, //exported from ./src/mention.ts
+Popup, UnsupportedBlock, UnsupportedInline, ValidMessage, WidthConsumer, WidthProvider, WithCreateAnalyticsEvent, calcColumnsFromPx, calcPctFromPx, calcPxFromColumns, calcPxFromPct, expandMessages, findOverflowScrollParent, getBreakpoint, layoutSupportsWidth, mapBreakpointToLayoutMaxWidth, overflowShadow, shadowClassNames, sharedExpandStyles, snapToGrid, withOuterListeners, MediaLink, wrappedLayouts, shouldAddDefaultWrappedWidth, IntlNextErrorBoundary, REACT_INTL_ERROR_MESSAGE, IntlLegacyFallbackProvider, LegacyToNextIntlProvider } from './ui'; // new child entry point ./ui/index.tsx
+
+// already exported by ./messages/index.ts
+export { linkMessages } from './messages/link'; // new child entry point in ./utils/index.ts
+
 export { validateADFEntity, validationErrorHandler } from './utils/validate-using-spec';

package/dist/es2019/mention.js

@@ -0,0 +1,2 @@
+export { default as Mention } from './ui/Mention';
+export { MentionSharedCssClassName } from './styles/shared/mention';

package/dist/es2019/messages/codeBidiWarning.js

@@ -0,0 +1,12 @@
+import { defineMessages } from 'react-intl-next';
+export const codeBidiWarningMessages = defineMessages({
+  /**
+   * Message taken from
+   * https://hello.atlassian.net/wiki/spaces/~tswan/pages/1366555782/PSHELP-2943+Investigate+Trojan+Source+Attack+Vulnerability+design
+   */
+  label: {
+    id: 'fabric.editor.codeBidiWarningLabel',
+    defaultMessage: 'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.',
+    description: 'Tooltip message to present to users when a bidirectional character is encountered in code.'
+  }
+});

package/dist/es2019/messages/index.js

@@ -1,2 +1,3 @@
+export { codeBidiWarningMessages } from './codeBidiWarning';
 export { linkMessages } from './link';
 export { unsupportedContentMessages } from './unsupportedContent';

package/dist/es2019/messages/link.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const linkMessages = defineMessages({
   openLink: {
     id: 'fabric.editor.openLink',

package/dist/es2019/messages/unsupportedContent.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const unsupportedContentMessages = defineMessages({
   unsupportedInlineContent: {
     id: 'fabric.editor.unsupportedInlineContent',

package/dist/es2019/styles/index.js

@@ -4,7 +4,7 @@ export { columnLayoutSharedStyle } from './shared/column-layout';
 export { mediaSingleSharedStyle, richMediaClassName } from './shared/media-single';
 export { blockquoteSharedStyles } from './shared/blockquote';
 export { headingsSharedStyles } from './shared/headings';
-export { getPanelTypeBackground, panelSharedStyles, PanelSharedCssClassName, PanelSharedSelectors } from './shared/panel';
+export { getPanelTypeBackground, panelSharedStyles, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors } from './shared/panel';
 export { ruleSharedStyles } from './shared/rule';
 export { whitespaceSharedStyles } from './shared/whitespace';
 export { paragraphSharedStyles } from './shared/paragraph';
@@ -16,7 +16,9 @@ export { blockMarksSharedStyles } from './shared/block-marks';
 export { codeMarkSharedStyles } from './shared/code-mark';
 export { shadowSharedStyle } from './shared/shadow';
 export { dateSharedStyle, DateSharedCssClassName } from './shared/date';
-export { tasksAndDecisionsStyles, TaskDecisionSharedCssClassName } from './shared/task-decision';
+export { tasksAndDecisionsStyles, TaskDecisionSharedCssClassName } from './shared/task-decision'; // TODO: ED-13875 Remove MentionSharedCssClassName and EmojiSharedCssClassName
+// exports once root entry point for editor-common has been removed
+
 export { MentionSharedCssClassName } from './shared/mention';
 export { EmojiSharedCssClassName } from './shared/emoji';
 export { StatusSharedCssClassName } from './shared/status';

package/dist/es2019/styles/shared/media-single.js

@@ -14,6 +14,16 @@ const mediaSingleSharedStyle = css`
     height: 0;
   }
 
+  &.ua-firefox {
+    .mediaSingleView-content-wrap {
+      user-select: none;
+    }
+
+    .captionView-content-wrap {
+      user-select: text;
+    }
+  }
+
   .mediaSingleView-content-wrap[layout='center'] {
     clear: both;
   }

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

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { hexToRgba, PanelType } from '@atlaskit/adf-schema';
+import { 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';
@@ -14,22 +14,67 @@ const lightPanelColor = {
   warning: colors.Y50,
   error: colors.R50
 };
-const darkPanelOpacity = 0.64;
-const darkPanelColor = {
-  info: colors.B500,
-  note: colors.P500,
-  tip: colors.G500,
-  success: colors.G500,
-  warning: colors.Y500,
-  error: colors.R500
-};
-const darkPanelBorderColor = {
-  info: colors.B400,
-  note: colors.P400,
-  tip: colors.G400,
-  success: colors.G400,
-  warning: colors.Y400,
-  error: colors.R400
+const darkPanelColors = {
+  // standard panels
+  info: '#0C294F',
+  error: `#441C13`,
+  warning: `#413001`,
+  tip: `#052E21`,
+  success: `#052E21`,
+  note: `#282249`,
+  // Reds
+  R900: '#601D16',
+  // Red Saturated
+  R100S: `#FFEFEB`,
+  R300S: `#FFB5A3`,
+  R500S: `#FF6B47`,
+  R800S: `#C4320E`,
+  R1200S: `#441C13`,
+  // Yellows
+  Y900: '#533F04',
+  // Yellow Saturated
+  Y100S: `#FFF3D1`,
+  Y300S: `#FFDC7A`,
+  Y500S: `#FFC933`,
+  Y800S: `#D8A003`,
+  Y1200S: `#413001`,
+  // Greens
+  G900: '#164B35',
+  // Green Saturated
+  G100S: `#E3FCF0`,
+  G300S: `#95EEC5`,
+  G400S: `#60DCA8`,
+  G900S: `#086848`,
+  G1200S: `#052E21`,
+  // Blues
+  B900: '#09326C',
+  // Saturated Blues
+  B100S: '#E5F0FF',
+  B300S: '#A3C9FF',
+  B500S: '#4794FF',
+  B800S: '#0055CC',
+  B1200S: '#0C294F',
+  // Purples
+  P900: `#352C63`,
+  // Purple Saturated
+  P100S: `#EEEBFF`,
+  P300S: `#CCC3FE`,
+  P500S: `#A292F7`,
+  P800S: `#5E49CA`,
+  P1200S: `#282249`,
+  // Teals
+  T900: '#1D474C',
+  // Teal Saturated
+  T100S: `#DBFAFF`,
+  T300S: `#78EBFC`,
+  T400S: `#3AD6EE`,
+  T900S: `#056270`,
+  T1200S: `#0B3037`,
+  // Dark Mode Alpha
+  DNA20A: 'rgba(150, 176, 210, 0.53)',
+  DNA40A: 'rgba(134, 156, 180, 0.29)',
+  DNA80A: '#161A1D',
+  TextColor: '#D9DDE3'
 };
 const lightIconColor = {
   info: colors.B400,
@@ -46,16 +91,20 @@ const darkIconColor = {
   success: colors.G200,
   warning: colors.Y100,
   error: colors.R200
-};
-const darkTextColor = {
-  info: colors.B75,
-  note: colors.P75,
-  tip: colors.G75,
-  success: colors.G75,
-  warning: colors.Y75,
-  error: colors.R75
-};
-const verticalAlignment = -((gridSize() * 3 - akEditorCustomIconSize) / 2);
+}; // New custom icons are a little smaller than predefined icons.
+// To fix alignment issues with custom icons, vertical alignment is updated.
+
+const panelEmojiSpriteVerticalAlignment = -(gridSize() * 3 - akEditorCustomIconSize) / 2;
+const panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
+export const getPanelBackgroundDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.DNA80A], [colors.N20, darkPanelColors.DNA40A], [colors.N60, darkPanelColors.DNA20A], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]].map(([colorName, colorValue]) => getPanelDarkModeCSS(colorName, colorValue)).join('\n');
+export function getPanelDarkModeCSS(colorName, colorValue) {
+  return `
+  &[data-panel-color="${colorName}"] {
+    background-color: ${colorValue} !important; // !important to override default style color
+    color: ${darkPanelColors.TextColor};
+  }
+  `;
+}
 const prefix = 'ak-editor-panel';
 export const PanelSharedCssClassName = {
   prefix,
@@ -92,7 +141,7 @@ const iconDynamicStyles = panelType => props => {
 
 export const getPanelTypeBackground = (panelType, props = {}) => {
   const light = lightPanelColor[panelType];
-  const dark = hexToRgba(darkPanelColor[panelType], darkPanelOpacity);
+  const dark = darkPanelColors[panelType];
   const background = themed({
     light,
     dark
@@ -102,19 +151,12 @@ export const getPanelTypeBackground = (panelType, props = {}) => {
 
 const mainDynamicStyles = panelType => props => {
   const background = getPanelTypeBackground(panelType, props);
-  const darkText = darkTextColor[panelType];
-  const darkBorder = '1px solid ' + darkPanelBorderColor[panelType];
-  const border = themed({
-    light: 'none',
-    dark: darkBorder
-  })(props);
   const text = themed({
     light: 'inherit',
-    dark: darkText
+    dark: darkPanelColors.TextColor
   })(props);
   return `
     background-color: ${background};
-    border: ${border};
     color: ${text};
   `;
 };
@@ -150,8 +192,19 @@ export const panelSharedStyles = css`
         display: inline;
       }
 
-      .${emojiSprite}, .${emojiImage} {
-        vertical-align: ${verticalAlignment}px;
+      .${emojiSprite} {
+        vertical-align: ${panelEmojiSpriteVerticalAlignment}px;
+      }
+
+      .${emojiImage} {
+        vertical-align: ${panelEmojiImageVerticalAlignment}px;
+
+        // Vertical align only works for inline-block elements in Firefox
+        @-moz-document url-prefix() {
+          img {
+            display: inline-block;
+          }
+        }
       }
     }
 
@@ -204,5 +257,11 @@ export const panelSharedStyles = css`
         ${iconDynamicStyles(PanelType.SUCCESS)}
       }
     }
+
+    &[data-panel-type='${PanelType.CUSTOM}'] {
+      ${themed({
+  dark: getPanelBackgroundDarkModeColors
+})};
+    }
   }
 `;

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

@@ -40,6 +40,7 @@ const tableSharedStyle = css`
   }
   .${TableSharedCssClassName.TABLE_CONTAINER}[data-number-column='true'] {
     padding-left: ${akEditorTableNumberColumnWidth - 1}px;
+    clear: both;
   }
   /* avoid applying styles to nested tables (possible via extensions) */
   .${TableSharedCssClassName.TABLE_CONTAINER} > table,

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

@@ -13,6 +13,7 @@ export let EditorExperience;
   EditorExperience["loadEditor"] = "load";
   EditorExperience["typing"] = "type";
   EditorExperience["interaction"] = "interact";
+  EditorExperience["editSession"] = "editSession";
 })(EditorExperience || (EditorExperience = {}));
 
 export const RELIABILITY_INTERVAL = 30000;
@@ -72,7 +73,7 @@ export class ExperienceStore {
   success(experienceId, metadata) {
     var _this$getActive;
 
-    (_this$getActive = this.getActive(experienceId)) === null || _this$getActive === void 0 ? void 0 : _this$getActive.success({
+    return (_this$getActive = this.getActive(experienceId)) === null || _this$getActive === void 0 ? void 0 : _this$getActive.success({
       metadata
     });
   }

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { N200, N400 } from '@atlaskit/theme/colors';
 import { messages } from './messages';

package/dist/es2019/ui/Caption/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   placeholder: {
     id: 'fabric.editor.captionPlaceholder',

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

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 import styled, { css } from 'styled-components';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';

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

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { IntlProvider, intlShape } from 'react-intl';
+export class IntlLegacyFallbackProvider extends React.Component {
+  render() {
+    const oldIntl = this.context.intl;
+
+    if (!oldIntl) {
+      return /*#__PURE__*/React.createElement(IntlProvider, {
+        locale: "en"
+      }, this.props.children);
+    }
+
+    return this.props.children;
+  }
+
+}
+
+_defineProperty(IntlLegacyFallbackProvider, "contextTypes", {
+  intl: intlShape
+});

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

@@ -0,0 +1,43 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { IntlProvider } from 'react-intl-next';
+export const REACT_INTL_ERROR_MESSAGE = '<IntlProvider> needs to exist in the component ancestry';
+
+const isMissingIntlProviderInAncestryError = err => {
+  var _err$toString;
+
+  return err === null || err === void 0 ? void 0 : (_err$toString = err.toString()) === null || _err$toString === void 0 ? void 0 : _err$toString.includes('<IntlProvider> needs to exist in the component ancestry');
+};
+
+export class IntlNextErrorBoundary extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "state", {
+      missingIntlProviderInAncestry: false
+    });
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // if missing IntlProvider in ancestry, we setup a fallback IntlProvider ourselves
+    if (isMissingIntlProviderInAncestryError(error)) {
+      this.setState({
+        missingIntlProviderInAncestry: true
+      });
+    } else {
+      // else we re-propagate the non-react-intl-next error
+      throw error;
+    }
+  }
+
+  render() {
+    if (this.state.missingIntlProviderInAncestry) {
+      return /*#__PURE__*/React.createElement(IntlProvider, {
+        locale: "en"
+      }, this.props.children);
+    }
+
+    return this.props.children;
+  }
+
+}

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

@@ -0,0 +1,24 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { intlShape } from 'react-intl';
+import { createIntl, RawIntlProvider } from 'react-intl-next';
+export class LegacyToNextIntlProvider extends React.Component {
+  render() {
+    const oldIntl = this.context.intl;
+
+    if (oldIntl) {
+      const nextIntl = createIntl({ ...oldIntl
+      });
+      return /*#__PURE__*/React.createElement(RawIntlProvider, {
+        value: nextIntl
+      }, this.props.children);
+    }
+
+    return this.props.children;
+  }
+
+}
+
+_defineProperty(LegacyToNextIntlProvider, "contextTypes", {
+  intl: intlShape
+});

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';