@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/plugins/image/index.jsx

@@ -0,0 +1,327 @@
+import React from 'react';
+import imageExtensions from 'image-extensions';
+import isUrl from 'is-url';
+import { jsx } from 'slate-hyperscript';
+import debug from 'debug';
+import { Editor, Transforms } from 'slate';
+
+import Image from '@material-ui/icons/Image';
+import ImageComponent from './component';
+import ImageToolbar from './image-toolbar';
+import InsertImageHandler from './insert-image-handler';
+import { ReactEditor } from 'slate-react';
+
+const log = debug('@pie-lib:editable-html:plugins:image');
+
+export default function ImagePlugin(opts) {
+  const toolbar = opts.insertImageRequested && {
+    icon: <Image />,
+    onClick: (editor) => {
+      log('[toolbar] onClick');
+      const inline = {
+        type: 'image',
+        data: {
+          newImage: true,
+          loaded: false,
+          src: undefined,
+        },
+        children: [{ text: '' }],
+      };
+
+      editor.insertNode(inline);
+
+      // get the element just inserted, needed because it focuses on the empty leaf inside
+      const [node, nodePath] = Editor.parent(editor, editor.selection);
+
+      opts.insertImageRequested(node, (onFinish) => new InsertImageHandler(node, nodePath, onFinish, editor));
+    },
+    customToolbar: (node, nodePath, editor, onToolbarDone) => {
+      const alignment = node.data.alignment;
+      const alt = node.data.alt;
+      const imageLoaded = node.data.loaded !== false;
+      const onChange = (newValues) => {
+        const update = {
+          ...node.data,
+          ...newValues,
+        };
+
+        editor.apply({
+          type: 'set_node',
+          path: nodePath,
+          properties: {
+            data: node.data,
+          },
+          newProperties: { data: update },
+        });
+
+        onToolbarDone(null, false);
+      };
+
+      const Tb = () => (
+        <ImageToolbar
+          disableImageAlignmentButtons={opts.disableImageAlignmentButtons}
+          alt={alt}
+          imageLoaded={imageLoaded}
+          alignment={alignment || 'left'}
+          onChange={onChange}
+        />
+      );
+      return Tb;
+    },
+    showDone: true,
+  };
+
+  return {
+    name: 'image',
+    toolbar,
+    rules: (editor) => {
+      const { insertData, isVoid, isInline } = editor;
+
+      editor.isVoid = (element) => {
+        return element.type === 'image' ? true : isVoid(element);
+      };
+
+      editor.isInline = (element) => {
+        return element.type === 'image' ? true : isInline(element);
+      };
+
+      const isImageUrl = (url) => {
+        if (!url || !isUrl(url)) {
+          return false;
+        }
+
+        const ext = new URL(url).pathname.split('.').pop();
+
+        return imageExtensions.includes(ext);
+      };
+
+      const insertImage = (editor, fileProvided) => {
+        const image = {
+          type: 'image',
+          data: {
+            loaded: false,
+            src: '',
+          },
+          children: [{ text: '' }],
+        };
+
+        editor.insertNode(image);
+
+        // get the element just inserted, needed because it focuses on the empty leaf inside
+        const [node, nodePath] = Editor.parent(editor, editor.selection);
+
+        opts.insertImageRequested(
+          node,
+          (onFinish) => new InsertImageHandler(node, nodePath, onFinish, editor, true),
+          fileProvided,
+        );
+      };
+
+      editor.insertData = (data) => {
+        const text = data.getData('text/plain');
+        const { files } = data;
+
+        if (files && files.length > 0) {
+          for (const file of files) {
+            insertImage(editor, file);
+          }
+        } else if (isImageUrl(text)) {
+          insertImage(editor, text);
+        } else if (!editor.respAreaDrag) {
+          insertData(data);
+        }
+      };
+
+      return editor;
+    },
+    supports: (node) => node.type === 'image',
+    deleteNode: (e, node, nodePath, editor, onChange) => {
+      e.preventDefault();
+
+      if (opts.onDelete) {
+        const update = {
+          ...node.data,
+          deleteStatus: 'pending',
+        };
+
+        editor.apply({
+          type: 'set_node',
+          path: nodePath,
+          properties: {
+            data: node.data,
+          },
+          newProperties: { data: update },
+        });
+
+        editor.selection = null;
+        onChange(editor);
+        opts.onDelete(node.data.src, (err) => {
+          if (!err) {
+            editor.apply({
+              type: 'remove_node',
+              path: nodePath,
+            });
+          } else {
+            log('[error]: ', err);
+            editor.apply({
+              type: 'set_node',
+              path: nodePath,
+              properties: {
+                data: node.data,
+              },
+              newProperties: { data: { ...node.data, deleteStatus: 'failed' } },
+            });
+          }
+
+          editor.selection = null;
+          onChange(editor, () => {
+            setTimeout(() => ReactEditor.focus(editor), 50);
+          });
+        });
+      } else {
+        editor.selection = null;
+        editor.apply({
+          type: 'remove_node',
+          path: nodePath,
+        });
+        onChange(editor, () => {
+          setTimeout(() => ReactEditor.focus(editor), 50);
+        });
+      }
+    },
+    stopReset: (value) => {
+      const imgPendingInsertion = value.document.findDescendant((n) => {
+        if (n.type !== 'image') {
+          return;
+        }
+        return n.data.loaded === false;
+      });
+      /** don't reset if there is an image pending insertion */
+      return imgPendingInsertion !== undefined && imgPendingInsertion !== null;
+    },
+    renderNode(props) {
+      if (props.node.type === 'image') {
+        const all = Object.assign(
+          {
+            onDelete: opts.onDelete,
+            onFocus: opts.onFocus,
+            onBlur: opts.onBlur,
+            maxImageWidth: opts.maxImageWidth,
+            maxImageHeight: opts.maxImageHeight,
+          },
+          props,
+        );
+        return (
+          <ImageComponent {...all} contentEditable={false}>
+            {props.children}
+          </ImageComponent>
+        );
+      }
+    },
+    normalizeNode: (node) => {
+      const textNodeMap = {};
+      const updateNodesArray = [];
+      let index = 0;
+
+      if (node.object !== 'document') return;
+
+      node.findDescendant((d) => {
+        if (d.object === 'text') {
+          textNodeMap[index] = d;
+        }
+
+        if (d.type === 'image') {
+          if (index > 0 && textNodeMap[index - 1] && textNodeMap[index - 1].text === '') {
+            updateNodesArray.push(textNodeMap[index - 1]);
+          }
+        }
+
+        index++;
+      });
+
+      if (!updateNodesArray.length) return;
+
+      return (change) => {
+        change.withoutNormalization(() => {
+          updateNodesArray.forEach((n) => change.insertTextByKey(n.key, 0, ' '));
+        });
+      };
+    },
+  };
+}
+
+export const serialization = {
+  deserialize(el /*, next*/) {
+    const name = el.tagName.toLowerCase();
+    if (name !== 'img') return;
+
+    log('deserialize: ', name);
+    const style = el.style || { width: '', height: '', margin: '', justifyContent: '' };
+    const width = parseInt(style.width.replace('px', ''), 10) || null;
+    const height = parseInt(style.height.replace('px', ''), 10) || null;
+
+    const out = jsx('element', {
+      type: 'image',
+      data: {
+        src: el.getAttribute('src'),
+        width,
+        height,
+        margin: el.style.margin,
+        justifyContent: el.style.justifyContent,
+        alignment: el.getAttribute('alignment'),
+        alt: el.getAttribute('alt'),
+      },
+    });
+    log('return object: ', out);
+    return out;
+  },
+  serialize(object /*, children*/) {
+    if (object.type !== 'image') return;
+
+    const { data } = object;
+    const { alignment, alt, src, height, margin, justifyContent, width } = data;
+    const style = {};
+
+    if (width) {
+      style.width = `${width}px`;
+    }
+
+    if (height) {
+      style.height = `${height}px`;
+    }
+
+    style.margin = margin;
+    style.justifyContent = justifyContent;
+
+    if (alignment) {
+      switch (alignment) {
+        case 'left':
+          style.justifyContent = 'flex-start';
+          style.margin = '0';
+          break;
+        case 'center':
+          style.justifyContent = 'center';
+          style.margin = '0 auto';
+          break;
+        case 'right':
+          style.justifyContent = 'flex-end';
+          style.margin = 'auto 0 0 auto';
+          break;
+        default:
+          style.justifyContent = 'flex-start';
+          break;
+      }
+    }
+
+    style.objectFit = 'contain';
+
+    const props = {
+      src,
+      style,
+      alignment,
+      alt,
+    };
+
+    return <img {...props} />;
+  },
+};

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

