@pie-lib/text-select 3.0.3-next.36 → 3.0.3-next.38

package/src/tokenizer/builder.js

@@ -1,258 +0,0 @@
-import { clone, compact } from 'lodash-es';
-import English from '@pie-framework/parse-english';
-
-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/src/tokenizer/controls.jsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Button from '@mui/material/Button';
-import { styled } from '@mui/material/styles';
-import Switch from '@mui/material/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import { color } from '@pie-lib/render-ui';
-
-const StyledControls = styled('div')(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-}));
-
-const StyledButton = styled(Button)(({ theme }) => ({
-  marginRight: theme.spacing(1),
-}));
-
-const StyledSwitch = styled(Switch)(() => ({
-  '& .MuiSwitch-thumb': {
-    '&.Mui-checked': {
-      color: `${color.tertiary()} !important`,
-    },
-  },
-  '& .MuiSwitch-track': {
-    '&.Mui-checked': {
-      backgroundColor: `${color.tertiaryLight()} !important`,
-    },
-  },
-}));
-
-export class Controls extends React.Component {
-  static propTypes = {
-    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 { onClear, onWords, onSentences, onParagraphs, setCorrectMode, onToggleCorrectMode } = this.props;
-
-    return (
-      <StyledControls>
-        <div>
-          <StyledButton onClick={onWords} size="small" color="primary" disabled={setCorrectMode}>
-            Words
-          </StyledButton>
-          <StyledButton onClick={onSentences} size="small" color="primary" disabled={setCorrectMode}>
-            Sentences
-          </StyledButton>
-          <StyledButton onClick={onParagraphs} size="small" color="primary" disabled={setCorrectMode}>
-            Paragraphs
-          </StyledButton>
-          <StyledButton size="small" color="secondary" onClick={onClear} disabled={setCorrectMode}>
-            Clear
-          </StyledButton>
-        </div>
-        <FormControlLabel
-          control={<StyledSwitch checked={setCorrectMode} onChange={onToggleCorrectMode} />}
-          label="Set correct answers"
-        />
-      </StyledControls>
-    );
-  }
-}
-export default Controls;

package/src/tokenizer/index.jsx

@@ -1,144 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Controls from './controls';
-import { styled } from '@mui/material/styles';
-import { paragraphs, sentences, words } from './builder';
-import { clone, differenceWith, isEqual } from 'lodash-es';
-import { noSelect } from '@pie-lib/style-utils';
-import TokenText from './token-text';
-
-const StyledText = styled('div')(({ disabled }) => ({
-  whiteSpace: 'pre-wrap',
-
-  ...(disabled && {
-    ...noSelect(),
-  }),
-}));
-
-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,
-      }),
-    ),
-    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 } = this.props;
-    const { setCorrectMode } = this.state;
-
-    return (
-      <div>
-        <Controls
-          onClear={this.clear}
-          onWords={() => this.buildTokens('words', words)}
-          onSentences={() => this.buildTokens('sentence', sentences)}
-          onParagraphs={() => this.buildTokens('paragraphs', paragraphs)}
-          setCorrectMode={setCorrectMode}
-          onToggleCorrectMode={this.toggleCorrectMode}
-        />
-        <StyledText
-          disabled={setCorrectMode}
-          as={TokenText}
-          text={text}
-          tokens={tokens}
-          onTokenClick={this.tokenClick}
-          onSelectToken={this.selectToken}
-        />
-      </div>
-    );
-  }
-}
-
-export default Tokenizer;

package/src/tokenizer/selection-utils.js

@@ -1,49 +0,0 @@
-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/src/tokenizer/token-text.jsx

@@ -1,135 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import { intersection, normalize } from './builder';
-import debug from 'debug';
-import classNames from 'classnames';
-
-import { clearSelection, getCaretCharacterOffsetWithin } from './selection-utils';
-
-import { green, yellow } from '@mui/material/colors';
-
-const log = debug('@pie-lib:text-select:token-text');
-
-const StyledText = styled('span')(() => ({
-  '&.predefined': {
-    cursor: 'pointer',
-    backgroundColor: yellow[100],
-    border: `dashed 0px ${yellow[700]}`,
-    // we need this for nested tokenized elements like paragraphs, where p is inside span
-    '& *': {
-      cursor: 'pointer',
-      backgroundColor: yellow[100],
-      border: `dashed 0px ${yellow[700]}`,
-    },
-  },
-  '&.correct': {
-    backgroundColor: green[500],
-    '& *': {
-      backgroundColor: green[500],
-    },
-  },
-}));
-
-export const Text = ({ text, predefined, onClick, correct }) => {
-  const formattedText = (text || '').replace(/\n/g, '<br>');
-
-  if (predefined) {
-    const className = classNames('predefined', correct && 'correct');
-
-    return <StyledText 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/src/utils.js

@@ -1,56 +0,0 @@
-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);
-};