Is there a way to use text instead of icons in the menu/dropdowns?

[andreimoment]

Describe your question I would like to have the editor insert liquid template snippets from a dropdown.

Is there a way to use text instead of an icon in the dropdown menu?

Note: Autocomplete triggered by "{{" could be an alternative solution.

Something like this:

instead of icon-only menu entries:

[Ionaru]

You can achieve this with some CSS trickery:

<style>
    .email-text {
        width: unset;
    }

    .email-text:before {
        content: 'Email';
    }
</style>

const easyMDE = new EasyMDE({
    toolbar: [
        {
            name: "misc",
            className: "fa fa-puzzle",
            title: "misc buttons",
            children: [
                {
                    name: "email",
                    action: () => { /* Some code */ },
                    className: "email-text",
                    title: "email",
                }
            ]
        }
    ]
});

[andreimoment]

Thank you @Ionaru I'll take that approach.

[andreimoment]

@Ionaru, this approach will work well for my case. Is there a way to insert text at the cursor? I looked at the built-in actions but they are all formatting-related. How would I approach something like that?

Edit: if I’m to use codemirror’s replaceRange, how can I access the code mirror instance in the scope where I’m defining the child action?

[Ionaru]

The editor parameter is given to the action: (editor) => {} function. From there you can access CodeMirror with editor.codemirror.

[sn3p]

Can extend @Ionaru his method a bit for more flexibility.

• add title-text className to render the title attribute as text
• prepend icon classes if you want both the icon and the title text

new EasyMDE({
  toolbar: [
    {
      name: "preview",
      // action: EasyMDE.togglePreview,
      action: editor => EasyMDE.togglePreview(editor),
      // className: "fa fa-eye",         // <- icon only
      // className: "title-text",        // <- text only
      className: "fa fa-eye title-text", // <- icon + text
      title: "Preview",
      noDisable: true
    }
  ]
});

.title-text {
  align-items: center;
  display: inline-flex;
  width: auto;
}

/* icon */
.title-text::before {
  margin-right: 5px;
}

/* text */
.title-text::after {
  content: attr(title);
  font-weight: bold;
}