@atlaskit/editor-plugin-synced-block 2.2.0 → 2.2.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 (11) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/nodeviews/syncedBlock.js +6 -4
  3. package/dist/cjs/ui/SyncBlockEditorWrapper.js +17 -20
  4. package/dist/cjs/ui/SyncBlockRendererWrapper.js +5 -4
  5. package/dist/es2019/nodeviews/syncedBlock.js +6 -4
  6. package/dist/es2019/ui/SyncBlockEditorWrapper.js +13 -16
  7. package/dist/es2019/ui/SyncBlockRendererWrapper.js +5 -4
  8. package/dist/esm/nodeviews/syncedBlock.js +6 -4
  9. package/dist/esm/ui/SyncBlockEditorWrapper.js +17 -20
  10. package/dist/esm/ui/SyncBlockRendererWrapper.js +5 -4
  11. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-synced-block
2
2
 
3
+ ## 2.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`bd24a3afbfb65`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bd24a3afbfb65) -
8
+ Updated look and feel of the Synced Block Editor
9
+ - Updated dependencies
10
+
11
+ ## 2.2.1
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 2.2.0
4
18
 
5
19
  ### Minor Changes
package/dist/cjs/nodeviews/syncedBlock.js CHANGED
@@ -13,6 +13,7 @@ var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
13
13
  var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
14
14
  var _react = _interopRequireDefault(require("react"));
15
15
  var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
16
+ var _syncBlock = require("@atlaskit/editor-common/sync-block");
16
17
  var _state = require("@atlaskit/editor-prosemirror/state");
17
18
  var _SyncBlockEditorWrapper = require("../ui/SyncBlockEditorWrapper");
18
19
  var _SyncBlockRendererWrapper = require("../ui/SyncBlockRendererWrapper");
@@ -59,6 +60,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
59
60
  key: "createDomRef",
60
61
  value: function createDomRef() {
61
62
  var domRef = document.createElement('div');
63
+ domRef.classList.add(_syncBlock.SyncBlockSharedCssClassName.prefix);
62
64
  return domRef;
63
65
  }
