Remove get method from clipboardStore, Use default type when pasting …

…unknown block

src/Sulu/Bundle/AdminBundle/Resources/js/components/BlockCollection/BlockCollection.js

@@ -3,8 +3,7 @@ import React from 'react';
 import {action, observable, toJS, reaction, computed} from 'mobx';
 import {observer} from 'mobx-react';
 import classNames from 'classnames';
-import {arrayMove, translate} from '../../utils';
-import {clipboardStore} from '../../stores';
+import {arrayMove, translate, clipboard} from '../../utils';
 import Button from '../Button';
 import SortableBlockList from './SortableBlockList';
 import blockCollectionStyles from './blockCollection.scss';
@@ -41,7 +40,7 @@ class BlockCollection<T: string, U: {type: T}> extends React.Component<Props<T,
         value: [],
     };
 
-    @observable pasteableBlocks: Array<number> = [];
+    @observable pasteableBlocks: Array<U>= [];
     @observable generatedBlockIds: Array<number> = [];
     @observable expandedBlocks: Array<boolean> = [];
 
@@ -52,11 +51,10 @@ class BlockCollection<T: string, U: {type: T}> extends React.Component<Props<T,
         super(props);
 
         this.fillArraysDisposer = reaction(() => this.props.value.length, this.fillArrays, {fireImmediately: true});
-        this.setPasteableBlocksDisposer = clipboardStore.observe(BLOCKS_CLIPBOARD_KEY, action((blocks) => {
-            this.pasteableBlocks = (blocks: any) || [];
-        }));
-
-        this.pasteableBlocks = (clipboardStore.get(BLOCKS_CLIPBOARD_KEY): any) || [];
+        this.fillArraysDisposer = reaction(() => this.props.value.length, this.fillArrays, {fireImmediately: true});
+        this.setPasteableBlocksDisposer = clipboard.observe(BLOCKS_CLIPBOARD_KEY, action((blocks) => {
+            this.pasteableBlocks = blocks || [];
+        }), true);
     }
 
     componentWillUnmount() {
@@ -129,20 +127,27 @@ class BlockCollection<T: string, U: {type: T}> extends React.Component<Props<T,
         }
 
         if (value) {
-            // TODO: gracefully handle clipboard data this is incompatible with available block types
-
             this.expandedBlocks.splice(
                 insertionIndex, 0, ...this.pasteableBlocks.map(() => true)
             );
             this.generatedBlockIds.splice(
                 insertionIndex, 0, ...this.pasteableBlocks.map(() => ++BlockCollection.idCounter)
             );
 
+            const newElements = this.pasteableBlocks.map((block) => {
+                // paste block with default type if type of block in clipboard is not known
+                if (!this.props.types?.[block.type]) {
+                    return {...block, type: this.props.defaultType};
+                }
+
+                return block;
+            });
             const elementsBefore = value.slice(0, insertionIndex);
             const elementsAfter = value.slice(insertionIndex);
+
             // $FlowFixMe
-            onChange([...elementsBefore, ...this.pasteableBlocks, ...elementsAfter]);
-            clipboardStore.set(BLOCKS_CLIPBOARD_KEY, undefined);
+            onChange([...elementsBefore, ...newElements, ...elementsAfter]);
+            clipboard.set(BLOCKS_CLIPBOARD_KEY, undefined);
         }
     };
 
@@ -183,7 +188,7 @@ class BlockCollection<T: string, U: {type: T}> extends React.Component<Props<T,
 
         if (value) {
             const block = {...toJS(value[index])};
-            clipboardStore.set(BLOCKS_CLIPBOARD_KEY, [block]);
+            clipboard.set(BLOCKS_CLIPBOARD_KEY, [block]);
         }
     };
 

src/Sulu/Bundle/AdminBundle/Resources/js/stores/index.js

@@ -1,6 +1,5 @@
 // @flow
 import localizationStore from './localizationStore';
