@atlaskit/editor-common 74.5.1 → 74.6.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 (155) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/analytics/index.js +26 -1
  3. package/dist/cjs/analytics/linking-utils.js +84 -0
  4. package/dist/cjs/card/MediaAndEmbedsToolbar/index.js +156 -0
  5. package/dist/cjs/card/index.js +9 -1
  6. package/dist/cjs/messages/index.js +14 -0
  7. package/dist/cjs/messages/link-toolbar.js +60 -0
  8. package/dist/cjs/messages/media-and-embed-toolbar.js +20 -0
  9. package/dist/cjs/monitoring/error.js +1 -1
  10. package/dist/cjs/react-node-view/getInlineNodeViewProducer.js +225 -0
  11. package/dist/cjs/react-node-view/index.js +13 -0
  12. package/dist/cjs/{ui/Resizer/index.js → resizer/Resizer.js} +1 -1
  13. package/dist/cjs/{resizer.js → resizer/index.js} +1 -1
  14. package/dist/cjs/resizer/utils.js +21 -0
  15. package/dist/cjs/types/hyperlink.js +5 -0
  16. package/dist/cjs/types/resizable-media-single.js +5 -0
  17. package/dist/cjs/ui/DropList/index.js +1 -1
  18. package/dist/cjs/ui/LinkSearch/const.js +14 -0
  19. package/dist/cjs/ui/ResizerLegacy/index.js +210 -0
  20. package/dist/cjs/ui/ResizerLegacy/styled.js +15 -0
  21. package/dist/cjs/ui/ResizerLegacy/types.js +5 -0
  22. package/dist/cjs/ui/ResizerLegacy/utils.js +21 -0
  23. package/dist/cjs/ui/index.js +58 -0
  24. package/dist/cjs/utils/document.js +258 -0
  25. package/dist/cjs/utils/editor-core-utils.js +7 -2
  26. package/dist/cjs/utils/filter/privacy-filter.js +55 -0
  27. package/dist/cjs/utils/index.js +75 -0
  28. package/dist/cjs/utils/rich-media-utils.js +131 -0
  29. package/dist/cjs/version.json +1 -1
  30. package/dist/es2019/analytics/index.js +2 -1
  31. package/dist/es2019/analytics/linking-utils.js +74 -0
  32. package/dist/es2019/card/MediaAndEmbedsToolbar/index.js +161 -0
  33. package/dist/es2019/card/index.js +2 -1
  34. package/dist/es2019/messages/index.js +2 -0
  35. package/dist/es2019/messages/link-toolbar.js +53 -0
  36. package/dist/es2019/messages/media-and-embed-toolbar.js +13 -0
  37. package/dist/es2019/monitoring/error.js +1 -1
  38. package/dist/es2019/react-node-view/getInlineNodeViewProducer.js +219 -0
  39. package/dist/es2019/react-node-view/index.js +1 -0
  40. package/dist/es2019/{ui/Resizer/index.js → resizer/Resizer.js} +1 -1
  41. package/dist/es2019/resizer/index.js +1 -0
  42. package/dist/es2019/resizer/utils.js +12 -0
  43. package/dist/es2019/types/resizable-media-single.js +1 -0
  44. package/dist/es2019/ui/DropList/index.js +1 -1
  45. package/dist/es2019/ui/LinkSearch/const.js +4 -0
  46. package/dist/es2019/ui/ResizerLegacy/index.js +191 -0
  47. package/dist/es2019/ui/ResizerLegacy/styled.js +15 -0
  48. package/dist/es2019/ui/ResizerLegacy/types.js +1 -0
  49. package/dist/es2019/ui/ResizerLegacy/utils.js +12 -0
  50. package/dist/es2019/ui/index.js +5 -1
  51. package/dist/es2019/utils/document.js +253 -0
  52. package/dist/es2019/utils/editor-core-utils.js +4 -0
  53. package/dist/es2019/utils/filter/privacy-filter.js +47 -0
  54. package/dist/es2019/utils/index.js +5 -2
  55. package/dist/es2019/utils/rich-media-utils.js +109 -0
  56. package/dist/es2019/version.json +1 -1
  57. package/dist/esm/analytics/index.js +2 -1
  58. package/dist/esm/analytics/linking-utils.js +74 -0
  59. package/dist/esm/card/MediaAndEmbedsToolbar/index.js +146 -0
  60. package/dist/esm/card/index.js +2 -1
  61. package/dist/esm/messages/index.js +2 -0
  62. package/dist/esm/messages/link-toolbar.js +53 -0
  63. package/dist/esm/messages/media-and-embed-toolbar.js +13 -0
  64. package/dist/esm/monitoring/error.js +1 -1
  65. package/dist/esm/react-node-view/getInlineNodeViewProducer.js +215 -0
  66. package/dist/esm/react-node-view/index.js +1 -0
  67. package/dist/esm/{ui/Resizer/index.js → resizer/Resizer.js} +1 -1
  68. package/dist/esm/resizer/index.js +1 -0
  69. package/dist/esm/resizer/types.js +1 -0
  70. package/dist/esm/resizer/utils.js +12 -0
  71. package/dist/esm/types/hyperlink.js +1 -0
  72. package/dist/esm/types/resizable-media-single.js +1 -0
  73. package/dist/esm/ui/DropList/index.js +1 -1
  74. package/dist/esm/ui/LinkSearch/const.js +4 -0
  75. package/dist/esm/ui/ResizerLegacy/index.js +203 -0
  76. package/dist/esm/ui/ResizerLegacy/styled.js +7 -0
  77. package/dist/esm/ui/ResizerLegacy/types.js +1 -0
  78. package/dist/esm/ui/ResizerLegacy/utils.js +12 -0
  79. package/dist/esm/ui/index.js +5 -1
  80. package/dist/esm/utils/document.js +246 -0
  81. package/dist/esm/utils/editor-core-utils.js +4 -0
  82. package/dist/esm/utils/filter/privacy-filter.js +48 -0
  83. package/dist/esm/utils/index.js +5 -2
  84. package/dist/esm/utils/rich-media-utils.js +118 -0
  85. package/dist/esm/version.json +1 -1
  86. package/dist/types/analytics/index.d.ts +2 -0
  87. package/dist/types/analytics/linking-utils.d.ts +14 -0
  88. package/dist/types/card/MediaAndEmbedsToolbar/index.d.ts +11 -0
  89. package/dist/types/card/index.d.ts +1 -0
  90. package/dist/types/messages/index.d.ts +2 -0
  91. package/dist/types/messages/link-toolbar.d.ts +52 -0
  92. package/dist/types/messages/media-and-embed-toolbar.d.ts +12 -0
  93. package/dist/types/react-node-view/getInlineNodeViewProducer.d.ts +25 -0
  94. package/dist/types/react-node-view/index.d.ts +3 -0
  95. package/dist/types/resizer/index.d.ts +2 -0
  96. package/dist/types/resizer/utils.d.ts +6 -0
  97. package/dist/types/types/hyperlink.d.ts +35 -0
  98. package/dist/types/types/index.d.ts +2 -0
  99. package/dist/types/types/resizable-media-single.d.ts +15 -0
  100. package/dist/types/ui/DropList/index.d.ts +1 -1
  101. package/dist/types/ui/LinkSearch/const.d.ts +4 -0
  102. package/dist/types/ui/ResizerLegacy/index.d.ts +40 -0
  103. package/dist/types/ui/ResizerLegacy/styled.d.ts +2 -0
  104. package/dist/types/ui/ResizerLegacy/types.d.ts +26 -0
  105. package/dist/types/ui/ResizerLegacy/utils.d.ts +6 -0
  106. package/dist/types/ui/index.d.ts +6 -0
  107. package/dist/types/utils/document.d.ts +19 -0
  108. package/dist/types/utils/editor-core-utils.d.ts +1 -0
  109. package/dist/types/utils/filter/privacy-filter.d.ts +9 -0
  110. package/dist/types/utils/index.d.ts +4 -1
  111. package/dist/types/utils/rich-media-utils.d.ts +8 -0
  112. package/dist/types-ts4.5/analytics/index.d.ts +2 -0
  113. package/dist/types-ts4.5/analytics/linking-utils.d.ts +14 -0
  114. package/dist/types-ts4.5/card/MediaAndEmbedsToolbar/index.d.ts +11 -0
  115. package/dist/types-ts4.5/card/index.d.ts +1 -0
  116. package/dist/types-ts4.5/messages/index.d.ts +2 -0
  117. package/dist/types-ts4.5/messages/link-toolbar.d.ts +52 -0
  118. package/dist/types-ts4.5/messages/media-and-embed-toolbar.d.ts +12 -0
  119. package/dist/types-ts4.5/react-node-view/getInlineNodeViewProducer.d.ts +25 -0
  120. package/dist/types-ts4.5/react-node-view/index.d.ts +3 -0
  121. package/dist/types-ts4.5/resizer/index.d.ts +2 -0
  122. package/dist/types-ts4.5/resizer/utils.d.ts +6 -0
  123. package/dist/types-ts4.5/types/hyperlink.d.ts +35 -0
  124. package/dist/types-ts4.5/types/index.d.ts +2 -0
  125. package/dist/types-ts4.5/types/resizable-media-single.d.ts +15 -0
  126. package/dist/types-ts4.5/ui/DropList/index.d.ts +1 -1
  127. package/dist/types-ts4.5/ui/LinkSearch/const.d.ts +4 -0
  128. package/dist/types-ts4.5/ui/ResizerLegacy/index.d.ts +40 -0
  129. package/dist/types-ts4.5/ui/ResizerLegacy/styled.d.ts +2 -0
  130. package/dist/types-ts4.5/ui/ResizerLegacy/types.d.ts +26 -0
  131. package/dist/types-ts4.5/ui/ResizerLegacy/utils.d.ts +6 -0
  132. package/dist/types-ts4.5/ui/index.d.ts +6 -0
  133. package/dist/types-ts4.5/utils/document.d.ts +19 -0
  134. package/dist/types-ts4.5/utils/editor-core-utils.d.ts +1 -0
  135. package/dist/types-ts4.5/utils/filter/privacy-filter.d.ts +9 -0
  136. package/dist/types-ts4.5/utils/index.d.ts +4 -1
  137. package/dist/types-ts4.5/utils/rich-media-utils.d.ts +8 -0
  138. package/package.json +8 -7
  139. package/resizer/package.json +5 -5
  140. package/dist/cjs/ui/Resizer/utils.js +0 -8
  141. package/dist/es2019/resizer.js +0 -1
  142. package/dist/es2019/ui/Resizer/utils.js +0 -1
  143. package/dist/esm/resizer.js +0 -1
  144. package/dist/esm/ui/Resizer/utils.js +0 -1
  145. package/dist/types/resizer.d.ts +0 -2
  146. package/dist/types/ui/Resizer/utils.d.ts +0 -1
  147. package/dist/types-ts4.5/resizer.d.ts +0 -2
  148. package/dist/types-ts4.5/ui/Resizer/utils.d.ts +0 -1
  149. /package/dist/cjs/{ui/Resizer → resizer}/types.js +0 -0
  150. /package/dist/es2019/{ui/Resizer → resizer}/types.js +0 -0
  151. /package/dist/{esm/ui/Resizer/types.js → es2019/types/hyperlink.js} +0 -0
  152. /package/dist/types/{ui/Resizer/index.d.ts → resizer/Resizer.d.ts} +0 -0
  153. /package/dist/types/{ui/Resizer → resizer}/types.d.ts +0 -0
  154. /package/dist/types-ts4.5/{ui/Resizer/index.d.ts → resizer/Resizer.d.ts} +0 -0
  155. /package/dist/types-ts4.5/{ui/Resizer → resizer}/types.d.ts +0 -0
