Talking Drupal #372 - CKEditor 5

John  0:07  
  A weekly chat about web design development from a group people have one thing in common.

We love Drupal.

This is episode 372. CK Editor 5. welcome to Talking Drupal. Today we're talking about CK Editor 5. With Wiktor Walc and Piotrek Koszuliński . Victor has been working at CK Source since 2007 and has 19 years of experience in IT. If you're wondering what CK Sources is, CK source is the company that makes CKEditor you're already learning people. The company itself is located in Poland and currently over 80 people on board. over the 15 years at CK Source. Wiktor made a journey from a developer to a CTO to become later the President and CTO at CK source. In the past for many years, he was the maintainer of the CK editor module for Drupal 6 and 7 before CKEditor became the default editor in Drupal. Privately a happy husband father of and a father of two kids. Piotrek has been a CKEditor developer since 2012, when he joined a tiny company called CK source around 2013 and 2014. He worked together with Wim Leers, Drupal core contributor, and on integrating CKEditor four into Drupal 8. Over the years, his roles become a mix of development, product and team management. While the CKEditor 5 team itself grew to over 20 people at CK source rich again over 80 He's now overseeing the CK 5 project and over the last two years, interfaced with Wim Leers and Laurie Scola, from the Drupal side on integrating CK editor 5 into Drupal 9 and 10. Again, privately, a husband and father of two kids, both of you, welcome to the show, and thanks for joining us.

Piotrek  2:17  
Well, thanks for having us here.

John  2:20  
Everyone. I'm John Perkasie, Solutions Architect at EPAM. And today, my co hosts are returning for his 300 and 72nd ish episode. Nic Laflin. How are you sir?

Nic  2:37  
I'm doing great. Definitely looking forward to hearing more about CKEditor 5 and all the new things that are pretty excited about coming out.

John  2:45  
Awesome. Joining us for the next four weeks. You may know him as Creative Director at four kitchens and product lead of Emulsify. Randy Oest Randy Hillis I Randy's goal as a creative director is to make the online world as approachable, understandable and delightful as the real world. As the product lead Emulsify. Randy is creating a design token based theme for designers and developers to better work together by using shared tools. That sounds awesome.

Randy  3:23  
It is it's it's fantastic work. It's really nutritious and feeds my soul. So it makes me very happy.

John  3:29  
That's what we should all strive for in our day to day working lives. All right, let's move on to an update one of my co workers at EPAM pass along Drupal 10 global porting day is November 18, and 20th 18th through the 20th Excuse me, there'll be a link in the show notes for more information, but they are currently looking for mentors. So if you know a thing or two about Drupal, 10 and porting to it, follow the link and sign up to be a mentor. We can use all the help we can get. And now a word from our friends at Ned camp with their upcoming camp on November 18 and 19th. Thank you ned camp. I'm looking forward to seeing people in person again in New England. It's going to be great.

Stephen Cross  4:25  
Hey, the New England DrupalCamp is happening on November 18 and 19th in Providence Rhode Island. Net camp is a two day event. Friday is our training day with half and full day trainings. Saturday is our session day with 20 sessions and a keynote. Our keynote speaker is Colleen Clarkston. He is a remote work expert. And we'll be talking about career contributions and how they and how community can change your life and it did it for him. I training sessions training in sessions cover a variety of topics, including accessibility, Drupal, 101, front end decoupled career development, and much, much more. We also have some extras here. So if you come to Ned camp, we have a social event on Friday evening, hosted at oof, our event sponsor. We also provide breakfast, lunch, and an after party on Saturday. And yes, we have some T shirts. So come get your T shirt. We also have a contrib day on Friday, so don't miss that as well. You can visit Ned camp.org to register and learn more register for training and register for sessions. Hopefully we see you there.

John  5:42  
Let's jump into I know our newest our new segment here. I missed I missed his first one last week. But Martin is back with us to talk about meta tag.

Martin  5:57  
Thanks, John. Yeah, so this week, we're gonna be talking a little bit more about the meta tag module. It was actually previously covered as a module of the week way back in episode 70, which is over 8 years ago. So also mentioned in episodes 31 46 137 185 as as we'll talk about a little later, it's because it's that pervasive as a Drupal module. It really allows your Drupal site to provide meta tags on content that is going to implement SEO best practices and really maximize the online findability of your content. The module was originally created in 2009, and currently has supported versions for Drupal 7, 9 and 10. The most recent release was on September 29, of this year, and it's in use by over 375,000 websites. The maintainers are a renowned Dave Reed and Damien McKenna, both of which support dozens of high profile and extremely valuable Drupal modules. And really meta tag, the core capability is around allowing content editors to populate sort of common and sometimes uncommon meta tags, either, you know manually for each individual piece of content, or to have them filled out programmatically using tokens. Now, there are also a wide variety of sub modules to address different kinds of use cases where meta tags can be helpful. So to make it easier for social sharing, to verify site site ownership, so such as Google Search Console, and really a variety of other kinds of use cases. And really, for any, any site that considers SEO priority, which is probably most public facing websites, setting up meta tags should really be one of the you know, the first things that you think about in terms of really optimizing your website. So given how widely used meta tag is thought I would open this up to the rest of the group here. Does anyone have specific experience with using meta tag that they'd be interested in?

Nic  7:59  
Oh, yeah, I think I think we've all used meta tag. I think one of the really, one of the things that really makes it stand out is how quickly it's always an early adopter, both of new platforms, like if there's a new social media platform that has something specific meta tag probably has a helper module for that. But it's also one of the first modules to always update to the newest version of Drupal. I mean, I wouldn't be surprised if they were one of the first to get to do with 10. They were definitely one of the first to get to Drupal 8. So it's and it has so much in there that it's a good place to look for examples on how to you know, if you if you're maintaining a module, it's a good one to look out for examples on how to upgrade for the next version.

Martin  8:40  
And if you have any questions around using Metatag Damien McKenna's is often in the Drupal SEO channel in Drupal slack as well.

John  8:47  
Yeah, I'm always continually impressed at how extensible meta tag is, if there is not a module for it, it's easy enough to kind of build your build your own, or, you know, to be able to extend it to the way that you need to. But typically, it has a ton of features, right? You don't have to extend it, but amazing.

Randy  9:11  
I was gonna say as as a creative director, one of the things that I noticed is when you know a site is getting towards the end when it's getting close to launch and people start sharing links to like, production environments. That's when I start saying, Have you installed the meta tag module yet? Because I don't see any images. I don't see any meta information. Like can we get that in there? Can we start working on that? Making sure that our websites are being shared appropriately? Because part of a website's experience today in our overly social world is the link previews that everything has and when you don't have a good link preview, you know that? I don't know it kind of sold yourself so short.

John  9:51  
So I will share a funny and embarrassing story about New England Drupal Camp so awesome. This is this is the the ninth year, I believe of the conference. And just this year, we installed meta tag, or maybe configured it, maybe it was already there to actually show previews when people shared people's session links, like little preview card with more information on it. And, you know, shout out to Stephen Cross and Rick Hood for implementing that and doing a great job doing it. And, yeah, I mean, it does make a world of difference, especially in the in the world of of events.

Martin  10:40  
I think using the there's a schema.org meta tag module that is sort of similar in terms of really optimizing for voices and best practice there as well.

Nic  10:50  
Well, that makes me wonder is the schema.org meta tags module part of meta tag a part of schema.org? Because both Jacob and Damien have the same philosophy and sub modules. There's a million of them.

Martin  11:03  
I think that one is actually a standalone project, but

Nic  11:05  
Oh, interesting.

John  11:08  
All right, Martin, thank you for that. We appreciate your time. As always, let's jump in to our primary topic. Wiktor, I'm going to start with a really easy question, I think, what is CKEditor? And what does it do for Drupal?

Wiktor  11:31  
Okay, so, basically is CKEditor is a rich text editor. Sometimes it is also called WYSIWYG editor. Basically, it's a text box where you can create complex content without having to know any special markup like HTML or markdown. Usually, it offers features such as basic styles, lists, links, tables, and much more depending on the configuration. And as simple as it sounds, creating a solid editing experience requires years of work of a team of people. So basically, we have a huge content, creating rich text editor. And not just because we are poor, let's say developers, but this is like really complex topic to handle. And, yes, so what we do actually, well, because this topic is complex, this is why most applications, application vendors decide to rely on existing components such as CK editor to have this part covered. And this is what Drupal did. They did like massive research back in 2012, or something when they were choosing like the default WYSIWYG editor for Drupal back in times of Drupal 8, and yeah, the same story we picked up recently when, again, a Drupal core team are looking for a replacement of CKEditor 4 for because we are soliciting this editor next year. And, you know, based on the long story of cooperation between CK Source and Drupal, there was like the only good decision that could be made which was like introducing CKEditor 5  into Drupal 9 and Drupal 10

John  13:19  
So CKEditor is is the WYSIWYG or What You See Is What You Get editor for Drupal. Just out of curiosity is where else is CKEditor used. Is it used in other CMS is that you know of,

Wiktor  13:35  
for example, typo, Neos, CMS. I think there's AppleSoft CMS as well. There is a nice app called three modes are really complex note taking up. Basically plenty of projects

John  13:52  
it's all over the place. It's not like it's just specific to Drupal. Yeah,

Wiktor  13:57  
I've got to find the size of the community. Drupal is probably the biggest one really 1 million websites, much more users really, really impressive community.

Randy  14:08  
So I've got one follow up question to the CMS question. CK editor in addition to being kind of like baked into content management systems like Drupal, is it available for like decoupled sites? Like if I've got Drupal on the back end? And I've got like Gatsby or a next front end? Am I able to use  CK editor? If I want to add an editing experience to those sites?

Wiktor  14:30  
Yeah, that's that's a good question. Just Just recently, we partnered with strappy to provide an integration for strappy and yeah, it's like a Refresh Project. Another example of like non standard usage of CK editor is using CK editor as a headless platform. CK editor you might consider CK editor not only as a ready to use rich text editor, but also as a rich text editing framework. So, because of let's say a highly highly decoupled architecture, you can take just the editing engine and write your own UI, for example, and this is what some of our customers did. In commercial platforms. If you use maybe Zendesk support. The editor there is actually CK editor but used use just the engineers use, the whole UI has been developed by Zendesk development. Okay.

John  14:30  
That's also

Nic  14:47  
Piotrek, since you mentioned in the in your intro, that you're now overseeing the CKEditor 5 project, you might be qualified to answer this question, what, what are the biggest differences between CK editor 4 and  CK editor 5, like, what can we look forward to.

Piotrek  15:46  
So on the product wise, they serve the same purpose. So they are both WYSIWYG editors, similar capabilities, although CKeditor 5 here has much more features, like rich features, especially in the collaboration field. Basically, the platform now allows that. So the biggest difference is actually the, the framework itself. And while the name may not indicate that, because we just changed four into five, and it seems like an incremental build is actually a completely new project. We around 2015, we decided we have to start from scratch, which was a tricky, tricky decision. But we realized that in order to enable development of some features that we we knew will be the next big hits, like collaboration, real time collaboration, like proper revision history. We knew we have to redesign the basics of it. And basically, that, that's it. So yeah,

Nic  17:01  
so you guys have been working on this since 2015. So it's been seven years. So this isn't, this isn't a fresh project. This is fairly mature in itself.

Piotrek  17:10  
Yeah. So we had the first stable release around 2018. I think. So it's still like three years, I think the front end part of the world. It's, it's quite a long project. And it's always funny for me, like, everyone uses text editors. We all think we know how they work. But the domain is very deep. And it took us it took us a lot of experiences. I mean, if we were to build this is a fresh text editor developers, it will be crazy. But of course, we we were able to use the experience from rebuilding the previous versions.

John  17:52  
It's funny, I imagine that even you guys with so much, so many years of experience, never really know how a text editor is going to work. Because like people use things differently, right? I always I'm always impressed when I watch people like use their phones, and they do stuff. And I'm just kind of like, I would have never thought anybody would have used that thing that way. And I imagined like a text editor is probably that like magnified 100 times.

