diff --git a/src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html b/src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html index 6b3a503ed..69775a45d 100644 --- a/src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html +++ b/src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/core/editor/components/rich-text-editor/rich-text-editor.scss b/src/core/editor/components/rich-text-editor/rich-text-editor.scss index 5b929a3cf..ae01ced74 100644 --- a/src/core/editor/components/rich-text-editor/rich-text-editor.scss +++ b/src/core/editor/components/rich-text-editor/rich-text-editor.scss @@ -11,15 +11,20 @@ ion-app.app-root core-rich-text-editor { } .core-rte-editor-container { - height: 100%; - position: relative; + max-height: calc(100% - 46px); + display: flex; + flex-direction: column; + flex-grow: 1; + &.toolbar-hidden { + max-height: 100%; + } .core-rte-info-message { - position: absolute; - bottom: 0; - padding: 3px; - border: 1px solid $info; - border-radius: 5px; + padding: 5px; + border-top: 1px solid $info; + background: white; + flex-shrink: 1; + font-size: 1.4rem; .icon { color: $info; @@ -33,6 +38,7 @@ ion-app.app-root core-rich-text-editor { width: 100%; resize: none; background-color: $white; + flex-grow: 1; @include darkmode() { background-color: $gray-darker; color: $white; diff --git a/src/core/editor/components/rich-text-editor/rich-text-editor.ts b/src/core/editor/components/rich-text-editor/rich-text-editor.ts index dc79617c3..c619aaf00 100644 --- a/src/core/editor/components/rich-text-editor/rich-text-editor.ts +++ b/src/core/editor/components/rich-text-editor/rich-text-editor.ts @@ -230,7 +230,7 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe } if (height > this.minHeight) { - this.element.style.height = this.domUtils.formatPixelsSize(height); + this.element.style.height = this.domUtils.formatPixelsSize(height - 1); } else { this.element.style.height = ''; } @@ -583,10 +583,23 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe } } + /** + * Focus editor when click the area. + * + * @param e Event + */ + focusRTE(e?: Event): void { + if (this.rteEnabled) { + this.editorElement.focus(); + } else { + this.textarea.setFocus(); + } + } + /** * Hide the toolbar in phone mode. */ - hideToolbar($event: any): void { + hideToolbar($event: Event): void { this.stopBubble($event); if (this.isPhone) {