@webiny/app-headless-cms 6.0.0-beta.0 → 6.0.0-rc.0

package/admin/components/IconPicker.js

@@ -1,236 +1,40 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IconPicker = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireWildcard(require("react"));
-var _emotion = require("emotion");
-var _react2 = require("@emotion/react");
-var _plugins = require("@webiny/plugins");
-var _Typography = require("@webiny/ui/Typography");
-var _reactVirtualized = require("react-virtualized");
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
-var _DelayedOnChange = require("@webiny/ui/DelayedOnChange");
-var _Menu = require("@webiny/ui/Menu");
-var _Input = require("@webiny/ui/Input");
-var _FormElementMessage = require("@webiny/ui/FormElementMessage");
-var _templateObject;
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-/**
- * Controls the helper text below the checkbox.
- * @type {string}
- */
-var iconPickerLabel = (0, _emotion.css)({
-  marginBottom: 5,
-  marginLeft: 2
-});
-var globalStyles = process.env.NODE_ENV === "production" ? {
-  name: "1qtvsqr",
-  styles: "#rmwcPortal>.mdc-menu-surface{z-index:1000;}"
-} : {
-  name: "wxw4zd-globalStyles",
-  styles: "#rmwcPortal>.mdc-menu-surface{z-index:1000;};label:globalStyles;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkljb25QaWNrZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCNkIiLCJmaWxlIjoiSWNvblBpY2tlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcImVtb3Rpb25cIjtcbmltcG9ydCB7IGNzcyBhcyByZWFjdENzcywgR2xvYmFsIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyBwbHVnaW5zIH0gZnJvbSBcIkB3ZWJpbnkvcGx1Z2luc1wiO1xuaW1wb3J0IHsgVHlwb2dyYXBoeSB9IGZyb20gXCJAd2ViaW55L3VpL1R5cG9ncmFwaHlcIjtcbmltcG9ydCB7IEdyaWQgfSBmcm9tIFwicmVhY3QtdmlydHVhbGl6ZWRcIjtcbmltcG9ydCB7IEZvbnRBd2Vzb21lSWNvbiB9IGZyb20gXCJAZm9ydGF3ZXNvbWUvcmVhY3QtZm9udGF3ZXNvbWVcIjtcbmltcG9ydCB7IERlbGF5ZWRPbkNoYW5nZSwgT25DaGFuZ2VDYWxsYWJsZSB9IGZyb20gXCJAd2ViaW55L3VpL0RlbGF5ZWRPbkNoYW5nZVwiO1xuaW1wb3J0IHsgTWVudSwgUmVuZGVyYWJsZU1lbnVDaGlsZHJlbiB9IGZyb20gXCJAd2ViaW55L3VpL01lbnVcIjtcbmltcG9ydCB7IElucHV0IH0gZnJvbSBcIkB3ZWJpbnkvdWkvSW5wdXRcIjtcbmltcG9ydCB7IENtc0ljb24sIENtc0ljb25zUGx1Z2luIH0gZnJvbSBcIn4vdHlwZXNcIjtcbmltcG9ydCB7IEZvcm1Db21wb25lbnRQcm9wcyB9IGZyb20gXCJAd2ViaW55L3VpL3R5cGVzXCI7XG5pbXBvcnQgeyBGb3JtRWxlbWVudE1lc3NhZ2UgfSBmcm9tIFwiQHdlYmlueS91aS9Gb3JtRWxlbWVudE1lc3NhZ2VcIjtcbmltcG9ydCB7IEdyaWRDZWxsUHJvcHMgfSBmcm9tIFwicmVhY3QtdmlydHVhbGl6ZWQvZGlzdC9lcy9HcmlkXCI7XG5cbi8qKlxuICogQ29udHJvbHMgdGhlIGhlbHBlciB0ZXh0IGJlbG93IHRoZSBjaGVja2JveC5cbiAqIEB0eXBlIHtzdHJpbmd9XG4gKi9cbmNvbnN0IGljb25QaWNrZXJMYWJlbCA9IGNzcyh7IG1hcmdpbkJvdHRvbTogNSwgbWFyZ2luTGVmdDogMiB9KTtcblxuY29uc3QgZ2xvYmFsU3R5bGVzID0gcmVhY3RDc3NgXG4gICAgI3Jtd2NQb3J0YWwgPiAubWRjLW1lbnUtc3VyZmFjZSB7XG4gICAgICAgIHotaW5kZXg6IDEwMDA7XG4gICAgfVxuYDtcblxuY29uc3QgTWVudVdyYXBwZXIgPSBjc3NgXG4gICAgY29sb3I6IHZhcigtLW1kYy10aGVtZS10ZXh0LXNlY29uZGFyeS1vbi1iYWNrZ3JvdW5kKTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZCk7XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS10ZXh0LXNlY29uZGFyeS1vbi1iYWNrZ3JvdW5kLCByZ2JhKDAsIDAsIDAsIDAuNTQpKTtcbiAgICBwYWRkaW5nOiAxNnB4IDhweDtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgOmhvdmVyIHtcbiAgICAgICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwgMCwgMCwgMSk7XG4gICAgfVxuYDtcblxuY29uc3QgTm9SZXN1bHRXcmFwcGVyID0gY3NzKHtcbiAgICB3aWR0aDogNjQwLFxuICAgIGNvbG9yOiBcInZhcigtLW1kYy10aGVtZS10ZXh0LXNlY29uZGFyeS1vbi1iYWNrZ3JvdW5kKVwiLFxuICAgIHBhZGRpbmc6IFwiMTZweCAxMnB4XCJcbn0pO1xuXG5jb25zdCBDT0xVTU5fQ09VTlQgPSA2O1xuXG5jb25zdCBncmlkSXRlbSA9IGNzcyh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJmbGV4LXN0YXJ0XCIsXG4gICAgYm94U2l6aW5nOiBcImJvcmRlci1ib3hcIixcbiAgICBwYWRkaW5nVG9wOiAxNSxcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIHRleHRBbGlnbjogXCJjZW50ZXJcIixcbiAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGVaKDApXCIsXG4gICAgYm9yZGVyUmFkaXVzOiAyLFxuICAgIGNvbG9yOiBcInZhcigtLW1kYy10aGVtZS10ZXh0LXNlY29uZGFyeS1vbi1iYWNrZ3JvdW5kKVwiLFxuICAgIHRyYW5zaXRpb246IFwiYWxsIDAuNXMgY3ViaWMtYmV6aWVyKDAuMTY1LCAwLjg0LCAwLjQ0LCAxKVwiLFxuICAgIFwiJjo6YWZ0ZXJcIjoge1xuICAgICAgICBib3hTaGFkb3c6IFwiMCAwLjI1cmVtIDAuMTI1cmVtIDAgcmdiYSgwLDAsMCwwLjA1KVwiLFxuICAgICAgICB0cmFuc2l0aW9uOiBcIm9wYWNpdHkgMC41cyBjdWJpYy1iZXppZXIoMC4xNjUsIDAuODQsIDAuNDQsIDEpXCIsXG4gICAgICAgIGNvbnRlbnQ6ICdcIlwiJyxcbiAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBsZWZ0OiAwLFxuICAgICAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgICAgIGhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgIHpJbmRleDogLTEsXG4gICAgICAgIG9wYWNpdHk6IDBcbiAgICB9LFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtYmFja2dyb3VuZClcIixcbiAgICAgICAgY29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLXRleHQtcHJpbWFyeS1vbi1iYWNrZ3JvdW5kKVwiLFxuICAgICAgICBcIiY6OmFmdGVyXCI6IHtcbiAgICAgICAgICAgIG9wYWNpdHk6IDFcbiAgICAgICAgfVxuICAgIH0sXG4gICAgXCI+c3ZnXCI6IHtcbiAgICAgICAgd2lkdGg6IDQyLFxuICAgICAgICBtYXJnaW5Cb3R0b206IDVcbiAgICB9XG59KTtcblxuY29uc3QgZ3JpZCA9IGNzcyh7XG4gICAgcGFkZGluZzogMjBcbn0pO1xuXG5jb25zdCBwaWNrSWNvbiA9IGNzcyh7XG4gICAgd2lkdGg6IDUwLFxuICAgIHRleHRBbGlnbjogXCJjZW50ZXJcIixcbiAgICBjdXJzb3I6IFwicG9pbnRlclwiXG59KTtcblxuY29uc3Qgc2VhcmNoSW5wdXQgPSBjc3Moe1xuICAgIGlucHV0OiB7XG4gICAgICAgIHBhZGRpbmc6IFwiMjBweCAxMnB4IDIwcHhcIlxuICAgIH1cbn0pO1xuXG5leHBvcnQgaW50ZXJmYWNlIEljb25QaWNrZXJQcm9wcyBleHRlbmRzIEZvcm1Db21wb25lbnRQcm9wcyB7XG4gICAgbGFiZWw/OiBSZWFjdC5SZWFjdE5vZGU7XG4gICAgZGVzY3JpcHRpb24/OiBSZWFjdC5SZWFjdE5vZGU7XG59XG5cbmludGVyZmFjZSBSZW5kZXJDZWxsUGFyYW1zIHtcbiAgICBjbG9zZU1lbnU6ICgpID0+IHZvaWQ7XG59XG5cbmV4cG9ydCBjb25zdCBJY29uUGlja2VyID0gKHtcbiAgICB2YWx1ZSxcbiAgICBvbkNoYW5nZSxcbiAgICBsYWJlbCxcbiAgICBkZXNjcmlwdGlvbixcbiAgICB2YWxpZGF0aW9uXG59OiBJY29uUGlja2VyUHJvcHMpID0+IHtcbiAgICBjb25zdCBbZmlsdGVyLCBzZXRGaWx0ZXJdID0gdXNlU3RhdGUoXCJcIik7XG4gICAgY29uc3QgW211c3RSZW5kZXJHcmlkLCBzZXRNdXN0UmVuZGVyR3JpZF0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gICAgY29uc3QgaW5wdXRSZWYgPSB1c2VSZWY8SFRNTElucHV0RWxlbWVudD4obnVsbCk7XG5cbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgIGlmIChtdXN0UmVuZGVyR3JpZCAmJiBpbnB1dFJlZi5jdXJyZW50KSB7XG4gICAgICAgICAgICAgICAgaW5wdXRSZWYuY3VycmVudC5mb2N1cygpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9LCA1MCk7XG4gICAgfSwgW211c3RSZW5kZXJHcmlkXSk7XG5cbiAgICBjb25zdCBvbkZpbHRlckNoYW5nZSA9IHVzZUNhbGxiYWNrPE9uQ2hhbmdlQ2FsbGFibGU+KFxuICAgICAgICAodmFsdWUsIGNiKSA9PiB7XG4gICAgICAgICAgICBzZXRGaWx0ZXIodmFsdWUpO1xuICAgICAgICAgICAgaWYgKGNiKSB7XG4gICAgICAgICAgICAgICAgY2IodmFsdWUpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBbZmlsdGVyXVxuICAgICk7XG5cbiAgICBjb25zdCBhbGxJY29uczogQ21zSWNvbltdID0gdXNlTWVtbygoKSA9PiB7XG4gICAgICAgIGNvbnN0IGljb25QbHVnaW5zID0gcGx1Z2lucy5ieVR5cGU8Q21zSWNvbnNQbHVnaW4+KFwiY21zLWljb25zXCIpO1xuICAgICAgICByZXR1cm4gaWNvblBsdWdpbnMucmVkdWNlKChpY29uczogQXJyYXk8Q21zSWNvbj4sIHBsKSA9PiB7XG4gICAgICAgICAgICByZXR1cm4gaWNvbnMuY29uY2F0KHBsLmdldEljb25zKCkpO1xuICAgICAgICB9LCBbXSk7XG4gICAgfSwgW10pO1xuXG4gICAgY29uc3QgaWNvbnMgPSB1c2VNZW1vKCgpID0+IHtcbiAgICAgICAgcmV0dXJuIGZpbHRlciA/IGFsbEljb25zLmZpbHRlcihpYyA9PiBpYy5uYW1lLmluY2x1ZGVzKGZpbHRlcikpIDogYWxsSWNvbnM7XG4gICAgfSwgW2ZpbHRlcl0pO1xuXG4gICAgY29uc3QgcmVuZGVyQ2VsbCA9IHVzZUNhbGxiYWNrKFxuICAgICAgICAoeyBjbG9zZU1lbnUgfTogUmVuZGVyQ2VsbFBhcmFtcykgPT4ge1xuICAgICAgICAgICAgcmV0dXJuIGZ1bmN0aW9uIHJlbmRlckNlbGwoe1xuICAgICAgICAgICAgICAgIGNvbHVtbkluZGV4LFxuICAgICAgICAgICAgICAgIGtleSxcbiAgICAgICAgICAgICAgICByb3dJbmRleCxcbiAgICAgICAgICAgICAgICBzdHlsZVxuICAgICAgICAgICAgfTogR3JpZENlbGxQcm9wcyk6IFJlYWN0LlJlYWN0Tm9kZSB7XG4gICAgICAgICAgICAgICAgY29uc3QgaXRlbSA9IGljb25zW3Jvd0luZGV4ICogQ09MVU1OX0NPVU5UICsgY29sdW1uSW5kZXhdO1xuICAgICAgICAgICAgICAgIGlmICghaXRlbSkge1xuICAgICAgICAgICAgICAgICAgICByZXR1cm4gbnVsbDtcbiAgICAgICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgICAgICAgICBrZXk9e2tleX1cbiAgICAgICAgICAgICAgICAgICAgICAgIHN0eWxlPXtzdHlsZX1cbiAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17Z3JpZEl0ZW19XG4gICAgICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYgKG9uQ2hhbmdlKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlKGl0ZW0uaWQuam9pbihcIi9cIikpO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjbG9zZU1lbnUoKTtcbiAgICAgICAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxGb250QXdlc29tZUljb24gaWNvbj17aXRlbS5pZH0gc2l6ZT17XCIyeFwifSAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgPFR5cG9ncmFwaHkgdXNlPXtcImJvZHkyXCJ9PntpdGVtLm5hbWV9PC9UeXBvZ3JhcGh5PlxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgfTtcbiAgICAgICAgfSxcbiAgICAgICAgW2ljb25zXVxuICAgICk7XG5cbiAgICBjb25zdCByZW5kZXJHcmlkID0gdXNlQ2FsbGJhY2s8UmVuZGVyYWJsZU1lbnVDaGlsZHJlbj4oXG4gICAgICAgICh7IGNsb3NlTWVudSB9KSA9PiB7XG4gICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgICAgICAgIDxHbG9iYWwgc3R5bGVzPXtnbG9iYWxTdHlsZXN9IC8+XG4gICAgICAgICAgICAgICAgICAgIDxEZWxheWVkT25DaGFuZ2UgdmFsdWU9e2ZpbHRlcn0gb25DaGFuZ2U9e29uRmlsdGVyQ2hhbmdlfT5cbiAgICAgICAgICAgICAgICAgICAgICAgIHsoeyB2YWx1ZSwgb25DaGFuZ2UgfSkgPT4gKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxJbnB1dFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpbnB1dFJlZj17aW5wdXRSZWZ9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17c2VhcmNoSW5wdXR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHZhbHVlPXt2YWx1ZX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgb25DaGFuZ2U9e29uQ2hhbmdlfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBwbGFjZWhvbGRlcj17XCJTZWFyY2ggaWNvbnMuLi5cIn1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgICAgICAgPC9EZWxheWVkT25DaGFuZ2U+XG4gICAgICAgICAgICAgICAgICAgIHtpY29ucy5sZW5ndGggPT09IDAgPyAoXG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17Tm9SZXN1bHRXcmFwcGVyfT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8VHlwb2dyYXBoeSB1c2U9XCJib2R5MVwiPk5vIHJlc3VsdHMgZm91bmQuPC9UeXBvZ3JhcGh5PlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICAgICAgICAgICAgICA8R3JpZFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17Z3JpZH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjZWxsUmVuZGVyZXI9e3JlbmRlckNlbGwoeyBjbG9zZU1lbnUgfSl9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgY29sdW1uQ291bnQ9e0NPTFVNTl9DT1VOVH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb2x1bW5XaWR0aD17MTAwfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGhlaWdodD17NDQwfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJvd0NvdW50PXtNYXRoLmNlaWwoaWNvbnMubGVuZ3RoIC8gQ09MVU1OX0NPVU5UKX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICByb3dIZWlnaHQ9ezEwMH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB3aWR0aD17NjQwfVxuICAgICAgICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgICA8Lz5cbiAgICAgICAgICAgICk7XG4gICAgICAgIH0sXG4gICAgICAgIFtpY29uc11cbiAgICApO1xuXG4gICAgY29uc3QgZm9udEF3ZXNvbWVJY29uVmFsdWU6IGFueSA9XG4gICAgICAgIHR5cGVvZiB2YWx1ZSA9PT0gXCJzdHJpbmdcIiAmJiB2YWx1ZS5pbmNsdWRlcyhcIi9cIikgPyB2YWx1ZS5zcGxpdChcIi9cIikgOiBbXCJmYXNcIiwgXCJzdGFyXCJdO1xuXG4gICAgY29uc3QgeyBpc1ZhbGlkOiB2YWxpZGF0aW9uSXNWYWxpZCwgbWVzc2FnZTogdmFsaWRhdGlvbk1lc3NhZ2UgfSA9IHZhbGlkYXRpb24gfHwge307XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8PlxuICAgICAgICAgICAge2xhYmVsICYmIChcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17aWNvblBpY2tlckxhYmVsfT5cbiAgICAgICAgICAgICAgICAgICAgPFR5cG9ncmFwaHkgdXNlPXtcImJvZHkxXCJ9PntsYWJlbH08L1R5cG9ncmFwaHk+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICApfVxuXG4gICAgICAgICAgICA8TWVudVxuICAgICAgICAgICAgICAgIG9uT3Blbj17KCkgPT4gc2V0TXVzdFJlbmRlckdyaWQodHJ1ZSl9XG4gICAgICAgICAgICAgICAgb25DbG9zZT17KCkgPT4gc2V0TXVzdFJlbmRlckdyaWQoZmFsc2UpfVxuICAgICAgICAgICAgICAgIHJlbmRlclRvUG9ydGFsPXt0cnVlfVxuICAgICAgICAgICAgICAgIGhhbmRsZT17XG4gICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtNZW51V3JhcHBlcn0+XG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17cGlja0ljb259PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxGb250QXdlc29tZUljb24gaWNvbj17Zm9udEF3ZXNvbWVJY29uVmFsdWV9IHNpemU9e1wiMnhcIn0gLz5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge1xuICAgICAgICAgICAgICAgICAgICAvKipcbiAgICAgICAgICAgICAgICAgICAgICogVW5mb3J0dW5hdGVseSB3ZSBuZWVkIHRvIGNhc3QgZm9yIGJ1aWxkIHRvIHBhc3MuXG4gICAgICAgICAgICAgICAgICAgICAqXG4gICAgICAgICAgICAgICAgICAgICAqIHJlYWwgdHlwZSBpcyBSZW5kZXJhYmxlTWVudUNoaWxkcmVuLCBidXQgdGhlIFRTIGlzIGNvbXBsYWluaW5nLlxuICAgICAgICAgICAgICAgICAgICAgKiBAVE9ETyBicnVubyBmaXhcbiAgICAgICAgICAgICAgICAgICAgICovXG4gICAgICAgICAgICAgICAgICAgIG11c3RSZW5kZXJHcmlkICYmIChyZW5kZXJHcmlkIGFzIHVua25vd24gYXMgUmVhY3QuUmVhY3ROb2RlKVxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIDwvTWVudT5cblxuICAgICAgICAgICAge3ZhbGlkYXRpb25Jc1ZhbGlkID09PSBmYWxzZSAmJiAoXG4gICAgICAgICAgICAgICAgPEZvcm1FbGVtZW50TWVzc2FnZSBlcnJvcj57dmFsaWRhdGlvbk1lc3NhZ2V9PC9Gb3JtRWxlbWVudE1lc3NhZ2U+XG4gICAgICAgICAgICApfVxuICAgICAgICAgICAge3ZhbGlkYXRpb25Jc1ZhbGlkICE9PSBmYWxzZSAmJiBkZXNjcmlwdGlvbiAmJiAoXG4gICAgICAgICAgICAgICAgPEZvcm1FbGVtZW50TWVzc2FnZT57ZGVzY3JpcHRpb259PC9Gb3JtRWxlbWVudE1lc3NhZ2U+XG4gICAgICAgICAgICApfVxuICAgICAgICA8Lz5cbiAgICApO1xufTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var MenuWrapper = (0, _emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    color: var(--mdc-theme-text-secondary-on-background);\n    background-color: var(--mdc-theme-on-background);\n    border-bottom: 1px solid var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54));\n    padding: 16px 8px;\n    cursor: pointer;\n    :hover {\n        border-bottom: 1px solid rgba(0, 0, 0, 1);\n    }\n"])));
-var NoResultWrapper = (0, _emotion.css)({
-  width: 640,
-  color: "var(--mdc-theme-text-secondary-on-background)",
-  padding: "16px 12px"
-});
-var COLUMN_COUNT = 6;
-var gridItem = (0, _emotion.css)({
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "flex-start",
-  boxSizing: "border-box",
-  paddingTop: 15,
-  alignItems: "center",
-  textAlign: "center",
-  cursor: "pointer",
-  transform: "translateZ(0)",
-  borderRadius: 2,
-  color: "var(--mdc-theme-text-secondary-on-background)",
-  transition: "all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)",
-  "&::after": {
-    boxShadow: "0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)",
-    transition: "opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)",
-    content: '""',
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    zIndex: -1,
-    opacity: 0
-  },
-  "&:hover": {
-    backgroundColor: "var(--mdc-theme-background)",
-    color: "var(--mdc-theme-text-primary-on-background)",
-    "&::after": {
-      opacity: 1
-    }
-  },
-  ">svg": {
-    width: 42,
-    marginBottom: 5
-  }
-});
-var grid = (0, _emotion.css)({
-  padding: 20
-});
-var pickIcon = (0, _emotion.css)({
-  width: 50,
-  textAlign: "center",
-  cursor: "pointer"
-});
-var searchInput = (0, _emotion.css)({
-  input: {
-    padding: "20px 12px 20px"
-  }
-});
-var IconPicker = exports.IconPicker = function IconPicker(_ref) {
-  var value = _ref.value,
-    onChange = _ref.onChange,
-    label = _ref.label,
-    description = _ref.description,
-    validation = _ref.validation;
-  var _useState = (0, _react.useState)(""),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    filter = _useState2[0],
-    setFilter = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    mustRenderGrid = _useState4[0],
-    setMustRenderGrid = _useState4[1];
-  var inputRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    setTimeout(function () {
-      if (mustRenderGrid && inputRef.current) {
-        inputRef.current.focus();
-      }
-    }, 50);
-  }, [mustRenderGrid]);
-  var onFilterChange = (0, _react.useCallback)(function (value, cb) {
-    setFilter(value);
-    if (cb) {
-      cb(value);
-    }
-  }, [filter]);
-  var allIcons = (0, _react.useMemo)(function () {
-    var iconPlugins = _plugins.plugins.byType("cms-icons");
-    return iconPlugins.reduce(function (icons, pl) {
+import React, { useMemo } from "react";
+import { IconPicker as AdminIconPicker } from "@webiny/admin-ui";
+import { plugins } from "@webiny/plugins";
+export const IconPicker = props => {
+  const icons = useMemo(() => {
+    const iconPlugins = plugins.byType("cms-icons");
+    return iconPlugins.reduce((icons, pl) => {
       return icons.concat(pl.getIcons());
     }, []);
   }, []);
-  var icons = (0, _react.useMemo)(function () {
-    return filter ? allIcons.filter(function (ic) {
-      return ic.name.includes(filter);
-    }) : allIcons;
-  }, [filter]);
-  var renderCell = (0, _react.useCallback)(function (_ref2) {
-    var closeMenu = _ref2.closeMenu;
-    return function renderCell(_ref3) {
-      var columnIndex = _ref3.columnIndex,
-        key = _ref3.key,
-        rowIndex = _ref3.rowIndex,
-        style = _ref3.style;
-      var item = icons[rowIndex * COLUMN_COUNT + columnIndex];
-      if (!item) {
-        return null;
+  const onChange = value => {
+    if (props.onChange) {
+      if (!value) {
+        props.onChange(null);
+        return;
       }
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: key,
-        style: style,
-        className: gridItem,
-        onClick: function onClick() {
-          if (onChange) {
-            onChange(item.id.join("/"));
-          }
-          closeMenu();
-        }
-      }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-        icon: item.id,
-        size: "2x"
-      }), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-        use: "body2"
-      }, item.name));
-    };
-  }, [icons]);
-  var renderGrid = (0, _react.useCallback)(function (_ref4) {
-    var closeMenu = _ref4.closeMenu;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Global, {
-      styles: globalStyles
-    }), /*#__PURE__*/_react.default.createElement(_DelayedOnChange.DelayedOnChange, {
-      value: filter,
-      onChange: onFilterChange
-    }, function (_ref5) {
-      var value = _ref5.value,
-        onChange = _ref5.onChange;
-      return /*#__PURE__*/_react.default.createElement(_Input.Input, {
-        inputRef: inputRef,
-        className: searchInput,
-        value: value,
-        onChange: onChange,
-        placeholder: "Search icons..."
+      props.onChange({
+        type: "icon",
+        name: value
       });
-    }), icons.length === 0 ? /*#__PURE__*/_react.default.createElement("div", {
-      className: NoResultWrapper
-    }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-      use: "body1"
-    }, "No results found.")) : /*#__PURE__*/_react.default.createElement(_reactVirtualized.Grid, {
-      className: grid,
-      cellRenderer: renderCell({
-        closeMenu: closeMenu
-      }),
-      columnCount: COLUMN_COUNT,
-      columnWidth: 100,
-      height: 440,
-      rowCount: Math.ceil(icons.length / COLUMN_COUNT),
-      rowHeight: 100,
-      width: 640
-    }));
-  }, [icons]);
-  var fontAwesomeIconValue = typeof value === "string" && value.includes("/") ? value.split("/") : ["fas", "star"];
-  var _ref6 = validation || {},
-    validationIsValid = _ref6.isValid,
-    validationMessage = _ref6.message;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label && /*#__PURE__*/_react.default.createElement("div", {
-    className: iconPickerLabel
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    use: "body1"
-  }, label)), /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
-    onOpen: function onOpen() {
-      return setMustRenderGrid(true);
-    },
-    onClose: function onClose() {
-      return setMustRenderGrid(false);
-    },
-    renderToPortal: true,
-    handle: /*#__PURE__*/_react.default.createElement("div", {
-      className: MenuWrapper
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: pickIcon
-    }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-      icon: fontAwesomeIconValue,
-      size: "2x"
-    })))
-  },
-  /**
-   * Unfortunately we need to cast for build to pass.
-   *
-   * real type is RenderableMenuChildren, but the TS is complaining.
-   * @TODO bruno fix
-   */
-  mustRenderGrid && renderGrid), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-    error: true
-  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+    }
+  };
+  let value = null;
+  if (props.value) {
+    if (typeof props.value === "string") {
+      value = props.value;
+    } else {
+      value = props.value.name;
+    }
+  }
+  return /*#__PURE__*/React.createElement(AdminIconPicker, Object.assign({
+    size: "lg",
+    icons: icons
+  }, props, {
+    onChange: onChange,
+    value: value
+  }));
 };
 
 //# sourceMappingURL=IconPicker.js.map

