fix errors and update player with new structure WIP PD-363

Author: andreeimiron

packages/select-text/configure/src/design.jsx

@@ -10,6 +10,7 @@ import Chip from '@material-ui/core/Chip';
 import Info from '@material-ui/icons/Info';
 import debug from 'debug';
 import { EditableHtml } from '@pie-lib/pie-toolbox/editable-html';
+import { renderMath } from '@pie-lib/pie-toolbox/math-rendering';
 import Tooltip from '@material-ui/core/Tooltip';
 import { clearSelection, generateValidationMessage } from './utils';
 // import {
@@ -24,6 +25,7 @@ import classNames from 'classnames';
 
 import Switch from '@material-ui/core/Switch';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
+import ReactDOM from 'react-dom';
 
 const { Panel, toggle, radio, dropdown } = settings;
 
@@ -64,7 +66,8 @@ export class Design extends React.Component {
     if (model && model.text) {
       this.setState({
         text: model.text,
-        tokenizedText: model.text,
+        text: model.text,
+        tokenizedText: model.tokenizedText || model.text,
       });
 
       // model.tokens.forEach((annotation) => {
@@ -86,6 +89,15 @@ export class Design extends React.Component {
     }
   }
 
+  componentDidUpdate() {
+    // console.log('UPDATED');
+    // console.log('this.state.text', this.state.text);
+    //eslint-disable-next-line
+    const domNode = ReactDOM.findDOMNode(this);
+
+    renderMath(domNode);
+  }
+
   updateText = debounce((val) => {
     this.apply((u) => {
       u.text = val;
@@ -112,6 +124,17 @@ export class Design extends React.Component {
     });
   };
 
+  changeTokenizedText = (text) => {
+    this.apply((u) => {
+      u.tokenizedText = text;
+
+      // const correctTokenCount = tokens.filter((t) => t.correct).length;
+      // const max = isFinite(u.maxSelections) ? u.maxSelections : 0;
+      //
+      // u.maxSelections = Math.max(max, correctTokenCount);
+    });
+  };
+
   changeMaxSelections = (event, max) => {
     this.apply((u) => (u.maxSelections = max));
   };
@@ -343,6 +366,13 @@ export class Design extends React.Component {
     if (selection && selection.rangeCount > 0) {
       this.wrapSelectionInSpan(selection);
       clearSelection();
+
+      if (this.textRef) {
+        const content = this.textRef.getHTML();
+
+        this.changeTokenizedText(content);
+        // this.setState({ tokenizedText: content });
+      }
     }
   };
 
@@ -359,13 +389,16 @@ export class Design extends React.Component {
   clearTokens = () => {
     const { model } = this.props;
 
-    const container = document.createElement('div');
-    container.innerHTML = model.text;
+    if (this.textRef) {
+      const container = document.createElement('div');
+      container.innerHTML = model.text;
 
-    // Remove all children and add new content
-    this.textRef.innerHTML = '';
-    this.textRef.appendChild(container);
+      // Remove all children and add new content
+      this.textRef.innerHTML = '';
+      this.textRef.appendChild(container);
+    }
 
+    this.changeTokenizedText(model.text);
     this.setState({ tokenizedText: model.text });
   };
 
@@ -376,6 +409,7 @@ export class Design extends React.Component {
 
     console.log('words:', tokenized);
 
+    this.changeTokenizedText(tokenized);
     this.setState({ tokenizedText: tokenized });
   };
 
@@ -390,6 +424,7 @@ export class Design extends React.Component {
 
     const tokenized = container.innerHTML;
     console.log('sentences:', tokenized);
+    this.changeTokenizedText(tokenized);
     // this.setState({ tokenizedText: tokenized });
   };
 
@@ -404,6 +439,7 @@ export class Design extends React.Component {
 
     const tokenized = container.innerHTML;
     console.log('paragraphs:', tokenized);
+    this.changeTokenizedText(tokenized);
     // this.setState({ tokenizedText: tokenized });
   };
 
@@ -619,7 +655,15 @@ export class Design extends React.Component {
         <div className={classes.subheader}>
           NEW functionality
           <FormControlLabel
-            control={<Switch checked={selectMode} onChange={() => this.setState({ selectMode: !selectMode })} />}
+            control={
+              <Switch
+                checked={selectMode}
+                onChange={() => {
+                  this.setState({ selectMode: !selectMode });
+                  // renderMath(this);
+                }}
+              />
+            }
             label="Select tokens"
           />
         </div>

packages/select-text/configure/src/index.js

@@ -8,6 +8,8 @@ import {
   InsertSoundEvent,
   DeleteSoundEvent,
 } from '@pie-framework/pie-configure-events';
+import { renderMath } from '@pie-lib/pie-toolbox/math-rendering';
+
 import defaultValues from './defaultConfiguration';
 import { generateModel } from './utils';
 
@@ -57,7 +59,7 @@ export default class SelectTextConfigure extends HTMLElement {
 
       // check if the language is already included in the languageChoices.options array
       // and if not, then add it.
-      if (!this._configuration.languageChoices.options.find(option => option.value === this._model.language)) {
+      if (!this._configuration.languageChoices.options.find((option) => option.value === this._model.language)) {
         this._configuration.languageChoices.options.push({
           value: this._model.language,
           label: this._model.language,
@@ -127,7 +129,9 @@ export default class SelectTextConfigure extends HTMLElement {
         },
       });
 
-      ReactDOM.render(el, this);
+      ReactDOM.render(el, this, () => {
+        renderMath(this);
+      });
     }
   }
 }

packages/select-text/controller/src/index.js

@@ -122,6 +122,7 @@ export const model = (question, session, env) => {
         highlightChoices: normalizedQuestion.highlightChoices,
         prompt: normalizedQuestion.promptEnabled ? normalizedQuestion.prompt : null,
         text: normalizedQuestion.text,
+        tokenizedText: normalizedQuestion.tokenizedText,
         disabled: env.mode !== 'gather',
         maxSelections: normalizedQuestion.maxSelections,
         correctness,

packages/select-text/src/main.jsx

@@ -1,10 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TextSelect, Legend } from '@pie-lib/pie-toolbox/text-select';
-import {CorrectAnswerToggle} from '@pie-lib/pie-toolbox/correct-answer-toggle';
-import {color, Feedback, Collapsible, hasText, hasMedia, PreviewPrompt, UiLayout} from '@pie-lib/pie-toolbox/render-ui';
+import { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';
+import {
+  color,
+  Feedback,
+  Collapsible,
+  hasText,
+  hasMedia,
+  PreviewPrompt,
+  UiLayout,
+} from '@pie-lib/pie-toolbox/render-ui';
 import { withStyles } from '@material-ui/core/styles';
 import generateModel from './utils';
+import classNames from 'classnames';
 
 import debug from 'debug';
 
@@ -26,14 +35,27 @@ export class Main extends React.Component {
 
     this.state = {
       showCorrectAnswer: this.props.model.alwaysShowCorrect || false,
-      model: generateModel(props.model),
+      model: {
+        ...generateModel(props.model),
+        tokenizedText: this.initializeTokenizedText(
+          props.model.tokenizedText || props.model.text,
+          this.handleTokenClick,
+        ),
+      },
+      selectedTokens: [],
     };
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({
       showCorrectAnswer: !!nextProps.model.alwaysShowCorrect,
-      model: generateModel(nextProps.model),
+      model: {
+        ...generateModel(nextProps.model),
+        tokenizedText: this.initializeTokenizedText(
+          nextProps.model.tokenizedText || nextProps.model.text,
+          this.handleTokenClick,
+        ),
+      },
     });
   }
 
@@ -47,16 +69,37 @@ export class Main extends React.Component {
     return model.tokens.filter((t) => t.correct);
   };
 
+  initializeTokenizedText = (html, onClick) => {
+    const { classes } = this.props;
+    const container = document.createElement('div');
+    container.innerHTML = html;
+
+    const spans = container.querySelectorAll('span');
+
+    spans.forEach((span) => {
+      span.className = classNames(classes.token);
+      // span.addEventListener('click', (e) => onClick(e));
+    });
+
+    return container.innerHTML;
+  };
+
+  handleTokenClick = (event) => {
+    console.log('event click', event.target.id);
+
+    event.target.classList.toggle('selected');
+  };
+
   render() {
     const { session, onSelectionChange, classes } = this.props;
     const { showCorrectAnswer, model } = this.state;
     const { env, extraCSSRules } = model;
     const { mode } = env || {};
 
-
     const selectedTokens = showCorrectAnswer ? this.correctAnswer() : session.selectedTokens;
     const showRationale = model.rationale && (hasText(model.rationale) || hasMedia(model.rationale));
-    const showTeacherInstructions = model.teacherInstructions && (hasText(model.teacherInstructions) || hasMedia(model.teacherInstructions));
+    const showTeacherInstructions =
+      model.teacherInstructions && (hasText(model.teacherInstructions) || hasMedia(model.teacherInstructions));
 
     log('[render] selectedTokens:', selectedTokens);
 
@@ -92,7 +135,7 @@ export class Main extends React.Component {
         <TextSelect
           className={classes.textSelect}
           disabled={model.disabled}
-          text={model.text}
+          text={model.tokenizedText || model.text}
           tokens={model.tokens}
           selectedTokens={selectedTokens}
           onChange={(selection) => {
@@ -154,6 +197,21 @@ const StyledMain = withStyles((theme) => ({
   collapsible: {
     marginBottom: theme.spacing.unit * 2,
   },
+  token: {
+    position: 'relative',
+    cursor: 'pointer',
+    border: 'dashed 2px grey',
+    lineHeight: '24px',
+
+    '&:hover': {
+      backgroundColor: '#9fa8da',
+    },
+
+    '&.selected': {
+      backgroundColor: '#9fa8da',
+      border: 'none',
+    },
+  },
 }))(Main);
 
 export default class Stateful extends React.Component {