Medium.js in React.js component using invokeElement

Question

I am making a simple MediumEditor component in React.js. I am basing the component on the invoke demo from the Medium.js page. My problem is that my call to invokeElement is effecting the entire content of my editable element not the selection content. The example on the docs page has a call to medium.select() before the call to invokeElement. Here is my version:

componentDidMount: function() {
  var editor = this.refs.editor.getDOMNode();
  var medium = new Medium({
    element: editor,
    mode: Medium.richMode,
    attributes: null,
    tags: null,
    pastAsText: false
  });

  this.editor = editor;
  this.medium = medium;
  this.refs.editor.getDOMNode().focus();
},

highlight: function() {
  if(document.activeElement !== this.editor) {
    this.medium.select();
  }
},

setMode: function(mode) {   
  this.highlight();
  if(mode == 'bold') {
    this.medium.invokeElement('b', {
      title: "I'm bold!",
      style: "color: #66d9ef"
    });
  } else if(mode == 'underline') {
    this.medium.invokeElement('u', {
      title: "I'm underlined!",
      style: "color: #a6e22e"
    });
  } else if(mode == 'italic') {
    this.medium.invokeElement('i', {
      title: "I'm italics!",
      style: "color: #f92672"
    });
  }
},

I then attach setMode to each of my style buttons (bold, italic, underline). When I use the above code all of the editable element's content is changed not just the selection content. When I look at the source for medium.js I see that select() does select all so this seems like it shouldn't be called before invokeElement is called for selected content. When I remove the highlight call nothing happens...

This seems like a strange setup and the docs don't explain any of this from what i can find. What is the correct way to invokeElement on selected content? Any information related to using medium.js with React.js appreciated as well.

score 0 · Answer 1 · answered Jan 17 '15 at 00:34

Call

this.medium.focus();

before calling invokeElement.

Jake from Medium.js probably decided to select all text when nothing is selected so that people on the site could see working behaviour without making a selection.

if(document.activeElement !== this.editor) {
   this.medium.select();
}

Medium.js in React.js component using invokeElement

1 Answers1