more pages

Projects/Superalgos/Schemas/Docs-Topics/docs-paragraph-styles-003-docs-subtitle-style.json

@@ -14,7 +14,7 @@
         },
         {
             "style": "Text",
-            "text": "The previous one is a paragraph in subtitle style."
+            "text": "The previous is a paragraph in subtitle style."
         }
     ]
 }

Projects/Superalgos/Schemas/Docs-Topics/docs-paragraph-styles-010-docs-callout-style.json

@@ -0,0 +1,20 @@
+{
+    "topic": "Docs Paragraph Styles",
+    "pageNumber": "10",
+    "type": "Docs Callout Style",
+    "definition": "A callout paragraph is used to call the attention of readers.",
+    "paragraphs": [
+        {
+            "style": "Text",
+            "text": "Anything you type while editing a callout will be rendered like in the example below."
+        },
+        {
+            "style": "Title",
+            "text": "Example:"
+        },
+        {
+            "style": "Callout",
+            "text": "This is a callout paragraph."
+        }
+    ]
+}

Projects/Superalgos/Schemas/Docs-Topics/docs-paragraph-styles-011-docs-summary-style.json

@@ -0,0 +1,24 @@
+{
+    "topic": "Docs Paragraph Styles",
+    "pageNumber": "11",
+    "type": "Docs Summary Style",
+    "definition": "Summary paragraphs are usually used at the begining of a page, like in this one.",
+    "paragraphs": [
+        {
+            "style": "Text",
+            "text": "Anything you write while editing a summary paragraph will be rendered at the page."
+        },
+        {
+            "style": "Title",
+            "text": "Example."
+        },
+        {
+            "style": "Summary",
+            "text": "This is a summary paragraph."
+        },
+        {
+            "style": "Text",
+            "text": ""
+        }
+    ]
+}

Projects/Superalgos/Schemas/Docs-Topics/docs-paragraph-styles-012-docs-js-code-style.json

@@ -0,0 +1,24 @@
+{
+    "topic": "Docs Paragraph Styles",
+    "pageNumber": "12",
+    "type": "Docs JS Code Style",
+    "definition": "Use this style to correctly format javascript code.",
+    "paragraphs": [
+        {
+            "style": "Text",
+            "text": "One of the main difference of this style with the previous ones is that you might have many line breaks and they wont be considered as new paragraphs, instead they will all be treated as a single block."
+        },
+        {
+            "style": "Title",
+            "text": "Example:"
+        },
+        {
+            "style": "Javascript",
+            "text": "function hello(text){\nconsole.log('hello ' + text)\n}"
+        },
+        {
+            "style": "Text",
+            "text": ""
+        }
+    ]
+}

Projects/Superalgos/Schemas/Docs-Topics/docs-paragraph-styles-013-docs-json-code-style.json

@@ -0,0 +1,20 @@
+{
+    "topic": "Docs Paragraph Styles",
+    "pageNumber": "13",
+    "type": "Docs JSON Code Style",
+    "definition": "Use this style to format JSON code, such as the one in configs.",
+    "paragraphs": [
+        {
+            "style": "Text",
+            "text": "Line breaks in this style are not generating new paragraphs."
+        },
+        {
+            "style": "Title",
+            "text": "Example:"
+        },
+        {
+            "style": "Json",
+            "text": "{\n    property: value\n}"
+        }
+    ]
+}

Projects/Superalgos/Schemas/Docs-Topics/docs-paragraph-styles-014-docs-table-style.json

