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

package/src/index.jsx

@@ -1,16 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Editor, { DEFAULT_PLUGINS, ALL_PLUGINS } from './editor';
-import { htmlToValue, valueToHtml, reduceMultipleBrs } from './serialization';
+import { extraCSSRulesOpts, htmlToValue, valueToHtml, reduceMultipleBrs } from './serialization';
 import { parseDegrees } from './parse-html';
+import constants from './constants';
 import debug from 'debug';
 import { Range } from 'slate';
 
 const log = debug('@pie-lib:editable-html');
-/**
- * Export lower level Editor and serialization functions.
- */
-export { htmlToValue, valueToHtml, Editor, DEFAULT_PLUGINS, ALL_PLUGINS };
 
 /**
  * Wrapper around the editor that exposes a `markup` and `onChange(markup:string)` api.
@@ -26,6 +23,10 @@ export default class EditableHtml extends React.Component {
     markup: PropTypes.string.isRequired,
     allowValidation: PropTypes.bool,
     toolbarOpts: PropTypes.object,
+    extraCSSRules: PropTypes.shape({
+      names: PropTypes.arrayOf(PropTypes.string),
+      rules: PropTypes.string,
+    }),
   };
 
   static defaultProps = {
@@ -35,6 +36,11 @@ export default class EditableHtml extends React.Component {
 
   constructor(props) {
     super(props);
+
+    if (props.extraCSSRules) {
+      Object.assign(extraCSSRulesOpts, this.props.extraCSSRules);
+    }
+
     const v = htmlToValue(props.markup);
     this.state = {
       value: v,
@@ -48,7 +54,7 @@ export default class EditableHtml extends React.Component {
     }
 
     const v = htmlToValue(props.markup);
-    const current = htmlToValue(props.markup);
+    const current = htmlToValue(this.props.markup);
 
     if (v.equals && !v.equals(current)) {
       this.setState({ value: v });
@@ -69,13 +75,11 @@ export default class EditableHtml extends React.Component {
     const html = valueToHtml(value);
     const htmlParsed = parseDegrees(html);
 
-    log('value as html: ', html);
-
-    if (html !== this.props.markup) {
+    if (html !== this.props.markup && this.props.onChange) {
       this.props.onChange(htmlParsed);
     }
 
-    if (done) {
+    if (done && this.props.onDone) {
       this.props.onDone(htmlParsed);
     }
   };
@@ -151,3 +155,8 @@ export default class EditableHtml extends React.Component {
     );
   }
 }
+
+/**
+ * Export lower level Editor and serialization functions.
+ */
+export { htmlToValue, valueToHtml, Editor, DEFAULT_PLUGINS, ALL_PLUGINS, constants };

package/src/plugins/characters/index.jsx

@@ -9,6 +9,7 @@ import CustomPopper from './custom-popper';
 import { insertSnackBar } from '../respArea/utils';
 import { characterIcons, spanishConfig, specialConfig } from './utils';
 import PropTypes from 'prop-types';
