@pie-lib/editable-html 11.1.1 → 11.2.0-beta.1

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

@@ -35,8 +35,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _slatePropTypes = _interopRequireDefault(require("slate-prop-types"));
 
-var _slateDevEnvironment = require("slate-dev-environment");
-
 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); }; }
@@ -56,17 +54,6 @@ var EditorAndToolbar = /*#__PURE__*/function (_React$Component) {
   }
 
   (0, _createClass2["default"])(EditorAndToolbar, [{
-    key: "componentDidMount",
-    value:
-    /** This is an interim fix until this PR is merged in slate:
-     * https://github.com/ianstormtaylor/slate/pull/2236
-     */
-    function componentDidMount() {
-      if (_slateDevEnvironment.IS_FIREFOX) {
-        this.editorRef.tmp.isUpdatingSelection = true;
-      }
-    }
-  }, {
     key: "render",
     value: function render() {
       var _classNames,
@@ -89,8 +76,12 @@ var EditorAndToolbar = /*#__PURE__*/function (_React$Component) {
           pluginProps = _this$props.pluginProps,
           toolbarOpts = _this$props.toolbarOpts,
           onDataChange = _this$props.onDataChange,
-          toolbarRef = _this$props.toolbarRef;
-      var inFocus = value.isFocused || focusedNode !== null && focusedNode !== undefined;
+          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;
 
@@ -108,18 +99,21 @@ var EditorAndToolbar = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: holderNames
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, classes.noPadding, toolbarOpts && toolbarOpts.noBorder), classes.children)
+        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
       }));
@@ -149,8 +143,13 @@ exports.EditorAndToolbar = EditorAndToolbar;
     position: _propTypes["default"].oneOf(['bottom', 'top']),
     alwaysVisible: _propTypes["default"].bool,
     error: _propTypes["default"].string,
-    noBorder: _propTypes["default"].any
-  })
+    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) {
@@ -175,7 +174,7 @@ var style = function style(theme) {
     editorHolder: {
       position: 'relative',
       padding: '0px',
-      overflowY: 'scroll',
+      overflowY: 'auto',
       color: _renderUi.color.text(),
       backgroundColor: _renderUi.color.background(),
       '&::before': {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plugins/toolbar/editor-and-toolbar.jsx"],"names":["log","EditorAndToolbar","IS_FIREFOX","editorRef","tmp","isUpdatingSelection","props","classes","children","value","plugins","onChange","getFocusedValue","onDone","focusedNode","autoWidth","readOnly","disableScrollbar","disableUnderline","pluginProps","toolbarOpts","onDataChange","toolbarRef","inFocus","isFocused","undefined","holderNames","editorHolder","editorInFocus","disabledUnderline","disabledScrollbar","clonedChildren","React","cloneElement","ref","el","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 { IS_FIREFOX } from 'slate-dev-environment';\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    }),\n  };\n\n  /** This is an interim fix until this PR is merged in slate:\n   * https://github.com/ianstormtaylor/slate/pull/2236\n   */\n  componentDidMount() {\n    if (IS_FIREFOX) {\n      this.editorRef.tmp.isUpdatingSelection = true;\n    }\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    } = this.props;\n\n    const inFocus = value.isFocused || (focusedNode !== null && focusedNode !== undefined);\n    const holderNames = classNames(classes.editorHolder, {\n      [classes.editorInFocus]: inFocus,\n      [classes.readOnly]: readOnly,\n      [classes.disabledUnderline]: disableUnderline,\n      [classes.disabledScrollbar]: disableScrollbar,\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.noBorder,\n              },\n              classes.children,\n            )}\n          >\n            {clonedChildren}\n          </div>\n        </div>\n        <Toolbar\n          autoWidth={autoWidth}\n          plugins={plugins}\n          focusedNode={focusedNode}\n          value={value}\n          isFocused={inFocus}\n          onChange={onChange}\n          getFocusedValue={getFocusedValue}\n          onDone={onDone}\n          onDataChange={onDataChange}\n          toolbarRef={toolbarRef}\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: 'scroll',\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"}
+{"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"}

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

@@ -25,7 +25,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _debug = _interopRequireDefault(require("debug"));
 
-var _reactJss = _interopRequireDefault(require("react-jss"));
+var _styles = require("@material-ui/core/styles");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -35,14 +35,20 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 styles = function styles() {
+var styles = function styles(theme) {
   return {
     button: {
       color: 'grey',
       display: 'inline-flex',
       padding: '2px',
-      '& :hover': {
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer',
+      '&:hover': {
         color: 'black'
+      },
+      '&:focus': {
+        outline: "2px solid ".concat(theme.palette.grey[700])
       }
     },
     active: {
@@ -76,6 +82,14 @@ var RawButton = /*#__PURE__*/function (_React$Component) {
       var onClick = _this.props.onClick;
       onClick(e);
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onKeyDown", function (e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        log('[onKeyDown]');
+        e.preventDefault();
+        var onClick = _this.props.onClick;
+        onClick(e);
+      }
+    });
     return _this;
   }
 
@@ -89,12 +103,18 @@ var RawButton = /*#__PURE__*/function (_React$Component) {
           classes = _this$props.classes,
           children = _this$props.children,
           disabled = _this$props.disabled,
-          extraStyles = _this$props.extraStyles;
+          extraStyles = _this$props.extraStyles,
+          ariaLabel = _this$props.ariaLabel;
       var names = (0, _classnames["default"])(classes.button, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.active, active), (0, _defineProperty2["default"])(_classNames, classes.disabled, disabled), _classNames));
-      return /*#__PURE__*/_react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("button", {
         style: extraStyles,
         className: names,
-        onMouseDown: this.onClick
+        onMouseDown: this.onClick,
+        onKeyDown: this.onKeyDown,
+        disabled: disabled,
+        "aria-label": ariaLabel,
+        "aria-pressed": active,
+        tabIndex: 0
       }, children);
     }
   }]);
