All files / app/features/article/pages/article-edit article-edit.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (error()) {
    <app-error
        title="Ошибка"
        [message]="error()"
    />
} @else {
    <app-sidebar-action
        [order]="30"
        icon="save"
        label="Сохранить"
        priority="primary"
        [disabled]="isSaving()"
        testId="save-action"
        (activated)="save()"
    />
    <app-sidebar-action
        [order]="20"
        icon="close"
        label="Отмена"
        priority="secondary"
        [disabled]="isSaving()"
        testId="cancel-action"
        (activated)="cancel()"
    />
 
    <ui-workspace
        data-testid="article-edit"
        (activeTabChange)="onTabChange($event)"
    >
        <button
            workspaceTabBarAction
            type="button"
            class="validation-indicator"
            [class.validation-indicator--ok]="!hasProblems()"
            [uiTooltip]="validationTooltip()"
            [attr.aria-label]="validationTooltip()"
            data-testid="validation-indicator"
            (click)="toggleLintPanel()"
        >
            @if (hasErrors()) {
                <span class="validation-indicator__error">
                    <ui-icon name="error" size="small" />
                    <span>{{ validationResult().errors }}</span>
                </span>
            }
            @if (hasWarnings()) {
                <span class="validation-indicator__warning">
                    <ui-icon name="warning" size="small" />
                    <span>{{ validationResult().warnings }}</span>
                </span>
            }
            @if (!hasProblems()) {
                <ui-icon name="check_circle" size="small" />
            }
        </button>
        <ui-workspace-tab
            label="Редактор"
            icon="edit"
            [keepAlive]="true"
        >
            <ng-template>
                <lib-editor
                    data-testid="editor-container"
                    [content]="editorContent()"
                    [customExtensions]="editorExtensions"
                    [customActions]="customToolbarActions"
                    [linksStatus]="updateLinksState()"
                    (updateLinksEvent)="updateLinks($event)"
                    (contentChanged)="contentChanged($event)"
                    (validationChange)="onValidationChange($event)"
                />
            </ng-template>
        </ui-workspace-tab>
        <ui-workspace-tab
            label="Просмотр"
            icon="visibility"
        >
            <ng-template>
                <app-preview
                    [content]="editorContent()"
                    [articleId]="articleId()"
                />
            </ng-template>
        </ui-workspace-tab>
        <ui-workspace-tab
            label="Что изменено"
            icon="difference"
        >
            <ng-template>
                <app-diff-view
                    [oldText]="originalContent()"
                    [newText]="editorContent()"
                />
            </ng-template>
        </ui-workspace-tab>
    </ui-workspace>
}