@pie-lib/editable-html-tip-tap 1.0.0

package/src/old-index.jsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Editor, { DEFAULT_PLUGINS, ALL_PLUGINS } from './editor';
+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');
+
+/**
+ * Wrapper around the editor that exposes a `markup` and `onChange(markup:string)` api.
+ * Because of the mismatch between the markup and the `Value` we need to convert the incoming markup to a value and
+ * compare it. TODO: This is an interim fix, we'll need to strip back `Editor` and look how best to maintain the
+ * `markup` api whilst avoiding the serialization mismatch. We should be making better use of schemas w/ normalize.
+ */
+export default class EditableHtml extends React.Component {
+  static propTypes = {
+    error: PropTypes.any,
+    onChange: PropTypes.func.isRequired,
+    onDone: PropTypes.func,
+    markup: PropTypes.string.isRequired,
+    allowValidation: PropTypes.bool,
+    toolbarOpts: PropTypes.object,
+    extraCSSRules: PropTypes.shape({
+      names: PropTypes.arrayOf(PropTypes.string),
+      rules: PropTypes.string,
+    }),
+  };
+
+  static defaultProps = {
+    onDone: () => {},
+    allowValidation: false,
+  };
+
+  constructor(props) {
+    super(props);
+
+    if (props.extraCSSRules) {
+      Object.assign(extraCSSRulesOpts, this.props.extraCSSRules);
+    }
+
+    const v = htmlToValue(props.markup);
+    this.state = {
+      value: v,
+    };
+  }
+
+  // eslint-disable-next-line react/no-deprecated
+  componentWillReceiveProps(props) {
+    if (!props.allowValidation && props.markup === this.props.markup) {
+      return;
+    }
+
+    const v = htmlToValue(props.markup);
+    const current = htmlToValue(this.props.markup);
+
+    if (v.equals && !v.equals(current)) {
+      this.setState({ value: v });
+    }
+  }
+
+  runSerializationOnMarkup = () => {
+    if (!this.props.markup) {
+      return;
+    }
+
+    const v = htmlToValue(reduceMultipleBrs(this.props.markup));
+
+    this.setState({ value: v });
+  };
+
+  onChange = (value, done) => {
+    const html = valueToHtml(value);
+    const htmlParsed = parseDegrees(html);
+
+    if (htmlParsed !== this.props.markup && this.props.onChange) {
+      this.props.onChange(htmlParsed);
+    }
+
+    if (done && this.props.onDone) {
+      this.props.onDone(htmlParsed);
+    }
+  };
+
+  focus = (position, node, select = false) => {
+    if (this.editorRef) {
+      this.editorRef.change((c) => {
+        const lastText = node ? c.value.document.getNextText(node.key) : c.value.document.getLastText();
+        const editorDOM = document.querySelector(`[data-key="${this.editorRef.value.document.key}"]`);
+
+        if (editorDOM !== document.activeElement) {
+          document.activeElement.blur();
+        }
+
+        c.focus();
+
+        if (position === 'end' && lastText) {
+          c.moveFocusTo(lastText.key, lastText.text?.length).moveAnchorTo(lastText.key, lastText.text?.length);
+          if (select) {
+            const range = Range.fromJSON({
+              anchorKey: lastText.key,
+              anchorOffset: 0,
+              focusKey: lastText.key,
+              focusOffset: lastText.text?.length,
+              isFocused: true,
+              isBackward: false,
+            });
+            c.select(range);
+          }
+        }
+
+        if (position === 'beginning' && lastText) {
+          c.moveFocusTo(lastText.key, 0).moveAnchorTo(lastText.key, 0);
+        }
+        editorDOM.focus();
+      });
+    }
+  };
+
+  finishEditing = () => {
+    if (this.editorRef) {
+      this.editorRef.props.onEditingDone();
+    }
+  };
+
+  render() {
+    const { value } = this.state;
+    const { toolbarOpts, error } = this.props;
+
+    if (toolbarOpts) {
+      toolbarOpts.error = error;
+    }
+
+    const props = {
+      ...this.props,
+      markup: null,
+      value,
+      onChange: this.onChange,
+      focus: this.focus,
+      runSerializationOnMarkup: this.runSerializationOnMarkup,
+    };
+
+    return (
+      <Editor
+        onRef={(ref) => {
+          if (ref) {
+            this.rootRef = ref;
+          }
+        }}
+        editorRef={(ref) => ref && (this.editorRef = ref)}
+        {...props}
+      />
+    );
+  }
+}
+
+/**
+ * Export lower level Editor and serialization functions.
+ */
+export { htmlToValue, valueToHtml, Editor, DEFAULT_PLUGINS, ALL_PLUGINS, constants };

