@atlaskit/editor-common 74.13.0 → 74.14.0

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 (76) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/card/LinkToolbarButtonGroup.js +63 -0
  3. package/dist/cjs/card/index.js +18 -1
  4. package/dist/cjs/card/link-toolbar-button-group-options.js +52 -0
  5. package/dist/cjs/card/types.js +5 -0
  6. package/dist/cjs/card/ui/assets/card.js +30 -0
  7. package/dist/cjs/card/ui/assets/embed.js +30 -0
  8. package/dist/cjs/card/ui/assets/inline.js +30 -0
  9. package/dist/cjs/card/ui/assets/url.js +32 -0
  10. package/dist/cjs/messages/card.js +90 -0
  11. package/dist/cjs/messages/index.js +7 -0
  12. package/dist/cjs/monitoring/error.js +1 -1
  13. package/dist/cjs/styles/index.js +39 -1
  14. package/dist/cjs/styles/shared/embedCard.js +16 -0
  15. package/dist/cjs/styles/shared/smartCard.js +19 -0
  16. package/dist/cjs/ui/DropList/index.js +1 -1
  17. package/dist/cjs/version.json +1 -1
  18. package/dist/es2019/card/LinkToolbarButtonGroup.js +61 -0
  19. package/dist/es2019/card/index.js +4 -1
  20. package/dist/es2019/card/link-toolbar-button-group-options.js +45 -0
  21. package/dist/es2019/card/types.js +1 -0
  22. package/dist/es2019/card/ui/assets/card.js +22 -0
  23. package/dist/es2019/card/ui/assets/embed.js +22 -0
  24. package/dist/es2019/card/ui/assets/inline.js +22 -0
  25. package/dist/es2019/card/ui/assets/url.js +24 -0
  26. package/dist/es2019/messages/card.js +83 -0
  27. package/dist/es2019/messages/index.js +1 -0
  28. package/dist/es2019/monitoring/error.js +1 -1
  29. package/dist/es2019/styles/index.js +3 -1
  30. package/dist/es2019/styles/shared/embedCard.js +27 -0
  31. package/dist/es2019/styles/shared/smartCard.js +131 -0
  32. package/dist/es2019/ui/DropList/index.js +1 -1
  33. package/dist/es2019/version.json +1 -1
  34. package/dist/esm/card/LinkToolbarButtonGroup.js +56 -0
  35. package/dist/esm/card/index.js +4 -1
  36. package/dist/esm/card/link-toolbar-button-group-options.js +45 -0
  37. package/dist/esm/card/types.js +1 -0
  38. package/dist/esm/card/ui/assets/card.js +22 -0
  39. package/dist/esm/card/ui/assets/embed.js +22 -0
  40. package/dist/esm/card/ui/assets/inline.js +22 -0
  41. package/dist/esm/card/ui/assets/url.js +24 -0
  42. package/dist/esm/messages/card.js +83 -0
  43. package/dist/esm/messages/index.js +1 -0
  44. package/dist/esm/monitoring/error.js +1 -1
  45. package/dist/esm/styles/index.js +3 -1
  46. package/dist/esm/styles/shared/embedCard.js +6 -0
  47. package/dist/esm/styles/shared/smartCard.js +9 -0
  48. package/dist/esm/ui/DropList/index.js +1 -1
  49. package/dist/esm/version.json +1 -1
  50. package/dist/types/card/LinkToolbarButtonGroup.d.ts +16 -0
  51. package/dist/types/card/index.d.ts +4 -0
  52. package/dist/types/card/link-toolbar-button-group-options.d.ts +5 -0
  53. package/dist/types/card/types.d.ts +27 -0
  54. package/dist/types/card/ui/assets/card.d.ts +3 -0
  55. package/dist/types/card/ui/assets/embed.d.ts +3 -0
  56. package/dist/types/card/ui/assets/inline.d.ts +3 -0
  57. package/dist/types/card/ui/assets/url.d.ts +3 -0
  58. package/dist/types/messages/card.d.ts +82 -0
  59. package/dist/types/messages/index.d.ts +1 -0
  60. package/dist/types/styles/index.d.ts +2 -0
  61. package/dist/types/styles/shared/embedCard.d.ts +3 -0
  62. package/dist/types/styles/shared/smartCard.d.ts +3 -0
  63. package/dist/types-ts4.5/card/LinkToolbarButtonGroup.d.ts +16 -0
  64. package/dist/types-ts4.5/card/index.d.ts +4 -0
  65. package/dist/types-ts4.5/card/link-toolbar-button-group-options.d.ts +5 -0
  66. package/dist/types-ts4.5/card/types.d.ts +27 -0
  67. package/dist/types-ts4.5/card/ui/assets/card.d.ts +3 -0
  68. package/dist/types-ts4.5/card/ui/assets/embed.d.ts +3 -0
  69. package/dist/types-ts4.5/card/ui/assets/inline.d.ts +3 -0
  70. package/dist/types-ts4.5/card/ui/assets/url.d.ts +3 -0
  71. package/dist/types-ts4.5/messages/card.d.ts +82 -0
  72. package/dist/types-ts4.5/messages/index.d.ts +1 -0
  73. package/dist/types-ts4.5/styles/index.d.ts +2 -0
  74. package/dist/types-ts4.5/styles/shared/embedCard.d.ts +3 -0
  75. package/dist/types-ts4.5/styles/shared/smartCard.d.ts +3 -0
  76. package/package.json +2 -2
@@ -0,0 +1,45 @@
1
+ import { cardMessages as messages } from '../messages';
2
+ import { IconCard } from './ui/assets/card';
3
+ import { IconEmbed } from './ui/assets/embed';
4
+ import { IconInline } from './ui/assets/inline';
5
+ import { IconUrl } from './ui/assets/url';
6
+ const appearancePropsMap = {
7
+ url: {
8
+ title: messages.urlTitle,
9
+ icon: IconUrl
10
+ },
11
+ inline: {
12
+ title: messages.inlineTitle,
13
+ icon: IconInline
14
+ },
15
+ block: {
16
+ title: messages.blockTitle,
17
+ icon: IconCard
18
+ },
19
+ embed: {
20
+ title: messages.embedTitle,
21
+ icon: IconEmbed
22
+ }
23
+ };
24
+ export const getButtonGroupOption = (intl, dispatchCommand, {
25
+ disabled,
26
+ onClick,
27
+ selected,
28
+ appearance,
29
+ testId,
30
+ tooltip
31
+ }) => {
32
+ const {
33
+ title,
34
+ icon
35
+ } = appearancePropsMap[appearance !== null && appearance !== void 0 ? appearance : 'url'];
36
+ return {
37
+ title: intl.formatMessage(title),
38
+ icon,
39
+ onClick: () => dispatchCommand(onClick),
40
+ disabled: Boolean(disabled),
41
+ tooltipContent: tooltip || null,
42
+ testId,
43
+ selected
44
+ };
45
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,22 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React from 'react';
3
+ import Icon from '@atlaskit/icon';
4
+ const IconCardGlyph = props => {
5
+ return /*#__PURE__*/React.createElement("svg", _extends({
6
+ width: "32",
7
+ height: "32",
8
+ viewBox: "0 0 32 32",
9
+ fill: "none",
10
+ xmlns: "http://www.w3.org/2000/svg"
11
+ }, props), /*#__PURE__*/React.createElement("path", {
12
+ fillRule: "evenodd",
13
+ clipRule: "evenodd",
14
+ d: "M8 9c-1.10457 0-2 .89543-2 2v10c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2V11c0-1.10457-.8954-2-2-2H8Zm0 3c0-.5523.44772-1 1-1h2c.5523 0 1 .4477 1 1v2c0 .5523-.4477 1-1 1H9c-.55228 0-1-.4477-1-1v-2Zm5 1c0-.2761.2239-.5.5-.5h10c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-10c-.2761 0-.5-.2239-.5-.5Zm-4 3c-.55228 0-1 .4477-1 1s.44772 1 1 1h14c.5523 0 1-.4477 1-1s-.4477-1-1-1H9Zm-1 4c0-.5523.44772-1 1-1h6c.5523 0 1 .4477 1 1s-.4477 1-1 1H9c-.55228 0-1-.4477-1-1Z",
15
+ fill: "currentColor"
16
+ }));
17
+ };
18
+ export const IconCard = props => {
19
+ return /*#__PURE__*/React.createElement(Icon, _extends({
20
+ glyph: IconCardGlyph
21
+ }, props));
22
+ };
@@ -0,0 +1,22 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React from 'react';
3
+ import Icon from '@atlaskit/icon';
4
+ const IconEmbedGlyph = props => {
5
+ return /*#__PURE__*/React.createElement("svg", _extends({
6
+ width: "32",
7
+ height: "32",
8
+ viewBox: "0 0 32 32",
9
+ fill: "none",
10
+ xmlns: "http://www.w3.org/2000/svg"
11
+ }, props), /*#__PURE__*/React.createElement("path", {
12
+ fillRule: "evenodd",
13
+ clipRule: "evenodd",
14
+ d: "M8 6c-1.10457 0-2 .89543-2 2v16c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2V8c0-1.10457-.8954-2-2-2H8Zm1 2c-.55228 0-1 .44772-1 1v2c0 .5523.44772 1 1 1h2c.5523 0 1-.4477 1-1V9c0-.55228-.4477-1-1-1H9Zm4.5 1.5c-.2761 0-.5.22386-.5.5 0 .2761.2239.5.5.5h10c.2761 0 .5-.2239.5-.5 0-.27614-.2239-.5-.5-.5h-10ZM9 14c-.55228 0-1 .4477-1 1v8c0 .5523.44772 1 1 1h14c.5523 0 1-.4477 1-1v-8c0-.5523-.4477-1-1-1H9Zm6 2.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Zm0 5.5-1-1-2 2h8v-1.8L18 19l-3 3Z",
15
+ fill: "currentColor"
16
+ }));
17
+ };
18
+ export const IconEmbed = props => {
19
+ return /*#__PURE__*/React.createElement(Icon, _extends({
20
+ glyph: IconEmbedGlyph
21
+ }, props));
22
+ };
@@ -0,0 +1,22 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React from 'react';
3
+ import Icon from '@atlaskit/icon';
4
+ const IconInlineGlyph = props => {
5
+ return /*#__PURE__*/React.createElement("svg", _extends({
6
+ width: "32",
7
+ height: "32",
8
+ viewBox: "0 0 32 32",
9
+ fill: "none",
10
+ xmlns: "http://www.w3.org/2000/svg"
11
+ }, props), /*#__PURE__*/React.createElement("path", {
12
+ fillRule: "evenodd",
13
+ clipRule: "evenodd",
14
+ d: "M8 12c-1.10457 0-2 .8954-2 2v4c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2v-4c0-1.1046-.8954-2-2-2H8Zm0 3c0-.5523.44772-1 1-1h2c.5523 0 1 .4477 1 1v2c0 .5523-.4477 1-1 1H9c-.55228 0-1-.4477-1-1v-2Zm5 1c0-.2761.2239-.5.5-.5h10c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-10c-.2761 0-.5-.2239-.5-.5Z",
15
+ fill: "currentColor"
16
+ }));
17
+ };
18
+ export const IconInline = props => {
19
+ return /*#__PURE__*/React.createElement(Icon, _extends({
20
+ glyph: IconInlineGlyph
21
+ }, props));
22
+ };
@@ -0,0 +1,24 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React from 'react';
3
+ import Icon from '@atlaskit/icon';
4
+ const IconUrlGlyph = props => {
5
+ return /*#__PURE__*/React.createElement("svg", _extends({
6
+ width: "32",
7
+ height: "32",
8
+ viewBox: "0 0 32 32",
9
+ fill: "none",
10
+ xmlns: "http://www.w3.org/2000/svg"
11
+ }, props), /*#__PURE__*/React.createElement("rect", {
12
+ x: "6",
13
+ y: "15",
14
+ width: "20",
15
+ height: "2",
16
+ rx: "1",
17
+ fill: "currentColor"
18
+ }));
19
+ };
20
+ export const IconUrl = props => {
21
+ return /*#__PURE__*/React.createElement(Icon, _extends({
22
+ glyph: IconUrlGlyph
23
+ }, props));
24
+ };
@@ -0,0 +1,83 @@
1
+ import { defineMessages } from 'react-intl-next';
2
+ export const messages = defineMessages({
3
+ url: {
4
+ id: 'fabric.editor.url',
5
+ defaultMessage: 'Display URL',
6
+ description: 'Convert the card to become a regular text-based hyperlink.'
7
+ },
8
+ block: {
9
+ id: 'fabric.editor.displayBlock',
10
+ defaultMessage: 'Display card',
11
+ description: 'Display link as a card with a rich preview similar to in a Facebook feed with page title, description, and potentially an image.'
12
+ },
13
+ inline: {
14
+ id: 'fabric.editor.displayInline',
15
+ defaultMessage: 'Display inline',
16
+ description: 'Display link with the title only.'
17
+ },
18
+ embed: {
19
+ id: 'fabric.editor.displayEmbed',
20
+ defaultMessage: 'Display embed',
21
+ description: 'Display link as an embedded object'
22
+ },
23
+ link: {
24
+ id: 'fabric.editor.displayLink',
25
+ defaultMessage: 'Display as text',
26
+ description: 'Convert the card to become a regular text-based hyperlink.'
27
+ },
28
+ card: {
29
+ id: 'fabric.editor.cardFloatingControls',
30
+ defaultMessage: 'Card options',
31
+ description: 'Options to change card type'
32
+ },
33
+ blockCardUnavailable: {
34
+ id: 'fabric.editor.blockCardUnavailable',
35
+ defaultMessage: 'The inline link is inside {node} and cannot have its view changed',
36
+ description: 'Warning message to show the user that this node cannot change its view'
37
+ },
38
+ displayOptionUnavailableInParentNode: {
39
+ id: 'fabric.editor.displayOptionUnavailableInParentNode',
40
+ defaultMessage: "This display option isn't available inside {node}",
41
+ description: 'Warning message to show the user that this node option is not available inside a parent node type'
42
+ },
43
+ urlTitle: {
44
+ id: 'fabric.editor.urlTitle',
45
+ defaultMessage: 'URL',
46
+ description: 'Title for option to convert the card to become a regular text-based hyperlink.'
47
+ },
48
+ blockTitle: {
49
+ id: 'fabric.editor.blockTitle',
50
+ defaultMessage: 'Card',
51
+ description: 'Title for option to display link in the card view.'
52
+ },
53
+ inlineTitle: {
54
+ id: 'fabric.editor.inlineTitle',
55
+ defaultMessage: 'Inline',
56
+ description: 'Title for option to display link in the inline view.'
57
+ },
58
+ embedTitle: {
59
+ id: 'fabric.editor.embedTitle',
60
+ defaultMessage: 'Embed',
61
+ description: 'Title for option to display link as an embedded object.'
62
+ },
63
+ urlDescription: {
64
+ id: 'fabric.editor.urlDescription',
65
+ defaultMessage: 'Display link as URL',
66
+ description: 'Description for option to convert the card to become a regular text-based hyperlink.'
67
+ },
68
+ blockDescription: {
69
+ id: 'fabric.editor.blockDescription',
70
+ defaultMessage: 'Display more information about a link, including a summary and actions',
71
+ description: 'Description for option to display link in the card view.'
72
+ },
73
+ inlineDescription: {
74
+ id: 'fabric.editor.inlineDescription',
75
+ defaultMessage: 'Display link as inline text',
76
+ description: 'Description for option to display link in the inline view.'
77
+ },
78
+ embedDescription: {
79
+ id: 'fabric.editor.ecombedDescription',
80
+ defaultMessage: 'Display an interactive preview of a link',
81
+ description: 'Description for option to display link as an embedded object.'
82
+ }
83
+ });
@@ -6,6 +6,7 @@ export { unsupportedContentMessages } from './unsupportedContent';
6
6
  export { codeBlockButtonMessages } from './codeBlockButton';
7
7
  export { toolbarInsertBlockMessages } from './insert-block';
8
8
  export { toolbarMessages as mediaAndEmbedToolbarMessages } from './media-and-embed-toolbar';
9
+ export { messages as cardMessages } from './card';
9
10
  export default defineMessages({
10
11
  layoutFixedWidth: {
11
12
  id: 'fabric.editor.layoutFixedWidth',
@@ -1,6 +1,6 @@
1
1
  const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
2
2
  const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
3
- const packageVersion = "74.13.0";
3
+ const packageVersion = "74.14.0";
4
4
  const sanitiseSentryEvents = (data, _hint) => {
5
5
  // Remove URL as it has UGC
6
6
  // TODO: Sanitise the URL instead of just removing it
@@ -23,4 +23,6 @@ export { CodeBlockSharedCssClassName, codeBlockSharedStyles, codeBlockInListSafa
23
23
  export { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from './shared/layout';
24
24
  export { EXTENSION_PADDING, BODIED_EXT_PADDING } from './shared/extension';
25
25
  export { resizerStyles } from './shared/resizer';
26
- export { gridStyles, GRID_GUTTER } from './shared/grid';
26
+ export { gridStyles, GRID_GUTTER } from './shared/grid';
27
+ export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME } from './shared/smartCard';
28
+ export { embedCardStyles, embedSpacingStyles, editIconStyles } from './shared/embedCard';
@@ -0,0 +1,27 @@
1
+ import { css } from '@emotion/react';
2
+ export const embedCardStyles = css`
3
+ .ProseMirror {
4
+ .embedCardView-content-wrap[layout^='wrap-'] {
5
+ max-width: 100%;
6
+ }
7
+
8
+ .embedCardView-content-wrap[layout='wrap-left'] {
9
+ float: left;
10
+ }
11
+
12
+ .embedCardView-content-wrap[layout='wrap-right'] {
13
+ float: right;
14
+ }
15
+
16
+ .embedCardView-content-wrap[layout='wrap-right']
17
+ + .embedCardView-content-wrap[layout='wrap-left'] {
18
+ clear: both;
19
+ }
20
+ }
21
+ `;
22
+ export const embedSpacingStyles = css`
23
+ margin: 0 10px;
24
+ `;
25
+ export const editIconStyles = css`
26
+ width: 20px;
27
+ `;
@@ -0,0 +1,131 @@
1
+ import { css } from '@emotion/react';
2
+ import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
3
+ import { N0, N20, N40 } from '@atlaskit/theme/colors';
4
+ import { SmartCardSharedCssClassName } from './smart-card';
5
+ export const DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
6
+ export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
7
+ export const smartCardStyles = css`
8
+ .${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER} {
9
+ max-width: calc(100% - 20px);
10
+ vertical-align: top;
11
+ word-break: break-all;
12
+
13
+ .card {
14
+ padding-left: 2px;
15
+ padding-right: 2px;
16
+ padding-top: 0.5em;
17
+ padding-bottom: 0.5em;
18
+ margin-bottom: -0.5em;
19
+
20
+ .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a:focus {
21
+ ${getSelectionStyles([SelectionStyle.BoxShadow])}
22
+ }
23
+ }
24
+
25
+ &.${akEditorSelectedNodeClassName}
26
+ .${SmartCardSharedCssClassName.LOADER_WRAPPER}
27
+ > a {
28
+ ${getSelectionStyles([SelectionStyle.BoxShadow])}
29
+ }
30
+ .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
31
+ /* EDM-1717: box-shadow Safari fix start */
32
+ z-index: 1;
33
+ position: relative;
34
+ /* EDM-1717: box-shadow Safari fix end */
35
+ }
36
+
37
+ &.danger {
38
+ .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
39
+ box-shadow: 0 0 0 1px
40
+ ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
41
+ /* EDM-1717: box-shadow Safari fix start */
42
+ z-index: 2;
43
+ /* EDM-1717: box-shadow Safari fix end */
44
+ }
45
+ }
46
+ }
47
+
48
+ .${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER} {
49
+ .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
50
+ cursor: pointer;
51
+ &:hover {
52
+ background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N20})`};
53
+ }
54
+ }
55
+
56
+ &.${akEditorSelectedNodeClassName}
57
+ .${SmartCardSharedCssClassName.LOADER_WRAPPER}
58
+ > div {
59
+ ${getSelectionStyles([SelectionStyle.BoxShadow])}
60
+ }
61
+
62
+ &.danger {
63
+ .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
64
+ box-shadow: 0 0 0 1px
65
+ ${`var(--ds-border-danger, ${akEditorDeleteBorder})`} !important;
66
+ }
67
+ }
68
+ }
69
+
70
+ .${SmartCardSharedCssClassName.DATASOURCE_CONTAINER}.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER} {
71
+ max-width: 100%;
72
+ display: flex;
73
+ justify-content: center;
74
+
75
+ .${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
76
+ cursor: pointer;
77
+ background-color: ${`var(--ds-background-neutral-subtle, ${N0})`};
78
+ border-radius: ${`var(--ds-border-radius-100, ${akEditorRuleBorderRadius})`};
79
+ border: 1px solid ${`var(--ds-border, ${N40})`};
80
+ }
81
+
82
+ &.${akEditorSelectedNodeClassName} {
83
+ .${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
84
+ ${getSelectionStyles([SelectionStyle.BoxShadow])}
85
+ }
86
+ }
87
+
88
+ &.danger {
89
+ .${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
90
+ box-shadow: 0 0 0 1px
91
+ ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
92
+ }
93
+ }
94
+ }
95
+
96
+ .${SmartCardSharedCssClassName.EMBED_CARD_CONTAINER} {
97
+ .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
98
+ cursor: pointer;
99
+ &::after {
100
+ transition: box-shadow 0s;
101
+ }
102
+ }
103
+ &.${akEditorSelectedNodeClassName}
104
+ .${SmartCardSharedCssClassName.LOADER_WRAPPER}
105
+ > div {
106
+ ${getSelectionStyles([SelectionStyle.BoxShadow])}
107
+ }
108
+
109
+ &.${akEditorSelectedNodeClassName}
110
+ .${SmartCardSharedCssClassName.LOADER_WRAPPER}
111
+ > div::after {
112
+ ${getSelectionStyles([SelectionStyle.BoxShadow])}
113
+ }
114
+
115
+ &.danger {
116
+ .media-card-frame::after {
117
+ box-shadow: 0 0 0 1px
118
+ ${`var(--ds-border-danger, ${akEditorDeleteBorder})`} !important;
119
+ background: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`} !important;
120
+ }
121
+ .richMedia-resize-handle-right::after,
122
+ .richMedia-resize-handle-left::after {
123
+ background: ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
124
+ }
125
+ }
126
+ }
127
+
128
+ .${FLOATING_TOOLBAR_LINKPICKER_CLASSNAME} {
129
+ padding: 0;
130
+ }
131
+ `;
@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
8
8
  import { borderRadius } from '@atlaskit/theme/constants';
9
9
  import Layer from '../Layer';
10
10
  const packageName = "@atlaskit/editor-common";
11
- const packageVersion = "74.13.0";
11
+ const packageVersion = "74.14.0";
12
12
  const halfFocusRing = 1;
13
13
  const dropOffset = '0, 8';
14
14
  class DropList extends Component {
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "74.13.0",
3
+ "version": "74.14.0",
4
4
  "sideEffects": false
5
5
  }
@@ -0,0 +1,56 @@
1
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
2
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
3
+ var _excluded = ["disabled"];
4
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
5
+ /** @jsx jsx */
6
+ import React from 'react';
7
+ import { css, jsx } from '@emotion/react';
8
+ import { ButtonGroup } from '@atlaskit/button';
9
+ import { FloatingToolbarButton as Button } from '../ui';
10
+
11
+ /**
12
+ * Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed
13
+ */
14
+ var buttonStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n pointer-events: auto;\n"])));
15
+ var buttonStyleNoneEvent = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n pointer-events: none;\n"])));
16
+ var DisallowedWrapper = function DisallowedWrapper(_ref) {
17
+ var disabled = _ref.disabled,
18
+ props = _objectWithoutProperties(_ref, _excluded);
19
+ return jsx("div", props);
20
+ };
21
+
22
+ /**
23
+ * The button requires `pointer-events: none;` in order to fix the tooltip, hence
24
+ * leaving us without a disabled cursor, the following fixes this:
25
+ */
26
+ var defaultWrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n cursor: pointer;\n"])));
27
+ var disallowedWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n cursor: not-allowed;\n"])));
28
+ export var LinkToolbarButtonGroup = function LinkToolbarButtonGroup(_ref2) {
29
+ var options = _ref2.options;
30
+ return jsx(ButtonGroup, null, options.map(function (_ref3) {
31
+ var onClick = _ref3.onClick,
32
+ selected = _ref3.selected,
33
+ disabled = _ref3.disabled,
34
+ testId = _ref3.testId,
35
+ tooltipContent = _ref3.tooltipContent,
36
+ title = _ref3.title,
37
+ Icon = _ref3.icon;
38
+ return jsx(DisallowedWrapper, {
39
+ css: disabled ? disallowedWrapperStyle : defaultWrapperStyle,
40
+ key: testId,
41
+ disabled: disabled
42
+ }, jsx(Button, {
43
+ css: disabled ? buttonStyleNoneEvent : buttonStyle,
44
+ title: title,
45
+ icon: jsx(Icon, {
46
+ size: "medium",
47
+ label: title
48
+ }),
49
+ selected: selected,
50
+ onClick: onClick,
51
+ testId: testId,
52
+ disabled: disabled,
53
+ tooltipContent: tooltipContent
54
+ }));
55
+ }));
56
+ };
@@ -1,2 +1,5 @@
1
1
  export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata } from './utils';
2
- export { default as buildLayoutButtons } from './MediaAndEmbedsToolbar';
2
+ export { default as buildLayoutButtons } from './MediaAndEmbedsToolbar';
3
+ export { LinkToolbarButtonGroup } from './LinkToolbarButtonGroup';
4
+ export { getButtonGroupOption } from './link-toolbar-button-group-options';
5
+ export var DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
@@ -0,0 +1,45 @@
1
+ import { cardMessages as messages } from '../messages';
2
+ import { IconCard } from './ui/assets/card';
3
+ import { IconEmbed } from './ui/assets/embed';
4
+ import { IconInline } from './ui/assets/inline';
5
+ import { IconUrl } from './ui/assets/url';
6
+ var appearancePropsMap = {
7
+ url: {
8
+ title: messages.urlTitle,
9
+ icon: IconUrl
10
+ },
11
+ inline: {
12
+ title: messages.inlineTitle,
13
+ icon: IconInline
14
+ },
15
+ block: {
16
+ title: messages.blockTitle,
17
+ icon: IconCard
18
+ },
19
+ embed: {
20
+ title: messages.embedTitle,
21
+ icon: IconEmbed
22
+ }
23
+ };
24
+ export var getButtonGroupOption = function getButtonGroupOption(intl, dispatchCommand, _ref) {
25
+ var disabled = _ref.disabled,
26
+ _onClick = _ref.onClick,
27
+ selected = _ref.selected,
28
+ appearance = _ref.appearance,
29
+ testId = _ref.testId,
30
+ tooltip = _ref.tooltip;
31
+ var _appearancePropsMap = appearancePropsMap[appearance !== null && appearance !== void 0 ? appearance : 'url'],
32
+ title = _appearancePropsMap.title,
33
+ icon = _appearancePropsMap.icon;
34
+ return {
35
+ title: intl.formatMessage(title),
36
+ icon: icon,
37
+ onClick: function onClick() {
38
+ return dispatchCommand(_onClick);
39
+ },
40
+ disabled: Boolean(disabled),
41
+ tooltipContent: tooltip || null,
42
+ testId: testId,
43
+ selected: selected
44
+ };
45
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,22 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React from 'react';
3
+ import Icon from '@atlaskit/icon';
4
+ var IconCardGlyph = function IconCardGlyph(props) {
5
+ return /*#__PURE__*/React.createElement("svg", _extends({
6
+ width: "32",
7
+ height: "32",
8
+ viewBox: "0 0 32 32",
9
+ fill: "none",
10
+ xmlns: "http://www.w3.org/2000/svg"
11
+ }, props), /*#__PURE__*/React.createElement("path", {
12
+ fillRule: "evenodd",
13
+ clipRule: "evenodd",
14
+ d: "M8 9c-1.10457 0-2 .89543-2 2v10c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2V11c0-1.10457-.8954-2-2-2H8Zm0 3c0-.5523.44772-1 1-1h2c.5523 0 1 .4477 1 1v2c0 .5523-.4477 1-1 1H9c-.55228 0-1-.4477-1-1v-2Zm5 1c0-.2761.2239-.5.5-.5h10c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-10c-.2761 0-.5-.2239-.5-.5Zm-4 3c-.55228 0-1 .4477-1 1s.44772 1 1 1h14c.5523 0 1-.4477 1-1s-.4477-1-1-1H9Zm-1 4c0-.5523.44772-1 1-1h6c.5523 0 1 .4477 1 1s-.4477 1-1 1H9c-.55228 0-1-.4477-1-1Z",
15
+ fill: "currentColor"
16
+ }));
17
+ };
18
+ export var IconCard = function IconCard(props) {
19
+ return /*#__PURE__*/React.createElement(Icon, _extends({
20
+ glyph: IconCardGlyph
21
+ }, props));
22
+ };
@@ -0,0 +1,22 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React from 'react';
3
+ import Icon from '@atlaskit/icon';
4
+ var IconEmbedGlyph = function IconEmbedGlyph(props) {
5
+ return /*#__PURE__*/React.createElement("svg", _extends({
6
+ width: "32",
7
+ height: "32",
8
+ viewBox: "0 0 32 32",
9
+ fill: "none",
10
+ xmlns: "http://www.w3.org/2000/svg"
11
+ }, props), /*#__PURE__*/React.createElement("path", {
12
+ fillRule: "evenodd",
13
+ clipRule: "evenodd",
14
+ d: "M8 6c-1.10457 0-2 .89543-2 2v16c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2V8c0-1.10457-.8954-2-2-2H8Zm1 2c-.55228 0-1 .44772-1 1v2c0 .5523.44772 1 1 1h2c.5523 0 1-.4477 1-1V9c0-.55228-.4477-1-1-1H9Zm4.5 1.5c-.2761 0-.5.22386-.5.5 0 .2761.2239.5.5.5h10c.2761 0 .5-.2239.5-.5 0-.27614-.2239-.5-.5-.5h-10ZM9 14c-.55228 0-1 .4477-1 1v8c0 .5523.44772 1 1 1h14c.5523 0 1-.4477 1-1v-8c0-.5523-.4477-1-1-1H9Zm6 2.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Zm0 5.5-1-1-2 2h8v-1.8L18 19l-3 3Z",
15
+ fill: "currentColor"
16
+ }));
17
+ };
18
+ export var IconEmbed = function IconEmbed(props) {
19
+ return /*#__PURE__*/React.createElement(Icon, _extends({
20
+ glyph: IconEmbedGlyph
21
+ }, props));
22
+ };
@@ -0,0 +1,22 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React from 'react';
3
+ import Icon from '@atlaskit/icon';
4
+ var IconInlineGlyph = function IconInlineGlyph(props) {
5
+ return /*#__PURE__*/React.createElement("svg", _extends({
6
+ width: "32",
7
+ height: "32",
8
+ viewBox: "0 0 32 32",
9
+ fill: "none",
10
+ xmlns: "http://www.w3.org/2000/svg"
11
+ }, props), /*#__PURE__*/React.createElement("path", {
12
+ fillRule: "evenodd",
13
+ clipRule: "evenodd",
14
+ d: "M8 12c-1.10457 0-2 .8954-2 2v4c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2v-4c0-1.1046-.8954-2-2-2H8Zm0 3c0-.5523.44772-1 1-1h2c.5523 0 1 .4477 1 1v2c0 .5523-.4477 1-1 1H9c-.55228 0-1-.4477-1-1v-2Zm5 1c0-.2761.2239-.5.5-.5h10c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-10c-.2761 0-.5-.2239-.5-.5Z",
15
+ fill: "currentColor"
16
+ }));
17
+ };
18
+ export var IconInline = function IconInline(props) {
19
+ return /*#__PURE__*/React.createElement(Icon, _extends({
20
+ glyph: IconInlineGlyph
21
+ }, props));
22
+ };
@@ -0,0 +1,24 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React from 'react';
3
+ import Icon from '@atlaskit/icon';
4
+ var IconUrlGlyph = function IconUrlGlyph(props) {
5
+ return /*#__PURE__*/React.createElement("svg", _extends({
6
+ width: "32",
7
+ height: "32",
8
+ viewBox: "0 0 32 32",
9
+ fill: "none",
10
+ xmlns: "http://www.w3.org/2000/svg"
11
+ }, props), /*#__PURE__*/React.createElement("rect", {
12
+ x: "6",
13
+ y: "15",
14
+ width: "20",
15
+ height: "2",
16
+ rx: "1",
17
+ fill: "currentColor"
18
+ }));
19
+ };
20
+ export var IconUrl = function IconUrl(props) {
21
+ return /*#__PURE__*/React.createElement(Icon, _extends({
22
+ glyph: IconUrlGlyph
23
+ }, props));
24
+ };