@atlaskit/editor-plugin-synced-block 2.2.1 → 2.2.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 2.2.2
+
+### Patch Changes
+
+- [`bd24a3afbfb65`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bd24a3afbfb65) -
+  Updated look and feel of the Synced Block Editor
+- Updated dependencies
+
 ## 2.2.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/syncedBlock.js

@@ -13,6 +13,7 @@ var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _SyncBlockEditorWrapper = require("../ui/SyncBlockEditorWrapper");
 var _SyncBlockRendererWrapper = require("../ui/SyncBlockRendererWrapper");
@@ -59,6 +60,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     key: "createDomRef",
     value: function createDomRef() {
       var domRef = document.createElement('div');
+      domRef.classList.add(_syncBlock.SyncBlockSharedCssClassName.prefix);
       return domRef;
     }
   }, {
@@ -75,16 +77,16 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     key: "renderEditor",
     value: function renderEditor() {
       var _this$options, _this$options2;
-      var popupsBoundariesElement = this.dom.closest('.fabric-editor-popup-scroll-parent');
-      if (!(popupsBoundariesElement instanceof HTMLElement)) {
+      var fabricEditorPopupScrollParent = this.view.dom.closest('.fabric-editor-popup-scroll-parent');
+      if (!(fabricEditorPopupScrollParent instanceof HTMLElement)) {
         return null;
       }
       if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.getSyncedBlockEditor)) {
         return null;
       }
       return /*#__PURE__*/_react.default.createElement(_SyncBlockEditorWrapper.SyncBlockEditorWrapper, {
-        popupsBoundariesElement: popupsBoundariesElement,
-        popupsMountPoint: this.dom,
+        popupsBoundariesElement: fabricEditorPopupScrollParent,
+        popupsMountPoint: fabricEditorPopupScrollParent,
         defaultDocument: defaultSyncBlockEditorDocument,
         handleContentChanges: this.handleContentChanges,
         setInnerEditorView: this.setInnerEditorView,

package/dist/cjs/ui/SyncBlockEditorWrapper.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SyncBlockEditorWrapperDataId = exports.SyncBlockEditorWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var SyncBlockEditorWrapperDataId = exports.SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
 var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_ref) {
   var defaultDocument = _ref.defaultDocument,
@@ -14,25 +15,21 @@ var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_
     popupsMountPoint = _ref.popupsMountPoint,
     setInnerEditorView = _ref.setInnerEditorView,
     handleContentChanges = _ref.handleContentChanges;
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/ensure-design-token-usage
-    _react.default.createElement("div", {
-      "data-testid": SyncBlockEditorWrapperDataId,
-      style: {
-        border: 'purple solid 1px'
-      }
-    }, getSyncedBlockEditor({
-      popupsBoundariesElement: popupsBoundariesElement,
-      defaultDocument: defaultDocument,
-      popupsMountPoint: popupsMountPoint,
-      onChange: function onChange(value) {
-        return handleContentChanges(value.state.doc);
-      },
-      onEditorReady: function onEditorReady(value) {
-        return setInnerEditorView(value.editorView);
-      }
-    }))
-  );
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": SyncBlockEditorWrapperDataId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: _syncBlock.SyncBlockSharedCssClassName.editor
+  }, getSyncedBlockEditor({
+    popupsBoundariesElement: popupsBoundariesElement,
+    defaultDocument: defaultDocument,
+    popupsMountPoint: popupsMountPoint,
+    onChange: function onChange(value) {
+      return handleContentChanges(value.state.doc);
+    },
+    onEditorReady: function onEditorReady(value) {
+      return setInnerEditorView(value.editorView);
+    }
+  }));
 };
 var SyncBlockEditorWrapper = exports.SyncBlockEditorWrapper = /*#__PURE__*/_react.default.memo(SyncBlockEditorWrapperComponent);

package/dist/cjs/ui/SyncBlockRendererWrapper.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SyncBlockRendererWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
   var getSyncedBlockRenderer = _ref.getSyncedBlockRenderer,
