feat: Add a simple JS highlighter (Megaxela#9)

* Add a simple JS highlighter

* Add a JS sample code

Author: BeardedBeaver

CMakeLists.txt

@@ -25,6 +25,7 @@ set(INCLUDE_FILES
     include/QGLSLCompleter
     include/QGLSLHighlighter
     include/QJavaHighlighter
+    include/QJSHighlighter
     include/QLanguage
     include/QXMLHighlighter
     include/QJSONHighlighter
@@ -36,6 +37,7 @@ set(INCLUDE_FILES
     include/internal/QCodeEditor.hpp
     include/internal/QCXXHighlighter.hpp
     include/internal/QJavaHighlighter.hpp
+    include/internal/QJSHighlighter.hpp
     include/internal/QLineNumberArea.hpp
     include/internal/QStyleSyntaxHighlighter.hpp
     include/internal/QSyntaxStyle.hpp
@@ -59,6 +61,7 @@ set(SOURCE_FILES
     src/internal/QGLSLCompleter.cpp
     src/internal/QGLSLHighlighter.cpp
     src/internal/QJavaHighlighter.cpp
+    src/internal/QJSHighlighter.cpp
     src/internal/QLanguage.cpp
     src/internal/QXMLHighlighter.cpp
     src/internal/QJSONHighlighter.cpp

README.md

@@ -23,6 +23,8 @@ must not use a resource file with the same name.
 1. C++ highlight rules.
 1. XML highlight rules.
 1. JSON highligh rules.
+1. Java highligh rules.
+1. JavaScript highligh rules.
 1. Frame selection.
 1. Qt Creator styles.
 

example/resources/code_samples/js.js

@@ -0,0 +1,48 @@
+// example of a JS code to test JS syntax highlighter
+// source: 
+//    https://stackoverflow.com/questions/61301013/why-adapter-function-changing-my-num-array
+//    https://stackoverflow.com/questions/61301471/how-can-i-filter-undefined-from-an-object
+
+var num = []
+
+// creates a copy of a passed list, pushes 1 to it and returns it
+function push(nums) {
+  var orig = nums.map(x => x)
+  var newNum = pushed()
+  num = orig
+  return newNum
+}
+
+/*
+This is a helper function
+*/
+function pushed() {
+  num.push(1)
+  return num
+}
+
+function filterFunnel() {
+  let filterLists = $("#funnel-filters").children().filter(".filter");
+  let query = `SELECT * FROM funnel WHERE `;
+  let count = 0;
+  for(i = 0; i < Object.keys(filterLists).length; i++) {
+      let dom = filterLists[i];
+      if(dom === undefined){
+          return query;
+      } else {
+          if(dom.value === "Select" || dom.value === "") {
+
+          } else {
+              if(count >= 1) {
+                  query += ` AND ${dom.id} = ${dom.value}`;
+              }else{
+                  query += `${dom.id} = ${dom.value} `
+              }
+              count += 1;
+          }   
+      }
+  }
+}
+
+console.log("new", push(num))
+console.log("old", num)

example/resources/demo_resources.qrc

@@ -5,6 +5,7 @@
         <file>code_samples/shader.glsl</file>
         <file>code_samples/xml.xml</file>
         <file>code_samples/java.java</file>
+        <file>code_samples/js.js</file>
         <file>code_samples/json.json</file>
         <file>code_samples/lua.lua</file>
         <file>code_samples/python.py</file>

example/src/MainWindow.cpp

@@ -11,6 +11,7 @@
 #include <QGLSLHighlighter>
 #include <QXMLHighlighter>
 #include <QJavaHighlighter>
+#include <QJSHighlighter>
 #include <QJSONHighlighter>
 #include <QLuaHighlighter>
 #include <QPythonHighlighter>
@@ -55,6 +56,7 @@ void MainWindow::initData()
         {"GLSL", loadCode(":/code_samples/shader.glsl")},
         {"XML",  loadCode(":/code_samples/xml.xml")},
         {"Java",  loadCode(":/code_samples/java.java")},
+        {"JS",  loadCode(":/code_samples/js.js")},
         {"JSON",  loadCode(":/code_samples/json.json")},
         {"LUA",  loadCode(":/code_samples/lua.lua")},
         {"Python",  loadCode(":/code_samples/python.py")}
@@ -73,6 +75,7 @@ void MainWindow::initData()
         {"GLSL", new QGLSLHighlighter},
         {"XML",  new QXMLHighlighter},
         {"Java", new QJavaHighlighter },
+        {"JS", new QJSHighlighter},
         {"JSON", new QJSONHighlighter},
         {"LUA",  new QLuaHighlighter},
         {"Python",  new QPythonHighlighter},

include/QJSHighlighter

@@ -0,0 +1,3 @@
+#pragma once
+
+#include <internal/QJSHighlighter.hpp>

include/internal/QJSHighlighter.hpp

@@ -0,0 +1,35 @@
+#pragma once
+
+#include <QHighlightRule>
+#include <QStyleSyntaxHighlighter> // Required for inheritance
+
+// Qt
+#include <QRegularExpression>
+#include <QVector>
+
+class QSyntaxStyle;
+
+/**
+ * @brief Derived to implement highlighting of JavaScript code.
+ */
+class QJSHighlighter : public QStyleSyntaxHighlighter
+{
+    Q_OBJECT
+
+  public:
+    /**
+     * @brief Constructs a new instance of a JavaScript highlighter.
+     * @param document The text document to be highlighted.
+     * This may be a null pointer.
+     */
+    explicit QJSHighlighter(QTextDocument *document = nullptr);
+
+  protected:
+    void highlightBlock(const QString &text) override;
+
+  private:
+    QVector<QHighlightRule> m_highlightRules;
+
+    QRegularExpression m_commentStartPattern;
+    QRegularExpression m_commentEndPattern;
+};

resources/languages/js.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<root>
+    <section name="Keyword">
+        <name>break</name>
+        <name>case</name>
+        <name>class</name>
+        <name>catch</name>
+        <name>const</name>
+        <name>continue</name>
+        <name>debugger</name>
+        <name>default</name>
+        <name>delete</name>
+        <name>do</name>
+        <name>else</name>
+        <name>export</name>
+        <name>extends</name>
+        <name>finally</name>
+        <name>for</name>
+        <name>function</name>
+        <name>if</name>
+        <name>import</name>
+        <name>in</name>
+        <name>instanceof</name>
+        <name>let</name>
+        <name>new</name>
+        <name>return</name>
+        <name>super</name>
+        <name>switch</name>
+        <name>this</name>
+        <name>throw</name>
+        <name>try</name>
+        <name>typeof</name>
+        <name>var</name>
+        <name>void</name>
+        <name>while</name>
+        <name>with</name>
+        <name>yield</name>
+    </section>
+</root>

resources/qcodeeditor_resources.qrc

@@ -6,5 +6,6 @@
         <file>languages/java.xml</file>
         <file>languages/lua.xml</file>
         <file>languages/python.xml</file>
+        <file>languages/js.xml</file>
     </qresource>
 </RCC>

src/internal/QCodeEditor.cpp

@@ -4,6 +4,7 @@
 #include <QJavaHighlighter>
 #include <QLineNumberArea>
 #include <QPythonHighlighter>
+#include <QJSHighlighter>
 #include <QStyleSyntaxHighlighter>
 #include <QSyntaxStyle>
 
@@ -320,8 +321,9 @@ void QCodeEditor::toggleBlockComment()
 {
     bool isCpp = dynamic_cast<QCXXHighlighter *>(m_highlighter);
     bool isJava = dynamic_cast<QJavaHighlighter *>(m_highlighter);
+    bool isJS = dynamic_cast<QJSHighlighter *>(m_highlighter);
     bool isPython = dynamic_cast<QPythonHighlighter *>(m_highlighter);
-    if (isCpp || isJava || isPython)
+    if (isCpp || isJava || isJS || isPython)
     {
         auto cursor = textCursor();
         int startPos = cursor.selectionStart();