Make anchor behave like native anchor when contenteditable

angular-workspace/projects/ni/nimble-angular/src/directives/anchor/nimble-anchor.directive.ts

@@ -33,6 +33,16 @@ export class NimbleAnchorDirective extends NimbleAnchorBaseDirective<Anchor> {
         this.renderer.setProperty(this.elementRef.nativeElement, 'underlineHidden', toBooleanProperty(value));
     }
 
+    public get contentEditable(): boolean {
+        return this.elementRef.nativeElement.contenteditable;
+    }
+
+    // Renaming because property should have camel casing, but attribute should not
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input('contenteditable') public set contentEditable(value: BooleanValueOrAttribute) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'contenteditable', toBooleanProperty(value));
+    }
+
     public constructor(renderer: Renderer2, elementRef: ElementRef<Anchor>) {
         super(renderer, elementRef);
     }

angular-workspace/projects/ni/nimble-angular/src/directives/anchor/tests/nimble-anchor.directive.spec.ts

@@ -101,6 +101,11 @@ describe('Nimble anchor', () => {
             expect(directive.underlineHidden).toBeFalse();
             expect(nativeElement.underlineHidden).toBeFalse();
         });
+
+        it('has expected defaults for contentEditable', () => {
+            expect(directive.contentEditable).toBeFalse();
+            expect(nativeElement.contenteditable).toBeFalse();
+        });
     });
 
     describe('with template string values', () => {
@@ -116,6 +121,7 @@ describe('Nimble anchor', () => {
                     type="${type1}"
                     appearance="prominent"
                     underline-hidden
+                    contenteditable
                     >
                 </nimble-anchor>
             `
@@ -184,6 +190,11 @@ describe('Nimble anchor', () => {
             expect(directive.underlineHidden).toBeTrue();
             expect(nativeElement.underlineHidden).toBeTrue();
         });
+
+        it('will use template string values for contentEditable', () => {
+            expect(directive.contentEditable).toBeTrue();
+            expect(nativeElement.contenteditable).toBeTrue();
+        });
     });
 
     describe('with property bound values', () => {
@@ -199,6 +210,7 @@ describe('Nimble anchor', () => {
                     [type]="type"
                     [appearance]="appearance"
                     [underlineHidden]="underlineHidden"
+                    [contentEditable]="contentEditable"
                     >
                 </nimble-anchor>
             `
@@ -215,6 +227,7 @@ describe('Nimble anchor', () => {
             public type = type1;
             public appearance: AnchorAppearance = appearance1;
             public underlineHidden = true;
+            public contentEditable = true;
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -330,6 +343,17 @@ describe('Nimble anchor', () => {
             expect(directive.underlineHidden).toBeFalse();
             expect(nativeElement.underlineHidden).toBeFalse();
         });
+
+        it('can be configured with property binding for contentEditable', () => {
+            expect(directive.contentEditable).toBeTrue();
+            expect(nativeElement.contenteditable).toBeTrue();
+
+            fixture.componentInstance.contentEditable = false;
+            fixture.detectChanges();
+
+            expect(directive.contentEditable).toBeFalse();
+            expect(nativeElement.contenteditable).toBeFalse();
+        });
     });
 
     describe('with attribute bound values', () => {
@@ -345,6 +369,7 @@ describe('Nimble anchor', () => {
                     [attr.type]="type"
                     [attr.appearance]="appearance"
                     [attr.underline-hidden]="underlineHidden"
+                    [attr.contenteditable]="contentEditable"
                     >
                 </nimble-anchor>
             `
@@ -361,6 +386,7 @@ describe('Nimble anchor', () => {
             public type = type1;
             public appearance: AnchorAppearance = appearance1;
             public underlineHidden = true;
+            public contentEditable = true;
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -476,5 +502,16 @@ describe('Nimble anchor', () => {
             expect(directive.underlineHidden).toBeFalse();
             expect(nativeElement.underlineHidden).toBeFalse();
         });
+
+        it('can be configured with attribute binding for contentEditable', () => {
+            expect(directive.contentEditable).toBeTrue();
+            expect(nativeElement.contenteditable).toBeTrue();
+
+            fixture.componentInstance.contentEditable = false;
+            fixture.detectChanges();
+
+            expect(directive.contentEditable).toBeFalse();
+            expect(nativeElement.contenteditable).toBeFalse();
+        });
     });
 });

change/@ni-nimble-angular-af4cc1a5-1c53-4eac-8cba-b38dcd8fe376.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add contentEditable property to anchor directive",
+  "packageName": "@ni/nimble-angular",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@ni-nimble-blazor-21d307d5-1145-4e6c-8be4-dd65b8ca424c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add ContentEditable property to anchor",
+  "packageName": "@ni/nimble-blazor",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@ni-nimble-components-be72d648-96c1-403d-80e8-2a68c3752207.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Make anchor behave like native anchor when contenteditable",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchor.razor

@@ -9,6 +9,7 @@
     target="@Target"
     type="@Type"
     underline-hidden="@UnderlineHidden"
+    contenteditable="@ContentEditable"
     appearance="@Appearance.ToAttributeValue()"
     @attributes="AdditionalAttributes">
     @ChildContent

packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchor.razor.cs

@@ -10,6 +10,12 @@ public partial class NimbleAnchor : NimbleAnchorBase
     [Parameter]
     public bool? UnderlineHidden { get; set; }
 
+    /// <summary>
+    /// Whether the anchor should behave like it is in an editable region.
+    /// </summary>
+    [Parameter]
+    public bool? ContentEditable { get; set; }
+
     /// <summary>
     /// The appearance of the anchor.
     /// </summary>

packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTests.cs

@@ -41,6 +41,22 @@ public void AnchorAppearance_AttributeIsSet(AnchorAppearance value, string expec
         Assert.Contains(expectedMarkup, anchor.Markup);
     }
 
+    [Fact]
+    public void AnchorContentEditable_AttributeIsSet()
+    {
+        var anchor = RenderWithPropertySet(x => x.ContentEditable, true);
+
+        Assert.Contains("contenteditable", anchor.Markup);
+    }
+
+    [Fact]
+    public void AnchorUnderlineHidden_AttributeIsSet()
+    {
+        var anchor = RenderWithPropertySet(x => x.UnderlineHidden, true);
+
+        Assert.Contains("underline-hidden", anchor.Markup);
+    }
+
     private IRenderedComponent<NimbleAnchor> RenderWithPropertySet<TProperty>(Expression<Func<NimbleAnchor, TProperty>> propertyGetter, TProperty propertyValue)
     {
         var context = new TestContext();

packages/nimble-components/src/anchor/index.ts

@@ -34,6 +34,18 @@ export class Anchor extends AnchorBase {
      */
     @attr
     public appearance: AnchorAppearance;
+
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: contenteditable
+     *
+     * Ideally, proper support for contenteditable should come from FAST.
+     * I have filed bug https://github.com/microsoft/fast/issues/6870 to them.
+     * If/when it is fixed, we can remove this workaround.
+     */
+    @attr({ mode: 'boolean' })
+    public contenteditable = false;
 }
 
 // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.

packages/nimble-components/src/anchor/styles.ts

@@ -20,6 +20,10 @@ export const styles = css`
         font: ${linkFont};
     }
 
+    .top-container {
+        display: contents;
+    }
+
     [part='start'] {
         display: none;
     }

packages/nimble-components/src/anchor/template.ts

@@ -9,7 +9,10 @@ import type { Anchor } from '.';
 export const template: FoundationElementTemplate<
 ViewTemplate<Anchor>,
 AnchorOptions
-> = (_context, definition) => html<Anchor>`<a
+> = (_context, definition) => html<Anchor>`<div
+        class="top-container"
+        ?contenteditable="${x => x.contenteditable}"
+    ><a
         class="control"
         part="control"
         download="${x => x.download}"
@@ -74,4 +77,4 @@ AnchorOptions
             @slotchange="${x => x.handleEndContentChange()}">
             ${definition.end || ''}
         </slot
-    ></span></a>`;
+    ></span></a></div>`;

packages/nimble-components/src/anchor/tests/anchor.spec.ts

@@ -91,4 +91,23 @@ describe('Anchor', () => {
             });
         }
     });
+
+    describe('inner anchor isContentEditable', () => {
+        let innerAnchor: HTMLAnchorElement;
+
+        beforeEach(async () => {
+            await connect();
+            innerAnchor = element.shadowRoot!.querySelector('a')!;
+        });
+
+        it('is false by default', () => {
+            expect(innerAnchor.isContentEditable).toBeFalse();
+        });
+
+        it('is true when contenteditable set on host element', async () => {
+            element.setAttribute('contenteditable', '');
+            await waitForUpdatesAsync();
+            expect(innerAnchor.isContentEditable).toBeTrue();
+        });
+    });
 });

packages/nimble-components/src/anchor/tests/anchor.stories.ts

@@ -15,6 +15,7 @@ interface AnchorArgs {
     label: string;
     href: string;
     underlineHidden: boolean;
+    contenteditable: boolean;
     appearance: keyof typeof AnchorAppearance;
 }
 
@@ -39,6 +40,7 @@ const metadata: Meta<AnchorArgs> = {
         <span class="anchor-container">Click on the <${anchorTag}
             href=${x => (x.href !== '' ? x.href : null)}
             ?underline-hidden=${x => x.underlineHidden}
+            ?contenteditable=${x => x.contenteditable}
             appearance=${x => x.appearance}
         >${x => x.label}</${anchorTag}> to navigate.</span>
     `),
@@ -56,12 +58,17 @@ const metadata: Meta<AnchorArgs> = {
             control: { type: 'radio' },
             description:
                 'Set to `prominent` to make the anchor appear in a different color than normal text.'
+        },
+        contenteditable: {
+            description:
+                'Set this when the anchor is within an editable region (i.e. element/hierarchy with [contenteditable](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable)). Whereas native elements can automatically adapt their behavior when within a `contenteditable` element, the `nimble-anchor` requires this attribute be explicitly set. When set, the anchor cannot be focused or operated.'
         }
     },
     args: {
         label: 'link',
         href: 'https://nimble.ni.dev',
         underlineHidden: false,
+        contenteditable: false,
         appearance: 'default'
     }
 };