Tinymce with angular 17 - Not working as expected with autocompleter

[aggi-labs]

I am using angular 17 with tinymce/tinymce-angular - 8 with self hosted tinymce with package manager Here is my html code

 <editor
    #myEditor
    apiKey="no-api-key"
    [(ngModel)]="content"
    modelEvents="change input nodechange undo redo"
    height="250"
    [disabled]="false"
    [init]="{
      selector: 'textarea',
      height: 250,
      plugins: 'lists link image table code help wordcount save visualblocks',
      toolbar:
        'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help | customStrikethrough',
      setup: handleSetup,
      content_style: 'body{margin:0} p {margin: 0px; border:0px ; padding: 8px 10px;font-size:12px}'
    }"
  ></editor>

In JS

  handleSetup(editor: any) {
    const specialChars = [
        { text: 'exclamation mark', value: '!' },
          { text: 'at', value: '@' },
          { text: 'hash', value: '#' },
          { text: 'dollars', value: '$' },
          { text: 'percent sign', value: '%' },
          { text: 'caret', value: '^' },
          { text: 'ampersand', value: '&' },
          { text: 'asterisk', value: '*' }
     ];
    const getMatchedChars = (pattern: string) => {
      return mentions.filter((char) => char.text.includes(pattern));
    };
    const onAction = (autocompleteApi: any, rng: unknown, value: string) => {
      editor.selection.setRng(rng);
      editor.insertContent(value);
      autocompleteApi.hide();
    };
    editor.ui.registry.addAutocompleter('specialchars_cardmenuitems', {
      trigger: '-',
      minChars: 1,
      columns: 1,
      highlightOn: ['char_name'],
      onAction: onAction,
      /**
       * @description Once the trigger character is matched.
       * @param pattern String typed.
       * @returns Promise.
       */
      fetch: (pattern: string) => {
        return new Promise((resolve) => {
          const results = getMatchedChars(pattern).map((char) => ({
            type: 'cardmenuitem',
            value: char.value,
            label: char.text,
            items: [
              {
                type: 'cardcontainer',
                direction: 'vertical',
                items: [
                  {
                    type: 'cardtext',
                    text: char.text,
                    name: 'char_name'
                  },
                  {
                    type: 'cardtext',
                    text: char.value
                  }
                ]
              }
            ]
          }));
          resolve(results);
        });
      }
    });
  }

I am not seeing the suggestion popup in the editor. Am I doing any wrong here? Kindly help with suggestions. Thanks in advance

[jdupont22]

Same issue here

• angular 17+
• tinyMce angular v7 and v8
• tinyMCE v6 and v7

[shanmen-tiny]

Hi @aggi-labs,

    const getMatchedChars = (pattern: string) => {
      return mentions.filter((char) => char.text.includes(pattern));
    };

Do you mean to use specialChars instead of mentions? The getMatchedChars is returning an empty array, so the autocompleter is not showing. I've put it up in a Codesandbox: https://codesandbox.io/p/sandbox/charming-engelbart-d7s3jj?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A21%2C36.

Let me know if you have any issues.

[tiny-stale-bot]

This issue is stale because it has been open 30 days with no activity. Please comment if you wish to keep this issue open or it will be closed in 7 days.