@pie-lib/text-select 0.1.0

package/src/tokenizer/builder.ts

@@ -0,0 +1,268 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/text-select/src/tokenizer/builder.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+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.tsx

@@ -0,0 +1,81 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/text-select/src/tokenizer/controls.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+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: any = styled('div')(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+}));
+
+const StyledButton: any = styled(Button)(({ theme }) => ({
+  marginRight: theme.spacing(1),
+}));
+
+const StyledSwitch: any = 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.tsx

@@ -0,0 +1,154 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/text-select/src/tokenizer/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Controls from './controls.js';
+import { styled } from '@mui/material/styles';
+import { paragraphs, sentences, words } from './builder.js';
+import { clone, differenceWith, isEqual } from 'lodash-es';
+import { noSelect } from '@pie-lib/style-utils';
+import TokenText from './token-text.js';
+
+const StyledText: any = 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: any = (token, mode) => {
+    this.props.onChange(token, mode);
+
+    this.setState({
+      mode,
+    });
+  };
+
+  toggleCorrectMode = () => this.setState({ setCorrectMode: !this.state.setCorrectMode });
+
+  clear: any = () => {
+    this.onChangeHandler([], '');
+  };
+
+  buildTokens: any = (type, fn) => {
+    const { text } = this.props;
+    const tokens = fn(text);
+
+    this.onChangeHandler(tokens, type);
+  };
+
+  selectToken: any = (newToken, tokensToRemove) => {
+    const { tokens } = this.props;
+    const update = differenceWith(clone(tokens), tokensToRemove, isEqual);
+
+    update.push(newToken);
+    this.onChangeHandler(update, this.state.mode);
+  };
+
+  tokenClick: any = (token) => {
+    const { setCorrectMode } = this.state;
+
+    if (setCorrectMode) {
+      this.setCorrect(token);
+    } else {
+      this.removeToken(token);
+    }
+  };
+
+  tokenIndex: any = (token) => {
+    const { tokens } = this.props;
+
+    return tokens.findIndex((t) => {
+      return t.text == token.text && t.start == token.start && t.end == token.end;
+    });
+  };
+
+  setCorrect: any = (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: any = (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.ts

@@ -0,0 +1,59 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/text-select/src/tokenizer/selection-utils.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+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.tsx

@@ -0,0 +1,145 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/text-select/src/tokenizer/token-text.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { intersection, normalize } from './builder.js';
+import debug from 'debug';
+import classNames from 'classnames';
+
+import { clearSelection, getCaretCharacterOffsetWithin } from './selection-utils.js';
+
+import { green, yellow } from '@mui/material/colors';
+
+const log = debug('@pie-lib:text-select:token-text');
+
+const StyledText: any = 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: any = (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>
+    );
+  }
+}