Fine, I’ll build my own text editor

David Bushell set out to build his own browser based text editor. His first attempt drew everything to a <canvas> element at 60 to 120 frames per second. It worked, but canvas gives nothing for free: no text selection, no scrollbars, and no accessibility. He faked scrolling with a hidden overflow <div> sized to match the text, then used the scroll position to offset the canvas render.

The second approach dropped canvas and made that same <div> editable with contenteditable="plaintext-only". That brought native selection and undo history along with it. He had to disable spellcheck to stop input latency spikes, a fix that took days to find.

Past a certain character count, performance got strange, and Chromium fared worse than WebKit. So the final demo uses a plain <textarea>, which handled long text much better, with a third layer of markup for syntax highlighting via MicroLighter. Bushell calls it 90% of a text editor with 1% of the features, and is filing it away for a rainy day.

See more at dbushell.com.

from Adafruit Industries – Makers, hackers, artists, designers and engineers! https://ift.tt/T7yLU4G
via IFTTT