@atlaskit/editor-plugin-layout 1.12.0 → 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 +8 -0
  2. package/dist/cjs/node-views/index.js +14 -4
  3. package/dist/es2019/node-views/index.js +13 -4
  4. package/dist/esm/node-views/index.js +14 -4
  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,13 @@
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
+
3
11
  ## 1.12.0
4
12
 
5
13
  ### Minor Changes
package/dist/cjs/node-views/index.js CHANGED
@@ -14,6 +14,7 @@ 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) {
@@ -38,6 +39,13 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
38
39
  parentRef: parentRef
39
40
  });
40
41
  };
42
+ var toDOM = function toDOM() {
43
+ return ['div', {
44
+ class: 'layout-section-container'
45
+ }, ['div', {
46
+ 'data-layout-section': true
47
+ }, 0]];
48
+ };
41
49
  var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
42
50
  (0, _inherits2.default)(LayoutSectionView, _ReactNodeView);
43
51
  var _super = _createSuper(LayoutSectionView);
@@ -51,12 +59,14 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
51
59
  (0, _createClass2.default)(LayoutSectionView, [{
52
60
  key: "getContentDOM",
53
61
  value: function getContentDOM() {
54
- var dom = document.createElement('div');
55
- dom.setAttribute('data-layout-section', 'true');
56
- 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]');
57
66
  this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
58
67
  return {
59
- dom: dom
68
+ dom: container,
69
+ contentDOM: contentDOM
60
70
  };
61
71
  }
62
72
  }, {
package/dist/es2019/node-views/index.js CHANGED
@@ -2,6 +2,7 @@ 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,
@@ -26,18 +27,26 @@ const LayoutBreakoutResizer = ({
26
27
  parentRef: parentRef
27
28
  });
28
29
  };
30
+ const toDOM = () => ['div', {
31
+ class: 'layout-section-container'
32
+ }, ['div', {
33
+ 'data-layout-section': true
34
+ }, 0]];
29
35
  export class LayoutSectionView extends ReactNodeView {
30
36
  constructor(props) {
31
37
  super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
32
38
  this.options = props.options;
33
39
  }
34
40
  getContentDOM() {
35
- const dom = document.createElement('div');
36
- dom.setAttribute('data-layout-section', 'true');
37
- this.layoutDOM = dom;
41
+ const {
42
+ dom: container,
43
+ contentDOM
44
+ } = DOMSerializer.renderSpec(document, toDOM());
45
+ this.layoutDOM = container.querySelector('[data-layout-section]');
38
46
  this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
39
47
  return {
40
- dom
48
+ dom: container,
49
+ contentDOM
41
50
  };
42
51
  }
43
52
  setDomAttrs(node, element) {
package/dist/esm/node-views/index.js CHANGED
@@ -9,6 +9,7 @@ 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,
@@ -31,6 +32,13 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
31
32
  parentRef: parentRef
32
33
  });
33
34
  };
35
+ var toDOM = function toDOM() {
36
+ return ['div', {
37
+ class: 'layout-section-container'
38
+ }, ['div', {
39
+ 'data-layout-section': true
40
+ }, 0]];
41
+ };
34
42
  export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
35
43
  _inherits(LayoutSectionView, _ReactNodeView);
36
44
  var _super = _createSuper(LayoutSectionView);
@@ -44,12 +52,14 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
44
52
  _createClass(LayoutSectionView, [{
45
53
  key: "getContentDOM",
46
54
  value: function getContentDOM() {
47
- var dom = document.createElement('div');
48
- dom.setAttribute('data-layout-section', 'true');
49
- 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]');
50
59
  this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
51
60
  return {
52
- dom: dom
61
+ dom: container,
62
+ contentDOM: contentDOM
53
63
  };
54
64
  }
55
65
  }, {
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.12.0",
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.17.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"