List enhancements

src/formats/bbcode.js

@@ -137,26 +137,56 @@
 		},
 		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]');
+						if (listType === 'disc') {
+							editor.insertText(
+								'[ul]\n' + content + '\n[/ul]'
+							);
+						} else {
+							editor.insertText(
+								'[ul=' + listType + ']\n' + content + '\n[/ul]'
+							);
+						}
+					}
+				);
 			}
 		},
 		orderedlist: {
 			txtExec: function (caller, selected) {
+				var editor = this;
 				var content = '';
 
-				each(selected.split(/\r?\n/), function () {
-					content += (content ? '\n' : '') +
-						'[li]' + this + '[/li]';
-				});
+				getEditorCommand('orderedlist')._dropDown(
+					editor,
+					caller,
+					function (tagType) {
+						selected.split(/\r?\n/).forEach(function (item) {
+							content += (content ? '\n' : '') +
+								'[li]' + item + '[/li]';
+						});
 
-				this.insertText('[ol]\n' + content + '\n[/ol]');
+						if (tagType === '1') {
+							editor.insertText(
+								'[ol]\n' + content + '\n[/ol]'
+							);
+						} else {
+							editor.insertText(
+								'[ol=' + tagType + ']\n' + content + '\n[/ol]'
+							);
+						}
+					}
+				);
 			}
 		},
 		table: {
@@ -436,14 +466,41 @@
 
 		// 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 tag = element.nodeName.toLowerCase();
+				var listType = element.style['list-style-type'];
+				var validTypes = ['disc', 'circle', 'square', 'none'];
+
+				// That call is not for this tag, skip it
+				if (tag !== 'ul') {
+					return content;
+				}
+
+				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', 'none'];
+				var attr = attrs.defaultattr;
+
+				if (attr && validTypes.indexOf(attr) > -1) {
+					listType = attr;
+				}
+
+				return '<ul style="list-style-type:' + listType + '">' +
+					content + '</ul>';
+			}
 		},
 		list: {
 			breakStart: true,
@@ -452,14 +509,51 @@
 			html: '<ul>{0}</ul>'
 		},
 		ol: {
-			tags: {
-				ol: null
+			styles: {
+				'list-style-type': null
 			},
 			breakStart: true,
 			isInline: false,
 			skipLastLineBreak: true,
-			format: '[ol]{0}[/ol]',
-			html: '<ol>{0}</ol>'
+			format: function (element, content) {
+				var tag = element.nodeName.toLowerCase();
+				var tagType = attr(element, 'data-tagtype');
+				var validTypes = ['1', 'A', 'a', 'I', 'i'];
+
+				// That call is not for this tag, skip it
+				if (tag !== 'ol') {
+					return content;
+				}
+
+				if (tagType && tagType !== '1' &&
+					validTypes.indexOf(tagType) > -1) {
+					return '[ol=' + tagType + ']' + content + '[/ol]';
+				} else {
+					return '[ol]' + content + '[/ol]';
+				}
+			},
+			html: function (token, attrs, content) {
+				var tagType = '1';
+				var styleType = 'decimal';
+				var validTypes = ['1', 'A', 'a', 'I', 'i'];
+				var attr = attrs.defaultattr;
+
+				if (attr && validTypes.indexOf(attr) > -1) {
+					tagType = attr;
+				}
+
+				switch (tagType) {
+					case '1': styleType = 'decimal'; break;
+					case 'A': styleType = 'upper-alpha'; break;
+					case 'a': styleType = 'lower-alpha'; break;
+					case 'I': styleType = 'upper-roman'; break;
+					case 'i': styleType = 'lower-roman'; break;
+					default: styleType = 'decimal'; break;
+				}
+
+				return '<ol style="list-style-type:' + styleType + '" ' +
+					'data-tagtype="' + tagType + '">' + content + '</ol>';
+			}
 		},
 		li: {
 			tags: {

src/formats/xhtml.js

@@ -100,10 +100,54 @@
 			}
 		},
 		bulletlist: {
-			txtExec: ['<ul><li>', '</li></ul>']
+			txtExec: function (caller, selected) {
+				var editor = this;
+				var content = '';
+
+				getEditorCommand('bulletlist')._dropDown(
+					editor,
+					caller,
+					function (listType) {
+						selected.split(/\r?\n/).forEach(function (item) {
+							content += (content ? '\n' : '') +
+								'<li>' + item + '</li>';
+						});
+
+						editor.insertText(
+							'<ul style="list-style-type:' + listType + '">' +
+							content + '</ul>'
+						);
+					}
+				);
+			}
 		},
 		orderedlist: {
-			txtExec: ['<ol><li>', '</li></ol>']
+			txtExec: function (caller, selected) {
+				var editor = this;
+				var content = '';
+
+				getEditorCommand('orderedlist')._dropDown(
+					editor,
+					caller,
+					function (tagType, styleType) {
+						selected.split(/\r?\n/).forEach(function (item) {
+							content += (content ? '\n' : '') +
+								'<li>' + item + '</li>';
+						});
+
+						if (styleType === 'decimal') {
+							editor.insertText(
+								'<ol>' + content + '</ol>'
+							);
+						} else {
+							editor.insertText(
+								'<ol style="list-style-type:' + styleType +
+								'">' + content + '</ol>'
+							);
+						}
+					}
+				);
+			}
 		},
 		table: {
 			txtExec: ['<table><tr><td>', '</td></tr></table>']
@@ -1156,6 +1200,16 @@
 			conv: function (node) {
 				node.parentNode.removeChild(node);
 			}
+		},
+		{
+			tags: {
+				ol: {
+					'data-tagtype': null
+				}
+			},
+			conv: function (node) {
+				removeAttr(node, 'data-tagtype');
+			}
 		}
 	];
 

