Implemented proper import and started to work on importing file from wordpress

dataset.js

+const PLUGIN_PATH = "http://localhost/2021/aud_worpress/wp-content/plugins/knowledge-space-wp-plugin/";
\ No newline at end of file

editor/css/editor.css

+div#ks-editor section {
+    border: 1px lightgrey solid;
+    border-radius: 1px;
+    margin: 5px;
+    padding: 2.5px;
+    width: auto;
+}
+
+div#ks-editor section > * {
+    margin: 2.5px;
+}
+
+div#ks-editor *.selected {
+    background-color: lightblue;
+}

editor/editor.html → editor/editor.php

 <div id="ks-editor">
-    <style>
-        div#ks-editor section {
-            border: 1px lightgrey solid;
-            border-radius: 1px;
-            margin: 5px;
-            padding: 2.5px;
-            width: auto;
-        }
-
-        div#ks-editor section > * {
-            margin: 2.5px;
-        }
-
-        div#ks-editor *.selected {
-            background-color: lightblue;
-        }
-    </style>
-
     <script src="https://unpkg.com/force-graph"></script>
     <!--<script src="../../dist/force-graph.js"></script>-->
 
-    <script>
-        const PLUGIN_PATH = "%WWW%";
-    </script>
-
-    <script src="%WWW%editor/js/manageddata.js"></script>
-    <script src="%WWW%editor/js/graph.js"></script>
-    <script src="%WWW%editor/js/tools/tool.js"></script>
-    <script src="%WWW%editor/js/tools/undotool.js"></script>
-    <script src="%WWW%editor/js/tools/redotool.js"></script>
-    <script src="%WWW%editor/js/tools/selecttool.js"></script>
-    <script src="%WWW%editor/js/tools/collecttool.js"></script>
-    <script src="%WWW%editor/js/tools/deletetool.js"></script>
-    <script src="%WWW%editor/js/tools/addnodetool.js"></script>
-    <script src="%WWW%editor/js/tools/connecttool.js"></script>
-    <script src="%WWW%editor/js/display.js"></script>
-    <script src="%WWW%editor/js/state.js"></script>
-    <script src="%WWW%editor/js/editor.js"></script>
-
     <h1>Interface</h1>
     <div id="2d-graph"></div>
     <section id="toolbar"></section>

knowledge-space.php

@@ -33,28 +33,77 @@ function ks_add_graph(): string
     $script2 = "<script src='$script_path2'></script>";
     $script3 = "<script src='$script_path3'></script>";
     $script4 = "<script src='$script_path4'></script>";
+    
+    
+    return $three . $renderer . $renderer2 . $graph . $div . $variables . $script0 . $script1 . $script2 . $script3 . $script4;
+}
 
-
-    return $three . $renderer .$renderer2 . $graph . $div . $variables . $script0 . $script1 . $script2 .$script3 .$script4;
+function ks_add_editor()
+{
+    ks_add_editor_dependencies();
+    require_once(__DIR__.'/editor/editor.php');
 }
 
-function ks_add_editor(): string
+function ks_add_editor_dependencies()
 {
-    // Proper, secure script loading in the future
-    // Reference https://stackoverflow.com/a/16823761/7376120
-    wp_enqueue_script('jquery');
+    wp_enqueue_script('jquery');    // Should be wp_enqueue_script('jquery'), but doesn't work
 
-    $plugin_url = plugin_dir_url(__FILE__);
+    ks_enqueue_script('dataset.js');
+    ks_enqueue_script('editor/js/manageddata.js');
+    ks_enqueue_script('editor/js/graph.js', ["manageddata"]);
+    ks_enqueue_script('editor/js/tools/tool.js');
+    ks_enqueue_script('editor/js/tools/undotool.js', ["tool"]);
+    ks_enqueue_script('editor/js/tools/redotool.js', ["tool"]);
+    ks_enqueue_script('editor/js/tools/selecttool.js', ["tool"]);
+    ks_enqueue_script('editor/js/tools/collecttool.js', ["tool"]);
+    ks_enqueue_script('editor/js/tools/deletetool.js', ["tool"]);
+    ks_enqueue_script('editor/js/tools/addnodetool.js', ["tool"]);
+    ks_enqueue_script('editor/js/tools/connecttool.js', ["tool"]);
+    ks_enqueue_script('editor/js/display.js', []);
+    ks_enqueue_script('editor/js/state.js', ["tool", "display"]);
+    ks_enqueue_script('editor/js/editor.js', ["state", "graph", "dataset"]);
 
-    $raw_html = file_get_contents(__DIR__.DIRECTORY_SEPARATOR."editor".DIRECTORY_SEPARATOR."editor.html");
-    $ready_html = str_replace("%WWW%", $plugin_url, $raw_html);
+    ks_enqueue_style('editor/css/editor.css');
+}
 
-    return $ready_html;
+function ks_enqueue_script($relative_path, $dependencies = array())
+{
+    $prefix = "ks";
+    $type = "script";
+    $script_name = end(explode("/", $relative_path));
+    $script_name = explode(".", $script_name)[0];
+    
+    for ($i = 0; $i < sizeof($dependencies); $i++) {
+        $dependencies[$i] = $prefix . "-" . $dependencies[$i] . "-" . $type;
+    }
+    
+    // Source: https://developer.wordpress.org/reference/functions/wp_enqueue_script/ a comment from Andrija Naglic
+    // $file_version = date("ymd-Gis", filemtime(plugin_dir_path(__FILE__) . $relative_path));
+    
+    wp_enqueue_script($prefix .  "-" . $script_name . "-" . $type, plugins_url($relative_path, __FILE__), $dependencies, false);
 }
 
-function kg_load_css() {
+function ks_enqueue_style($relative_path, $dependencies = array())
+{
+    $prefix = "ks";
+    $type = "style";
+    $style_name = end(explode("/", $relative_path));
+    $style_name = explode(".", $style_name)[0];
+    
+    for ($i = 0; $i < sizeof($dependencies); $i++) {
+        $dependencies[$i] = $prefix . "-" . $dependencies[$i] . "-" . $type;
+    }
+    
+    // Source: https://developer.wordpress.org/reference/functions/wp_enqueue_script/ a comment from Andrija Naglic
+    $file_version = date("ymd-Gis", filemtime(plugin_dir_path(__FILE__) . $relative_path));
+    
+    wp_enqueue_style($prefix . "-" . $style_name . "-" . $type, plugins_url($relative_path, __FILE__), $dependencies, $file_version);
+}
+
+function kg_load_css()
+{
     $plugin_dir = plugin_dir_url(__FILE__);
-    wp_enqueue_style('kg-style', $plugin_dir.'kg-style.css');
+    wp_enqueue_style('kg-style', $plugin_dir . 'kg-style.css');
 }
 
 add_action('wp_enqueue_scripts', 'kg_load_css');