package/admin/components/IconPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_emotion","_react2","_plugins","_Typography","_reactVirtualized","_reactFontawesome","_DelayedOnChange","_Menu","_Input","_FormElementMessage","_templateObject","_EMOTION_STRINGIFIED_CSS_ERROR__","iconPickerLabel","css","marginBottom","marginLeft","globalStyles","process","env","NODE_ENV","name","styles","map","toString","MenuWrapper","_taggedTemplateLiteral2","default","NoResultWrapper","width","color","padding","COLUMN_COUNT","gridItem","display","flexDirection","justifyContent","boxSizing","paddingTop","alignItems","textAlign","cursor","transform","borderRadius","transition","boxShadow","content","position","top","left","height","zIndex","opacity","backgroundColor","grid","pickIcon","searchInput","input","IconPicker","exports","_ref","value","onChange","label","description","validation","_useState","useState","_useState2","_slicedToArray2","filter","setFilter","_useState3","_useState4","mustRenderGrid","setMustRenderGrid","inputRef","useRef","useEffect","setTimeout","current","focus","onFilterChange","useCallback","cb","allIcons","useMemo","iconPlugins","plugins","byType","reduce","icons","pl","concat","getIcons","ic","includes","renderCell","_ref2","closeMenu","_ref3","columnIndex","key","rowIndex","style","item","createElement","className","onClick","id","join","FontAwesomeIcon","icon","size","Typography","use","renderGrid","_ref4","Fragment","Global","DelayedOnChange","_ref5","Input","placeholder","length","Grid","cellRenderer","columnCount","columnWidth","rowCount","Math","ceil","rowHeight","fontAwesomeIconValue","split","_ref6","validationIsValid","isValid","validationMessage","message","Menu","onOpen","onClose","renderToPortal","handle","FormElementMessage","error"],"sources":["IconPicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { css } from \"emotion\";\nimport { css as reactCss, Global } from \"@emotion/react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Grid } from \"react-virtualized\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { DelayedOnChange, OnChangeCallable } from \"@webiny/ui/DelayedOnChange\";\nimport { Menu, RenderableMenuChildren } from \"@webiny/ui/Menu\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { CmsIcon, CmsIconsPlugin } from \"~/types\";\nimport { FormComponentProps } from \"@webiny/ui/types\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { GridCellProps } from \"react-virtualized/dist/es/Grid\";\n\n/**\n * Controls the helper text below the checkbox.\n * @type {string}\n */\nconst iconPickerLabel = css({ marginBottom: 5, marginLeft: 2 });\n\nconst globalStyles = reactCss`\n    #rmwcPortal > .mdc-menu-surface {\n        z-index: 1000;\n    }\n`;\n\nconst MenuWrapper = css`\n    color: var(--mdc-theme-text-secondary-on-background);\n    background-color: var(--mdc-theme-on-background);\n    border-bottom: 1px solid var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54));\n    padding: 16px 8px;\n    cursor: pointer;\n    :hover {\n        border-bottom: 1px solid rgba(0, 0, 0, 1);\n    }\n`;\n\nconst NoResultWrapper = css({\n    width: 640,\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    padding: \"16px 12px\"\n});\n\nconst COLUMN_COUNT = 6;\n\nconst gridItem = css({\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"flex-start\",\n    boxSizing: \"border-box\",\n    paddingTop: 15,\n    alignItems: \"center\",\n    textAlign: \"center\",\n    cursor: \"pointer\",\n    transform: \"translateZ(0)\",\n    borderRadius: 2,\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    transition: \"all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)\",\n    \"&::after\": {\n        boxShadow: \"0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)\",\n        transition: \"opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)\",\n        content: '\"\"',\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        zIndex: -1,\n        opacity: 0\n    },\n    \"&:hover\": {\n        backgroundColor: \"var(--mdc-theme-background)\",\n        color: \"var(--mdc-theme-text-primary-on-background)\",\n        \"&::after\": {\n            opacity: 1\n        }\n    },\n    \">svg\": {\n        width: 42,\n        marginBottom: 5\n    }\n});\n\nconst grid = css({\n    padding: 20\n});\n\nconst pickIcon = css({\n    width: 50,\n    textAlign: \"center\",\n    cursor: \"pointer\"\n});\n\nconst searchInput = css({\n    input: {\n        padding: \"20px 12px 20px\"\n    }\n});\n\nexport interface IconPickerProps extends FormComponentProps {\n    label?: React.ReactNode;\n    description?: React.ReactNode;\n}\n\ninterface RenderCellParams {\n    closeMenu: () => void;\n}\n\nexport const IconPicker = ({\n    value,\n    onChange,\n    label,\n    description,\n    validation\n}: IconPickerProps) => {\n    const [filter, setFilter] = useState(\"\");\n    const [mustRenderGrid, setMustRenderGrid] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        setTimeout(() => {\n            if (mustRenderGrid && inputRef.current) {\n                inputRef.current.focus();\n            }\n        }, 50);\n    }, [mustRenderGrid]);\n\n    const onFilterChange = useCallback<OnChangeCallable>(\n        (value, cb) => {\n            setFilter(value);\n            if (cb) {\n                cb(value);\n            }\n        },\n        [filter]\n    );\n\n    const allIcons: CmsIcon[] = useMemo(() => {\n        const iconPlugins = plugins.byType<CmsIconsPlugin>(\"cms-icons\");\n        return iconPlugins.reduce((icons: Array<CmsIcon>, pl) => {\n            return icons.concat(pl.getIcons());\n        }, []);\n    }, []);\n\n    const icons = useMemo(() => {\n        return filter ? allIcons.filter(ic => ic.name.includes(filter)) : allIcons;\n    }, [filter]);\n\n    const renderCell = useCallback(\n        ({ closeMenu }: RenderCellParams) => {\n            return function renderCell({\n                columnIndex,\n                key,\n                rowIndex,\n                style\n            }: GridCellProps): React.ReactNode {\n                const item = icons[rowIndex * COLUMN_COUNT + columnIndex];\n                if (!item) {\n                    return null;\n                }\n\n                return (\n                    <div\n                        key={key}\n                        style={style}\n                        className={gridItem}\n                        onClick={() => {\n                            if (onChange) {\n                                onChange(item.id.join(\"/\"));\n                            }\n                            closeMenu();\n                        }}\n                    >\n                        <FontAwesomeIcon icon={item.id} size={\"2x\"} />\n                        <Typography use={\"body2\"}>{item.name}</Typography>\n                    </div>\n                );\n            };\n        },\n        [icons]\n    );\n\n    const renderGrid = useCallback<RenderableMenuChildren>(\n        ({ closeMenu }) => {\n            return (\n                <>\n                    <Global styles={globalStyles} />\n                    <DelayedOnChange value={filter} onChange={onFilterChange}>\n                        {({ value, onChange }) => (\n                            <Input\n                                inputRef={inputRef}\n                                className={searchInput}\n                                value={value}\n                                onChange={onChange}\n                                placeholder={\"Search icons...\"}\n                            />\n                        )}\n                    </DelayedOnChange>\n                    {icons.length === 0 ? (\n                        <div className={NoResultWrapper}>\n                            <Typography use=\"body1\">No results found.</Typography>\n                        </div>\n                    ) : (\n                        <Grid\n                            className={grid}\n                            cellRenderer={renderCell({ closeMenu })}\n                            columnCount={COLUMN_COUNT}\n                            columnWidth={100}\n                            height={440}\n                            rowCount={Math.ceil(icons.length / COLUMN_COUNT)}\n                            rowHeight={100}\n                            width={640}\n                        />\n                    )}\n                </>\n            );\n        },\n        [icons]\n    );\n\n    const fontAwesomeIconValue: any =\n        typeof value === \"string\" && value.includes(\"/\") ? value.split(\"/\") : [\"fas\", \"star\"];\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    return (\n        <>\n            {label && (\n                <div className={iconPickerLabel}>\n                    <Typography use={\"body1\"}>{label}</Typography>\n                </div>\n            )}\n\n            <Menu\n                onOpen={() => setMustRenderGrid(true)}\n                onClose={() => setMustRenderGrid(false)}\n                renderToPortal={true}\n                handle={\n                    <div className={MenuWrapper}>\n                        <div className={pickIcon}>\n                            <FontAwesomeIcon icon={fontAwesomeIconValue} size={\"2x\"} />\n                        </div>\n                    </div>\n                }\n            >\n                {\n                    /**\n                     * Unfortunately we need to cast for build to pass.\n                     *\n                     * real type is RenderableMenuChildren, but the TS is complaining.\n                     * @TODO bruno fix\n                     */\n                    mustRenderGrid && (renderGrid as unknown as React.ReactNode)\n                }\n            </Menu>\n\n            {validationIsValid === false && (\n                <FormElementMessage error>{validationMessage}</FormElementMessage>\n            )}\n            {validationIsValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","IconPicker","AdminIconPicker","plugins","props","icons","iconPlugins","byType","reduce","pl","concat","getIcons","onChange","value","type","name","createElement","Object","assign","size"],"sources":["IconPicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { IconPickerIconDto, IconPickerProps } from \"@webiny/admin-ui\";\nimport { IconPicker as AdminIconPicker } from \"@webiny/admin-ui\";\nimport { plugins } from \"@webiny/plugins\";\nimport type { CmsIconsPlugin } from \"~/types.js\";\n\nexport const IconPicker = (props: Omit<IconPickerProps, \"icons\">) => {\n    const icons: IconPickerIconDto[] = useMemo(() => {\n        const iconPlugins = plugins.byType<CmsIconsPlugin>(\"cms-icons\");\n        return iconPlugins.reduce((icons: Array<IconPickerIconDto>, pl) => {\n            return icons.concat(pl.getIcons());\n        }, []);\n    }, []);\n\n    const onChange = (value: string | null) => {\n        if (props.onChange) {\n            if (!value) {\n                props.onChange(null);\n                return;\n            }\n\n            props.onChange({\n                type: \"icon\",\n                name: value\n            });\n        }\n    };\n\n    let value = null;\n    if (props.value) {\n        if (typeof props.value === \"string\") {\n            value = props.value;\n        } else {\n            value = props.value.name;\n        }\n    }\n\n    return (\n        <AdminIconPicker size={\"lg\"} icons={icons} {...props} onChange={onChange} value={value} />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,SAASC,UAAU,IAAIC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,OAAO,QAAQ,iBAAiB;AAGzC,OAAO,MAAMF,UAAU,GAAIG,KAAqC,IAAK;EACjE,MAAMC,KAA0B,GAAGL,OAAO,CAAC,MAAM;IAC7C,MAAMM,WAAW,GAAGH,OAAO,CAACI,MAAM,CAAiB,WAAW,CAAC;IAC/D,OAAOD,WAAW,CAACE,MAAM,CAAC,CAACH,KAA+B,EAAEI,EAAE,KAAK;MAC/D,OAAOJ,KAAK,CAACK,MAAM,CAACD,EAAE,CAACE,QAAQ,CAAC,CAAC,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC;EACV,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,QAAQ,GAAIC,KAAoB,IAAK;IACvC,IAAIT,KAAK,CAACQ,QAAQ,EAAE;MAChB,IAAI,CAACC,KAAK,EAAE;QACRT,KAAK,CAACQ,QAAQ,CAAC,IAAI,CAAC;QACpB;MACJ;MAEAR,KAAK,CAACQ,QAAQ,CAAC;QACXE,IAAI,EAAE,MAAM;QACZC,IAAI,EAAEF;MACV,CAAC,CAAC;IACN;EACJ,CAAC;EAED,IAAIA,KAAK,GAAG,IAAI;EAChB,IAAIT,KAAK,CAACS,KAAK,EAAE;IACb,IAAI,OAAOT,KAAK,CAACS,KAAK,KAAK,QAAQ,EAAE;MACjCA,KAAK,GAAGT,KAAK,CAACS,KAAK;IACvB,CAAC,MAAM;MACHA,KAAK,GAAGT,KAAK,CAACS,KAAK,CAACE,IAAI;IAC5B;EACJ;EAEA,oBACIhB,KAAA,CAAAiB,aAAA,CAACd,eAAe,EAAAe,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAE,IAAK;IAACd,KAAK,EAAEA;EAAM,GAAKD,KAAK;IAAEQ,QAAQ,EAAEA,QAAS;IAACC,KAAK,EAAEA;EAAM,EAAE,CAAC;AAElG,CAAC","ignoreList":[]}

