CODEWITHSUNDEEP
textcanvastext-editor
orion3
orion3

Reputation: 9935

How do I create a very simple text editor from scratch?

Let's say I would like to create a simple text editor. It doesn't really need to have anything particularly special, it mostly should be like Notepad. And, say I want to create it from scratch: for convenience let's say I have in my possession a tool like Canvas (the one that works in browsers, I mean). For those of you not familiar with canvas, here's a quick look at what it can do with text.

But the technology doesn't matter: the point is, I can put some text at certain coordinates on the screen, set color and font and align it left-center-right in its box and that's basically all I can do with the available tools. The tools don't know how to word-wrap or select the text, and also as soon as I put the text on the screen it becomes a bunch of pixels - there's no way to update the text or easily remove the last char, for example.

Now, unlike most of you smart guys here, I've never created a text editor. My questions then are:

  1. What are the patterns that every text editor designer faces?
  2. What typical problems arise?
  3. What problems should I avoid solving, because there are solutions out there that I could either port or copy? (I'm doing Canvas, like I said.)

Upvotes: 4

Views: 2771

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63812

This is sort of frowned upon attempting to do in Canvas. The HTML5 Canvas specification itself heavily advises against trying to do it. As the spec says:

Authors should avoid implementing text editing controls using the canvas element. Doing so has a large number of disadvantages:

  • Mouse placement of the caret has to be reimplemented.
  • Keyboard movement of the caret has to be reimplemented (possibly across lines, for multiline text input).
  • Scrolling of the text field has to be implemented (horizontally for long lines, vertically for multiline input).
  • Native features such as copy-and-paste have to be reimplemented.
  • Native features such as spell-checking have to be reimplemented.
  • Native features such as drag-and-drop have to be reimplemented.
  • Native features such as page-wide text search have to be reimplemented.
  • Native features specific to the user, for example custom text services, have to be reimplemented. This is close to impossible since each user might have different services installed, and there is an unbounded set of possible such services.
  • Bidirectional text editing has to be reimplemented.
  • For multiline text editing, line wrapping has to be implemented for all relevant languages.
  • Text selection has to be reimplemented.
  • Dragging of bidirectional text selections has to be reimplemented.
  • Platform-native keyboard shortcuts have to be reimplemented.
  • Platform-native input method editors (IMEs) have to be reimplemented.
  • Undo and redo functionality has to be reimplemented.
  • Accessibility features such as magnification following the caret or selection have to be reimplemented.

Implementing these sorts of things in Canvas is a nightmare, especially today, where the same font looks different not only per browser, but looks different between Canvas rendering the font and the Browser rendering the font.

I'd advise you to look at the code for Mozilla Bespin, which was made in canvas. It eventually became Mozilla Skywriter and then eventually they said "Welp canvas is the wrong tool for this job", gave up, and merged with Ace, which doesn't use Canvas but DIVs instead. If you're really interested in this sort of thing then I strongly advise you to look at the code for these projects. The bespin code helped me a lot when I was just starting out with Canvas.

The bottom line is that if you're doing text editing, use DIVs and Inputs and other HTML elements (temporarily) atop your canvas. Don't try to emulate it in canvas. You can try anyway, but you're going to have a bad time and your users are too.

As far as multi-line text on the canvas goes, you have to calculate it all yourself at the moment. You even have to approximate text-height.

My recommendation for actually implementing a simple editor is this: Have a canvas, have some text drawn, perhaps on some complex figure. When you want to edit the text, perhaps by clicking on the figure, have a (multiline or not) HTML Input element appear on the click event. Upon pressing enter, or escape, or the box losing focus (the blur event), commit the changes.

Upvotes: 4

Related Questions