@atlaskit/editor-plugin-layout 22.0.3 → 22.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/cjs/ui/quick-insert/LayoutQuickInsertMenuItem.js +14 -1
  3. package/dist/cjs/ui/quick-insert/getLayoutQuickInsertComponents.js +9 -9
  4. package/dist/es2019/ui/quick-insert/LayoutQuickInsertMenuItem.js +13 -2
  5. package/dist/es2019/ui/quick-insert/getLayoutQuickInsertComponents.js +9 -9
  6. package/dist/esm/ui/quick-insert/LayoutQuickInsertMenuItem.js +15 -2
  7. package/dist/esm/ui/quick-insert/getLayoutQuickInsertComponents.js +9 -9
  8. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,32 @@
1
1
  # @atlaskit/editor-plugin-layout
2
2
 
3
+ ## 22.0.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`a034f535638cc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a034f535638cc) -
8
+ Add structured Quick Insert previews with localised title, description and attribution under
9
+ platform_editor_slash_command.
10
+
11
+ Exclude footer and category navigation actions from previews. Left-align attribution, use subtle
12
+ title and attribution text, and default description text.
13
+
14
+ Show text previews even without preview metadata, and reserve a fixed image area while images load
15
+ or when they fail. Keep previews within the viewport, flipping left when needed, with compact
16
+ panel dimensions and typography.
17
+
18
+ Replace baked panel screenshots with image-only assets. Remove image fields from text-only legacy
19
+ previews while preserving their attribution.
20
+
21
+ Let extension providers own their preview images and attribution. Pass preview metadata through
22
+ the Company Hub manifest factory and remove Editor's fallback preview registry.
23
+
24
+ Localize provider attribution names and display Confluence and Jira product icons instead of the
25
+ attribution prefix when an icon is present. Allow the Dropbox manifest to receive the host's
26
+ message formatter.
27
+
28
+ - Updated dependencies
29
+
3
30
  ## 22.0.3
4
31
 
5
32
  ### Patch Changes
package/dist/cjs/ui/quick-insert/LayoutQuickInsertMenuItem.js CHANGED
@@ -9,7 +9,9 @@ exports.LayoutQuickInsertMenuItem = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _reactIntl = require("react-intl");
11
11
  var _analytics = require("@atlaskit/editor-common/analytics");
12
+ var _messages = require("@atlaskit/editor-common/messages");
12
13
  var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
14
+ var _messages2 = require("@atlaskit/editor-common/quick-insert/messages");
13
15
  var _layoutFiveColumns = _interopRequireDefault(require("@atlaskit/icon-lab/core/layout-five-columns"));
14
16
  var _layoutFourColumns = _interopRequireDefault(require("@atlaskit/icon-lab/core/layout-four-columns"));
15
17
  var _layoutThreeColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-three-columns"));
@@ -30,6 +32,14 @@ var LayoutQuickInsertMenuItem = exports.LayoutQuickInsertMenuItem = function Lay
30
32
  title = _ref.title;
31
33
  var _useIntl = (0, _reactIntl.useIntl)(),
32
34
  formatMessage = _useIntl.formatMessage;
35
+ var preview = (0, _react.useMemo)(function () {
36
+ return previewImageUrls ? {
37
+ image: previewImageUrls,
38
+ attribution: {
39
+ name: formatMessage(_messages2.messages.previewAttributionAtlassian)
40
+ }
41
+ } : undefined;
42
+ }, [formatMessage, previewImageUrls]);
33
43
  var Icon = icons[columnCount];
34
44
  var onSelect = (0, _react.useCallback)(function (_ref2) {
35
45
  var _api$analytics;
@@ -51,11 +61,14 @@ var LayoutQuickInsertMenuItem = exports.LayoutQuickInsertMenuItem = function Lay
51
61
  return tr;
52
62
  }, [api, columnCount]);
53
63
  return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
64
+ description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
65
+ numberOfColumns: columnCount
66
+ }),
54
67
  iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
55
68
  label: ""
56
69
  }),
57
70
  onSelect: onSelect,
58
- previewImageUrls: previewImageUrls,
71
+ preview: preview,
59
72
  title: formatMessage(title)
60
73
  });
61
74
  };
