merge: WYSIWYG inline editor

Author: peterpeterparker

CHANGELOG.md

@@ -1,3 +1,14 @@
+<a name="1.0.0-beta.30"></a>
+# [1.0.0-beta.30](https://github.com/deckgo/deckdeckgo/compare/v1.0.0-beta.29...v1.0.0-beta.30) (2019-03-07)
+
+### Web Components
+
+* inline editor: v1.0.0-alpha.3 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/inline-editor/CHANGELOG.md))
+
+### Others
+
+* docs: v1.0.0-alpha.4 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
+
 <a name="1.0.0-beta.29"></a>
 # [1.0.0-beta.29](https://github.com/deckgo/deckdeckgo/compare/v1.0.0-beta.28...v1.0.0-beta.29) (2019-03-03)
 

docs/CHANGELOG.md

@@ -1,3 +1,10 @@
+<a name="1.0.0-alpha.4"></a>
+# 1.0.0-alpha.4 (2019-03-07)
+
+### Features
+
+* add new component `WYSIWYG inline editor`
+
 <a name="1.0.0-alpha.3"></a>
 # [1.0.0-alpha.3](https://github.com/deckgo/deckdeckgo-docs/compare/v1.0.0-alpha.2...v1.0.0-alpha.3) (2019-02-17)
 

docs/docs/components/app-components-inline-editor/app-components-inline-editor.md

