Merge pull request #1709 from ether/keep-list-order-on-paste

When you paste into a numbered list, keep some integrity

src/static/css/iframe_editor.css

@@ -17,6 +17,7 @@ ul, ol, li {
   padding: 0;
   margin: 0;
 }
+
 ul { margin-left: 1.5em; }
 ul ul { margin-left: 0 !important; }
 ul.list-bullet1 { margin-left: 1.5em; }
@@ -38,25 +39,6 @@ ul.list-bullet6 { list-style-type: square; }
 ul.list-bullet7 { list-style-type: disc; }
 ul.list-bullet8 { list-style-type: circle; }
 
-ol.list-number1 { margin-left: 1.9em; }
-ol.list-number2 { margin-left: 3em; }
-ol.list-number3 { margin-left: 4.5em; }
-ol.list-number4 { margin-left: 6em; }
-ol.list-number5 { margin-left: 7.5em; }
-ol.list-number6 { margin-left: 9em; }
-ol.list-number7 { margin-left: 10.5em; }
-ol.list-number8 { margin-left: 12em; }
-
-ol { list-style-type: decimal; }
-ol.list-number1 { list-style-type: decimal; }
-ol.list-number2 { list-style-type: lower-latin; }
-ol.list-number3 { list-style-type: lower-roman; }
-ol.list-number4 { list-style-type: decimal; }
-ol.list-number5 { list-style-type: lower-latin; }
-ol.list-number6 { list-style-type: lower-roman; }
-ol.list-number7 { list-style-type: decimal; }
-ol.list-number8 { list-style-type: lower-latin; }
-
 ul.list-indent1 { margin-left: 1.5em; }
 ul.list-indent2 { margin-left: 3em; }
 ul.list-indent3 { margin-left: 4.5em; }
@@ -186,3 +168,73 @@ p {
   overflow:hidden; 
 }
 */
+
+ol { 
+  list-style-type: decimal;
+}
+
+ol > li {
+  display:inline;   
+}
+
+/* Set the indentation */
+ol.list-number1{ text-indent: 0px; }
+ol.list-number2{ text-indent: 10px; }
+ol.list-number3{ text-indent: 20px; }
+ol.list-number4{ text-indent: 30px; }
+ol.list-number5{ text-indent: 40px; }
+ol.list-number6{ text-indent: 50px; }
+ol.list-number7{ text-indent: 60px; }
+ol.list-number8{ text-indent: 70px; }
+
+/* Add styling to the first item in a list */
+
+.list-start-number1 { counter-reset: first second; }
+.list-start-number2 { counter-reset: second; }
+.list-start-number3 { counter-reset: third; }
+.list-start-number4 { counter-reset: fourth; }
+.list-start-number5 { counter-reset: fifth; }
+.list-start-number6 { counter-reset: sixth; }
+.list-start-number7 { counter-reset: seventh; }
+.list-start-number8 { counter-reset: eighth; }
+
+/* The behavior for incrementing and the prefix */
+.list-number1 li:before {
+  content: counter(first) ". " ;
+  counter-increment: first;
+}
+
+.list-number2 li:before {
+  content: counter(first) "." counter(second) ". ";
+  counter-increment: second;
+}
+
+.list-number3 li:before {
+  content: counter(first) "." counter(second) "." counter(third) ". ";
+  counter-increment: third 1;
+}
+
+.list-number4 li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) ". ";
+  counter-increment: fourth 1;
+}
+
+.list-number5 li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) ". ";
+  counter-increment: fifth 1;
+}
+
+.list-number6 li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) "." counter(sixth) ". ";
+  counter-increment: sixth 1;
+}
+
+.list-number7 li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) "." counter(sixth) "." counter(seventh) ". ";
+  counter-increment: seventh 1;
+}
+
+.list-number8 li:before {
+  content: counter(first) "." counter(second) "." counter(third) "." counter(fourth) "." counter(fifth) "." counter(sixth) "." counter(eighth) ". " ;
+  counter-increment: eighth 1;
+}

src/static/js/domline.js

@@ -104,7 +104,6 @@ domline.createDomLine = function(nonEmpty, doesWrap, optBrowser, optDocument)
       if (listType)
       {
         listType = listType[1];
-        start = start?'start="'+Security.escapeHTMLAttribute(start[1])+'"':'';
         if (listType)
         {
           if(listType.indexOf("number") < 0)
@@ -114,7 +113,14 @@ domline.createDomLine = function(nonEmpty, doesWrap, optBrowser, optDocument)
           }
           else
           {
-            preHtml = '<ol '+start+' class="list-' + Security.escapeHTMLAttribute(listType) + '"><li>';
+            if(start){ // is it a start of a list with more than one item in?
+              if(start[1] == 1){ // if its the first one at this level?
+                lineClass = lineClass + " " + "list-start-" + listType; // Add start class to DIV node
+              }
+              preHtml = '<ol start='+start[1]+' class="list-' + Security.escapeHTMLAttribute(listType) + '"><li>';
+            }else{
+               preHtml = '<ol class="list-' + Security.escapeHTMLAttribute(listType) + '"><li>'; // Handles pasted contents into existing lists
+            }
             postHtml = '</li></ol>';
           }
         }