From 4dc5cd4ab69786637e661fa877e5c8bdc28b069b Mon Sep 17 00:00:00 2001
From: Maksim Ivanov <omaxphp@yandex.ru>
Date: Tue, 22 Aug 2023 21:26:24 +0300
Subject: [PATCH] feat: support override icons (#165)

---
 apps/demo-cypress/cypress.config.ts           |   2 +-
 .../cypress/support/editor/helpers.ts         |   8 +-
 .../cypress/tests/editor-anchor.cy.ts         |  11 +-
 .../cypress/tests/editor-api.cy.ts            |  26 ++--
 .../cypress/tests/editor-groups.cy.ts         |  12 +-
 .../cypress/tests/editor-img.cy.ts            |   4 +-
 .../cypress/tests/editor-toolbar.cy.ts        |  30 +++--
 .../color-selector.component.ts               |   7 +-
 .../color-selector.template.html              |   4 +-
 .../edit-link/edit-link.component.ts          |   3 +-
 .../edit-link/edit-link.template.html         |   9 +-
 .../align-content/align-content.component.ts  |   7 +-
 .../align-content/align-content.template.html |  11 +-
 .../toolbar-tools/code/code.component.html    |   2 +-
 .../toolbar-tools/code/code.component.ts      |   3 +
 .../details-remove.component.ts               |   7 +-
 .../details-remove.template.html              |   2 +-
 .../details/details.component.ts              |   7 +-
 .../details/details.template.html             |   2 +-
 .../font-size/font-size.component.ts          |   3 +-
 .../font-size/font-size.template.html         |   3 +-
 .../font-style/font-style.component.ts        |   7 +-
 .../font-style/font-style.template.html       |  10 +-
 .../toolbar-tools/group/group.component.html  |   6 +-
 .../toolbar-tools/group/group.component.ts    |   7 +-
 .../highlight-color.component.ts              |   9 +-
 .../highlight-color.template.html             |   2 +-
 .../list-configs/list-configs.component.ts    |   7 +-
 .../list-configs/list-configs.template.html   |  14 ++-
 .../table-cell-color.component.ts             |   9 +-
 .../table-cell-color.template.html            |   2 +-
 .../table-create/table-create.component.ts    |   7 +-
 .../table-create/table-create.template.html   |   5 +-
 .../table-row-column-manager.component.ts     |   3 +
 .../table-row-column-manager.template.html    |   2 +-
 .../text-color/text-color.component.ts        |   7 +-
 .../text-color/text-color.template.html       |   2 +-
 .../components/toolbar/toolbar.component.ts   |   5 +-
 .../components/toolbar/toolbar.template.html  |  28 +++--
 .../tiptap-editor/tiptap-editor.service.ts    |   2 +-
 libs/tui-editor/tokens/editor-options.ts      | 114 +++++++++++++++---
 41 files changed, 276 insertions(+), 135 deletions(-)

diff --git a/apps/demo-cypress/cypress.config.ts b/apps/demo-cypress/cypress.config.ts
index 83945b846..393bb3530 100644
--- a/apps/demo-cypress/cypress.config.ts
+++ b/apps/demo-cypress/cypress.config.ts
@@ -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,
diff --git a/apps/demo-cypress/cypress/support/editor/helpers.ts b/apps/demo-cypress/cypress/support/editor/helpers.ts
index e907ed1a5..f135e72da 100644
--- a/apps/demo-cypress/cypress/support/editor/helpers.ts
+++ b/apps/demo-cypress/cypress/support/editor/helpers.ts
@@ -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();
 }
@@ -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();
 
@@ -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) {
diff --git a/apps/demo-cypress/cypress/tests/editor-anchor.cy.ts b/apps/demo-cypress/cypress/tests/editor-anchor.cy.ts
index 2f0f72b31..7de710a1c 100644
--- a/apps/demo-cypress/cypress/tests/editor-anchor.cy.ts
+++ b/apps/demo-cypress/cypress/tests/editor-anchor.cy.ts
@@ -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`);
     });
@@ -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`,
diff --git a/apps/demo-cypress/cypress/tests/editor-api.cy.ts b/apps/demo-cypress/cypress/tests/editor-api.cy.ts
index eb46e6e9e..dafee1f8c 100644
--- a/apps/demo-cypress/cypress/tests/editor-api.cy.ts
+++ b/apps/demo-cypress/cypress/tests/editor-api.cy.ts
@@ -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`,
@@ -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`,
@@ -219,10 +217,10 @@ 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()
@@ -230,7 +228,7 @@ describe(`Editor API`, () => {
 
             cy.get(`@editor`).type(`{enter}`);
             cy.get(`@editor`).type(`3`);
-            toggleBullet(`tuiIconIndentLarge`);
+            toggleBullet(`toolbar_indent-button`);
 
             cy.get(`@wrapper`)
                 .tuiWaitBeforeScreenshot()
@@ -238,21 +236,21 @@ describe(`Editor API`, () => {
 
             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`)
@@ -260,12 +258,12 @@ describe(`Editor API`, () => {
                 .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});
         }
 
diff --git a/apps/demo-cypress/cypress/tests/editor-groups.cy.ts b/apps/demo-cypress/cypress/tests/editor-groups.cy.ts
index d3371aed0..5175423c2 100644
--- a/apps/demo-cypress/cypress/tests/editor-groups.cy.ts
+++ b/apps/demo-cypress/cypress/tests/editor-groups.cy.ts
@@ -20,7 +20,9 @@ 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`)
@@ -28,10 +30,14 @@ describe(`Examples with groups in editor`, () => {
             .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
diff --git a/apps/demo-cypress/cypress/tests/editor-img.cy.ts b/apps/demo-cypress/cypress/tests/editor-img.cy.ts
index 4d97b2361..494739ef6 100644
--- a/apps/demo-cypress/cypress/tests/editor-img.cy.ts
+++ b/apps/demo-cypress/cypress/tests/editor-img.cy.ts
@@ -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();
         }
     });
 });
diff --git a/apps/demo-cypress/cypress/tests/editor-toolbar.cy.ts b/apps/demo-cypress/cypress/tests/editor-toolbar.cy.ts
index 4edbddd68..0a034d102 100644
--- a/apps/demo-cypress/cypress/tests/editor-toolbar.cy.ts
+++ b/apps/demo-cypress/cypress/tests/editor-toolbar.cy.ts
@@ -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();
 
@@ -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});
 
@@ -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();
 
@@ -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();
 
