@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/editable-html/serialization.jsx

@@ -0,0 +1,446 @@
+import Html from 'slate-html-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';
+
+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 {
+      object: 'block',
+      type: block,
+      /**
+       * Here for rendering styles for all block elements
+       */
+      data: { attributes: attributes.reduce(attributesToMap(el), {}) },
+      nodes: next(el.childNodes),
+    };
+  },
+  serialize: (object, children) => {
+    if (object.object !== 'block') return;
+
+    const jsonData = object.data;
+
+    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 {
+      object: 'mark',
+      type: mark,
+      nodes: 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>;
+        }
+      }
+    }
+  },
+};
+
+// eslint-disable-next-line no-unused-vars
+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 {
+        object: 'text',
+        leaves: [
+          {
+            object: 'leaf',
+            text: '\n',
+          },
+        ],
+      };
+    }
+
+    if (el.nodeName === '#text') {
+      if (el.nodeValue && el.nodeValue.match(/<!--.*?-->/)) return;
+
+      log('[text:deserialize] return text object..');
+      return {
+        object: 'text',
+        leaves: [
+          {
+            object: 'leaf',
+            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;
+  var textNodes = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, null, null);
+  var 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 Html({
+  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;
+  };
+
+/**
+ * This is needed in order to override the function that eventually leads
+ * to the max iteration of 12, which in most cases it's not enough. The newer versions
+ * have a different way to calculate this, but updating to a newer version of slate
+ * requires a lot of work fixing other issues. So we just increase the rules by 1000,
+ * which means a lot of iterations.
+ * Below is the code that calculates the max iterations.
+ * var max = schema.stack.plugins.length + schema.rules.length + 1;
+ */
+serializer.deserialize = function deserialize(html) {
+  const options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const _options$toJSON = options.toJSON;
+  const toJSON = _options$toJSON === undefined ? false : _options$toJSON;
+  const defaultBlock = this.defaultBlock;
+  const parseHtml = this.parseHtml;
+
+  const fragment = parseHtml(html);
+  const children = Array.from(fragment.childNodes);
+  let nodes = this.deserializeElements(children);
+
+  // COMPAT: ensure that all top-level inline nodes are wrapped into a block.
+  nodes = nodes.reduce(function(memo, node, i, original) {
+    if (node.object === 'block') {
+      memo.push(node);
+      return memo;
+    }
+
+    if (i > 0 && original[i - 1].object !== 'block') {
+      const _block = memo[memo.length - 1];
+
+      _block.nodes.push(node);
+      return memo;
+    }
+
+    const block = _extends({ object: 'block', data: {}, isVoid: false }, defaultBlock, {
+      nodes: [node],
+    });
+
+    memo.push(block);
+    return memo;
+  }, []);
+
+  if (nodes.length === 0) {
+    nodes = [
+      _extends({ object: 'block', data: {}, isVoid: false }, defaultBlock, {
+        nodes: [{ object: 'text', leaves: [{ object: 'leaf', text: '', marks: [] }] }],
+      }),
+    ];
+  }
+
+  const json = {
+    object: 'value',
+    document: {
+      object: 'document',
+      data: {},
+      nodes: nodes,
+    },
+    schema: {
+      rules: [],
+    },
+  };
+
+  let i;
+
+  for (i = 0; i < 3000; i++) {
+    json.schema.rules.push({
+      match: { object: 'document' },
+      nodes: [{ match: { object: 'block' } }],
+    });
+  }
+
+  const ret = toJSON ? json : Value.fromJSON(json);
+
+  if (ret) {
+    return ret;
+  }
+
+  return null;
+};
+
+export const reduceMultipleBrs = (markup) => {
+  try {
+    return markup.replace(/(<br\s*\/?>){3,}/gi, '<br>');
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log("Couldn't remove <br/> tags: ", e);
+  }
+
+  return markup;
+};
+
+const reduceRedundantNewLineCharacters = (markup) => {
+  try {
+    return markup.replace(/\n/gi, '');
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log("Couldn't remove <br/> tags: ", e);
+  }
+
+  return markup;
+};
+
+const wrapHtmlProperly = (markup) => {
+  const el = document.createElement('div');
+
+  el.innerHTML = markup;
+
+  /**
+   * DIV elements that are at the same level as paragraphs
+   * are replaced with P elements for normalizing purposes
+   * @param el
+   */
+  const parseNode = (el) => {
+    const childArray = Array.from(el.children);
+    const hasParagraphs = childArray.find((child) => child.nodeName === 'P');
+
+    childArray.forEach((child) => {
+      // removing empty blocks
+      if ((child.nodeName === 'DIV' || child.nodeName === 'P') && child.childNodes.length === 0) {
+        child.remove();
+        return;
+      }
+
+      if (hasParagraphs && child.nodeName === 'DIV') {
+        const p = document.createElement('p');
+
+        p.innerHTML = child.innerHTML;
+        child.replaceWith(p);
+      }
+
+      parseNode(child);
+    });
+  };
+
+  parseNode(el);
+
+  return el.innerHTML;
+};
+
+export const htmlToValue = (html) => {
+  try {
+    return serializer.deserialize(wrapHtmlProperly(reduceRedundantNewLineCharacters(reduceMultipleBrs(html))));
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    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/editable-html/test-serializer.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import ReactServer from 'react-dom/server';
+import escapeHtml from 'escape-html';
+import { Text } from 'slate';
+import { jsx } from 'slate-hyperscript';
+import { MARK_TAGS } from './new-serialization';
+
+class Html {
+  constructor(props) {
+    this.defaultBlock = props.defaultBlock;
+    this.parseHtml = props.parseHtml;
+    this.rules = props.rules;
+  }
+
+  serializeEls = (node) => {
+    let children = (node.children || []).map((n) => this.serializeEls(n));
+
+    const correctRule = this.rules.reduce((res, rule) => {
+      return res || rule.serialize(node, children);
+    }, null);
+
+    if (correctRule) {
+      return correctRule;
+    }
+
+    switch (node.type) {
+      case 'quote':
+        return (
+          <blockquote>
+            <p>{children}</p>
+          </blockquote>
+        );
+      case 'paragraph':
+        return <p>{children}</p>;
+      case 'link':
+        return <a href={escapeHtml(node.url)}>{children}</a>;
+      default:
+        return children;
+    }
+  };
+
+  serialize = (node) => {
+    const deserialized = this.serializeEls(node);
+    const html = ReactServer.renderToStaticMarkup(React.createElement('body', null, deserialized));
+    const inner = html.slice(6, -7);
+    return inner;
+  };
+
+  deserialize = (html) => {
+    let body = this.parseHtml(html);
+
+    if (
+      !body.firstChild ||
+      body.firstChild.nodeType === Node.TEXT_NODE ||
+      Object.keys(MARK_TAGS).includes(body.firstChild.tagName.toLowerCase())
+    ) {
+      body = this.parseHtml(`<span>${html}</span>`);
+    }
+
+    return this.deserializeEls(body);
+  };
+
+  deserializeEls = (element, markAttributes = {}) => {
+    if (element.nodeType === Node.TEXT_NODE) {
+      return jsx('text', markAttributes, element.textContent);
+    } else if (element.nodeType !== Node.ELEMENT_NODE) {
+      return null;
+    }
+
+    const nodeAttributes = { ...markAttributes };
+
+    // define attributes for text nodes
+    if (element.nodeName === 'STRONG') {
+      nodeAttributes.bold = true;
+    }
+
+    const nextFn = (nodes) => {
+      const childNodes = Array.from(nodes);
+      const children = Array.from(childNodes)
+        .map((node) => this.deserializeEls(node, nodeAttributes))
+        .flat();
+
+      if (children.length === 0) {
+        children.push(jsx('text', nodeAttributes, ''));
+      }
+
+      return children;
+    };
+
+    const correctRule = this.rules.reduce((res, rule) => {
+      return res || rule.deserialize(element, nextFn);
+    }, null);
+
+    if (correctRule) {
+      return correctRule;
+    }
+
+    const childNodes = Array.from(element.childNodes);
+    const children = Array.from(childNodes)
+      .map((node) => this.deserializeEls(node, nodeAttributes))
+      .flat();
+
+    if (children.length === 0) {
+      children.push(jsx('text', nodeAttributes, ''));
+    }
+
+    switch (element.nodeName) {
+      case 'TABLE':
+        return jsx('element', { type: 'table' }, children);
+      case 'TBODY':
+        return jsx('element', { type: 'tbody' }, children);
+      case 'TR':
+        return jsx('element', { type: 'tr' }, children);
+      case 'TD':
+        return jsx('element', { type: 'td' }, children);
+      case 'BODY':
+        return jsx('fragment', {}, children);
+      case 'BR':
+        return '\n';
+      case 'BLOCKQUOTE':
+        return jsx('element', { type: 'quote' }, children);
+      case 'P':
+        return jsx('element', { type: 'paragraph' }, children);
+      case 'A':
+        return jsx('element', { type: 'link', url: element.getAttribute('href') }, children);
+      default:
+        return children;
+    }
+  };
+}
+
+export default Html;

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/theme.js

@@ -0,0 +1 @@
+export const primary = '#304ffe';

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

@@ -0,0 +1,61 @@
+export const defaults = {
+  correct: { type: 'default', default: 'Correct', custom: 'Correct' },
+  incorrect: { type: 'default', default: 'Incorrect', custom: 'Incorrect' },
+  partial: { type: 'default', default: 'Nearly', custom: 'Nearly' },
+  unanswered: {
+    type: 'default',
+    default: 'You have not entered a response',
+    custom: 'You have not entered a response',
+  },
+};
+
+/**
+ * @typedef {Object} FeedbackConfig
+ * @property {'default'|'none'|'custom'} type
+ * @property {string} default
+ * @property {string} custom
+ *
+ * @typedef {Object} Feedback
+ *  @property {FeedbackConfig} correct
+ *  @property {FeedbackConfig} incorrect
+ *  @property {FeedbackConfig} partial
+ */
+
+const normalizeCorrectness = (c) => {
+  if (c === 'partially-correct') {
+    return 'partial';
+  }
+  return c;
+};
+
+/**
+ * Get the feedback for the correctness
+ *
+ * @param {'correct'|'incorrect'|'partial'} correctness
+ * @param {Feedback} feedback
+ */
+export const getFeedbackForCorrectness = (correctness, feedback) =>
+  new Promise((resolve) => {
+    feedback = { ...defaults, ...feedback };
+    correctness = normalizeCorrectness(correctness);
+    const fb = feedback[correctness] || defaults[correctness] || {};
+    const d = defaults[correctness] || {};
+    getFeedback(fb, d[fb.type || 'default']).then((result) => resolve(result));
+  });
+
+/**
+ * Get the feedback from a {FeedbackConfig}
+ *
+ * @param {FeedbackConfig} feedback
+ * @param {string} fallback
+ */
+export const getFeedback = (feedback, fallback) =>
+  new Promise((resolve) => {
+    if (!feedback || feedback.type === 'none') {
+      resolve(undefined);
+      return;
+    }
+    feedback = feedback || {};
+    const out = feedback[feedback.type] || fallback;
+    resolve(out);
+  });

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/graphing/axis/arrow.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import { types } from '../../plot';
+
+const style = (theme) => ({
+  root: {
+    fill: `var(--arrow-color, ${theme.palette.common.black})`,
+  },
+});
+
+export class Arrow extends React.Component {
+  render() {
+    const { x, y, classes, className, scale } = this.props;
+    const names = classNames(classes.root, className);
+    let direction = this.props.direction || 'left';
+
+    const xv = scale.x(x);
+    const yv = scale.y(y);
+
+    let transform = '';
+
+    const getTransform = (x, y, rotate) => `translate(${x}, ${y}) rotate(${rotate})`;
+
+    if (direction === 'left') {
+      transform = getTransform(xv - 15, yv, 0);
+    }
+
+    if (direction === 'right') {
+      transform = getTransform(xv + 15, yv, 180);
+    }
+
+    if (direction === 'up') {
+      transform = getTransform(xv, yv - 15, 90);
+    }
+
+    if (direction === 'down') {
+      transform = getTransform(xv, yv + 15, 270);
+    }
+
+    return <path d="m 0,0 8,-5 0,10 -8,-5" transform={transform} className={names} />;
+  }
+}
+
+Arrow.propTypes = {
+  y: PropTypes.number,
+  x: PropTypes.number,
+  direction: PropTypes.oneOf(['left', 'right', 'up', 'down']),
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  scale: types.ScaleType.isRequired,
+};
+
+Arrow.defaultProps = {
+  y: 0,
+  x: 0,
+  direction: 'left',
+};
+
+export default withStyles(style)(Arrow);