📝 Add documentation

* Add CONTRIBUTING.md
* 📄 ADD LICENSE
* Update README
* 🔥 Remove SoftBreak

* ➕ Add docz for documentation writing

.gitignore

@@ -3,6 +3,9 @@
 # dependencies
 /node_modules
 
+# docs
+/.docz
+
 # testing
 /coverage
 

CONTRIBUTING.md

@@ -0,0 +1,43 @@
+# Contributing to Edtr.io
+
+:+1::tada: First off, thanks for taking the time to contribute! :tada::+1:
+
+The following is a set of guidelines for contributing to Edtr.io. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request.
+
+## How Can I Contribute?
+
+### Reporting Bugs
+If you find a bug, please [file an issue on GitHub](https://github.com/schul-cloud/edtrio/issues/new) that gives information on how to reproduce the bug.
+
+### Suggesting enhancements
+Enhancement suggestions are tracked as GitHub issues. [Create an issue](https://github.com/schul-cloud/edtrio/issues/new) and provide the following information:
+
+* **Provide a step-by-step description of the suggested enhancement** in as many details as possible.
+* **Provide specific examples to demonstrate the steps**. Include copy/pasteable snippets which you use in those examples, as [Markdown code blocks](https://help.github.com/articles/markdown-basics/#multiple-lines).
+* **Describe the current behavior** and **explain which behavior you expected to see instead** and why.
+* **Explain why this enhancement would be useful** to most Atom users and isn't something that can or should be implemented as a [community package](#atom-and-packages).
+* **List some other editors or applications where this enhancement exists.**
+
+## Styleguides
+
+### Git Commit Messages
+* Use the present tense ("Add feature" not "Added feature")
+* Use the imperative mood ("Move cursor to..." not "Moves cursor to...")
+* Limit the first line to 72 characters or less
+* Reference issues and pull requests liberally after the first line
+* Consider starting the commit message with a [gitmoji](https://gitmoji.carloscuesta.me/):
+    * :art: `:art:` when improving the format/structure of the code
+    * :zap: `:zap:` when improving performance
+    * :fire: `:fire:` when removing code or files
+    * ...
+    * For a full list have a look at the [Gitmoji Overview](https://gitmoji.carloscuesta.me/)
+
+### Branching Workflow
+This project relies on a loose [Gitflow Workflow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow).
+
+It basically works as such: All changes are done inside `feature` branches which then get squash-merged into the `development` branch upon completion.
+
+Version-tagged releases are then merged into `master`.
+
+### Naming Branches
+Branches should be named `feature/#<issue>-<name>` or `fix/#<issue>-<name>`. E.g. `feature/#12-save-button` or `fix/#42-fix-popup`.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Schul-Cloud
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,9 +1,15 @@
-# Edtr.io @next
-Major revamp of the current Edtr.io, based on [Slate.js](https://github.com/ianstormtaylor/slate).
+# Edtr.io  ![Version](https://img.shields.io/badge/version-1.0.0-black.svg) ![[Gitmoji](https://gitmoji.carloscuesta.me)](https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat-square) 
 
-> Current status: **Work In Progress**
+A rich text editor for easily creating content in schools based on [Slate.js](https://github.com/ianstormtaylor/slate).
 
-## Current features
+## Getting started
+```shell
+yarn install
+yarn start
+# go to localhost:3000 if it doesnt open automatically
+```
+
+## Features
 - Hovering menu (**bold**, *italic*, <u>underline</u>, `code`, h1, h2)
 - Markdown shortcuts (h1-h5 `#`, ul `-`, blockquotes `>`)
 - Auto-detecting urls (need `http(s)://` prefix atm)
@@ -12,15 +18,14 @@ Major revamp of the current Edtr.io, based on [Slate.js](https://github.com/ians
 - Button to add Geogebra applets
 - Video integration (paste youtube video link and it'll be auto-converted)
 
-## Setup
-```shell
-yarn install
-yarn start
-# go to localhost:3000 if it doesnt open automatically
-```
-
+## Documentation
+> TODO: add link to docs
+The docs can be found [here](#).
 
----
-This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
+## Contribute
+We very much welcome any kinds of contributions! Have a look at our [issue tracker](https://github.com/schul-cloud/edtrio/issues) or [project board roadmap](https://github.com/schul-cloud/edtrio/projects/1) for inspiration.
+- Issue Tracker: https://github.com/schul-cloud/edtrio/issues
+- Source Code: https://github.com/schul-cloud/edtrio
 
-You can find the some information on how to perform common tasks [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
+## License
+The project is licensed under the [MIT License](LICENSE).

docs/guides/create-plugin.mdx

@@ -0,0 +1,126 @@
+---
+name: Create a simple plugin
+route: /guides/create-plugin
+menu: 2. Guides
+order: 10
+---
+
+# Create a simple plugin
+
+Creating a plugin is actually super simple. In this guide you will create a simple image plugin. The result can be found [here](https://github.com/schul-cloud/edtrio/tree/master/src/plugins/image). Edtr.io plugins are basically just Slate.js plugins. If you already read the [Slate.js Plugin Guide](https://docs.slatejs.org/guides/plugins) - which we **highly** recommend - most things should sound pretty familiar to you.
+
+## 1. Create a folder
+To get started the first thing you need to do is create a folder for the plugin you want to create. All Edtr.io plugins are located at `src/plugins`. We create a folder called `image` inside there.
+
+## 2. Main file
+As this plugin is fairly small, all code will be inside one file `src/plugins/image/index.js`. Create that file now and put the basic code skeleton below (also see [1. Structure -> Plugin Structure](/structure/plugin) for reference) inside it:
+
+```jsx
+// plugins/image/index.js
+
+export default function Image(options) {
+    return {
+        changes: {
+            insertImage,
+        },
+        helpers: {},
+        components: {
+            ImageNode,
+        },
+        plugins: [
+            RenderImageNode,
+        ],
+    }
+}
+
+/**
+ * Change that inserts an image block displaying the src image
+ */
+function insertImage(change, src, target) {...}
+
+/**
+ * React Component that displays an actual image from props.src url
+ */
+function ImageNode(props) {...}
+
+/**
+ * Overwrites Slates Editor.renderNode(props) to actually render
+ * ImageNode for `img` tags
+ */
+const RenderImageNode = {...}
+```
+
+We are going to implement the code blocks in ll. 39-50 in the following sections.
+
+## 3. Create displaying component
+To actually display anything in Slate, we need to create a react component. We'll call our component `<ImageNode ... />` and will implement it as such (in ll. 26f.):
+
+```jsx
+function ImageNode(props) {
+    const { src, ...attributes} = props
+
+    return (
+        <figure>
+            <img
+                src={src}
+                {...attributes}
+            />
+        </figure>
+    )
+}
+```
+Our `<ImageNode ... />` component basically just takes a `src` as a prop which then replaces the `src` of the enclosed `img` tag and wraps all that inside a `figure` to make it more semantic.
+
+> ⚠️  It is very important to set the `...attributes` to your component as Slate relies on that for internal state management and **will crash** if you don't insert them!
+
+## 4. Inserting an element
+To change the underlying document in any way we need to define a [`Change`](https://docs.slatejs.org/guides/changes). This `Change` can then later be called by e.g. a button or similar.
+
+```jsx
+function insertImage(change, src, target) {
+    if(target) {
+        change.select(target)
+    }
+
+    change.insertBlock({
+        type: 'img',
+        isVoid: true,
+        data: { src },
+    })
+}
+```
+This snippet simply inserts a block that we named `img` into the document. It also sets the `data.src` attribute of that block to the supplied `src`.
+
+## 5. Rendering custom block
+To actually tell the editor what to do when encountering an `img` block, namely to render our `<ImageNode ... />` created in step 3., we need to override the `renderNode()` function supplied by Slate as such:
+
+```jsx
+const RenderImageNode = {
+    renderNode(props) {
+        const { attributes, node } = props
+
+        if (node.type === 'img') {
+            const src = node.data.get('src')
+            return (
+                <ImageNode
+                    src={src}
+                    {...attributes}
+                />
+            )
+        }
+    }
+}
+```
+
+Our `RenderImageNode` is called whenever a node should be rendered. It checks if the type of the node to be rendered is an `img` and if so renders our custom `<ImageNode ... />`.
+
+If that is not the case nothing is returned, thus allowing other plugins that override `renderNode()` to render the current node.
+
+## 6. Done
+That's it! All it takes to create a custom plugin that renders images is to
+
+1. Create a custom image component
+2. Define a change to insert that image
+3. Override renderNode
+
+> **Note**: Our custom change is called inside `plugins/plus-menu/actions.js:onClickImageButton` which is an EventListener on the "Add image" button.

docs/guides/overview.mdx

@@ -0,0 +1,11 @@
+---
+name: Overview
+route: /guides
+menu: 2. Guides
+order: 20
+---
+
+# Guides Overview
+Hm don't really know what to put here.
+
+Head on over to learn [How to create a plugin](/guides/create-plugin)!

docs/index.mdx

@@ -0,0 +1,22 @@
+---
+name: Overview
+route: '/'
+---
+
+# Overview
+
+[Edtr.io](https://github.com/schul-cloud/edtrio) is a rich text editor for easily creating content in schools based on [Slate.js](https://github.com/ianstormtaylor/slate).
+
+## Getting started
+```shell
+yarn install
+yarn start
+# go to localhost:3000 if it doesnt open automatically
+```
+
+## Development
+> ⚠️ Before starting to work on Edtr.io it is **highly recommended** to go trough the [Slate.js Walktroughs and Guides](https://docs.slatejs.org/)
+
+You can learn more about the general structure of Edtr.io in section [1. Structure](/structure). There are a multitude of guides on how to work with the editor in section [2. Guides](/guides). Finally, there is a summary of all plugins in section [3. Plugins](/plugins).
+
+Before starting development please also have a look at our [Contributing Guidelines](https://github.com/schul-cloud/edtrio/blob/master/CONTRIBUTING.md) - it's very short, promise! ❤️

docs/plugins/overview.mdx

@@ -0,0 +1,26 @@
+---
+name: Overview
+route: /plugins/
+menu: 3. Plugins
+order: 200
+---
+
+# Plugins Overview
+These are all custom developed plugins currently included in Edtr.io:
+
+| Plugin               | Description                                  |
+| -------------------- | -------------------------------------------- |
+| `add-section`        | Exports button component to append a section |
+| `text-menu`          | Adds popup text menu (bold, italic, ...)     |
+| `plus-menu`          | Adds small plus to row to add interactive content |
+| `code-block`         | Adds simple code blocks to the editor        |
+| `geogebra`           | Adds geogebra to the editor                  |
+| `iframe`             | Adds iframes to the editor                   |
+| `image`              | Adds images to the editor                    |
+| `title`              | Adds a title to the editor                   |
+| `section`            | Adds sections and p tags to the editor       |
+| `url-handler`        | Automatically tries to inline urls content (e.g. YouTube videos) |
+| `auto-url`           | Automatically detects urls and highlights them |
+| `markdown-shortcuts` | Automatically turns markdown into rich elements |
+| `helpers`            | Set of helper functions (e.g. `insertParagraph()`) |
+| `download-file`      | Adds up/download functionality for files (UNUSED ATM) |

docs/schema.md → docs/structure/document.mdx

@@ -1,8 +1,18 @@
-# Schema
-The schema of edtr.io docs is closely aligned to the HTML5 standard to not introduce further complexity.
+---
+name: Document Schema
+route: /structure/document
+menu: 1. Structure
+order: 100
+---
 
-# Nodes
-## Types
+# Document Schema
+The schema of edtr.io documents is closely aligned to the HTML5 standard to not introduce further complexity.
+
+## DocumentViewer
+To have a look at the underlying document during development, a [`DocumentViewer`](https://github.com/schul-cloud/edtrio/tree/master/src/dev-document-viewer) is included and automatically displayed at the bottom of the page.
+
+## Nodes
+### Types
 - `title`: Title of the document (`min: 1, max: 1`)
 - `section`: Thematic grouping of content, typically with a heading
 - `code`: Piece of computer code
@@ -16,7 +26,7 @@ The schema of edtr.io docs is closely aligned to the HTML5 standard to not intro
 - `video`: Video embeds (e.g. YouTube)
 - `geogebra`
 
-## Structure
+### Structure
 There are two higher level node types: `title` and `section`.
 Each document must have exactly one `title` node. It may only contain a `text` node.\
 It is followed by 1:n many `section` nodes. `section` nodes can contain any type of node.
@@ -31,9 +41,9 @@ It is followed by 1:n many `section` nodes. `section` nodes can contain any type
 ```
 
 
-# Mark types
+## Mark types
 - `strong`
 - `em`
 - `cite`
 
-For a more detailed documentation also take a look at `schema.js`.
+For a more detailed documentation also [take a look at `schema.js`](https://github.com/schul-cloud/edtrio/blob/master/src/schema.js).

docs/structure/overview.mdx

@@ -0,0 +1,31 @@
+---
+name: Overview
+route: /structure/
+menu: 1. Structure
+order: 200
+---
+
+# Structure Overview
+Edtr.io is heavily based on [Slate.js](https://github.com/ianstormtaylor/slate) and makes great use of its abstractions. Every piece functionality is inside a plugin.
+
+The editor is just one `<Editor />` component inside `Editor.jsx` which itself is made up of many plugins. Plugins can be found inside the [`plugins/` folder](https://github.com/schul-cloud/edtrio/tree/master/src/plugins). More information on the structure of plugins can be found [here](/structure/plugin).
+
+Using Edtr.io one creates documents. Every content created with the editor is a `Document`. A `Document` is simply just a JSON object with a little more rules so that it coheres to a common schema. More information on the Document Schema can be found [here](/structure/document).
+
+Displaying the editor can be easily achieved as such:
+
+```jsx
+import Editor from './Editor'
+
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <Editor />
+      </div>
+    )
+  }
+}
+```
+