Nuxt · Toast UI Editor

104 Senior

2021 – 2023Commercial · Vue/Nuxt · SSR · Rich text

104's learning and activity platform for over-50s: courses, consultants, teachers, and a member centre shared by four kinds of user. I joined an existing Nuxt codebase — a colleague started it in 2020 — and worked on it in parallel with the 45+ job platform, contributing 543 commits over two years. The piece I own outright is the rich-text editor: teachers and career consultants write their own course pages in it, and every commit on that component is mine.

Key features & challenges

Built the rich-text editor teachers and consultants write their course pages in — an editor/viewer pair wrapping Toast UI Editor, used across course creation, consultant pages, and the public course view. Every commit on it is mine.
The editor library reaches for `document` at import time, which breaks server-side rendering. I registered it as a client-only plugin and held the viewer behind a mounted flag, so the page still server-renders and the editor appears once the browser takes over.
Our authors were in their fifties and sixties. They wrote in Word and Google Docs and pasted the result in, dragging fonts, colours and sizes into the page and quietly wrecking the site's typography. The library had no plain-text paste, so I added a toolbar toggle for it: when it's on, I intercept the paste, take `text/plain` off the clipboard, and insert that instead.
Getting that toggle right was the actual work. My first version rewound the whole document to its previous value and re-inserted the text — fine in the ordinary case, wrong at the edges: pasting into an empty line, pasting at the end of a block, pasting over a selection. Three weeks later I replaced it: instead of rewinding the document, I track where the caret was before the paste — which node, whether that node was empty, whether the caret sat at its end — and resolve the real insertion range from that.
Wired image handling into the company's document API: an image dropped or pasted into the editor is uploaded, cropped and resized server-side, and the returned URL is written back into the document. I generalised the shared upload helper so other callers could ask for their own transform pipeline instead of the one it had hard-coded.
On the reading side, bare URLs an author pasted in are turned into what they meant — a YouTube link becomes an embedded player, an image link becomes an image — without asking a 60-year-old teacher to learn markdown.

My contributions

I joined this codebase rather than starting it — the first commit is a colleague's, from 2020. I was one of its main front-end contributors from 2021 to early 2023.
The editor is the part that is unambiguously mine: I'm the only author on that component.
Honest about the paste fix: it works by doing arithmetic against the editor's internal position model, and that arithmetic is pinned to the version of the library we were on. It shipped and it held, but it's the kind of code I'd want a test around before upgrading anything underneath it.