A ver si aprendes a procesar esto...

public splitLine(rowIndex: number, columnIndex: number) {

const rowCount = this.textLines.length;
if ((rowIndex >= 0) && (rowIndex < rowCount)) {
const columnCount = this.textLines[rowIndex].length;
if ((columnIndex >= 0) && (columnIndex < columnCount)) {
// let textLines: string[];

// textLines = this.textLines.slice(0, index);

// if (index !== length - 1) {
// textLines = textLines.concat(this.textLines.slice(index + 1,
length));
// }

let firstPortion = this.textLines[rowIndex].slice(0, columnIndex);

let secondPortion = this.textLines[rowIndex].slice(columnIndex,
columnCount);

this.textLines[rowIndex] = firstPortion;
this.textLines.splice(rowIndex + 1, 0, secondPortion);
} else if (columnIndex == columnCount) {
this.textLines.splice(rowIndex + 1, 0, Array.from(""));
}
}
}

public removeLine(index: number) {

const rowCount = this.textLines.length;
if ((index >= 0) && (index < rowCount)) {
this.textLines.splice(index, 1);
} else if (index == rowCount) {
this.textLines.pop();
}
}

public setCharacter(rowIndex: number, columnIndex: number, character: string):

void {
console.log("setCharacter with rowIndex = ", rowIndex, " and columnIndex =
", columnIndex, " and character = '", character, "'");
const rowCount = this.textLines.length;
if ((rowIndex >= 0) && (rowIndex < rowCount)) {
const columnCount = this.textLines[rowIndex].length;
console.log("rowOk with columnCount = ", columnCount);
if (columnCount == 0) {
console.log("column = 0");
this.textLines[rowIndex] = Array.from(character);
} else if ((columnIndex >= 0) && (columnIndex < columnCount)) {
console.log("columnOk");
this.textLines[rowIndex].splice(columnIndex, 0, character);

console.log(this.textLines[rowIndex].join(""));
} else if (columnIndex == columnCount) {
this.textLines[rowIndex].push(character);
}
}
}

public removeCharacter(rowIndex: number, columnIndex: number): void {

 const rowCount = this.textLines.length;
if ((rowIndex >= 0) && (rowIndex < rowCount)) {
const columnCount = this.textLines[rowIndex].length;
if ((columnIndex >= 0) && (columnIndex < columnCount)) {
this.textLines[rowIndex].splice(columnIndex, 1);
}
}
}

public onClick(rowIndex: number, columnIndex: number) {

// console.log("Click received in (rowIndex, columnIndex) = (", rowIndex,
", ", columnIndex, ")");

const rowLength : number = Array.from(this.textLines[rowIndex]).length;

columnIndex = Math.min(columnIndex, rowLength);

this.caret.setIndexes(rowIndex, columnIndex);

this.caret.startBlinking();
}

