Skip to content

Commit

Permalink
feat: support override icons (#165)
Browse files Browse the repository at this point in the history
  • Loading branch information
@splincode
splincode authored Aug 22, 2023
1 parent 1775ac8 commit 4dc5cd4
Show file tree
Hide file tree
Showing 41 changed files with 276 additions and 135 deletions.
2 changes: 1 addition & 1 deletion apps/demo-cypress/cypress.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const TUI_CYPRESS_CONFIG: Cypress.ConfigOptions = {
video: false,
viewportWidth,
viewportHeight,
watchForFileChanges: false,
watchForFileChanges: true,
fixturesFolder: `cypress/fixtures`,
screenshotsFolder: `cypress/screenshots`,
requestTimeout: 120_000,
Expand Down
8 changes: 5 additions & 3 deletions apps/demo-cypress/cypress/support/editor/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export function tuiOpenAnchorDropdown({containHref}: {containHref: string}): voi
}

export function tuiTrashValueByEditLink(): void {
cy.get(`tui-edit-link button[icon=tuiIconUnlinkLarge]`)
cy.get(`tui-edit-link button[automation-id="toolbar__popup-link-clear-button"]`)
.tuiWaitBeforeScreenshot()
.click();
}
Expand Down Expand Up @@ -75,7 +75,7 @@ export function tuiClearHint(): void {

export function tuiInsertLink(): void {
tuiGetDemoContent()
.find(`tui-toolbar button[icon=tuiIconLinkLarge]`)
.find(`tui-toolbar button[automation-id="toolbar__link-button"]`)
.click({force: true})
.tuiWaitBeforeScreenshot();

Expand All @@ -95,7 +95,9 @@ export function tuiGetScreenshotArea(): Cypress.Chainable<unknown> {
}

export function tuiOpenFontTool(): Cypress.Chainable<JQuery> {
tuiGetDemoContent().find(`button[icon="tuiIconFontLarge"]`).as(`iconFontLargeTool`);
tuiGetDemoContent()
.find(`button[automation-id="toolbar__font-size-button"]`)
.as(`iconFontLargeTool`);

cy.get(`body`).then($body => {
if ($body.find(`tui-data-list[role="listbox"]`).length === 0) {
Expand Down
11 changes: 1 addition & 10 deletions apps/demo-cypress/cypress/tests/editor-anchor.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ describe(`Editor's anchors`, () => {
beforeEach(() => {
cy.viewport(1280, 500).tuiVisit(`anchors`);

cy.get(`tui-doc-example[heading="Anchors"]`).tuiScrollIntoView().as(`wrapper`);
cy.get(`tui-doc-example[heading="Anchors"]`).as(`wrapper`);

cy.get(`@wrapper`).findByAutomationId(`tui-doc-example`).as(`example`);
});
Expand All @@ -14,15 +14,6 @@ describe(`Editor's anchors`, () => {
});

describe(`anchors`, () => {
beforeEach(() => {
cy.get(`@wrapper`)
.find(`h4`)
.contains(`HTML`)
.next()
.tuiScrollIntoView()
.as(`content`);
});

for (const anchor of [
`moser`,
`thirlwell`,
Expand Down
26 changes: 12 additions & 14 deletions apps/demo-cypress/cypress/tests/editor-api.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,19 +181,17 @@ describe(`Editor API`, () => {

cy.get(`@wrapper`).find(tuiGetTipTapContentSelector()).as(`editor`);

toggleBullet(`tuiIconListLarge`);
toggleBullet(`toolbar__un-ordered-list-button`);

cy.get(`@editor`).type(`1{enter}`).type(`{enter}`);

toggleBullet(`tuiIconOLLarge`);

cy.get(`@editor`).type(`A`);
cy.get(`@wrapper`)
.tuiWaitBeforeScreenshot()
.matchImageSnapshot(`6-1-bullet-and-ordered-list`);

clearEditor();
toggleBullet(`tuiIconListLarge`);
toggleBullet(`toolbar__un-ordered-list-button`);

cy.get(`@editor`).type(
`first line{shift+enter}second line{shift+enter}third line{shift+enter}{enter}first line`,
Expand All @@ -203,7 +201,7 @@ describe(`Editor API`, () => {
.matchImageSnapshot(`6-2-bullet-and-ordered-list`);

clearEditor();
toggleBullet(`tuiIconOLLarge`);
toggleBullet(`toolbar__ordered-list-button`);

cy.get(`@editor`).type(
`first line{shift+enter}second line{shift+enter}third line{shift+enter}{enter}first line`,
Expand All @@ -219,53 +217,53 @@ describe(`Editor API`, () => {

cy.get(`@wrapper`).find(tuiGetTipTapContentSelector()).as(`editor`);

toggleBullet(`tuiIconListLarge`);
toggleBullet(`toolbar__un-ordered-list-button`);
cy.get(`@editor`).type(`1{enter}`);
cy.get(`@editor`).type(`2`);
toggleBullet(`tuiIconIndentLarge`);
toggleBullet(`toolbar_indent-button`);

cy.get(`@wrapper`)
.tuiWaitBeforeScreenshot()
.matchImageSnapshot(`7-1-nested-list`);

cy.get(`@editor`).type(`{enter}`);
cy.get(`@editor`).type(`3`);
toggleBullet(`tuiIconIndentLarge`);
toggleBullet(`toolbar_indent-button`);

cy.get(`@wrapper`)
.tuiWaitBeforeScreenshot()
.matchImageSnapshot(`7-2-nested-list`);

cy.get(`@editor`).type(`{enter}`);
cy.get(`@editor`).type(`4`);
toggleBullet(`tuiIconIndentLarge`);
toggleBullet(`toolbar_indent-button`);

cy.get(`@wrapper`)
.tuiWaitBeforeScreenshot()
.matchImageSnapshot(`7-3-nested-list`);

cy.get(`@editor`).type(`{enter}`);
toggleBullet(`tuiIconOutdentLarge`);
toggleBullet(`toolbar_outdent-button`);

cy.get(`@wrapper`)
.tuiWaitBeforeScreenshot()
.matchImageSnapshot(`7-4-nested-list`);

cy.get(`@editor`).type(`{enter}`);
toggleBullet(`tuiIconOutdentLarge`);
toggleBullet(`toolbar_outdent-button`);
cy.get(`@editor`).type(`5`);

cy.get(`@wrapper`)
.tuiWaitBeforeScreenshot()
.matchImageSnapshot(`7-6-nested-list`);
});

function toggleBullet(iconType: string): void {
function toggleBullet(automationId: string): void {
cy.get(`@wrapper`)
.find(`button[icon="tuiIconListLarge"]`)
.find(`button[automation-id="toolbar__ordering-list-button"]`)
.click({force: true});
cy.get(`tui-dropdown`)
.find(`button[icon="${iconType}"]`)
.find(`button[automation-id="${automationId}"]`)
.click({force: true});
}

Expand Down
12 changes: 9 additions & 3 deletions apps/demo-cypress/cypress/tests/editor-groups.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,24 @@ describe(`Examples with groups in editor`, () => {
.tuiWaitBeforeScreenshot()
.matchImageSnapshot(`2-1-draggable-groups`);

cy.get(`@wrapper`).find(`button[icon=tuiIconPlusLarge]`).click();
cy.get(`@wrapper`)
.find(`button[automation-id="toolbar__group-add-button"]`)
.click();
cy.get(`@wrapper`).should(`be.visible`).click(); // clear hints

cy.get(`@editor`)
.tuiWaitBeforeScreenshot()
.matchImageSnapshot(`2-2-draggable-groups`);

cy.get(`@editor`).should(`be.visible`).type(`{selectall}{backspace}`);
cy.get(`@wrapper`).find(`button[icon=tuiIconPlusLarge]`).click();
cy.get(`@wrapper`)
.find(`button[automation-id="toolbar__group-add-button"]`)
.click();
cy.document().then(doc => cy.wrap(doc.activeElement, {log: false}).type(`123`));

cy.get(`@wrapper`).find(`button[icon=tuiIconPlusLarge]`).click();
cy.get(`@wrapper`)
.find(`button[automation-id="toolbar__group-add-button"]`)
.click();
cy.document().then(doc => cy.wrap(doc.activeElement, {log: false}).type(`456`));

cy.get(`@wrapper`).should(`be.visible`).tuiWaitBeforeAction().click(); // clear hints
Expand Down
4 changes: 3 additions & 1 deletion apps/demo-cypress/cypress/tests/editor-img.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,9 @@ describe(`Examples images`, () => {
});

function closePreview(): void {
cy.get(`tui-preview`).find(`button[icon=tuiIconCloseLarge]._focused`).click();
cy.get(`tui-preview`)
.find(`button[data-appearance="preview-action"]._focused`)
.click();
}
});
});
30 changes: 19 additions & 11 deletions apps/demo-cypress/cypress/tests/editor-toolbar.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,9 @@ describe(`Editor's toolbar`, () => {
.tuiWaitBeforeScreenshot()
.matchImageSnapshot(`3-1-editor-break-line`);

cy.get(`@wrapper`).find(`button[icon="tuiIconTableLarge"]`).as(`tableTool`);
cy.get(`@wrapper`)
.find(`button[automation-id="toolbar__insert-table-button"]`)
.as(`tableTool`);

cy.get(`@tableTool`).tuiFocus().click();

Expand Down Expand Up @@ -140,7 +142,7 @@ describe(`Editor's toolbar`, () => {
.should(`be.visible`)
.click();

cy.get(`button[icon="tuiIconListLarge"].t-option`)
cy.get(`button[automation-id="toolbar__un-ordered-list-button"].t-option`)
.should(`be.visible`)
.click({force: true});

Expand All @@ -155,7 +157,9 @@ describe(`Editor's toolbar`, () => {
.tuiWaitBeforeScreenshot()
.matchImageSnapshot(`4-1-set-unordered-list`);

cy.get(`@wrapper`).find(`button[icon="tuiIconTableLarge"]`).as(`tableTool`);
cy.get(`@wrapper`)
.find(`button[automation-id="toolbar__insert-table-button"]`)
.as(`tableTool`);

cy.get(`@tableTool`).tuiFocus().click();

Expand All @@ -177,10 +181,14 @@ describe(`Editor's toolbar`, () => {
tuiGetDemoContent().as(`wrapper`);

cy.get(`@wrapper`)
.find(`button[icon="tuiIconAlignLeftLarge"]`)
.find(`button[automation-id="toolbar__align-button"]`)
.as(`initialTool`);
cy.get(`@wrapper`).find(`button[icon="tuiIconFormatLarge"]`).as(`leftTool`);
cy.get(`@wrapper`).find(`button[icon="tuiIconListLarge"]`).as(`rightTool`);
cy.get(`@wrapper`)
.find(`button[automation-id="toolbar__font-style-button"]`)
.as(`leftTool`);
cy.get(`@wrapper`)
.find(`button[automation-id="toolbar__ordering-list-button"]`)
.as(`rightTool`);

cy.get(`@initialTool`).tuiFocus();

Expand All @@ -201,13 +209,13 @@ describe(`Editor's toolbar`, () => {
tuiClearEditor();

cy.get(`@wrapper`)
.find(`button[icon="tuiIconUndoLarge"]`)
.find(`button[automation-id="toolbar__undo-button"]`)
.as(`leftActiveTool`);
cy.get(`@wrapper`)
.find(`button[icon="tuiIconRedoLarge"]`)
.find(`button[automation-id="toolbar__redo-button"]`)
.as(`betweenDisabledTool`);
cy.get(`@wrapper`)
.find(`button[icon="tuiIconFontLarge"]`)
.find(`button[automation-id="toolbar__font-size-button"]`)
.as(`rightActiveTool`);

// | (active) | disabled | active |
Expand Down Expand Up @@ -239,10 +247,10 @@ describe(`Editor's toolbar`, () => {
.type(`123`, {force: true});

cy.get(`@wrapper`)
.find(`button[icon="tuiIconUndoLarge"]`)
.find(`button[automation-id="toolbar__undo-button"]`)
.as(`leftBuiltInTool`);
cy.get(`@wrapper`)
.find(`button[icon="tuiIconStarLarge"]`)
.find(`button[automation-id="smiles-tool__button"]`)
.as(`rightCustomTool`);

// ==>
Expand Down
7 changes: 6 additions & 1 deletion libs/tui-editor/components/color-selector/color-selector.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,11 @@ import {
import {DomSanitizer, SafeStyle} from '@angular/platform-browser';
import {tuiDefaultSort, tuiParseColor, tuiPure} from '@taiga-ui/cdk';
import {TuiHostedDropdownComponent} from '@taiga-ui/core';
import {TUI_EDITOR_COLOR_SELECTOR_MODE_NAMES} from '@tinkoff/tui-editor/tokens';
import {
TUI_EDITOR_COLOR_SELECTOR_MODE_NAMES,
TUI_EDITOR_OPTIONS,
TuiEditorOptions,
} from '@tinkoff/tui-editor/tokens';
import {TuiGradientDirection} from '@tinkoff/tui-editor/types';
import {tuiGetGradientData, tuiParseGradient} from '@tinkoff/tui-editor/utils';

Expand Down Expand Up @@ -67,6 +71,7 @@ export class TuiColorSelectorComponent {
];

constructor(
@Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
@Inject(DomSanitizer) private readonly sanitizer: DomSanitizer,
@Inject(TUI_EDITOR_COLOR_SELECTOR_MODE_NAMES) readonly modes: [string, string],
) {}
Expand Down
4 changes: 2 additions & 2 deletions libs/tui-editor/components/color-selector/color-selector.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
</button>
<ng-template #arrow>
<tui-svg
src="tuiIconChevronDown"
class="t-arrow"
[class.t-arrow_rotated]="dropdown.open"
[src]="options.icons.colorSelectorDropdownChevron"
></tui-svg>
</ng-template>
<ng-template #menu>
Expand All @@ -37,8 +37,8 @@
{{ mode }}
<tui-svg
*ngIf="isModeActive(mode)"
src="tuiIconCheck"
class="t-checkmark"
[src]="options.icons.colorSelectorDropdownCheck"
></tui-svg>
</button>
</tui-data-list>
Expand Down
3 changes: 1 addition & 2 deletions libs/tui-editor/components/edit-link/edit-link.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,7 @@ export class TuiEditLinkComponent {
@Inject(TUI_EDITOR_LINK_TEXTS)
readonly texts$: TuiInjectionTokenType<typeof TUI_EDITOR_LINK_TEXTS>,
@Inject(TuiTiptapEditorService) private readonly editor: AbstractTuiEditor,
@Inject(TUI_EDITOR_OPTIONS)
private readonly options: TuiEditorOptions,
@Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
) {}

get defaultProtocol(): TuiEditorLinkProtocol {
Expand Down
9 changes: 5 additions & 4 deletions libs/tui-editor/components/edit-link/edit-link.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,20 +29,20 @@
</div>
</label>
<tui-svg
src="tuiIconCloseLarge"
class="t-cleaner"
[class.t-cleaner_hidden]="!hasUrl"
[src]="options.icons.popupLinkRemove"
(click)="onClear()"
></tui-svg>
<button
appearance="icon"
icon="tuiIconCheckCircleLarge"
shape="rounded"
size="s"
title="Insert link"
tuiIconButton
type="button"
class="t-button"
[icon]="options.icons.popupLinkSave"
(click)="onSave()"
></button>
</ng-container>
Expand All @@ -59,24 +59,25 @@
</a>
<button
appearance="icon"
icon="tuiIconEdit2Large"
shape="rounded"
size="s"
title="Change link"
tuiIconButton
type="button"
class="t-button t-edit-button"
[icon]="options.icons.popupPreviewLinkEdit"
(click)="onEdit()"
></button>
<button
appearance="icon"
icon="tuiIconUnlinkLarge"
automation-id="toolbar__popup-link-clear-button"
shape="rounded"
size="s"
title="Remove link"
tuiIconButton
type="button"
class="t-button"
[icon]="options.icons.popupPreviewLinkClear"
(click)="onRemove()"
></button>
</ng-template>
Expand Down
7 changes: 6 additions & 1 deletion libs/tui-editor/components/toolbar-tools/align-content/align-content.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
import {TuiLanguageEditor} from '@taiga-ui/i18n';
import {AbstractTuiEditor} from '@tinkoff/tui-editor/abstract';
import {TuiTiptapEditorService} from '@tinkoff/tui-editor/directives';
import {TUI_EDITOR_TOOLBAR_TEXTS} from '@tinkoff/tui-editor/tokens';
import {
TUI_EDITOR_OPTIONS,
TUI_EDITOR_TOOLBAR_TEXTS,
TuiEditorOptions,
} from '@tinkoff/tui-editor/tokens';
import {combineLatest, Observable} from 'rxjs';
import {map} from 'rxjs/operators';

Expand All @@ -28,6 +32,7 @@ export class TuiAlignContentComponent {
);

constructor(
@Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
@Inject(TuiTiptapEditorService) readonly editor: AbstractTuiEditor,
@Inject(TUI_EDITOR_TOOLBAR_TEXTS)
readonly texts$: Observable<TuiLanguageEditor['toolbarTools']>,
Expand Down
Loading

0 comments on commit 4dc5cd4

Please sign in to comment.