Merge pull request #162 from nymag/wysiwyg-toolbar

wysiwyg toolbar button fix
clay · Aug 14, 2015 · 67b82e9 · 67b82e9
2 parents 15354e9 + 25c847e
commit 67b82e9
Showing 1 changed file with 23 additions and 12 deletions.
diff --git a/behaviors/wysiwyg.js b/behaviors/wysiwyg.js
@@ -377,31 +377,42 @@ module.exports = function (result, args) {
   // put the rich text field after the input
   dom.replaceElement(textInput, field);
 
+  /**
+   * match extension names when instantiating medium-editor
+   * @param {string} extname e.g. 'italic'
+   * @returns {Function}
+   */
+  function findExtension(extname) {
+    return function (ext) {
+      return ext.name === extname;
+    };
+  }
+
   rivets.binders.wysiwyg = {
     publish: true,
     bind: function (el) {
       // this is called when the binder initializes
       var observer = this.observer,
         data = observer.value() || '', // don't print 'undefined' if there's no data
         editor = createEditor(field, buttons),
-        italicBtn = dom.find('.medium-editor-action-italic'),
-        strikeBtn = dom.find('.medium-editor-action-strikethrough'),
-        linkBtn = dom.find('.medium-editor-action-anchor');
-
-      // put the initial data into the editor
-      el.innerHTML = data;
+        italicExtension = _.find(editor.extensions, findExtension('italic')),
+        strikethoughExtension = _.find(editor.extensions, findExtension('strikethrough')),
+        linkExtension = _.find(editor.extensions, findExtension('anchor'));
 
       // apply custom styling to buttons
-      if (italicBtn) {
-        italicBtn.innerHTML = '<em>I</em>';
+      if (italicExtension) {
+        italicExtension.button.innerHTML = '<em>I</em>';
       }
-      if (strikeBtn) {
-        strikeBtn.innerHTML = '<s>M</s>';
+      if (strikethoughExtension) {
+        strikethoughExtension.button.innerHTML = '<s>M</s>';
       }
-      if (linkBtn) {
-        linkBtn.innerHTML = `<img src="${site.get('assetPath')}/media/components/clay-kiln/link-icon.svg" />`;
+      if (linkExtension) {
+        linkExtension.button.innerHTML = `<img src="${site.get('assetPath')}/media/components/clay-kiln/link-icon.svg" />`;
       }
 
+      // put the initial data into the editor
+      el.innerHTML = data;
+
       // hide the tier2 buttons when closing the toolbar
       editor.subscribe('hideToolbar', function () {
         dom.find('.medium-editor-toolbar').classList.remove('show-all');