Wiktor  18:23  
Yeah, yes. I can say one anecdote from DrupalCon. Prague, I believe. I met one user there who showed me his CKEditor setup. And I would never imagine that such setup. Anyone coming with such a setup? Basically, that was CKEditor with only two buttons, subscript and superscript. Because it was, it was used to edit headlines. So he didn't want to have any kind of formatting, but subscript and superscript was used to in brand names. So like you mentioned. So yeah, for me, that was the same. Oh. Well, yeah. So and

Randy  19:12  
you mentioned rebuilding, like CKEditor, like five, like, kind of like going back to the root and looking at it. Were there any like usability kind of things that you did? Like, obviously, like the code and the the usability of the code and adding plugins and stuff is something that you've architected well, but like, did you look at like how users use this? Did you make sure that it was okay for people to have just a subscript and superscript button?

Piotrek  19:40  
I just we didn't go to that specific use case. Because it seems crazy and crazy, but of course, sense. But we did revisit the end user features as well. So we saw like Tickets are free indicator for I accumulated over time, a lot of functionalities. And they were added in a very, like developer focused way. So if you need one more attribute in HTML, just add one more inputs into the dialogue. And after a couple of iterations, you have 20 inputs. It's, it's awful to create the link. And so we basically took this opportunity to revisit the UI, build it from scratch, as well. And, yeah, we started with the basics and started adding them more, but retype we knew that every time we add something, it's gonna stay with us for a long, long, long time. So we also had the more conservative approach now to just adding stuff. And this is often a promo for, for framework developers, and that you are asked by so many people, especially when you have such big communities, about specific use cases, and you're tempted to just add more and more and more, and you have to be receptive to just, you know, draw a line somewhere and give the developers prestige potential to extend the base build with their features. And we just took that route this time

Nic  21:27  
Yeah, I mean, that that's definitely been a theme of the show for the last last month or so we had a discussion two weeks ago about a smaller core and had deciding what goes into Drupal core and what's part of it and what's part of contrib. And, you know, even though CKEditor is kind of a company behind the system, and whereas Drupal is fully just an open source, community based project, it's the same kind of thing, like how much can you maintain? How much responsibility can you take on for maintaining stuff? And it sounds to me like one of the one of the biggest differences between 4 and 5 is the plug in system for five? It sounds like you're making it easier for people to add on those little flourishes that they want, rather than taking on all that responsibility internal to CK Sou rce. Is that accurate? Or? Or is it a little bit more nuanced than that?

Piotrek  21:30  
I think so. So. So the actually the aritechture that we built for CK Editor 5, it's, it adds a lot more abstraction to what what Rich Text is, in CK Editor 4 times II, any developer that was building a plugin for CK Editor 4  had to interact with the DOM, the what the basically the user sees in the editor, what the browser displays. And this is there are a lot of quirks to that. There's a lot of domain knowledge that you have to have to be able to implement stable solution. And what we did we build an abstract data model for it and a couple other layers and tools. That makes your life a lot easier. As a developer of a CKEDitor plugin. They also, they basically reduce the complexity of the plugins, they remove the complexity to the core of the framework.

Randy  23:34  
That's, that's awesome. I love it whenever things are easier to use, especially if I have to go in and code it. Now. That's, that's less ditch. So now, this makes me think of like, what, you know what CKEditor five is bringing to Drupal. And I'd like to like, what do you think are the biggest benefits to Drupal, bringing in CKEditor? Five.

Piotrek  23:58  
So, if it would start from like a no text editor, Rich Text Editor inside Drupal, I think the biggest benefit is having a stable partner stable dependency long term. This is not only common in the JavaScript world, it's it changes right now. So there are a lot more libraries that stay with us for a longer period. But especially in the past. They were new libraries appearing and disappearing after a couple of years. And for Drupal for projects of this size and the Committee of the size that put so much work into integrating with text editor because it isn't as like, just drop something and it works. Right It was a lot of work. Having this safety is I think, really, really important. So that that's if you look like from perspective and no texting editor and compare Secatur for I think we cover some bits already. But if I were to rub those things, I think this would be content editing experience. And this is the engine that we that we brought. And they together like it's a different platform right now.

John  25:20  
Is cuz CKEditor 5 from you talked about editor experience, does it provide a better like media handling experience? Like with Drupal or or in general?

Piotrek  25:34  
Wiktor want to take this one.

Wiktor  25:36  
Yeah, sure. Yeah. So basically, the whole g4 media integration has been worked together with signal five. So currently, you can actually operate on inserted media, straight inside CKEditor. So we no longer have this overlay window, you can set a caption out text, align media directly CKEditor. And it's basically actually one of the examples of how we reworked the whole content editing experience in CKEditor 5

John  26:10  
Cool, what are some of the other improvements to the content editing experience that people might notice in Drupal if they if they upgrade from four to five?

Wiktor  26:20  
Okay, so this is quite extensive. Basically, the whole UI has been heavily simplified and modernized to provide a better user experience. So we replaced dialog windows everywhere that previously covered so the content you worked on, in favor of panels, that display next to the selection. So for example, in dialogues have been simplified. Inserting tables is simpler, you no longer have this dialog window with I don't know asking you to specify the number of rows or, or columns, you have dislike, fancy quick table, let's say filling. And then thanks to getting rid of dialog windows, also, the editor is now much more friendly for mobile devices. In case of tables, we added rows and columns selections. So users can now copy rows and columns, as well as format parts of tables easily. It wasn't possible in CKEDitor 4 before, the size drop down has been worked to let you present nicely how which specific style will look like. Although, as small disclaimer, I wasn't able to use Drupal 10 beta two, for some reason, it didn't work for me, but I guess it will be fixed in the next version. So I talked about media widgets, already. So but personally, what I liked the most in CKEDitor 5, is something that was not shipped yet in Drupal, 10 and nine and 05. But I saw that there is already ticket and set of patches. So it should be coming soon. Basically, it's a feature called Alpha formatting. So if you ever used Markdown syntax, you'll find it really handy. Because it allows you to format content in CK editor without having to press any toolbar buttons. If you start a line with a hash or two, you can create a head you know, start a line, and asterisk great lists, use any kind of inline formatting CodeBlocks using just you know, by typing some text sounds like shortcuts almost. Exactly, exactly. Shortcuts. So basically, you can actually write content without any toolbar at all. So good,