public onKeydown(event: KeyboardEvent) {

console.log("Keydown event: ", event.key);

let i = this.caret.getRowIndex();
let j = this.caret.getColumnIndex();

// TODO: Add a proper UNDEFINED_VALUE

if (i === -1 || j === -1) {
return;
}

let rowCount = this.textLines.length;

let columnCount = (this.textLines != null) ? this.textLines[i].length : 0;

let captureEvent: boolean = true;

const isCharacter = (Array.from(event.key).length === 1);

if (isCharacter) {
this.setCharacter(i, j, event.key);

this.caret.setIndexes(i, j + 1);
this.caret.startBlinking();
} else if (event.key === "Enter") {
this.splitLine(i, j);

this.caret.setIndexes(i + 1, 0);
this.caret.startBlinking();
} else if (event.key === "Backspace") {
if (j == 0) {
if (i != 0) {
const nextColumnCount = this.textLines[i - 1].length
this.caret.setIndexes(i - 1, nextColumnCount);

this.removeLine(i);
}
} else {
this.removeCharacter(i, j - 1);
 this.caret.setIndexes(i, j - 1);
}

this.caret.startBlinking();
} else if (event.key === "Home") {
this.caret.setColumnIndex(0);
this.caret.startBlinking();
} else if (event.key === "End") {
this.caret.setColumnIndex(columnCount);
this.caret.startBlinking();
} else if (event.key === "ArrowUp") {
const nextColumnCount = this.textLines[i - 1].length
this.caret.setIndexes(Math.max(0, Math.min(i - 1, rowCount)),
Math.min(j, nextColumnCount));
this.caret.startBlinking();
} else if (event.key === "ArrowDown") {
if (i < rowCount - 1) {
console.log("i = %d, j = %d, rowCount = %d", i, j, rowCount);
const nextColumnCount = this.textLines[i + 1].length
this.caret.setIndexes(i + 1, Math.min(j, nextColumnCount));
}
this.caret.startBlinking();
} else if (event.key === "ArrowLeft") {
this.caret.setIndexes(i, Math.max(0, Math.min(j - 1, columnCount)));
this.caret.startBlinking();
} else if (event.key === "ArrowRight") {
this.caret.setIndexes(i, Math.max(0, Math.min(j + 1, columnCount)));
this.caret.startBlinking();
} else if (event.key === "Tab") {
this.setCharacter(i, j, " ");
this.setCharacter(i, j, " ");
this.setCharacter(i, j, " ");
this.setCharacter(i, j, " ");

this.caret.setIndexes(i, j + 4);
this.caret.startBlinking();

// To prevent 'focus' shifting

event.preventDefault();
} else {
captureEvent = false;
}

if (captureEvent) {
console.log("capturing event");
event.stopPropagation();
}
}

class TextEditorComponent extends React.Component<{textEditor: TextEditor}, {}> {

protected ref: React.RefObject<HTMLDivElement>;

protected caretRef: React.RefObject<CaretComponent>;

constructor(props: {textEditor: TextEditor}) {

super(props);

this.ref = React.createRef();
this.caretRef = React.createRef();
 }

componentDidMount(): void {
window.addEventListener("click", (event) => {
this.props.textEditor.caret.stopBlinking();
console.log("Click received on ", event.currentTarget, " originated at
", event.target);
});

window.addEventListener("keydown", (event) => {

this.props.textEditor.onKeydown(event);
this.forceUpdate();
});

(this.ref.current as HTMLDivElement).addEventListener("click", (event) => {

console.log("Click received on ", event.currentTarget, " originated at
", event.target);
if ((event.target as HTMLElement).id == 'textEditor') {
console.log('We are on "focusout" for textEditor');
}

event.stopPropagation();
});
}

public render() {
const textLineComponents: JSX.Element[] = [];
for (let i = 0; i < this.props.textEditor.getTextLines().length; ++i) {
textLineComponents.push(<TextLineComponent key={i}
rowIndex={i}
text={this.props.textEditor.getTextLines()
[i].join("")}
textEditor={this.props.textEditor} />)
}

return (
<div className='textEditor' id='textEditor' ref={this.ref}>
{textLineComponents}
<CaretComponent ref={this.caretRef} />
</div>
)
}
}

function getTextDimensions(text: string, font:string): {width: number, height:

number} {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d") as CanvasRenderingContext2D;
context.font = font;

const metrics = context.measureText(text);

return {width: metrics.width, height: (metrics.fontBoundingBoxAscent +

metrics.fontBoundingBoxDescent)};
}

function getCssStyle(element: HTMLElement, prop: string): string {

return window.getComputedStyle(element, null).getPropertyValue(prop);
}
function getCanvasFont(el = document.body): string {
const fontWeight = getCssStyle(el, 'font-weight') || 'normal';
const fontSize = getCssStyle(el, 'font-size') || '16px';
const fontFamily = getCssStyle(el, 'font-family') || 'Times New Roman';

return `${fontWeight} ${fontSize} ${fontFamily}`;

}

const root = ReactDOM.createRoot(

document.getElementById('root') as HTMLElement
);

let component: TextEditor = new TextEditor();

component.addLine("hello world!");
component.addLine("how are you?");
component.addLine("");

component.setLine(2, "hola mama");

component.removeLine(1);

root.render(
<TextEditorComponent textEditor={component} />
);

// component.addLine("bye bye");