@atlaskit/editor-plugin-code-block 23.0.3 → 23.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,32 @@
1
1
  # @atlaskit/editor-plugin-code-block
2
2
 
3
+ ## 23.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
  ## 23.0.3
4
31
 
5
32
  ### Patch Changes
@@ -11,6 +11,7 @@ var _reactIntl = require("react-intl");
11
11
  var _hooks = require("@atlaskit/editor-common/hooks");
12
12
  var _messages = require("@atlaskit/editor-common/messages");
13
13
  var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
14
+ var _messages2 = require("@atlaskit/editor-common/quick-insert/messages");
14
15
  var _angleBrackets = _interopRequireDefault(require("@atlaskit/icon/core/angle-brackets"));
15
16
  var _editorCommands = require("../../editor-commands");
16
17
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -19,6 +20,14 @@ var CodeBlockQuickInsertMenuItem = exports.CodeBlockQuickInsertMenuItem = functi
19
20
  previewImageUrls = _ref.previewImageUrls;
20
21
  var _useIntl = (0, _reactIntl.useIntl)(),
21
22
  formatMessage = _useIntl.formatMessage;
23
+ var preview = (0, _react.useMemo)(function () {
24
+ return previewImageUrls ? {
25
+ image: previewImageUrls,
26
+ attribution: {
27
+ name: formatMessage(_messages2.messages.previewAttributionAtlassian)
28
+ }
29
+ } : undefined;
30
+ }, [formatMessage, previewImageUrls]);
22
31
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['editorDisabled'], function (states) {
23
32
  var _states$editorDisable;
24
33
  return {
@@ -37,12 +46,13 @@ var CodeBlockQuickInsertMenuItem = exports.CodeBlockQuickInsertMenuItem = functi
37
46
  });
38
47
  }, [api]);
39
48
  return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
49
+ description: formatMessage(_messages.blockTypeMessages.codeblockDescription),
40
50
  iconBefore: /*#__PURE__*/_react.default.createElement(_angleBrackets.default, {
41
51
  label: ""
42
52
  }),
43
53
  isDisabled: editorDisabled,
44
54
  onSelect: onSelect,
45
- previewImageUrls: previewImageUrls,
55
+ preview: preview,
46
56
  shortcut: "```",
47
57
  title: formatMessage(_messages.blockTypeMessages.codeblock)
48
58
  });
@@ -12,8 +12,8 @@ var _keys = require("@atlaskit/editor-common/quick-insert/keys");
12
12
  var _rank = require("@atlaskit/editor-common/quick-insert/rank");
13
13
  var _CodeBlockQuickInsertMenuItem = require("./CodeBlockQuickInsertMenuItem");
14
14
  var previewImageUrls = {
15
- light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/wtf74vgl71h0j84a742l84qly50mdeq2.png',
16
- dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/11t8334w2tk154543fv1l248n1he6173.png'
15
+ light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVKE.png',
16
+ dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVH7.png'
17
17
  };
18
18
  var getCodeBlockQuickInsertComponents = exports.getCodeBlockQuickInsertComponents = function getCodeBlockQuickInsertComponents(_ref) {
19
19
  var api = _ref.api;
@@ -1,8 +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 { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
4
4
  import { blockTypeMessages } from '@atlaskit/editor-common/messages';
5
5
  import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
6
+ import { messages as quickInsertMessages } from '@atlaskit/editor-common/quick-insert/messages';
6
7
  import AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
7
8
  import { createInsertCodeBlockTransactionWithAnalytics } from '../../editor-commands';
8
9
  export const CodeBlockQuickInsertMenuItem = ({
@@ -12,6 +13,12 @@ export const CodeBlockQuickInsertMenuItem = ({
12
13
  const {
13
14
  formatMessage
14
15
  } = useIntl();
16
+ const preview = useMemo(() => previewImageUrls ? {
17
+ image: previewImageUrls,
18
+ attribution: {
19
+ name: formatMessage(quickInsertMessages.previewAttributionAtlassian)
20
+ }
21
+ } : undefined, [formatMessage, previewImageUrls]);
15
22
  const {
16
23
  editorDisabled
17
24
  } = useSharedPluginStateWithSelector(api, ['editorDisabled'], states => {
@@ -32,12 +39,13 @@ export const CodeBlockQuickInsertMenuItem = ({
32
39
  });
33
40
  }, [api]);
34
41
  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
42
+ description: formatMessage(blockTypeMessages.codeblockDescription),
35
43
  iconBefore: /*#__PURE__*/React.createElement(AngleBracketsIcon, {
36
44
  label: ""
37
45
  }),
38
46
  isDisabled: editorDisabled,
39
47
  onSelect: onSelect,
40
- previewImageUrls: previewImageUrls,
48
+ preview: preview,
41
49
  shortcut: "```",
42
50
  title: formatMessage(blockTypeMessages.codeblock)
43
51
  });
@@ -5,8 +5,8 @@ import { CODE_BLOCK_MENU_ITEM, STRUCTURE_SECTION } from '@atlaskit/editor-common
5
5
  import { STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
6
6
  import { CodeBlockQuickInsertMenuItem } from './CodeBlockQuickInsertMenuItem';
7
7
  const previewImageUrls = {
8
- light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/wtf74vgl71h0j84a742l84qly50mdeq2.png',
9
- dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/11t8334w2tk154543fv1l248n1he6173.png'
8
+ light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVKE.png',
9
+ dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVH7.png'
10
10
  };
11
11
  export const getCodeBlockQuickInsertComponents = ({
12
12
  api
@@ -1,8 +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 { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
4
4
  import { blockTypeMessages } from '@atlaskit/editor-common/messages';
5
5
  import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
6
+ import { messages as quickInsertMessages } from '@atlaskit/editor-common/quick-insert/messages';
6
7
  import AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
7
8
  import { createInsertCodeBlockTransactionWithAnalytics } from '../../editor-commands';
8
9
  export var CodeBlockQuickInsertMenuItem = function CodeBlockQuickInsertMenuItem(_ref) {
@@ -10,6 +11,14 @@ export var CodeBlockQuickInsertMenuItem = function CodeBlockQuickInsertMenuItem(
10
11
  previewImageUrls = _ref.previewImageUrls;
11
12
  var _useIntl = useIntl(),
12
13
  formatMessage = _useIntl.formatMessage;
14
+ var preview = useMemo(function () {
15
+ return previewImageUrls ? {
16
+ image: previewImageUrls,
17
+ attribution: {
18
+ name: formatMessage(quickInsertMessages.previewAttributionAtlassian)
19
+ }
20
+ } : undefined;
21
+ }, [formatMessage, previewImageUrls]);
13
22
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['editorDisabled'], function (states) {
14
23
  var _states$editorDisable;
15
24
  return {
@@ -28,12 +37,13 @@ export var CodeBlockQuickInsertMenuItem = function CodeBlockQuickInsertMenuItem(
28
37
  });
29
38
  }, [api]);
30
39
  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
40
+ description: formatMessage(blockTypeMessages.codeblockDescription),
31
41
  iconBefore: /*#__PURE__*/React.createElement(AngleBracketsIcon, {
32
42
  label: ""
33
43
  }),
34
44
  isDisabled: editorDisabled,
35
45
  onSelect: onSelect,
36
- previewImageUrls: previewImageUrls,
46
+ preview: preview,
37
47
  shortcut: "```",
38
48
  title: formatMessage(blockTypeMessages.codeblock)
39
49
  });
@@ -5,8 +5,8 @@ import { CODE_BLOCK_MENU_ITEM, STRUCTURE_SECTION } from '@atlaskit/editor-common
5
5
  import { STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
6
6
  import { CodeBlockQuickInsertMenuItem } from './CodeBlockQuickInsertMenuItem';
7
7
  var previewImageUrls = {
8
- light: 'https://dam-cdn.atl.orangelogic.com/AssetLink/wtf74vgl71h0j84a742l84qly50mdeq2.png',
9
- dark: 'https://dam-cdn.atl.orangelogic.com/AssetLink/11t8334w2tk154543fv1l248n1he6173.png'
8
+ light: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVKE.png',
9
+ dark: 'https://dam-cdn.atl.orangelogic.com/CDNLink/AT12OVH7.png'
10
10
  };
11
11
  export var getCodeBlockQuickInsertComponents = function getCodeBlockQuickInsertComponents(_ref) {
12
12
  var api = _ref.api;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-code-block",
3
- "version": "23.0.3",
3
+ "version": "23.0.4",
4
4
  "description": "Code block plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,7 +34,7 @@
34
34
  "@atlaskit/editor-plugin-toolbar": "^18.0.0",
35
35
  "@atlaskit/editor-prosemirror": "^9.0.0",
36
36
  "@atlaskit/editor-shared-styles": "^4.3.0",
37
- "@atlaskit/editor-toolbar": "^2.7.0",
37
+ "@atlaskit/editor-toolbar": "^2.8.0",
38
38
  "@atlaskit/editor-ui-control-model": "^2.10.0",
39
39
  "@atlaskit/flag": "^19.0.0",
40
40
  "@atlaskit/frontend-utilities": "^5.0.0",
@@ -43,15 +43,15 @@
43
43
  "@atlaskit/platform-feature-flags": "^2.2.0",
44
44
  "@atlaskit/primitives": "^22.5.0",
45
45
  "@atlaskit/prosemirror-input-rules": "^4.1.0",
46
- "@atlaskit/react-select": "^4.10.0",
46
+ "@atlaskit/react-select": "^4.12.0",
47
47
  "@atlaskit/select": "^23.1.0",
48
- "@atlaskit/tmp-editor-statsig": "^208.0.0",
48
+ "@atlaskit/tmp-editor-statsig": "^209.0.0",
49
49
  "@atlaskit/tokens": "^20.0.0",
50
50
  "@babel/runtime": "^7.0.0",
51
51
  "@compiled/react": "^1.0.2"
52
52
  },
53
53
  "peerDependencies": {
54
- "@atlaskit/editor-common": "^125.2.0",
54
+ "@atlaskit/editor-common": "^125.4.0",
55
55
  "react": "^18.2.0 || ^19.2.0",
56
56
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
57
57
  },