@atlaskit/editor-core 187.48.0 → 187.48.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +521 -507
- package/dist/cjs/{editor-next → composable-editor}/editor-internal.js +2 -22
- package/dist/cjs/{editor-next/index.js → composable-editor/editor.js} +14 -8
- package/dist/cjs/composable-editor.js +2 -3
- package/dist/cjs/editor.js +4 -4
- package/dist/cjs/plugins/floating-toolbar/ui/Toolbar.js +3 -70
- package/dist/cjs/plugins/floating-toolbar/utils.js +0 -41
- package/dist/cjs/plugins/insert-block/ui/ToolbarInsertBlock/index.js +3 -1
- package/dist/cjs/plugins/view-update-subscription/subscribe/toolbarAndPickerUpdates.js +28 -11
- package/dist/cjs/ui/CollapsedEditor/index.js +3 -3
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/{editor-next → composable-editor}/editor-internal.js +1 -23
- package/dist/es2019/{editor-next/index.js → composable-editor/editor.js} +14 -6
- package/dist/es2019/composable-editor.js +1 -1
- package/dist/es2019/editor.js +4 -4
- package/dist/es2019/plugins/floating-toolbar/ui/Toolbar.js +1 -52
- package/dist/es2019/plugins/floating-toolbar/utils.js +0 -36
- package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js +3 -1
- package/dist/es2019/plugins/view-update-subscription/subscribe/toolbarAndPickerUpdates.js +21 -4
- package/dist/es2019/ui/CollapsedEditor/index.js +3 -3
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/{editor-next → composable-editor}/editor-internal.js +1 -20
- package/dist/esm/{editor-next/index.js → composable-editor/editor.js} +14 -6
- package/dist/esm/composable-editor.js +1 -1
- package/dist/esm/editor.js +4 -4
- package/dist/esm/plugins/floating-toolbar/ui/Toolbar.js +1 -66
- package/dist/esm/plugins/floating-toolbar/utils.js +0 -37
- package/dist/esm/plugins/insert-block/ui/ToolbarInsertBlock/index.js +3 -1
- package/dist/esm/plugins/view-update-subscription/subscribe/toolbarAndPickerUpdates.js +21 -4
- package/dist/esm/ui/CollapsedEditor/index.js +3 -3
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/{types-ts4.5/editor-next → types/composable-editor}/editor-internal.d.ts +4 -13
- package/dist/types/{editor-next/index.d.ts → composable-editor/editor.d.ts} +2 -4
- package/dist/types/{editor-next → composable-editor}/hooks/useMeasureEditorMountTime.d.ts +3 -3
- package/dist/types/{editor-next → composable-editor}/utils/getBaseFontSize.d.ts +1 -1
- package/dist/{types-ts4.5/editor-next → types/composable-editor}/utils/getProvidersFromEditorProps.d.ts +2 -2
- package/dist/types/{editor-next → composable-editor}/utils/sendDurationAnalytics.d.ts +4 -4
- package/dist/{types-ts4.5/editor-next → types/composable-editor}/utils/trackEditorActions.d.ts +3 -3
- package/dist/types/composable-editor.d.ts +1 -1
- package/dist/types/plugins/floating-toolbar/pm-plugins/toolbar-data/commands.d.ts +1 -1
- package/dist/types/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin.d.ts +1 -1
- package/dist/types/plugins/floating-toolbar/ui/Select.d.ts +1 -1
- package/dist/types/plugins/floating-toolbar/ui/Toolbar.d.ts +3 -4
- package/dist/types/plugins/floating-toolbar/utils.d.ts +0 -2
- package/dist/{types/editor-next → types-ts4.5/composable-editor}/editor-internal.d.ts +4 -13
- package/dist/types-ts4.5/{editor-next/index.d.ts → composable-editor/editor.d.ts} +2 -4
- package/dist/types-ts4.5/{editor-next → composable-editor}/hooks/useMeasureEditorMountTime.d.ts +3 -3
- package/dist/types-ts4.5/{editor-next → composable-editor}/utils/getBaseFontSize.d.ts +1 -1
- package/dist/{types/editor-next → types-ts4.5/composable-editor}/utils/getProvidersFromEditorProps.d.ts +2 -2
- package/dist/types-ts4.5/{editor-next → composable-editor}/utils/sendDurationAnalytics.d.ts +4 -4
- package/dist/{types/editor-next → types-ts4.5/composable-editor}/utils/trackEditorActions.d.ts +3 -3
- package/dist/types-ts4.5/composable-editor.d.ts +1 -1
- package/dist/types-ts4.5/plugins/floating-toolbar/pm-plugins/toolbar-data/commands.d.ts +1 -1
- package/dist/types-ts4.5/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin.d.ts +1 -1
- package/dist/types-ts4.5/plugins/floating-toolbar/ui/Select.d.ts +1 -1
- package/dist/types-ts4.5/plugins/floating-toolbar/ui/Toolbar.d.ts +3 -4
- package/dist/types-ts4.5/plugins/floating-toolbar/utils.d.ts +0 -2
- package/package.json +2 -2
- /package/dist/cjs/{editor-next → composable-editor}/hooks/useEditorMeasuresConstructor.js +0 -0
- /package/dist/cjs/{editor-next → composable-editor}/hooks/useMeasureEditorMountTime.js +0 -0
- /package/dist/cjs/{editor-next → composable-editor}/hooks/useProviderFactory.js +0 -0
- /package/dist/cjs/{editor-next → composable-editor}/utils/editorMeasureTTICallback.js +0 -0
- /package/dist/cjs/{editor-next → composable-editor}/utils/getBaseFontSize.js +0 -0
- /package/dist/cjs/{editor-next → composable-editor}/utils/getProvidersFromEditorProps.js +0 -0
- /package/dist/cjs/{editor-next → composable-editor}/utils/handleProviders.js +0 -0
- /package/dist/cjs/{editor-next → composable-editor}/utils/sendDurationAnalytics.js +0 -0
- /package/dist/cjs/{editor-next → composable-editor}/utils/trackEditorActions.js +0 -0
- /package/dist/es2019/{editor-next → composable-editor}/hooks/useEditorMeasuresConstructor.js +0 -0
- /package/dist/es2019/{editor-next → composable-editor}/hooks/useMeasureEditorMountTime.js +0 -0
- /package/dist/es2019/{editor-next → composable-editor}/hooks/useProviderFactory.js +0 -0
- /package/dist/es2019/{editor-next → composable-editor}/utils/editorMeasureTTICallback.js +0 -0
- /package/dist/es2019/{editor-next → composable-editor}/utils/getBaseFontSize.js +0 -0
- /package/dist/es2019/{editor-next → composable-editor}/utils/getProvidersFromEditorProps.js +0 -0
- /package/dist/es2019/{editor-next → composable-editor}/utils/handleProviders.js +0 -0
- /package/dist/es2019/{editor-next → composable-editor}/utils/sendDurationAnalytics.js +0 -0
- /package/dist/es2019/{editor-next → composable-editor}/utils/trackEditorActions.js +0 -0
- /package/dist/esm/{editor-next → composable-editor}/hooks/useEditorMeasuresConstructor.js +0 -0
- /package/dist/esm/{editor-next → composable-editor}/hooks/useMeasureEditorMountTime.js +0 -0
- /package/dist/esm/{editor-next → composable-editor}/hooks/useProviderFactory.js +0 -0
- /package/dist/esm/{editor-next → composable-editor}/utils/editorMeasureTTICallback.js +0 -0
- /package/dist/esm/{editor-next → composable-editor}/utils/getBaseFontSize.js +0 -0
- /package/dist/esm/{editor-next → composable-editor}/utils/getProvidersFromEditorProps.js +0 -0
- /package/dist/esm/{editor-next → composable-editor}/utils/handleProviders.js +0 -0
- /package/dist/esm/{editor-next → composable-editor}/utils/sendDurationAnalytics.js +0 -0
- /package/dist/esm/{editor-next → composable-editor}/utils/trackEditorActions.js +0 -0
- /package/dist/types/{editor-next → composable-editor}/hooks/useEditorMeasuresConstructor.d.ts +0 -0
- /package/dist/types/{editor-next → composable-editor}/hooks/useProviderFactory.d.ts +0 -0
- /package/dist/types/{editor-next → composable-editor}/utils/editorMeasureTTICallback.d.ts +0 -0
- /package/dist/types/{editor-next → composable-editor}/utils/handleProviders.d.ts +0 -0
- /package/dist/types-ts4.5/{editor-next → composable-editor}/hooks/useEditorMeasuresConstructor.d.ts +0 -0
- /package/dist/types-ts4.5/{editor-next → composable-editor}/hooks/useProviderFactory.d.ts +0 -0
- /package/dist/types-ts4.5/{editor-next → composable-editor}/utils/editorMeasureTTICallback.d.ts +0 -0
- /package/dist/types-ts4.5/{editor-next → composable-editor}/utils/handleProviders.d.ts +0 -0
|
@@ -1,39 +1,3 @@
|
|
|
1
|
-
export const shallowEqual = (objA, objB) => {
|
|
2
|
-
if (objA === objB) {
|
|
3
|
-
return true;
|
|
4
|
-
}
|
|
5
|
-
if (objA == null || objB == null) {
|
|
6
|
-
return false;
|
|
7
|
-
}
|
|
8
|
-
const keysA = Object.keys(objA);
|
|
9
|
-
const keysB = Object.keys(objB);
|
|
10
|
-
if (keysA.length !== keysB.length) {
|
|
11
|
-
return false;
|
|
12
|
-
}
|
|
13
|
-
const bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
|
|
14
|
-
for (let idx = 0; idx < keysA.length; idx++) {
|
|
15
|
-
const key = keysA[idx];
|
|
16
|
-
if (!bHasOwnProperty(key)) {
|
|
17
|
-
return false;
|
|
18
|
-
}
|
|
19
|
-
if (objA[key] !== objB[key]) {
|
|
20
|
-
return false;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
return true;
|
|
24
|
-
};
|
|
25
|
-
export const compareArrays = (left, right, compareFn = shallowEqual) => {
|
|
26
|
-
if (left.length !== right.length) {
|
|
27
|
-
return false;
|
|
28
|
-
}
|
|
29
|
-
for (let idx = 0; idx < left.length; idx++) {
|
|
30
|
-
if (!compareFn(left[idx], right[idx])) {
|
|
31
|
-
return false;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
return true;
|
|
35
|
-
};
|
|
36
|
-
|
|
37
1
|
// find node in descendants by condition
|
|
38
2
|
export function findNode(parent, predicate) {
|
|
39
3
|
let matchedNode;
|
|
@@ -8,6 +8,7 @@ import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
|
|
|
8
8
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
9
9
|
import ToolbarButton from '../../../../ui/ToolbarButton';
|
|
10
10
|
import { separatorStyles, buttonGroupStyle, wrapperStyle } from '@atlaskit/editor-common/styles';
|
|
11
|
+
import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
|
|
11
12
|
import { insertDate } from '../../../date/actions';
|
|
12
13
|
import { showPlaceholderFloatingToolbar } from '../../../placeholder-text/actions';
|
|
13
14
|
import { insertLayoutColumnsWithAnalytics } from '../../../layout/actions';
|
|
@@ -481,7 +482,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
|
|
|
481
482
|
mountTo: popupsMountPoint,
|
|
482
483
|
boundariesElement: popupsBoundariesElement,
|
|
483
484
|
scrollableElement: popupsScrollableElement,
|
|
484
|
-
focusTrap: true
|
|
485
|
+
focusTrap: true,
|
|
486
|
+
zIndex: akEditorMenuZIndex
|
|
485
487
|
}, jsx(EmojiPickerWithListeners, {
|
|
486
488
|
emojiProvider: emojiProvider,
|
|
487
489
|
onSelection: this.handleSelectedEmoji,
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { pluginKey as floatingToolbarPluginKey } from '../../floating-toolbar';
|
|
3
|
-
import { pluginKey as statusPluginKey } from '../../status/plugin-key';
|
|
4
|
-
import { areSameItems } from '../../floating-toolbar/ui/Toolbar';
|
|
1
|
+
import { areSameItems } from '@atlaskit/editor-common/floating-toolbar';
|
|
5
2
|
import { isTypeAheadOpen } from '../../type-ahead/utils';
|
|
6
3
|
import { trackerStore } from '..';
|
|
7
4
|
const areToolbarsSame = (left, right) => {
|
|
@@ -34,6 +31,26 @@ export const subscribeToToolbarAndPickerUpdates = (editorView, cb) => {
|
|
|
34
31
|
if (isTypeAheadOpen(newEditorState)) {
|
|
35
32
|
return;
|
|
36
33
|
}
|
|
34
|
+
|
|
35
|
+
// Creating fake plugin keys for these plugins for the mean time until all these plugins are extracted.
|
|
36
|
+
const datePluginKey = {
|
|
37
|
+
key: 'datePlugin$',
|
|
38
|
+
getState: state => {
|
|
39
|
+
return state['datePlugin$'];
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
const statusPluginKey = {
|
|
43
|
+
key: 'statusPlugin$',
|
|
44
|
+
getState: state => {
|
|
45
|
+
return state['statusPlugin$'];
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
const floatingToolbarPluginKey = {
|
|
49
|
+
key: 'floatingToolbarPluginKey$',
|
|
50
|
+
getState: state => {
|
|
51
|
+
return state['floatingToolbarPluginKey$'];
|
|
52
|
+
}
|
|
53
|
+
};
|
|
37
54
|
const dateState = datePluginKey.getState(newEditorState);
|
|
38
55
|
const statusState = statusPluginKey.getState(newEditorState);
|
|
39
56
|
const {
|
|
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import { IntlProviderIfMissingWrapper } from '@atlaskit/editor-common/ui';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import Editor from '../../editor';
|
|
5
|
-
import
|
|
5
|
+
import { ComposableEditor } from '../../composable-editor';
|
|
6
6
|
import EditorWithActions from '../../labs/EditorWithActions';
|
|
7
7
|
import ChromeCollapsed from '../ChromeCollapsed';
|
|
8
8
|
export default class CollapsedEditor extends React.Component {
|
|
@@ -24,10 +24,10 @@ export default class CollapsedEditor extends React.Component {
|
|
|
24
24
|
}
|
|
25
25
|
render() {
|
|
26
26
|
const child = React.Children.only(this.props.children);
|
|
27
|
-
if (child.type !== Editor && child.type !== EditorWithActions && child.type !==
|
|
27
|
+
if (child.type !== Editor && child.type !== EditorWithActions && child.type !== ComposableEditor) {
|
|
28
28
|
throw new Error('Expected child to be of type `Editor`');
|
|
29
29
|
}
|
|
30
|
-
this.functionalEditor = child.type ===
|
|
30
|
+
this.functionalEditor = child.type === ComposableEditor;
|
|
31
31
|
if (!this.props.isExpanded) {
|
|
32
32
|
return /*#__PURE__*/React.createElement(IntlProviderIfMissingWrapper, null, /*#__PURE__*/React.createElement(ChromeCollapsed, {
|
|
33
33
|
onFocus: this.props.onFocus,
|
|
@@ -15,31 +15,12 @@ import { ContextAdapter } from '../nodeviews/context-adapter';
|
|
|
15
15
|
import EditorContext from '../ui/EditorContext';
|
|
16
16
|
import { useSetPresetContext } from '../presets/context';
|
|
17
17
|
import { RenderTracking } from '../utils/performance/components/RenderTracking';
|
|
18
|
-
import useMeasureEditorMountTime from './hooks/useMeasureEditorMountTime';
|
|
19
|
-
import useProviderFactory from './hooks/useProviderFactory';
|
|
20
18
|
import { getBaseFontSize } from './utils/getBaseFontSize';
|
|
21
|
-
/**
|
|
22
|
-
* EditorInternal is used for the internal editor react component
|
|
23
|
-
* with the lifecycle methods extracted into hooks.
|
|
24
|
-
*/
|
|
25
|
-
export default function EditorInternal(props) {
|
|
26
|
-
var editorProps = props.props,
|
|
27
|
-
getExperienceStore = props.getExperienceStore,
|
|
28
|
-
editorActions = props.editorActions,
|
|
29
|
-
createAnalyticsEvent = props.createAnalyticsEvent;
|
|
30
|
-
useMeasureEditorMountTime(editorProps, getExperienceStore, createAnalyticsEvent);
|
|
31
|
-
var providerFactory = useProviderFactory(editorProps, editorActions, createAnalyticsEvent);
|
|
32
|
-
var updatedProps = _objectSpread(_objectSpread({}, props), {}, {
|
|
33
|
-
providerFactory: providerFactory
|
|
34
|
-
});
|
|
35
|
-
return jsx(EditorInternalWithoutHooks, updatedProps);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
19
|
/**
|
|
39
20
|
* EditorInternalComponent is used to capture the common component
|
|
40
21
|
* from the `render` method of `Editor` and share it with `EditorNext`.
|
|
41
22
|
*/
|
|
42
|
-
export function
|
|
23
|
+
export function EditorInternal(_ref) {
|
|
43
24
|
var _props$performanceTra, _props$performanceTra2, _props$performanceTra3, _props$performanceTra4;
|
|
44
25
|
var props = _ref.props,
|
|
45
26
|
handleAnalyticsEvent = _ref.handleAnalyticsEvent,
|
|
@@ -17,10 +17,16 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
|
17
17
|
import { useConstructor } from '@atlaskit/editor-common/hooks';
|
|
18
18
|
import { useEditorContext } from '../ui/EditorContext';
|
|
19
19
|
import measurements from '../utils/performance/measure-enum';
|
|
20
|
-
import EditorInternal from './editor-internal';
|
|
20
|
+
import { EditorInternal } from './editor-internal';
|
|
21
21
|
import sendDurationAnalytics from './utils/sendDurationAnalytics';
|
|
22
22
|
import trackEditorActions from './utils/trackEditorActions';
|
|
23
|
-
|
|
23
|
+
import useMeasureEditorMountTime from './hooks/useMeasureEditorMountTime';
|
|
24
|
+
import useProviderFactory from './hooks/useProviderFactory';
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Editor wrapper that deals with the lifecycle logic of the editor
|
|
28
|
+
*/
|
|
29
|
+
function Editor(passedProps) {
|
|
24
30
|
var _editorContext$editor;
|
|
25
31
|
var defaultProps = {
|
|
26
32
|
appearance: 'comment',
|
|
@@ -68,6 +74,8 @@ export function Editor(passedProps) {
|
|
|
68
74
|
editorActions.current._privateUnregisterEditor();
|
|
69
75
|
(_props$onDestroy = props.onDestroy) === null || _props$onDestroy === void 0 ? void 0 : _props$onDestroy.call(props);
|
|
70
76
|
};
|
|
77
|
+
useMeasureEditorMountTime(props, getExperienceStore, createAnalyticsEvent);
|
|
78
|
+
var providerFactory = useProviderFactory(props, editorActions.current, createAnalyticsEvent);
|
|
71
79
|
return jsx(EditorInternal, {
|
|
72
80
|
props: props,
|
|
73
81
|
handleAnalyticsEvent: handleAnalyticsEvent,
|
|
@@ -78,12 +86,12 @@ export function Editor(passedProps) {
|
|
|
78
86
|
return (_props$onSave = props.onSave) === null || _props$onSave === void 0 ? void 0 : _props$onSave.call(props, view);
|
|
79
87
|
},
|
|
80
88
|
editorActions: editorActions.current,
|
|
81
|
-
getExperienceStore: getExperienceStore,
|
|
82
89
|
onEditorCreated: onEditorCreated,
|
|
83
|
-
onEditorDestroyed: onEditorDestroyed
|
|
90
|
+
onEditorDestroyed: onEditorDestroyed,
|
|
91
|
+
providerFactory: providerFactory
|
|
84
92
|
});
|
|
85
93
|
}
|
|
86
|
-
export
|
|
94
|
+
export function ComposableEditor(props) {
|
|
87
95
|
var editorSessionId = useRef(uuid());
|
|
88
96
|
return jsx(FabricEditorAnalyticsContext, {
|
|
89
97
|
data: {
|
|
@@ -95,7 +103,7 @@ export default function EditorNext(props) {
|
|
|
95
103
|
}
|
|
96
104
|
}, jsx(Editor, props));
|
|
97
105
|
}
|
|
98
|
-
|
|
106
|
+
ComposableEditor.propTypes = {
|
|
99
107
|
minHeight: function minHeight(_ref) {
|
|
100
108
|
var appearance = _ref.appearance,
|
|
101
109
|
_minHeight = _ref.minHeight;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { ComposableEditor } from './composable-editor/editor';
|
package/dist/esm/editor.js
CHANGED
|
@@ -11,14 +11,14 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
11
11
|
import React from 'react';
|
|
12
12
|
import { jsx } from '@emotion/react';
|
|
13
13
|
import editorDeprecationWarnings from './utils/editorDeprecationWarnings';
|
|
14
|
-
import
|
|
14
|
+
import { ComposableEditor } from './composable-editor';
|
|
15
15
|
import useUniversalPreset from './labs/next/presets/useUniversalPreset';
|
|
16
|
-
var
|
|
16
|
+
var ComposableEditorWrapper = function ComposableEditorWrapper(_ref) {
|
|
17
17
|
var props = _ref.props;
|
|
18
18
|
var preset = useUniversalPreset({
|
|
19
19
|
props: props
|
|
20
20
|
});
|
|
21
|
-
return jsx(
|
|
21
|
+
return jsx(ComposableEditor, _extends({
|
|
22
22
|
preset: preset
|
|
23
23
|
}, props));
|
|
24
24
|
};
|
|
@@ -35,7 +35,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
|
|
|
35
35
|
_createClass(Editor, [{
|
|
36
36
|
key: "render",
|
|
37
37
|
value: function render() {
|
|
38
|
-
return jsx(
|
|
38
|
+
return jsx(ComposableEditorWrapper, {
|
|
39
39
|
props: this.props
|
|
40
40
|
});
|
|
41
41
|
}
|
|
@@ -18,7 +18,6 @@ import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
|
|
|
18
18
|
import { themed } from '@atlaskit/theme/components';
|
|
19
19
|
import { borderRadius } from '@atlaskit/theme/constants';
|
|
20
20
|
import { DN70 } from '@atlaskit/theme/colors';
|
|
21
|
-
import { compareArrays, shallowEqual } from '../utils';
|
|
22
21
|
import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
|
|
23
22
|
import { FloatingToolbarButton as Button, Announcer } from '@atlaskit/editor-common/ui';
|
|
24
23
|
import Dropdown from './Dropdown';
|
|
@@ -26,6 +25,7 @@ import Select from './Select';
|
|
|
26
25
|
import Separator from './Separator';
|
|
27
26
|
import Input from './Input';
|
|
28
27
|
import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
|
|
28
|
+
import { areSameItems } from '@atlaskit/editor-common/floating-toolbar';
|
|
29
29
|
import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
|
|
30
30
|
import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
|
|
31
31
|
import { EmojiPickerButton } from './EmojiPickerButton';
|
|
@@ -246,71 +246,6 @@ var toolbarContainer = function toolbarContainer(theme, scrollable, hasSelect, f
|
|
|
246
246
|
var toolbarOverflow = function toolbarOverflow(scrollable, scrollDisabled, firstElementIsSelect) {
|
|
247
247
|
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n ", "\n"])), scrollable ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n ", "\n -webkit-overflow-scrolling: touch;\n padding: ", " 0 50px;\n > div {\n > div:first-child {\n ", "\n }\n > div:last-child {\n margin-right: ", ";\n }\n }\n "])), scrollDisabled ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n overflow: hidden;\n "]))) : css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n overflow-x: auto;\n overflow-y: hidden;\n "]))), "var(--ds-space-050, 4px)", firstElementIsSelect ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n margin-left: ", ";\n "])), "var(--ds-space-050, 4px)") : css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n margin-left: ", ";\n "])), "var(--ds-space-100, 8px)"), "var(--ds-space-100, 8px)") : css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n display: flex;\n "]))));
|
|
248
248
|
};
|
|
249
|
-
function makeSameType(_a, _b) {
|
|
250
|
-
return true;
|
|
251
|
-
}
|
|
252
|
-
var compareItemWithKeys = function compareItemWithKeys(leftItem, rightItem) {
|
|
253
|
-
var excludedKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
254
|
-
return Object.keys(leftItem).filter(function (key) {
|
|
255
|
-
return excludedKeys.indexOf(key) === -1;
|
|
256
|
-
}).every(function (key) {
|
|
257
|
-
return leftItem[key] instanceof Object ? shallowEqual(leftItem[key], rightItem[key]) : leftItem[key] === rightItem[key];
|
|
258
|
-
});
|
|
259
|
-
};
|
|
260
|
-
export var isSameItem = function isSameItem(leftItem, rightItem) {
|
|
261
|
-
if (leftItem.type !== rightItem.type) {
|
|
262
|
-
return false;
|
|
263
|
-
}
|
|
264
|
-
switch (leftItem.type) {
|
|
265
|
-
case 'button':
|
|
266
|
-
// Need to typecast `rightItem as typeof leftItem` otherwise we will
|
|
267
|
-
// have to put the `type !==` inside each case.
|
|
268
|
-
return compareItemWithKeys(leftItem, rightItem, ['type', 'onClick', 'onMouseEnter', 'onMouseLeave']);
|
|
269
|
-
case 'copy-button':
|
|
270
|
-
return compareItemWithKeys(leftItem, rightItem, ['type', 'items']);
|
|
271
|
-
case 'input':
|
|
272
|
-
return compareItemWithKeys(leftItem, rightItem, ['type', 'onSubmit', 'onBlur']);
|
|
273
|
-
case 'select':
|
|
274
|
-
if (makeSameType(leftItem, rightItem) && Array.isArray(leftItem.options) && Array.isArray(rightItem.options) && !compareArrays(leftItem.options, rightItem.options, function (left, right) {
|
|
275
|
-
return compareItemWithKeys(left, right);
|
|
276
|
-
})) {
|
|
277
|
-
return false;
|
|
278
|
-
}
|
|
279
|
-
return compareItemWithKeys(leftItem, rightItem, ['type', 'onChange', 'options']);
|
|
280
|
-
case 'dropdown':
|
|
281
|
-
if (makeSameType(leftItem, rightItem) && Array.isArray(leftItem.options) && Array.isArray(rightItem.options) &&
|
|
282
|
-
// @ts-expect-error TS2345: Argument of type 'DropdownOptionT<Function>[]' is not assignable to parameter of type 'any[][]'
|
|
283
|
-
!compareArrays(leftItem.options, rightItem.options, function (left, right) {
|
|
284
|
-
return (
|
|
285
|
-
// @ts-expect-error TS2322: Type '"onClick"' is not assignable to type 'keyof any[]'
|
|
286
|
-
compareItemWithKeys(left, right, ['onClick'])
|
|
287
|
-
);
|
|
288
|
-
})) {
|
|
289
|
-
return false;
|
|
290
|
-
}
|
|
291
|
-
return compareItemWithKeys(leftItem, rightItem, ['type', 'options']);
|
|
292
|
-
case 'custom':
|
|
293
|
-
return false;
|
|
294
|
-
case 'separator':
|
|
295
|
-
return compareItemWithKeys(leftItem, rightItem);
|
|
296
|
-
case 'extensions-placeholder':
|
|
297
|
-
return compareItemWithKeys(leftItem, rightItem);
|
|
298
|
-
}
|
|
299
|
-
};
|
|
300
|
-
export var areSameItems = function areSameItems(leftArr, rightArr) {
|
|
301
|
-
if (leftArr === undefined && rightArr === undefined) {
|
|
302
|
-
return true;
|
|
303
|
-
}
|
|
304
|
-
if (leftArr === undefined || rightArr === undefined) {
|
|
305
|
-
return false;
|
|
306
|
-
}
|
|
307
|
-
if (leftArr.length !== rightArr.length) {
|
|
308
|
-
return false;
|
|
309
|
-
}
|
|
310
|
-
return leftArr.every(function (item, index) {
|
|
311
|
-
return isSameItem(rightArr[index], item);
|
|
312
|
-
});
|
|
313
|
-
};
|
|
314
249
|
var Toolbar = /*#__PURE__*/function (_Component) {
|
|
315
250
|
_inherits(Toolbar, _Component);
|
|
316
251
|
var _super = _createSuper(Toolbar);
|
|
@@ -1,40 +1,3 @@
|
|
|
1
|
-
export var shallowEqual = function shallowEqual(objA, objB) {
|
|
2
|
-
if (objA === objB) {
|
|
3
|
-
return true;
|
|
4
|
-
}
|
|
5
|
-
if (objA == null || objB == null) {
|
|
6
|
-
return false;
|
|
7
|
-
}
|
|
8
|
-
var keysA = Object.keys(objA);
|
|
9
|
-
var keysB = Object.keys(objB);
|
|
10
|
-
if (keysA.length !== keysB.length) {
|
|
11
|
-
return false;
|
|
12
|
-
}
|
|
13
|
-
var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
|
|
14
|
-
for (var idx = 0; idx < keysA.length; idx++) {
|
|
15
|
-
var key = keysA[idx];
|
|
16
|
-
if (!bHasOwnProperty(key)) {
|
|
17
|
-
return false;
|
|
18
|
-
}
|
|
19
|
-
if (objA[key] !== objB[key]) {
|
|
20
|
-
return false;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
return true;
|
|
24
|
-
};
|
|
25
|
-
export var compareArrays = function compareArrays(left, right) {
|
|
26
|
-
var compareFn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : shallowEqual;
|
|
27
|
-
if (left.length !== right.length) {
|
|
28
|
-
return false;
|
|
29
|
-
}
|
|
30
|
-
for (var idx = 0; idx < left.length; idx++) {
|
|
31
|
-
if (!compareFn(left[idx], right[idx])) {
|
|
32
|
-
return false;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
return true;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
1
|
// find node in descendants by condition
|
|
39
2
|
export function findNode(parent, predicate) {
|
|
40
3
|
var matchedNode;
|
|
@@ -19,6 +19,7 @@ import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
|
|
|
19
19
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
20
20
|
import ToolbarButton from '../../../../ui/ToolbarButton';
|
|
21
21
|
import { separatorStyles, buttonGroupStyle, wrapperStyle } from '@atlaskit/editor-common/styles';
|
|
22
|
+
import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
|
|
22
23
|
import { insertDate } from '../../../date/actions';
|
|
23
24
|
import { showPlaceholderFloatingToolbar } from '../../../placeholder-text/actions';
|
|
24
25
|
import { insertLayoutColumnsWithAnalytics } from '../../../layout/actions';
|
|
@@ -433,7 +434,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
433
434
|
mountTo: popupsMountPoint,
|
|
434
435
|
boundariesElement: popupsBoundariesElement,
|
|
435
436
|
scrollableElement: popupsScrollableElement,
|
|
436
|
-
focusTrap: true
|
|
437
|
+
focusTrap: true,
|
|
438
|
+
zIndex: akEditorMenuZIndex
|
|
437
439
|
}, jsx(EmojiPickerWithListeners, {
|
|
438
440
|
emojiProvider: emojiProvider,
|
|
439
441
|
onSelection: this.handleSelectedEmoji,
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { pluginKey as floatingToolbarPluginKey } from '../../floating-toolbar';
|
|
3
|
-
import { pluginKey as statusPluginKey } from '../../status/plugin-key';
|
|
4
|
-
import { areSameItems } from '../../floating-toolbar/ui/Toolbar';
|
|
1
|
+
import { areSameItems } from '@atlaskit/editor-common/floating-toolbar';
|
|
5
2
|
import { isTypeAheadOpen } from '../../type-ahead/utils';
|
|
6
3
|
import { trackerStore } from '..';
|
|
7
4
|
var areToolbarsSame = function areToolbarsSame(left, right) {
|
|
@@ -33,6 +30,26 @@ export var subscribeToToolbarAndPickerUpdates = function subscribeToToolbarAndPi
|
|
|
33
30
|
if (isTypeAheadOpen(newEditorState)) {
|
|
34
31
|
return;
|
|
35
32
|
}
|
|
33
|
+
|
|
34
|
+
// Creating fake plugin keys for these plugins for the mean time until all these plugins are extracted.
|
|
35
|
+
var datePluginKey = {
|
|
36
|
+
key: 'datePlugin$',
|
|
37
|
+
getState: function getState(state) {
|
|
38
|
+
return state['datePlugin$'];
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
var statusPluginKey = {
|
|
42
|
+
key: 'statusPlugin$',
|
|
43
|
+
getState: function getState(state) {
|
|
44
|
+
return state['statusPlugin$'];
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
var floatingToolbarPluginKey = {
|
|
48
|
+
key: 'floatingToolbarPluginKey$',
|
|
49
|
+
getState: function getState(state) {
|
|
50
|
+
return state['floatingToolbarPluginKey$'];
|
|
51
|
+
}
|
|
52
|
+
};
|
|
36
53
|
var dateState = datePluginKey.getState(newEditorState);
|
|
37
54
|
var statusState = statusPluginKey.getState(newEditorState);
|
|
38
55
|
var _ref2 = floatingToolbarPluginKey.getState(newEditorState),
|
|
@@ -10,7 +10,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
10
10
|
import { IntlProviderIfMissingWrapper } from '@atlaskit/editor-common/ui';
|
|
11
11
|
import React from 'react';
|
|
12
12
|
import Editor from '../../editor';
|
|
13
|
-
import
|
|
13
|
+
import { ComposableEditor } from '../../composable-editor';
|
|
14
14
|
import EditorWithActions from '../../labs/EditorWithActions';
|
|
15
15
|
import ChromeCollapsed from '../ChromeCollapsed';
|
|
16
16
|
var CollapsedEditor = /*#__PURE__*/function (_React$Component) {
|
|
@@ -45,10 +45,10 @@ var CollapsedEditor = /*#__PURE__*/function (_React$Component) {
|
|
|
45
45
|
value: function render() {
|
|
46
46
|
var _this2 = this;
|
|
47
47
|
var child = React.Children.only(this.props.children);
|
|
48
|
-
if (child.type !== Editor && child.type !== EditorWithActions && child.type !==
|
|
48
|
+
if (child.type !== Editor && child.type !== EditorWithActions && child.type !== ComposableEditor) {
|
|
49
49
|
throw new Error('Expected child to be of type `Editor`');
|
|
50
50
|
}
|
|
51
|
-
this.functionalEditor = child.type ===
|
|
51
|
+
this.functionalEditor = child.type === ComposableEditor;
|
|
52
52
|
if (!this.props.isExpanded) {
|
|
53
53
|
return /*#__PURE__*/React.createElement(IntlProviderIfMissingWrapper, null, /*#__PURE__*/React.createElement(ChromeCollapsed, {
|
|
54
54
|
onFocus: this.props.onFocus,
|
|
@@ -5,17 +5,15 @@ import type { FireAnalyticsCallback } from '@atlaskit/editor-common/analytics';
|
|
|
5
5
|
import type { EditorPresetBuilder } from '@atlaskit/editor-common/preset';
|
|
6
6
|
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
7
7
|
import type { AllEditorPresetPluginTypes, Transformer } from '@atlaskit/editor-common/types';
|
|
8
|
-
import type { ExperienceStore } from '@atlaskit/editor-common/ufo';
|
|
9
8
|
import type EditorActions from '../actions';
|
|
10
9
|
import type { EventDispatcher } from '../event-dispatcher';
|
|
11
|
-
import type { EditorNextProps
|
|
12
|
-
interface
|
|
13
|
-
props:
|
|
10
|
+
import type { EditorNextProps } from '../types/editor-props';
|
|
11
|
+
interface InternalProps {
|
|
12
|
+
props: EditorNextProps;
|
|
14
13
|
handleAnalyticsEvent: FireAnalyticsCallback;
|
|
15
14
|
createAnalyticsEvent: CreateUIAnalyticsEvent;
|
|
16
15
|
handleSave: (view: EditorView) => void;
|
|
17
16
|
editorActions: EditorActions;
|
|
18
|
-
getExperienceStore: () => ExperienceStore | undefined;
|
|
19
17
|
onEditorCreated: (instance: {
|
|
20
18
|
view: EditorView;
|
|
21
19
|
eventDispatcher: EventDispatcher;
|
|
@@ -26,18 +24,11 @@ interface Props<PropsType> {
|
|
|
26
24
|
transformer?: Transformer<string>;
|
|
27
25
|
}) => void;
|
|
28
26
|
preset: EditorPresetBuilder<string[], AllEditorPresetPluginTypes[]>;
|
|
29
|
-
}
|
|
30
|
-
interface InternalProps extends Omit<Props<EditorNextProps | EditorProps>, 'getExperienceStore'> {
|
|
31
27
|
providerFactory: ProviderFactory;
|
|
32
28
|
}
|
|
33
|
-
/**
|
|
34
|
-
* EditorInternal is used for the internal editor react component
|
|
35
|
-
* with the lifecycle methods extracted into hooks.
|
|
36
|
-
*/
|
|
37
|
-
export default function EditorInternal(props: Props<EditorNextProps>): jsx.JSX.Element;
|
|
38
29
|
/**
|
|
39
30
|
* EditorInternalComponent is used to capture the common component
|
|
40
31
|
* from the `render` method of `Editor` and share it with `EditorNext`.
|
|
41
32
|
*/
|
|
42
|
-
export declare function
|
|
33
|
+
export declare function EditorInternal({ props, handleAnalyticsEvent, createAnalyticsEvent, handleSave, editorActions, providerFactory, onEditorCreated, onEditorDestroyed, preset, }: InternalProps): jsx.JSX.Element;
|
|
43
34
|
export {};
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { jsx } from '@emotion/react';
|
|
2
2
|
import type { EditorNextProps } from '../types/editor-props';
|
|
3
|
-
export declare function
|
|
4
|
-
declare
|
|
5
|
-
declare namespace EditorNext {
|
|
3
|
+
export declare function ComposableEditor(props: EditorNextProps): jsx.JSX.Element;
|
|
4
|
+
export declare namespace ComposableEditor {
|
|
6
5
|
var propTypes: {
|
|
7
6
|
minHeight: ({ appearance, minHeight, }: Pick<EditorNextProps, "appearance" | "minHeight">) => Error | null;
|
|
8
7
|
preset: ({ preset }: Pick<EditorNextProps, "preset">) => Error | null;
|
|
9
8
|
};
|
|
10
9
|
}
|
|
11
|
-
export default EditorNext;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
2
|
-
import { ExperienceStore } from '@atlaskit/editor-common/ufo';
|
|
3
|
-
import { EditorNextProps, EditorProps } from '../../types/editor-props';
|
|
1
|
+
import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
2
|
+
import type { ExperienceStore } from '@atlaskit/editor-common/ufo';
|
|
3
|
+
import type { EditorNextProps, EditorProps } from '../../types/editor-props';
|
|
4
4
|
/**
|
|
5
5
|
*
|
|
6
6
|
* Hook to run the analytics for the Editor component.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Providers } from '@atlaskit/editor-common/provider-factory';
|
|
2
|
-
import { EditorProps } from '../../types/editor-props';
|
|
1
|
+
import type { Providers } from '@atlaskit/editor-common/provider-factory';
|
|
2
|
+
import type { EditorProps } from '../../types/editor-props';
|
|
3
3
|
type Complete<T> = {
|
|
4
4
|
[P in keyof Required<T>]: Pick<T, P> extends Required<Pick<T, P>> ? T[P] : T[P] | undefined;
|
|
5
5
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
2
|
-
import { ACTION } from '@atlaskit/editor-common/analytics';
|
|
3
|
-
import { ExperienceStore } from '@atlaskit/editor-common/ufo';
|
|
4
|
-
import { EditorProps } from '../../types/editor-props';
|
|
1
|
+
import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
2
|
+
import type { ACTION } from '@atlaskit/editor-common/analytics';
|
|
3
|
+
import type { ExperienceStore } from '@atlaskit/editor-common/ufo';
|
|
4
|
+
import type { EditorProps } from '../../types/editor-props';
|
|
5
5
|
/**
|
|
6
6
|
*
|
|
7
7
|
* Util function to be used with the Editor component to send duration analytics
|
package/dist/{types-ts4.5/editor-next → types/composable-editor}/utils/trackEditorActions.d.ts
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { FireAnalyticsCallback } from '@atlaskit/editor-common/analytics';
|
|
2
|
-
import EditorActions from '../../actions';
|
|
3
|
-
import { PerformanceTracking } from '../../types/performance-tracking';
|
|
1
|
+
import type { FireAnalyticsCallback } from '@atlaskit/editor-common/analytics';
|
|
2
|
+
import type EditorActions from '../../actions';
|
|
3
|
+
import type { PerformanceTracking } from '../../types/performance-tracking';
|
|
4
4
|
/**
|
|
5
5
|
*
|
|
6
6
|
* Util function to be used with the Editor to track the EditorActions prop
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { ComposableEditor } from './composable-editor/editor';
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
-
import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
|
|
2
|
+
import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
|
|
3
3
|
export declare const createPlugin: (dispatch: Dispatch) => SafePlugin<import("@atlaskit/editor-plugin-floating-toolbar").FloatingToolbarPluginData>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { ValueType } from '@atlaskit/select';
|
|
2
|
+
import type { ValueType } from '@atlaskit/select';
|
|
3
3
|
import type { RenderOptionsPropsT, SelectOption } from '@atlaskit/editor-common/types';
|
|
4
4
|
export type { RenderOptionsPropsT, SelectOption };
|
|
5
5
|
export interface Props {
|
|
@@ -6,11 +6,12 @@ import type { ExtensionProvider } from '@atlaskit/editor-common/extensions';
|
|
|
6
6
|
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
7
7
|
import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
8
8
|
import type { WrappedComponentProps } from 'react-intl-next';
|
|
9
|
-
import type {
|
|
9
|
+
import type { FeatureFlags, PluginInjectionAPIWithDependencies, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
10
10
|
import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
|
|
11
11
|
import type { contextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
|
|
12
12
|
import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
|
|
13
|
-
|
|
13
|
+
import type { Item } from '@atlaskit/editor-common/floating-toolbar';
|
|
14
|
+
export type { Item };
|
|
14
15
|
export interface Props {
|
|
15
16
|
items: Array<Item>;
|
|
16
17
|
dispatchCommand: (command?: Function) => void;
|
|
@@ -33,8 +34,6 @@ export interface Props {
|
|
|
33
34
|
OptionalPlugin<ExtensionPlugin>
|
|
34
35
|
]> | undefined;
|
|
35
36
|
}
|
|
36
|
-
export declare const isSameItem: (leftItem: Item, rightItem: Item) => boolean;
|
|
37
|
-
export declare const areSameItems: (leftArr?: Array<Item>, rightArr?: Array<Item>) => boolean;
|
|
38
37
|
export interface State {
|
|
39
38
|
scrollDisabled: boolean;
|
|
40
39
|
mounted: boolean;
|
|
@@ -1,4 +1,2 @@
|
|
|
1
1
|
import type { Node } from '@atlaskit/editor-prosemirror/model';
|
|
2
|
-
export declare const shallowEqual: (objA?: Object, objB?: Object) => boolean;
|
|
3
|
-
export declare const compareArrays: <T extends any[]>(left: T[], right: T[], compareFn?: (left: T, right: T) => boolean) => boolean;
|
|
4
2
|
export declare function findNode(parent: Node, predicate: (node: Node) => boolean): Node | undefined;
|