src/lib/defaultCommands.js

@@ -284,18 +284,97 @@ var defaultCmds = {
 	// END_COMMAND
 	// START_COMMAND: Bullet List
 	bulletlist: {
-		exec: function () {
-			fixFirefoxListBug(this);
-			this.execCommand('insertunorderedlist');
+		_dropDown: function (editor, caller, callback) {
+			var	content = dom.createElement('div');
+
+			dom.on(content, 'click', 'a', function (e) {
+				callback(dom.data(this, 'type'));
+				editor.closeDropDown(true);
+				e.preventDefault();
+			});
+
+			dom.appendChild(content, _tmpl('ulistTypeOpt',
+				{ type: 'disc', text: 'Bullet' }, true));
+			dom.appendChild(content, _tmpl('ulistTypeOpt',
+				{ type: 'circle', text: 'Circle' }, true));
+			dom.appendChild(content, _tmpl('ulistTypeOpt',
+				{ type: 'square', text: 'Square' }, true));
+			dom.appendChild(content, _tmpl('ulistTypeOpt',
+				{ type: 'none', text: 'None' }, true));
+
+			editor.createDropDown(caller, 'listtype-picker', content);
+		},
+		exec: function (caller) {
+			var	editor  = this;
+
+			defaultCmds.bulletlist._dropDown(editor, caller, function (type) {
+				fixFirefoxListBug(this);
+				editor.wysiwygEditorInsertHtml(
+					'<ul style="list-style-type:' + type +
+					'"><li><br></li></ul>'
+				);
+			});
 		},
 		tooltip: 'Bullet list'
 	},
 	// END_COMMAND
 	// START_COMMAND: Ordered List
 	orderedlist: {
-		exec: function () {
-			fixFirefoxListBug(this);
-			this.execCommand('insertorderedlist');
+		_dropDown: function (editor, caller, callback) {
+			var	content = dom.createElement('div');
+
+			dom.on(content, 'click', 'a', function (e) {
+				callback(dom.data(this, 'tagtype'),
+					dom.data(this, 'styletype'));
+				editor.closeDropDown(true);
+				e.preventDefault();
+			});
+
+			dom.appendChild(content, _tmpl('olistTypeOpt',
+				{
+					tagType: '1',
+					styleType: 'decimal',
+					text: 'Decimal numbers (1, 2, 3, 4)'
+				}, true));
+			dom.appendChild(content, _tmpl('olistTypeOpt',
+				{
+					tagType: 'a',
+					styleType: 'lower-alpha',
+					text: 'Alphabetic lowercase (a, b, c, d)'
+				}, true));
+			dom.appendChild(content, _tmpl('olistTypeOpt',
+				{
+					tagType: 'A',
+					styleType: 'upper-alpha',
+					text: 'Alphabetic uppercase (A, B, C, D)'
+				}, true));
+			dom.appendChild(content, _tmpl('olistTypeOpt',
+				{
+					tagType: 'i',
+					styleType: 'lower-roman',
+					text: 'Roman lowercase (i, ii, iii, iv)'
+				}, true));
+			dom.appendChild(content, _tmpl('olistTypeOpt',
+				{
+					tagType: 'I',
+					styleType: 'upper-roman',
+					text: 'Roman uppercase (I, II, III, IV)'
+				}, true));
+
+			editor.createDropDown(caller, 'listtype-picker', content);
+		},
+		exec: function (caller) {
+			var	editor  = this;
+
+			defaultCmds.orderedlist._dropDown(editor, caller,
+				function (tagType, styleType) {
+					fixFirefoxListBug(this);
+					editor.wysiwygEditorInsertHtml(
+						'<ol style="list-style-type:' + styleType +
+						'" data-tagtype="' + tagType + '"><li><br></li></ol>'
+					);
+				}
+			);
 		},
 		tooltip: 'Numbered list'
 	},

src/lib/templates.js

@@ -39,6 +39,16 @@ var _templates = {
 	sizeOpt: '<a class="sceditor-fontsize-option" data-size="{size}" ' +
 		'href="#"><font size="{size}">{size}</font></a>',
 
+	ulistTypeOpt: '<a class="sceditor-listtype-option" data-type="{type}" ' +
+		'href="#">' +
+		'<ul style="list-style-type:{type}" ' +
+		'class="sceditor-listtype"><li>' +
+		'{text}</li></ul></a>',
+
+	olistTypeOpt: '<a class="sceditor-listtype-option" ' +
+		'data-styletype="{styleType}" data-tagtype="{tagType}" ' +
+		'href="#">{text}</a>',
+
 	pastetext:
 		'<div><label for="txt">{label}</label> ' +
 			'<textarea cols="20" rows="7" id="txt"></textarea></div>' +