deckgo · peterpeterparker · May 14, 2020 · Apr 26, 2020 · May 3, 2020 · May 3, 2020
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,23 +1,21 @@
-<a name="1.1.0"></a>
+<a name="1.2.0"></a>
 
-# [1.1.0](https://github.com/deckgo/deckdeckgo/compare/v1.0.0...v1.1.0) (2020-07-08)
+# [1.2.0](https://github.com/deckgo/deckdeckgo/compare/v1.1.0...v1.2.0) (2020-07-14)
 
 ### Applications
 
-- demo: v2.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo-website/blob/master/CHANGELOG.md))
-- docs: v1.1.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
-- remote: v1.1.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/remote/CHANGELOG.md))
-- studio: v1.1.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/studio/CHANGELOG.md))
+- docs: v1.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
 
 ### Web Components: New
 
-- demo: v1.0.4 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/demo/CHANGELOG.md))
+- math: v1.0.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/math/CHANGELOG.md))
 
 ### Web Components: Update
 
 - charts: v1.0.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/charts/CHANGELOG.md))
 - color: v1.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/color/CHANGELOG.md))
 - core: v1.0.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/core/CHANGELOG.md))
+- demo: v1.0.4 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/demo/CHANGELOG.md))
 - drag-resize-rotate: v1.0.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/drag-resize-rotate/CHANGELOG.md))
 - highlight-code: v1.0.5 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/highlight-code/CHANGELOG.md))
 - inline-editor: v1.2.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/inline-editor/CHANGELOG.md))
@@ -46,6 +44,36 @@
 
 ### Others
 
+- deck-utils: v2.3.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/deck/CHANGELOG.md))
+- starter kit: v2.3.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo-starter/blob/master/CHANGELOG.md))
+
+<a name="1.1.0"></a>
+
+# [1.1.0](https://github.com/deckgo/deckdeckgo/compare/v1.0.0...v1.1.0) (2020-07-08)
+
+### Applications
+
+- demo: v2.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo-website/blob/master/CHANGELOG.md))
+- docs: v1.1.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
+- remote: v1.1.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/remote/CHANGELOG.md))
+- studio: v1.1.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/studio/CHANGELOG.md))
+
+### Web Components: New
+
+- demo: v1.0.3 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/demo/CHANGELOG.md))
+
+### Web Components: Update
+
+- highlight-code: v1.0.4 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/highlight-code/CHANGELOG.md))
+- inline-editor: v1.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/inline-editor/CHANGELOG.md))
+- youtube: v1.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/youtube/CHANGELOG.md))
+
+### Web Components Templates
+
+- slide-split: v1.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/split/CHANGELOG.md))
+
+### Others
+
 - deck-utils: v2.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/deck/CHANGELOG.md))
 - slide-utils: v1.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/utils/slide/CHANGELOG.md))
 - starter kit: v2.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo-starter/blob/master/CHANGELOG.md))