64
66
  }, {
@@ -75,16 +77,16 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
75
77
  key: "renderEditor",
76
78
  value: function renderEditor() {
77
79
  var _this$options, _this$options2;
78
- var popupsBoundariesElement = this.dom.closest('.fabric-editor-popup-scroll-parent');
79
- if (!(popupsBoundariesElement instanceof HTMLElement)) {
80
+ var fabricEditorPopupScrollParent = this.view.dom.closest('.fabric-editor-popup-scroll-parent');
81
+ if (!(fabricEditorPopupScrollParent instanceof HTMLElement)) {
80
82
  return null;
81
83
  }
82
84
  if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.getSyncedBlockEditor)) {
83
85
  return null;
84
86
  }
85
87
  return /*#__PURE__*/_react.default.createElement(_SyncBlockEditorWrapper.SyncBlockEditorWrapper, {
86
- popupsBoundariesElement: popupsBoundariesElement,
87
- popupsMountPoint: this.dom,
88
+ popupsBoundariesElement: fabricEditorPopupScrollParent,
89
+ popupsMountPoint: fabricEditorPopupScrollParent,
88
90
  defaultDocument: defaultSyncBlockEditorDocument,
89
91
  handleContentChanges: this.handleContentChanges,
90
92
  setInnerEditorView: this.setInnerEditorView,
package/dist/cjs/ui/SyncBlockEditorWrapper.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.SyncBlockEditorWrapperDataId = exports.SyncBlockEditorWrapper = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
+ var _syncBlock = require("@atlaskit/editor-common/sync-block");
9
10
  var SyncBlockEditorWrapperDataId = exports.SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
10
11
  var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_ref) {
11
12
  var defaultDocument = _ref.defaultDocument,
@@ -14,25 +15,21 @@ var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_
14
15
  popupsMountPoint = _ref.popupsMountPoint,
15
16
  setInnerEditorView = _ref.setInnerEditorView,
16
17
  handleContentChanges = _ref.handleContentChanges;
17
- return (
18
- /*#__PURE__*/
19
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/ensure-design-token-usage
20
- _react.default.createElement("div", {
21
- "data-testid": SyncBlockEditorWrapperDataId,
22
- style: {
23
- border: 'purple solid 1px'
24
- }
25
- }, getSyncedBlockEditor({
26
- popupsBoundariesElement: popupsBoundariesElement,
27
- defaultDocument: defaultDocument,
28
- popupsMountPoint: popupsMountPoint,
29
- onChange: function onChange(value) {
30
- return handleContentChanges(value.state.doc);
31
- },
32
- onEditorReady: function onEditorReady(value) {
33
- return setInnerEditorView(value.editorView);
34
- }
35
- }))
36
- );
18
+ return /*#__PURE__*/_react.default.createElement("div", {
19
+ "data-testid": SyncBlockEditorWrapperDataId
20
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
21
+ ,
22
+ className: _syncBlock.SyncBlockSharedCssClassName.editor
23
+ }, getSyncedBlockEditor({
24
+ popupsBoundariesElement: popupsBoundariesElement,
25
+ defaultDocument: defaultDocument,
26
+ popupsMountPoint: popupsMountPoint,
27
+ onChange: function onChange(value) {
28
+ return handleContentChanges(value.state.doc);
29
+ },
30
+ onEditorReady: function onEditorReady(value) {
31
+ return setInnerEditorView(value.editorView);
32
+ }
33
+ }));
37
34
  };
38
35
  var SyncBlockEditorWrapper = exports.SyncBlockEditorWrapper = /*#__PURE__*/_react.default.memo(SyncBlockEditorWrapperComponent);
package/dist/cjs/ui/SyncBlockRendererWrapper.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.SyncBlockRendererWrapper = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
+ var _syncBlock = require("@atlaskit/editor-common/sync-block");
9
10
  var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
10
11
  var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
11
12
  var getSyncedBlockRenderer = _ref.getSyncedBlockRenderer,
@@ -14,10 +15,10 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
14
15
  /*#__PURE__*/
15
16
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/ensure-design-token-usage
16
17
  _react.default.createElement("div", {
17
- "data-testid": SyncBlockRendererWrapperDataId,
18
- style: {
19
- border: 'blue solid 1px'
20
- }
18
+ "data-testid": SyncBlockRendererWrapperDataId
19
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
20
+ ,
21
+ className: _syncBlock.SyncBlockSharedCssClassName.renderer
21
22
  }, getSyncedBlockRenderer({
22
23
  docNode: docNode
23
24
  }))
package/dist/es2019/nodeviews/syncedBlock.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import ReactNodeView from '@atlaskit/editor-common/react-node-view';
3
+ import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
3
4
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
4
5
  import { SyncBlockEditorWrapper, SyncBlockEditorWrapperDataId } from '../ui/SyncBlockEditorWrapper';
5
6
  import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
@@ -38,6 +39,7 @@ class SyncBlock extends ReactNodeView {
38
39
  }
39
40
  createDomRef() {
40
41
  const domRef = document.createElement('div');
42
+ domRef.classList.add(SyncBlockSharedCssClassName.prefix);
41
43
  return domRef;
42
44
  }
43
45
  handleContentChanges(_updatedDoc) {
@@ -48,16 +50,16 @@ class SyncBlock extends ReactNodeView {
48
50
  }
49
51
  renderEditor() {
50
52
  var _this$options, _this$options2;
51
- const popupsBoundariesElement = this.dom.closest('.fabric-editor-popup-scroll-parent');
52
- if (!(popupsBoundariesElement instanceof HTMLElement)) {
53
+ const fabricEditorPopupScrollParent = this.view.dom.closest('.fabric-editor-popup-scroll-parent');
54
+ if (!(fabricEditorPopupScrollParent instanceof HTMLElement)) {
53
55
  return null;
54
56
  }
55
57
  if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.getSyncedBlockEditor)) {
56
58
  return null;
57
59
  }
58
60
  return /*#__PURE__*/React.createElement(SyncBlockEditorWrapper, {
59
- popupsBoundariesElement: popupsBoundariesElement,
60
- popupsMountPoint: this.dom,
61
+ popupsBoundariesElement: fabricEditorPopupScrollParent,
62
+ popupsMountPoint: fabricEditorPopupScrollParent,
61
63
  defaultDocument: defaultSyncBlockEditorDocument,
62
64
  handleContentChanges: this.handleContentChanges,
63
65
  setInnerEditorView: this.setInnerEditorView,
package/dist/es2019/ui/SyncBlockEditorWrapper.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
2
3
  export const SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
3
4
  const SyncBlockEditorWrapperComponent = ({
4
5
  defaultDocument,
@@ -8,21 +9,17 @@ const SyncBlockEditorWrapperComponent = ({
8
9
  setInnerEditorView,
9
10
  handleContentChanges
10
11
  }) => {
11
- return (
12
- /*#__PURE__*/
13
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/ensure-design-token-usage
14
- React.createElement("div", {
15
- "data-testid": SyncBlockEditorWrapperDataId,
16
- style: {
17
- border: 'purple solid 1px'
18
- }
19
- }, getSyncedBlockEditor({
20
- popupsBoundariesElement,
21
- defaultDocument,
22
- popupsMountPoint,
23
- onChange: value => handleContentChanges(value.state.doc),
24
- onEditorReady: value => setInnerEditorView(value.editorView)
25
- }))
26
- );
12
+ return /*#__PURE__*/React.createElement("div", {
13
+ "data-testid": SyncBlockEditorWrapperDataId
14
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
15
+ ,
16
+ className: SyncBlockSharedCssClassName.editor
17
+ }, getSyncedBlockEditor({
18
+ popupsBoundariesElement,
19
+ defaultDocument,
20
+ popupsMountPoint,
21
+ onChange: value => handleContentChanges(value.state.doc),
22
+ onEditorReady: value => setInnerEditorView(value.editorView)
23
+ }));
27
24
  };
28
25
  export const SyncBlockEditorWrapper = /*#__PURE__*/React.memo(SyncBlockEditorWrapperComponent);
package/dist/es2019/ui/SyncBlockRendererWrapper.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
2
3
  const SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
3
4
  const SyncBlockRendererWrapperComponent = ({
4
5
  getSyncedBlockRenderer,
@@ -8,10 +9,10 @@ const SyncBlockRendererWrapperComponent = ({
8
9
  /*#__PURE__*/
9
10
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/ensure-design-token-usage
10
11
  React.createElement("div", {
11
- "data-testid": SyncBlockRendererWrapperDataId,
12
- style: {
13
- border: 'blue solid 1px'
14
- }
12
+ "data-testid": SyncBlockRendererWrapperDataId
13
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
14
+ ,
15
+ className: SyncBlockSharedCssClassName.renderer
15
16
  }, getSyncedBlockRenderer({
16
17
  docNode
17
18
  }))
package/dist/esm/nodeviews/syncedBlock.js CHANGED
@@ -9,6 +9,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
9
9
  function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
10
10
  import React from 'react';
11
11
  import ReactNodeView from '@atlaskit/editor-common/react-node-view';
12
+ import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
12
13
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
13
14
  import { SyncBlockEditorWrapper, SyncBlockEditorWrapperDataId } from '../ui/SyncBlockEditorWrapper';
14
15
  import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
@@ -52,6 +53,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
52
53
  key: "createDomRef",
53
54
  value: function createDomRef() {
54
55
  var domRef = document.createElement('div');
56
+ domRef.classList.add(SyncBlockSharedCssClassName.prefix);
55
57
  return domRef;
56
58
  }
57
59
  }, {
@@ -68,16 +70,16 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
68
70
  key: "renderEditor",
69
71
  value: function renderEditor() {
70
72
  var _this$options, _this$options2;
71
- var popupsBoundariesElement = this.dom.closest('.fabric-editor-popup-scroll-parent');
72
- if (!(popupsBoundariesElement instanceof HTMLElement)) {
73
+ var fabricEditorPopupScrollParent = this.view.dom.closest('.fabric-editor-popup-scroll-parent');
74
+ if (!(fabricEditorPopupScrollParent instanceof HTMLElement)) {
73
75
  return null;
74
76
  }
75
77
  if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.getSyncedBlockEditor)) {
76
78
  return null;
77
79
  }
78
80
  return /*#__PURE__*/React.createElement(SyncBlockEditorWrapper, {
79
- popupsBoundariesElement: popupsBoundariesElement,
80
- popupsMountPoint: this.dom,
81
+ popupsBoundariesElement: fabricEditorPopupScrollParent,
82
+ popupsMountPoint: fabricEditorPopupScrollParent,
81
83
  defaultDocument: defaultSyncBlockEditorDocument,
82
84
  handleContentChanges: this.handleContentChanges,
83
85
  setInnerEditorView: this.setInnerEditorView,
package/dist/esm/ui/SyncBlockEditorWrapper.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
2
3
  export var SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
3
4
  var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_ref) {
4
5
  var defaultDocument = _ref.defaultDocument,
@@ -7,25 +8,21 @@ var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_
7
8
  popupsMountPoint = _ref.popupsMountPoint,
8
9
  setInnerEditorView = _ref.setInnerEditorView,
9
10
  handleContentChanges = _ref.handleContentChanges;
10
- return (
11
- /*#__PURE__*/
12
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/ensure-design-token-usage
13
- React.createElement("div", {
14
- "data-testid": SyncBlockEditorWrapperDataId,
15
- style: {
16
- border: 'purple solid 1px'
17
- }
18
- }, getSyncedBlockEditor({
19
- popupsBoundariesElement: popupsBoundariesElement,
20
- defaultDocument: defaultDocument,
21
- popupsMountPoint: popupsMountPoint,
22
- onChange: function onChange(value) {
23
- return handleContentChanges(value.state.doc);
24
- },
25
- onEditorReady: function onEditorReady(value) {
26
- return setInnerEditorView(value.editorView);
27
- }
28
- }))
29
- );
11
+ return /*#__PURE__*/React.createElement("div", {
12
+ "data-testid": SyncBlockEditorWrapperDataId
13
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
14
+ ,
15
+ className: SyncBlockSharedCssClassName.editor
16
+ }, getSyncedBlockEditor({
17
+ popupsBoundariesElement: popupsBoundariesElement,
18
+ defaultDocument: defaultDocument,
19
+ popupsMountPoint: popupsMountPoint,
20
+ onChange: function onChange(value) {
21
+ return handleContentChanges(value.state.doc);
22
+ },
23
+ onEditorReady: function onEditorReady(value) {
24
+ return setInnerEditorView(value.editorView);
25
+ }
26
+ }));
30
27
  };
31
28
  export var SyncBlockEditorWrapper = /*#__PURE__*/React.memo(SyncBlockEditorWrapperComponent);
package/dist/esm/ui/SyncBlockRendererWrapper.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
2
3
  var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
3
4
  var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
4
5
  var getSyncedBlockRenderer = _ref.getSyncedBlockRenderer,
@@ -7,10 +8,10 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
7
8
  /*#__PURE__*/
8
9
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/ensure-design-token-usage
9
10
  React.createElement("div", {
10
- "data-testid": SyncBlockRendererWrapperDataId,
11
- style: {
12
- border: 'blue solid 1px'
13
- }
11
+ "data-testid": SyncBlockRendererWrapperDataId
12
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
13
+ ,
14
+ className: SyncBlockSharedCssClassName.renderer
14
15
  }, getSyncedBlockRenderer({
15
16
  docNode: docNode
16
17
  }))
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-synced-block",
3
- "version": "2.2.0",
3
+ "version": "2.2.2",
4
4
  "description": "SyncedBlock plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -8,7 +8,7 @@
8
8
  "registry": "https://registry.npmjs.org/"
9
9
  },
10
10
  "atlassian": {
11
- "team": "Editor: Lego",
11
+ "team": "Editor: Jenga",
12
12
  "releaseModel": "continuous",
13
13
  "singleton": true
14
14
  },
@@ -32,14 +32,14 @@
32
32
  "@atlaskit/button": "23.4.9",
33
33
  "@atlaskit/editor-plugin-selection": "^5.0.0",
34
34
  "@atlaskit/editor-prosemirror": "7.0.0",
35
- "@atlaskit/icon": "28.2.1",
35
+ "@atlaskit/icon": "28.3.0",
36
36
  "@atlaskit/modal-dialog": "^14.3.0",
37
37
  "@babel/runtime": "^7.0.0",
38
38
  "react-intl-next": "npm:react-intl@^5.18.1",
39
39
  "uuid": "^3.1.0"
40
40
  },
41
41
  "peerDependencies": {
42
- "@atlaskit/editor-common": "^109.12.0",
42
+ "@atlaskit/editor-common": "^109.14.0",
43
43
  "react": "^18.2.0"
44
44
  },
45
45
  "devDependencies": {