chore(demo): add example for filled groups

projects/demo/src/modules/app/app.routes.ts

@@ -1018,6 +1018,18 @@ export const ROUTES = [
             title: `Editor — Draggable groups`,
         },
     },
+    {
+        path: `editor/filled-groups`,
+        loadChildren: async () =>
+            (
+                await import(
+                    `../components/editor/filled-groups/editor-filled-groups.module`
+                )
+            ).ExampleTuiEditorFilledGroupsModule,
+        data: {
+            title: `Editor — Filled groups`,
+        },
+    },
     {
         path: `editor/nested-groups`,
         loadChildren: async () =>

projects/demo/src/modules/app/pages.ts

@@ -912,6 +912,12 @@ export const pages: TuiDocPages = [
         keywords: `editor, draggable, groups, wysiwyg, редактор, текст, html, rich, text`,
         route: `/editor/draggable-groups`,
     },
+    {
+        section: $localize`Editor`,
+        title: `Filled groups`,
+        keywords: `editor, filled, groups, wysiwyg, редактор, заливка, текст, html, rich, text`,
+        route: `/editor/filled-groups`,
+    },
     {
         section: $localize`Editor`,
         title: `Nested groups`,

projects/demo/src/modules/components/editor/filled-groups/editor-filled-groups.component.html

@@ -0,0 +1,35 @@
+<tui-doc-page
+    header="Editor"
+    package="ADDON-EDITOR"
+    type="components"
+>
+    <ng-template pageTab>
+        <p i18n>
+            Rich Text Editor based on
+            <a
+                tuiLink
+                href="https://www.tiptap.dev/"
+            >
+                TipTap Editor
+            </a>
+            for using with Angular forms. For safety reasons use a
+            <a
+                tuiLink
+                routerLink="/icon-set"
+                fragment="sanitizer"
+            >
+                sanitizer
+            </a>
+            with this component.
+        </p>
+
+        <tui-doc-example
+            id="filled-groups"
+            i18n-heading
+            heading="Filled groups"
+            [content]="example1"
+        >
+            <tui-editor-filled-group-example-1></tui-editor-filled-group-example-1>
+        </tui-doc-example>
+    </ng-template>
+</tui-doc-page>

projects/demo/src/modules/components/editor/filled-groups/editor-filled-groups.component.ts

@@ -0,0 +1,24 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
+import {defaultEditorExtensions, TUI_EDITOR_EXTENSIONS} from '@taiga-ui/addon-editor';
+
+@Component({
+    selector: `editor-draggable-groups`,
+    templateUrl: `./editor-filled-groups.component.html`,
+    encapsulation,
+    changeDetection,
+    providers: [
+        {
+            provide: TUI_EDITOR_EXTENSIONS,
+            useValue: defaultEditorExtensions,
+        },
+    ],
+})
+export class ExampleTuiEditorFilledGroupsComponent {
+    readonly example1: TuiDocExample = {
+        TypeScript: import(`./examples/1/index.ts?raw`),
+        HTML: import(`./examples/1/index.html?raw`),
+    };
+}

projects/demo/src/modules/components/editor/filled-groups/editor-filled-groups.module.ts

@@ -0,0 +1,40 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
+import {TuiEditorModule, TuiEditorSocketModule} from '@taiga-ui/addon-editor';
+import {TuiActiveZoneModule} from '@taiga-ui/cdk';
+import {
+    TuiButtonModule,
+    TuiHostedDropdownModule,
+    TuiLinkModule,
+    TuiSvgModule,
+} from '@taiga-ui/core';
+
+import {ExampleTuiEditorFilledGroupsComponent} from './editor-filled-groups.component';
+import {TuiEditorFilledGroupExample1} from './examples/1';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiActiveZoneModule,
+        TuiSvgModule,
+        TuiLinkModule,
+        TuiHostedDropdownModule,
+        TuiButtonModule,
+        TuiAddonDocModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TuiEditorModule,
+        TuiEditorSocketModule,
+        RouterModule.forChild(
+            tuiGenerateRoutes(ExampleTuiEditorFilledGroupsComponent),
+        ),
+    ],
+    declarations: [
+        TuiEditorFilledGroupExample1,
+        ExampleTuiEditorFilledGroupsComponent,
+    ],
+})
+export class ExampleTuiEditorFilledGroupsModule {}

projects/demo/src/modules/components/editor/filled-groups/examples/1/index.html

@@ -0,0 +1,11 @@
+<tui-editor
+    class="my-editor"
+    [formControl]="control"
+    [tools]="builtInTools"
+></tui-editor>
+
+<h4>HTML:</h4>
+<tui-editor-socket [content]="control.value || ''"></tui-editor-socket>
+
+<h4>Text:</h4>
+<p>{{ control.value }}</p>

projects/demo/src/modules/components/editor/filled-groups/examples/1/index.less

@@ -0,0 +1,10 @@
+.my-editor {
+    min-height: 30rem;
+}
+
+tui-editor-socket [data-type='group'] {
+    flex-direction: column;
+    padding: 0.5rem;
+    margin: 0.5rem 0;
+    border: 2px dotted var(--tui-link);
+}

projects/demo/src/modules/components/editor/filled-groups/examples/1/index.ts

@@ -0,0 +1,46 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TUI_EDITOR_EXTENSIONS, TuiEditorTool} from '@taiga-ui/addon-editor';
+import {TuiDestroyService} from '@taiga-ui/cdk';
+
+@Component({
+    selector: `tui-editor-filled-group-example-1`,
+    templateUrl: `./index.html`,
+    styleUrls: [`./index.less`],
+    providers: [
+        TuiDestroyService,
+        {
+            provide: TUI_EDITOR_EXTENSIONS,
+            useValue: [
+                import(`@taiga-ui/addon-editor/extensions/starter-kit`).then(
+                    ({StarterKit}) => StarterKit,
+                ),
+                import(`@taiga-ui/addon-editor/extensions/group`).then(
+                    ({createGroupExtension}) =>
+                        createGroupExtension({
+                            nested: false,
+                            draggable: false,
+                            createOnEnter: true,
+                            // @note: you can override css styles with your own classes
+                            groupNodeClass: `filled-group`,
+                            groupPointerNodeClass: ``, // anyway element doesn't exists if `draggable` is false
+                        }),
+                ),
+            ],
+        },
+    ],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection,
+})
+export class TuiEditorFilledGroupExample1 {
+    readonly builtInTools = [TuiEditorTool.Undo, TuiEditorTool.Group];
+
+    control = new FormControl(``);
+
+    constructor() {
+        this.control.patchValue(
+            `<div data-type="group"><p>This is a boring paragraph.</p></div><div data-type="group"><p>And another draggable paragraph.</p></div><div data-type="group"><p>Let’s finish with a boring paragraph.</p></div>`,
+        );
+    }
+}