@@ -0,0 +1,74 @@
1
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from './types';
2
+ export const buildEditLinkPayload = type => {
3
+ return {
4
+ action: ACTION.CLICKED,
5
+ actionSubject: type === ACTION_SUBJECT_ID.HYPERLINK ? ACTION_SUBJECT.HYPERLINK : ACTION_SUBJECT.SMART_LINK,
6
+ actionSubjectId: ACTION_SUBJECT_ID.EDIT_LINK,
7
+ attributes: type !== ACTION_SUBJECT_ID.HYPERLINK ? {
8
+ display: type
9
+ } : {},
10
+ eventType: EVENT_TYPE.UI
11
+ };
12
+ };
13
+ const mapLinkTypeToCardAppearance = type => {
14
+ switch (type) {
15
+ case ACTION_SUBJECT_ID.CARD_INLINE:
16
+ {
17
+ return 'inline';
18
+ }
19
+ case ACTION_SUBJECT_ID.CARD_BLOCK:
20
+ {
21
+ return 'block';
22
+ }
23
+ case ACTION_SUBJECT_ID.EMBEDS:
24
+ {
25
+ return 'embed';
26
+ }
27
+ default:
28
+ {
29
+ return 'url';
30
+ }
31
+ }
32
+ };
33
+ export const buildVisitedLinkPayload = type => {
34
+ return type === ACTION_SUBJECT_ID.HYPERLINK ? {
35
+ action: ACTION.VISITED,
36
+ actionSubject: ACTION_SUBJECT.HYPERLINK,
37
+ actionSubjectId: undefined,
38
+ attributes: {
39
+ inputMethod: INPUT_METHOD.TOOLBAR
40
+ },
41
+ eventType: EVENT_TYPE.TRACK
42
+ } : {
43
+ action: ACTION.VISITED,
44
+ actionSubject: ACTION_SUBJECT.SMART_LINK,
45
+ actionSubjectId: type,
46
+ attributes: {
47
+ inputMethod: INPUT_METHOD.TOOLBAR
48
+ },
49
+ eventType: EVENT_TYPE.TRACK
50
+ };
51
+ };
52
+ export const buildOpenedSettingsPayload = type => {
53
+ return {
54
+ action: ACTION.CLICKED,
55
+ actionSubject: ACTION_SUBJECT.BUTTON,
56
+ actionSubjectId: ACTION_SUBJECT_ID.GOTO_SMART_LINK_SETTINGS,
57
+ attributes: {
58
+ inputMethod: INPUT_METHOD.TOOLBAR,
59
+ display: mapLinkTypeToCardAppearance(type)
60
+ },
61
+ eventType: EVENT_TYPE.UI
62
+ };
63
+ };
64
+ export const unlinkPayload = type => {
65
+ return {
66
+ action: ACTION.UNLINK,
67
+ actionSubject: type === ACTION_SUBJECT_ID.HYPERLINK ? ACTION_SUBJECT.HYPERLINK : ACTION_SUBJECT.SMART_LINK,
68
+ actionSubjectId: type === ACTION_SUBJECT_ID.HYPERLINK ? undefined : type,
69
+ attributes: {
70
+ inputMethod: INPUT_METHOD.TOOLBAR
71
+ },
72
+ eventType: EVENT_TYPE.TRACK
73
+ };
74
+ };
@@ -0,0 +1,161 @@
1
+ import { NodeSelection } from 'prosemirror-state';
2
+ import { hasParentNodeOfType } from 'prosemirror-utils';
3
+ import { DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
4
+ import EditorAlignImageCenter from '@atlaskit/icon/glyph/editor/align-image-center';
5
+ import EditorAlignImageLeft from '@atlaskit/icon/glyph/editor/align-image-left';
6
+ import EditorAlignImageRight from '@atlaskit/icon/glyph/editor/align-image-right';
7
+ import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
8
+ import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
9
+ import WrapLeftIcon from '@atlaskit/icon/glyph/editor/media-wrap-left';
10
+ import WrapRightIcon from '@atlaskit/icon/glyph/editor/media-wrap-right';
11
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
12
+ import { insideTable } from '../../core-utils';
13
+ import commonMessages, { mediaAndEmbedToolbarMessages as toolbarMessages } from '../../messages';
14
+ import { alignAttributes, isInLayoutColumn } from '../../utils';
15
+
16
+ // Workaround as we don't want to import this package into `editor-common`
17
+ // We'll get type errors if this gets out of sync with `editor-plugin-width`.
18
+ const alignmentIcons = [{
19
+ id: 'editor.media.alignLeft',
20
+ value: 'align-start',
21
+ icon: EditorAlignImageLeft
22
+ }, {
23
+ id: 'editor.media.alignCenter',
24
+ value: 'center',
25
+ icon: EditorAlignImageCenter
26
+ }, {
27
+ id: 'editor.media.alignRight',
28
+ value: 'align-end',
29
+ icon: EditorAlignImageRight
30
+ }];
31
+ const wrappingIcons = [{
32
+ id: 'editor.media.wrapLeft',
33
+ value: 'wrap-left',
34
+ icon: WrapLeftIcon
35
+ }, {
36
+ id: 'editor.media.wrapRight',
37
+ value: 'wrap-right',
38
+ icon: WrapRightIcon
39
+ }];
40
+ const breakoutIcons = [{
41
+ value: 'wide',
42
+ icon: WideIcon
43
+ }, {
44
+ value: 'full-width',
45
+ icon: FullWidthIcon
46
+ }];
47
+ const layoutToMessages = {
48
+ 'wrap-left': toolbarMessages.wrapLeft,
49
+ center: commonMessages.alignImageCenter,
50
+ 'wrap-right': toolbarMessages.wrapRight,
51
+ wide: commonMessages.layoutWide,
52
+ 'full-width': commonMessages.layoutFullWidth,
53
+ 'align-end': commonMessages.alignImageRight,
54
+ 'align-start': commonMessages.alignImageLeft
55
+ };
56
+ const getNodeWidth = (node, schema) => {
57
+ const {
58
+ embedCard
59
+ } = schema.nodes;
60
+ if (node.type === embedCard) {
61
+ return node.attrs.originalWidth || DEFAULT_EMBED_CARD_WIDTH;
62
+ }
63
+ return node.firstChild && node.firstChild.attrs.width || node.attrs.width;
64
+ };
65
+ const makeAlign = (layout, nodeType, widthPluginDependencyApi, analyticsApi) => {
66
+ return (state, dispatch) => {
67
+ const {
68
+ node
69
+ } = state.selection;
70
+ const {
71
+ layout: previousLayoutType
72
+ } = node.attrs;
73
+ const {
74
+ mediaSingle
75
+ } = state.schema.nodes;
76
+ if (!dispatch) {
77
+ return false;
78
+ }
79
+ const widthPluginState = widthPluginDependencyApi === null || widthPluginDependencyApi === void 0 ? void 0 : widthPluginDependencyApi.sharedState.currentState();
80
+ if (!node || node.type !== nodeType || !widthPluginState) {
81
+ return false;
82
+ }
83
+ const nodeWidth = getNodeWidth(node, state.schema);
84
+ const newAttrs = alignAttributes(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
85
+ const tr = state.tr.setNodeMarkup(state.selection.from, undefined, newAttrs);
86
+ tr.setMeta('scrollIntoView', false);
87
+ // when image captions are enabled, the wrong node gets selected after
88
+ // setNodeMarkup is called
89
+ tr.setSelection(NodeSelection.create(tr.doc, state.selection.from));
90
+ const {
91
+ doc: {
92
+ type: {
93
+ schema: {
94
+ nodes: {
95
+ paragraph
96
+ }
97
+ }
98
+ }
99
+ }
100
+ } = tr;
101
+
102
+ // see https://product-fabric.atlassian.net/browse/ED-15518 insert a new paragraph when an embedded card is wrapped left or right
103
+ if (layout.startsWith('wrap') && paragraph && !tr.doc.nodeAt(state.selection.to) && (insideTable(state) || isInLayoutColumn(state))) {
104
+ tr.insert(state.selection.to, paragraph.createAndFill());
105
+ }
106
+ analyticsApi === null || analyticsApi === void 0 ? void 0 : analyticsApi.attachAnalyticsEvent({
107
+ eventType: EVENT_TYPE.TRACK,
108
+ action: ACTION.SELECTED,
109
+ actionSubject: ACTION_SUBJECT[node.type === mediaSingle ? 'MEDIA_SINGLE' : 'EMBEDS'],
110
+ actionSubjectId: ACTION_SUBJECT_ID.RICH_MEDIA_LAYOUT,
111
+ attributes: {
112
+ previousLayoutType,
113
+ currentLayoutType: layout
114
+ }
115
+ })(tr);
116
+ dispatch(tr);
117
+ return true;
118
+ };
119
+ };
120
+ const mapIconsToToolbarItem = (icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) => icons.map(toolbarItem => {
121
+ const {
122
+ id,
123
+ value
124
+ } = toolbarItem;
125
+ return {
126
+ id: id,
127
+ type: 'button',
128
+ icon: toolbarItem.icon,
129
+ title: intl.formatMessage(layoutToMessages[value]),
130
+ selected: layout === value,
131
+ onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi)
132
+ };
133
+ });
134
+ const shouldHideLayoutToolbar = (selection, {
135
+ nodes
136
+ }, allowResizingInTables) => {
137
+ return hasParentNodeOfType([nodes.bodiedExtension, nodes.listItem, nodes.expand, nodes.nestedExpand, ...(allowResizingInTables ? [] : [nodes.table])].filter(Boolean))(selection);
138
+ };
139
+ const buildLayoutButtons = (state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables, allowWrapping = true, allowAlignment = true) => {
140
+ const {
141
+ selection
142
+ } = state;
143
+ if (!(selection instanceof NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
144
+ return [];
145
+ }
146
+ const {
147
+ layout
148
+ } = selection.node.attrs;
149
+ const alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
150
+ const wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
151
+ const breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
152
+ const items = [...alignmentToolbarItems, ...getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping), ...wrappingToolbarItems, ...getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing), ...breakOutToolbarItems];
153
+ return items;
154
+ };
155
+ const getSeparatorBetweenAlignmentAndWrapping = (allowAlignment, allowWrapping) => allowAlignment && allowWrapping ? [{
156
+ type: 'separator'
157
+ }] : [];
158
+ const getSeparatorBeforeBreakoutItems = (allowAlignment, allowWrapping, allowResizing) => !allowResizing && (allowAlignment || allowWrapping) ? [{
159
+ type: 'separator'
160
+ }] : [];
161
+ export default buildLayoutButtons;
@@ -1 +1,2 @@
1
- export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata } from './utils';
1
+ export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata } from './utils';
2
+ export { default as buildLayoutButtons } from './MediaAndEmbedsToolbar';
@@ -1,9 +1,11 @@
1
1
  import { defineMessages } from 'react-intl-next';
