Build a Collaborative Notion-Like Product in 2H

Welcome everyone. I'm extremely happy to be here. And today we will have around two hours of workshops and we'll try to build a collaborative notion-like product in two hours.

So before we start with coding, I will just flash a few slides here. So that the name, like, my name is Itek Soha and I'm the technical product owner at the CK editor 5 core team and together with me, with their cameras on, you can see Piotr Koszulinsky, he's the director of engineering, and Szymon, he's a project leader in the collaboration features, and they're joining as well. Together they have around 20 years of experience in building editors, so if you will have more advanced questions, I'm sure they will answer them right away.

So CK what, like, that's a pretty strange name for the product, but a CK editor is basically a rich text editor, right, so we have a editor, what you see is what you get, and basically you can create the content in a visual way and you will receive the content later on in the desired format. Usually it's HTML, so the editor itself is written fully in TypeScript right now. This is something new. We've just finished the rewrite to TypeScript. We'll be also using TypeScript today and editor itself could be implemented in any application that has HTML, CSM and JavaScript support, right. So the editor itself is also highly extensible. If you miss some functionalities can use the editor itself as a framework and introduce some functionalities by yourself. And it's an open source project. So if you would like, you can check on GitHub. We are there and the whole editor is licensed under the GPL license.

So the history is not that brief. The editor itself is on the market for around 20 years. And it started in 2003 as FCK editor, done by Federico. And then it was renamed as you can see, the FCK was not that good acronym to having the product. You can answer yourself why. But then it was rebranded to CK editor 3. Then in 2012, it was the CK editor 4 released. And there is a high chance you were actually using it somewhere. It was the main editor in the Drupal CMS, right? Then we had another product, which is basically a totally different product, CK editor 5 released in 2018. And as I said, totally different architecture, those two products actually were still on the market side by side. This is why you have this number of 4 and 5, but the CK editor 5 introduced more powerful text editing solutions like real-time collaboration that we'll try to use today. And in 2022, CK editor 5 was again included into the Drupal core as the main editor. Here you have some very cool logos of our products that use the CK editor 5. And our clients as well. This is the brief history and a few facts about the CK editor.

But what will we do today? And this is how AI imagines the wall of glues. What we'll mostly do today is gluing. We will glue different configurations of the editor just to receive a product that we would like to have. I'm saying gluing because we'll mostly spend time on configuring the editor, installing different plug-ins. We will not develop new features for the editor. This may be a topic for some future workshops. And also we have only two hours so we'll try to only use the plug-ins that are already there mostly but still having some fun with it. Small disclaimer. We love Notion. This is the Notion-like product. We actually use the Notion inside of the CK source company. So this is something that we value a lot and we really like this product and we'll try to build something similar. And if you have any questions, there's Simon here, there's Piotrek here. So feel free to ask. You can basically ask the questions on the chat. Is CK editor used inside Notion? No or not yet. We do not know, but it's not used right now. So if you'll have any questions, I will try to take a look at the chat. So feel free to ask anything.

Our host also said you can just ask and unmute yourself and we will try to answer. If you would like to code along, go ahead, I will be coding. We will try to set up the editor and the product, so if you would like to join, go ahead, and I will send a few details in a second and the whole workshop will be set up some kind of a story, right? So to have a real-life example of setting up the editor, this is going to be a real-life scenario that maybe some of you had similar experiences when you joined some companies.

So the story goes as follows. You basically joined a new company as a developer and there's an onboarding project waiting for you and the product manager cannot wait to tell you more about it. So I will be coding in Vim, right? So that's my editor of choice. But you can, if you want to code along, here is the link to the repo. Feel free to clone it and basically what you just need to do in the root of the repo, you just need to run one command. There is this meta directory here. You just need to get one script from there, called reset, and when you launch it, the index of the project will be set up to the start stage of what we are doing right now. If you would not like to code along, just watch what I will be doing. If you would like to join later on this reset script actually allows you to join later on. So our story will be cut to act. So for example, if you would like to join us in act five, if you will run this command, the index of your project will be reset to the code that we will get at the end of act four. So later on, if you would like to check different stages of this project, feel free to do that, but I will start from the start, at least from now. I hope I will not need to move myself to other acts by this command. Okay, so let's start it. And check the license, check the license, always check the license. That's true, if you do not want to have trouble with your legal department. Okay, so let's start our story. We, our PM is saying that we want to have cool content creation features to our app. Previous developers started working on something, check out what he created, right. So let's try to visit our repo. Let's see what we have here. So when we will check it, we have athlete, right, pre-tier, pretty standard stuff. We have readme. So let's check this out. And here we have a message from our previous developer that is not content with his product manager, I guess. But he sure is like, he prepared some skeleton for us, right. The product uses Vite. It's experimental setup on the CK5, but it works great. They are reading full in TypeScript and will be also writing in TypeScript. Plugin-based architecture, more on that in a second. And the message is about never trusting the PM. I'm not sure if that's true, we'll see. And good luck. And at the end you have the meta instructions how to set up this reset script if you would like to follow along. So here we have the readme. We also have the index HTML, right? With a few parts commented out. That's because we will just enable them later on. And yeah, that's the setup. Basically everything looks fine. We have the package.json as well, with a few packages, but not that many mostly dev packages, one CKEditor5 package. So we will not touch it right now. So with this setup, let's start. And we will basically go to the first act of our story. So you basically go to your PM, and you say that something is there, but not a lot. And the PM will tell you, like we want to increase user engagement. Let's create some awesome content. And we will treat it as a spike, right? It's gonna be a prototype.

Someone else will integrate it, don't worry about it. We just need simple editor features, like bolds and headings, lists, and links, and that should be enough for a year, right? So that's the standard thing. It should be enough for a year.

So when you will Google the documentation of the CKEditor, there are multiple installation options. But basically what we'll do here, at the start, we will just install some packages for the CKEditor. If you are coding along, I will make it easier for you if you would like to copy, paste it. It's a bit faster on my side because I've installed those. But what we've done here is basically we installed some plugins. Editor classic is the type of the editor we'll use. Essentials package is the basic editor interactions, enter clipboard, basic styles after the basic styles for texts, right? Bolds, italics, auto-format in editor shortcuts, headings, links, and lists. It's pretty self-explanatory. We'll see them in a second.

So plugins is the way we introduce the editor's features, right? So every feature is implemented, or at least enabled by a plugin. So the plugin is the package basically on our side. Or a package can have multiple plugins actually. Plugins are highly granular, as you can see. Like, every feature is enabled by a plugin and we'll see that in a second. And plugins know everything about the editor, but plugins should know as little as possible about each other, right? This is the architecture that we have there. So we will start with the basic editor setup right now. I will just go to the index.html. And we have the div with the id editor. And we'll embed this editor here, right? So this is something that we'll do. And let me just go to the SRC main, right? So this is our TypeScript file. We are importing some styles here already. More on styling later on. We just know that we have here the styling. And what we need to do? We basically need to grab the editor element. So let's do that. Editor element. And we need to grab it from the DOM. So it's documents get element by id. And we had there the id of the editor, right? So that's the thing that we will wrap here. As we are using TypeScript, TypeScript will complain that it may be null. So let's keep the TypeScript satisfied for now. So if we do not have this editor element, let's just throw the error. I need to... So if we will not have the editor, we'll just quit early, and that's it. And once we have this editor element from our DOM, we can basically set up the editor, right? So we had the classic editor and we'll import that, so classic editor has the static method create. And here we'll just pass the editor element that we've grabbed from the index, right? Index and HTML had this div, and then the second part is the configuration of the editor. And here, we basically pass the object with several configurations, and the first one that we'll do is the plugins. So, as we've installed the packages, we basically add the plugins to our editor. And here, we need to basically import all of those things that we installed. So, essential were mentioned, Bolt. Let me just make sure it imports, Bolt, italic was there, underline as well. Let's fix the styling in a second. Strike through, we had this one. May be useful later. And auto-format was mentioned. And then, we have the heading. We have the link.

We have the auto link, which is also a cool plugin I will show you in a second. And we have the document list. So, this is the list of plugins that we use. Let me just format this file. So, all of those plugins are set up with the editor. And I will just open a second tab here to run the bit npm run dev. And on our localhost 5133, we should see the editor, and it's there, but something is missing.

So, basically, we can write here, right? Like, even if I would press command B, it's there, but what we are missing is the toolbar, right? So, usually, when you see the editor, you also expect that there's gonna be a toolbar for it. So, that's our second configuration option that we need to add, and this is basically a toolbar option. And we can just look at the plugins we have above to just add them. So, usually, what you see is that we start with the heading. What we can also do here is that we can add the vertical line that will basically split the toolbar. So, we have the heading, and later on, let's just up the styles for the text. So, bold. I'm just looking at the plugins list right now. So, we have Italic as well. We have the underline. We have the strike thru as the last one. By the way, if I'm going too fast, just let me know and I will be, go slower. Auto-format is not needed. Heading is already added, so let's just delete it one more time. We'll have the link. Auto-link is not needed in the toolbar. Then we have two options for the document lists. I think we have numbered list, right? So, this is one of the list types that we can add, and then we have the bulleted list. So, let me just save it, format, and let's check how it looks right now. So, it's reloading automatically, and we basically see here the toolbar of the editor, right? So, we have a standard paragraphs. With the auto-format, we can have marked down-ish syntax of adding, for example, headings, right? So, this is heading one. We can also add the bullets, right, as a list, and we can also have standards text styling, right, the underline, and use the toolbar for those. We also have adding links, so ckeditor.com, and when we add it, and when we click it, we'll see that it actually doesn't work. So, it was inserted without the protocol, and so without the protocol, is basically means that we see that it created the relative link. So, to make it work, we actually just need to add the configuration to our link, plug-in. So, let me just add the default protocol for the link, and we'll make it basically HTTPS. So, every time we add the link without the protocol, and let's check this out again, ckeditor.com, it will create a proper link for us. We also have the auto-link feature. So, for example, if we type www.cksource.com, and we will press space or enter, the auto-link plugin basically makes it work. This switch to the actual link in the editor, the same for the cksource. For the emails, right? So, automatically, the editor itself is switching the links to the proper links.

Okay, so, this is the basic setup that we have here. Let me just check the chat. I see that Kjetil is replying. That's great. So, it looks like we are done here. And we can send it to our PM, right? And finish for a year. As we know, this is usually what happens. So, I will just save, quit, and, yeah, later on, we'll just start the act two. And it's two days later, our PM comes back to us again and says that great reception of internal tests, but there are some features missing, right? And we basically have the users complain that under redo is not working. Maybe we could check if we could autosave the editor, like what we could do to basically preserve this data in a user-friendly manner. And can we do it for tomorrow? That's the standard stuff. So we'll try to make it happen.

So the data and the autosaving is the next topic that I will try to show you. And basically, what we'll do here is, again, probably you will not be surprised. We'll install the autosave plugin. But there was also a dimension of this undo and redo, right? So let's go again to the ascending main. And this undo and redo is actually already there when we'll check the editor and we'll start writing and I will just press command Z. You will see that it's actually working. But it's not visible on the toolbar. So undo and redo are the part of the essentials package. So what was not maybe visible to our users, it's just we, they did not see that it on the toolbar or maybe assume that it's not working. So I'll just add the configuration for the toolbar to have the undo and redo. We see the icons here and it's possible for us to undo and redo some operations of the editor.

So all of the operations of the undo and redo are basically like all of the, our operations are remember organized into the batches, right? So they can later on be easily undone or redone. And thanks to this approach, this feature can select the revert past changes. Not just the latest one. So this will allow handing the asynchronous operations for us. So for example, image uploads without blocking users from editing the document in the meantime.

So the autosave was mentioned, but even before we go there, let's just observe the editor's data, right? So the, like how the editor displays the data. What data do we have in the editor? So we had this create function and actually it returns the promise. So what we can do later on here is just, we will add the, we'll use this promise and basically we'll get the editor here in this callback. And let's just attach it to the window first. So window editor equals editor and the type script will contain here that we do not have editor on the window. They, it does not know what we will do. So I will just extend the type script here for it to know that the window can actually have the editor. So we'll have something of classic editor here. So I've attached to the window the editor and when we'll see in the console and we'll try to get the editor, it's there, right? So we are in the browser's console, we've typed the editor. Let me just type a few things here. And let's maybe add this. So how we get the data from the editor, one function, right? Editor, getData is how you get the pure HTML out of the editor. But this is just the data that we get, right? There is an additional model underneath the editor and we'll check it out in a second. It's actually good to inspect it and see what the editor has underneath it.

And to do that, we'll just use the plugin that we use a lot for the development. So the plugin itself is the CKEditor5 inspector. It's not written in TypeScript yet. It's something that we are using purely for the development. So you can just add it to your DevDependencies and the CKEditor inspector will allow us to check the model of the editor. So I will go back to the src main, and here below the attaching editor to the window, I will just do the CKEditor inspector. So this is our main class that we'll use and we'll attach basically the editor itself to it. So obviously I need to import that. So we have the CKEditor inspector and we will do it from the inspector package. So it's not in TypeScript as I mentioned, so we will just, once, I promise, ignore the TypeScript. So all this green and let's check what we have here. So what you can see here, this is this panel of the CKEditor inspector. When we write here, you will see that we have something called Model in the editor. So basically, Model is our DOM-like structures, a structure of element and text nodes. So unlike the actual DOM, what you will see here is that both elements and text nodes can have the attributes. So for example, here we have the text and the text has the attribute bold. So almost all of the editor's future are focused to work directly on the Model, but this Model is later on converted to two separate views. So we have the editing view and the data view, and those views basically represents editing view, the content of the user is editing. So this DOM-like structure that you see in the browser and in the second step of the inspector, you will see this editing view, and we also have the data view. And the data view is basically editor get data. So we have the HTML, data view. We have the editing view, also the HTML on the editing side. And we also have the Model of the editor. So those are the three main concepts that we'll observe throughout the workshops, how they work. What you will see, and I will try to show that to you as well, is that how the editing view differs from the data view. But anyway, let's go back to the Autosave, right? So that was our main concept that we want to have. So first of all, we do something standard here. So we'll import the Autosave plugin. And then the next thing that we'll need to do, it's we'll configure the Autosave plugin. So the Autosave will just pass it to properties, waiting time. So the amount of time that needs to pass after the last action for the callback to be launched, right? So basically we'll have here 5 milliseconds, and then we will have the callback here as well.

So to save, we'll get the editor here, and we will basically return a promise. I will just create a function, save data with the editor. Here what I will do, I will actually typecast this editor to the classic editor. I would need to install additional package to get the editor type. As you can see here, we'll get the editor at the bottom of the screen. I will just typecast it to the classic editor for TypeScript to not install additional package. In this function save data, what we will do as I mentioned, we'll get the editor itself of type plastic editor and we'll basically return a new promise. This is what we will mock the auto-save here. Usually you would have some implementation of saving the data via some API, for example, that your backend gives you to save the content. We will just mimic it with the set timeout. So basically we have promise here and here we'll have the resolve. And we'll just set the timeout here with the empty handler and what we will do here, we would just console lock that the data was saved, right? And here you see our function editor get data at the end of it we obviously need to resolve and let's maybe do that again every 500 millisecond. So we have the callback for the save data when we will check it and let's try to do it. I am typing something and in the console on the right you see that we actually are auto-saving every now and then when the time passes. But the user does not see that, right? So something that we will need to do here is have some kind of user-facing thing that will allow the user to basically observe that the auto-saving is in progress. So we'll do that again by having a function and this function will be in the, so we'll do the display status function, we'll write this in a second. So display status for our editor. What you will see here, and I will go back to the index HTML to one of our commented parts in the index HTML, we have this part commented out that basically gives us this auto-save place. So there's gonna be a little spinner that will show us that the auto-save is happening, but we still need to show how to, like when to show that this auto-save is actually saving. So this is our display state, what our display status function will do. So we have this function, display status. Let's define it. It's again taking the classic editor. And what we'll do here, we will use the editor to get one of the plugins. So this plugin is called pending actions and we'll use the editor's API to get it right. So editor plugins, get, and here we'll have the pending actions. So we got the one of the plugins, and another thing that we need to do is get the status indicator from the DOM. And here we'll just get the element by ID again. And I think it was, let me just check, going back to the, I think we need to get the auto save status. So I'll just copy that here, maybe go back and just paste it here. So we have the plugin itself pending actions and we have the status indicator that will like to basically change and show the spinner that is saving. So on the pending actions will add the listener, right? So again, you can add the listeners to our plugins. So there's going to be basically an event here called change to the property has 10 years. So if there is any action, we will just want to have a callback to do something with that, right? There are three properties here, we will ignore the tool. So we will get the event itself, we'll get the prop name, but we'll not use it. So I will just underscore it. And the third one is basically the third is the new value that we would like to check if it's there. So if the new value is there, what we would like to do, we just want to add to the class list of our states as indicator. We will add the class of busy. So our styles allow us to use this class and if it's not there, we will remove the class. So start with indicator, class list and let's remove the busy class. Looks like everything is okay. Let's just style it. And this is our auto saving top right corner. So when I will start writing something, the pending actions see that, okay, something's happening there. And then when it's saved, we show to the user that, okay, the editor itself is saved. The autosave is working. Another cool feature of the autosave, maybe you will see this as well when I write something. So the autosave is still like we haven't saved the content but then I will try to quit the top. The autosave works in a way that it will try to prevent it, right? Some data may not be saved, dear user, are you sure that you want to quit? Right, so this is something that comes right off the box with the autosave itself.

Okay, so we see that it's working, the autosave is working, we have cool indicator that the saving is happening. We can actually can save it again and send it to RPM. Let me just check if there are any questions. Piotrek, thumbs up. Do we need to answer something? Perfect, am I going too fast? It's possible. I will try to go slower then. No one is complaining. If you would like to complain, go ahead. If not, I'm going further because we've sent something to RPM and that means that the Act 3 is starting.

