contentEditable

Description

To allow "in-line" editing of the visible text contents of nodes/elements in the layout canvas, eliminating the tedium of having to click in the property panel to change it

Proposal

Make use of the contentEditable property of HTMLElements, supported in most modern browsers

Challenge

Since the layout canvas is contained inside an iframe, the normal behavior of contentEditable does not work. We must take some extra steps to make it work

Solution(s)

Below are the basic steps needed to implement the proposed method. This method has proven successful during manual proof-of-concept experiments

1. Set iframe document.contentEditable to false

   $(':rib-layoutView').layoutView('option','contentDocument')[0].contentEditable = false;

2. Set contentEditable to true on selected element

   event.target.contentEditable = true;

3. Set focus to selected element

   event.target.focus();

4. Unset contentEditable on blur() event for selected node

TODO

The following issues (or details) must have solutions (or decisions made) before this feature will be considered for merging into master

• The "delete" key behavior needs to be sorted out. Right now, delete is causing the node to be removed, but when "editing" the text content of a node, we would instead need to let it do what it normally does, delete characters
• This presents the need to make editing the text more explicit, so we "enter" edit mode by user action, and "exit" edit mode on blur, click (outside) the node, etc...
• To prevent modification of the live jQM enhanced DOM, we'll need to use some delegate-like method to set contentEditable on the actual elements that contain the text. For example, for a "Button" node, jQM will produce the following

      <a data-role="button" data-uid="8" class="adm-node ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow" data-theme="c">
          <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
              <span class="ui-btn-text">Button</span>
          </span>
      </a>

  If we don't restrict the scope to the inner most <span>, as the user backspaces, they will end up removing the middle <span>. This causes visual changes until we re-render the DOM from the ADM.
  
  The solution needs to be able to predictably find the correct element to set contentEditable on, relative to the ADM node currently selected. CSS selector strings seem like the logical choice here, but this needs to be vetted out more before we know for sure.
• Must use $(element).removeAttr('contenteditable') to not end up littering the live DOM with many elements all having contenteditable="false" in them.
• In order to preserve the user entered text changes, need to bind to blur() event to capture the textContent property of the edited node, passing it into ADMNode.setProperty().
• Will need to "encode" the user entered text to attempt to block possible XSS or other security vectors