Custom UX/UI

[maksimsemenov]

Is it possible to create a custom UX/UI (maybe through the plugin)? Are there any plans for adding support for this in the future?

[taurenshaman]

https://editorjs.io/styles
not enough?

[maksimsemenov]

Unfortunately, no. I meant more severe changes, for example, if I want to rebuild how the block menu work, where it is shown and how it looks. For example, take a look at notion. They have different UX patterns and I'm wondering if something like that is possible with editor.js.

[taurenshaman]

If you're thinking of menu, I have no idea.
But if you're considering UX/UI using plugin for similar data but with different business logic, I think the best way is to create plugin with supporting different styles/themes. Ok, I means one plugin one business logic.
You can have look at my plugin for cytoscape.js.
code: https://github.com/tunaltd/codex-editor-modules
demo: https://taurenshaman.github.io/editor@codexteam+jsoneditor.html

This plugin has only one main data/param: dataUri, a URI of json data in cytoscape format.
Here is generated data:

{
      "type": "cytoscape",
      "data": {
        "dataUri": "https://raw.githubusercontent.com/taurenshaman/taurenshaman.github.io/master/data/cytoscape-0.json",
        "layout": "spread",
        "stretched": false
      }
    },

And if I wanna implement some UI for d3.js, the best way is to create another plugin, even though the plugin has the same data/param: dataUri.

[euheny]

I think (in best use case) will be good allow import core js without styles. It will allow create full custom theme without overriding styles. I understand that the presence of a css variables and a wrapper with a theme class is sufficient in most cases. But now I make vuetify implementation of editor.js and have some pain with customizing. Not only with call methods (could not find in the documentation if i can make an external call to the tool like editor.call('makeBold')) but with styles. I have to redefine some styles roughly. If there were no styles at all, I would spend more time on general styles, but I would get 100% clean result.

Another solution: split styles and allow chose what import

• core.css(scss/next/other) - basic markup
• theme.css - colors/padding/margin/icons/etc

ps: sorry, English is not my best :)