feat: support readOnly

taiga-family · Aug 1, 2024 · d70a325 · d70a325
1 parent 4d8d40c
commit d70a325
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 3 deletions.
diff --git a/projects/demo/src/app/pages/starter/index.html b/projects/demo/src/app/pages/starter/index.html
@@ -8,6 +8,7 @@
                 [exampleText]="exampleText"
                 [floatingToolbar]="floating"
                 [formControl]="control"
+                [readOnly]="readOnly"
                 [style.max-height.px]="maxHeight"
                 [style.min-height.px]="minHeight"
                 [tools]="tools"
@@ -44,6 +45,13 @@ <h4>Text:</h4>
                 <code>formControl.disable()</code>
                 )
             </ng-template>
+            <ng-template
+                documentationPropertyName="[readOnly]"
+                documentationPropertyType="boolean"
+                [(documentationPropertyValue)]="readOnly"
+            >
+                Readonly mode
+            </ng-template>
             <ng-template
                 documentationPropertyName="[floatingToolbar]"
                 documentationPropertyType="boolean"

diff --git a/projects/demo/src/app/pages/starter/index.ts b/projects/demo/src/app/pages/starter/index.ts
@@ -79,6 +79,7 @@ export default class TuiEditorStarter {
     ];
 
     protected tools = this.toolsVariants[0];
+    protected readOnly = false;
     protected floating = false;
     protected preview = true;
 

diff --git a/projects/editor/src/components/editor/editor.component.html b/projects/editor/src/components/editor/editor.component.html
@@ -8,7 +8,7 @@
     <div class="t-toolbar-wrapper">
         <tui-toolbar
             *ngIf="editorLoaded && !floatingToolbar"
-            [disabled]="!interactive"
+            [disabled]="!interactive || readOnly()"
             [tools]="tools"
             (fileAttached)="fileAttached.emit($event)"
         >
@@ -69,7 +69,7 @@
                 <div [class.t-floating]="floatingToolbar">
                     <tui-toolbar
                         *ngIf="editorLoaded && floatingToolbar"
-                        [disabled]="!interactive"
+                        [disabled]="!interactive || readOnly()"
                         [tools]="tools"
                         (fileAttached)="fileAttached.emit($event)"
                     >

diff --git a/projects/editor/src/components/editor/editor.component.ts b/projects/editor/src/components/editor/editor.component.ts
@@ -143,6 +143,11 @@ export class TuiEditor extends TuiControl<string> implements OnDestroy {
     public focused = false;
     public readonly editorService = inject(TuiTiptapEditorService);
 
+    @Input('readOnly')
+    public set readOnlyMode(value: boolean) {
+        this.readOnly.set(value);
+    }
+
     public get editor(): AbstractTuiEditor | null {
         return this.editorService.getOriginTiptapEditor() ? this.editorService : null;
     }
@@ -192,7 +197,7 @@ export class TuiEditor extends TuiControl<string> implements OnDestroy {
     }
 
     protected get dropdownSelectionHandler(): TuiBooleanHandler<Range> {
-        if (!this.focused) {
+        if (!this.focused || this.readOnly()) {
             return TUI_FALSE_HANDLER;
         }
 

diff --git a/projects/editor/src/components/toolbar/toolbar.component.ts b/projects/editor/src/components/toolbar/toolbar.component.ts
@@ -82,6 +82,7 @@ import {TuiToolbarNavigationManager} from './toolbar-navigation-manager.directiv
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
         role: 'toolbar',
+        '[class._disabled]': 'disabled',
     },
 })
 export class TuiToolbar {

diff --git a/projects/editor/src/components/toolbar/toolbar.style.less b/projects/editor/src/components/toolbar/toolbar.style.less
@@ -1,5 +1,11 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
+:host {
+    &._disabled {
+        pointer-events: none;
+    }
+}
+
 .t-tools-wrapper {
     .scrollbar-hidden();