+
 const log = debug('@pie-lib:editable-html:plugins:characters');
 
 const removePopOvers = () => {
@@ -131,6 +132,8 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
 
   const el = (
     <PureToolbar
+      keyPadCharacterRef={opts.keyPadCharacterRef}
+      setKeypadInteraction={opts.setKeypadInteraction}
       autoFocus
       noDecimal
       hideInput
@@ -219,8 +222,8 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
 const CharacterIcon = ({ letter }) => (
   <div
     style={{
-      fontSize: '25px',
-      lineHeight: '15px',
+      fontSize: '24px',
+      lineHeight: '24px',
     }}
   >
     {letter}
@@ -233,15 +236,20 @@ CharacterIcon.propTypes = {
 
 export default function CharactersPlugin(opts) {
   removeDialogs();
+
   return {
     name: 'characters',
     toolbar: {
       icon: <CharacterIcon letter={opts.characterIcon || characterIcons[opts.language] || 'ñ'} />,
+      ariaLabel: `${opts.language} characters Toolbar`,
       onClick: (value, onChange, getFocusedValue) => {
         const editorDOM = document.querySelector(`[data-key="${value.document.key}"]`);
         let valueToUse = value;
+
         const callback = (char, focus) => {
-          valueToUse = getFocusedValue();
+          if (getFocusedValue) {
+            valueToUse = getFocusedValue() || valueToUse;
+          }
 
           if (char) {
             const change = valueToUse.change().insertTextByKey(valueToUse.anchorKey, valueToUse.anchorOffset, char);

package/src/plugins/characters/utils.js

@@ -226,10 +226,10 @@ export const specialConfig = {
     ],
     [
       {
-        unicode: 'U+00A0',
-        description: 'NO-BREAK SPACE',
-        write: String.fromCodePoint('0x00A0'),
-        label: ' ',
+        unicode: 'U+200A',
+        description: 'HAIR SPACE',
+        write: String.fromCodePoint('0x200A'),
+        label: ' ',
       },
       {
         unicode: 'U+00A7',
@@ -333,10 +333,10 @@ export const specialConfig = {
     ],
     [
       {
-        unicode: 'U+200A',
-        description: 'HAIR SPACE',
-        write: String.fromCodePoint('0x200A'),
-        label: ' ',
+        unicode: 'U+00A0',
+        description: 'NO-BREAK SPACE',
+        write: String.fromCodePoint('0x00A0'),
+        label: ' ',
       },
       {
         unicode: 'U+2022',
@@ -390,10 +390,10 @@ export const specialConfig = {
     ],
     [
       {
-        unicode: 'U+0009',
-        description: 'TAB',
-        write: String.fromCodePoint('0x0009'),
-        label: 'TAB',
+        unicode: 'U+2003',
+        description: 'EM SPACE',
+        write: String.fromCodePoint('0x2003'),
+        label: ' ',
       },
       {
         unicode: 'U+25E6',

package/src/plugins/css/icons/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = (theme) => ({
+  icon: {
+    fontFamily: 'Cerebri Sans, Arial, sans-serif',
+    fontSize: theme.typography.fontSize,
+    fontWeight: 'bold',
+    lineHeight: '14px',
+    position: 'relative',
+    whiteSpace: 'nowrap',
+  },
+});
+
+const CssIcon = ({ classes }) => <div className={classes.icon}>CSS</div>;
+
+export default withStyles(styles)(CssIcon);

package/src/plugins/css/index.jsx

@@ -0,0 +1,346 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import List from '@material-ui/core/List';
+import { Leaf, Mark } from 'slate';
+import Immutable from 'immutable';
+import ListItem from '@material-ui/core/ListItem';
+import isEmpty from 'lodash/isEmpty';
+import debug from 'debug';
+import CssIcon from './icons';
+
+const log = debug('@pie-lib:editable-html:plugins:characters');
+
+export const removeDialogs = () => {
+  const prevDialogs = document.querySelectorAll('.insert-css-dialog');
+
+  log('[characters:removeDialogs]');
+  prevDialogs.forEach((s) => s.remove());
+};
+
+const insertDialog = ({ editorDOM, value, callback, opts, textNode, parentNode }) => {
+  const newEl = document.createElement('div');
+
+  log('[characters:insertDialog]');
+
+  removeDialogs();
+
+  newEl.className = 'insert-css-dialog';
+
+  let popoverEl;
+
+  const closePopOver = () => {
+    if (popoverEl) {
+      popoverEl.remove();
+    }
+  };
+
+  let firstCallMade = false;
+
+  const listener = (e) => {
+    // this will be triggered right after setting it because
+    // this toolbar is added on the mousedown event
+    // so right after mouseup, the click will be triggered
+    if (firstCallMade) {
+      const focusIsInModals = newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));
+      const focusIsInEditor = editorDOM.contains(e.target);
+
+      if (!(focusIsInModals || focusIsInEditor)) {
+        handleClose();
+      }
+    } else {
+      firstCallMade = true;
+    }
+  };
+
+  const handleClose = () => {
+    callback(undefined, true);
+    newEl.remove();
+    closePopOver();
+    document.body.removeEventListener('click', listener);
+  };
+
+  const handleChange = (name) => {
+    callback(name, true);
+    newEl.remove();
+    closePopOver();
+    document.body.removeEventListener('click', listener);
+  };
+
+  const selectedText = textNode.text.slice(value.selection.anchorOffset, value.selection.focusOffset);
+  const parentNodeClass = parentNode?.data?.get('attributes')?.class;
+  const createHTML = (name) => {
+    let html = `<span class="${name}">${selectedText}</span>`;
+
+    if (parentNode) {
+      let tag;
+
+      if (parentNode?.object === 'inline') {
+        tag = 'span';
+      }
+
+      if (parentNode?.object === 'block') {
+        tag = 'div';
+      }
+
+      html = `<${tag} class="${parentNodeClass}">${parentNode.text.slice(
+        0,
+        value.selection.anchorOffset,
+      )}${html}${parentNode.text.slice(value.selection.focusOffset)}</${tag}>`;
+    }
+
+    return html;
+  };
+
+  const el = (
+    <div
+      style={{ background: 'white', height: 500, padding: 20, overflow: 'hidden', display: 'flex', flexFlow: 'column' }}
+    >
+      <h2>Please choose a css class</h2>
+      {parentNodeClass && <div>The current parent has this class {parentNodeClass}</div>}
+      <List component="nav" style={{ overflow: 'scroll' }}>
+        {opts.names.map((name, i) => (
+          <ListItem key={`rule-${i}`} button onClick={() => handleChange(name)}>
+            <div style={{ marginRight: 20 }}>{name}</div>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: createHTML(name),
+              }}
+            />
+          </ListItem>
+        ))}
+      </List>
+    </div>
+  );
+
+  ReactDOM.render(el, newEl, () => {
+    const cursorItem = document.querySelector(`[data-key="${value.anchorKey}"]`);
+
+    if (cursorItem) {
+      const bodyRect = editorDOM.parentElement.parentElement.parentElement.getBoundingClientRect();
+      const boundRect = cursorItem.getBoundingClientRect();
+
+      editorDOM.parentElement.parentElement.parentElement.appendChild(newEl);
+
+      // when height of toolbar exceeds screen - can happen in scrollable contexts
+      let additionalTopOffset = 0;
+      if (boundRect.y < newEl.offsetHeight) {
+        additionalTopOffset = newEl.offsetHeight - boundRect.y + 10;
+      }
+
+      newEl.style.maxWidth = '500px';
+      newEl.style.position = 'absolute';
+      newEl.style.top = 0;
+      newEl.style.zIndex = 99999;
+
+      const leftValue = `${boundRect.left + Math.abs(bodyRect.left) + cursorItem.offsetWidth + 10}px`;
+
+      const rightValue = `${boundRect.x}px`;
+
+      newEl.style.left = leftValue;
+
+      const leftAlignedWidth = newEl.offsetWidth;
+
+      newEl.style.left = 'unset';
+      newEl.style.right = rightValue;
+
+      const rightAlignedWidth = newEl.offsetWidth;
+
+      newEl.style.left = 'unset';
+      newEl.style.right = 'unset';
+
+      if (leftAlignedWidth >= rightAlignedWidth) {
+        newEl.style.left = leftValue;
+      } else {
+        newEl.style.right = rightValue;
+      }
+
+      document.body.addEventListener('click', listener);
+    }
+  });
+};
+
+const findParentNodeInfo = (value, textNode) => {
+  const closestInline = value.document.getClosestInline(value.selection.endKey);
+  const closestBlock = value.document.getClosestBlock(value.selection.endKey);
+  let nodeToUse = null;
+
+  if (closestInline?.nodes?.find((n) => n.key === textNode.key)) {
+    nodeToUse = closestInline;
+  }
+
+  if (closestBlock?.nodes?.find((n) => n.key === textNode.key)) {
+    nodeToUse = closestBlock;
+  }
+
+  return nodeToUse;
+};
+
+/**
+ * Find the node that has a class attribute and return it.
+ * Keeping this in case the implementation of classes needs to be changed
+ * @param value
+ * @param opts
+ * @returns {*}
+ */
+const getNodeWithClass = (value, opts) => {
+  const blocksAtRange = value.document.getBlocksAtRangeAsArray(value.selection);
+  const inlinesAtRange = value.document.getInlinesAtRangeAsArray(value.selection);
+  const blockData = blocksAtRange[0]?.data.toJSON() || {};
+  const inlineData = inlinesAtRange[0]?.data.toJSON() || {};
+
+  if (!blockData.attributes?.class && !inlineData.attributes?.class) {
+    return null;
+  }
+
+  const { class: blockClass } = blockData.attributes || {};
+  const { class: inlineClass } = inlineData.attributes || {};
+  const inlineHasClass = opts.names.find((name) => inlineClass.includes(name));
+
+  if (inlineHasClass) {
+    return inlinesAtRange[0];
+  }
+
+  const blockHasClass = opts.names.find((name) => blockClass.includes(name));
+
+  if (blockHasClass) {
+    return blocksAtRange[0];
+  }
+
+  return null;
+};
+
+/**
+ * Plugin in order to be able to add a css clas that is provided through the model
+ * on a text element. Works like a mark (bold, italic etc.).
+ * @param opts
+ * @constructor
+ */
+export default function CSSPlugin(opts) {
+  const plugin = {
+    name: 'extraCSSRules',
+    toolbar: {
+      isMark: true,
+      icon: <CssIcon />,
+      ariaLabel: 'CSS editor',
+      type: 'css',
+      onToggle: (change) => {
+        const type = 'css';
+        const hasMark = change.value.activeMarks.find((entry) => {
+          return entry.type === type;
+        });
+
+        if (hasMark) {
+          change.removeMark(hasMark);
+        } else {
+          const newMark = Mark.create(type);
+
+          change.addMark(newMark);
+        }
+
+        return change;
+      },
+      onClick: (value, onChange, getFocusedValue) => {
+        const type = 'css';
+        const hasMark = value.activeMarks.find((entry) => {
+          return entry.type === type;
+        });
+
+        let change = value.change();
+
+        if (hasMark) {
+          change.removeMark(hasMark);
+          onChange(change);
+          return;
+        }
+
+        // keeping this if implementation needs to be changed to regular blocks instead of marks
+        // let nodeWithClass = getNodeWithClass(value, opts);
+        //
+        // if (nodeWithClass) {
+        //   const nodeAttributes = nodeWithClass.data.get('attributes');
+        //
+        //   opts.names.forEach((name) => {
+        //     if (nodeAttributes.class.includes(name)) {
+        //       nodeAttributes.class = nodeAttributes.class.replace(name, '');
+        //     }
+        //   });
+        //
+        //   // keeping only one space between classes
+        //   nodeAttributes.class = nodeAttributes.class.replace(/ +/g, ' ');
+        //
+        //   nodeWithClass.data.set('attributes', nodeAttributes);
+        //
+        //   let change = value.change();
+        //   change.replaceNodeByKey(nodeWithClass.key, nodeWithClass);
+        //
+        //   onChange(change);
+        //   return;
+        // }
+
+        const editorDOM = document.querySelector(`[data-key="${value.document.key}"]`);
+        let valueToUse = value;
+
+        const callback = (className, focus) => {
+          if (getFocusedValue) {
+            valueToUse = getFocusedValue() || valueToUse;
+          }
+
+          if (className) {
+            let change = valueToUse.change();
+
+            const newMark = Mark.create({
+              object: 'mark',
+              type: 'css',
+              data: {
+                attributes: {
+                  class: className,
+                },
+              },
+            });
+
+            change.addMark(newMark);
+            // keeping this if implementation needs to be changed to regular blocks instead of marks
+            // change = change.wrapInline({ type: 'span', data: { attributes: { class: className } } });
+            //
+            // // change = change.splitBlockAtRange(adaptedRange);
+            // //
+            // // const newBlock = change.value.document.getFurthestBlock(change.value.selection.endKey);
+            // //
+            // // change = change.setNodeByKey(newBlock.key, { data: { attributes: { class: className } } });
+            //
+            // valueToUse = change.value;
+            // log('[characters:insert]: ', value);
+            onChange(change);
+          }
+
+          log('[characters:click]');
+
+          if (focus) {
+            setTimeout(() => {
+              if (editorDOM) {
+                editorDOM.focus();
+              }
+            }, 0);
+          }
+        };
+        const textNode = value.document.getTextsAtRangeAsArray(value.selection)[0];
+
+        if (textNode) {
+          const parentNode = findParentNodeInfo(value, textNode, opts);
+
+          insertDialog({ editorDOM, value: valueToUse, callback, opts, textNode, parentNode });
+        }
+      },
+    },
+    renderMark(props) {
+      if (props.mark.type === 'css') {
+        const { data } = props.mark || {};
+        const jsonData = data?.toJSON() || {};
+
+        return <span {...jsonData.attributes}>{props.children}</span>;
+      }
+    },
+  };
+
+  return plugin;
+}

package/src/plugins/customPlugin/index.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { htmlToValue } from '../../serialization';
+
+// We're possibly going to have to support content types, so starting it as an enum
+export const CONTENT_TYPE = {
+  FRAGMENT: 'FRAGMENT',
+};
+
+// We're possibly going to have to support multiple icon types, so starting it as an enum
+export const ICON_TYPE = {
+  SVG: 'SVG',
+};
+
+const getIcon = (customPluginProps) => {
+  const svg = customPluginProps.icon;
+
+  switch (customPluginProps.iconType) {
+    case ICON_TYPE.SVG:
+      return <span style={{ width: 28, height: 28 }} dangerouslySetInnerHTML={{ __html: svg }} />;
+    default:
+      return <span>{customPluginProps.iconAlt}</span>;
+  }
+};
+
+export default function CustomPlugin(type, customPluginProps) {
+  const toolbar = {
+    icon: getIcon(customPluginProps),
+    onClick: (value, onChange, getFocusedValue) => {
+      const editorDOM = document.querySelector(`[data-key="${value.document.key}"]`);
+      let valueToUse = value;
+      const callback = ({ customContent, contentType }, focus) => {
+        valueToUse = getFocusedValue();
+
+        switch (contentType) {
+          case CONTENT_TYPE.FRAGMENT:
+          default: {
+            const contentValue = htmlToValue(customContent);
+            const change = valueToUse.change().insertFragment(contentValue.document);
+
+            valueToUse = change.value;
+            onChange(change);
+
+            break;
+          }
+        }
+
+        if (focus) {
+          if (editorDOM) {
+            editorDOM.focus();
+          }
+        }
+      };
+
+      // NOTE: the emitted event (custom event named by client) will be suffixed with "PIE-"
+      window.dispatchEvent(
+        new CustomEvent(`PIE-${customPluginProps.event}`, {
+          detail: {
+            ...customPluginProps,
+            callback,
+          },
+        }),
+      );
+    },
+    supports: (node) => node.object === 'inline' && node.type === type,
+  };
+
+  return {
+    name: type,
+    toolbar,
+    renderNode(props) {
+      if (props.node.type === type) {
+        const { node } = props;
+        const { data } = node;
+        const jsonData = data.toJSON();
+        const { customContent, contentType } = jsonData;
+
+        switch (contentType) {
+          case CONTENT_TYPE.FRAGMENT:
+          default:
+            return customContent;
+        }
+      }
+    },
+  };
+}

package/src/plugins/html/index.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 import HtmlModeIcon from './icons';
 import { htmlToValue, valueToHtml } from './../../serialization';
 
-const toggleToRichText = (value, onChange) => {
+const toggleToRichText = (value, onChange, dismiss) => {
   const plainText = value.document.text;
-  const slateValue = htmlToValue(plainText);
+  const slateValue = dismiss ? value : htmlToValue(plainText);
 
   const change = value
     .change()
@@ -15,15 +15,17 @@ const toggleToRichText = (value, onChange) => {
 };
 
 export default function HtmlPlugin(opts) {
-  const { isHtmlMode, isEdited, toggleHtmlMode, handleAlertDialog } = opts;
+  const { isHtmlMode, isEditedInHtmlMode, toggleHtmlMode, handleAlertDialog, currentValue } = opts;
 
   const handleHtmlModeOn = (value, onChange) => {
     const dialogProps = {
       title: 'Warning',
-      text: 'Returning to rich text mode may cause edits to be lost.',
+      text: 'Returning to rich text mode without saving will cause edits to be lost.',
+      onConfirmText: 'Dismiss changes',
+      onCloseText: 'Continue Editing',
       onConfirm: () => {
         handleAlertDialog(false);
-        toggleToRichText(value, onChange);
+        toggleToRichText(currentValue, onChange, true);
         toggleHtmlMode();
       },
       onClose: () => {
@@ -47,13 +49,14 @@ export default function HtmlPlugin(opts) {
     name: 'html',
     toolbar: {
       icon: <HtmlModeIcon isHtmlMode={isHtmlMode} />,
+      ariaLabel: 'Html editor',
       buttonStyles: {
         margin: '0 20px 0 auto',
       },
       type: 'html',
       onClick: (value, onChange) => {
         if (isHtmlMode) {
-          if (isEdited) {
+          if (isEditedInHtmlMode) {
             handleHtmlModeOn(value, onChange);
           } else {
             toggleToRichText(value, onChange);