2
2
  export { codeBidiWarningMessages } from './codeBidiWarning';
3
3
  export { linkMessages } from './link';
4
+ export { linkToolbarMessages } from './link-toolbar';
4
5
  export { unsupportedContentMessages } from './unsupportedContent';
5
6
  export { codeBlockButtonMessages } from './codeBlockButton';
6
7
  export { toolbarInsertBlockMessages } from './insert-block';
8
+ export { toolbarMessages as mediaAndEmbedToolbarMessages } from './media-and-embed-toolbar';
7
9
  export default defineMessages({
8
10
  layoutFixedWidth: {
9
11
  id: 'fabric.editor.layoutFixedWidth',
@@ -0,0 +1,53 @@
1
+ import { defineMessages } from 'react-intl-next';
2
+ export const linkToolbarMessages = defineMessages({
3
+ addLink: {
4
+ id: 'fabric.editor.mediaAddLink',
5
+ defaultMessage: 'Add link',
6
+ description: 'Add link'
7
+ },
8
+ unableToOpenLink: {
9
+ id: 'fabric.editor.unableToOpenLink',
10
+ defaultMessage: 'Unable to open this link',
11
+ description: 'Unable to open this link'
12
+ },
13
+ unlink: {
14
+ id: 'fabric.editor.unlink',
15
+ defaultMessage: 'Unlink',
16
+ description: 'Removes the hyperlink but keeps your text.'
17
+ },
18
+ editLink: {
19
+ id: 'fabric.editor.editLink',
20
+ defaultMessage: 'Edit link',
21
+ description: 'Edit the link, update display text'
22
+ },
23
+ placeholder: {
24
+ id: 'fabric.editor.hyperlinkToolbarPlaceholder',
25
+ defaultMessage: 'Paste or search for link',
26
+ description: 'Paste or search for link'
27
+ },
28
+ linkPlaceholder: {
29
+ id: 'fabric.editor.linkPlaceholder',
30
+ defaultMessage: 'Paste link',
31
+ description: 'Create a new link by pasting a URL.'
32
+ },
33
+ linkAddress: {
34
+ id: 'fabric.editor.linkAddress',
35
+ defaultMessage: 'Link address',
36
+ description: 'Insert the address of the link'
37
+ },
38
+ invalidLink: {
39
+ id: 'fabric.editor.invalidLink',
40
+ defaultMessage: 'Please enter a valid link.',
41
+ description: 'Please enter a valid link.'
42
+ },
43
+ emptyLink: {
44
+ id: 'fabric.editor.emptyLink',
45
+ defaultMessage: 'Please enter a link.',
46
+ description: 'Please enter a link.'
47
+ },
48
+ settingsLink: {
49
+ id: 'fabric.editor.settingsLinks',
50
+ defaultMessage: 'Go to Link Preferences',
51
+ description: 'Go to Link Preferences'
52
+ }
53
+ });
@@ -0,0 +1,13 @@
1
+ import { defineMessages } from 'react-intl-next';
2
+ export const toolbarMessages = defineMessages({
3
+ wrapLeft: {
4
+ id: 'fabric.editor.wrapLeft',
5
+ defaultMessage: 'Wrap left',
6
+ description: 'Aligns your image to the left and wraps text around it.'
7
+ },
8
+ wrapRight: {
9
+ id: 'fabric.editor.wrapRight',
10
+ defaultMessage: 'Wrap right',
11
+ description: 'Aligns your image to the right and wraps text around it.'
12
+ }
13
+ });
@@ -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.5.1";
3
+ const packageVersion = "74.6.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
@@ -0,0 +1,219 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ /** @jsx jsx */
3
+ import React from 'react';
4
+ import { jsx } from '@emotion/react';
5
+ import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
6
+ import { ErrorBoundary } from '../ui/ErrorBoundary';
7
+ import { analyticsEventKey, getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered, ZERO_WIDTH_SPACE } from '../utils';
8
+ export const inlineNodeViewClassname = 'inlineNodeView';
9
+ function createNodeView({
10
+ nodeViewParams,
11
+ pmPluginFactoryParams,
12
+ Component,
13
+ extraComponentProps
14
+ }) {
15
+ // We set a variable for the current node which is
16
+ // used for comparisions when doing updates, before being
17
+ // overwritten to the updated node.
18
+ let currentNode = nodeViewParams.node;
19
+
20
+ // First we setup the dom element which will be rendered and "tracked" by prosemirror
21
+ // and also used as a "editor portal" (not react portal) target by the editor
22
+ // portal provider api, for rendering the Component passed.
23
+
24
+ let domRef = document.createElement('span');
25
+ domRef.contentEditable = 'false';
26
+ setDomAttrs(nodeViewParams.node, domRef);
27
+
28
+ // @see ED-3790
29
+ // something gets messed up during mutation processing inside of a
30
+ // nodeView if DOM structure has nested plain "div"s, it doesn't see the
31
+ // difference between them and it kills the nodeView
32
+ domRef.classList.add(`${nodeViewParams.node.type.name}View-content-wrap`, `${inlineNodeViewClassname}`);
33
+
34
+ // This util is shared for tracking rendering, and the ErrorBoundary that
35
+ // is setup to wrap the Component when rendering
36
+ // NOTE: This is not a prosemirror dispatch
37
+ function dispatchAnalyticsEvent(payload) {
38
+ pmPluginFactoryParams.eventDispatcher.emit(analyticsEventKey, {
39
+ payload
40
+ });
41
+ }
42
+
43
+ // This is called to render the Component into domRef which is inside the
44
+ // prosemirror View.
45
+ // Internally it uses the unstable_renderSubtreeIntoContainer api to render,
46
+ // to the passed dom element (domRef) which means it is automatically
47
+ // "cleaned up" when you do a "re render".
48
+ function renderComponent() {
49
+ pmPluginFactoryParams.portalProviderAPI.render(getPortalChildren({
50
+ dispatchAnalyticsEvent,
51
+ currentNode,
52
+ nodeViewParams,
53
+ Component,
54
+ extraComponentProps
55
+ }), domRef, false,
56
+ // node views should be rendered with intl context
57
+ true);
58
+ }
59
+ const {
60
+ samplingRate,
61
+ slowThreshold,
62
+ trackingEnabled
63
+ } = getPerformanceOptions(nodeViewParams.view);
64
+ trackingEnabled && startMeasureReactNodeViewRendered({
65
+ nodeTypeName: currentNode.type.name
66
+ });
67
+
68
+ // We render the component while creating the node view
69
+ renderComponent();
70
+ trackingEnabled && stopMeasureReactNodeViewRendered({
71
+ nodeTypeName: currentNode.type.name,
72
+ dispatchAnalyticsEvent,
73
+ editorState: nodeViewParams.view.state,
74
+ samplingRate,
75
+ slowThreshold
76
+ });
77
+
78
+ // https://prosemirror.net/docs/ref/#view.NodeView
79
+ const nodeView = {
80
+ get dom() {
81
+ return domRef;
82
+ },
83
+ update(nextNode, _decorations) {
84
+ // Let ProseMirror handle the update if node types are different.
85
+ // This prevents an issue where it was not possible to select the
86
+ // inline node view then replace it by entering text - the node
87
+ // view contents would be deleted but the node view itself would
88
+ // stay in the view and become uneditable.
89
+ if (currentNode.type !== nextNode.type) {
90
+ return false;
91
+ }
92
+ // On updates, we only set the new attributes if the type, attributes, and marks
93
+ // have changed on the node.
94
+
95
+ // NOTE: this could mean attrs changes aren't reflected in the dom,
96
+ // when an attribute key which was previously present is no longer
97
+ // present.
98
+ // ie.
99
+ // -> Original attributes { text: "hello world", color: "red" }
100
+ // -> Updated attributes { color: "blue" }
101
+ // in this case, the dom text attribute will not be cleared.
102
+ //
103
+ // This may not be an issue with any of our current node schemas.
104
+ if (!currentNode.sameMarkup(nextNode)) {
105
+ setDomAttrs(nextNode, domRef);
106
+ }
107
+ currentNode = nextNode;
108
+ renderComponent();
109
+ return true;
110
+ },
111
+ destroy() {
112
+ // When prosemirror destroys the node view, we need to clean up
113
+ // what we have previously rendered using the editor portal
114
+ // provider api.
115
+ pmPluginFactoryParams.portalProviderAPI.remove(domRef);
116
+ // @ts-expect-error Expect an error as domRef is expected to be
117
+ // of HTMLSpanElement type however once the node view has
118
+ // been destroyed no other consumers should still be using it.
119
+ domRef = undefined;
120
+ }
121
+ };
122
+ return nodeView;
123
+ }
124
+
125
+ /**
126
+ * Copies the attributes from a ProseMirror Node to a DOM node.
127
+ * @param node The Prosemirror Node from which to source the attributes
128
+ */
129
+ function setDomAttrs(node, element) {
130
+ Object.keys(node.attrs || {}).forEach(attr => {
131
+ element.setAttribute(attr, node.attrs[attr]);
132
+ });
133
+ }
134
+ function getPortalChildren({
135
+ dispatchAnalyticsEvent,
136
+ currentNode,
137
+ nodeViewParams,
138
+ Component,
139
+ extraComponentProps
140
+ }) {
141
+ return function portalChildren() {
142
+ var _currentNode$type$nam, _currentNode$type;
143
+ // All inline nodes use `display: inline` to allow for multi-line
144
+ // wrapping. This does produce an issue in Chrome where it is not
145
+ // possible to click select the position after the node,
146
+ // see: https://product-fabric.atlassian.net/browse/ED-12003
147
+ // however this is only a problem for node views that use
148
+ // `display: inline-block` somewhere within the Component.
149
+ // Looking at the below structure, spans with className
150
+ // `inlineNodeViewAddZeroWidthSpace` have pseudo elements that
151
+ // add a zero width space which fixes the problem.
152
+ // Without the additional zero width space before the Component,
153
+ // it is not possible to use the keyboard to range select in Safari.
154
+ //
155
+ // Zero width spaces on either side of the Component also prevent
156
+ // the cursor from appearing inside the node view on all browsers.
157
+ //
158
+ // Note:
159
+ // In future it is worth considering prohibiting the use of `display: inline-block`
160
+ // within inline node view Components however would require a sizable
161
+ // refactor. A test suite to catch any instances of this is ideal however
162
+ // the refactor required is currently out of scope for https://product-fabric.atlassian.net/browse/ED-14176
163
+
164
+ return jsx(ErrorBoundary, {
165
+ component: ACTION_SUBJECT.REACT_NODE_VIEW,
166
+ componentId: (_currentNode$type$nam = currentNode === null || currentNode === void 0 ? void 0 : (_currentNode$type = currentNode.type) === null || _currentNode$type === void 0 ? void 0 : _currentNode$type.name) !== null && _currentNode$type$nam !== void 0 ? _currentNode$type$nam : ACTION_SUBJECT_ID.UNKNOWN_NODE,
167
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent
168
+ }, jsx("span", {
169
+ "aria-hidden": "true",
170
+ className: `zeroWidthSpaceContainer`
171
+ }, jsx("span", {
172
+ className: `${inlineNodeViewClassname}AddZeroWidthSpace`
173
+ }), ZERO_WIDTH_SPACE), jsx(Component, _extends({
174
+ view: nodeViewParams.view,
175
+ getPos: nodeViewParams.getPos,
176
+ node: currentNode
177
+ }, extraComponentProps)), jsx("span", {
178
+ "aria-hidden": "true",
179
+ className: `${inlineNodeViewClassname}AddZeroWidthSpace`
180
+ }));
181
+ };
182
+ }
183
+
184
+ // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews
185
+ // The prosemirror EditorProps has a nodeViews key which has the rough shape:
186
+ // type nodeViews: {
187
+ // [nodeViewName: string]: (node, editorView, getPos, decorations, innerDecorations) => NodeView
188
+ // }
189
+ // So the value of the keys on the nodeViews object, are a function which should return a NodeView.
190
+ // The following type NodeViewProducer, refers to these functions which return a NodeView.
191
+ //
192
+ // So the above type could also be described as
193
+ // type NodeViewProducer = (node, editorView, getPos, decorations, innerDecorations) => NodeView
194
+ // nodeViews: {
195
+ // [nodeViewName: string]: NodeViewProducer
196
+ // }
197
+ // This return of this function is intended to be the value of a key
198
+ // in a ProseMirror nodeViews object.
199
+ export function getInlineNodeViewProducer({
200
+ pmPluginFactoryParams,
201
+ Component,
202
+ extraComponentProps
203
+ }) {
204
+ function nodeViewProducer(...nodeViewProducerParameters) {
205
+ const nodeView = createNodeView({
206
+ nodeViewParams: {
207
+ node: nodeViewProducerParameters[0],
208
+ view: nodeViewProducerParameters[1],
209
+ getPos: nodeViewProducerParameters[2],
210
+ decorations: nodeViewProducerParameters[3]
211
+ },
212
+ pmPluginFactoryParams,
213
+ Component,
214
+ extraComponentProps
215
+ });
216
+ return nodeView;
217
+ }
218
+ return nodeViewProducer;
219
+ }
@@ -6,6 +6,7 @@ import { createDispatch } from '../event-dispatcher';
6
6
  import { ErrorBoundary } from '../ui/ErrorBoundary';
7
7
  import { getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from '../utils';
8
8
  import { analyticsEventKey } from '../utils/analytics';
9
+ export { getInlineNodeViewProducer, inlineNodeViewClassname } from './getInlineNodeViewProducer';
9
10
  export default class ReactNodeView {
10
11
  constructor(_node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, hasAnalyticsContext = false, viewShouldUpdate, hasIntlContext = false) {
11
12
  _defineProperty(this, "handleRef", node => this._handleRef(node));
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import classnames from 'classnames';
3
3
  import { Resizable } from 're-resizable';
4
- import { resizerHandleLeftClassName, resizerHandlePadding, resizerHandlerClassName, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleZIndex, resizerItemClassName } from '../../styles/shared/resizer';
4
+ import { resizerHandleLeftClassName, resizerHandlePadding, resizerHandlerClassName, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleZIndex, resizerItemClassName } from '../styles/shared/resizer';
5
5
  export default function ResizerNext(props) {
6
6
  const resizable = React.useRef(null);
7
7
  const {
@@ -0,0 +1 @@
1
+ export { default as ResizerNext } from './Resizer';
@@ -0,0 +1,12 @@
1
+ export const snapTo = (target, points) => {
2
+ return points.length === 0 ?
3
+ // extreme last case if there are no points somehow
4
+ target : points.reduce((point, closest) => {
5
+ return Math.abs(closest - target) < Math.abs(point - target) ? closest : point;
6
+ });
7
+ };
8
+ export const handleSides = ['left', 'right'];
9
+ export const imageAlignmentMap = {
10
+ left: 'start',
11
+ right: 'end'
12
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -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.5.1";
11
+ const packageVersion = "74.6.0";
12
12
  const halfFocusRing = 1;
13
13
  const dropOffset = '0, 8';
14
14
  class DropList extends Component {
@@ -0,0 +1,4 @@
1
+ export const RECENT_SEARCH_WIDTH_IN_PX = 420;
2
+ export const RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
3
+ export const RECENT_SEARCH_HEIGHT_IN_PX = 360;
4
+ export const LINKPICKER_HEIGHT_IN_PX = 570;