@atlaskit/editor-plugin-layout 1.11.1 → 1.12.1

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 (7) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/node-views/index.js +21 -8
  3. package/dist/es2019/node-views/index.js +20 -8
  4. package/dist/esm/node-views/index.js +21 -8
  5. package/dist/types/node-views/index.d.ts +3 -2
  6. package/dist/types-ts4.5/node-views/index.d.ts +3 -2
  7. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/editor-plugin-layout
2
2
 
3
+ ## 1.12.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#162554](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162554)
8
+ [`bb0f938202ca0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bb0f938202ca0) -
9
+ [ux] Advanced layout responsiveness in Editor
10
+
11
+ ## 1.12.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#162388](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162388)
16
+ [`ac57b50211fdc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ac57b50211fdc) -
17
+ add 'clamped' option to resizer prop HandleSize which uses CSS to alter height of handle, add
18
+ logic to ensure handles are visible when selection is inside node
19
+
20
+ ### Patch Changes
21
+
22
+ - Updated dependencies
23
+
3
24
  ## 1.11.1
4
25
 
5
26
  ### Patch Changes
package/dist/cjs/node-views/index.js CHANGED
@@ -14,13 +14,15 @@ var _react = _interopRequireDefault(require("react"));
14
14
  var _hooks = require("@atlaskit/editor-common/hooks");
15
15
  var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
16
16
  var _resizer = require("@atlaskit/editor-common/resizer");
17
+ var _model = require("@atlaskit/editor-prosemirror/model");
17
18
  function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
18
19
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
19
20
  var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
20
21
  var pluginInjectionApi = _ref.pluginInjectionApi,
21
22
  forwardRef = _ref.forwardRef,
22
23
  getPos = _ref.getPos,
23
- view = _ref.view;
24
+ view = _ref.view,
25
+ parentRef = _ref.parentRef;
24
26
  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorDisabled']),
25
27
  editorDisabledState = _useSharedPluginState.editorDisabledState;
26
28
  var getEditorWidth = function getEditorWidth() {
@@ -31,11 +33,19 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
31
33
  getRef: forwardRef,
32
34
  getPos: getPos,
33
35
  editorView: view,
34
- node: "layoutSection",
36
+ nodeType: "layoutSection",
35
37
  getEditorWidth: getEditorWidth,
36
- disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true
38
+ disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true,
39
+ parentRef: parentRef
37
40
  });
38
41
  };
42
+ var toDOM = function toDOM() {
43
+ return ['div', {
44
+ class: 'layout-section-container'
45
+ }, ['div', {
46
+ 'data-layout-section': true
47
+ }, 0]];
48
+ };
39
49
  var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
40
50
  (0, _inherits2.default)(LayoutSectionView, _ReactNodeView);
41
51
  var _super = _createSuper(LayoutSectionView);
@@ -49,12 +59,14 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
49
59
  (0, _createClass2.default)(LayoutSectionView, [{
50
60
  key: "getContentDOM",
51
61
  value: function getContentDOM() {
52
- var dom = document.createElement('div');
53
- dom.setAttribute('data-layout-section', 'true');
54
- this.layoutDOM = dom;
62
+ var _ref2 = _model.DOMSerializer.renderSpec(document, toDOM()),
63
+ container = _ref2.dom,
64
+ contentDOM = _ref2.contentDOM;
65
+ this.layoutDOM = container.querySelector('[data-layout-section]');
55
66
  this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
56
67
  return {
57
- dom: dom
68
+ dom: container,
69
+ contentDOM: contentDOM
58
70
  };
59
71
  }
60
72
  }, {
@@ -71,7 +83,8 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
71
83
  pluginInjectionApi: props.pluginInjectionApi,
72
84
  forwardRef: forwardRef,
73
85
  getPos: props.getPos,
74
- view: props.view
86
+ view: props.view,
87
+ parentRef: this.layoutDOM
75
88
  });
76
89
  }
