@pie-lib/editable-html-tip-tap 1.0.1 → 1.0.3

package/src/extensions/characters.js

@@ -1,46 +0,0 @@
-// InlineNodes.js
-import React from 'react';
-import { Node, ReactNodeViewRenderer } from '@tiptap/react';
-import ExplicitConstructedResponse from '../plugins/respArea/explicit-constructed-response';
-import DragInTheBlank from '../plugins/respArea/drag-in-the-blank';
-import InlineDropdown from '../plugins/respArea/inline-dropdown';
-
-/**
- * ExplicitConstructedResponse Node
- */
-export const ExplicitConstructedResponseNode = Node.create({
-  name: 'explicit_constructed_response',
-  group: 'inline',
-  inline: true,
-  atom: true,
-  addAttributes() {
-    return {
-      index: { default: null },
-      value: { default: '' },
-    };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: 'span[data-type="explicit_constructed_response"]',
-        getAttrs: (el) => ({
-          index: el.dataset.index,
-          value: el.dataset.value,
-        }),
-      },
-    ];
-  },
-  renderHTML({ HTMLAttributes }) {
-    return [
-      'span',
-      {
-        'data-type': 'explicit_constructed_response',
-        'data-index': HTMLAttributes.index,
-        'data-value': HTMLAttributes.value,
-      },
-    ];
-  },
-  addNodeView() {
-    return ReactNodeViewRenderer(ExplicitConstructedResponse);
-  },
-});

package/src/old-index.jsx

@@ -1,162 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,27 +0,0 @@
-# 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/index.jsx

@@ -1,284 +0,0 @@
-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',
-        };
-      }
-    },
-  };
-}