JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.4.2/skins/content/default/content.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.4.2/tinymce.min.js"></script>
<textarea></textarea>

JavaScript

tinymce.init({
  selector: 'textarea',
  height: 500,
  toolbar: 'platzhalter',

  setup: (editor) => {

    const menuItems = [{
        text: 'Menu item 1',
        value: '@{x1}',
        onAction: () => editor.insertContent('<span contenteditable="false">@{x1}</span>')
      },
      {
        text: 'Menu item 2',
        value: '@{x2}',
        onAction: () => editor.insertContent('<span contenteditable="false">@{x2}</span>')
      },
      {
        text: 'Menu item 3',
        getSubmenuItems: () => {
          return [{
            type: 'nestedmenuitem',
            text: 'Nested menu item 3-1',
            getSubmenuItems: () => {
              return [{
                  type: 'menuitem',
                  text: 'Submenu item 3-1-1',
                  value: '@{x3-1-1}',
                  onAction: () => editor.insertContent('<span contenteditable="false">@{x3-1-1}</span>')
                },
                {
                  type: 'menuitem',
                  text: 'Submenu item 3-1-2',
                  value: '@{x3-1-2}',
                  onAction: () => editor.insertContent('<span contenteditable="false">@{x3-1-2}</span>')
                }
              ];
            }
          }, {
            type: 'nestedmenuitem',
            text: 'Nested menu item 3-2',
            getSubmenuItems: () => {
              return [{
                  type: 'menuitem',
                  text: 'Submenu item 3-2-1',
                  value: '@{x3-2-1}',
                  onAction: () => editor.insertContent('<span contenteditable="false">@{x3-2-1}</span>')
                },
                {
                  type: 'menuitem',
                  text: 'Submenu item 3-2-2',
                  value: '@{x3-2-2}',
                  onAction: () => editor.insertContent('<span contenteditable="false">@{x3-2-2}</span>')
                }
              ];
            }
          }];
        }
      }
    ];

    const filterMenuItems = (items, pattern) => {
     ...