Merge branch 'feature/markdown-content-storage' into 'master'

Feature/markdown content storage

The markdown storage is feature complete...

When I am a bit more experienced with mogwai the code should be cleaned up.

See merge request !1

 [workspace]
-members = [ "ui", "server" ]
+members = [ "server", "ui", "mogwai-list" ]
 
 [profile.release]
 lto = true

@@ -8,7 +8,7 @@ PROFILE =
 endif
 
 start:
-	systemfd --no-pid -s http::3000 -- \
+	systemfd --no-pid -s 0.0.0.0:3000 -- \
 		cargo watch -i static/ -s "make run"
 
 wasm:

+# This is from the webpage:
+# https://www.developer.com/languages/creating-an-api-with-rust-and-sqlite/
+# I have fixed some things manually as the code on that page did not compile
+# without.
+
+# Additional informations at https://actix.rs/docs/databases/ assume one
+# should use web::block to access the database...
+# TODO check what is the difference to this approach.
+#  - well, we use web::block already for write actions.
+
+# Introduction to rust async:
+# https://gruberbastian.com/posts/rust_async/
+# https://blog.logrocket.com/a-practical-guide-to-async-in-rust/
+# https://os.phil-opp.com/async-await/
+
+# Simple explanation on technical terms synchronous, asynchronous, concurrent
+# and parallel.
+# https://medium.com/plain-and-simple/synchronous-vs-asynchronous-vs-concurrent-vs-parallel-4342bfb8b9f2
+
+[package]
+name = "artshop-common"
+version = "0.1.0"
+workspace = ".."
+edition = "2018"
+
+[dependencies]
+serde = "^1.0"

+pub mod types;

+use serde::{Deserialize, Serialize};
+
+#[derive(Debug, Clone, Deserialize, Serialize)]
+pub enum Either<L, R> {
+    Left(L),
+    Right(R)
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+pub struct MarkdownJson {
+    pub name: String,
+    pub content: String,
+    pub number_of_versions: i32,
+    pub date_created: String,
+    pub date_updated: String,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+pub struct MarkdownDiffJson {
+    pub id: i32,
+    pub date_created: String,
+}

@@ -2,4 +2,4 @@
 # see diesel.rs/guides/configuring-diesel-cli
 
 [print_schema]
-file = "src/schema.rs"
+file = "server/src/schema.rs"

-# Ein sehr schöner Titel
+# Markdown Cheatsheat
 
-## Ein sinnloser Text
-
-Hier kommt ganz viel Text der irgendwie auch was machen soll, aber Zeilen
-sollen auch im <pre> Eingabefeld automatisch umbrechen.
-
-Ein neuner Paragraph beginnt nach einer Leerzeile.  
-Ein Umbruch entsteht wie gewohnt durch 2 spaces am Ende einer
-Zeile.
-
-## Fußnoten
+## Überschriften
+---
 
-Vllt. kann man sogar so was wie Fussnoten[^1] in den Markdown Text
-einbinden... diese kann man dann irgendwo einbauen...
+# # <H1>
+## ## <H2>
+### ### <H3>
+#### #### <H4>
+##### ##### <H5>
+###### ###### <H6>
 
+## Absätze und Umbrüche
 ---
 
-[^1]: Zum Beispiel so...
-
-[^2]: Oder so...
+Ein einfacher Zeilenumbuch
+verändert den Textfluß nicht. Spaces             haben           auch keinen Einfluß auf den Textfluß. Es ist selten eine gute Idee große Abstände innerhalb eines Textes zu habe, sollte man diese aber wirklich brauchen kann man auf        inline html        zurückgreifen.
 
-## inline html ist im Moment auch ok.
+Leerzeilen erzeugen neue Paragraphen. Um im formatierten Text einen Zeilenumbruch zu erzeugen verwendet man zwei Spaces vor einem Zeilenumbruch im Eingabetext.  
+Dies führt nicht zu einem Paragraphen.
 
-<pre>Lustigerweise geht auch inline html</pre>
+## Hervorhebungen
+---
 
-## Listen for fun
+- *kursive (schwache) Hervorhebung*
+- **fette (starke) Hervorhebung**
+- ***kursiv und fette (sehr starke) Hervorhebung***
+- *schwache mit **eingebetteter starker** Hervorhebung*
+- **starke mit *eingebetteter schwacher* Hervorhebung**
+- ~~durchgestrichen~~
+- <u>untersteichen nur mit HTML</u>
+- ~~*durchgestrichen kursiv*~~
+- **~~fett durchgestrichen~~**
+- *<u>kursiv unterstrichen</u>*
+- <u>**unterstrichen fett**</u>
+
+## Listen
+---
 
-- ein Liste
-    - mehr Liste
-    - diesmal als Subliste.
-- und was auch immer...
-    1. und nun Verschachtelt.
-        1. Numeriert.
-        2. huhuhu
-        3. wie bitte.
-    2. juhu
-- noch mehr Liste
+- erster Listeneintrag
+    - erster Unterlisteneintrag
+    - zweiter Unterlisteneintrag
+- zweiter Listeneintrag
+    1. erster numerierter Listeneintrag
+        1. erster numerierter Unterlisteneintrag
+        2. zeiter numerierter Unterlisteneintrag
+        3. dritter numerierter Unterlisteneintrag
+    2. zweiter numerierter Listeneintrag
+- dritter Listeneintrag
+    - [x] erster Auswahllisteneintrag
+    - [ ] zweiter Auswahllisteneintrag
+    - [ ] dritter Auswahllisteneintrag
+- vierter Listeneintrag
+    1. [ ] erster numerierter Auswahllisteneintrag
+    2. [x] zweiter numerierter Auswahllisteneintrag
+
+## Code Blöcke
+---
 
-## Preformated Text
+    Dies ist ein codeblock durch Einrückung.
+      In diesem werden    keine Formatierungen
+        vorgenommen.
 
-```Hier kommt der code```
+Mit backticks lassen sich Codeblöcke mit Sprachinformation
+erstellen. Theoretisch koennte fuer solche Böcke dann Syntax-Highliting eingebaut werden.
 
-Und hier der Paragraph mit `inline code` der auch sehr schön aussehen kann.
+```shell
+#!/bin/env sh
 
-## Hervorhebungen
+FOO="foo"
 
-Man kann Text auch sehr schön formatieren. So ist es z.B. möglich
-*Worte kursiv zu stellen* oder man kann **sie auch fett schreiben**.
-Als spezielles feature kann der von mir verwendete Parser auch
-~~Texte durchstreichen~~.
+function func() {
+  local BAR=bar
+}
+```
 
-Nur wenn man Text <u>unterstreichen</u> will muss man auf inline html
-zurückgreifen.
+Auch in den Fließtext lassen sich `inline code` Elemente einfügen um z.B. einzelne Kommandos hervorzuheben.
 
-## Blockquotes und horizontale Linie
+## Zitate und horizontale Linie
+---
 
-> Dies sollte jetzt als quote erkennbar sein.
+> Dies ist ein Zitat.
 >
->> Auch diese sind schachtelbar
+>> Zitate können verschachtelt sein.
 >
-> Und weiter gehts.
+> Wir können also zitieren was jemand zitiert hat.
+> Solange die Zeilen ohne Unterbrechung mit einem &gt;
+> beginnen bleibt es ein Zitat
 
----
 
-> Aber dies ist ein neuer quote.
+> Sobald eine Zeile on führendes &gt; auftaucht endet ein
+> Zitat.
 
 ## Links
+---
 
 Ein link kann inline geschrieben werden, so wie diese zu
 [Heise.de](https://heise.de/ 'Heise.de') oder als Referenz am Ende des Textes
 wie diese nach [Telepolis][lnk1].
 
-## Bilder koennte man auch einbinden.
+## Bilder
+---
 
 Wie Links lassen sich auch Bilder wie mein
 ![Gravatar](https://www.gravatar.com/avatar/fd016c954ec4ed3a4315eeed6c8b97b8)
@@ -85,7 +113,8 @@ Paragraphen zu plazieren.
 
 Etwas so wie hier.
 
-## Tabellen sollten auch gehen...
+## Tabellen
+---
 
 Die folgenden Beispiele kommen von [markdown.land][lnk2]:
 
@@ -103,12 +132,31 @@ Bananas | 1.89 | 6
 
 und die Spaltenausrichtung kann man auch einstellen:
 
-
 | Item         | Price | # In stock |
 |--------------|:-----:|-----------:|
 | Juicy Apples |  1.99 |        739 |
 | Bananas      |  1.8900 |          6 |
 
+## Fußnoten
+---
+
+Man kann auch verlinkte Fußnoten[^1] in den Text
+einbinden. Die Fußnote selber kann dann an beliebige stelle im Text stehen.
+
+---
+[^1]: Zum Beispiel so.
+
+[^2]: Diese Fußnote hat keine Verlinkung im Text.
+
+## HTML einbetten.
+---
+
+<ul>
+<li>
+<pre>Man kann auch direkt HTML tags einbetten,
+wie hier.</pre>
+</li>
+</ul>
 
 [lnk1]: https://heise.de/tp/ 'Telepolis'
 [lnk2]: https://markdown.land/markdown-table 'markdown.land'

+# Markdown Historie.
+
+Jedes gespeicherte Markdown erhaelt eine historie ueber die jede vergangene
+Version eingesehen werden kann. Gespeichert ist diese in Form eines
+komprimierten diffs.
+
+Die Frontend Komponente kann jede beliebige existierende Patchversion
+darstellen. Auf der Datenseite ist aber kein **undo** möglich. Genau wie man
+in der Realität nicht in der Zeit zurück gehen kann kann man das auch nicht
+mit den Inhalten. Würde man das zulassen, so würde entweder ein Teil der
+Historie des Markdowns wegfallen müssen oder aber es würde ein beliebig
+komplexer Baum von Histoien entstehen.
+
+Statt also ein **undo** auf eine frühere Version zuzulassen kann man in der
+aktuellen Version auf frühere Stände zurück gehen und diese gegebenenfalls
+noch anpassen. Dieser Stand wird wieder ein neuer Patch gegen die gegenwärtige
+Version.

@@ -15,3 +15,10 @@
 ## Free Artwork
 - [Designlooter](https://designlooter.com/ 'Designlooter')
 - [SVGRepo](https://www.svgrepo.com/ 'SVGRepo')
+
+## Send and async and using non Send types...
+- [Rust Send Story](https://procmarco.netlify.app/blog/2021-05-04-a-story-about-async-rust-and-using-send-types/ 'Rust Send story')
+
+## Restful API
+[ReadTheDocs apiguide](https://apiguide.readthedocs.io/en/latest/build_and_publish/use_RESTful_urls.html 'ReadTheDocs apiguide')
+[RestfulApi](https://restfulapi.net/versioning/ 'RestfulApi')

+-- This file should undo anything in `up.sql`
+DROP INDEX "markdown_diffs_id";
+DROP TABLE "markdown_diffs";
+DROP TABLE "markdowns";

-pub(crate) const MD_EXAMPLE :&str = r"# Ein sehr schöner Titel
+CREATE TABLE "markdowns" (
+	id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
+	name VARCHAR(256) NOT NULL,
+	content TEXT NOT NULL,
+	number_of_versions INTEGER NOT NULL DEFAULT (1),
+	date_created TEXT NOT NULL,
+	date_updated TEXT NOT NULL
+);
+
+-- This holds compressed reverse patches to markdown.content.
+-- The markdown.content field always holds the latest version.
+-- This way we can always restore every version we had in the past.
+-- The date_created here should be set to the value of
+-- markdown.date_updated when the patch was created. This diff_id
+-- is always current last max diff_id for given markdown_id plus 1.
+CREATE TABLE "markdown_diffs" (
+	markdown_id INTEGER NOT NULL,
+	diff_id INTEGER NOT NULL,
+	diff BLOB NOT NULL,
+	date_created TEXT NOT NULL,
+	PRIMARY KEY (markdown_id, diff_id)
+);
+
+INSERT INTO
+	"markdowns"(name, content, date_created, date_updated)
+VALUES
+	( "md-example"
+        , "# Ein sehr schöner Titel
 
 ## Ein sinnloser Text
 
@@ -103,30 +130,12 @@ Bananas | 1.89 | 6
 
 und die Spaltenausrichtung kann man auch einstellen:
 
-
 | Item         | Price | # In stock |
 |--------------|:-----:|-----------:|
 | Juicy Apples |  1.99 |        739 |
 | Bananas      |  1.8900 |          6 |
 
-
 [lnk1]: https://heise.de/tp/ 'Telepolis'
-[lnk2]: https://markdown.land/markdown-table 'markdown.land'";
-
-/*
-pub(crate) const PEN_ICON :&str = r#"<?xml version="1.0" encoding="iso-8859-1"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-          "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 220.001 220.001"
-     style="enable-background:new 0 0 220.001 220.001;" xml:space="preserve">
-    <g>
-    	<polygon points="0,220 59.34,213.86 6.143,160.661"/>
-    	<path d="M132.018,34.787l53.197,53.197L69.568,203.631L16.37,
-            150.434L132.018,34.787z M212.696,60.502c9.738-9.738,9.742-25.527,
-            0-35.268l-17.93-17.93c-9.738-9.74-25.529-9.738-35.268,0l-17.346,
-            17.347l53.199,53.196L212.696,60.502z"/>
-    </g>
-</svg>"#;
-*/
+[lnk2]: https://markdown.land/markdown-table 'markdown.land'"
+	, "Today"
+	, "Today" );

+[package]
+name = "mogwai-list"
+version = "0.0.0"
+authors = ["Georg Hopp <georg@steffers.org>"]
+workspace = ".."
+edition = "2018"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[features]
+default = ["console_error_panic_hook"]
+
+[dependencies]
+artshop-common = { path = "../common" }
+katex = { version = "0.4", default-features = false, features = ["wasm-js"] }
+pulldown-cmark = "0.9"
+console_log = "^0.1"
+log = "^0.4"
+serde = { version = "^1.0", features = ["derive"] }
+serde_json = "^1.0"
+wasm-bindgen = "^0.2"
+wasm-bindgen-futures = "^0.4"
+
+# The `console_error_panic_hook` crate provides better debugging of panics by
+# logging them with `console.error`. This is great for development, but requires
+# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
+# code size when deploying.
+console_error_panic_hook = { version = "0.1.6", optional = true }
+wee_alloc = { version = "0.4.2", optional = true }
+js-sys = "^0.3"
+
+[dependencies.mogwai]
+version = "^0.5"
+
+[dependencies.web-sys]
+version = "^0.3"
+features = [
+  "Document",
+  "DomParser",
+  "Headers",
+  "HtmlElement",
+  "HtmlInputElement",
+  "MouseEvent",
+  "Node",
+  "Request",
+  "RequestInit",
+  "RequestMode",
+  "Response",
+  "SupportedType",
+  "Window",
+]
+
+[dev-dependencies]
+wasm-bindgen-test = "0.2"

+#![allow(unused_braces)]
+use log::Level;
+use mogwai::{futures, prelude::*};
+use std::panic;
+use wasm_bindgen::prelude::*;
+
+/// An item widget.
+/// Keeps track of clicks.
+#[derive(Clone, Debug)]
+struct Item {
+    id: usize,
+    clicks: Model<u32>,
+}
+
+/// An item's update messages.
+#[derive(Clone)]
+enum ItemMsg {
+    /// The user clicked
+    Click,
+    /// The user requested this item be removed
+    Remove,
+}
+
+/// One item's logic loop.
+async fn item_logic(
+    id: usize,
+    clicks: Model<u32>,
+    mut from_view: broadcast::Receiver<ItemMsg>,
+    to_list: broadcast::Sender<ListMsg>,
+) {
+    loop {
+        match from_view.recv().await {
+            Ok(ItemMsg::Click) => {
+                clicks.visit_mut(|c| *c += 1).await;
+            }
+            Ok(ItemMsg::Remove) => {
+                to_list.broadcast(ListMsg::RemoveItem(id)).await.unwrap();
+                break;
+            }
+            Err(_) => break,
+        }
+    }
+    log::info!("item {} logic loop is done", id);
+}
+
+// ANCHOR: item_view
+fn item_view(
+    clicks: impl Stream<Item = u32> + Sendable,
+    to_logic: broadcast::Sender<ItemMsg>,
+) -> ViewBuilder<Dom> {
+    builder! {
+        <li>
+            <button
+                style:cursor="pointer"
+                on:click=to_logic.sink().contra_map(|_| ItemMsg::Click)>
+                "Increment"
+            </button>
+            <button
+                style:cursor="pointer"
+                on:click=to_logic.sink().contra_map(|_| ItemMsg::Remove)>
+                "Remove"
+            </button>
+            " "
+            <span>
+            {
+                ("", clicks.map(|clicks| match clicks {
+                    1 => "1 click".to_string(),
+                    n => format!("{} clicks", n),
+                }))
+            }
+            </span>
+        </li>
+    }
+}
+// ANCHOR_END: item_view
+
+/// Create a new item component.
+fn item(id: usize, clicks: Model<u32>, to_list: broadcast::Sender<ListMsg>) -> Component<Dom> {
+    let (tx, rx) = broadcast::bounded(1);
+    Component::from(item_view(clicks.stream(), tx)).with_logic(item_logic(id, clicks, rx, to_list))
+}
+
+#[derive(Clone)]
+enum ListMsg {
+    /// Create a new item
+    NewItem,
+    /// Remove the item with the given id
+    RemoveItem(usize),
+}
+
+// ANCHOR: list_logic_coms
+/// Launch the logic loop of our list of items.
+async fn list_logic(
+    input: broadcast::Receiver<ListMsg>,
+    tx_patch_children: mpmc::Sender<ListPatch<ViewBuilder<Dom>>>,
+) {
+    // Set up our communication from items to this logic loop by
+    // * creating a list patch model
+    // * creating a channel to go from item to list logic (aka here)
+    // * creating a side-effect stream (for_each) that runs for each item patch
+    // * map patches of Item to patches of builders and send that to our view
+    //   through tx_patch_children
+    let mut items: ListPatchModel<Item> = ListPatchModel::new();
+    let (to_list, from_items) = broadcast::bounded::<ListMsg>(1);
+    let to_list = to_list.clone();
+    let all_item_patches = items.stream().map(move |patch| {
+        log::info!("mapping patch for item: {:?}", patch);
+        let to_list = to_list.clone();
+        patch.map(move |Item { id, clicks }: Item| {
+            let to_list = to_list.clone();
+            let component = item(id, clicks, to_list);
+            let builder: ViewBuilder<Dom> = component.into();
+            builder
+        })
+    }).for_each(move |patch| {
+        let tx_patch_children = tx_patch_children.clone();
+        async move {
+            tx_patch_children.send(patch).await.unwrap();
+        }
+    });
+    mogwai::spawn(all_item_patches);
+    // ANCHOR_END: list_logic_coms
+    // ANCHOR: list_logic_loop
+    // Combine the input from our view with the input from our items
+    let mut input = futures::stream::select_all(vec![input, from_items]);
+    let mut next_id = 0;
+    loop {
+        match input.next().await {
+            Some(ListMsg::NewItem) => {
+                log::info!("creating a new item");
+                let item: Item = Item {
+                    id: next_id,
+                    clicks: Model::new(0),
+                };
+                next_id += 1;
+                // patch our items easily and _item_patch_stream's for_each runs automatically,
+                // keeping the list of item views in sync
+                items.list_patch_push(item);
+            }
+            Some(ListMsg::RemoveItem(id)) => {
+                log::info!("removing item: {}", id);
+                let mut may_index = None;
+                'find_item_by_id: for (item, index) in items.read().await.iter().zip(0..) {
+                    if item.id == id {
+                        may_index = Some(index);
+                        break 'find_item_by_id;
+                    }
+                }
+
+                if let Some(index) = may_index {
+                    // patch our items to remove the item at the index
+                    let _ = items.list_patch_remove(index);
+                }
+            }
+            _ => {
+                log::error!("Leaving list logic loop - this shouldn't happen");
+                break;
+            },
+        }
+    }
+    // ANCHOR_END: list_logic_loop
+}
+
+// ANCHOR: list_view
+fn list_view<T>(to_logic: broadcast::Sender<ListMsg>, children: T) -> ViewBuilder<Dom>
+where
+    T: Stream<Item = ListPatch<ViewBuilder<Dom>>> + Sendable,
+{
+    builder! {
+        <fieldset>
+            <legend>"A List of Gizmos"</legend>
+                <button style:cursor="pointer" on:click=to_logic.sink().contra_map(|_| ListMsg::NewItem)>
+                "Create a new item"
+            </button>
+            <fieldset>
+                <legend>"Items"</legend>
+                <ol patch:children=children>
+                </ol>
+            </fieldset>
+        </fieldset>
+    }
+}
+// ANCHOR_END: list_view
+
+/// Create our list component.
+fn list() -> Component<Dom> {
+    let (logic_tx, logic_rx) = broadcast::bounded(1);
+    let (item_patch_tx, item_patch_rx) = mpmc::bounded(1);
+    Component::from(list_view(logic_tx, item_patch_rx))
+        .with_logic(list_logic(logic_rx, item_patch_tx))
+}
+
+#[wasm_bindgen]
+pub fn main(parent_id: Option<String>) -> Result<(), JsValue> {
+    panic::set_hook(Box::new(console_error_panic_hook::hook));
+    console_log::init_with_level(Level::Trace).unwrap();
+    let component = list();
+    let view = component.build().unwrap();
+
+    if let Some(id) = parent_id {
+        let parent = mogwai::utils::document().get_element_by_id(&id).unwrap();
+        view.run_in_container(&parent)
+    } else {
+        view.run()
+    }
+}

@@ -27,6 +27,7 @@ edition = "2018"
 actix-files = "0.2"
 actix-web = "2.0"
 actix-rt = "1.1.1"
+artshop-common = { path = "../common" }
 diesel = { version = "1.4.7", features = ["sqlite", "r2d2"]}
 r2d2 = "0.8.9"
 dotenv = "0.15.0"
@@ -36,3 +37,5 @@ serde_json = "1.0"
 anyhow = "1.0"
 chrono = "0.4.15"
 listenfd = "0.3"
+diffy = "0.2"
+flate2 = "^1.0"

-use std::error::Error as StdError;
-use std::fmt;
+use std::{fmt::Display, pin::Pin};
 
 use diesel::result;
+use diffy::ParsePatchError;
 use r2d2;
 
+type ParentError = Option<Pin<Box<dyn std::error::Error>>>;
+
 #[derive(Debug)]
-pub(crate) enum Error {
-    DieselResult(result::Error),
-    DieselR2d2(r2d2::Error),
+pub(crate) struct Error {
+    source: ParentError,
+    message: String,
 }
 
-impl fmt::Display for Error {
-    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        match self {
-            Error::DieselR2d2(r)   => write!(f, "{}", r),
-            Error::DieselResult(r) => write!(f, "{}", r),
-        }
+unsafe impl Send for Error {}
+
+pub(crate) type Result<T> = std::result::Result<T, Error>;
+
+impl std::error::Error for Error {
+    fn source(&self) -> Option<&(dyn std::error::Error + 'static)> {
+        self.source.as_deref()
     }
 }
 
-impl StdError for Error {
-    fn source(&self) -> Option<&(dyn StdError + 'static)> {
+impl Display for Error {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         match self {
-            Error::DieselR2d2(r)   => Some(r),
-            Error::DieselResult(r) => Some(r),
+            Error { source: Some(source), message } =>
+                write!(f, "{}: {}", message, source),
+            Error { source: None, message } => write!(f, "{}", message),
         }
     }
 }
 
+impl From<&str> for Error {
+    fn from(message: &str) -> Self {
+        Self { source: None, message: String::from(message) }
+    }
+}
+
 impl From<result::Error> for Error {
-    fn from(error: result::Error) -> Self {
-        Error::DieselResult(error)
+    fn from(source: result::Error) -> Self {
+        Self { source: Some(Box::pin(source))
+             , message: String::from("Diesel Result Error")
+        }
     }
 }
 
 impl From<r2d2::Error> for Error {
-    fn from(error: r2d2::Error) -> Self {
-        Error::DieselR2d2(error)
+    fn from(source: r2d2::Error) -> Self {
+        Self { source: Some(Box::pin(source))
+             , message: String::from("Diesel Result Error")
+        }
+    }
+}
+
+impl From<std::io::Error> for Error {
+    fn from(source: std::io::Error) -> Self {
+        Self { source: Some(Box::pin(source))
+             , message: String::from("IO Error")
+        }
+    }
+}
+
+impl From<std::str::Utf8Error> for Error {
+    fn from(source: std::str::Utf8Error) -> Self {
+        Self { source: Some(Box::pin(source))
+             , message: String::from("IO Error")
+        }
+    }
+}
+
+impl From<ParsePatchError> for Error {
+    fn from(source: ParsePatchError) -> Self {
+        Self { source: Some(Box::pin(source))
+             , message: String::from("IO Error")
+        }
     }
 }

@@ -6,10 +6,15 @@ mod models;
 mod routes;
 mod schema;
 
+use crate::routes::markdown::*;
+use crate::routes::other::*;
+use crate::routes::user::*;
+
 use actix_web::{guard, web, App, HttpResponse, HttpServer};
 use diesel::r2d2::{self, ConnectionManager};
 use diesel::SqliteConnection;
 use listenfd::ListenFd;
+use routes::markdown::get_markdown;
 
 pub(crate) type Pool = r2d2::Pool<ConnectionManager<SqliteConnection>>;
 
@@ -28,24 +33,41 @@ async fn main() -> std::io::Result<()> {
         App::new() . data(database_pool.clone())
                    . service(actix_files::Files::new("/static", "./static"))
                    . service( web::scope("/api/v0")
+                            . service( web::resource("/markdowns")
+                                     . route(web::get().to(get_markdowns))
+                                     )
+                            . service( web::resource("/markdowns/{id}")
+                                     . route(web::get().to(get_markdown))
+                                     . route(web::put().to(update_markdown))
+                                     )
+                            . service( web::resource("/markdowns/{id}/patches")
+                                     . route(web::get().to(get_patches))
+                                     )
                             . service( web::resource("/users")
-                                     . route(web::get().to(routes::get_users))
-                                     . route(web::put().to(routes::create_user)))
+                                     . route(web::get().to(get_users))
+                                     . route(web::put().to(create_user))
+                                     )
                             . service( web::resource("/users/{id}")
-                                     . route(web::delete().to(routes::delete_user))
-                                     . route(web::get().to(routes::get_user))
-                                     . route(web::put().to(routes::update_user))))
+                                     . route(web::delete().to(delete_user))
+                                     . route(web::get().to(get_user))
+                                     . route(web::put().to(update_user))
+                                     )
+                            )
                    . service( web::scope("")
-                            . route("/", web::get().to(routes::root))
-                            . route("/index", web::get().to(routes::root))
-                            . route("/index.html", web::get().to(routes::root))
-                            . route("/favicon", web::get().to(routes::favicon))
-                            . route("/favicon.ico", web::get().to(routes::favicon)))
-                   . default_service(web::resource("")
-                            . route(web::get().to(routes::p404))
+                            . route("/", web::get().to(root))
+                            . route("/api.html", web::get().to(apidoc))
+                            . route("/index", web::get().to(root))
+                            . route("/index.html", web::get().to(root))
+                            . route("/favicon", web::get().to(favicon))
+                            . route("/favicon.ico", web::get().to(favicon))
+                            )
+                   . default_service( web::resource("")
+                            . route( web::get().to(p404) )
                             . route( web::route()
-                                   . guard(guard::Not(guard::Get()))
-                                   . to(HttpResponse::MethodNotAllowed)))
+                                   . guard( guard::Not(guard::Get()) )
+                                   . to(HttpResponse::MethodNotAllowed)
+                                   )
+                            )
     });
 
     let server = match listenfd.take_tcp_listener(0).unwrap() {

+use std::sync::Arc;
+use crate::schema::*;
+use crate::error::*;
+use crate::Pool;
+use artshop_common::types::MarkdownDiffJson;
+use artshop_common::types::MarkdownJson;
+use diesel::prelude::*;
+use diesel::{
+    dsl::{delete, insert_into, update},
+    RunQueryDsl
+};
+use serde::{Deserialize, Serialize};
+use std::io::Write;
+use diffy::{apply, create_patch, Patch};
+use flate2::Compression;
+use flate2::write::{DeflateEncoder, DeflateDecoder};
+
+
+#[derive(Debug, Clone, Serialize, Deserialize, Queryable, Identifiable)]
+pub struct Markdown {
+    pub id: i32,
+    pub name: String,
+    pub content: String,
+    pub number_of_versions: i32,
+    pub date_created: String,
+    pub date_updated: String,
+}
+
+#[derive(Debug, Serialize, Deserialize, Queryable, Identifiable)]
+#[table_name = "markdown_diffs"]
+#[primary_key(markdown_id, diff_id)]
+pub struct MarkdownDiff {
+    pub markdown_id: i32,
+    pub diff_id: i32,
+    pub diff: Vec<u8>,
+    pub date_created: String,
+}
+
+#[derive(Debug, Insertable)]
+#[table_name = "markdowns"]
+pub struct MarkdownNew<'a> {
+    pub name: &'a str,
+    pub content: &'a str,
+    pub number_of_versions: i32,
+    pub date_created: &'a str,
+    pub date_updated: &'a str,
+}
+
+#[derive(Debug, Insertable)]
+#[table_name = "markdown_diffs"]
+pub struct MarkdownDiffNew<'a> {
+    pub markdown_id: i32,
+    pub diff_id: i32,
+    pub diff: &'a [u8],
+    pub date_created: &'a str,
+}
+
+#[derive(Debug, Serialize, Deserialize, AsChangeset)]
+#[table_name="markdowns"]
+struct MarkdownChange<'a> {
+    pub name: &'a str,
+    pub content: &'a str,
+    pub number_of_versions: i32,
+    pub date_created: &'a str,
+    pub date_updated: &'a str,
+}
+
+impl<'a> From<&'a MarkdownJson> for MarkdownChange<'a> {
+    fn from(md: &'a MarkdownJson) -> Self {
+        Self { name: md.name.as_str()
+             , content: md.content.as_str()
+             , number_of_versions: md.number_of_versions
+             , date_created: md.date_created.as_str()
+             , date_updated: md.date_updated.as_str()
+        }
+    }
+}
+
+impl From<&MarkdownDiff> for MarkdownDiffJson {
+    fn from(md_diff: &MarkdownDiff) -> Self {
+        Self { id: md_diff.diff_id
+             , date_created: md_diff.date_created.to_owned()
+        }
+    }
+}
+
+impl MarkdownDiff {
+    pub(crate) fn get_diff_as_string(&self) -> Result<String> {
+        let mut decoder = DeflateDecoder::new(Vec::new());
+
+        decoder.write_all(self.diff.as_ref())?;
+        let decomp = decoder.finish()?;
+
+        Ok(String::from(std::str::from_utf8(decomp.as_ref())?))
+    }
+}
+
+pub(crate) enum _Action {
+    Created(Markdown),
+    Found(Markdown),
+}
+
+
+pub(crate) fn _create_markdown( pool: Arc<Pool>
+                             , item: MarkdownJson ) -> Result<_Action> {
+    use crate::schema::markdowns::dsl::*;
+    let db_connection = pool.get()?;
+
+    match markdowns . filter(name.eq(&item.name))
+                    . first::<Markdown>(&db_connection)
+    {
+        Ok(result) => Ok(_Action::Found(result)),
+        Err(_)     => {
+            let now = chrono::Local::now().naive_local();
+            let new_markdown = MarkdownNew {
+                name:               &item.name,
+                content:            &item.content,
+                number_of_versions: item.number_of_versions,
+                date_created:       &format!("{}", now),
+                date_updated:       &format!("{}", now),
+            };
+
+            Ok(_Action::Created(db_connection.transaction(|| {
+                insert_into(markdowns) . values(&new_markdown)
+                                       . execute(&db_connection)?;
+
+                markdowns . order(id.desc())
+                          . first::<Markdown>(&db_connection)
+            })?))
+        }
+    }
+}
+
+pub(crate) fn get_markdowns(pool: Arc<Pool>) -> Result<Vec<Markdown>>
+{
+    use crate::schema::markdowns::dsl::*;
+    let db_connection = pool.get()?;
+    Ok(markdowns.load::<Markdown>(&db_connection)?)
+}
+
+pub(crate) fn get_markdown( pool:  Arc<Pool>
+                          , ident: &str
+                          , patch: Option<i32> ) -> Result<Markdown>
+{
+    use crate::schema::markdowns::dsl::*;
+    use crate::schema::markdown_diffs::dsl::*;
+
+    let db_connection = pool.get()?;
+
+    let mut markdown = markdowns
+                     . filter(name.eq(ident))
+                     . first::<Markdown>(&db_connection)?;
+
+    if let Some(patch) = patch {
+        let result = markdown_diffs
+                   . filter(markdown_id.eq(markdown.id))
+                   . filter(diff_id.ge(patch))
+                   . order(diff_id.desc())
+                   . load::<MarkdownDiff>(&db_connection)?;
+
+        for patch in result {
+            let patch_data = patch.get_diff_as_string()?;
+            let decomp = Patch::from_str(&patch_data)?;
+
+            markdown.content = apply(&markdown.content, &decomp).unwrap();
+            markdown.date_updated = patch.date_created;
+        }
+    };
+
+    Ok(markdown)
+}
+
+pub(crate) fn get_patches( pool: Arc<Pool>
+                         , ident: &str ) -> Result<Vec<MarkdownDiffJson>> {
+    use crate::schema::markdowns::dsl::*;
+    use crate::schema::markdown_diffs::dsl::*;
+
+    let db_connection = pool.get()?;
+
+    let markdown = markdowns
+                 . filter(name.eq(ident))
+                 . first::<Markdown>(&db_connection)?;
+
+    Ok ( markdown_diffs . filter(markdown_id.eq(markdown.id))
+                        . order(diff_id.desc())
+                        . load::<MarkdownDiff>(&db_connection)?
+                        . iter()
+                        . map(|d| MarkdownDiffJson::from(d))
+                        . collect() )
+}
+
+pub(crate) fn _delete_markdown( pool: Arc<Pool>
+                             , ident: i32 ) -> Result<usize>
+{
+    use crate::schema::markdowns::dsl::*;
+    let db_connection = pool.get()?;
+    Ok(delete(markdowns.find(ident)).execute(&db_connection)?)
+}
+
+pub(crate) fn update_markdown( pool: Arc<Pool>
+                             , ident: String
+                             , mut item: MarkdownJson ) -> Result<Markdown>
+{
+    use crate::schema::markdowns::dsl::*;
+    use crate::schema::markdown_diffs::dsl::*;
+    let db_connection = pool.get()?;
+    let mut markdown = markdowns
+                     . filter(name.eq(ident))
+                     . first::<Markdown>(&db_connection)?;
+
+    let patch = format!( "{}", create_patch( item.content.as_str()
+                                           , markdown.content.as_str() ));
+    let mut encoder = DeflateEncoder::new(Vec::new(), Compression::best());
+    encoder.write_all(patch.as_bytes()).unwrap();
+    let compressed = encoder.finish().unwrap();
+
+    let last_diff = match markdown_diffs . filter(markdown_id.eq(markdown.id))
+                                         . order(diff_id.desc())
+                                         . first::<MarkdownDiff>(&db_connection)
+    {
+        Ok(result) => (result.diff_id, Some(result)),
+        Err(_)     => (0, None),
+    };
+
+    let now = chrono::Local::now().naive_local();
+    let new_markdown_diff = MarkdownDiffNew {
+        markdown_id:        markdown.id,
+        diff_id:            last_diff.0 + 1,
+        diff:               compressed.as_ref(),
+        date_created:       markdown.date_updated.as_str(),
+    };
+
+    item.date_updated       = format!("{}", now);
+    item.number_of_versions = item.number_of_versions + 1;
+
+    db_connection.transaction::<_, Error, _>(|| {
+        insert_into(markdown_diffs) . values(&new_markdown_diff)
+                                    . execute(&db_connection)?;
+
+        update(&markdown).set(MarkdownChange::from(&item)).execute(&db_connection)?;
+
+        Ok(())
+    }).unwrap();
+
+    markdown.name               = item.name;
+    markdown.content            = item.content;
+    markdown.number_of_versions = item.number_of_versions;
+    markdown.date_updated       = item.date_updated;
+
+    Ok(markdown)
+}

+pub(crate) mod user;
+pub(crate) mod markdown;

 use std::sync::Arc;
 use crate::schema::*;
-use crate::error::Error;
+use crate::error::*;
 use crate::Pool;
 use diesel::prelude::*;
 use diesel::{
@@ -40,7 +40,7 @@ pub(crate) enum Action {
 
 
 pub(crate) fn create_user( pool: Arc<Pool>
-                         , item: UserJson ) -> Result<Action, Error> {
+                         , item: UserJson ) -> Result<Action> {
     use crate::schema::users::dsl::*;
     let db_connection = pool.get()?;
 
@@ -67,7 +67,7 @@ pub(crate) fn create_user( pool: Arc<Pool>
     }
 }
 
-pub(crate) fn get_users(pool: Arc<Pool>) -> Result<Vec<User>, Error>
+pub(crate) fn get_users(pool: Arc<Pool>) -> Result<Vec<User>>
 {
     use crate::schema::users::dsl::*;
     let db_connection = pool.get()?;
@@ -75,7 +75,7 @@ pub(crate) fn get_users(pool: Arc<Pool>) -> Result<Vec<User>, Error>
 }
 
 pub(crate) fn get_user( pool:  Arc<Pool>
-                      , ident: i32 ) -> Result<User, Error>
+                      , ident: i32 ) -> Result<User>
 {
     use crate::schema::users::dsl::*;
     let db_connection = pool.get()?;
@@ -83,7 +83,7 @@ pub(crate) fn get_user( pool:  Arc<Pool>
 }
 
 pub(crate) fn delete_user( pool: Arc<Pool>
-                         , ident: i32 ) -> Result<usize, Error>
+                         , ident: i32 ) -> Result<usize>
 {
     use crate::schema::users::dsl::*;
     let db_connection = pool.get()?;
@@ -92,7 +92,7 @@ pub(crate) fn delete_user( pool: Arc<Pool>
 
 pub(crate) fn update_user( pool: Arc<Pool>
                          , ident: i32
-                         , item: UserJson ) -> Result<User, Error>
+                         , item: UserJson ) -> Result<User>
 {
     use crate::schema::users::dsl::*;
     let db_connection = pool.get()?;

+use crate::models::markdown;
+use crate::Pool;
+
+use actix_web::{Error, HttpResponse, web};
+use anyhow::Result;
+use artshop_common::types::MarkdownJson;
+use serde::Deserialize;
+
+#[derive(Debug, Deserialize)]
+pub struct Patchset {
+    patch: Option<i32>,
+}
+
+pub async fn get_markdowns(pool: web::Data<Pool>)
+    -> Result<HttpResponse, Error>
+{
+    Ok( web::block(move || markdown::get_markdowns(pool.into_inner()))
+      . await
+      . map(|markdowns| HttpResponse::Ok().json(markdowns))
+      . map_err(|_| HttpResponse::InternalServerError())?
+      )
+}
+
+pub async fn get_markdown( pool: web::Data<Pool>
+                         , name: web::Path<String>
+                         , patch: web::Query<Patchset>
+                         ) -> Result<HttpResponse, Error>
+{
+    let pool = pool.into_inner();
+    let name = name.into_inner();
+    let patch = patch.into_inner();
+
+    Ok( web::block(move || markdown::get_markdown(pool, name.as_str(), patch.patch))
+      . await
+      . map(|markdowns| HttpResponse::Ok().json(markdowns))
+      . map_err(|_| HttpResponse::InternalServerError())?
+      )
+}
+
+pub async fn get_patches( pool: web::Data<Pool>
+                        , name: web::Path<String>
+                        ) -> Result<HttpResponse, Error> {
+    let pool = pool.into_inner();
+    let name = name.into_inner();
+
+    Ok( web::block(move || markdown::get_patches(pool, name.as_str()))
+      . await
+      . map(|patches| HttpResponse::Ok().json(patches))
+      . map_err(|_| HttpResponse::InternalServerError())?
+      )
+}
+
+pub async fn update_markdown( pool: web::Data<Pool>
+                            , name: web::Path<String>
+                            , item: web::Json<MarkdownJson> )
+    -> Result<HttpResponse, Error>
+{
+    let pool = pool.into_inner();
+    let name = name.into_inner();
+    let item = item.into_inner();
+
+    Ok(web::block(move || markdown::update_markdown(pool, name, item))
+       . await
+       . map(|markdown| HttpResponse::Ok().json(markdown))
+       . map_err(|_| HttpResponse::InternalServerError())?)
+}

+pub(crate) mod markdown;
+pub(crate) mod other;
+pub(crate) mod user;

+use actix_web::Error;
+use anyhow::Result;
+
+pub async fn root() -> Result<actix_files::NamedFile, Error> {
+    Ok(actix_files::NamedFile::open("static/index.html")?)
+}
+
+pub async fn apidoc() -> Result<actix_files::NamedFile, Error> {
+    Ok(actix_files::NamedFile::open("static/api.html")?)
+}
+
+pub async fn p404() -> Result<actix_files::NamedFile, Error> {
+    Ok(actix_files::NamedFile::open("static/404.html")?)
+}
+
+pub async fn favicon() -> Result<actix_files::NamedFile, Error> {
+    Ok(actix_files::NamedFile::open("static/favicon.ico")?)
+}

-use crate::models::{self, Action};
+use crate::models::user::{self, Action};
 use crate::Pool;
 
 use actix_web::{Error, HttpResponse, web};
 use anyhow::Result;
 
-pub async fn root() -> Result<actix_files::NamedFile, Error> {
-    Ok(actix_files::NamedFile::open("static/index.html")?)
-}
-
-pub async fn p404() -> Result<actix_files::NamedFile, Error> {
-    Ok(actix_files::NamedFile::open("static/404.html")?)
-}
-
-pub async fn favicon() -> Result<actix_files::NamedFile, Error> {
-    Ok(actix_files::NamedFile::open("static/favicon.ico")?)
-}
-
 pub async fn create_user( pool: web::Data<Pool>
-                        , item: web::Json<models::UserJson> )
+                        , item: web::Json<user::UserJson> )
     -> Result<HttpResponse, Error>
 {
     let pool = pool.into_inner();
     let item = item.into_inner();
 
-    Ok(web::block(move || models::create_user(pool, item))
+    Ok(web::block(move || user::create_user(pool, item))
        . await
        . map(|action| {
            match action {
@@ -36,7 +24,7 @@ pub async fn create_user( pool: web::Data<Pool>
 pub async fn get_users(pool: web::Data<Pool>)
     -> Result<HttpResponse, Error>
 {
-    Ok(web::block(move || models::get_users(pool.into_inner()))
+    Ok(web::block(move || user::get_users(pool.into_inner()))
        . await
        . map(|users| HttpResponse::Ok().json(users))
        . map_err(|_| HttpResponse::InternalServerError())?)
@@ -48,7 +36,7 @@ pub async fn get_user(pool: web::Data<Pool>, id: web::Path<i32>)
     let pool = pool.into_inner();
     let id   = id.into_inner();
 
-    Ok(web::block(move || models::get_user(pool, id))
+    Ok(web::block(move || user::get_user(pool, id))
        . await
        . map(|user| HttpResponse::Ok().json(user))
        . map_err(|_| HttpResponse::InternalServerError())?)
@@ -60,7 +48,7 @@ pub async fn delete_user(pool: web::Data<Pool>, id: web::Path<i32>)
     let pool = pool.into_inner();
     let id   = id.into_inner();
 
-    Ok(web::block(move || models::delete_user(pool, id))
+    Ok(web::block(move || user::delete_user(pool, id))
        . await
        . map(|_| HttpResponse::NoContent().finish())
        . map_err(|_| HttpResponse::InternalServerError())?)
@@ -68,14 +56,14 @@ pub async fn delete_user(pool: web::Data<Pool>, id: web::Path<i32>)
 
 pub async fn update_user( pool: web::Data<Pool>
                         , id:   web::Path<i32>
-                        , item: web::Json<models::UserJson> )
+                        , item: web::Json<user::UserJson> )
     -> Result<HttpResponse, Error>
 {
     let pool = pool.into_inner();
     let id   = id.into_inner();
     let item = item.into_inner();
 
-    Ok(web::block(move || models::update_user(pool, id, item))
+    Ok(web::block(move || user::update_user(pool, id, item))
        . await
        . map(|user| HttpResponse::Ok().json(user))
        . map_err(|_| HttpResponse::InternalServerError())?)

 table! {
+    markdown_diffs (markdown_id, diff_id) {
+        markdown_id -> Integer,
+        diff_id -> Integer,
+        diff -> Binary,
+        date_created -> Text,
+    }
+}
+
+table! {
+    markdowns (id) {
+        id -> Integer,
+        name -> Text,
+        content -> Text,
+        number_of_versions -> Integer,
+        date_created -> Text,
+        date_updated -> Text,
+    }
+}
+
+table! {
     users (id) {
         id -> Integer,
         name -> Text,
@@ -6,3 +26,9 @@ table! {
         date_created -> Text,
     }
 }
+
+allow_tables_to_appear_in_same_query!(
+    markdown_diffs,
+    markdowns,
+    users,
+);

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Elements in HTML</title>
+    <!-- Embed elements Elements via Web Component -->
+    <script src="https://unpkg.com/@stoplight/elements/web-components.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/@stoplight/elements/styles.min.css">
+  </head>
+  <body>
+
+    <elements-api
+      apiDescriptionUrl="/static/openapi.yaml"
+      router="hash"
+      layout="sidebar"
+    />
+
+  </body>
+</html>

+openapi: 3.0.0
+info:
+  version: 0.0.1
+  title: Artshop API
+  description: A first simple try do document out api
+paths:
+  /api/v0/markdowns:
+    get:
+      description: Returns a list of all available markdown documents.
+      responses:
+        '200':
+          description: Successful response

@@ -22,6 +22,10 @@
   width: 100%;
   overflow-y: scroll;
   overflow-x: hidden;
+  background: #ffffff;
+  border-radius: .35em;
+  border: 2px solid #bbb;
+  padding: 4px;
 }
 
 .input > div:last-child {

@@ -12,13 +12,15 @@ crate-type = ["cdylib", "rlib"]
 default = ["console_error_panic_hook"]
 
 [dependencies]
+artshop-common = { path = "../common" }
+katex = { version = "0.4", default-features = false, features = ["wasm-js"] }
 pulldown-cmark = "0.9"
 console_log = "^0.1"
 log = "^0.4"
 serde = { version = "^1.0", features = ["derive"] }
 serde_json = "^1.0"
 wasm-bindgen = "^0.2"
-wasm-bindgen-futures = "0.4"
+wasm-bindgen-futures = "^0.4"
 
 # The `console_error_panic_hook` crate provides better debugging of panics by
 # logging them with `console.error`. This is great for development, but requires
@@ -26,6 +28,7 @@ wasm-bindgen-futures = "0.4"
 # code size when deploying.
 console_error_panic_hook = { version = "0.1.6", optional = true }
 wee_alloc = { version = "0.4.2", optional = true }
+js-sys = "^0.3"
 
 [dependencies.mogwai]
 version = "^0.5"
@@ -38,6 +41,7 @@ features = [
   "Headers",
   "HtmlElement",
   "HtmlInputElement",
+  "MouseEvent",
   "Node",
   "Request",
   "RequestInit",

+use std::fmt::Display;
+
+use artshop_common::types::{MarkdownJson, MarkdownDiffJson};
+
+use super::super::error::*;
+use super::super::client::Client;
+
+#[derive(Debug, Clone)]
+pub struct Markdown {
+    client: Client,
+    pub json: MarkdownJson,
+}
+
+impl Markdown {
+    pub(crate) async fn new(name :&str) -> Result<Markdown> {
+        let client = Client::new()?;
+        let api_uri = format!("/api/v0/markdowns/{}", name);
+        let (response, data) = client.get(&api_uri).await?;
+
+        match response.status() {
+            200 => Ok(Self { client
+                           , json: serde_json::from_str(data.as_str())? }),
+            status => Err(Self::status_error(status)),
+        }
+    }
+
+    pub(crate) async fn read( &mut self
+                            , patch :Option<i32>
+                            ) -> Result<&Markdown>
+    {
+        let api_uri = match patch {
+            Some(i) => format!( "/api/v0/markdowns/{}?patch={}"
+                              , self.json.name, i ),
+            None    => format!("/api/v0/markdowns/{}", self.json.name),
+        };
+        let (response, data) = self.client.get(&api_uri).await?;
+
+        match response.status() {
+            200 => {
+                self.json = serde_json::from_str(data.as_str())?;
+                Ok(self)
+            },
+            status => Err(Self::status_error(status)),
+        }
+    }
+
+    pub(crate) async fn save(&self) -> Result<&Markdown> {
+        let url = format!("/api/v0/markdowns/{}", self.json.name);
+        let data = serde_json::to_string(&self.json)?;
+
+        let response = self.client.put(url.as_str(), data.as_str()).await?;
+
+        match response.status() {
+            200 => Ok(self),
+            status => Err(Self::status_error(status)),
+        }
+    }
+
+    pub(crate) async fn patches(&self) -> Result<Vec<MarkdownDiffJson>> {
+        let url = format!("/api/v0/markdowns/{}/patches", self.json.name);
+        let (response, data) = self.client.get(url.as_str()).await?;
+
+        match response.status() {
+            200 => Ok(serde_json::from_str(&data)?),
+            status => Err(Self::status_error(status)),
+        }
+    }
+
+    pub(crate) fn _to_html_string(&self) -> String {
+        use pulldown_cmark::{Parser, Options, html};
+
+        let mut html_out = String::new();
+        let parser = Parser::new_ext(&self.json.content, Options::all());
+
+        html::push_html(&mut html_out, parser);
+        html_out
+    }
+
+
+    fn status_error<I: Display>(status :I) -> Error {
+        let err_str = format!("Invalid response status: {}", status);
+        Error::from(err_str.as_str())
+    }
+}

+pub(crate) mod markdown;

+use js_sys::JsString;
+use mogwai::prelude::*;
+use wasm_bindgen::prelude::*;
+use web_sys::{Window, window, Response, Request, RequestInit, RequestMode};
+use super::error::*;
+
+use std::result::Result as StdResult;
+
+#[derive(Debug, Clone)]
+pub(crate) struct Client {
+    window :Window,
+}
+
+type ReqGetter = fn(&str, &RequestInit) -> StdResult<Request, JsValue>;
+
+const REQUEST :ReqGetter = Request::new_with_str_and_init;
+
+impl Client {
+    pub fn new() -> Result<Self> {
+        const WINDOW_ERROR :&str = "Unable to get window instance";
+
+        Ok(Self { window: window()
+                        . ok_or(Error::from(WINDOW_ERROR))? })
+    }
+
+    pub async fn get(&self, url :&str) -> Result<(Response, String)> {
+        let mut init = RequestInit::new();
+        let request = REQUEST( &url
+                             , init . method("GET")
+                                    . mode(RequestMode::Cors) )?;
+
+        request . headers()
+                . set("Accept", "application/json")?;
+
+        let response = JsFuture::from( self.window
+                                     . fetch_with_request(&request) )
+                     . await?
+                     . dyn_into::<Response>()?;
+
+        let data = JsFuture::from(response.text()?)
+                 . await?
+                 . dyn_into::<JsString>()?;
+
+        Ok((response, String::from(data)))
+    }
+
+    pub async fn put(&self, url :&str, data :&str) -> Result<Response> {
+        let mut init = RequestInit::new();
+        let request = REQUEST( &url
+                             , init . method("PUT")
+                                    . mode(RequestMode::Cors)
+                                    . body(Some(&data.into())) )?;
+
+        request . headers()
+                . set("Content-Type", "application/json")?;
+
+        let response = JsFuture::from( self.window
+                                     . fetch_with_request(&request))
+                     . await?
+                     . dyn_into::<Response>()?;
+
+        Ok(response)
+    }
+}

+use mogwai::prelude::*;
+use super::NS;
+
+pub(crate) fn discard_icon() -> ViewBuilder<Dom> {
+    builder! {
+        <svg xmlns=NS viewBox="10.3 3.8 76.2 88.7"
+             style:width="1.5em" style:height="1.5em">
+            <g xmlns=NS id="_x37_0">
+            <polygon xmlns=NS
+                     points="35.4,18.1 31.1,4.3 31.1,16.3
+                             24.5,16.3 24.5,10.9 18.3,18.9
+                             13.8,23.7 17,23.7 19.8,31.8
+                             27.9,34.1 27.9,37.8 38.7,41.8
+                             38.7,34.1 38.7,30.4 38.7,25.2
+                             46.8,25.2 "/>
+            <path xmlns=NS
+                  d="M75.7,39.9 h-8.3 h-40.5 h-8.3 h-3 v9.5
+                      v2 h4.7 c2.2,13.3,6.8,42.2,6.8,42.2 h40
+                      c0,0,4.6-27.6,7-42.2 h4.7 v-2 v-9.5
+                     H75.7z
+                     M67.7,51.4 l-2.6,15.6 l-6.1-6.9 l8-8.7
+                     H67.7z
+                     M63.7,75.6 l-1.3,7.9 l-2.9-3.2
+                     L63.7,75.6z
+                     M56.6,77.2
+                     L50,70 l6.2-6.7 l6.4,7.3
+                     L56.6,77.2z
+                     M52.4,51.4 h8.9 l-5.1,5.5 l-4.8-5.4
+                     C51.8,51.4,52.1,51.4,52.4,51.4z
+                     M53.3,60 l-6.2,6.8 l-6.6-7.2 l6.4-6.9
+                     L53.3,60z
+                     M30.5,74.9 l4.6,5 l-3.2,3.5
+                     L30.5,74.9z
+                     M31.4,69.6 l6.2-6.8 l6.6,7.2 l-6.2,6.8
+                     L31.4,69.6z
+                     M41.9,51.4 c0.1,0,0.2,0,0.3,0 l-4.7,5.1
+                      l-4.7-5.1
+                     H41.9z
+                     M27.1,51.4 l7.6,8.3 l-5.7,6.2l-2.3-14.5
+                     H27.1z
+                     M34.6,86.7 l3.3-3.6 l3.3,3.6
+                     H34.6z
+                     M47.1,86.7 l-6.2-6.8 l6.2-6.8 l6.6,7.2
+                      l-5.8,6.4
+                     H47.1z
+                     M53.7,86.7 l2.9-3.2 l3,3.2
+                     H53.7z"/>
+            </g>
+        </svg>
+    }
+}

+use mogwai::prelude::*;
+use super::NS;
+
+pub(crate) fn edit_icon() -> ViewBuilder<Dom> {
+    builder! {
+        <svg xmlns=NS viewBox="0 0 220.001 220.001"
+             style:width="1.5em" style:height="1.5em">
+            <g xmlns=NS>
+                <polygon xmlns=NS
+                         points="0,220 59.34,213.86 6.143,160.661"/>
+                <path xmlns=NS
+                      d="M132.018,34.787 l53.197,53.197
+                         L69.568,203.631
+                         L16.37,150.434
+                         L132.018,34.787z
+                         M212.696,60.502
+                          c9.738,-9.738,9.742,-25.527,0,-35.268
+                          l-17.93,-17.93
+                          c-9.738,-9.74,-25.529,-9.738,-35.268,0
+                          l-17.346,17.347 l53.199,53.196
+                         L212.696,60.502z"/>
+            </g>
+        </svg>
+    }
+}

+const NS :&str = "http://www.w3.org/2000/svg";
+
+pub(crate) mod discard;
+pub(crate) mod edit;
+pub(crate) mod save;
+pub(crate) mod select;
+
+pub(crate) use discard::discard_icon;
+pub(crate) use edit::edit_icon;
+pub(crate) use save::save_icon;
+pub(crate) use select::select_icon;

+use mogwai::prelude::*;
+use super::NS;
+
+pub(crate) fn save_icon() -> ViewBuilder<Dom> {
+    builder! {
+        <svg xmlns=NS viewBox="0 -1 32 32"
+             style:width="1.5em" style:height="1.5em"
+             style:enable_background="new 0 0 32 32"
+             style:fill="none"
+             style:stroke="#000"
+             style:stroke_width="2"
+             style:stroke_linecap="round"
+             style:stroke_linejoin="round"
+             style:stroke_miterlimit="10">
+            <ellipse xmlns=NS
+                     cx="14" cy="8" rx="10" ry="5"/>
+            <line xmlns=NS
+                  x1="24" y1="16" x2="24" y2="8"/>
+            <path xmlns=NS
+                  d="M4,8 v8 c0,2.8,4.5,5,10,5
+                      c1.2,0,2.3-0.1,3.4-0.3"/>
+            <path xmlns=NS
+                  d="M4,16 v8 c0,2.8,4.5,5,10,5
+                      c2,0,3.8-0.3,5.3-0.8"/>
+            <circle xmlns=NS
+                    cx="24" cy="23" r="7"/>
+            <line xmlns=NS
+                  x1="24" y1="16" x2="24" y2="26"/>
+            <polyline xmlns=NS
+                      points="21,23 24,26 27,23"/>
+        </svg>
+    }
+}

+use mogwai::prelude::*;
+use super::NS;
+
+pub(crate) fn select_icon() -> ViewBuilder<Dom> {
+    builder! {
+        <svg xmlns=NS viewBox="0 -1 24 24"
+             style:width="1.5em" style:height="1.5em"
+             style:fill="none">
+            <path xmlns=NS
+                  style:fill="black"
+                  d="M9.17154 11.508
+                     L7.75732 10.0938
+                     L12 5.85113
+                     L16.2426 10.0938
+                     L14.8284 11.508
+                     L12 8.67956
+                     L9.17154 11.508Z"/>
+            <path xmlns=NS
+                  style:fill="black"
+                  d="M9.17154 12.492
+                     L7.75732 13.9062
+                     L12 18.1489
+                     L16.2426 13.9062
+                     L14.8284 12.492
+                     L12 15.3204
+                     L9.17154 12.492Z"/>
+            <path xmlns=NS
+                  style:fill="black"
+                  style:fill_rule="evenodd"
+                  style:clip_rule="evenodd"
+                  d="M1 5
+                     C1 2.79086 2.79086 1 5 1
+                     H19
+                     C21.2091 1 23 2.79086 23 5
+                     V19
+                     C23 21.2091 21.2091 23 19 23
+                     H5
+                     C2.79086 23 1 21.2091 1 19
+                     V5Z
+                     M5 3
+                     H19
+                     C20.1046 3 21 3.89543 21 5
+                     V19
+                     C21 20.1046 20.1046 21 19 21
+                     H5
+                     C3.89543 21 3 20.1046 3 19
+                     V5
+                     C3 3.89543 3.89543 3 5 3Z"/>
+        </svg>
+    }
+}

+pub(crate) mod icons;

+use std::fmt::Display;
+use wasm_bindgen::prelude::*;
+
+type ParentError = Option<Box<dyn std::error::Error>>;
+
+#[derive(Debug)]
+pub(crate) struct Error {
+    source: ParentError,
+    message: String,
+}
+
+pub(crate) type Result<T> = std::result::Result<T, Error>;
+
+impl std::error::Error for Error {
+    fn source(&self) -> Option<&(dyn std::error::Error + 'static)> {
+        self.source.as_deref()
+    }
+}
+
+impl Display for Error {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            Error { source: Some(source), message } =>
+                write!(f, "{}: {}", message, source),
+            Error { source: None, message } => write!(f, "{}", message),
+        }
+    }
+}
+
+impl From<&str> for Error {
+    fn from(message: &str) -> Self {
+        Self { source: None, message: String::from(message) }
+    }
+}
+
+impl From<JsValue> for Error {
+    fn from(source: JsValue) -> Self {
+        let source = js_sys::Error::from(source);
+
+        let message = format!("[{}] {}", source.name(), source.message());
+        let source = Error::from(message.as_str());
+
+        Self { source: Some(Box::new(source))
+             , message: String::from("WebSys Error")
+        }
+    }
+}
+
+impl From<serde_json::Error> for Error {
+    fn from(source: serde_json::Error) -> Self {
+        Self { source: Some(Box::new(source))
+             , message: String::from("Serde Error")
+        }
+    }
+}

+mod api;
 mod data;
+mod error;
+mod client;
 
+use api::markdown::Markdown;
+use data::icons::*;
 use log::Level;
 use mogwai::prelude::*;
-use web_sys::{RequestInit, RequestMode, Request, Response, console};
 use std::panic;
 use wasm_bindgen::prelude::*;
 
-
 #[derive(Clone)]
 enum AppLogic {
     Update,
     Toggle,
-}
-
-fn md_to_html(source: &str) -> String {
-    use pulldown_cmark::{Parser, Options, html};
-
-    let parser = Parser::new_ext(source, Options::all());
-    let mut html_output = String::new();
-    html::push_html(&mut html_output, parser);
-
-    html_output
+    Store,
+    Select,
+    Choose(Option<i32>),
+    Discard,
 }
 
 async fn editor_logic( mut rx_logic: broadcast::Receiver<AppLogic>
-                     , tx_view: broadcast::Sender<String>
-                     , mut rx_dom: broadcast::Receiver<Dom> ) {
-    let window = web_sys::window().unwrap();
-    let mut opts = RequestInit::new();
-    opts.method("GET").mode(RequestMode::Cors);
-    let request = Request::new_with_str_and_init("/api/v0/users", &opts).unwrap();
-    request.headers().set("Accept", "application/json").unwrap();
-
-    let response = JsFuture::from(window.fetch_with_request(&request))
-                 . await.unwrap()
-                 . dyn_into::<Response>().unwrap();
-    let data = JsFuture::from(response.json().unwrap()).await.unwrap();
-    console::log_1(&data);
-
+                     , tx_logic: broadcast::Sender<AppLogic>
+                     , tx_toggle: broadcast::Sender<bool>
+                     , tx_patches: mpmc::Sender<ListPatch<ViewBuilder<Dom>>>
+                     , mut rx_dom: broadcast::Receiver<Dom> )
+{
     let dom = rx_dom.next().await.unwrap();
     let mut show_edit = false;
+    let mut md = Markdown::new("md-example").await.unwrap();
+
+    let container = match dom.inner_read() {
+            Either::Left(dom_js) =>
+                Some( ( dom_js
+                      . to_owned()
+                      . dyn_into::<Node>().unwrap()
+                      . first_child().unwrap()
+                      . first_child().unwrap()
+                      . dyn_into::<HtmlElement>().unwrap()
+                      , dom_js
+                      . to_owned()
+                      . dyn_into::<Node>().unwrap()
+                      . child_nodes().get(1).unwrap()
+                      . child_nodes().get(1).unwrap()
+                      . dyn_into::<HtmlElement>().unwrap() )),
+            _ => None,
+    };
+
+    let cont_ref = container.as_ref();
+
+    let get_md = move || {
+        match cont_ref {
+            Some((md_cont, _)) => md_cont.inner_text(),
+            None => String::from(""),
+        }
+    };
 
-    fn get_md(dom: &Dom) -> String {
-        match dom.inner_read() {
-            Either::Left(dom_js) => dom_js . to_owned()
-                                           . dyn_into::<Node>().unwrap()
-                                           . first_child().unwrap()
-                                           . dyn_into::<HtmlElement>().unwrap()
-                                           . inner_text(),
-            _ => String::from(""),
+    let set_md = move |md :&str| {
+        match cont_ref {
+            Some((md_cont, _)) => md_cont.set_text_content(Some(md)),
+            None => (),
         }
-    }
+    };
 
-    fn update(dom: &Dom) {
-        if let Either::Left(dom_js) = dom.inner_read() {
-            dom_js . to_owned()
-                . dyn_into::<Node>().unwrap()
-                . child_nodes().get(1).unwrap()
-                . child_nodes().get(1).unwrap()
-                . dyn_into::<HtmlElement>().unwrap()
-                . set_inner_html(md_to_html(get_md(dom).as_str()).as_str())
-        };
-    }
+    let update = move || {
+        match cont_ref {
+            Some((_, view_cont)) => {
+                use pulldown_cmark::{Parser, Options, html};
+
+                let mut html_out = String::new();
+                let md = get_md();
+                let parser = Parser::new_ext(&md, Options::all());
 
-    update(&dom);
+                html::push_html(&mut html_out, parser);
+                view_cont.set_inner_html(&html_out)
+            },
+            None => (),
+        }
+    };
+
+    set_md(md.json.content.as_str());
+    update();
+
+    /* play with katex ==== */
+    let opts = katex::Opts::builder()
+             . output_type(katex::opts::OutputType::Mathml)
+             . build().unwrap();
+    let formula1 = katex::render_with_opts("E = mc^2", &opts).unwrap();
+    let formula2 = katex::render_with_opts("e^{i*\\pi} +1 = 0", &opts).unwrap();
+
+    if let Either::Left(dom_js) = dom.inner_read() {
+        dom_js . to_owned()
+               . dyn_into::<Node>().unwrap()
+               . child_nodes().get(1).unwrap()
+               . child_nodes().get(2).unwrap()
+               . dyn_into::<HtmlElement>().unwrap()
+               . set_inner_html(formula1.as_str())
+    };
+
+    if let Either::Left(dom_js) = dom.inner_read() {
+        dom_js . to_owned()
+               . dyn_into::<Node>().unwrap()
+               . child_nodes().get(1).unwrap()
+               . child_nodes().get(3).unwrap()
+               . dyn_into::<HtmlElement>().unwrap()
+               . set_inner_html(formula2.as_str())
+    };
+    /* =========== */
 
     while let Some(msg) = rx_logic.next().await {
         match msg {
-            AppLogic::Update => update(&dom),
+            AppLogic::Store => {
+                md.json.content = get_md();
+                md.save().await.unwrap();
+            },
+            AppLogic::Update => update(),
             AppLogic::Toggle => {
                 show_edit = ! show_edit;
-                match show_edit {
-                    true => tx_view . broadcast(String::from("block"))
-                                    . await.unwrap(),
-                    false => tx_view . broadcast(String::from("none"))
-                                     . await.unwrap(),
-                };
+                tx_toggle.broadcast(show_edit).await.unwrap();
+            },
+            AppLogic::Discard => {
+                set_md(md.json.content.as_str());
+                update();
+            },
+            AppLogic::Select => {
+                let patches = md
+                            . patches().await.unwrap()
+                            . into_iter()
+                            . map(|diff| {
+                                let id = Some(diff.id);
+                                let choose_filter = tx_logic
+                                    . sink()
+                                    . contra_map(move |_| AppLogic::Choose(id));
+                                builder! {
+                                    <li><button on:click=choose_filter
+                                                value=format!("{}", diff.id.to_owned())>
+                                    {diff.date_created.to_owned()}
+                                    </button></li>
+                                }});
+                let all = vec![builder! {
+                    <li><button on:click=tx_logic.sink().contra_map(|_| AppLogic::Choose(None))>
+                    "Current"
+                    </button></li>
+                }].into_iter().chain(patches);
+
+                let list_replace = ListPatch::splice(.., all);
+                tx_patches.send(list_replace).await.unwrap();
+            },
+            AppLogic::Choose(id) => {
+                md.read(id).await.unwrap();
+                set_md(md.json.content.as_str());
+                update();
             },
         }
     }
 }
 
 fn editor_view( tx_logic: broadcast::Sender<AppLogic>
-              , rx_view: broadcast::Receiver<String>
+              , rx_toggle: broadcast::Receiver<bool>
+              , rx_patches: mpmc::Receiver<ListPatch<ViewBuilder<Dom>>>
               , tx_dom: broadcast::Sender<Dom>
-) -> ViewBuilder<Dom> {
-    let ns = "http://www.w3.org/2000/svg";
+              ) -> ViewBuilder<Dom>
+{
+    let input_filter = tx_logic
+                     . sink()
+                     . contra_map(|_| AppLogic::Update);
+    let store_filter = tx_logic
+                     . sink()
+                     . contra_map(|_| AppLogic::Store);
+                     /* keep as example how to handle concrete events. ==
+                     . contra_filter_map(|e :DomEvent| {
+                         if let Either::Left(e) = e.clone_inner() {
+                             let e = e.dyn_into::<MouseEvent>().unwrap();
+                             match e.alt_key() {
+                                 true => Some(AppLogic::Store),
+                                 false => None
+                             }
+                         } else {
+                             None
+                         }
+                     });
+                     == */
+    let toggle_filter = tx_logic
+                      . sink()
+                      . contra_map(|_| AppLogic::Toggle);
+    let select_filter = tx_logic
+                      . sink()
+                      . contra_map(|_e| AppLogic::Select);
+    let discard_filter = tx_logic
+                       . sink()
+                       . contra_map(|_| AppLogic::Discard);
+
+    let toggle_map = rx_toggle
+                   . map(|t| match t {
+                       true => String::from("block"),
+                       false => String::from("none") });
+
     builder! {
         <div class="input"
              style:width="33%"
-             on:input=tx_logic.sink().contra_map(|_| AppLogic::Update)
+             on:input=input_filter
              capture:view=tx_dom.sink()>
             <div contenteditable="true"
                  style:cursor="text"
-                 style:display=("none", rx_view)>
-                <pre>{data::MD_EXAMPLE}</pre>
+                 style:display=("none", toggle_map)>
+                <pre></pre>
             </div>
             <div>
-                <button on:click=tx_logic . sink()
-                                          . contra_map(|_| AppLogic::Toggle)>
-                    <svg version="1.1" id="Capa_1" xmlns=ns
-                         x="0px" y="0px" viewBox="0 0 220.001 220.001"
-                         style:width="1.5em" style:height="1.5em">
-                        <g xmlns=ns>
-                            <polygon xmlns=ns points="0,220 59.34,213.86 6.143,160.661"></polygon>
-                            <path xmlns=ns d="M132.018,34.787l53.197,53.197L69.568,203.631L16.37,
-                                     150.434L132.018,34.787z M212.696,60.502c9.738-9.738,9.742-25.527,
-                                     0-35.268l-17.93-17.93c-9.738-9.74-25.529-9.738-35.268,0l-17.346,
-                                     17.347l53.199,53.196L212.696,60.502z"></path>
-                        </g>
-                    </svg>
-                </button>
+                <div>
+                    <div>
+                    <button on:click=select_filter>{select_icon()}</button>
+                    <ul patch:children=rx_patches>
+                    </ul>
+                    </div>
+                    <button on:click=store_filter>{save_icon()}</button>
+                    <button on:click=discard_filter>{discard_icon()}</button>
+                    <button on:click=toggle_filter>{edit_icon()}</button>
+                </div>
+                <div></div>
+                <div></div>
                 <div></div>
             </div>
         </div>
@@ -118,15 +226,18 @@ fn editor_view( tx_logic: broadcast::Sender<AppLogic>
 }
 
 #[wasm_bindgen(start)]
-pub fn main() -> Result<(), JsValue> {
+pub async fn main() -> Result<(), JsValue> {
     panic::set_hook(Box::new(console_error_panic_hook::hook));
     console_log::init_with_level(Level::Trace).unwrap();
 
     let (tx_dom, rx_dom) = broadcast::bounded(1);
     let (tx_logic, rx_logic) = broadcast::bounded(1);
-    let (tx_view, rx_view) = broadcast::bounded(1);
-    let comp = Component::from( editor_view(tx_logic, rx_view, tx_dom) )
-             . with_logic( editor_logic(rx_logic, tx_view, rx_dom) );
+    let (tx_toggle, rx_toggle) = broadcast::bounded(1);
+    let (tx_patches, rx_patches) = mpmc::bounded(1);
+
+    let view = editor_view(tx_logic.clone(), rx_toggle, rx_patches, tx_dom);
+    let logic = editor_logic(rx_logic, tx_logic, tx_toggle, tx_patches, rx_dom);
+    let comp = Component::from(view).with_logic(logic);
 
     let page = Component::from(builder! {{comp}});
     page.build()?.run()