Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrong indentation for custom elements without hyphens #98

Open
dnd opened this issue Nov 29, 2018 · 3 comments
Open

Wrong indentation for custom elements without hyphens #98

dnd opened this issue Nov 29, 2018 · 3 comments

Comments

@dnd
Copy link

dnd commented Nov 29, 2018

I'm experiencing incorrect indentation when a custom element does not contain a hyphen. It is nesting the child content even with the tag.

<div>
  |  <!-- correct indent -->
</div>

<w-hatever>
  |  <!-- correct indent -->
</w-hatever>

<Cust-om>
  |  <!-- correct indent -->
</Cust-om>

<whatever>
|  <!-- incorrect indent -->
</whatever>

<Custom>
|  <!-- incorrect indent -->
</Custom>

I know that technically single word element names are not to spec, but they are very common now in frameworks such as Vue, and it would be nice if the html5.vim plugin just nested any element correctly regardless of name. Vue in particular specifies pascal cased names rather than kebab-cased in its default linting rules.

@ycmjason
Copy link

ycmjason commented Jan 5, 2019

I have submitted a PR for this. Meanwhile u can install from my repo for that functionality.

https://github.com/ycmjason/html5.vim

Plug 'ycmjason/html5.vim'

@othree
Copy link
Owner

othree commented Jan 8, 2019

I will try to fix this again.
In my memory, last time I want to fix this is trying to use the indent tag list.
But I forgot the detail now.

One quick workaround is by setting the variable html_indent_inctags.
ex:

let g:html_indent_inctags = 'custom,ele'

Buffer variable also works too.

@andbar-ru
Copy link

andbar-ru commented Jul 10, 2021

There are some issues with indenting PascalCase custom tags (e.g. <VCardText>), because they are being processed in lower case in indent/html.vim. We need avoid situation when all tags (body, html, div and others) will be treated as custom tags in indent file. We may consider tag is custom if it is not included in all tags. I have patched builtin indent/html.vim of vim version 8.2.3114 on my machine.

vim_indent_html.patch

--- html.vim.orig	2021-07-10 11:39:05.794503656 +0300
+++ html.vim	2021-07-10 11:43:50.485987774 +0300
@@ -239,10 +239,28 @@
     \ 'svg', 'time', 'video'])
 
 " Tags added for web components:
 call s:AddITags(s:indent_tags, [
     \ 'content', 'shadow', 'template'])
+
+" According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+let s:all_tags = {}
+call s:AddITags(s:all_tags, [
+    \ 'a', 'abbr', 'acronym', 'address', 'applet', 'area', 'article', 'aside', 'audio', 'b', 'base',
+    \ 'basefont', 'bdi', 'bdo', 'bgsound', 'big', 'blink', 'blockquote', 'body', 'br', 'button',
+    \ 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data',
+    \ 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'em', 'embed',
+    \ 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'frame', 'frameset', 'h1', 'h2',
+    \ 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'image',
+    \ 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map',
+    \ 'mark', 'marquee', 'math', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'nobr', 'noembed',
+    \ 'noframes', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param',
+    \ 'picture', 'plaintext', 'portal', 'pre', 'progress', 'q', 'rb', 'rp', 'rt', 'rtc', 'ruby',
+    \ 's', 'samp', 'script', 'section', 'select', 'shadow', 'slot', 'small', 'source', 'spacer',
+    \ 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'svg', 'table', 'tbody',
+    \ 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'tt',
+    \ 'u', 'ul', 'var', 'video', 'wbr', 'xmp'])
 "}}}
 
 " Add Block Tags: these contain alien content
 "{{{
 call s:AddBlockTag('pre', 2)
@@ -368,12 +386,16 @@
 " Used by s:CheckTag().
 func s:CheckCustomTag(ctag)
   "{{{
   " Returns 1 if ctag is the tag for a custom element, 0 otherwise.
   " a:ctag can be "tag" or "/tag" or "<!--" or "-->"
-  let pattern = '\%\(\w\+-\)\+\w\+'
-  if match(a:ctag, pattern) == -1
+  " Tags like VCustomTag is custom too. Here ctag is in lower case (vcustomtag),
+  " so we consider it custom if it consists of letters only and it isn't in s:all_tags.
+  let pattern1 = '\%\(\w\+-\)\+\w\+' " custom-tag, /custom-tag
+  let pattern2 = '^/\?\w\+$' " customtag, /customtag
+  let is_custom_tag = match(a:ctag, pattern1) != -1 || (match(a:ctag, pattern2) == 0 && get(s:all_tags, a:ctag) == 0)
+  if !is_custom_tag
     return 0
   endif
   if matchstr(a:ctag, '\/\ze.\+') == "/"
     " closing tag
     if s:block != 0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants