Re: [csswg-drafts] CSS syntax highlighting proposal (#9247)

> I think it would be useful to define your proposal in terms of delta from the Custom Highlight API. What does it offer that is better, and could these use cases be covered by an extension to this existing API, rather than a whole new one.

The biggest thing is that the CSS Custom Highlight API doesn't work on textareas. See [this jsfiddle](https://jsfiddle.net/1bcsLe52/1/) -- the code tries to highlight the "print" in both a textarea and a pre, and it only works on the pre.

```html
<textarea cols=40>if True: print("hello")</textarea>
<pre>if False: print("bye")</pre>
```
```js
var area = document.querySelector("textarea");
var pre = document.querySelector("pre");
var areatext = area.childNodes[0];
var pretext = pre.childNodes[0];
var print1 = new Range();
print1.setStart(areatext, 9);
print1.setEnd(areatext, 14);
var print2 = new Range();
print2.setStart(pretext, 10);
print2.setEnd(pretext, 15);
CSS.highlights.set('function', new Highlight(print1, print2));
console.log("textarea has child node: ", areatext.toString());
console.log("pre has child node: ", pretext.toString());
```
```css
::highlight(function) { color: red }
```

The console.log()'s at the end both print `[object Text]` at the end for the `childNodes[0]` of both the textarea and the pre, and the range doesn't balk that it wasn't passed a valid node, but the highlight doesn't show up.

So we need some way to highlight text in textareas. Seriously, all of the major code editors out there only use a (hidden) textarea for capturing input events, and they re-implement all of the hard work of rendering the text onscreen in javascript.

-- 
GitHub Notification of comment by dragoncoder047
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9247#issuecomment-1694698233 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 27 August 2023 15:37:58 UTC