diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss index badc7efe5..f7c64f17f 100644 --- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss +++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss @@ -98,18 +98,28 @@ .core-textarea { position: relative; - --highlight-color: transparent !important; + --full-highlight-height: 0px !important; - ::ng-deep textarea { - margin: 0px !important; - padding: 0px; - resize: none; - overflow-x: hidden; - overflow-y: auto; - position: absolute; - height: auto; - top: 0px; - bottom: 0px; + ::ng-deep .textarea-wrapper, + ::ng-deep .textarea-legacy-wrapper { + height: 100%; + + .textarea-wrapper-inner { + height: 100%; + } + + ::ng-deep textarea { + caret-color: black; + margin: 0px !important; + padding: 0px; + resize: none; + overflow-x: hidden; + overflow-y: auto; + position: absolute; + height: auto; + top: 0px; + bottom: 0px; + } } } diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts b/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts index bd2d47ee7..e2ed8eb1b 100644 --- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts +++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts @@ -433,65 +433,21 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit, * Set the caret position on the character number. * * @param parent Parent where to set the position. - * @param chars Number of chars where to place the caret. If not defined it will go to the end. */ - protected setCurrentCursorPosition(parent: Node, chars?: number): void { - /** - * Loops round all the child text nodes within the supplied node and sets a range from the start of the initial node to - * the characters. - * - * @param node Node where to start. - * @param range Previous calculated range. - * @param chars Object with counting of characters (input-output param). - * @param chars.count Count of characters. - * @returns Selection range. - */ - const setRange = (node: Node, range: Range, chars: { count: number }): Range => { - if (chars.count === 0) { - range.setEnd(node, 0); - } else if (node && chars.count > 0) { - if (node.hasChildNodes()) { - // Navigate through children. - for (let lp = 0; lp < node.childNodes.length; lp++) { - range = setRange(node.childNodes[lp], range, chars); + protected setCurrentCursorPosition(parent: Node): void { + const range = document.createRange(); - if (chars.count === 0) { - break; - } - } - } else if ((node.textContent || '').length < chars.count) { - // Jump this node. - // @todo empty nodes will be omitted. - chars.count -= (node.textContent || '').length; - } else { - // The cursor will be placed in this element. - range.setEnd(node, chars.count); - chars.count = 0; - } - } + // Select all so it will go to the end. + range.selectNode(parent); + range.selectNodeContents(parent); + range.collapse(false); - return range; - }; - - let range = document.createRange(); - if (chars === undefined) { - // Select all so it will go to the end. - range.selectNode(parent); - range.selectNodeContents(parent); - } else if (chars < 0 || chars > (parent.textContent || '').length) { + const selection = window.getSelection(); + if (!selection) { return; - } else { - range.selectNode(parent); - range.setStart(parent, 0); - range = setRange(parent, range, { count: chars }); - } - - if (range) { - const selection = window.getSelection(); - range.collapse(false); - selection?.removeAllRanges(); - selection?.addRange(range); } + selection.removeAllRanges(); + selection.addRange(range); } /** @@ -736,6 +692,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit, } }; + // There are many cases when focus is fired after blur, so we need to delay the blur action. this.blurTimeout = window.setTimeout(() => doBlur(event),300); } diff --git a/src/theme/components/ion-item.scss b/src/theme/components/ion-item.scss index 06cf1f75a..26c0c28bc 100644 --- a/src/theme/components/ion-item.scss +++ b/src/theme/components/ion-item.scss @@ -269,6 +269,11 @@ ion-item.item.item-file { } } +// No highlight on RTE. +ion-item.item-rte { + --full-highlight-height: 0px !important; +} + // Make links clickable when inside radio or checkbox items. Style part. @media (hover: hover) { ion-item.item-multiple-inputs:not(.item-rte):hover::part(native) {