@atlaskit/editor-plugin-block-controls 2.6.3 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/commands/move-to-layout.js +76 -0
  3. package/dist/cjs/consts.js +3 -2
  4. package/dist/cjs/plugin.js +2 -0
  5. package/dist/cjs/pm-plugins/decorations.js +7 -7
  6. package/dist/cjs/pm-plugins/main.js +10 -10
  7. package/dist/cjs/ui/consts.js +8 -1
  8. package/dist/cjs/ui/drop-target-v2.js +24 -17
  9. package/dist/cjs/ui/inline-drop-target.js +138 -0
  10. package/dist/cjs/utils/advanced-layouts-flags.js +11 -0
  11. package/dist/cjs/utils/anchor-utils.js +71 -15
  12. package/dist/cjs/utils/inline-drop-target.js +18 -0
  13. package/dist/es2019/commands/move-to-layout.js +69 -0
  14. package/dist/es2019/consts.js +2 -1
  15. package/dist/es2019/plugin.js +2 -0
  16. package/dist/es2019/pm-plugins/decorations.js +7 -7
  17. package/dist/es2019/pm-plugins/main.js +11 -11
  18. package/dist/es2019/ui/consts.js +7 -0
  19. package/dist/es2019/ui/drop-target-v2.js +24 -16
  20. package/dist/es2019/ui/inline-drop-target.js +130 -0
  21. package/dist/es2019/utils/advanced-layouts-flags.js +5 -0
  22. package/dist/es2019/utils/anchor-utils.js +55 -9
  23. package/dist/es2019/utils/inline-drop-target.js +12 -0
  24. package/dist/esm/commands/move-to-layout.js +70 -0
  25. package/dist/esm/consts.js +2 -1
  26. package/dist/esm/plugin.js +2 -0
  27. package/dist/esm/pm-plugins/decorations.js +7 -7
  28. package/dist/esm/pm-plugins/main.js +11 -11
  29. package/dist/esm/ui/consts.js +7 -0
  30. package/dist/esm/ui/drop-target-v2.js +24 -17
  31. package/dist/esm/ui/inline-drop-target.js +130 -0
  32. package/dist/esm/utils/advanced-layouts-flags.js +5 -0
  33. package/dist/esm/utils/anchor-utils.js +70 -14
  34. package/dist/esm/utils/inline-drop-target.js +12 -0
  35. package/dist/types/commands/move-to-layout.d.ts +3 -0
  36. package/dist/types/consts.d.ts +1 -0
  37. package/dist/types/pm-plugins/decorations.d.ts +3 -3
  38. package/dist/types/pm-plugins/main.d.ts +3 -3
  39. package/dist/types/types.d.ts +1 -0
  40. package/dist/types/ui/consts.d.ts +3 -0
  41. package/dist/types/ui/drop-target-v2.d.ts +3 -3
  42. package/dist/types/ui/inline-drop-target.d.ts +20 -0
  43. package/dist/types/utils/advanced-layouts-flags.d.ts +1 -0
  44. package/dist/types/utils/anchor-utils.d.ts +16 -3
  45. package/dist/types/utils/inline-drop-target.d.ts +2 -0
  46. package/dist/types-ts4.5/commands/move-to-layout.d.ts +3 -0
  47. package/dist/types-ts4.5/consts.d.ts +1 -0
  48. package/dist/types-ts4.5/pm-plugins/decorations.d.ts +3 -3
  49. package/dist/types-ts4.5/pm-plugins/main.d.ts +3 -3
  50. package/dist/types-ts4.5/types.d.ts +1 -0
  51. package/dist/types-ts4.5/ui/consts.d.ts +3 -0
  52. package/dist/types-ts4.5/ui/drop-target-v2.d.ts +3 -3
  53. package/dist/types-ts4.5/ui/inline-drop-target.d.ts +20 -0
  54. package/dist/types-ts4.5/utils/advanced-layouts-flags.d.ts +1 -0
  55. package/dist/types-ts4.5/utils/anchor-utils.d.ts +16 -3
  56. package/dist/types-ts4.5/utils/inline-drop-target.d.ts +2 -0
  57. package/package.json +4 -1
@@ -11,36 +11,42 @@ export var isAnchorSupported = memoizeOne(function () {
11
11
  }
12
12
  return false;
13
13
  });
14
- export var AnchorHeightsCache = /*#__PURE__*/function () {
15
- function AnchorHeightsCache() {
16
- _classCallCheck(this, AnchorHeightsCache);
17
- _defineProperty(this, "anchorHeightsMap", {});
14
+ export var AnchorRectCache = /*#__PURE__*/function () {
15
+ function AnchorRectCache() {
16
+ _classCallCheck(this, AnchorRectCache);
17
+ _defineProperty(this, "anchorRectMap", {});
18
18
  _defineProperty(this, "isAnchorSupported", isAnchorSupported());
19
19
  _defineProperty(this, "isDirty", true);
20
20
  _defineProperty(this, "view", null);
21
21
  }
22
- _createClass(AnchorHeightsCache, [{
22
+ _createClass(AnchorRectCache, [{
23
23
  key: "clear",
24
24
  value: function clear() {
25
25
  this.isDirty = true;
26
- this.anchorHeightsMap = {};
26
+ this.anchorRectMap = {};
27
27
  }
28
28
  }, {
29
- key: "getHeights",
30
- value: function getHeights() {
29
+ key: "getRects",
30
+ value: function getRects() {
31
31
  if (this.isDirty) {
32
32
  var _this$view;
33
33
  var anchorElements = ((_this$view = this.view) === null || _this$view === void 0 ? void 0 : _this$view.dom.querySelectorAll('[data-drag-handler-anchor-name]')) || [];
34
- this.anchorHeightsMap = Array.from(anchorElements).reduce(function (prev, curr) {
34
+ this.anchorRectMap = Array.from(anchorElements).reduce(function (prev, curr) {
35
35
  var anchorName = curr.getAttribute('data-drag-handler-anchor-name');
36
36
  if (anchorName) {
37
- return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, anchorName, curr.clientHeight));
37
+ return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, anchorName, {
38
+ height: curr.clientHeight,
39
+ top: curr.offsetTop,
40
+ left: curr.offsetLeft,
41
+ right: curr.offsetLeft + curr.clientWidth,
42
+ width: curr.clientWidth
43
+ }));
38
44
  }
39
45
  return prev;
40
46
  }, {});
41
47
  this.isDirty = false;
42
48
  }
43
- return this.anchorHeightsMap;
49
+ return this.anchorRectMap;
44
50
  }
45
51
  }, {
46
52
  key: "setEditorView",
@@ -52,12 +58,62 @@ export var AnchorHeightsCache = /*#__PURE__*/function () {
52
58
  }, {
53
59
  key: "getHeight",
54
60
  value: function getHeight(anchorName) {
61
+ var _rects$anchorName;
55
62
  if (this.isAnchorSupported) {
56
63
  return null;
57
64
  }
58
- var heights = this.getHeights();
59
- return heights[anchorName];
65
+ var rects = this.getRects();
66
+ return (_rects$anchorName = rects[anchorName]) === null || _rects$anchorName === void 0 ? void 0 : _rects$anchorName.height;
67
+ }
68
+ }, {
69
+ key: "getWidth",
70
+ value: function getWidth(anchorName) {
71
+ var _rects$anchorName2;
72
+ if (this.isAnchorSupported) {
73
+ return null;
74
+ }
75
+ var rects = this.getRects();
76
+ return (_rects$anchorName2 = rects[anchorName]) === null || _rects$anchorName2 === void 0 ? void 0 : _rects$anchorName2.width;
77
+ }
78
+ }, {
79
+ key: "getLeft",
80
+ value: function getLeft(anchorName) {
81
+ var _rects$anchorName3;
82
+ if (this.isAnchorSupported) {
83
+ return null;
84
+ }
85
+ var rects = this.getRects();
86
+ return (_rects$anchorName3 = rects[anchorName]) === null || _rects$anchorName3 === void 0 ? void 0 : _rects$anchorName3.left;
87
+ }
88
+ }, {
89
+ key: "getTop",
90
+ value: function getTop(anchorName) {
91
+ var _rects$anchorName4;
92
+ if (this.isAnchorSupported) {
93
+ return null;
94
+ }
95
+ var rects = this.getRects();
96
+ return (_rects$anchorName4 = rects[anchorName]) === null || _rects$anchorName4 === void 0 ? void 0 : _rects$anchorName4.top;
97
+ }
98
+ }, {
99
+ key: "getRight",
100
+ value: function getRight(anchorName) {
101
+ var _rects$anchorName5;
102
+ if (this.isAnchorSupported) {
103
+ return null;
104
+ }
105
+ var rects = this.getRects();
106
+ return (_rects$anchorName5 = rects[anchorName]) === null || _rects$anchorName5 === void 0 ? void 0 : _rects$anchorName5.right;
107
+ }
108
+ }, {
109
+ key: "getRect",
110
+ value: function getRect(anchorName) {
111
+ if (this.isAnchorSupported) {
112
+ return null;
113
+ }
114
+ var rects = this.getRects();
115
+ return rects[anchorName];
60
116
  }
61
117
  }]);
62
- return AnchorHeightsCache;
118
+ return AnchorRectCache;
63
119
  }();
@@ -0,0 +1,12 @@
1
+ import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
2
+ import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
3
+ import { isPreRelease1 } from './advanced-layouts-flags';
4
+ export var shouldAllowInlineDropTarget = function shouldAllowInlineDropTarget(isNested, node) {
5
+ if (!isPreRelease1() || isNested) {
6
+ return false;
7
+ }
8
+ if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
9
+ return node.childCount < MAX_LAYOUT_COLUMN_SUPPORTED;
10
+ }
11
+ return !isEmptyParagraph(node);
12
+ };
@@ -0,0 +1,3 @@
1
+ import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
2
+ import type { BlockControlsPlugin } from '../types';
3
+ export declare const moveToLayout: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (from: number, to: number, position: 'left' | 'right') => EditorCommand;
@@ -4,3 +4,4 @@ export declare enum DIRECTION {
4
4
  LEFT = "left",
5
5
  RIGHT = "right"
6
6
  }
7
+ export declare const MAX_LAYOUT_COLUMN_SUPPORTED = 3;
@@ -5,7 +5,7 @@ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
5
5
  import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
6
6
  import type { ActiveNode, BlockControlsPlugin, HandleOptions } from '../types';
7
7
  import { type DropTargetProps } from '../ui/drop-target';
8
- import { type AnchorHeightsCache } from '../utils/anchor-utils';
8
+ import { type AnchorRectCache } from '../utils/anchor-utils';
9
9
  export declare const TYPE_DROP_TARGET_DEC = "drop-target-decoration";
10
10
  export declare const TYPE_HANDLE_DEC = "drag-handle";
11
11
  export declare const TYPE_NODE_DEC = "node-decoration";
@@ -27,8 +27,8 @@ export declare const findHandleDec: (decorations: DecorationSet, from?: number,
27
27
  * @returns
28
28
  */
29
29
  export declare const findNodeDecs: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
30
- export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorHeightsCache?: AnchorHeightsCache) => Decoration;
31
- export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode, anchorHeightsCache?: AnchorHeightsCache, from?: number, to?: number) => Decoration[];
30
+ export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorRectCache?: AnchorRectCache) => Decoration;
31
+ export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode, anchorRectCache?: AnchorRectCache, from?: number, to?: number) => Decoration[];
32
32
  export declare const emptyParagraphNodeDecorations: () => Decoration;
33
33
  export declare const nodeDecorations: (newState: EditorState, from?: number, to?: number) => Decoration[];
34
34
  export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;
@@ -5,13 +5,13 @@ import type { EditorState, ReadonlyTransaction } from '@atlaskit/editor-prosemir
5
5
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
6
6
  import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
7
7
  import type { BlockControlsPlugin, PluginState } from '../types';
8
- import { AnchorHeightsCache } from '../utils/anchor-utils';
8
+ import { AnchorRectCache } from '../utils/anchor-utils';
9
9
  export declare const key: PluginKey<PluginState>;
10
10
  export interface FlagType {
11
11
  isNestedEnabled: boolean;
12
12
  isOptimisedApply: boolean;
13
13
  }
14
- export declare const newApply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, newState: EditorState, flags: FlagType, anchorHeightsCache?: AnchorHeightsCache) => {
14
+ export declare const newApply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, newState: EditorState, flags: FlagType, anchorRectCache?: AnchorRectCache) => {
15
15
  decorations: DecorationSet;
16
16
  activeNode: any;
17
17
  isDragging: any;
@@ -23,7 +23,7 @@ export declare const newApply: (api: ExtractInjectionAPI<BlockControlsPlugin> |
23
23
  isDocSizeLimitEnabled: boolean | null;
24
24
  isPMDragging: any;
25
25
  };
26
- export declare const oldApply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, oldState: EditorState, newState: EditorState, flags: FlagType, anchorHeightsCache?: AnchorHeightsCache) => {
26
+ export declare const oldApply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, oldState: EditorState, newState: EditorState, flags: FlagType, anchorRectCache?: AnchorRectCache) => {
27
27
  decorations: DecorationSet;
28
28
  activeNode: any;
29
29
  isDragging: any;
@@ -58,6 +58,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
58
58
  ];