Nic  28:37  
and does it do so there's a project I use for taking notes with clients, sometimes in documentation called Hack MD. It's website that you write everything in Markdown, but has a lot of stuff added on top of it. Like, if you start making that list with asterisks or dashes, and you hit enter it it continues the list does CKEditor five do the same thing? Or like if you hit ENTER twice? Well, now you're just typing normally, again, you're no longer in the list. So you can't go to five, add those types of improvements to

Wiktor  29:06  
Yes, of course. So basically, if you start a list and you press enter, you continue the list. What's more, you know, you can create a table inside our list item and things like that. So some markup is really complex, right? I have many times problems with nested lists that contain like, two blocks inside a single list item. So this is really painful for me. So in CKEditor it's really simple to create content like that.

John  29:31  
So now I have two questions. Go ahead, Randy.

Randy  29:35  
Okay, so just like thinking about like, what this empowers like being able to start with like hash hash space and have it be a heading to and Markdown is great Markdown is I think all tech should be written in Markdown, but I'm strongly opinionated. But that like makes me think like, what if we like lead off a line with like a slash and added slash commands to CK editors? Like, is that on the horizon? Being able to hit slash and then like insert a template?

Wiktor  30:04  
We are working on it as we speak.

Randy  30:08  
All right, well, listen, we'll wrap up the podcast early, you can get back to that, because I really want that feature. Thank you so much.

John  30:14  
So along along those same lines, one of my questions is markdown. And forgive me for not knowing this, but I'm just curious, is markdown something you can use with CK editor? To CKEditor? Do the conversion.

Wiktor  30:29  
Okay. Yes, yes. Basically, I use yeah, thanks to the architecture that we have the separation. And relying on our internal model, we can produce any markup you like, we have a dedicated plugin for markdown. So CK editor can output markdown instead of HTML. However, I will surprise you. But we still recommend using HTML instead of markdown. So I couldn't revise, I couldn't go ahead.

John  30:59  
I was just gonna so I couldn't write in Markdown and have it converted to HTML, right?

Wiktor  31:05  
I mean, we've CK editor, you can use rich text editor to produce markdown without even knowing markdown at all. Because you can use you know, those buttons, toolbar buttons to create these links, and CK editor will we output markdown? You can use markdown shortcut syntax directly inside WYSIWYG area to, you know, do not have to use toolbar buttons and use this kind of micro experience when editing.

Nic  31:34  
So wait, sorry, sorry. You're telling me. So it sounds to me like you're telling me in CKEditor 5, the input, the storage and the output are separated. So you can input as markdown output however you want and vice versa. So you're not storing. So you can convert like someone can input in Markdown output an HTML or input HTML output in Markdown, is that what you're saying?

Wiktor  31:59  
It's not that simple. Because too, I was saying I was referring to, let's say, some kind of keyboard shortcuts that you can use when interacting with a WYSIWYG editor. So directly inside the editing area, if you type hash at the very beginning of the line, then you can make it a heading. When it comes to pasting markdown inside into CK editor, for example, from like, an external editor, we've been working on it as well. It's not yet available, but we're working on it as well,

John  32:32  
that makes that makes complete sense. So it's basically just as CK editor is a tool to help people enter the content, and it's providing shortcuts and easier access to the formatting options for those.

Piotrek  32:47  
Yeah, you can think about them as productivity helpers, actually, exactly, I suppose for markdown, so we use GitHub for maintaining the CK editor, and GitHub. Basically, it's based on markdown when you read comments or issues. And so I know markdown really well also works on this parser on converting that to HTML displaying in CKEditor. And I still have problems with using markdown in some more complex write ups on GitHub. So we at some point, we developed an extension for from Firefox, that enable that replace the GitHub default editor with CK editor. It still looks like like it helps you later. But it actually it's a WYSIWYG editor. And we all love it. I mean, it's such a productivity boost, at least for me. I can like imagine getting back to markdown, as I know, many people prefer markdown. I have to do.

John  33:55  
So my last question here, and then I'll we'll get back onto the, the the agenda here. I recently saw a issue on drupal.org. From I think it was from Wim, I think he had he added it about linkit module basically being included in core and obviously working with CKEditor 5 presumably I mean, it works with four but you know, working with CKEditor Is that something that you guys are involved in? Or is or is the linkit functionality kind of like Drupal specific and like not really something that you you guys are familiar with or focusing on.

Piotrek  34:45  
So at some point, if I remember correctly, we were supporting when the IRS and Larry Scala with some, some ideas how to implement that feature. How to extend the core link plugin or ckeditor. But they basically have right now so much experience with ckeditorthat they can easily continue that work. And we I don't know, actually, what was the status right now? But yeah, I'm often, like positively surprised how, how proficient they became it's, it's really amazing.

John  35:29  
Yeah. So we'll have to, we'll have to tell Martin to do a module of the week on linkit, if we, if we haven't recently already, because it kind of improves the linking experience within Drupal quite a bit. So it was good to see that that like integrated pretty seamlessly into CKEditor 5 and linking within within there.

Nic  35:57  
Okay, can we take a step back for a second and talk about kind of integrating with CKEditor at a higher level again? So we've mentioned the plugin ecosystem for ckeditor, a couple of times in the show already? Can you answer to kind of two things? First of all, like, what kinds of things are you looking for a plugin for for CK editor versus just installing CKEditor? Out of the box? And if you're looking to write a plug in yourself, what are you reading that in? Is it TypeScript? Vanilla JS, is it something else, like what the plugins look like in CKEditor?

Piotrek  36:33  
So I will start from the second question. So as we speak, it's still it would still write them in JavaScript, usually. Because we CKEditor doesn't yet offer typings for TypeScript. But we are working already. And we're like halfway done with porting CKEditor 5 to TypeScript. So early next year, we should be delivering official typescript for the entire API. And I know now this is like the highest rated issue on our issue tracker, provide typing. So I know developers will be happy and we are happy as well. It's a it's a massive improvement for our experience as well.

Nic  37:21  
Can you tell us a little bit about what kinds of things you might look for a plugin for like in Drupal? It's like you have some functionality, you look for a module sometimes, right? What kind of functionality? If I'm, if I'm, you know, using Drupal? What kinds of things should I go like, Oh, I should look for CKEditor plug in to handle that. Or I should write one myself, like what kind of functionality, features kind of should make me think of a plugin? And what kind of plugins exist already, I guess.

