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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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/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/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/types/syncedBlockPluginType.d.ts

@@ -12,6 +12,7 @@ import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmo
 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';
@@ -79,7 +80,8 @@ export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
         OptionalPlugin<AnalyticsPlugin>,
         OptionalPlugin<ConnectivityPlugin>,
         OptionalPlugin<EditorViewModePlugin>,
-        OptionalPlugin<ContentFormatPlugin>
+        OptionalPlugin<ContentFormatPlugin>,
+        OptionalPlugin<UserIntentPlugin>
     ];
     pluginConfiguration: SyncedBlockPluginOptions | undefined;
     sharedState: SyncedBlockSharedState | undefined;

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

@@ -12,6 +12,7 @@ import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmo
 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';
@@ -79,7 +80,8 @@ export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
         OptionalPlugin<AnalyticsPlugin>,
         OptionalPlugin<ConnectivityPlugin>,
         OptionalPlugin<EditorViewModePlugin>,
-        OptionalPlugin<ContentFormatPlugin>
+        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.3",
+	"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": {