@atlaskit/editor-plugin-synced-block 5.4.2 → 5.4.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 5.4.4
+
+### Patch Changes
+
+- [`29d9d25ebe53a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/29d9d25ebe53a) -
+  [ux] EDITOR-5009 show sync block border when dragging
+- Updated dependencies
+
+## 5.4.3
+
+### Patch Changes
+
+- [`514037bd94288`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/514037bd94288) -
+  [ux] EDITOR-5588 pass content mode setting to reference sync block
+
 ## 5.4.2
 
 ### Patch Changes

package/dist/cjs/pm-plugins/main.js

@@ -365,16 +365,18 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         })
       },
       decorations: function decorations(state) {
-        var _currentPluginState$s, _api$connectivity2, _api$editorViewMode;
+        var _currentPluginState$s, _api$connectivity2, _api$editorViewMode, _api$userIntent;
         var currentPluginState = syncedBlockPluginKey.getState(state);
         var selectionDecorationSet = (_currentPluginState$s = currentPluginState === null || currentPluginState === void 0 ? void 0 : currentPluginState.selectionDecorationSet) !== null && _currentPluginState$s !== void 0 ? _currentPluginState$s : _view.DecorationSet.empty;
         var syncBlockStore = currentPluginState === null || currentPluginState === void 0 ? void 0 : currentPluginState.syncBlockStore;
         var doc = state.doc;
         var isOffline = (0, _editorPluginConnectivity.isOfflineMode)(api === null || api === void 0 || (_api$connectivity2 = api.connectivity) === null || _api$connectivity2 === void 0 || (_api$connectivity2 = _api$connectivity2.sharedState.currentState()) === null || _api$connectivity2 === void 0 ? void 0 : _api$connectivity2.mode);
         var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
+        var isDragging = (0, _platformFeatureFlags.fg)('platform_synced_block_patch_5') ? (api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || (_api$userIntent = _api$userIntent.sharedState.currentState()) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.currentUserIntent) === 'dragging' : undefined;
         var offlineDecorations = [];
         var viewModeDecorations = [];
         var loadingDecorations = [];
+        var dragDecorations = [];
         state.doc.descendants(function (node, pos) {
           if (node.type.name === 'bodiedSyncBlock' && isOffline) {
             offlineDecorations.push(_view.Decoration.node(pos, pos + node.nodeSize, {
@@ -391,8 +393,15 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
               class: _syncBlock.SyncBlockStateCssClassName.creationLoadingClassName
             }));
           }
+
+          // Show sync block border while the user is dragging
+          if (isDragging && (node.type.name === 'bodiedSyncBlock' || node.type.name === 'syncBlock') && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_5')) {
+            dragDecorations.push(_view.Decoration.node(pos, pos + node.nodeSize, {
+              class: _syncBlock.SyncBlockStateCssClassName.draggingClassName
+            }));
+          }
         });
-        return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations).add(doc, loadingDecorations);
+        return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations).add(doc, loadingDecorations).add(doc, dragDecorations);
       },
       handleClickOn: (0, _selection.createSelectionClickHandler)(['bodiedSyncBlock'], function (target) {
         return !!target.closest(".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix));

package/dist/cjs/ui/Flag.js

@@ -11,6 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _flag = _interopRequireWildcard(require("@atlaskit/flag"));
 var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
@@ -110,7 +111,7 @@ var Flag = exports.Flag = function Flag(_ref) {
     } else if (type === 'info' && action) {
       return [{
         content: formatMessage(action),
-        href: 'https://support.atlassian.com/confluence-cloud/docs/reuse-content-with-synced-blocks',
+        href: _syncBlock.SYNCED_BLOCKS_DOCUMENTATION_URL,
         target: '_blank',
         rel: 'noopener noreferrer'
       }];

package/dist/cjs/ui/SyncedLocationDropdown.js

@@ -20,6 +20,7 @@ var _react2 = require("@compiled/react");
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _icon = require("@atlaskit/icon");
@@ -377,7 +378,7 @@ var NoResultScreen = function NoResultScreen(_ref0) {
   }, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownNoResults)), /*#__PURE__*/React.createElement(_compiled.Text, {
     as: "p"
   }, /*#__PURE__*/React.createElement(_compiled.Anchor, {
-    href: "https://support.atlassian.com/confluence-cloud/docs/reuse-content-with-synced-blocks",
+    href: _syncBlock.SYNCED_BLOCKS_DOCUMENTATION_URL,
     target: "_blank",
     rel: "noopener noreferrer",
     xcss: styles.learnMoreLink

package/dist/es2019/pm-plugins/main.js

@@ -326,7 +326,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         })
       },
       decorations: state => {
-        var _currentPluginState$s, _api$connectivity2, _api$connectivity2$sh, _api$editorViewMode, _api$editorViewMode$s;
+        var _currentPluginState$s, _api$connectivity2, _api$connectivity2$sh, _api$editorViewMode, _api$editorViewMode$s, _api$userIntent, _api$userIntent$share;
         const currentPluginState = syncedBlockPluginKey.getState(state);
         const selectionDecorationSet = (_currentPluginState$s = currentPluginState === null || currentPluginState === void 0 ? void 0 : currentPluginState.selectionDecorationSet) !== null && _currentPluginState$s !== void 0 ? _currentPluginState$s : DecorationSet.empty;
         const syncBlockStore = currentPluginState === null || currentPluginState === void 0 ? void 0 : currentPluginState.syncBlockStore;
@@ -335,9 +335,11 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         } = state;
         const isOffline = isOfflineMode(api === null || api === void 0 ? void 0 : (_api$connectivity2 = api.connectivity) === null || _api$connectivity2 === void 0 ? void 0 : (_api$connectivity2$sh = _api$connectivity2.sharedState.currentState()) === null || _api$connectivity2$sh === void 0 ? void 0 : _api$connectivity2$sh.mode);
         const isViewMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
+        const isDragging = fg('platform_synced_block_patch_5') ? (api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : (_api$userIntent$share = _api$userIntent.sharedState.currentState()) === null || _api$userIntent$share === void 0 ? void 0 : _api$userIntent$share.currentUserIntent) === 'dragging' : undefined;
         const offlineDecorations = [];
         const viewModeDecorations = [];
         const loadingDecorations = [];
+        const dragDecorations = [];
         state.doc.descendants((node, pos) => {
           if (node.type.name === 'bodiedSyncBlock' && isOffline) {
             offlineDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
@@ -354,8 +356,15 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
               class: SyncBlockStateCssClassName.creationLoadingClassName
             }));
           }
+
+          // Show sync block border while the user is dragging
+          if (isDragging && (node.type.name === 'bodiedSyncBlock' || node.type.name === 'syncBlock') && fg('platform_synced_block_patch_5')) {
+            dragDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
+              class: SyncBlockStateCssClassName.draggingClassName
+            }));
+          }
         });
-        return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations).add(doc, loadingDecorations);
+        return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations).add(doc, loadingDecorations).add(doc, dragDecorations);
       },
       handleClickOn: createSelectionClickHandler(['bodiedSyncBlock'], target => !!target.closest(`.${BodiedSyncBlockSharedCssClassName.prefix}`), {
         useLongPressSelection

package/dist/es2019/ui/Flag.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { SYNCED_BLOCKS_DOCUMENTATION_URL } from '@atlaskit/editor-common/sync-block';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import AkFlag, { AutoDismissFlag, FlagGroup } from '@atlaskit/flag';
 import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
@@ -116,7 +117,7 @@ export const Flag = ({
     } else if (type === 'info' && action) {
       return [{
         content: formatMessage(action),
-        href: 'https://support.atlassian.com/confluence-cloud/docs/reuse-content-with-synced-blocks',
+        href: SYNCED_BLOCKS_DOCUMENTATION_URL,
         target: '_blank',
         rel: 'noopener noreferrer'
       }];

package/dist/es2019/ui/SyncedLocationDropdown.js

@@ -8,6 +8,7 @@ import { cx } from '@compiled/react';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { SYNCED_BLOCKS_DOCUMENTATION_URL } from '@atlaskit/editor-common/sync-block';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { getPageIdAndTypeFromConfluencePageAri } from '@atlaskit/editor-synced-block-provider';
 import { IconTile } from '@atlaskit/icon';
@@ -330,7 +331,7 @@ const NoResultScreen = ({
   }, formatMessage(messages.syncedLocationDropdownNoResults)), /*#__PURE__*/React.createElement(Text, {
     as: "p"
   }, /*#__PURE__*/React.createElement(Anchor, {
-    href: "https://support.atlassian.com/confluence-cloud/docs/reuse-content-with-synced-blocks",
+    href: SYNCED_BLOCKS_DOCUMENTATION_URL,
     target: "_blank",
     rel: "noopener noreferrer",
     xcss: styles.learnMoreLink

package/dist/esm/pm-plugins/main.js

@@ -358,16 +358,18 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         })
       },
       decorations: function decorations(state) {
-        var _currentPluginState$s, _api$connectivity2, _api$editorViewMode;
+        var _currentPluginState$s, _api$connectivity2, _api$editorViewMode, _api$userIntent;
         var currentPluginState = syncedBlockPluginKey.getState(state);
         var selectionDecorationSet = (_currentPluginState$s = currentPluginState === null || currentPluginState === void 0 ? void 0 : currentPluginState.selectionDecorationSet) !== null && _currentPluginState$s !== void 0 ? _currentPluginState$s : DecorationSet.empty;
         var syncBlockStore = currentPluginState === null || currentPluginState === void 0 ? void 0 : currentPluginState.syncBlockStore;
         var doc = state.doc;
         var isOffline = isOfflineMode(api === null || api === void 0 || (_api$connectivity2 = api.connectivity) === null || _api$connectivity2 === void 0 || (_api$connectivity2 = _api$connectivity2.sharedState.currentState()) === null || _api$connectivity2 === void 0 ? void 0 : _api$connectivity2.mode);
         var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
+        var isDragging = fg('platform_synced_block_patch_5') ? (api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || (_api$userIntent = _api$userIntent.sharedState.currentState()) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.currentUserIntent) === 'dragging' : undefined;
         var offlineDecorations = [];
         var viewModeDecorations = [];
         var loadingDecorations = [];
+        var dragDecorations = [];
         state.doc.descendants(function (node, pos) {
           if (node.type.name === 'bodiedSyncBlock' && isOffline) {
             offlineDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
@@ -384,8 +386,15 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
               class: SyncBlockStateCssClassName.creationLoadingClassName
             }));
           }
+
+          // Show sync block border while the user is dragging
+          if (isDragging && (node.type.name === 'bodiedSyncBlock' || node.type.name === 'syncBlock') && fg('platform_synced_block_patch_5')) {
+            dragDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
+              class: SyncBlockStateCssClassName.draggingClassName
+            }));
+          }
         });
-        return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations).add(doc, loadingDecorations);
+        return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations).add(doc, loadingDecorations).add(doc, dragDecorations);
       },
       handleClickOn: createSelectionClickHandler(['bodiedSyncBlock'], function (target) {
         return !!target.closest(".".concat(BodiedSyncBlockSharedCssClassName.prefix));

package/dist/esm/ui/Flag.js

@@ -5,6 +5,7 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { SYNCED_BLOCKS_DOCUMENTATION_URL } from '@atlaskit/editor-common/sync-block';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import AkFlag, { AutoDismissFlag, FlagGroup } from '@atlaskit/flag';
 import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
@@ -101,7 +102,7 @@ export var Flag = function Flag(_ref) {
     } else if (type === 'info' && action) {
       return [{
         content: formatMessage(action),
-        href: 'https://support.atlassian.com/confluence-cloud/docs/reuse-content-with-synced-blocks',
+        href: SYNCED_BLOCKS_DOCUMENTATION_URL,
         target: '_blank',
         rel: 'noopener noreferrer'
       }];

package/dist/esm/ui/SyncedLocationDropdown.js

@@ -16,6 +16,7 @@ import { cx } from '@compiled/react';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { SYNCED_BLOCKS_DOCUMENTATION_URL } from '@atlaskit/editor-common/sync-block';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { getPageIdAndTypeFromConfluencePageAri } from '@atlaskit/editor-synced-block-provider';
 import { IconTile } from '@atlaskit/icon';
@@ -368,7 +369,7 @@ var NoResultScreen = function NoResultScreen(_ref0) {
   }, formatMessage(messages.syncedLocationDropdownNoResults)), /*#__PURE__*/React.createElement(Text, {
     as: "p"
   }, /*#__PURE__*/React.createElement(Anchor, {
-    href: "https://support.atlassian.com/confluence-cloud/docs/reuse-content-with-synced-blocks",
+    href: SYNCED_BLOCKS_DOCUMENTATION_URL,
     target: "_blank",
     rel: "noopener noreferrer",
     xcss: styles.learnMoreLink

package/dist/types/syncedBlockPluginType.d.ts

@@ -6,11 +6,13 @@ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
+import type { ContentFormatPlugin } from '@atlaskit/editor-plugin-content-format';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
+import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SyncBlockDataProviderInterface, UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockSharedState } from './types';
@@ -77,7 +79,9 @@ export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
         OptionalPlugin<BlockMenuPlugin>,
         OptionalPlugin<AnalyticsPlugin>,
         OptionalPlugin<ConnectivityPlugin>,
-        OptionalPlugin<EditorViewModePlugin>
+        OptionalPlugin<EditorViewModePlugin>,
+        OptionalPlugin<ContentFormatPlugin>,
+        OptionalPlugin<UserIntentPlugin>
     ];
     pluginConfiguration: SyncedBlockPluginOptions | undefined;
     sharedState: SyncedBlockSharedState | undefined;

package/dist/types-ts4.5/syncedBlockPluginType.d.ts

@@ -6,11 +6,13 @@ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
+import type { ContentFormatPlugin } from '@atlaskit/editor-plugin-content-format';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
+import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SyncBlockDataProviderInterface, UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockSharedState } from './types';
@@ -77,7 +79,9 @@ export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
         OptionalPlugin<BlockMenuPlugin>,
         OptionalPlugin<AnalyticsPlugin>,
         OptionalPlugin<ConnectivityPlugin>,
-        OptionalPlugin<EditorViewModePlugin>
+        OptionalPlugin<EditorViewModePlugin>,
+        OptionalPlugin<ContentFormatPlugin>,
+        OptionalPlugin<UserIntentPlugin>
     ];
     pluginConfiguration: SyncedBlockPluginOptions | undefined;
     sharedState: SyncedBlockSharedState | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "5.4.2",
+	"version": "5.4.4",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -55,13 +55,13 @@
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.6",
+		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
 		"date-fns": "^2.17.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.23.0",
+		"@atlaskit/editor-common": "^111.24.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {