Move command and button creation code out of editor.js

bustle · Sep 8, 2015 · fe72d5b · fe72d5b
1 parent da2f078
commit fe72d5b
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 59 deletions.
diff --git a/src/js/editor/editor.js b/src/js/editor/editor.js
@@ -3,19 +3,6 @@ import Tooltip from '../views/tooltip';
 import EmbedIntent from '../views/embed-intent';
 import PostEditor from './post';
 
-import ReversibleToolbarButton from '../views/reversible-toolbar-button';
-import ReversiblePromptButton from '../views/reversible-prompt-button';
-import BoldCommand from '../commands/bold';
-import ItalicCommand from '../commands/italic';
-import LinkCommand from '../commands/link';
-import QuoteCommand from '../commands/quote';
-import HeadingCommand from '../commands/heading';
-import SubheadingCommand from '../commands/subheading';
-import UnorderedListCommand from '../commands/unordered-list';
-import OrderedListCommand from '../commands/ordered-list';
-import ImageCommand from '../commands/image';
-import CardCommand from '../commands/card';
-
 import ImageCard from '../cards/image';
 
 import Key from '../utils/key';
@@ -70,35 +57,6 @@ function runCallbacks(callbacks, args) {
   }
 }
 
-function makeButtons(editor) {
-  const headingCommand = new HeadingCommand(editor);
-  const headingButton = new ReversibleToolbarButton(headingCommand, editor);
-
-  const subheadingCommand = new SubheadingCommand(editor);
-  const subheadingButton = new ReversibleToolbarButton(subheadingCommand, editor);
-
-  const quoteCommand = new QuoteCommand(editor);
-  const quoteButton = new ReversibleToolbarButton(quoteCommand, editor);
-
-  const boldCommand = new BoldCommand(editor);
-  const boldButton = new ReversibleToolbarButton(boldCommand, editor);
-
-  const italicCommand = new ItalicCommand(editor);
-  const italicButton = new ReversibleToolbarButton(italicCommand, editor);
-
-  const linkCommand = new LinkCommand(editor);
-  const linkButton = new ReversiblePromptButton(linkCommand, editor);
-
-  return [
-    headingButton,
-    subheadingButton,
-    quoteButton,
-    boldButton,
-    italicButton,
-    linkButton
-  ];
-}
-
 /**
  * @class Editor
  * An individual Editor
@@ -198,8 +156,8 @@ class Editor {
     clearChildNodes(element);
 
     this._setupListeners();
-    this._initEmbedCommands();
 
+    this._addEmbedIntent();
     this._addToolbar();
     this._addTooltip();
 
@@ -218,7 +176,6 @@ class Editor {
       editor: this,
       rootElement: this.element,
       commands: [],
-      buttons: makeButtons(this),
       sticky: this.stickyToolbar
     }));
   }
@@ -549,17 +506,9 @@ class Editor {
     this._didRenderCallbacks.push(callback);
   }
 
-  _initEmbedCommands() {
-    const commands = [
-      new ImageCommand(),
-      new CardCommand(),
-      new UnorderedListCommand(this),
-      new OrderedListCommand(this)
-    ];
-
+  _addEmbedIntent() {
     this.addView(new EmbedIntent({
-      editorContext: this,
-      commands: commands,
+      editor: this,
       rootElement: this.element
     }));
   }

diff --git a/src/js/views/embed-intent.js b/src/js/views/embed-intent.js
@@ -3,6 +3,11 @@ import Toolbar from './toolbar';
 import { positionElementToLeftOf, positionElementCenteredIn } from '../utils/element-utils';
 import Keycodes from '../utils/keycodes';
 
+import UnorderedListCommand from '../commands/unordered-list';
+import OrderedListCommand from '../commands/ordered-list';
+import ImageCommand from '../commands/image';
+import CardCommand from '../commands/card';
+
 var LayoutStyle = {
   GUTTER   : 1,
   CENTERED : 2
@@ -22,12 +27,19 @@ class EmbedIntent extends View {
     const rootElement = this.rootElement = options.rootElement;
 
     this.isActive = false;
-    this.editorContext = options.editorContext;
+    this.editor = options.editor;
     this.button = document.createElement('button');
     this.button.className = 'ck-embed-intent-btn';
     this.button.title = 'Insert image or embed...';
     this.element.appendChild(this.button);
 
+    const commands = [
+      new ImageCommand(),
+      new CardCommand(),
+      new UnorderedListCommand(this.editor),
+      new OrderedListCommand(this.editor)
+    ];
+
     this.addEventListener(this.button, 'click', (e) => {
       if (this.isActive) {
         this.deactivate();
@@ -40,18 +52,18 @@ class EmbedIntent extends View {
     this.toolbar = new Toolbar({
       container: this.element,
       embedIntent: this,
-      editor: this.editorContext,
-      commands: options.commands,
+      editor: this.editor,
+      commands: commands,
       direction: Toolbar.Direction.RIGHT
     });
 
     const embedIntentHandler = () => {
-      const {editorContext:editor} = this;
+      const { editor } = this;
       if (this._isDestroyed || editor._isDestroyed) {
         return;
       }
 
-      const {headSection, isCollapsed} = this.editorContext.cursor.offsets;
+      const {headSection, isCollapsed} = this.editor.cursor.offsets;
       const headRenderNode = headSection && headSection.renderNode && headSection.renderNode.element;
 
       if (headRenderNode && headSection.isBlank && isCollapsed) {

diff --git a/src/js/views/text-format-toolbar.js b/src/js/views/text-format-toolbar.js
@@ -1,4 +1,42 @@
 import Toolbar from './toolbar';
+import ReversibleToolbarButton from './reversible-toolbar-button';
+import ReversiblePromptButton from './reversible-prompt-button';
+import BoldCommand from '../commands/bold';
+import ItalicCommand from '../commands/italic';
+import LinkCommand from '../commands/link';
+import QuoteCommand from '../commands/quote';
+import HeadingCommand from '../commands/heading';
+import SubheadingCommand from '../commands/subheading';
+
+function makeButtons(editor) {
+  const headingCommand = new HeadingCommand(editor);
+  const headingButton = new ReversibleToolbarButton(headingCommand, editor);
+
+  const subheadingCommand = new SubheadingCommand(editor);
+  const subheadingButton = new ReversibleToolbarButton(subheadingCommand, editor);
+
+  const quoteCommand = new QuoteCommand(editor);
+  const quoteButton = new ReversibleToolbarButton(quoteCommand, editor);
+
+  const boldCommand = new BoldCommand(editor);
+  const boldButton = new ReversibleToolbarButton(boldCommand, editor);
+
+  const italicCommand = new ItalicCommand(editor);
+  const italicButton = new ReversibleToolbarButton(italicCommand, editor);
+
+  const linkCommand = new LinkCommand(editor);
+  const linkButton = new ReversiblePromptButton(linkCommand, editor);
+
+  return [
+    headingButton,
+    subheadingButton,
+    quoteButton,
+    boldButton,
+    italicButton,
+    linkButton
+  ];
+}
+
 
 export default class TextFormatToolbar extends Toolbar {
   constructor(options={}) {
@@ -9,6 +47,9 @@ export default class TextFormatToolbar extends Toolbar {
     this.editor.on('selectionEnded', () => this.handleSelectionEnded());
     this.editor.on('escapeKey', () => this.editor.cancelSelection());
     this.addEventListener(window, 'resize', () => this.handleResize());
+
+    let buttons = makeButtons(this.editor);
+    buttons.forEach(b => this.addButton(b));
   }
 
   handleResize() {