@pie-element/complex-rubric 4.0.0 → 5.0.1-esmbeta.0

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/src/plugins/image/image-toolbar.jsx

@@ -0,0 +1,100 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import debug from 'debug';
+import ReactDOM from 'react-dom';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+
+import { MarkButton } from '../toolbar/toolbar-buttons';
+import AltDialog from './alt-dialog';
+
+const log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');
+
+const AlignmentButton = ({ alignment, active, onClick }) => {
+  return (
+    <MarkButton active={active} onToggle={() => onClick(alignment)} label={alignment}>
+      {alignment}
+    </MarkButton>
+  );
+};
+
+AlignmentButton.propTypes = {
+  alignment: PropTypes.string.isRequired,
+  active: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+export class ImageToolbar extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+    alignment: PropTypes.string,
+    alt: PropTypes.string,
+    imageLoaded: PropTypes.bool,
+    disableImageAlignmentButtons: PropTypes.bool,
+  };
+
+  onAltTextDone = (newAlt) => {
+    log('[onAltTextDone]: alt:', newAlt);
+
+    this.props.onChange({ alt: newAlt }, true);
+  };
+
+  onAlignmentClick = (alignment) => {
+    log('[onAlignmentClick]: alignment:', alignment);
+    this.props.onChange({ alignment });
+  };
+
+  renderDialog = () => {
+    const { alt } = this.props;
+    const popoverEl = document.createElement('div');
+
+    const el = <AltDialog alt={alt} onDone={this.onAltTextDone} />;
+
+    ReactDOM.render(el, popoverEl);
+
+    document.body.appendChild(popoverEl);
+  };
+
+  render() {
+    const { classes, alignment, imageLoaded, disableImageAlignmentButtons } = this.props;
+    return (
+      <div className={classes.holder}>
+        {!disableImageAlignmentButtons && (
+          <>
+            <AlignmentButton alignment={'left'} active={alignment === 'left'} onClick={this.onAlignmentClick} />
+            <AlignmentButton alignment={'center'} active={alignment === 'center'} onClick={this.onAlignmentClick} />
+            <AlignmentButton alignment={'right'} active={alignment === 'right'} onClick={this.onAlignmentClick} />
+          </>
+        )}
+        <span
+          className={classNames({
+            [classes.disabled]: !imageLoaded,
+            [classes.altButton]: !disableImageAlignmentButtons,
+          })}
+          onMouseDown={(event) => imageLoaded && this.renderDialog(event)}
+        >
+          Alt text
+        </span>
+      </div>
+    );
+  }
+}
+
+const styles = (theme) => ({
+  holder: {
+    paddingLeft: theme.spacing.unit,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  altButton: {
+    borderLeft: '1px solid grey',
+    paddingLeft: 8,
+    marginLeft: 4,
+  },
+});
+
+export default withStyles(styles)(ImageToolbar);

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/src/plugins/image/index.jsx

@@ -0,0 +1,227 @@
+import { Data, Inline } 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 React from 'react';
+import debug from 'debug';
+
+const log = debug('@pie-lib:editable-html:plugins:image');
+
+export default function ImagePlugin(opts) {
+  const toolbar = opts.insertImageRequested && {
+    icon: <Image />,
+    ariaLabel: 'Insert Image',
+    onClick: (value, onChange) => {
+      log('[toolbar] onClick');
+      const inline = Inline.create({
+        type: 'image',
+        isVoid: true,
+        data: {
+          loaded: false,
+          src: undefined,
+        },
+      });
+
+      const change = value.change().insertInline(inline);
+
+      onChange(change);
+      opts.insertImageRequested(
+        inline,
+        (onFinish, getValue) => new InsertImageHandler(inline, onFinish, getValue, onChange),
+      );
+    },
+    supports: (node) => node.object === 'inline' && node.type === 'image',
+    customToolbar: (node, value, onToolbarDone) => {
+      const alignment = node.data.get('alignment');
+      const alt = node.data.get('alt');
+      const imageLoaded = node.data.get('loaded') !== false;
+      const onChange = (newValues, done) => {
+        const update = {
+          ...node.data.toObject(),
+          ...newValues,
+        };
+
+        const change = value.change().setNodeByKey(node.key, { data: update });
+        onToolbarDone(change, done);
+      };
+
+      const Tb = () => (
+        <ImageToolbar
+          disableImageAlignmentButtons={opts.disableImageAlignmentButtons}
+          alt={alt}
+          imageLoaded={imageLoaded}
+          alignment={alignment || 'left'}
+          onChange={onChange}
+        />
+      );
+      return Tb;
+    },
+    showDone: true,
+  };
+
+  return {
+    name: 'image',
+    toolbar,
+    deleteNode: (e, node, value, onChange) => {
+      e.preventDefault();
+      if (opts.onDelete) {
+        const update = node.data.merge(Data.create({ deleteStatus: 'pending' }));
+
+        let change = value.change().setNodeByKey(node.key, { data: update });
+
+        onChange(change);
+        opts.onDelete(node, (err, v) => {
+          if (!err) {
+            change = v.change().removeNodeByKey(node.key);
+          } else {
+            log('[error]: ', err);
+            change = v.change().setNodeByKey(node.key, node.data.merge(Data.create({ deleteStatus: 'failed' })));
+          }
+          onChange(change);
+        });
+      } else {
+        let change = value.change().removeNodeByKey(node.key);
+        onChange(change);
+      }
+    },
+    stopReset: (value) => {
+      const imgPendingInsertion = value.document.findDescendant((n) => {
+        if (n.type !== 'image') {
+          return;
+        }
+        return n.data.get('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} />;
+      }
+    },
+    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 = {
+      object: 'inline',
+      type: 'image',
+      isVoid: true,
+      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 src = data.get('src');
+    const width = data.get('width');
+    const height = data.get('height');
+    const alignment = data.get('alignment') || 'left';
+    const margin = data.get('margin');
+    const justifyContent = data.get('margin');
+    const alt = data.get('alt');
+    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/rubric/configure/node_modules/@pie-lib/editable-html/src/plugins/image/insert-image-handler.js

@@ -0,0 +1,117 @@
+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');
+
+    try {
+      const value = this.getValue();
+      const child = this.getPlaceholderInDocument(value);
+
+      if (child) {
+        const c = value.change().removeNodeByKey(child.key);
+        this.onChange(c);
+        this.onFinish(false);
+      }
+    } catch (err) {
+      //
+    }
+  }
+
+  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;