❓ How to change tool order?

[AlbinoGeek]

Question

How do I change the order of tools?

Context

For some reason, every tool is listed AFTER "Text" EXCEPT "Link".

So, there clearly is some way to change the order of tools.

But it's not documented in the Tool Options:

https://editorjs.io/getting-started#available-tools-options

What I've tried

1. Changing the order of tools as defined does not effect the rendered order.
2. Changing the name of the tools does not effect the order (it's not alphabetical.)

[neSpecc]

Please, add more details. Are you talking about Block Tools or Inline Tools? Or Block Tunes? Maybe your configuration and some screenshots will help

[AlbinoGeek]

Please, add more details. Are you talking about Block Tools or Inline Tools? Or Block Tunes? Maybe your configuration and some screenshots will help

Porque no los dos? (meme that poorly translates to "why not both?")

But yes, let's start with Block Tunes.

It's "sort of alphabetical but not really, because Link is always first and followed by Text."

Here's my tool configuration:

      {
        header: {
          class:         Header,
          inlineToolbar: ['link'],
          tunes:         ['alignmentTune']
        },
        paragraph: {
          class:         Paragraph,
          inlineToolbar: true,
          tunes:         ['alignmentTune']
        },
        list: {
          class:         NestedChecklist,
          inlineToolbar: true,
          tunes:         ['alignmentTune']
        },
        link: {
          class:  LinkTool,
          tunes:  ['alignmentTune'],
          config: {
            endpoint: '/api/fetchUrl',
          }
        },
        image: {
          class:         Image,
          inlineToolbar: ['link'],
          tunes:         ['alignmentTune']
        },
        embed: {
          class:         Embed,
          inlineToolbar: true
        },
        table: {
          class:  Table,
          config: {
            rows: 2,
            cols: 3,
          },
          inlineToolbar: true
        },
        alignmentTune: {
          class:  AlignmentTuneTool,
          config: {
            blocks: {
              header: 'center',
              image:  'center',
            }
          },
        }
      }

[theleonwei]

Any update on this?

[CKylinMC]

I have the same problem.

[tskalczynski]

Use (array-map ...) instead of a normal map { ... } to define tools:

It respects the order :).

...
			:tools (array-map
				:paragraph {
				      :class 			js/Paragraph
				      :inlineToolbar 	true
				      :tunes 			["blocktune" "textVariant"]
				}
                                ...
                                )

[AlbinoGeek]

Use (array-map ...) instead of a normal map { ... } to define tools:

It respects the order :).

...
			:tools (array-map
				:paragraph {
				      :class 			js/Paragraph
				      :inlineToolbar 	true
				      :tunes 			["blocktune" "textVariant"]
				}
                                ...
                                )

That's... not Javascript, how would someone even go about using that?

[tskalczynski]

Ooops, you are right. I'm doing this in Clojurescript. There, it works perfectly with (array-map ...).

[tskalczynski]

Maybe you can use a Map() instead of a simple JS object?

Instead of:

{
        header: {
          class:         Header,
          inlineToolbar: ['link'],
          tunes:         ['alignmentTune']
        },
        paragraph: {
          class:         Paragraph,
          inlineToolbar: true,
          tunes:         ['alignmentTune']
        },
...

something like this:

new Map(
  [
        [ 'header', {
          class:         Header,
          inlineToolbar: ['link'],
          tunes:         ['alignmentTune']
        }],
        [ 'paragraph', {
          class:         Paragraph,
          inlineToolbar: true,
          tunes:         ['alignmentTune']
        } ],
...
  ])

Here they say Map() keeps the keys order:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map