bbcode UL parsing

src/formats/bbcode.js

@@ -137,14 +137,23 @@
 		},
 		bulletlist: {
 			txtExec: function (caller, selected) {
+				var editor = this;
 				var content = '';
 
-				each(selected.split(/\r?\n/), function () {
-					content += (content ? '\n' : '') +
-						'[li]' + this + '[/li]';
-				});
+				getEditorCommand('bulletlist')._dropDown(
+					editor,
+					caller,
+					function (listType) {
+						selected.split(/\r?\n/).forEach(function (item) {
+							content += (content ? '\n' : '') +
+								'[li]' + item + '[/li]';
+						});
 
-				this.insertText('[ul]\n' + content + '\n[/ul]');
+						editor.insertText(
+							'[ul=' + listType + ']\n' + content + '\n[/ul]'
+						);
+					}
+				);
 			}
 		},
 		orderedlist: {
@@ -436,14 +445,35 @@
 
 		// START_COMMAND: Lists
 		ul: {
-			tags: {
-				ul: null
+			styles: {
+				'list-style-type': null
 			},
 			breakStart: true,
 			isInline: false,
 			skipLastLineBreak: true,
-			format: '[ul]{0}[/ul]',
-			html: '<ul>{0}</ul>'
+			format: function (element, content) {
+				var	listType = element.style['list-style-type'];
+				var validTypes = ['disc', 'circle', 'square'];
+
+				if (listType && listType !== 'disc' &&
+					validTypes.indexOf(listType) > -1) {
+					return '[ul=' + listType + ']' + content + '[/ul]';
+				} else {
+					return '[ul]' + content + '[/ul]';
+				}
+			},
+			html: function (token, attrs, content) {
+				var listType = 'disc';
+				var validTypes = ['disc', 'circle', 'square'];
+				var attr = attrs.defaultattr;
+
+				if (attr && validTypes.indexOf(attr) > -1) {
+					listType = attr;
+				}
+
+				return '<ul style="list-style-type:' + listType + '">' +
+					content + '</ul>';
+			}
 		},
 		list: {
 			breakStart: true,

tests/unit/formats/bbcode.js

@@ -253,7 +253,7 @@ QUnit.test('New line handling', function (assert) {
 		this.htmlToBBCode(
 			'<div>text</div>' +
 			'<div>' + IE_BR_STR + '</div>' +
-			'<ul><li>text</li></ul>'
+			'<ul style="list-style-type:disc"><li>text</li></ul>'
 		),
 		'text\n\n[ul]\n[li]text[/li]\n[/ul]\n',
 		'Div siblings with a list'
@@ -264,7 +264,7 @@ QUnit.test('New line handling', function (assert) {
 			'<div>text</div>' +
 			'<div>' + IE_BR_STR + '</div>' +
 			'<div>' + IE_BR_STR + '</div>' +
-			'<ul><li>text</li></ul>'
+			'<ul style="list-style-type:disc"><li>text</li></ul>'
 		),
 		'text\n\n\n[ul]\n[li]text[/li]\n[/ul]\n',
 		'Multiple div siblings with a list'
@@ -284,7 +284,7 @@ QUnit.test('New line handling', function (assert) {
 
 	assert.equal(
 		this.htmlToBBCode(
-			'<ul><li>newline<br />' + IE_BR_STR + '</li></ul>'
+			'<ul style="list-style-type:disc"><li>newline<br />' + IE_BR_STR + '</li></ul>'
 		),
 		'[ul]\n[li]newline\n[/li]\n[/ul]\n',
 		'List item last child block level'
@@ -571,9 +571,21 @@ QUnit.test('colour', function (assert) {
 
 QUnit.test('List', function (assert) {
 	assert.equal(
-		this.htmlToBBCode('<ul><li>test' + IE_BR_STR + '</li></ul>'),
+		this.htmlToBBCode('<ul style="list-style-type:disc"><li>test' + IE_BR_STR + '</li></ul>'),
 		'[ul]\n[li]test[/li]\n[/ul]\n',
-		'UL tag'
+		'UL tag, disc type'
+	);
+
+	assert.equal(
+		this.htmlToBBCode('<ul style="list-style-type:circle"><li>test' + IE_BR_STR + '</li></ul>'),
+		'[ul=circle]\n[li]test[/li]\n[/ul]\n',
+		'UL tag, circle type'
+	);
+
+	assert.equal(
+		this.htmlToBBCode('<ul style="list-style-type:square"><li>test' + IE_BR_STR + '</li></ul>'),
+		'[ul=square]\n[li]test[/li]\n[/ul]\n',
+		'UL tag, square type'
 	);
 
 	assert.equal(
@@ -584,15 +596,15 @@ QUnit.test('List', function (assert) {
 
 	assert.equal(
 		this.htmlToBBCode(
-			'<ul>' +
+			'<ul style="list-style-type:disc">' +
 				'<li>test' +
-					'<ul>' +
+					'<ul style="list-style-type:circle">' +
 						'<li>sub' + IE_BR_STR + '</li>' +
 					'</ul>' +
 				'</li>' +
 			'</ul>'
 		),
-		'[ul]\n[li]test\n[ul]\n[li]sub[/li]\n[/ul]\n[/li]\n[/ul]\n',
+		'[ul]\n[li]test\n[ul=circle]\n[li]sub[/li]\n[/ul]\n[/li]\n[/ul]\n',
 		'Nested UL tag'
 	);
 });

tests/unit/formats/bbcode.parser.js

@@ -729,8 +729,32 @@ QUnit.test('Font colour', function (assert) {
 QUnit.test('List', function (assert) {
 	assert.htmlEqual(
 		this.parser.toHTML('[ul][li]test[/li][/ul]'),
-		'<ul><li>test' + IE_BR_STR + '</li></ul>',
-		'UL'
+		'<ul style="list-style-type:disc"><li>test' + IE_BR_STR + '</li></ul>',
+		'UL, no type'
+	);
+
+	assert.htmlEqual(
+		this.parser.toHTML('[ul=disc][li]test[/li][/ul]'),
+		'<ul style="list-style-type:disc"><li>test' + IE_BR_STR + '</li></ul>',
+		'UL, disc type'
+	);
+
+	assert.htmlEqual(
+		this.parser.toHTML('[ul=circle][li]test[/li][/ul]'),
+		'<ul style="list-style-type:circle"><li>test' + IE_BR_STR + '</li></ul>',
+		'UL, circle type'
+	);
+
+	assert.htmlEqual(
+		this.parser.toHTML('[ul=square][li]test[/li][/ul]'),
+		'<ul style="list-style-type:square"><li>test' + IE_BR_STR + '</li></ul>',
+		'UL, square type'
+	);
+
+	assert.htmlEqual(
+		this.parser.toHTML('[ul=zzz][li]test[/li][/ul]'),
+		'<ul style="list-style-type:disc"><li>test' + IE_BR_STR + '</li></ul>',
+		'UL, unknown type'
 	);
 
 	assert.htmlEqual(
@@ -740,8 +764,10 @@ QUnit.test('List', function (assert) {
 	);
 
 	assert.htmlEqual(
-		this.parser.toHTML('[ul][li]test[ul][li]sub[/li][/ul][/li][/ul]'),
-		'<ul><li>test<ul><li>sub' + IE_BR_STR + '</li></ul></li></ul>',
+		this.parser.toHTML('[ul][li]test[ul=circle][li]sub[/li][/ul][/li][/ul]'),
+		'<ul style="list-style-type:disc"><li>test' +
+		'<ul style="list-style-type:circle"><li>sub' + IE_BR_STR +
+		'</li></ul></li></ul>',
 		'Nested UL'
 	);
 });