package/src/parse-html.js

@@ -0,0 +1,8 @@
+export const parseDegrees = (html) =>
+  html
+    // removes \(   use case: 50°
+    .replace(/\\[(]/g, '')
+    // removes \)   use case: 50°+m<1
+    .replace(/\\[)]/g, '')
+    // removes \degree  use case: 50°
+    .replace(/\\degree/g, '&deg;');

package/src/plugins/README.md

@@ -0,0 +1,27 @@
+# plugins
+
+## Custom toolbar
+
+To create a custom toolbar you need to add the following methods to the toolbar object:
+
+```typescript
+type ChangeFn = (key:string, update : object) : void;
+
+type Toolbar = {
+  /**
+   * return true if this plugin supports this node type
+   */
+  supports : (node: Slate.Node) : Boolean;
+  /**
+   * return a React component to edit the data within the node,
+   * call toolbarDone to finish editing, call toolbarChange to update
+   * the main editor without closing editing.
+   */
+  customToolbar: (node: Slate.Node, toolbarDone : ChangeFn, toolbarChange: ChangeFn),
+  /**
+   * Takes the output of the `customToolbar#toolbarDone` call
+   * and passes in a value so that you can create a Slate.Change.
+   */
+  applyChange: (key: string, data: object, value: Slate.Value) : Slate.Change | undefined
+}
+```

package/src/plugins/characters/custom-popper.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+import Typography from '@material-ui/core/Typography';
+
+const styles = () => ({
+  popover: {
+    background: '#fff',
+    padding: '10px',
+    pointerEvents: 'none',
+    zIndex: 99999,
+  },
+  paper: {
+    padding: 20,
+    height: 'auto',
+    width: 'auto',
+  },
+  typography: {
+    fontSize: 50,
+    textAlign: 'center',
+  },
+});
+
+const CustomPopper = withStyles(styles)(({ classes, children, ...props }) => (
+  <Popper
+    id="mouse-over-popover"
+    open
+    className={classes.popover}
+    classes={{
+      paper: classes.paper,
+    }}
+    anchorOrigin={{
+      vertical: 'bottom',
+      horizontal: 'left',
+    }}
+    transformOrigin={{
+      vertical: 'top',
+      horizontal: 'left',
+    }}
+    disableRestoreFocus
+    disableAutoFocus
+    {...props}
+  >
+    <Typography classes={{ root: classes.typography }}>{children}</Typography>
+  </Popper>
+));
+
+export default CustomPopper;

package/src/plugins/characters/index.jsx

@@ -0,0 +1,284 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import debug from 'debug';
+import get from 'lodash/get';
+
+import { PureToolbar } from '@pie-lib/math-toolbar';
+
+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 = () => {
+  const prevPopOvers = document.querySelectorAll('#mouse-over-popover');
+
+  log('[characters:removePopOvers]');
+  prevPopOvers.forEach((s) => s.remove());
+};
+
+export const removeDialogs = () => {
+  const prevDialogs = document.querySelectorAll('.insert-character-dialog');
+
+  log('[characters:removeDialogs]');
+  prevDialogs.forEach((s) => s.remove());
+  removePopOvers();
+};
+
+const insertDialog = ({ editorDOM, value, callback, opts }) => {
+  const newEl = document.createElement('div');
+
+  log('[characters:insertDialog]');
+
+  removeDialogs();
+
+  newEl.className = 'insert-character-dialog';
+
+  let configToUse;
+
+  switch (true) {
+    case opts.language === 'spanish':
+      configToUse = spanishConfig;
+      break;
+    case opts.language === 'special':
+      configToUse = specialConfig;
+      break;
+    default:
+      configToUse = opts;
+  }
+
+  if (!configToUse.characters) {
+    insertSnackBar('No characters provided or language not recognized');
+    return;
+  }
+
+  const layoutForCharacters = configToUse.characters.reduce(
+    (obj, arr) => {
+      if (arr.length >= obj.columns) {
+        obj.columns = arr.length;
+      }
+
+      return obj;
+    },
+    { rows: configToUse.characters.length, columns: 0 },
+  );
+
+  let popoverEl;
+
+  const closePopOver = () => {
+    if (popoverEl) {
+      popoverEl.remove();
+    }
+
+    removePopOvers();
+  };
+
+  const renderPopOver = (event, el) => {
+    if (!event) {
+      return;
+    }
+
+    const infoStyle = { fontSize: '20px', lineHeight: '20px' };
+
+    closePopOver();
+
+    popoverEl = document.createElement('div');
+    ReactDOM.render(
+      <CustomPopper onClose={closePopOver} anchorEl={event.currentTarget}>
+        <div>{el.label}</div>
+
+        <div style={infoStyle}>{el.description}</div>
+
+        <div style={infoStyle}>{el.unicode}</div>
+      </CustomPopper>,
+      popoverEl,
+    );
+
+    document.body.appendChild(newEl);
+  };
+
+  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 = (val) => {
+    if (typeof val === 'string') {
+      callback(val, true);
+    }
+  };
+
+  const el = (
+    <PureToolbar
+      keyPadCharacterRef={opts.keyPadCharacterRef}
+      setKeypadInteraction={opts.setKeypadInteraction}
+      autoFocus
+      noDecimal
+      hideInput
+      noLatexHandling
+      hideDoneButtonBackground
+      layoutForKeyPad={layoutForCharacters}
+      additionalKeys={configToUse.characters.reduce((arr, n) => {
+        arr = [
+          ...arr,
+          ...n.map((k) => ({
+            name: get(k, 'name') || k,
+            write: get(k, 'write') || k,
+            label: get(k, 'label') || k,
+            category: 'character',
+            extraClass: 'character',
+            extraProps: {
+              ...(k.extraProps || {}),
+              style: {
+                ...(k.extraProps || {}).style,
+                border: '1px solid #000',
+              },
+            },
+            ...(configToUse.hasPreview
+              ? {
+                  actions: { onMouseEnter: (ev) => renderPopOver(ev, k), onMouseLeave: closePopOver },
+                }
+              : {}),
+          })),
+        ];
+
+        return arr;
+      }, [])}
+      keypadMode="language"
+      onChange={handleChange}
+      onDone={handleClose}
+    />
+  );
+
+  ReactDOM.render(el, newEl, () => {
+    const cursorItem = document.querySelector(`[data-key="${value.anchorKey}"]`);
+
+    if (cursorItem) {
+      const bodyRect = document.body.getBoundingClientRect();
+      const boundRect = cursorItem.getBoundingClientRect();
+
+      document.body.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 = `${boundRect.top + Math.abs(bodyRect.top) - newEl.offsetHeight - 10 + additionalTopOffset}px`;
+      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 CharacterIcon = ({ letter }) => (
+  <div
+    style={{
+      fontSize: '24px',
+      lineHeight: '24px',
+    }}
+  >
+    {letter}
+  </div>
+);
+
+CharacterIcon.propTypes = {
+  letter: PropTypes.string,
+};
+
+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) => {
+          if (getFocusedValue) {
+            valueToUse = getFocusedValue() || valueToUse;
+          }
+
+          if (char) {
+            const change = valueToUse.change().insertTextByKey(valueToUse.anchorKey, valueToUse.anchorOffset, char);
+
+            valueToUse = change.value;
+            log('[characters:insert]: ', value);
+            onChange(change);
+          }
+
+          log('[characters:click]');
+
+          if (focus) {
+            if (editorDOM) {
+              editorDOM.focus();
+            }
+          }
+        };
+
+        insertDialog({ editorDOM, value: valueToUse, callback, opts });
+      },
+    },
+
+    pluginStyles: (node, parentNode, p) => {
+      if (p) {
+        return {
+          position: 'absolute',
+          top: 'initial',
+        };
+      }
+    },
+  };
+}