@pie-lib/editable-html 11.7.0 → 11.9.0

package/lib/plugins/toolbar/default-toolbar.js

@@ -0,0 +1,229 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ToolbarButton = exports.DefaultToolbar = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _doneButton = require("./done-button");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _slatePropTypes = _interopRequireDefault(require("slate-prop-types"));
+
+var _utils = require("../utils");
+
+var _styles = require("@material-ui/core/styles");
+
+var _toolbarButtons = require("./toolbar-buttons");
+
+var _debug = _interopRequireDefault(require("debug"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:toolbar');
+
+var ToolbarButton = function ToolbarButton(props) {
+  var onToggle = function onToggle() {
+    var c = props.onToggle(props.value.change(), props);
+    props.onChange(c);
+  };
+
+  if (props.isMark) {
+    var _isActive = (0, _utils.hasMark)(props.value, props.type);
+
+    var fnToCall = props.type === 'css' ? function () {
+      return props.onClick(props.value, props.onChange, props.getFocusedValue);
+    } : onToggle;
+    log('[ToolbarButton] mark:isActive: ', _isActive);
+    var ariaLabel;
+
+    if (props.type === 'sup') {
+      ariaLabel = 'Superscript (marks text as superscripted)';
+    } else if (props.type === 'sub') {
+      ariaLabel = 'Subscript (marks text as subscripted)';
+    } else {
+      ariaLabel = props.type;
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_toolbarButtons.MarkButton, {
+      active: _isActive,
+      onToggle: fnToCall,
+      mark: props.type,
+      label: ariaLabel
+    }, props.icon);
+  }
+
+  var disabled = props.disabled;
+  var isActive = props.isActive ? props.isActive(props.value, props.type) : (0, _utils.hasBlock)(props.value, props.type);
+  log('[ToolbarButton] block:isActive: ', isActive);
+
+  var newIcon = /*#__PURE__*/_react["default"].cloneElement(props.icon);
+
+  return /*#__PURE__*/_react["default"].createElement(_toolbarButtons.Button, {
+    ariaLabel: props.ariaLabel,
+    active: isActive,
+    disabled: disabled,
+    onClick: function onClick(event) {
+      return props.onClick(props.value, props.onChange, props.getFocusedValue, event);
+    },
+    extraStyles: props.buttonStyles
+  }, newIcon);
+};
+
+exports.ToolbarButton = ToolbarButton;
+ToolbarButton.propTypes = {
+  buttonStyles: _propTypes["default"].object,
+  disabled: _propTypes["default"].bool,
+  icon: _propTypes["default"].any,
+  isActive: _propTypes["default"].bool,
+  isMark: _propTypes["default"].bool,
+  getFocusedValue: _propTypes["default"].func,
+  onToggle: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  onClick: _propTypes["default"].func,
+  type: _propTypes["default"].string,
+  value: _propTypes["default"].object,
+  ariaLabel: _propTypes["default"].string
+};
+
+var isActiveToolbarPlugin = function isActiveToolbarPlugin(props) {
+  return function (plugin) {
+    var isDisabled = (props[plugin.name] || {}).disabled;
+    return plugin && plugin.toolbar && !isDisabled;
+  };
+};
+
+var DefaultToolbar = function DefaultToolbar(_ref) {
+  var plugins = _ref.plugins,
+      pluginProps = _ref.pluginProps,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      getFocusedValue = _ref.getFocusedValue,
+      onDone = _ref.onDone,
+      classes = _ref.classes,
+      showDone = _ref.showDone,
+      deletable = _ref.deletable,
+      isHtmlMode = _ref.isHtmlMode,
+      doneButtonRef = _ref.doneButtonRef,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus;
+  pluginProps = _objectSpread({
+    // disable HTML plugin by default, at least for now
+    html: {
+      disabled: true
+    }
+  }, pluginProps);
+  var filtered;
+
+  var handleFocus = function handleFocus(event) {
+    var _doneButtonRef$curren, _event$target;
+
+    var doneButtonClassName = doneButtonRef === null || doneButtonRef === void 0 ? void 0 : (_doneButtonRef$curren = doneButtonRef.current) === null || _doneButtonRef$curren === void 0 ? void 0 : _doneButtonRef$curren.className;
+    var isRawDoneButton = doneButtonClassName && ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest("[class*=\"".concat(doneButtonClassName, "\"]")));
+
+    if (onFocus && !isRawDoneButton) {
+      onFocus(event);
+    }
+  };
+
+  if (isHtmlMode) {
+    filtered = plugins.filter(function (plugin) {
+      return isActiveToolbarPlugin(pluginProps)(plugin) && (plugin.name === 'characters' || plugin.name === 'html');
+    }).map(function (p) {
+      return p.toolbar;
+    });
+  } else {
+    filtered = plugins.filter(isActiveToolbarPlugin(pluginProps)).map(function (p) {
+      return p.toolbar;
+    });
+  }
+
+  var isListActive = plugins.some(function (plugin) {
+    return isActiveToolbarPlugin(pluginProps)(plugin) && ['ul_list', 'ol_list'].includes(plugin.name) && plugin.toolbar.isActive(value, plugin.name);
+  });
+  var isTableActive = plugins.some(function (plugin) {
+    return isActiveToolbarPlugin(pluginProps)(plugin) && plugin.name === 'table' && plugin.utils && plugin.utils.isSelectionInTable && plugin.utils.isSelectionInTable(value);
+  });
+
+  var isToolbarButtonDisabled = function isToolbarButtonDisabled(plugin) {
+    if (plugin.type === 'table') {
+      return isListActive;
+    } else if (plugin.type === 'ul_list' || plugin.type === 'ol_list') {
+      return isTableActive;
+    }
+
+    return plugin.disabled;
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.defaultToolbar,
+    onFocus: handleFocus,
+    tabIndex: "1",
+    onBlur: onBlur
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.buttonsContainer
+  }, filtered.map(function (p, index) {
+    return /*#__PURE__*/_react["default"].createElement(ToolbarButton, (0, _extends2["default"])({}, p, {
+      key: index,
+      value: value,
+      onChange: onChange,
+      getFocusedValue: getFocusedValue,
+      disabled: isToolbarButtonDisabled(p)
+    }));
+  })), showDone && !deletable && /*#__PURE__*/_react["default"].createElement(_doneButton.DoneButton, {
+    doneButtonRef: doneButtonRef,
+    onClick: onDone
+  }));
+};
+
+exports.DefaultToolbar = DefaultToolbar;
+DefaultToolbar.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  plugins: _propTypes["default"].array.isRequired,
+  pluginProps: _propTypes["default"].object,
+  value: _slatePropTypes["default"].value.isRequired,
+  onChange: _propTypes["default"].func.isRequired,
+  getFocusedValue: _propTypes["default"].func.isRequired,
+  onDone: _propTypes["default"].func.isRequired,
+  showDone: _propTypes["default"].bool,
+  addArea: _propTypes["default"].bool,
+  deletable: _propTypes["default"].bool,
+  isHtmlMode: _propTypes["default"].bool,
+  doneButtonRef: _propTypes["default"].func,
+  onBlur: _propTypes["default"].func,
+  onFocus: _propTypes["default"].func
+};
+DefaultToolbar.defaultProps = {
+  pluginProps: {}
+};
+
+var toolbarStyles = function toolbarStyles() {
+  return {
+    defaultToolbar: {
+      display: 'flex',
+      width: '100%',
+      justifyContent: 'space-between'
+    },
+    buttonsContainer: {
+      alignItems: 'center',
+      display: 'flex',
+      width: '100%'
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(toolbarStyles)(DefaultToolbar);
+
+exports["default"] = _default;
+//# sourceMappingURL=default-toolbar.js.map

package/lib/plugins/toolbar/default-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plugins/toolbar/default-toolbar.jsx"],"names":["log","ToolbarButton","props","onToggle","c","value","change","onChange","isMark","isActive","type","fnToCall","onClick","getFocusedValue","ariaLabel","icon","disabled","newIcon","React","cloneElement","event","buttonStyles","propTypes","PropTypes","object","bool","any","func","string","isActiveToolbarPlugin","plugin","isDisabled","name","toolbar","DefaultToolbar","plugins","pluginProps","onDone","classes","showDone","deletable","isHtmlMode","doneButtonRef","onBlur","onFocus","html","filtered","handleFocus","doneButtonClassName","current","className","isRawDoneButton","target","closest","filter","map","p","isListActive","some","includes","isTableActive","utils","isSelectionInTable","isToolbarButtonDisabled","defaultToolbar","buttonsContainer","index","isRequired","array","SlatePropTypes","addArea","defaultProps","toolbarStyles","display","width","justifyContent","alignItems"],"mappings":"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","sourcesContent":["import { DoneButton } from './done-button';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport SlatePropTypes from 'slate-prop-types';\n\nimport { hasBlock, hasMark } from '../utils';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport { Button, MarkButton } from './toolbar-buttons';\nimport debug from 'debug';\n\nconst log = debug('@pie-lib:editable-html:plugins:toolbar');\n\nexport const ToolbarButton = (props) => {\n  const onToggle = () => {\n    const c = props.onToggle(props.value.change(), props);\n\n    props.onChange(c);\n  };\n\n  if (props.isMark) {\n    const isActive = hasMark(props.value, props.type);\n    const fnToCall =\n      props.type === 'css' ? () => props.onClick(props.value, props.onChange, props.getFocusedValue) : onToggle;\n\n    log('[ToolbarButton] mark:isActive: ', isActive);\n\n    let ariaLabel;\n\n    if (props.type === 'sup') {\n      ariaLabel = 'Superscript (marks text as superscripted)';\n    } else if (props.type === 'sub') {\n      ariaLabel = 'Subscript (marks text as subscripted)';\n    } else {\n      ariaLabel = props.type;\n    }\n\n    return (\n      <MarkButton active={isActive} onToggle={fnToCall} mark={props.type} label={ariaLabel}>\n        {props.icon}\n      </MarkButton>\n    );\n  }\n\n  const { disabled } = props;\n  const isActive = props.isActive ? props.isActive(props.value, props.type) : hasBlock(props.value, props.type);\n\n  log('[ToolbarButton] block:isActive: ', isActive);\n  const newIcon = React.cloneElement(props.icon);\n\n  return (\n    <Button\n      ariaLabel={props.ariaLabel}\n      active={isActive}\n      disabled={disabled}\n      onClick={(event) => props.onClick(props.value, props.onChange, props.getFocusedValue, event)}\n      extraStyles={props.buttonStyles}\n    >\n      {newIcon}\n    </Button>\n  );\n};\n\nToolbarButton.propTypes = {\n  buttonStyles: PropTypes.object,\n  disabled: PropTypes.bool,\n  icon: PropTypes.any,\n  isActive: PropTypes.bool,\n  isMark: PropTypes.bool,\n  getFocusedValue: PropTypes.func,\n  onToggle: PropTypes.func,\n  onChange: PropTypes.func,\n  onClick: PropTypes.func,\n  type: PropTypes.string,\n  value: PropTypes.object,\n  ariaLabel: PropTypes.string,\n};\n\nconst isActiveToolbarPlugin = (props) => (plugin) => {\n  const isDisabled = (props[plugin.name] || {}).disabled;\n\n  return plugin && plugin.toolbar && !isDisabled;\n};\n\nexport const DefaultToolbar = ({\n  plugins,\n  pluginProps,\n  value,\n  onChange,\n  getFocusedValue,\n  onDone,\n  classes,\n  showDone,\n  deletable,\n  isHtmlMode,\n  doneButtonRef,\n  onBlur,\n  onFocus,\n}) => {\n  pluginProps = {\n    // disable HTML plugin by default, at least for now\n    html: { disabled: true },\n    ...pluginProps,\n  };\n  let filtered;\n\n  const handleFocus = (event) => {\n    const doneButtonClassName = doneButtonRef?.current?.className;\n    const isRawDoneButton = doneButtonClassName && event.target?.closest(`[class*=\"${doneButtonClassName}\"]`);\n\n    if (onFocus && !isRawDoneButton) {\n      onFocus(event);\n    }\n  };\n\n  if (isHtmlMode) {\n    filtered = plugins\n      .filter((plugin) => {\n        return isActiveToolbarPlugin(pluginProps)(plugin) && (plugin.name === 'characters' || plugin.name === 'html');\n      })\n      .map((p) => p.toolbar);\n  } else {\n    filtered = plugins.filter(isActiveToolbarPlugin(pluginProps)).map((p) => p.toolbar);\n  }\n\n  const isListActive = plugins.some(\n    (plugin) =>\n      isActiveToolbarPlugin(pluginProps)(plugin) &&\n      ['ul_list', 'ol_list'].includes(plugin.name) &&\n      plugin.toolbar.isActive(value, plugin.name),\n  );\n\n  const isTableActive = plugins.some(\n    (plugin) =>\n      isActiveToolbarPlugin(pluginProps)(plugin) &&\n      plugin.name === 'table' &&\n      plugin.utils &&\n      plugin.utils.isSelectionInTable &&\n      plugin.utils.isSelectionInTable(value),\n  );\n\n  const isToolbarButtonDisabled = (plugin) => {\n    if (plugin.type === 'table') {\n      return isListActive;\n    } else if (plugin.type === 'ul_list' || plugin.type === 'ol_list') {\n      return isTableActive;\n    }\n    return plugin.disabled;\n  };\n\n  return (\n    <div className={classes.defaultToolbar} onFocus={handleFocus} tabIndex=\"1\" onBlur={onBlur}>\n      <div className={classes.buttonsContainer}>\n        {filtered.map((p, index) => {\n          return (\n            <ToolbarButton\n              {...p}\n              key={index}\n              value={value}\n              onChange={onChange}\n              getFocusedValue={getFocusedValue}\n              disabled={isToolbarButtonDisabled(p)}\n            />\n          );\n        })}\n      </div>\n      {showDone && !deletable && <DoneButton doneButtonRef={doneButtonRef} onClick={onDone} />}\n    </div>\n  );\n};\n\nDefaultToolbar.propTypes = {\n  classes: PropTypes.object.isRequired,\n  plugins: PropTypes.array.isRequired,\n  pluginProps: PropTypes.object,\n  value: SlatePropTypes.value.isRequired,\n  onChange: PropTypes.func.isRequired,\n  getFocusedValue: PropTypes.func.isRequired,\n  onDone: PropTypes.func.isRequired,\n  showDone: PropTypes.bool,\n  addArea: PropTypes.bool,\n  deletable: PropTypes.bool,\n  isHtmlMode: PropTypes.bool,\n  doneButtonRef: PropTypes.func,\n  onBlur: PropTypes.func,\n  onFocus: PropTypes.func,\n};\n\nDefaultToolbar.defaultProps = {\n  pluginProps: {},\n};\n\nconst toolbarStyles = () => ({\n  defaultToolbar: {\n    display: 'flex',\n    width: '100%',\n    justifyContent: 'space-between',\n  },\n  buttonsContainer: {\n    alignItems: 'center',\n    display: 'flex',\n    width: '100%',\n  },\n});\n\nexport default withStyles(toolbarStyles)(DefaultToolbar);\n"],"file":"default-toolbar.js"}

package/lib/plugins/toolbar/done-button.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RawDoneButton = exports.DoneButton = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var RawDoneButton = function RawDoneButton(_ref) {
+  var classes = _ref.classes,
+      onClick = _ref.onClick,
+      doneButtonRef = _ref.doneButtonRef;
+  return /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    "aria-label": "Done",
+    className: classes.iconRoot,
+    buttonRef: doneButtonRef,
+    onClick: onClick,
+    classes: {
+      label: classes.label,
+      root: classes.iconRoot
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Check["default"], null));
+};
+
+exports.RawDoneButton = RawDoneButton;
+RawDoneButton.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  onClick: _propTypes["default"].func,
+  doneButtonRef: _propTypes["default"].func
+};
+var styles = {
+  iconRoot: {
+    verticalAlign: 'top',
+    width: '28px',
+    height: '28px',
+    color: 'var(--editable-html-toolbar-check, #00bb00)',
+    padding: '4px'
+  }
+};
+var DoneButton = (0, _styles.withStyles)(styles)(RawDoneButton);
+exports.DoneButton = DoneButton;
+//# sourceMappingURL=done-button.js.map

package/lib/plugins/toolbar/done-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plugins/toolbar/done-button.jsx"],"names":["RawDoneButton","classes","onClick","doneButtonRef","iconRoot","label","root","propTypes","PropTypes","object","isRequired","func","styles","verticalAlign","width","height","color","padding","DoneButton"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AAEO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,OAAZ,QAAYA,OAAZ;AAAA,MAAqBC,aAArB,QAAqBA,aAArB;AAAA,sBAC3B,gCAAC,sBAAD;AACE,kBAAW,MADb;AAEE,IAAA,SAAS,EAAEF,OAAO,CAACG,QAFrB;AAGE,IAAA,SAAS,EAAED,aAHb;AAIE,IAAA,OAAO,EAAED,OAJX;AAKE,IAAA,OAAO,EAAE;AACPG,MAAAA,KAAK,EAAEJ,OAAO,CAACI,KADR;AAEPC,MAAAA,IAAI,EAAEL,OAAO,CAACG;AAFP;AALX,kBAUE,gCAAC,iBAAD,OAVF,CAD2B;AAAA,CAAtB;;;AAePJ,aAAa,CAACO,SAAd,GAA0B;AACxBN,EAAAA,OAAO,EAAEO,sBAAUC,MAAV,CAAiBC,UADF;AAExBR,EAAAA,OAAO,EAAEM,sBAAUG,IAFK;AAGxBR,EAAAA,aAAa,EAAEK,sBAAUG;AAHD,CAA1B;AAMA,IAAMC,MAAM,GAAG;AACbR,EAAAA,QAAQ,EAAE;AACRS,IAAAA,aAAa,EAAE,KADP;AAERC,IAAAA,KAAK,EAAE,MAFC;AAGRC,IAAAA,MAAM,EAAE,MAHA;AAIRC,IAAAA,KAAK,EAAE,6CAJC;AAKRC,IAAAA,OAAO,EAAE;AALD;AADG,CAAf;AASO,IAAMC,UAAU,GAAG,wBAAWN,MAAX,EAAmBZ,aAAnB,CAAnB","sourcesContent":["import React from 'react';\n\nimport IconButton from '@material-ui/core/IconButton';\nimport Check from '@material-ui/icons/Check';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\n\nexport const RawDoneButton = ({ classes, onClick, doneButtonRef }) => (\n  <IconButton\n    aria-label=\"Done\"\n    className={classes.iconRoot}\n    buttonRef={doneButtonRef}\n    onClick={onClick}\n    classes={{\n      label: classes.label,\n      root: classes.iconRoot,\n    }}\n  >\n    <Check />\n  </IconButton>\n);\n\nRawDoneButton.propTypes = {\n  classes: PropTypes.object.isRequired,\n  onClick: PropTypes.func,\n  doneButtonRef: PropTypes.func,\n};\n\nconst styles = {\n  iconRoot: {\n    verticalAlign: 'top',\n    width: '28px',\n    height: '28px',\n    color: 'var(--editable-html-toolbar-check, #00bb00)',\n    padding: '4px',\n  },\n};\nexport const DoneButton = withStyles(styles)(RawDoneButton);\n"],"file":"done-button.js"}

package/lib/plugins/toolbar/editor-and-toolbar.js

@@ -0,0 +1,286 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.EditorAndToolbar = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _toolbar = _interopRequireDefault(require("./toolbar"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _debug = _interopRequireDefault(require("debug"));
+
+var _theme = require("../../theme");
+
+var _styles = require("@material-ui/core/styles");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _slatePropTypes = _interopRequireDefault(require("slate-prop-types"));
+
+var _renderUi = require("@pie-lib/render-ui");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:toolbar:editor-and-toolbar');
+
+var EditorAndToolbar = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(EditorAndToolbar, _React$Component);
+
+  var _super = _createSuper(EditorAndToolbar);
+
+  function EditorAndToolbar() {
+    (0, _classCallCheck2["default"])(this, EditorAndToolbar);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(EditorAndToolbar, [{
+    key: "render",
+    value: function render() {
+      var _classNames,
+          _this = this,
+          _classNames2;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          children = _this$props.children,
+          value = _this$props.value,
+          plugins = _this$props.plugins,
+          onChange = _this$props.onChange,
+          getFocusedValue = _this$props.getFocusedValue,
+          onDone = _this$props.onDone,
+          focusedNode = _this$props.focusedNode,
+          autoWidth = _this$props.autoWidth,
+          readOnly = _this$props.readOnly,
+          disableScrollbar = _this$props.disableScrollbar,
+          disableUnderline = _this$props.disableUnderline,
+          pluginProps = _this$props.pluginProps,
+          toolbarOpts = _this$props.toolbarOpts,
+          onDataChange = _this$props.onDataChange,
+          toolbarRef = _this$props.toolbarRef,
+          doneButtonRef = _this$props.doneButtonRef,
+          focusToolbar = _this$props.focusToolbar,
+          onToolbarFocus = _this$props.onToolbarFocus,
+          onToolbarBlur = _this$props.onToolbarBlur;
+      var inFocus = value.isFocused || focusedNode !== null && focusedNode !== undefined || focusToolbar;
+      var holderNames = (0, _classnames["default"])(classes.editorHolder, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.editorInFocus, inFocus), (0, _defineProperty2["default"])(_classNames, classes.readOnly, readOnly), (0, _defineProperty2["default"])(_classNames, classes.disabledUnderline, disableUnderline), (0, _defineProperty2["default"])(_classNames, classes.disabledScrollbar, disableScrollbar), _classNames));
+      var clonedChildren = children;
+
+      if (typeof children !== 'string') {
+        clonedChildren = /*#__PURE__*/_react["default"].cloneElement(children, {
+          ref: function ref(el) {
+            return _this.editorRef = el;
+          }
+        });
+      }
+
+      log('[render] inFocus: ', inFocus, 'value.isFocused:', value.isFocused, 'focused node: ', focusedNode);
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])((_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, classes.noBorder, toolbarOpts && toolbarOpts.noBorder), (0, _defineProperty2["default"])(_classNames2, classes.error, toolbarOpts && toolbarOpts.error), _classNames2), classes.root)
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: holderNames
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, classes.noPadding, toolbarOpts && toolbarOpts.noPadding), classes.children)
+      }, clonedChildren)), /*#__PURE__*/_react["default"].createElement(_toolbar["default"], {
+        autoWidth: autoWidth,
+        plugins: plugins,
+        focusedNode: focusedNode,
+        value: value,
+        isFocused: inFocus,
+        onBlur: onToolbarBlur,
+        onFocus: onToolbarFocus,
+        onChange: onChange,
+        getFocusedValue: getFocusedValue,
+        onDone: onDone,
+        onDataChange: onDataChange,
+        toolbarRef: toolbarRef,
+        doneButtonRef: doneButtonRef,
+        pluginProps: pluginProps,
+        toolbarOpts: toolbarOpts
+      }));
+    }
+  }]);
+  return EditorAndToolbar;
+}(_react["default"].Component);
+
+exports.EditorAndToolbar = EditorAndToolbar;
+(0, _defineProperty2["default"])(EditorAndToolbar, "propTypes", {
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
+  value: _slatePropTypes["default"].value.isRequired,
+  plugins: _propTypes["default"].array.isRequired,
+  onChange: _propTypes["default"].func.isRequired,
+  getFocusedValue: _propTypes["default"].func.isRequired,
+  onDone: _propTypes["default"].func.isRequired,
+  onDataChange: _propTypes["default"].func,
+  toolbarRef: _propTypes["default"].func,
+  focusedNode: _slatePropTypes["default"].node,
+  readOnly: _propTypes["default"].bool,
+  disableScrollbar: _propTypes["default"].bool,
+  disableUnderline: _propTypes["default"].bool,
+  autoWidth: _propTypes["default"].bool,
+  classes: _propTypes["default"].object.isRequired,
+  pluginProps: _propTypes["default"].object,
+  toolbarOpts: _propTypes["default"].shape({
+    position: _propTypes["default"].oneOf(['bottom', 'top']),
+    alwaysVisible: _propTypes["default"].bool,
+    error: _propTypes["default"].string,
+    noBorder: _propTypes["default"].any,
+    noPadding: _propTypes["default"].any
+  }),
+  focusToolbar: _propTypes["default"].bool.isRequired,
+  onToolbarFocus: _propTypes["default"].func.isRequired,
+  onToolbarBlur: _propTypes["default"].func.isRequired,
+  doneButtonRef: _propTypes["default"].func
+});
+
+var style = function style(theme) {
+  return {
+    root: {
+      position: 'relative',
+      padding: '0px',
+      border: '1px solid #ccc',
+      borderRadius: '4px',
+      cursor: 'text',
+      '& [data-slate-editor="true"]': {
+        wordBreak: 'break-word',
+        overflow: 'visible',
+        maxHeight: '500px',
+        // needed in order to be able to put the focus before a void element when it is the first one in the editor
+        padding: '5px'
+      }
+    },
+    children: {
+      padding: '10px 16px'
+    },
+    editorHolder: {
+      position: 'relative',
+      padding: '0px',
+      overflowY: 'auto',
+      color: _renderUi.color.text(),
+      backgroundColor: _renderUi.color.background(),
+      '&::before': {
+        left: '0',
+        right: '0',
+        bottom: '0',
+        height: '1px',
+        content: '""',
+        position: 'absolute',
+        transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+        pointerEvents: 'none',
+        backgroundColor: 'rgba(0, 0, 0, 0.42)'
+      },
+      '&::after': {
+        left: '0',
+        right: '0',
+        bottom: '0',
+        height: '1px',
+        content: '""',
+        position: 'absolute',
+        transform: 'scaleX(0)',
+        transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 200ms linear',
+        backgroundColor: 'rgba(0, 0, 0, 0.42)'
+      },
+      '&:focus': {
+        '&::after': {
+          transform: 'scaleX(1)',
+          backgroundColor: _theme.primary,
+          height: '2px'
+        }
+      },
+      '&:hover': {
+        '&::after': {
+          transform: 'scaleX(1)',
+          backgroundColor: theme.palette.common.black,
+          height: '2px'
+        }
+      }
+    },
+    disabledUnderline: {
+      '&::before': {
+        display: 'none'
+      },
+      '&::after': {
+        display: 'none'
+      }
+    },
+    disabledScrollbar: {
+      '&::-webkit-scrollbar': {
+        display: 'none'
+      },
+      scrollbarWidth: 'none',
+      '-ms-overflow-style': 'none'
+    },
+    readOnly: {
+      '&::before': {
+        background: 'transparent',
+        backgroundSize: '5px 1px',
+        backgroundImage: 'linear-gradient(to right, rgba(0, 0, 0, 0.42) 33%, transparent 0%)',
+        backgroundRepeat: 'repeat-x',
+        backgroundPosition: 'left top'
+      },
+      '&::after': {
+        left: '0',
+        right: '0',
+        bottom: '0',
+        height: '1px',
+        content: '""',
+        position: 'absolute',
+        transform: 'scaleX(0)',
+        transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 0ms linear',
+        backgroundColor: 'rgba(0, 0, 0, 0)'
+      },
+      '&:hover': {
+        '&::after': {
+          transform: 'scaleX(0)',
+          backgroundColor: theme.palette.common.black,
+          height: '2px'
+        }
+      }
+    },
+    editorInFocus: {
+      '&::after': {
+        transform: 'scaleX(1)',
+        backgroundColor: _theme.primary,
+        height: '2px'
+      },
+      '&:hover': {
+        '&::after': {
+          backgroundColor: _theme.primary
+        }
+      }
+    },
+    error: {
+      border: "2px solid ".concat(theme.palette.error.main, " !important")
+    },
+    noBorder: {
+      border: 'none'
+    },
+    noPadding: {
+      padding: 0
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(style)(EditorAndToolbar);
+
+exports["default"] = _default;
+//# sourceMappingURL=editor-and-toolbar.js.map

package/lib/plugins/toolbar/editor-and-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plugins/toolbar/editor-and-toolbar.jsx"],"names":["log","EditorAndToolbar","props","classes","children","value","plugins","onChange","getFocusedValue","onDone","focusedNode","autoWidth","readOnly","disableScrollbar","disableUnderline","pluginProps","toolbarOpts","onDataChange","toolbarRef","doneButtonRef","focusToolbar","onToolbarFocus","onToolbarBlur","inFocus","isFocused","undefined","holderNames","editorHolder","editorInFocus","disabledUnderline","disabledScrollbar","clonedChildren","React","cloneElement","ref","el","editorRef","noBorder","error","root","noPadding","Component","PropTypes","oneOfType","arrayOf","node","isRequired","SlatePropTypes","array","func","bool","object","shape","position","oneOf","alwaysVisible","string","any","style","theme","padding","border","borderRadius","cursor","wordBreak","overflow","maxHeight","overflowY","color","text","backgroundColor","background","left","right","bottom","height","content","transition","pointerEvents","transform","primary","palette","common","black","display","scrollbarWidth","backgroundSize","backgroundImage","backgroundRepeat","backgroundPosition","main"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Toolbar from './toolbar';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport { primary } from '../../theme';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport SlatePropTypes from 'slate-prop-types';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('@pie-lib:editable-html:plugins:toolbar:editor-and-toolbar');\n\nexport class EditorAndToolbar extends React.Component {\n  static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    value: SlatePropTypes.value.isRequired,\n    plugins: PropTypes.array.isRequired,\n    onChange: PropTypes.func.isRequired,\n    getFocusedValue: PropTypes.func.isRequired,\n    onDone: PropTypes.func.isRequired,\n    onDataChange: PropTypes.func,\n    toolbarRef: PropTypes.func,\n    focusedNode: SlatePropTypes.node,\n    readOnly: PropTypes.bool,\n    disableScrollbar: PropTypes.bool,\n    disableUnderline: PropTypes.bool,\n    autoWidth: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    pluginProps: PropTypes.object,\n    toolbarOpts: PropTypes.shape({\n      position: PropTypes.oneOf(['bottom', 'top']),\n      alwaysVisible: PropTypes.bool,\n      error: PropTypes.string,\n      noBorder: PropTypes.any,\n      noPadding: PropTypes.any,\n    }),\n    focusToolbar: PropTypes.bool.isRequired,\n    onToolbarFocus: PropTypes.func.isRequired,\n    onToolbarBlur: PropTypes.func.isRequired,\n    doneButtonRef: PropTypes.func,\n  };\n\n  render() {\n    const {\n      classes,\n      children,\n      value,\n      plugins,\n      onChange,\n      getFocusedValue,\n      onDone,\n      focusedNode,\n      autoWidth,\n      readOnly,\n      disableScrollbar,\n      disableUnderline,\n      pluginProps,\n      toolbarOpts,\n      onDataChange,\n      toolbarRef,\n      doneButtonRef,\n      focusToolbar,\n      onToolbarFocus,\n      onToolbarBlur,\n    } = this.props;\n\n    let inFocus = value.isFocused || (focusedNode !== null && focusedNode !== undefined) || focusToolbar;\n\n    const holderNames = classNames(classes.editorHolder, {\n      [classes.editorInFocus]: inFocus,\n      [classes.readOnly]: readOnly,\n      [classes.disabledUnderline]: disableUnderline,\n      [classes.disabledScrollbar]: disableScrollbar,\n    });\n\n    let clonedChildren = children;\n\n    if (typeof children !== 'string') {\n      clonedChildren = React.cloneElement(children, {\n        ref: (el) => (this.editorRef = el),\n      });\n    }\n\n    log('[render] inFocus: ', inFocus, 'value.isFocused:', value.isFocused, 'focused node: ', focusedNode);\n\n    return (\n      <div\n        className={classNames(\n          {\n            [classes.noBorder]: toolbarOpts && toolbarOpts.noBorder,\n            [classes.error]: toolbarOpts && toolbarOpts.error,\n          },\n          classes.root,\n        )}\n      >\n        <div className={holderNames}>\n          <div\n            className={classNames(\n              {\n                [classes.noPadding]: toolbarOpts && toolbarOpts.noPadding,\n              },\n              classes.children,\n            )}\n          >\n            {clonedChildren}\n          </div>\n        </div>\n\n        <Toolbar\n          autoWidth={autoWidth}\n          plugins={plugins}\n          focusedNode={focusedNode}\n          value={value}\n          isFocused={inFocus}\n          onBlur={onToolbarBlur}\n          onFocus={onToolbarFocus}\n          onChange={onChange}\n          getFocusedValue={getFocusedValue}\n          onDone={onDone}\n          onDataChange={onDataChange}\n          toolbarRef={toolbarRef}\n          doneButtonRef={doneButtonRef}\n          pluginProps={pluginProps}\n          toolbarOpts={toolbarOpts}\n        />\n      </div>\n    );\n  }\n}\n\nconst style = (theme) => ({\n  root: {\n    position: 'relative',\n    padding: '0px',\n    border: '1px solid #ccc',\n    borderRadius: '4px',\n    cursor: 'text',\n    '& [data-slate-editor=\"true\"]': {\n      wordBreak: 'break-word',\n      overflow: 'visible',\n      maxHeight: '500px',\n      // needed in order to be able to put the focus before a void element when it is the first one in the editor\n      padding: '5px',\n    },\n  },\n  children: {\n    padding: '10px 16px',\n  },\n  editorHolder: {\n    position: 'relative',\n    padding: '0px',\n    overflowY: 'auto',\n    color: color.text(),\n    backgroundColor: color.background(),\n    '&::before': {\n      left: '0',\n      right: '0',\n      bottom: '0',\n      height: '1px',\n      content: '\"\"',\n      position: 'absolute',\n      transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n      pointerEvents: 'none',\n      backgroundColor: 'rgba(0, 0, 0, 0.42)',\n    },\n    '&::after': {\n      left: '0',\n      right: '0',\n      bottom: '0',\n      height: '1px',\n      content: '\"\"',\n      position: 'absolute',\n      transform: 'scaleX(0)',\n      transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 200ms linear',\n      backgroundColor: 'rgba(0, 0, 0, 0.42)',\n    },\n    '&:focus': {\n      '&::after': {\n        transform: 'scaleX(1)',\n        backgroundColor: primary,\n        height: '2px',\n      },\n    },\n    '&:hover': {\n      '&::after': {\n        transform: 'scaleX(1)',\n        backgroundColor: theme.palette.common.black,\n        height: '2px',\n      },\n    },\n  },\n  disabledUnderline: {\n    '&::before': {\n      display: 'none',\n    },\n    '&::after': {\n      display: 'none',\n    },\n  },\n  disabledScrollbar: {\n    '&::-webkit-scrollbar': {\n      display: 'none',\n    },\n    scrollbarWidth: 'none',\n    '-ms-overflow-style': 'none',\n  },\n  readOnly: {\n    '&::before': {\n      background: 'transparent',\n      backgroundSize: '5px 1px',\n      backgroundImage: 'linear-gradient(to right, rgba(0, 0, 0, 0.42) 33%, transparent 0%)',\n      backgroundRepeat: 'repeat-x',\n      backgroundPosition: 'left top',\n    },\n    '&::after': {\n      left: '0',\n      right: '0',\n      bottom: '0',\n      height: '1px',\n      content: '\"\"',\n      position: 'absolute',\n      transform: 'scaleX(0)',\n      transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 0ms linear',\n      backgroundColor: 'rgba(0, 0, 0, 0)',\n    },\n    '&:hover': {\n      '&::after': {\n        transform: 'scaleX(0)',\n        backgroundColor: theme.palette.common.black,\n        height: '2px',\n      },\n    },\n  },\n  editorInFocus: {\n    '&::after': {\n      transform: 'scaleX(1)',\n      backgroundColor: primary,\n      height: '2px',\n    },\n    '&:hover': {\n      '&::after': {\n        backgroundColor: primary,\n      },\n    },\n  },\n  error: {\n    border: `2px solid ${theme.palette.error.main} !important`,\n  },\n  noBorder: {\n    border: 'none',\n  },\n  noPadding: {\n    padding: 0,\n  },\n});\n\nexport default withStyles(style)(EditorAndToolbar);\n"],"file":"editor-and-toolbar.js"}