Skip to content

NcRichContenteditable: @mention item is not rendered properly in other appsΒ #4901

@Antreesy

Description

@Antreesy

Am I right that now styles are not loaded from .js but loaded by require('path-to.css') inside modules?

Might be related to it?

  • with import of NcRichContenteditable to the project also the component NcMentionBubble is bundled with id '357e6d0e' (which will be used for styles scope in [data-v-357e6d0e])
  • NcRichContenteditable is using mixin richEditor under the hood, which is in charge of rendering NcMentionBubble. It is also bundled in the project with id '8a961b36'
  • dist/assets/NcMentionBubble-<hash>.css contains styles for scope data-v-357e6d0e, same as source webpack://./node_modules/@nextcloud/vue/dist/assets/index.css in production code
  • dev environment seems to use mjs, where styles applied only for [data-v-8a961b36]

That causes the styles for rendered mentions to be broken, if lib is used in Talk, for example:
image

Content in a bundled app:

  1. NcMentionBundle with id '357e6d0e'
  2. Styles for id '8a961b36'
  3. NcMentionBundle with id '8a961b36'
    Screenshot from 2023-10-12 10-26-42

Originally posted by @Antreesy in #4386 (comment)

Metadata

Metadata

Assignees

No one assigned

    Labels

    1. to developAccepted and waiting to be taken care ofbugSomething isn't workingfeature: rich-contenteditableRelated to the rich-contenteditable componentsregressionRegression of a previous working feature

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions