ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.62k stars 3.71k forks source link

Create a Basic plugin tutorial feedback #17182

Closed wwalc closed 1 month ago

wwalc commented 1 month ago

📝 Provide a description of requested docs changes

(1) The tutorial assumes Husky is installed, or at least with the latest node installed via nvm it did not work for me.

Follow https://ckeditor.com/docs/ckeditor5/43.1.1/framework/tutorials/creating-simple-plugin-timestamp.html without having Husky installed.

wiktor@Wiktors-MBP starter-files % node --version 
v20.17.0
wiktor@Wiktors-MBP starter-files % ls -al        
total 24
drwxr-xr-x  5 wiktor  staff  160 Sep 30 10:34 .
drwxr-xr-x  4 wiktor  staff  128 Sep 30 10:34 ..
-rw-r--r--  1 wiktor  staff  500 Sep 30 10:34 index.html
-rw-r--r--  1 wiktor  staff  610 Sep 30 10:34 main.js
-rw-r--r--  1 wiktor  staff  422 Sep 30 10:34 package.json
wiktor@Wiktors-MBP starter-files % npm install                                                       

> ckeditor5-tutorials-examples@0.1.0 prepare
> husky

sh: husky: command not found
npm error code 127
npm error path /Users/wiktor/workspace/ckeditor5-tutorials-examples
npm error command failed
npm error command sh -c husky
npm error A complete log of this run can be found in: /Users/wiktor/.npm/_logs/2024-09-30T08_37_04_944Z-debug-0.log

(2) The order of the code in sample project is different than in docs.

Docs:

image

Real code in starter files:

image

This way it takes a little bit more time to understand what to add manually, especially that code that we introduced in the tutorial is not "marked" in any way (e.g. with code comments).

Witoso commented 1 month ago

(1) The tutorial assumes Husky is installed, or at least with the latest node installed via nvm it did not work for me.

@filipsobol I guess this is a recent change (last week?), added with the prevention to not leak mistakenly license keys. I wonder if it makes sense to have husky added as a dev dep. Also, maybe we should reconsider promoting degit?

This way it takes a little bit more time to understand what to add manually, especially that code that we introduced in the tutorial is not "marked" in any way (e.g. with code comments).

@filipsobol WDYT? Perhaps we should consider having empty files in starter, to not confuse users. Naturally, the discrepancies will appear over time in those two placements.

filipsobol commented 1 month ago

Using degit was my first idea too. It could be as simple as:

npx degit ckeditor/ckeditor5-tutorials-examples/timestamp-plugin/starter-files ckeditor5-plugin
cd ckeditor5-plugin

We can potentially rename the repository and change file path to make the command shorter. However, I think we can go even further and simplify the projects created by package generator (when the Modern mode is selected) so that it can be used in tutorials too.

We recently had an issue, where someone followed one of the tutorials and wanted to use that plugin in another project, and there was no documentation for that. AFAIK, all tutorials have such dead end. We just assumed that whatever the developer created when following the tutorial will be deleted, or that they will somehow figure out they need to create a new project using package generator and move all code there ¯\_(ツ)_/¯

If boilerplate created by package generator was easy enough to understand for both new and experienced developers in our community, it would simplify things a lot, both for the community and us, the maintainers. This will also make the journey from learning about the editor to publishing a plugin much smoother.

I think this would be the right move.


This is a technical detail, but we should use Vite's library mode to allow not only creating and testing the code locally, but also building and publishing it for use in another project.

Witoso commented 1 month ago

Aaand what's the shortest solution, right now, before this "onboarding" with package gen. will come to fruition? As you know, I'm a bit worried about rebuilding our plugins, etc. But I don't want to block with a discussion the first, simplest solution for the error.

filipsobol commented 1 month ago

I don't think there's a need for rebuilding the plugins if we go that route. Currently, 7 out of 9 starters are either empty or ~20 LOC with only imports and Editor.create() call.

The minimum-effort solution for now could be replacing git clones with appropriate npx degits in guides.