Copy
      
      
    
  

    
      class a{constructor(){this.builtInTools=[g.Undo,g.Group];this.isE2E=h(b);this.control=new C("");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\u2019s finish with a boring paragraph.</p></div>')}}
    

      
        Copy
      
      
    
  

    
      <tui-editor
    class="notion-editor"
    [formControl]="control"
    [tools]="builtInTools"
/>

<tui-accordion [closeOthers]="false">
    <button [tuiAccordion]="isE2E">HTML</button>
    <tui-expand>
        <ng-container *tuiItem>
            <tui-editor-socket [content]="control.value" />
        </ng-container>
    </tui-expand>

    <button [tuiAccordion]="isE2E">Text</button>
    <tui-expand>
        <ng-container *tuiItem>
            <span class="code">{{ control.value }}</span>
        </ng-container>
    </tui-expand>
</tui-accordion>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      class r{constructor(){this.builtInTools=[d.Undo,d.Group,d.Hilite];this.control=new h("");this.isE2E=v(_);this.control.patchValue('<div data-type="group" style="background-color: blue"><p>This is a boring paragraph.</p></div><div data-type="group"><p>And another paragraph.</p></div><div data-type="group" style="background-color: green"><p>Let\u2019s finish with a boring paragraph.</p></div>')}}
    

      
        Copy
      
      
    
  

    
      <tui-editor
    class="my-editor"
    [formControl]="control"
    [tools]="builtInTools"
/>

<tui-accordion [closeOthers]="false">
    <button [tuiAccordion]="isE2E">HTML</button>
    <tui-expand>
        <ng-container *tuiItem>
            <tui-editor-socket [content]="control.value" />
        </ng-container>
    </tui-expand>

    <button [tuiAccordion]="isE2E">Text</button>
    <tui-expand>
        <ng-container *tuiItem>
            <span class="code">{{ control.value }}</span>
        </ng-container>
    </tui-expand>
</tui-accordion>

    

      
        Copy
      
      
    
  

    
      :host {
    ::ng-deep .tui-editor-socket [data-type='group'] {
        flex-direction: column;
        padding: 0.5rem;
        margin: 0.5rem 0;
        border: 0.0625rem solid var(--tui-border-normal);
    }
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      class r{constructor(){this.builtInTools=[g.Undo,g.Group];this.isE2E=v(S);this.control=new h("");this.control.patchValue('<p>This is a boring paragraph.</p><div data-type="group"><p>And another paragraph.</p><div data-type="group"><p>And a nested paragraph.</p><div data-type="group"><p>But can we go deeper?</p></div></div></div><p>Let\u2019s finish with a boring paragraph.</p>')}}
    

      
        Copy
      
      
    
  

    
      <tui-editor
    class="editor"
    [formControl]="control"
    [tools]="builtInTools"
/>

<tui-accordion [closeOthers]="false">
    <button [tuiAccordion]="isE2E">HTML</button>
    <tui-expand>
        <ng-container *tuiItem>
            <tui-editor-socket [content]="control.value" />
        </ng-container>
    </tui-expand>

    <button [tuiAccordion]="isE2E">Text</button>
    <tui-expand>
        <ng-container *tuiItem>
            <span class="code">{{ control.value }}</span>
        </ng-container>
    </tui-expand>
</tui-accordion>

    

      
        Copy
      
      
    
  

    
      .editor {
    min-block-size: 30rem;

    ::ng-deep .group {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 0.5rem;
        margin: 0.5rem 0;
        border-radius: 0.5rem;
        border: 0.0625rem solid var(--tui-border-normal);
    }
}

    

      
        Copy