Added text alignment

baseline/blocks/ColumnsBlock.js

@@ -52,11 +52,17 @@ var ColumnsBlock = Model.extend(Block,
 			},
 			this.regions.map(function (region)
 			{
+				var style = {}
+				if (region.alignment != 'left')
+				{
+					style.textAlign = region.alignment
+				}
 				return h(
 					'div',
 					{
 						className: 'column span-1-' + this.columns,
-						contentEditable: true
+						contentEditable: true,
+						style: style
 					},
 					region.render()
 				)

baseline/blocks/ListBlock.js

@@ -21,7 +21,12 @@ var ListBlock = Model.extend(Block,
 			this.list_tag, 
 			this.regions.map(function (region)
 			{
-				return h(item_tag, region.text == '' ? [ h('br') ] : region.render())
+				var style = {}
+				if (region.alignment != 'left')
+				{
+					style.textAlign = region.alignment
+				}
+				return h(item_tag, { style: style }, region.text == '' ? [ h('br') ] : region.render())
 			})
 		)
 	},

baseline/blocks/SimpleBlock.js

@@ -12,7 +12,13 @@ module.exports = Model.extend(Block,
 
 	render: function ()
 	{
-		return h(this.tag, this.regions[0].text == '' ? h('br') : this.regions[0].render())
+		var region = this.regions[0]
+		var style = {}
+		if (region.alignment != 'left')
+		{
+			style.textAlign = region.alignment
+		}
+		return h(this.tag, { style: style }, this.regions[0].text == '' ? h('br') : this.regions[0].render())
 	},
 
 	get_position_of_dom_point: function (block_node, dom_point)

baseline/commands/set_text_alignment.js

@@ -0,0 +1,29 @@
+"use strict"
+
+module.exports = function (editor, alignment)
+{
+  var new_blocks = []
+  editor.document.visit_blocks_in_range(editor.range, function (block, start, end)
+  {
+    new_blocks.push(
+      block.modify_regions_in_range(start, end, function (region)
+      {
+        return region.update({
+          alignment: alignment
+        })
+      })
+    )
+  })
+
+  editor.update_document(
+  {
+    blocks: editor.document.blocks
+          .slice(0, editor.range.start.block)
+          .concat(
+            new_blocks
+          )
+          .concat(
+            editor.document.blocks.slice(editor.range.end.block + 1)
+          )
+  })
+}

baseline/defaults.js

@@ -62,6 +62,7 @@ module.exports =
 		insert_block: require('./commands/insert_block'),
 		toggle_annotation: require('./commands/toggle_annotation'),
 		set_block_type: require('./commands/set_block_type'),
+		set_text_alignment: require('./commands/set_text_alignment'),
 		copy: require('./commands/copy'),
 		paste: require('./commands/paste')
 	}

baseline/regions/TextRegion.js

@@ -9,6 +9,7 @@ module.exports = Model(
 {
 	text: '',
 	annotations: new AnnotationTree(),
+	alignment: 'left',
 
 	delete: function (start, end)
 	{

examples/example.js

@@ -7,6 +7,9 @@ var revision = document.getElementById('revision'),
 		h3: document.getElementById('action-h3'),
 		ol: document.getElementById('action-ol'),
 		ul: document.getElementById('action-ul'),
+		left: document.getElementById('action-left'),
+		center: document.getElementById('action-center'),
+		right: document.getElementById('action-right'),
 		bold: document.getElementById('action-bold'),
 		italic: document.getElementById('action-italic'),
 		underline: document.getElementById('action-underline'),
@@ -76,6 +79,17 @@ buttons.normal.addEventListener('click', function ()
 	})
 })
 
+;['left', 'center', 'right'].forEach(function (n)
+{
+	buttons[n].addEventListener('click', function ()
+	{
+		editor.run_command(
+			editor.commands.set_text_alignment,
+			n
+		)
+	})
+})
+
 ;['bold', 'italic', 'underline'].forEach(function (n)
 {
 	var prototype_annotation = new baseline.Annotation({

examples/index.html

@@ -14,6 +14,9 @@
 			<li><button id="action-h3"><b>H3</b></button></li>
 			<li><button id="action-ul"><b>UL</b></button></li>
 			<li><button id="action-ol"><b>OL</b></button></li>
+			<li><button id="action-left"><b>Left</b></button></li>
+			<li><button id="action-center"><b>Center</b></button></li>
+			<li><button id="action-right"><b>Right</b></button></li>
 			<li><button id="action-bold"><b>B</b></button></li>
 			<li><button id="action-italic"><i>I</i></button></li>
 			<li><button id="action-underline"><u>U</u></button></li>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseline-edit",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "main": "baseline",
   "description": "More saner rich text editing for the web",
   "scripts": {

tests/blocks/ColumnsBlock.spec.js

@@ -211,4 +211,19 @@ describe('blocks.ColumnsBlock', function ()
 		expect(result[0]).to.equal(block_b)
 		expect(result[1]).to.equal(block_a)
 	})
+
+	it('renders text alignment as a style in its regions', function ()
+	{
+		var block = new ColumnsBlock({
+			regions: [
+				new TextRegion({ alignment: 'left' }),
+				new TextRegion({ alignment: 'right' }),
+				new TextRegion({ alignment: 'center' })
+			]
+		})
+		var vtree = block.render()
+		expect(vtree.children[0].properties.style).to.deep.equal({})
+		expect(vtree.children[1].properties.style.textAlign).to.equal('right')
+		expect(vtree.children[2].properties.style.textAlign).to.equal('center')
+	})
 })

tests/blocks/ListBlock.spec.js

@@ -232,4 +232,19 @@ describe('blocks.ListBlock', function ()
 		expect(result.point.region).to.equal(0)
 		expect(result.point.offset).to.equal(0)
 	})
+
+	it('renders text alignment as a style in its regions', function ()
+	{
+		var block = new ListBlock({
+			regions: [
+				new TextRegion({ alignment: 'left' }),
+				new TextRegion({ alignment: 'right' }),
+				new TextRegion({ alignment: 'center' })
+			]
+		})
+		var vtree = block.render()
+		expect(vtree.children[0].properties.style).to.deep.equal({})
+		expect(vtree.children[1].properties.style.textAlign).to.equal('right')
+		expect(vtree.children[2].properties.style.textAlign).to.equal('center')
+	})
 })

