@atlaskit/editor-core 185.5.2 → 185.5.7

package/dist/esm/i18n/tr.js

@@ -73,7 +73,6 @@ export default {
   'fabric.editor.edit': 'Düzenle',
   'fabric.editor.editAltText': 'Alternatif metni düzenle',
   'fabric.editor.editDateText': 'Tarihi Düzenle',
-  'fabric.editor.editLink': 'Bağlantıyı düzenleyin',
   'fabric.editor.editStatusColor': 'Durum Rengini Düzenle',
   'fabric.editor.editStatusText': 'Durumu Düzenle',
   'fabric.editor.editableContentLabel': 'Düzenlenebilir içerik',
@@ -97,7 +96,6 @@ export default {
   'fabric.editor.elementbrowser.search.empty-state.sub-heading.link': "Atlassian Marketplace'i keşfedin",
   'fabric.editor.elementbrowser.sidebar.heading': 'Göz Atın',
   'fabric.editor.embedTitle': 'Ekle',
-  'fabric.editor.emptyLink': 'Lütfen bir bağlantı girin.',
   'fabric.editor.epic': 'Epik',
   'fabric.editor.error': 'Hata',
   'fabric.editor.errorPanel': 'Hata panosu',
@@ -141,7 +139,6 @@ export default {
   'fabric.editor.hyperlink.linkAriaLabel': 'Bağlantı etiketi',
   'fabric.editor.hyperlink.searchLinkAriaDescription': 'Alana yazmaya başladığınızda öneriler aşağıda görünecek',
   'fabric.editor.hyperlink.searchLinkResults': '{count, plural, =0 {sonuç bulunamadı} one {{count,number} sonuç bulundu} other {{count,number} sonuç bulundu}}',
-  'fabric.editor.hyperlinkToolbarPlaceholder': 'Bağlantıyı yapıştırın veya arayın',
   'fabric.editor.imageBorderBold': 'Kalın',
   'fabric.editor.imageBorderColor': 'Renk',
   'fabric.editor.imageBorderMedium': 'Orta',
@@ -157,17 +154,13 @@ export default {
   'fabric.editor.inlineTitle': 'Satır içi',
   'fabric.editor.inputQueryAssistiveTxt': 'Otomatik tamamlama sonuçları kullanılabilir olduğunda incelemek için yukarı ve aşağı ok tuşlarına, seçmek için Enter tuşuna basın. Dokunmatik cihaz kullanıcısıysanız dokunun veya kaydırma hareketlerini kullanın.',
   'fabric.editor.invalidDateError': 'Geçerli bir tarih girin',
-  'fabric.editor.invalidLink': 'Lütfen geçerli bir bağlantı girin.',
   'fabric.editor.inviteItem.title': '{userRole, select, admin {Takım arkadaşınızı {productName} ürününe davet edin} trusted {Takım arkadaşınızı {productName} ürününe davet edin} other {Takım arkadaşınızı {productName} ürününe ekleyin}}',
   'fabric.editor.italic': 'İtalik',
   'fabric.editor.keyboardShortcuts': 'Klavye kısayolları',
   'fabric.editor.leftSidebar': 'Sol kenar çubuğu',
-  'fabric.editor.linkAddress': 'Adres bağlantısını ekle',
-  'fabric.editor.linkPlaceholder': 'Bağlantıyı yapıştır',
   'fabric.editor.lists': 'Listeler',
   'fabric.editor.markdown': 'Markdown',
   'fabric.editor.matchCase': 'Büyük/küçük harf eşleştir',
-  'fabric.editor.mediaAddLink': 'Bağlantı ekle',
   'fabric.editor.mediaGroupDeleteLabel': 'Sil',
   'fabric.editor.mentionNode.label': 'Şu kullanıcı etiketlendi:',
   'fabric.editor.mentionsAddLabel': 'ekle-simgesi',
@@ -203,7 +196,6 @@ export default {
   'fabric.editor.rightSidebar': 'Sağ kenar çubuğu',
   'fabric.editor.searchResults': '{itemsLength, plural, one {{itemsLength,number} arama sonucu mevcut} other {{itemsLength,number} arama sonucu mevcut}}',
   'fabric.editor.selectLanguage': 'Dil seçin',
-  'fabric.editor.settingsLinks': 'Bağlantı Tercihlerine gidin',
   'fabric.editor.shortcut': 'Metin kısayolu',
   'fabric.editor.single': 'Tek sütun',
   'fabric.editor.statusPlaceholder': 'Durum ayarlayın',
@@ -237,10 +229,8 @@ export default {
   'fabric.editor.typeahead.mentionInputLabel': 'Etiketlemek üzere kullanıcı aramak için yazmaya başlayın',
   'fabric.editor.typeahead.mentionPopupLabel': 'Etiketleyebileceğiniz kullanıcılar',
   'fabric.editor.typeahead.metionListItemLabel': '{name} adlı kullanıcı @{shortName}',
-  'fabric.editor.unableToOpenLink': 'Bu bağlantı açılamıyor',
   'fabric.editor.underline': 'Altı çizili',
   'fabric.editor.undo': 'Geri al',
-  'fabric.editor.unlink': 'Bağlantıyı kaldır',
   'fabric.editor.unorderedList': 'Madde işaretli liste',
   'fabric.editor.unorderedList.description': 'Sırasız liste oluşturun',
   'fabric.editor.url': "URL'yi göster",

package/dist/esm/i18n/uk.js

@@ -73,7 +73,6 @@ export default {
   'fabric.editor.edit': 'Редагувати',
   'fabric.editor.editAltText': 'Редагувати текст заміщення',
   'fabric.editor.editDateText': 'Змінення дати',
-  'fabric.editor.editLink': 'Редагування посилання',
   'fabric.editor.editStatusColor': 'Змінення кольору стану',
   'fabric.editor.editStatusText': 'Змінення стану',
   'fabric.editor.editableContentLabel': 'Вміст, що можна редагувати',
@@ -97,7 +96,6 @@ export default {
   'fabric.editor.elementbrowser.search.empty-state.sub-heading.link': 'Відкрийте для себе Atlassian Marketplace',
   'fabric.editor.elementbrowser.sidebar.heading': 'Перегляд',
   'fabric.editor.embedTitle': 'Вбудувати',
-  'fabric.editor.emptyLink': 'Введіть посилання.',
   'fabric.editor.epic': 'Епос',
   'fabric.editor.error': 'Помилка',
   'fabric.editor.errorPanel': 'Панель помилок',
@@ -141,7 +139,6 @@ export default {
   'fabric.editor.hyperlink.linkAriaLabel': 'Мітка посилання',
   'fabric.editor.hyperlink.searchLinkAriaDescription': 'Коли ви будете набирати у полі текст, нижче з’явиться список варіантів',
   'fabric.editor.hyperlink.searchLinkResults': '{count, plural, =0 {нічого не знайдено} one {{count,number} результат} few {{count,number} результати} many {{count,number} результатів} other {{count,number} результатів}}',
-  'fabric.editor.hyperlinkToolbarPlaceholder': 'Вставте або знайдіть посилання',
   'fabric.editor.imageBorderBold': 'Жирна',
   'fabric.editor.imageBorderColor': 'Колір',
   'fabric.editor.imageBorderMedium': 'Середня',
@@ -157,17 +154,13 @@ export default {
   'fabric.editor.inlineTitle': 'Вбудований',
   'fabric.editor.inputQueryAssistiveTxt': 'Коли результати автозаповнення стануть доступними, перейдіть до потрібного за допомогою стрілок вгору і вниз і натисніть клавішу Enter. Користувачі сенсорних пристроїв можуть переглядати варіанти за допомогою дотиків і проведення пальцем.',
   'fabric.editor.invalidDateError': 'Введіть дійсну дату',
-  'fabric.editor.invalidLink': 'Введіть дійсне посилання.',
   'fabric.editor.inviteItem.title': '{userRole, select, admin {Запрошення учасника команди до {productName}} trusted {Запрошення учасника команди до {productName}} other {Додавання учасника команди до {productName}}}',
   'fabric.editor.italic': 'Курсив',
   'fabric.editor.keyboardShortcuts': 'Гарячі клавіші',
   'fabric.editor.leftSidebar': 'Бічна панель ліворуч',
-  'fabric.editor.linkAddress': 'Адреса посилання',
-  'fabric.editor.linkPlaceholder': 'Вставити посилання',
   'fabric.editor.lists': 'Списки',
   'fabric.editor.markdown': 'Markdown',
   'fabric.editor.matchCase': 'Враховувати регістр',
-  'fabric.editor.mediaAddLink': 'Додати посилання',
   'fabric.editor.mediaGroupDeleteLabel': 'Видалити',
   'fabric.editor.mentionNode.label': 'Згаданий за допомогою тегу користувач',
   'fabric.editor.mentionsAddLabel': 'додати-значок',
@@ -203,7 +196,6 @@ export default {
   'fabric.editor.rightSidebar': 'Бічна панель праворуч',
   'fabric.editor.searchResults': '{itemsLength, plural, one {Доступний {itemsLength,number} результат пошуку} few {Доступно {itemsLength,number} результати пошуку} many {Доступно {itemsLength,number} результатів пошуку} other {Доступно {itemsLength,number} результату пошуку}}',
   'fabric.editor.selectLanguage': 'Вибір мови',
-  'fabric.editor.settingsLinks': 'Перейти до параметрів посилань',
   'fabric.editor.shortcut': 'Сполучення клавіш для тексту',
   'fabric.editor.single': 'Один стовпець',
   'fabric.editor.statusPlaceholder': 'Додати статус',
@@ -237,10 +229,8 @@ export default {
   'fabric.editor.typeahead.mentionInputLabel': 'Почніть вводити текст для пошуку користувачів і згадування їх за допомогою тегу',
   'fabric.editor.typeahead.mentionPopupLabel': 'Користувачі, яких можна згадати за допомогою тегу',
   'fabric.editor.typeahead.metionListItemLabel': 'Користувач {name} (@{shortName})',
-  'fabric.editor.unableToOpenLink': 'Не вдалося відкрити посилання',
   'fabric.editor.underline': 'Підкреслювання',
   'fabric.editor.undo': 'Скасувати',
-  'fabric.editor.unlink': 'Відв’язати',
   'fabric.editor.unorderedList': 'Маркований список',
   'fabric.editor.unorderedList.description': 'Створити невпорядкований список',
   'fabric.editor.url': 'Показати URL-адресу',

package/dist/esm/i18n/vi.js

@@ -73,7 +73,6 @@ export default {
   'fabric.editor.edit': 'Chỉnh sửa',
   'fabric.editor.editAltText': 'Chỉnh sửa văn bản thay thế',
   'fabric.editor.editDateText': 'Sửa ngày',
-  'fabric.editor.editLink': 'Chỉnh sửa liên kết',
   'fabric.editor.editStatusColor': 'Sửa màu trạng thái',
   'fabric.editor.editStatusText': 'Sửa trạng thái',
   'fabric.editor.editableContentLabel': 'Nội dung có thể chỉnh sửa',
@@ -97,7 +96,6 @@ export default {
   'fabric.editor.elementbrowser.search.empty-state.sub-heading.link': 'Khám phá Atlassian Marketplace',
   'fabric.editor.elementbrowser.sidebar.heading': 'Duyệt',
   'fabric.editor.embedTitle': 'Đã nhúng',
-  'fabric.editor.emptyLink': 'Vui lòng nhập một liên kết.',
   'fabric.editor.epic': 'Quá trình',
   'fabric.editor.error': 'Lỗi',
   'fabric.editor.errorPanel': 'Ô lỗi',
@@ -141,7 +139,6 @@ export default {
   'fabric.editor.hyperlink.linkAriaLabel': 'Nhãn liên kết',
   'fabric.editor.hyperlink.searchLinkAriaDescription': 'Các đề xuất sẽ xuất hiện bên dưới khi bạn nhập thông tin vào trường',
   'fabric.editor.hyperlink.searchLinkResults': '{count, plural, =0 {không tìm thấy kết quả} other {Đã tìm thấy {count,number} kết quả}}',
-  'fabric.editor.hyperlinkToolbarPlaceholder': 'Dán hoặc tìm kiếm liên kết',
   'fabric.editor.imageBorderBold': 'In đậm',
   'fabric.editor.imageBorderColor': 'Màu sắc',
   'fabric.editor.imageBorderMedium': 'Trung bình',
@@ -157,17 +154,13 @@ export default {
   'fabric.editor.inlineTitle': 'Nội tuyến',
   'fabric.editor.inputQueryAssistiveTxt': 'Khi có sẵn kết quả tự hoàn tất, hãy dùng các mũi tên lên và xuống để xem lại và enter để chọn. Người dùng thiết bị cảm ứng, khám phá bằng thao tác chạm hoặc bằng các cử chỉ vuốt.',
   'fabric.editor.invalidDateError': 'Nhập ngày hợp lệ',
-  'fabric.editor.invalidLink': 'Vui lòng nhập một liên kết hợp lệ.',
   'fabric.editor.inviteItem.title': '{userRole, select, admin {Mời thành viên cùng nhóm vào {productName}} trusted {Mời thành viên cùng nhóm vào {productName}} other {Thêm thành viên cùng nhóm vào {productName}}}',
   'fabric.editor.italic': 'In nghiêng',
   'fabric.editor.keyboardShortcuts': 'Phím tắt bàn phím',
   'fabric.editor.leftSidebar': 'Thanh bên trái',
-  'fabric.editor.linkAddress': 'Địa chỉ liên kết',
-  'fabric.editor.linkPlaceholder': 'Dán liên kết',
   'fabric.editor.lists': 'Danh sách',
   'fabric.editor.markdown': 'Ngôn ngữ đánh dấu',
   'fabric.editor.matchCase': 'Khớp cách viết hoa',
-  'fabric.editor.mediaAddLink': 'Thêm liên kết',
   'fabric.editor.mediaGroupDeleteLabel': 'xóa',
   'fabric.editor.mentionNode.label': 'Người dùng được gắn thẻ',
   'fabric.editor.mentionsAddLabel': 'biểu tượng thêm',
@@ -203,7 +196,6 @@ export default {
   'fabric.editor.rightSidebar': 'Thanh bên phải',
   'fabric.editor.searchResults': '{itemsLength, plural, other {Có {itemsLength,number} kết quả tìm kiếm}}',
   'fabric.editor.selectLanguage': 'Chọn ngôn ngữ',
-  'fabric.editor.settingsLinks': 'Vào phần Tùy chọn liên kết',
   'fabric.editor.shortcut': 'Phím tắt văn bản',
   'fabric.editor.single': 'Cột đơn',
   'fabric.editor.statusPlaceholder': 'Đặt trạng thái',
@@ -237,10 +229,8 @@ export default {
   'fabric.editor.typeahead.mentionInputLabel': 'Bắt đầu nhập để tìm kiếm người dùng để gắn thẻ',
   'fabric.editor.typeahead.mentionPopupLabel': 'Người dùng bạn có thể gắn thẻ',
   'fabric.editor.typeahead.metionListItemLabel': 'Người dùng {name} @{shortName}',
-  'fabric.editor.unableToOpenLink': 'Không thể mở liên kết này',
   'fabric.editor.underline': 'Gạch dưới',
   'fabric.editor.undo': 'Hoàn tác',
-  'fabric.editor.unlink': 'Hủy liên kết',
   'fabric.editor.unorderedList': 'Danh sách dấu đầu dòng',
   'fabric.editor.unorderedList.description': 'Tạo một danh sách kiểu không sắp xếp',
   'fabric.editor.url': 'Hiển thị URL',

package/dist/esm/i18n/zh.js

@@ -73,7 +73,6 @@ export default {
   'fabric.editor.edit': '编辑',
   'fabric.editor.editAltText': '编辑替代文本',
   'fabric.editor.editDateText': '编辑日期',
-  'fabric.editor.editLink': '编辑链接',
   'fabric.editor.editStatusColor': '编辑状态颜色',
   'fabric.editor.editStatusText': '编辑状态',
   'fabric.editor.editableContentLabel': '可编辑内容',
@@ -97,7 +96,6 @@ export default {
   'fabric.editor.elementbrowser.search.empty-state.sub-heading.link': '浏览 Atlassian Marketplace',
   'fabric.editor.elementbrowser.sidebar.heading': '浏览',
   'fabric.editor.embedTitle': '嵌入',
-  'fabric.editor.emptyLink': '请输入链接。',
   'fabric.editor.epic': '长篇故事',
   'fabric.editor.error': '错误',
   'fabric.editor.errorPanel': '错误面板',
@@ -141,7 +139,6 @@ export default {
   'fabric.editor.hyperlink.linkAriaLabel': '链接标签',
   'fabric.editor.hyperlink.searchLinkAriaDescription': '在字段中输入内容时，下方会显示建议内容',
   'fabric.editor.hyperlink.searchLinkResults': '{count, plural, =0 {未找到结果} other {找到 {count,number} 个结果}}',
-  'fabric.editor.hyperlinkToolbarPlaceholder': '粘贴或搜索链接',
   'fabric.editor.imageBorderBold': '加粗',
   'fabric.editor.imageBorderColor': '颜色',
   'fabric.editor.imageBorderMedium': '中等',
@@ -157,17 +154,13 @@ export default {
   'fabric.editor.inlineTitle': '内嵌',
   'fabric.editor.inputQueryAssistiveTxt': '有可用的自动完成结果时，可以使用向上和向下箭头键进行查看，并按 Enter 键进行选择。触摸设备用户，并通过触摸或滑动手势进行浏览。',
   'fabric.editor.invalidDateError': '输入有效日期',
-  'fabric.editor.invalidLink': '请输入有效链接。',
   'fabric.editor.inviteItem.title': '{userRole, select, admin {邀请团队成员加入 {productName}} trusted {邀请团队成员加入 {productName}} other {将团队成员添加至 {productName}}}',
   'fabric.editor.italic': '斜体',
   'fabric.editor.keyboardShortcuts': '键盘快捷键',
   'fabric.editor.leftSidebar': '左侧栏',
-  'fabric.editor.linkAddress': '链接地址',
-  'fabric.editor.linkPlaceholder': '粘贴链接',
   'fabric.editor.lists': '列表',
   'fabric.editor.markdown': '进行标记',
   'fabric.editor.matchCase': '匹配大小写',
-  'fabric.editor.mediaAddLink': '添加链接',
   'fabric.editor.mediaGroupDeleteLabel': '删除',
   'fabric.editor.mentionNode.label': '已标记用户',
   'fabric.editor.mentionsAddLabel': '“添加”图标',
@@ -203,7 +196,6 @@ export default {
   'fabric.editor.rightSidebar': '右侧栏',
   'fabric.editor.searchResults': '{itemsLength, plural, other {{itemsLength,number} 个搜索结果可用}}',
   'fabric.editor.selectLanguage': '选择语言',
-  'fabric.editor.settingsLinks': '转到“链接首选项”',
   'fabric.editor.shortcut': '文本快捷方式',
   'fabric.editor.single': '单列',
   'fabric.editor.statusPlaceholder': '设置状态',
@@ -237,10 +229,8 @@ export default {
   'fabric.editor.typeahead.mentionInputLabel': '开始输入以搜索要标记的用户',
   'fabric.editor.typeahead.mentionPopupLabel': '您可以标记的用户',
   'fabric.editor.typeahead.metionListItemLabel': '用户 {name} @{shortName}',
-  'fabric.editor.unableToOpenLink': '无法打开此链接',
   'fabric.editor.underline': '下划线',
   'fabric.editor.undo': '撤销',
-  'fabric.editor.unlink': '取消链接',
   'fabric.editor.unorderedList': '无序列表',
   'fabric.editor.unorderedList.description': '创建无序列表',
   'fabric.editor.url': '显示 URL',

package/dist/esm/i18n/zh_TW.js

@@ -73,7 +73,6 @@ export default {
   'fabric.editor.edit': '編輯',
   'fabric.editor.editAltText': '編輯替代文字',
   'fabric.editor.editDateText': '編輯日期',
-  'fabric.editor.editLink': '編輯連結',
   'fabric.editor.editStatusColor': '編輯狀態顏色',
   'fabric.editor.editStatusText': '編輯狀態',
   'fabric.editor.editableContentLabel': '可編輯內容',
@@ -97,7 +96,6 @@ export default {
   'fabric.editor.elementbrowser.search.empty-state.sub-heading.link': '探索 Atlassian Marketplace',
   'fabric.editor.elementbrowser.sidebar.heading': '瀏覽',
   'fabric.editor.embedTitle': '嵌入',
-  'fabric.editor.emptyLink': '請輸入連結。',
   'fabric.editor.epic': '大型工作',
   'fabric.editor.error': '錯誤',
   'fabric.editor.errorPanel': '錯誤面板',
@@ -141,7 +139,6 @@ export default {
   'fabric.editor.hyperlink.linkAriaLabel': '連結標籤',
   'fabric.editor.hyperlink.searchLinkAriaDescription': '當您在欄位中輸入內容時，建議會顯示在下方',
   'fabric.editor.hyperlink.searchLinkResults': '{count, plural, =0 {沒有找到任何結果} other {找到 {count,number} 個結果}}',
-  'fabric.editor.hyperlinkToolbarPlaceholder': '貼上或搜尋連結',
   'fabric.editor.imageBorderBold': '粗體',
   'fabric.editor.imageBorderColor': '顏色',
   'fabric.editor.imageBorderMedium': '普通',
@@ -157,17 +154,13 @@ export default {
   'fabric.editor.inlineTitle': '內嵌',
   'fabric.editor.inputQueryAssistiveTxt': '自動完成結果可用時，請使用向上和向下箭頭查看，並輸入以進行選取。若您使用觸控螢幕裝置，請透過觸控或滑動手勢探索內容。',
   'fabric.editor.invalidDateError': '請輸入有效的日期',
-  'fabric.editor.invalidLink': '請輸入有效的連結。',
   'fabric.editor.inviteItem.title': '{userRole, select, admin {邀請團隊成員加入 {productName}} trusted {邀請團隊成員加入 {productName}} other {將團隊成員新增至 {productName}}}',
   'fabric.editor.italic': '斜體',
   'fabric.editor.keyboardShortcuts': '鍵盤快速鍵',
   'fabric.editor.leftSidebar': '左側資訊看板',
-  'fabric.editor.linkAddress': '連結位址',
-  'fabric.editor.linkPlaceholder': '貼上連結',
   'fabric.editor.lists': '清單',
   'fabric.editor.markdown': 'Markdown',
   'fabric.editor.matchCase': '大小寫須相符',
-  'fabric.editor.mediaAddLink': '新增連結',
   'fabric.editor.mediaGroupDeleteLabel': '刪除',
   'fabric.editor.mentionNode.label': '已標記使用者',
   'fabric.editor.mentionsAddLabel': '新增圖示',
@@ -203,7 +196,6 @@ export default {
   'fabric.editor.rightSidebar': '右側資訊看板',
   'fabric.editor.searchResults': '{itemsLength, plural, other {{itemsLength,number} 個搜尋結果}}',
   'fabric.editor.selectLanguage': '選取語言',
-  'fabric.editor.settingsLinks': '前往連結偏好設定',
   'fabric.editor.shortcut': '文字快顯',
   'fabric.editor.single': '單欄',
   'fabric.editor.statusPlaceholder': '設定狀態',
@@ -237,10 +229,8 @@ export default {
   'fabric.editor.typeahead.mentionInputLabel': '開始輸入以搜尋要標記的使用者',
   'fabric.editor.typeahead.mentionPopupLabel': '您可以標記的使用者',
   'fabric.editor.typeahead.metionListItemLabel': '使用者 {name} @{shortName}',
-  'fabric.editor.unableToOpenLink': '無法開啟此連結',
   'fabric.editor.underline': '底線',
   'fabric.editor.undo': '復原',
-  'fabric.editor.unlink': '取消連結',
   'fabric.editor.unorderedList': '項目符號清單',
   'fabric.editor.unorderedList.description': '建立未排序的清單',
   'fabric.editor.url': '顯示 URL',

package/dist/esm/plugins/breakout/ui/LayoutButton.js

@@ -22,37 +22,14 @@ import ToolbarButton from '../../../ui/ToolbarButton';
 import { getBreakoutMode } from '../utils/get-breakout-mode';
 import { setBreakoutMode } from '../commands/set-breakout-mode';
 import { removeBreakout } from '../commands/remove-breakout';
-import commonMessages from '../../../messages';
 import { BreakoutCssClassName } from '../constants';
 import { isBreakoutMarkAllowed } from '../utils/is-breakout-mark-allowed';
 import { getPluginState } from '../plugin-key';
 import { NodeSelection } from 'prosemirror-state';
 import { isSupportedNodeForBreakout } from '../utils/is-supported-node';
 import { layers } from '@atlaskit/theme/constants';
+import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
 var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: ", " !important;\n    }\n  }\n"])), "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)");
-var BREAKOUT_MODE = {
-  FULL_WIDTH: 'full-width',
-  CENTER: 'center',
-  WIDE: 'wide'
-};
-var getNextBreakoutMode = function getNextBreakoutMode(currentMode) {
-  if (currentMode === BREAKOUT_MODE.FULL_WIDTH) {
-    return BREAKOUT_MODE.CENTER;
-  } else if (currentMode === BREAKOUT_MODE.WIDE) {
-    return BREAKOUT_MODE.FULL_WIDTH;
-  }
-  return BREAKOUT_MODE.WIDE;
-};
-var getTitle = function getTitle(layout) {
-  switch (layout) {
-    case BREAKOUT_MODE.FULL_WIDTH:
-      return commonMessages.layoutFixedWidth;
-    case BREAKOUT_MODE.WIDE:
-      return commonMessages.layoutFullWidth;
-    default:
-      return commonMessages.layoutWide;
-  }
-};
 function getBreakoutNodeElement(pluginState, selection, editorView) {
   if (selection instanceof NodeSelection && isSupportedNodeForBreakout(selection.node)) {
     return findDomRefAtPos(selection.from, editorView.domAtPos.bind(editorView));
@@ -74,7 +51,7 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
         var _this$props$editorVie = _this.props.editorView,
           state = _this$props$editorVie.state,
           dispatch = _this$props$editorVie.dispatch;
-        if ([BREAKOUT_MODE.WIDE, BREAKOUT_MODE.FULL_WIDTH].indexOf(breakoutMode) !== -1) {
+        if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
           setBreakoutMode(breakoutMode)(state, dispatch);
         } else {
           removeBreakout()(state, dispatch);
@@ -129,7 +106,7 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
         title: title,
         testId: titleMessage.id,
         onClick: this.handleClick(nextBreakoutMode),
-        iconBefore: breakoutMode === BREAKOUT_MODE.FULL_WIDTH ? jsx(CollapseIcon, {
+        iconBefore: breakoutMode === 'full-width' ? jsx(CollapseIcon, {
           label: title
         }) : jsx(ExpandIcon, {
           label: title

package/dist/esm/plugins/breakout/utils/get-breakout-mode.js

@@ -1,5 +1,4 @@
 import { findSupportedNodeForBreakout } from './find-breakout-node';
-
 /**
  * Get the current mode of the breakout at the selection
  * @param state Current EditorState

package/dist/esm/plugins/card/index.js

@@ -1,18 +1,26 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { Fragment } from 'react';
+import React from 'react';
 import { inlineCard, blockCard, embedCard } from '@atlaskit/adf-schema';
 import { createPlugin } from './pm-plugins/main';
 import { floatingToolbar } from './toolbar';
 import { EditorSmartCardEvents } from './ui/EditorSmartCardEvents';
 import { cardKeymap } from './pm-plugins/keymap';
 import { EditorSmartCardEventsNext } from './ui/EditorSmartCardEventsNext';
+import LayoutButton from './ui/LayoutButton';
+import { pluginKey } from './pm-plugins/plugin-key';
 var cardPlugin = function cardPlugin(options, api) {
   var _api$dependencies, _api$dependencies$fea;
   var featureFlags = (api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$fea = _api$dependencies.featureFlags) === null || _api$dependencies$fea === void 0 ? void 0 : _api$dependencies$fea.sharedState.currentState()) || {};
   return {
     name: 'card',
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      return pluginKey.getState(editorState);
+    },
     nodes: function nodes() {
       var nodes = [{
         name: 'inlineCard',
@@ -56,12 +64,21 @@ var cardPlugin = function cardPlugin(options, api) {
       return plugins;
     },
     contentComponent: function contentComponent(_ref2) {
-      var editorView = _ref2.editorView;
+      var editorView = _ref2.editorView,
+        popupsMountPoint = _ref2.popupsMountPoint,
+        popupsScrollableElement = _ref2.popupsScrollableElement,
+        popupsBoundariesElement = _ref2.popupsBoundariesElement;
       var lpAnalyticsEventsNext = featureFlags.lpAnalyticsEventsNext;
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(EditorSmartCardEvents, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorSmartCardEvents, {
         editorView: editorView
       }), lpAnalyticsEventsNext && /*#__PURE__*/React.createElement(EditorSmartCardEventsNext, {
         editorView: editorView
+      }), /*#__PURE__*/React.createElement(LayoutButton, {
+        api: api,
+        editorView: editorView,
+        mountPoint: popupsMountPoint,
+        scrollableElement: popupsScrollableElement,
+        boundariesElement: popupsBoundariesElement
       }));
     },
     pluginsOptions: {

package/dist/esm/plugins/card/nodeviews/datasource.js

@@ -15,6 +15,9 @@ import PropTypes from 'prop-types';
 import { css, jsx } from '@emotion/react';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { DatasourceTableView } from '@atlaskit/link-datasource';
+import { SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
+export var DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
 var containerStyles = css({
   height: '500px',
   overflow: 'auto'
@@ -111,15 +114,46 @@ _defineProperty(DatasourceComponent, "contextTypes", {
 export var Datasource = /*#__PURE__*/function (_ReactNodeView) {
   _inherits(Datasource, _ReactNodeView);
   var _super2 = _createSuper(Datasource);
-  function Datasource() {
+  function Datasource(props) {
+    var _props$pluginInjectio, _props$pluginInjectio2, _props$pluginInjectio3, _sharedState$currentS;
+    var _this2;
     _classCallCheck(this, Datasource);
-    return _super2.apply(this, arguments);
+    _this2 = _super2.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, true, undefined, props.hasIntlContext);
+    _defineProperty(_assertThisInitialized(_this2), "calcTableWidth", function (layout, containerWidth) {
+      if (layout === 'center') {
+        return 'inherit';
+      }
+      return calcBreakoutWidthPx(layout, containerWidth);
+    });
+    var sharedState = props === null || props === void 0 ? void 0 : (_props$pluginInjectio = props.pluginInjectionApi) === null || _props$pluginInjectio === void 0 ? void 0 : (_props$pluginInjectio2 = _props$pluginInjectio.dependencies) === null || _props$pluginInjectio2 === void 0 ? void 0 : (_props$pluginInjectio3 = _props$pluginInjectio2.width) === null || _props$pluginInjectio3 === void 0 ? void 0 : _props$pluginInjectio3.sharedState;
+    _this2.tableWidth = sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.width;
+    sharedState === null || sharedState === void 0 ? void 0 : sharedState.onChange(function (_ref2) {
+      var nextSharedState = _ref2.nextSharedState;
+      if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.width && _this2.tableWidth !== (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.width)) {
+        _this2.tableWidth = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.width;
+        _this2.update(_this2.node, []); // required to update the width when page is resized.
+      }
+    });
+    return _this2;
   }
   _createClass(Datasource, [{
+    key: "createDomRef",
+    value: function createDomRef() {
+      var domRef = document.createElement('div');
+      domRef.classList.add(SmartCardSharedCssClassName.DATASOURCE_CONTAINER);
+      return domRef;
+    }
+  }, {
     key: "render",
     value: function render() {
+      var attrs = this.node.attrs;
+      var calculatedWidth = this.calcTableWidth(attrs.layout, this.tableWidth);
       return jsx("div", {
-        css: containerStyles
+        className: DATASOURCE_INNER_CONTAINER_CLASSNAME,
+        css: containerStyles,
+        style: {
+          minWidth: calculatedWidth
+        }
       }, jsx(DatasourceComponent, {
         node: this.node,
         view: this.view,

package/dist/esm/plugins/card/pm-plugins/actions.js

@@ -50,6 +50,33 @@ export var setProvider = function setProvider(cardProvider) {
     });
   };
 };
+export var setDatasourceTableRef = function setDatasourceTableRef(datasourceTableRef) {
+  return function (tr) {
+    return cardAction(tr, {
+      type: 'SET_DATASOURCE_TABLE_REF',
+      datasourceTableRef: datasourceTableRef
+    });
+  };
+};
+export var setCardLayout = function setCardLayout(layout) {
+  return function (tr) {
+    return cardAction(tr, {
+      type: 'SET_CARD_LAYOUT',
+      layout: layout
+    });
+  };
+};
+export var setCardLayoutAndDatasourceTableRef = function setCardLayoutAndDatasourceTableRef(_ref) {
+  var layout = _ref.layout,
+    datasourceTableRef = _ref.datasourceTableRef;
+  return function (tr) {
+    return cardAction(tr, {
+      type: 'SET_CARD_LAYOUT_AND_DATASOURCE_TABLE_REF',
+      layout: layout,
+      datasourceTableRef: datasourceTableRef
+    });
+  };
+};
 export var showLinkToolbar = function showLinkToolbar(tr) {
   return cardAction(tr, {
     type: 'SHOW_LINK_TOOLBAR'

package/dist/esm/plugins/card/pm-plugins/main.js

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection } from 'prosemirror-state';
 import rafSchedule from 'raf-schd';
 import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
 import { BlockCard } from '../nodeviews/blockCard';
@@ -10,7 +11,9 @@ import reducer from './reducers';
 import { handleProvider, resolveWithProvider } from './util/resolve';
 import { getNewRequests, getPluginState, getPluginStateWithUpdatedPos } from './util/state';
 import { createAnalyticsQueue, eventsFromTransaction } from './analytics';
-import { Datasource } from '../nodeviews/datasource';
+import { DATASOURCE_INNER_CONTAINER_CLASSNAME, Datasource } from '../nodeviews/datasource';
+import { setDatasourceTableRef, setCardLayoutAndDatasourceTableRef } from './actions';
+import { findDomRefAtPos } from 'prosemirror-utils';
 export { pluginKey } from './plugin-key';
 export var createPlugin = function createPlugin(options, pluginInjectionApi) {
   return function (pmPluginFactoryParams) {
@@ -34,7 +37,9 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
             smartLinkEvents: undefined,
             smartLinkEventsNext: undefined,
             createAnalyticsEvent: createAnalyticsEvent,
-            editorAppearance: editorAppearance
+            editorAppearance: editorAppearance,
+            datasourceTableRef: undefined,
+            layout: undefined
           };
         },
         apply: function apply(tr, pluginState, prevEditorState) {
@@ -60,12 +65,42 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
         var subscriptionHandler = function subscriptionHandler(name, provider) {
           return handleProvider(name, provider, _view);
         };
+        var domAtPos = _view.domAtPos.bind(_view);
         var rafCancellationCallbacks = [];
         pmPluginFactoryParams.providerFactory.subscribe('cardProvider', subscriptionHandler);
         return {
           update: function update(view, prevState) {
+            var _selection$node;
             var currentState = getPluginState(view.state);
             var oldState = getPluginState(prevState);
+            var state = view.state,
+              dispatch = view.dispatch;
+            var selection = state.selection,
+              tr = state.tr,
+              schema = state.schema;
+            var isBlockCardSelected = selection instanceof NodeSelection && ((_selection$node = selection.node) === null || _selection$node === void 0 ? void 0 : _selection$node.type) === schema.nodes.blockCard;
+            if (isBlockCardSelected) {
+              var _findDomRefAtPos, _node$attrs;
+              var datasourceTableRef = (_findDomRefAtPos = findDomRefAtPos(selection.from, domAtPos)) === null || _findDomRefAtPos === void 0 ? void 0 : _findDomRefAtPos.querySelector(".".concat(DATASOURCE_INNER_CONTAINER_CLASSNAME));
+              var node = selection.node;
+              var isDatasource = !!(node !== null && node !== void 0 && (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.datasource);
+              var shouldUpdateTableRef = datasourceTableRef && (currentState === null || currentState === void 0 ? void 0 : currentState.datasourceTableRef) !== datasourceTableRef;
+              if (isDatasource && shouldUpdateTableRef) {
+                var _node$attrs2;
+                // since we use the plugin state, which is a shared state, we need to update the datasourceTableRef, layout on each selection
+                var layout = (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.layout) || 'center';
+
+                // we use cardAction to set the same meta, hence, we will need to combine both layout+datasourceTableRef in one transaction
+                dispatch(setCardLayoutAndDatasourceTableRef({
+                  datasourceTableRef: datasourceTableRef,
+                  layout: layout
+                })(tr));
+              }
+            } else {
+              if (currentState !== null && currentState !== void 0 && currentState.datasourceTableRef) {
+                dispatch(setDatasourceTableRef(undefined)(tr));
+              }
+            }
             if (currentState && currentState.provider) {
               // Find requests in this state that weren't in the old one.
               var newRequests = getNewRequests(oldState, currentState);
@@ -111,6 +146,7 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
             }
           }),
           blockCard: function blockCard(node, view, getPos) {
+            var _node$attrs3;
             var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
               eventDispatcher = pmPluginFactoryParams.eventDispatcher;
             var reactComponentProps = {
@@ -118,8 +154,17 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
               showServerActions: showServerActions
             };
             var hasIntlContext = true;
-            if (node.attrs.datasource) {
-              return new Datasource(node, view, getPos, portalProviderAPI, eventDispatcher, undefined, undefined, true, undefined, hasIntlContext).init();
+            var isDatasource = !!(node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.datasource);
+            if (isDatasource) {
+              return new Datasource({
+                node: node,
+                view: view,
+                getPos: getPos,
+                portalProviderAPI: portalProviderAPI,
+                eventDispatcher: eventDispatcher,
+                hasIntlContext: hasIntlContext,
+                pluginInjectionApi: pluginInjectionApi
+              }).init();
             }
             return new BlockCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();
           },