selfint / code-blocks

Manipulate code as blocks
https://marketplace.visualstudio.com/items?itemName=selfint.code-blocks
MIT License
5 stars 0 forks source link

Fix jsx/html movement spacing #16

Closed selfint closed 1 year ago

selfint commented 1 year ago

Initial JSX:

<button className="card" onClick={() => writeFile(filePath, content)}>
  Write file
</button>
<button className="card" onClick={readFile}>
  Choose file
</button>

Actual result of moving first button below second button:

<button className="card" onClick={readFile}>
  Choose file
</button><button className="card" onClick={() => writeFile(filePath, content)}>
  Write file
</button>

Expected result of moving first button below second button:

<button className="card" onClick={readFile}>
  Choose file
</button>
<button className="card" onClick={() => writeFile(filePath, content)}>
  Write file
</button>
selfint commented 1 year ago

This isn't actually a bug.

Since inside JSX, even whitespaces are an element:

<button>
  Choose file
</button>!!! stuff in here is also part of the syntax tree !!!
<button>
  Write file
</button>!!! stuff in here is also part of the syntax tree !!!

After moving we get:

!!! stuff in here is also part of the syntax tree !!!
<button>
  Write file
</button><button>
  Choose file
</button>!!! stuff in here is also part of the syntax tree !!!

Which is correct, since the <button> elements have no spacing around them.

In conclusion, inside html/jsx, there is no spacing (at least from the syntax tree's perspective). It will be up to the user (probably the user's formatter) to correct the alignment after moving the block.