Piotrek  37:53  
I mean, everything that works inside CKEditor, that should be a plugin for CKEditor. At least, yep.

John  38:04  
Those actually actually have. I've actually have a great example that Wiktor came up with, or illustrated earlier when he was talking about what's in CKEditor 5. So a couple of weeks ago on the show, I think I did a module the week about a table plugin for CKEditor 4, I guess it was at that point, because we needed extended table support. So like, there's a Drupal module, two of them, actually, one that provides extended support for tables, provides new toolbar buttons for for editing, manipulating tables, and then the other one was the one to select multiple fields in tables to be able to edit multiple cells at once. Right. So sounds like from what you guys said. Those were previously plugins that were added to CKEditor 5, but they're now maybe included as part of CKEditor 5. Is that accurate?

Wiktor  39:11  
Yeah. So tables, tables have been heavily enhanced in CKEditor five. So that might be the case. However, you have to be aware of the fact that Drupal, don't ship all the core plugins that CKEditor offers. So there are some plugins that were intentionally skipped to not let's say, overload, secure Drupa with with plugins, so there are things that have been also available in secret before but were only available as country plugins, contract modules. Things such as, you know, font color, background color, and more features related to formatting like selecting the font family font size. Those were available as contract modules, if I remember correctly, and Does the same case with CKEDitor 5. Also, in case of CKEditor 5, we have a plugin called word count that has not been included as well, in Drupal. So you may look for a contract module for that. Another plugin that has been shipped with CKEditor 5 mentions. So basically a plugin that allows you to mention users directly in the content. So yeah, if you are looking for those functionalities start writing a module and have as module of of the week.

John  40:36  
It's interesting. One more question, I have to ask, Has anchor link been included?

Wiktor  40:44  
Not we haven't created such a plug in yet for 5. And we should do it next year. So yeah, we are in the middle of the road. And we've CKeditor 5 started like seven years ago, we are in the middle of the road.

Randy  41:01  
So that's awesome. So kind of going off of that, like what's coming down the road for CKEditor 5, what are your favorite improvements that are coming coming to CKEditor 5

Wiktor  41:14  
That's a tricky question. Because we actually don't know, we rely we build our roadmap based on a feedback coming from users from customers. So actually, the community has a lot to say on what we will work on, for sure, we'll be working on something which isn't that related to CKEditor functionality, but it's rather related to building community around CKEditor 5. Ckeditor 5is heavily complex, rich text editors. So we have a lot to do regarding our documentation, still to simplify the things that are currently complex to create much more tutorials to devote much more time on answering community questions about how to build something, to basically boost the development of contrib plugins to 05. We we made like, one mistake years ago, CKEditor 5, we told you that the current JavaScript ecosystem will actually guarantee us building marketplace around CKEditor, five, you know, NPM, and so on GitHub, everyone is free to publish his work. But that's not the case, actually. It's really hard to find valuable plugins on NPM. Because there is a lot of lots of things, unstable things you cannot find like an easy rating, what's, what's usable, and what's not. Also, plugin developers don't get enough like visibility and reward for creating something valuable. And we've CKEditor, four years ago, we built our own marketplace. And it's, it was great. I mean, it was based on Drupal 7, we actually managed to gather over 300 contrib plugins for Cedar five secure for, like creating by ourselves only 80 plugins. So the community actually gave like four times more than than we gave to the CKEditor plug in ecosystem. And this was thanks to having other ticketed marketplace, you know, people could vote there, add comments when something didn't work, etc. Finding vendors could, you know, add some screenshots and, you know, somehow get more visibility. We also had, like, you know, monthly blog posts where we promoted some of those plugins. So it's, we stopped doing that. And now I regret that we didn't do it. So we'll be slowly getting back to those practices. Next year.

Randy  43:59  
So interesting. So yeah, so improving documentation, training guides, you know, bringing back that marketplace. Those are all exciting things to come in the future of CKEditor. Yeah, awesome.

Wiktor  44:13  
Yeah, we're gonna, the community has been super creative. For for many years, for up to four. It's been like, you know, even from the commercial standpoint, we have like commercial customers coming to CK source, looking at CKEditor and asking us for some really niche functionality that we of course, didn't deliver, because it was like, quite interesting use case. But then I just googled that functionality for CKEditor 4 and I found it that someone has created it. So now, this is where community and you know, commercial companies actually help each other. Because if we have like a nice way to expose those country plugins, we can actually help commercial companies to give back something to the community. And actually, somehow promote them to. So nice, nice way to contribute between those two worlds.

Nic  45:06  
More. Yeah, that's also one of the kind of recurring themes of this podcast. So last probably two or three years really is, you know, one of the things that I think organizations like CK Source can serve for their open source community is a conduit for funding and sourcing, because, you know, one thing is like, these big companies might need that functionality. And if they found that plug in directly, right, they would just use it, right. And there's not really a mechanism for companies in general to support individual contributors have a particular module, whether that or plug in whether that's CKEditor, or Drupal, but if there's a company behind that, that's that's the kind of thing where you can provide your you have the taste of the community to reach out to that plugin maintainer, most likely, and provide something for the work that they've contributed back to the bugging community. And that's definitely something that we've been talking about a lot on this podcast. And I think in a lot of birds of a feather that camps and things because it's like, how do you get the giant corporation as using or utilizing maybe it's a better word, utilizing what people have contributed back, and make sure that those resources are being used to help the community make sure that burnout isn't happening, or take care of issues that was really hard to find an open source like project management, or sometimes design, you know, there's a lot of things that are difficult to find in this community. And when you have, you know, when you have an organization like CK Source behind it, sometimes you can help funnel that stuff back in, or like you were mentioning, like, building the ecosystem around promoting those plugins. That's, that's something that's really hard as a community member to organize. But as you know, the maintainers CKEditor, you can have that if you have these companies providing resources for specific functionality, then you can pour those resources into that into the I don't know what you'd call it, but maybe the marketplace, I think you said she said you called it but you know, that's something that you as the company can really put towards. And it helps everybody helps you helps the users and helps the people contributing because the work can be found.

John  47:26  
So along this same path, right? If you go to the CKEditor website, you notice that one of the tabs in the top of the menu is pricing, right? And as a Drupal user, silly me, I just kind of thought CKEditor was like open source and free. And I don't know, I guess I assumed that you guys got paid by magic pixie somewhere? I don't a poor assumption on my part, right. I'd like you to talk a little bit about that, that ecosystem. And you know what, you know, obviously, there's an open source version, and it appears, and then there's kind of the ability to have a custom version or a support tier. Can you guys talk a little bit about kind of the the paid plan for CKEditor? And what that includes, and why am I Wanwan.

Wiktor  48:25  
So basically, not all the companies can afford to use GPL licensed components. So they prefer to have a commercial license for the legal department to sleep well. So that's one of the reasons why customers choose the commercial license. The other one is have access to professional support. Many times our customers are actually writing custom plugins deep integrations, and they value the help of the core Editor team. Another reason why customers decide to go ahead with the commercial license are the premium features that we have for CKEditor  5, we actually offered the same set of premium features for Drupal users. We just created CKEditor 5  premium features module for Drupal. It has had actually our release of 1.00 RC yesterday, and not yet super stable but allows you to let's say, get a taste of the functionalities that you can add to Drupal. And let's let's take this module as an example. So with this module, you can enhance Drupal with features such as comments, Track Changes, real time collaboration. You can have notification about changes in the content. So whenever someone has a comment or makes a suggestion in the document, you can get notified via email or you can you know write a custom notification mechanism to be notified on the slack For example, this module also comes with export to Word and its export to PDF. And it also ships, much more sophisticated revision history, allowing you to see changes directly in the content, compare several revisions at once, and things like that. In the future, we should also introduce their grammar checker spell checker, so called intelligent X predictions. So smart compose, are we want to call it as well as math formulas. So something which, let's say educational institutions might seem handy. So basically, we have, you know, a set of premium features, which allow us to run the business to, you know, have this like, open source branch. And, you know, if you look at, if you look at all the rich text editors on the market, you will see that CKEditor actually offers the widest set of plugins on the market, comparing to all the other rich text editors. So, you know, somehow, we managed to come up with a business model that is really generous for the open source community, and at the same time, gives us space for those premium features to continue running.

John  51:16  
And full, full disclosure on those premium features. And this is actually a great a great benefit. I think, if you were to install and use the CKEditor premium features module, you could actually get a 30 day free trial to try it out. Right? Because in order to after the 30 day trial to continue using it, you need to actually have that license key for for that module to continue working. Right. Yeah,

Wiktor  51:45  
that's correct. Well,

John  51:47  
I think it's, I think it's nice to have you guys to offer 30 days there, because some companies are like, Hey, here's a five day free trial trial. And like after that you're kind of on your own or, you know, have to pay us. So 30 days is a good long time to be able to figure out if it's really going to work for you. And to see all the benefits of it.

Wiktor  52:07  
Hope that, you know, some some Drupal users will find it handy because it gives you an opportunity to have this like Google Docs like editing experience, and collaboration workflow without actually leaving Drupal. And you can have like full control over your data. Because even within collaboration that requires, let's say, central collaboration server to propagate changes between connected users, you can get the on premises version of that for self hosting. So basically, you can host everything in your premises without relying on our cloud.

John  52:44  
I'm not gonna lie, if you're listening to this right now and thinking, Hmm, that could be cool. Go to the module page, the link is in the show notes and look at just look at the animated GIF on the module page. Like literally commenting, putting in notes about like, hey, edit this text, add this image, like very cool features. I'm sold, if you couldn't tell.

Nic  53:14  
So, so you mentioned this plugin. You mentioned working with the Drupal core team extensively. But I'm curious in general, like when you're when you're thinking about supporting a community like Drupal. In your maintaining your own project, how does that kind of work? Do you? Do? Obviously you do because we just talked about it. But do you write custom modules? Do you prioritize some issues to help, you know, a specific issue that communities have been having? Do you just participate in the Drupal issue queue? Is there a Drupal slash do get on Drupal slack? Or is there like a separate slack? Like how does that collaboration work out? If somebody's looking to contribute to CKEditor or Drupal? Or you know, the Drupal integration? Is that you? Where's that happen?

Piotrek  54:04  
So I guess we just mentioned that if prioritize a lot of things based on the community feedback, and of course, Drupal communities, like big part for community as well, right now, many of Drupal, developers will interact with CKEditor. And they will either bring feedback and this is really like feedback coming from really experienced people. It's not common for, for, for instance, front end developers to have that much experience with how content editing works, what happens in the content later on how to maintain a semantical content. And so this is a really valuable feedback for us. It also helps us to prioritize some things of course we haven't liked in limited think of it It is ourselves. But we try to like find the right path to unblock Drupal, and to but everything that we actually do, it may seem for Drupal, it also really beneficial for entire ckeditor community. One of the biggest features called general HTML support that was meant to enable editing any kind of HTML inside CK editor that we developed together with Win Lears in glorious color, based on a lot of their feedback. It's widely used by ckeditor community, not related to the report. So that that helps like that helps us to create a better product that's from day one, when we ship a feature, we have a lot more feedback right now. And also, I'm sure that a lot of Drupal developers will, will be implementing their own contrib modules, they will be building third party ckeditor plugins as well. And again, like so it's a bit different for like Drupal community and ckeditor community here. Because it typical Drupal developer spends a lot of time with Drupal, like many years often. And for ckedit is unfortunately not this. This way. Usually a JavaScript developer has to has a project to that uses some kind of text editor, they choose CKEditor, they inter integrated, it takes I know, a week, a day, or a month a year. But oftentimes, it's a short period, and they don't have the opportunity to get the main knowledge about text reading about CKEditor. And it's hard for those developers to come up with a stable long term maintained contrib plugins for ckeditor and see Drupal here helps us a lot. So and those those things, many of those plugins that the Drupal world will, will contribute, they will be useful for the broader ckeditor community. So it's really, really valuable cooperation for us. And we may help.

