feat(module:typography): more edit triggers

components/typography/demo/interactive.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 
+import { NzEditTriggerState } from 'ng-zorro-antd/typography/text-edit.component';
+
 @Component({
   selector: 'nz-demo-typography-interactive',
   template: `
@@ -13,6 +15,17 @@ import { Component } from '@angular/core';
     ></p>
     <p nz-typography nzEditable [nzEditTooltip]="null" [(nzContent)]="hideEditTooltipStr"></p>
     <p nz-typography nzCopyable nzEditable [(nzContent)]="copyStr"></p>
+    <div>
+      <p>
+        <span>Trigger edit with: </span>
+        <nz-radio-group [(ngModel)]="triggerState" nzName="triggerEdit">
+          <label nz-radio [nzValue]="'icon'">icon</label>
+          <label nz-radio [nzValue]="'text'">text</label>
+          <label nz-radio [nzValue]="'both'">both</label>
+        </nz-radio-group>
+      </p>
+      <p nz-typography nzEditable [nzTriggerType]="triggerState" [(nzContent)]="triggerEditStr"></p>
+    </div>
     <p nz-typography nzCopyable nzCopyText="Hello, Ant Design!">Replace copy text.</p>
     <p
       nz-typography
@@ -40,4 +53,7 @@ export class NzDemoTypographyInteractiveComponent {
   customEditIconStr = 'Custom edit icon and tooltip text.';
   hideEditTooltipStr = 'Hide edit tooltip.';
   copyStr = 'This is a copyable text.';
+  triggerEditStr = 'Text or icon as trigger - click to start editing.';
+
+  triggerState: NzEditTriggerState = 'icon';
 }

components/typography/demo/module

@@ -1,5 +1,6 @@
 import { NzTypographyModule } from 'ng-zorro-antd/typography';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzSliderModule } from 'ng-zorro-antd/slider';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
-export const moduleList = [ NzTypographyModule, NzDividerModule, NzSliderModule ];
+export const moduleList = [ NzTypographyModule, NzDividerModule, NzSliderModule, NzRadioModule ];

components/typography/doc/index.en-US.md

@@ -26,6 +26,7 @@ import { NzTypographyModule } from 'ng-zorro-antd/typography';
 | `[nzContent]`       | Component content                                                              | `string`                                                             | -                   |               |
 | `[nzCopyable]`      | Can copy, require use `[nzContent]`                                            | `boolean`                                                            | `false`             |               |
 | `[nzEditable]`      | Editable, require use `[nzContent]`                                            | `boolean`                                                            | `false`             |               |
+| `[nzTriggerType]`   | Edit mode trigger, require use `[nzContent]`                                   | `icon \| text \| both`                                               | `icon`              |               |
 | `[nzCopyIcons]`     | Custom copy icons                                                              | `[string \| TemplateRef<void>, string \| TemplateRef<void>]`         | `['copy', 'check']` | ✅            |
 | `[nzCopyTooltips]`  | Custom tooltips text, hide when it is `null`                                   | `null \| [string \| TemplateRef<void>, string \| TemplateRef<void>]` | -                   | ✅            |
 | `[nzEditIcon]`      | Custom edit icon                                                               | `string \| TemplateRef<void>`                                        | `'edit'`            | ✅            |

components/typography/doc/index.zh-CN.md

@@ -22,22 +22,23 @@ import { NzTypographyModule } from 'ng-zorro-antd/typography';
 
 ### [nz-typography]:standalone
 
-| 参数                | 说明                                                | 类型                                                                 | 默认值              | 全局配置 |
-| ------------------- | --------------------------------------------------- | -------------------------------------------------------------------- | ------------------- | -------- |
-| `[nzContent]`       | 组件内容                                            | `string`                                                             | -                   |
-| `[nzCopyable]`      | 是否可拷贝，需要配合 `[nzContent]` 使用             | `boolean`                                                            | `false`             |
-| `[nzEditable]`      | 是否可编辑，需要配合 `[nzContent]` 使用             | `boolean`                                                            | `false`             |
-| `[nzCopyIcons]`     | 自定义拷贝图标                                      | `[string \| TemplateRef<void>, string \| TemplateRef<void>]`         | `['copy', 'check']` | ✅       |
-| `[nzCopyTooltips]`  | 自定义提示文案，为 `null` 时隐藏文案                | `null \| [string \| TemplateRef<void>, string \| TemplateRef<void>]` | -                   | ✅       |
-| `[nzEditIcon]`      | 自定义编辑图标                                      | `string \| TemplateRef<void>`                                        | `'edit'`            | ✅       |
-| `[nzEditTooltip]`   | 自定义提示文案，为 `null` 时隐藏文案                | `null \| string \| TemplateRef<void>`                                | -                   | ✅       |
-| `[nzEllipsis]`      | 自动溢出省略，动态内容时需要配合 `[nzContent]` 使用 | `boolean`                                                            | `false`             |
-| `[nzExpandable]`    | 自动溢出省略时是否可展开                            | `boolean`                                                            | `false`             |          |
-| `[nzSuffix]`        | 自动溢出省略时的文本后缀                            | `string`                                                             | -                   |          |
-| `[nzCopyText]`      | 自定义被拷贝的文本                                  | `string`                                                             | -                   |          |
-| `[nzDisabled]`      | 禁用文本                                            | `boolean`                                                            | `false`             |          |
-| `[nzEllipsisRows]`  | 自动溢出省略时省略行数                              | `number`                                                             | `1`                 | ✅       |
-| `[nzType]`          | 文本类型                                            | `'secondary' \| 'warning' \| 'danger' \| 'success'`                  | -                   |          |
-| `(nzContentChange)` | 当用户提交编辑内容时触发                            | `EventEmitter<string>`                                               | -                   |          |
-| `(nzExpandChange)`  | 展开省略文本时触发                                  | `EventEmitter<void>`                                                 | -                   |          |
-| `(nzOnEllipsis)`    | 当省略状态变化时触发                                | `EventEmitter<boolean>`                                              | -                   |          |
+| 参数                | 说明                                                | 类型                                                                 | 默认值   | 全局配置 |
+| ------------------- | --------------------------------------------------- | -------------------------------------------------------------------- | -------- | -------- |
+| `[nzContent]`       | 组件内容                                            | `string`                                                             | -        |          |
+| `[nzCopyable]`      | 是否可拷贝，需要配合 `[nzContent]` 使用             | `boolean`                                                            | `false`  |          |
+| `[nzEditable]`      | 是否可编辑，需要配合 `[nzContent]` 使用             | `boolean`                                                            | `false`  |          |
+| `[nzEditable]`      | 是否可编辑，需要配合 `[nzContent]` 使用             | `boolean`                                                            | `false`  |          |
+| `[nzTriggerType]`   | 编辑模式触发器类型, 需要配合 `[nzContent]` 使用     | `icon \| text \| both`                                               | `icon`   |          |
+| `[nzCopyTooltips]`  | 自定义提示文案，为 `null` 时隐藏文案                | `null \| [string \| TemplateRef<void>, string \| TemplateRef<void>]` | -        | ✅       |
+| `[nzEditIcon]`      | 自定义编辑图标                                      | `string \| TemplateRef<void>`                                        | `'edit'` | ✅       |
+| `[nzEditTooltip]`   | 自定义提示文案，为 `null` 时隐藏文案                | `null \| string \| TemplateRef<void>`                                | -        | ✅       |
+| `[nzEllipsis]`      | 自动溢出省略，动态内容时需要配合 `[nzContent]` 使用 | `boolean`                                                            | `false`  |          |
+| `[nzExpandable]`    | 自动溢出省略时是否可展开                            | `boolean`                                                            | `false`  |          |
+| `[nzSuffix]`        | 自动溢出省略时的文本后缀                            | `string`                                                             | -        |          |
+| `[nzCopyText]`      | 自定义被拷贝的文本                                  | `string`                                                             | -        |          |
+| `[nzDisabled]`      | 禁用文本                                            | `boolean`                                                            | `false`  |          |
+| `[nzEllipsisRows]`  | 自动溢出省略时省略行数                              | `number`                                                             | `1`      | ✅       |
+| `[nzType]`          | 文本类型                                            | `'secondary' \| 'warning' \| 'danger' \| 'success'`                  | -        |          |
+| `(nzContentChange)` | 当用户提交编辑内容时触发                            | `EventEmitter<string>`                                               | -        |          |
+| `(nzExpandChange)`  | 展开省略文本时触发                                  | `EventEmitter<void>`                                                 | -        |          |
+| `(nzOnEllipsis)`    | 当省略状态变化时触发                                | `EventEmitter<boolean>`                                              | -        |          |

components/typography/text-edit.component.ts

@@ -30,6 +30,9 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzAutosizeDirective, NzInputModule } from 'ng-zorro-antd/input';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
+const nzEditTriggerStates = ['icon', 'text', 'both'] as const;
+export type NzEditTriggerState = (typeof nzEditTriggerStates)[number];
+
 @Component({
   selector: 'nz-text-edit',
   exportAs: 'nzTextEdit',
@@ -42,17 +45,19 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
     </ng-template>
 
     <ng-template #notEditing>
-      <button
-        nz-tooltip
-        nz-trans-button
-        class="ant-typography-edit"
-        [nzTooltipTitle]="tooltip === null ? null : tooltip || locale?.edit"
-        (click)="onClick()"
-      >
-        <ng-container *nzStringTemplateOutlet="icon; let icon">
-          <span nz-icon [nzType]="icon"></span>
-        </ng-container>
-      </button>
+      <ng-container *ngIf="nzTriggerType !== 'text'">
+        <button
+          nz-tooltip
+          nz-trans-button
+          class="ant-typography-edit"
+          [nzTooltipTitle]="tooltip === null ? null : tooltip || locale?.edit"
+          (click)="onClick()"
+        >
+          <ng-container *nzStringTemplateOutlet="icon; let icon">
+            <span nz-icon [nzType]="icon"></span>
+          </ng-container>
+        </button>
+      </ng-container>
     </ng-template>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -68,6 +73,7 @@ export class NzTextEditComponent implements OnInit {
 
   @Input() text?: string;
   @Input() icon: NzTSType = 'edit';
+  @Input() nzTriggerType: NzEditTriggerState = 'icon';
   @Input() tooltip?: null | NzTSType;
   @Output() readonly startEditing = new EventEmitter<void>();
   @Output() readonly endEditing = new EventEmitter<string>(true);

components/typography/typography.component.ts

@@ -39,7 +39,7 @@ import { InputBoolean, InputNumber, isStyleSupport, measure } from 'ng-zorro-ant
 import { NzI18nService, NzTextI18nInterface } from 'ng-zorro-antd/i18n';
 
 import { NzTextCopyComponent } from './text-copy.component';
-import { NzTextEditComponent } from './text-edit.component';
+import { NzEditTriggerState, NzTextEditComponent } from './text-edit.component';
 
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'typography';
 const EXPAND_ELEMENT_CLASSNAME = 'ant-typography-expand';
@@ -56,7 +56,7 @@ const EXPAND_ELEMENT_CLASSNAME = 'ant-typography-expand';
   template: `
     <ng-template #contentTemplate let-content="content">
       <ng-content *ngIf="!content"></ng-content>
-      {{ content }}
+      <span (click)="onTextClickEdit()">{{ content }}</span>
     </ng-template>
     <ng-container *ngIf="!editing">
       <ng-container
@@ -89,6 +89,7 @@ const EXPAND_ELEMENT_CLASSNAME = 'ant-typography-expand';
       [text]="nzContent"
       [icon]="nzEditIcon"
       [tooltip]="nzEditTooltip"
+      [nzTriggerType]="nzTriggerType"
       (endEditing)="onEndEditing($event)"
       (startEditing)="onStartEditing()"
     ></nz-text-edit>
@@ -146,6 +147,7 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
   @Input() nzType: 'secondary' | 'warning' | 'danger' | 'success' | undefined;
   @Input() nzCopyText: string | undefined;
   @Input() nzSuffix: string | undefined;
+  @Input() nzTriggerType: NzEditTriggerState = 'icon';
   @Output() readonly nzContentChange = new EventEmitter<string>();
   @Output() readonly nzCopy = new EventEmitter<string>();
   @Output() readonly nzExpandChange = new EventEmitter<void>();
@@ -212,6 +214,12 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
     this.editing = true;
   }
 
+  onTextClickEdit(): void {
+    if (this.nzEditable && (this.nzTriggerType === 'text' || this.nzTriggerType === 'both')) {
+      this.textEditRef?.onClick();
+    }
+  }
+
   onEndEditing(text: string): void {
     this.editing = false;
     this.nzContentChange.emit(text);

components/typography/typography.spec.ts

@@ -18,6 +18,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 
 import { NzTextEditComponent } from '.';
+import { NzEditTriggerState } from './text-edit.component';
 import { NzTypographyComponent } from './typography.component';
 import { NzTypographyModule } from './typography.module';
 
@@ -543,6 +544,57 @@ describe('change detection behavior', () => {
       done();
     });
   });
+
+  it('should have default edit trigger option', () => {
+    expect(fixture.componentInstance.nzTrigger).toEqual('icon');
+  });
+
+  it('should have edit button in "both" and "icon" trigger state', () => {
+    fixture.componentInstance.nzTrigger = 'both';
+    fixture.detectChanges();
+    let editButton = componentElement.querySelector<HTMLButtonElement>('.ant-typography-edit');
+    expect(editButton).not.toBeNull();
+
+    fixture.componentInstance.nzTrigger = 'icon';
+    fixture.detectChanges();
+    editButton = componentElement.querySelector<HTMLButtonElement>('.ant-typography-edit');
+    expect(editButton).not.toBeNull();
+
+    fixture.componentInstance.nzTrigger = 'text';
+    fixture.detectChanges();
+    editButton = componentElement.querySelector<HTMLButtonElement>('.ant-typography-edit');
+    expect(editButton).toBeNull();
+  });
+
+  it('in "both" trigger state, should start editing when text is clicked', () => {
+    fixture.componentInstance.nzTrigger = 'both';
+    fixture.detectChanges();
+    let text = componentElement.querySelector<HTMLButtonElement>('span');
+    text!.click();
+    fixture.detectChanges();
+    let editingTextArea = componentElement.querySelector<HTMLButtonElement>('textarea');
+    expect(editingTextArea).not.toBeNull();
+  });
+
+  it('in "text" trigger state, should start editing when text is clicked', () => {
+    fixture.componentInstance.nzTrigger = 'text';
+    fixture.detectChanges();
+    let text = componentElement.querySelector<HTMLButtonElement>('span');
+    text!.click();
+    fixture.detectChanges();
+    let editingTextArea = componentElement.querySelector<HTMLButtonElement>('textarea');
+    expect(editingTextArea).not.toBeNull();
+  });
+
+  it('in "icon" trigger state, should not start editing when text is clicked', () => {
+    fixture.componentInstance.nzTrigger = 'icon';
+    fixture.detectChanges();
+    let text = componentElement.querySelector<HTMLButtonElement>('span');
+    text!.click();
+    fixture.detectChanges();
+    let editingTextArea = componentElement.querySelector<HTMLButtonElement>('textarea');
+    expect(editingTextArea).toBeNull();
+  });
 });
 
 @Component({
@@ -600,6 +652,7 @@ export class NzTestTypographyCopyComponent {
       nzEditable
       [nzEditIcon]="icon"
       [nzEditTooltip]="tooltip"
+      [nzTriggerType]="nzTrigger"
       (nzContentChange)="onChange($event)"
       [nzContent]="str"
     ></p>
@@ -610,6 +663,7 @@ export class NzTestTypographyEditComponent {
   str = 'This is an editable text.';
   icon = 'edit';
   tooltip?: string | null;
+  nzTrigger: NzEditTriggerState = 'icon';
 
   onChange = (text: string): void => {
     this.str = text;