package/admin/components/IsModelPublishable.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface IsPublishableProps {
+    children: React.ReactNode;
+}
+export declare const IsModelPublishable: (props: IsPublishableProps) => React.JSX.Element | null;

package/admin/components/IsModelPublishable.js

@@ -0,0 +1,11 @@
+import React, { useMemo } from "react";
+import { useModel } from "../../exports/admin/cms.js";
+export const IsModelPublishable = props => {
+  const {
+    model
+  } = useModel();
+  const isPublishable = useMemo(() => !model.tags.includes("$publishing:false"), [model]);
+  return isPublishable ? /*#__PURE__*/React.createElement(React.Fragment, null, props.children) : null;
+};
+
+//# sourceMappingURL=IsModelPublishable.js.map

package/admin/components/IsModelPublishable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","useModel","IsModelPublishable","props","model","isPublishable","tags","includes","createElement","Fragment","children"],"sources":["IsModelPublishable.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { useModel } from \"~/exports/admin/cms.js\";\n\nexport interface IsPublishableProps {\n    children: React.ReactNode;\n}\n\nexport const IsModelPublishable = (props: IsPublishableProps) => {\n    const { model } = useModel();\n\n    const isPublishable = useMemo(() => !model.tags.includes(\"$publishing:false\"), [model]);\n\n    return isPublishable ? <>{props.children}</> : null;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,QAAQ;AAMjB,OAAO,MAAMC,kBAAkB,GAAIC,KAAyB,IAAK;EAC7D,MAAM;IAAEC;EAAM,CAAC,GAAGH,QAAQ,CAAC,CAAC;EAE5B,MAAMI,aAAa,GAAGL,OAAO,CAAC,MAAM,CAACI,KAAK,CAACE,IAAI,CAACC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAACH,KAAK,CAAC,CAAC;EAEvF,OAAOC,aAAa,gBAAGN,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,QAAGN,KAAK,CAACO,QAAW,CAAC,GAAG,IAAI;AACvD,CAAC","ignoreList":[]}