diff --git a/README.md b/README.md
@@ -62,6 +62,7 @@ Are you interested to contribute to our open source project? That would be aweso
 | **Highlight code**          | [`@deckdeckgo/highlight-code`](https://www.npmjs.com/package/@deckdeckgo/highlight-code)         | [![version](https://img.shields.io/npm/v/@deckdeckgo/highlight-code/latest.svg?color=success)](https://www.npmjs.com/package/@deckdeckgo/highlight-code)         |   [`README.md`](webcomponents/highlight-code/README.md)   |
 | **Inline editor**           | [`@deckdeckgo/inline-editor`](https://www.npmjs.com/package/@deckdeckgo/inline-editor)           | [![version](https://img.shields.io/npm/v/@deckdeckgo/inline-editor/latest.svg?color=success)](https://www.npmjs.com/package/@deckdeckgo/inline-editor)           |   [`README.md`](webcomponents/inline-editor/README.md)    |
 | **Lazy image**              | [`@deckdeckgo/lazy-img`](https://www.npmjs.com/package/@deckdeckgo/lazy-img)                     | [![version](https://img.shields.io/npm/v/@deckdeckgo/lazy-img/latest.svg?color=success)](https://www.npmjs.com/package/@deckdeckgo/lazy-img)                     |      [`README.md`](webcomponents/lazy-img/README.md)      |
+| **Math**                    | [`@deckdeckgo/math`](https://www.npmjs.com/package/@deckdeckgo/math)                             | [![version](https://img.shields.io/npm/v/@deckdeckgo/math/latest.svg?color=success)](https://www.npmjs.com/package/@deckdeckgo/math)                             |        [`README.md`](webcomponents/math/README.md)        |
 | **QR-Code**                 | [`@deckdeckgo/qrcode`](https://www.npmjs.com/package/@deckdeckgo/qrcode)                         | [![version](https://img.shields.io/npm/v/@deckdeckgo/qrcode/latest.svg?color=success)](https://www.npmjs.com/package/@deckdeckgo/qrcode)                         |       [`README.md`](webcomponents/qrcode/README.md)       |
 | **Remote**                  | [`@deckdeckgo/remote`](https://www.npmjs.com/package/@deckdeckgo/remote)                         | [![version](https://img.shields.io/npm/v/@deckdeckgo/remote/latest.svg?color=success)](https://www.npmjs.com/package/@deckdeckgo/remote)                         |       [`README.md`](webcomponents/remote/README.md)       |
 | **Social**                  | [`@deckdeckgo/social`](https://www.npmjs.com/package/@deckdeckgo/social)                         | [![version](https://img.shields.io/npm/v/@deckdeckgo/social/latest.svg?color=success)](https://www.npmjs.com/package/@deckdeckgo/social)                         |       [`README.md`](webcomponents/social/README.md)       |

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 1.2.0 (2020-05-14)
+
+### Features
+
+- new component `math`
+
 # 1.1.0 (2020-05-07)
 
 ### Features

diff --git a/docs/docs/components/app-components-demo/app-components-demo.md b/docs/docs/components/app-components-demo/app-components-demo.md
@@ -40,7 +40,7 @@ It's recommended to use [unpkg](https://unpkg.com/) to use the [DeckDeckGo] lazy
 
 ### Install from NPM
 
-Install it in your project from [npm](https://www.npmjs.com/package/@deckdeckgo/qrcode) using the following command:
+Install it in your project from [npm](https://www.npmjs.com/package/@deckdeckgo/demo) using the following command:
 
 ```bash
 npm install @deckdeckgo/demo

diff --git a/docs/docs/components/app-components-math/app-components-math.md b/docs/docs/components/app-components-math/app-components-math.md
@@ -0,0 +1,144 @@
+# Demo
+
+Write and render math expressions.
+
+This component is using [Katex](https://katex.org/) to renders these.
+
+## Table of contents
+
+- [Showcase](#app-components-math-showcase)
+- [Installation](#app-components-math-installation)
+  - [Using from a CDN](#app-components-math-from-a-cdn)
+  - [Install from NPM](#app-components-math-from-npm)
+  - [Framework integration](#app-components-math-framework-integration)
+- [Usage](#app-components-math-usage)
+  - [Slots](#app-components-math-slots)
+  - [Attributes](#app-components-math-attributes)
+  - [Events](#app-components-math-events)
+  - [Theming](#app-components-math-theming)
+
+## Showcase
+
+<div style={{position: 'relative'}}>
+  <deckgo-math>
+    <code slot="math">{`% \\f is defined as f(#1) using the macro
+      \\f{x} = \\int_{-\\infty}^\\infty
+      \\hat \\f\\xi\\,e^{2 \\pi i \\xi x}
+      \\,d\\xi`}</code>
+  </deckgo-math>
+</div>
+
+## Installation
+
+This component could be added to your web application using the following methods.
+
+### Using from a CDN
+
+It's recommended to use [unpkg](https://unpkg.com/) to use the [DeckDeckGo] lazy image component from a CDN. To do so, add the following include script in the main HTML file of your project:
+
+```
+<script type="module" src="https://unpkg.com/@deckdeckgo/math@latest/dist/deckdeckgo-math/deckdeckgo-math.esm.js"></script>
+<script nomodule="" src="https://unpkg.com/@deckdeckgo/math@latest/dist/deckdeckgo-math/deckdeckgo-math.js"></script>
+```
+
+### Install from NPM
+
+Install it in your project from [npm](https://www.npmjs.com/package/@deckdeckgo/math) using the following command:
+
+```bash
+npm install @deckdeckgo/math
+```
+
+### Framework integration
+
+The [Stencil documentation](https://stenciljs.com/docs/overview) provide examples of framework integration for [Angular](https://stenciljs.com/docs/angular), [React](https://stenciljs.com/docs/react), [Vue](https://stenciljs.com/docs/vue) and [Ember](https://stenciljs.com/docs/ember).
+
+That being said, commonly, you might either `import` or `load` it:
+
+#### Import
+
+```
+import '@deckdeckgo/math';
+```
+
+#### Loader
+
+```
+import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/math/dist/loader';
+deckDeckGoElement();
+```
+
+## Usage
+
+The "Math" Web Component could be integrated using the tag `<deckgo-math/>`.
+
+```
+<deckgo-math>
+    <code slot="math">% \f is defined as f(#1) using the macro
+        \f{x} = \int_{-\infty}^\infty
+        \hat \f\xi\,e^{2 \pi i \xi x}
+        \,d\xi</code>
+</deckgo-math>
+```
+
+It either supports a single expression, as displayed above, or expressions within paragraphs.
+
+```
+<deckgo-math editable="true">
+  <code slot="math">
+    You can write math expression inside paragraph like this: $x + 1$
+
+    Inline formulas can be written with \$ e.g: $c = \pm\sqrt{a^2 + b^2}$
+
+    and displayed equations can be written using \$$ e.g: $$\sum_{i=1}^n 2^i$$
+  </code>
+</deckgo-math>
+```
+
+### Slots
+
+The expressions have to be provided using the slot `math`.
+
+### Attributes
+
+This component offers the following options which could be set using attributes:
+
+| Attribute | Type    | Default                     | Description                                                                                                                                                                                                                                                                                        |
+| --------- | ------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| macros    | string  | &#123;"\\\\f":"f(#1)"&#123; | A collection of custom macros. Each macro is a property with a name like \name (written "\\name" in JavaScript) which maps to a string that describes the expansion of the macro, or a function that accepts an instance of MacroExpander as first argument and returns the expansion as a string. |
+| editable  | boolean | `false`                     | To set the component has being editable (`contenteditable` will be applied on the `slot` on `click`)                                                                                                                                                                                               |
+
+See the [Katex](https://katex.org/docs/options.html) documentation for more information.
+
+### Events
+
+The `<deckgo-math/>` component triggers the following event.
+
+| Event           | Description                          | Type                       |
+| --------------- | ------------------------------------ | -------------------------- |
+| `mathDidChange` | Emit the host element when modified. | `CustomEvent<HTMLElement>` |
+
+### Theming
+
+The following theming options will affect this component if set on its host or parent.
+
+| CSS4 variable                           | Default                             | Note                                             |
+| --------------------------------------- | ----------------------------------- | ------------------------------------------------ |
+| --deckgo-math-color                     | inherit                             | Color                                            |
+| --deckgo-math-background                |                                     | Background                                       |
+| --deckgo-math-padding                   | 8px                                 | Padding                                          |
+| --deckgo-math-border-radius             |                                     | Border radius                                    |
+| --deckgo-math-margin                    | 0px                                 | Margin                                           |
+| --deckgo-math-direction                 |                                     | Direction                                        |
+| --deckgo-math-text-align                |                                     | Text alignment                                   |
+| --deckgo-math-container-display         | block                               | Container display                                |
+| --deckgo-math-container-justify-content |                                     | Container justify-content attribute              |
+| --deckgo-math-container-flex-direction  |                                     | Container flex-direction attribute               |
+| --deckgo-math-container-align-items     |                                     | Container align-items attribute                  |
+| --deckgo-math-scroll                    | scroll                              | Scroll property of the expression(s)             |
+| --deckgo-math-font-size                 |                                     | Font size property of the expression(s)          |
+| --deckgo-math-min-height                | 23px                                | Minimal height property of the expression(s)     |
+| --deckgo-math-display                   | block                               | Display property of the expression(s)            |
+| --deckgo-math-code-empty-text           | "Click to add your math expression" | Place holder in case `editable` is set to `true` |
+
+[deckdeckgo]: https://deckdeckgo.com
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "deckdeckgo-docs",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "The Progressive Web App alternative for simple presentations",
   "license": "MIT",
   "files": [
@@ -17,11 +17,13 @@
     "@deckdeckgo/charts": "^1.0.1",
     "@deckdeckgo/color": "^1.1.0",
     "@deckdeckgo/core": "^1.0.1",
+    "@deckdeckgo/deck-utils": "^2.3.0",
     "@deckdeckgo/demo": "^1.0.2",
     "@deckdeckgo/drag-resize-rotate": "^1.0.0",
     "@deckdeckgo/highlight-code": "^1.0.4",
     "@deckdeckgo/inline-editor": "^1.2.0",
     "@deckdeckgo/lazy-img": "^1.0.0",
+    "@deckdeckgo/math": "^1.0.1",
     "@deckdeckgo/qrcode": "^1.0.0",
     "@deckdeckgo/slide-aspect-ratio": "^1.0.0",
     "@deckdeckgo/slide-author": "^1.0.0",