WYSIWYG inline editor

The "WYSIWYG inline editor" component is an HTML floating or sticky rich text editor.

Table of contents

Showcase

DeckDeckGo (editable title)

The Progressive Web App alternative for simple presentations 🚀 (editable subtitle)

Edit anywhere, display everywhere (editable paragraph)

Video

Have a look at this video where we demonstrate how to use it!

Installation

This component could be added to your web application using the following methods.

If you are using our Starter Kit this template is included. You don't need to install it so therefore you should skip the "Installation" chapter.

Using from a CDN

It's recommended to use unpkg 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 type="module" src="https://unpkg.com/@deckdeckgo/inline-editor@latest/dist/deckdeckgo-inline-editor/deckdeckgo-inline-editor.esm.js"></script> <script nomodule="" src="https://unpkg.com/@deckdeckgo/inline-editor@latest/dist/deckdeckgo-inline-editor/deckdeckgo-inline-editor.js"></script>

Install from NPM

Install it in your project from npm using the following command:

npm install @deckdeckgo/inline-editor

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:

Import

import '@deckdeckgo/inline-editor';

Loader

import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/inline-editor/dist/loader'; deckDeckGoElement();

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, or other containers you would define, which are set as contenteditable.

Properties

The <deckgo-inline-editor/> expose the following properties:

PropertyAttributeDescriptionTypeDefault
attachToattach-toCould be use to attach the inline editor event listeners (mousedown, touchstart and keydown) to a specific element instead of the document.HTMLElementundefined
containerscontainersA comma separated list of containers where the inline editor should/could be use. Used in order to allow the component to detect some information like the current style or color.string'h1,h2,h3,h4,h5,h6,div'
imgAnchorimg-anchorThe type of element to attach the image toolbar.string'img'
imgEditableimg-editablePer default, the component will not consider images as editable. Turn this option to true to activate the edition of images.booleanfalse
imgPropertyCssFloatimg-property-css-floatIn case you would like to use a specific property to specify the float on your image.string'cssFloat'
imgPropertyWidthimg-property-widthIn case you would like to use a specific property to specify the width on your image.string'width'
mobilemobileThe mobile mode is automatically recognize, but just it case you would like to "force" it.booleanfalse
stickyDesktopsticky-desktopUse a sticky footer toolbar on desktopbooleanfalse
stickyMobilesticky-mobileUse a sticky footer toolbar on mobile. The sticky bar is positioned bottom except on iOS for which it will be positioned top.booleanfalse
customActionscustom-actionsYou might to display and add further actions to the component ? Use this property to provide a comma separated list of actionsstring
palettepaletteIn case you would like to define a custom list of colors for the palette of colors. See @deckdeckgo/color for the default list of colors.DeckdeckgoPalette[]DEFAULT_PALETTE
listlistActions to manipulate the selection as list enabled?booleantrue
alignalignActions to manipulate the selection alignment enabled?booleantrue
fontSizefont-sizeActions to modify the selection font-size enabled?booleantrue
backgroundColorbackground-colorTo hide the option to select a background-colorbooleantrue

Custom actions slots

If you provide custom actions, a slot is going to be generated on the flight for every actions you would provide. For example:

<deckgo-inline-editor custom-actions="my-action"> <span slot="my-action">My action</span> </deckgo-inline-editor>

Styling

The <deckgo-inline-editor/> could be styled using the following CSS4 variables which would only applies on the type <svg/>:

CSS4 variableDefaultNote
--deckgo-inline-editor-background-topwhiteThe top background of the toolbar (linear gradient)
--deckgo-inline-editor-background-bottomwhiteThe bottom background of the toolbar (linear gradient)
--deckgo-inline-editor-border1px solid #3880ffThe border of the toolbar
--deckgo-inline-editor-border-radius8pxThe border radius of the toolbar
--deckgo-inline-editor-padding0 8pxThe padding of the toolbar
--deckgo-inline-editor-zindex1The z-Index of the toolbar
--deckgo-inline-editor-transformThe transform property of the toolbar, useful for example if your viewport contains a split menu pane
--deckgo-inline-editor-sticky-bottom0The bottom attribute of the sticky toolbar
--deckgo-inline-editor-sticky-zindexThe z-Index of the sticky toolbar
--deckgo-inline-editor-separator-backgroundrgba(255, 255, 255, .2)The color of the separator
--deckgo-inline-editor-button-color#3880ffThe buttons color
--deckgo-inline-editor-button-font-size1.4remThe buttons font size
--deckgo-inline-editor-button-font-familyinheritThe buttons font family
--deckgo-inline-editor-button-color-activeblackThe color of the buttons when active
--deckgo-inline-editor-button-color-disabled#f4f5f8The color of the buttons when disabled
--deckgo-inline-editor-button-display-disablednonePer default the disable elements on title elements are not displayed
--deckgo-inline-editor-link-color#3880ffThe color of the input field for the url
--deckgo-inline-editor-link-placeholder-color#3880ffThe color of the placeholder of the input field for the url
--deckgo-inline-editor-widthinheritThe width of the toolbar
--deckgo-inline-editor-box-shadow0 0 8px 4px rgba(0, 0, 0, 0.1)A box shadow for the toolbar
--deckgo-inline-editor-triangle-box-shadow0 0 8px 4px rgba(0, 0, 0, 0.1)A box shadow for the triangle above the toolbar
--deckgo-inline-editor-positionabsoluteThe position of the toolbar

Furthermore, the following variables are also available but only have an effects on mobile devices:

CSS4 variableDefaultNote
--deckgo-inline-editor-mobile-box-shadow0 0 8px 4px rgba(0, 0, 0, 0.1)A box shadow for the toolbar
--deckgo-inline-editor-mobile-background-top#fff**
--deckgo-inline-editor-mobile-border0**
--deckgo-inline-editor-button-mobile-colorblack**
--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-colorinherit**
--deckgo-inline-editor-link-mobile-placeholder-colorinherit**

** like above but for mobile

Events

The component emits the following events:

EventDescriptionType
imgDidChangeTriggered when an image is manipulated. Note: the event won't provide directly the image but rather its container element.CustomEvent<HTMLElement>
linkCreatedTriggered when a link is created by the user. The event detail is the container.CustomEvent<HTMLElement>
styleDidChangeTriggered when the style is modified (bold, italic, color, alignment, etc.). The event detail is the container.CustomEvent<HTMLElement>
stickyToolbarActivatedTriggered when the sticky toolbar would be activated or not. Useful for example if you want to catch the event to hide things in your footer, as the sticky toolbar is display above it.CustomEvent<boolean>
customActionTriggered when a custom action is selected. Its detail provide an action name, the Selection and an anchorLinkCustomEvent<InlineAction>

Methods

This component also export an async method reset() which will reset the inline editor (= hide it) and optionally clear its selection.

const element = document.querySelector('deckgo-inline-editor'); await element.reset(clearSelection: boolean, blurActiveElement?: boolean);

Examples

<p contenteditable slot="content">This text will be editable</p> <h1 contenteditable slot="title">This title too</h1> <deckgo-inline-editor></deckgo-inline-editor>

Implementation

Worth to notice that this Web Component does not use the obsolete Document.execCommand() and is therefore kind of future proof.