Update readme and add screenshots

README.md

@@ -2,10 +2,46 @@
 
 This is the best* TeX-based mathematical plugin for CKEditor 5. You can use it to insert, edit and view mathematical equation and formulas. This plugin supports MathJax, KaTeX and custom typesetting engines.
 
+## Table of contents
+- [Features](#features)
+- [Screenshots](#screenshots)
+- [Examples](#examples)
+- [Installation](#installation)
+  * [Styles for Lark theme](#styles-for-lark-theme)
+  * [Styles](#styles)
+- [Configuration & Usage](#configuration---usage)
+  * [Plugin options](#plugin-options)
+  * [Available typesetting engines](#available-typesetting-engines)
+  * [Supported input and output formats](#supported-input-and-output-formats)
+- [Paste support](#paste-support)
+  * [From plain text](#from-plain-text)
+  * [From Microsoft Word](#from-microsoft-word)
+- [Preview workaround](#preview-workaround)
+- [Todo](#todo)
+
+## Features
+- TeX syntax
+- Inline and display equations
+- Preview view
+- Multiple typesetting engines
+- Have multiple input and output format
+- Paste support
+  - from plain text
+  - from Microsoft Word
+
+## Screenshots
+![Screenshot 1](/screenshots/1.png?raw=true "Screenshot 1")
+
+![Screenshot 2](/screenshots/2.png?raw=true "Screenshot 2")
+
 ## Examples
 [Link to examples repository](https://github.com/isaul32/ckeditor5-math-examples)
 
 ## Installation
+Use official classic or inline build as a base:
+- [CKEditor 5 classic editor build](https://github.com/ckeditor/ckeditor5-build-classic)
+- [CKEditor 5 inline editor build](https://github.com/ckeditor/ckeditor5-build-inline)
+
 Install plugin with NPM or Yarn
 
 `npm install ckeditor5-math --save-dev`
@@ -37,12 +73,12 @@ InlineEditor.defaultConfig = {
 	}
 };
 ```
-### Copying plugin's theme for Lark
+### Styles for Lark theme
-Copy __theme/ckeditor5-math__ folder from [https://github.com/isaul32/ckeditor5-theme-lark](https://github.com/isaul32/ckeditor5-theme-lark) to your lark theme repository fork or install
+Copy __theme/ckeditor5-math__ folder from [https://github.com/isaul32/ckeditor5-theme-lark](https://github.com/isaul32/ckeditor5-theme-lark) to your lark theme repository or install
+
 `npm install @ckeditor/ckeditor5-theme-lark@https://github.com/isaul32/ckeditor5-theme-lark --save-dev`
 
-### Styles
+Styles requires PostCSS like official CKEditor 5 plugins.
-Styles requires PostCSS like offical CKEditor plugins.
 
 ## Configuration & Usage
 
@@ -61,14 +97,19 @@ InlineEditor.defaultConfig = {
 
 ### Available typesetting engines
 __MathJax__
-- Tested by using version __2.7.5__ and __TeX-MML-AM_HTMLorMML__ configuration. It has also experimental (__CHTML__, __SVG__) support for __3.0.0__ or newer version.
+- Tested by using version __latest 2.7__.
+- Also has experimental (__CHTML__, __SVG__) support for __3.0.0__ or newer version.
 - Use __\\( \\)__ delimiters for inline and __\\[ \\]__ delimiters for display
 
+[<img src="https://www.mathjax.org/badge/badge-square.svg" width="130" alt="KaTeX">](https://www.mathjax.org/)
+
 __KaTeX__
 - Tested by using version __0.11.0__
-- Doesn't support preview feature because __.ck-reset_all *__ css rules from ckeditor5-ui and ckeditor5-theme-lark breaks it.
 
-__Custom__
+[<img src="https://katex.org/img/katex-logo-black.svg" width="130" alt="KaTeX">](https://katex.org/)
+
+__Custom typesetting__
+
 It's possible to implement with engine config. For example, this feature can be used when use back end rendering.
 ```js
 InlineEditor.defaultConfig = {
@@ -100,16 +141,17 @@ Supported input and output formats are:
 
 ### Paste support
 
-#### Plain TeX paste
+#### From plain text
-Paste equations with __delimiters__. For example:
+Paste TeX equations with __delimiters__. For example:
 __\\[__ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} __\\]__
 or
 __\\(__ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} __\\)__
 
-#### Paste support from Microsoft Word
+#### From Microsoft Word
-Use [__paste from office__](https://github.com/isaul32/ckeditor5-paste-from-office) fork instead of offical.
+Use [__paste from office__](https://github.com/isaul32/ckeditor5-paste-from-office) fork instead of official. This feature is __experimental__ and might not work always (look source code).
 
 Install paste from office fork
+
 `npm install @ckeditor/ckeditor5-paste-from-office@github:isaul32/ckeditor5-paste-from-office --save-dev`
 
 ```js
@@ -123,10 +165,14 @@ InlineEditor.builtinPlugins = [
 ];
 ```
 
+## Preview workaround
+__.ck-reset_all *__ css rules from ckeditor5-ui and ckeditor5-theme-lark break rendering in preview mode.
+
+My solution for this is use rendering element outside of CKEditor DOM and place it right place by using absolute position. Alternative solution could be using iframe, but then we have to copy typesetting engine's scripts and styles to child document.
+
 ## Todo
-- Fix KaTex preview
 - MathML input and output when using MathJax version 3
 - Make tests
 
 
-[*] at least in my opinion
+[*] at least in my opinion 😄