@atlaskit/editor-common 102.13.11 → 102.15.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 (43) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/cjs/ai-messages/ai-config-items.js +0 -116
  3. package/dist/cjs/analytics/types/enums.js +21 -0
  4. package/dist/cjs/analytics/types/table-events.js +5 -0
  5. package/dist/cjs/monitoring/error.js +1 -1
  6. package/dist/cjs/resizer/BreakoutResizer.js +46 -16
  7. package/dist/cjs/resizer/index.js +8 -1
  8. package/dist/cjs/resizer/useBreakoutGuidelines.js +135 -0
  9. package/dist/cjs/styles/shared/smartCard.js +2 -1
  10. package/dist/cjs/ui/DropList/index.js +1 -1
  11. package/dist/es2019/ai-messages/ai-config-items.js +0 -116
  12. package/dist/es2019/analytics/types/enums.js +21 -0
  13. package/dist/es2019/analytics/types/table-events.js +5 -0
  14. package/dist/es2019/monitoring/error.js +1 -1
  15. package/dist/es2019/resizer/BreakoutResizer.js +48 -17
  16. package/dist/es2019/resizer/index.js +2 -1
  17. package/dist/es2019/resizer/useBreakoutGuidelines.js +122 -0
  18. package/dist/es2019/styles/shared/smartCard.js +5 -0
  19. package/dist/es2019/ui/DropList/index.js +1 -1
  20. package/dist/esm/ai-messages/ai-config-items.js +0 -116
  21. package/dist/esm/analytics/types/enums.js +21 -0
  22. package/dist/esm/analytics/types/table-events.js +5 -0
  23. package/dist/esm/monitoring/error.js +1 -1
  24. package/dist/esm/resizer/BreakoutResizer.js +47 -17
  25. package/dist/esm/resizer/index.js +2 -1
  26. package/dist/esm/resizer/useBreakoutGuidelines.js +127 -0
  27. package/dist/esm/styles/shared/smartCard.js +2 -1
  28. package/dist/esm/ui/DropList/index.js +1 -1
  29. package/dist/types/ai-messages/ai-config-items.d.ts +0 -115
  30. package/dist/types/analytics/types/config-panel-events.d.ts +8 -2
  31. package/dist/types/analytics/types/mention-events.d.ts +1 -1
  32. package/dist/types/analytics/types/utils.d.ts +5 -2
  33. package/dist/types/resizer/BreakoutResizer.d.ts +3 -1
  34. package/dist/types/resizer/index.d.ts +1 -0
  35. package/dist/types/resizer/useBreakoutGuidelines.d.ts +10 -0
  36. package/dist/types-ts4.5/ai-messages/ai-config-items.d.ts +0 -115
  37. package/dist/types-ts4.5/analytics/types/config-panel-events.d.ts +8 -2
  38. package/dist/types-ts4.5/analytics/types/mention-events.d.ts +1 -1
  39. package/dist/types-ts4.5/analytics/types/utils.d.ts +5 -2
  40. package/dist/types-ts4.5/resizer/BreakoutResizer.d.ts +3 -1
  41. package/dist/types-ts4.5/resizer/index.d.ts +1 -0
  42. package/dist/types-ts4.5/resizer/useBreakoutGuidelines.d.ts +10 -0
  43. package/package.json +3 -3
@@ -52,122 +52,6 @@ export const aiConfigItemMessages = defineMessages({
52
52
  defaultMessage: 'Open in Chat',
53
53
  description: 'Tooltip and label for Open in Chat button'
54
54
  },
55
- // Advanced prompt messages
56
- advancedPromptTitle: {
57
- id: 'fabric.editor.ai.config.item.advancedPrompt.title',
58
- defaultMessage: 'Build an advanced prompt',
59
- description: 'Describes an option to use Atlassian Intelligence to show a more advanced prompt'
60
- },
61
- advancedPromptDescription: {
62
- id: 'fabric.editor.ai.config.item.advancedPrompt.description',
63
- defaultMessage: 'Specify task, instructions and rules',
64
- description: 'Description for the the Atlassian Intelligence "Build an advanced prompt".'
65
- },
66
- advancedPromptLabel: {
67
- id: 'fabric.editor.ai.config.item.advancedPrompt.promptLabel',
68
- defaultMessage: 'Build an advanced prompt',
69
- description: 'Label text in the prompt input.'
70
- },
71
- advancedPromptTaskLabel: {
72
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.task.label',
73
- defaultMessage: 'Task',
74
- description: 'Label for the Task input in the prompt builder.'
75
- },
76
- advancedPromptTaskPlaceholder: {
77
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.task.placeholder',
78
- defaultMessage: 'Describe the task that needs completing.',
79
- description: 'Placeholder for the Task input in the prompt builder.'
80
- },
81
- advancedPromptTaskHelperMessage: {
82
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.task.helperMessage',
83
- defaultMessage: 'For example: Create an onboarding documentation for new employees joining the team.',
84
- description: 'Helper message for the Task input in the prompt builder.'
85
- },
86
- advancedPromptTaskRequired: {
87
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.task.error.required',
88
- defaultMessage: 'Please provide task',
89
- description: 'Error message for the Task input in the prompt builder.'
90
- },
91
- advancedPromptInstructionsLabel: {
92
- id: 'fabric.editor.ai.config.item.advanced-prompt.form.instructions.label',
93
- defaultMessage: 'Instructions',
94
- description: 'Label for the Instructions input in the prompt builder.'
95
- },
96
- advancedPromptInstructionsPlaceholder: {
97
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.instructions.placeholder',
98
- defaultMessage: 'Provide task instructions to help generate specific outputs.',
99
- description: 'Placeholder for the Instructions input in the prompt builder.'
100
- },
101
- advancedPromptInstructionsHelperMessage: {
102
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.instructions.helperMessage',
103
- defaultMessage: 'For example: 1. Start the document with a brief overview of our company goals. 2. Create a list of key team members to meet in their first week.',
104
- description: 'Helper message for the Instructions input in the prompt builder.'
105
- },
106
- advancedPromptRulesLabel: {
107
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.rules.label',
108
- defaultMessage: 'Rules',
109
- description: 'Label for the Rules input in the prompt builder.'
110
- },
111
- advancedPromptRulesPlaceholder: {
112
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.rules.placeholder',
113
- defaultMessage: 'Outline any rules you want followed.',
114
- description: 'Placeholder for the Rules input in the prompt builder.'
115
- },
116
- advancedPromptRulesHelperMessage: {
117
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.rules.helperMessage',
118
- defaultMessage: 'For example: The output must follow the company style guidelines and not use unverified data.',
119
- description: 'Helper message for the Rules input in the prompt builder.'
120
- },
121
- advancedPromptToneLabel: {
122
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.label',
123
- defaultMessage: 'Tone',
124
- description: 'Label for the Tone input in the prompt builder.'
125
- },
126
- advancedPromptToneProfessional: {
127
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.option.professional',
128
- defaultMessage: 'Professional',
129
- description: 'Option for the Tone input in the prompt builder.'
130
- },
131
- advancedPromptToneEmpathetic: {
132
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.option.empathetic',
133
- defaultMessage: 'Empathetic',
134
- description: 'Option for the Tone input in the prompt builder.'
135
- },
136
- advancedPromptToneCasual: {
137
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.option.casual',
138
- defaultMessage: 'Casual',
139
- description: 'Option for the Tone input in the prompt builder.'
140
- },
141
- advancedPromptToneNeutral: {
142
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.option.neutral',
143
- defaultMessage: 'Neutral',
144
- description: 'Option for the Tone input in the prompt builder.'
145
- },
146
- advancedPromptToneEducational: {
147
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.option.educational',
148
- defaultMessage: 'Educational',
149
- description: 'Option for the Tone input in the prompt builder.'
150
- },
151
- advancedPromptCreativityLabel: {
152
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.creativity.label',
153
- defaultMessage: 'Creativity',
154
- description: 'Label for the Creativity input in the prompt builder.'
155
- },
156
- advancedPromptCreativityLow: {
157
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.creativity.option.low',
158
- defaultMessage: 'Low',
159
- description: 'Option for the Creativity input in the prompt builder.'
160
- },
161
- advancedPromptCreativityMedium: {
162
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.creativity.option.medium',
163
- defaultMessage: 'Medium',
164
- description: 'Option for the Creativity input in the prompt builder.'
165
- },
166
- advancedPromptCreativityHigh: {
167
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.creativity.option.high',
168
- defaultMessage: 'High',
169
- description: 'Option for the Creativity input in the prompt builder.'
170
- },
171
55
  // Atlas shorten update messages
172
56
  atlasShortenUpdatetitle: {
173
57
  id: 'fabric.editor.ai.config.item.atlas-shorten-update.title',
@@ -27,6 +27,7 @@ export let ACTION = /*#__PURE__*/function (ACTION) {
27
27
  ACTION["CLICKED"] = "clicked";
28
28
  ACTION["CLOSED"] = "closed";
29
29
  ACTION["COMMITTED"] = "committed";
30
+ /** used in @atlassian/editor-referentiality */
30
31
  ACTION["CONNECTED_NODES"] = "connectedNodes";
31
32
  ACTION["CONVERTED"] = "converted";
32
33
  ACTION["COPIED"] = "copied";
@@ -35,7 +36,9 @@ export let ACTION = /*#__PURE__*/function (ACTION) {
35
36
  ACTION["DECREMENTED"] = "decremented";
36
37
  ACTION["DELETED"] = "deleted";
37
38
  ACTION["DISCARDED_INVALID_STEPS_FROM_TRANSACTION"] = "discardedInvalidStepsFromTransaction";
39
+ /** used in @atlassian/editor-referentiality */
38
40
  ACTION["DISCONNECTED_SOURCE"] = "disconnectedSource";
41
+ /** used in @atlassian/editor-referentiality */
39
42
  ACTION["DISCONNECTED_TARGET"] = "disconnectedTarget";
40
43
  ACTION["DISMISSED"] = "dismissed";
41
44
  ACTION["DISPATCHED_INVALID_TRANSACTION"] = "dispatchedInvalidTransaction";
@@ -65,6 +68,7 @@ export let ACTION = /*#__PURE__*/function (ACTION) {
65
68
  ACTION["INDENTED"] = "indented";
66
69
  ACTION["INITIALISED"] = "initialised";
67
70
  ACTION["INITIATED"] = "initiated";
71
+ /** used in @atlassian/editor-referentiality */
68
72
  ACTION["INITIALISED_FRAGMENT_MARK"] = "initialisedFragmentMark";
69
73
  ACTION["INPUT_PERF_SAMPLING"] = "inputPerfSampling";
70
74
  ACTION["INPUT_PERF_SAMPLING_AVG"] = "inputPerfSamplingAvg";
@@ -75,6 +79,7 @@ export let ACTION = /*#__PURE__*/function (ACTION) {
75
79
  ACTION["INSERTED"] = "inserted";
76
80
  ACTION["INVALID_DOCUMENT_ENCOUNTERED"] = "invalidDocumentEncountered";
77
81
  ACTION["INVOKED"] = "invoked";
82
+ /** used in @atlassian/editor-referentiality */
78
83
  ACTION["GOT_CONNECTIONS"] = "gotConnections";
79
84
  ACTION["LANGUAGE_SELECTED"] = "languageSelected";
80
85
  ACTION["LIST_ITEM_JOINED"] = "listItemJoined";
@@ -119,8 +124,11 @@ export let ACTION = /*#__PURE__*/function (ACTION) {
119
124
  ACTION["UNLINK"] = "unlinked";
120
125
  ACTION["UNSUPPORTED_CONTENT_ENCOUNTERED"] = "unsupportedContentEncounteredV2";
121
126
  ACTION["UPDATED"] = "updated";
127
+ /** used in @atlassian/editor-referentiality */
122
128
  ACTION["UPDATED_FRAGMENT_MARK_NAME"] = "updatedFragmentMarkName";
129
+ /** used in @atlassian/editor-referentiality */
123
130
  ACTION["UPDATED_SOURCE"] = "updatedSource";
131
+ /** used in @atlassian/editor-referentiality */
124
132
  ACTION["UPDATED_TARGET"] = "updatedTarget";
125
133
  ACTION["UPLOAD_EXTERNAL_FAIL"] = "uploadExternalFailed";
126
134
  ACTION["VIEWED"] = "viewed";
@@ -128,6 +136,12 @@ export let ACTION = /*#__PURE__*/function (ACTION) {
128
136
  ACTION["WITH_PLUGIN_STATE_CALLED"] = "withPluginStateCalled";
129
137
  ACTION["RENDERED"] = "rendered";
130
138
  ACTION["ON_EDITOR_READY_CALLBACK"] = "onEditorReadyCallback";
139
+ /**
140
+ * @private
141
+ * @deprecated
142
+ *
143
+ * This is no longer used and can be removed at a later date
144
+ */
131
145
  ACTION["ON_CHANGE_CALLBACK"] = "onChangeCalled";
132
146
  ACTION["NESTED_TABLE_TRANSFORMED"] = "nestedTableTransformed";
133
147
  ACTION["NEW_COLLAB_SYNC_UP_ERROR_NO_STEPS"] = "newCollabSyncUpErrorNoSteps";
@@ -163,6 +177,11 @@ export let ACTION = /*#__PURE__*/function (ACTION) {
163
177
  ACTION["RESIZED"] = "resized";
164
178
  ACTION["BLOCKS_DRAG_INIT"] = "blocksDragInit";
165
179
  ACTION["SINGLE_COL_LAYOUT_DETECTED"] = "singleColumLayoutDetected";
180
+ /**
181
+ * used in Editor AI inline suggestion for a track event when a suggestion is inserted
182
+ * previously tracked events being used by Editor AI proactive suggestion
183
+ *
184
+ */
166
185
  ACTION["SUGGESTION_INSERTED"] = "suggestionInserted";
167
186
  ACTION["SUGGESTION_DISMISSED"] = "suggestionDismissed";
168
187
  ACTION["SUGGESTION_VIEWED"] = "suggestionViewed";
@@ -214,7 +233,9 @@ export let INSERT_MEDIA_VIA = /*#__PURE__*/function (INSERT_MEDIA_VIA) {
214
233
  export let TRIGGER_METHOD = /*#__PURE__*/function (TRIGGER_METHOD) {
215
234
  TRIGGER_METHOD["BUTTON"] = "button";
216
235
  TRIGGER_METHOD["KEYBOARD"] = "keyboard";
236
+ // single key, e.g. Esc, Enter
217
237
  TRIGGER_METHOD["SHORTCUT"] = "shortcut";
238
+ // combination of keys, e.g. Mod + F
218
239
  TRIGGER_METHOD["TOOLBAR"] = "toolbar";
219
240
  TRIGGER_METHOD["EXTERNAL"] = "external";
220
241
  return TRIGGER_METHOD;
@@ -29,9 +29,14 @@ export let TABLE_ACTION = /*#__PURE__*/function (TABLE_ACTION) {
29
29
  TABLE_ACTION["MOVED_COLUMN"] = "movedColumn";
30
30
  TABLE_ACTION["CLONED_ROW"] = "clonedRow";
31
31
  TABLE_ACTION["CLONED_COLUMN"] = "clonedColumn";
32
+ /**
33
+ * This is a unique action that's used to track legacy table move behaviour flow of insert+copy+paste. Please use
34
+ * the MOVED_ROW | MOVED_COLUMN actions if you want to track events which move row/cols in a single step.
35
+ */
32
36
  TABLE_ACTION["ROW_OR_COLUMN_MOVED"] = "rowOrColumnMoved";
33
37
  TABLE_ACTION["CHANGED_DISPLAY_MODE"] = "changedDisplayMode";
34
38
  TABLE_ACTION["CHANGED_ALIGNMENT"] = "changedAlignment";
39
+ // Temporary to track usage of CONFCLOUD-78239 bug
35
40
  TABLE_ACTION["TABLE_CELL_BACKGROUND_FIXED"] = "tableCellBackgroundFixed";
36
41
  return TABLE_ACTION;
37
42
  }({});
@@ -1,7 +1,7 @@
1
1
  import { isFedRamp } from './environment';
2
2
  const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
3
3
  const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
4
- const packageVersion = "102.13.11";
4
+ const packageVersion = "102.15.0";
5
5
  const sanitiseSentryEvents = (data, _hint) => {
6
6
  // Remove URL as it has UGC
7
7
  // Ignored via go/ees007
@@ -1,4 +1,4 @@
1
- import React, { useCallback, useMemo, useRef, useState, useLayoutEffect } from 'react';
1
+ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
2
2
  import { bind, bindAll } from 'bind-event-listener';
3
3
  import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
4
4
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -7,6 +7,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
7
7
  import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles';
8
8
  import { browser } from '../utils/browser';
9
9
  import Resizer from './Resizer';
10
+ import { SNAP_GAP, useBreakoutGuidelines } from './useBreakoutGuidelines';
10
11
  const breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
11
12
  const getHandleStyle = node => {
12
13
  const layoutMarginOffset = 12;
@@ -78,6 +79,7 @@ const BreakoutResizer = ({
78
79
  disabled,
79
80
  getEditorWidth,
80
81
  parentRef,
82
+ displayGuidelines,
81
83
  editorAnalyticsApi,
82
84
  displayGapCursor
83
85
  }) => {
@@ -92,6 +94,17 @@ const BreakoutResizer = ({
92
94
  });
93
95
  const areResizeMetaKeysPressed = useRef(false);
94
96
  const resizerRef = useRef(null);
97
+ const {
98
+ snaps,
99
+ currentLayout,
100
+ guidelines,
101
+ setCurrentWidth
102
+ } = useBreakoutGuidelines(getEditorWidth, isResizing && editorExperiment('single_column_layouts', true));
103
+ useEffect(() => {
104
+ if (displayGuidelines) {
105
+ displayGuidelines(guidelines || []);
106
+ }
107
+ }, [displayGuidelines, guidelines]);
95
108
 
96
109
  // Relying on re-renders caused by selection changes inside/around node
97
110
  const isSelectionInNode = useMemo(() => {
@@ -131,6 +144,12 @@ const BreakoutResizer = ({
131
144
  });
132
145
  dispatch(state.tr.setMeta('is-resizer-resizing', true));
133
146
  }, [getEditorWidth, editorView, displayGapCursor]);
147
+ const handleResize = useCallback((originalState, delta) => {
148
+ if (editorExperiment('single_column_layouts', true)) {
149
+ const newWidth = originalState.width + delta.width;
150
+ setCurrentWidth(newWidth);
151
+ }
152
+ }, [setCurrentWidth]);
134
153
  const handleResizeStop = useCallback((originalState, delta) => {
135
154
  const newWidth = originalState.width + delta.width;
136
155
  const pos = getPos();
@@ -147,21 +166,29 @@ const BreakoutResizer = ({
147
166
  const node = state.doc.nodeAt(pos);
148
167
  const newTr = state.tr;
149
168
  if (node && breakoutSupportedNodes.includes(node.type.name)) {
150
- const newBreakoutWidth = Math.max(newWidth, akEditorDefaultLayoutWidth);
151
- newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
152
- width: newBreakoutWidth
153
- })]);
154
- const breakoutResizePayload = {
155
- action: ACTION.RESIZED,
156
- actionSubject: ACTION_SUBJECT.ELEMENT,
157
- eventType: EVENT_TYPE.TRACK,
158
- attributes: {
159
- nodeType: node.type.name,
160
- prevWidth: originalState.width,
161
- newWidth: newBreakoutWidth
162
- }
163
- };
164
- editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(breakoutResizePayload)(newTr);
169
+ if (currentLayout && ['wide', 'full-width'].includes(currentLayout) && editorExperiment('single_column_layouts', true)) {
170
+ newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
171
+ mode: currentLayout,
172
+ width: null
173
+ })]);
174
+ } else {
175
+ const newBreakoutWidth = Math.max(newWidth, akEditorDefaultLayoutWidth);
176
+ newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
177
+ width: newBreakoutWidth,
178
+ mode: null
179
+ })]);
180
+ const breakoutResizePayload = {
181
+ action: ACTION.RESIZED,
182
+ actionSubject: ACTION_SUBJECT.ELEMENT,
183
+ eventType: EVENT_TYPE.TRACK,
184
+ attributes: {
185
+ nodeType: node.type.name,
186
+ prevWidth: originalState.width,
187
+ newWidth: newBreakoutWidth
188
+ }
189
+ };
190
+ editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(breakoutResizePayload)(newTr);
191
+ }
165
192
  }
166
193
  newTr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false);
167
194
  displayGapCursor(true);
@@ -171,7 +198,8 @@ const BreakoutResizer = ({
171
198
  minWidth: undefined,
172
199
  maxWidth: undefined
173
200
  });
174
- }, [getPos, editorView, displayGapCursor, editorAnalyticsApi]);
201
+ setCurrentWidth(null);
202
+ }, [getPos, editorView, displayGapCursor, setCurrentWidth, currentLayout, editorAnalyticsApi]);
175
203
  const handleEscape = useCallback(() => {
176
204
  editorView === null || editorView === void 0 ? void 0 : editorView.focus();
177
205
  }, [editorView]);
@@ -275,6 +303,8 @@ const BreakoutResizer = ({
275
303
  left: true,
276
304
  right: true
277
305
  },
306
+ snap: snaps || undefined,
307
+ snapGap: SNAP_GAP,
278
308
  handleStyles: getHandleStyle(nodeType),
279
309
  minWidth: minWidth,
280
310
  maxWidth: maxWidth
@@ -283,6 +313,7 @@ const BreakoutResizer = ({
283
313
  style: isResizing ? resizingStyles : defaultStyles,
284
314
  handleResizeStart: handleResizeStart,
285
315
  handleResizeStop: handleResizeStop,
316
+ handleResize: handleResize,
286
317
  childrenDOMRef: getRef,
287
318
  resizeRatio: 2,
288
319
  isHandleVisible: isSelectionInNode,
@@ -2,4 +2,5 @@
2
2
  /* eslint-disable @atlaskit/editor/no-re-export */
3
3
 
4
4
  export { default as ResizerNext } from './Resizer';
5
- export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';
5
+ export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';
6
+ export { useBreakoutGuidelines } from './useBreakoutGuidelines';
@@ -0,0 +1,122 @@
1
+ import { useCallback, useMemo, useState } from 'react';
2
+ import { akEditorGutterPadding, akEditorGutterPaddingDynamic, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
3
+ export const SNAP_GAP = 8;
4
+ const roundToNearest = (value, interval = 0.5) => Math.round(value / interval) * interval;
5
+ export function useBreakoutGuidelines(getEditorWidth, isResizing) {
6
+ const widthState = getEditorWidth();
7
+ const {
8
+ lineLength,
9
+ wide,
10
+ fullWidth
11
+ } = useMemo(() => {
12
+ if (!isResizing) {
13
+ return {};
14
+ }
15
+ const {
16
+ width,
17
+ lineLength
18
+ } = widthState || {};
19
+ const wide = lineLength ? Math.round(lineLength * breakoutWideScaleRatio) : undefined;
20
+ const fullWidth = width ? Math.min(width - akEditorGutterPaddingDynamic() * 2) : undefined;
21
+ return {
22
+ wide,
23
+ fullWidth,
24
+ lineLength
25
+ };
26
+ }, [widthState, isResizing]);
27
+ const snaps = useMemo(() => {
28
+ if (!isResizing) {
29
+ return null;
30
+ }
31
+ const xSnaps = [];
32
+ if (typeof lineLength === 'number') {
33
+ xSnaps.push(lineLength);
34
+ }
35
+ if (typeof wide === 'number') {
36
+ xSnaps.push(wide);
37
+ }
38
+ if (typeof fullWidth === 'number') {
39
+ xSnaps.push(fullWidth - akEditorGutterPadding);
40
+ }
41
+ return {
42
+ x: xSnaps
43
+ };
44
+ }, [isResizing, wide, fullWidth, lineLength]);
45
+ const [currentLayout, setCurrentLayout] = useState(null);
46
+ const guidelines = useMemo(() => {
47
+ const guidelines = [];
48
+ if (!isResizing) {
49
+ return guidelines;
50
+ }
51
+ if (lineLength) {
52
+ guidelines.push({
53
+ key: 'grid_left',
54
+ position: {
55
+ x: -roundToNearest(lineLength / 2)
56
+ },
57
+ active: currentLayout === 'center'
58
+ });
59
+ guidelines.push({
60
+ key: 'grid_right',
61
+ position: {
62
+ x: roundToNearest(lineLength / 2)
63
+ },
64
+ active: currentLayout === 'center'
65
+ });
66
+ }
67
+ if (wide) {
68
+ guidelines.push({
69
+ key: 'wide_left',
70
+ position: {
71
+ x: -roundToNearest(wide / 2)
72
+ },
73
+ active: currentLayout === 'wide'
74
+ });
75
+ guidelines.push({
76
+ key: 'wide_right',
77
+ position: {
78
+ x: roundToNearest(wide / 2)
79
+ },
80
+ active: currentLayout === 'wide'
81
+ });
82
+ }
83
+ if (fullWidth) {
84
+ guidelines.push({
85
+ key: 'full_width_left',
86
+ position: {
87
+ x: -roundToNearest(fullWidth / 2)
88
+ },
89
+ active: currentLayout === 'full-width'
90
+ });
91
+ guidelines.push({
92
+ key: 'full_width_right',
93
+ position: {
94
+ x: roundToNearest(fullWidth) / 2
95
+ },
96
+ active: currentLayout === 'full-width'
97
+ });
98
+ }
99
+ return guidelines;
100
+ }, [isResizing, lineLength, wide, fullWidth, currentLayout]);
101
+ const setCurrentWidth = useCallback(newWidth => {
102
+ if (typeof newWidth !== 'number') {
103
+ setCurrentLayout(null);
104
+ return;
105
+ }
106
+ if (lineLength && Math.abs(newWidth - lineLength) < SNAP_GAP / 2) {
107
+ setCurrentLayout('center');
108
+ } else if (wide && Math.abs(newWidth - wide) < SNAP_GAP / 2) {
109
+ setCurrentLayout('wide');
110
+ } else if (fullWidth && (Math.abs(newWidth - fullWidth + akEditorGutterPadding) < SNAP_GAP / 2 || newWidth >= fullWidth)) {
111
+ setCurrentLayout('full-width');
112
+ } else {
113
+ setCurrentLayout(null);
114
+ }
115
+ }, [lineLength, wide, fullWidth]);
116
+ return {
117
+ snaps,
118
+ currentLayout,
119
+ guidelines,
120
+ setCurrentWidth
121
+ };
122
+ }
@@ -2,6 +2,7 @@
2
2
  import { css } from '@emotion/react';
3
3
  import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
4
4
  import { fg } from '@atlaskit/platform-feature-flags';
5
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
5
6
  import { SmartCardSharedCssClassName } from './smart-card';
6
7
  export const DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
7
8
  export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
@@ -29,6 +30,10 @@ export const smartCardStyles = () => css`
29
30
  }
30
31
  }
31
32
 
33
+ ${editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_1') ? `[data-inlinecard-button-overlay='icon-wrapper-line-height'] span {
34
+ line-height: 0;
35
+ }` : ''}
36
+
32
37
  &.${akEditorSelectedNodeClassName} .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
33
38
  ${getSelectionStyles([SelectionStyle.BoxShadow])}
34
39
  }
@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
13
13
  import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
14
14
  import Layer from '../Layer';
15
15
  const packageName = "@atlaskit/editor-common";
16
- const packageVersion = "102.13.11";
16
+ const packageVersion = "102.15.0";
17
17
  const halfFocusRing = 1;
18
18
  const dropOffset = '0, 8';
19
19
  // Ignored via go/ees005
@@ -52,122 +52,6 @@ export var aiConfigItemMessages = defineMessages({
52
52
  defaultMessage: 'Open in Chat',
53
53
  description: 'Tooltip and label for Open in Chat button'
54
54
  },
55
- // Advanced prompt messages
56
- advancedPromptTitle: {
57
- id: 'fabric.editor.ai.config.item.advancedPrompt.title',
58
- defaultMessage: 'Build an advanced prompt',
59
- description: 'Describes an option to use Atlassian Intelligence to show a more advanced prompt'
60
- },
61
- advancedPromptDescription: {
62
- id: 'fabric.editor.ai.config.item.advancedPrompt.description',
63
- defaultMessage: 'Specify task, instructions and rules',
64
- description: 'Description for the the Atlassian Intelligence "Build an advanced prompt".'
65
- },
66
- advancedPromptLabel: {
67
- id: 'fabric.editor.ai.config.item.advancedPrompt.promptLabel',
68
- defaultMessage: 'Build an advanced prompt',
69
- description: 'Label text in the prompt input.'
70
- },
71
- advancedPromptTaskLabel: {
72
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.task.label',
73
- defaultMessage: 'Task',
74
- description: 'Label for the Task input in the prompt builder.'
75
- },
76
- advancedPromptTaskPlaceholder: {
77
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.task.placeholder',
78
- defaultMessage: 'Describe the task that needs completing.',
79
- description: 'Placeholder for the Task input in the prompt builder.'
80
- },
81
- advancedPromptTaskHelperMessage: {
82
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.task.helperMessage',
83
- defaultMessage: 'For example: Create an onboarding documentation for new employees joining the team.',
84
- description: 'Helper message for the Task input in the prompt builder.'
85
- },
86
- advancedPromptTaskRequired: {
87
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.task.error.required',
88
- defaultMessage: 'Please provide task',
89
- description: 'Error message for the Task input in the prompt builder.'
90
- },
91
- advancedPromptInstructionsLabel: {
92
- id: 'fabric.editor.ai.config.item.advanced-prompt.form.instructions.label',
93
- defaultMessage: 'Instructions',
94
- description: 'Label for the Instructions input in the prompt builder.'
95
- },
96
- advancedPromptInstructionsPlaceholder: {
97
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.instructions.placeholder',
98
- defaultMessage: 'Provide task instructions to help generate specific outputs.',
99
- description: 'Placeholder for the Instructions input in the prompt builder.'
100
- },
101
- advancedPromptInstructionsHelperMessage: {
102
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.instructions.helperMessage',
103
- defaultMessage: 'For example: 1. Start the document with a brief overview of our company goals. 2. Create a list of key team members to meet in their first week.',
104
- description: 'Helper message for the Instructions input in the prompt builder.'
105
- },
106
- advancedPromptRulesLabel: {
107
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.rules.label',
108
- defaultMessage: 'Rules',
109
- description: 'Label for the Rules input in the prompt builder.'
110
- },
111
- advancedPromptRulesPlaceholder: {
112
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.rules.placeholder',
113
- defaultMessage: 'Outline any rules you want followed.',
114
- description: 'Placeholder for the Rules input in the prompt builder.'
115
- },
116
- advancedPromptRulesHelperMessage: {
117
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.rules.helperMessage',
118
- defaultMessage: 'For example: The output must follow the company style guidelines and not use unverified data.',
119
- description: 'Helper message for the Rules input in the prompt builder.'
120
- },
121
- advancedPromptToneLabel: {
122
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.label',
123
- defaultMessage: 'Tone',
124
- description: 'Label for the Tone input in the prompt builder.'
125
- },
126
- advancedPromptToneProfessional: {
127
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.option.professional',
128
- defaultMessage: 'Professional',
129
- description: 'Option for the Tone input in the prompt builder.'
130
- },
131
- advancedPromptToneEmpathetic: {
132
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.option.empathetic',
133
- defaultMessage: 'Empathetic',
134
- description: 'Option for the Tone input in the prompt builder.'
135
- },
136
- advancedPromptToneCasual: {
137
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.option.casual',
138
- defaultMessage: 'Casual',
139
- description: 'Option for the Tone input in the prompt builder.'
140
- },
141
- advancedPromptToneNeutral: {
142
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.option.neutral',
143
- defaultMessage: 'Neutral',
144
- description: 'Option for the Tone input in the prompt builder.'
145
- },
146
- advancedPromptToneEducational: {
147
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.option.educational',
148
- defaultMessage: 'Educational',
149
- description: 'Option for the Tone input in the prompt builder.'
150
- },
151
- advancedPromptCreativityLabel: {
152
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.creativity.label',
153
- defaultMessage: 'Creativity',
154
- description: 'Label for the Creativity input in the prompt builder.'
155
- },
156
- advancedPromptCreativityLow: {
157
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.creativity.option.low',
158
- defaultMessage: 'Low',
159
- description: 'Option for the Creativity input in the prompt builder.'
160
- },
161
- advancedPromptCreativityMedium: {
162
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.creativity.option.medium',
163
- defaultMessage: 'Medium',
164
- description: 'Option for the Creativity input in the prompt builder.'
165
- },
166
- advancedPromptCreativityHigh: {
167
- id: 'fabric.editor.ai.config.item.advancedPrompt.form.creativity.option.high',
168
- defaultMessage: 'High',
169
- description: 'Option for the Creativity input in the prompt builder.'
170
- },
171
55
  // Atlas shorten update messages
172
56
  atlasShortenUpdatetitle: {
173
57
  id: 'fabric.editor.ai.config.item.atlas-shorten-update.title',