mardi 25 octobre 2016

"visual mode" selection in html

We have a request for our application to support "vim like" "visual mode" selection across the board. I've done a web search and found only the other way round ("how to select html in vim visual mode", not "how to select in html like in vim visual mode"), so please forgive me if this is a duplicate.

Let me explain what I mean:

<span style="display:inline-block;color:green">
  <p>
     here is text<br>
     here is more
  </p>
</span>
<span style="display:inline-block;color:blue">
  <p>
     here is nothing<br>
     absolutely nothing
  </p>
</span>

Imagine pressing CtrlY (to switch into "visual mode") and creating a selection rectangle from the beginning of "text" to the end of "absolutely", then pressing CtrlC (to copy the selection to clipboard).

The clipboard content should then be something like

text here is no
more absolutely

Has this been done somewhere? How would it be achieved? Is this technically possible?

While I can imagine selecting the content of all html elements in a given rectangle (walk the dom, call getBoundingClientRect() on all elements, add matching elements contents to "result", copy result to clipboard e.g. with document.execCommand('copy') on a hidden element with "result" as content), I see an especially hard part in selecting parts of the content of an html element based on the cursor position.




Aucun commentaire:

Enregistrer un commentaire