59
59
  sharedState: BlockControlsSharedState;
60
60
  commands: {
61
+ moveToLayout: (start: number, to: number, position: 'left' | 'right') => EditorCommand;
61
62
  moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;
62
63
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
63
64
  setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
@@ -27,3 +27,6 @@ export declare const nodeMargins: {
27
27
  bottom: number;
28
28
  };
29
29
  };
30
+ export declare const DEFAULT_COLUMN_DISTRIBUTIONS: {
31
+ [key: number]: number;
32
+ };
@@ -1,8 +1,8 @@
1
1
  import { jsx } from '@emotion/react';
2
- import { type AnchorHeightsCache } from '../utils/anchor-utils';
2
+ import { type AnchorRectCache } from '../utils/anchor-utils';
3
3
  import { type DropTargetProps } from './drop-target';
4
4
  export declare const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = "--editor-block-controls-drop-indicator-offset";
5
5
  export declare const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = "--editor-block-controls-drop-indicator-gap";
6
- export declare const DropTargetV2: ({ api, getPos, prevNode, nextNode, parentNode, formatMessage, anchorHeightsCache, dropTargetStyle, }: DropTargetProps & {
7
- anchorHeightsCache?: AnchorHeightsCache | undefined;
6
+ export declare const DropTargetV2: (props: DropTargetProps & {
7
+ anchorRectCache?: AnchorRectCache | undefined;
8
8
  }) => jsx.JSX.Element;
@@ -0,0 +1,20 @@
1
+ import { jsx } from '@emotion/react';
2
+ import { type EditorContainerWidth } from '@atlaskit/editor-common/src/types';
3
+ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
4
+ import { type AnchorRectCache } from '../utils/anchor-utils';
5
+ import { type DropTargetProps } from './drop-target';
6
+ export declare const InlineDropTarget: ({ api, nextNode, position, anchorRectCache, }: DropTargetProps & {
7
+ anchorRectCache?: AnchorRectCache | undefined;
8
+ position: 'left' | 'right';
9
+ }) => jsx.JSX.Element;
10
+ type InlineHoverZoneProps = {
11
+ node?: PMNode;
12
+ editorWidthState?: EditorContainerWidth;
13
+ anchorRectCache?: AnchorRectCache;
14
+ position: 'left' | 'right';
15
+ onDragEnter: () => void;
16
+ onDragLeave: () => void;
17
+ onDrop: () => void;
18
+ };
19
+ export declare const InlineHoverZone: ({ node, editorWidthState, anchorRectCache, position, onDragEnter, onDragLeave, onDrop, }: InlineHoverZoneProps) => jsx.JSX.Element;
20
+ export {};
@@ -0,0 +1 @@
1
+ export declare const isPreRelease1: () => boolean;
@@ -1,12 +1,25 @@
1
1
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
2
2
  export declare const isAnchorSupported: import("memoize-one").MemoizedFn<() => boolean>;
3
- export declare class AnchorHeightsCache {
4
- private anchorHeightsMap;
3
+ type RectInfo = {
4
+ height: number;
5
+ top: number;
6
+ left: number;
7
+ right: number;
8
+ width: number;
9
+ };
10
+ export declare class AnchorRectCache {
11
+ private anchorRectMap;
5
12
  private isAnchorSupported;
6
13
  private isDirty;
7
14
  private view;
8
15
  clear(): void;
9
- private getHeights;
16
+ private getRects;
10
17
  setEditorView(view: EditorView): void;
11
18
  getHeight(anchorName: string): number | null;
19
+ getWidth(anchorName: string): number | null;
20
+ getLeft(anchorName: string): number | null;
21
+ getTop(anchorName: string): number | null;
22
+ getRight(anchorName: string): number | null;
23
+ getRect(anchorName: string): RectInfo | null;
12
24
  }
25
+ export {};
@@ -0,0 +1,2 @@
1
+ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
2
+ export declare const shouldAllowInlineDropTarget: (isNested: boolean, node?: PMNode) => boolean;
@@ -0,0 +1,3 @@
1
+ import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
2
+ import type { BlockControlsPlugin } from '../types';
3
+ export declare const moveToLayout: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (from: number, to: number, position: 'left' | 'right') => EditorCommand;
@@ -4,3 +4,4 @@ export declare enum DIRECTION {
4
4
  LEFT = "left",
5
5
  RIGHT = "right"
6
6
  }
7
+ export declare const MAX_LAYOUT_COLUMN_SUPPORTED = 3;
@@ -5,7 +5,7 @@ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
5
5
  import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
6
6
  import type { ActiveNode, BlockControlsPlugin, HandleOptions } from '../types';
7
7
  import { type DropTargetProps } from '../ui/drop-target';
8
- import { type AnchorHeightsCache } from '../utils/anchor-utils';
8
+ import { type AnchorRectCache } from '../utils/anchor-utils';
9
9
  export declare const TYPE_DROP_TARGET_DEC = "drop-target-decoration";
10
10
  export declare const TYPE_HANDLE_DEC = "drag-handle";
11
11
  export declare const TYPE_NODE_DEC = "node-decoration";
@@ -27,8 +27,8 @@ export declare const findHandleDec: (decorations: DecorationSet, from?: number,
27
27
  * @returns
28
28
  */
29
29
  export declare const findNodeDecs: (decorations: DecorationSet, from?: number, to?: number) => Decoration[];
30
- export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorHeightsCache?: AnchorHeightsCache) => Decoration;
31
- export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode, anchorHeightsCache?: AnchorHeightsCache, from?: number, to?: number) => Decoration[];
30
+ export declare const createDropTargetDecoration: (pos: number, props: Omit<DropTargetProps, 'getPos'>, side?: number, anchorRectCache?: AnchorRectCache) => Decoration;
31
+ export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode, anchorRectCache?: AnchorRectCache, from?: number, to?: number) => Decoration[];
32
32
  export declare const emptyParagraphNodeDecorations: () => Decoration;
33
33
  export declare const nodeDecorations: (newState: EditorState, from?: number, to?: number) => Decoration[];
34
34
  export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;
@@ -5,13 +5,13 @@ import type { EditorState, ReadonlyTransaction } from '@atlaskit/editor-prosemir
5
5
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
6
6
  import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
7
7
  import type { BlockControlsPlugin, PluginState } from '../types';
8
- import { AnchorHeightsCache } from '../utils/anchor-utils';
8
+ import { AnchorRectCache } from '../utils/anchor-utils';
9
9
  export declare const key: PluginKey<PluginState>;
10
10
  export interface FlagType {
11
11
  isNestedEnabled: boolean;
12
12
  isOptimisedApply: boolean;
13
13
  }
14
- export declare const newApply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, newState: EditorState, flags: FlagType, anchorHeightsCache?: AnchorHeightsCache) => {
14
+ export declare const newApply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, newState: EditorState, flags: FlagType, anchorRectCache?: AnchorRectCache) => {
15
15
  decorations: DecorationSet;
16
16
  activeNode: any;
17
17
  isDragging: any;
@@ -23,7 +23,7 @@ export declare const newApply: (api: ExtractInjectionAPI<BlockControlsPlugin> |
23
23
  isDocSizeLimitEnabled: boolean | null;
24
24
  isPMDragging: any;
25
25
  };
26
- export declare const oldApply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, oldState: EditorState, newState: EditorState, flags: FlagType, anchorHeightsCache?: AnchorHeightsCache) => {
26
+ export declare const oldApply: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage'], tr: ReadonlyTransaction, currentState: PluginState, oldState: EditorState, newState: EditorState, flags: FlagType, anchorRectCache?: AnchorRectCache) => {
27
27
  decorations: DecorationSet;
28
28
  activeNode: any;
29
29
  isDragging: any;
@@ -58,6 +58,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
58
58
  ];
