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

package/lib/plugins/textAlign/icons/index.js

@@ -0,0 +1,226 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.AlignRight = exports.AlignLeft = exports.AlignJustify = exports.AlignCenter = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Collapse = _interopRequireDefault(require("@material-ui/core/Collapse"));
+
+var _List = _interopRequireDefault(require("@material-ui/core/List"));
+
+var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 AlignLeft = function AlignLeft() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 66 66",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M42.1875 4.75C42.1875 7.38672 39.9902 9.4375 37.5 9.4375H4.6875C2.05078 9.4375 0 7.38672 0 4.75C0 2.25977 2.05078 0.0625 4.6875 0.0625H37.5C39.9902 0.0625 42.1875 2.25977 42.1875 4.75ZM42.1875 42.25C42.1875 44.8867 39.9902 46.9375 37.5 46.9375H4.6875C2.05078 46.9375 0 44.8867 0 42.25C0 39.7598 2.05078 37.5625 4.6875 37.5625H37.5C39.9902 37.5625 42.1875 39.7598 42.1875 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z",
+    fill: "currentColor"
+  }));
+};
+
+exports.AlignLeft = AlignLeft;
+
+var AlignRight = function AlignRight() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 66 66",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M65.625 4.75C65.625 7.38672 63.4277 9.4375 60.9375 9.4375H28.125C25.4883 9.4375 23.4375 7.38672 23.4375 4.75C23.4375 2.25977 25.4883 0.0625 28.125 0.0625H60.9375C63.4277 0.0625 65.625 2.25977 65.625 4.75ZM65.625 42.25C65.625 44.8867 63.4277 46.9375 60.9375 46.9375H28.125C25.4883 46.9375 23.4375 44.8867 23.4375 42.25C23.4375 39.7598 25.4883 37.5625 28.125 37.5625H60.9375C63.4277 37.5625 65.625 39.7598 65.625 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z",
+    fill: "currentColor"
+  }));
+};
+
+exports.AlignRight = AlignRight;
+
+var AlignCenter = function AlignCenter() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 66 66",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M51.5625 4.75C51.5625 7.38672 49.3652 9.4375 46.875 9.4375H18.75C16.1133 9.4375 14.0625 7.38672 14.0625 4.75C14.0625 2.25977 16.1133 0.0625 18.75 0.0625H46.875C49.3652 0.0625 51.5625 2.25977 51.5625 4.75ZM65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5ZM0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61ZM51.5625 42.25C51.5625 44.8867 49.3652 46.9375 46.875 46.9375H18.75C16.1133 46.9375 14.0625 44.8867 14.0625 42.25C14.0625 39.7598 16.1133 37.5625 18.75 37.5625H46.875C49.3652 37.5625 51.5625 39.7598 51.5625 42.25Z",
+    fill: "currentColor"
+  }));
+};
+
+exports.AlignCenter = AlignCenter;
+
+var AlignJustify = function AlignJustify() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 66 66",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M65.625 4.75C65.625 7.38672 63.4277 9.4375 60.9375 9.4375H4.6875C2.05078 9.4375 0 7.38672 0 4.75C0 2.25977 2.05078 0.0625 4.6875 0.0625H60.9375C63.4277 0.0625 65.625 2.25977 65.625 4.75ZM65.625 42.25C65.625 44.8867 63.4277 46.9375 60.9375 46.9375H4.6875C2.05078 46.9375 0 44.8867 0 42.25C0 39.7598 2.05078 37.5625 4.6875 37.5625H60.9375C63.4277 37.5625 65.625 39.7598 65.625 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z",
+    fill: "currentColor"
+  }));
+};
+
+exports.AlignJustify = AlignJustify;
+
+var _default = function _default(_ref) {
+  var getValue = _ref.getValue,
+      onChange = _ref.onChange;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var value = getValue();
+  var text = value.texts.get(0);
+  var type;
+
+  if (text) {
+    var _data$attributes;
+
+    var blockParent = value.document.getParent(text.key);
+    var data = blockParent.data.toJSON();
+
+    if (data !== null && data !== void 0 && (_data$attributes = data.attributes) !== null && _data$attributes !== void 0 && _data$attributes.align) {
+      var _data$attributes2;
+
+      type = data === null || data === void 0 ? void 0 : (_data$attributes2 = data.attributes) === null || _data$attributes2 === void 0 ? void 0 : _data$attributes2.align;
+    }
+  }
+
+  var icon;
+
+  switch (type) {
+    case 'right':
+      icon = /*#__PURE__*/_react["default"].createElement(AlignRight, null);
+      break;
+
+    case 'center':
+      icon = /*#__PURE__*/_react["default"].createElement(AlignCenter, null);
+      break;
+
+    case 'justify':
+      icon = /*#__PURE__*/_react["default"].createElement(AlignJustify, null);
+      break;
+
+    default:
+      icon = /*#__PURE__*/_react["default"].createElement(AlignLeft, null);
+      break;
+  }
+
+  var applyAlignment = function applyAlignment(event) {
+    if (value.texts.size) {
+      var _event$target, _event$target$closest;
+
+      var alignType = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : (_event$target$closest = _event$target.closest('div')) === null || _event$target$closest === void 0 ? void 0 : _event$target$closest.getAttribute('value');
+
+      if (alignType) {
+        var c = value.change();
+        value.texts.forEach(function (text) {
+          var _blockParent$data;
+
+          var blockParent = value.document.getParent(text.key);
+          c = c.setNodeByKey(blockParent.key, {
+            data: _objectSpread(_objectSpread({}, blockParent.data), {}, {
+              attributes: _objectSpread(_objectSpread({}, (_blockParent$data = blockParent.data) === null || _blockParent$data === void 0 ? void 0 : _blockParent$data.attributes), {}, {
+                align: alignType
+              })
+            })
+          });
+        });
+        onChange(c);
+      }
+    }
+
+    setOpen(false);
+  };
+
+  var onMouseDown = function onMouseDown(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    setOpen(!open);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    onClick: onMouseDown
+  }, icon, /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      marginLeft: '5px',
+      fontSize: '8px'
+    }
+  }, "\u25BC")), /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
+    "in": open,
+    timeout: "auto",
+    unmountOnExit: true,
+    style: {
+      position: 'absolute'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_List["default"], {
+    component: "div",
+    disablePadding: true,
+    style: {
+      background: '#fff',
+      display: 'flex',
+      flexDirection: 'row',
+      padding: 0
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    button: true,
+    type: "submit",
+    value: "left",
+    "aria-label": "Align text left",
+    onClick: applyAlignment
+  }, /*#__PURE__*/_react["default"].createElement(AlignLeft, null)), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    button: true,
+    type: "submit",
+    value: "center",
+    "aria-label": "Align text center",
+    onClick: applyAlignment
+  }, /*#__PURE__*/_react["default"].createElement(AlignCenter, null)), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    button: true,
+    type: "submit",
+    value: "right",
+    "aria-label": "Align text right",
+    onClick: applyAlignment
+  }, /*#__PURE__*/_react["default"].createElement(AlignRight, null)), /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+    button: true,
+    type: "submit",
+    value: "justify",
+    "aria-label": "Justify text",
+    onClick: applyAlignment
+  }, /*#__PURE__*/_react["default"].createElement(AlignJustify, null)))));
+};
+
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

package/lib/plugins/textAlign/icons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/plugins/textAlign/icons/index.jsx"],"names":["AlignLeft","AlignRight","AlignCenter","AlignJustify","getValue","onChange","open","setOpen","value","text","texts","get","type","blockParent","document","getParent","key","data","toJSON","attributes","align","icon","applyAlignment","event","size","alignType","target","closest","getAttribute","c","change","forEach","setNodeByKey","onMouseDown","preventDefault","stopPropagation","display","alignItems","marginLeft","fontSize","position","background","flexDirection","padding"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport Collapse from '@material-ui/core/Collapse';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\n\nexport const AlignLeft = () => (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 66 66\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M42.1875 4.75C42.1875 7.38672 39.9902 9.4375 37.5 9.4375H4.6875C2.05078 9.4375 0 7.38672 0 4.75C0 2.25977 2.05078 0.0625 4.6875 0.0625H37.5C39.9902 0.0625 42.1875 2.25977 42.1875 4.75ZM42.1875 42.25C42.1875 44.8867 39.9902 46.9375 37.5 46.9375H4.6875C2.05078 46.9375 0 44.8867 0 42.25C0 39.7598 2.05078 37.5625 4.6875 37.5625H37.5C39.9902 37.5625 42.1875 39.7598 42.1875 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nexport const AlignRight = () => (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 66 66\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M65.625 4.75C65.625 7.38672 63.4277 9.4375 60.9375 9.4375H28.125C25.4883 9.4375 23.4375 7.38672 23.4375 4.75C23.4375 2.25977 25.4883 0.0625 28.125 0.0625H60.9375C63.4277 0.0625 65.625 2.25977 65.625 4.75ZM65.625 42.25C65.625 44.8867 63.4277 46.9375 60.9375 46.9375H28.125C25.4883 46.9375 23.4375 44.8867 23.4375 42.25C23.4375 39.7598 25.4883 37.5625 28.125 37.5625H60.9375C63.4277 37.5625 65.625 39.7598 65.625 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nexport const AlignCenter = () => (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 66 66\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M51.5625 4.75C51.5625 7.38672 49.3652 9.4375 46.875 9.4375H18.75C16.1133 9.4375 14.0625 7.38672 14.0625 4.75C14.0625 2.25977 16.1133 0.0625 18.75 0.0625H46.875C49.3652 0.0625 51.5625 2.25977 51.5625 4.75ZM65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5ZM0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61ZM51.5625 42.25C51.5625 44.8867 49.3652 46.9375 46.875 46.9375H18.75C16.1133 46.9375 14.0625 44.8867 14.0625 42.25C14.0625 39.7598 16.1133 37.5625 18.75 37.5625H46.875C49.3652 37.5625 51.5625 39.7598 51.5625 42.25Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nexport const AlignJustify = () => (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 66 66\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M65.625 4.75C65.625 7.38672 63.4277 9.4375 60.9375 9.4375H4.6875C2.05078 9.4375 0 7.38672 0 4.75C0 2.25977 2.05078 0.0625 4.6875 0.0625H60.9375C63.4277 0.0625 65.625 2.25977 65.625 4.75ZM65.625 42.25C65.625 44.8867 63.4277 46.9375 60.9375 46.9375H4.6875C2.05078 46.9375 0 44.8867 0 42.25C0 39.7598 2.05078 37.5625 4.6875 37.5625H60.9375C63.4277 37.5625 65.625 39.7598 65.625 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nexport default ({ getValue, onChange }) => {\n  const [open, setOpen] = useState(false);\n  const value = getValue();\n  const text = value.texts.get(0);\n\n  let type;\n\n  if (text) {\n    const blockParent = value.document.getParent(text.key);\n    const data = blockParent.data.toJSON();\n\n    if (data?.attributes?.align) {\n      type = data?.attributes?.align;\n    }\n  }\n\n  let icon;\n\n  switch (type) {\n    case 'right':\n      icon = <AlignRight />;\n      break;\n    case 'center':\n      icon = <AlignCenter />;\n      break;\n    case 'justify':\n      icon = <AlignJustify />;\n      break;\n    default:\n      icon = <AlignLeft />;\n      break;\n  }\n\n  const applyAlignment = (event) => {\n    if (value.texts.size) {\n      const alignType = event.target?.closest('div')?.getAttribute('value');\n\n      if (alignType) {\n        let c = value.change();\n\n        value.texts.forEach((text) => {\n          const blockParent = value.document.getParent(text.key);\n\n          c = c.setNodeByKey(blockParent.key, {\n            data: { ...blockParent.data, attributes: { ...blockParent.data?.attributes, align: alignType } },\n          });\n        });\n\n        onChange(c);\n      }\n    }\n\n    setOpen(false);\n  };\n\n  const onMouseDown = (event) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setOpen(!open);\n  };\n\n  return (\n    <div>\n      <div style={{ display: 'flex', alignItems: 'center' }} onClick={onMouseDown}>\n        {icon}\n        <span style={{ marginLeft: '5px', fontSize: '8px' }}>&#9660;</span>\n      </div>\n      <Collapse in={open} timeout=\"auto\" unmountOnExit style={{ position: 'absolute' }}>\n        <List\n          component=\"div\"\n          disablePadding\n          style={{\n            background: '#fff',\n            display: 'flex',\n            flexDirection: 'row',\n            padding: 0,\n          }}\n        >\n          <ListItem button type=\"submit\" value=\"left\" aria-label=\"Align text left\" onClick={applyAlignment}>\n            <AlignLeft />\n          </ListItem>\n\n          <ListItem button type=\"submit\" value=\"center\" aria-label=\"Align text center\" onClick={applyAlignment}>\n            <AlignCenter />\n          </ListItem>\n\n          <ListItem button type=\"submit\" value=\"right\" aria-label=\"Align text right\" onClick={applyAlignment}>\n            <AlignRight />\n          </ListItem>\n\n          <ListItem button type=\"submit\" value=\"justify\" aria-label=\"Justify text\" onClick={applyAlignment}>\n            <AlignJustify />\n          </ListItem>\n        </List>\n      </Collapse>\n    </div>\n  );\n};\n"],"file":"index.js"}