@@ -0,0 +1,128 @@
+import omit from 'lodash/omit';
+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} placeHolderPath - a block that has been added to the editor as a place holder for the image
+ * @param {Function} getValue - a function to return the value of the editor
+ * @param {Function} onFinish - a function to call if uploading fails or succeeds
+ * @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(node, placeHolderPath, onFinish, editor, isPasted = false) {
+    this.node = node;
+    this.onFinish = onFinish;
+    this.placeHolderPath = placeHolderPath;
+    this.editor = editor;
+    this.isPasted = isPasted;
+    this.chosenFile = null;
+  }
+
+  cancel() {
+    log('insert cancelled');
+    this.editor.apply({
+      type: 'remove_node',
+      path: this.placeHolderPath,
+    });
+
+    this.onFinish(false);
+  }
+
+  done(err, src) {
+    log('done: err:', err);
+    if (err) {
+      //eslint-disable-next-line
+      console.log(err);
+      this.onFinish(false);
+    } else {
+      this.editor.apply({
+        type: 'set_node',
+        path: this.placeHolderPath,
+        properties: {
+          data: this.node.data,
+        },
+        newProperties: {
+          data: {
+            src,
+            loaded: true,
+            percent: 100,
+          },
+        },
+      });
+      const newData = {
+        ...this.node.data,
+        src,
+        loaded: true,
+        percent: 100,
+      };
+
+      this.node = Object.assign({}, this.node, {
+        data: omit(newData, 'newImage'),
+      });
+
+      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 dataURL = reader.result;
+
+      this.editor.apply({
+        type: 'set_node',
+        path: this.placeHolderPath,
+        properties: {
+          data: this.node.data,
+        },
+        newProperties: {
+          data: {
+            ...this.node.data,
+            src: dataURL,
+          },
+        },
+      });
+      this.node = Object.assign({}, this.node, { data: { src: dataURL } });
+    };
+    reader.readAsDataURL(file);
+  }
+
+  progress(percent, bytes, total) {
+    log('progress: ', percent, bytes, total);
+
+    this.editor.apply({
+      type: 'set_node',
+      path: this.placeHolderPath,
+      properties: {
+        data: this.node.data,
+      },
+      newProperties: {
+        data: { ...this.node.data, percent },
+      },
+    });
+    this.node = Object.assign({}, this.node, { data: { percent } });
+  }
+
+  // Add a getter method to retrieve the chosen file
+  getChosenFile() {
+    return this.chosenFile;
+  }
+}
+
+export default InsertImageHandler;

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

