I looked through the topics here and couldn’t find anything related. Using codemirror/next to build a code editor with JSX support (among others) and I noticed the indentation when you hit Enter is different than in the case of an editor based on HTML.
React Setup: javascript(jsx:true)
vs HTML Setup
For the JSX code, it doesn’t matter how indented the tags are, the cursor will be placed inline with the first JSX tag. Is this intended behavior? is there an easy way to correct this behavior? I tried re-implementing the insertNewLineAndIndent function but didn’t get to a solid solution. As far as I understand it, this functions should compute the indentation level of the current line and use that for the newly inserted one.
I think we just have to add indentation logic for the syntax nodes created by JSX syntax in lang-javascript. (That’s where the various code that needs automatic indentation gets its information—from metadata attached to the syntax tree.) I’ll take a look.
Also related to identation, noticed this behavior, probably unrelated, when you enter inside an arrow function or something similar with open paranthesis
I believe this is coming from the isBetweenBrackets check. Scenario works great when you hit Enter directly between brackets, like here:
I’m not sure what the problem is there. It’s creating an aligned list. I’ve added a rule to indent brace-less arrow functions since then, but as a general rule, the indenter will align parenthesized stuff to the opening paren if there’s anything except whitespace or comments on the line with the opening paren.
Something related I noticed was that lang-xml will correct the indentation of closing tags, but jsx will not. Not sure if not implemented yet or if I’m missing some code.
lang-javascript behavior when pressing return after <div> and typing </div>
lang-xml behavior when pressing return after <div> and typing </div>
