MOBILE-4470 rte: Fix styles and carets
parent
0fedfee2e4
commit
d0f6950c68
|
@ -98,9 +98,18 @@
|
|||
.core-textarea {
|
||||
position: relative;
|
||||
|
||||
--highlight-color: transparent !important;
|
||||
--full-highlight-height: 0px !important;
|
||||
|
||||
::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;
|
||||
|
@ -112,6 +121,7 @@
|
|||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.core-rte-toolbar {
|
||||
display: flex;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
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);
|
||||
|
||||
const selection = window.getSelection();
|
||||
if (!selection) {
|
||||
return;
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in New Issue