Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

I'm currently building an online 3D-Editor that supports OpenSCAD and Python as the input language.

The ease of use to highlight static text via Arborium seems nice:

    <script src="arborium.iife.js"></script>
    <pre><code class="language-python">
        def hello(name):
            print("Hello " + name);
    </code></pre>
But does it support editing highlighted text? If not, one would have to do some trickery by hiding a textarea and updating the <code> element on each keypress, I guess. Which probably has a thousand corner cases one would have to deal with.

And how would one add SCAD support?



The example on their website is editable and it looks like they overlay the highlighted output on top of the textarea with `pointer-events: none` like you mentioned.

The code isn't minified so you can see how they do it by looking at the `doHighlight()` function here https://arborium.bearcove.eu/pkg/app.generated.js


Oh, you are right!

Hmm .. and the approach already shows its weaknesses when I play with it: When I search for something on the page, it gives me twice as many hits as there are. And jumps around two times to each hit when I use the "next" button.

I wonder if that is fixable.


There is a neat `inert` html attribute you can use to disable all interactions as well as hide the text from ctrl+f searches. (Sadly Safari is the weird one out, and does not exclude the content from searches.)

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...


One simply needs the Highlight API. I held back, but now even Firefox ESR supports it.

https://developer.mozilla.org/en-US/docs/Web/API/Highlight

All the trickery vanishes and you get first-class CSS support.


And there's an open issue for that already: https://github.com/bearcove/arborium/issues/62


That works on the text inside a textarea? Is there a demo showcasing this somewhere?


GitHub had to solve the same problem when speeding up there code viewer.

https://github.blog/engineering/architecture-optimization/cr...


I’m now just curious about your project


Give me a few more weeks and I will probably have something online. You can find me on social media or feel free to connect via email.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: