rich text copy

4

I repicked this one up.
I have used GitHub - lgarron/clipboard-polyfill: 📋 Simple copying on the web, with maximum browser compatibility. (You probably don't need this anymore!) to copy rich text to clipboard.
I catch the CTRL-C inside CodeMirror which triggers my copyRichText function.

This works!

<script type="text/javascript" src="js/clipboard-polyfill.promise.js"></script>

    editor = CodeMirror.fromTextArea(document.getElementById("sqlCode"), {
      autofocus: true,
      indentWithTabs: true,
      smartIndent: true,
      lineNumbers: true,
      matchBrackets : true,
      readOnly: true,
      tabSize: 2,
      styleSelectedText: true,   //for the addon mark-selection.js
      extraKeys: {
        "Ctrl-Space": "autocomplete", // To invoke the auto complete
        "Ctrl-C": copyRichText
      }, 
      hint: CodeMirror.hint.sql,
      hintOptions: { },
      inputStyle: "textarea" //as a workaround for mobile browser cursor location
    });


  function copyRichText() {
      console.log("copyRichText");
      var dt = new clipboard.DT();
      plainText=editor.getSelection("\r\n"); //be sure to use \r\n or else copy paste to Notepad (ugh!) doesn't have newlines!
      console.log(plainText);
      richText="<span style='text-transform: uppercase; color: #0000FF; '>select</span>";
      dt.setData("text/plain", plainText);
      dt.setData("text/html", richText);
      clipboard.write(dt);
  }

Whats still need to be done is to get style info for all content like this:

and apply it to the plain text as inline CSS markup.

In my CM I have syntax highlighted SQL code, so at least I want the color and text-transform CSS information so I can convert it to simple HTML/CSS for example:
<span style='text-transform: uppercase; color: #0000FF; '>select</span>