@pie-element/ebsr 9.0.2-next.16 → 9.0.2-next.17

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/components/input.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CorrectInput from './correct-input';
+
+const Input = ({
+  disabled,
+  correct,
+  charactersLimit,
+  id,
+  isConstructedResponse,
+  value,
+  onChange,
+  showCorrectAnswer,
+  spellCheck,
+  width,
+}) => {
+  return (
+    <CorrectInput
+      disabled={disabled}
+      correct={showCorrectAnswer || correct}
+      charactersLimit={charactersLimit}
+      variant="outlined"
+      value={value}
+      isConstructedResponse={isConstructedResponse}
+      spellCheck={spellCheck}
+      isBox={true}
+      width={width}
+      onChange={(e) => {
+        onChange(id, e.target.value);
+      }}
+    />
+  );
+};
+
+Input.propTypes = {
+  id: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  spellCheck: PropTypes.bool,
+  correct: PropTypes.bool,
+  showCorrectAnswer: PropTypes.bool,
+  charactersLimit: PropTypes.number,
+  width: PropTypes.number,
+  isConstructedResponse: PropTypes.bool,
+};
+
+export default Input;

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/constructed-response.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Input from './components/input';
+import { withMask } from './with-mask';
+
+// eslint-disable-next-line react/display-name
+export default withMask('input', (props) => (node, data, onChange) => {
+  const dataset = node.data ? node.data.dataset || {} : {};
+  if (dataset.component === 'input') {
+    // eslint-disable-next-line react/prop-types
+    const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength, spellCheck } = props;
+
+    // the first answer is the correct one
+    // eslint-disable-next-line react/prop-types
+    const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];
+    const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
+    const width = maxLength && maxLength[dataset.id];
+
+    return (
+      <Input
+        key={`${node.type}-input-${dataset.id}`}
+        correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}
+        disabled={showCorrectAnswer || disabled}
+        value={finalValue}
+        id={dataset.id}
+        onChange={onChange}
+        showCorrectAnswer={showCorrectAnswer}
+        width={width}
+        charactersLimit={adjustedLimit ? width : 25}
+        isConstructedResponse={true}
+        spellCheck={spellCheck}
+      />
+    );
+  }
+});

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/drag-in-the-blank.jsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { renderMath } from '../math-rendering';
+import Choices from './choices';
+import Blank from './components/blank';
+import { withMask } from './with-mask';
+
+// eslint-disable-next-line react/display-name
+const Masked = withMask('blank', (props) => (node, data, onChange) => {
+  const dataset = node.data ? node.data.dataset || {} : {};
+  if (dataset.component === 'blank') {
+    // eslint-disable-next-line react/prop-types
+    const { disabled, duplicates, correctResponse, feedback, showCorrectAnswer } = props;
+    const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];
+    // eslint-disable-next-line react/prop-types
+    const choice = choiceId && props.choices.find((c) => c.id === choiceId);
+
+    return (
+      <Blank
+        key={`${node.type}-${dataset.id}`}
+        correct={showCorrectAnswer || (feedback && feedback[dataset.id])}
+        disabled={disabled}
+        duplicates={duplicates}
+        choice={choice}
+        id={dataset.id}
+        onChange={onChange}
+      />
+    );
+  }
+});
+
+export default class DragInTheBlank extends React.Component {
+  static propTypes = {
+    markup: PropTypes.string,
+    layout: PropTypes.object,
+    choicesPosition: PropTypes.string,
+    choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),
+    value: PropTypes.object,
+    onChange: PropTypes.func,
+    duplicates: PropTypes.bool,
+    disabled: PropTypes.bool,
+    feedback: PropTypes.object,
+    correctResponse: PropTypes.object,
+    showCorrectAnswer: PropTypes.bool,
+  };
+
+  UNSAFE_componentWillReceiveProps() {
+    if (this.rootRef) {
+      renderMath(this.rootRef);
+    }
+  }
+
+  componentDidUpdate() {
+    renderMath(this.rootRef);
+  }
+
+  getPositionDirection = (choicePosition) => {
+    let flexDirection;
+
+    switch (choicePosition) {
+      case 'left':
+        flexDirection = 'row';
+        break;
+      case 'right':
+        flexDirection = 'row-reverse';
+        break;
+      case 'below':
+        flexDirection = 'column-reverse';
+        break;
+      default:
+        // above
+        flexDirection = 'column';
+        break;
+    }
+
+    return flexDirection;
+  };
+
+  render() {
+    const {
+      markup,
+      duplicates,
+      layout,
+      value,
+      onChange,
+      choicesPosition,
+      choices,
+      correctResponse,
+      disabled,
+      feedback,
+      showCorrectAnswer,
+    } = this.props;
+
+    const choicePosition = choicesPosition || 'below';
+    const style = {
+      display: 'flex',
+      flexDirection: this.getPositionDirection(choicePosition),
+    };
+
+    return (
+      <div ref={(ref) => ref && (this.rootRef = ref)} style={style}>
+        <Choices
+          choicePosition={choicePosition}
+          duplicates={duplicates}
+          choices={choices}
+          value={value}
+          disabled={disabled}
+        />
+        <Masked
+          markup={markup}
+          layout={layout}
+          value={value}
+          choices={choices}
+          onChange={onChange}
+          disabled={disabled}
+          duplicates={duplicates}
+          feedback={feedback}
+          correctResponse={correctResponse}
+          showCorrectAnswer={showCorrectAnswer}
+        />
+      </div>
+    );
+  }
+}

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/index.js