59
59
  sharedState: BlockControlsSharedState;
60
60
  commands: {
61
+ moveToLayout: (start: number, to: number, position: 'left' | 'right') => EditorCommand;
61
62
  moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;
62
63
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
63
64
  setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
@@ -27,3 +27,6 @@ export declare const nodeMargins: {
27
27
  bottom: number;
28
28
  };
29
29
  };
30
+ export declare const DEFAULT_COLUMN_DISTRIBUTIONS: {
31
+ [key: number]: number;
32
+ };
@@ -1,8 +1,8 @@
1
1
  import { jsx } from '@emotion/react';
2
- import { type AnchorHeightsCache } from '../utils/anchor-utils';
2
+ import { type AnchorRectCache } from '../utils/anchor-utils';
3
3
  import { type DropTargetProps } from './drop-target';
4
4
  export declare const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET = "--editor-block-controls-drop-indicator-offset";
5
5
  export declare const EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP = "--editor-block-controls-drop-indicator-gap";
6
- export declare const DropTargetV2: ({ api, getPos, prevNode, nextNode, parentNode, formatMessage, anchorHeightsCache, dropTargetStyle, }: DropTargetProps & {
7
- anchorHeightsCache?: AnchorHeightsCache | undefined;
6
+ export declare const DropTargetV2: (props: DropTargetProps & {
7
+ anchorRectCache?: AnchorRectCache | undefined;
8
8
  }) => jsx.JSX.Element;
@@ -0,0 +1,20 @@
1
+ import { jsx } from '@emotion/react';
2
+ import { type EditorContainerWidth } from '@atlaskit/editor-common/src/types';
3
+ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
4
+ import { type AnchorRectCache } from '../utils/anchor-utils';
5
+ import { type DropTargetProps } from './drop-target';
6
+ export declare const InlineDropTarget: ({ api, nextNode, position, anchorRectCache, }: DropTargetProps & {
7
+ anchorRectCache?: AnchorRectCache | undefined;
8
+ position: 'left' | 'right';
9
+ }) => jsx.JSX.Element;
10
+ type InlineHoverZoneProps = {
11
+ node?: PMNode;
12
+ editorWidthState?: EditorContainerWidth;
13
+ anchorRectCache?: AnchorRectCache;
14
+ position: 'left' | 'right';
15
+ onDragEnter: () => void;
16
+ onDragLeave: () => void;
17
+ onDrop: () => void;
18
+ };
19
+ export declare const InlineHoverZone: ({ node, editorWidthState, anchorRectCache, position, onDragEnter, onDragLeave, onDrop, }: InlineHoverZoneProps) => jsx.JSX.Element;
20
+ export {};
@@ -0,0 +1 @@
1
+ export declare const isPreRelease1: () => boolean;
@@ -1,12 +1,25 @@
1
1
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
2
2
  export declare const isAnchorSupported: import("memoize-one").MemoizedFn<() => boolean>;
3
- export declare class AnchorHeightsCache {
4
- private anchorHeightsMap;
3
+ type RectInfo = {
4
+ height: number;
5
+ top: number;
6
+ left: number;
7
+ right: number;
8
+ width: number;
9
+ };
10
+ export declare class AnchorRectCache {
11
+ private anchorRectMap;
5
12
  private isAnchorSupported;
6
13
  private isDirty;
7
14
  private view;
8
15
  clear(): void;
9
- private getHeights;
16
+ private getRects;
10
17
  setEditorView(view: EditorView): void;
11
18
  getHeight(anchorName: string): number | null;
19
+ getWidth(anchorName: string): number | null;
20
+ getLeft(anchorName: string): number | null;
21
+ getTop(anchorName: string): number | null;
22
+ getRight(anchorName: string): number | null;
23
+ getRect(anchorName: string): RectInfo | null;
12
24
  }
25
+ export {};
@@ -0,0 +1,2 @@
1
+ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
2
+ export declare const shouldAllowInlineDropTarget: (isNested: boolean, node?: PMNode) => boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "2.6.3",
3
+ "version": "2.7.0",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -150,6 +150,9 @@
150
150
  },
151
151
  "platform_editor_drag_and_drop_target_v2": {
152
152
  "type": "boolean"
153
+ },
154
+ "platform_editor_advanced_layouts_pre_release_1": {
155
+ "type": "boolean"
153
156
  }
154
157
  }
155
158
  }