CKEditor5 Classic Build DNA Updated

Adam C. | 3 years ago

It has been a while since I last updated my first ever NPM package: ckeditor5-build-classic-dna. It's created on the top of official ckeditor5-build-classic   with a lot of useful features, like

• Allow to add image from unsplash 
• Allow to add custom css to <table> and <img> 
• Allow to add code block, and assign id attribute to <code> tag
• …

Since the office CKEditor5 has been updated to version 30.0.0, I think it's good to keep ckeditor5-build-classic-dna up to date.

After bump those @ckeditor/ckeditor5-* packages to 30.0.0, I found out that the signature feature of ckeditor5-build-classic-dna, adding image from unsplash is broken. Because the previous version of @ckeditor/ckeditor5-* packages is 27.0.0, which means it's a major update, it's likely some breaking changes in the 30.0.0.  But I don't see any information on the release page applied to my case.

There is no error shown on the Chrome inspector, but I did see a warning message about toolbarview-item-unavailable, like this:

react_devtools_backend.js:4049 toolbarview-item-unavailable

I fixed it by commented out an unavailable toolbar setting for image:

// Editor configuration.
ClassicEditor.defaultConfig = {
  toolbar: {
    items: [
      "heading",
	....
    ],
  },
  image: {
    toolbar: [
      // "imageStyle:full", //react_devtools_backend.js:4049 toolbarview-item-unavailable since v30.0.0
      "imageStyle:side",
      "|",
      "imageTextAlternative",
    ],
  },
  table: {
    contentToolbar: ["tableColumn", "tableRow", "mergeTableCells"],
  },
  // This value must be kept in sync with the language defined in webpack.config.js.
  language: "en",
};

But adding image from Unsplash still failed. After some research, I found the answer, it's due to the breaking change of creating image element. We could the following code to create a imageElement:

editor.model.change((writer) => {
	const imageElement = writer.createElement("image", {
		src: photo.urls.regular,
    });
    ....
});

Apparently, in the version 30.0.0,  we have to use “imageBlock” instead of “image”, like this:

editor.model.change((writer) => {
	const imageElement = writer.createElement("imageBlock", {
		src: photo.urls.regular,
    });
    ....
});

A small change fixed the issue. If you are looking for the way to integrate Unplash/Code Block into the CKEditor, check it out at ckeditor5-build-classic-dna, and the demo page.