@@ -0,0 +1,7 @@
+import { withMask, buildLayoutFromMarkup } from './with-mask';
+import DragInTheBlank from './drag-in-the-blank';
+import ConstructedResponse from './constructed-response';
+import InlineDropdown from './inline-dropdown';
+import componentize from './componentize';
+
+export { withMask, buildLayoutFromMarkup, DragInTheBlank, ConstructedResponse, InlineDropdown, componentize };

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/inline-dropdown.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Dropdown from './components/dropdown';
+import { withMask } from './with-mask';
+
+// eslint-disable-next-line react/display-name
+export default withMask('dropdown', (props) => (node, data, onChange) => {
+  const dataset = node.data ? node.data.dataset || {} : {};
+  if (dataset.component === 'dropdown') {
+    // eslint-disable-next-line react/prop-types
+    const { choices, disabled, feedback, showCorrectAnswer } = props;
+    const correctAnswer = choices && choices[dataset.id] && choices[dataset.id].find((c) => c.correct);
+    const finalChoice = showCorrectAnswer ? correctAnswer && correctAnswer.value : data[dataset.id];
+
+    return (
+      <Dropdown
+        key={`${node.type}-dropdown-${dataset.id}`}
+        correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}
+        disabled={disabled || showCorrectAnswer}
+        value={finalChoice}
+        id={dataset.id}
+        onChange={onChange}
+        choices={choices[dataset.id]}
+        showCorrectAnswer={showCorrectAnswer}
+      />
+    );
+  }
+});

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/mask.jsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from 'slate';
+import { withStyles } from '@material-ui/core/styles';
+import { MARK_TAGS } from './serialization';
+
+const Paragraph = withStyles((theme) => ({
+  para: {
+    paddingTop: 2 * theme.spacing.unit,
+    paddingBottom: 2 * theme.spacing.unit,
+  },
+}))((props) => <div className={props.classes.para}>{props.children}</div>);
+
+const restrictWhitespaceTypes = ['tbody', 'tr'];
+
+const addText = (parentNode, text) => {
+  const isWhitespace = text.trim() === '';
+  const parentType = parentNode && parentNode.type;
+
+  if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {
+    return undefined;
+  } else {
+    return text;
+  }
+};
+
+const getMark = (n) => {
+  const markTags = Object.values(MARK_TAGS);
+
+  return markTags.includes(n.type);
+};
+
+export const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode) => {
+  if (!value) {
+    return null;
+  }
+
+  const children = [];
+
+  (layout.children || []).forEach((n, index) => {
+    const key = `${n.type}-${index}`;
+
+    if (n.isMath) {
+      children.push(
+        <span dangerouslySetInnerHTML={{ __html: `<math displaystyle="true">${n.children[0].innerHTML}</math>` }} />,
+      );
+      return children;
+    }
+
+    if (rootRenderChildren) {
+      const c = rootRenderChildren(n, value, onChange);
+      if (c) {
+        children.push(c);
+        return;
+      }
+    }
+
+    if (Text.isText(n)) {
+      const content = n.text;
+      const mark = getMark(n);
+
+      if (mark) {
+        let markKey;
+
+        for (markKey in MARK_TAGS) {
+          if (MARK_TAGS[markKey] === mark.type) {
+            const Tag = markKey;
+
+            children.push(<Tag key={key}>{content}</Tag>);
+            break;
+          }
+        }
+      } else if (content.length > 0) {
+        children.push(content);
+      }
+    } else {
+      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n);
+      if (n.type === 'p' || n.type === 'paragraph') {
+        children.push(<Paragraph key={key}>{subNodes}</Paragraph>);
+      } else {
+        const Tag = n.type;
+        if (Tag !== 'source' && n.children && n.children.length > 0) {
+          children.push(
+            <Tag key={key} {...n.data.attributes}>
+              {subNodes}
+            </Tag>,
+          );
+        } else {
+          children.push(<Tag key={key} {...n.data.attributes} />);
+        }
+      }
+    }
+  });
+  return children;
+};
+
+const MaskContainer = withStyles(() => ({
+  main: {
+    display: 'initial',
+  },
+}))((props) => <div className={props.classes.main}>{props.children}</div>);
+
+/**
+ * Renders a layout that uses the slate.js Value model structure.
+ */
+export default class Mask extends React.Component {
+  static propTypes = {
+    renderChildren: PropTypes.func,
+    layout: PropTypes.object,
+    value: PropTypes.object,
+    onChange: PropTypes.func,
+  };
+
+  handleChange = (id, value) => {
+    const data = { ...this.props.value, [id]: value };
+    this.props.onChange(data);
+  };
+
+  render() {
+    const { value, layout } = this.props;
+    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);
+
+    return <MaskContainer>{children}</MaskContainer>;
+  }
+}

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/new-serialization.jsx