@@ -110,7 +130,7 @@ exports.RawButton = RawButton;
   disabled: _propTypes["default"].bool,
   extraStyles: _propTypes["default"].object
 });
-var Button = (0, _reactJss["default"])(styles())(RawButton);
+var Button = (0, _styles.withStyles)(styles)(RawButton);
 exports.Button = Button;
 
 var RawMarkButton = /*#__PURE__*/function (_React$Component2) {
@@ -128,6 +148,13 @@ var RawMarkButton = /*#__PURE__*/function (_React$Component2) {
 
       _this2.props.onToggle(_this2.props.mark);
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onKeyDown", function (e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+
+        _this2.props.onToggle(_this2.props.mark);
+      }
+    });
     return _this2;
   }
 
@@ -137,11 +164,16 @@ var RawMarkButton = /*#__PURE__*/function (_React$Component2) {
       var _this$props2 = this.props,
           classes = _this$props2.classes,
           children = _this$props2.children,
-          active = _this$props2.active;
+          active = _this$props2.active,
+          label = _this$props2.label;
       var names = (0, _classnames["default"])(classes.button, active && classes.active);
-      return /*#__PURE__*/_react["default"].createElement("span", {
+      return /*#__PURE__*/_react["default"].createElement("button", {
         className: names,
-        onMouseDown: this.onToggle
+        onMouseDown: this.onToggle,
+        "aria-pressed": active,
+        onKeyDown: this.onKeyDown,
+        "aria-label": label,
+        tabIndex: 0
       }, children);
     }
   }]);
@@ -152,10 +184,11 @@ exports.RawMarkButton = RawMarkButton;
 (0, _defineProperty2["default"])(RawMarkButton, "propTypes", {
   onToggle: _propTypes["default"].func.isRequired,
   mark: _propTypes["default"].string,
+  label: _propTypes["default"].string.isRequired,
   children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
   classes: _propTypes["default"].object.isRequired,
   active: _propTypes["default"].bool
 });
-var MarkButton = (0, _reactJss["default"])(styles())(RawMarkButton);
+var MarkButton = (0, _styles.withStyles)(styles)(RawMarkButton);
 exports.MarkButton = MarkButton;
 //# sourceMappingURL=toolbar-buttons.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plugins/toolbar/toolbar-buttons.jsx"],"names":["styles","button","color","display","padding","active","disabled","opacity","cursor","log","RawButton","props","e","preventDefault","onClick","classes","children","extraStyles","names","React","Component","PropTypes","func","isRequired","object","oneOfType","arrayOf","node","bool","Button","RawMarkButton","onToggle","mark","string","MarkButton"],"mappings":"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","sourcesContent":["import React from 'react';\nimport debug from 'debug';\nimport injectSheet from 'react-jss';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\n\nconst styles = () => ({\n  button: {\n    color: 'grey',\n    display: 'inline-flex',\n    padding: '2px',\n    '& :hover': {\n      color: 'black',\n    },\n  },\n  active: {\n    color: 'black',\n  },\n  disabled: {\n    opacity: 0.7,\n    cursor: 'not-allowed',\n    '& :hover': {\n      color: 'grey',\n    },\n  },\n});\n\nconst log = debug('pie-elements:editable-html:raw-button');\n\nexport class RawButton extends React.Component {\n  static propTypes = {\n    onClick: PropTypes.func.isRequired,\n    classes: PropTypes.object.isRequired,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    active: PropTypes.bool,\n    disabled: PropTypes.bool,\n    extraStyles: PropTypes.object,\n  };\n\n  constructor(props) {\n    super(props);\n  }\n\n  onClick = (e) => {\n    log('[onClick]');\n    e.preventDefault();\n    const { onClick } = this.props;\n    onClick(e);\n  };\n\n  render() {\n    const { active, classes, children, disabled, extraStyles } = this.props;\n    const names = classNames(classes.button, {\n      [classes.active]: active,\n      [classes.disabled]: disabled,\n    });\n\n    return (\n      <div style={extraStyles} className={names} onMouseDown={this.onClick}>\n        {children}\n      </div>\n    );\n  }\n}\n\nexport const Button = injectSheet(styles())(RawButton);\n\nexport class RawMarkButton extends React.Component {\n  static propTypes = {\n    onToggle: PropTypes.func.isRequired,\n    mark: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    classes: PropTypes.object.isRequired,\n    active: PropTypes.bool,\n  };\n\n  constructor(props) {\n    super(props);\n  }\n\n  onToggle = (e) => {\n    e.preventDefault();\n    this.props.onToggle(this.props.mark);\n  };\n\n  render() {\n    const { classes, children, active } = this.props;\n    const names = classNames(classes.button, active && classes.active);\n    return (\n      <span className={names} onMouseDown={this.onToggle}>\n        {children}\n      </span>\n    );\n  }\n}\n\nexport const MarkButton = injectSheet(styles())(RawMarkButton);\n"],"file":"toolbar-buttons.js"}
