"Inline" CSS

#1

Hi,

Love the library - thanks!

One of my use-cases is to create a css-editor for inline styling alone (no selectors).
Of cource, the css-tokenizer requires a selector to be able to correctly parse the css. I could work around this by prepopulate the editor with an empty selector ({})

<textarea>{

}</textarea>

This is clearly a rather ugly “hack”, and the user could easily remove the braces and disable the parsing.

I can see a couple of solutions:

  1. Hook into CodeMirror and preprocess the text before it is parsed
  2. Create a new inline-css-mode and take advantage of the exising css-mode
  3. Create a new inline-css.mode using code from the existing css-mode
  4. Something obvious that I have missed

Option 1 seems like the easiest to implement but requires that there is some extension points.

What would you recommend?

#2

You could add an option to the css mode that makes it start in the "block" state rather than the "top" state. You’ll still get silly results if people enter }, but that might not be an issue.

#3

Works great - thanks!

Would you accept a PR with the changes I made (looking for a property named inline)?

#4

Even though it has been 5 years that this problem has been asked, I couldnt find a better solution than loraderon suggested so I have modified it a bit to make it work a little better.

editor.markText({ line: 0, ch: 0 }, { line: 0 }, { readOnly: true });
editor.on(‘change’, () => {
editor.markText(CodeMirror.Pos(editor.lastLine() - 1), CodeMirror.Pos(editor.lastLine()), { readOnly: true });
});
if (!textarea.value) {
editor.setValue(`{

}`);
}