Add editor source files

.gitignore

@@ -2,3 +2,4 @@
 wiki
 data/
 session/
+editor/node_modules/*

editor/package.json

@@ -0,0 +1,32 @@
+{
+  "devDependencies": {
+    "@editorjs/attaches": "^1.0.1",
+    "webpack": "^4.39.2",
+    "webpack-cli": "^3.3.7"
+  },
+  "dependencies": {
+    "@editorjs/checklist": "^1.1.0",
+    "@editorjs/code": "^2.4.1",
+    "@editorjs/editorjs": "^2.15.0",
+    "@editorjs/header": "^2.3.0",
+    "@editorjs/image": "^2.3.1",
+    "@editorjs/link": "^2.1.3",
+    "@editorjs/list": "^1.4.0",
+    "@editorjs/marker": "^1.2.1",
+    "@editorjs/table": "^1.2.0",
+    "axios": "^0.19.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^3.2.0",
+    "html-webpack-plugin": "^3.2.0",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^7.3.1",
+    "style-loader": "^1.0.0",
+    "webpack-dev-server": "^3.8.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch": "webpack --watch",
+    "start": "webpack-dev-server --open --hot",
+    "build": "webpack"
+  }
+}

editor/src/index.js

@@ -0,0 +1,109 @@
+import EditorJS from '@editorjs/editorjs';
+
+import Header from '@editorjs/header';
+import List from '@editorjs/list';
+import Table from '@editorjs/table';
+import Checklist from '@editorjs/checklist';
+import Code from '@editorjs/code';
+import Marker from '@editorjs/marker';
+import Link from '@editorjs/link';
+import Attaches from '@editorjs/attaches';
+import Image from '@editorjs/image';
+
+import axios from 'axios';
+import qs from 'querystring'
+
+import './styles.css';
+
+function addSaver(editor, saveUrl, page, beforeSave) {
+    return {
+        save() {
+            return editor.save().then(outputData => {
+                beforeSave()
+                let data = {
+                    'json': 1,
+                    'p': page,
+                    'summary': "JSON test",
+                    'content': JSON.stringify(outputData),
+                };
+                return axios.post(saveUrl, qs.encode(data))
+            })
+        }
+    }
+}
+
+function Indicator(element, timeout) {
+    let timeoutId;
+
+    return {
+        done() {
+            timeoutId = setTimeout(() => {
+                element.classList.add('hidden')
+            }, timeout*1000);
+        },
+
+        setText(text) {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+            element.innerText = text;
+            element.classList.remove('hidden')
+        },
+    }
+}
+
+function addIndicator(editor, indicator) {
+    return {
+        save() {
+            editor.save().then(() => {
+                indicator.setText('saved!');
+                indicator.done();
+            })
+        }
+    }
+}
+
+const editor = new EditorJS({
+    holder: 'editor',
+    tools: {
+        header: {
+            class: Header
+        },
+        list: List,
+        table: Table,
+        checklist: Checklist,
+        code: Code,
+        marker: Marker,
+        link: {
+            class: Link,
+            config: {
+                endpoint: '/fetchLink'
+            }
+        },
+        attaches: {
+            class: Attaches
+        },
+        image: {
+            class: Image
+        }
+    },
+    onChange() {
+        let element = document.getElementById('editor');
+        let indicator = Indicator(document.getElementById('save-indicator'), 2);
+        let saveUrl = element.dataset.saveurl;
+        let page = element.dataset.page;
+
+        indicator.setText('has changes...');
+        addIndicator(
+            addSaver(editor, saveUrl, page, () => indicator.setText('saving...')),
+            indicator
+        ).save()
+    },
+    onReady() {
+        let data = document.getElementById('editor').dataset.input;
+        if (data) {
+            editor.blocks.render(JSON.parse(data));
+        }
+    }
+});

editor/src/styles.css

@@ -0,0 +1,18 @@
+#editor {
+    max-width: 650px;
+    margin: 0 auto;
+}
+
+#save-indicator {
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: lightskyblue;
+    font-weight: bold;
+    color: white;
+    padding: 3px;
+    z-index: 50;
+}
+.hidden {
+    display: none;
+}

editor/webpack.config.js

@@ -0,0 +1,33 @@
+const path = require('path');
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const {CleanWebpackPlugin} = require('clean-webpack-plugin');
+
+module.exports = {
+    mode: 'development',
+    entry: {
+        index: './src/index.js'
+    },
+    output: {
+        filename: '[name].bundle.js',
+        path: path.resolve(__dirname, 'dist')
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader']
+            }
+        ]
+    },
+
+    plugins: [
+        new CleanWebpackPlugin()
+    ],
+
+    devServer: {
+        contentBase: './dist',
+        hot: true
+    },
+};