mondrian icon indicating copy to clipboard operation
mondrian copied to clipboard

Use contentEditable to implement SVG text tool

Open jarek-foksa opened this issue 11 years ago • 1 comments

geometry/text-editable.coffee is implementing on-canvas text editing by overlying SVG <text> element with editable HTML <div> element and applying similar styles on it. I have figured out an easier way to have editable SVG text:

  • when user clicks on SVG <text> element set contenteditable attribute on the nearest ancestor in HTML namespace to true (e.g. document.body.contentEditable = true;)
  • make the SVG <text> element selectable (e.g. svgTextElement.style.webkitUserSelect = 'text';)
  • when user finishes editing the text (e.g. by clicking on canvas) set the contentEditable attribute on the ancestor back to false

In the near future this hack won't be needed at all since SVG 2 SVGTextElement would be inheriting from HTMLElement interface which implements contentEditable functionality [1].

[1] http://dev.w3.org/SVG/proposals/improving-svg-dom/#interface-hierarchy

jarek-foksa avatar Jan 25 '14 07:01 jarek-foksa

I was unaware of the future changes to inheritance. That's awesome to know.

This sounds like a good idea. I'd love to see this implemented on a branch so I've labeled this as an enhancement for people who are looking to contirbute.

The text tool is probably the one I'm least confident in right now to be honest. Thanks for the suggestion.

artursapek avatar Jan 25 '14 14:01 artursapek