Copy and Paste for Blocks in Volto
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 20 | |
| Author | ||
| License | CC Attribution 3.0 Germany: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/63275 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
World Plone Day 20237 / 20
2
4
9
13
15
16
18
20
00:00
Data typeSheaf (mathematics)EmailWebsitePlane (geometry)Group actionBlock (periodic table)Software developerRight angleExtension (kinesiology)Functional (mathematics)Computer scienceStudent's t-testNeuroinformatikOrder (biology)Control flowWeb 2.0Default (computer science)Front and back endsSinc functionXMLComputer animation
01:50
Gotcha <Informatik>Menu (computing)Component-based software engineeringBlock (periodic table)Local GroupPrice indexComputer iconText editorGroup actionDefault (computer science)Type theoryString (computer science)WordComputer fontView (database)Gamma functionGoogle ChromeData typeComputer animationSource codeXML
02:27
Sheaf (mathematics)Local GroupBlock (periodic table)Component-based software engineeringWordDefault (computer science)Group actionType theoryString (computer science)Text editorSubject indexingBootingPrice indexComputer fontView (database)Block (periodic table)Computer animation
03:06
Data typeSheaf (mathematics)Error messageBlock (periodic table)Group actionComputer animation
03:48
Computer fontText editorSoftware developerQuadrilateralGUI widgetWordTime zoneComputer iconElement (mathematics)Context awarenessLink (knot theory)Logical constantPrice indexConnectivity (graph theory)Computer fileBlock (periodic table)Wrapper (data mining)Computer fontSource codeComputer animation
04:16
Block (periodic table)Wrapper (data mining)Interior (topology)Price indexWordComputer fontComponent-based software engineeringView (database)Text editorLocal GroupComa BerenicesData typeBlock (periodic table)Computer fontMultiplicationOrder (biology)View (database)Functional (mathematics)Selectivity (electronic)Wrapper (data mining)Connectivity (graph theory)Core dumpVolumenvisualisierungCategory of beingSocial classAsynchronous Transfer ModeBitState of matterVariable (mathematics)Computer animation
06:59
Data typeWeb pageSheaf (mathematics)Software developerComponent-based software engineeringText editorMeta elementShift operatorPrice indexBlock (periodic table)Local GroupWordJava appletScripting languageComputer fontView (database)MetadataTime zoneSubject indexingFunctional (mathematics)Default (computer science)Event horizonBlock (periodic table)Computer animation
07:23
Sheaf (mathematics)Data typeText editorShift operatorView (database)Meta elementPrice indexBlock (periodic table)WordComponent-based software engineeringLocal GroupJava appletScripting languageSoftware developerBlock (periodic table)Meta elementField (computer science)InformationFunctional (mathematics)Dot productIntrusion detection systemNumbering schemeMereologyOrder (biology)Group actionTablet computerAsynchronous Transfer ModeComa BerenicesSheaf (mathematics)Game controllerCategory of beingKey (cryptography)BitComputer animation
10:15
Sheaf (mathematics)Scripting languageJava appletBlock (periodic table)WordComponent-based software engineeringLocal GroupFocus (optics)Event horizonView (database)MultiplicationSoftware developerSubject indexingIntrusion detection systemFocus (optics)Block (periodic table)Subject indexingKey (cryptography)Game controllerRange (statistics)Program slicingCASE <Informatik>MultiplicationFunctional (mathematics)Right angleEqualiser (mathematics)Clique-widthOcean currentSystem callComputer animation
12:04
Data typeWeb pageSheaf (mathematics)Computer fontComponent-based software engineeringPrice indexText editorLocal GroupBlock (periodic table)Computer multitaskingFocus (optics)Event horizonWordView (database)Software developerGame controllerMultiplicationBlock (periodic table)Default (computer science)Order (biology)Category of beingFunctional (mathematics)Internet forumComputer animationSource code
13:19
Block (periodic table)Local GroupComponent-based software engineeringPrice indexShift operatorWeb pageSoftware developerPrisoner's dilemmaData typeWordText editorMeta elementGoogle ChromeBlock (periodic table)Function (mathematics)Connectivity (graph theory)Default (computer science)Functional (mathematics)Computer animation
13:40
Sheaf (mathematics)Software developerLocal GroupBlock (periodic table)WordComponent-based software engineeringShift operatorPrice indexMeta elementText editorView (database)Functional (mathematics)Default (computer science)Block (periodic table)State of matterIntrusion detection system1 (number)Element (mathematics)Sheaf (mathematics)Subject indexingCategory of beingCore dumpMathematicsService-oriented architectureBlogTablet computerBeta functionComputer animation
18:55
Sheaf (mathematics)Data typeWordSicComponent-based software engineeringBlock (periodic table)Price indexLocal GroupView (database)Block (periodic table)Subject indexingFunctional (mathematics)Data structureDefault (computer science)Order (biology)Computer animation
20:30
Sheaf (mathematics)Integrated development environmentData typeChi-squared distributionCategory of beingCross-site scriptingRegulärer Ausdruck <Textverarbeitung>Physical systemBootingVideo game consoleBlock (periodic table)InformationInheritance (object-oriented programming)Content (media)Web pageBlock (periodic table)Sheaf (mathematics)2 (number)Computer animationSource code
21:09
CodeTablet computerReflection (mathematics)Physical systemFluid staticsSource codeVideo game consoleInternet service providerRegulärer Ausdruck <Textverarbeitung>Web pageInformationComputer fontCompilation albumLimit (category theory)Link (knot theory)GoogolBlock (periodic table)Software developerWordComponent-based software engineeringView (database)Text editorPrice indexLocal GroupSound effectConnected spaceSheaf (mathematics)Block (periodic table)Sheaf (mathematics)BlogAngleSource codeComputer animation
22:39
Computer multitaskingBlock (periodic table)Event horizonLocal GroupComponent-based software engineeringComputer fontFocus (optics)Subject indexingMultiplicationPrice indexView (database)Text editorComputer animation
23:02
Object (grammar)Regulärer Ausdruck <Textverarbeitung>Video game consolePrototypeBlock (periodic table)Order (biology)Computer animation
23:44
Coma BerenicesPrototypeBlock (periodic table)Integrated development environmentComputer iconHydraulic jumpLocal GroupComponent-based software engineeringText editorPrice indexType theoryComputer fontCategory of beingBlock (periodic table)MathematicsDefault (computer science)Core dumpConnectivity (graph theory)Computer animationSource code
24:41
Block (periodic table)Subject indexingText editorLocal GroupComponent-based software engineeringComputer fontRegulärer Ausdruck <Textverarbeitung>Video game consoleObject (grammar)Java appletScripting languagePrototypePell's equationTablet computerSheaf (mathematics)WebsiteIntegrated development environmentSystem programmingComputer animation
Transcript: English(auto-generated)
00:00
Hello, I'm Yohan Duriano-Brican, a student at computer science in the University of Polytechnic at Bucharest and also a front-end developer. Since middle school, I was passionate about informatics and I participated in a lot of competitions. My breaking industry was when all the web has employed me and given me an opportunity
00:24
to work as an intern for them and they learn me all about Volto and React. For this talk, I want to present you how to extend the Volto and paste functionality, the copy and paste functionality for more complex blocks.
00:43
So maybe you know that in Volto we have these copy and paste methods which are very helpful, but let's say that we have a more complex block, like the group block. The group block is a block that has more blocks in it.
01:03
Can I paste blocks in it by the Volto? Let's do it. Right. Well, it's not working, why? Because we didn't add this functionality, we have to extend it, we have the extend copy and paste functions, why is that?
01:21
Because Volto doesn't have such complex blocks. So the copy and paste functionality is written just for these simple blocks. Actually I worked for this add-on for this block one month ago and I already implemented
01:44
this feature, but I removed it in order to show you how it was working before. Now let's make it work again, let's check, and I'll explain to you what I did.
02:14
We have some, I don't know why I can't select in this block, let me check.
02:40
Maybe I'll remove something without knowing it.
03:06
Okay let's check again.
03:26
Okay so I fixed the error, I was missing some CSS from one add-on. Okay so you can see this, you can select in a group block and paste and paste in a
03:43
group block. Okay let's see how is this done. Well first of all we need, we need to find the file, where are the, here.
04:07
So first of all we need a component, the edit block wrapper, why is this? Well we need to apply the CSS when you are selecting some blocks, you see this outline
04:23
and this background blue. So basically this component is a wrapper on the edit and here we are rendering the block,
04:42
the current block, the block. And on it, if this block is multi-selected, we are applying this class of CSS. So if it is multi-selected, we'll show that blue background.
05:04
This is very easy, let me show you where is this included. So in the edit, you know that we have view and edit and the edit is the component that is shown in the edit mode.
05:23
And in edit, we have this edit block wrapper here, okay. And we are pasting the block, the children that you saw. And we have this property, multi-selected, that is a truth or false property, it's a
05:43
boolean property. So if the multi-selected array, this is the array that contains all the selected blocks, includes the current block, then it will be true and the CSS class will be applied. And this is how I've done this.
06:04
Also, we need to see how this multi-selected is created. Well, first of all, we need a function that updates this multi-selected. So this multi-selected is a useState variable.
06:22
This is for rendering purposes, to know a little bit of React, we know that we have to use useState in order to update the DOM. So we have this function onSelectBlock that is responsible for selecting the blocks. These functions, it is also present in Volto Core, but it is not suitable for us.
06:45
Why is that? Because we have a complex block and we have to override it. So this onSelectBlock, it is included here on blocks toolbar, which is the component
07:00
that it's rendered here. So we are basically overriding the default function of the onSelectBlock. So how is onSelectBlock working? Well first of all, we have to figure out if we are on selecting something, if we are multi-selected something, I mean the event.
07:23
So what is the event? What is happening? We have to press the shift key and select another block. So how are we checking if we are multi-selecting? Well if the shift key is pressed or the control key is pressed or the meta key is pressed,
07:43
then we are multi-selected, we are multi-selecting something, control key is used to deselect something and we are passing this information on our onSelectBlock. We are also passing the selected block, which is the current block and the ID.
08:02
Okay, so now in the onSelectBlock function, what are we having here? So first of all, in order to rewrite our new multi-selected use state, we need to create an empty array and put the new selected block there.
08:21
So we created the new multi-selected, which is an empty array, and the selected, which is the ID that we give, and the selected is a selected block. If you are multi-selecting something, this variable was passed from before. The selected is null and here is a little bit more complicated, why?
08:45
Because a block in Volto is made up by two parts, the blocks layout and the blocks. Here are some informations about the blocks that we are not interested in, but in the
09:05
blocks layout, are the IDs of the blocks inside the block. So in the block layout, we have this item scheme, where are the IDs of the block? So we have the slate block, let's say the ID of the slate block, I don't know, slate
09:27
block. So we need to extract these from our data. This is how the group block is working. In order to extract them, the blocks inside the block, we need to first get these property
09:47
blocks layout. We have a function for this, it is called get blocks field name, because maybe you have a more nested blocks layout. So this is an already implemented function for us to help us.
10:00
After we got the field name, we are making data.data, blocks layout field name, and we enter here, and then dot items, so we got the items inside our block, all the items of the section block, these are items, the IDs of them.
10:20
So now we have to create the range of the blocks we are selecting. So how are we going to do that? Well, we have the anchor and the focus. The anchor is the first block and the focus is the last block. How are we going to find the anchor?
10:42
Well, if multi-selected is not empty, so we have some blocks already selected and we are extending them, we'll get the first, the index of the first multi-selected block.
11:04
If multi-selected is empty, we are getting the active block. The focus is the ID of the current block, right? So if we have anchor equal with focus, this means that we selected just one block.
11:21
So new multi-selected is equal with the ID, else we need to get the range. So we are making a slice in the IDs from anchor to focus or focus to anchor depends on which is bigger. Now we have to implement the deselecting case or the control key.
11:47
So if you are pressing control on a block and this block is present in the multi-selected already, we are deselecting it. So we are removing it with the without function, otherwise we are adding it.
12:04
Let me show you. So if I press control, you see, I deselected it. If it's not present in the multi-selected, we are adding it. This is what we are implementing here. And after that, we are just setting the selected block to the selected and the multi-selected
12:22
blocks with the new array that we just created. So this is how we are managing these multi-selected property, but we need to pass these to the
12:46
default function to extend them. So what are you going to do? Well, in the blocks forum, we are going to rewrite this onSelect property from the default to the, our new function.
13:03
And in the blocks toolbar also we are doing the same to override the default. Also we need to put here the selected blocks to the blocks toolbar in order to make Volto know that we are selecting some blocks with our multi-selected. So basically with this component, which is blocks toolbar, we are rewriting or override
13:28
the default functions from these buttons from the toolbar. So you see, if you are copying something, we are receiving these two, these we are, we are shown that we have to copy the items.
13:43
This is made possible by the selected blocks property that is multi-selected or multi-selected okay. So we also need to discuss how to paste inside our block.
14:05
So until now we are, we just discussed how we are pasting from our block to the outside. Now we need to know how to copy from the outside and paste in our block. There is a function in VoltoCore, which is called onChangeBlocks that is basically just
14:24
doing this, but it is not good for us. Why? Because the default, I already told you is not working with these such complex blocks that have, that has, that have multiple blocks in it.
14:42
So we need to change it. So we are creating a new function called ChangeBlockData and this ChangeBlockData is implemented here. So let me explain what is happening here.
15:01
So this section block has this schema. We have the blocks property, blocks, and the blocks layout property, which has the IDs, items, ID IDs, and here is a schema of the selected blocks.
15:28
So let me show you, let's say that we have the first ID and the second ID. Here, the first ID is, let's say it's, it is shown what it is.
15:46
So let's see, it's a slave block and maybe if it has something in it, I mean, let's say some, I don't know, let's see, that's it.
16:01
And the value, let's see, and also for the two. So what is doing this, uh, what, what is the default function? What is happening with it? The default functions is adding here.
16:20
It's adding here. Let's say that we are, we have, we need to copy something. The default functions, the default function is adding here the new IDs that we just copied. But this is not right. We have to put it here in the items, but the default function doesn't know about this.
16:47
So what I did, I, let's say I corrected the block, uh, the block data. So we, I am receiving this new block data from the Volto core, but it's broken.
17:01
As I said, because the basic items are not inside here or outside, because this is how the Volto doing it. So I am basically, uh, correcting, uh, correcting this data.
17:21
So how I'm doing it well, I need to find out which are the pasted blocks that we, I, that I edit. So I am making a filter. It was very easy.
17:41
So I'm looking for the, so I'm looking for the, um, in items. I am comparing block ID with, um, what I have, what I had, uh, before.
18:02
So data to that data is the current state of the block and new block data is the, uh, data that is broken, that the new data after the paste, but it's broken. So basically I'm, if the, my, uh, all the data had these IDs and the new data is saving
18:27
these IDs, basically I am searching for the new ones here with a filter. I also need to find out, um, the index of the selected block.
18:44
Why is this? Because I need to know from where to put the pasted elements from where to where. So I am getting the selected block. Let's say that I have copied here. So I need to add from this block in down, um, um, getting the index.
19:07
And now I am restructuring the new data. So I'm putting the old data in here. I am restructuring the new block data, but the blocks layout are broken here.
19:22
So what I am going to do, I am going to put the items until the items before the selected index, the items after the selected index in and between them, the pasted blocks.
19:43
And that's it. And I am calling the default function that was already doing it right, but, um, the default function after I modified the data and basically, uh, that's it.
20:03
Let me show you how the new data was coming and how I modified it in order to, um, make you understand better. So this is the new block data, and this is what I am, what I modified.
20:33
Let me refresh and I will show you, so first, first thing first, let's get some blocks,
20:51
create a new section block and paste in, let's put some and paste. So why I'm not, oh yes, wait a second.
21:10
I have to put it in the right project and wait a second, I guess. So let me show you how, um, the new block data is and, uh, what I am doing.
21:35
So I am copying something in the new block, in the section block.
21:41
So it was working so new block data. So we said that this is broken. Why?
22:16
Okay. Okay. Okay. Okay. Okay.
22:46
Okay.
23:15
So when we rearrange them, as you see here, it's not the same order as in here.
23:26
So we rearrange them in order to, uh, look the, in order to, um, make the same order here. Let's we pasted this from the selected block and download and yeah, that's it.
23:44
So basically to extend the copy and paste property, we have, first of all, to create a multi-selected array and you have to pass it to the, um, to the Volto core with a blocks
24:02
toolbar component and blocks form. After that, we also, you also need to make sure that pasting inside it's working. So how are you going to do this? Well, you have to change, create this change block data that you are passing it to the,
24:22
uh, on change blocks. And here you have to console log what you are receiving and make it looking good. And yeah, that's it. Thank you for your attention and have a nice day.