Add wiki-list-editor 0.4.1

editor/package.json

@@ -5,18 +5,20 @@
     "scss-loader": "0.0.1",
     "webpack": "^4.39.2",
     "webpack-cli": "^3.3.7",
-    "webpack-dev-server": "^3.8.0"
+    "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
     "axios": "^0.19.0",
     "bulma": "^0.7.5",
     "css-loader": "^3.2.0",
+    "file-loader": "^6.0.0",
+    "jquery-contextmenu": "^2.9.2",
     "lunr": "^2.3.8",
     "mustache": "^4.0.1",
-    "node-sass": "^4.12.0",
+    "node-sass": "^4.14.1",
     "sass-loader": "^7.3.1",
     "style-loader": "^1.0.0",
-    "wiki-list-editor": "^0.3.4"
+    "wiki-list-editor": "^0.4.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

editor/src/index.js

@@ -4,8 +4,10 @@ import qs from 'querystring'
 import $ from 'jquery';
 import search from './search';
 import Mustache from 'mustache';
+import 'jquery-contextmenu';
 
 import './styles.scss';
+import '../node_modules/jquery-contextmenu/dist/jquery.contextMenu.css';
 
 function addSaver(editor, saveUrl, page, beforeSave) {
     return {
@@ -72,6 +74,20 @@ if (holder) {
             indicator
         ).save()
     })
+
+    $.contextMenu({
+        selector: '.marker',
+        items: {
+            copy: {
+                name: 'Copy',
+                callback: function (key, opt) {
+                    editor.copy(this).then(result => {
+                        console.log(result)
+                    })
+                }
+            }
+        }
+    });
 }
 
 let timeout = null;

editor/src/styles.scss

@@ -28,10 +28,9 @@ input.input-line { font-family: 'Inter', sans-serif; }
 }
 
 .list-item {
-    border: none !important;
+    border: none;
     padding: 2px 0px;
 }
-
 input.input-line,
 input.input-line:active,
 input.input-line:focus {

editor/webpack.config.js

@@ -17,6 +17,14 @@ module.exports = {
             {
                 test: /\.s?css$/,
                 use: ['style-loader', 'css-loader', 'sass-loader']
+            },
+            {
+                test: /\.(woff|woff2|eot|ttf|otf)$/,
+                loader: "file-loader",
+                options: {
+                    name: '[name].[ext]',
+                    outputPath: 'font/'
+                }
             }
         ]
     },

templates/layout.html

@@ -84,12 +84,18 @@
             }
         }
 
-        .list-item {
+        .root .list-item {
             padding: 3px;
+            padding-left: 12px;
             display: flex;
             cursor: pointer;
             margin-left: 32px;
             flex-direction: column;
+            border: 1px solid white;
+        }
+
+        .root .list-item:not(:last-child) {
+            border: 1px solid white;
         }
 
         .line {
@@ -101,13 +107,18 @@
         .marker {
             border-radius: 50%;
             background: black;
-            width: 6px;
-            height: 6px;
+            width: 16px;
+            height: 16px;
             display: inline-block;
-            margin-right: 12px;
+            margin-right: 8px;
             flex-shrink: 0;
             align-self: baseline;
-            margin-top: 10px;
+            margin-top: 4px;
+            border: 5px solid white;
+        }
+
+        .marker:hover {
+            border-color: #ccc;
         }
 
         textarea {
@@ -115,9 +126,32 @@
             resize: none;
         }
 
+        .root .list-item.selection {
+            border-left-color: #ccc;
+            border-right-color: #ccc;
+            border-left-style: dashed;
+            border-right-style: dashed;
+
+        }
+        .root .list-item.selection-first {
+            border-top-style: dashed;
+            border-top-color: #ccc;
+        }
+        .root .list-item.selection-last {
+            border-bottom-style: dashed;
+            border-bottom-color: #ccc;
+        }
+
+
         .selected {
             background: lightblue;
         }
+        .selected .marker {
+            border-color: lightblue;
+        }
+        .editor.selected .marker {
+            border-color: white;
+        }
 
         .editor.selected {
             background: none;