auto parse code blocks

+ local highlightjs install
+ css support for build.sh

build.sh

@@ -11,9 +11,16 @@ PUBLIC_CSS="$PUBLIC_DIR/css"
 PUBLIC_JS="$PUBLIC_DIR/js"
 
 NODE_PATH='./node_modules'
-NODE_DEST="$PUBLIC_JS/libs.js"
-NODE_IMPORT=(
-    'turbolinks/dist/turbolinks.js'
+
+NODE_DEST_JS="$PUBLIC_JS/libs.js"
+NODE_IMPORT_JS=(
+    #'turbolinks/dist/turbolinks.js' doesn't work with yuuno
+    'highlightjs/highlight.pack.min.js'
+)
+
+NODE_DEST_CSS="$PUBLIC_CSS/libs.css"
+NODE_IMPORT_CSS=(
+    'highlightjs/styles/default.css'
 )
 
 # delete old files, using find to avoid errors
@@ -55,10 +62,22 @@ done
 # node imports
 echo
 echo "=> NPM imports"
-echo "Creating $NODE_DEST"
-touch $NODE_DEST
-for FILE in $NODE_IMPORT; do
-echo "==> $FILE"
-cat "$NODE_PATH/$FILE" >> $NODE_DEST
+
+echo "==> JavaScript"
+echo "Creating $NODE_DEST_JS"
+touch $NODE_DEST_JS
+for FILE in "${NODE_IMPORT_JS[@]}"; do
+echo "===> $FILE"
+cat "$NODE_PATH/$FILE" >> $NODE_DEST_JS
+done
+echo
+
+echo "==> CSS"
+echo "Creating $NODE_DEST_CSS"
+touch $NODE_DEST_CSS
+for FILE in "${NODE_IMPORT_CSS[@]}"; do
+echo "===> $FILE"
+cat "$NODE_PATH/$FILE" >> $NODE_DEST_CSS
 done
 
+

package.json

@@ -1,6 +1,7 @@
 {
   "private": true,
   "dependencies": {
+    "highlightjs": "^9.8.0",
     "turbolinks": "^5.0.0"
   }
 }

resources/assets/typescript/Sakura/Editor.ts

@@ -1,3 +1,5 @@
+declare var hljs: any;
+
 namespace Sakura
 {
     export class Editor
@@ -19,6 +21,14 @@ namespace Sakura
             this.PreviewClient.SetSend({"text": text.value});
             this.PreviewClient.AddCallback(200, (client: AJAX) => {
                 target.innerHTML = client.Response();
+
+                var codeBlocks = target.querySelectorAll("pre code");
+
+                for (var i in codeBlocks) {
+                    if ((typeof codeBlocks[i]).toLowerCase() === 'object') {
+                        hljs.highlightBlock(codeBlocks[i]);
+                    }
+                }
             });
             this.PreviewClient.Start(HTTPMethod.POST);
         }

resources/views/yuuno/forum/elements/replyForm.twig

@@ -70,48 +70,12 @@
         }
     });
 
-    /*setInterval(function () {
-        if (lastParsed < Date.now() - 1000
-            && lastKeystroke > Date.now() - 1000
-            && parserActive !== true) {
-            lastParsed = Date.now();
-
-            var text = pText.value;
-
-            if (text.length == 0) {
-                rText.innerHTML = "";
-            } else if (text.length < textMin) {
-                rText.innerHTML = "<span style='color: red;'>Too short!</span>";
-            } else if (text.length > textMax) {
-                rText.innerHTML = "<span style='color: red;'>Too long!</span>";
-            } else {
-                parserActive = true;
-
-                parser.SetSend({"text":text});
-
-                parser.AddCallback(200, function () {
-                    rText.innerHTML = parser.Response();
-
-                    var codeBlocks = rText.querySelectorAll("pre code");
-
-                    for (var _i in codeBlocks) {
-                        if ((typeof codeBlocks[_i]).toLowerCase() === 'object') {
-                            hljs.highlightBlock(codeBlocks[_i]);
-                        }
-                    }
-
-                    parserActive = false;
-                });
-
-                parser.Start(Sakura.HTTPMethod.POST);
-            }
-        }
-    }, 1000);*/
-
-    pText.addEventListener("keydown", function (e) {
+    function postUpdateEvent(e) {
         if (e.keyCode == 9) {
             e.preventDefault();
-            insertText('postingText', '    ');
+            var tab = '    ';
+            Sakura.DOM.EnterAtCursor(e.target, tab);
+            Sakura.DOM.SetPosition(e.target, Sakura.DOM.GetPosition(e.target) + tab.length);
         }
 
         if (e.keyCode == 13 && e.ctrlKey) {
@@ -119,7 +83,10 @@
         }
 
         Sakura.Editor.PreviewTimeout(rText, pText);
-    });
+    }
+
+    pText.addEventListener("change", postUpdateEvent);
+    pText.addEventListener("keydown", postUpdateEvent);
 
     pTitle.addEventListener("keyup", function (e) {
         var title = pTitle.value;

resources/views/yuuno/forum/topic.twig

@@ -50,12 +50,7 @@
     {% set paginationUrl = route('forums.topic', topic.id) %}
 {% endif %}
 
-{% block css %}
-    <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css" rel="stylesheet">
-{% endblock %}
-
 {% block js %}
-    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
     <script type="text/javascript">
         function deletePost(id) {
             var confirm = new Sakura.Dialogue;

resources/views/yuuno/master.twig

@@ -11,8 +11,10 @@
 {{ block('meta') }}
         <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
         <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+        <link href="/css/libs.css" rel="stylesheet" type="text/css">
         <link href="/css/yuuno.css" rel="stylesheet" type="text/css">
 {{ block('css') }}
+        <script src="/js/libs.js" type="text/javascript"></script>
         <script src="/js/sakura.js" type="text/javascript"></script>
         <script src="/js/yuuno.js" type="text/javascript"></script>
 {{ block('js') }}

yarn.lock

@@ -2,6 +2,10 @@
 # yarn lockfile v1
 
 
+highlightjs@^9.8.0:
+  version "9.8.0"
+  resolved "https://registry.yarnpkg.com/highlightjs/-/highlightjs-9.8.0.tgz#981418614f45b04fa01623850990e016f950eb54"
+
 turbolinks@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/turbolinks/-/turbolinks-5.0.0.tgz#94c73fa299716824b0d96639b993b2efd7ef0e44"