bindEventHandlers() {
        const editor = this;
        this.element.addEventListener('click', function (e) {
            editor.setCursor(e.target._index);
        });
        this.element.addEventListener('keydown', function (e) {
            switch (e.code) {
                case 'ArrowDown': {
                    let next = editor.cursor.bottom;
                    while ((e.metaKey || e.ctrlKey) && next && !next.isHorizontalLine()) {
                        next = next.bottom;
                    }
                    
                    if (next) {
                        editor.setCursor(next);
                    }
                    break;
                }
                case 'ArrowUp': {
                    let top = editor.cursor.top;
                    while ((e.metaKey || e.ctrlKey) && top && !top.isHorizontalLine()) {
                        top = top.top;
                    }
                    
                    if (top) {
                        editor.setCursor(top);
                    }
                    break;
                }
                case 'ArrowLeft': {
                    let previous = editor.cursor.left;
                    if (e.metaKey || e.ctrlKey || editor.cursor.isHorizontalLine()) {
                        previous = editor.index[editor.cursor.row][editor.previousColumnIndex()];
                    }
                    if (previous) {
                        editor.setCursor(previous);
                    }
                    break;
                }
                case 'ArrowRight': {
                    let right = editor.cursor.right;
                    if (e.metaKey || e.ctrlKey || editor.cursor.isHorizontalLine()) {
                        right = editor.index[editor.cursor.row][editor.nextColumnIndex()];
                    }
                    if (right) {
                        editor.setCursor(right);
                    }
                    break;
                }
                case 'Backspace': {
                    if (editor.cursor.isCorner()) {
                        // unable delete boundaries
                        break;
                    }
                    if (editor.cursor.isHorizontalLine()) {
                        // delete column line
                        let bottom = editor.cursor.bottom;
                        while (bottom && bottom.isVerticalLine()) {
                            bottom.setValue('&nbsp;');
                            if (bottom.right && bottom.right.isHorizontalLine()) {
                                // continue horizontal line 
                                let left = bottom;
                                do {
                                    left.setValue('-');
                                    left = left.left;
                                } while (left && !left.isVerticalLine());
                            }
                            if (bottom.left && bottom.left.isHorizontalLine()) {
                                // continue horizontal line
                                let right = bottom;
                                do {
                                    right.setValue('-');
                                    right = right.right;
                                } while (right && !right.isVerticalLine());
                            }
                            bottom = bottom.bottom;
                        }
                    }
                    else if (editor.cursor.isVerticalLine()) {
                        // delete row line
                        let right = editor.cursor.right;
                        while (right && right.isHorizontalLine()) {
                            right.setValue('&nbsp;');
                            if (right.bottom && right.bottom.isVerticalLine()) {
                                // continue vertical line 
                                let top = right;
                                do {
                                    top.setValue('|');
                                    top = top.top;
                                } while (top && !top.isHorizontalLine());
                            }
                            if (right.top && right.top.isVerticalLine()) {
                                // continue vertical line
                                let bottom = right;
                                do {
                                    bottom.setValue('|');
                                    bottom = bottom.bottom;
                                } while (bottom && !bottom.isHorizontalLine());
                            }
                            right = right.right;
                        }
                    }
                    break;
                }
                case 'Enter': {
                    break;
                }
                default: {
                    switch (e.key) {
                        case '|': {
                            editor.makeColumn();
                            break;
                        }
                        case '-': {
                            editor.makeRow();
                            break;
                        }
                        default: {
                            break;
                        }
                    }
                    break;
                }
            }
            e.preventDefault();
        });
    }
/**
     * Bind key and mouse events to editor
     */
