TinyMCE 5: custom toolbar button for uppercase

Question

I'm creating a pluging to put all the words in uppercase.

const items = [
    {
      type: 'menuitem',
      text: 'uppercase',
      onAction: () => {
        const uppercaseContent = editor.dom
          .decode(editor.selection.getContent())
          .toUpperCase();

        editor.insertContent(uppercaseContent);
      },
    },
  ];

  callback(items);
},

I'm having some issues with this code:

• When I apply the uppercase it removes the current style from the element. For example, if I put the text with bold / italic it removes the style and uppercase the word. I need to uppercase the word keeping all the styles.
• When I select multiple rows to apply the uppercase it transforms the styles and the classes to uppercase too. I need to keep all elements intact and just uppercase the words.

Am I missing something in this code?

Thanks

Answer 1

Whether you lose styles depends on what you have selected. editor.insertContent will replace the selection completely, which can have undesired side effects with inline styles.

You probably want to dig down to all of the child text nodes in the selection and uppercase those . This isn't easy either, however, as your selection may cover part of a text node (such complexities are the things insertContent deals with for you).

The development process to achieve changing case reliably is so complex we decided to charge for our solution: https://apps.tiny.cloud/products/case-change/