@convertkit/selection-toolbar - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

es/index.js

@@ -1137,3 +1137,4 @@ import React, { Component } from 'react';
   _proto.componentWillUnmount = function componentWillUnmount() {
-    document.addEventListener("selectionchange", this.handleSelectionChanged);
+    document.removeEventListener("selectionchange", this.handleSelectionChanged);
+    clearTimeout(this.timeout);
   };
@@ -1166,2 +1167,118 @@
 
+var ToolbarButton = function ToolbarButton(_ref) {
+  var onClick = _ref.onClick,
+      openMenu = _ref.openMenu,
+      editor = _ref.editor,
+      index = _ref.index,
+      ButtonComponent = _ref.component;
+
+  var openMenuAtIndex = function openMenuAtIndex() {
+    openMenu(index);
+  };
+
+  var preventDefault = function preventDefault(event) {
+    event.preventDefault();
+  };
+
+  var handleClick = function handleClick(event) {
+    onClick(event, editor, openMenuAtIndex);
+  };
+
+  return React.createElement("button", {
+    onMouseDown: preventDefault,
+    onClick: handleClick,
+    className: "convertkit-editor-selection-toolbar-button",
+    type: "button"
+  }, React.createElement(ButtonComponent, null));
+};
+
+var ClickOutside =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(ClickOutside, _Component);
+
+  function ClickOutside() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "child", React.createRef());
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseDown", function (event) {
+      if (_this.child.current.contains(event.target)) {
+        return;
+      }
+
+      _this.props.onClickOutside(event);
+    });
+
+    return _this;
+  }
+
+  var _proto = ClickOutside.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    document.addEventListener("mousedown", this.handleMouseDown);
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    document.removeEventListener("mousedown", this.handleMouseDown);
+  };
+
+  _proto.render = function render() {
+    var child = React.Children.only(this.props.children);
+    return React.cloneElement(child, {
+      ref: this.child
+    });
+  };
+
+  return ClickOutside;
+}(Component);
+
+var ToolbarMenu = function ToolbarMenu(_ref) {
+  var close = _ref.close,
+      editor = _ref.editor,
+      Menu = _ref.component;
+  if (!Menu) return null;
+  return React.createElement(ClickOutside, {
+    onClickOutside: close
+  }, React.createElement("div", null, React.createElement(Menu, {
+    close: close,
+    editor: editor
+  })));
+};
+
+var Toolbar = React.forwardRef(function Toolbar(_ref, ref) {
+  var buttons = _ref.buttons,
+      editor = _ref.editor,
+      menu = _ref.menu,
+      className = _ref.className,
+      style = _ref.style;
+  return React.createElement("div", {
+    ref: ref,
+    className: className,
+    style: _extends({}, style)
+  }, React.createElement("div", {
+    style: {
+      display: menu.active ? "none" : "block"
+    }
+  }, buttons.map(function (button, i) {
+    return React.createElement(ToolbarButton, _extends({
+      key: i
+    }, button, {
+      index: i,
+      openMenu: menu.open,
+      editor: editor
+    }));
+  })), React.createElement("div", null, React.createElement(ToolbarMenu, {
+    component: menu.active ? buttons[menu.index].menu : null,
+    editor: editor,
+    close: menu.close
+  })));
+});
+
 var wrapRect = function wrapRect(rect) {
@@ -1185,8 +1302,8 @@ return {
 
-var Toolbar =
+var SelectionToolbar =
 /*#__PURE__*/
 function (_Component) {
-  _inheritsLoose(Toolbar, _Component);
+  _inheritsLoose(SelectionToolbar, _Component);
 
-  function Toolbar() {
+  function SelectionToolbar() {
     var _this;
@@ -1201,3 +1318,4 @@
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
-      visible: false
+      visible: false,
+      menu: null
     });
@@ -1209,5 +1327,6 @@
       var visible = _this.state.visible;
-      var textSelected = isTextSelected(_this.props.value);
+      var menuOpen = _this.state.menu != undefined;
+      var textSelected = isTextSelected(_this.props.editor.value);
       var shouldShow = textSelected && !visible;
-      var shouldHide = !textSelected && visible;
+      var shouldHide = !textSelected && !menuOpen && visible;
       if (shouldShow) return _this.show();
@@ -1234,3 +1353,7 @@ if (shouldHide) return _this.hide();
         });
-      }, _this.transitionEnd);
+      }, function () {
+        _this.transitionEnd();
+
+        _this.closeMenu();
+      });
     });
