... checkpoint

src/js/commands/bold.js

@@ -1,37 +1,10 @@
 import TextFormatCommand from './text-format';
-import {
-  any
-} from '../utils/array-utils';
-
 export default class BoldCommand extends TextFormatCommand {
   constructor(editor) {
-    super({
+    super(editor, {
+      tag: 'strong',
       name: 'bold',
       button: '<i class="ck-icon-bold"></i>'
     });
-    this.editor = editor;
-    const { builder } = this.editor;
-    this.markup = builder.createMarkup('strong');
-  }
-
-  isActive() {
-    return any(this.editor.activeMarkers, m => m.hasMarkup(this.markup));
-  }
-
-  exec() {
-    const range = this.editor.cursor.offsets;
-
-    const markers = this.editor.run((postEditor) => {
-      return postEditor.applyMarkupToMarkers(range, this.markup);
-    });
-    this.editor.selectMarkers(markers);
-  }
-
-  unexec() {
-    const range = this.editor.cursor.offsets;
-    const markers = this.editor.run((postEditor) => {
-      return postEditor.removeMarkupFromMarkers(range, this.markup);
-    });
-    this.editor.selectMarkers(markers);
   }
 }

src/js/commands/format-block.js

@@ -1,19 +1,13 @@
 import TextFormatCommand from './text-format';
-import {
-  any
-} from '../utils/array-utils';
+import { any } from '../utils/array-utils';
 
 class FormatBlockCommand extends TextFormatCommand {
   constructor(editor, options={}) {
-    super(options);
-    this.editor = editor;
+    super(editor, options);
   }
 
   isActive() {
-    const editor = this.editor;
-    const activeSections = editor.activeSections;
-
-    return any(activeSections, section => section.tagName === this.tag);
+    return any(this.editor.activeSections, s => s.tagName === this.tag);
   }
 
   exec() {

src/js/commands/italic.js

@@ -1,36 +1,11 @@
 import TextFormatCommand from './text-format';
-import {
-  any
-} from '../utils/array-utils';
 
 export default class ItalicCommand extends TextFormatCommand {
   constructor(editor) {
-    super({
+    super(editor, {
+      tag: 'em',
       name: 'italic',
       button: '<i class="ck-icon-italic"></i>'
     });
-    this.editor = editor;
-    const { builder } = this.editor;
-    this.markup = builder.createMarkup('em');
-  }
-  exec() {
-    let markerRange = this.editor.cursor.offsets;
-    if (!markerRange.headSection || !markerRange.tailSection) {
-      return;
-    }
-    let markers = this.editor.run((postEditor) => {
-      return postEditor.applyMarkupToMarkers(markerRange, this.markup);
-    });
-    this.editor.selectMarkers(markers);
-  }
-  unexec() {
-    let markerRange = this.editor.cursor.offsets;
-    let markers = this.editor.run((postEditor) => {
-      return postEditor.removeMarkupFromMarkers(markerRange, this.markup);
-    });
-    this.editor.selectMarkers(markers);
-  }
-  isActive() {
-    return any(this.editor.activeMarkers, m => m.hasMarkup(this.markup));
   }
 }

src/js/commands/link.js

@@ -3,13 +3,11 @@ import { any }  from 'content-kit-editor/utils/array-utils';
 
 export default class LinkCommand extends TextFormatCommand {
   constructor(editor) {
-    super({
+    super(editor, {
       name: 'link',
       tag: 'a',
       button: '<i class="ck-icon-link"></i>'
     });
-
-    this.editor = editor;
   }
 
   isActive() {

src/js/commands/list.js

@@ -2,8 +2,7 @@ import TextFormatCommand from './text-format';
 
 export default class ListCommand extends TextFormatCommand {
   constructor(editor, options) {
-    super(options);
-    this.editor = editor;
+    super(editor, options);
   }
 
   isActive() {

src/js/commands/text-format.js

@@ -1,16 +1,37 @@
 import Command from './base';
+import { any } from '../utils/array-utils';
 
 export default class TextFormatCommand extends Command {
-  constructor(options={}) {
+  constructor(editor, options={}) {
     super(options);
+    this.editor = editor;
     this.tag = options.tag;
   }
 
+  get markup() {
+    if (this._markup) { return this._markup; }
+    const { builder } = this.editor;
+    this._markup = builder.createMarkup(this.tag);
+    return this._markup;
+  }
+
+  isActive() {
+    return any(this.editor.activeMarkers, m => m.hasMarkup(this.markup));
+  }
+
   exec() {
-    throw new Error('Must implement exec in sub class');
+    const range = this.editor.cursor.offsets;
+    const markers = this.editor.run((postEditor) => {
+      return postEditor.applyMarkupToMarkers(range, this.markup);
+    });
+    this.editor.selectMarkers(markers);
   }
 
   unexec() {
-    throw new Error('Must implement unexec in sub class');
+    const range = this.editor.cursor.offsets;
+    const markers = this.editor.run((postEditor) => {
+      return postEditor.removeMarkupFromMarkers(range, this.markup);
+    });
+    this.editor.selectMarkers(markers);
   }
 }

src/js/views/embed-intent.js

@@ -1,8 +1,6 @@
 import View from './view';
 import Toolbar from './toolbar';
-import { inherit } from 'content-kit-utils';
 import { positionElementToLeftOf, positionElementCenteredIn } from '../utils/element-utils';
-import { createDiv } from '../utils/element-utils';
 import Keycodes from '../utils/keycodes';
 
 var LayoutStyle = {
@@ -17,120 +15,113 @@ function computeLayoutStyle(rootElement) {
   return LayoutStyle.CENTERED;
 }
 
-function EmbedIntent(options) {
-  var embedIntent = this;
-  var rootElement = embedIntent.rootElement = options.rootElement;
-  options.classNames = ['ck-embed-intent'];
-  View.call(embedIntent, options);
-
-  embedIntent.isActive = false;
-  embedIntent.editorContext = options.editorContext;
-  embedIntent.loadingIndicator = createDiv('ck-embed-loading');
-  embedIntent.button = document.createElement('button');
-  embedIntent.button.className = 'ck-embed-intent-btn';
-  embedIntent.button.title = 'Insert image or embed...';
-  embedIntent.element.appendChild(embedIntent.button);
-
-  this.addEventListener(embedIntent.button, 'click', (e) => {
-    if (embedIntent.isActive) {
-      embedIntent.deactivate();
-    } else {
-      embedIntent.activate();
-    }
-    e.stopPropagation();
-  });
-
-  embedIntent.toolbar = new Toolbar({
-    container: embedIntent.element,
-    embedIntent: embedIntent,
-    editor: embedIntent.editorContext,
-    commands: options.commands,
-    direction: Toolbar.Direction.RIGHT
-  });
-
-  const embedIntentHandler = () => {
-    const {editorContext:editor} = this;
-    if (this._isDestroyed || editor._isDestroyed) {
-      return;
-    }
+class EmbedIntent extends View {
+  constructor(options={}) {
+    options.classNames = ['ck-embed-intent'];
+    super(options);
+    const rootElement = this.rootElement = options.rootElement;
 
-    const {headSection, isCollapsed} = embedIntent.editorContext.cursor.offsets;
-    const headRenderNode = headSection && headSection.renderNode && headSection.renderNode.element;
+    this.isActive = false;
+    this.editorContext = options.editorContext;
+    this.button = document.createElement('button');
+    this.button.className = 'ck-embed-intent-btn';
+    this.button.title = 'Insert image or embed...';
+    this.element.appendChild(this.button);
+
+    this.addEventListener(this.button, 'click', (e) => {
+      if (this.isActive) {
+        this.deactivate();
+      } else {
+        this.activate();
+      }
+      e.stopPropagation();
+    });
 
-    if (headRenderNode && headSection.isBlank && isCollapsed) {
-      embedIntent.showAt(headRenderNode);
-    } else {
-      embedIntent.hide();
-    }
-  };
+    this.toolbar = new Toolbar({
+      container: this.element,
+      embedIntent: this,
+      editor: this.editorContext,
+      commands: options.commands,
+      direction: Toolbar.Direction.RIGHT
+    });
 
-  this.addEventListener(rootElement, 'keyup', embedIntentHandler);
-  this.addEventListener(document, 'click', () => {
-    setTimeout(() => {
-      embedIntentHandler();
+    const embedIntentHandler = () => {
+      const {editorContext:editor} = this;
+      if (this._isDestroyed || editor._isDestroyed) {
+        return;
+      }
+
+      const {headSection, isCollapsed} = this.editorContext.cursor.offsets;
+      const headRenderNode = headSection && headSection.renderNode && headSection.renderNode.element;
+
+      if (headRenderNode && headSection.isBlank && isCollapsed) {
+        this.showAt(headRenderNode);
+      } else {
+        this.hide();
+      }
+    };
+
+    this.addEventListener(rootElement, 'keyup', embedIntentHandler);
+    this.addEventListener(document, 'click', () => {
+      setTimeout(() => {
+        embedIntentHandler();
+      });
     });
-  });
 
-  this.addEventListener(document, 'keyup', (e) => {
-    if (e.keyCode === Keycodes.ESC) {
-      embedIntent.hide();
-    }
-  });
+    this.addEventListener(document, 'keyup', (e) => {
+      if (e.keyCode === Keycodes.ESC) {
+        this.hide();
+      }
+    });
+
+    this.addEventListener(window, 'resize', () => {
+      if(this.isShowing) {
+        this.reposition();
+      }
+    });
+  }
 
-  this.addEventListener(window, 'resize', () => {
-    if(embedIntent.isShowing) {
-      embedIntent.reposition();
+  hide() {
+    if (super.hide()) {
+      this.deactivate();
     }
-  });
-}
-inherit(EmbedIntent, View);
+  }
 
-EmbedIntent.prototype.hide = function() {
-  if (EmbedIntent._super.prototype.hide.call(this)) {
+  showAt(node) {
+    this.atNode = node;
+    this.show();
     this.deactivate();
+    this.reposition();
   }
-};
 
-EmbedIntent.prototype.showAt = function(node) {
-  this.atNode = node;
-  this.show();
-  this.deactivate();
-  this.reposition();
-};
-
-EmbedIntent.prototype.reposition = function() {
-  if (computeLayoutStyle(this.rootElement) === LayoutStyle.GUTTER) {
-    positionElementToLeftOf(this.element, this.atNode);
-  } else {
-    positionElementCenteredIn(this.element, this.atNode);
+  reposition() {
+    if (computeLayoutStyle(this.rootElement) === LayoutStyle.GUTTER) {
+      positionElementToLeftOf(this.element, this.atNode);
+    } else {
+      positionElementCenteredIn(this.element, this.atNode);
+    }
   }
-};
 
-EmbedIntent.prototype.activate = function() {
-  if (!this.isActive) {
-    this.addClass('activated');
-    this.toolbar.show();
-    this.isActive = true;
+  activate() {
+    if (!this.isActive) {
+      this.addClass('activated');
+      this.toolbar.show();
+      this.isActive = true;
+    }
   }
-};
 
-EmbedIntent.prototype.deactivate = function() {
-  if (this.isActive) {
-    this.removeClass('activated');
-    this.toolbar.hide();
-    this.isActive = false;
+  deactivate() {
+    if (this.isActive) {
+      this.removeClass('activated');
+      this.toolbar.hide();
+      this.isActive = false;
+    }
   }
-};
-
-EmbedIntent.prototype.showLoading = function() {
-  var embedIntent = this;
-  var loadingIndicator = embedIntent.loadingIndicator;
-  embedIntent.hide();
-  embedIntent.atNode.appendChild(loadingIndicator);
-};
 
-EmbedIntent.prototype.hideLoading = function() {
-  this.atNode.removeChild(this.loadingIndicator);
-};
+  destroy() {
+    this.toolbar.destroy();
+    super.destroy();
+  }
+}
 
 export default EmbedIntent;

src/js/views/reversible-toolbar-button.js

@@ -63,6 +63,10 @@ class ReversibleToolbarButton {
   get active() {
     return this._active;
   }
+
+  destroy() {
+    this.removeAllEventListeners();
+  }
 }
 
 mixin(ReversibleToolbarButton, EventListenerMixin);