@@ -0,0 +1,118 @@
+# WYSIWYG inline editor
+
+The "WYSIWYG inline editor" component is an extra component which will be use in the upcoming [DeckDeckGo] Studio.
+
+## Table of contents
+
+- [Showcase](#app-components-qrcode-showcase)
+- [Getting started](#app-components-qrcode-getting-started)
+	- [Using from a CDN](#app-components-from-a-cdn)
+	- [Install from NPM](#app-components-from-npm)
+	- [Framework integration](#app-components-qrcode-framework-integration)
+- [Usage](#app-components-qrcode-usage)
+	- [Properties](#app-components-qrcode-properties)
+	- [Styling](#app-components-qrcode-styling)
+	- [Examples](#app-components-qrcode-examples)
+
+## Showcase
+
+<div>
+  <h1 style={{color: '#3880ff'}}>DeckDeckGo (editable title)</h1>
+
+  <h2 style={{color: '#3880ff'}}>The Progressive Web App alternative for simple presentations 🚀 (editable subtitle)</h2>
+  
+  <p style={{color: '#3880ff'}}>Edit anywhere, display everywhere (editable paragraph)</p>
+</div>
+
+<deckgo-inline-editor sticky-desktop="true" sticky-mobile="true"></deckgo-inline-editor>
+
+## Getting started
+
+This Web Component is an inline WYSIWYG HTML Editor, It creates a floating editor bar or a sticky footer bar that shows up when you select a piece of text of your page.
+
+To add the component to your web applications, it could be use directly in your project from a CDN, using a simple script include, or could be installed from [npm](https://www.npmjs.com/package/deckdeckgo-qrcode).
+
+### Using from a CDN
+
+It's recommended to use [unpkg](https://unpkg.com/) to use the [DeckDeckGo] inline editor from a CDN. To do so, add the following include script in the main HTML file of your project:
+
+```
+<script src="https://unpkg.com/deckdeckgo-inline-editor@latest/dist/deckdeckgo-inline-editor.js"></script>
+```
+### Install from NPM
+
+Install it in your project from [npm](https://www.npmjs.com/package/deckdeckgo-qrcode) using the following command:
+
+```bash
+npm install deckdeckgo-inline-editor
+```
+
+### 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).
+
+## Usage
+
+The `<deckgo-inline-editor/>` should be added once only in your page. It will interact with all elements of types `p`, `h1`, `h2`  and `h3` you would have set as `contenteditable`.
+
+### Properties
+
+The `<deckgo-inline-editor/>` expose the following properties:
+
+| Property              | Attribute               | Description | Type      | Default     |
+| --------------------- | ----------------------- | ----------- | --------- | ----------- |
+| `mobile`              | `mobile`                | The mobile mode is automatically recognize, but just it case you would like to "force" it            | `boolean` | `false` or `true` according the device    |
+| `stickyDesktop`       | `sticky-desktop`        | Use a sticky footer toolbar on desktop            | `boolean` | `false`     |
+| `stickyMobile`        | `sticky-mobile`         | Use a sticky footer toolbar on mobile. Note: except iOS, feel free to send a PR if you know how to handle this with the software keyboard            | `boolean` | `false`     |
+| `toolbarOffsetStart` | `toolbar-offset-start` | A left offset for the toolbar when not sticky            | `number`  | `undefined` |
+| `toolbarOffsetTop`   | `toolbar-offset-top`   | A top offset for the toolbar when not sticky            | `number`  | `undefined` |
+
+### Styling
+
+The `<deckgo-inline-editor/>` could be styled using the following CSS4 variables which would only applies on the type `<svg/>`:
+
+| CSS4 variable                      | Default | Note |
+| -------------------------- |-----------------|-----------------|
+| --deckgo-inline-editor-background-top | rgba(56, 128, 255, .99) | The top background of the toolbar (linear gradient) |
+| --deckgo-inline-editor-background-bottom | #3171e0 | The bottom background of the toolbar (linear gradient) |
+| --deckgo-inline-editor-border-radius | 8px | The border radius of the toolbar |
+| --deckgo-inline-editor-padding | 0 8px | The padding of the toolbar |
+| --deckgo-inline-editor-zindex | 1 | The z-Index of the toolbar |
+| --deckgo-inline-editor-sticky-bottom | 0 | The bottom attribute of the sticky toolbar |
+| --deckgo-inline-editor-separator-background | rgba(255, 255, 255, .2) | The color of the separator |
+| --deckgo-inline-editor-button-color | #fff | The buttons color |
+| --deckgo-inline-editor-button-font-size | 1.4rem | The buttons font size |
+| --deckgo-inline-editor-button-font-family | inherit | The buttons font family |
+| --deckgo-inline-editor-button-font-size-h2 | 1.2rem | The button h2 font size |
+| --deckgo-inline-editor-button-font-size-h3 | 1rem | The button h3 font size |
+| --deckgo-inline-editor-button-color-active | #ffce00 | The color of the buttons when active |
+| --deckgo-inline-editor-button-color-disabled | #4c8dff | The color of the buttons when disabled  |
+| --deckgo-inline-editor-link-color | #fff | The color of the input field for the url |
+| --deckgo-inline-editor-link-placeholder-color | #fff | Ther color of the placeholder of the input field for the url |
+
+Furthermore, the following variables are also available but only have an effects on mobile devices:
+
+| CSS4 variable                      | Default | Note |
+| -------------------------- |-----------------|-----------------|
+| --deckgo-inline-editor-mobile-box-shadow | 0 0px 1px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.15) | A box shadow for the toolbar |
+| --deckgo-inline-editor-mobile-background-top | #fff | ** |
+| --deckgo-inline-editor-mobile-background-bottom | #fff | ** |
+| --deckgo-inline-editor-button-mobile-color-active | #3880ff | ** |
+| --deckgo-inline-editor-button-mobile-color-disabled | #f4f5f8 | ** |
+| --deckgo-inline-editor-separator-mobile-background | #f4f5f8 | ** |
+| --deckgo-inline-editor-link-mobile-color | inherit | ** |
+| --deckgo-inline-editor-link-mobile-placeholder-color | inherit | ** |
+
+** like above but for mobile
+
+### Examples
+
+```
+<p contenteditable>This text will be editable</p>
+
+<h1 contenteditable>This title too</h1>
+
+<deckgo-inline-editor></deckgo-inline-editor>
+```
+
+[DeckDeckGo]: https://deckdeckgo.com 

docs/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "deckdeckgo-docs",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.4",
   "description": "The Progressive Web App alternative for simple presentations",
   "license": "MIT",
   "files": [
@@ -18,6 +18,7 @@
     "deckdeckgo": "^1.0.0-beta.26",
     "deckdeckgo-charts": "^1.0.0-alpha.5",
     "deckdeckgo-highlight-code": "^1.0.0-alpha.11",
+    "deckdeckgo-inline-editor": "^1.0.0-alpha.3",
     "deckdeckgo-qrcode": "^1.0.0-alpha.6",
     "rxjs": "^6.4.0"
   },

docs/package.json

@@ -93,6 +93,7 @@ export class AppRoot {
           <ion-route url="/components/charts" component="app-components-charts"/>
           <ion-route url="/components/gif" component="app-components-gif"/>
           <ion-route url="/components/code" component="app-components-highlight-code"/>
+          <ion-route url="/components/inline-editor" component="app-components-inline-editor"/>
           <ion-route url="/components/qrcode" component="app-components-qrcode"/>
           <ion-route url="/components/social" component="app-components-social"/>
           <ion-route url="/components/youtube" component="app-components-youtube"/>
@@ -159,6 +160,7 @@ export class AppRoot {
                     <ion-item href="/components/charts" routerDirection="forward"><ion-label>Charts</ion-label></ion-item>
                     <ion-item href="/components/gif" routerDirection="forward"><ion-label>Gif</ion-label></ion-item>
                     <ion-item href="/components/code" routerDirection="forward"><ion-label>Highlight Code</ion-label></ion-item>
+                    <ion-item href="/components/inline-editor" routerDirection="forward"><ion-label>WYSIWYG inline editor</ion-label></ion-item>
                     <ion-item href="/components/qrcode" routerDirection="forward"><ion-label>QR Code</ion-label></ion-item>
                     <ion-item href="/components/social" routerDirection="forward"><ion-label>Social</ion-label></ion-item>
                     <ion-item href="/components/youtube" routerDirection="forward"><ion-label>Youtube</ion-label></ion-item>