@atlaskit/editor-core 191.3.2 → 191.4.3
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 +17 -0
- package/dist/cjs/editor-context.js +13 -0
- package/dist/cjs/ui/Appearance/Comment/Toolbar.js +1 -2
- package/dist/cjs/ui/Appearance/FullPage/MainToolbar.js +1 -2
- package/dist/cjs/use-preset.js +2 -1
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/editor-context.js +1 -0
- package/dist/es2019/ui/Appearance/Comment/Toolbar.js +1 -2
- package/dist/es2019/ui/Appearance/FullPage/MainToolbar.js +1 -2
- package/dist/es2019/use-preset.js +1 -1
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/editor-context.js +1 -0
- package/dist/esm/ui/Appearance/Comment/Toolbar.js +1 -2
- package/dist/esm/ui/Appearance/FullPage/MainToolbar.js +1 -2
- package/dist/esm/use-preset.js +2 -1
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/editor-context.d.ts +1 -0
- package/dist/types/use-preset.d.ts +1 -1
- package/dist/types-ts4.5/editor-context.d.ts +1 -0
- package/dist/types-ts4.5/use-preset.d.ts +1 -1
- package/docs/0-intro.tsx +16 -38
- package/editor-context/package.json +15 -0
- package/package.json +4 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 191.4.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#68380](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68380) [`180e570d3332`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/180e570d3332) - Consolidate media grouped layout ff to inline image base ff
|
|
8
|
+
|
|
9
|
+
## 191.4.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [#68051](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68051) [`cc37c5349123`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cc37c5349123) - Export the EditorContext via a new entrypoint on editor core (/editor-context). Make the dependencies array for usePreset empty by default.
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- [#67125](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67125) [`52098b429104`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/52098b429104) - [ux] ED-19383: Updated main toolbar boxshadow to be not transparent
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 191.3.2
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "EditorContext", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function get() {
|
|
10
|
+
return _EditorContext.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _EditorContext = _interopRequireDefault(require("./ui/EditorContext"));
|
|
@@ -13,7 +13,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
|
|
|
13
13
|
var _react = _interopRequireWildcard(require("react"));
|
|
14
14
|
var _react2 = require("@emotion/react");
|
|
15
15
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
16
|
-
var _colors = require("@atlaskit/theme/colors");
|
|
17
16
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
18
17
|
/** @jsx jsx */
|
|
19
18
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -24,7 +23,7 @@ var mainToolbarWrapperStyle = function mainToolbarWrapperStyle() {
|
|
|
24
23
|
var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
25
24
|
return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n align-items: center;\n padding: ", " ", " 0;\n display: flex;\n height: auto;\n background-color: ", ";\n box-shadow: none;\n padding-left: ", ";\n\n & > div {\n > :first-child:not(style),\n > style:first-child + * {\n margin-left: 0;\n }\n ", "\n }\n\n .block-type-btn {\n padding-left: 0;\n }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n flex-direction: column-reverse;\n align-items: end;\n display: flex;\n justify-content: flex-end;\n }\n\n //make this more explicit for a toolbar\n > *:nth-child(1) {\n @media (max-width: ").concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n > div:nth-child(2) {\n justify-content: flex-end;\n display: flex;\n }\n }\n }\n "));
|
|
26
25
|
};
|
|
27
|
-
var stickyToolbarWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n /* stylelint-disable declaration-block-no-duplicate-properties */\n position: relative;\n position: sticky;\n /* stylelint-enable declaration-block-no-duplicate-properties */\n padding-bottom: ", ";\n z-index: ", ";\n transition: box-shadow ease-in-out 0.2s;\n &.show-keyline {\n box-shadow: 0 ", "px 0 0\n ", ";\n }\n"])), "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorMenuZIndex, _editorSharedStyles.akEditorToolbarKeylineHeight, "var(--ds-
|
|
26
|
+
var stickyToolbarWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n /* stylelint-disable declaration-block-no-duplicate-properties */\n position: relative;\n position: sticky;\n /* stylelint-enable declaration-block-no-duplicate-properties */\n padding-bottom: ", ";\n z-index: ", ";\n transition: box-shadow ease-in-out 0.2s;\n &.show-keyline {\n box-shadow: 0 ", "px 0 0\n ", ";\n }\n"])), "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorMenuZIndex, _editorSharedStyles.akEditorToolbarKeylineHeight, "var(--ds-background-accent-gray-subtlest, #F1F2F4)");
|
|
28
27
|
var StickyToolbar = function StickyToolbar(props) {
|
|
29
28
|
var _useState = (0, _react.useState)(0),
|
|
30
29
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -8,13 +8,12 @@ exports.nonCustomToolbarWrapperStyle = exports.mainToolbarStyle = exports.mainTo
|
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
11
|
-
var _colors = require("@atlaskit/theme/colors");
|
|
12
11
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
13
12
|
var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = exports.MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
|
|
14
13
|
var toolbarLineHeight = 56;
|
|
15
14
|
|
|
16
15
|
// box-shadow is overriden by the mainToolbar
|
|
17
|
-
var mainToolbarWithKeyline = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n box-shadow: 0 ", "px 0 0\n ", ";\n"])), _editorSharedStyles.akEditorToolbarKeylineHeight, "var(--ds-
|
|
16
|
+
var mainToolbarWithKeyline = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n box-shadow: 0 ", "px 0 0\n ", ";\n"])), _editorSharedStyles.akEditorToolbarKeylineHeight, "var(--ds-background-accent-gray-subtlest, #F1F2F4)");
|
|
18
17
|
var mainToolbarTwoLineStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n @media (max-width: ", "px) {\n flex-wrap: wrap;\n height: calc(", "px * 2);\n }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
|
|
19
18
|
var mainToolbar = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n align-items: center;\n box-shadow: none;\n transition: box-shadow 200ms ", ";\n z-index: ", ";\n display: flex;\n height: ", "px;\n flex-shrink: 0;\n // TODO: https://product-fabric.atlassian.net/browse/DSP-4456\n background-color: ", ";\n\n & object {\n height: 0 !important;\n }\n\n @media (max-width: ", "px) {\n display: grid;\n height: calc(", "px * 2);\n }\n"])), _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorFloatingDialogZIndex, toolbarLineHeight, "var(--ds-surface, white)", _editorSharedStyles.akEditorMobileMaxWidth, toolbarLineHeight);
|
|
20
19
|
var mainToolbarStyle = exports.mainToolbarStyle = function mainToolbarStyle(showKeyline, twoLineEditorToolbar) {
|
package/dist/cjs/use-preset.js
CHANGED
|
@@ -39,7 +39,8 @@ var _context = require("./presets/context");
|
|
|
39
39
|
* }
|
|
40
40
|
* ```
|
|
41
41
|
*/
|
|
42
|
-
function usePreset(createPreset
|
|
42
|
+
function usePreset(createPreset) {
|
|
43
|
+
var dependencies = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
43
44
|
var editorApi = (0, _context.usePresetContext)();
|
|
44
45
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
45
46
|
var preset = (0, _react.useMemo)(createPreset, dependencies);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as EditorContext } from './ui/EditorContext';
|
|
@@ -4,7 +4,6 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
4
4
|
import React, { useEffect, useState } from 'react';
|
|
5
5
|
import { css, jsx } from '@emotion/react';
|
|
6
6
|
import { akEditorMenuZIndex, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
|
|
7
|
-
import { N30 } from '@atlaskit/theme/colors';
|
|
8
7
|
export const TableControlsPadding = 20;
|
|
9
8
|
const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
|
|
10
9
|
const mainToolbarWrapperStyle = (isTwoLineEditorToolbar = false) => css`
|
|
@@ -56,7 +55,7 @@ const stickyToolbarWrapperStyle = css`
|
|
|
56
55
|
transition: box-shadow ease-in-out 0.2s;
|
|
57
56
|
&.show-keyline {
|
|
58
57
|
box-shadow: 0 ${akEditorToolbarKeylineHeight}px 0 0
|
|
59
|
-
${
|
|
58
|
+
${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"};
|
|
60
59
|
}
|
|
61
60
|
`;
|
|
62
61
|
const StickyToolbar = props => {
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { css } from '@emotion/react';
|
|
2
2
|
import { akEditorFloatingDialogZIndex, akEditorMobileMaxWidth, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
|
|
3
|
-
import { N30 } from '@atlaskit/theme/colors';
|
|
4
3
|
export const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
|
|
5
4
|
const toolbarLineHeight = 56;
|
|
6
5
|
|
|
7
6
|
// box-shadow is overriden by the mainToolbar
|
|
8
7
|
const mainToolbarWithKeyline = css`
|
|
9
8
|
box-shadow: 0 ${akEditorToolbarKeylineHeight}px 0 0
|
|
10
|
-
${
|
|
9
|
+
${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"};
|
|
11
10
|
`;
|
|
12
11
|
const mainToolbarTwoLineStyle = css`
|
|
13
12
|
@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
|
|
@@ -33,7 +33,7 @@ import { usePresetContext } from './presets/context';
|
|
|
33
33
|
* }
|
|
34
34
|
* ```
|
|
35
35
|
*/
|
|
36
|
-
export function usePreset(createPreset, dependencies) {
|
|
36
|
+
export function usePreset(createPreset, dependencies = []) {
|
|
37
37
|
const editorApi = usePresetContext();
|
|
38
38
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
39
|
const preset = useMemo(createPreset, dependencies);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "191.3
|
|
2
|
+
export const version = "191.4.3";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as EditorContext } from './ui/EditorContext';
|
|
@@ -8,14 +8,13 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
|
8
8
|
import React, { useEffect, useState } from 'react';
|
|
9
9
|
import { css, jsx } from '@emotion/react';
|
|
10
10
|
import { akEditorMenuZIndex, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
|
|
11
|
-
import { N30 } from '@atlaskit/theme/colors';
|
|
12
11
|
export var TableControlsPadding = 20;
|
|
13
12
|
var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
|
|
14
13
|
var mainToolbarWrapperStyle = function mainToolbarWrapperStyle() {
|
|
15
14
|
var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
16
15
|
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n align-items: center;\n padding: ", " ", " 0;\n display: flex;\n height: auto;\n background-color: ", ";\n box-shadow: none;\n padding-left: ", ";\n\n & > div {\n > :first-child:not(style),\n > style:first-child + * {\n margin-left: 0;\n }\n ", "\n }\n\n .block-type-btn {\n padding-left: 0;\n }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n flex-direction: column-reverse;\n align-items: end;\n display: flex;\n justify-content: flex-end;\n }\n\n //make this more explicit for a toolbar\n > *:nth-child(1) {\n @media (max-width: ").concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n > div:nth-child(2) {\n justify-content: flex-end;\n display: flex;\n }\n }\n }\n "));
|
|
17
16
|
};
|
|
18
|
-
var stickyToolbarWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n /* stylelint-disable declaration-block-no-duplicate-properties */\n position: relative;\n position: sticky;\n /* stylelint-enable declaration-block-no-duplicate-properties */\n padding-bottom: ", ";\n z-index: ", ";\n transition: box-shadow ease-in-out 0.2s;\n &.show-keyline {\n box-shadow: 0 ", "px 0 0\n ", ";\n }\n"])), "var(--ds-space-100, 8px)", akEditorMenuZIndex, akEditorToolbarKeylineHeight, "var(--ds-
|
|
17
|
+
var stickyToolbarWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n /* stylelint-disable declaration-block-no-duplicate-properties */\n position: relative;\n position: sticky;\n /* stylelint-enable declaration-block-no-duplicate-properties */\n padding-bottom: ", ";\n z-index: ", ";\n transition: box-shadow ease-in-out 0.2s;\n &.show-keyline {\n box-shadow: 0 ", "px 0 0\n ", ";\n }\n"])), "var(--ds-space-100, 8px)", akEditorMenuZIndex, akEditorToolbarKeylineHeight, "var(--ds-background-accent-gray-subtlest, #F1F2F4)");
|
|
19
18
|
var StickyToolbar = function StickyToolbar(props) {
|
|
20
19
|
var _useState = useState(0),
|
|
21
20
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -2,12 +2,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
|
|
|
2
2
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
3
3
|
import { css } from '@emotion/react';
|
|
4
4
|
import { akEditorFloatingDialogZIndex, akEditorMobileMaxWidth, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
|
|
5
|
-
import { N30 } from '@atlaskit/theme/colors';
|
|
6
5
|
export var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
|
|
7
6
|
var toolbarLineHeight = 56;
|
|
8
7
|
|
|
9
8
|
// box-shadow is overriden by the mainToolbar
|
|
10
|
-
var mainToolbarWithKeyline = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n box-shadow: 0 ", "px 0 0\n ", ";\n"])), akEditorToolbarKeylineHeight, "var(--ds-
|
|
9
|
+
var mainToolbarWithKeyline = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n box-shadow: 0 ", "px 0 0\n ", ";\n"])), akEditorToolbarKeylineHeight, "var(--ds-background-accent-gray-subtlest, #F1F2F4)");
|
|
11
10
|
var mainToolbarTwoLineStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n @media (max-width: ", "px) {\n flex-wrap: wrap;\n height: calc(", "px * 2);\n }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
|
|
12
11
|
var mainToolbar = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n align-items: center;\n box-shadow: none;\n transition: box-shadow 200ms ", ";\n z-index: ", ";\n display: flex;\n height: ", "px;\n flex-shrink: 0;\n // TODO: https://product-fabric.atlassian.net/browse/DSP-4456\n background-color: ", ";\n\n & object {\n height: 0 !important;\n }\n\n @media (max-width: ", "px) {\n display: grid;\n height: calc(", "px * 2);\n }\n"])), akEditorSwoopCubicBezier, akEditorFloatingDialogZIndex, toolbarLineHeight, "var(--ds-surface, white)", akEditorMobileMaxWidth, toolbarLineHeight);
|
|
13
12
|
export var mainToolbarStyle = function mainToolbarStyle(showKeyline, twoLineEditorToolbar) {
|
package/dist/esm/use-preset.js
CHANGED
|
@@ -33,7 +33,8 @@ import { usePresetContext } from './presets/context';
|
|
|
33
33
|
* }
|
|
34
34
|
* ```
|
|
35
35
|
*/
|
|
36
|
-
export function usePreset(createPreset
|
|
36
|
+
export function usePreset(createPreset) {
|
|
37
|
+
var dependencies = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
37
38
|
var editorApi = usePresetContext();
|
|
38
39
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
40
|
var preset = useMemo(createPreset, dependencies);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "191.3
|
|
2
|
+
export var version = "191.4.3";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as EditorContext } from './ui/EditorContext';
|
|
@@ -38,5 +38,5 @@ interface PresetAPI<PluginNames extends string[] = [], StackPlugins extends AllE
|
|
|
38
38
|
* }
|
|
39
39
|
* ```
|
|
40
40
|
*/
|
|
41
|
-
export declare function usePreset<PluginNames extends string[] = [], StackPlugins extends AllEditorPresetPluginTypes[] = []>(createPreset: () => EditorPresetBuilder<PluginNames, StackPlugins>, dependencies
|
|
41
|
+
export declare function usePreset<PluginNames extends string[] = [], StackPlugins extends AllEditorPresetPluginTypes[] = []>(createPreset: () => EditorPresetBuilder<PluginNames, StackPlugins>, dependencies?: DependencyList): PresetAPI<PluginNames, StackPlugins>;
|
|
42
42
|
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as EditorContext } from './ui/EditorContext';
|
|
@@ -42,5 +42,5 @@ interface PresetAPI<PluginNames extends string[] = [
|
|
|
42
42
|
*/
|
|
43
43
|
export declare function usePreset<PluginNames extends string[] = [
|
|
44
44
|
], StackPlugins extends AllEditorPresetPluginTypes[] = [
|
|
45
|
-
]>(createPreset: () => EditorPresetBuilder<PluginNames, StackPlugins>, dependencies
|
|
45
|
+
]>(createPreset: () => EditorPresetBuilder<PluginNames, StackPlugins>, dependencies?: DependencyList): PresetAPI<PluginNames, StackPlugins>;
|
|
46
46
|
export {};
|
package/docs/0-intro.tsx
CHANGED
|
@@ -55,32 +55,10 @@ import { usePreset } from '@atlaskit/editor-core/use-preset';
|
|
|
55
55
|
import { basePlugin } from '@atlaskit/editor-plugin-base';
|
|
56
56
|
|
|
57
57
|
const CommentEditor = () => {
|
|
58
|
-
const { preset } = usePreset(() =>
|
|
59
|
-
new EditorPresetBuilder().add(basePlugin)
|
|
60
|
-
, []);
|
|
58
|
+
const { preset } = usePreset(() => new EditorPresetBuilder().add(basePlugin));
|
|
61
59
|
|
|
62
60
|
return <ComposableEditor preset={preset} />;
|
|
63
61
|
};
|
|
64
|
-
`}
|
|
65
|
-
|
|
66
|
-
You can enable more editor functionality by passing extra plugins to the preset as discussed below.
|
|
67
|
-
|
|
68
|
-
If coming from the legacy editor, the simplest migration would be via the \`universal\` preset.
|
|
69
|
-
|
|
70
|
-
**Warning**: The \`universal\` preset brings in all editor plugins which can impact heavily bundle size. It is generally recommended to build your own custom preset as will be discussed.
|
|
71
|
-
|
|
72
|
-
${code`
|
|
73
|
-
import { ComposableEditor } from '@atlaskit/editor-core/composable-editor';
|
|
74
|
-
import { useUniversalPreset } from '@atlaskit/editor-core/preset-universal';
|
|
75
|
-
|
|
76
|
-
const CommentEditor = () => {
|
|
77
|
-
const presetProps = {
|
|
78
|
-
props: {},
|
|
79
|
-
};
|
|
80
|
-
const universalPreset = useUniversalPreset(presetProps);
|
|
81
|
-
|
|
82
|
-
return <ComposableEditor preset={universalPreset} />;
|
|
83
|
-
};
|
|
84
62
|
`}
|
|
85
63
|
|
|
86
64
|
## Configuration
|
|
@@ -99,7 +77,7 @@ import { usePreset } from '@atlaskit/editor-core/use-preset';
|
|
|
99
77
|
|
|
100
78
|
const createPreset = () =>
|
|
101
79
|
createDefaultPreset({ featureFlags: {}, paste: {} });
|
|
102
|
-
const { preset } = usePreset(createPreset
|
|
80
|
+
const { preset } = usePreset(createPreset);
|
|
103
81
|
`}
|
|
104
82
|
|
|
105
83
|
The default preset encompasses all the essentials needed for the Editor to function, representing the minimum set of plugins. It includes core Atlassian libraries essential for editor development \(feature flags, analytics, editor state management\), as well as common editor features \(copy/paste, clipboard support, focus, composition, decorations, undo/redo, block elements, annotations, hyperlink support, basic text formatting, responsive width support, quick-insert, type-ahead, placeholder text, editor controls, selections, code blocks\). Some of these core plugins can be disabled through the configuration object passed into \`createDefaultPreset\`.
|
|
@@ -118,6 +96,7 @@ const universalPreset = useUniversalPreset(presetProps);
|
|
|
118
96
|
|
|
119
97
|
In addition to the default preset, the universal preset contains a comprehensive set of features for a fully-featured editor. It supports functionalities like data consumers, content insertion, breakout, alignment, text color, lists, rules, expands, guidelines, media, captions, mentions, emoji, tables, tasks & decisions, feedback dialogs, help dialogs, collaborative editing, maximum content size restrictions, Jira issue linking, panels, context panels, extensions, macros, annotations, dates, placeholder text, layouts, cards, auto-formatting rules, status elements, indentation, scroll-into-view behavior, complex history behavior, mobile support, and advanced toolbar support.
|
|
120
98
|
|
|
99
|
+
Warning: The universal preset includes all editor plugins, which can significantly increase bundle size. It is generally advisable to create a custom preset according to your needs.
|
|
121
100
|
|
|
122
101
|
#### Adding a plugin to a preset
|
|
123
102
|
|
|
@@ -133,14 +112,14 @@ import { usePreset } from '@atlaskit/editor-core/use-preset';
|
|
|
133
112
|
const createPreset = () =>
|
|
134
113
|
createDefaultPreset({ featureFlags: {}, paste: {} })
|
|
135
114
|
.add(listPlugin)
|
|
136
|
-
.maybeAdd(
|
|
137
|
-
if (
|
|
138
|
-
return builder.add(
|
|
115
|
+
.maybeAdd(historyPlugin, (plugin, builder) => {
|
|
116
|
+
if (featureFlag) {
|
|
117
|
+
return builder.add(plugin); // Add the plugin
|
|
139
118
|
}
|
|
140
119
|
return builder; // Don't add the plugin
|
|
141
120
|
});
|
|
142
121
|
|
|
143
|
-
const { preset } = usePreset(createPreset
|
|
122
|
+
const { preset } = usePreset(createPreset);
|
|
144
123
|
`}
|
|
145
124
|
|
|
146
125
|
Some plugins are dependent on others. If you encounter type issues with a specific plugin, it's crucial to verify that all necessary dependencies have been added. These can be cross-checked within the individual documentation of each plugin.
|
|
@@ -159,7 +138,7 @@ const createPreset = () =>
|
|
|
159
138
|
.add([cardPlugin, { platform: 'web' }])
|
|
160
139
|
.add(listPlugin);
|
|
161
140
|
|
|
162
|
-
const { preset } = usePreset(createPreset
|
|
141
|
+
const { preset } = usePreset(createPreset);
|
|
163
142
|
`}
|
|
164
143
|
|
|
165
144
|
Or from scratch (simple preset with basic text formatting, list, analytics, and headings):
|
|
@@ -180,7 +159,7 @@ const createPreset = () =>
|
|
|
180
159
|
.add(blockTypePlugin)
|
|
181
160
|
.add(listPlugin)
|
|
182
161
|
|
|
183
|
-
const { preset } = usePreset(createPreset
|
|
162
|
+
const { preset } = usePreset(createPreset);
|
|
184
163
|
`}
|
|
185
164
|
|
|
186
165
|
To keep your integrated editor running smoothly, it's important to have a stable preset. If you generate a new preset every time the editor re-renders, it can slow things down significantly. The best way to maintain a stable preset across re-renders is to use the \`usePreset\` hook or similar memoization techniques. This helps your editor run efficiently without unnecessary recalculations.
|
|
@@ -200,7 +179,7 @@ ${code`
|
|
|
200
179
|
|
|
201
180
|
const createPreset = () =>
|
|
202
181
|
createDefaultPreset({ featureFlags: {}, paste: {} });
|
|
203
|
-
const { preset } = usePreset(createPreset
|
|
182
|
+
const { preset } = usePreset(createPreset);
|
|
204
183
|
|
|
205
184
|
// 'comment' is the default appearance, you don't need to pass it
|
|
206
185
|
return <ComposableEditor appearance='comment' preset={preset} />;
|
|
@@ -212,7 +191,7 @@ ${code`
|
|
|
212
191
|
|
|
213
192
|
const createPreset = () =>
|
|
214
193
|
createDefaultPreset({ featureFlags: {}, paste: {} });
|
|
215
|
-
const { preset } = usePreset(createPreset
|
|
194
|
+
const { preset } = usePreset(createPreset);
|
|
216
195
|
|
|
217
196
|
return <ComposableEditor preset={preset} />;
|
|
218
197
|
`}
|
|
@@ -225,7 +204,7 @@ ${code`
|
|
|
225
204
|
${code`
|
|
226
205
|
const createPreset = () =>
|
|
227
206
|
createDefaultPreset({ featureFlags: {}, paste: {} });
|
|
228
|
-
const { preset } = usePreset(createPreset
|
|
207
|
+
const { preset } = usePreset(createPreset);
|
|
229
208
|
|
|
230
209
|
return <ComposableEditor appearance='full-page' preset={preset} />;
|
|
231
210
|
// Or full-width
|
|
@@ -240,7 +219,7 @@ ${code`
|
|
|
240
219
|
${code`
|
|
241
220
|
const createPreset = () =>
|
|
242
221
|
createDefaultPreset({ featureFlags: {}, paste: {} });
|
|
243
|
-
const { preset } = usePreset(createPreset
|
|
222
|
+
const { preset } = usePreset(createPreset);
|
|
244
223
|
return <ComposableEditor appearance='chromeless' preset={preset} />;
|
|
245
224
|
`}
|
|
246
225
|
|
|
@@ -251,7 +230,7 @@ ${code`
|
|
|
251
230
|
${code`
|
|
252
231
|
const createPreset = () =>
|
|
253
232
|
createDefaultPreset({ featureFlags: {}, paste: {} });
|
|
254
|
-
const { preset } = usePreset(createPreset
|
|
233
|
+
const { preset } = usePreset(createPreset);
|
|
255
234
|
return <ComposableEditor appearance='mobile' preset={preset} />;
|
|
256
235
|
`}
|
|
257
236
|
|
|
@@ -273,7 +252,7 @@ const CollapsibleEditor = () => {
|
|
|
273
252
|
|
|
274
253
|
const createPreset = () =>
|
|
275
254
|
createDefaultPreset({ featureFlags: {}, paste: {} });
|
|
276
|
-
const { preset } = usePreset(createPreset
|
|
255
|
+
const { preset } = usePreset(createPreset);
|
|
277
256
|
|
|
278
257
|
return (
|
|
279
258
|
<CollapsedEditor
|
|
@@ -282,7 +261,6 @@ const CollapsibleEditor = () => {
|
|
|
282
261
|
isExpanded={isExpanded}>
|
|
283
262
|
<ComposableEditor
|
|
284
263
|
preset={preset}
|
|
285
|
-
// TODO: We don't actually want people to use onSave
|
|
286
264
|
onSave={(_editorView) => alert('The save button is a lie.')}
|
|
287
265
|
onCancel={() => setIsExpanded(false)}
|
|
288
266
|
/>
|
|
@@ -321,7 +299,7 @@ const CommentEditorWithMentions = () => {
|
|
|
321
299
|
|
|
322
300
|
const createPreset = () =>
|
|
323
301
|
createDefaultPreset({ featureFlags: {}, paste: {} });
|
|
324
|
-
const { preset } = usePreset(createPreset
|
|
302
|
+
const { preset } = usePreset(createPreset);
|
|
325
303
|
|
|
326
304
|
return <ComposableEditor preset={preset} mentionProvider={presetProps.props.mentionProvider} />;
|
|
327
305
|
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@atlaskit/editor-core/editor-context",
|
|
3
|
+
"main": "../dist/cjs/editor-context.js",
|
|
4
|
+
"module": "../dist/esm/editor-context.js",
|
|
5
|
+
"module:es2019": "../dist/es2019/editor-context.js",
|
|
6
|
+
"sideEffects": false,
|
|
7
|
+
"types": "../dist/types/editor-context.d.ts",
|
|
8
|
+
"typesVersions": {
|
|
9
|
+
">=4.5 <4.9": {
|
|
10
|
+
"*": [
|
|
11
|
+
"../dist/types-ts4.5/editor-context.d.ts"
|
|
12
|
+
]
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "191.3
|
|
3
|
+
"version": "191.4.3",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
"@atlaskit/editor-plugin-selection-toolbar": "^0.1.0",
|
|
111
111
|
"@atlaskit/editor-plugin-status": "^0.2.0",
|
|
112
112
|
"@atlaskit/editor-plugin-submit-editor": "^0.1.0",
|
|
113
|
-
"@atlaskit/editor-plugin-table": "^6.
|
|
113
|
+
"@atlaskit/editor-plugin-table": "^6.1.0",
|
|
114
114
|
"@atlaskit/editor-plugin-tasks-and-decisions": "^0.2.0",
|
|
115
115
|
"@atlaskit/editor-plugin-text-color": "^0.1.0",
|
|
116
116
|
"@atlaskit/editor-plugin-text-formatting": "^0.4.0",
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
"@atlaskit/spinner": "^16.0.0",
|
|
130
130
|
"@atlaskit/task-decision": "^17.9.0",
|
|
131
131
|
"@atlaskit/theme": "^12.6.0",
|
|
132
|
-
"@atlaskit/tokens": "^1.
|
|
132
|
+
"@atlaskit/tokens": "^1.34.0",
|
|
133
133
|
"@atlaskit/tooltip": "^18.1.0",
|
|
134
134
|
"@atlaskit/ufo": "^0.2.0",
|
|
135
135
|
"@atlaskit/width-detector": "^4.1.0",
|
|
@@ -178,7 +178,7 @@
|
|
|
178
178
|
"@atlaskit/modal-dialog": "^12.10.0",
|
|
179
179
|
"@atlaskit/renderer": "^109.2.0",
|
|
180
180
|
"@atlaskit/select": "^17.0.3",
|
|
181
|
-
"@atlaskit/smart-card": "^26.
|
|
181
|
+
"@atlaskit/smart-card": "^26.45.0",
|
|
182
182
|
"@atlaskit/synchrony-test-helpers": "^2.3.0",
|
|
183
183
|
"@atlaskit/util-data-test": "^17.8.0",
|
|
184
184
|
"@atlaskit/visual-regression": "*",
|
|
@@ -254,10 +254,6 @@
|
|
|
254
254
|
"type": "boolean",
|
|
255
255
|
"referenceOnly": "true"
|
|
256
256
|
},
|
|
257
|
-
"platform.editor.media.grouped-layout": {
|
|
258
|
-
"type": "boolean",
|
|
259
|
-
"referenceOnly": "true"
|
|
260
|
-
},
|
|
261
257
|
"platform.design-system-team.border-checkbox_nyoiu": {
|
|
262
258
|
"type": "boolean",
|
|
263
259
|
"referenceOnly": "true"
|