Bind key and mouse events to editor
Bind key and mouse events to editor
bindEventHandlers() {
        const editor = this;
        this.element.addEventListener('click', function (e) {
            editor.setCursor(e.target._index);
        });
        this.element.addEventListener('keydown', function (e) {
            switch (e.code) {
                case 'ArrowDown': {
                    let next = editor.cursor.bottom;
                    while ((e.metaKey || e.ctrlKey) && next && !next.isHorizontalLine()) {
                        next = next.bottom;
                    }
                    if (next) {
                        editor.setCursor(next);
                    }
                    break;
                }
                case 'ArrowUp': {
                    let top = editor.cursor.top;
                    while ((e.metaKey || e.ctrlKey) && top && !top.isHorizontalLine()) {
                        top = top.top;
                    }
                    if (top) {
                        editor.setCursor(top);
                    }
                    break;
                }
                case 'ArrowLeft': {
                    let previous = editor.cursor.left;
                    if (e.metaKey || e.ctrlKey || editor.cursor.isHorizontalLine()) {
                        previous = editor.index[editor.cursor.row][editor.previousColumnIndex()];
                    }
                    if (previous) {
                        editor.setCursor(previous);
                    }
                    break;
                }
                case 'ArrowRight': {
                    let right = editor.cursor.right;
                    if (e.metaKey || e.ctrlKey || editor.cursor.isHorizontalLine()) {
                        right = editor.index[editor.cursor.row][editor.nextColumnIndex()];
                    }
                    if (right) {
                        editor.setCursor(right);
                    }
                    break;
                }
                case 'Backspace': {
                    if (editor.cursor.isCorner()) {
                        break;
                    }
                    if (editor.cursor.isHorizontalLine()) {
                        let bottom = editor.cursor.bottom;
                        while (bottom && bottom.isVerticalLine()) {
                            bottom.setValue('&nbsp;');
                            if (bottom.right && bottom.right.isHorizontalLine()) {
                                let left = bottom;
                                do {
                                    left.setValue('-');
                                    left = left.left;
                                } while (left && !left.isVerticalLine());
                            }
                            if (bottom.left && bottom.left.isHorizontalLine()) {
                                let right = bottom;
                                do {
                                    right.setValue('-');
                                    right = right.right;
                                } while (right && !right.isVerticalLine());
                            }
                            bottom = bottom.bottom;
                        }
                    }
                    else if (editor.cursor.isVerticalLine()) {
                        let right = editor.cursor.right;
                        while (right && right.isHorizontalLine()) {
                            right.setValue('&nbsp;');
                            if (right.bottom && right.bottom.isVerticalLine()) {
                                let top = right;
                                do {
                                    top.setValue('|');
                                    top = top.top;
                                } while (top && !top.isHorizontalLine());
                            }
                            if (right.top && right.top.isVerticalLine()) {
                                let bottom = right;
                                do {
                                    bottom.setValue('|');
                                    bottom = bottom.bottom;
                                } while (bottom && !bottom.isHorizontalLine());
                            }
                            right = right.right;
                        }
                    }
                    break;
                }
                case 'Enter': {
                    break;
                }
                default: {
                    switch (e.key) {
                        case '|': {
                            editor.makeColumn();
                            break;
                        }
                        case '-': {
                            editor.makeRow();
                            break;
                        }
                        default: {
                            break;
                        }
                    }
                    break;
                }
            }
            e.preventDefault();
        });
    }
bindEventHandlers ( ) { const editor = this ; this . element . addEventListener ( 'click' , function ( e ) { editor . setCursor ( e . target . _index ) ; } ) ; this . element . addEventListener ( 'keydown' , function ( e ) { switch ( e . code ) { case 'ArrowDown' : { let next = editor . cursor . bottom ; while ( ( e . metaKey || e . ctrlKey ) && next && ! next . isHorizontalLine ( ) ) { next = next . bottom ; } if ( next ) { editor . setCursor ( next ) ; } break ; } case 'ArrowUp' : { let top = editor . cursor . top ; while ( ( e . metaKey || e . ctrlKey ) && top && ! top . isHorizontalLine ( ) ) { top = top . top ; } if ( top ) { editor . setCursor ( top ) ; } break ; } case 'ArrowLeft' : { let previous = editor . cursor . left ; if ( e . metaKey || e . ctrlKey || editor . cursor . isHorizontalLine ( ) ) { previous = editor . index [ editor . cursor . row ] [ editor . previousColumnIndex ( ) ] ; } if ( previous ) { editor . setCursor ( previous ) ; } break ; } case 'ArrowRight' : { let right = editor . cursor . right ; if ( e . metaKey || e . ctrlKey || editor . cursor . isHorizontalLine ( ) ) { right = editor . index [ editor . cursor . row ] [ editor . nextColumnIndex ( ) ] ; } if ( right ) { editor . setCursor ( right ) ; } break ; } case 'Backspace' : { if ( editor . cursor . isCorner ( ) ) { break ; } if ( editor . cursor . isHorizontalLine ( ) ) { let bottom = editor . cursor . bottom ; while ( bottom && bottom . isVerticalLine ( ) ) { bottom . setValue ( '&nbsp;' ) ; if ( bottom . right && bottom . right . isHorizontalLine ( ) ) { let left = bottom ; do { left . setValue ( '-' ) ; left = left . left ; } while ( left && ! left . isVerticalLine ( ) ) ; } if ( bottom . left && bottom . left . isHorizontalLine ( ) ) { let right = bottom ; do { right . setValue ( '-' ) ; right = right . right ; } while ( right && ! right . isVerticalLine ( ) ) ; } bottom = bottom . bottom ; } } else if ( editor . cursor . isVerticalLine ( ) ) { let right = editor . cursor . right ; while ( right && right . isHorizontalLine ( ) ) { right . setValue ( '&nbsp;' ) ; if ( right . bottom && right . bottom . isVerticalLine ( ) ) { let top = right ; do { top . setValue ( '|' ) ; top = top . top ; } while ( top && ! top . isHorizontalLine ( ) ) ; } if ( right . top && right . top . isVerticalLine ( ) ) { let bottom = right ; do { bottom . setValue ( '|' ) ; bottom = bottom . bottom ; } while ( bottom && ! bottom . isHorizontalLine ( ) ) ; } right = right . right ; } } break ; } case 'Enter' : { break ; } default : { switch ( e . key ) { case '|' : { editor . makeColumn ( ) ; break ; } case '-' : { editor . makeRow ( ) ; break ; } default : { break ; } } break ; } } e . preventDefault ( ) ; } ) ; }
Bind key and mouse events to editor
Bind key and mouse events to editor
// unable delete boundaries // delete column line // continue horizontal line  // continue horizontal line // delete row line // continue vertical line  // continue vertical line