This repository has been archived by the owner on May 7, 2021. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(preview): Markdown component layout breaks on copy-paste (#3510)
- Made textaret instead of a contenteditable element
- Loading branch information
1 parent
34e3bbd
commit 18429cb
Showing
7 changed files
with
101 additions
and
21 deletions.
There are no files selected for viewing
47 changes: 47 additions & 0 deletions
47
packages/ngx-widgets/src/app/area-size/area-size.directive.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { TestBed, ComponentFixture } from '@angular/core/testing'; | ||
| import { By } from '@angular/platform-browser'; | ||
| import { AreaSizeDirective } from './area-size.directive'; | ||
|
|
||
| @Component({ | ||
| selector: 'my-test-component', | ||
| template: '<textarea textAreaResize class="editor-box editor-markdown">{{content}}</textarea>', | ||
| }) | ||
| class TestComponent { | ||
| content: string = ''; | ||
| } | ||
|
|
||
| describe('area-size directive: ', () => { | ||
| let component: TestComponent; | ||
| let fixture: ComponentFixture<TestComponent>; | ||
| let textarea: HTMLTextAreaElement; | ||
| let autosize: any; | ||
|
|
||
| beforeEach(async () => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [TestComponent, AreaSizeDirective], | ||
| }); | ||
| }); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(TestComponent); | ||
| fixture.detectChanges(); | ||
| component = fixture.componentInstance; | ||
| textarea = fixture.nativeElement.querySelector('textarea'); | ||
| autosize = fixture.debugElement.query(By.directive(AreaSizeDirective)); | ||
| }); | ||
|
|
||
| it('textarea should have equal content height', () => { | ||
| expect(textarea.clientHeight).toEqual(textarea.scrollHeight); | ||
|
|
||
| fixture.componentInstance.content = ` | ||
| Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat`; | ||
| autosize.triggerEventHandler('input', null); | ||
| fixture.detectChanges(); | ||
| expect(textarea.clientHeight).toEqual(textarea.scrollHeight); | ||
| }); | ||
|
|
||
| it('the component should be identified by the directive', () => { | ||
| expect(autosize).toBeDefined(); | ||
| }); | ||
| }); |
25 changes: 25 additions & 0 deletions
25
packages/ngx-widgets/src/app/area-size/area-size.directive.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { Directive, ElementRef, HostListener, Renderer2, AfterViewInit } from '@angular/core'; | ||
|
|
||
| @Directive({ | ||
| selector: '[textAreaResize]', | ||
| }) | ||
| export class AreaSizeDirective implements AfterViewInit { | ||
| private element: HTMLElement = this.elementRef.nativeElement; | ||
|
|
||
| constructor(private elementRef: ElementRef, private renderer: Renderer2) {} | ||
|
|
||
| ngAfterViewInit(): void { | ||
| this.renderer.setStyle( | ||
| this.element, | ||
| 'height', | ||
| `${this.elementRef.nativeElement.scrollHeight}px`, | ||
| ); | ||
| } | ||
|
|
||
| @HostListener('input', ['$event']) | ||
| resizeOnInput(event: Event) { | ||
| const input = event.target as HTMLInputElement; | ||
| this.renderer.setStyle(this.element, 'height', '1px'); | ||
| this.renderer.setStyle(this.element, 'height', `${input.scrollHeight}px`); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { AreaSizeDirective } from './area-size.directive'; | ||
|
|
||
| @NgModule({ | ||
| declarations: [AreaSizeDirective], | ||
| exports: [AreaSizeDirective], | ||
| }) | ||
| export class AreaSizeModule {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters