@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.
- package/CHANGELOG.md +28 -0
- package/dist/cjs/ai-messages/ai-config-items.js +0 -116
- package/dist/cjs/analytics/types/enums.js +21 -0
- package/dist/cjs/analytics/types/table-events.js +5 -0
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/resizer/BreakoutResizer.js +46 -16
- package/dist/cjs/resizer/index.js +8 -1
- package/dist/cjs/resizer/useBreakoutGuidelines.js +135 -0
- package/dist/cjs/styles/shared/smartCard.js +2 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/es2019/ai-messages/ai-config-items.js +0 -116
- package/dist/es2019/analytics/types/enums.js +21 -0
- package/dist/es2019/analytics/types/table-events.js +5 -0
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/resizer/BreakoutResizer.js +48 -17
- package/dist/es2019/resizer/index.js +2 -1
- package/dist/es2019/resizer/useBreakoutGuidelines.js +122 -0
- package/dist/es2019/styles/shared/smartCard.js +5 -0
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/esm/ai-messages/ai-config-items.js +0 -116
- package/dist/esm/analytics/types/enums.js +21 -0
- package/dist/esm/analytics/types/table-events.js +5 -0
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/resizer/BreakoutResizer.js +47 -17
- package/dist/esm/resizer/index.js +2 -1
- package/dist/esm/resizer/useBreakoutGuidelines.js +127 -0
- package/dist/esm/styles/shared/smartCard.js +2 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/types/ai-messages/ai-config-items.d.ts +0 -115
- package/dist/types/analytics/types/config-panel-events.d.ts +8 -2
- package/dist/types/analytics/types/mention-events.d.ts +1 -1
- package/dist/types/analytics/types/utils.d.ts +5 -2
- package/dist/types/resizer/BreakoutResizer.d.ts +3 -1
- package/dist/types/resizer/index.d.ts +1 -0
- package/dist/types/resizer/useBreakoutGuidelines.d.ts +10 -0
- package/dist/types-ts4.5/ai-messages/ai-config-items.d.ts +0 -115
- package/dist/types-ts4.5/analytics/types/config-panel-events.d.ts +8 -2
- package/dist/types-ts4.5/analytics/types/mention-events.d.ts +1 -1
- package/dist/types-ts4.5/analytics/types/utils.d.ts +5 -2
- package/dist/types-ts4.5/resizer/BreakoutResizer.d.ts +3 -1
- package/dist/types-ts4.5/resizer/index.d.ts +1 -0
- package/dist/types-ts4.5/resizer/useBreakoutGuidelines.d.ts +10 -0
- 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.
|
|
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
|
|
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
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
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
|
-
|
|
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.
|
|
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',
|