tests/blocks/SimpleBlock.spec.js

@@ -62,4 +62,17 @@ describe('blocks.SimpleBlock', function ()
 		expect(block.regions[0].get_offset_of_dom_point).to.have.been.calledWith(block_node, dom_point)
 		expect(pos).to.deep.equal({ region: 0, offset: 23 })
 	})
+
+	it('renders text alignment as a style in its regions', function ()
+	{
+		var block_a = new SimpleBlock({ regions: [ new TextRegion({ alignment: 'left' }) ] })
+		var block_b = new SimpleBlock({ regions: [ new TextRegion({ alignment: 'right' }) ] })
+		var block_c = new SimpleBlock({ regions: [ new TextRegion({ alignment: 'center' }) ] })
+		var vtree_a = block_a.render()
+		var vtree_b = block_b.render()
+		var vtree_c = block_c.render()
+		expect(vtree_a.properties.style).to.deep.equal({})
+		expect(vtree_b.properties.style.textAlign).to.equal('right')
+		expect(vtree_c.properties.style.textAlign).to.equal('center')
+	})
 })

tests/blocks/TextRegion.spec.js

@@ -23,6 +23,7 @@ describe('blocks.TextRegion', function ()
 	{
 		var text = new TextRegion()
 		expect(text.text).to.equal('')
+		expect(text.alignment).to.equal('left')
 		expect(text.annotations.constructor).to.equal(AnnotationTree)
 		expect(text.annotations.empty()).to.be.true
 	})