Incorrect indentation for TSX (JSX)

[knpwrs]

Observe: https://asciinema.org/a/42J9ciXzTLLWNTj0LOvPG3OkO

The following is the session from the above recording:

function sum(...numbers: number[]): number {
  console.log('Hello, World!');
  console.log('Indentation works!');
  return numbers.reduce((s, n) => s + n, 0);
}

export function renderFunc() {
  return (
    <div>
      <h1>hello</h1>
    <h2>Oh no!</h2>
    </div>
  )
}

export const renderArrow = () => (
  <div>
    <h1>hello</h1>
  <h2>Sadness!</h2>
  </div>
);

The console.log lines were inserted one after another by pressing o and typing -- indentation works fine. The <h2> lines were added by pressing o and typing -- indentation always goes to the root level.

If I have the following...

function render() {
  return (
  <div>
    <h1>hello</h1>
    <div>
      <div>
      </div>
    </div>
  </div>
  );
}

...and I press o on the inner-most div tag, I end up in a situation as such:

function render() {
  return (
  <div>
    <h1>hello</h1>
    <div>
      <div>
  // Cursor ends up all the way back here!
      </div>
    </div>
  </div>
  );
}

This makes typing JSX really hard. In jsx files with pangloss/vim-javascript indentation works just fine in the same situation: https://asciinema.org/a/f4I4gd5skmJvuhrzay3n4KnmF

[thejohnfreeman]

@knpwrs , I just tested your last example with the latest version of pangloss/vim-javascript and got a different result. Is it still working for you?

function render() {
  return (
  <div>
    <h1>hello</h1>
    <div>
      <div>
    // Cursor ends up all the way back here!
      </div>
    </div>
  </div>
  );
}

[joelle-o-world]

I'm getting similar issues. Especially when I spread tsx tag attributes over multiple lines (hitting always puts me at the beginning of the line with no indentation.) Bug seems to come and go though and I'm struggling to make it reproducible.

Heres my .vimrc if that helps:

call plug#begin('~/local/share/nvim/plugged')

Plug 'leafgarland/typescript-vim'
"Plug 'ianks/vim-tsx'

Plug 'ctrlpvim/ctrlp.vim'
"Plug 'pangloss/vim-javascript'
"Plug 'MaxMEllon/vim-jsx-pretty'
"Plug 'peitalin/vim-jsx-typescript'
"Plug 'styled-components/vim-styled-components'
"Plug 'neoclide/coc.nvim', {'branch': 'release'}
"let g:coc_global_extensions = [
"  \ 'coc-tsserver'
"  \ ]
Plug 'Quramy/tsuquyomi'
"Plug 'xolox/vim-session'
Plug 'preservim/nerdcommenter'
Plug 'dracula/vim', { 'as': 'dracula' }

" Git plugins
Plug 'vim-airline/vim-airline'
"Plug 'tpope/vim-fugitive'
call plug#end()

let g:session_autosave = 'yes'
let g:session_autoload = 'yes'

autocmd BufEnter *.{js,jsx,ts,tsx} :syntax sync fromstart
autocmd BufLeave *.{js,jsx,ts,tsx} :syntax sync clear

" Shortcut for accessing ~/.vimrc
:map <Leader>, :e! ~/.vimrc<CR>
:map <Ctrl>, :e! ~/.vimrc<CR>

:map <Ctrl-Up> :m-2<CR>
:map <Ctrl-Down> :m+1<CR>
:map <Leader>j :m+1<CR>
:map <Leader>k :m-2<CR>
:map <Leader>t :NERDTree<CR>

colorscheme dracula

set nocompatible

set nu

syntax enable

filetype plugin on
set omnifunc=syntaxcomplete#Complete

set tabstop=8 softtabstop=0 expandtab shiftwidth=4 smarttab

set path+=**

set wildmenu

let g:ctrlp_custom_ignore = 'node_modules\|DS_Store\|git'