mondrian
mondrian copied to clipboard
Use contentEditable to implement SVG text tool
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
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.