77
90
  }, {
package/dist/es2019/node-views/index.js CHANGED
@@ -2,11 +2,13 @@ import React from 'react';
2
2
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
3
3
  import ReactNodeView from '@atlaskit/editor-common/react-node-view';
4
4
  import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
5
+ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
5
6
  const LayoutBreakoutResizer = ({
6
7
  pluginInjectionApi,
7
8
  forwardRef,
8
9
  getPos,
9
- view
10
+ view,
11
+ parentRef
10
12
  }) => {
11
13
  const {
12
14
  editorDisabledState
@@ -19,23 +21,32 @@ const LayoutBreakoutResizer = ({
19
21
  getRef: forwardRef,
20
22
  getPos: getPos,
21
23
  editorView: view,
22
- node: "layoutSection",
24
+ nodeType: "layoutSection",
23
25
  getEditorWidth: getEditorWidth,
24
- disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true
26
+ disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true,
27
+ parentRef: parentRef
25
28
  });
26
29
  };
30
+ const toDOM = () => ['div', {
31
+ class: 'layout-section-container'
32
+ }, ['div', {
33
+ 'data-layout-section': true
34
+ }, 0]];
27
35
  export class LayoutSectionView extends ReactNodeView {
28
36
  constructor(props) {
29
37
  super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
30
38
  this.options = props.options;
31
39
  }
32
40
  getContentDOM() {
33
- const dom = document.createElement('div');
34
- dom.setAttribute('data-layout-section', 'true');
35
- this.layoutDOM = dom;
41
+ const {
42
+ dom: container,
43
+ contentDOM
44
+ } = DOMSerializer.renderSpec(document, toDOM());
45
+ this.layoutDOM = container.querySelector('[data-layout-section]');
36
46
  this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
37
47
  return {
38
- dom
48
+ dom: container,
49
+ contentDOM
39
50
  };
40
51
  }
41
52
  setDomAttrs(node, element) {
@@ -48,7 +59,8 @@ export class LayoutSectionView extends ReactNodeView {
48
59
  pluginInjectionApi: props.pluginInjectionApi,
49
60
  forwardRef: forwardRef,
50
61
  getPos: props.getPos,
51
- view: props.view
62
+ view: props.view,
63
+ parentRef: this.layoutDOM
52
64
  });
53
65
  }
54
66
  ignoreMutation(mutation) {
package/dist/esm/node-views/index.js CHANGED
@@ -9,11 +9,13 @@ import React from 'react';
9
9
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
10
10
  import ReactNodeView from '@atlaskit/editor-common/react-node-view';
11
11
  import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
12
+ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
12
13
  var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
13
14
  var pluginInjectionApi = _ref.pluginInjectionApi,
14
15
  forwardRef = _ref.forwardRef,
15
16
  getPos = _ref.getPos,
16
- view = _ref.view;
17
+ view = _ref.view,
18
+ parentRef = _ref.parentRef;
17
19
  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorDisabled']),
18
20
  editorDisabledState = _useSharedPluginState.editorDisabledState;
19
21
  var getEditorWidth = function getEditorWidth() {
@@ -24,11 +26,19 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
24
26
  getRef: forwardRef,
25
27
  getPos: getPos,
26
28
  editorView: view,
27
- node: "layoutSection",
29
+ nodeType: "layoutSection",
28
30
  getEditorWidth: getEditorWidth,
29
- disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true
31
+ disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true,
32
+ parentRef: parentRef
30
33
  });
31
34
  };
35
+ var toDOM = function toDOM() {
36
+ return ['div', {
37
+ class: 'layout-section-container'
38
+ }, ['div', {
39
+ 'data-layout-section': true
40
+ }, 0]];
41
+ };
32
42
  export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
33
43
  _inherits(LayoutSectionView, _ReactNodeView);
34
44
  var _super = _createSuper(LayoutSectionView);
@@ -42,12 +52,14 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
42
52
  _createClass(LayoutSectionView, [{
43
53
  key: "getContentDOM",
44
54
  value: function getContentDOM() {
45
- var dom = document.createElement('div');
46
- dom.setAttribute('data-layout-section', 'true');
47
- this.layoutDOM = dom;
55
+ var _ref2 = DOMSerializer.renderSpec(document, toDOM()),
56
+ container = _ref2.dom,
57
+ contentDOM = _ref2.contentDOM;
58
+ this.layoutDOM = container.querySelector('[data-layout-section]');
48
59
  this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
49
60
  return {
50
- dom: dom
61
+ dom: container,
62
+ contentDOM: contentDOM
51
63
  };
52
64
  }
53
65
  }, {
@@ -64,7 +76,8 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
64
76
  pluginInjectionApi: props.pluginInjectionApi,
65
77
  forwardRef: forwardRef,
66
78
  getPos: props.getPos,
67
- view: props.view
79
+ view: props.view,
80
+ parentRef: this.layoutDOM
68
81
  });
69
82
  }
70
83
  }, {
package/dist/types/node-views/index.d.ts CHANGED
@@ -3,7 +3,7 @@ import { type EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
3
3
  import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
4
4
  import ReactNodeView from '@atlaskit/editor-common/react-node-view';
5
5
  import { type ExtractInjectionAPI, type getPosHandlerNode } from '@atlaskit/editor-common/types';
6
- import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
6
+ import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
7
7
  import { type EditorView } from '@atlaskit/editor-prosemirror/view';
8
8
  import { type LayoutPlugin } from '../plugin';
9
9
  import { type LayoutPluginOptions } from '../types';
@@ -30,7 +30,8 @@ export declare class LayoutSectionView extends ReactNodeView<LayoutSectionViewPr
30
30
  options: LayoutPluginOptions;
31
31
  });
32
32
  getContentDOM(): {
33
- dom: HTMLDivElement;
33
+ dom: HTMLElement;
34
+ contentDOM: HTMLElement | undefined;
34
35
  };
35
36
  setDomAttrs(node: PMNode, element: HTMLElement): void;
36
37
  render(props: LayoutSectionViewProps, forwardRef: ForwardRef): JSX.Element;
package/dist/types-ts4.5/node-views/index.d.ts CHANGED
@@ -3,7 +3,7 @@ import { type EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
3
3
  import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
4
4
  import ReactNodeView from '@atlaskit/editor-common/react-node-view';
5
5
  import { type ExtractInjectionAPI, type getPosHandlerNode } from '@atlaskit/editor-common/types';
6
- import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
6
+ import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
7
7
  import { type EditorView } from '@atlaskit/editor-prosemirror/view';
8
8
  import { type LayoutPlugin } from '../plugin';
9
9
  import { type LayoutPluginOptions } from '../types';
@@ -30,7 +30,8 @@ export declare class LayoutSectionView extends ReactNodeView<LayoutSectionViewPr
30
30
  options: LayoutPluginOptions;
31
31
  });
32
32
  getContentDOM(): {
33
- dom: HTMLDivElement;
33
+ dom: HTMLElement;
34
+ contentDOM: HTMLElement | undefined;
34
35
  };
35
36
  setDomAttrs(node: PMNode, element: HTMLElement): void;
36
37
  render(props: LayoutSectionViewProps, forwardRef: ForwardRef): JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-layout",
3
- "version": "1.11.1",
3
+ "version": "1.12.1",
4
4
  "description": "Layout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -32,7 +32,7 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@atlaskit/adf-schema": "^44.2.0",
35
- "@atlaskit/editor-common": "^94.13.0",
35
+ "@atlaskit/editor-common": "^94.18.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.10.0",
37
37
  "@atlaskit/editor-plugin-decorations": "^1.3.0",
38
38
  "@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -40,7 +40,7 @@
40
40
  "@atlaskit/editor-prosemirror": "6.0.0",
41
41
  "@atlaskit/icon": "^22.24.0",
42
42
  "@atlaskit/platform-feature-flags": "^0.3.0",
43
- "@atlaskit/tmp-editor-statsig": "^2.12.0",
43
+ "@atlaskit/tmp-editor-statsig": "^2.13.0",
44
44
  "@atlaskit/tokens": "^2.2.0",
45
45
  "@babel/runtime": "^7.0.0",
46
46
  "@emotion/react": "^11.7.1"