@pie-lib/editable-html-tip-tap 2.1.2-next.31 → 2.1.2-next.36

package/lib/components/image/ImageToolbar.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ImageToolbar = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _debug = _interopRequireDefault(require("debug"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _styles = require("@mui/material/styles");
+var _AltDialog = _interopRequireDefault(require("./AltDialog"));
+var _toolbarButtons = require("../common/toolbar-buttons");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:image:image-toolbar');
+var StyledHolder = (0, _styles.styled)('div')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    paddingLeft: theme.spacing.unit,
+    display: 'flex',
+    alignItems: 'center'
+  };
+});
+var StyledAltText = (0, _styles.styled)('span', {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['disabled', 'hasAlignmentButtons'].includes(prop);
+  }
+})(function (_ref2) {
+  var disabled = _ref2.disabled,
+    hasAlignmentButtons = _ref2.hasAlignmentButtons;
+  return _objectSpread(_objectSpread({}, disabled && {
+    opacity: 0.5
+  }), hasAlignmentButtons && {
+    borderLeft: '1px solid grey',
+    paddingLeft: 8,
+    marginLeft: 4
+  });
+});
+var AlignmentButton = function AlignmentButton(_ref3) {
+  var alignment = _ref3.alignment,
+    active = _ref3.active,
+    onClick = _ref3.onClick;
+  return /*#__PURE__*/_react["default"].createElement(_toolbarButtons.MarkButton, {
+    active: active,
+    onToggle: function onToggle() {
+      return onClick(alignment);
+    },
+    label: alignment
+  }, alignment);
+};
+AlignmentButton.propTypes = {
+  alignment: _propTypes["default"].string.isRequired,
+  active: _propTypes["default"].bool.isRequired,
+  onClick: _propTypes["default"].func.isRequired
+};
+var ImageToolbar = exports.ImageToolbar = /*#__PURE__*/function (_React$Component) {
+  function ImageToolbar() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, ImageToolbar);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ImageToolbar, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "onAltTextDone", function (newAlt) {
+      log('[onAltTextDone]: alt:', newAlt);
+      _this.props.onChange({
+        alt: newAlt
+      }, true);
+    });
+    (0, _defineProperty2["default"])(_this, "onAlignmentClick", function (alignment) {
+      log('[onAlignmentClick]: alignment:', alignment);
+      _this.props.onChange({
+        alignment: alignment
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "renderDialog", function () {
+      var alt = _this.props.alt;
+      var popoverEl = document.createElement('div');
+      var el = /*#__PURE__*/_react["default"].createElement(_AltDialog["default"], {
+        alt: alt,
+        onDone: _this.onAltTextDone
+      });
+      _reactDom["default"].render(el, popoverEl);
+      document.body.appendChild(popoverEl);
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(ImageToolbar, _React$Component);
+  return (0, _createClass2["default"])(ImageToolbar, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        alignment = _this$props.alignment,
+        imageLoaded = _this$props.imageLoaded,
+        disableImageAlignmentButtons = _this$props.disableImageAlignmentButtons;
+      return /*#__PURE__*/_react["default"].createElement(StyledHolder, null, !disableImageAlignmentButtons && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(AlignmentButton, {
+        alignment: 'left',
+        active: alignment === 'left',
+        onClick: this.onAlignmentClick
+      }), /*#__PURE__*/_react["default"].createElement(AlignmentButton, {
+        alignment: 'center',
+        active: alignment === 'center',
+        onClick: this.onAlignmentClick
+      }), /*#__PURE__*/_react["default"].createElement(AlignmentButton, {
+        alignment: 'right',
+        active: alignment === 'right',
+        onClick: this.onAlignmentClick
+      })), /*#__PURE__*/_react["default"].createElement(StyledAltText, {
+        disabled: !imageLoaded,
+        hasAlignmentButtons: !disableImageAlignmentButtons,
+        onMouseDown: function onMouseDown(event) {
+          return imageLoaded && _this2.renderDialog(event);
+        }
+      }, "Alt text"));
+    }
+  }]);
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(ImageToolbar, "propTypes", {
+  onChange: _propTypes["default"].func.isRequired,
+  alignment: _propTypes["default"].string,
+  alt: _propTypes["default"].string,
+  imageLoaded: _propTypes["default"].bool,
+  disableImageAlignmentButtons: _propTypes["default"].bool
+});
+var _default = exports["default"] = ImageToolbar;
+//# sourceMappingURL=ImageToolbar.js.map

package/lib/components/image/ImageToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageToolbar.js","names":["_propTypes","_interopRequireDefault","require","_react","_debug","_reactDom","_styles","_AltDialog","_toolbarButtons","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","ownKeys","r","Object","keys","getOwnPropertySymbols","filter","getOwnPropertyDescriptor","enumerable","push","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","log","debug","StyledHolder","styled","_ref","theme","paddingLeft","spacing","unit","display","alignItems","StyledAltText","shouldForwardProp","prop","includes","_ref2","disabled","hasAlignmentButtons","opacity","borderLeft","marginLeft","AlignmentButton","_ref3","alignment","active","onClick","createElement","MarkButton","onToggle","label","propTypes","PropTypes","string","isRequired","bool","func","ImageToolbar","exports","_React$Component","_this","_classCallCheck2","_len","args","Array","_key","concat","newAlt","props","onChange","alt","popoverEl","document","el","onDone","onAltTextDone","ReactDOM","render","body","appendChild","_inherits2","_createClass2","key","value","_this2","_this$props","imageLoaded","disableImageAlignmentButtons","Fragment","onAlignmentClick","onMouseDown","event","renderDialog","React","Component","_default"],"sources":["../../../src/components/image/ImageToolbar.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport ReactDOM from 'react-dom';\nimport { styled } from '@mui/material/styles';\n\nimport AltDialog from './AltDialog';\nimport { MarkButton } from '../common/toolbar-buttons';\n\nconst log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');\n\nconst StyledHolder = styled('div')(({ theme }) => ({\n  paddingLeft: theme.spacing.unit,\n  display: 'flex',\n  alignItems: 'center',\n}));\n\nconst StyledAltText = styled('span', {\n  shouldForwardProp: (prop) => !['disabled', 'hasAlignmentButtons'].includes(prop),\n})(({ disabled, hasAlignmentButtons }) => ({\n  ...(disabled && {\n    opacity: 0.5,\n  }),\n  ...(hasAlignmentButtons && {\n    borderLeft: '1px solid grey',\n    paddingLeft: 8,\n    marginLeft: 4,\n  }),\n}));\n\nconst AlignmentButton = ({ alignment, active, onClick }) => {\n  return (\n    <MarkButton active={active} onToggle={() => onClick(alignment)} label={alignment}>\n      {alignment}\n    </MarkButton>\n  );\n};\n\nAlignmentButton.propTypes = {\n  alignment: PropTypes.string.isRequired,\n  active: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n};\n\nexport class ImageToolbar extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func.isRequired,\n    alignment: PropTypes.string,\n    alt: PropTypes.string,\n    imageLoaded: PropTypes.bool,\n    disableImageAlignmentButtons: PropTypes.bool,\n  };\n\n  onAltTextDone = (newAlt) => {\n    log('[onAltTextDone]: alt:', newAlt);\n\n    this.props.onChange({ alt: newAlt }, true);\n  };\n\n  onAlignmentClick = (alignment) => {\n    log('[onAlignmentClick]: alignment:', alignment);\n    this.props.onChange({ alignment });\n  };\n\n  renderDialog = () => {\n    const { alt } = this.props;\n    const popoverEl = document.createElement('div');\n\n    const el = <AltDialog alt={alt} onDone={this.onAltTextDone} />;\n\n    ReactDOM.render(el, popoverEl);\n\n    document.body.appendChild(popoverEl);\n  };\n\n  render() {\n    const { alignment, imageLoaded, disableImageAlignmentButtons } = this.props;\n    return (\n      <StyledHolder>\n        {!disableImageAlignmentButtons && (\n          <>\n            <AlignmentButton alignment={'left'} active={alignment === 'left'} onClick={this.onAlignmentClick} />\n            <AlignmentButton alignment={'center'} active={alignment === 'center'} onClick={this.onAlignmentClick} />\n            <AlignmentButton alignment={'right'} active={alignment === 'right'} onClick={this.onAlignmentClick} />\n          </>\n        )}\n        <StyledAltText\n          disabled={!imageLoaded}\n          hasAlignmentButtons={!disableImageAlignmentButtons}\n          onMouseDown={(event) => imageLoaded && this.renderDialog(event)}\n        >\n          Alt text\n        </StyledAltText>\n      </StyledHolder>\n    );\n  }\n}\n\nexport default ImageToolbar;\n"],"mappings":"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","ignoreList":[]}

package/lib/components/image/InsertImageHandler.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _debug = _interopRequireDefault(require("debug"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var log = (0, _debug["default"])('@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
+ */
+var InsertImageHandler = /*#__PURE__*/function () {
+  function InsertImageHandler(editor, nodeInfo, onFinish) {
+    var isPasted = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    (0, _classCallCheck2["default"])(this, InsertImageHandler);
+    this.editor = editor;
+    this.nodeInfo = nodeInfo;
+    this.node = nodeInfo[0];
+    this.nodePos = nodeInfo[1];
+    this.onFinish = onFinish;
+    this.isPasted = isPasted;
+    this.chosenFile = null;
+  }
+  return (0, _createClass2["default"])(InsertImageHandler, [{
+    key: "cancel",
+    value: function cancel() {
+      log('insert cancelled');
+      try {
+        this.deleteNode();
+        this.onFinish(false);
+      } catch (err) {
+        //
+      } finally {
+        this.editor._insertingImage = false;
+      }
+    }
+  }, {
+    key: "updateNode",
+    value: function updateNode(newAttrs) {
+      var _this$editor = this.editor,
+        state = _this$editor.state,
+        view = _this$editor.view;
+      var tr = state.tr;
+      var node = state.doc.nodeAt(this.nodePos);
+      if (node) {
+        var transaction = tr.setNodeMarkup(this.nodePos, undefined, _objectSpread(_objectSpread({}, node.attrs), newAttrs));
+        view.dispatch(transaction);
+      }
+    }
+  }, {
+    key: "deleteNode",
+    value: function deleteNode() {
+      var _this$editor2 = this.editor,
+        state = _this$editor2.state,
+        view = _this$editor2.view;
+      var tr = state.tr;
+      var transaction = tr["delete"](this.nodePos, this.nodePos + this.node.nodeSize);
+      view.dispatch(transaction);
+    }
+  }, {
+    key: "done",
+    value: function 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: src,
+          percent: 100
+        });
+        this.onFinish(true);
+      }
+      this.editor._insertingImage = false;
+    }
+
+    /**
+     * 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.
+     */
+  }, {
+    key: "fileChosen",
+    value: function fileChosen(file) {
+      var _this = this;
+      if (!file) {
+        return;
+      }
+
+      // Save the chosen file to this.chosenFile
+      this.chosenFile = file;
+      this.editor._insertingImage = false;
+      log('[fileChosen] file: ', file);
+      var reader = new FileReader();
+      reader.onload = function () {
+        var dataURL = reader.result;
+        _this.updateNode({
+          src: dataURL
+        });
+      };
+      reader.readAsDataURL(file);
+    }
+  }, {
+    key: "progress",
+    value: function progress(percent, bytes, total) {
+      log('progress: ', percent, bytes, total);
+      this.updateNode({
+        percent: percent
+      });
+    }
+
+    // Add a getter method to retrieve the chosen file
+  }, {
+    key: "getChosenFile",
+    value: function getChosenFile() {
+      return this.chosenFile;
+    }
+  }]);
+}();
+var _default = exports["default"] = InsertImageHandler;
+//# sourceMappingURL=InsertImageHandler.js.map

package/lib/components/image/InsertImageHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InsertImageHandler.js","names":["_debug","_interopRequireDefault","require","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","log","debug","InsertImageHandler","editor","nodeInfo","onFinish","isPasted","undefined","_classCallCheck2","node","nodePos","chosenFile","_createClass2","key","value","cancel","deleteNode","err","_insertingImage","updateNode","newAttrs","_this$editor","state","view","tr","doc","nodeAt","transaction","setNodeMarkup","attrs","dispatch","_this$editor2","nodeSize","done","src","console","loaded","percent","fileChosen","file","_this","reader","FileReader","onload","dataURL","result","readAsDataURL","progress","bytes","total","getChosenFile","_default","exports"],"sources":["../../../src/components/image/InsertImageHandler.js"],"sourcesContent":["import debug from 'debug';\n\nconst log = debug('@pie-lib:editable-html:image:insert-image-handler');\n\n/**\n * Handles user selection, insertion (or cancellation) of an image into the editor.\n * @param {Block} placeholderBlock - a block that has been added to the editor as a place holder for the image\n * @param {Function} onFinish - a function to call if uploading fails or succeeds\n * @param {Function} getValue - a function to return the value of the editor\n * @param {Function} onChange - callback to notify changes applied by the handler\n * @param {Boolean} isPasted - a boolean that keeps track if the file is pasted\n */\nclass InsertImageHandler {\n  constructor(editor, nodeInfo, onFinish, isPasted = false) {\n    this.editor = editor;\n    this.nodeInfo = nodeInfo;\n    this.node = nodeInfo[0];\n    this.nodePos = nodeInfo[1];\n    this.onFinish = onFinish;\n    this.isPasted = isPasted;\n    this.chosenFile = null;\n  }\n\n  cancel() {\n    log('insert cancelled');\n\n    try {\n      this.deleteNode();\n      this.onFinish(false);\n    } catch (err) {\n      //\n    } finally {\n      this.editor._insertingImage = false;\n    }\n  }\n\n  updateNode(newAttrs) {\n    const { state, view } = this.editor;\n    const { tr } = state;\n    const node = state.doc.nodeAt(this.nodePos);\n\n    if (node) {\n      const transaction = tr.setNodeMarkup(this.nodePos, undefined, { ...node.attrs, ...newAttrs });\n\n      view.dispatch(transaction);\n    }\n  }\n\n  deleteNode() {\n    const { state, view } = this.editor;\n    const { tr } = state;\n\n    const transaction = tr.delete(this.nodePos, this.nodePos + this.node.nodeSize);\n\n    view.dispatch(transaction);\n  }\n\n  done(err, src) {\n    log('done: err:', err);\n    if (err) {\n      //eslint-disable-next-line\n      console.log(err);\n      this.onFinish(false);\n    } else {\n      this.updateNode({ loaded: true, src, percent: 100 });\n      this.onFinish(true);\n    }\n\n    this.editor._insertingImage = false;\n  }\n\n  /**\n   * Notify handler that the user chose a file - will create a change with a preview in the editor.\n   *\n   * @param {File} file - the file that the user chose using a file input.\n   */\n  fileChosen(file) {\n    if (!file) {\n      return;\n    }\n\n    // Save the chosen file to this.chosenFile\n    this.chosenFile = file;\n    this.editor._insertingImage = false;\n\n    log('[fileChosen] file: ', file);\n    const reader = new FileReader();\n    reader.onload = () => {\n      const dataURL = reader.result;\n\n      this.updateNode({ src: dataURL });\n    };\n    reader.readAsDataURL(file);\n  }\n\n  progress(percent, bytes, total) {\n    log('progress: ', percent, bytes, total);\n    this.updateNode({ percent });\n  }\n\n  // Add a getter method to retrieve the chosen file\n  getChosenFile() {\n    return this.chosenFile;\n  }\n}\n\nexport default InsertImageHandler;\n"],"mappings":"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","ignoreList":[]}