@@ -0,0 +1,104 @@
+import { Editor } from 'slate';
+import { withHistory } from 'slate-history';
+import { withReact } from 'slate-react';
+
+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 MarkHotkey from './hotKeys';
+import HtmlPlugin from './html';
+
+const log = debug('@pie-lib:editable-html:plugins');
+
+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)),
+  ]);
+};
+
+export const withPlugins = (editor, activePlugins) => {
+  editor = withHistory(withReact(editor));
+
+  editor.continueNormalization = () => {
+    Editor.setNormalizing(editor, true);
+    Editor.normalize(editor, { force: true });
+  };
+
+  activePlugins.forEach((plugin) => {
+    if (typeof plugin.rules === 'function') {
+      plugin.rules(editor);
+    }
+  });
+
+  return editor;
+};

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

@@ -0,0 +1,147 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import debug from 'debug';
+import { Editor, Element as SlateElement, Transforms } from 'slate';
+import { jsx } from 'slate-hyperscript';
+
+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();
+    const children = el.children.length ? Array.from(el.children) : el.childNodes;
+
+    if (name === 'li') {
+      return jsx(
+        'element',
+        {
+          type: 'li',
+        },
+        next(children),
+      );
+    }
+
+    if (name === 'ul') {
+      return jsx(
+        'element',
+        {
+          type: 'ul',
+        },
+        next(children),
+      );
+    }
+
+    if (name === 'ol') {
+      return jsx(
+        'element',
+        {
+          type: 'ol',
+        },
+        next(children),
+      );
+    }
+  },
+  serialize(object, children) {
+    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 isBlockActive = (editor, format) => {
+  const { selection } = editor;
+  if (!selection) return false;
+
+  const [match] = Array.from(
+    Editor.nodes(editor, {
+      at: Editor.unhangRange(editor, selection),
+      match: (node) => !Editor.isEditor(node) && SlateElement.isElement(node) && node.type === format,
+    }),
+  );
+
+  return !!match;
+};
+
+const createEditList = () => {
+  const core = {
+    changes: {},
+  };
+
+  core.changes.wrapInList = (editor, format) => {
+    const isActive = isBlockActive(editor, format);
+    const isList = LIST_TYPES.includes(format);
+
+    Transforms.unwrapNodes(editor, {
+      match: (n) => !Editor.isEditor(n) && SlateElement.isElement(n) && LIST_TYPES.includes(n.type),
+      split: true,
+    });
+
+    const newProperties = {
+      type: isActive ? 'paragraph' : isList ? 'list_item' : format,
+    };
+
+    Transforms.setNodes(editor, newProperties);
+
+    if (!isActive && isList) {
+      const block = { type: format, children: [] };
+      Transforms.wrapNodes(editor, block);
+    }
+  };
+
+  return core;
+};
+
+const LIST_TYPES = ['ol_list', 'ul_list', 'list_item'];
+
+export default (options) => {
+  const { type, icon } = options;
+
+  const core = createEditList();
+
+  core.supports = (node) => LIST_TYPES.includes(node.type);
+
+  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: isBlockActive,
+    onClick: (editor) => {
+      core.changes.wrapInList(editor, type);
+    },
+  };
+
+  core.renderNode.propTypes = {
+    node: PropTypes.object,
+    attributes: PropTypes.object,
+    children: PropTypes.func,
+  };
+
+  return core;
+};