Fixes #36 - custom inline styles

README.md

@@ -108,7 +108,7 @@ Draftail, like Draft.js, distinguishes between 3 content formats:
 Common formatting options are available out of the box:
 
 - Block types: `H1`, `H2`, `H3`, `H4`, `H5`, `H6`, `Blockquote`, `Code`, `UL`, `OL`, `P`
-- Inline styles: `Bold`, `Italic`, `Underline`, `Monospace`, `Strikethrough`
+- Inline styles: `Bold`, `Italic`, `Code`, `Underline`, `Strikethrough`, `Mark`, `Keyboard`, `Superscript`, `Subscript`
 - Entities: `Images`, `Embeds`, (`Links`, `Documents`)
 - And `HR`, `BR` as special cases
 
@@ -151,6 +151,8 @@ label: PropTypes.string.isRequired,
 type: PropTypes.string.isRequired,
 // Represents the inline style in the editor UI.
 icon: PropTypes.string,
+// CSS properties (in JS format) to apply for styling within the editor area.
+style: PropTypes.Object,
 ```
 
 #### Entities
@@ -180,17 +182,59 @@ Here are quick questions to help you determine which formatting to use, dependin
 |----------------|--------------------------------------|
 | Indicate the structure of the content | Blocks        |
 | Enter additional data/metadata        | Entities      |
-| Format a portion of the text          | Inline styles |
+| Format a portion of a line            | Inline styles |
 
-#### Blocks
+#### Custom blocks
 
 Simple blocks are very easy to create. Add a new block type to `blockTypes`, specifying which `element` and `className` to display the block as.
 
+Here is an example, creating a "Terms & conditions" block:
+
+```jsx
+blockTypes={[
+    {
+        label: 'T&C',
+        type: 'terms-and-conditions',
+        element: 'div',
+        className: 'u-smalltext',
+    },
+]}
+```
+
 More advanced blocks, requiring custom React components, aren't supported at the moment. If you need this, feel free to [create an issue](https://github.com/springload/draftail/issues/new).
 
 #### Custom inline styles
 
-Custom inline styles aren't supported at the moment. This is on the roadmap, please refer to [#36](https://github.com/springload/draftail/issues/36).
+Custom inline styles only require a `style` prop, defining which CSS properties to apply when the format is active.
+
+Here is a basic example:
+
+```jsx
+inlineStyles={[
+    {
+        label: 'Redacted',
+        type: 'REDACTED',
+        style: {
+            backgroundColor: 'currentcolor',
+        },
+    },
+]}
+```
+
+It is also possible to override the styling of predefined inline styles:
+
+```jsx
+inlineStyles={[
+    {
+        label: 'Bold',
+        type: INLINE_STYLE.BOLD,
+        style: {
+            fontWeight: 'bold',
+            textShadow: '1px 1px 1px black',
+        },
+    },
+]}
+```
 
 #### Custom entity types
 
@@ -203,7 +247,7 @@ Apart from the usual label/type/icon options, entities need:
 
 ##### Sources
 
-TODO
+For now, please refer to the examples available with the project.
 
 ##### Decorators
 

examples/all.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import DraftailEditor, { BLOCK_TYPE, INLINE_STYLE } from '../lib';
+
+import allContentState from './utils/allContentState';
+
+const mount = document.querySelector('[data-mount-all]');
+
+const onSave = contentState => {
+    sessionStorage.setItem('all:contentState', JSON.stringify(contentState));
+};
+
+const allBlockTypes = Object.keys(BLOCK_TYPE).map(type => ({
+    label: `${type.charAt(0).toUpperCase()}${type
+        .slice(1)
+        .toLowerCase()
+        .replace(/_/g, ' ')}`,
+    type: BLOCK_TYPE[type],
+}));
+
+const allInlineStyles = Object.keys(INLINE_STYLE).map(type => ({
+    label: `${type.charAt(0).toUpperCase()}${type.slice(1).toLowerCase()}`,
+    type: INLINE_STYLE[type],
+}));
+
+const editor = (
+    <DraftailEditor
+        rawContentState={allContentState}
+        onSave={onSave}
+        stripPastedStyles={false}
+        blockTypes={allBlockTypes}
+        inlineStyles={allInlineStyles}
+    />
+);
+
+ReactDOM.render(editor, mount);

examples/custom.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import DraftailEditor, { BLOCK_TYPE } from '../lib';
+import DraftailEditor, { BLOCK_TYPE, INLINE_STYLE } from '../lib';
 
 const mount = document.querySelector('[data-mount-custom]');
 
@@ -27,6 +27,7 @@ const editor = (
     <DraftailEditor
         rawContentState={rawContentState}
         onSave={onSave}
+        stripPastedStyles={false}
         blockTypes={[
             { label: 'H2', type: BLOCK_TYPE.HEADER_TWO },
             {
@@ -36,6 +37,18 @@ const editor = (
                 className: 'u-tinytext',
             },
         ]}
+        inlineStyles={[
+            {
+                label: 'Bold',
+                type: INLINE_STYLE.BOLD,
+                style: { fontWeight: 'bold', textShadow: '1px 1px 1px black' },
+            },
+            {
+                label: 'Redacted',
+                type: 'REDACTED',
+                style: { backgroundColor: 'currentcolor' },
+            },
+        ]}
     />
 );
 

examples/examples.html

@@ -28,9 +28,14 @@ <h4><a href="https://github.com/springload/draftail/blob/master/examples/entitie
             </div>
 
             <div id="example-custom" class="example">
-                <h4><a href="https://github.com/springload/draftail/blob/master/examples/custom.js">Custom block types</a> <a class="anchor" href="#example-custom">#</a></h4>
+                <h4><a href="https://github.com/springload/draftail/blob/master/examples/custom.js">Custom formats</a> <a class="anchor" href="#example-custom">#</a></h4>
                 <div data-mount-custom></div>
             </div>
+
+            <div id="example-all" class="example">
+                <h4><a href="https://github.com/springload/draftail/blob/master/examples/all.js">All built-in formats</a> <a class="anchor" href="#example-all">#</a></h4>
+                <div data-mount-all></div>
+            </div>
         </section>
         <footer>
             <a href="https://www.springload.co.nz/" style="display: block;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 28" style="width:144px; height:24px;"><title>Springload</title><path fill="#4A4A4A" d="M8.9 17.7c0-1-.9-1.1-2.9-1.3-2.6-.2-5.4-.7-5.4-4.1C.6 9.1 3.7 8 6.4 8c4 0 5.5 1.3 5.9 4.2l-3.6.4c-.2-1.2-.8-1.8-2.5-1.8-1.1 0-2.1.3-2.1 1.2s.8 1 2.7 1.2c2.7.2 5.5.6 5.5 4.1 0 3.3-2.9 4.4-6.2 4.4-4 0-5.9-1.4-6.1-4.3l3.6-.4c.1 1.3.9 1.9 2.6 1.9 1.7.1 2.7-.1 2.7-1.2m8.6 8.8h-3.4V11.8l-.2-3.6H17l.2 1.7c.7-1.4 2.4-2 4-2 4.1 0 6.1 2.4 6.1 7s-2.1 7-6.1 7c-2 0-3.2-.7-3.8-1.7v6.3h.1zm3.1-15.4c-1.8 0-2.9 1.1-3.2 2.2v3.1c.2 1.1 1.4 2.2 3.2 2.2 1.8 0 3.1-1.3 3.1-3.9 0-2.4-1.3-3.6-3.1-3.6m16.6.2c-2.6 0-4.1 1.6-4.5 2.8v7.4h-3.3v-9.7l-.2-3.6h3.1l.2 2.4c.7-1.6 2-2.9 4.8-2.9v3.6h-.1zm3.4-10.2c1.2 0 2.3 1 2.3 2.3 0 1.2-1 2.2-2.3 2.2-1.2 0-2.2-1-2.2-2.2-.1-1.2 1-2.3 2.2-2.3m-1.8 7.1h3.4v13.3h-3.4V8.2zm9 1.7c.8-1.2 2.1-2.1 4.1-2.1 3.1 0 4.9 1.6 4.9 4.7v9h-3.4V13c0-1.3-.7-2-2.1-2-1.8 0-3 1.2-3.3 2.2v8.2h-3.3v-9.6l-.1-3.6h3.1l.1 1.7zm20.7 9.5c-.6 1.2-2 1.7-3.8 1.7-3.9 0-6.1-2.1-6.1-6.7s2.3-6.7 6.2-6.7c1.9 0 3.2.7 3.9 2l.2-1.6H72l-.1 3.6v9.8c0 3.7-2.8 5.3-6.5 5.3-4.4 0-6.1-1.6-6.3-4.2l3.7-.6c.1 1 .6 1.9 2.6 1.9 1.9 0 3.2-.8 3.2-2.7l-.1-1.8zM65.2 18c1.8 0 3-1.1 3.2-2.3v-2.3c-.2-1.2-1.4-2.4-3.2-2.4-1.8 0-3.1.9-3.1 3.6 0 2.5 1.4 3.4 3.1 3.4m9.1-16.5h3.4v20.1h-3.4V1.5zm5.3 13.4c0-4.7 2.6-7 6.5-7 4 0 6.5 2.3 6.5 7s-2.6 7-6.5 7c-4 0-6.5-2.5-6.5-7m3.5 0c0 2.8 1.1 3.8 3 3.8s3-1 3-3.8-1.1-3.8-3-3.8-3 1-3 3.8m24.2-3.1v6.1l.2 3.6h-3.1l-.2-1.6c-.6 1.3-1.9 1.9-3.8 1.9-4 0-6.1-2.4-6.1-7s2.2-7 6.1-7c2 0 3.1.8 3.8 1.9l.2-1.4h3.1l-.2 3.5zm-3.4 1.5c-.2-1.1-1.4-2.2-3.2-2.2-1.8 0-3 1.2-3 3.8s1.2 3.8 3 3.8 3-1.1 3.2-2.2v-3.2zm18.6-11.8v16.4l.2 3.6h-3.1l-.2-1.6c-.6 1.2-1.9 1.9-3.9 1.9-4 0-6.1-2.4-6.1-7s2.2-7 6.1-7c1.8 0 3.1.6 3.7 1.7v-8h3.3zm-3.3 11.8c-.2-1.1-1.4-2.2-3.2-2.2-1.8 0-3 1.2-3 3.8s1.2 3.8 3 3.8 3-1.1 3.2-2.2v-3.2z"></path><path fill="#7DC265" d="M154.7 8.8c-3.3 0-4.4-1-7.9-1-3 0-5.9 1.1-6.4 6.1-.4 3.7-2.2 5-4.2 5-1.6 0-2.7-.6-3.1-1.8 2-.7 3.1-2.3 3.1-4.5 0-2.8-1.8-4.8-4.9-4.8-3.1 0-4.9 2-4.9 4.8 0 2.3 1.2 4 3.3 4.7.8 3.3 3.2 4.5 6.4 4.5 3.8 0 6.7-2.3 7.3-6.8 1.6 1.7 3.6 2.1 5.5 2.1 5.7 0 9.8-4.3 11-9.4-1.8.8-3.3 1.1-5.2 1.1zm-23.5 5.9c-1.1 0-1.8-.8-1.8-1.9s.7-1.9 1.8-1.9c1.2 0 1.8.8 1.8 1.9-.1 1-.6 1.9-1.8 1.9z"></path></svg></a>
@@ -40,6 +45,7 @@ <h4><a href="https://github.com/springload/draftail/blob/master/examples/custom.
     <script src="assets/basic.bundle.js"></script>
     <script src="assets/entities.bundle.js"></script>
     <script src="assets/custom.bundle.js"></script>
+    <script src="assets/all.bundle.js"></script>
 
     <script>
         window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;

examples/sources/.eslintrc

@@ -0,0 +1,5 @@
+{
+    "rules": {
+        "no-alert": [0]
+    }
+}

lib/api/behavior.js

@@ -11,6 +11,7 @@ import {
     INLINE_STYLE,
     KEY_CODES,
     KEYBOARD_SHORTCUTS,
+    CUSTOM_STYLE_MAP,
 } from '../api/constants';
 
 const { hasCommandModifier, isOptionKeyCommand } = KeyBindingUtil;
@@ -217,4 +218,20 @@ export default {
             ? blockType
             : false;
     },
+
+    getCustomStyleMap(inlineStyles) {
+        const customStyleMap = {};
+
+        inlineStyles.forEach(style => {
+            if (style.style) {
+                customStyleMap[style.type] = style.style;
+            } else if (CUSTOM_STYLE_MAP[style.type]) {
+                customStyleMap[style.type] = CUSTOM_STYLE_MAP[style.type];
+            } else {
+                customStyleMap[style.type] = {};
+            }
+        });
+
+        return customStyleMap;
+    },
 };

lib/api/behavior.test.js

@@ -2,7 +2,12 @@ import { List, Repeat } from 'immutable';
 import { CharacterMetadata, ContentBlock } from 'draft-js';
 
 import behavior from '../api/behavior';
-import { BLOCK_TYPE, KEY_CODES } from '../api/constants';
+import {
+    BLOCK_TYPE,
+    INLINE_STYLE,
+    KEY_CODES,
+    CUSTOM_STYLE_MAP,
+} from '../api/constants';
 
 describe('behavior', () => {
     describe('#getBlockRenderMap', () => {
@@ -292,4 +297,60 @@ describe('behavior', () => {
             ).toBe('ordered-list-item');
         });
     });
+
+    describe('#getCustomStyleMap', () => {
+        it('exists', () => {
+            expect(behavior.getCustomStyleMap).toBeDefined();
+        });
+
+        it('existing styles, default styling', () => {
+            expect(
+                behavior.getCustomStyleMap([
+                    { label: 'Bold', type: INLINE_STYLE.BOLD },
+                    { label: 'Mark', type: INLINE_STYLE.MARK },
+                ]),
+            ).toEqual({
+                [INLINE_STYLE.BOLD]: CUSTOM_STYLE_MAP[INLINE_STYLE.BOLD],
+                [INLINE_STYLE.MARK]: CUSTOM_STYLE_MAP[INLINE_STYLE.MARK],
+            });
+        });
+
+        it('existing styles, custom styling', () => {
+            expect(
+                behavior.getCustomStyleMap([
+                    {
+                        label: 'Bold',
+                        type: INLINE_STYLE.BOLD,
+                        style: {
+                            color: 'yellow',
+                        },
+                    },
+                ]),
+            ).toEqual({
+                [INLINE_STYLE.BOLD]: {
+                    color: 'yellow',
+                },
+            });
+        });
+
+        it('custom styles, custom styling', () => {
+            expect(
+                behavior.getCustomStyleMap([
+                    { label: 'Red', type: 'RED', style: { color: 'red' } },
+                ]),
+            ).toEqual({
+                RED: {
+                    color: 'red',
+                },
+            });
+        });
+
+        it('custom styles, undefined styling', () => {
+            expect(
+                behavior.getCustomStyleMap([{ label: 'Red', type: 'RED' }]),
+            ).toEqual({
+                RED: {},
+            });
+        });
+    });
 });

lib/api/constants.js

@@ -1,3 +1,5 @@
+import { DefaultDraftInlineStyle } from 'draft-js';
+
 // Originally from https://github.com/draft-js-utils/draft-js-utils/blob/master/src/Constants.js.
 export const BLOCK_TYPE = {
     // This is used to represent a normal text block (paragraph).
@@ -32,6 +34,77 @@ export const INLINE_STYLE = {
     CODE: 'CODE',
     UNDERLINE: 'UNDERLINE',
     STRIKETHROUGH: 'STRIKETHROUGH',
+    MARK: 'MARK',
+    QUOTATION: 'QUOTATION',
+    SMALL: 'SMALL',
+    SAMPLE: 'SAMPLE',
+    INSERT: 'INSERT',
+    DELETE: 'DELETE',
+    KEYBOARD: 'KEYBOARD',
+    SUPERSCRIPT: 'SUPERSCRIPT',
+    SUBSCRIPT: 'SUBSCRIPT',
+};
+
+export const FONT_FAMILY_MONOSPACE =
+    'Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif';
+
+export const CUSTOM_STYLE_MAP = {
+    [INLINE_STYLE.BOLD]: DefaultDraftInlineStyle[INLINE_STYLE.BOLD],
+    [INLINE_STYLE.ITALIC]: DefaultDraftInlineStyle[INLINE_STYLE.ITALIC],
+    [INLINE_STYLE.STRIKETHROUGH]:
+        DefaultDraftInlineStyle[INLINE_STYLE.STRIKETHROUGH],
+    [INLINE_STYLE.UNDERLINE]: DefaultDraftInlineStyle[INLINE_STYLE.UNDERLINE],
+
+    [INLINE_STYLE.CODE]: {
+        padding: '0.2em 0.3125em',
+        margin: '0',
+        fontSize: '85%',
+        backgroundColor: 'rgba(27, 31, 35, 0.05)',
+        fontFamily: FONT_FAMILY_MONOSPACE,
+        borderRadius: '3px',
+    },
+
+    [INLINE_STYLE.MARK]: {
+        backgroundColor: 'yellow',
+    },
+    [INLINE_STYLE.QUOTATION]: {
+        fontStyle: 'italic',
+    },
+    [INLINE_STYLE.SMALL]: {
+        fontSize: 'smaller',
+    },
+    [INLINE_STYLE.SAMPLE]: {
+        fontFamily: FONT_FAMILY_MONOSPACE,
+    },
+    [INLINE_STYLE.INSERT]: {
+        textDecoration: 'underline',
+    },
+    [INLINE_STYLE.DELETE]: {
+        textDecoration: 'line-through',
+    },
+    [INLINE_STYLE.KEYBOARD]: {
+        fontFamily: FONT_FAMILY_MONOSPACE,
+        padding: '3px 5px',
+        fontSize: '11px',
+        lineHeight: '10px',
+        color: '#444d56',
+        verticalAlign: 'middle',
+        backgroundColor: '#fafbfc',
+        border: 'solid 1px #c6cbd1',
+        borderBottomColor: '#959da5',
+        borderRadius: '3px',
+        boxShadow: 'inset 0 -1px 0 #959da5',
+    },
+    [INLINE_STYLE.SUPERSCRIPT]: {
+        fontSize: '80%',
+        verticalAlign: 'super',
+        lineHeight: '1',
+    },
+    [INLINE_STYLE.SUBSCRIPT]: {
+        fontSize: '80%',
+        verticalAlign: 'sub',
+        lineHeight: '1',
+    },
 };
 
 export const BR_TYPE = 'BR';