@atlaskit/editor-plugin-synced-block 3.3.4 → 3.3.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 3.3.5
+
+### Patch Changes
+
+- [`a48139f041cd4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a48139f041cd4) -
+  [ux] EDITOR-1654 implement sync block ui for hovered, selected and delete states
+- Updated dependencies
+
 ## 3.3.4
 
 ### Patch Changes

package/dist/cjs/ui/SyncBlockEditorWrapper.js

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorJsonTransformer = require("@atlaskit/editor-json-transformer");
+var _SyncBlockLabel = require("./SyncBlockLabel");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var SyncBlockEditorWrapperDataId = exports.SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
 var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_ref) {
@@ -24,7 +25,7 @@ var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_
     updatedDoc = _useState2[0],
     setUpdatedDoc = _useState2[1];
   useHandleContentChanges(updatedDoc);
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_SyncBlockLabel.SyncBlockLabel, null), /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": SyncBlockEditorWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
@@ -39,6 +40,6 @@ var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_
     onEditorReady: function onEditorReady(value) {
       return setInnerEditorView(value.editorView);
     }
-  }));
+  })));
 };
 var SyncBlockEditorWrapper = exports.SyncBlockEditorWrapper = /*#__PURE__*/_react.default.memo(SyncBlockEditorWrapperComponent);

package/dist/cjs/ui/SyncBlockLabel.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyncBlockLabel = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var SyncBlockLabelDataId = 'sync-block-label';
+var SyncBlockLabelComponent = function SyncBlockLabelComponent() {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testId": SyncBlockLabelDataId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: "ak-editor-sync-block__label"
+  }, formatMessage(_messages.syncBlockMessages.syncedBlockLabel));
+};
+var SyncBlockLabel = exports.SyncBlockLabel = /*#__PURE__*/_react.default.memo(SyncBlockLabelComponent);

package/dist/cjs/ui/SyncBlockRendererWrapper.js

@@ -7,21 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.SyncBlockRendererWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
+var _SyncBlockLabel = require("./SyncBlockLabel");
 var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
   var getSyncedBlockRenderer = _ref.getSyncedBlockRenderer,
     useFetchDocNode = _ref.useFetchDocNode;
-  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": SyncBlockRendererWrapperDataId
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-      ,
-      className: _syncBlock.SyncBlockSharedCssClassName.renderer
-    }, getSyncedBlockRenderer({
-      useFetchDocNode: useFetchDocNode
-    }))
-  );
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_SyncBlockLabel.SyncBlockLabel, null), /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": SyncBlockRendererWrapperDataId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: _syncBlock.SyncBlockSharedCssClassName.renderer
+  }, getSyncedBlockRenderer({
+    useFetchDocNode: useFetchDocNode
+  })));
 };
 var SyncBlockRendererWrapper = exports.SyncBlockRendererWrapper = /*#__PURE__*/_react.default.memo(SyncBlockRendererWrapperComponent);

package/dist/es2019/ui/SyncBlockEditorWrapper.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { JSONTransformer } from '@atlaskit/editor-json-transformer';
+import { SyncBlockLabel } from './SyncBlockLabel';
 export const SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
 const SyncBlockEditorWrapperComponent = ({
   defaultDocument,
@@ -12,7 +13,7 @@ const SyncBlockEditorWrapperComponent = ({
 }) => {
   const [updatedDoc, setUpdatedDoc] = useState(new JSONTransformer().parse(defaultDocument));
   useHandleContentChanges(updatedDoc);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SyncBlockLabel, null), /*#__PURE__*/React.createElement("div", {
     "data-testid": SyncBlockEditorWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
@@ -23,6 +24,6 @@ const SyncBlockEditorWrapperComponent = ({
     popupsMountPoint,
     onChange: value => setUpdatedDoc(value.state.doc),
     onEditorReady: value => setInnerEditorView(value.editorView)
-  }));
+  })));
 };
 export const SyncBlockEditorWrapper = /*#__PURE__*/React.memo(SyncBlockEditorWrapperComponent);

package/dist/es2019/ui/SyncBlockLabel.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+const SyncBlockLabelDataId = 'sync-block-label';
+const SyncBlockLabelComponent = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testId": SyncBlockLabelDataId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: "ak-editor-sync-block__label"
+  }, formatMessage(messages.syncedBlockLabel));
+};
+export const SyncBlockLabel = /*#__PURE__*/React.memo(SyncBlockLabelComponent);

package/dist/es2019/ui/SyncBlockRendererWrapper.js

@@ -1,21 +1,18 @@
 import React from 'react';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { SyncBlockLabel } from './SyncBlockLabel';
 const SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 const SyncBlockRendererWrapperComponent = ({
   getSyncedBlockRenderer,
   useFetchDocNode
 }) => {
-  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": SyncBlockRendererWrapperDataId
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-      ,
-      className: SyncBlockSharedCssClassName.renderer
-    }, getSyncedBlockRenderer({
-      useFetchDocNode
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SyncBlockLabel, null), /*#__PURE__*/React.createElement("div", {
+    "data-testid": SyncBlockRendererWrapperDataId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: SyncBlockSharedCssClassName.renderer
+  }, getSyncedBlockRenderer({
+    useFetchDocNode
+  })));
 };
 export const SyncBlockRendererWrapper = /*#__PURE__*/React.memo(SyncBlockRendererWrapperComponent);

package/dist/esm/ui/SyncBlockEditorWrapper.js

@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { JSONTransformer } from '@atlaskit/editor-json-transformer';
+import { SyncBlockLabel } from './SyncBlockLabel';
 export var SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
 var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_ref) {
   var defaultDocument = _ref.defaultDocument,
@@ -15,7 +16,7 @@ var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_
     updatedDoc = _useState2[0],
     setUpdatedDoc = _useState2[1];
   useHandleContentChanges(updatedDoc);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SyncBlockLabel, null), /*#__PURE__*/React.createElement("div", {
     "data-testid": SyncBlockEditorWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
@@ -30,6 +31,6 @@ var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_
     onEditorReady: function onEditorReady(value) {
       return setInnerEditorView(value.editorView);
     }
-  }));
+  })));
 };
 export var SyncBlockEditorWrapper = /*#__PURE__*/React.memo(SyncBlockEditorWrapperComponent);

package/dist/esm/ui/SyncBlockLabel.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+var SyncBlockLabelDataId = 'sync-block-label';
+var SyncBlockLabelComponent = function SyncBlockLabelComponent() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testId": SyncBlockLabelDataId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: "ak-editor-sync-block__label"
+  }, formatMessage(messages.syncedBlockLabel));
+};
+export var SyncBlockLabel = /*#__PURE__*/React.memo(SyncBlockLabelComponent);

package/dist/esm/ui/SyncBlockRendererWrapper.js

@@ -1,20 +1,17 @@
 import React from 'react';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { SyncBlockLabel } from './SyncBlockLabel';
 var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
   var getSyncedBlockRenderer = _ref.getSyncedBlockRenderer,
     useFetchDocNode = _ref.useFetchDocNode;
-  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": SyncBlockRendererWrapperDataId
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-      ,
-      className: SyncBlockSharedCssClassName.renderer
-    }, getSyncedBlockRenderer({
-      useFetchDocNode: useFetchDocNode
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SyncBlockLabel, null), /*#__PURE__*/React.createElement("div", {
+    "data-testid": SyncBlockRendererWrapperDataId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: SyncBlockSharedCssClassName.renderer
+  }, getSyncedBlockRenderer({
+    useFetchDocNode: useFetchDocNode
+  })));
 };
 export var SyncBlockRendererWrapper = /*#__PURE__*/React.memo(SyncBlockRendererWrapperComponent);

package/dist/types/ui/SyncBlockLabel.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SyncBlockLabel: React.MemoExoticComponent<() => React.JSX.Element>;

package/dist/types-ts4.5/ui/SyncBlockLabel.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SyncBlockLabel: React.MemoExoticComponent<() => React.JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "3.3.4",
+	"version": "3.3.5",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",