@atlaskit/editor-plugin-block-controls 2.13.28 → 2.13.30
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 +20 -0
- package/dist/cjs/{plugin.js → blockControlsPlugin.js} +3 -3
- package/dist/cjs/{commands → editor-commands}/move-node.js +5 -5
- package/dist/cjs/{commands → editor-commands}/move-to-layout.js +4 -4
- package/dist/cjs/{commands → editor-commands}/show-drag-handle.js +1 -1
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/pm-plugins/decorations-anchor.js +3 -4
- package/dist/cjs/pm-plugins/decorations-drop-target.js +9 -10
- package/dist/cjs/pm-plugins/handle-mouse-over.js +2 -3
- package/dist/cjs/pm-plugins/keymap.js +3 -3
- package/dist/cjs/pm-plugins/main.js +6 -7
- package/dist/cjs/{utils → pm-plugins/utils}/active-anchor-tracker.js +2 -2
- package/dist/cjs/{consts.js → pm-plugins/utils/consts.js} +2 -2
- package/dist/cjs/{utils → pm-plugins/utils}/drag-handle-positions.js +1 -1
- package/dist/cjs/{utils → pm-plugins/utils}/inline-drop-target.js +5 -5
- package/dist/cjs/{utils → pm-plugins/utils}/remove-from-source.js +1 -1
- package/dist/cjs/{utils → pm-plugins/utils}/update-column-widths.js +1 -1
- package/dist/cjs/{utils → pm-plugins/utils}/validation.js +1 -2
- package/dist/cjs/ui/consts.js +3 -3
- package/dist/cjs/ui/drag-handle.js +7 -8
- package/dist/cjs/ui/drop-target-layout.js +3 -3
- package/dist/cjs/ui/drop-target-v2.js +5 -6
- package/dist/cjs/ui/drop-target.js +2 -2
- package/dist/cjs/ui/inline-drop-target.js +10 -11
- package/dist/es2019/{plugin.js → blockControlsPlugin.js} +3 -3
- package/dist/es2019/{commands → editor-commands}/move-node.js +5 -5
- package/dist/es2019/{commands → editor-commands}/move-to-layout.js +4 -4
- package/dist/es2019/{commands → editor-commands}/show-drag-handle.js +1 -1
- package/dist/es2019/index.js +1 -1
- package/dist/es2019/pm-plugins/decorations-anchor.js +3 -4
- package/dist/es2019/pm-plugins/decorations-drop-target.js +4 -5
- package/dist/es2019/pm-plugins/handle-mouse-over.js +2 -3
- package/dist/es2019/pm-plugins/keymap.js +3 -3
- package/dist/es2019/pm-plugins/main.js +6 -7
- package/dist/es2019/{utils → pm-plugins/utils}/active-anchor-tracker.js +2 -2
- package/dist/es2019/{consts.js → pm-plugins/utils/consts.js} +2 -2
- package/dist/es2019/{utils → pm-plugins/utils}/drag-handle-positions.js +1 -1
- package/dist/es2019/{utils → pm-plugins/utils}/inline-drop-target.js +5 -5
- package/dist/es2019/{utils → pm-plugins/utils}/remove-from-source.js +1 -1
- package/dist/es2019/{utils → pm-plugins/utils}/update-column-widths.js +1 -1
- package/dist/es2019/{utils → pm-plugins/utils}/validation.js +1 -2
- package/dist/es2019/ui/consts.js +3 -3
- package/dist/es2019/ui/drag-handle.js +7 -8
- package/dist/es2019/ui/drop-target-layout.js +3 -3
- package/dist/es2019/ui/drop-target-v2.js +5 -6
- package/dist/es2019/ui/drop-target.js +2 -2
- package/dist/es2019/ui/inline-drop-target.js +10 -11
- package/dist/esm/{plugin.js → blockControlsPlugin.js} +3 -3
- package/dist/esm/{commands → editor-commands}/move-node.js +5 -5
- package/dist/esm/{commands → editor-commands}/move-to-layout.js +4 -4
- package/dist/esm/{commands → editor-commands}/show-drag-handle.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/pm-plugins/decorations-anchor.js +3 -4
- package/dist/esm/pm-plugins/decorations-drop-target.js +4 -5
- package/dist/esm/pm-plugins/handle-mouse-over.js +2 -3
- package/dist/esm/pm-plugins/keymap.js +3 -3
- package/dist/esm/pm-plugins/main.js +6 -7
- package/dist/esm/{utils → pm-plugins/utils}/active-anchor-tracker.js +2 -2
- package/dist/esm/{consts.js → pm-plugins/utils/consts.js} +2 -2
- package/dist/esm/{utils → pm-plugins/utils}/drag-handle-positions.js +1 -1
- package/dist/esm/{utils → pm-plugins/utils}/inline-drop-target.js +5 -5
- package/dist/esm/{utils → pm-plugins/utils}/remove-from-source.js +1 -1
- package/dist/esm/{utils → pm-plugins/utils}/update-column-widths.js +1 -1
- package/dist/esm/{utils → pm-plugins/utils}/validation.js +1 -2
- package/dist/esm/ui/consts.js +3 -3
- package/dist/esm/ui/drag-handle.js +7 -8
- package/dist/esm/ui/drop-target-layout.js +3 -3
- package/dist/esm/ui/drop-target-v2.js +5 -6
- package/dist/esm/ui/drop-target.js +2 -2
- package/dist/esm/ui/inline-drop-target.js +10 -11
- package/dist/types/blockControlsPlugin.d.ts +2 -0
- package/dist/types/{commands → editor-commands}/move-node.d.ts +2 -2
- package/dist/types/{commands → editor-commands}/move-to-layout.d.ts +1 -1
- package/dist/types/{commands → editor-commands}/show-drag-handle.d.ts +1 -1
- package/dist/types/index.d.ts +2 -2
- package/dist/types/pm-plugins/decorations-drag-handle.d.ts +1 -1
- package/dist/types/pm-plugins/decorations-drop-target.d.ts +2 -2
- package/dist/types/pm-plugins/handle-mouse-over.d.ts +1 -1
- package/dist/types/pm-plugins/keymap.d.ts +1 -1
- package/dist/types/pm-plugins/main.d.ts +2 -2
- package/dist/types/{utils → pm-plugins/utils}/active-anchor-tracker.d.ts +1 -1
- package/dist/types/{consts.d.ts → pm-plugins/utils/consts.d.ts} +1 -1
- package/dist/{types-ts4.5 → types/pm-plugins}/utils/inline-drop-target.d.ts +1 -1
- package/dist/types/ui/drag-handle-menu.d.ts +1 -1
- package/dist/types/ui/drag-handle.d.ts +1 -1
- package/dist/types/ui/drop-target-layout.d.ts +2 -2
- package/dist/types/ui/drop-target-v2.d.ts +1 -1
- package/dist/types/ui/drop-target.d.ts +1 -1
- package/dist/types/ui/inline-drop-target.d.ts +1 -1
- package/dist/types-ts4.5/blockControlsPlugin.d.ts +2 -0
- package/dist/types-ts4.5/{commands → editor-commands}/move-node.d.ts +2 -2
- package/dist/types-ts4.5/{commands → editor-commands}/move-to-layout.d.ts +1 -1
- package/dist/types-ts4.5/{commands → editor-commands}/show-drag-handle.d.ts +1 -1
- package/dist/types-ts4.5/index.d.ts +2 -2
- package/dist/types-ts4.5/pm-plugins/decorations-drag-handle.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/decorations-drop-target.d.ts +2 -2
- package/dist/types-ts4.5/pm-plugins/handle-mouse-over.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/keymap.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/main.d.ts +2 -2
- package/dist/types-ts4.5/{utils → pm-plugins/utils}/active-anchor-tracker.d.ts +1 -1
- package/dist/types-ts4.5/{consts.d.ts → pm-plugins/utils/consts.d.ts} +1 -1
- package/dist/{types → types-ts4.5/pm-plugins}/utils/inline-drop-target.d.ts +1 -1
- package/dist/types-ts4.5/ui/drag-handle-menu.d.ts +1 -1
- package/dist/types-ts4.5/ui/drag-handle.d.ts +1 -1
- package/dist/types-ts4.5/ui/drop-target-layout.d.ts +2 -2
- package/dist/types-ts4.5/ui/drop-target-v2.d.ts +1 -1
- package/dist/types-ts4.5/ui/drop-target.d.ts +1 -1
- package/dist/types-ts4.5/ui/inline-drop-target.d.ts +1 -1
- package/package.json +7 -13
- package/dist/cjs/utils/advanced-layouts-flags.js +0 -19
- package/dist/es2019/utils/advanced-layouts-flags.js +0 -14
- package/dist/esm/utils/advanced-layouts-flags.js +0 -14
- package/dist/types/plugin.d.ts +0 -2
- package/dist/types/utils/advanced-layouts-flags.d.ts +0 -3
- package/dist/types-ts4.5/plugin.d.ts +0 -2
- package/dist/types-ts4.5/utils/advanced-layouts-flags.d.ts +0 -3
- /package/dist/cjs/{types.js → blockControlsPluginType.js} +0 -0
- /package/dist/cjs/{utils → pm-plugins/utils}/anchor-utils.js +0 -0
- /package/dist/cjs/{utils → pm-plugins/utils}/check-media-layout.js +0 -0
- /package/dist/cjs/{utils → pm-plugins/utils}/drag-target-debug.js +0 -0
- /package/dist/cjs/{utils → pm-plugins/utils}/getNestedNodePosition.js +0 -0
- /package/dist/cjs/{utils → pm-plugins/utils}/getSelection.js +0 -0
- /package/dist/cjs/{utils → pm-plugins/utils}/index.js +0 -0
- /package/dist/cjs/{utils → pm-plugins/utils}/transactions.js +0 -0
- /package/dist/es2019/{types.js → blockControlsPluginType.js} +0 -0
- /package/dist/es2019/{utils → pm-plugins/utils}/anchor-utils.js +0 -0
- /package/dist/es2019/{utils → pm-plugins/utils}/check-media-layout.js +0 -0
- /package/dist/es2019/{utils → pm-plugins/utils}/drag-target-debug.js +0 -0
- /package/dist/es2019/{utils → pm-plugins/utils}/getNestedNodePosition.js +0 -0
- /package/dist/es2019/{utils → pm-plugins/utils}/getSelection.js +0 -0
- /package/dist/es2019/{utils → pm-plugins/utils}/index.js +0 -0
- /package/dist/es2019/{utils → pm-plugins/utils}/transactions.js +0 -0
- /package/dist/esm/{types.js → blockControlsPluginType.js} +0 -0
- /package/dist/esm/{utils → pm-plugins/utils}/anchor-utils.js +0 -0
- /package/dist/esm/{utils → pm-plugins/utils}/check-media-layout.js +0 -0
- /package/dist/esm/{utils → pm-plugins/utils}/drag-target-debug.js +0 -0
- /package/dist/esm/{utils → pm-plugins/utils}/getNestedNodePosition.js +0 -0
- /package/dist/esm/{utils → pm-plugins/utils}/getSelection.js +0 -0
- /package/dist/esm/{utils → pm-plugins/utils}/index.js +0 -0
- /package/dist/esm/{utils → pm-plugins/utils}/transactions.js +0 -0
- /package/dist/types/{types.d.ts → blockControlsPluginType.d.ts} +0 -0
- /package/dist/types/{utils → pm-plugins/utils}/anchor-utils.d.ts +0 -0
- /package/dist/types/{utils → pm-plugins/utils}/check-media-layout.d.ts +0 -0
- /package/dist/types/{utils → pm-plugins/utils}/drag-handle-positions.d.ts +0 -0
- /package/dist/types/{utils → pm-plugins/utils}/drag-target-debug.d.ts +0 -0
- /package/dist/types/{utils → pm-plugins/utils}/getNestedNodePosition.d.ts +0 -0
- /package/dist/types/{utils → pm-plugins/utils}/getSelection.d.ts +0 -0
- /package/dist/types/{utils → pm-plugins/utils}/index.d.ts +0 -0
- /package/dist/types/{utils → pm-plugins/utils}/remove-from-source.d.ts +0 -0
- /package/dist/types/{utils → pm-plugins/utils}/transactions.d.ts +0 -0
- /package/dist/types/{utils → pm-plugins/utils}/update-column-widths.d.ts +0 -0
- /package/dist/types/{utils → pm-plugins/utils}/validation.d.ts +0 -0
- /package/dist/types-ts4.5/{types.d.ts → blockControlsPluginType.d.ts} +0 -0
- /package/dist/types-ts4.5/{utils → pm-plugins/utils}/anchor-utils.d.ts +0 -0
- /package/dist/types-ts4.5/{utils → pm-plugins/utils}/check-media-layout.d.ts +0 -0
- /package/dist/types-ts4.5/{utils → pm-plugins/utils}/drag-handle-positions.d.ts +0 -0
- /package/dist/types-ts4.5/{utils → pm-plugins/utils}/drag-target-debug.d.ts +0 -0
- /package/dist/types-ts4.5/{utils → pm-plugins/utils}/getNestedNodePosition.d.ts +0 -0
- /package/dist/types-ts4.5/{utils → pm-plugins/utils}/getSelection.d.ts +0 -0
- /package/dist/types-ts4.5/{utils → pm-plugins/utils}/index.d.ts +0 -0
- /package/dist/types-ts4.5/{utils → pm-plugins/utils}/remove-from-source.d.ts +0 -0
- /package/dist/types-ts4.5/{utils → pm-plugins/utils}/transactions.d.ts +0 -0
- /package/dist/types-ts4.5/{utils → pm-plugins/utils}/update-column-widths.d.ts +0 -0
- /package/dist/types-ts4.5/{utils → pm-plugins/utils}/validation.d.ts +0 -0
|
@@ -9,12 +9,12 @@ import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
|
9
9
|
import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
10
10
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
11
11
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
12
|
-
import { DIRECTION } from '../consts';
|
|
13
12
|
import { key } from '../pm-plugins/main';
|
|
14
|
-
import { getNestedNodePosition, selectNode } from '../utils';
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
13
|
+
import { getNestedNodePosition, selectNode } from '../pm-plugins/utils';
|
|
14
|
+
import { DIRECTION } from '../pm-plugins/utils/consts';
|
|
15
|
+
import { setCursorPositionAtMovedNode } from '../pm-plugins/utils/getSelection';
|
|
16
|
+
import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
|
|
17
|
+
import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../pm-plugins/utils/validation';
|
|
18
18
|
|
|
19
19
|
/**
|
|
20
20
|
* This function transforms the slice to move
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { Fragment } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
import { maxLayoutColumnSupported } from '../consts';
|
|
3
|
+
import { maxLayoutColumnSupported } from '../pm-plugins/utils/consts';
|
|
4
|
+
import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
|
|
5
|
+
import { updateColumnWidths } from '../pm-plugins/utils/update-column-widths';
|
|
6
|
+
import { isInSameLayout } from '../pm-plugins/utils/validation';
|
|
4
7
|
import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
|
|
5
|
-
import { removeFromSource } from '../utils/remove-from-source';
|
|
6
|
-
import { updateColumnWidths } from '../utils/update-column-widths';
|
|
7
|
-
import { isInSameLayout } from '../utils/validation';
|
|
8
8
|
const createNewLayout = (schema, layoutContents) => {
|
|
9
9
|
if (layoutContents.length === 0 || layoutContents.length > maxLayoutColumnSupported()) {
|
|
10
10
|
return null;
|
|
@@ -2,7 +2,7 @@ import { isInTable } from '@atlaskit/editor-tables/utils';
|
|
|
2
2
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
3
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
4
|
import { key } from '../pm-plugins/main';
|
|
5
|
-
import { getNestedNodePosition } from '../utils';
|
|
5
|
+
import { getNestedNodePosition } from '../pm-plugins/utils';
|
|
6
6
|
export const showDragHandleAtSelection = (api, shouldFocusParentNode) => (state, _, view) => {
|
|
7
7
|
const {
|
|
8
8
|
$from
|
package/dist/es2019/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { blockControlsPlugin } from './
|
|
1
|
+
export { blockControlsPlugin } from './blockControlsPlugin';
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
2
2
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
3
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
|
-
import { isPreRelease1, isPreRelease2 } from '../utils/advanced-layouts-flags';
|
|
5
4
|
import { getNestedDepth, getNodeAnchor, TYPE_NODE_DEC } from './decorations-common';
|
|
6
5
|
const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
|
|
7
6
|
const IGNORE_NODES_NEXT = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'];
|
|
@@ -15,7 +14,7 @@ export const shouldDescendIntoNode = node => {
|
|
|
15
14
|
return false;
|
|
16
15
|
}
|
|
17
16
|
}
|
|
18
|
-
if (
|
|
17
|
+
if (editorExperiment('advanced_layouts', true)) {
|
|
19
18
|
return !IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT.includes(node.type.name);
|
|
20
19
|
}
|
|
21
20
|
return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
|
|
@@ -25,7 +24,7 @@ const shouldIgnoreNode = (node, ignore_nodes, depth, parent) => {
|
|
|
25
24
|
|
|
26
25
|
// TODO use isWrappedMedia when clean up the feature flag
|
|
27
26
|
const isMediaSingle = 'mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1');
|
|
28
|
-
const isFirstTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && 'tableRow' === node.type.name &&
|
|
27
|
+
const isFirstTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && 'tableRow' === node.type.name && editorExperiment('advanced_layouts', true);
|
|
29
28
|
if (isFirstTableRow) {
|
|
30
29
|
return false;
|
|
31
30
|
}
|
|
@@ -63,7 +62,7 @@ export const nodeDecorations = (newState, from, to) => {
|
|
|
63
62
|
const decs = [];
|
|
64
63
|
const docFrom = from === undefined || from < 0 ? 0 : from;
|
|
65
64
|
const docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
|
|
66
|
-
const ignore_nodes =
|
|
65
|
+
const ignore_nodes = editorExperiment('advanced_layouts', true) ? IGNORE_NODES_NEXT : IGNORE_NODES;
|
|
67
66
|
newState.doc.nodesBetween(docFrom, docTo, (node, pos, parent, index) => {
|
|
68
67
|
let depth = 0;
|
|
69
68
|
let anchorName;
|
|
@@ -5,15 +5,14 @@ import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
|
|
|
5
5
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
6
6
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
7
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
8
|
-
import { maxLayoutColumnSupported } from '../consts';
|
|
9
8
|
import { nodeMargins } from '../ui/consts';
|
|
10
9
|
import { DropTarget } from '../ui/drop-target';
|
|
11
10
|
import { DropTargetLayout } from '../ui/drop-target-layout';
|
|
12
11
|
import { DropTargetV2, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target-v2';
|
|
13
|
-
import { isPreRelease2 } from '../utils/advanced-layouts-flags';
|
|
14
|
-
import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
|
|
15
|
-
import { canMoveNodeToIndex, isInSameLayout } from '../utils/validation';
|
|
16
12
|
import { getNestedDepth, TYPE_DROP_TARGET_DEC, unmountDecorations } from './decorations-common';
|
|
13
|
+
import { maxLayoutColumnSupported } from './utils/consts';
|
|
14
|
+
import { isBlocksDragTargetDebug } from './utils/drag-target-debug';
|
|
15
|
+
import { canMoveNodeToIndex, isInSameLayout } from './utils/validation';
|
|
17
16
|
const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
|
|
18
17
|
const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
|
|
19
18
|
const DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
|
|
@@ -175,7 +174,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPort
|
|
|
175
174
|
popNodeStack(depth);
|
|
176
175
|
prevNodeStack.push(node);
|
|
177
176
|
};
|
|
178
|
-
const isAdvancedLayoutsPreRelease2 =
|
|
177
|
+
const isAdvancedLayoutsPreRelease2 = editorExperiment('advanced_layouts', true);
|
|
179
178
|
newState.doc.nodesBetween(docFrom, docTo, (node, pos, parent, index) => {
|
|
180
179
|
let depth = 0;
|
|
181
180
|
// drop target deco at the end position
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
2
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
3
|
-
import { isPreRelease1, isPreRelease2 } from '../utils/advanced-layouts-flags';
|
|
4
3
|
const isEmptyNestedParagraphOrHeading = target => {
|
|
5
4
|
if (target instanceof HTMLHeadingElement || target instanceof HTMLParagraphElement) {
|
|
6
5
|
var _target$parentElement;
|
|
@@ -51,7 +50,7 @@ export const handleMouseOver = (view, event, api) => {
|
|
|
51
50
|
if (editorExperiment('nested-dnd', true) && isEmptyNestedParagraphOrHeading(rootElement)) {
|
|
52
51
|
return false;
|
|
53
52
|
}
|
|
54
|
-
if (rootElement.getAttribute('data-drag-handler-node-type') === 'media' &&
|
|
53
|
+
if (rootElement.getAttribute('data-drag-handler-node-type') === 'media' && editorExperiment('advanced_layouts', true)) {
|
|
55
54
|
rootElement = rootElement.closest('[data-drag-handler-anchor-name][data-drag-handler-node-type="mediaSingle"]');
|
|
56
55
|
if (!rootElement) {
|
|
57
56
|
return false;
|
|
@@ -95,7 +94,7 @@ export const handleMouseOver = (view, event, api) => {
|
|
|
95
94
|
pos = view.posAtDOM(rootElement, 0);
|
|
96
95
|
}
|
|
97
96
|
const node = view.state.doc.nodeAt(pos);
|
|
98
|
-
if (
|
|
97
|
+
if (editorExperiment('advanced_layouts', true) && node && isLayoutColumnWithoutContent(node)) {
|
|
99
98
|
// Don't show drag handle when there is no content/only placeholder in layout column
|
|
100
99
|
return false;
|
|
101
100
|
}
|
|
@@ -2,9 +2,9 @@ import { bindKeymapWithCommand, dragToMoveDown, dragToMoveLeft, dragToMoveRight,
|
|
|
2
2
|
import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
|
|
3
3
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
4
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
5
|
-
import { moveNodeViaShortcut } from '../commands/move-node';
|
|
6
|
-
import { showDragHandleAtSelection } from '../commands/show-drag-handle';
|
|
7
|
-
import { DIRECTION } from '
|
|
5
|
+
import { moveNodeViaShortcut } from '../editor-commands/move-node';
|
|
6
|
+
import { showDragHandleAtSelection } from '../editor-commands/show-drag-handle';
|
|
7
|
+
import { DIRECTION } from './utils/consts';
|
|
8
8
|
function keymapList(api, formatMessage) {
|
|
9
9
|
let keymapList = {};
|
|
10
10
|
if (api && fg('platform_editor_element_drag_and_drop_ed_23873')) {
|
|
@@ -11,16 +11,15 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
|
|
|
11
11
|
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
|
|
12
12
|
import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
13
13
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
14
|
-
import { defaultActiveAnchorTracker } from '../utils/active-anchor-tracker';
|
|
15
|
-
import { isPreRelease2 } from '../utils/advanced-layouts-flags';
|
|
16
|
-
import { AnchorRectCache, isAnchorSupported } from '../utils/anchor-utils';
|
|
17
|
-
import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
|
|
18
|
-
import { getTrMetadata } from '../utils/transactions';
|
|
19
14
|
import { findNodeDecs, nodeDecorations } from './decorations-anchor';
|
|
20
15
|
import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } from './decorations-drag-handle';
|
|
21
16
|
import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
|
|
22
17
|
import { handleMouseOver } from './handle-mouse-over';
|
|
23
18
|
import { boundKeydownHandler } from './keymap';
|
|
19
|
+
import { defaultActiveAnchorTracker } from './utils/active-anchor-tracker';
|
|
20
|
+
import { AnchorRectCache, isAnchorSupported } from './utils/anchor-utils';
|
|
21
|
+
import { isBlocksDragTargetDebug } from './utils/drag-target-debug';
|
|
22
|
+
import { getTrMetadata } from './utils/transactions';
|
|
24
23
|
export const key = new PluginKey('blockControls');
|
|
25
24
|
const isHTMLElement = element => {
|
|
26
25
|
return element instanceof HTMLElement;
|
|
@@ -479,7 +478,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
|
|
|
479
478
|
return false;
|
|
480
479
|
},
|
|
481
480
|
dragenter(_view, event) {
|
|
482
|
-
if (
|
|
481
|
+
if (editorExperiment('advanced_layouts', true)) {
|
|
483
482
|
if (isHTMLElement(event.target)) {
|
|
484
483
|
const closestParentElement = event.target.closest('[data-drag-handler-anchor-depth="0"]');
|
|
485
484
|
if (closestParentElement) {
|
|
@@ -493,7 +492,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
|
|
|
493
492
|
},
|
|
494
493
|
dragstart(view) {
|
|
495
494
|
var _anchorRectCache;
|
|
496
|
-
if (
|
|
495
|
+
if (editorExperiment('advanced_layouts', true)) {
|
|
497
496
|
defaultActiveAnchorTracker.reset();
|
|
498
497
|
}
|
|
499
498
|
(_anchorRectCache = anchorRectCache) === null || _anchorRectCache === void 0 ? void 0 : _anchorRectCache.setEditorView(view);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import { EventEmitter } from 'events';
|
|
3
3
|
import { useCallback, useEffect, useState } from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
5
5
|
export class ActiveAnchorTracker {
|
|
6
6
|
constructor() {
|
|
7
7
|
_defineProperty(this, "lastActiveAnchor", '');
|
|
@@ -44,7 +44,7 @@ export const useActiveAnchorTracker = (anchorName, activeAnchorTracker = default
|
|
|
44
44
|
setIsActive(eventIsActive);
|
|
45
45
|
};
|
|
46
46
|
useEffect(() => {
|
|
47
|
-
if (activeAnchorTracker && anchorName &&
|
|
47
|
+
if (activeAnchorTracker && anchorName && editorExperiment('advanced_layouts', true)) {
|
|
48
48
|
activeAnchorTracker.subscribe(anchorName, onActive);
|
|
49
49
|
const unsubscribe = () => {
|
|
50
50
|
activeAnchorTracker.unsubscribe(anchorName, onActive);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
2
2
|
export let DIRECTION = /*#__PURE__*/function (DIRECTION) {
|
|
3
3
|
DIRECTION["UP"] = "up";
|
|
4
4
|
DIRECTION["DOWN"] = "down";
|
|
@@ -7,6 +7,6 @@ export let DIRECTION = /*#__PURE__*/function (DIRECTION) {
|
|
|
7
7
|
return DIRECTION;
|
|
8
8
|
}({});
|
|
9
9
|
export const maxLayoutColumnSupported = () => {
|
|
10
|
-
return
|
|
10
|
+
return editorExperiment('advanced_layouts', true) ? 5 : 3;
|
|
11
11
|
};
|
|
12
12
|
export const MIN_LAYOUT_COLUMN = 2;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H3_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, dragHandleGap } from '
|
|
1
|
+
import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H3_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../../ui/consts';
|
|
2
2
|
export const getTopPosition = (dom, type) => {
|
|
3
3
|
if (!dom) {
|
|
4
4
|
return 'auto';
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
|
|
2
|
-
import {
|
|
3
|
-
import { isPreRelease1, isPreRelease2 } from './advanced-layouts-flags';
|
|
2
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
3
|
import { isWrappedMedia } from './check-media-layout';
|
|
4
|
+
import { maxLayoutColumnSupported } from './consts';
|
|
5
5
|
export const shouldAllowInlineDropTarget = (isNested, node,
|
|
6
6
|
/**
|
|
7
7
|
* Is the active node in the same layout as the target node
|
|
8
8
|
*/
|
|
9
9
|
isSameLayout = false, activeNode) => {
|
|
10
|
-
if (
|
|
10
|
+
if (editorExperiment('advanced_layouts', false) || isNested) {
|
|
11
11
|
return false;
|
|
12
12
|
}
|
|
13
13
|
if (isWrappedMedia(node)) {
|
|
14
14
|
return false;
|
|
15
15
|
}
|
|
16
|
-
if (
|
|
16
|
+
if ((activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) === 'layoutSection') {
|
|
17
17
|
return false;
|
|
18
18
|
}
|
|
19
19
|
if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
|
|
20
|
-
return node.childCount < maxLayoutColumnSupported() ||
|
|
20
|
+
return node.childCount < maxLayoutColumnSupported() || isSameLayout;
|
|
21
21
|
}
|
|
22
22
|
return !isEmptyParagraph(node);
|
|
23
23
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { DEFAULT_COLUMN_DISTRIBUTIONS } from '
|
|
1
|
+
import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../../ui/consts';
|
|
2
2
|
export const updateColumnWidths = (tr, layoutNode, layoutNodePos, childCount) => {
|
|
3
3
|
const newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[childCount];
|
|
4
4
|
if (newColumnWidth) {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import memoizeOne from 'memoize-one';
|
|
2
2
|
import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
|
|
3
3
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
|
-
import { isPreRelease2 } from '../utils/advanced-layouts-flags';
|
|
5
4
|
export const isInsideTable = nodeType => {
|
|
6
5
|
const {
|
|
7
6
|
tableCell,
|
|
@@ -75,7 +74,7 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, destNod
|
|
|
75
74
|
let srcNodeType = srcNode.type;
|
|
76
75
|
const parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
|
|
77
76
|
const activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.name;
|
|
78
|
-
if (
|
|
77
|
+
if (activeNodeType === 'layoutColumn' && editorExperiment('advanced_layouts', true)) {
|
|
79
78
|
// Allow drag layout column and drop into layout section
|
|
80
79
|
if ((destNode === null || destNode === void 0 ? void 0 : destNode.type.name) === 'layoutSection' || parentNodeType === 'doc') {
|
|
81
80
|
return true;
|
package/dist/es2019/ui/consts.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
|
|
2
|
-
import {
|
|
2
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
3
3
|
export const DRAG_HANDLE_HEIGHT = 24;
|
|
4
4
|
export const DRAG_HANDLE_WIDTH = 12;
|
|
5
5
|
export const DRAG_HANDLE_BORDER_RADIUS = 4;
|
|
@@ -18,7 +18,7 @@ export const dragHandleGap = (nodeType, parentNodeType) => {
|
|
|
18
18
|
if (parentNodeType && parentNodeType !== 'doc') {
|
|
19
19
|
return DRAG_HANDLE_NARROW_GAP;
|
|
20
20
|
}
|
|
21
|
-
if (nodeType === 'layoutSection' &&
|
|
21
|
+
if (nodeType === 'layoutSection' && editorExperiment('advanced_layouts', true)) {
|
|
22
22
|
return DRAG_HANDLE_MAX_GAP + 12;
|
|
23
23
|
}
|
|
24
24
|
if (nodeTypeExcludeList.includes(nodeType)) {
|
|
@@ -46,7 +46,7 @@ export const getNestedNodeLeftPaddingMargin = nodeType => {
|
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
48
|
export const topPositionAdjustment = nodeType => {
|
|
49
|
-
if (
|
|
49
|
+
if (editorExperiment('advanced_layouts', true)) {
|
|
50
50
|
switch (nodeType) {
|
|
51
51
|
case 'rule':
|
|
52
52
|
return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;
|
|
@@ -18,9 +18,8 @@ import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/el
|
|
|
18
18
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
19
19
|
import Tooltip from '@atlaskit/tooltip';
|
|
20
20
|
import { key } from '../pm-plugins/main';
|
|
21
|
-
import { getNestedNodePosition, selectNode } from '../utils';
|
|
22
|
-
import {
|
|
23
|
-
import { getLeftPosition, getTopPosition } from '../utils/drag-handle-positions';
|
|
21
|
+
import { getNestedNodePosition, selectNode } from '../pm-plugins/utils';
|
|
22
|
+
import { getLeftPosition, getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
|
|
24
23
|
import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, topPositionAdjustment } from './consts';
|
|
25
24
|
import { dragPreview } from './drag-preview';
|
|
26
25
|
const dragHandleButtonStyles = css({
|
|
@@ -130,7 +129,7 @@ export const DragHandle = ({
|
|
|
130
129
|
// but ensures the preview is generated correctly.
|
|
131
130
|
const handleMouseDown = useCallback(() => {
|
|
132
131
|
var _api$core3;
|
|
133
|
-
if (!(isLayoutColumn &&
|
|
132
|
+
if (!(isLayoutColumn && editorExperiment('advanced_layouts', true)) && fg('platform_editor_element_drag_and_drop_ed_24885')) {
|
|
134
133
|
return undefined;
|
|
135
134
|
}
|
|
136
135
|
api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
|
|
@@ -145,7 +144,7 @@ export const DragHandle = ({
|
|
|
145
144
|
return tr;
|
|
146
145
|
}
|
|
147
146
|
let selection;
|
|
148
|
-
if (isLayoutColumn &&
|
|
147
|
+
if (isLayoutColumn && editorExperiment('advanced_layouts', true)) {
|
|
149
148
|
selection = new NodeSelection(tr.doc.resolve(startPos));
|
|
150
149
|
} else {
|
|
151
150
|
const $startPos = tr.doc.resolve(startPos + node.nodeSize);
|
|
@@ -278,8 +277,8 @@ export const DragHandle = ({
|
|
|
278
277
|
const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
|
|
279
278
|
if (supportsAnchor) {
|
|
280
279
|
return {
|
|
281
|
-
left: isEdgeCase ? `calc(anchor(${anchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` :
|
|
282
|
-
top:
|
|
280
|
+
left: isEdgeCase ? `calc(anchor(${anchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((anchor(${anchorName} right) + anchor(${anchorName} left))/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(anchor(${anchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
|
|
281
|
+
top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${anchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : fg('platform_editor_elements_dnd_ed_23674') ? `calc(anchor(${anchorName} start) + ${topPositionAdjustment(nodeType)}px)` : anchorName.includes('table') ? `calc(anchor(${anchorName} start) + ${DRAG_HANDLE_HEIGHT}px)` : `anchor(${anchorName} start)`
|
|
283
282
|
};
|
|
284
283
|
}
|
|
285
284
|
return {
|
|
@@ -398,7 +397,7 @@ export const DragHandle = ({
|
|
|
398
397
|
// eslint-disable-next-line @atlaskit/design-system/no-html-button
|
|
399
398
|
jsx("button", {
|
|
400
399
|
type: "button",
|
|
401
|
-
css: [dragHandleButtonStyles,
|
|
400
|
+
css: [dragHandleButtonStyles, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
|
|
402
401
|
ref: buttonRef
|
|
403
402
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
404
403
|
,
|
|
@@ -11,9 +11,9 @@ import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indi
|
|
|
11
11
|
import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
12
12
|
import { B200 } from '@atlaskit/theme/colors';
|
|
13
13
|
import { getNodeAnchor } from '../pm-plugins/decorations-common';
|
|
14
|
-
import { useActiveAnchorTracker } from '../utils/active-anchor-tracker';
|
|
15
|
-
import { isAnchorSupported } from '../utils/anchor-utils';
|
|
16
|
-
import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
|
|
14
|
+
import { useActiveAnchorTracker } from '../pm-plugins/utils/active-anchor-tracker';
|
|
15
|
+
import { isAnchorSupported } from '../pm-plugins/utils/anchor-utils';
|
|
16
|
+
import { isBlocksDragTargetDebug } from '../pm-plugins/utils/drag-target-debug';
|
|
17
17
|
|
|
18
18
|
// 8px gap + 16px on left and right
|
|
19
19
|
const DROP_TARGET_LAYOUT_DROP_ZONE_WIDTH = 40;
|
|
@@ -13,11 +13,10 @@ import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element
|
|
|
13
13
|
import { layers } from '@atlaskit/theme/constants';
|
|
14
14
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
15
15
|
import { getNodeAnchor } from '../pm-plugins/decorations-common';
|
|
16
|
-
import { useActiveAnchorTracker } from '../utils/active-anchor-tracker';
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import { shouldAllowInlineDropTarget } from '../utils/inline-drop-target';
|
|
16
|
+
import { useActiveAnchorTracker } from '../pm-plugins/utils/active-anchor-tracker';
|
|
17
|
+
import { isAnchorSupported } from '../pm-plugins/utils/anchor-utils';
|
|
18
|
+
import { isBlocksDragTargetDebug } from '../pm-plugins/utils/drag-target-debug';
|
|
19
|
+
import { shouldAllowInlineDropTarget } from '../pm-plugins/utils/inline-drop-target';
|
|
21
20
|
import { getNestedNodeLeftPaddingMargin } from './consts';
|
|
22
21
|
import { InlineDropTarget } from './inline-drop-target';
|
|
23
22
|
const DEFAULT_DROP_INDICATOR_WIDTH = 760;
|
|
@@ -85,7 +84,7 @@ const HoverZone = ({
|
|
|
85
84
|
return dropTargetForElements({
|
|
86
85
|
element: ref.current,
|
|
87
86
|
onDragEnter: () => {
|
|
88
|
-
if (!isNestedDropTarget &&
|
|
87
|
+
if (!isNestedDropTarget && editorExperiment('advanced_layouts', true)) {
|
|
89
88
|
setActiveAnchor();
|
|
90
89
|
}
|
|
91
90
|
onDragEnter();
|
|
@@ -12,7 +12,7 @@ import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indi
|
|
|
12
12
|
import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
13
13
|
import { layers } from '@atlaskit/theme/constants';
|
|
14
14
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
15
|
-
import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
|
|
15
|
+
import { isBlocksDragTargetDebug } from '../pm-plugins/utils/drag-target-debug';
|
|
16
16
|
import { dropTargetMarginMap, getNestedNodeLeftPaddingMargin, nodeMargins, spaceLookupMap } from './consts';
|
|
17
17
|
const DEFAULT_DROP_INDICATOR_WIDTH = 760;
|
|
18
18
|
const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH = '--editor-block-controls-drop-indicator-width';
|
|
@@ -103,7 +103,7 @@ export const DropTarget = ({
|
|
|
103
103
|
return;
|
|
104
104
|
}
|
|
105
105
|
|
|
106
|
-
// This should be moved to platform/packages/editor/editor-plugin-block-controls/src/utils/validation.ts
|
|
106
|
+
// This should be moved to platform/packages/editor/editor-plugin-block-controls/src/pm-plugins/utils/validation.ts
|
|
107
107
|
// Since we are moved to drop-target-v2
|
|
108
108
|
// Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
|
|
109
109
|
if (editorExperiment('nest-media-and-codeblock-in-quote', false)) {
|
|
@@ -12,11 +12,11 @@ import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
|
|
|
12
12
|
import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
|
|
13
13
|
import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
14
14
|
import { B200 } from '@atlaskit/theme/colors';
|
|
15
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
15
16
|
import { getNodeAnchor } from '../pm-plugins/decorations-common';
|
|
16
|
-
import { useActiveAnchorTracker } from '../utils/active-anchor-tracker';
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
|
|
17
|
+
import { useActiveAnchorTracker } from '../pm-plugins/utils/active-anchor-tracker';
|
|
18
|
+
import { isAnchorSupported } from '../pm-plugins/utils/anchor-utils';
|
|
19
|
+
import { isBlocksDragTargetDebug } from '../pm-plugins/utils/drag-target-debug';
|
|
20
20
|
const hoverZoneCommonStyle = css({
|
|
21
21
|
position: 'absolute',
|
|
22
22
|
// above the top and bottom drop zone as block hover zone
|
|
@@ -72,7 +72,6 @@ export const InlineDropTarget = ({
|
|
|
72
72
|
}, [nextNode]);
|
|
73
73
|
const [isActiveAnchor] = useActiveAnchorTracker(anchorName);
|
|
74
74
|
const isLeftPosition = position === 'left';
|
|
75
|
-
const shouldShowResponsiveLayout = showResponsiveLayout();
|
|
76
75
|
const nodeDimension = useMemo(() => {
|
|
77
76
|
if (!nextNode) {
|
|
78
77
|
return defaultNodeDimension;
|
|
@@ -113,7 +112,7 @@ export const InlineDropTarget = ({
|
|
|
113
112
|
|
|
114
113
|
// Set the height target anchor name to the first or last column of the layout section so that it also works for stacked layout
|
|
115
114
|
let heightTargetAnchorName = targetAnchorName;
|
|
116
|
-
if (
|
|
115
|
+
if (editorExperiment('advanced_layouts', true) && nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
|
|
117
116
|
heightTargetAnchorName = isLeftPosition ? getNodeAnchor(nextNode.firstChild) : getNodeAnchor(nextNode.lastChild);
|
|
118
117
|
}
|
|
119
118
|
if (isAnchorSupported()) {
|
|
@@ -146,7 +145,7 @@ export const InlineDropTarget = ({
|
|
|
146
145
|
};
|
|
147
146
|
}
|
|
148
147
|
return defaultNodeDimension;
|
|
149
|
-
}, [anchorName, anchorRectCache, nextNode, position, isLeftPosition
|
|
148
|
+
}, [anchorName, anchorRectCache, nextNode, position, isLeftPosition]);
|
|
150
149
|
const onDrop = useCallback(() => {
|
|
151
150
|
var _api$blockControls;
|
|
152
151
|
const {
|
|
@@ -167,8 +166,8 @@ export const InlineDropTarget = ({
|
|
|
167
166
|
}
|
|
168
167
|
}, [api, getPos, position]);
|
|
169
168
|
const inlineHoverZoneRectStyle = useMemo(() => {
|
|
170
|
-
const isLayoutNode = (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'layoutSection';
|
|
171
|
-
const layoutAdjustment = isLayoutNode
|
|
169
|
+
const isLayoutNode = editorExperiment('advanced_layouts', true) && (nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name) === 'layoutSection';
|
|
170
|
+
const layoutAdjustment = isLayoutNode ? {
|
|
172
171
|
width: 11,
|
|
173
172
|
height: 4,
|
|
174
173
|
top: 6,
|
|
@@ -182,11 +181,11 @@ export const InlineDropTarget = ({
|
|
|
182
181
|
top: `calc(anchor(top))`,
|
|
183
182
|
width: nodeDimension.widthOffset ? `calc((100% - ${nodeDimension.width})/2 - ${GAP}px + ${nodeDimension.widthOffset} - ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0}px)` : `calc((100% - ${nodeDimension.width})/2 - ${GAP}px - ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.width) || 0}px)`,
|
|
184
183
|
height: `calc(${nodeDimension.height} + ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.height) || 0}px)`
|
|
185
|
-
}, isLayoutNode &&
|
|
184
|
+
}, isLayoutNode && {
|
|
186
185
|
top: isLeftPosition ? `calc(${nodeDimension.top} + ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.top) || 0}px)` : 'unset',
|
|
187
186
|
bottom: isLeftPosition ? 'unset' : `calc(${nodeDimension.bottom} - ${(layoutAdjustment === null || layoutAdjustment === void 0 ? void 0 : layoutAdjustment.bottom) || 0}px)`
|
|
188
187
|
});
|
|
189
|
-
}, [anchorName, isLeftPosition, nodeDimension
|
|
188
|
+
}, [nextNode === null || nextNode === void 0 ? void 0 : nextNode.type.name, anchorName, isLeftPosition, nodeDimension]);
|
|
190
189
|
const dropIndicatorPos = useMemo(() => {
|
|
191
190
|
return isLeftPosition ? 'right' : 'left';
|
|
192
191
|
}, [isLeftPosition]);
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
-
import { moveNode } from './commands/move-node';
|
|
4
|
-
import { moveToLayout } from './commands/move-to-layout';
|
|
3
|
+
import { moveNode } from './editor-commands/move-node';
|
|
4
|
+
import { moveToLayout } from './editor-commands/move-to-layout';
|
|
5
5
|
import { createPlugin, key } from './pm-plugins/main';
|
|
6
|
+
import { selectNode } from './pm-plugins/utils';
|
|
6
7
|
import { DragHandleMenu } from './ui/drag-handle-menu';
|
|
7
8
|
import { GlobalStylesWrapper } from './ui/global-styles';
|
|
8
|
-
import { selectNode } from './utils';
|
|
9
9
|
export var blockControlsPlugin = function blockControlsPlugin(_ref) {
|
|
10
10
|
var api = _ref.api;
|
|
11
11
|
return {
|
|
@@ -12,12 +12,12 @@ import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
|
12
12
|
import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
13
13
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
14
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
15
|
-
import { DIRECTION } from '../consts';
|
|
16
15
|
import { key } from '../pm-plugins/main';
|
|
17
|
-
import { getNestedNodePosition, selectNode } from '../utils';
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
16
|
+
import { getNestedNodePosition, selectNode } from '../pm-plugins/utils';
|
|
17
|
+
import { DIRECTION } from '../pm-plugins/utils/consts';
|
|
18
|
+
import { setCursorPositionAtMovedNode } from '../pm-plugins/utils/getSelection';
|
|
19
|
+
import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
|
|
20
|
+
import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../pm-plugins/utils/validation';
|
|
21
21
|
|
|
22
22
|
/**
|
|
23
23
|
* This function transforms the slice to move
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { Fragment } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
import { maxLayoutColumnSupported } from '../consts';
|
|
3
|
+
import { maxLayoutColumnSupported } from '../pm-plugins/utils/consts';
|
|
4
|
+
import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
|
|
5
|
+
import { updateColumnWidths } from '../pm-plugins/utils/update-column-widths';
|
|
6
|
+
import { isInSameLayout } from '../pm-plugins/utils/validation';
|
|
4
7
|
import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
|
|
5
|
-
import { removeFromSource } from '../utils/remove-from-source';
|
|
6
|
-
import { updateColumnWidths } from '../utils/update-column-widths';
|
|
7
|
-
import { isInSameLayout } from '../utils/validation';
|
|
8
8
|
var createNewLayout = function createNewLayout(schema, layoutContents) {
|
|
9
9
|
if (layoutContents.length === 0 || layoutContents.length > maxLayoutColumnSupported()) {
|
|
10
10
|
return null;
|
|
@@ -2,7 +2,7 @@ import { isInTable } from '@atlaskit/editor-tables/utils';
|
|
|
2
2
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
3
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
4
|
import { key } from '../pm-plugins/main';
|
|
5
|
-
import { getNestedNodePosition } from '../utils';
|
|
5
|
+
import { getNestedNodePosition } from '../pm-plugins/utils';
|
|
6
6
|
export var showDragHandleAtSelection = function showDragHandleAtSelection(api, shouldFocusParentNode) {
|
|
7
7
|
return function (state, _, view) {
|
|
8
8
|
var $from = state.selection.$from;
|
package/dist/esm/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { blockControlsPlugin } from './
|
|
1
|
+
export { blockControlsPlugin } from './blockControlsPlugin';
|
|
@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
3
3
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
4
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
5
|
-
import { isPreRelease1, isPreRelease2 } from '../utils/advanced-layouts-flags';
|
|
6
5
|
import { getNestedDepth, getNodeAnchor, TYPE_NODE_DEC } from './decorations-common';
|
|
7
6
|
var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
|
|
8
7
|
var IGNORE_NODES_NEXT = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption'];
|
|
@@ -16,7 +15,7 @@ export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
|
|
|
16
15
|
return false;
|
|
17
16
|
}
|
|
18
17
|
}
|
|
19
|
-
if (
|
|
18
|
+
if (editorExperiment('advanced_layouts', true)) {
|
|
20
19
|
return !IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT.includes(node.type.name);
|
|
21
20
|
}
|
|
22
21
|
return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
|
|
@@ -26,7 +25,7 @@ var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, pare
|
|
|
26
25
|
|
|
27
26
|
// TODO use isWrappedMedia when clean up the feature flag
|
|
28
27
|
var isMediaSingle = 'mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1');
|
|
29
|
-
var isFirstTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && 'tableRow' === node.type.name &&
|
|
28
|
+
var isFirstTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && 'tableRow' === node.type.name && editorExperiment('advanced_layouts', true);
|
|
30
29
|
if (isFirstTableRow) {
|
|
31
30
|
return false;
|
|
32
31
|
}
|
|
@@ -66,7 +65,7 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
|
|
|
66
65
|
var decs = [];
|
|
67
66
|
var docFrom = from === undefined || from < 0 ? 0 : from;
|
|
68
67
|
var docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
|
|
69
|
-
var ignore_nodes =
|
|
68
|
+
var ignore_nodes = editorExperiment('advanced_layouts', true) ? IGNORE_NODES_NEXT : IGNORE_NODES;
|
|
70
69
|
newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
|
|
71
70
|
var _Decoration$node;
|
|
72
71
|
var depth = 0;
|