Nic  57:34  
Yeah, it's interesting that you bring up the longevity as something too, because I mean, even if an individual Drupal project isn't that long lived, you know, the Drupal community, in the Drupal project itself is so there's, there's that long term collaboration and, you know, part of it sounds like part of the issue too, is the kind of fleeting nature of jobs. I mean, there's that was a joke, like JavaScript frameworks, news to bring up, you know, 10 springing up a year and, you know, tend to go away. So, you know, if even if there's a JavaScript framework that decides to land on CKEditor. You know, the question is, how long is it going to be until the next new framework springs up to take its place? Right? So yeah, that's, that's definitely interesting. perspective.

Randy  58:24  
So I want to I want to go back around to something that was said, while we were talking about the, like, the premium tier of CK editor, and it was mentioned that like, you can host your own, like on site server for, like, you know, co editing documents. And that makes me think about, like security concerns with CKEditor. And I'm wondering, like, how do you handle security concerns around CKEditor.

Wiktor  58:48  
So basically, we just some extent, we are not yet typical corporate companies. So we don't have yet any certificates in place like ISO 27,000 01, or SEC two or things like that. We are aiming at them to receive certification within a year or two. But we are doing quite well, already when it comes to first, testing the code to make sure that it's secure. Basically, ckeditor5 itself has over 20,000 tests already and many of them are actually aimed at, you know, checking whether let's say the output of CKEditor is safe. And at the same time, we try to hire the best people on the market. One of the one of the questions that we always ask is, are related to security. So basically, we have quite a quite good team specializes in that we feel a lot of responsibility for delivering actually a software component. Imagine that if you know CKEditor is insecure basically that sends off applications are then immediate insecure. So we do our best to ship really secure component. However, having said that, sometimes security issues happen. And we have like a really decent process around that. We always are very transparent about security issues. So we request CVE. Always. So there is a nice, you know, transparency over security issues in ckeditor 5. We always try to, you know, solve the security issue within 30 days, it may seem long, but we always try to verify that there are no similar issues in the code base related to the one that was reported. So it takes us a bit of time to make sure we fix the issue properly. And, and here goes, I would say something very special. Drupal is the only vendor with whom we actually coordinate our releases. So yeah, so we want to make sure that we you know, hit the Drupal security window with singular release to make sure everyone's happy. Fantastic, isn't very

Nic  1:01:14  
much appreciated. Yeah, the the the out of cycle security updates. So, I mean, they're sometimes unavoidable. But those are always one of the nicest things about Drupal is, you know, Wednesday is security release day, you can block off a couple of hours, or at least, if you have a meeting there, you can let them know, like, hey, that's during the release window, I might need to take care of some stuff. That's, that's a huge benefit.

John  1:01:41  
So let's talk future scape down the road, in the in the future of CKEditor. You know, what kind of improvements enhancements can we expect in the future? And then I'll answer that. And then I have some questions around how features get added to ck, editor. But overall, what do you guys see as as future improvements and enhancements?

Wiktor  1:02:08  
What would you like to see in CKEditor? In the future? There you go.

Nic  1:02:14  
Dictation.

Wiktor  1:02:18  
We had a actually a prototype and this is something I'm happy that you mentioned that I already mentioned about building community I am CKEditor. Five, there is one more thing I would love to open, which is we call it internally CK labs. Basically, we have a very creative software team at CK source. And you know, just give them like, two days hackathon. And they come up with like, several prototypes of cool and fancy plugins. So we have actually dictation somewhere hidden in our private repositories made for ckeditor 5, we have like mermaid diagrams, slash comments, it has been like months ago developed as a prototype, we have like drag and drop UI for drag and dropping blocks. plenty, plenty of hidden games that you know, haven't had a chance yet to be published. So yeah, we would love to have a space to showcase those functionalities. Without like the full commitment that had is a super stable, we're gonna maintain it for years, just to like get like the feedback from from the public, if there is an appetite for for such functionality. But going back to your initial question, I already mentioned that, really, the CKEditor roadmap is really, really community driven. This is something that we learned over time over the last years that we started growing nicely, once we stop thinking that we can actually decide when the markets where the market should go, we started simply listening to users to customers. And it just developed what they ask, and it works. But

John  1:04:12  
I kind of I kind of asked that question, knowing that you were going to answer it that way. Because I've heard you talk about that in the past. And I think it's, you know, I think it's great. I think it's great to see where users are going and be able to be agile enough to react to that and get something out that can help them. Let me change, twist, modify my question a little bit. I'm curious with the premium features. How do you guys determine what is going to be a premium feature that people may have to pay for versus what ends up in kind of the open source or community version of CKEditor?

Wiktor  1:04:54  
That's a tough question. Basically, we try to and offer the basic functionalities. I mean basic, the really sophisticated functionalities that require a lot of efforts, they became become premium features, but was the, let's say, first logic behind what we separated as a premiere feature and as a basic feature. But we, we are constantly thinking about how to shape our commercial offering to not hurt the open source community, but at the same time to incentivize Centrify some of the commercial companies to actually start paying for the software. Because you know, there there are companies like making billions of dollars and still using open source without giving anything back, I know, a single pull request. And, and I personally consider it a little bit unfair.

Nic  1:05:57  
So as we were talking about future options and security stuff, it made me think of something that I've been dealing with a lot and a couple of projects recently, and that is native web components. So one of the possible features of native Web Components is custom HTML elements, which is perfectly, you know, issue most back. I'm, I'm curious if you guys have any plugins to handle, I mean, it. I imagine. I imagine handling HTML in general, and an editor is complex, I imagine when you add the ability to have any HTML element that you can think of as an option makes it immeasurably more complex. But I'm curious if that's something that you guys have done any work around or thinking about, like, you know, the ability to filter or like, like, for example, I can imagine a scenario where a particular client has Native Web Components prefixing, all, you know, with something, and the ability to say, hey, we will allow native web components that are prefixed with this, but nothing else, right. Because on some level, you want to make sure that your your validating was putting in, but I'm curious if you guys are doing anything with native web components, on your end.

