contentEditable States

The new states of HTML-element’s-attribute “contentEditable”. [http://w3c.github.io/editing/contentEditable.html]

You are probably familiar with true/false and might even plaintext-only (which ’till now was *probably* only supported in WebKit, and now consider entirely DEPRECATED!)

Latest editor draft suggest support of the following *well-defined* (~sort of~) states.

[~minimum~]

  -  false             - NO INPUT    - default (nothing).
                       The false state indicates that the element is not editable.
                       The inherit state indicates that the element has the state of its parent.

  -  events            - TEXT ONLY   - beforeinput events are triggered when the user asks for an editing operation.
                       In a focused editing host that is in the events state, a caret must be 
                       drawn if the selection is collapsed, and it must be possible to place the
                       caret in all of the Legal Caret Positions programmatically.
                       All user editing intentions initiated while an editing host that is in 
                       the events state is focused, must trigger a `beforeinput` event.
                       http://w3c.github.io/editing/contentEditable.html#events-state
  
  -  caret             - TEXT ONLY   - controlled caret movement, right click menu partially enabled.
                       A focused editing host that is in the caret state must behave like an 
                       editing host in the events state. Additionally, the default action of 
                       the `beforeSelectionChange` event in such an editing host must be to 
                       move the caret in the indicated direction, if movement in 
                       that direction seems possible.
                       http://w3c.github.io/editing/contentEditable.html#caret-state
  
  -  typing            - TEXT ONLY   - keyboard/IME add|delete text, right click fully enabled.
                       A focused editing host that is in the typing state must behave like an 
                       editing host in the caret state, and additionally, it must handle text 
                       insertion by keyboard at the position of the caret
                       if the caret is placed within a text node or it is possible to place a 
                       text node at the place of the caret. It must by default also handle
                       composition by IME, both insertion as well as deletion of text input.
                       http://w3c.github.io/editing/contentEditable.html#type-state
  
  -  "plaintext-only"  - TEXT ONLY   - DEPRECATED. essentially "typing".
  -  true              - TEXT + OBJ  - enable non-textual content (inner span/div...), eval and execCommand usage.


[~maximum~]

ContentEditable And “ReadOnly”? YES!

making container, any HTML container (PRE, DIV, SPAN) contenteditable="true" is a very appealing opportunity of making the most of the most cutting-edge CSS3-styling and animation (!!) along with easy user-interaction, allowing easily using CTRL+A,

code is easy enough to program (REALLY EASY) but apparently
no one has came across thinking of this solution,
while the phrase “thinking out of the box” is dropped quite often,
it is a rare quality now days..

every previous solution by *others* just include the straightforward solution (a.k.a “head in the wall”) identifying every single key-combination that “is allowed” (for example CTRL+A) and blocking (preventDefault, cancelBubble, stopPropagation :| and of course return false) by the nature of filtering, you are also blocking… F5 (refresh the page) PageDown, PageUp, Arrow-Keys navigations, F12 for developer’s-console…
Oh $hit!!! now I have to specifically allow all those **!@# ???

well.. NOPE!..
…think simpler

because simple is always better.

so what if the user “want to change” the content,
just change it back, fast enough,
restoring the original text might be visible or flick,
…but that’s OK! (also, – due to smart selecting of the event implementing – it won’t..)

..also! You can always add more event-handlers (touch start?? nhaaa! too lazzzzyyyy)

have a look on the following code, I’ve used it in one of my other posts:

<style>
  pre.code-like{
    -webkit-text-stroke: .2px rgba(0,0,0,.5);
    background: rgba(245,245,211,.1);
    border-radius: 2px;
    border: 1px dashed rgba(214,214,214,.7);
    box-shadow: 1px 1px 1px rgba(0,0,0,.5),  -1px -1px 2px rgba(0,0,0,.2);
    color: #000000;
    font-family: Courier New,monospace;
    line-height: 1.3em;
    margin: 0;
    overflow-x: auto;
    padding: 5px;
    white-space: pre !important;
    word-break: normal !important;
    word-wrap: normal !important;
  }
</style>


<pre class="code-like" style='color:#000000;background:#ffffff;'><span style='color:#7f0055; '>&lt;?</span><span style='color:#7f0055; font-weight:bold; '>xml</span><span style='color:#7f0055; '> </span><span style='color:#7f0055; '>version</span><span style='color:#7f0055; '>=</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; font-weight:bold; '>1.0</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>?></span>
<span style='color:#7f0055; '>&lt;!</span><span style='color:#7f0055; font-weight:bold; '>DOCTYPE</span> <span style='color:#7f0055; font-weight:bold; '>cross-domain-policy</span> <span style='color:#7f0055; '>SYSTEM</span> <span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>http</span><span style='color:#2a00ff; '>:</span><span style='color:#7f0055; font-weight:bold; '>//</span><span style='color:#3f3fbf; '>www.adobe.com</span><span style='color:#3f3fbf; '>/xml/dtds/cross-domain-policy.dtd</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; '>cross-domain-policy</span><span style='color:#7f0055; '>></span>
  <span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; '>site-control</span> permitted-cross-domain-policies=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>all</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>/></span>
  <span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; '>allow-access-from</span> domain=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>*</span><span style='color:#2a00ff; '>"</span> to-ports=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>*</span><span style='color:#2a00ff; '>"</span> secure=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>false</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>/></span>
  <span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; '>allow-http-request-headers-from</span> domain=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>*</span><span style='color:#2a00ff; '>"</span> headers=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>*</span><span style='color:#2a00ff; '>"</span> secure=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>false</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>/></span>
<span style='color:#7f0055; '>&lt;/</span><span style='color:#7f0055; '>cross-domain-policy</span><span style='color:#7f0055; '>></span>
</pre>


<script>
  function make_editable_readonly(element){
    element.backup_innerHTML = element.innerHTML;   /* backup before editable. */
    element.contenteditable = "true";               /* editable. CTRL+A is usable (FUN!) */

    element.onautocomplete                          /* what in the world could change the content? actually lot!.. */
  = element.onchange 
  = element.oncontextmenu 
  = element.oncopy 
  = element.oncuechange 
  = element.oncut 
  = element.ondrag 
  = element.ondragend 
  = element.ondrop 
  = element.onemptied 
  = element.onkeyup 
  = element.onmouseup 
  = element.onpaste 
  = element.onreset = function restore(){ 
                        if (element.innerHTML !== element.backup_innerHTML) 
                          element.innerHTML = element.backup_innerHTML;
                      };
  }
  
  make_editable_readonly(
    document.querySelector('pre.code-like')
  );
</script>

demo (you can view it in new tab or have a look it the source..)

I’ve actually initially thought it was a good idea to put the styling and script in this post (here…) ..too
but decided it too mata/”inception”

I’ve posted it also here:
http://stackoverflow.com/questions/4144271/disabling-paste-option-from-the-context-menu/34522284#34522284 (see the alternatives.. :| )