@pie-element/complex-rubric 2.1.2-next.57 → 2.1.2-next.69

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/image/insert-image-handler.js

@@ -0,0 +1,110 @@
+import { Data } from 'slate';
+import debug from 'debug';
+
+const log = debug('@pie-lib:editable-html:image:insert-image-handler');
+
+/**
+ * Handles user selection, insertion (or cancellation) of an image into the editor.
+ * @param {Block} placeholderBlock - a block that has been added to the editor as a place holder for the image
+ * @param {Function} onFinish - a function to call if uploading fails or succeeds
+ * @param {Function} getValue - a function to return the value of the editor
+ * @param {Function} onChange - callback to notify changes applied by the handler
+ * @param {Boolean} isPasted - a boolean that keeps track if the file is pasted
+ */
+class InsertImageHandler {
+  constructor(placeholderBlock, onFinish, getValue, onChange, isPasted = false) {
+    this.placeholderBlock = placeholderBlock;
+    this.getValue = getValue;
+    this.onFinish = onFinish;
+    this.onChange = onChange;
+    this.isPasted = isPasted;
+    this.chosenFile = null;
+  }
+
+  getPlaceholderInDocument(value) {
+    const { document } = value;
+    const directChild = document.getChild(this.placeholderBlock.key);
+
+    if (directChild) {
+      return directChild;
+    }
+
+    const child = document.getDescendant(this.placeholderBlock.key);
+
+    if (child) {
+      return child;
+    } else {
+      //eslint-disable-next-line
+      throw new Error("insert-image: Can't find placeholder!");
+    }
+  }
+
+  cancel() {
+    log('insert cancelled');
+    const c = this.getValue()
+      .change()
+      .removeNodeByKey(this.placeholderBlock.key);
+    this.onChange(c);
+
+    this.onFinish(false);
+  }
+
+  done(err, src) {
+    log('done: err:', err);
+    if (err) {
+      //eslint-disable-next-line
+      console.log(err);
+      this.onFinish(false);
+    } else {
+      const value = this.getValue();
+      const child = this.getPlaceholderInDocument(value);
+      const data = child.data.merge(Data.create({ loaded: true, src, percent: 100 }));
+
+      const change = value.change().setNodeByKey(this.placeholderBlock.key, { data });
+      this.onChange(change);
+      this.onFinish(true);
+    }
+  }
+
+  /**
+   * Notify handler that the user chose a file - will create a change with a preview in the editor.
+   *
+   * @param {File} file - the file that the user chose using a file input.
+   */
+  fileChosen(file) {
+    if (!file) {
+      return;
+    }
+
+    // Save the chosen file to this.chosenFile
+    this.chosenFile = file;
+
+    log('[fileChosen] file: ', file);
+    const reader = new FileReader();
+    reader.onload = () => {
+      const value = this.getValue();
+      const dataURL = reader.result;
+      const child = this.getPlaceholderInDocument(value);
+      const data = child.data.set('src', dataURL);
+      const change = value.change().setNodeByKey(this.placeholderBlock.key, { data });
+      this.onChange(change);
+    };
+    reader.readAsDataURL(file);
+  }
+
+  progress(percent, bytes, total) {
+    log('progress: ', percent, bytes, total);
+    const value = this.getValue();
+    const child = this.getPlaceholderInDocument(value);
+    const data = child.data.set('percent', percent);
+    const change = value.change().setNodeByKey(this.placeholderBlock.key, { data });
+    this.onChange(change);
+  }
+
+  // Add a getter method to retrieve the chosen file
+  getChosenFile() {
+    return this.chosenFile;
+  }
+}
+
+export default InsertImageHandler;

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/index.jsx