@@ -0,0 +1,291 @@
+import TestSerializer from './test-serializer';
+import React from 'react';
+import debug from 'debug';
+import { object as toStyleObject } from 'to-style';
+
+import { serialization as imgSerialization } from './plugins/image';
+import { serialization as mathSerialization } from './plugins/math';
+import { serialization as mediaSerialization } from './plugins/media';
+import { serialization as listSerialization } from './plugins/list';
+import { serialization as tableSerialization } from './plugins/table';
+import { serialization as responseAreaSerialization } from './plugins/respArea';
+import { Mark, Value } from 'slate';
+import { jsx } from 'slate-hyperscript';
+
+const log = debug('@pie-lib:editable-html:serialization');
+
+/**
+ * Tags to blocks.
+ *
+ * @type {Object}
+ */
+
+export const BLOCK_TAGS = {
+  div: 'div',
+  span: 'span',
+  p: 'paragraph',
+  blockquote: 'quote',
+  pre: 'code',
+  h1: 'heading-one',
+  h2: 'heading-two',
+  h3: 'heading-three',
+  h4: 'heading-four',
+  h5: 'heading-five',
+  h6: 'heading-six',
+};
+
+/**
+ * Tags to marks.
+ *
+ * @type {Object}
+ */
+
+const MARK_TAGS = {
+  b: 'bold',
+  em: 'italic',
+  u: 'underline',
+  s: 'strikethrough',
+  code: 'code',
+  strong: 'bold',
+};
+
+export const parseStyleString = (s) => {
+  const regex = /([\w-]*)\s*:\s*([^;]*)/g;
+  let match;
+  const result = {};
+  while ((match = regex.exec(s))) {
+    result[match[1]] = match[2].trim();
+  }
+  return result;
+};
+
+export const getBase64 = (file) => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = (error) => reject(error);
+  });
+};
+
+export const reactAttributes = (o) => toStyleObject(o, { camelize: true, addUnits: false });
+
+const attributesToMap = (el) => (acc, attribute) => {
+  const value = el.getAttribute(attribute);
+  if (value) {
+    if (attribute === 'style') {
+      const styleString = el.getAttribute(attribute);
+      const reactStyleObject = reactAttributes(parseStyleString(styleString));
+      acc['style'] = reactStyleObject;
+    } else {
+      acc[attribute] = el.getAttribute(attribute);
+    }
+  }
+  return acc;
+};
+
+const attributes = ['border', 'cellpadding', 'cellspacing', 'class', 'style'];
+
+/**
+ * Serializer rules.
+ *
+ * @type {Array}
+ */
+
+const blocks = {
+  deserialize(el, next) {
+    log('[blocks:deserialize] block: ', el);
+    const block = BLOCK_TAGS[el.tagName.toLowerCase()];
+    if (!block) return;
+    log('[blocks:deserialize] block: ', block);
+
+    if (el.childNodes.length === 1) {
+      const cn = el.childNodes[0];
+      if (cn && cn.tagName && cn.tagName.toLowerCase() === block) {
+        log('[we have a child node of the same]...');
+        return;
+      }
+    }
+
+    return jsx(
+      'element',
+      {
+        type: block,
+        /**
+         * Here for rendering styles for all block elements
+         */
+        data: { attributes: attributes.reduce(attributesToMap(el), {}) },
+      },
+      next(el.childNodes),
+    );
+  },
+  serialize: (object, children) => {
+    if (object.object !== 'block') return;
+
+    const jsonData = object.data.toJSON();
+
+    log('[blocks:serialize] object: ', object, children);
+    let key;
+
+    for (key in BLOCK_TAGS) {
+      if (BLOCK_TAGS[key] === object.type) {
+        const Tag = key;
+
+        return <Tag {...jsonData.attributes}>{children}</Tag>;
+      }
+    }
+  },
+};
+
+const marks = {
+  deserialize(el, next) {
+    const mark = MARK_TAGS[el.tagName.toLowerCase()];
+    if (!mark) {
+      return;
+    }
+    log('[deserialize] mark: ', mark);
+
+    return jsx('element', { type: mark }, next(el.childNodes));
+  },
+  serialize(object, children) {
+    /*if (Mark.isMark(object)) {
+      for (var key in MARK_TAGS) {
+        if (MARK_TAGS[key] === object.type) {
+          const Tag = key;
+          return <Tag>{children}</Tag>;
+        }
+      }
+    }*/
+  },
+};
+
+const findPreviousText = (el) => {
+  if (el.nodeName === '#text') {
+    return el;
+  }
+
+  if (el.previousSibling) {
+    return findPreviousText(el.previousSibling);
+  }
+
+  return null;
+};
+
+export const TEXT_RULE = {
+  deserialize(el) {
+    /**
+     * This needs to be called on the dom element in order to merge the adjacent text nodes together
+     * */
+    el.normalize();
+
+    if (el.tagName && el.tagName.toLowerCase() === 'br') {
+      return jsx('text', {});
+    }
+
+    if (el.nodeName === '#text') {
+      if (el.nodeValue && el.nodeValue.match(/<!--.*?-->/)) return;
+
+      log('[text:deserialize] return text object..');
+      return jsx('text', {}, el.nodeValue);
+    }
+  },
+
+  serialize(obj, children) {
+    if (obj.object === 'string') {
+      return children.split('\n').reduce((array, text, i) => {
+        if (i !== 0) array.push(<br />);
+        array.push(text);
+        return array;
+      }, []);
+    }
+  },
+};
+
+const RULES = [
+  listSerialization,
+  mathSerialization,
+  mediaSerialization,
+  imgSerialization,
+  tableSerialization,
+  responseAreaSerialization,
+  TEXT_RULE,
+  blocks,
+  marks,
+];
+
+function allWhitespace(node) {
+  // Use ECMA-262 Edition 3 String and RegExp features
+  return !/[^\t\n\r ]/.test(node.textContent);
+}
+
+function defaultParseHtml(html) {
+  if (typeof DOMParser === 'undefined') {
+    throw new Error(
+      'The native `DOMParser` global which the `Html` serializer uses by default is not present in this environment. You must supply the `options.parseHtml` function instead.',
+    );
+  }
+
+  const parsed = new DOMParser().parseFromString(html, 'text/html');
+
+  const { body } = parsed;
+  const textNodes = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, null, null);
+  let n = textNodes.nextNode();
+
+  while (n) {
+    if (allWhitespace(n) || n.nodeValue === '\u200B') {
+      n.parentNode.removeChild(n);
+    }
+    n = textNodes.nextNode();
+  }
+
+  return body;
+}
+
+/** If this lib is used on the server side, we need to bypass using the DOMParser - just put in a stub. */
+const parseHtml =
+  typeof window === 'undefined'
+    ? () => ({
+        childNodes: [],
+      })
+    : defaultParseHtml;
+
+const serializer = new TestSerializer({
+  defaultBlock: 'div',
+  rules: RULES,
+  parseHtml,
+});
+
+const _extends =
+  Object.assign ||
+  function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+export const htmlToValue = (html) => {
+  try {
+    return serializer.deserialize(html);
+  } catch (e) {
+    console.log("Couldn't parse html: ", e);
+    return {};
+  }
+};
+
+export const valueToHtml = (value) => serializer.serialize(value);
+
+/**
+ *
+ * <div><div>a</div></div> -> <div>a</div>
+ *
+ * <div><div>a</div><div>b</div></div> -> <div>a</div><div>b</div>
+ * <div><div>a</div>4444<div>b</div></div> -> <div>a</div>4444<div>b</div>
+ */

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/mask-markup/parse-html.js

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