package/admin/components/LexicalCmsEditor/LexicalCmsEditor.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { RichTextEditorProps } from "@webiny/lexical-editor/types";
-export declare const LexicalCmsEditor: (props: Omit<RichTextEditorProps, "theme">) => React.JSX.Element;
+import { LexicalEditor } from "@webiny/app-admin";
+export declare const LexicalCmsEditor: (props: Omit<LexicalEditor.Props, "theme">) => React.JSX.Element;

package/admin/components/LexicalCmsEditor/LexicalCmsEditor.js

@@ -1,44 +1,27 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LexicalCmsEditor = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _lexicalEditor = require("@webiny/lexical-editor");
-var _reactComposition = require("@webiny/react-composition");
-var _LexicalEditor = require("@webiny/app-admin/components/LexicalEditor");
-var placeholderStyles = {
+import React from "react";
+import { StaticToolbar } from "@webiny/lexical-editor";
+import { LexicalEditor } from "@webiny/app-admin";
+const placeholderStyles = {
   position: "absolute",
   top: 40,
   left: 25
 };
-var contentEditableStyles = {
+const contentEditableStyles = {
   minHeight: 200,
   display: "block",
   padding: 10
 };
-var styles = {
+const styles = {
   backgroundColor: "#fff",
   border: "1px solid #e1e1e1",
   padding: "10px 14px",
   minHeight: 200,
   maxHeight: 350
 };
-var toolbar = /*#__PURE__*/_react.default.createElement(_reactComposition.CompositionScope, {
-  name: "cms"
-}, /*#__PURE__*/_react.default.createElement(_lexicalEditor.StaticToolbar, null));
-var LexicalCmsEditor = exports.LexicalCmsEditor = function LexicalCmsEditor(props) {
-  var onChange = (0, _react.useCallback)(function (jsonString) {
-    if (props?.onChange) {
-      props?.onChange(JSON.parse(jsonString));
-    }
-  }, [props?.onChange]);
-  return /*#__PURE__*/_react.default.createElement(_LexicalEditor.LexicalEditor, Object.assign({}, props, {
+const toolbar = /*#__PURE__*/React.createElement(StaticToolbar, null);
+export const LexicalCmsEditor = props => {
+  return /*#__PURE__*/React.createElement(LexicalEditor, Object.assign({}, props, {
     focus: true,
-    value: JSON.stringify(props.value),
-    onChange: onChange,
     staticToolbar: toolbar,
     tag: "p",
     placeholder: props?.placeholder || "Enter your text here...",

package/admin/components/LexicalCmsEditor/LexicalCmsEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_lexicalEditor","_reactComposition","_LexicalEditor","placeholderStyles","position","top","left","contentEditableStyles","minHeight","display","padding","styles","backgroundColor","border","maxHeight","toolbar","default","createElement","CompositionScope","name","StaticToolbar","LexicalCmsEditor","exports","props","onChange","useCallback","jsonString","JSON","parse","LexicalEditor","Object","assign","focus","value","stringify","staticToolbar","tag","placeholder"],"sources":["LexicalCmsEditor.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { StaticToolbar } from \"@webiny/lexical-editor\";\nimport { RichTextEditorProps } from \"@webiny/lexical-editor/types\";\nimport { CompositionScope } from \"@webiny/react-composition\";\nimport { LexicalEditor } from \"@webiny/app-admin/components/LexicalEditor\";\n\nconst placeholderStyles: React.CSSProperties = { position: \"absolute\", top: 40, left: 25 };\n\nconst contentEditableStyles: React.CSSProperties = {\n    minHeight: 200,\n    display: \"block\",\n    padding: 10\n};\n\nconst styles: React.CSSProperties = {\n    backgroundColor: \"#fff\",\n    border: \"1px solid #e1e1e1\",\n    padding: \"10px 14px\",\n    minHeight: 200,\n    maxHeight: 350\n};\n\nconst toolbar = (\n    <CompositionScope name={\"cms\"}>\n        <StaticToolbar />\n    </CompositionScope>\n);\n\nexport const LexicalCmsEditor = (props: Omit<RichTextEditorProps, \"theme\">) => {\n    const onChange = useCallback(\n        (jsonString: string) => {\n            if (props?.onChange) {\n                props?.onChange(JSON.parse(jsonString));\n            }\n        },\n        [props?.onChange]\n    );\n\n    return (\n        <LexicalEditor\n            {...props}\n            focus={true}\n            value={JSON.stringify(props.value)}\n            onChange={onChange}\n            staticToolbar={toolbar}\n            tag={\"p\"}\n            placeholder={props?.placeholder || \"Enter your text here...\"}\n            placeholderStyles={placeholderStyles}\n            contentEditableStyles={contentEditableStyles}\n            styles={styles}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AAEA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAEA,IAAMI,iBAAsC,GAAG;EAAEC,QAAQ,EAAE,UAAU;EAAEC,GAAG,EAAE,EAAE;EAAEC,IAAI,EAAE;AAAG,CAAC;AAE1F,IAAMC,qBAA0C,GAAG;EAC/CC,SAAS,EAAE,GAAG;EACdC,OAAO,EAAE,OAAO;EAChBC,OAAO,EAAE;AACb,CAAC;AAED,IAAMC,MAA2B,GAAG;EAChCC,eAAe,EAAE,MAAM;EACvBC,MAAM,EAAE,mBAAmB;EAC3BH,OAAO,EAAE,WAAW;EACpBF,SAAS,EAAE,GAAG;EACdM,SAAS,EAAE;AACf,CAAC;AAED,IAAMC,OAAO,gBACTlB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAAChB,iBAAA,CAAAiB,gBAAgB;EAACC,IAAI,EAAE;AAAM,gBAC1BtB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACjB,cAAA,CAAAoB,aAAa,MAAE,CACF,CACrB;AAEM,IAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,SAAnBA,gBAAgBA,CAAIE,KAAyC,EAAK;EAC3E,IAAMC,QAAQ,GAAG,IAAAC,kBAAW,EACxB,UAACC,UAAkB,EAAK;IACpB,IAAIH,KAAK,EAAEC,QAAQ,EAAE;MACjBD,KAAK,EAAEC,QAAQ,CAACG,IAAI,CAACC,KAAK,CAACF,UAAU,CAAC,CAAC;IAC3C;EACJ,CAAC,EACD,CAACH,KAAK,EAAEC,QAAQ,CACpB,CAAC;EAED,oBACI3B,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACf,cAAA,CAAA2B,aAAa,EAAAC,MAAA,CAAAC,MAAA,KACNR,KAAK;IACTS,KAAK,EAAE,IAAK;IACZC,KAAK,EAAEN,IAAI,CAACO,SAAS,CAACX,KAAK,CAACU,KAAK,CAAE;IACnCT,QAAQ,EAAEA,QAAS;IACnBW,aAAa,EAAEpB,OAAQ;IACvBqB,GAAG,EAAE,GAAI;IACTC,WAAW,EAAEd,KAAK,EAAEc,WAAW,IAAI,yBAA0B;IAC7DlC,iBAAiB,EAAEA,iBAAkB;IACrCI,qBAAqB,EAAEA,qBAAsB;IAC7CI,MAAM,EAAEA;EAAO,EAClB,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"names":["React","StaticToolbar","LexicalEditor","placeholderStyles","position","top","left","contentEditableStyles","minHeight","display","padding","styles","backgroundColor","border","maxHeight","toolbar","createElement","LexicalCmsEditor","props","Object","assign","focus","staticToolbar","tag","placeholder"],"sources":["LexicalCmsEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { StaticToolbar } from \"@webiny/lexical-editor\";\nimport { LexicalEditor } from \"@webiny/app-admin\";\n\nconst placeholderStyles: React.CSSProperties = { position: \"absolute\", top: 40, left: 25 };\n\nconst contentEditableStyles: React.CSSProperties = {\n    minHeight: 200,\n    display: \"block\",\n    padding: 10\n};\n\nconst styles: React.CSSProperties = {\n    backgroundColor: \"#fff\",\n    border: \"1px solid #e1e1e1\",\n    padding: \"10px 14px\",\n    minHeight: 200,\n    maxHeight: 350\n};\n\nconst toolbar = <StaticToolbar />;\n\nexport const LexicalCmsEditor = (props: Omit<LexicalEditor.Props, \"theme\">) => {\n    return (\n        <LexicalEditor\n            {...props}\n            focus={true}\n            staticToolbar={toolbar}\n            tag={\"p\"}\n            placeholder={props?.placeholder || \"Enter your text here...\"}\n            placeholderStyles={placeholderStyles}\n            contentEditableStyles={contentEditableStyles}\n            styles={styles}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,aAAa,QAAQ,mBAAmB;AAEjD,MAAMC,iBAAsC,GAAG;EAAEC,QAAQ,EAAE,UAAU;EAAEC,GAAG,EAAE,EAAE;EAAEC,IAAI,EAAE;AAAG,CAAC;AAE1F,MAAMC,qBAA0C,GAAG;EAC/CC,SAAS,EAAE,GAAG;EACdC,OAAO,EAAE,OAAO;EAChBC,OAAO,EAAE;AACb,CAAC;AAED,MAAMC,MAA2B,GAAG;EAChCC,eAAe,EAAE,MAAM;EACvBC,MAAM,EAAE,mBAAmB;EAC3BH,OAAO,EAAE,WAAW;EACpBF,SAAS,EAAE,GAAG;EACdM,SAAS,EAAE;AACf,CAAC;AAED,MAAMC,OAAO,gBAAGf,KAAA,CAAAgB,aAAA,CAACf,aAAa,MAAE,CAAC;AAEjC,OAAO,MAAMgB,gBAAgB,GAAIC,KAAyC,IAAK;EAC3E,oBACIlB,KAAA,CAAAgB,aAAA,CAACd,aAAa,EAAAiB,MAAA,CAAAC,MAAA,KACNF,KAAK;IACTG,KAAK,EAAE,IAAK;IACZC,aAAa,EAAEP,OAAQ;IACvBQ,GAAG,EAAE,GAAI;IACTC,WAAW,EAAEN,KAAK,EAAEM,WAAW,IAAI,yBAA0B;IAC7DrB,iBAAiB,EAAEA,iBAAkB;IACrCI,qBAAqB,EAAEA,qBAAsB;IAC7CI,MAAM,EAAEA;EAAO,EAClB,CAAC;AAEV,CAAC","ignoreList":[]}

package/admin/components/LexicalCmsEditor/LexicalEditorCmsPlugin.d.ts

@@ -1,2 +1,2 @@
-import { FC } from "react";
+import type { FC } from "react";
 export declare const LexicalEditorCmsPlugin: FC;

package/admin/components/LexicalCmsEditor/LexicalEditorCmsPlugin.js

@@ -1,98 +1,88 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LexicalEditorCmsPlugin = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _lexicalEditor = require("@webiny/lexical-editor");
-var _TypographyDropDown = require("./TypographyDropDown");
-var _reactComposition = require("@webiny/react-composition");
-var ToolbarElement = _lexicalEditor.LexicalEditorConfig.ToolbarElement,
-  Plugin = _lexicalEditor.LexicalEditorConfig.Plugin;
-var LexicalEditorCmsPlugin = exports.LexicalEditorCmsPlugin = function LexicalEditorCmsPlugin() {
-  return /*#__PURE__*/_react.default.createElement(_reactComposition.CompositionScope, {
-    name: "cms"
-  }, /*#__PURE__*/_react.default.createElement(_lexicalEditor.LexicalEditorConfig, null, /*#__PURE__*/_react.default.createElement(ToolbarElement, {
-    name: "fontSize",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.FontSizeAction, null)
-  }), /*#__PURE__*/_react.default.createElement(ToolbarElement, {
+import React from "react";
+import { TypographyAction, LexicalEditorConfig, FontColorAction, Divider, BoldAction, ItalicAction, UnderlineAction, CodeHighlightAction, NumberedListAction, BulletListAction, ImageAction, LinkAction, QuoteAction, ImagesPlugin, QuotePlugin, CodeHighlightPlugin, LinkPlugin, ListPlugin, TypographyPlugin, FontColorPlugin, TextAlignmentAction } from "@webiny/lexical-editor";
+import { TypographyDropDown } from "./TypographyDropDown.js";
+import { CompositionScope } from "@webiny/react-composition";
+const {
+  ToolbarElement,
+  Plugin
+} = LexicalEditorConfig;
+export const LexicalEditorCmsPlugin = () => {
+  return /*#__PURE__*/React.createElement(CompositionScope, {
+    name: "cms",
+    inherit: true
+  }, /*#__PURE__*/React.createElement(LexicalEditorConfig, {
+    priority: "primary"
+  }, /*#__PURE__*/React.createElement(ToolbarElement, {
     name: "fontColor",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.FontColorAction, null)
-  }), /*#__PURE__*/_react.default.createElement(ToolbarElement, {
+    element: /*#__PURE__*/React.createElement(FontColorAction, null)
+  }), /*#__PURE__*/React.createElement(ToolbarElement, {
     name: "typography",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.TypographyAction, null)
-  }), /*#__PURE__*/_react.default.createElement(ToolbarElement, {
+    element: /*#__PURE__*/React.createElement(TypographyAction, null)
+  }), /*#__PURE__*/React.createElement(ToolbarElement, {
     name: "textAlignment",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.TextAlignmentAction, null)
-  }), /*#__PURE__*/_react.default.createElement(ToolbarElement, {
+    element: /*#__PURE__*/React.createElement(TextAlignmentAction, null)
+  }), /*#__PURE__*/React.createElement(ToolbarElement, {
     name: "divider1",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.Divider, null)
-  }), /*#__PURE__*/_react.default.createElement(ToolbarElement, {
+    element: /*#__PURE__*/React.createElement(Divider, null)
+  }), /*#__PURE__*/React.createElement(ToolbarElement, {
     name: "boldAction",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.BoldAction, null)
-  }), /*#__PURE__*/_react.default.createElement(ToolbarElement, {
+    element: /*#__PURE__*/React.createElement(BoldAction, null)
+  }), /*#__PURE__*/React.createElement(ToolbarElement, {
     name: "italic",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.ItalicAction, null)
-  }), /*#__PURE__*/_react.default.createElement(ToolbarElement, {
+    element: /*#__PURE__*/React.createElement(ItalicAction, null)
+  }), /*#__PURE__*/React.createElement(ToolbarElement, {
     name: "underline",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.UnderlineAction, null)
-  }), /*#__PURE__*/_react.default.createElement(ToolbarElement, {
+    element: /*#__PURE__*/React.createElement(UnderlineAction, null)
+  }), /*#__PURE__*/React.createElement(ToolbarElement, {
     name: "codeHighlight",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.CodeHighlightAction, null)
-  }), /*#__PURE__*/_react.default.createElement(ToolbarElement, {
+    element: /*#__PURE__*/React.createElement(CodeHighlightAction, null)
+  }), /*#__PURE__*/React.createElement(ToolbarElement, {
     name: "divider2",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.Divider, null)
-  }), /*#__PURE__*/_react.default.createElement(ToolbarElement, {
+    element: /*#__PURE__*/React.createElement(Divider, null)
+  }), /*#__PURE__*/React.createElement(ToolbarElement, {
     name: "numberedList",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.NumberedListAction, null)
-  }), /*#__PURE__*/_react.default.createElement(ToolbarElement, {
+    element: /*#__PURE__*/React.createElement(NumberedListAction, null)
+  }), /*#__PURE__*/React.createElement(ToolbarElement, {
     name: "bulletList",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.BulletListAction, null)
-  }), /*#__PURE__*/_react.default.createElement(ToolbarElement, {
+    element: /*#__PURE__*/React.createElement(BulletListAction, null)
+  }), /*#__PURE__*/React.createElement(ToolbarElement, {
     name: "divider",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.Divider, null)
-  }), /*#__PURE__*/_react.default.createElement(ToolbarElement, {
+    element: /*#__PURE__*/React.createElement(Divider, null)
+  }), /*#__PURE__*/React.createElement(ToolbarElement, {
     name: "image",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.ImageAction, null)
-  }), /*#__PURE__*/_react.default.createElement(ToolbarElement, {
+    element: /*#__PURE__*/React.createElement(ImageAction, null)
+  }), /*#__PURE__*/React.createElement(ToolbarElement, {
     name: "divider3",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.Divider, null)
-  }), /*#__PURE__*/_react.default.createElement(ToolbarElement, {
+    element: /*#__PURE__*/React.createElement(Divider, null)
+  }), /*#__PURE__*/React.createElement(ToolbarElement, {
     name: "link",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.LinkAction, null)
-  }), /*#__PURE__*/_react.default.createElement(ToolbarElement, {
+    element: /*#__PURE__*/React.createElement(LinkAction, null)
+  }), /*#__PURE__*/React.createElement(ToolbarElement, {
     name: "quote",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.QuoteAction, null)
-  }), /*#__PURE__*/_react.default.createElement(Plugin, {
+    element: /*#__PURE__*/React.createElement(QuoteAction, null)
+  }), /*#__PURE__*/React.createElement(Plugin, {
     name: "fontColor",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.FontColorPlugin, null)
-  }), /*#__PURE__*/_react.default.createElement(Plugin, {
+    element: /*#__PURE__*/React.createElement(FontColorPlugin, null)
+  }), /*#__PURE__*/React.createElement(Plugin, {
     name: "list",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.ListPlugin, null)
-  }), /*#__PURE__*/_react.default.createElement(Plugin, {
+    element: /*#__PURE__*/React.createElement(ListPlugin, null)
+  }), /*#__PURE__*/React.createElement(Plugin, {
     name: "codeHighlight",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.CodeHighlightPlugin, null)
-  }), /*#__PURE__*/_react.default.createElement(Plugin, {
+    element: /*#__PURE__*/React.createElement(CodeHighlightPlugin, null)
+  }), /*#__PURE__*/React.createElement(Plugin, {
     name: "typography",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.TypographyPlugin, null)
-  }), /*#__PURE__*/_react.default.createElement(Plugin, {
+    element: /*#__PURE__*/React.createElement(TypographyPlugin, null)
+  }), /*#__PURE__*/React.createElement(Plugin, {
     name: "link",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.LinkPlugin, null)
-  }), /*#__PURE__*/_react.default.createElement(Plugin, {
-    name: "floatingLinkEditor",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.FloatingLinkEditorPlugin, {
-      anchorElem: document.body
-    })
-  }), /*#__PURE__*/_react.default.createElement(Plugin, {
+    element: /*#__PURE__*/React.createElement(LinkPlugin, null)
+  }), /*#__PURE__*/React.createElement(Plugin, {
     name: "images",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.ImagesPlugin, null)
-  }), /*#__PURE__*/_react.default.createElement(Plugin, {
+    element: /*#__PURE__*/React.createElement(ImagesPlugin, null)
+  }), /*#__PURE__*/React.createElement(Plugin, {
     name: "quote",
-    element: /*#__PURE__*/_react.default.createElement(_lexicalEditor.QuotePlugin, null)
-  }), /*#__PURE__*/_react.default.createElement(_lexicalEditor.TypographyAction.TypographyDropDown, {
-    element: /*#__PURE__*/_react.default.createElement(_TypographyDropDown.TypographyDropDown, null)
+    element: /*#__PURE__*/React.createElement(QuotePlugin, null)
+  }), /*#__PURE__*/React.createElement(TypographyAction.TypographyDropDown, {
+    element: /*#__PURE__*/React.createElement(TypographyDropDown, null)
   })));
 };