So immediately, oh, Kipo, so immediately, oh, you're keeping up, perfect, great. Good to hear that. Oh my God, the auto save is perfect. The PM is delighted and we can do tables and images. Obviously, you will be pretty surprised that PM said we have a year with a basic feature set but the management loves the initiative so we'll just keep going. So tables and images is pretty standard thing that you have in all the editors. They are not that easy to implement right? So this is something that we'll check out what we could get in the CKEditor. And here, I will just paste additional plugins that will install and it's actually just two of them. So we have the CKEditor table and CKEditor image and we'll start with the simple setup of the CKEditor table. Again, you will not be surprised what we will do first it's that we'll add those plugins. So we have table, second one that we'll try to add is the table toolbar because yeah, good toolbar for the table is not bad. And the thing that we'll do here is we will add something to our toolbar called insert table. So it will show on our toolbar that it's possible to insert the table. And I'm going to our editor again and yeah, the table is here but what you will notice is that it behaves a bit different because we see here the first so-called widget and you see the main difference between the, oh, something is happening here, probably it's still working, let me check. Okay, so you see the difference in the editing view and the data view on the right, right? So in the editing view, you see some additional classes on the table elements. There are some additional attributes as well but in the data view, you will not see that. So here we see the first difference between the editing view and data view. There are different. And the widgets are basically adding some cool editing functionalities. So for example, imagine you do not have this paragraph here, right? And you would like to add some content. You would want to act the enter before it and just start typing here. Also the selector as well. It adds cool features when you are typing and you just move with your keyboard. So you can just go along and just move with your keyboard. You can go inside, right? So this is a widget and we'll also see that in the images in a second but let's stay with the table for a while. I've mentioned the toolbar. Again the toolbar is something that we configure via the configuration, right? So we have a table here option. And what we want to here is we'll actually before we go to the toolbar there's one option I want to show you default headings, right? So we can tell the editor that by default we want the first row. And for example the first column be our heading. So this is one thing that we could add here. And another one is content toolbar. So in here we'll just say that in our toolbar we want to have the table column, with column we would like to have the option for the table row. And as well we would like to have merge cells. I think that was the option merge, merge table cells. Okay and let's try to do that again. As you can see, we already have the heading a, b, c, d. What we can do as well. We see the toolbar here. We can obviously use this to add some rows or delete some rows, add some columns as well. And we also have this cool merge feature. And this is just a few features of the table.

I do not want to spend too much time here. Obviously we also have sable properties, styling as well. And all of those option can be added to the toolbar of the table. So the table is there. Let me just check the time, time. It's good. So the table is there. And the second thing that we wanted actually to add was the images. So again, something that we are doing here. We need to import the image from the CK editor 5 image. And maybe let's also have the resize option here that our user have the possibility to resize. And another thing here is the image upload. So this is something that you will see here. So we have the image upload. So we've actually added three plugins from the image package. We have image, image resize and image upload. And after the table, what we need to do in the toolbar itself, let's add additional split just to divide it. And here we have the image upload, right? So we add additional capability to our toolbar. And in our toolbar, we'll see the icon here. And when I will try to upload an image, it will not work. So basically what we usually need to set up alongside with the images is the upload adapter. So we call this this software that basically tells the editor what it should do with the image that it got. So basically a callback, hey how to save send the file to the server. There are two main strategies here. So basically you can use one of our products like official upload adapters, that will basically be very easy to set up. You can just add them and you will see that in a second. We have free, we have premium options for those adapters or we can just write your own adapter here. And something that you can do to just connect the editor to your backend and use some, your logic, right? Like how you want to handle the files and the images. We will use the CKBox. So this is our official adapter. To use it, you need to have the license and if someone is coding along, I will just paste here where you can get the 30 days free trial, no credit card, just give us your email, we will not email you or there's gonna be probably just a few emails. But if you would like to set up the CKBox, set up the trial right now, should be quite fast and then inside of the trial we'll get something called Token URL for it. So I will just stop here for a second to basically give you time if you would like to set it up. From this, we'll later on also use this trial to set up the real time collaboration as well. So this is something that may be useful later on. So we have premium features for our editor. We'll just use a couple of those just to showcase the real time collaboration. So while you are setting up the trial to get the keys to our CKBox, I will just show you and I will try to do it slow so someone is not missing along. We just go to our index HTML. And what we need to do here, there is the script that loads the CKBox for us. So as in, it is an external product, we'll just load from the CDN the CKBox. And additional things that we need to do here is install the plugins. So two plugins that we'll install here, one is the connection of the CKEditor5 with the CKBox. Those are two separate products. The second one is the Cloud Services. We would not need it if we just use the CKBox, but this is something that we'll also use later. So we can already start with that. And what we need to do here to set up the CKBox, and I will just check if... No problems so far, perfect. So we go again to the domain, and we add those two plugins that we've just installed to our plugins list.