+{"version":3,"sources":["../../../src/plugins/toolbar/toolbar-buttons.jsx"],"names":["styles","theme","button","color","display","padding","background","border","cursor","outline","palette","grey","active","disabled","opacity","log","RawButton","props","e","preventDefault","onClick","key","classes","children","extraStyles","ariaLabel","names","onKeyDown","React","Component","PropTypes","func","isRequired","object","oneOfType","arrayOf","node","bool","Button","RawMarkButton","onToggle","mark","label","string","MarkButton"],"mappings":"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","sourcesContent":["import React from 'react';\nimport debug from 'debug';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\n\nconst styles = (theme) => ({\n  button: {\n    color: 'grey',\n    display: 'inline-flex',\n    padding: '2px',\n    background: 'none',\n    border: 'none',\n    cursor: 'pointer',\n    '&:hover': {\n      color: 'black',\n    },\n    '&:focus': {\n      outline: `2px solid ${theme.palette.grey[700]}`,\n    },\n  },\n  active: {\n    color: 'black',\n  },\n  disabled: {\n    opacity: 0.7,\n    cursor: 'not-allowed',\n    '& :hover': {\n      color: 'grey',\n    },\n  },\n});\n\nconst log = debug('pie-elements:editable-html:raw-button');\n\nexport class RawButton extends React.Component {\n  static propTypes = {\n    onClick: PropTypes.func.isRequired,\n    classes: PropTypes.object.isRequired,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    active: PropTypes.bool,\n    disabled: PropTypes.bool,\n    extraStyles: PropTypes.object,\n  };\n\n  constructor(props) {\n    super(props);\n  }\n\n  onClick = (e) => {\n    log('[onClick]');\n    e.preventDefault();\n    const { onClick } = this.props;\n    onClick(e);\n  };\n\n  onKeyDown = (e) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      log('[onKeyDown]');\n      e.preventDefault();\n      const { onClick } = this.props;\n      onClick(e);\n    }\n  };\n\n  render() {\n    const { active, classes, children, disabled, extraStyles, ariaLabel } = this.props;\n\n    const names = classNames(classes.button, {\n      [classes.active]: active,\n      [classes.disabled]: disabled,\n    });\n\n    return (\n      <button\n        style={extraStyles}\n        className={names}\n        onMouseDown={this.onClick}\n        onKeyDown={this.onKeyDown}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-pressed={active}\n        tabIndex={0}\n      >\n        {children}\n      </button>\n    );\n  }\n}\n\nexport const Button = withStyles(styles)(RawButton);\n\nexport class RawMarkButton extends React.Component {\n  static propTypes = {\n    onToggle: PropTypes.func.isRequired,\n    mark: PropTypes.string,\n    label: PropTypes.string.isRequired,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    classes: PropTypes.object.isRequired,\n    active: PropTypes.bool,\n  };\n\n  constructor(props) {\n    super(props);\n  }\n\n  onToggle = (e) => {\n    e.preventDefault();\n    this.props.onToggle(this.props.mark);\n  };\n\n  onKeyDown = (e) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.props.onToggle(this.props.mark);\n    }\n  };\n\n  render() {\n    const { classes, children, active, label } = this.props;\n\n    const names = classNames(classes.button, active && classes.active);\n    return (\n      <button\n        className={names}\n        onMouseDown={this.onToggle}\n        aria-pressed={active}\n        onKeyDown={this.onKeyDown}\n        aria-label={label}\n        tabIndex={0}\n      >\n        {children}\n      </button>\n    );\n  }\n}\n\nexport const MarkButton = withStyles(styles)(RawMarkButton);\n"],"file":"toolbar-buttons.js"}

package/lib/plugins/toolbar/toolbar.js

@@ -49,6 +49,8 @@ var _defaultToolbar = _interopRequireDefault(require("./default-toolbar"));
 
 var _characters = require("../characters");
 
+var _constants = require("../../constants");
+
 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; }
@@ -59,7 +61,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:toolbar');
 
-var getCustomToolbar = function getCustomToolbar(plugin, node, value, handleDone, onDataChange) {
+var getCustomToolbar = function getCustomToolbar(plugin, node, value, handleDone, getFocusedValue, onDataChange) {
   if (!plugin) {
     return;
   }
@@ -78,7 +80,7 @@ var getCustomToolbar = function getCustomToolbar(plugin, node, value, handleDone
     return plugin.toolbar.CustomToolbarComp;
   } else if (typeof plugin.toolbar.customToolbar === 'function') {
     log('deprecated - use CustomToolbarComp');
-    return plugin.toolbar.customToolbar(node, value, handleDone, onDataChange);
+    return plugin.toolbar.customToolbar(node, value, handleDone, getFocusedValue, onDataChange);
   }
 };
 
@@ -177,7 +179,10 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           getFocusedValue = _this$props3.getFocusedValue,
           isFocused = _this$props3.isFocused,
           onDone = _this$props3.onDone,
-          toolbarRef = _this$props3.toolbarRef;
+          toolbarRef = _this$props3.toolbarRef,
+          doneButtonRef = _this$props3.doneButtonRef,
+          onBlur = _this$props3.onBlur,
+          onFocus = _this$props3.onFocus;
       var node = (0, _utils.findSingleNode)(value);
       var parentNode = (0, _utils.findParentNode)(value, node);
       log(' --------------> [render] node: ', node);
@@ -220,7 +225,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         _this2.props.onDataChange(key, data);
       };
 
-      var CustomToolbar = getCustomToolbar(plugin, node, value, handleDone, this.props.onDataChange);
+      var CustomToolbar = getCustomToolbar(plugin, node, value, handleDone, getFocusedValue, this.props.onDataChange);
       var filteredPlugins = plugin && plugin.filterPlugins ? plugin.filterPlugins(node, plugins) : plugins;
       log('[render] CustomToolbar: ', CustomToolbar);
       var parentExtraStyles = parentPlugin && parentPlugin.pluginStyles ? parentPlugin.pluginStyles(node, parentNode, plugin) : {};
@@ -233,15 +238,19 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
 
       var defaultToolbarShowDone = !toolbarOpts || toolbarOpts.showDone !== false;
       var hasDoneButton = defaultToolbarShowDone || customToolbarShowDone;
-      var names = (0, _classnames["default"])(classes.toolbar, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.toolbarWithNoDone, !hasDoneButton), (0, _defineProperty2["default"])(_classNames, classes.toolbarTop, toolbarOpts.position === 'top'), (0, _defineProperty2["default"])(_classNames, classes.toolbarRight, toolbarOpts.alignment === 'right'), (0, _defineProperty2["default"])(_classNames, classes.focused, toolbarOpts.alwaysVisible || isFocused), (0, _defineProperty2["default"])(_classNames, classes.autoWidth, autoWidth), (0, _defineProperty2["default"])(_classNames, classes.fullWidth, !autoWidth), _classNames));
+      var names = (0, _classnames["default"])(classes.toolbar, _constants.PIE_TOOLBAR__CLASS, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.toolbarWithNoDone, !hasDoneButton), (0, _defineProperty2["default"])(_classNames, classes.toolbarTop, toolbarOpts.position === 'top'), (0, _defineProperty2["default"])(_classNames, classes.toolbarRight, toolbarOpts.alignment === 'right'), (0, _defineProperty2["default"])(_classNames, classes.focused, toolbarOpts.alwaysVisible || isFocused), (0, _defineProperty2["default"])(_classNames, classes.autoWidth, autoWidth), (0, _defineProperty2["default"])(_classNames, classes.fullWidth, !autoWidth), (0, _defineProperty2["default"])(_classNames, classes.hidden, toolbarOpts.isHidden === true), _classNames));
+      var customStyles = toolbarOpts.minWidth !== undefined ? {
+        minWidth: toolbarOpts.minWidth
+      } : {};
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: names,
-        style: extraStyles,
+        style: _objectSpread(_objectSpread({}, extraStyles), customStyles),
         onClick: this.onClick,
         ref: toolbarRef
       }, CustomToolbar ? /*#__PURE__*/_react["default"].createElement(CustomToolbar, {
         node: node,
         value: value,
+        getFocusedValue: getFocusedValue,
         onToolbarDone: this.onToolbarDone,
         onDataChange: handleDataChange,
         pluginProps: pluginProps
@@ -254,7 +263,10 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         showDone: defaultToolbarShowDone,
         onDone: handleDone,
         deletable: deletable,
-        isHtmlMode: toolbarOpts.isHtmlMode
+        isHtmlMode: toolbarOpts.isHtmlMode,
+        onFocus: onFocus,
+        doneButtonRef: doneButtonRef,
+        onBlur: onBlur
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.shared
       }, deletable && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
@@ -267,6 +279,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           root: classes.iconRoot
         }
       }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)), customToolbarShowDone && /*#__PURE__*/_react["default"].createElement(_doneButton.DoneButton, {
+        doneButtonRef: doneButtonRef,
         onClick: handleDone
       })));
     }
@@ -294,9 +307,14 @@ exports.Toolbar = Toolbar;
     alignment: _propTypes["default"].oneOf(['left', 'right']),
     alwaysVisible: _propTypes["default"].bool,
     ref: _propTypes["default"].func,
-    showDone: _propTypes["default"].bool
+    showDone: _propTypes["default"].bool,
+    minWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+    isHidden: _propTypes["default"].bool
   }),