package/lib/plugins/textAlign/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = TextAlign;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _debug = _interopRequireDefault(require("debug"));
+
+var _icons = _interopRequireDefault(require("./icons"));
+
+var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:characters');
+/**
+ * Plugin in order to be able to change alignment for the selected text(s) element(s).
+ * @param opts
+ * @constructor
+ */
+
+function TextAlign(opts) {
+  var plugin = {
+    name: 'textAlign',
+    toolbar: {
+      icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], opts),
+      ariaLabel: 'Text Align',
+      onClick: function onClick() {}
+    }
+  };
+  return plugin;
+}
+//# sourceMappingURL=index.js.map

package/lib/plugins/textAlign/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plugins/textAlign/index.jsx"],"names":["log","TextAlign","opts","plugin","name","toolbar","icon","ariaLabel","onClick"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,GAAG,GAAG,uBAAM,2CAAN,CAAZ;AAEA;AACA;AACA;AACA;AACA;;AACe,SAASC,SAAT,CAAmBC,IAAnB,EAAyB;AACtC,MAAMC,MAAM,GAAG;AACbC,IAAAA,IAAI,EAAE,WADO;AAEbC,IAAAA,OAAO,EAAE;AACPC,MAAAA,IAAI,eAAE,gCAAC,iBAAD,EAAmBJ,IAAnB,CADC;AAEPK,MAAAA,SAAS,EAAE,YAFJ;AAGPC,MAAAA,OAAO,EAAE,mBAAM,CAAE;AAHV;AAFI,GAAf;AASA,SAAOL,MAAP;AACD","sourcesContent":["import React from 'react';\nimport debug from 'debug';\nimport TextAlignIcon from './icons';\n\nconst log = debug('@pie-lib:editable-html:plugins:characters');\n\n/**\n * Plugin in order to be able to change alignment for the selected text(s) element(s).\n * @param opts\n * @constructor\n */\nexport default function TextAlign(opts) {\n  const plugin = {\n    name: 'textAlign',\n    toolbar: {\n      icon: <TextAlignIcon {...opts} />,\n      ariaLabel: 'Text Align',\n      onClick: () => {},\n    },\n  };\n\n  return plugin;\n}\n"],"file":"index.js"}

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