@@ -0,0 +1,117 @@
+import Bold from '@material-ui/icons/FormatBold';
+//import Code from '@material-ui/icons/Code';
+import BulletedListIcon from '@material-ui/icons/FormatListBulleted';
+import NumberedListIcon from '@material-ui/icons/FormatListNumbered';
+import ImagePlugin from './image';
+import MediaPlugin from './media';
+import CharactersPlugin from './characters';
+import Italic from '@material-ui/icons/FormatItalic';
+import MathPlugin from './math';
+import React from 'react';
+import Strikethrough from '@material-ui/icons/FormatStrikethrough';
+import ToolbarPlugin from './toolbar';
+import Underline from '@material-ui/icons/FormatUnderlined';
+import compact from 'lodash/compact';
+import SoftBreakPlugin from 'slate-soft-break';
+import debug from 'debug';
+import List from './list';
+import TablePlugin from './table';
+import RespAreaPlugin from './respArea';
+import HtmlPlugin from './html';
+
+const log = debug('@pie-lib:editable-html:plugins');
+
+function MarkHotkey(options) {
+  const { type, key, icon, tag } = options;
+
+  // Return our "plugin" object, containing the `onKeyDown` handler.
+  return {
+    toolbar: {
+      isMark: true,
+      type,
+      icon,
+      onToggle: (change) => {
+        log('[onToggleMark] type: ', type);
+        return change.toggleMark(type);
+      },
+    },
+    renderMark(props) {
+      if (props.mark.type === type) {
+        const K = tag || type;
+
+        return <K>{props.children}</K>;
+      }
+    },
+    onKeyDown(event, change) {
+      // Check that the key pressed matches our `key` option.
+      if (!event.metaKey || event.key != key) return;
+
+      // Prevent the default characters from being inserted.
+      event.preventDefault();
+
+      // Toggle the mark `type`.
+      change.toggleMark(type);
+      return true;
+    },
+  };
+}
+
+export const ALL_PLUGINS = [
+  'bold',
+  // 'code',
+  'html',
+  'italic',
+  'underline',
+  'strikethrough',
+  'bulleted-list',
+  'numbered-list',
+  'image',
+  'math',
+  'languageCharacters',
+  'table',
+  'video',
+  'audio',
+  'responseArea',
+];
+
+export const DEFAULT_PLUGINS = ALL_PLUGINS.filter((plug) => plug !== 'responseArea');
+
+export const buildPlugins = (activePlugins, opts) => {
+  log('[buildPlugins] opts: ', opts);
+
+  activePlugins = activePlugins || DEFAULT_PLUGINS;
+
+  const addIf = (key, p) => activePlugins.includes(key) && p;
+  const imagePlugin = opts.image && opts.image.onDelete && ImagePlugin(opts.image);
+  const mathPlugin = MathPlugin(opts.math);
+  const respAreaPlugin =
+    opts.responseArea && opts.responseArea.type && RespAreaPlugin(opts.responseArea, compact([mathPlugin]));
+
+  return compact([
+    addIf('table', TablePlugin(opts.table, compact([imagePlugin, mathPlugin, respAreaPlugin]))),
+    addIf('bold', MarkHotkey({ key: 'b', type: 'bold', icon: <Bold />, tag: 'strong' })),
+    // addIf('code', MarkHotkey({ key: '`', type: 'code', icon: <Code /> })),
+    addIf('italic', MarkHotkey({ key: 'i', type: 'italic', icon: <Italic />, tag: 'em' })),
+    addIf(
+      'strikethrough',
+      MarkHotkey({
+        key: '~',
+        type: 'strikethrough',
+        icon: <Strikethrough />,
+        tag: 'del',
+      }),
+    ),
+    addIf('underline', MarkHotkey({ key: 'u', type: 'underline', icon: <Underline />, tag: 'u' })),
+    addIf('image', imagePlugin),
+    addIf('video', MediaPlugin('video', opts.media)),
+    addIf('audio', MediaPlugin('audio', opts.media)),
+    addIf('math', mathPlugin),
+    ...opts.languageCharacters.map((config) => addIf('languageCharacters', CharactersPlugin(config))),
+    addIf('bulleted-list', List({ key: 'l', type: 'ul_list', icon: <BulletedListIcon /> })),
+    addIf('numbered-list', List({ key: 'n', type: 'ol_list', icon: <NumberedListIcon /> })),
+    ToolbarPlugin(opts.toolbar),
+    SoftBreakPlugin({ shift: true }),
+    addIf('responseArea', respAreaPlugin),
+    addIf('html', HtmlPlugin(opts.html)),
+  ]);
+};

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/list/index.jsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import { Data } from 'slate';
+import Immutable from 'immutable';
+import PropTypes from 'prop-types';
+import EditList from 'slate-edit-list';
+import debug from 'debug';
+
+const log = debug('@pie-lib:editable-html:plugins:list');
+
+const b = (type, next, childNodes) => ({
+  object: 'block',
+  type,
+  nodes: next(childNodes),
+});
+
+export const serialization = {
+  deserialize(el, next) {
+    const name = el.tagName.toLowerCase();
+
+    if (name === 'li') {
+      return b('list_item', next, el.childNodes);
+    }
+
+    if (name === 'ul') {
+      return b('ul_list', next, el.children.length ? Array.from(el.children) : el.childNodes);
+    }
+
+    if (name === 'ol') {
+      return b('ol_list', next, el.children.length ? Array.from(el.children) : el.childNodes);
+    }
+  },
+  serialize(object, children) {
+    if (object.object !== 'block') return;
+
+    if (object.type === 'list_item') {
+      return <li>{children}</li>;
+    }
+
+    if (object.type === 'ul_list') {
+      return <ul>{children}</ul>;
+    }
+
+    if (object.type === 'ol_list') {
+      return <ol>{children}</ol>;
+    }
+  },
+};
+
+const createEditList = () => {
+  const core = EditList({
+    typeDefault: 'span',
+  });
+
+  // fix outdated schema
+  if (core.schema && core.schema.blocks) {
+    Object.keys(core.schema.blocks).forEach((key) => {
+      const block = core.schema.blocks[key];
+
+      if (block.parent) {
+        return;
+      }
+
+      block.nodes[0] = { type: block.nodes[0].types[0] };
+    });
+  }
+
+  /**
+   * This override of the core.changes.wrapInList is needed because the version
+   * of immutable that we have does not support getting the element at a specific
+   * index with a square bracket (list[0]). We have to use the list.get function instead
+   */
+
+  /**
+   * Returns the highest list of blocks that cover the current selection
+   */
+  const getHighestSelectedBlocks = (value) => {
+    const range = value.selection;
+    const document = value.document;
+
+    const startBlock = document.getClosestBlock(range.startKey);
+    const endBlock = document.getClosestBlock(range.endKey);
+
+    if (startBlock === endBlock) {
+      return Immutable.List([startBlock]);
+    }
+
+    const ancestor = document.getCommonAncestor(startBlock.key, endBlock.key);
+    const startPath = ancestor.getPath(startBlock.key);
+    const endPath = ancestor.getPath(endBlock.key);
+
+    return ancestor.nodes.slice(startPath.get(0), endPath.get(0) + 1);
+  };
+
+  /**
+   * Wrap the blocks in the current selection in a new list. Selected
+   * lists are merged together.
+   */
+  core.changes.wrapInList = function(change, type, data) {
+    const selectedBlocks = getHighestSelectedBlocks(change.value);
+
+    // Wrap in container
+    change.wrapBlock({ type: type, data: Data.create(data) }, { normalize: false });
+
+    // Wrap in list items
+    selectedBlocks.forEach(function(node) {
+      if (core.utils.isList(node)) {
+        // Merge its items with the created list
+        node.nodes.forEach(function(_ref) {
+          const key = _ref.key;
+          return change.unwrapNodeByKey(key, { normalize: false });
+        });
+      } else if (node.type !== 'list_item') {
+        change.wrapBlockByKey(node.key, 'list_item', {
+          normalize: false,
+        });
+      }
+    });
+
+    return change.normalize();
+  };
+
+  return core;
+};
+
+export default (options) => {
+  const { type, icon } = options;
+
+  const core = createEditList();
+
+  // eslint-disable-next-line react/display-name
+  core.renderNode = (props) => {
+    const { node, attributes, children } = props;
+
+    switch (node.type) {
+      case 'ul_list':
+        return <ul {...attributes}>{children}</ul>;
+      case 'ol_list':
+        return <ol {...attributes}>{children}</ol>;
+      case 'list_item':
+        return <li {...attributes}>{children}</li>;
+    }
+  };
+
+  core.toolbar = {
+    isMark: false,
+    type,
+    icon,
+    isActive: (value, type) => {
+      if (!core.utils.isSelectionInList(value)) {
+        return false;
+      }
+      const current = core.utils.getCurrentList(value);
+      return current ? current.type === type : false;
+    },
+    onClick: (value, onChange) => {
+      log('[onClick]', value);
+      const inList = core.utils.isSelectionInList(value);
+      if (inList) {
+        const change = value.change().call(core.changes.unwrapList);
+        onChange(change);
+      } else {
+        const change = value.change().call(core.changes.wrapInList, type);
+        onChange(change);
+      }
+    },
+  };
+
+  core.renderNode.propTypes = {
+    node: PropTypes.object,
+    attributes: PropTypes.object,
+    children: PropTypes.func,
+  };
+
+  return core;
+};