@@ -14,10 +15,10 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/ensure-design-token-usage
     _react.default.createElement("div", {
-      "data-testid": SyncBlockRendererWrapperDataId,
-      style: {
-        border: 'blue solid 1px'
-      }
+      "data-testid": SyncBlockRendererWrapperDataId
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
+      className: _syncBlock.SyncBlockSharedCssClassName.renderer
     }, getSyncedBlockRenderer({
       docNode: docNode
     }))

package/dist/es2019/nodeviews/syncedBlock.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { SyncBlockEditorWrapper, SyncBlockEditorWrapperDataId } from '../ui/SyncBlockEditorWrapper';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
@@ -38,6 +39,7 @@ class SyncBlock extends ReactNodeView {
   }
   createDomRef() {
     const domRef = document.createElement('div');
+    domRef.classList.add(SyncBlockSharedCssClassName.prefix);
     return domRef;
   }
   handleContentChanges(_updatedDoc) {
@@ -48,16 +50,16 @@ class SyncBlock extends ReactNodeView {
   }
   renderEditor() {
     var _this$options, _this$options2;
-    const popupsBoundariesElement = this.dom.closest('.fabric-editor-popup-scroll-parent');
-    if (!(popupsBoundariesElement instanceof HTMLElement)) {
+    const fabricEditorPopupScrollParent = this.view.dom.closest('.fabric-editor-popup-scroll-parent');
+    if (!(fabricEditorPopupScrollParent instanceof HTMLElement)) {
       return null;
     }
     if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.getSyncedBlockEditor)) {
       return null;
     }
     return /*#__PURE__*/React.createElement(SyncBlockEditorWrapper, {
-      popupsBoundariesElement: popupsBoundariesElement,
-      popupsMountPoint: this.dom,
+      popupsBoundariesElement: fabricEditorPopupScrollParent,
+      popupsMountPoint: fabricEditorPopupScrollParent,
       defaultDocument: defaultSyncBlockEditorDocument,
       handleContentChanges: this.handleContentChanges,
       setInnerEditorView: this.setInnerEditorView,

package/dist/es2019/ui/SyncBlockEditorWrapper.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 export const SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
 const SyncBlockEditorWrapperComponent = ({
   defaultDocument,
@@ -8,21 +9,17 @@ const SyncBlockEditorWrapperComponent = ({
   setInnerEditorView,
   handleContentChanges
 }) => {
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/ensure-design-token-usage
-    React.createElement("div", {
-      "data-testid": SyncBlockEditorWrapperDataId,
-      style: {
-        border: 'purple solid 1px'
-      }
-    }, getSyncedBlockEditor({
-      popupsBoundariesElement,
-      defaultDocument,
-      popupsMountPoint,
-      onChange: value => handleContentChanges(value.state.doc),
-      onEditorReady: value => setInnerEditorView(value.editorView)
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": SyncBlockEditorWrapperDataId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: SyncBlockSharedCssClassName.editor
+  }, getSyncedBlockEditor({
+    popupsBoundariesElement,
+    defaultDocument,
+    popupsMountPoint,
+    onChange: value => handleContentChanges(value.state.doc),
+    onEditorReady: value => setInnerEditorView(value.editorView)
+  }));
 };
 export const SyncBlockEditorWrapper = /*#__PURE__*/React.memo(SyncBlockEditorWrapperComponent);

package/dist/es2019/ui/SyncBlockRendererWrapper.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 const SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 const SyncBlockRendererWrapperComponent = ({
   getSyncedBlockRenderer,
@@ -8,10 +9,10 @@ const SyncBlockRendererWrapperComponent = ({
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/ensure-design-token-usage
     React.createElement("div", {
-      "data-testid": SyncBlockRendererWrapperDataId,
-      style: {
-        border: 'blue solid 1px'
-      }
+      "data-testid": SyncBlockRendererWrapperDataId
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
+      className: SyncBlockSharedCssClassName.renderer
     }, getSyncedBlockRenderer({
       docNode
     }))

package/dist/esm/nodeviews/syncedBlock.js

@@ -9,6 +9,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 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; }
 import React from 'react';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { SyncBlockEditorWrapper, SyncBlockEditorWrapperDataId } from '../ui/SyncBlockEditorWrapper';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
@@ -52,6 +53,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     key: "createDomRef",
     value: function createDomRef() {
       var domRef = document.createElement('div');
+      domRef.classList.add(SyncBlockSharedCssClassName.prefix);
       return domRef;
     }
   }, {
@@ -68,16 +70,16 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     key: "renderEditor",
     value: function renderEditor() {
       var _this$options, _this$options2;
-      var popupsBoundariesElement = this.dom.closest('.fabric-editor-popup-scroll-parent');
-      if (!(popupsBoundariesElement instanceof HTMLElement)) {
+      var fabricEditorPopupScrollParent = this.view.dom.closest('.fabric-editor-popup-scroll-parent');
+      if (!(fabricEditorPopupScrollParent instanceof HTMLElement)) {
         return null;
       }
       if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.getSyncedBlockEditor)) {
         return null;
       }
       return /*#__PURE__*/React.createElement(SyncBlockEditorWrapper, {
-        popupsBoundariesElement: popupsBoundariesElement,
-        popupsMountPoint: this.dom,
+        popupsBoundariesElement: fabricEditorPopupScrollParent,
+        popupsMountPoint: fabricEditorPopupScrollParent,
         defaultDocument: defaultSyncBlockEditorDocument,
         handleContentChanges: this.handleContentChanges,
         setInnerEditorView: this.setInnerEditorView,

package/dist/esm/ui/SyncBlockEditorWrapper.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 export var SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
 var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_ref) {
   var defaultDocument = _ref.defaultDocument,
@@ -7,25 +8,21 @@ var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_
     popupsMountPoint = _ref.popupsMountPoint,
     setInnerEditorView = _ref.setInnerEditorView,
     handleContentChanges = _ref.handleContentChanges;
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/ensure-design-token-usage
-    React.createElement("div", {
-      "data-testid": SyncBlockEditorWrapperDataId,
-      style: {
-        border: 'purple solid 1px'
-      }
-    }, getSyncedBlockEditor({
-      popupsBoundariesElement: popupsBoundariesElement,
-      defaultDocument: defaultDocument,
-      popupsMountPoint: popupsMountPoint,
-      onChange: function onChange(value) {
-        return handleContentChanges(value.state.doc);
-      },
-      onEditorReady: function onEditorReady(value) {
-        return setInnerEditorView(value.editorView);
-      }
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": SyncBlockEditorWrapperDataId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: SyncBlockSharedCssClassName.editor
+  }, getSyncedBlockEditor({
+    popupsBoundariesElement: popupsBoundariesElement,
+    defaultDocument: defaultDocument,
+    popupsMountPoint: popupsMountPoint,
+    onChange: function onChange(value) {
+      return handleContentChanges(value.state.doc);
+    },
+    onEditorReady: function onEditorReady(value) {
+      return setInnerEditorView(value.editorView);
+    }
+  }));
 };
 export var SyncBlockEditorWrapper = /*#__PURE__*/React.memo(SyncBlockEditorWrapperComponent);

package/dist/esm/ui/SyncBlockRendererWrapper.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
   var getSyncedBlockRenderer = _ref.getSyncedBlockRenderer,
@@ -7,10 +8,10 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/ensure-design-token-usage
     React.createElement("div", {
-      "data-testid": SyncBlockRendererWrapperDataId,
-      style: {
-        border: 'blue solid 1px'
-      }
+      "data-testid": SyncBlockRendererWrapperDataId
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
+      className: SyncBlockSharedCssClassName.renderer
     }, getSyncedBlockRenderer({
       docNode: docNode
     }))

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "2.2.1",
+	"version": "2.2.2",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -8,7 +8,7 @@
 		"registry": "https://registry.npmjs.org/"
 	},
 	"atlassian": {
-		"team": "Editor: Lego",
+		"team": "Editor: Jenga",
 		"releaseModel": "continuous",
 		"singleton": true
 	},