Copy & Paste for Blocks

[mavuio]

hi !

i'd like to have a copy&paste feature in the block-editor, and am willing to contribute such a feature to
sulu.

i have started to implement a basic working version of that feature in my own fork and want to discuss the details of how
the feature could work.

TOC:

• A) feature-description
• B) UX-design
• C) code implementation details

A) the basic feature would be:

copy: to enable editors to select one or many blocks from a single List (top or nested "SortableBlockList") and copy them
to a clipboard attached to the editor's session

paste: the block(s) on the clipboard can then be inserted into any other Block-List ("SortableBlockList") which the editor has access to.

blocks can only be pasted if all of them could be created with a simple "add block" click at the target -location as well
(taking valid block-types and list-limits into account)

B) UX design:

B1) action-button:

i would propose a dedicated kind of "action"-button for each block, which reveals a context menu with a list of available actions for that block:

the placement and design of this needs to be discussed (i placed it at the bottom right of the block for now), also the popup-menu and its icons and wording.

B.2) multi-select:

when clicking "multi-select" i'd suggest to start a multi-select mode:

we'd need to enable checkboxes for each block to be selected, and some buttons

• select all
• select none
• copy selected to clipboard
• move selected to clipboard
• cancel

similar how that looks like in my other-php-CMS:

or in my other-elixir-CMS:

for sulu-UX i'd suggest we just turn each action-button within the activated list into a checkbox if multi-select mode
ist started and add a somehow highlighted button-area on top.

as you see from my examples i also included some none copy-paste features in the multi-select mode, which may be of interest:

• delete selected
• hide selected
• unhide selected

B.3) paste:

pasting is also triggered with the action-button e.g. like here:

the only drawback with this solution occurs, when at the target list there is no block present to begin with, as then there's no action button to click

i have a version with "paste here" buttons at the end of the list (and between the blocks) as well, but that feels a bit more obstrusive:

maybe a paste-here at the end of the list besides the add button + the action-item solution does the trick ?

B.4) action-menu items:

first we need to agree which actions we want, then on their exact wording:

• select multiple
• copy
• cut
• paste before
• paste after
• duplicate (=copy + paste after)

B.5) add block

then optionally we could also do:

• add block before
• add block after

solving maybe #6103 ?

B.6) hide unhide ?

btw: when at it, i'd also like to have:

• hide / unhide

• as a quick way to toggle "Don't display on public website" for one or many blocks

C) code implementation details

not much to talk about yet

i just need a basic confirmation of which of those features you want to allow in sulu-core,
where the basic UX-placement could be (exact ui-design might need a longer decision-process in parallel)

so that i find the right abstractions within the react components, to come up with a PR
which is not totally off what might get accepted.

after that i'd go on with asking about code-specific questions,
like:

• is it ok, to use userStore.setPersistentSetting for clipboard
• which style variables to introduce
• the concept behind generatedBlockIds and expandedBlocks
• how to handle localization
• testing
• where to handle paste logic (in a service / store / or in BlockCollection.js )

➜ looking forward to your feedback and holiday-greetings from vienna.

[mavuio]

2022 update:

i have a beta version of the copy&paste feature implemented in my own fork
(no security checks, no styling, etc...)

u can try it out here:

https://sulu-demo.mavu.io/admin 
admin / copypaste

[alexander-schranz]

@mavuio This is a really nice prototype, Thank you for providing this 🚀
Also a good way, as we can forward this to our UI/UX Team so they can better understand the feature and its functionality, so we get a matching design then 👍

[alexander-schranz]

As note for myself here and the @sulu/core-team we also need to decide if the Image Map Content Type should have similar functionality then. But I think we also have not yet there the settings functionality as I know.

[alexander-schranz]

We decided to add this feature to our next milestone. Design to match the sulu look and feel is in progress for it.

[mavuio]

hi !

i'm glad you're implementing that feature.

because i see "Implement block action for copying and cutting a single block #6630"

➜ will you support only actions on a single block or are you also planning implementing multi-block actions ?

the copying of a whole list of blocks is a real time-saver in my daily work, the single block copy is fine, but
not as powerful as being able to copy whole list of blocks (e.g. between languages or records)

[alexander-schranz]

@mavuio multi is also planned with 2.5 but will be an own pull request.