@@ -0,0 +1,52 @@
+{
+    "topic": "Docs Paragraph Styles",
+    "pageNumber": "14",
+    "type": "Docs Table Style",
+    "definition": "It is possible to render table in docs pages. To do so you just need to follow some formatting rules.",
+    "paragraphs": [
+        {
+            "style": "Text",
+            "text": "In edit mode you need to use the | character in order to draw a table. Each cell is separated by a |. Line breaks in edit mode will be considered new rows. The first row will be rendered as the table header."
+        },
+        {
+            "style": "Title",
+            "text": "Example:"
+        },
+        {
+            "style": "Text",
+            "text": "| Column 1 | Column 2 | Column 3 |"
+        },
+        {
+            "style": "Text",
+            "text": "Is rendered like this:"
+        },
+        {
+            "style": "Table",
+            "text": "| Column 1 | Column 2 | Column 3 |"
+        },
+        {
+            "style": "Text",
+            "text": "Another example of a table would be:"
+        },
+        {
+            "style": "Table",
+            "text": "| Column 1 | Column 2 | Column 3 |\n| Value 1 | Value 2 | Value 3 |\n| Value 4 | Value 5 | Value 6 |\n| Value 7 | Value 8 | Value 9 |"
+        },
+        {
+            "style": "Note",
+            "text": "Table style supports rendering boxes to showcase RGB colors. To do this, you just need to type something like this: RGB(23, 134, 222)"
+        },
+        {
+            "style": "Text",
+            "text": "RGB Example:"
+        },
+        {
+            "style": "Table",
+            "text": "| Variable Value | RGB Value | Color Sample |\n| DARK | 48, 48, 54 | RGB(48, 48, 54) |\n| LIGHT | 234, 226, 222 | RGB(234, 226, 222)|\n| GREY | 150, 150, 150 | RGB(150, 150, 150) |\n| LIGHT_GREY | 247, 247, 247 | RGB(247, 247, 247) |\n| WHITE | 255, 255, 255 | RGB(255, 255, 255) |\n| BLACK | 0, 0, 0 | RGB(0, 0, 0) |\n| GOLDEN_ORANGE | 240, 162, 2 | RGB(240, 162, 2) |\n| RUSTED_RED | 204, 88, 53 | RGB(204, 88, 53) |\n| GREEN | 188, 214, 67 | RGB(188, 214, 67) |\n| RED | 223, 70, 60 | RGB(223, 70, 60) |\n| PATINATED_TURQUOISE | 27, 153, 139 | RGB(27, 153, 139) |\n| TITANIUM_YELLOW | 244, 228, 9 | RGB(244, 228, 9) |\n| MANGANESE_PURPLE | 91,80, 122 | RGB(91,80, 122) |\n| TURQUOISE | 74, 207, 217 | RGB(74, 207, 217) |\n| DARK_TURQUOISE | 2, 149, 170 | RGB(2, 149, 170) |"
+        },
+        {
+            "style": "Text",
+            "text": ""
+        }
+    ]
+}

Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js

@@ -648,10 +648,10 @@ function newSuperalgosDocSpace() {
             selectedParagraphData = reverseParsePNG(paragraphNode.innerHTML)
         }
         if (paragraphNode.id.indexOf('-javascript') >= 0) {
-            selectedParagraphData = paragraphNode.innerText.substring(1, paragraphNode.innerText.length - 1)
+            selectedParagraphData = paragraphNode.innerText.substring(1, paragraphNode.innerText.length)
         }
         if (paragraphNode.id.indexOf('-json') >= 0) {
-            selectedParagraphData = paragraphNode.innerText.substring(1, paragraphNode.innerText.length - 1)
+            selectedParagraphData = paragraphNode.innerText.substring(1, paragraphNode.innerText.length)
         }
         if (paragraphNode.id.indexOf('-callout') >= 0) {
             selectedParagraphData = paragraphNode.innerText
@@ -1949,7 +1949,7 @@ function newSuperalgosDocSpace() {
                         } else {
                             for (let j = 0; j < orderedIndexArray.length; j++) {
                                 let orderedArrayItem = orderedIndexArray[j]
-                                if (arrayItem.pageNumber < orderedArrayItem.pageNumber) {
+                                if (Number(arrayItem.pageNumber) < Number(orderedArrayItem.pageNumber)) {
                                     orderedIndexArray.splice(j, 0, arrayItem)
                                     itemAdded = true
                                     break