@atlaskit/editor-plugin-layout 1.12.0 → 1.12.2

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 (10) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/node-views/index.js +14 -4
  3. package/dist/cjs/toolbar.js +1 -1
  4. package/dist/es2019/node-views/index.js +13 -4
  5. package/dist/es2019/toolbar.js +1 -1
  6. package/dist/esm/node-views/index.js +14 -4
  7. package/dist/esm/toolbar.js +1 -1
  8. package/dist/types/node-views/index.d.ts +3 -2
  9. package/dist/types-ts4.5/node-views/index.d.ts +3 -2
  10. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-layout
2
2
 
3
+ ## 1.12.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#165350](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165350)
8
+ [`195b3c26851ed`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/195b3c26851ed) -
9
+ [ED-25777] Fix a live page bug where when cursor is within the table in a layout, switching from
10
+ view to edit, breaks the table
11
+
12
+ ## 1.12.1
13
+
14
+ ### Patch Changes
15
+
16
+ - [#162554](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162554)
17
+ [`bb0f938202ca0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bb0f938202ca0) -
18
+ [ux] Advanced layout responsiveness in Editor
19
+
3
20
  ## 1.12.0
4
21
 
5
22
  ### 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/cjs/toolbar.js CHANGED
@@ -199,7 +199,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
199
199
  options: columnOptions,
200
200
  showSelected: true,
201
201
  testId: 'column-options-button'
202
- }, sidebarTypesByColumns.length > 0 && separator] : []), (0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
202
+ }].concat((0, _toConsumableArray2.default)(sidebarTypesByColumns.length > 0 ? [separator] : [])) : []), (0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
203
203
  return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
204
204
  })), (0, _toConsumableArray2.default)(addSidebarLayouts ? (0, _preRelease.isPreRelease2)() ? sidebarTypesByColumns.map(function (i) {
205
205
  return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
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/es2019/toolbar.js CHANGED
@@ -185,7 +185,7 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
185
185
  options: columnOptions,
186
186
  showSelected: true,
187
187
  testId: 'column-options-button'
188
- }, sidebarTypesByColumns.length > 0 && separator] : []), ...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? isPreRelease2() ? sidebarTypesByColumns.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), separator, {
188
+ }, ...(sidebarTypesByColumns.length > 0 ? [separator] : [])] : []), ...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? isPreRelease2() ? sidebarTypesByColumns.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), separator, {
189
189
  type: 'copy-button',
190
190
  supportsViewMode: !fg('platform_editor_remove_copy_button_from_view_mode'),
191
191
  items: [{
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/esm/toolbar.js CHANGED
@@ -189,7 +189,7 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
189
189
  options: columnOptions,
190
190
  showSelected: true,
191
191
  testId: 'column-options-button'
192
- }, sidebarTypesByColumns.length > 0 && separator] : []), _toConsumableArray(layoutTypes.map(function (i) {
192
+ }].concat(_toConsumableArray(sidebarTypesByColumns.length > 0 ? [separator] : [])) : []), _toConsumableArray(layoutTypes.map(function (i) {
193
193
  return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
194
194
  })), _toConsumableArray(addSidebarLayouts ? isPreRelease2() ? sidebarTypesByColumns.map(function (i) {
195
195
  return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
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.2",
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.21.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.16.0",
44
44
  "@atlaskit/tokens": "^2.2.0",
45
45
  "@babel/runtime": "^7.0.0",
46
46
  "@emotion/react": "^11.7.1"