package/dist/cjs/ui/quick-insert/getLayoutQuickInsertComponents.js CHANGED
@@ -17,8 +17,8 @@ var layoutItems = [{
17
17
  item: _keys.TWO_COLUMNS_LAYOUT_MENU_ITEM,
18
18
  keyword: 'two column',
19
19
  previewImageUrls: {
20
- light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/0iw817624sqeag4khc1xcy63873q21rq.png',
21
- dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/54ofhg00x870clknn4332akh40g8u3w2.png'
20
+ light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVMM.png',
21
+ dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVJY.png'
22
22
  },
23
23
  title: _messages.layoutMessages.twoColumnsAdvancedLayout
24
24
  }, {
@@ -27,8 +27,8 @@ var layoutItems = [{
27
27
  item: _keys.THREE_COLUMNS_LAYOUT_MENU_ITEM,
28
28
  keyword: 'three column',
29
29
  previewImageUrls: {
30
- light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/jly0ydm2oi818u507kt807jsi54du81d.png',
31
- dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/12qobcpeyt16r8coi03arj643b7oq780.png'
30
+ light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVNM.png',
31
+ dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVK3.png'
32
32
  },
33
33
  title: _messages.layoutMessages.threeColumnsAdvancedLayout
34
34
  }, {
@@ -37,8 +37,8 @@ var layoutItems = [{
37
37
  item: _keys.FOUR_COLUMNS_LAYOUT_MENU_ITEM,
38
38
  keyword: 'four column',
39
39
  previewImageUrls: {
40
- light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/qxypnub871i55c81u236hb736y4008d7.png',
41
- dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/7t6ryd4ek4gob4634vr4u31m0l4760el.png'
40
+ light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVNI.png',
41
+ dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVK5.png'
42
42
  },
43
43
  title: _messages.layoutMessages.fourColumns
44
44
  }, {
@@ -47,8 +47,8 @@ var layoutItems = [{
47
47
  item: _keys.FIVE_COLUMNS_LAYOUT_MENU_ITEM,
48
48
  keyword: 'five column',
49
49
  previewImageUrls: {
50
- light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/10ffd735631hbf21r5lr4dophlp6702a.png',
51
- dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/ma21tr7mfw721t0tr31n80j33g032b78.png'
50
+ light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVNO.png',
51
+ dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVJV.png'
52
52
  },
53
53
  title: _messages.layoutMessages.fiveColumns
54
54
  }];
@@ -73,7 +73,7 @@ var getLayoutQuickInsertComponents = exports.getLayoutQuickInsertComponents = fu
73
73
  var formatMessage = _ref3.formatMessage;
74
74
  return {
75
75
  description: formatMessage(description, {
76
- numberOfColumns: ['one', 'two', 'three', 'four', 'five'][columnCount - 1]
76
+ numberOfColumns: columnCount
77
77
  }),
78
78
  keywords: ['layout', 'column', 'section', 'col', keyword],
79
79
  title: formatMessage(title)
package/dist/es2019/ui/quick-insert/LayoutQuickInsertMenuItem.js CHANGED
@@ -1,7 +1,9 @@
1
- import React, { useCallback } from 'react';
1
+ import React, { useCallback, useMemo } from 'react';
2
2
  import { useIntl } from 'react-intl';
3
3
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
4
+ import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
4
5
  import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
6
+ import { messages as quickInsertMessages } from '@atlaskit/editor-common/quick-insert/messages';
5
7
  import LayoutFiveColumnsIcon from '@atlaskit/icon-lab/core/layout-five-columns';
6
8
  import LayoutFourColumnsIcon from '@atlaskit/icon-lab/core/layout-four-columns';
7
9
  import LayoutThreeColumnsIcon from '@atlaskit/icon/core/layout-three-columns';
@@ -23,6 +25,12 @@ export const LayoutQuickInsertMenuItem = ({
23
25
  const {
24
26
  formatMessage
25
27
  } = useIntl();
28
+ const preview = useMemo(() => previewImageUrls ? {
29
+ image: previewImageUrls,
30
+ attribution: {
31
+ name: formatMessage(quickInsertMessages.previewAttributionAtlassian)
32
+ }
33
+ } : undefined, [formatMessage, previewImageUrls]);
26
34
  const Icon = icons[columnCount];
27
35
  const onSelect = useCallback(({
28
36
  editorView,
@@ -45,11 +53,14 @@ export const LayoutQuickInsertMenuItem = ({
45
53
  return tr;
46
54
  }, [api, columnCount]);
47
55
  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
56
+ description: formatMessage(toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
57
+ numberOfColumns: columnCount
58
+ }),
48
59
  iconBefore: /*#__PURE__*/React.createElement(Icon, {
49
60
  label: ""
50
61
  }),
51
62
  onSelect: onSelect,
52
- previewImageUrls: previewImageUrls,
63
+ preview: preview,
53
64
  title: formatMessage(title)
54
65
  });
55
66
  };
package/dist/es2019/ui/quick-insert/getLayoutQuickInsertComponents.js CHANGED
@@ -10,8 +10,8 @@ const layoutItems = [{
10
10
  item: TWO_COLUMNS_LAYOUT_MENU_ITEM,
11
11
  keyword: 'two column',
12
12
  previewImageUrls: {
13
- light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/0iw817624sqeag4khc1xcy63873q21rq.png',
14
- dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/54ofhg00x870clknn4332akh40g8u3w2.png'
13
+ light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVMM.png',
14
+ dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVJY.png'
15
15
  },
16
16
  title: layoutMessages.twoColumnsAdvancedLayout
17
17
  }, {
@@ -20,8 +20,8 @@ const layoutItems = [{
20
20
  item: THREE_COLUMNS_LAYOUT_MENU_ITEM,
21
21
  keyword: 'three column',
22
22
  previewImageUrls: {
23
- light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/jly0ydm2oi818u507kt807jsi54du81d.png',
24
- dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/12qobcpeyt16r8coi03arj643b7oq780.png'
23
+ light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVNM.png',
24
+ dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVK3.png'
25
25
  },
26
26
  title: layoutMessages.threeColumnsAdvancedLayout
27
27
  }, {
@@ -30,8 +30,8 @@ const layoutItems = [{
30
30
  item: FOUR_COLUMNS_LAYOUT_MENU_ITEM,
31
31
  keyword: 'four column',
32
32
  previewImageUrls: {
33
- light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/qxypnub871i55c81u236hb736y4008d7.png',
34
- dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/7t6ryd4ek4gob4634vr4u31m0l4760el.png'
33
+ light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVNI.png',
34
+ dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVK5.png'
35
35
  },
36
36
  title: layoutMessages.fourColumns
37
37
  }, {
@@ -40,8 +40,8 @@ const layoutItems = [{
40
40
  item: FIVE_COLUMNS_LAYOUT_MENU_ITEM,
41
41
  keyword: 'five column',
42
42
  previewImageUrls: {
43
- light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/10ffd735631hbf21r5lr4dophlp6702a.png',
44
- dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/ma21tr7mfw721t0tr31n80j33g032b78.png'
43
+ light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVNO.png',
44
+ dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVJV.png'
45
45
  },
46
46
  title: layoutMessages.fiveColumns
47
47
  }];
@@ -66,7 +66,7 @@ export const getLayoutQuickInsertComponents = ({
66
66
  formatMessage
67
67
  }) => ({
68
68
  description: formatMessage(description, {
69
- numberOfColumns: ['one', 'two', 'three', 'four', 'five'][columnCount - 1]
69
+ numberOfColumns: columnCount
70
70
  }),
71
71
  keywords: ['layout', 'column', 'section', 'col', keyword],
72
72
  title: formatMessage(title)
package/dist/esm/ui/quick-insert/LayoutQuickInsertMenuItem.js CHANGED
@@ -1,7 +1,9 @@
1
- import React, { useCallback } from 'react';
1
+ import React, { useCallback, useMemo } from 'react';
2
2
  import { useIntl } from 'react-intl';
3
3
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
4
+ import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
4
5
  import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
6
+ import { messages as quickInsertMessages } from '@atlaskit/editor-common/quick-insert/messages';
5
7
  import LayoutFiveColumnsIcon from '@atlaskit/icon-lab/core/layout-five-columns';
6
8
  import LayoutFourColumnsIcon from '@atlaskit/icon-lab/core/layout-four-columns';
7
9
  import LayoutThreeColumnsIcon from '@atlaskit/icon/core/layout-three-columns';
@@ -21,6 +23,14 @@ export var LayoutQuickInsertMenuItem = function LayoutQuickInsertMenuItem(_ref)
21
23
  title = _ref.title;
22
24
  var _useIntl = useIntl(),
23
25
  formatMessage = _useIntl.formatMessage;
26
+ var preview = useMemo(function () {
27
+ return previewImageUrls ? {
28
+ image: previewImageUrls,
29
+ attribution: {
30
+ name: formatMessage(quickInsertMessages.previewAttributionAtlassian)
31
+ }
32
+ } : undefined;
33
+ }, [formatMessage, previewImageUrls]);
24
34
  var Icon = icons[columnCount];
25
35
  var onSelect = useCallback(function (_ref2) {
26
36
  var _api$analytics;
@@ -42,11 +52,14 @@ export var LayoutQuickInsertMenuItem = function LayoutQuickInsertMenuItem(_ref)
42
52
  return tr;
43
53
  }, [api, columnCount]);
44
54
  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
55
+ description: formatMessage(toolbarInsertBlockMessages.columnsDescriptionAdvancedLayout, {
56
+ numberOfColumns: columnCount
57
+ }),
45
58
  iconBefore: /*#__PURE__*/React.createElement(Icon, {
46
59
  label: ""
47
60
  }),
48
61
  onSelect: onSelect,
49
- previewImageUrls: previewImageUrls,
62
+ preview: preview,
50
63
  title: formatMessage(title)
51
64
  });
52
65
  };
package/dist/esm/ui/quick-insert/getLayoutQuickInsertComponents.js CHANGED
@@ -10,8 +10,8 @@ var layoutItems = [{
10
10
  item: TWO_COLUMNS_LAYOUT_MENU_ITEM,
11
11
  keyword: 'two column',
12
12
  previewImageUrls: {
13
- light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/0iw817624sqeag4khc1xcy63873q21rq.png',
14
- dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/54ofhg00x870clknn4332akh40g8u3w2.png'
13
+ light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVMM.png',
14
+ dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVJY.png'
15
15
  },
16
16
  title: layoutMessages.twoColumnsAdvancedLayout
17
17
  }, {
@@ -20,8 +20,8 @@ var layoutItems = [{
20
20
  item: THREE_COLUMNS_LAYOUT_MENU_ITEM,
21
21
  keyword: 'three column',
22
22
  previewImageUrls: {
23
- light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/jly0ydm2oi818u507kt807jsi54du81d.png',
24
- dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/12qobcpeyt16r8coi03arj643b7oq780.png'
23
+ light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVNM.png',
24
+ dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVK3.png'
25
25
  },
26
26
  title: layoutMessages.threeColumnsAdvancedLayout
27
27
  }, {
@@ -30,8 +30,8 @@ var layoutItems = [{
30
30
  item: FOUR_COLUMNS_LAYOUT_MENU_ITEM,
31
31
  keyword: 'four column',
32
32
  previewImageUrls: {
33
- light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/qxypnub871i55c81u236hb736y4008d7.png',
34
- dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/7t6ryd4ek4gob4634vr4u31m0l4760el.png'
33
+ light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVNI.png',
34
+ dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVK5.png'
35
35
  },
36
36
  title: layoutMessages.fourColumns
37
37
  }, {
@@ -40,8 +40,8 @@ var layoutItems = [{
40
40
  item: FIVE_COLUMNS_LAYOUT_MENU_ITEM,
41
41
  keyword: 'five column',
42
42
  previewImageUrls: {
43
- light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/10ffd735631hbf21r5lr4dophlp6702a.png',
44
- dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/ma21tr7mfw721t0tr31n80j33g032b78.png'
43
+ light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVNO.png',
44
+ dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVJV.png'
45
45
  },
46
46
  title: layoutMessages.fiveColumns
47
47
  }];
@@ -66,7 +66,7 @@ export var getLayoutQuickInsertComponents = function getLayoutQuickInsertCompone
66
66
  var formatMessage = _ref3.formatMessage;
67
67
  return {
68
68
  description: formatMessage(description, {
69
- numberOfColumns: ['one', 'two', 'three', 'four', 'five'][columnCount - 1]
69
+ numberOfColumns: columnCount
70
70
  }),
71
71
  keywords: ['layout', 'column', 'section', 'col', keyword],
72
72
  title: formatMessage(title)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-layout",
3
- "version": "22.0.3",
3
+ "version": "22.0.4",
4
4
  "description": "Layout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,20 +37,20 @@
37
37
  "@atlaskit/editor-plugin-width": "^22.0.0",
38
38
  "@atlaskit/editor-prosemirror": "^9.0.0",
39
39
  "@atlaskit/editor-shared-styles": "^4.3.0",
40
- "@atlaskit/editor-toolbar": "^2.7.0",
40
+ "@atlaskit/editor-toolbar": "^2.8.0",
41
41
  "@atlaskit/editor-ui-control-model": "^2.10.0",
42
42
  "@atlaskit/icon": "^38.0.0",
43
- "@atlaskit/icon-lab": "^7.9.0",
43
+ "@atlaskit/icon-lab": "^7.10.0",
44
44
  "@atlaskit/platform-feature-experiments": "^0.3.0",
45
45
  "@atlaskit/platform-feature-flags": "^2.2.0",
46
- "@atlaskit/tmp-editor-statsig": "^208.0.0",
46
+ "@atlaskit/tmp-editor-statsig": "^209.0.0",
47
47
  "@atlaskit/tokens": "^20.0.0",
48
48
  "@babel/runtime": "^7.0.0",
49
49
  "@emotion/react": "^11.7.1",
50
50
  "bind-event-listener": "^3.0.0"
51
51
  },
52
52
  "peerDependencies": {
53
- "@atlaskit/editor-common": "^125.2.0",
53
+ "@atlaskit/editor-common": "^125.4.0",
54
54
  "react": "^18.2.0 || ^19.2.0",
55
55
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
56
56
  },