@@ -1249,6 +1372,18 @@
 
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "openMenu", function (menu) {
+      _this.setState({
+        menu: menu
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "closeMenu", function () {
+      _this.setState({
+        menu: null
+      });
+    });
+
     return _this;
   }
 
-  var _proto = Toolbar.prototype;
+  var _proto = SelectionToolbar.prototype;
 
@@ -1268,6 +1403,6 @@ _proto.componentDidMount = function componentDidMount() {
         buttons = _this$props.buttons,
-        styles = _this$props.styles,
-        value = _this$props.value,
-        onChange = _this$props.onChange;
+        editor = _this$props.editor,
+        styles = _this$props.styles;
     var _this$state = this.state,
+        menu = _this$state.menu,
         transitioning = _this$state.transitioning,
@@ -1283,3 +1418,5 @@ visible = _this$state.visible;
     });
-    var debounce = transitioning ? -1 : visible ? 201 : 0;
+    var menuOpen = menu != undefined;
+    var freezePosition = transitioning || menuOpen;
+    var debounce = freezePosition ? -1 : visible ? 201 : 0;
     return React.createElement(SelectionRect, {
@@ -1297,19 +1434,18 @@ debounce: debounce
             left = _ref.left;
-        return React.createElement("div", {
+        return React.createElement(Toolbar, {
           ref: _this2.toolbar,
+          buttons: buttons,
+          editor: editor,
+          menu: {
+            active: menu != null,
+            index: menu,
+            close: _this2.hide,
+            open: _this2.openMenu
+          },
           className: className,
           style: _extends({
-            bottom: bottom,
+            bottom: bottom + 8,
             left: left
-          }, toolbarStyle),
-          onMouseDown: _this2.handleMouseDown
-        }, buttons.map(function (button, i) {
-          return React.createElement(ToolbarButton, _extends({
-            key: i
-          }, button, {
-            onChange: onChange,
-            style: buttonStyle,
-            value: value
-          }));
-        }));
+          }, toolbarStyle)
+        });
       });
@@ -1319,6 +1455,6 @@ });
 
-  return Toolbar;
+  return SelectionToolbar;
 }(Component);
 
-_defineProperty(Toolbar, "propTypes", {
+_defineProperty(SelectionToolbar, "propTypes", {
   buttons: propTypes.array.isRequired,
@@ -1328,3 +1464,3 @@ styles: propTypes.object.isRequired
 
-_defineProperty(Toolbar, "defaultProps", {
+_defineProperty(SelectionToolbar, "defaultProps", {
   buttons: [],
@@ -1334,20 +1470,2 @@ styles: {}
 
-var ToolbarButton = function ToolbarButton(_ref2) {
-  var onClick = _ref2.onClick,
-      onChange = _ref2.onChange,
-      value = _ref2.value,
-      ButtonComponent = _ref2.component;
-
-  var handleClick = function handleClick(event) {
-    event.preventDefault();
-    onChange(onClick(event, value));
-  };
-
-  return React.createElement("button", {
-    onClick: handleClick,
-    className: "convertkit-editor-selection-toolbar-button",
-    type: "button"
-  }, React.createElement(ButtonComponent, null));
-};
-
 var index = (function (options) {
@@ -1360,7 +1478,8 @@ if (options === void 0) {
   return {
-    renderEditor: function renderEditor(props, editor) {
-      return React.createElement(React.Fragment, null, props.children, React.createElement(Toolbar, {
-        onChange: editor.props.onChange,
+    renderEditor: function renderEditor(props, next) {
+      var editor = props.editor;
+      var children = next();
+      return React.createElement(React.Fragment, null, children, React.createElement(SelectionToolbar, {
         buttons: buttons,
-        value: editor.props.value,
+        editor: editor,
         styles: options.styles
@@ -1367,0 +1486,0 @@ }));

package.json

 {
   "name": "@convertkit/selection-toolbar",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A toolbar for the ConvertKit Editor that hovers over the selection.",
@@ -32,3 +32,3 @@ "main": "index.js",
   },
-  "gitHead": "f2a62aec55995784e744f126aa8d9225b06a1183"
+  "gitHead": "19e605bb14ab36d7ea3dc133ae02eeac4c8ce0d8"
 }

src/index.js

@@ -8,10 +8,11 @@ import React from "react";
   return {
-    renderEditor(props, editor) {
+    renderEditor(props, next) {
+      const editor = props.editor;
+      const children = next();
       return (
         <React.Fragment>
-          {props.children}
+          {children}
           <SelectionToolbar
-            onChange={editor.props.onChange}
             buttons={buttons}
-            value={editor.props.value}
+            editor={editor}
             styles={options.styles}
@@ -18,0 +19,0 @@ />

src/selection-rect.js

@@ -35,3 +35,7 @@ import { Component } from "react";
   componentWillUnmount() {
-    document.addEventListener("selectionchange", this.handleSelectionChanged);
+    document.removeEventListener(
+      "selectionchange",
+      this.handleSelectionChanged
+    );
+    clearTimeout(this.timeout);
   }
@@ -38,0 +42,0 @@

src/selection-toolbar.js

@@ -7,2 +7,3 @@ import React, { Component } from "react";
 import SelectionRect from "./selection-rect";
+import Toolbar from "./toolbar";
 import { trailingDebounce } from "./utils";
@@ -22,3 +23,3 @@ import "./selection-toolbar.css";
 
-class Toolbar extends Component {
+class SelectionToolbar extends Component {
   static propTypes = {
@@ -33,3 +34,4 @@ buttons: PropTypes.array.isRequired,
   };
-  state = { visible: false };
+
+  state = { visible: false, menu: null };
   toolbar = React.createRef();
@@ -47,5 +49,6 @@
     const visible = this.state.visible;
-    const textSelected = isTextSelected(this.props.value);
+    const menuOpen = this.state.menu != undefined;
+    const textSelected = isTextSelected(this.props.editor.value);
     const shouldShow = textSelected && !visible;
-    const shouldHide = !textSelected && visible;
+    const shouldHide = !textSelected && !menuOpen && visible;
 
@@ -73,3 +76,6 @@ if (shouldShow) return this.show();
       },
-      this.transitionEnd
+      () => {
+        this.transitionEnd();
+        this.closeMenu();
+      }
     );
@@ -87,5 +93,13 @@ };
 
+  openMenu = menu => {
+    this.setState({ menu });
+  };
+
+  closeMenu = () => {
+    this.setState({ menu: null });
+  };
+
   render() {
-    const { buttons, styles, value, onChange } = this.props;
-    const { transitioning, visible } = this.state;
+    const { buttons, editor, styles } = this.props;
+    const { menu, transitioning, visible } = this.state;
     const { button: buttonStyle, ...toolbarStyle } = styles;
@@ -98,4 +112,7 @@
 
-    const debounce = transitioning ? -1 : visible ? 201 : 0;
+    const menuOpen = menu != undefined;
+    const freezePosition = transitioning || menuOpen;
 
+    const debounce = freezePosition ? -1 : visible ? 201 : 0;
+
     return (
@@ -112,18 +129,15 @@ <SelectionRect debounce={debounce}>
             {({ bottom, left }) => (
-              <div
+              <Toolbar
                 ref={this.toolbar}
+                buttons={buttons}
+                editor={editor}
+                menu={{
+                  active: menu != null,
+                  index: menu,
+                  close: this.hide,
+                  open: this.openMenu
+                }}
                 className={className}
-                style={{ bottom, left, ...toolbarStyle }}
-                onMouseDown={this.handleMouseDown}
-              >
-                {buttons.map((button, i) => (
-                  <ToolbarButton
-                    key={i}
-                    {...button}
-                    onChange={onChange}
-                    style={buttonStyle}
-                    value={value}
-                  />
-                ))}
-              </div>
+                style={{ bottom: bottom + 8, left, ...toolbarStyle }}
+              />
             )}
@@ -137,24 +151,2 @@ </PositionElement>
 
-const ToolbarButton = ({
-  onClick,
-  onChange,
-  value,
-  component: ButtonComponent
-}) => {
-  const handleClick = event => {
-    event.preventDefault();
-    onChange(onClick(event, value));
-  };
-
-  return (
-    <button
-      onClick={handleClick}
-      className="convertkit-editor-selection-toolbar-button"
-      type="button"
-    >
-      <ButtonComponent />
-    </button>
-  );
-};
-
-export default Toolbar;
+export default SelectionToolbar;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59664

increased by13.49%

Number of package files

14

increased by55.56%

Lines of code

1728

increased by17.15%

No dependency changes