@pie-element/ebsr 9.12.1 → 9.12.2-next.18

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/text-select/tokenizer/builder.js

@@ -0,0 +1,259 @@
+import compact from 'lodash/compact';
+import English from '@pie-framework/parse-english';
+import clone from 'lodash/clone';
+
+const g = (str, node) => {
+  if (node.children) {
+    return node.children.reduce(g, str);
+  } else if (node.value) {
+    return str + node.value;
+  } else {
+    return str;
+  }
+};
+
+const getParagraph = (p) => g('', p);
+
+const getSentence = (s) => g('', s);
+
+const getWord = (w) => g('', w);
+
+export const paragraphs = (text) => {
+  const tree = new English().parse(text);
+
+  const out = tree.children.reduce((acc, child) => {
+    if (child.type === 'ParagraphNode') {
+      const paragraph = {
+        text: getParagraph(child),
+        start: child.position.start.offset,
+        end: child.position.end.offset,
+      };
+
+      return acc.concat([paragraph]);
+    } else {
+      return acc;
+    }
+  }, []);
+
+  return out;
+};
+
+export const handleSentence = (child, acc) => {
+  const sentenceChilds = [];
+  // we parse the children of the sentence
+  let newAcc = child.children.reduce(function(acc, child) {
+    // if we find a whitespace node that's \n, we end the sentence
+    if (child.type === 'WhiteSpaceNode' && child.value === '\n') {
+      if (sentenceChilds.length) {
+        const firstWord = sentenceChilds[0];
+        // we create a sentence starting from the first word until the new line
+        const sentence = {
+          text: sentenceChilds.map((d) => getSentence(d)).join(''),
+          start: firstWord.position.start.offset,
+          end: child.position.start.offset,
+        };
+
+        // we remove all the elements from the array
+        sentenceChilds.splice(0, sentenceChilds.length);
+        return acc.concat([sentence]);
+      }
+    } else {
+      // otherwise we add it to the array that contains the child forming a sentence
+      sentenceChilds.push(child);
+    }
+
+    return acc;
+  }, acc);
+
+  // we treat the case when no \n character is found at the end
+  // so we create a sentence from the last words or white spaces found
+  if (sentenceChilds.length) {
+    const firstWord = sentenceChilds[0];
+    const lastWord = sentenceChilds[sentenceChilds.length - 1];
+    const sentence = {
+      text: sentenceChilds.map((d) => getSentence(d)).join(''),
+      start: firstWord.position.start.offset,
+      end: lastWord.position.end.offset,
+    };
+
+    newAcc = newAcc.concat([sentence]);
+
+    sentenceChilds.splice(0, sentenceChilds.length);
+  }
+
+  return newAcc;
+};
+
+export const sentences = (text) => {
+  const tree = new English().parse(text);
+
+  const out = tree.children.reduce((acc, child) => {
+    if (child.type === 'ParagraphNode') {
+      return child.children.reduce((acc, child) => {
+        if (child.type === 'SentenceNode') {
+          const newAcc = handleSentence(child, acc);
+
+          return newAcc || acc;
+        } else {
+          return acc;
+        }
+      }, acc);
+    } else {
+      return acc;
+    }
+  }, []);
+
+  return out;
+};
+export const words = (text) => {
+  const tree = new English().parse(text);
+
+  const out = tree.children.reduce((acc, child) => {
+    if (child.type === 'ParagraphNode') {
+      return child.children.reduce((acc, child) => {
+        if (child.type === 'SentenceNode') {
+          return child.children.reduce((acc, child) => {
+            if (child.type === 'WordNode') {
+              const node = {
+                text: getWord(child),
+                start: child.position.start.offset,
+                end: child.position.end.offset,
+              };
+              return acc.concat([node]);
+            } else {
+              return acc;
+            }
+          }, acc);
+        } else {
+          return acc;
+        }
+      }, acc);
+    } else {
+      return acc;
+    }
+  }, []);
+
+  return out;
+};
+
+class Intersection {
+  constructor(results) {
+    this.results = results;
+  }
+
+  get hasOverlap() {
+    return this.results.filter((r) => r.type === 'overlap').length > 0;
+  }
+
+  get surroundedTokens() {
+    return this.results.filter((r) => r.type === 'within-selection').map((t) => t.token);
+  }
+}
+/**
+ * get intersection info for the selection in relation to tokens.
+ * @param {{start: number, end: number}} selection
+ * @param {{start: number, end: number}[]} tokens
+ * @return {tokens: [], type: 'overlap|no-overlap|contains'}
+ */
+export const intersection = (selection, tokens) => {
+  const { start, end } = selection;
+
+  const startsWithin = (t) => start >= t.start && start < t.end;
+  const endsWithin = (t) => end > t.start && end <= t.end;
+
+  const mapped = tokens.map((t) => {
+    if (start === t.start && end === t.end) {
+      return { token: t, type: 'exact-fit' };
+    } else if (start <= t.start && end >= t.end) {
+      return { token: t, type: 'within-selection' };
+    } else if (startsWithin(t) || endsWithin(t)) {
+      return { token: t, type: 'overlap' };
+    }
+  });
+  return new Intersection(compact(mapped));
+};
+
+export const sort = (tokens) => {
+  if (!Array.isArray(tokens)) {
+    return tokens;
+  } else {
+    const out = clone(tokens);
+    out.sort((a, b) => {
+      const s = a.start < b.start ? -1 : a.start > b.start ? 1 : 0;
+      const e = a.end < b.end ? -1 : a.end > b.end ? 1 : 0;
+      if (s === -1 && e !== -1) {
+        throw new Error(`sort does not support intersecting tokens. a: ${a.start}-${a.end}, b: ${b.start}-${b.end}`);
+      }
+      return s;
+    });
+    return out;
+  }
+};
+
+export const normalize = (textToNormalize, tokens) => {
+  // making sure text provided is a string
+  const text = textToNormalize || '';
+
+  if (!Array.isArray(tokens) || tokens.length === 0) {
+    return [
+      {
+        text,
+        start: 0,
+        end: text.length,
+      },
+    ];
+  }
+
+  const out = sort(tokens).reduce(
+    (acc, t, index, outer) => {
+      let tokens = [];
+      const lastIndex = acc.lastIndex;
+
+      if (t.start === lastIndex) {
+        tokens = [
+          {
+            text: text.substring(lastIndex, t.end),
+            start: lastIndex,
+            end: t.end,
+            predefined: true,
+            correct: t.correct,
+            isMissing: t.isMissing,
+          },
+        ];
+      } else if (lastIndex < t.start) {
+        tokens = [
+          {
+            text: text.substring(lastIndex, t.start),
+            start: lastIndex,
+            end: t.start,
+          },
+          {
+            text: text.substring(t.start, t.end),
+            start: t.start,
+            end: t.end,
+            predefined: true,
+            correct: t.correct,
+            isMissing: t.isMissing,
+          },
+        ];
+      }
+
+      if (index === outer.length - 1 && t.end < text.length) {
+        const last = {
+          text: text.substring(t.end),
+          start: t.end,
+          end: text.length,
+        };
+        tokens.push(last);
+      }
+
+      return {
+        lastIndex: tokens.length ? tokens[tokens.length - 1].end : lastIndex,
+        result: acc.result.concat(tokens),
+      };
+    },
+    { result: [], lastIndex: 0 },
+  );
+
+  return out.result;
+};

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/text-select/tokenizer/controls.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@material-ui/core/Button';
+import { withStyles } from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+export class Controls extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    onClear: PropTypes.func.isRequired,
+    onWords: PropTypes.func.isRequired,
+    onSentences: PropTypes.func.isRequired,
+    onParagraphs: PropTypes.func.isRequired,
+    setCorrectMode: PropTypes.bool.isRequired,
+    onToggleCorrectMode: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {};
+
+  render() {
+    const { classes, onClear, onWords, onSentences, onParagraphs, setCorrectMode, onToggleCorrectMode } = this.props;
+
+    return (
+      <div className={classes.controls}>
+        <div>
+          <Button onClick={onWords} className={classes.button} size="small" color="primary" disabled={setCorrectMode}>
+            Words
+          </Button>
+          <Button
+            onClick={onSentences}
+            className={classes.button}
+            size="small"
+            color="primary"
+            disabled={setCorrectMode}
+          >
+            Sentences
+          </Button>
+          <Button
+            onClick={onParagraphs}
+            className={classes.button}
+            size="small"
+            color="primary"
+            disabled={setCorrectMode}
+          >
+            Paragraphs
+          </Button>
+          <Button className={classes.button} size="small" color="secondary" onClick={onClear} disabled={setCorrectMode}>
+            Clear
+          </Button>
+        </div>
+        <FormControlLabel
+          control={<Switch checked={setCorrectMode} onChange={onToggleCorrectMode} />}
+          label="Set correct answers"
+        />
+      </div>
+    );
+  }
+}
+export default withStyles((theme) => ({
+  button: {
+    marginRight: theme.spacing.unit,
+  },
+  controls: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+}))(Controls);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/text-select/tokenizer/index.jsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Controls from './controls';
+import { withStyles } from '@material-ui/core/styles';
+import { words, sentences, paragraphs } from './builder';
+import clone from 'lodash/clone';
+import isEqual from 'lodash/isEqual';
+import differenceWith from 'lodash/differenceWith';
+import classNames from 'classnames';
+import { noSelect } from '../../style-utils';
+import TokenText from './token-text';
+
+export class Tokenizer extends React.Component {
+  static propTypes = {
+    text: PropTypes.string.isRequired,
+    tokens: PropTypes.arrayOf(
+      PropTypes.shape({
+        text: PropTypes.string,
+        correct: PropTypes.bool,
+        start: PropTypes.number,
+        end: PropTypes.number,
+      }),
+    ),
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {};
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      setCorrectMode: false,
+      mode: '',
+    };
+  }
+
+  onChangeHandler = (token, mode) => {
+    this.props.onChange(token, mode);
+
+    this.setState({
+      mode,
+    });
+  };
+
+  toggleCorrectMode = () => this.setState({ setCorrectMode: !this.state.setCorrectMode });
+
+  clear = () => {
+    this.onChangeHandler([], '');
+  };
+
+  buildTokens = (type, fn) => {
+    const { text } = this.props;
+    const tokens = fn(text);
+
+    this.onChangeHandler(tokens, type);
+  };
+
+  selectToken = (newToken, tokensToRemove) => {
+    const { tokens } = this.props;
+    const update = differenceWith(clone(tokens), tokensToRemove, isEqual);
+
+    update.push(newToken);
+    this.onChangeHandler(update, this.state.mode);
+  };
+
+  tokenClick = (token) => {
+    const { setCorrectMode } = this.state;
+
+    if (setCorrectMode) {
+      this.setCorrect(token);
+    } else {
+      this.removeToken(token);
+    }
+  };
+
+  tokenIndex = (token) => {
+    const { tokens } = this.props;
+
+    return tokens.findIndex((t) => {
+      return t.text == token.text && t.start == token.start && t.end == token.end;
+    });
+  };
+
+  setCorrect = (token) => {
+    const { tokens } = this.props;
+    const index = this.tokenIndex(token);
+    if (index !== -1) {
+      const t = tokens[index];
+
+      t.correct = !t.correct;
+
+      const update = clone(tokens);
+
+      update.splice(index, 1, t);
+      this.onChangeHandler(update, this.state.mode);
+    }
+  };
+
+  removeToken = (token) => {
+    const { tokens } = this.props;
+
+    const index = this.tokenIndex(token);
+    if (index !== -1) {
+      const update = clone(tokens);
+
+      update.splice(index, 1);
+
+      this.onChangeHandler(update, this.state.mode);
+    }
+  };
+
+  render() {
+    const { text, tokens, classes, className } = this.props;
+    const { setCorrectMode } = this.state;
+
+    const tokenClassName = classNames(classes.text, setCorrectMode && classes.noselect);
+
+    const rootName = classNames(classes.tokenizer, className);
+
+    return (
+      <div className={rootName}>
+        <Controls
+          onClear={this.clear}
+          onWords={() => this.buildTokens('words', words)}
+          onSentences={() => this.buildTokens('sentence', sentences)}
+          onParagraphs={() => this.buildTokens('paragraphs', paragraphs)}
+          setCorrectMode={setCorrectMode}
+          onToggleCorrectMode={this.toggleCorrectMode}
+        />
+        <TokenText
+          className={tokenClassName}
+          text={text}
+          tokens={tokens}
+          onTokenClick={this.tokenClick}
+          onSelectToken={this.selectToken}
+        />
+      </div>
+    );
+  }
+}
+
+export default withStyles(() => ({
+  text: {
+    whiteSpace: 'pre-wrap',
+  },
+  noselect: { ...noSelect() },
+}))(Tokenizer);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/text-select/tokenizer/selection-utils.js

@@ -0,0 +1,49 @@
+export const clearSelection = () => {
+  if (document.getSelection) {
+    // for all new browsers (IE9+, Chrome, Firefox)
+    document.getSelection().removeAllRanges();
+    document.getSelection().addRange(document.createRange());
+  } else if (window.getSelection) {
+    // equals with the document.getSelection (MSDN info)
+    if (window.getSelection().removeAllRanges) {
+      // for all new browsers (IE9+, Chrome, Firefox)
+      window.getSelection().removeAllRanges();
+      window.getSelection().addRange(document.createRange());
+    } else if (window.getSelection().empty) {
+      // Chrome supports this as well
+      window.getSelection().empty();
+    }
+  } else if (document.selection) {
+    // IE8-
+    document.selection.empty();
+  }
+};
+
+export const getCaretCharacterOffsetWithin = (element) => {
+  var caretOffset = 0;
+  var doc = element.ownerDocument || element.document;
+  var win = doc.defaultView || doc.parentWindow;
+  var sel;
+  if (typeof win.getSelection !== 'undefined') {
+    sel = win.getSelection();
+    if (sel.rangeCount > 0) {
+      var range = win.getSelection().getRangeAt(0);
+      var selected = range.toString().length;
+      var preCaretRange = range.cloneRange();
+      preCaretRange.selectNodeContents(element);
+      preCaretRange.setEnd(range.endContainer, range.endOffset);
+      if (selected) {
+        caretOffset = preCaretRange.toString().length - selected;
+      } else {
+        caretOffset = preCaretRange.toString().length;
+      }
+    }
+  } else if ((sel = doc.selection) && sel.type !== 'Control') {
+    var textRange = sel.createRange();
+    var preCaretTextRange = doc.body.createTextRange();
+    preCaretTextRange.moveToElementText(element);
+    preCaretTextRange.setEndPoint('EndToEnd', textRange);
+    caretOffset = preCaretTextRange.text.length;
+  }
+  return caretOffset;
+};

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/text-select/tokenizer/token-text.jsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { normalize, intersection } from './builder';
+import yellow from '@material-ui/core/colors/yellow';
+import green from '@material-ui/core/colors/green';
+import debug from 'debug';
+import classNames from 'classnames';
+
+import { clearSelection, getCaretCharacterOffsetWithin } from './selection-utils';
+
+const log = debug('@pie-lib:text-select:token-text');
+
+export const Text = withStyles(() => ({
+  predefined: {
+    cursor: 'pointer',
+    backgroundColor: yellow[100],
+    border: `dashed 0px ${yellow[700]}`,
+  },
+  correct: {
+    backgroundColor: green[500],
+  },
+}))(({ text, predefined, classes, onClick, correct }) => {
+  const formattedText = (text || '').replace(/\n/g, '<br>');
+
+  if (predefined) {
+    const className = classNames(classes.predefined, correct && classes.correct);
+
+    return <span onClick={onClick} className={className} dangerouslySetInnerHTML={{ __html: formattedText }} />;
+  } else {
+    return <span dangerouslySetInnerHTML={{ __html: formattedText }} />;
+  }
+});
+
+const notAllowedCharacters = ['\n', ' ', '\t'];
+
+export default class TokenText extends React.Component {
+  static propTypes = {
+    text: PropTypes.string.isRequired,
+    tokens: PropTypes.array.isRequired,
+    onTokenClick: PropTypes.func.isRequired,
+    onSelectToken: PropTypes.func.isRequired,
+    className: PropTypes.string,
+  };
+
+  /*
+   Change this to onClick instead of mouseUp because previously, in some cases
+   the onClick event from the <Text /> component was called right after the user
+   selected token and that token was then removed because the setCorrectMode was not true.
+
+   const { setCorrectMode } = this.state;
+
+   if (setCorrectMode) {
+   this.setCorrect(token);
+   } else {
+   this.removeToken(token);
+   }
+   */
+  onClick = (event) => {
+    const { onSelectToken, text, tokens } = this.props;
+
+    event.preventDefault();
+
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const selection = window.getSelection();
+    const textSelected = selection.toString();
+
+    if (textSelected.length > 0 && notAllowedCharacters.indexOf(textSelected) < 0) {
+      if (this.root) {
+        let offset = getCaretCharacterOffsetWithin(this.root);
+        /*
+         Since we implemented new line functionality (\n) using <br /> dom elements
+         and window.getSelection is not taking that into consideration, the offset might
+         be off by a few characters.
+
+         To combat that, we check if the selected text is right at the beginning of the offset.
+
+         If it's not, we add the additional offset in order for that to be accurate
+         */
+        const newLineOffset = text.slice(offset).indexOf(textSelected);
+
+        offset += newLineOffset;
+
+        if (offset !== undefined) {
+          const endIndex = offset + textSelected.length;
+
+          if (endIndex <= text.length) {
+            const i = intersection({ start: offset, end: endIndex }, tokens);
+            if (i.hasOverlap) {
+              log('hasOverlap  - do nothing');
+              clearSelection();
+            } else {
+              const tokensToRemove = i.surroundedTokens;
+              const token = {
+                text: textSelected,
+                start: offset,
+                end: endIndex,
+              };
+
+              onSelectToken(token, tokensToRemove);
+              clearSelection();
+            }
+          }
+        }
+      }
+    }
+  };
+
+  render() {
+    const { text, tokens, className, onTokenClick } = this.props;
+    const normalized = normalize(text, tokens);
+
+    return (
+      <div className={className} ref={(r) => (this.root = r)} onClick={this.onClick}>
+        {normalized.map((t, index) => {
+          return <Text key={index} {...t} onClick={() => onTokenClick(t)} />;
+        })}
+      </div>
+    );
+  }
+}

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/text-select/utils.js

