Search code examples
javascriptjquerycodemirror

Add character to multi-line selection in Codemirror on each line of selection


When I select the following text...

# Lorem ipsum dolor sit amet.

**Facere laudantium quod, omnis velit!**

*Molestias numquam exercitationem aliquid rerum.*

**Accusamus quae omnis temporibus molestias!**

*Sed excepturi libero cum a.*

I want to add a quote to each line of the section when the button is pressed like so...

> # Lorem ipsum dolor sit amet.
> 
> **Facere laudantium quod, omnis velit!**
> 
> *Molestias numquam exercitationem aliquid rerum.*
> 
> **Accusamus quae omnis temporibus molestias!**
> 
> *Sed excepturi libero cum a.*

Does anyone know how this would be done in Codemirror?

// Initialize CodeMirror editor
var mdEditor = CodeMirror.fromTextArea(document.getElementById("mdEditor"), {
  mode: "text/x-markdown",
  theme: "default",
  tabMode: "indent",
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  dragDrop: true,
  gutters: ["CodeMirror-linenumbers"],
  extraKeys: {
    "Enter": "newlineAndIndentContinueMarkdownList"
  }
})

$("[data-action=quote]").on("click", function() {
  var selected_text = mdEditor.getSelection()  // Need to grab the Active Selection
  console.log(selected_text)  // Active Selection

  mdEditor.replaceSelection("", mdEditor.getCursor())
  mdEditor.replaceRange("> " + selected_text, mdEditor.getCursor())
  mdEditor.focus()
})
@import url("http://codemirror.net/lib/codemirror.css");

html, body {
  padding: 0;
  margin: 0;
}

.CodeMirror {
  float: left;
  width: 100%;
}
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/addon/edit/continuelist.js"></script>
<script src="http://codemirror.net/addon/mode/overlay.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/markdown/markdown.js"></script>
<script src="http://codemirror.net/mode/gfm/gfm.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button data-action="quote">Quote Selection</button>

<textarea id="mdEditor"># Lorem ipsum dolor sit amet.

**Facere laudantium quod, omnis velit!**

*Molestias numquam exercitationem aliquid rerum.*

**Accusamus quae omnis temporibus molestias!**

*Sed excepturi libero cum a.*</textarea>


Solution

  • A rather crude (not multiple-selection-aware, trailing-whitespace-leaving) implementation could look like this:

    CodeMirror.commands.quoteSelection = function(cm) {
      var from = cm.getCursor("from").line, to = cm.getCursor("to").line
      for (var line = to; line >= from; line--)
        cm.replaceRange("> ", {line: line, ch: 0})
    }
    

    You can then call editor.execCommand("quoteSelection") to run it.