Remove disable-editing attribute from the mention view element (#1731)

# Pull Request ## 🤨 Rationale  Previously, we used `nimble-rich-text-mention-users-view` for two states one is at the time of triggering the mention (Edit mode) and the other one is after committing the mention (View mode) in the editor. However, due to #1716, we wanted to remove the decoration tag (which is configured in Tiptap to render the same element in edit mode) here: #1721. Also, during editing for all mentions we can have the same styling so we decided not to use this element for both edit and view mode. Only after committing in the editor and for viewing in the viewer, this view element can be used. During editing mention node, the styles can be explicitly mentioned in the editor styles. Relevant discussion: #1721 (comment) Will close the following issues upon merging this PR: 1. fixes #1659 2. fixes #1716 ## 👩‍💻 Implementation  - Removed `disable-editing` attribute from the view element base class - Removed styles related to `disable-editing` and other CSS cleanups in view element - Added [`decorationClass`](https://tiptap.dev/docs/editor/api/utilities/suggestion#decoration-class) in the editor to style the default suggestion `span` in the editor and added necessary styles to it. ## 🧪 Testing  - Removed the view element edit mode test case from the Chromatic matrix test - Manually tested the mention view element in editor and viewer ## ✅ Checklist  - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. --------- Co-authored-by: Milan Raj <[email protected]>
ni · Jan 10, 2024 · 98c97d4 · 98c97d4
1 parent e7362ab
commit 98c97d4
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 103 deletions.
diff --git a/change/@ni-nimble-components-42ffbdab-86c2-4075-a77e-a24e14afc857.json b/change/@ni-nimble-components-42ffbdab-86c2-4075-a77e-a24e14afc857.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Removed disable-editing attribute from the rich text mention users view component for rendering @mention in editor and viewer",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/nimble-components/src/rich-text-mention/base/view/index.ts b/packages/nimble-components/src/rich-text-mention/base/view/index.ts
@@ -22,13 +22,4 @@ export class RichTextMentionView extends FoundationElement {
      */
     @attr({ attribute: 'mention-label' })
     public mentionLabel?: string;
-
-    /**
-     * Whether to render the mention node in view mode or in edit mode
-     *
-     * @public
-     * HTML Attribute: disable-editing
-     */
-    @attr({ mode: 'boolean', attribute: 'disable-editing' })
-    public disableEditing = false;
 }
diff --git a/packages/nimble-components/src/rich-text-mention/users/view/styles.ts b/packages/nimble-components/src/rich-text-mention/users/view/styles.ts
@@ -2,46 +2,23 @@ import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
     mentionFont,
-    mentionDisabledFontColor,
-    bodyFontColor,
-    bodyFont,
-    bodyDisabledFontColor,
-    mentionFontColor
+    mentionFontColor,
+    mentionDisabledFontColor
 } from '../../../theme-provider/design-tokens';
 
 export const styles = css`
     ${display('inline-block')}
 
     :host {
         box-sizing: border-box;
-        font: ${bodyFont};
-        color: ${bodyFontColor};
-        white-space: pre-wrap;
+        font: ${mentionFont};
     }
 
     .control {
-        font: ${mentionFont};
         color: ${mentionFontColor};
-        display: none;
-    }
-
-    :host([disable-editing]) .control {
-        display: inline;
     }
 
     :host([disabled]) .control {
         color: ${mentionDisabledFontColor};
     }
-
-    :host([disabled]) {
-        color: ${bodyDisabledFontColor};
-    }
-
-    :host([disable-editing]) {
-        font: ${mentionFont};
-    }
-
-    :host([disable-editing]) slot {
-        display: none;
-    }
 `;
diff --git a/packages/nimble-components/src/rich-text-mention/users/view/template.ts b/packages/nimble-components/src/rich-text-mention/users/view/template.ts
@@ -1,10 +1,6 @@
 import { html } from '@microsoft/fast-element';
 import type { RichTextMentionUsersView } from '.';
 
-// Setting `contenteditable="true"` on the slot serves as a workaround to address the issue in the Chrome browser
-// that arises when the mention user view is activated at the end of a line in the rich text editor while in edit mode.
-// This can be removed when the below issue is resolved
-// See: https://github.com/ni/nimble/issues/1659
 export const template = html<RichTextMentionUsersView>`<span class="control"
-        >@${x => x.mentionLabel}</span
-    ><slot contenteditable="true"></slot>`;
+    >@${x => x.mentionLabel}</span
+>`;
diff --git a/...nts/src/rich-text-mention/users/view/tests/rich-text-mention-users-view-matrix.stories.ts b/...nts/src/rich-text-mention/users/view/tests/rich-text-mention-users-view-matrix.stories.ts
@@ -9,20 +9,12 @@ import { richTextMentionUsersViewTag } from '..';
 import {
     bodyFont,
     bodyFontColor,
-    borderColor,
-    borderWidth,
-    mediumPadding,
     smallPadding
 } from '../../../../theme-provider/design-tokens';
-
-const disableEditingStates = [
-    ['In View Mode', false, true],
-    ['In Edit mode', false, false],
-    ['Disabled - In Edit mode', true, false],
-    ['Disabled - In View Mode', true, true]
-] as const;
-
-type DisableEditingState = (typeof disableEditingStates)[number];
+import {
+    type DisabledState,
+    disabledStates
+} from '../../../../utilities/tests/states';
 
 const metadata: Meta = {
     title: 'Tests/Rich Text Mention: User',
@@ -34,10 +26,9 @@ const metadata: Meta = {
 export default metadata;
 
 const component = ([
-    name,
-    disabled,
-    disableEditing
-]: DisableEditingState): ViewTemplate => html`
+    disabledName,
+    disabled
+]: DisabledState): ViewTemplate => html`
     <style class='code-hide'>
         .mention-container {
             margin: var(${smallPadding.cssCustomProperty});
@@ -54,36 +45,9 @@ const component = ([
             mention-href="user:1"
             mention-label="John Doe"
             ?disabled="${() => disabled}"
-            ?disable-editing= "${() => disableEditing}"
-        >@John Doe</${richTextMentionUsersViewTag}>
-        <span class="sample-text">(Mention View ${() => name})</span>
-    </div>
-`;
-
-const componentEditingMode = (): ViewTemplate => html`
-    <style class='code-hide'>
-        .mention-container {
-            display: inline-block;
-            margin: var(${smallPadding.cssCustomProperty});
-            padding: var(${mediumPadding.cssCustomProperty});
-            border: var(${borderWidth.cssCustomProperty}) solid var(${borderColor.cssCustomProperty});
-        }
-
-        .sample-text {
-            font: var(${bodyFont.cssCustomProperty});
-            color: var(${bodyFontColor.cssCustomProperty});
-        }
-    </style>
-    <div class="mention-container" contenteditable="true">
-        <span class="sample-text">User mention:</span>
-        <${richTextMentionUsersViewTag}
-            mention-href="user:1"
-            mention-label="John Doe"
         >@John Doe</${richTextMentionUsersViewTag}>
-        <span class="sample-text">(Mention View Enabled Editing)</span>
+        <span class="sample-text">(Mention View ${() => disabledName})</span>
     </div>
 `;
 
-export const richTextMentionUserViewThemeMatrix: StoryFn = createMatrixThemeStory(createMatrix(component, [disableEditingStates]));
-
-export const richTextMentionUserViewEditEnabledThemeMatrix: StoryFn = createMatrixThemeStory(createMatrix(componentEditingMode));
+export const richTextMentionUserViewThemeMatrix: StoryFn = createMatrixThemeStory(createMatrix(component, [disabledStates]));
diff --git a/...le-components/src/rich-text-mention/users/view/tests/rich-text-mention-users-view.spec.ts b/...le-components/src/rich-text-mention/users/view/tests/rich-text-mention-users-view.spec.ts
@@ -11,7 +11,6 @@ async function setup(): Promise<Fixture<RichTextMentionUsersView>> {
         html`<${richTextMentionUsersViewTag}
             mention-href="users:1"
             mention-label="John Doe"
-            disable-editing
             >@John Doe</${richTextMentionUsersViewTag}
         >`
     );

diff --git a/packages/nimble-components/src/rich-text/editor/models/create-tiptap-editor.ts b/packages/nimble-components/src/rich-text/editor/models/create-tiptap-editor.ts
@@ -209,12 +209,7 @@ function createCustomMentionExtension(
         renderHTML({ node, HTMLAttributes }) {
             return [
                 config.viewElement,
-                mergeAttributes(
-                    this.options.HTMLAttributes,
-                    HTMLAttributes,
-                    // disable-editing is a boolean attribute
-                    { 'disable-editing': '' }
-                ),
+                mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
                 this.options.renderLabel({
                     options: this.options,
                     node
@@ -224,13 +219,7 @@ function createCustomMentionExtension(
     }).configure({
         suggestion: {
             char: config.character,
-            /**
-             * When rendering the view element as a decoration tag for suggestions,
-             * it leads to the deletion of the entire suggested word in Safari when pressing backspace.
-             * See: https://github.com/ni/nimble/issues/1716
-             * When addressed, re-enable the view element as follows:
-             * decorationTag: config.viewElement,
-             */
+            decorationClass: 'nimble-mention-view-edit',
             pluginKey: new PluginKey(config.key),
             allowSpaces: true,
             render: () => {

diff --git a/packages/nimble-components/src/rich-text/editor/styles.ts b/packages/nimble-components/src/rich-text/editor/styles.ts
@@ -168,7 +168,7 @@ export const styles = css`
         margin-block-end: 0;
     }
 
-    li > p {
+    .ProseMirror li > p {
         margin-block: 0;
     }
 
@@ -222,6 +222,15 @@ export const styles = css`
 
     ${/** End of anchor styles */ ''}
 
+    ${/* Shared styles for all mention views at edit time. */ ''}
+    .ProseMirror .nimble-mention-view-edit {
+        color: ${bodyFontColor};
+    }
+
+    :host([disabled]) .ProseMirror .nimble-mention-view-edit {
+        color: ${bodyDisabledFontColor};
+    }
+
     .footer-section {
         display: flex;
         justify-content: space-between;

diff --git a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts
@@ -989,6 +989,16 @@ describe('RichTextEditor user mention via template', () => {
             expect(pageObject.isMentionListboxOpened()).toBeTrue();
         });
     });
+
+    it('should get `span` and expected class name when @ character is added into the editor', async () => {
+        await pageObject.setEditorTextContent('@mention');
+
+        expect(pageObject.getMarkdownRenderedTagNames()).toEqual(['P', 'SPAN']);
+        expect(pageObject.getEditorFirstChildTextContent()).toBe('@mention');
+        expect(pageObject.getEditorLastChildAttribute('class')).toBe(
+            'nimble-mention-view-edit'
+        );
+    });
 });
 
 describe('RichTextEditorMentionListbox', () => {

diff --git a/packages/nimble-components/src/rich-text/models/markdown-parser.ts b/packages/nimble-components/src/rich-text/models/markdown-parser.ts
@@ -133,8 +133,7 @@ export class RichTextMarkdownParser {
                                 currentMention.viewElement,
                                 {
                                     'mention-href': href,
-                                    'mention-label': displayName,
-                                    'disable-editing': true
+                                    'mention-label': displayName
                                 }
                             ];
                         }