@pie-lib/editable-html 11.1.1 → 11.3.0-beta.0

package/src/plugins/toolbar/toolbar-buttons.jsx

@@ -1,17 +1,23 @@
 import React from 'react';
 import debug from 'debug';
-import injectSheet from 'react-jss';
+import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-const styles = () => ({
+const styles = (theme) => ({
   button: {
     color: 'grey',
     display: 'inline-flex',
     padding: '2px',
-    '& :hover': {
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    '&:hover': {
       color: 'black',
     },
+    '&:focus': {
+      outline: `2px solid ${theme.palette.grey[700]}`,
+    },
   },
   active: {
     color: 'black',
@@ -48,27 +54,47 @@ export class RawButton extends React.Component {
     onClick(e);
   };
 
+  onKeyDown = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      log('[onKeyDown]');
+      e.preventDefault();
+      const { onClick } = this.props;
+      onClick(e);
+    }
+  };
+
   render() {
-    const { active, classes, children, disabled, extraStyles } = this.props;
+    const { active, classes, children, disabled, extraStyles, ariaLabel } = this.props;
+
     const names = classNames(classes.button, {
       [classes.active]: active,
       [classes.disabled]: disabled,
     });
 
     return (
-      <div style={extraStyles} className={names} onMouseDown={this.onClick}>
+      <button
+        style={extraStyles}
+        className={names}
+        onMouseDown={this.onClick}
+        onKeyDown={this.onKeyDown}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        aria-pressed={active}
+        tabIndex={0}
+      >
         {children}
-      </div>
+      </button>
     );
   }
 }
 
-export const Button = injectSheet(styles())(RawButton);
+export const Button = withStyles(styles)(RawButton);
 
 export class RawMarkButton extends React.Component {
   static propTypes = {
     onToggle: PropTypes.func.isRequired,
     mark: PropTypes.string,
+    label: PropTypes.string.isRequired,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     classes: PropTypes.object.isRequired,
     active: PropTypes.bool,
@@ -83,15 +109,30 @@ export class RawMarkButton extends React.Component {
     this.props.onToggle(this.props.mark);
   };
 
+  onKeyDown = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.props.onToggle(this.props.mark);
+    }
+  };
+
   render() {
-    const { classes, children, active } = this.props;
+    const { classes, children, active, label } = this.props;
+
     const names = classNames(classes.button, active && classes.active);
     return (
-      <span className={names} onMouseDown={this.onToggle}>
+      <button
+        className={names}
+        onMouseDown={this.onToggle}
+        aria-pressed={active}
+        onKeyDown={this.onKeyDown}
+        aria-label={label}
+        tabIndex={0}
+      >
         {children}
-      </span>
+      </button>
     );
   }
 }
 
-export const MarkButton = injectSheet(styles())(RawMarkButton);
+export const MarkButton = withStyles(styles)(RawMarkButton);

package/src/plugins/toolbar/toolbar.jsx

@@ -14,16 +14,19 @@ import { findSingleNode, findParentNode } from '../utils';
 import { withStyles } from '@material-ui/core/styles';
 import DefaultToolbar from './default-toolbar';
 import { removeDialogs as removeCharacterDialogs } from '../characters';
+import { PIE_TOOLBAR__CLASS } from '../../constants';
 
 const log = debug('@pie-lib:editable-html:plugins:toolbar');
 
-const getCustomToolbar = (plugin, node, value, handleDone, onDataChange) => {
+const getCustomToolbar = (plugin, node, value, handleDone, getFocusedValue, onDataChange) => {
   if (!plugin) {
     return;
   }
+
   if (!plugin.toolbar) {
     return;
   }
+
   if (plugin.toolbar.CustomToolbarComp) {
     /**
      * Using a pre-defined Component should be preferred
@@ -34,7 +37,7 @@ const getCustomToolbar = (plugin, node, value, handleDone, onDataChange) => {
     return plugin.toolbar.CustomToolbarComp;
   } else if (typeof plugin.toolbar.customToolbar === 'function') {
     log('deprecated - use CustomToolbarComp');
-    return plugin.toolbar.customToolbar(node, value, handleDone, onDataChange);
+    return plugin.toolbar.customToolbar(node, value, handleDone, getFocusedValue, onDataChange);
   }
 };
 
@@ -59,8 +62,13 @@ export class Toolbar extends React.Component {
       alwaysVisible: PropTypes.bool,
       ref: PropTypes.func,
       showDone: PropTypes.bool,
+      minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      isHidden: PropTypes.bool,
     }),
     onDataChange: PropTypes.func,
+    doneButtonRef: PropTypes.func,
+    onBlur: PropTypes.func,
+    onFocus: PropTypes.func,
   };
 
   constructor(props) {
@@ -144,6 +152,9 @@ export class Toolbar extends React.Component {
       isFocused,
       onDone,
       toolbarRef,
+      doneButtonRef,
+      onBlur,
+      onFocus,
     } = this.props;
 
     const node = findSingleNode(value);
@@ -191,7 +202,7 @@ export class Toolbar extends React.Component {
       this.props.onDataChange(key, data);
     };
 
-    const CustomToolbar = getCustomToolbar(plugin, node, value, handleDone, this.props.onDataChange);
+    const CustomToolbar = getCustomToolbar(plugin, node, value, handleDone, getFocusedValue, this.props.onDataChange);
 
     const filteredPlugins = plugin && plugin.filterPlugins ? plugin.filterPlugins(node, plugins) : plugins;
 
@@ -213,21 +224,24 @@ export class Toolbar extends React.Component {
 
     const hasDoneButton = defaultToolbarShowDone || customToolbarShowDone;
 
-    const names = classNames(classes.toolbar, {
+    const names = classNames(classes.toolbar, PIE_TOOLBAR__CLASS, {
       [classes.toolbarWithNoDone]: !hasDoneButton,
       [classes.toolbarTop]: toolbarOpts.position === 'top',
       [classes.toolbarRight]: toolbarOpts.alignment === 'right',
       [classes.focused]: toolbarOpts.alwaysVisible || isFocused,
       [classes.autoWidth]: autoWidth,
       [classes.fullWidth]: !autoWidth,
+      [classes.hidden]: toolbarOpts.isHidden === true
     });
+    const customStyles = toolbarOpts.minWidth !== undefined ? { minWidth: toolbarOpts.minWidth } : {};
 
     return (
-      <div className={names} style={extraStyles} onClick={this.onClick} ref={toolbarRef}>
+      <div className={names} style={{ ...extraStyles, ...customStyles }} onClick={this.onClick} ref={toolbarRef}>
         {CustomToolbar ? (
           <CustomToolbar
             node={node}
             value={value}
+            getFocusedValue={getFocusedValue}
             onToolbarDone={this.onToolbarDone}
             onDataChange={handleDataChange}
             pluginProps={pluginProps}
@@ -243,6 +257,9 @@ export class Toolbar extends React.Component {
             onDone={handleDone}
             deletable={deletable}
             isHtmlMode={toolbarOpts.isHtmlMode}
+            onFocus={onFocus}
+            doneButtonRef={doneButtonRef}
+            onBlur={onBlur}
           />
         )}
 
@@ -259,7 +276,7 @@ export class Toolbar extends React.Component {
               <Delete />
             </IconButton>
           )}
-          {customToolbarShowDone && <DoneButton onClick={handleDone} />}
+          {customToolbarShowDone && <DoneButton doneButtonRef={doneButtonRef} onClick={handleDone} />}
         </div>
       </div>
     );
@@ -279,7 +296,9 @@ const style = {
     boxShadow:
       '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
     boxSizing: 'border-box',
-    display: 'none',
+    display: 'flex',
+    opacity: 0,
+    pointerEvents: 'none'
   },
   toolbarWithNoDone: {
     minWidth: '265px',
@@ -293,11 +312,15 @@ const style = {
   fullWidth: {
     width: '100%',
   },
+  hidden: {
+    visibility: 'hidden'
+  },
   autoWidth: {
     width: 'auto',
   },
   focused: {
-    display: 'flex',
+    opacity: 1,
+    pointerEvents: 'auto'
   },
   iconRoot: {
     width: '28px',

package/src/serialization.jsx

@@ -2,6 +2,7 @@ import Html from 'slate-html-serializer';
 import React from 'react';
 import debug from 'debug';
 import { object as toStyleObject } from 'to-style';
+import isEmpty from 'lodash/isEmpty';
 
 import { serialization as imgSerialization } from './plugins/image';
 import { serialization as mathSerialization } from './plugins/math';
@@ -10,29 +11,10 @@ import { serialization as listSerialization } from './plugins/list';
 import { serialization as tableSerialization } from './plugins/table';
 import { serialization as responseAreaSerialization } from './plugins/respArea';
 import { Mark, Value } from 'slate';
+import { BLOCK_TAGS } from './block-tags';
 
 const log = debug('@pie-lib:editable-html:serialization');
 
-/**
- * Tags to blocks.
- *
- * @type {Object}
- */
-
-export const BLOCK_TAGS = {
-  div: 'div',
-  span: 'span',
-  p: 'paragraph',
-  blockquote: 'quote',
-  pre: 'code',
-  h1: 'heading-one',
-  h2: 'heading-two',
-  h3: 'heading-three',
-  h4: 'heading-four',
-  h5: 'heading-five',
-  h6: 'heading-six',
-};
-
 /**
  * Tags to marks.
  *
@@ -46,6 +28,10 @@ const MARK_TAGS = {
   s: 'strikethrough',
   code: 'code',
   strong: 'bold',
+  blockquote: 'blockquote',
+  h3: 'h3',
+  sup: 'sup',
+  sub: 'sub',
 };
 
 export const parseStyleString = (s) => {
@@ -83,7 +69,7 @@ const attributesToMap = (el) => (acc, attribute) => {
   return acc;
 };
 
-const attributes = ['border', 'cellpadding', 'cellspacing', 'class', 'style'];
+const attributes = ['border', 'cellpadding', 'cellspacing', 'class', 'style', 'align'];
 
 /**
  * Serializer rules.
@@ -134,23 +120,128 @@ const blocks = {
   },
 };
 
+export const INLINE_TAGS = {
+  span: 'span',
+};
+
+const inlines = {
+  deserialize(el, next) {
+    log('[inlines:deserialize] inline: ', el);
+    const inlineTag = INLINE_TAGS[el.tagName.toLowerCase()];
+    if (!inlineTag) return;
+    log('[inlines:deserialize] inline: ', inlineTag);
+
+    if (el.childNodes.length === 1) {
+      const cn = el.childNodes[0];
+      if (cn && cn.tagName && cn.tagName.toLowerCase() === inlineTag) {
+        log('[we have a child node of the same]...');
+        return;
+      }
+    }
+
+    return {
+      object: 'inline',
+      type: inlineTag,
+      /**
+       * Here for rendering styles for all inline elements
+       */
+      data: { attributes: attributes.reduce(attributesToMap(el), {}) },
+      nodes: next(el.childNodes),
+    };
+  },
+  serialize: (object, children) => {
+    if (object.object !== 'inline') return;
+
+    const jsonData = object.data.toJSON();
+
+    log('[inlines:serialize] object: ', object, children);
+    let key;
+
+    for (key in INLINE_TAGS) {
+      if (INLINE_TAGS[key] === object.type) {
+        const Tag = key;
+
+        return <Tag {...jsonData.attributes}>{children}</Tag>;
+      }
+    }
+  },
+};
+
+export const extraCSSRulesOpts = {};
+
+const STYLES_MAP = {
+  h3: {
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+  },
+  blockquote: {
+    background: '#f9f9f9',
+    borderLeft: '5px solid #ccc',
+    margin: '1.5em 10px',
+    padding: '.5em 10px',
+  },
+};
+
+const reactToHTMLAttributesMap = {
+  class: 'className',
+};
+
 const marks = {
   deserialize(el, next) {
     const mark = MARK_TAGS[el.tagName.toLowerCase()];
-    if (!mark) return;
+    const elClasses = el.getAttribute('class') || '';
+    const hasCSSRule = (extraCSSRulesOpts?.names || []).find((name) => elClasses?.includes(name));
+
+    if (!mark && !hasCSSRule) {
+      return;
+    }
+
     log('[deserialize] mark: ', mark);
+    const attrs = attributes.reduce(attributesToMap(el), {});
+    const data = isEmpty(attrs) ? undefined : { attributes: attrs };
+
     return {
       object: 'mark',
-      type: mark,
+      type: hasCSSRule ? 'css' : mark,
+      /**
+       * Here for rendering styles for all elements
+       */
+      data,
       nodes: next(el.childNodes),
     };
   },
   serialize(object, children) {
+    const jsonData = object.data?.toJSON() || {};
+    const elClasses = jsonData.attributes?.class || '';
+    const hasCSSRule = (extraCSSRulesOpts?.names || []).find((name) => elClasses?.includes(name));
+
+    if (hasCSSRule) {
+      const htmlAttrs = Object.keys(jsonData.attributes).reduce((obj, key) => {
+        obj[reactToHTMLAttributesMap[key] || key] = jsonData.attributes[key];
+        return obj;
+      }, {});
+
+      return <span {...htmlAttrs}>{children}</span>;
+    }
+
     if (Mark.isMark(object)) {
       for (var key in MARK_TAGS) {
         if (MARK_TAGS[key] === object.type) {
           const Tag = key;
-          return <Tag>{children}</Tag>;
+          const additionalStyles = STYLES_MAP[Tag];
+
+          if (additionalStyles) {
+            if (!jsonData.attributes) {
+              jsonData.attributes = {};
+            }
+
+            jsonData.attributes.style = {
+              ...jsonData.attributes.style,
+              ...additionalStyles,
+            };
+          }
+
+          return <Tag {...jsonData.attributes}>{children}</Tag>;
         }
       }
     }
@@ -224,6 +315,7 @@ const RULES = [
   tableSerialization,
   responseAreaSerialization,
   TEXT_RULE,
+  inlines,
   blocks,
   marks,
 ];
@@ -247,7 +339,11 @@ function defaultParseHtml(html) {
   var n = textNodes.nextNode();
 
   while (n) {
-    if (allWhitespace(n) || n.nodeValue === '\u200B') {
+    const isWhiteSpace = allWhitespace(n);
+    const isNotNearMarkup =
+      !MARK_TAGS[n.nextSibling?.tagName?.toLowerCase()] && !MARK_TAGS[n.previousSibling?.tagName?.toLowerCase()];
+
+    if ((isWhiteSpace && isNotNearMarkup) || n.nodeValue === '\u200B') {
       n.parentNode.removeChild(n);
     }
     n = textNodes.nextNode();
@@ -388,46 +484,125 @@ const reduceRedundantNewLineCharacters = (markup) => {
   return markup;
 };
 
-const wrapHtmlProperly = (markup) => {
-  const el = document.createElement('div');
+/**
+ * Makes sure that the html provided respects the schema
+ * rules for the slate editor.
+ * @param markup
+ * @returns {string}
+ */
+const fixHtmlCode = (markup) => {
+  const wrapperEl = document.createElement('div');
 
-  el.innerHTML = markup;
+  wrapperEl.innerHTML = markup;
 
   /**
    * DIV elements that are at the same level as paragraphs
    * are replaced with P elements for normalizing purposes
-   * @param el
+   * @param child
+   */
+  const fixParagraphs = (child) => {
+    const p = document.createElement('p');
+
+    p.innerHTML = child.innerHTML;
+
+    Array.from(child.attributes).forEach((attr) => {
+      p.setAttribute(attr.name, attr.value);
+    });
+    child.replaceWith(p);
+  };
+
+  /**
+   * @summary Makes sure that tables are placed in the root document.
+   * @description This function removes the tables from the nodes that are
+   * placed inside the root element and places them exactly near
+   * the parent element.
+   * @param tableArray
    */
+  const fixTables = (tableArray) => {
+    tableArray.forEach((el) => {
+      const { index, child, parent } = el;
+      const nodesBefore = [];
+      const nodesAfter = [];
+      const allNodes = Array.from(parent.childNodes);
+      let i;
+
+      for (i = 0; i < allNodes.length; i++) {
+        const node = allNodes[i];
+
+        if (i < index) {
+          nodesBefore.push(node);
+        } else if (i > index) {
+          nodesAfter.push(node);
+        }
+      }
+
+      // creating the element that is going to be placed instead of the parent
+      const beforeEl = document.createElement(parent.nodeName);
+
+      beforeEl.append(...nodesBefore);
+
+      // replacing parent with the beforeElement
+      parent.replaceWith(beforeEl);
+
+      // adding the table right after the before element
+      beforeEl.after(child);
+
+      // creating the element that is going to be placed after the table
+      const afterEl = document.createElement(parent.nodeName);
+
+      afterEl.append(...nodesAfter);
+
+      // adding the after element near the table
+      child.after(afterEl);
+    });
+  };
+
+  const emptyBlockCheck = (node) =>
+    (node.nodeName === 'DIV' || node.nodeName === 'P' || node.nodeName === 'LI') && node.childNodes.length === 0;
+
   const parseNode = (el) => {
-    const childArray = Array.from(el.children);
+    const childArray = Array.from(el.childNodes);
     const hasParagraphs = childArray.find((child) => child.nodeName === 'P');
+    const tables = [];
 
-    childArray.forEach((child) => {
+    childArray.forEach((child, index) => {
       // removing empty blocks
-      if ((child.nodeName === 'DIV' || child.nodeName === 'P') && child.childNodes.length === 0) {
+      if (emptyBlockCheck(child)) {
         child.remove();
         return;
       }
 
       if (hasParagraphs && child.nodeName === 'DIV') {
-        const p = document.createElement('p');
+        fixParagraphs(child);
+      }
 
-        p.innerHTML = child.innerHTML;
-        child.replaceWith(p);
+      if (wrapperEl !== el && child.nodeName === 'TABLE') {
+        // we don't need to fix tables in the root element
+        tables.push({
+          index,
+          child,
+          parent: el,
+        });
       }
 
       parseNode(child);
     });
+
+    if (tables.length) {
+      fixTables(tables);
+    }
   };
 
-  parseNode(el);
+  parseNode(wrapperEl);
 
-  return el.innerHTML;
+  return wrapperEl.innerHTML;
 };
 
+export const handleHtml = (html) => fixHtmlCode(reduceRedundantNewLineCharacters(reduceMultipleBrs(html)));
+
 export const htmlToValue = (html) => {
   try {
-    return serializer.deserialize(wrapHtmlProperly(reduceRedundantNewLineCharacters(reduceMultipleBrs(html))));
+    return serializer.deserialize(handleHtml(html));
   } catch (e) {
     // eslint-disable-next-line no-console
     console.log("Couldn't parse html: ", e);

package/README.md

@@ -1,45 +0,0 @@
-# editable-html
-
-`editable-html` is an inline HTML editor, based on [`slate`](https://github.com/ianstormtaylor/slate), for use within PIE configuration panels.
-
-> It's pretty rough at the moment (UI + logic), but can't spend too much time on it right now.
-
-## Demo
-
-```bash
-npm install
-cd demo
-../node_modules/.bin/webpack-dev-server --hot --inline
-# go to http://localhost:8080
-```
-
-## Usage
-
-Install:
-
-```bash
-npm install --save @pie-lib/editable-html
-```
-
-Import:
-
-```js
-import EditableHTML from '@pie-lib/editable-html';
-```
-
-Declare:
-
-```jsx
-<EditableHTML onChange={this.htmlChanged.bind(this)} markup={markup} />
-```
-
-### In production
-
-If you are running in production and have an external `React` and `ReactDOM`, you will also need to include `ReactDOMServer`.
-
-```html
-  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
-  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
-  <!-- this must be added -->
-  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom-server.browser.production.min.js"></script>
-```

package/deploy.sh

@@ -1,16 +0,0 @@
-#!/usr/bin/env bash
-
-rm -fr demo/.git
-
-echo "did you run webpack?"
-
-cd demo
-
-
-
-git init
-git add .
-git commit . -m "commit" 
-git remote add heroku git@heroku.com:editable-html-demo.git
-git push --force heroku master
-