@@ -27,8 +27,6 @@ var _toolbarButtons = require("./toolbar-buttons");
 
 var _debug = _interopRequireDefault(require("debug"));
 
-var _immutable = require("immutable");
-
 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; }
@@ -42,29 +40,45 @@ var ToolbarButton = function ToolbarButton(props) {
   };
 
   if (props.isMark) {
-    var isActive = (0, _utils.hasMark)(props.value, props.type);
-    log('[ToolbarButton] mark:isActive: ', isActive);
-    return /*#__PURE__*/_react["default"].createElement(_toolbarButtons.MarkButton, {
-      active: isActive,
-      label: props.type,
-      onToggle: onToggle,
-      mark: props.type
-    }, props.icon);
-  } else {
-    var disabled = props.disabled;
-
-    var _isActive = props.isActive ? props.isActive(props.value, props.type) : (0, _utils.hasBlock)(props.value, props.type);
+    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;
+    }
 
-    log('[ToolbarButton] block:isActive: ', _isActive);
-    return /*#__PURE__*/_react["default"].createElement(_toolbarButtons.Button, {
+    return /*#__PURE__*/_react["default"].createElement(_toolbarButtons.MarkButton, {
       active: _isActive,
-      disabled: disabled,
-      onClick: function onClick() {
-        return props.onClick(props.value, props.onChange, props.getFocusedValue);
-      },
-      extraStyles: props.buttonStyles
+      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;
@@ -79,7 +93,8 @@ ToolbarButton.propTypes = {
   onChange: _propTypes["default"].func,
   onClick: _propTypes["default"].func,
   type: _propTypes["default"].string,
-  value: _propTypes["default"].object
+  value: _propTypes["default"].object,
+  ariaLabel: _propTypes["default"].string
 };
 
 var isActiveToolbarPlugin = function isActiveToolbarPlugin(props) {
@@ -99,7 +114,10 @@ var DefaultToolbar = function DefaultToolbar(_ref) {
       classes = _ref.classes,
       showDone = _ref.showDone,
       deletable = _ref.deletable,
-      isHtmlMode = _ref.isHtmlMode;
+      isHtmlMode = _ref.isHtmlMode,
+      doneButtonRef = _ref.doneButtonRef,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus;
   pluginProps = _objectSpread({
     // disable HTML plugin by default, at least for now
     html: {
@@ -108,6 +126,17 @@ var DefaultToolbar = function DefaultToolbar(_ref) {
   }, 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');
@@ -120,8 +149,28 @@ var DefaultToolbar = function DefaultToolbar(_ref) {
     });
   }
 
+  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
+    className: classes.defaultToolbar,
+    onFocus: handleFocus,
+    tabIndex: "1",
+    onBlur: onBlur
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.buttonsContainer
   }, filtered.map(function (p, index) {
@@ -129,9 +178,11 @@ var DefaultToolbar = function DefaultToolbar(_ref) {
       key: index,
       value: value,
       onChange: onChange,
-      getFocusedValue: getFocusedValue
+      getFocusedValue: getFocusedValue,
+      disabled: isToolbarButtonDisabled(p)
     }));
-  })), showDone && !deletable && !isHtmlMode && /*#__PURE__*/_react["default"].createElement(_doneButton.DoneButton, {
+  })), showDone && !deletable && /*#__PURE__*/_react["default"].createElement(_doneButton.DoneButton, {
+    doneButtonRef: doneButtonRef,
     onClick: onDone
   }));
 };
@@ -147,7 +198,11 @@ DefaultToolbar.propTypes = {
   onDone: _propTypes["default"].func.isRequired,
   showDone: _propTypes["default"].bool,
   addArea: _propTypes["default"].bool,
-  deletable: _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: {}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plugins/toolbar/default-toolbar.jsx"],"names":["log","ToolbarButton","props","onToggle","c","value","change","onChange","isMark","isActive","type","icon","disabled","onClick","getFocusedValue","buttonStyles","propTypes","PropTypes","object","bool","any","func","string","isActiveToolbarPlugin","plugin","isDisabled","name","toolbar","DefaultToolbar","plugins","pluginProps","onDone","classes","showDone","deletable","isHtmlMode","html","filtered","filter","map","p","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';\nimport { is } from 'immutable';\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\n    log('[ToolbarButton] mark:isActive: ', isActive);\n\n    return (\n      <MarkButton active={isActive} label={props.type} onToggle={onToggle} mark={props.type}>\n        {props.icon}\n      </MarkButton>\n    );\n  } else {\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\n    return (\n      <Button\n        active={isActive}\n        disabled={disabled}\n        onClick={() => props.onClick(props.value, props.onChange, props.getFocusedValue)}\n        extraStyles={props.buttonStyles}\n      >\n        {props.icon}\n      </Button>\n    );\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};\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}) => {\n  pluginProps = {\n    // disable HTML plugin by default, at least for now\n    html: { disabled: true },\n    ...pluginProps,\n  };\n  let filtered;\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  return (\n    <div className={classes.defaultToolbar}>\n      <div className={classes.buttonsContainer}>\n        {filtered.map((p, index) => {\n          return (\n            <ToolbarButton {...p} key={index} value={value} onChange={onChange} getFocusedValue={getFocusedValue} />\n          );\n        })}\n      </div>\n      {showDone && !deletable && !isHtmlMode && <DoneButton 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};\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"}
+{"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":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AAEA;;AACA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,wCAAN,CAAZ;;AAEO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAW;AACtC,MAAMC,QAAQ,GAAG,SAAXA,QAAW,GAAM;AACrB,QAAMC,CAAC,GAAGF,KAAK,CAACC,QAAN,CAAeD,KAAK,CAACG,KAAN,CAAYC,MAAZ,EAAf,EAAqCJ,KAArC,CAAV;AAEAA,IAAAA,KAAK,CAACK,QAAN,CAAeH,CAAf;AACD,GAJD;;AAMA,MAAIF,KAAK,CAACM,MAAV,EAAkB;AAChB,QAAMC,SAAQ,GAAG,oBAAQP,KAAK,CAACG,KAAd,EAAqBH,KAAK,CAACQ,IAA3B,CAAjB;;AACA,QAAMC,QAAQ,GACZT,KAAK,CAACQ,IAAN,KAAe,KAAf,GAAuB;AAAA,aAAMR,KAAK,CAACU,OAAN,CAAcV,KAAK,CAACG,KAApB,EAA2BH,KAAK,CAACK,QAAjC,EAA2CL,KAAK,CAACW,eAAjD,CAAN;AAAA,KAAvB,GAAiGV,QADnG;AAGAH,IAAAA,GAAG,CAAC,iCAAD,EAAoCS,SAApC,CAAH;AAEA,QAAIK,SAAJ;;AAEA,QAAIZ,KAAK,CAACQ,IAAN,KAAe,KAAnB,EAA0B;AACxBI,MAAAA,SAAS,GAAG,2CAAZ;AACD,KAFD,MAEO,IAAIZ,KAAK,CAACQ,IAAN,KAAe,KAAnB,EAA0B;AAC/BI,MAAAA,SAAS,GAAG,uCAAZ;AACD,KAFM,MAEA;AACLA,MAAAA,SAAS,GAAGZ,KAAK,CAACQ,IAAlB;AACD;;AAED,wBACE,gCAAC,0BAAD;AAAY,MAAA,MAAM,EAAED,SAApB;AAA8B,MAAA,QAAQ,EAAEE,QAAxC;AAAkD,MAAA,IAAI,EAAET,KAAK,CAACQ,IAA9D;AAAoE,MAAA,KAAK,EAAEI;AAA3E,OACGZ,KAAK,CAACa,IADT,CADF;AAKD;;AAED,MAAQC,QAAR,GAAqBd,KAArB,CAAQc,QAAR;AACA,MAAMP,QAAQ,GAAGP,KAAK,CAACO,QAAN,GAAiBP,KAAK,CAACO,QAAN,CAAeP,KAAK,CAACG,KAArB,EAA4BH,KAAK,CAACQ,IAAlC,CAAjB,GAA2D,qBAASR,KAAK,CAACG,KAAf,EAAsBH,KAAK,CAACQ,IAA5B,CAA5E;AAEAV,EAAAA,GAAG,CAAC,kCAAD,EAAqCS,QAArC,CAAH;;AACA,MAAMQ,OAAO,gBAAGC,kBAAMC,YAAN,CAAmBjB,KAAK,CAACa,IAAzB,CAAhB;;AAEA,sBACE,gCAAC,sBAAD;AACE,IAAA,SAAS,EAAEb,KAAK,CAACY,SADnB;AAEE,IAAA,MAAM,EAAEL,QAFV;AAGE,IAAA,QAAQ,EAAEO,QAHZ;AAIE,IAAA,OAAO,EAAE,iBAACI,KAAD;AAAA,aAAWlB,KAAK,CAACU,OAAN,CAAcV,KAAK,CAACG,KAApB,EAA2BH,KAAK,CAACK,QAAjC,EAA2CL,KAAK,CAACW,eAAjD,EAAkEO,KAAlE,CAAX;AAAA,KAJX;AAKE,IAAA,WAAW,EAAElB,KAAK,CAACmB;AALrB,KAOGJ,OAPH,CADF;AAWD,CAhDM;;;AAkDPhB,aAAa,CAACqB,SAAd,GAA0B;AACxBD,EAAAA,YAAY,EAAEE,sBAAUC,MADA;AAExBR,EAAAA,QAAQ,EAAEO,sBAAUE,IAFI;AAGxBV,EAAAA,IAAI,EAAEQ,sBAAUG,GAHQ;AAIxBjB,EAAAA,QAAQ,EAAEc,sBAAUE,IAJI;AAKxBjB,EAAAA,MAAM,EAAEe,sBAAUE,IALM;AAMxBZ,EAAAA,eAAe,EAAEU,sBAAUI,IANH;AAOxBxB,EAAAA,QAAQ,EAAEoB,sBAAUI,IAPI;AAQxBpB,EAAAA,QAAQ,EAAEgB,sBAAUI,IARI;AASxBf,EAAAA,OAAO,EAAEW,sBAAUI,IATK;AAUxBjB,EAAAA,IAAI,EAAEa,sBAAUK,MAVQ;AAWxBvB,EAAAA,KAAK,EAAEkB,sBAAUC,MAXO;AAYxBV,EAAAA,SAAS,EAAES,sBAAUK;AAZG,CAA1B;;AAeA,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAAC3B,KAAD;AAAA,SAAW,UAAC4B,MAAD,EAAY;AACnD,QAAMC,UAAU,GAAG,CAAC7B,KAAK,CAAC4B,MAAM,CAACE,IAAR,CAAL,IAAsB,EAAvB,EAA2BhB,QAA9C;AAEA,WAAOc,MAAM,IAAIA,MAAM,CAACG,OAAjB,IAA4B,CAACF,UAApC;AACD,GAJ6B;AAAA,CAA9B;;AAMO,IAAMG,cAAc,GAAG,SAAjBA,cAAiB,OAcxB;AAAA,MAbJC,OAaI,QAbJA,OAaI;AAAA,MAZJC,WAYI,QAZJA,WAYI;AAAA,MAXJ/B,KAWI,QAXJA,KAWI;AAAA,MAVJE,QAUI,QAVJA,QAUI;AAAA,MATJM,eASI,QATJA,eASI;AAAA,MARJwB,MAQI,QARJA,MAQI;AAAA,MAPJC,OAOI,QAPJA,OAOI;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,SAKI,QALJA,SAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,aAGI,QAHJA,aAGI;AAAA,MAFJC,MAEI,QAFJA,MAEI;AAAA,MADJC,OACI,QADJA,OACI;AACJR,EAAAA,WAAW;AACT;AACAS,IAAAA,IAAI,EAAE;AAAE7B,MAAAA,QAAQ,EAAE;AAAZ;AAFG,KAGNoB,WAHM,CAAX;AAKA,MAAIU,QAAJ;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAAC3B,KAAD,EAAW;AAAA;;AAC7B,QAAM4B,mBAAmB,GAAGN,aAAH,aAAGA,aAAH,gDAAGA,aAAa,CAAEO,OAAlB,0DAAG,sBAAwBC,SAApD;AACA,QAAMC,eAAe,GAAGH,mBAAmB,sBAAI5B,KAAK,CAACgC,MAAV,kDAAI,cAAcC,OAAd,qBAAkCL,mBAAlC,SAAJ,CAA3C;;AAEA,QAAIJ,OAAO,IAAI,CAACO,eAAhB,EAAiC;AAC/BP,MAAAA,OAAO,CAACxB,KAAD,CAAP;AACD;AACF,GAPD;;AASA,MAAIqB,UAAJ,EAAgB;AACdK,IAAAA,QAAQ,GAAGX,OAAO,CACfmB,MADQ,CACD,UAACxB,MAAD,EAAY;AAClB,aAAOD,qBAAqB,CAACO,WAAD,CAArB,CAAmCN,MAAnC,MAA+CA,MAAM,CAACE,IAAP,KAAgB,YAAhB,IAAgCF,MAAM,CAACE,IAAP,KAAgB,MAA/F,CAAP;AACD,KAHQ,EAIRuB,GAJQ,CAIJ,UAACC,CAAD;AAAA,aAAOA,CAAC,CAACvB,OAAT;AAAA,KAJI,CAAX;AAKD,GAND,MAMO;AACLa,IAAAA,QAAQ,GAAGX,OAAO,CAACmB,MAAR,CAAezB,qBAAqB,CAACO,WAAD,CAApC,EAAmDmB,GAAnD,CAAuD,UAACC,CAAD;AAAA,aAAOA,CAAC,CAACvB,OAAT;AAAA,KAAvD,CAAX;AACD;;AAED,MAAMwB,YAAY,GAAGtB,OAAO,CAACuB,IAAR,CACnB,UAAC5B,MAAD;AAAA,WACED,qBAAqB,CAACO,WAAD,CAArB,CAAmCN,MAAnC,KACA,CAAC,SAAD,EAAY,SAAZ,EAAuB6B,QAAvB,CAAgC7B,MAAM,CAACE,IAAvC,CADA,IAEAF,MAAM,CAACG,OAAP,CAAexB,QAAf,CAAwBJ,KAAxB,EAA+ByB,MAAM,CAACE,IAAtC,CAHF;AAAA,GADmB,CAArB;AAOA,MAAM4B,aAAa,GAAGzB,OAAO,CAACuB,IAAR,CACpB,UAAC5B,MAAD;AAAA,WACED,qBAAqB,CAACO,WAAD,CAArB,CAAmCN,MAAnC,KACAA,MAAM,CAACE,IAAP,KAAgB,OADhB,IAEAF,MAAM,CAAC+B,KAFP,IAGA/B,MAAM,CAAC+B,KAAP,CAAaC,kBAHb,IAIAhC,MAAM,CAAC+B,KAAP,CAAaC,kBAAb,CAAgCzD,KAAhC,CALF;AAAA,GADoB,CAAtB;;AASA,MAAM0D,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACjC,MAAD,EAAY;AAC1C,QAAIA,MAAM,CAACpB,IAAP,KAAgB,OAApB,EAA6B;AAC3B,aAAO+C,YAAP;AACD,KAFD,MAEO,IAAI3B,MAAM,CAACpB,IAAP,KAAgB,SAAhB,IAA6BoB,MAAM,CAACpB,IAAP,KAAgB,SAAjD,EAA4D;AACjE,aAAOkD,aAAP;AACD;;AACD,WAAO9B,MAAM,CAACd,QAAd;AACD,GAPD;;AASA,sBACE;AAAK,IAAA,SAAS,EAAEsB,OAAO,CAAC0B,cAAxB;AAAwC,IAAA,OAAO,EAAEjB,WAAjD;AAA8D,IAAA,QAAQ,EAAC,GAAvE;AAA2E,IAAA,MAAM,EAAEJ;AAAnF,kBACE;AAAK,IAAA,SAAS,EAAEL,OAAO,CAAC2B;AAAxB,KACGnB,QAAQ,CAACS,GAAT,CAAa,UAACC,CAAD,EAAIU,KAAJ,EAAc;AAC1B,wBACE,gCAAC,aAAD,gCACMV,CADN;AAEE,MAAA,GAAG,EAAEU,KAFP;AAGE,MAAA,KAAK,EAAE7D,KAHT;AAIE,MAAA,QAAQ,EAAEE,QAJZ;AAKE,MAAA,eAAe,EAAEM,eALnB;AAME,MAAA,QAAQ,EAAEkD,uBAAuB,CAACP,CAAD;AANnC,OADF;AAUD,GAXA,CADH,CADF,EAeGjB,QAAQ,IAAI,CAACC,SAAb,iBAA0B,gCAAC,sBAAD;AAAY,IAAA,aAAa,EAAEE,aAA3B;AAA0C,IAAA,OAAO,EAAEL;AAAnD,IAf7B,CADF;AAmBD,CArFM;;;AAuFPH,cAAc,CAACZ,SAAf,GAA2B;AACzBgB,EAAAA,OAAO,EAAEf,sBAAUC,MAAV,CAAiB2C,UADD;AAEzBhC,EAAAA,OAAO,EAAEZ,sBAAU6C,KAAV,CAAgBD,UAFA;AAGzB/B,EAAAA,WAAW,EAAEb,sBAAUC,MAHE;AAIzBnB,EAAAA,KAAK,EAAEgE,2BAAehE,KAAf,CAAqB8D,UAJH;AAKzB5D,EAAAA,QAAQ,EAAEgB,sBAAUI,IAAV,CAAewC,UALA;AAMzBtD,EAAAA,eAAe,EAAEU,sBAAUI,IAAV,CAAewC,UANP;AAOzB9B,EAAAA,MAAM,EAAEd,sBAAUI,IAAV,CAAewC,UAPE;AAQzB5B,EAAAA,QAAQ,EAAEhB,sBAAUE,IARK;AASzB6C,EAAAA,OAAO,EAAE/C,sBAAUE,IATM;AAUzBe,EAAAA,SAAS,EAAEjB,sBAAUE,IAVI;AAWzBgB,EAAAA,UAAU,EAAElB,sBAAUE,IAXG;AAYzBiB,EAAAA,aAAa,EAAEnB,sBAAUI,IAZA;AAazBgB,EAAAA,MAAM,EAAEpB,sBAAUI,IAbO;AAczBiB,EAAAA,OAAO,EAAErB,sBAAUI;AAdM,CAA3B;AAiBAO,cAAc,CAACqC,YAAf,GAA8B;AAC5BnC,EAAAA,WAAW,EAAE;AADe,CAA9B;;AAIA,IAAMoC,aAAa,GAAG,SAAhBA,aAAgB;AAAA,SAAO;AAC3BR,IAAAA,cAAc,EAAE;AACdS,MAAAA,OAAO,EAAE,MADK;AAEdC,MAAAA,KAAK,EAAE,MAFO;AAGdC,MAAAA,cAAc,EAAE;AAHF,KADW;AAM3BV,IAAAA,gBAAgB,EAAE;AAChBW,MAAAA,UAAU,EAAE,QADI;AAEhBH,MAAAA,OAAO,EAAE,MAFO;AAGhBC,MAAAA,KAAK,EAAE;AAHS;AANS,GAAP;AAAA,CAAtB;;eAae,wBAAWF,aAAX,EAA0BtC,cAA1B,C","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

@@ -19,10 +19,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var RawDoneButton = function RawDoneButton(_ref) {
   var classes = _ref.classes,
-      onClick = _ref.onClick;
+      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,
@@ -34,7 +36,8 @@ var RawDoneButton = function RawDoneButton(_ref) {
 exports.RawDoneButton = RawDoneButton;
 RawDoneButton.propTypes = {
   classes: _propTypes["default"].object.isRequired,
-  onClick: _propTypes["default"].func
+  onClick: _propTypes["default"].func,
+  doneButtonRef: _propTypes["default"].func
 };
 var styles = {
   iconRoot: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plugins/toolbar/done-button.jsx"],"names":["RawDoneButton","classes","onClick","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,sBAC3B,gCAAC,sBAAD;AACE,kBAAW,MADb;AAEE,IAAA,SAAS,EAAED,OAAO,CAACE,QAFrB;AAGE,IAAA,OAAO,EAAED,OAHX;AAIE,IAAA,OAAO,EAAE;AACPE,MAAAA,KAAK,EAAEH,OAAO,CAACG,KADR;AAEPC,MAAAA,IAAI,EAAEJ,OAAO,CAACE;AAFP;AAJX,kBASE,gCAAC,iBAAD,OATF,CAD2B;AAAA,CAAtB;;;AAcPH,aAAa,CAACM,SAAd,GAA0B;AACxBL,EAAAA,OAAO,EAAEM,sBAAUC,MAAV,CAAiBC,UADF;AAExBP,EAAAA,OAAO,EAAEK,sBAAUG;AAFK,CAA1B;AAKA,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,EAAmBX,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 }) => (\n  <IconButton\n    aria-label=\"Done\"\n    className={classes.iconRoot}\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};\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"}
+{"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"}