-  onDataChange: _propTypes["default"].func
+  onDataChange: _propTypes["default"].func,
+  doneButtonRef: _propTypes["default"].func,
+  onBlur: _propTypes["default"].func,
+  onFocus: _propTypes["default"].func
 });
 var style = {
   toolbar: {
@@ -310,7 +328,9 @@ var style = {
     padding: '2px',
     boxShadow: '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
     boxSizing: 'border-box',
-    display: 'none'
+    display: 'flex',
+    opacity: 0,
+    pointerEvents: 'none'
   },
   toolbarWithNoDone: {
     minWidth: '265px'
@@ -324,11 +344,15 @@ var style = {
   fullWidth: {
     width: '100%'
   },
+  hidden: {
+    visibility: 'hidden'
+  },
   autoWidth: {
     width: 'auto'
   },
   focused: {
-    display: 'flex'
+    opacity: 1,
+    pointerEvents: 'auto'
   },
   iconRoot: {
     width: '28px',

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plugins/toolbar/toolbar.jsx"],"names":["log","getCustomToolbar","plugin","node","value","handleDone","onDataChange","toolbar","CustomToolbarComp","customToolbar","Toolbar","props","type","marks","some","mark","blocks","onChange","onToggle","change","e","preventDefault","fn","finishEditing","onDone","Change","deleteNode","persist","onDeleteClick","state","classes","plugins","pluginProps","toolbarOpts","autoWidth","getFocusedValue","isFocused","toolbarRef","parentNode","find","p","supports","parentPlugin","done","handler","onToolbarDone","handleDataChange","key","data","CustomToolbar","filteredPlugins","filterPlugins","parentExtraStyles","pluginStyles","pluginExtraStyles","extraStyles","deletable","customToolbarShowDone","showDone","alwaysVisible","defaultToolbarShowDone","hasDoneButton","names","toolbarWithNoDone","toolbarTop","position","toolbarRight","alignment","focused","fullWidth","onClick","isHtmlMode","shared","iconRoot","onDeleteMouseDown","root","React","Component","zIndex","PropTypes","number","SlatePropTypes","isRequired","array","object","onImageClick","func","bool","shape","oneOf","ref","style","cursor","justifyContent","background","minWidth","margin","padding","boxShadow","boxSizing","display","top","right","width","height","verticalAlign","label","color","index"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Change } from 'slate';\nimport Delete from '@material-ui/icons/Delete';\nimport IconButton from '@material-ui/core/IconButton';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport SlatePropTypes from 'slate-prop-types';\nimport debounce from 'lodash/debounce';\n\nimport { DoneButton } from './done-button';\n\nimport { findSingleNode, findParentNode } from '../utils';\nimport { withStyles } from '@material-ui/core/styles';\nimport DefaultToolbar from './default-toolbar';\nimport { removeDialogs as removeCharacterDialogs } from '../characters';\n\nconst log = debug('@pie-lib:editable-html:plugins:toolbar');\n\nconst getCustomToolbar = (plugin, node, value, handleDone, onDataChange) => {\n  if (!plugin) {\n    return;\n  }\n  if (!plugin.toolbar) {\n    return;\n  }\n  if (plugin.toolbar.CustomToolbarComp) {\n    /**\n     * Using a pre-defined Component should be preferred\n     * as the rendering of it (and it's children) can be optimized by React.\n     * If you keep re-defining the comp with an inline function\n     * then react will have to re-render.\n     */\n    return plugin.toolbar.CustomToolbarComp;\n  } else if (typeof plugin.toolbar.customToolbar === 'function') {\n    log('deprecated - use CustomToolbarComp');\n    return plugin.toolbar.customToolbar(node, value, handleDone, onDataChange);\n  }\n};\n\nexport class Toolbar extends React.Component {\n  static propTypes = {\n    zIndex: PropTypes.number,\n    value: SlatePropTypes.value.isRequired,\n    plugins: PropTypes.array,\n    plugin: PropTypes.object,\n    onImageClick: PropTypes.func,\n    onDone: PropTypes.func.isRequired,\n    toolbarRef: PropTypes.func.isRequired,\n    classes: PropTypes.object.isRequired,\n    isFocused: PropTypes.bool,\n    autoWidth: PropTypes.bool,\n    onChange: PropTypes.func.isRequired,\n    getFocusedValue: PropTypes.func.isRequired,\n    pluginProps: PropTypes.object,\n    toolbarOpts: PropTypes.shape({\n      position: PropTypes.oneOf(['bottom', 'top']),\n      alignment: PropTypes.oneOf(['left', 'right']),\n      alwaysVisible: PropTypes.bool,\n      ref: PropTypes.func,\n      showDone: PropTypes.bool,\n    }),\n    onDataChange: PropTypes.func,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      change: null,\n    };\n  }\n\n  componentWillUnmount() {\n    removeCharacterDialogs();\n  }\n\n  hasMark = (type) => {\n    const { value } = this.props;\n    return value.marks.some((mark) => mark.type == type);\n  };\n\n  hasBlock = (type) => {\n    const { value } = this.props;\n    return value.blocks.some((node) => node.type == type);\n  };\n\n  onToggle = (plugin) => {\n    const { value, onChange } = this.props;\n\n    if (!plugin.onToggle) return;\n\n    const change = plugin.onToggle(value.change());\n    onChange(change);\n  };\n\n  onClick = (e) => {\n    log('[onClick]');\n    e.preventDefault();\n  };\n\n  onButtonClick = (fn) => {\n    return (e) => {\n      e.preventDefault();\n      fn();\n    };\n  };\n\n  onToolbarDone = (change, finishEditing) => {\n    log('[onToolbarDone] change: ', change, 'finishEditing: ', finishEditing);\n    const { onChange, onDone } = this.props;\n\n    // use handler only if this is an actual Slate Change\n    if (change instanceof Change) {\n      onChange(change, () => {\n        if (finishEditing) {\n          onDone();\n        }\n      });\n    } else {\n      if (finishEditing) {\n        log('[onToolbarChange] call onDone');\n        onDone();\n      }\n    }\n  };\n\n  onDeleteClick = debounce((e, plugin, node, value, onChange) => plugin.deleteNode(e, node, value, onChange), 500);\n\n  onDeleteMouseDown = (e, plugin, node, value, onChange) => {\n    e.persist();\n    this.onDeleteClick(e, plugin, node, value, onChange);\n  };\n\n  render() {\n    const {\n      classes,\n      plugins,\n      pluginProps,\n      toolbarOpts,\n      value,\n      autoWidth,\n      onChange,\n      getFocusedValue,\n      isFocused,\n      onDone,\n      toolbarRef,\n    } = this.props;\n\n    const node = findSingleNode(value);\n    const parentNode = findParentNode(value, node);\n\n    log(' --------------> [render] node: ', node);\n    log('[render] node: ', node);\n\n    const plugin = plugins.find((p) => {\n      if (!node) {\n        return;\n      }\n\n      if (p.toolbar) {\n        return p.toolbar.supports && p.toolbar.supports(node, value);\n      }\n    });\n    const parentPlugin = plugins.find((p) => {\n      if (!parentNode) {\n        return;\n      }\n\n      if (p.toolbar) {\n        return p.toolbar.supports && p.toolbar.supports(parentNode, value);\n      }\n    });\n\n    log('[render] plugin: ', plugin);\n\n    const handleDone = (change, done) => {\n      let handler = onDone;\n\n      if (plugin && plugin.toolbar && plugin.toolbar.customToolbar) {\n        handler = this.onToolbarDone;\n      }\n\n      handler(change, done);\n\n      if (parentPlugin && parentPlugin.handleDone) {\n        parentPlugin.handleDone(value, node, plugin, onChange);\n      }\n    };\n\n    const handleDataChange = (key, data) => {\n      this.props.onDataChange(key, data);\n    };\n\n    const CustomToolbar = getCustomToolbar(plugin, node, value, handleDone, this.props.onDataChange);\n\n    const filteredPlugins = plugin && plugin.filterPlugins ? plugin.filterPlugins(node, plugins) : plugins;\n\n    log('[render] CustomToolbar: ', CustomToolbar);\n    const parentExtraStyles =\n      parentPlugin && parentPlugin.pluginStyles ? parentPlugin.pluginStyles(node, parentNode, plugin) : {};\n    const pluginExtraStyles = plugin && plugin.pluginStyles ? plugin.pluginStyles(node, parentNode, plugin) : {};\n    const extraStyles = {\n      ...pluginExtraStyles,\n      ...parentExtraStyles,\n    };\n\n    const deletable = node && plugin && plugin.deleteNode;\n    const customToolbarShowDone =\n      node && plugin && plugin.toolbar && plugin.toolbar.showDone && !toolbarOpts.alwaysVisible;\n\n    // If there is a toolbarOpts we check if the showDone is not equal to false\n    const defaultToolbarShowDone = !toolbarOpts || toolbarOpts.showDone !== false;\n\n    const hasDoneButton = defaultToolbarShowDone || customToolbarShowDone;\n\n    const names = classNames(classes.toolbar, {\n      [classes.toolbarWithNoDone]: !hasDoneButton,\n      [classes.toolbarTop]: toolbarOpts.position === 'top',\n      [classes.toolbarRight]: toolbarOpts.alignment === 'right',\n      [classes.focused]: toolbarOpts.alwaysVisible || isFocused,\n      [classes.autoWidth]: autoWidth,\n      [classes.fullWidth]: !autoWidth,\n    });\n\n    return (\n      <div className={names} style={extraStyles} onClick={this.onClick} ref={toolbarRef}>\n        {CustomToolbar ? (\n          <CustomToolbar\n            node={node}\n            value={value}\n            onToolbarDone={this.onToolbarDone}\n            onDataChange={handleDataChange}\n            pluginProps={pluginProps}\n          />\n        ) : (\n          <DefaultToolbar\n            plugins={filteredPlugins}\n            pluginProps={pluginProps}\n            value={value}\n            onChange={onChange}\n            getFocusedValue={getFocusedValue}\n            showDone={defaultToolbarShowDone}\n            onDone={handleDone}\n            deletable={deletable}\n            isHtmlMode={toolbarOpts.isHtmlMode}\n          />\n        )}\n\n        <div className={classes.shared}>\n          {deletable && (\n            <IconButton\n              aria-label=\"Delete\"\n              className={classes.iconRoot}\n              onMouseDown={(e) => this.onDeleteMouseDown(e, plugin, node, value, onChange)}\n              classes={{\n                root: classes.iconRoot,\n              }}\n            >\n              <Delete />\n            </IconButton>\n          )}\n          {customToolbarShowDone && <DoneButton onClick={handleDone} />}\n        </div>\n      </div>\n    );\n  }\n}\n\nconst style = {\n  toolbar: {\n    position: 'absolute',\n    zIndex: 10,\n    cursor: 'pointer',\n    justifyContent: 'space-between',\n    background: 'var(--editable-html-toolbar-bg, #efefef)',\n    minWidth: '280px',\n    margin: '5px 0 0 0',\n    padding: '2px',\n    boxShadow:\n      '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',\n    boxSizing: 'border-box',\n    display: 'none',\n  },\n  toolbarWithNoDone: {\n    minWidth: '265px',\n  },\n  toolbarTop: {\n    top: '-45px',\n  },\n  toolbarRight: {\n    right: 0,\n  },\n  fullWidth: {\n    width: '100%',\n  },\n  autoWidth: {\n    width: 'auto',\n  },\n  focused: {\n    display: 'flex',\n  },\n  iconRoot: {\n    width: '28px',\n    height: '28px',\n    padding: '4px',\n    verticalAlign: 'top',\n  },\n  label: {\n    color: 'var(--editable-html-toolbar-check, #00bb00)',\n  },\n  shared: {\n    display: 'flex',\n  },\n};\nexport default withStyles(style, { index: 1000 })(Toolbar);\n"],"file":"toolbar.js"}
+{"version":3,"sources":["../../../src/plugins/toolbar/toolbar.jsx"],"names":["log","getCustomToolbar","plugin","node","value","handleDone","getFocusedValue","onDataChange","toolbar","CustomToolbarComp","customToolbar","Toolbar","props","type","marks","some","mark","blocks","onChange","onToggle","change","e","preventDefault","fn","finishEditing","onDone","Change","deleteNode","persist","onDeleteClick","state","classes","plugins","pluginProps","toolbarOpts","autoWidth","isFocused","toolbarRef","doneButtonRef","onBlur","onFocus","parentNode","find","p","supports","parentPlugin","done","handler","onToolbarDone","handleDataChange","key","data","CustomToolbar","filteredPlugins","filterPlugins","parentExtraStyles","pluginStyles","pluginExtraStyles","extraStyles","deletable","customToolbarShowDone","showDone","alwaysVisible","defaultToolbarShowDone","hasDoneButton","names","PIE_TOOLBAR__CLASS","toolbarWithNoDone","toolbarTop","position","toolbarRight","alignment","focused","fullWidth","hidden","isHidden","customStyles","minWidth","undefined","onClick","isHtmlMode","shared","iconRoot","onDeleteMouseDown","root","React","Component","zIndex","PropTypes","number","SlatePropTypes","isRequired","array","object","onImageClick","func","bool","shape","oneOf","ref","oneOfType","string","style","cursor","justifyContent","background","margin","padding","boxShadow","boxSizing","display","opacity","pointerEvents","top","right","width","visibility","height","verticalAlign","label","color","index"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Change } from 'slate';\nimport Delete from '@material-ui/icons/Delete';\nimport IconButton from '@material-ui/core/IconButton';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport SlatePropTypes from 'slate-prop-types';\nimport debounce from 'lodash/debounce';\n\nimport { DoneButton } from './done-button';\n\nimport { findSingleNode, findParentNode } from '../utils';\nimport { withStyles } from '@material-ui/core/styles';\nimport DefaultToolbar from './default-toolbar';\nimport { removeDialogs as removeCharacterDialogs } from '../characters';\nimport { PIE_TOOLBAR__CLASS } from '../../constants';\n\nconst log = debug('@pie-lib:editable-html:plugins:toolbar');\n\nconst getCustomToolbar = (plugin, node, value, handleDone, getFocusedValue, onDataChange) => {\n  if (!plugin) {\n    return;\n  }\n\n  if (!plugin.toolbar) {\n    return;\n  }\n\n  if (plugin.toolbar.CustomToolbarComp) {\n    /**\n     * Using a pre-defined Component should be preferred\n     * as the rendering of it (and it's children) can be optimized by React.\n     * If you keep re-defining the comp with an inline function\n     * then react will have to re-render.\n     */\n    return plugin.toolbar.CustomToolbarComp;\n  } else if (typeof plugin.toolbar.customToolbar === 'function') {\n    log('deprecated - use CustomToolbarComp');\n    return plugin.toolbar.customToolbar(node, value, handleDone, getFocusedValue, onDataChange);\n  }\n};\n\nexport class Toolbar extends React.Component {\n  static propTypes = {\n    zIndex: PropTypes.number,\n    value: SlatePropTypes.value.isRequired,\n    plugins: PropTypes.array,\n    plugin: PropTypes.object,\n    onImageClick: PropTypes.func,\n    onDone: PropTypes.func.isRequired,\n    toolbarRef: PropTypes.func.isRequired,\n    classes: PropTypes.object.isRequired,\n    isFocused: PropTypes.bool,\n    autoWidth: PropTypes.bool,\n    onChange: PropTypes.func.isRequired,\n    getFocusedValue: PropTypes.func.isRequired,\n    pluginProps: PropTypes.object,\n    toolbarOpts: PropTypes.shape({\n      position: PropTypes.oneOf(['bottom', 'top']),\n      alignment: PropTypes.oneOf(['left', 'right']),\n      alwaysVisible: PropTypes.bool,\n      ref: PropTypes.func,\n      showDone: PropTypes.bool,\n      minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n      isHidden: PropTypes.bool,\n    }),\n    onDataChange: PropTypes.func,\n    doneButtonRef: PropTypes.func,\n    onBlur: PropTypes.func,\n    onFocus: PropTypes.func,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      change: null,\n    };\n  }\n\n  componentWillUnmount() {\n    removeCharacterDialogs();\n  }\n\n  hasMark = (type) => {\n    const { value } = this.props;\n    return value.marks.some((mark) => mark.type == type);\n  };\n\n  hasBlock = (type) => {\n    const { value } = this.props;\n    return value.blocks.some((node) => node.type == type);\n  };\n\n  onToggle = (plugin) => {\n    const { value, onChange } = this.props;\n\n    if (!plugin.onToggle) return;\n\n    const change = plugin.onToggle(value.change());\n    onChange(change);\n  };\n\n  onClick = (e) => {\n    log('[onClick]');\n    e.preventDefault();\n  };\n\n  onButtonClick = (fn) => {\n    return (e) => {\n      e.preventDefault();\n      fn();\n    };\n  };\n\n  onToolbarDone = (change, finishEditing) => {\n    log('[onToolbarDone] change: ', change, 'finishEditing: ', finishEditing);\n    const { onChange, onDone } = this.props;\n\n    // use handler only if this is an actual Slate Change\n    if (change instanceof Change) {\n      onChange(change, () => {\n        if (finishEditing) {\n          onDone();\n        }\n      });\n    } else {\n      if (finishEditing) {\n        log('[onToolbarChange] call onDone');\n        onDone();\n      }\n    }\n  };\n\n  onDeleteClick = debounce((e, plugin, node, value, onChange) => plugin.deleteNode(e, node, value, onChange), 500);\n\n  onDeleteMouseDown = (e, plugin, node, value, onChange) => {\n    e.persist();\n    this.onDeleteClick(e, plugin, node, value, onChange);\n  };\n\n  render() {\n    const {\n      classes,\n      plugins,\n      pluginProps,\n      toolbarOpts,\n      value,\n      autoWidth,\n      onChange,\n      getFocusedValue,\n      isFocused,\n      onDone,\n      toolbarRef,\n      doneButtonRef,\n      onBlur,\n      onFocus,\n    } = this.props;\n\n    const node = findSingleNode(value);\n    const parentNode = findParentNode(value, node);\n\n    log(' --------------> [render] node: ', node);\n    log('[render] node: ', node);\n\n    const plugin = plugins.find((p) => {\n      if (!node) {\n        return;\n      }\n\n      if (p.toolbar) {\n        return p.toolbar.supports && p.toolbar.supports(node, value);\n      }\n    });\n    const parentPlugin = plugins.find((p) => {\n      if (!parentNode) {\n        return;\n      }\n\n      if (p.toolbar) {\n        return p.toolbar.supports && p.toolbar.supports(parentNode, value);\n      }\n    });\n\n    log('[render] plugin: ', plugin);\n\n    const handleDone = (change, done) => {\n      let handler = onDone;\n\n      if (plugin && plugin.toolbar && plugin.toolbar.customToolbar) {\n        handler = this.onToolbarDone;\n      }\n\n      handler(change, done);\n\n      if (parentPlugin && parentPlugin.handleDone) {\n        parentPlugin.handleDone(value, node, plugin, onChange);\n      }\n    };\n\n    const handleDataChange = (key, data) => {\n      this.props.onDataChange(key, data);\n    };\n\n    const CustomToolbar = getCustomToolbar(plugin, node, value, handleDone, getFocusedValue, this.props.onDataChange);\n\n    const filteredPlugins = plugin && plugin.filterPlugins ? plugin.filterPlugins(node, plugins) : plugins;\n\n    log('[render] CustomToolbar: ', CustomToolbar);\n    const parentExtraStyles =\n      parentPlugin && parentPlugin.pluginStyles ? parentPlugin.pluginStyles(node, parentNode, plugin) : {};\n    const pluginExtraStyles = plugin && plugin.pluginStyles ? plugin.pluginStyles(node, parentNode, plugin) : {};\n    const extraStyles = {\n      ...pluginExtraStyles,\n      ...parentExtraStyles,\n    };\n\n    const deletable = node && plugin && plugin.deleteNode;\n    const customToolbarShowDone =\n      node && plugin && plugin.toolbar && plugin.toolbar.showDone && !toolbarOpts.alwaysVisible;\n\n    // If there is a toolbarOpts we check if the showDone is not equal to false\n    const defaultToolbarShowDone = !toolbarOpts || toolbarOpts.showDone !== false;\n\n    const hasDoneButton = defaultToolbarShowDone || customToolbarShowDone;\n\n    const names = classNames(classes.toolbar, PIE_TOOLBAR__CLASS, {\n      [classes.toolbarWithNoDone]: !hasDoneButton,\n      [classes.toolbarTop]: toolbarOpts.position === 'top',\n      [classes.toolbarRight]: toolbarOpts.alignment === 'right',\n      [classes.focused]: toolbarOpts.alwaysVisible || isFocused,\n      [classes.autoWidth]: autoWidth,\n      [classes.fullWidth]: !autoWidth,\n      [classes.hidden]: toolbarOpts.isHidden === true,\n    });\n    const customStyles = toolbarOpts.minWidth !== undefined ? { minWidth: toolbarOpts.minWidth } : {};\n\n    return (\n      <div className={names} style={{ ...extraStyles, ...customStyles }} onClick={this.onClick} ref={toolbarRef}>\n        {CustomToolbar ? (\n          <CustomToolbar\n            node={node}\n            value={value}\n            getFocusedValue={getFocusedValue}\n            onToolbarDone={this.onToolbarDone}\n            onDataChange={handleDataChange}\n            pluginProps={pluginProps}\n          />\n        ) : (\n          <DefaultToolbar\n            plugins={filteredPlugins}\n            pluginProps={pluginProps}\n            value={value}\n            onChange={onChange}\n            getFocusedValue={getFocusedValue}\n            showDone={defaultToolbarShowDone}\n            onDone={handleDone}\n            deletable={deletable}\n            isHtmlMode={toolbarOpts.isHtmlMode}\n            onFocus={onFocus}\n            doneButtonRef={doneButtonRef}\n            onBlur={onBlur}\n          />\n        )}\n\n        <div className={classes.shared}>\n          {deletable && (\n            <IconButton\n              aria-label=\"Delete\"\n              className={classes.iconRoot}\n              onMouseDown={(e) => this.onDeleteMouseDown(e, plugin, node, value, onChange)}\n              classes={{\n                root: classes.iconRoot,\n              }}\n            >\n              <Delete />\n            </IconButton>\n          )}\n          {customToolbarShowDone && <DoneButton doneButtonRef={doneButtonRef} onClick={handleDone} />}\n        </div>\n      </div>\n    );\n  }\n}\n\nconst style = {\n  toolbar: {\n    position: 'absolute',\n    zIndex: 10,\n    cursor: 'pointer',\n    justifyContent: 'space-between',\n    background: 'var(--editable-html-toolbar-bg, #efefef)',\n    minWidth: '280px',\n    margin: '5px 0 0 0',\n    padding: '2px',\n    boxShadow:\n      '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',\n    boxSizing: 'border-box',\n    display: 'flex',\n    opacity: 0,\n    pointerEvents: 'none',\n  },\n  toolbarWithNoDone: {\n    minWidth: '265px',\n  },\n  toolbarTop: {\n    top: '-45px',\n  },\n  toolbarRight: {\n    right: 0,\n  },\n  fullWidth: {\n    width: '100%',\n  },\n  hidden: {\n    visibility: 'hidden',\n  },\n  autoWidth: {\n    width: 'auto',\n  },\n  focused: {\n    opacity: 1,\n    pointerEvents: 'auto',\n  },\n  iconRoot: {\n    width: '28px',\n    height: '28px',\n    padding: '4px',\n    verticalAlign: 'top',\n  },\n  label: {\n    color: 'var(--editable-html-toolbar-check, #00bb00)',\n  },\n  shared: {\n    display: 'flex',\n  },\n};\nexport default withStyles(style, { index: 1000 })(Toolbar);\n"],"file":"toolbar.js"}