Actually, we'll need to have three. So we basically add the CKBox. So our glue between the editor and the CKBox. We have the Cloud Services as well, and we'll also add the picture editing because the CKBox itself is using the picture tag. So this one will be needed as well. And obviously we would like to have the CKBox on the toolbar. And one last thing that we would need to configure is actually this license, right? So something that maybe we can add at the end of our configuration, we have here the Cloud Services configuration, and here we'll use one of the options to authenticate or to say to the editor, hey, I have this premium feature and it's called token URL. I will just try to show you how to get there, maybe my dashboard. So for example, you have the CK editor. So this is my trial, right? You can see here that you have the CK editor and when you go to our dashboards, it's possible to get the sample environment and we'll use the development token URL, right? So it's a development environment that will help you to use the CK box and later on collaboration, probably you need to generate it. I already have it generated. So this is something that you may need to do. And then inside of the project itself, you will have the art token file in the ESRC. So they're just copy paste the token URL to this variable right that we have there and it should work. I have a different file already set up. So I will just import from the token file that I have here. And if we've done everything correctly, it should just work. And let me check our editor. And what we wanted to do here is we wanted to upload an image and it's there. So this is the image of my choosing. I can resize it. Oh, something funny happened there, but I can resize it. And just notice what the CKEditor did, right? So I have uploaded the image. As you can see on the right, the data, the CKEditor turned the image into the responsive image. Like there is this implementation on the HTML side of source element. The CKBox converted the image to multiple file types and depending on the size of your screen, it will serve the different file, right? So this is something you get straight out of the box from the CKBox. Usually you would need to write a lot of code to get it, right, but here the CKBox just handles that for you. You can also see that it's the WebP file type. So it's also converting the files and this is just something that it does for you straight out of the box. And we can also use the CKBox panel in for the CKEditor, right? So basically we have images here as you can see, but you can also upload files and images. Oh, this is something I've used for testing, right? Obviously you can just copy paste, right? So I will just have the part of the screen take into my clipboard. I will just copy paste and it's uploaded as well. So we can drag and drop, we can copy paste. We also have other image configuration options, right? So something that you could do is for example this is the block image, right? We also have the possibility to have inline images. There's also a toolbar for the images and you can style them to move them right and left. We'll not go there, I just wanted to show you the basic setup of the images and what we can do with them and how to use the official adapter that we provide for you, right? And as you can see again, the image itself is a widget so it still adds those cool capabilities of doing this and writing around the image. Resizing, it's not decreasing the file size, the resizing on our site, it's also configurable. So you can, for example, add the options to the user to have possibility to resize by 50% and 25%. And we are basically just adding the inline style to the figure element, as you can see there. This is the Block Image Implementation. So the image itself is wrapped around the figure. And in the case of the CK Box, also I think around the picture that we've added here. And also, files, right? So, you can also add the files to the CK Box. They will be just shown as links inside of the editor. So this is something that CK Box also can serve and serve PDFs or other files that you want to upload there. Okay. Files are there. And I think we can actually send it back to our PM and see if he has some other mission for us. And I'm actually going so fast that I will finish early. So we'll need to figure out what to show you for another hour.

No, it's not that, but I will speak a bit slower right now. So we have act four, something that our PM, let's see what our PM will tell us. You are a master. That's great. And so, okay. So our design department asked you to make, make it look and work like Notion. You will be surprised like usually when you make some decisions about the editor, you would like to know this bug before you choose the editor, but you know how it is. Our PM wants to have a cutting edge, no-toolbar 21st century editor. So usually when you use some products, that may be a difficult change, how to style the editor, but what we could do in the CK editor site, we can actually add plugins, right? And we have the plugins that basically change the editor type. So we have a plugin that basically allows us to restyle from the classic editor to the balloon editor itself. So we have two new plugins, which is basically a UI plug-in and the editor balloon that we will install here. And when we install that, we will just replace the classic editor that we have with the balloon editor. So we have the classic editor here, let me just scroll to it and I will replace our classic editor with the balloon editor. We've used the classic editor in a few places, so let me just replace every occurrence to the balloon editor, so we have balloon editor here, we have balloon editor in the same data, balloon editor display status, this one is import, this one is the global declare and we can actually, this is not something I want to do, we can delete the classic editor. So this is something that will not use, we have the balloon editor type, I will show you that in a second, but the second thing that we could try to do is basically a plug-in for the block toolbar. So we have the classic toolbar at the top of our editor, what we would like to have right now is basically some kind of an icon that shows or allows you to open the block toolbar. So we have a plug-in for that, it's called block toolbar, maybe I'll just add it to the end, make sure it's there, so we have the block toolbar and we just need to change the toolbar option to the block toolbar. And with that, let's see how it looks like right now. And we have the editor here, as you can see, we do not have the toolbar, we just have this Pilkrow on the left which basically is our new toolbar. So it's looks a bit more like Notion when you have this six dots and the plus, so it's just a different toolbar element that we can have here with which we can basically style the features and style the text as well if we want to use it this way, obviously the shortcuts still work. Something that is not working that well is that when we go out of the editor, we do not actually see something is there. And for that, what we can do, we can just add the placeholder. So we'll just tell the editor that we want to have the start writing option there. Here. So we have the placeholder for start writing. And when we go here, we already see that, okay, so this is the place for the editor and I can actually start writing, right? So we've changed the editor type from the classic editor, usually the one that you see on the web, to the balloon editor with the cool blog toolbar. And you also can ask here, but okay like, but what is happening in the styles, right? Like we have those styles here. Maybe there is some magic there. Let me just save. But it's actually not that many. We just set up the phone. So the editor is really stylable by the CSS, right? Like you can basically add some classes or overwrite some params, right? On the CSS level, on the root level. And we style obviously here, the root, the body, the top is the container that we have from the top. Container H1, which is something outside of the editor. And for the editor itself, we actually have, I know maybe three definitions, right? Like we make order transparent and there is no box shadow. But it's actually only this, like this fire is a bit longer. We also have probably autosave is the most complex here styling that we have, which is this cool spinner that we have in the top right. But apart from that, it's mostly this. I do not want to spoil other features that we'll implement in a second. But basically the styling is there, but we haven't used it that many things to make it look more cleaner. So this is our current editor. It looks a bit more like notion so let's try to send it to our PM and let's see what feedback he has for us.

So we are approaching our maybe not final but the moment that's we've all been waiting for because our PM is very smart and sharp and he will notice that the notion usually also has the real-time collaboration and this is the second moment that you will usually go nuts and be scared because again, this is something that it would be ideal to know at the beginning of the project if you are implementing something but again, it's something that the CK editor can help you with, so whenever you will have in your future some kind of a need to implement the real-time collaboration on a text, we've got you covered and we'll show that in a second. The two things here to remember is that we actually have the two parts here so we have the collaboration and for that we have, I think, three plugins, right? So we can leave the comments, you can obviously have track changes and revision history. So this is the collaboration part, but you can, and you can do it async, right? So for example, one person at the comment, then another person opens the document, adds another comment. So this can be totally asynchronous collaborate enabled by some features of the editor, but what you can also have is, on top of it, have the real-time collaboration. So the users can observe in real-time what the other users are doing. So this is something that we'll try to implement right now. Real-time collaboration plus comments. This is usually something that is needed.

Again, premium feature on our site. You can test it freely with the 30 days trial and set it up, right, for yourself. And it's the same configuration that we had for the CKBox. So later on, we'll just copy more configuration there. But before we go to the configuration, we need to do two things. We need to install two more plugins for us and as I mentioned, we'll have the real-time collaboration and we'll have the comments on top of the real-time collaboration. This should take a while. So make sure you have the trial set up if you want to join along the real-time collaboration. And it should finish in a second. We are there.

So I will go back to our main TS and the usual steps will go as previously, so we'll basically add the real-time collaboration editing. So before we go to comments, let's only observe the editing part, which is multiple users adding content at the same time. So we have real-time collaborative editing plugin. And we will also use the presence list which will allow us to basically show who is on the content, like who is editing that. Part of the configuration is already there.

So let's go to our cloud services that we've set up for the CK box. We already have here the token URL. And remember this is the token URL for the development environment. Later on, we may talk how to implement something for your environment, but here what we'll get automatically is the user setup, right? The demo users, we do not need to set up our own backend for the users and things like that. So this is the development environment. What we need to add here, the second option is the WebSocket URL. Again you will see it in the dashboard near the token URL. I have already set up this part. Add it to your add token file. I already have it here. So I will just add it. So this is the configuration that allows the real-time collaboration. And the option that is mandatory for all of the real-time collaboration, and it's probably the one that is crucial, is the channel ID. And I will just type here 1, 2, 3, 4, 5, 6. And the channel ID is basically the configuration, the very important configuration property for the collaboration. Because it's setting it up on the editor controls which editor instances collaborate with one another. So all clients, all of the users that have the same channel ID will collaborate on the same content. And each document needs to have a different channel ID. This ID, as you can imagine, usually is the primary key of the document. Some ID inside of your database for the document. You can put there whatever you need. Just remember that it needs to be unique. What we'll also add here, we will use the presence list. And the presence list is actually something that we already have in the indexHTML. We just need the container. And again, we'll get the element by ID. And I will just check in the index. I think it's commented out. So presence list is here. It's at the top. Presence list container. Let me just grab this. ID. And let's add it to our presence list. And unfortunately, I will make TypeScript spin again.

I will just force it and say that this presence list, if there it will just show the warning. So let's test it out. This is the moment that we should see. It's refreshed automatically. So presence list, top-right. This is me. This is Amelia. This is the demo user that is provided for us with the token. Let me just close the console for a while. And we will open the right-side split. Add a second document here. And the second user, or third user, actually, and we should connect. And sorry for three users. Probably I have somewhere opened two things. Okay, let me just close it out. And it works, right? So this is, not yet, right? So we see we have two users. Let me try start typing. And it works. So to be honest, when I first seen how fast I was able to set it up, I was pretty amazed that it just worked, right? Like this real time collaboration is pretty complex topic, as you can imagine, like users can not hear pictures, they can do whatever they want here. And here we see the live session between the two users. So this is something really, really cool that you basically have two editors session collaborating on the same content with the users alongside. And they just work with each other. And that's pretty cool, I would say, and I really like it.

What you need to remember about, and let me just hide the schema for a while, is that there is server, right? So there is server in the middle of those two editors collaborating that is basically managing the session of the collaboration. So what we are doing here is basically we have two users connected, there is the server, but this cloud server, or on-premise, because we actually can, you can also have the collaboration on on-premise on your own servers. It stores the session, but only temporarily, right? So as long as there are connected users, plus sometime the session is there. So you need to make sure that you save this content to your database before the last user disconnects. Otherwise, the content of the session will be lost, right? So it's recommended to save the data automatically whenever the data changes. And just imagine that there are two users collaborating with each other, and imagine there is a conflict, right? Like someone's internet just broke. They go back, they start editing. This is the later document version. So what might happen is that someone will try to save the older version of the document, overwriting the newer one. And usually you do not want that to happen.

So what we'll do here is that we will use one of the properties that the plugins give us, and we will go to our save data function, and in the promise before the set time, also before this fake saving to some database, we'll try to get the version of the document. So here we have the version, again, we'll connect to the API of the editor to get this plugin, which is really long name, real time collaboration client. So this is the plugin that we will get, and from it, we will get the cloud document version. So this is the version of the document that we will have. And let's just put it next to the editor get data. So we have the version from the plugin, and this version will be locked in our console.

Let me just go back to our editor and just check one thing like in the background, the editors are refreshed. So there was a refresh because the vid needed to rebuild, we've changed the test, so there was whole rebuilding and bundling happening, but the content stays. So when you've seen that previously we've changed the content of the editor, it's was lost, so here we have this session open, so whenever we go back to the editors, this content will actually stay with us and will be there for as long as the session is there. Let me just open the console here again and let's start typing here. Let's maybe add additional sub bullet here. So we have this saved data and here you can see the number at the end. So the higher the number, the newer the document, right? So this number will be provided by us, I think from the server actually, right? It will give us the number of this document and when you are saving the document by a, for example, autosave, you need to compare like, okay, I need to store this number in my database probably and whenever there is some save action, I check if the new document has the higher version number and then it means that it's quite safe to save the content of this editor. There, as you can imagine, we have other methods of saving the data. So you can also, for example, use, I think our WebSocket connection, right? So we can connect, do not get the content from the users, but just use the connection via the WebSockets from our, not WebSockets, WebHooks, sorry, not WebSockets, WebHooks from our server, like central server that has the session and you will get the content via the WebHooks from our site pushed to your server. I think there's also a REST API that you could use. There's also a feature called document storage in which in fact, we will actually store the document for you and you can later on just grab it from our servers. So multiple options here. I just wanted to show you the easiest one. We already have the autosave so let's just say with the newest editor version. And we have the collaboration already set up. Let me check the time, we are kind of safe. Simon is writing some cool stuff. I was just typing the same thing but you just said about the demonstration. I didn't want to interrupt you. Perfect. So read the Simon's comments. If you're interested in the saving methods, what I will do here quickly and I think we'll for sure have the time for the discussion. You will be able to ask us some questions. So we have real time collaboration and what we'll do, the second thing that we wanted to have is the comments. And again, comments could be done async way but we would like to have them in, I think it's a comments plugin on our side. So you have the comments and you add real time collaborative comments, right? So again, comments can be used async way but if you want to have the real time collaboration it's also possible. So we have real time collaborative comments plugin as well. After our CKbox let's add the comment button to our block toolbar. So there is a comment and I think there is the second option just released. Recently, we have the comments archive as well. So we have the comments archive and additional thing that we could set here is basically to have some kind of a sidebar for comments. So when we go to the index HTML, there is one thing that we can uncomment here which is the sidebar and the sidebar with the sidebar enabled. Let's just copy the presence list. It's going to be something similar. So we have the sidebar configuration and in here as far as I remember it was the sidebar ID that we will have here. So we have the setup of comments which is basically toolbar plus plugins, the usual stuff that we've done. We also will add the sidebar. It pushed this, our content a bit to the left. Later on I can show you a different implementation of that but basically what we have here right now is that here is the sidebar that pushed us a bit to the left and inside of the log we can just add the comment. So I will add the comment here. Still we have this session open, right? So whenever you are in the real-time collaboration session with other user, you can see it live and let's reply here, cool comment. And this is something that the other user will see as well in live. Again, something interesting for you that you may want to check out is that when we have the, and let me just open here our data view again of the editor and let's add something here. When you will look into the data, you will just see that we have here the common start and command and inside of the HTML.

So we do not include any content of the comments for security reasons, right? So if we start for example, something here, some malicious actor could just edit it, right? Including the comments other by some other authors. So the data it's of comments is not there, but we can check it, right? Like we can basically get it from the comments repository. So again, our favorite save data function, we will get the comments repo plug in here. So from the editor, sorry, comments repository, but I just saved a few letters on typing, comments repository. So this is one of the plugins that we will get here.

And from this comments repo, we will just get the threads data, right? Like the common thread data. So we will just have comments, repo, get common threads. And here we can just pass a few options, for example, like skip the comments that are not attached to the documents, for example, or skip if the comment is empty. So we will just not see those comments that are empty or just show them in JSON, right? So those are the things that we can have here. And maybe in our sets timeout, let's just console log those comments in the threads data. Okay, let's see how it looks. So we have the comments, let's add one more thing here. And we got the comments here, we have one thread, so when this thread, we have two comments and those comments have certain texts, right? So the comments repository gives us access to the comments and how you would save that, right? I will not show you the full implementation but you actually do something similar to the images, right? So you need to create your own adapter, like comments, upload adapter or something like that, that will basically take the content of the comments and will store it on your server or whichever way you want to store them, right? So, again, as you've probably noticed, if not, I will try to show it second time, so if I will add some comment here, this is very, very small, so maybe let's just add the comments here. So when I added the comment, I've changed something, right? When I've added comment, I think the autosave would not be launched, so maybe I'll add the reply here, and yeah, you can see it's not autosaving, right? Like we are not checking, this is not configured with autosave, this is a separate storage for comments that you would need to somehow sync to your server. Going back to the comments features, as you can see, you can reply, you can edit, you can remove if you are the user, but you can also resolve, and then we have this option for the, probably, the one that you know from the Google Docs as well. There is a common archive, whenever the comment is resolved, right? Like you just do not want to have it there. You can add this comment and you can archive this comment and you can reopen it, right? Like bring it basically back to the editor itself.

Okay, just checking out if there are any questions. Simon is adding additional things there, perfect. Okay, so we are done with comments. The real-time collaboration works with comments. Maybe what I will try to do here right now is I will close the right tab. We have something there and let's maybe bring a bit nicer contents to the editor. I'm done with this ASD, ASD. So this is our new content and yeah, everything should work as before. We can type here and everything works. It just a bit different version of the content. So you can just copy paste whatever content you would like to have. I've used the one from our full feature example of the editor.

Okay, so the comments are done. Real-time collaboration comments are working as well. So let's go to our favorite product manager and let's share what we've done here. And this is basically a bonus app, right? Like the PM is so happy that that was just great with what we've achieved. We are the editor heroes. Within one hour plus we've implemented something cool but I actually want to show you something cooler. I was not sure if I will have time. We've released recently some cool features that I wanted to showcase but we still have almost 30 minutes, 40 minutes. So I will just want to show you two cool things that are just, were just implemented by us that are really nice.

So basically the first one that I want to show you it's the slash command. So we have two additional plugins. They are part of our productivity pack. This is something that you can also use as a premium feature. It can be used via the license key that is basically offline. So again, when you have the setup of the dashboard when you will go to the, to your products to the standalone offline plugins you can use the license key from here. And we will do that as well right now. The slash command is probably something that you are, were aware well aware how it works, right? So it's basically as this cool feature to the editor in which you can just use the slash for the actions. So I've added the slash command here additional command that we need to add is mentioned that the slash command underneath is using. So we have the slash command we have mentioned and one additional thing that we need to add is the license key. So this property will say to the editor or highlight I can use the premium features the offline premium features from the license key. And again go copy that from your, from your dashboard from your trial and add to this add token file. I have already set it up in a different file. So I would just import that and place the comma here. Okay, so let's check how it works. We are still like session is there, right? We still have our content and the slash command is just basically you insert the slash and by default the slash command gives you the, the options, right? Like whatever plugins you have, there's always a default version of the commands that you can use. So you can also type, for example here, the heading, right? So this is something that we, we have here, slash, I think we also have the CK box, right? So we can, you can quickly open something to quite fast, go to the CK box. But what is also cool about slash commands, you can add your own call box here. Not sure if we'll have time but basically you can configure slash commands in a way that you configure some commands. It's gonna be available here in this list. And then you can just have some callback that does something to the editor or launches your own plugin. So this is something that I really wanted to show you. I think it's available for the, from the, I think 37 version, we are right now in the 38 version. So just one version ago, we've introduced this productivity pack with all with other features as well. Table of contents, document outline, just to name a few. So this is one cool thing that I wanted to show you and something that we've actually released yesterday but as an experimental feature. So it's still not production ready. And this is something that we've been working on is the more advanced drag and drop. So what you can see right now in the editor, we have the drag and drop system, but how it works? It's basically dropping inline, right? So if you will drag something and you would drop it the same for the images, right? You will basically get the inline drop, right? So you can drag it, but you can only drop it inline.

And what we really wanted to introduce to the editor and this is something that we'll work on is the similar to the notion drag and drop of blocks. Probably you're familiar with it. If you use the notion, it's basically the possibility to drag some block and place it between other blocks and notion did it really, really well.

As I've mentioned, it's still experimental on our side. So we actually released that yesterday as an implementation that it's available in the editor. But as we will see by the name of the plugin, it's still marked as experimental. So we have drag drop experimental plugin. So this is one that we need to import from the clickable package. As far as I'm aware, drag drop experimental, CK editor five, clipboard. So this is one that we have. And the second one is the drag drop block toolbar, which I will explain in a second. So this is drag drop block toolbar, not used anywhere. So we just need to add it to the drag drop toolbar to our plugins list. So we have two drag and drop plugins here, and let's go to our editor. And right now we just got new possibilities. So there is a possibility to basically select the entire block and we can drag and drop it between the other blocks. So for example, I decided that I want to put this content here. We still can have the inline. So I picked a couple of blocks here. So for example, I've decided that this will be dropped inline somewhere, but I also get the option to drop between blocks. So this is something that we wanted to check as well and I think it's possible. So, okay, it's still possible to drop inline, but I can still have it between the blocks. Additional thing that we are testing right now is basically having this icon, right? That's the notion is also having and basically use it as a drag handler, right? So I have this pillow troll. Whenever I select some block, I have the possibility to drop and drop of it. As you can see, we only have right now the icon on the select. So something that we'll probably be working on is have it on the hover, right? So hovering over the blocks, the drag handle is moving along. And still there are a few things that are not working that well. Another thing that works actually well is something I think I haven't seen in any other editor is that you can drag something and you can actually place it inside of the table, for example, right? So we've decided to pull the block like the whole paragraph and place it inside of the table, for example, here. So this is something that we are quite happy with as for the result, because it works quite well. And we'll be working on it in the following months just to make sure it works well. One thing that we would really like to achieve is placing in between of the lists, right? Like something again that is working quite well in other products is that you can pick a block and you can place it in between the lists, but we are actually renaming that to the paragraph, right? So it still experimental on our side. There are some things that we would like to make working a bit better, but if you would like to test it out, we would love to hear your feedback, see how the drag and drop is working and test it out in our editor.

Okay, so this is actually the last part that I wanted to show you. And we are half an hour before the time and the last thing that I wanted to say to you here is thank you. And we have an entire half an hour for comments and questions. And if you have anything, we would love to hear feedback from you. So feel free. I give my stage to you. Shimon, if you have any comments, maybe there were some interesting questions, we can start some debate. So feel free to start if you want, or maybe someone has a question, the floor is yours as well.

No problem, it was really nice to show it to you. Any questions you can ask about anything. Actually, curious how many people here like the Notion experience, something that we discussed in the comments in the meantime. But Notion has a quite unusual editing model, blocks, a lot of drag and drop, the toolbar that appears on the personal active text. This is something, I mean we use Notion at CKsource and many people love it, but also many people hate it even, they are completely lost in the content. So I'm curious, anyone who has any like interesting experience with what's in that, observations? So to start, maybe I will answer your question. So for me, Notion is pretty cool. But one thing that I quite dislike and I think they need to figure it out somehow is selecting. I pretty often get, I mean, I try to select something and something else gets selected or the whole blog when I just wanted to select a part of the content. So this is something that feels not really intuitive to me. But other than that, I guess I don't complain much. I think actually they've released some changes to their selection recently, because it's I've noticed it works differently. Yeah, the blog based model is tricky to get. They work a lot in over the years. Like I used Notion for I don't know, four years, even more, maybe not. And they were polishing the implementation. It was a question whether Notion use CKD to render the hoot, unfortunately not. But actually at that point, when they actually got most of the things right, because there's like hundreds of little details to polish when thinking about all these cases of rich text editing. So now probably they're not gonna switch. But yeah, it was a lot of work for them. But as you mentioned it's still a bit weird in some cases. Michał commented that notion is limited when it comes to editing text. So I guess, do you mean like math formulas or- Mathematics, right? Yeah, I guess so. I assume it's not a typo in text. But it's actually text. So do you mean the use it for math formulas or just full articles? What do you use it for? I think I've never used text in notion. I didn't even know there's a- I think it's not there actually. So it's limited. Is it like, maybe it's possible to add one formula or something, but I think you can have to create whole documents. I love that. It's so great. If you want to get a PDF rights, the only way to probably do it is use CK editor or use the Lattic, because it's basically just pure, pure text. We've got the inputs from words and we have inputs from Lattic. Inputs from Lattic. Yeah, that'd be cool.

Okay, anyway, like, thank you all for collaboration and being here today with us. One thing, like definitely shared the feedback with us. We would love to hear what you've liked or not liked during this session of workshops. So let us know what you think. Also this is again like, it was gluing, right? So it was basically just using basic editor features, but the whole editor is a framework. You can add your own plugin to the editor and for example, right in Lattic, right? And the convert that tech to the model, right? And then from the model to other formats and lots of other capabilities that you can implement. So if you would like to hear someday how to create your own plugin for the editor, how to work with the editor as a framework, leave us a note, maybe we'll try to create something, some workshop for that as well. And as of now, I guess, thank you. Have a really nice afternoon. It was a real pleasure and yeah, see you soon. Thank you. As well. Thank you, Victor.