@@ -0,0 +1,56 @@
+const createElementFromHTML = (htmlString = '') => {
+  const div = document.createElement('div');
+
+  div.innerHTML = htmlString.trim();
+
+  return div;
+};
+
+export const parseBrs = (dom) => {
+  const brs = dom.querySelectorAll('br');
+
+  brs.forEach((br) => br.replaceWith('\n'));
+
+  dom.innerHTML = dom.innerHTML.replace(/\n\n/g, '\n');
+};
+
+export const parseParagraph = (paragraph, end) => {
+  if (end) {
+    return paragraph.innerHTML;
+  }
+
+  return `${paragraph.innerHTML}\n\n`;
+};
+
+export const parseParagraphs = (dom) => {
+  const paragraphs = dom.querySelectorAll('p');
+  // separate variable for easily debugging, if needed
+  let str = '';
+
+  paragraphs.forEach((par, index) => {
+    str += parseParagraph(par, index === paragraphs.length - 1);
+  });
+
+  return str || null;
+};
+
+export const prepareText = (text) => {
+  let txtDom = createElementFromHTML(text);
+  const allDomElements = Array.from(txtDom.querySelectorAll('*'));
+
+  if (txtDom.querySelectorAll('p').length === 0) {
+    const div = document.createElement('div');
+
+    div.innerHTML = `<p>${txtDom.innerHTML}</p>`;
+    txtDom = div;
+  }
+
+  // if no dom elements, we just return the text
+  if (allDomElements.length === 0) {
+    return text;
+  }
+
+  parseBrs(txtDom);
+
+  return parseParagraphs(txtDom);
+};