@pie-lib/editable-html-tip-tap 1.0.1 → 1.0.3

package/src/plugins/image/image-toolbar.jsx

@@ -1,100 +0,0 @@
-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/src/plugins/image/index.jsx

@@ -1,227 +0,0 @@
-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/src/plugins/image/insert-image-handler.js

@@ -1,79 +0,0 @@
-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(editor, onFinish, isPasted = false) {
-    this.editor = editor;
-    this.onFinish = onFinish;
-    this.isPasted = isPasted;
-    this.chosenFile = null;
-  }
-
-  cancel() {
-    log('insert cancelled');
-
-    try {
-      this.editor.commands.deleteNode('imageUploadNode');
-      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 {
-      this.editor.commands.updateAttributes('imageUploadNode', { loaded: true, src, percent: 100 });
-      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.commands.updateAttributes('imageUploadNode', { src: dataURL });
-    };
-    reader.readAsDataURL(file);
-  }
-
-  progress(percent, bytes, total) {
-    log('progress: ', percent, bytes, total);
-    this.editor.commands.updateAttributes('imageUploadNode', { percent });
-  }
-
-  // Add a getter method to retrieve the chosen file
-  getChosenFile() {
-    return this.chosenFile;
-  }
-}
-
-export default InsertImageHandler;