-import clipboardStore from './clipboardStore';
 import MultiSelectionStore from './MultiSelectionStore';
 import ResourceListStore from './ResourceListStore';
 import ResourceStore from './ResourceStore';
@@ -14,7 +13,6 @@ export {
     ResourceStore,
     SingleSelectionStore,
     localizationStore,
-    clipboardStore,
     userStore,
 };
 

src/Sulu/Bundle/AdminBundle/Resources/js/stores/clipboardStore/clipboardStore.js → src/Sulu/Bundle/AdminBundle/Resources/js/utils/clipboard/clipboard.js

@@ -1,7 +1,7 @@
 // @flow
 import type {Observer} from './types';
 
-class ClipboardStore {
+class Clipboard {
     observers: {[key: string]: Array<Observer>} = {};
     storageEventListener: ?(event: StorageEvent) => void;
 
@@ -29,12 +29,6 @@ class ClipboardStore {
         }
     }
 
-    get(key: string): mixed {
-        const serializedValue = window.localStorage.getItem(key);
-
-        return serializedValue ? JSON.parse(serializedValue) : undefined;
-    }
-
     set(key: string, value: mixed) {
         if (value) {
             window.localStorage.setItem(key, JSON.stringify(value));
@@ -45,13 +39,18 @@ class ClipboardStore {
         this.notifyObservers(key, value);
     }
 
-    observe(key: string, observer: Observer) {
+    observe(key: string, observer: Observer, invokeImmediately?: boolean) {
         if (!this.observers[key]) {
             this.observers[key] = [];
         }
         this.observers[key].push(observer);
         this.updateStorageEventListener();
 
+        if (invokeImmediately) {
+            const currentValue = window.localStorage.getItem(key);
+            observer(currentValue ? JSON.parse(currentValue) : undefined);
+        }
+
         // return disposer function that allows to remove the registered observer
         return () => {
             const index = this.observers[key]?.indexOf(observer);
@@ -63,4 +62,4 @@ class ClipboardStore {
     }
 }
 
-export default new ClipboardStore();
+export default new Clipboard();

src/Sulu/Bundle/AdminBundle/Resources/js/utils/clipboard/index.js

@@ -0,0 +1,4 @@
+// @flow
+import clipboard from './clipboard';
+
+export default clipboard;

src/Sulu/Bundle/AdminBundle/Resources/js/utils/clipboard/tests/clipboard.test.js

@@ -0,0 +1,11 @@
+// @flow
+import clipboard from '../clipboard';
+
+test('Set item to localStorage', () => {
+    const setItemSpy = jest.fn();
+    window.localStorage = {getItem: setItemSpy};
+
+    const item = {key1: 'value1', key2: 1234};
+    clipboard.set('test-key', item);
+    expect(setItemSpy).toBeCalledWith(item);
+});

src/Sulu/Bundle/AdminBundle/Resources/js/utils/index.js

@@ -5,10 +5,12 @@ import {createAjv} from './Ajv';
 import {transformBytesToReadableString} from './Bytes';
 import {transformDateForUrl} from './Date';
 import {translate} from './Translator';
+import clipboard from './clipboard';
 
 export {
     arrayMove,
     buildQueryString,
+    clipboard,
     createAjv,
     transformBytesToReadableString,
     transformDateForUrl,

src/Sulu/Bundle/AdminBundle/Resources/translations/admin.de.json

@@ -1,7 +1,7 @@
 {
     "sulu_admin.add": "Hinzufügen",
     "sulu_admin.add_block": "Block hinzufügen",
-    "sulu_admin.paste_blocks": "{count} {count, plural, =1 {Block} other {Blocks} einfügen}",
+    "sulu_admin.paste_blocks": "{count} {count, plural, =1 {Block} other {Blocks}} einfügen",
     "sulu_admin.delete": "Löschen",
     "sulu_admin.delete_selected": "Ausgewählte löschen",
     "sulu_admin.delete_locale": "Aktuelle Sprache löschen",