@edtr-io/plugin-text/dist/controls/index.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createUiPlugin = exports.Controls = exports.VisibleControls = void 0;

var React = _interopRequireWildcard(require("react"));

var _editorUi = require("@edtr-io/editor-ui");

var _default = require("./default");

var _headings = require("./headings");

var _lists = require("./lists");

var _colors = require("./colors");

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var VisibleControls;
exports.VisibleControls = VisibleControls;

(function (VisibleControls) {
  VisibleControls[VisibleControls["All"] = 0] = "All";
  VisibleControls[VisibleControls["Headings"] = 1] = "Headings";
  VisibleControls[VisibleControls["Lists"] = 2] = "Lists";
  VisibleControls[VisibleControls["Colors"] = 3] = "Colors";
})(VisibleControls || (exports.VisibleControls = VisibleControls = {}));

var ControlsSwitch = function ControlsSwitch(_ref) {
  var visibleControls = _ref.visibleControls,
      setVisibleControls = _ref.setVisibleControls,
      onChange = _ref.onChange,
      props = _objectWithoutProperties(_ref, ["visibleControls", "setVisibleControls", "onChange"]);

  switch (visibleControls) {
    case VisibleControls.All:
      return React.createElement(_default.DefaultControls, _extends({}, props, {
        switchControls: setVisibleControls,
        onChange: onChange
      }));

    case VisibleControls.Headings:
      return React.createElement(_headings.HeadingControls, _extends({}, props, {
        switchControls: setVisibleControls,
        onChange: onChange
      }));

    case VisibleControls.Lists:
      return React.createElement(_lists.ListControls, _extends({}, props, {
        switchControls: setVisibleControls,
        onChange: onChange
      }));

    case VisibleControls.Colors:
      return React.createElement(_colors.ColorControls, _extends({}, props, {
        switchControls: setVisibleControls,
        onChange: onChange
      }));
  }
};

var TimeoutBottomToolbar = (0, _editorUi.styled)(_editorUi.BottomToolbar)(function (props) {
  return {
    opacity: props.visible ? 1 : 0,
    transition: '500ms opacity ease-in-out'
  };
});
var debounceTimeout;

var Controls = function Controls(props) {
  var selectionCollapsed = props.editor.value.selection.isCollapsed;

  var _React$useState = React.useState(VisibleControls.All),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      visibleControls = _React$useState2[0],
      setVisibleControls = _React$useState2[1];

  var _React$useState3 = React.useState(false),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      bottomToolbarVisible = _React$useState4[0],
      setBottomToolbarVisible = _React$useState4[1];

  function showBottomToolbar() {
    setVisibleControls(VisibleControls.All);
    setBottomToolbarVisible(true);
  }

  React.useEffect(function () {
    debounceTimeout = setTimeout(showBottomToolbar, 2500);
    return function cleanUp() {
      clearTimeout(debounceTimeout);
    };
  }, []);
  var currentValue = JSON.stringify(props.editor.value.toJSON());
  var memoized = React.useRef({
    value: currentValue,
    selectionCollapsed: selectionCollapsed
  });
  React.useEffect(function () {
    var valueChanged = memoized.current.value !== currentValue;

    if (valueChanged || memoized.current.selectionCollapsed !== selectionCollapsed) {
      memoized.current = {
        value: currentValue,
        selectionCollapsed: selectionCollapsed
      };

      if (debounceTimeout) {
        clearTimeout(debounceTimeout);
      }

      var timeout = valueChanged ? 2500 : 1000;

      if (selectionCollapsed) {
        debounceTimeout = setTimeout(showBottomToolbar, timeout);
      }

      setBottomToolbarVisible(false);
    }
  }, [currentValue, selectionCollapsed]);
  var onChange = React.useCallback(function (editor) {
    memoized.current = _objectSpread({}, memoized.current, {
      value: JSON.stringify(editor.value.toJSON())
    });
    return editor;
  }, []);
  return React.createElement(React.Fragment, null, !selectionCollapsed && React.createElement(_editorUi.HoveringOverlay, {
    position: 'above'
  }, React.createElement(ControlsSwitch, _extends({}, props, {
    visibleControls: visibleControls,
    setVisibleControls: setVisibleControls,
    onChange: onChange
  }))), !props.readOnly && React.createElement(TimeoutBottomToolbar, {
    visible: selectionCollapsed && bottomToolbarVisible
  }, bottomToolbarVisible && React.createElement(ControlsSwitch, _extends({}, props, {
    visibleControls: visibleControls,
    setVisibleControls: setVisibleControls,
    onChange: onChange
  }))));
};

exports.Controls = Controls;

var createUiPlugin = function createUiPlugin(options) {
  return function (pluginClosure) {
    var Component = options.Component;
    return {
      renderEditor: function renderEditor(props, editor, next) {
        var readOnly = props.readOnly;

        if (readOnly) {
          editor.blur();
        }

        var name = pluginClosure.current ? pluginClosure.current.name : '';
        var children = next();
        return React.createElement(React.Fragment, null, !readOnly ? React.createElement(Component, _extends({
          editor: editor
        }, props, {
          name: name,
          pluginClosure: pluginClosure
        })) : null, children);
      }
    };
  };
};

exports.createUiPlugin = createUiPlugin;
//# sourceMappingURL=index.js.map