TS2345: Argument of type { userId: unknown; } is not assignable to parameter of type MentionAttribute

[paradox37]

📝 Provide detailed reproduction steps (if any)

I am using custom build of CKEditor 5 with Angular. Here is the function I use, almost the same as example provided in the documentation:

private mentionCustomization(editor: CustomCkeEditor.default) {
    // The upcast converter will convert view <a class="mention" href="" data-user-id="">
    // elements to the model 'mention' text attribute.
    editor.conversion.for('upcast').elementToAttribute({
      view: {
        name: 'span',
        key: 'data-mention',
        classes: 'mention',
        attributes: {
          'data-user-id': true,
        },
      },
      model: {
        key: 'mention',
        value: (viewItem: Element) => {
          // The mention feature expects that the mention attribute value
          // in the model is a plain object with a set of additional attributes.
          // In order to create a proper object use the toMentionAttribute() helper method:
          return editor.plugins.get('Mention').toMentionAttribute(viewItem, {
            // Add any other properties that you need.
            userId: viewItem.getAttribute('data-user-id'),
          } as unknown as MentionAttribute);
        },
      },
      converterPriority: 'high',
    });

    // Downcast the model 'mention' text attribute to a view <span> element.
    editor.conversion.for('downcast').attributeToElement({
      model: 'mention',
      view: (modelAttributeValue: { [key: string]: string }, { writer }: any) => {
        // Do not convert empty attributes (lack of value means no mention).
        if (!modelAttributeValue) {
          return;
        }

        return writer.createAttributeElement(
          'span',
          {
            class: 'mention',
            'data-mention': modelAttributeValue.id,
            'data-user-id': modelAttributeValue.userId,
          },
          {
            // Make mention attribute to be wrapped by other attribute elements.
            priority: 20,
            // Prevent merging mentions together.
            id: modelAttributeValue.uid,
          }
        );
      },
      converterPriority: 'high',
    });
  }

✔️ Expected result

What is the expected result of the above steps?
It should not show the error Argument of type  { userId: unknown; }  is not assignable to parameter of type  MentionAttribute  Object literal may only specify known properties, and  userId  does not exist in type  MentionAttribute

❌ Actual result

It shows Argument of type  { userId: unknown; }  is not assignable to parameter of type  MentionAttribute  Object literal may only specify known properties, and  userId  does not exist in type  MentionAttribute

❓ Possible solution

Example listed here says // Add any other properties that you need. But the type MentionAttribute is preventing that. MentionAttribute type should allow me to define the properties I need, like it says in the docs example.

📃 Other details

• Browser: Chrome
• OS: Windows 10
• First affected CKEditor version: Not sure, probably since typescript is introduced to custom build.
• Installed CKEditor plugins: Autoformat, AutoImage, Autosave, BlockQuote, Bold, Essentials, FontSize, Heading, Image, ImageUpload, Indent, Italic, Link, List, Mention, Paragraph, PasteFromOffice, SimpleUploadAdapter, TextTransformation,

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[arkflpc]

@paradox37, it's not the MentionAttribute that is causing problems. It shouldn't be an argument of toMentionAttribute in the first place. See #14926.