@@ -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 |
@@ -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`);
 
             // ==>
diff --git a/libs/tui-editor/components/color-selector/color-selector.component.ts b/libs/tui-editor/components/color-selector/color-selector.component.ts
index 22880f913..2b5b68f6b 100644
--- a/libs/tui-editor/components/color-selector/color-selector.component.ts
+++ b/libs/tui-editor/components/color-selector/color-selector.component.ts
@@ -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';
 
@@ -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],
     ) {}
diff --git a/libs/tui-editor/components/color-selector/color-selector.template.html b/libs/tui-editor/components/color-selector/color-selector.template.html
index a3747afca..2b7443661 100644
--- a/libs/tui-editor/components/color-selector/color-selector.template.html
+++ b/libs/tui-editor/components/color-selector/color-selector.template.html
@@ -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>
@@ -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>
diff --git a/libs/tui-editor/components/edit-link/edit-link.component.ts b/libs/tui-editor/components/edit-link/edit-link.component.ts
index 1a0655386..1f9e86ec3 100644
--- a/libs/tui-editor/components/edit-link/edit-link.component.ts
+++ b/libs/tui-editor/components/edit-link/edit-link.component.ts
@@ -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 {
diff --git a/libs/tui-editor/components/edit-link/edit-link.template.html b/libs/tui-editor/components/edit-link/edit-link.template.html
index 4e3701056..2cd8da575 100644
--- a/libs/tui-editor/components/edit-link/edit-link.template.html
+++ b/libs/tui-editor/components/edit-link/edit-link.template.html
@@ -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>
@@ -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>
diff --git a/libs/tui-editor/components/toolbar-tools/align-content/align-content.component.ts b/libs/tui-editor/components/toolbar-tools/align-content/align-content.component.ts
index 6119dc3d4..3c1d6ad77 100644
--- a/libs/tui-editor/components/toolbar-tools/align-content/align-content.component.ts
+++ b/libs/tui-editor/components/toolbar-tools/align-content/align-content.component.ts
@@ -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';
 
@@ -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']>,
diff --git a/libs/tui-editor/components/toolbar-tools/align-content/align-content.template.html b/libs/tui-editor/components/toolbar-tools/align-content/align-content.template.html
index 99c529b6c..45f0ad5a9 100644
--- a/libs/tui-editor/components/toolbar-tools/align-content/align-content.template.html
+++ b/libs/tui-editor/components/toolbar-tools/align-content/align-content.template.html
@@ -7,13 +7,14 @@
     >
         <button
             appearance="icon"
-            icon="tuiIconAlignLeftLarge"
+            automation-id="toolbar__align-button"
             size="s"
             tuiHintDescribe
             tuiHintDirection="top-left"
             tuiIconButton
             type="button"
             [focusable]="align.open"
+            [icon]="options.icons.textAlignPreview"
             [pseudoActive]="align.open"
             [tuiHint]="texts.justify"
         ></button>
@@ -21,44 +22,44 @@
             <div class="t-dropdown">
                 <button
                     appearance="icon"
-                    icon="tuiIconAlignLeftLarge"
                     size="s"
                     tuiIconButton
                     type="button"
                     class="t-option t-option_margin"
+                    [icon]="options.icons.textAlignLeft"
                     [pseudoActive]="!!alignState?.left"
                     [tuiHint]="texts.justifyLeft"
                     (click)="editor.onAlign('left')"
                 ></button>
                 <button
                     appearance="icon"
-                    icon="tuiIconAlignCenterLarge"
                     size="s"
                     tuiIconButton
                     type="button"
                     class="t-option t-option_margin"
+                    [icon]="options.icons.textAlignCenter"
                     [pseudoActive]="!!alignState?.center"
                     [tuiHint]="texts.justifyCenter"
                     (click)="editor.onAlign('center')"
                 ></button>
                 <button
                     appearance="icon"
-                    icon="tuiIconAlignRightLarge"
                     size="s"
                     tuiIconButton
                     type="button"
                     class="t-option t-option_margin"
+                    [icon]="options.icons.textAlignRight"
                     [pseudoActive]="!!alignState?.right"
                     [tuiHint]="texts.justifyRight"
                     (click)="editor.onAlign('right')"
                 ></button>
                 <button
                     appearance="icon"
-                    icon="tuiIconAlignJustifyLarge"
                     size="s"
                     tuiIconButton
                     type="button"
                     class="t-option t-option_margin"
+                    [icon]="options.icons.textAlignJustify"
                     [pseudoActive]="!!alignState?.justify"
                     [tuiHint]="texts.justifyFull"
                     (click)="editor.onAlign('justify')"
diff --git a/libs/tui-editor/components/toolbar-tools/code/code.component.html b/libs/tui-editor/components/toolbar-tools/code/code.component.html
index 8f2271c65..7395e2f68 100644
--- a/libs/tui-editor/components/toolbar-tools/code/code.component.html
+++ b/libs/tui-editor/components/toolbar-tools/code/code.component.html
@@ -4,13 +4,13 @@
 >
     <button
         appearance="icon"
-        icon="tuiIconCodeLarge"
         size="s"
         tuiHintDescribe
         tuiHintDirection="top-left"
         tuiIconButton
         type="button"
         [focusable]="codes.open"
+        [icon]="options.icons.code"
         [pseudoActive]="codes.open || (insideCode$ | async)"
         [tuiHint]="hintText$ | async"
     ></button>
diff --git a/libs/tui-editor/components/toolbar-tools/code/code.component.ts b/libs/tui-editor/components/toolbar-tools/code/code.component.ts
index a6f11da85..bc9ae7e03 100644
--- a/libs/tui-editor/components/toolbar-tools/code/code.component.ts
+++ b/libs/tui-editor/components/toolbar-tools/code/code.component.ts
@@ -4,7 +4,9 @@ import {AbstractTuiEditor} from '@tinkoff/tui-editor/abstract';
 import {TuiTiptapEditorService} from '@tinkoff/tui-editor/directives';
 import {
     TUI_EDITOR_CODE_OPTIONS,
+    TUI_EDITOR_OPTIONS,
     TUI_EDITOR_TOOLBAR_TEXTS,
+    TuiEditorOptions,
 } from '@tinkoff/tui-editor/tokens';
 import {Observable} from 'rxjs';
 import {distinctUntilChanged, map} from 'rxjs/operators';
@@ -23,6 +25,7 @@ export class TuiCodeComponent {
     );
 
     constructor(
+        @Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
         @Inject(TuiTiptapEditorService) readonly editor: AbstractTuiEditor,
         @Inject(TUI_EDITOR_TOOLBAR_TEXTS)
         readonly texts$: Observable<TuiLanguageEditor['toolbarTools']>,
diff --git a/libs/tui-editor/components/toolbar-tools/details/details-remove/details-remove.component.ts b/libs/tui-editor/components/toolbar-tools/details/details-remove/details-remove.component.ts
index 1770fb83d..adb6370f7 100644
--- a/libs/tui-editor/components/toolbar-tools/details/details-remove/details-remove.component.ts
+++ b/libs/tui-editor/components/toolbar-tools/details/details-remove/details-remove.component.ts
@@ -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 {Observable} from 'rxjs';
 import {distinctUntilChanged, map} from 'rxjs/operators';
 
@@ -21,6 +25,7 @@ export class TuiDetailsRemoveComponent {
         @Inject(TuiTiptapEditorService) readonly editor: AbstractTuiEditor,
         @Inject(TUI_EDITOR_TOOLBAR_TEXTS)
         readonly texts$: Observable<TuiLanguageEditor['toolbarTools']>,
+        @Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
     ) {}
 
     removeDetails(): void {
diff --git a/libs/tui-editor/components/toolbar-tools/details/details-remove/details-remove.template.html b/libs/tui-editor/components/toolbar-tools/details/details-remove/details-remove.template.html
index b60860051..7abe9a55d 100644
--- a/libs/tui-editor/components/toolbar-tools/details/details-remove/details-remove.template.html
+++ b/libs/tui-editor/components/toolbar-tools/details/details-remove/details-remove.template.html
@@ -1,7 +1,6 @@
 <button
     *ngIf="texts$ | async as text"
     appearance="icon"
-    icon="tuiIconSpoilerDeleteLarge"
     size="s"
     tuiHintDescribe
     tuiHintDirection="top-left"
@@ -9,6 +8,7 @@
     type="button"
     [disabled]="!!(disabled$ | async)"
     [focusable]="false"
+    [icon]="options.icons.detailsRemove"
     [tuiHint]="text.removeDetails"
     (click)="removeDetails()"
 ></button>
diff --git a/libs/tui-editor/components/toolbar-tools/details/details.component.ts b/libs/tui-editor/components/toolbar-tools/details/details.component.ts
index 281fa13d5..6eb554c61 100644
--- a/libs/tui-editor/components/toolbar-tools/details/details.component.ts
+++ b/libs/tui-editor/components/toolbar-tools/details/details.component.ts
@@ -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 {Observable} from 'rxjs';
 
 @Component({
@@ -15,6 +19,7 @@ export class TuiDetailsComponent {
         @Inject(TuiTiptapEditorService) readonly editor: AbstractTuiEditor,
         @Inject(TUI_EDITOR_TOOLBAR_TEXTS)
         readonly texts$: Observable<TuiLanguageEditor['toolbarTools']>,
+        @Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
     ) {}
 
     setDetails(): void {
diff --git a/libs/tui-editor/components/toolbar-tools/details/details.template.html b/libs/tui-editor/components/toolbar-tools/details/details.template.html
index 4505868e2..29b9f55a3 100644
--- a/libs/tui-editor/components/toolbar-tools/details/details.template.html
+++ b/libs/tui-editor/components/toolbar-tools/details/details.template.html
@@ -1,13 +1,13 @@
 <button
     *ngIf="texts$ | async as text"
     appearance="icon"
-    icon="tuiIconSpoilerLarge"
     size="s"
     tuiHintDescribe
     tuiHintDirection="top-left"
     tuiIconButton
     type="button"
     [focusable]="false"
+    [icon]="options.icons.detailsAdd"
     [tuiHint]="text.setDetails"
     (click)="setDetails()"
 ></button>
diff --git a/libs/tui-editor/components/toolbar-tools/font-size/font-size.component.ts b/libs/tui-editor/components/toolbar-tools/font-size/font-size.component.ts
index 120d3051b..93998e31d 100644
--- a/libs/tui-editor/components/toolbar-tools/font-size/font-size.component.ts
+++ b/libs/tui-editor/components/toolbar-tools/font-size/font-size.component.ts
@@ -25,8 +25,7 @@ export class TuiFontSizeComponent {
     readonly fontText$ = this.texts$.pipe(map(texts => texts.font));
 
     constructor(
-        @Inject(TUI_EDITOR_OPTIONS)
-        private readonly options: TuiEditorOptions,
+        @Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
         @Inject(TuiTiptapEditorService) readonly editor: AbstractTuiEditor,
         @Inject(TUI_EDITOR_TOOLBAR_TEXTS)
         readonly texts$: Observable<TuiLanguageEditor['toolbarTools']>,
diff --git a/libs/tui-editor/components/toolbar-tools/font-size/font-size.template.html b/libs/tui-editor/components/toolbar-tools/font-size/font-size.template.html
index b252df64b..106e3b271 100644
--- a/libs/tui-editor/components/toolbar-tools/font-size/font-size.template.html
+++ b/libs/tui-editor/components/toolbar-tools/font-size/font-size.template.html
@@ -4,13 +4,14 @@
 >
     <button
         appearance="icon"
-        icon="tuiIconFontLarge"
+        automation-id="toolbar__font-size-button"
         size="s"
         tuiHintDescribe
         tuiHintDirection="top-left"
         tuiIconButton
         type="button"
         [focusable]="fonts.open"
+        [icon]="options.icons.fontSize"
         [pseudoActive]="fonts.open"
         [tuiHint]="fontText$ | async"
     ></button>
diff --git a/libs/tui-editor/components/toolbar-tools/font-style/font-style.component.ts b/libs/tui-editor/components/toolbar-tools/font-style/font-style.component.ts
index cd5adeb33..9e6819e34 100644
--- a/libs/tui-editor/components/toolbar-tools/font-style/font-style.component.ts
+++ b/libs/tui-editor/components/toolbar-tools/font-style/font-style.component.ts
@@ -4,7 +4,11 @@ import {AbstractTuiEditor} from '@tinkoff/tui-editor/abstract';
 import {defaultEditorTools} from '@tinkoff/tui-editor/constants';
 import {TuiTiptapEditorService} from '@tinkoff/tui-editor/directives';
 import {TuiEditorTool} from '@tinkoff/tui-editor/enums';
-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';
 
@@ -39,6 +43,7 @@ export class TuiFontStyleComponent {
     );
 
     constructor(
+        @Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
         @Inject(TuiTiptapEditorService) readonly editor: AbstractTuiEditor,
         @Inject(TUI_EDITOR_TOOLBAR_TEXTS)
         readonly texts$: Observable<TuiLanguageEditor['toolbarTools']>,
diff --git a/libs/tui-editor/components/toolbar-tools/font-style/font-style.template.html b/libs/tui-editor/components/toolbar-tools/font-style/font-style.template.html
index 9a561d32c..6be8aa652 100644
--- a/libs/tui-editor/components/toolbar-tools/font-style/font-style.template.html
+++ b/libs/tui-editor/components/toolbar-tools/font-style/font-style.template.html
@@ -8,13 +8,13 @@
         <button
             appearance="icon"
             automation-id="toolbar__font-style-button"
-            icon="tuiIconFormatLarge"
             size="s"
             tuiHintDescribe
             tuiHintDirection="top-left"
             tuiIconButton
             type="button"
             [focusable]="format.open"
+            [icon]="options.icons.fontStylePreview"
             [pseudoActive]="format.open || state.bold || state.italic || state.underline || state.strike"
             [tuiHint]="texts.fontStyle"
         ></button>
@@ -23,11 +23,11 @@
                 <button
                     *ngIf="isEnabled(TuiEditorTool.Bold)"
                     appearance="icon"
-                    icon="tuiIconBoldLarge"
                     size="s"
                     tuiIconButton
                     type="button"
                     class="t-option t-option_margin"
+                    [icon]="options.icons.fontStyleBold"
                     [pseudoActive]="state.bold"
                     [tuiHint]="texts.bold"
                     (click)="editor.toggleBold()"
@@ -35,11 +35,11 @@
                 <button
                     *ngIf="isEnabled(TuiEditorTool.Italic)"
                     appearance="icon"
-                    icon="tuiIconItalicLarge"
                     size="s"
                     tuiIconButton
                     type="button"
                     class="t-option t-option_margin"
+                    [icon]="options.icons.fontStyleItalic"
                     [pseudoActive]="state.italic"
                     [tuiHint]="texts.italic"
                     (click)="editor.toggleItalic()"
@@ -47,11 +47,11 @@
                 <button
                     *ngIf="isEnabled(TuiEditorTool.Underline)"
                     appearance="icon"
-                    icon="tuiIconUnderlineLarge"
                     size="s"
                     tuiIconButton
                     type="button"
                     class="t-option t-option_margin"
+                    [icon]="options.icons.fontStyleUnderline"
                     [pseudoActive]="state.underline"
                     [tuiHint]="texts.underline"
                     (click)="editor.toggleUnderline()"
@@ -59,11 +59,11 @@
                 <button
                     *ngIf="isEnabled(TuiEditorTool.Strikethrough)"
                     appearance="icon"
-                    icon="tuiIconStrikeThroughLarge"
                     size="s"
                     tuiIconButton
                     type="button"
                     class="t-option t-option_margin"
+                    [icon]="options.icons.fontStyleStrike"
                     [pseudoActive]="state.strike"
                     [tuiHint]="texts.strikeThrough"
                     (click)="editor.toggleStrike()"
diff --git a/libs/tui-editor/components/toolbar-tools/group/group.component.html b/libs/tui-editor/components/toolbar-tools/group/group.component.html
index 54405ac67..cf2b75fd5 100644
--- a/libs/tui-editor/components/toolbar-tools/group/group.component.html
+++ b/libs/tui-editor/components/toolbar-tools/group/group.component.html
@@ -1,24 +1,26 @@
 <button
     appearance="icon"
-    icon="tuiIconPlusLarge"
+    automation-id="toolbar__group-add-button"
     size="s"
     tuiHintDescribe
     tuiIconButton
     type="button"
     [focusable]="false"
+    [icon]="options.icons.groupAdd"
     [tuiHint]="insertGroupText$ | async"
     (click)="addGroup()"
 ></button>
 
 <button
     appearance="icon"
-    icon="tuiIconCloseLarge"
+    automation-id="toolbar__group-remove-button"
     size="s"
     tuiHintDescribe
     tuiIconButton
     type="button"
     [disabled]="!!(disabled$ | async)"
     [focusable]="false"
+    [icon]="options.icons.groupRemove"
     [tuiHint]="removeGroupText$ | async"
     (click)="removeGroup()"
 ></button>
diff --git a/libs/tui-editor/components/toolbar-tools/group/group.component.ts b/libs/tui-editor/components/toolbar-tools/group/group.component.ts
index 1bb306996..8c926942a 100644
--- a/libs/tui-editor/components/toolbar-tools/group/group.component.ts
+++ b/libs/tui-editor/components/toolbar-tools/group/group.component.ts
@@ -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 {Observable} from 'rxjs';
 import {distinctUntilChanged, map} from 'rxjs/operators';
 
@@ -25,6 +29,7 @@ export class TuiEditorGroupToolComponent {
         @Inject(TuiTiptapEditorService) readonly editor: AbstractTuiEditor,
         @Inject(TUI_EDITOR_TOOLBAR_TEXTS)
         readonly texts$: Observable<TuiLanguageEditor['toolbarTools']>,
+        @Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
     ) {}
 
     addGroup(): void {
diff --git a/libs/tui-editor/components/toolbar-tools/highlight-color/highlight-color.component.ts b/libs/tui-editor/components/toolbar-tools/highlight-color/highlight-color.component.ts
index 5156c2d0c..ac63abde8 100644
--- a/libs/tui-editor/components/toolbar-tools/highlight-color/highlight-color.component.ts
+++ b/libs/tui-editor/components/toolbar-tools/highlight-color/highlight-color.component.ts
@@ -18,24 +18,23 @@ import {distinctUntilChanged, map} from 'rxjs/operators';
 })
 export class TuiHighlightColorComponent {
     @Input()
-    colors: ReadonlyMap<string, string> = this.defaultOptions.colors;
+    colors: ReadonlyMap<string, string> = this.options.colors;
 
     readonly backgroundColor$ = this.editor.stateChange$.pipe(
-        map(() => this.editor.getBackgroundColor() || this.defaultOptions.blankColor),
+        map(() => this.editor.getBackgroundColor() || this.options.blankColor),
         distinctUntilChanged(),
     );
 
     readonly backColorText$ = this.texts$.pipe(map(texts => texts.backColor));
 
     constructor(
+        @Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
         @Inject(TuiTiptapEditorService) readonly editor: AbstractTuiEditor,
         @Inject(TUI_EDITOR_TOOLBAR_TEXTS)
         readonly texts$: Observable<TuiLanguageEditor['toolbarTools']>,
-        @Inject(TUI_EDITOR_OPTIONS)
-        private readonly defaultOptions: TuiEditorOptions,
     ) {}
 
     isBlankColor(color: string): boolean {
-        return color === this.defaultOptions.blankColor;
+        return color === this.options.blankColor;
     }
 }
diff --git a/libs/tui-editor/components/toolbar-tools/highlight-color/highlight-color.template.html b/libs/tui-editor/components/toolbar-tools/highlight-color/highlight-color.template.html
index a7a07fce1..589323c77 100644
--- a/libs/tui-editor/components/toolbar-tools/highlight-color/highlight-color.template.html
+++ b/libs/tui-editor/components/toolbar-tools/highlight-color/highlight-color.template.html
@@ -8,7 +8,6 @@
     <button
         appearance="icon"
         automation-id="toolbar__hilite-button"
-        icon="tuiIconHiliteLarge"
         size="s"
         tuiHintDescribe
         tuiHintDirection="top-left"
@@ -16,6 +15,7 @@
         type="button"
         class="t-tool"
         [focusable]="hilite.open"
+        [icon]="options.icons.textHilite"
         [pseudoActive]="hilite.open"
         [tuiHint]="backColorText$ | async"
     ></button>
diff --git a/libs/tui-editor/components/toolbar-tools/list-configs/list-configs.component.ts b/libs/tui-editor/components/toolbar-tools/list-configs/list-configs.component.ts
index 13df03c3a..1ce8b0d54 100644
--- a/libs/tui-editor/components/toolbar-tools/list-configs/list-configs.component.ts
+++ b/libs/tui-editor/components/toolbar-tools/list-configs/list-configs.component.ts
@@ -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';
 
@@ -24,6 +28,7 @@ export class TuiListConfigsComponent {
     );
 
     constructor(
+        @Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
         @Inject(TuiTiptapEditorService) readonly editor: AbstractTuiEditor,
         @Inject(TUI_EDITOR_TOOLBAR_TEXTS)
         readonly texts$: Observable<TuiLanguageEditor['toolbarTools']>,
diff --git a/libs/tui-editor/components/toolbar-tools/list-configs/list-configs.template.html b/libs/tui-editor/components/toolbar-tools/list-configs/list-configs.template.html
index 4af876dea..546855353 100644
--- a/libs/tui-editor/components/toolbar-tools/list-configs/list-configs.template.html
+++ b/libs/tui-editor/components/toolbar-tools/list-configs/list-configs.template.html
@@ -8,13 +8,13 @@
         <button
             appearance="icon"
             automation-id="toolbar__ordering-list-button"
-            icon="tuiIconListLarge"
             size="s"
             tuiHintDescribe
             tuiHintDirection="top-left"
             tuiIconButton
             type="button"
             [focusable]="list.open"
+            [icon]="options.icons.listPreview"
             [pseudoActive]="list?.open || listState?.unordered || listState?.ordered || false"
             [tuiHint]="texts.list"
         ></button>
@@ -22,45 +22,49 @@
             <div class="t-dropdown">
                 <button
                     appearance="icon"
-                    icon="tuiIconListLarge"
+                    automation-id="toolbar__un-ordered-list-button"
                     size="s"
                     tuiIconButton
                     type="button"
                     class="t-option t-option_margin"
+                    [icon]="options.icons.listUnOrdered"
                     [pseudoActive]="!!listState?.unordered"
                     [tuiHint]="texts.unorderedList"
                     (click)="editor.toggleUnorderedList()"
                 ></button>
                 <button
                     appearance="icon"
-                    icon="tuiIconOLLarge"
+                    automation-id="toolbar__ordered-list-button"
                     size="s"
                     tuiIconButton
                     type="button"
                     class="t-option t-option_margin"
+                    [icon]="options.icons.listOrdered"
                     [pseudoActive]="!!listState?.ordered"
                     [tuiHint]="texts.orderedList"
                     (click)="editor.toggleOrderedList()"
                 ></button>
                 <button
                     appearance="icon"
-                    icon="tuiIconIndentLarge"
+                    automation-id="toolbar_indent-button"
                     size="s"
                     tuiIconButton
                     type="button"
                     class="t-option t-option_margin"
                     [disabled]="(!listState?.ordered && !listState?.unordered) || false"
+                    [icon]="options.icons.indent"
                     [tuiHint]="texts.indent"
                     (click)="sinkListItem()"
                 ></button>
                 <button
                     appearance="icon"
-                    icon="tuiIconOutdentLarge"
+                    automation-id="toolbar_outdent-button"
                     size="s"
                     tuiIconButton
                     type="button"
                     class="t-option"
                     [disabled]="(!listState?.ordered && !listState?.unordered) || false"
+                    [icon]="options.icons.outdent"
                     [tuiHint]="texts.outdent"
                     (click)="liftListItem()"
                 ></button>
diff --git a/libs/tui-editor/components/toolbar-tools/table-cell-color/table-cell-color.component.ts b/libs/tui-editor/components/toolbar-tools/table-cell-color/table-cell-color.component.ts
index 847c12453..384c6fde7 100644
--- a/libs/tui-editor/components/toolbar-tools/table-cell-color/table-cell-color.component.ts
+++ b/libs/tui-editor/components/toolbar-tools/table-cell-color/table-cell-color.component.ts
@@ -18,7 +18,7 @@ import {distinctUntilChanged, map} from 'rxjs/operators';
 })
 export class TuiTableCellColorComponent {
     @Input()
-    colors: ReadonlyMap<string, string> = this.defaultOptions.colors;
+    colors: ReadonlyMap<string, string> = this.options.colors;
 
     readonly colorText$ = this.texts$.pipe(
         map(
@@ -39,21 +39,20 @@ export class TuiTableCellColorComponent {
             () =>
                 this.editor.getCellColor() ||
                 this.editor.getGroupColor() ||
-                this.defaultOptions.blankColor,
+                this.options.blankColor,
         ),
         distinctUntilChanged(),
     );
 
     constructor(
-        @Inject(TUI_EDITOR_OPTIONS)
-        private readonly defaultOptions: TuiEditorOptions,
+        @Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
         @Inject(TuiTiptapEditorService) readonly editor: AbstractTuiEditor,
         @Inject(TUI_EDITOR_TOOLBAR_TEXTS)
         readonly texts$: Observable<TuiLanguageEditor['toolbarTools']>,
     ) {}
 
     isBlankColor(color: string): boolean {
-        return color === this.defaultOptions.blankColor;
+        return color === this.options.blankColor;
     }
 
     setCellColor(color: string): void {
diff --git a/libs/tui-editor/components/toolbar-tools/table-cell-color/table-cell-color.template.html b/libs/tui-editor/components/toolbar-tools/table-cell-color/table-cell-color.template.html
index 308b4ecda..be8891257 100644
--- a/libs/tui-editor/components/toolbar-tools/table-cell-color/table-cell-color.template.html
+++ b/libs/tui-editor/components/toolbar-tools/table-cell-color/table-cell-color.template.html
@@ -8,7 +8,6 @@
     >
         <button
             appearance="icon"
-            icon="tuiIconPaintLarge"
             size="s"
             tuiHintDescribe
             tuiHintDirection="top-left"
@@ -16,6 +15,7 @@
             type="button"
             [disabled]="!isActive"
             [focusable]="colorSelect.open"
+            [icon]="options.icons.paint"
             [pseudoActive]="colorSelect.open"
             [tuiHint]="colorText$ | async"
         ></button>
diff --git a/libs/tui-editor/components/toolbar-tools/table-create/table-create.component.ts b/libs/tui-editor/components/toolbar-tools/table-create/table-create.component.ts
index 27922efce..47b288ed8 100644
--- a/libs/tui-editor/components/toolbar-tools/table-create/table-create.component.ts
+++ b/libs/tui-editor/components/toolbar-tools/table-create/table-create.component.ts
@@ -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 {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 
@@ -15,6 +19,7 @@ export class TuiTableCreateComponent {
     readonly insertTableText$ = this.texts$.pipe(map(texts => texts.insertTable));
 
     constructor(
+        @Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
         @Inject(TuiTiptapEditorService) readonly editor: AbstractTuiEditor,
         @Inject(TUI_EDITOR_TOOLBAR_TEXTS)
         readonly texts$: Observable<TuiLanguageEditor['toolbarTools']>,
diff --git a/libs/tui-editor/components/toolbar-tools/table-create/table-create.template.html b/libs/tui-editor/components/toolbar-tools/table-create/table-create.template.html
index a69521626..bd6b265d8 100644
--- a/libs/tui-editor/components/toolbar-tools/table-create/table-create.template.html
+++ b/libs/tui-editor/components/toolbar-tools/table-create/table-create.template.html
@@ -6,17 +6,18 @@
 >
     <button
         appearance="icon"
-        icon="tuiIconTableLarge"
+        automation-id="toolbar__insert-table-button"
         size="s"
         tuiHintDescribe
         tuiHintDirection="top-left"
         tuiIconButton
         type="button"
         [focusable]="table.open"
+        [icon]="options.icons.insertTable"
         [tuiHint]="insertTableText$ | async"
     ></button>
 </tui-hosted-dropdown>
 
 <ng-template #tableDropdown>
-    <tui-table-size-selector (onSelectSize)="addTable($event)"></tui-table-size-selector>
+    <tui-table-size-selector (selectSize)="addTable($event)"></tui-table-size-selector>
 </ng-template>
diff --git a/libs/tui-editor/components/toolbar-tools/table-row-column-manager/table-row-column-manager.component.ts b/libs/tui-editor/components/toolbar-tools/table-row-column-manager/table-row-column-manager.component.ts
index 361f9b73f..9352da9d5 100644
--- a/libs/tui-editor/components/toolbar-tools/table-row-column-manager/table-row-column-manager.component.ts
+++ b/libs/tui-editor/components/toolbar-tools/table-row-column-manager/table-row-column-manager.component.ts
@@ -3,8 +3,10 @@ import {TuiLanguageEditor} from '@taiga-ui/i18n';
 import {AbstractTuiEditor} from '@tinkoff/tui-editor/abstract';
 import {TuiTiptapEditorService} from '@tinkoff/tui-editor/directives';
 import {
+    TUI_EDITOR_OPTIONS,
     TUI_EDITOR_TABLE_COMMANDS,
     TUI_EDITOR_TOOLBAR_TEXTS,
+    TuiEditorOptions,
 } from '@tinkoff/tui-editor/tokens';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
@@ -42,6 +44,7 @@ export class TuiTableRowColumnManagerComponent {
     );
 
     constructor(
+        @Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
         @Inject(TuiTiptapEditorService) readonly editor: AbstractTuiEditor,
         @Inject(TUI_EDITOR_TOOLBAR_TEXTS)
         readonly texts$: Observable<TuiLanguageEditor['toolbarTools']>,
diff --git a/libs/tui-editor/components/toolbar-tools/table-row-column-manager/table-row-column-manager.template.html b/libs/tui-editor/components/toolbar-tools/table-row-column-manager/table-row-column-manager.template.html
index 219a601cf..31ae7258d 100644
--- a/libs/tui-editor/components/toolbar-tools/table-row-column-manager/table-row-column-manager.template.html
+++ b/libs/tui-editor/components/toolbar-tools/table-row-column-manager/table-row-column-manager.template.html
@@ -6,7 +6,6 @@
 >
     <button
         appearance="icon"
-        icon="tuiIconAddRowLarge"
         size="s"
         tuiHintDescribe
         tuiHintDirection="top-left"
@@ -14,6 +13,7 @@
         type="button"
         [disabled]="!active"
         [focusable]="tableCommand.open"
+        [icon]="options.icons.addRowTable"
         [tuiHint]="rowsColumnsManagingText$ | async"
     ></button>
 </tui-hosted-dropdown>
diff --git a/libs/tui-editor/components/toolbar-tools/text-color/text-color.component.ts b/libs/tui-editor/components/toolbar-tools/text-color/text-color.component.ts
index e2609f950..96dfab3cb 100644
--- a/libs/tui-editor/components/toolbar-tools/text-color/text-color.component.ts
+++ b/libs/tui-editor/components/toolbar-tools/text-color/text-color.component.ts
@@ -18,18 +18,17 @@ import {distinctUntilChanged, map} from 'rxjs/operators';
 })
 export class TuiTextColorComponent {
     @Input()
-    colors: ReadonlyMap<string, string> = this.defaultOptions.colors;
+    colors: ReadonlyMap<string, string> = this.options.colors;
 
     readonly fontColor$ = this.editor.stateChange$.pipe(
-        map(() => this.editor.getFontColor() || this.defaultOptions.blankColor),
+        map(() => this.editor.getFontColor() || this.options.blankColor),
         distinctUntilChanged(),
     );
 
     readonly foreColorText$ = this.texts$.pipe(map(texts => texts.foreColor));
 
     constructor(
-        @Inject(TUI_EDITOR_OPTIONS)
-        private readonly defaultOptions: TuiEditorOptions,
+        @Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
         @Inject(TuiTiptapEditorService) readonly editor: AbstractTuiEditor,
         @Inject(TUI_EDITOR_TOOLBAR_TEXTS)
         readonly texts$: Observable<TuiLanguageEditor['toolbarTools']>,
diff --git a/libs/tui-editor/components/toolbar-tools/text-color/text-color.template.html b/libs/tui-editor/components/toolbar-tools/text-color/text-color.template.html
index 9742534a6..4a97e8706 100644
--- a/libs/tui-editor/components/toolbar-tools/text-color/text-color.template.html
+++ b/libs/tui-editor/components/toolbar-tools/text-color/text-color.template.html
@@ -9,13 +9,13 @@
     <button
         appearance="icon"
         automation-id="toolbar__color-button"
-        icon="tuiIconColorLarge"
         size="s"
         tuiHintDescribe
         tuiHintDirection="top-left"
         tuiIconButton
         type="button"
         [focusable]="color.open"
+        [icon]="options.icons.textColor"
         [pseudoActive]="color.open"
         [tuiHint]="foreColorText$ | async"
     ></button>
diff --git a/libs/tui-editor/components/toolbar/toolbar.component.ts b/libs/tui-editor/components/toolbar/toolbar.component.ts
index db5dc8d6e..e35f87809 100644
--- a/libs/tui-editor/components/toolbar/toolbar.component.ts
+++ b/libs/tui-editor/components/toolbar/toolbar.component.ts
@@ -60,7 +60,7 @@ export class TuiToolbarComponent {
     private readonly navigationManager?: TuiToolbarNavigationManagerDirective;
 
     @Input()
-    colors: ReadonlyMap<string, string> = this.defaultOptions.colors;
+    colors: ReadonlyMap<string, string> = this.options.colors;
 
     @Input()
     @HostBinding('class._disabled')
@@ -100,8 +100,7 @@ export class TuiToolbarComponent {
         > | null,
         @Inject(TUI_EDITOR_TOOLBAR_TEXTS)
         readonly texts$: Observable<TuiLanguageEditor['toolbarTools']>,
-        @Inject(TUI_EDITOR_OPTIONS)
-        private readonly defaultOptions: TuiEditorOptions,
+        @Inject(TUI_EDITOR_OPTIONS) readonly options: TuiEditorOptions,
         @Self()
         @Inject(TuiDestroyService)
         private readonly destroy$: TuiDestroyService,
diff --git a/libs/tui-editor/components/toolbar/toolbar.template.html b/libs/tui-editor/components/toolbar/toolbar.template.html
index aae361327..4bf9c6bae 100644
--- a/libs/tui-editor/components/toolbar/toolbar.template.html
+++ b/libs/tui-editor/components/toolbar/toolbar.template.html
@@ -25,7 +25,7 @@
     >
         <button
             appearance="icon"
-            icon="tuiIconUndoLarge"
+            automation-id="toolbar__undo-button"
             size="s"
             tuiHintDescribe
             tuiHintDirection="top-left"
@@ -35,12 +35,13 @@
             class="t-tool t-tool_margin"
             [disabled]="undoDisabled"
             [focusable]="false"
+            [icon]="options.icons.undo"
             [tuiHint]="texts.undo"
             (click)="undo()"
         ></button>
         <button
             appearance="icon"
-            icon="tuiIconRedoLarge"
+            automation-id="toolbar__redo-button"
             size="s"
             tuiHintDescribe
             tuiHintDirection="top-left"
@@ -50,6 +51,7 @@
             class="t-tool t-tool_margin"
             [disabled]="redoDisabled"
             [focusable]="false"
+            [icon]="options.icons.redo"
             [tuiHint]="texts.redo"
             (click)="redo()"
         ></button>
@@ -90,7 +92,7 @@
             *ngIf="enabled(TuiEditorTool.Quote)"
             #button
             appearance="icon"
-            icon="tuiIconQuoteLarge"
+            automation-id="toolbar__quote-button"
             size="s"
             tuiHintDescribe
             tuiHintDirection="top-left"
@@ -100,6 +102,7 @@
             class="t-tool t-tool_margin"
             [disabled]="unorderedList || orderedList"
             [focusable]="false"
+            [icon]="options.icons.quote"
             [pseudoActive]="blockquote"
             [tuiHint]="texts.quote"
             (click)="toggleQuote()"
@@ -115,7 +118,7 @@
             <button
                 #button
                 appearance="icon"
-                icon="tuiIconLinkLarge"
+                automation-id="toolbar__link-button"
                 size="s"
                 tuiHintDescribe
                 tuiHintDirection="top-left"
@@ -123,6 +126,7 @@
                 type="button"
                 class="t-tool"
                 [focusable]="link.open"
+                [icon]="options.icons.link"
                 [pseudoActive]="link.open || a"
                 [tuiHint]="texts.link"
             ></button>
@@ -143,13 +147,13 @@
         >
             <button
                 appearance="icon"
-                icon="tuiIconAnchorLarge"
                 size="s"
                 tuiHintDescribe
                 tuiHintDirection="top-left"
                 tuiIconButton
                 type="button"
                 [focusable]="false"
+                [icon]="options.icons.anchor"
                 [pseudoActive]="anchor.open || jumpAnchor"
                 [tuiHint]="texts.insertAnchor"
             ></button>
@@ -165,7 +169,6 @@
             <button
                 #button
                 appearance="icon"
-                icon="tuiIconPaperclipLarge"
                 size="s"
                 tuiHintDescribe
                 tuiHintDirection="top-left"
@@ -174,6 +177,7 @@
                 type="button"
                 class="t-tool t-tool_margin"
                 [focusable]="false"
+                [icon]="options.icons.attach"
                 [tuiHint]="texts.attach"
                 (click)="fileUpload.click()"
             ></button>
@@ -197,7 +201,6 @@
             *ngIf="enabled(TuiEditorTool.Sub)"
             #button
             appearance="icon"
-            icon="tuiIconSubscriptLarge"
             size="s"
             tuiHintDescribe
             tuiHintDirection="top-left"
@@ -206,6 +209,7 @@
             type="button"
             class="t-tool t-tool_margin"
             [focusable]="false"
+            [icon]="options.icons.sub"
             [pseudoActive]="subscript"
             [tuiHint]="texts.subscript"
             (click)="toggleSubscript()"
@@ -214,7 +218,6 @@
             *ngIf="enabled(TuiEditorTool.Sup)"
             #button
             appearance="icon"
-            icon="tuiIconSuperscriptLarge"
             size="s"
             tuiHintDescribe
             tuiHintDirection="top-left"
@@ -223,6 +226,7 @@
             type="button"
             class="t-tool t-tool_margin"
             [focusable]="false"
+            [icon]="options.icons.sup"
             [pseudoActive]="superscript"
             [tuiHint]="texts.superscript"
             (click)="toggleSuperscript()"
@@ -260,7 +264,6 @@
             *ngIf="enabled(TuiEditorTool.Tex)"
             #button
             appearance="icon"
-            icon="tuiIconTeXLarge"
             size="s"
             tuiHintDescribe
             tuiHintDirection="top-left"
@@ -269,6 +272,7 @@
             type="button"
             class="t-tool"
             [focusable]="false"
+            [icon]="options.icons.tex"
             [tuiHint]="texts.tex"
             (click)="onTeX()"
         ></button>
@@ -280,7 +284,6 @@
             <button
                 #button
                 appearance="icon"
-                icon="tuiIconImageLarge"
                 size="s"
                 tuiHintDescribe
                 tuiHintDirection="top-left"
@@ -288,6 +291,7 @@
                 type="button"
                 class="t-tool"
                 [focusable]="false"
+                [icon]="options.icons.image"
                 [tuiHint]="texts.image"
                 (click)="image.click()"
             ></button>
@@ -305,7 +309,6 @@
             *ngIf="enabled(TuiEditorTool.HR)"
             #button
             appearance="icon"
-            icon="tuiIconHrLarge"
             size="s"
             tuiHintDescribe
             tuiHintDirection="top-left"
@@ -314,6 +317,7 @@
             type="button"
             class="t-tool t-tool_margin"
             [focusable]="false"
+            [icon]="options.icons.hr"
             [tuiHint]="texts.insertHorizontalRule"
             (click)="insertHorizontalRule()"
         ></button>
@@ -325,7 +329,6 @@
         <button
             #button
             appearance="icon"
-            icon="tuiIconClearFormatLarge"
             size="s"
             tuiHintDescribe
             tuiHintDirection="top-left"
@@ -334,6 +337,7 @@
             type="button"
             class="t-tool t-tool_margin"
             [focusable]="false"
+            [icon]="options.icons.clear"
             [tuiHint]="texts.clear"
             (click)="removeFormat()"
         ></button>
diff --git a/libs/tui-editor/directives/tiptap-editor/tiptap-editor.service.ts b/libs/tui-editor/directives/tiptap-editor/tiptap-editor.service.ts
index ede5440bf..ce6d4d4b3 100644
--- a/libs/tui-editor/directives/tiptap-editor/tiptap-editor.service.ts
+++ b/libs/tui-editor/directives/tiptap-editor/tiptap-editor.service.ts
@@ -35,7 +35,7 @@ export class TuiTiptapEditorService extends AbstractTuiEditor {
     }
 
     set editable(editable: boolean) {
-        this.editor.setEditable(editable);
+        this.editor.setEditable(editable, false);
     }
 
     get state(): EditorState {
diff --git a/libs/tui-editor/tokens/editor-options.ts b/libs/tui-editor/tokens/editor-options.ts
index 301b9beb0..8a4a567b0 100644
--- a/libs/tui-editor/tokens/editor-options.ts
+++ b/libs/tui-editor/tokens/editor-options.ts
@@ -1,4 +1,5 @@
-import {InjectionToken, ValueProvider} from '@angular/core';
+import {Provider} from '@angular/core';
+import {tuiCreateOptions, tuiProvideOptions} from '@taiga-ui/cdk';
 import {
     defaultEditorColors,
     EDITOR_BLANK_COLOR,
@@ -14,6 +15,52 @@ export interface TuiEditorOptions {
     readonly colors: ReadonlyMap<string, string>;
     readonly fontOptions: typeof tuiDefaultFontOptionsHandler;
     readonly linkOptions?: TuiEditorLinkOptions;
+    readonly icons: {
+        readonly undo: string;
+        readonly redo: string;
+        readonly quote: string;
+        readonly link: string;
+        readonly anchor: string;
+        readonly attach: string;
+        readonly sub: string;
+        readonly sup: string;
+        readonly tex: string;
+        readonly image: string;
+        readonly hr: string;
+        readonly clear: string;
+        readonly groupAdd: string;
+        readonly groupRemove: string;
+        readonly detailsAdd: string;
+        readonly detailsRemove: string;
+        readonly popupLinkSave: string;
+        readonly popupLinkRemove: string;
+        readonly popupPreviewLinkEdit: string;
+        readonly popupPreviewLinkClear: string;
+        readonly paint: string;
+        readonly textAlignPreview: string;
+        readonly textAlignLeft: string;
+        readonly textAlignCenter: string;
+        readonly textAlignRight: string;
+        readonly textAlignJustify: string;
+        readonly textColor: string;
+        readonly textHilite: string;
+        readonly listPreview: string;
+        readonly listUnOrdered: string;
+        readonly listOrdered: string;
+        readonly indent: string;
+        readonly outdent: string;
+        readonly fontSize: string;
+        readonly insertTable: string;
+        readonly addRowTable: string;
+        readonly code: string;
+        readonly fontStylePreview: string;
+        readonly fontStyleBold: string;
+        readonly fontStyleItalic: string;
+        readonly fontStyleUnderline: string;
+        readonly fontStyleStrike: string;
+        readonly colorSelectorDropdownChevron: string;
+        readonly colorSelectorDropdownCheck: string;
+    };
 }
 
 export const TUI_EDITOR_DEFAULT_OPTIONS: TuiEditorOptions = {
@@ -23,23 +70,56 @@ export const TUI_EDITOR_DEFAULT_OPTIONS: TuiEditorOptions = {
     blankColor: EDITOR_BLANK_COLOR,
     linkOptions: TUI_DEFAULT_LINK_OPTIONS,
     fontOptions: tuiDefaultFontOptionsHandler,
+    icons: {
+        undo: `tuiIconUndoLarge`,
+        redo: `tuiIconRedoLarge`,
+        quote: `tuiIconQuoteLarge`,
+        link: `tuiIconLinkLarge`,
+        anchor: `tuiIconAnchorLarge`,
+        attach: `tuiIconPaperclipLarge`,
+        sub: `tuiIconSubscriptLarge`,
+        sup: `tuiIconSuperscriptLarge`,
+        tex: `tuiIconTeXLarge`,
+        image: `tuiIconImageLarge`,
+        hr: `tuiIconHrLarge`,
+        clear: `tuiIconClearFormatLarge`,
+        groupAdd: `tuiIconPlusLarge`,
+        groupRemove: `tuiIconCloseLarge`,
+        detailsAdd: `tuiIconSpoilerLarge`,
+        detailsRemove: `tuiIconSpoilerDeleteLarge`,
+        popupLinkSave: `tuiIconCheckCircleLarge`,
+        popupLinkRemove: `tuiIconCloseLarge`,
+        popupPreviewLinkEdit: `tuiIconEdit2Large`,
+        popupPreviewLinkClear: `tuiIconUnlinkLarge`,
+        paint: `tuiIconPaintLarge`,
+        textAlignPreview: `tuiIconAlignLeftLarge`,
+        textAlignLeft: `tuiIconAlignLeftLarge`,
+        textAlignCenter: `tuiIconAlignCenterLarge`,
+        textAlignRight: `tuiIconAlignRightLarge`,
+        textAlignJustify: `tuiIconAlignJustifyLarge`,
+        textColor: `tuiIconColorLarge`,
+        textHilite: `tuiIconHiliteLarge`,
+        listPreview: `tuiIconListLarge`,
+        listUnOrdered: `tuiIconListLarge`,
+        listOrdered: `tuiIconOLLarge`,
+        indent: `tuiIconIndentLarge`,
+        outdent: `tuiIconOutdentLarge`,
+        fontSize: `tuiIconFontLarge`,
+        insertTable: `tuiIconTableLarge`,
+        addRowTable: `tuiIconAddRowLarge`,
+        code: `tuiIconCodeLarge`,
+        fontStylePreview: `tuiIconFormatLarge`,
+        fontStyleBold: `tuiIconBoldLarge`,
+        fontStyleItalic: `tuiIconItalicLarge`,
+        fontStyleUnderline: `tuiIconUnderlineLarge`,
+        fontStyleStrike: `tuiIconStrikeThroughLarge`,
+        colorSelectorDropdownChevron: `tuiIconChevronDown`,
+        colorSelectorDropdownCheck: `tuiIconCheck`,
+    },
 };
 
-/**
- * Default Editor colors
- */
-export const TUI_EDITOR_OPTIONS = new InjectionToken<TuiEditorOptions>(
-    `[TUI_EDITOR_OPTIONS]`,
-    {
-        factory: () => TUI_EDITOR_DEFAULT_OPTIONS,
-    },
-);
+export const TUI_EDITOR_OPTIONS = tuiCreateOptions(TUI_EDITOR_DEFAULT_OPTIONS);
 
-export function tuiEditorOptionsProvider(
-    options: Partial<TuiEditorOptions>,
-): ValueProvider {
-    return {
-        provide: TUI_EDITOR_OPTIONS,
-        useValue: {...TUI_EDITOR_DEFAULT_OPTIONS, ...options},
-    };
+export function tuiEditorOptionsProvider(options: Partial<TuiEditorOptions>): Provider {
+    return tuiProvideOptions(TUI_EDITOR_OPTIONS, options, TUI_EDITOR_DEFAULT_OPTIONS);
 }