EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3320 rte: Improve rte click handling

main
Pau Ferrer Ocaña 2021-05-20 11:16:16 +02:00
parent 0eaa97cb55
commit 660866b80d
2 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
View File

@ -1,11 +1,28 @@
<div class="core-rte-editor-container" (click)="focusRTE()" [class.toolbar-hidden]="toolbarHidden">
<div [hidden]="!rteEnabled" #editor contenteditable="true" class="core-rte-editor" button (focus)="showToolbar($event)"
(longPress)="showToolbar($event)" (blur)="hideToolbar($event)" [attr.data-placeholder-text]="placeholder" role="textbox">
<div
[hidden]="!rteEnabled"
#editor
class="core-rte-editor"
role="textbox"
contenteditable="true"
[attr.data-placeholder-text]="placeholder"
(focus)="showToolbar($event)"
(blur)="hideToolbar($event)"
>
</div>
<ion-textarea [hidden]="rteEnabled" #textarea class="core-textarea" [placeholder]="placeholder" [attr.name]="name"
ngControl="control" (ionChange)="onChange()" (focus)="showToolbar($event)" (longPress)="showToolbar($event)"
(blur)="hideToolbar($event)" role="textbox">
<ion-textarea
[hidden]="rteEnabled"
#textarea
class="core-textarea"
role="textbox"
[attr.name]="name"
ngControl="control"
[placeholder]="placeholder"
(ionChange)="onChange()"
(ionFocus)="showToolbar($event)"
(ionBlur)="hideToolbar($event)"
>
</ion-textarea>
<div class="core-rte-info-message" *ngIf="infoMessage">

12
src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
View File

@ -29,8 +29,9 @@
.core-rte-editor-container {
max-height: calc(100% - 46px);
display: flex;
flex-direction: column;
flex-grow: 1;
flex-direction: column;
justify-content: space-between;
&.toolbar-hidden {
max-height: 100%;
}
@ -51,7 +52,7 @@
.core-rte-editor, .core-textarea {
padding: 2px;
margin: 2px;
width: 100%;
width: calc(100% - 4px);
resize: none;
background-color: var(--background);
color: var(--color);
@ -59,8 +60,6 @@
}
.core-rte-editor {
flex-grow: 1;
flex-shrink: 1;
-webkit-user-select: auto !important;
user-select: auto !important;
word-wrap: break-word;
@ -86,8 +85,6 @@
}
.core-textarea {
flex-grow: 1;
flex-shrink: 1;
position: relative;
::ng-deep textarea {
@ -97,6 +94,7 @@
overflow-x: hidden;
overflow-y: auto;
position: absolute;
height: auto;
top: 0;
bottom: 0;
}
@ -160,7 +158,7 @@
}
&.toolbar-hidden {
visibility: none;
visibility: hidden;
height: 0;
border: none;
}