Uncomplete support for vditor

The load works but the save is wip
Pablo2m · Oct 25, 2020 · 39c8f2c · 39c8f2c
1 parent 8e9d308
commit 39c8f2c
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 1 deletion.
diff --git a/verzettler/bin/zk_server.py b/verzettler/bin/zk_server.py
@@ -5,10 +5,11 @@
 import logging
 from pathlib import Path
 import argparse
+import json
 
 # 3rd
 from flask import Flask
-from flask import render_template, redirect
+from flask import render_template, redirect, request
 from bokeh.embed import components
 from bokeh.resources import INLINE
 import tabulate
@@ -152,6 +153,18 @@ def open(notespec: str):
         "page.html", pandoc_output=converted, title=note.title, dot=dot,
     )
 
+@app.route("/edit/<string:notespec>",methods = ['POST', 'GET']) 
+def edit(notespec: str):
+    if request.method == 'GET':
+        logger.debug(f"Opening in the editor {notespec}")
+        content = Path(zk[notespec].path).read_text()
+        url = "/edit/" + notespec
+        return render_template("edit.html", value = content, id= url)
+    elif request.method == 'POST':
+        new_version = json.loads(request.json)
+        print(new_version)
+        logger.debug(f"Save from the editor {notespec}")
+
 
 @app.route("/open/")
 @app.route("/")

diff --git a/verzettler/static/js/edit.js b/verzettler/static/js/edit.js
@@ -0,0 +1,31 @@
+const addScript = (path, callback) => {
+  const scriptElement = document.createElement('script')
+  scriptElement.src = path
+  scriptElement.async = true
+  document.head.appendChild(scriptElement)
+  scriptElement.onload = () => {
+    callback()
+  }
+}
+
+const addStyle = (url) => {
+  const styleElement = document.createElement('link')
+  styleElement.rel = 'stylesheet'
+  styleElement.type = 'text/css'
+  styleElement.href = url
+  document.getElementsByTagName('head')[0].appendChild(styleElement)
+}
+
+addStyle('https://cdn.jsdelivr.net/npm/vditor@3.5.5/dist/index.css')
+document.addEventListener('DOMContentLoaded', function () {
+  var hm = document.createElement('script')
+  var s = document.getElementsByTagName('script')[0]
+  s.parentNode.insertBefore(hm, s)
+  if (document.getElementById('vdit')) {
+    addScript('https://cdn.jsdelivr.net/npm/vditor@3.5.5/dist/index.min.js',
+      () => {
+          vditorScript()
+      })
+  }
+})
+
diff --git a/verzettler/templates/edit.html b/verzettler/templates/edit.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
+    <title>Verzettel editor</title>
+    <meta http-equiv="Window-target" content="_top"/>
+    <script src='/static/js/edit.js' defer></script>
+</head>
+<body>
+<p>NAVBAR</p>
+</p>
+
+<div class="wrapper">
+    <div id="vditor"></div>
+    <div id="vdit"></div>
+    <button class="btn btn--small"onclick="document.getElementById('vditor').value=vditor.getValue();sendContent(this, vditor.getSelection())";'> Save</button> &nbsp;
+</div>
+
+<script>
+const content = {{value |tojson}};
+const id = {{id|tojson}};
+
+let vditor
+  vditorScript = () => {
+    vditor = new Vditor('vditor', { height: 360,
+                                    width: 800,
+                                    cache: {enable: false},
+                                    value: content,
+                                    lang: 'en_US',
+                                    mode: 'ir',
+                                    preview: {math:{engine:'MathJax'}}})};
+
+
+const sendContent= (it)=> {
+    // alert(vditor.getValue()) 
+    fetch(id, {method:"POST", body: JSON.stringify({content: vditor.getValue()})})}
+
+</script>
+   <!-- mode: 'wysiwyg'})
+   https://b3log.org/vditor/demo/method-get.html
+   https://stackoverflow.com/questions/6396101/pure-javascript-send-post-data-without-a-form
+   view-source:https://b3log.org/vditor/demo/advanced-toolbar.html
+   https://b3log.org/vditor/demo/advanced-upload.html
+        mode: 'ir'})
+        mode: 'sv',preview:{mode:'editor'}})
+        mode: 'sv',preview:{mode:'both'}})"> double panel   -->
+</body>
+</html>