Alternative token selection form element

Problem/Motivation

The token browser opening in a dialog works but its difficult to make it fully accessible and its disconnected from the field we're inserting tokens into. For example, we have to click somewhere in a textfield to get focus for the token we're going to insert but then focus is no longer on the dialog so there's no real keyboard only way to efficiently get focus back to the dialog to either select another token or close it.

Additionally, the token table is a bit hacky as all the token parents and their children are displayed as sibling rows so we have to do some tricky javascript stuff to hide/show these items through related data attributes. We have it working pretty well but it's still not a very user friendly way to handle this.

Proposed resolution

I'm envisioning some sort of multi-level menu style of drilling down to tokens as a form element that is directly attached to textfield/textarea form elements. It needs to be a sort of mobile menu type style where each token group is isolated with perhaps a back button that can navigate back up each level. Additionally, we don't want to lose anything that we already have with the token name, description and actual token. Perhaps theres a stylistic way we can keep all this contained within an list item element while still achieving simplicity. I feel like this should be something that can be attached to existing field widgets by way of property and a widget alter could check for this property and attach the extra html/js/css to make it all work?

Remaining tasks

Start working on a functional POC of the vision and hopefully get some design insight from the community to enhance.

Supported editors:

These seem to be the only editors I could be sure that are available and in use for D11. I'm assuming TinyMCE, wysiwyg(module) and ckeditor < v5 would no longer be applicable. Are there other editors beyond these that we should support?

• Ckeditor5
• CodeMirror

Testing

To add token browser support to an existing form 'textfield' or 'textarea' element, add the following property like this example:

$form['textarea_tokens_example'] = [
      '#type' => 'textarea',
      '#title' => $this->t('Textarea tokens example'),
      '#rows' => 5,
      '#placeholder' => $this->t('You can use tokens in the textarea.'),
      '#token_browser' => [
        'token_types' => ['node'],
        'global_types' => FALSE,
      ],
    ];

• Note: if 'token_types' is empty, no effect will apply.
• The 'global_types' is optional, the default is TRUE.