@pie-lib/editable-html-tip-tap 0.1.0

package/src/components/image/ImageToolbar.tsx

@@ -0,0 +1,109 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/image/ImageToolbar.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import debug from 'debug';
+import ReactDOM from 'react-dom';
+import { styled } from '@mui/material/styles';
+
+import AltDialog from './AltDialog.js';
+import { MarkButton } from '../common/toolbar-buttons.js';
+
+const log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');
+
+const StyledHolder: any = styled('div')(({ theme }) => ({
+  paddingLeft: theme.spacing.unit,
+  display: 'flex',
+  alignItems: 'center',
+}));
+
+const StyledAltText: any = styled('span', {
+  shouldForwardProp: (prop) => !['disabled', 'hasAlignmentButtons'].includes(prop),
+})(({ disabled, hasAlignmentButtons }) => ({
+  ...(disabled && {
+    opacity: 0.5,
+  }),
+  ...(hasAlignmentButtons && {
+    borderLeft: '1px solid grey',
+    paddingLeft: 8,
+    marginLeft: 4,
+  }),
+}));
+
+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,
+    alignment: PropTypes.string,
+    alt: PropTypes.string,
+    imageLoaded: PropTypes.bool,
+    disableImageAlignmentButtons: PropTypes.bool,
+  };
+
+  onAltTextDone: any = (newAlt) => {
+    log('[onAltTextDone]: alt:', newAlt);
+
+    this.props.onChange({ alt: newAlt }, true);
+  };
+
+  onAlignmentClick: any = (alignment) => {
+    log('[onAlignmentClick]: alignment:', alignment);
+    this.props.onChange({ alignment });
+  };
+
+  renderDialog: any = () => {
+    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 { alignment, imageLoaded, disableImageAlignmentButtons } = this.props;
+    return (
+      <StyledHolder>
+        {!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} />
+          </>
+        )}
+        <StyledAltText
+          disabled={!imageLoaded}
+          hasAlignmentButtons={!disableImageAlignmentButtons}
+          onMouseDown={(event) => imageLoaded && this.renderDialog(event)}
+        >
+          Alt text
+        </StyledAltText>
+      </StyledHolder>
+    );
+  }
+}
+
+export default ImageToolbar;

package/src/components/image/InsertImageHandler.ts

@@ -0,0 +1,121 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/image/InsertImageHandler.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+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, node, onFinish, isPasted = false) {
+    this.editor = editor;
+    this.node = node;
+
+    let nodePos;
+
+    editor.state.doc.descendants((node, pos) => {
+      if (node === this.node) {
+        nodePos = pos;
+        return false;
+      }
+    });
+
+    this.nodePos = nodePos;
+    this.onFinish = onFinish;
+    this.isPasted = isPasted;
+    this.chosenFile = null;
+  }
+
+  cancel() {
+    log('insert cancelled');
+
+    try {
+      this.deleteNode();
+      this.onFinish(false);
+    } catch (err) {
+      //
+    }
+  }
+
+  updateNode(newAttrs) {
+    const { state, view } = this.editor;
+    const { tr } = state;
+    const node = state.doc.nodeAt(this.nodePos);
+
+    if (node) {
+      const transaction = tr.setNodeMarkup(this.nodePos, undefined, { ...node.attrs, ...newAttrs });
+
+      view.dispatch(transaction);
+    }
+  }
+
+  deleteNode() {
+    const { state, view } = this.editor;
+    const { tr } = state;
+
+    const transaction = tr.delete(this.nodePos, this.nodePos + this.node.nodeSize);
+
+    view.dispatch(transaction);
+  }
+
+  done(err, src) {
+    log('done: err:', err);
+    if (err) {
+      //eslint-disable-next-line
+      console.log(err);
+      this.onFinish(false);
+    } else {
+      this.updateNode({ 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.updateNode({ src: dataURL });
+    };
+    reader.readAsDataURL(file);
+  }
+
+  progress(percent, bytes, total) {
+    log('progress: ', percent, bytes, total);
+    this.updateNode({ percent });
+  }
+
+  // Add a getter method to retrieve the chosen file
+  getChosenFile() {
+    return this.chosenFile;
+  }
+}
+
+export default InsertImageHandler;