@atlaskit/editor-plugin-synced-block 5.3.20 → 5.3.21

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 5.3.21
+
+### Patch Changes
+
+- [`d7566e0dff5c9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d7566e0dff5c9) -
+  [ux] EDITOR-5273 fix sync block layout shift in ssr by adding class name to toDom
+- Updated dependencies
+
 ## 5.3.20
 
 ### Patch Changes

package/dist/cjs/nodeviews/bodiedSyncBlockNodeWithToDOMFixed.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bodiedSyncBlockNodeWithToDOMFixed = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Based on packages/editor/editor-plugin-synced-block/src/nodeviews/bodiedSyncedBlock.tsx
+ * Adding correct classnames and structure to the toDOM, necessary for SSR rendering
+ */
+var bodiedSyncBlockNodeWithToDOMFixed = exports.bodiedSyncBlockNodeWithToDOMFixed = function bodiedSyncBlockNodeWithToDOMFixed() {
+  return _objectSpread(_objectSpread({}, _adfSchema.bodiedSyncBlock), {}, {
+    toDOM: function toDOM(node) {
+      var _node$attrs = node.attrs,
+        localId = _node$attrs.localId,
+        resourceId = _node$attrs.resourceId;
+      var outerAttrs = {
+        class: _syncBlock.BodiedSyncBlockSharedCssClassName.prefix,
+        'data-bodied-sync-block': '',
+        'data-local-id': localId,
+        'data-resource-id': resourceId
+      };
+      var innerAttrs = {
+        class: _syncBlock.BodiedSyncBlockSharedCssClassName.content
+      };
+      return ['div', outerAttrs, ['div', innerAttrs, 0]];
+    }
+  });
+};

package/dist/cjs/syncedBlockPlugin.js

@@ -8,8 +8,10 @@ exports.syncedBlockPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _editorActions = require("./editor-actions");
 var _editorCommands = require("./editor-commands");
+var _bodiedSyncBlockNodeWithToDOMFixed = require("./nodeviews/bodiedSyncBlockNodeWithToDOMFixed");
 var _main = require("./pm-plugins/main");
 var _menuAndToolbarExperiences = require("./pm-plugins/menu-and-toolbar-experiences");
 var _blockMenuComponents = require("./ui/block-menu-components");
@@ -36,7 +38,7 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
         node: _adfSchema.syncBlock
       }, {
         name: 'bodiedSyncBlock',
-        node: _adfSchema.bodiedSyncBlock
+        node: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_3') ? (0, _bodiedSyncBlockNodeWithToDOMFixed.bodiedSyncBlockNodeWithToDOMFixed)() : _adfSchema.bodiedSyncBlock
       }];
     },
     pmPlugins: function pmPlugins() {

package/dist/es2019/nodeviews/bodiedSyncBlockNodeWithToDOMFixed.js

@@ -0,0 +1,27 @@
+import { bodiedSyncBlock } from '@atlaskit/adf-schema';
+import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+/**
+ * Based on packages/editor/editor-plugin-synced-block/src/nodeviews/bodiedSyncedBlock.tsx
+ * Adding correct classnames and structure to the toDOM, necessary for SSR rendering
+ */
+export const bodiedSyncBlockNodeWithToDOMFixed = () => {
+  return {
+    ...bodiedSyncBlock,
+    toDOM: node => {
+      const {
+        localId,
+        resourceId
+      } = node.attrs;
+      const outerAttrs = {
+        class: BodiedSyncBlockSharedCssClassName.prefix,
+        'data-bodied-sync-block': '',
+        'data-local-id': localId,
+        'data-resource-id': resourceId
+      };
+      const innerAttrs = {
+        class: BodiedSyncBlockSharedCssClassName.content
+      };
+      return ['div', outerAttrs, ['div', innerAttrs, 0]];
+    }
+  };
+};

package/dist/es2019/syncedBlockPlugin.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { bodiedSyncBlock, syncBlock } from '@atlaskit/adf-schema';
 import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { flushBodiedSyncBlocks, flushSyncBlocks } from './editor-actions';
 import { copySyncedBlockReferenceToClipboardEditorCommand, createSyncedBlock } from './editor-commands';
+import { bodiedSyncBlockNodeWithToDOMFixed } from './nodeviews/bodiedSyncBlockNodeWithToDOMFixed';
 import { createPlugin, syncedBlockPluginKey } from './pm-plugins/main';
 import { getMenuAndToolbarExperiencesPlugin } from './pm-plugins/menu-and-toolbar-experiences';
 import { getBlockMenuComponents } from './ui/block-menu-components';
@@ -30,7 +32,7 @@ export const syncedBlockPlugin = ({
         node: syncBlock
       }, {
         name: 'bodiedSyncBlock',
-        node: bodiedSyncBlock
+        node: fg('platform_synced_block_patch_3') ? bodiedSyncBlockNodeWithToDOMFixed() : bodiedSyncBlock
       }];
     },
     pmPlugins() {

package/dist/esm/nodeviews/bodiedSyncBlockNodeWithToDOMFixed.js

@@ -0,0 +1,28 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { bodiedSyncBlock } from '@atlaskit/adf-schema';
+import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+/**
+ * Based on packages/editor/editor-plugin-synced-block/src/nodeviews/bodiedSyncedBlock.tsx
+ * Adding correct classnames and structure to the toDOM, necessary for SSR rendering
+ */
+export var bodiedSyncBlockNodeWithToDOMFixed = function bodiedSyncBlockNodeWithToDOMFixed() {
+  return _objectSpread(_objectSpread({}, bodiedSyncBlock), {}, {
+    toDOM: function toDOM(node) {
+      var _node$attrs = node.attrs,
+        localId = _node$attrs.localId,
+        resourceId = _node$attrs.resourceId;
+      var outerAttrs = {
+        class: BodiedSyncBlockSharedCssClassName.prefix,
+        'data-bodied-sync-block': '',
+        'data-local-id': localId,
+        'data-resource-id': resourceId
+      };
+      var innerAttrs = {
+        class: BodiedSyncBlockSharedCssClassName.content
+      };
+      return ['div', outerAttrs, ['div', innerAttrs, 0]];
+    }
+  });
+};

package/dist/esm/syncedBlockPlugin.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { bodiedSyncBlock, syncBlock } from '@atlaskit/adf-schema';
 import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { flushBodiedSyncBlocks as _flushBodiedSyncBlocks, flushSyncBlocks } from './editor-actions';
 import { copySyncedBlockReferenceToClipboardEditorCommand, createSyncedBlock } from './editor-commands';
+import { bodiedSyncBlockNodeWithToDOMFixed } from './nodeviews/bodiedSyncBlockNodeWithToDOMFixed';
 import { createPlugin, syncedBlockPluginKey } from './pm-plugins/main';
 import { getMenuAndToolbarExperiencesPlugin } from './pm-plugins/menu-and-toolbar-experiences';
 import { getBlockMenuComponents } from './ui/block-menu-components';
@@ -29,7 +31,7 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
         node: syncBlock
       }, {
         name: 'bodiedSyncBlock',
-        node: bodiedSyncBlock
+        node: fg('platform_synced_block_patch_3') ? bodiedSyncBlockNodeWithToDOMFixed() : bodiedSyncBlock
       }];
     },
     pmPlugins: function pmPlugins() {

package/dist/types/nodeviews/bodiedSyncBlockNodeWithToDOMFixed.d.ts

@@ -0,0 +1,6 @@
+import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+/**
+ * Based on packages/editor/editor-plugin-synced-block/src/nodeviews/bodiedSyncedBlock.tsx
+ * Adding correct classnames and structure to the toDOM, necessary for SSR rendering
+ */
+export declare const bodiedSyncBlockNodeWithToDOMFixed: () => NodeSpec;

package/dist/types-ts4.5/nodeviews/bodiedSyncBlockNodeWithToDOMFixed.d.ts

@@ -0,0 +1,6 @@
+import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+/**
+ * Based on packages/editor/editor-plugin-synced-block/src/nodeviews/bodiedSyncedBlock.tsx
+ * Adding correct classnames and structure to the toDOM, necessary for SSR rendering
+ */
+export declare const bodiedSyncBlockNodeWithToDOMFixed: () => NodeSpec;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "5.3.20",
+	"version": "5.3.21",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,7 +40,7 @@
 		"@atlaskit/editor-plugin-selection": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
-		"@atlaskit/editor-synced-block-provider": "^3.28.0",
+		"@atlaskit/editor-synced-block-provider": "^3.29.0",
 		"@atlaskit/editor-toolbar": "^0.19.0",
 		"@atlaskit/flag": "^17.8.0",
 		"@atlaskit/icon": "31.0.0",
@@ -61,7 +61,7 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.12.0",
+		"@atlaskit/editor-common": "^111.13.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
@@ -106,6 +106,9 @@
 	"platform-feature-flags": {
 		"platform_synced_block_patch_2": {
 			"type": "boolean"
+		},
+		"platform_synced_block_patch_3": {
+			"type": "boolean"
 		}
 	}
 }