hook up text-alignment

msanroman · May 7, 2014 · e82d7fd · e82d7fd
1 parent da023c9
commit e82d7fd
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git a/demo/index.jade b/demo/index.jade
@@ -10,32 +10,37 @@ html
       #editor-wrapper
         #formatting-container
           select.sc-font(title='Font')
-            option(value='sans-serif', selected=true)  Sans Serif
+            option(value='sans-serif', selected)  Sans Serif
             option(value='serif')      Serif
             option(value='monospace')  Monospace
           select.sc-size(title='Size')
             option(value='10px')   Small
-            option(value='13px', selected=true) Normal
+            option(value='13px', selected) Normal
             option(value='18px')   Large
             option(value='32px')    Huge
           select.sc-color(title='Text Color')
             option(value='rgb(255, 255, 255)')   White
-            option(value='rgb(0, 0, 0)', selected=true)  Black
+            option(value='rgb(0, 0, 0)', selected)  Black
             option(value='rgb(255, 0, 0)')     Red
             option(value='rgb(0, 0, 255)')    Blue
             option(value='rgb(0, 255, 0)')    Lime
             option(value='rgb(0, 128, 128)')    Teal
             option(value='rgb(255, 0, 255)') Magenta
             option(value='rgb(255, 255, 0)')  Yellow
           select.sc-background(title='Background Color')
-            option(value='rgb(255, 255, 255)', selected=true)   White
+            option(value='rgb(255, 255, 255)', selected)   White
             option(value='rgb(0, 0, 0)')   Black
             option(value='rgb(255, 0, 0)')     Red
             option(value='rgb(0, 0, 255)')    Blue
             option(value='rgb(0, 255, 0)')    Lime
             option(value='rgb(0, 128, 128)')    Teal
             option(value='rgb(255, 0, 255)') Magenta
             option(value='rgb(255, 255, 0)')  Yellow
+          select.sc-align(title='Text Alignment')
+            option(value='left', selected) Left
+            option(value='center') Center
+            option(value='right') Right
+            option(value='justify') Justify
           button.sc-format-button.sc-bold(title='Bold') Bold
           button.sc-format-button.sc-italic(title='Italic') Italic
           button.sc-format-button.sc-underline(title='Underline') Under

diff --git a/src/format.coffee b/src/format.coffee
@@ -57,6 +57,13 @@ class Format
       type: Format.types.LINE
       style: 'textAlign'
       default: 'left'
+      prepare: (doc, value) ->
+        switch value
+          when 'left'    then command = 'justifyLeft'
+          when 'center'  then command = 'justifyCenter'
+          when 'right'   then command = 'justifyRight'
+          when 'justify' then command = 'justifyFull'
+        doc.execCommand(command, false)
 
 
   constructor: (@document, @config) ->

diff --git a/src/modules/toolbar.coffee b/src/modules/toolbar.coffee
@@ -8,9 +8,10 @@ class Toolbar
     container: null
 
   @formats:
-    BUTTON: { 'bold', 'image', 'italic', 'link', 'strike', 'underline' }
-    SELECT: { 'align', 'background', 'color', 'font', 'size' }
-    TOOLTIP: { 'image', 'link' }
+    BUTTON  : { 'bold', 'image', 'italic', 'link', 'strike', 'underline' }
+    LINE    : { 'align' }
+    SELECT  : { 'align', 'background', 'color', 'font', 'size' }
+    TOOLTIP : { 'image', 'link' }
 
   constructor: (@quill, @options) ->
     throw new Error('container required for toolbar', @options) unless @options.container?
@@ -24,6 +25,8 @@ class Toolbar
         return if @triggering
         if range.isCollapsed()
           @quill.prepareFormat(format, value)
+        else if Toolbar.formats.LINE[format]?
+          @quill.formatLine(range, format, value, 'user')
         else
           @quill.formatText(range, format, value, 'user')
         this.setActive(format, value)

diff --git a/src/quill.coffee b/src/quill.coffee
@@ -106,6 +106,12 @@ class Quill extends EventEmitter2
   focus: ->
     @root.focus()
 
+  formatLine: (start, end, name, value, source) ->
+    [start, end, formats, source] = this._buildParams(start, end, name, value, source)
+    [line, offset] = @editor.doc.findLineAt(end)
+    end += (line.length - offset) if line?
+    this.formatText(start, end, formats, source)
+
   formatText: (start, end, name, value, source) ->
     [start, end, formats, source] = this._buildParams(start, end, name, value, source)
     return unless end > start