How can I shift only inner contents of HTML element?

Question

How can I quickly shift only inner contents of HTML tag X, when they are on separate lines to the opening and closing X tag? Example below: I want to shift only 2 lines with <p> tags when the cursor is somewhere on <div> or </div>.

<div>
  <p>This is some paragraph.</p>
  <p>And this is other paragraph.</p>
</div>

When the cursor is somewhere on <div> I try to do >it, but the problem is it is written in a way which select also newline character after <div> and whitespace before </div>, and so the start and ending tags are also shifted (ending tag might be left unshifted if it's on the very beginning of line), which is unwanted by me.

What I usually do is select everything between <div>s by vit then go one line up on the end of the selection by k, switch to the other end by o and go one line down on the start of the selection by j, only then shift by >. The whole sequence is vitkoj>. Could you do it somehow faster (and more naturally)?

I'm mostly interested in answers using pure Vim functionality without plugins, but HTML plugins recommendations are also welcome.

Answer 1

That's a great opportunity to leverage text objects (see :help text-objects). The following code extends the normal behavior of the it text object (see :help it and :help tag-blocks) to make it consider multi-line HTML tags content as described in your post. In that way, you could also type in vit>, >it, dit, cit, yit and so on, with the extended behavior in place. You can put this code at the end of the vimrc file:

" 0: Strict, consider non-blank characters before and after the tags.
" 1: Flexible, ignore non-blank characters before and after the tags.
let g:innerMultilineHTMLTagMode = 0

function! InnerMultilineHTMLTag()
   " Get the position of the first line of the last selected Visual area.
   let openingMark =  getpos("'<")

   " Get the position of the last line of the last selected Visual area.
   let closingMark = getpos("'>")

   " Check whether both marks are on the same line.
   if openingMark[1] != closingMark[1] 

      " Get the lines where the marks are on.
      let openingLine = getline(openingMark[1])
      let closingLine = getline(closingMark[1])

      " Check whether there's nothing appended to the opening tag.
      if g:innerMultilineHTMLTagMode == 1  ||
         \ match( openingLine, '\S',  openingMark[2] - 1) == -1 

         " Check whether the closing tag is at the beginning of the line.
         if match( closingLine, "$" ) + 1  ==  closingMark[2]
            " Restore and adjust the last Visual area.
            normal! gvVojo
            return

         " Check whether there's nothing prepended to the closing tag.
         elseif g:innerMultilineHTMLTagMode == 1  || 
            \   match( closingLine, '\S\%<' . closingMark[2] . "c" ) == -1
            " Restore and adjust the last Visual area.
            normal! gvVkojo
            return
         endif
      endif 
   endif

   " Do nothing. Restore the last Visual area.
   normal! gv
endfunction

function! ToggleInnerMultilineHTMLTagMode()
   if g:innerMultilineHTMLTagMode == 0 
      let g:innerMultilineHTMLTagMode = 1 
      echo "it text object is now flexible"
   else
      let g:innerMultilineHTMLTagMode = 0 
      echo "it text object is now strict"
   endif
endfunction

" Map to set the multi-line HTML tag mode.
nnoremap - :call ToggleInnerMultilineHTMLTagMode()<CR>

" Map to extend the behavior of the 'it' text object to create linewise
" visual areas within multi-line HTML tags.
" See https://vi.stackexchange.com/q/13050/6698
vnoremap it it:<C-U>call InnerMultilineHTMLTag()<CR>
omap it :normal vit<CR>

There are two modes that can be toggled by hitting -:

• Strict mode: (default) Consider the text before and after the targeted tags. If there are non-blank characters after the opening tag or before the closing tag, the it text object will fall back on the normal behavior. Otherwise It'll make the visual area linewise and only select the content within the tags, ignoring blanks both after the opening tag and before the closing tag.

• Flexible mode: Ignore the text before and after the targeted tags.

The flexible mode is useful when the code has the following form:

<div class="one" > <div class="two" >
  <p>This is some paragraph.</p>
  <p>And this is other paragraph.</p>
</div> </div>

and some action is targeted to the indented lines regardless of whether the cursor is on either <div class="one" > or <div class="two" > tag.

Bonus

It's also useful to create a text object to allow indented text blocks to be treated as text objects. For example, if the cursor is on the word some in the first <p> tag of the example given by Robert, you could use a custom ai text object, which stands for “an indent”, to select the line where the cursor is on as well as the next one (both with the same indentation level) and re-indent them with >ai. Read Indent text object at Vim Tips Wiki for more information.

Reference

• :help text-objects
• :help tag-blocks
• :help it
• :help '<
• :help '>
• :help getpos()
• :help getline()
• :help match()
• :help /\S
• :help /\%<c
• :help :map-modes

Answer 2

Could you do it somehow faster (and more naturally)?

In Vim you can do everything faster and more natural by adding mappings, macros, and abbreviations. Here is a mapping that you could use to select lines inside a tag from the first inner tag to the last. And if there are no inner tags, that will select the lines of a tag itself:

:nnoremap <leader>it vito/<<CR>o?><CR>V

    Explanation:
    vit                  -- Visual mode, select inner block of a tag
       o/<<CR>           -- Limit selection till before the first inner tag
              o?><CR>    -- Limit selection till after the last inner tag
                     V   -- Make selection linewise

You need the o?><CR> because if there are characters on the line before the closing tag, the selection will grab that line as well. Replace V with > if you just want to indent it and don't need the selection by itself. Hope that helps.

Also, assuming that everything from opening to matching enclosing tag is properly indented, you could do =it or =at. However if indentation is messed up, that will fix it instead: