Jim's Depository

this code is not yet written
 

I've Slipped into Javascript Hell

I decided the femtoblogger article posting and comment writing needed a WYSIWYG editor. TinyMCE seems to be the solution of choice, but I don’t think I can tolerate 143k for the compacted Javascript plus a large flurry of images. That is about 4 times the size of femtoblogger at the moment.

I’ve embarked on writing my own small content editor. There were some large unknowns in the beginning, but I think I know know what the unknowns are.

  • Focus handling is going to be odd. You can’t make an arbitrary element take focus so I have to make my own fake notion of focus and integrated it with the normal one.
  • The DOM is silent on finding exactly where on which element a user clicks. Fortunately there is a window.getSelection() and document.selection depending which way your browser swings that handles that. (Phew, I thought I was going to end up with each character in its own little SPAN for a while there.)
  • Spaces are going to be rough. I will have to either prevent the user from entering adjacent spaces, or convert multiple spaces to non-breaking spaces.
  • up and down arrows promise to be mysterious to code as well. I may have to figure out how to fake a mouse click, I’m not sure that is even possible.

Back to the code mines. More here as lessons are learned.

Well don't I feel silly. I have written 700 lines of beautiful Javascript that implements WYSIWYG editing. I deal with ranges and selections, I have elegant recursive tree rewriting functions to handle deletions, even if it is the left half of a LI back to something before the enclosing UL… yeah, that is tricky… and much more… But I can't copy and paste. The browser won't enable the paste menu item for my item.

When suddenly…

In the process of trying to see how tinyMCE got paste to work, and also realizing that I couldn't find the code they used to move the cursor in response to an arrow key I discovered contentEditable and its buddy designMode which Firefox will require. This is now a much easier problem. I will throw away all my beautiful code and just make a handful of API calls.

And just when I thought there was still a reason for giants to roam the earth.