Piotrek  1:07:13  
Okay, so. So there's two parts to that. On our side, actually, one is being able to read the input and output any HTML tags, including custom custom HTML elements. And this is already widely supported. This is also a Drupal users with the Drupal image element, or media. These are basically things that use custom HTML tags. The other part is to is what happens with that markup, this entities inside CKEditor. And this is where it gets tricky. And the so the easier, the easier use case is where this eliminates like a self contained like an image, and can be represented as a kind of object that you cannot regain only delete type before type after. And then we, we don't have to know a lot about it. But we still have to know for instance, in which parts of the content in can exist, where it shouldn't, whether it's an inline thing or a block thing is a very important differentiation for us. Whether it's like it can exist in the text, or whether it should exist between blocks and for a single bit of content it's not possible to exist in both both places without seriously affecting user experience. Interesting. So for for this simple even example, object thing like image, a custom custom image thingy. There are already some some bits that you have to let us know that secret or know how to handle that element. So it gets even more complex when you really think about the lemons like that that rap text or rap, like block a lemon things. This This is even more complex than should enter be allowed to enter key the allows to split those elements for instance, or are there other like containers that should never be split by an enter key and this there are different lemons that either should or shouldn't be, depending on your specific semantic, which in case of customer lemons is completely driven by your use case. Yeah. And so up to some point of complexity and your use case complexity, you can either use the general HTML support feature that we develop, because it allows to allows you to reduce the renewal element and give us a bit in a bit of information about its semantics how it should be handled. Some typical editor features like should it be allowed to be split? Or is it a block or inline thing? But it's, at some point, you have to develop a custom plugin. And then actually, it may become a lot lot easier because you can, if you if you know, the basic concepts of CKEditor, five, you will know to what kind of model LM and for us, you should convert this because basically, there's a concept of conversion between the input or output of the data and what's inside, like, our custom data model. And you know, what's the general semantics of the element, you'll be able to choose the right model, kind of item. And then you can build a lot of functionality, custom function functions based on that.

Nic  1:10:59  
I just have to say, you just blew my mind, though. I've never thought about like the difference between like, if you hit Enter, what happens to the element? And I mean, it's clear, obviously, you guys are experts in content entry. And I just imagine that there's, there's hundreds of little decisions and things like that, that you guys have to make about content entry that I've never even considered. That probably makes native, like just native component integration, in general, an impossible feat. But with plugins, anything can be done sounds like,

Piotrek  1:11:31  
Yeah, I mean, we'll definitely we'll be working on developer experience here. Because still a lot can be done. Here, we worked a lot on having the framework, the like, local, lower level, functionality complete to be able to implement the features that we have already or that our customers or Drupal community needed. But we haven't put that much work yet into wrapping this into a nicer API that would make it easier, more native for instant for some kind of developers to bring their own features. So we definitely want to work on a lot on that. We actually did, we did some nice things, I think already. So for instance, we developed a tool called CKeditor 5  inspector, this is bit like the developer tools in Chrome or Firefox, where you can open and see what's the structure of a website. For ckeditor 5, it means you can see what the structure of the data model was the Windows virtual view, fire so you can actually inspect those things. And there's even a trooper module that enables that turns on this feature installation, so we can if you are developing a Drupal module that wraps the ckeditor 5 plugin, you can also contesting it, you can you can install this additional module to any epsilon, we are completely because

John  1:13:17  
I think it's interesting that, Nick, just realize that you guys are masters of content entry, because just two minutes into the show, I was like, Wow, these guys think of a lot of things that I would never ever think of. But we all got the same place in the hands. That's

Nic  1:13:40  
yeah, I might have used the word just realized. But I think that's the first thing that really called out like how many how minut of details you guys have to think about

John  1:13:49  
Wiktor, Piotrek, thank you for joining us. It was amazing to talk to both of you and to learn so much more about CKEditor 5.

Nic  1:14:01  
And for our listeners if you have questions or feedback you can reach out to talking and Drupal on Twitter with the handle TalkingDrupal or by email will show@ talkingdrupal.com You can connect with our hosts and other listeners on the Drupal slack in the TalkingDrupal channel.

John  1:14:15  
You too can promote your Drupal community event on talking Drupal. Learn more talkingdrupal.com/tdpromo.

Nic  1:14:24  
And you can get the talk in Drupal newsletter for show news, upcoming Drupal camps, local meetups and much more. You can sign up for our newsletter at talkingdrupal.com/newsletter.

John  1:14:33  
And as always, thank you patrons for supporting talking Drupal, your support is greatly appreciated. You can learn more about becoming a patron by clicking the button in the sidebar that says become a patron. as we as we bring this show in for a landing. Wiktor if people wanted to get a hold of you and talk more about CKEditor How could they go about doing that?

Wiktor  1:15:00  
I can catch me, for example, CKedit 5 Slack channel on Drupal, where I'm active and watching the conversation, they can reach me out via Twitter, or simply email me. Yeah, we can show the email information. The bottom. I'm really, I'm always open for, you know, discussions, feature requests or any any ideas that people have. I'm particularly interested for example, in blog based editing. This is one of the directions we would like to discover over the next year. Yeah, so really curious about any feedback on that topic as well.

John  1:15:41  
Awesome. Piotrek how about you.

Piotrek  1:15:44  
Same Twitter, Drupal, Slack channel, email as well. I, we both we become thinking a lot about the product direction so I also try to follow as close the discussions. It's rain mark is a bit like a rain man. But

John  1:16:12  
hey, go, Randy, What about you? Where can folks find you?

Randy  1:16:16  
Oh, every social media network if there's an "Amazing Rando", it's probably me. all lowercase all together. Honestly, I spend most of my time on Twitter. If you can't find me on Twitter, you can find me in the Drupal slack. And please reach out I'd love to talk about Drupal. Theming, Emulsified design tokens UI design, comics, Star Trek. Really Star Trek, that's pretty much the big one. Next Generation set. You know, next generation is the best Star Trek my favorite Star Trek until recently has been Voyager i recently, strange new worlds is my favorite Star Trek.

John  1:17:00  
All right, good to know, Nick, where can folks find you? You can

Nic  1:17:05  
find me @nicxvan and pretty much everywhere.

John  1:17:09  
And I'm John Picozzi. You can find me on all the social networks and drupal.org at @johnpicozzi and you can find out about epam epam.com.

Nic  1:17:21  
And if you've enjoyed listening, we've enjoyed talking. See you guys next week.

John  1:17:25  
Thanks, everyone.

Piotrek  1:17:26  
Yep, thanks for having us.

Transcribed by https://otter.ai