@webiny/app-headless-cms 0.0.0-unstable.496cf268ac → 0.0.0-unstable.5387e5f7c8

package/admin/components/FieldEditor/utils/moveField.js.map

@@ -1 +1 @@
-{"version":3,"names":["moveField","params","field","position","prev","data","row","index","fieldId","id","next","layout","existingPosition","getFieldPosition","dot","delete","set","newLayout","splice","filter","length"],"sources":["moveField.ts"],"sourcesContent":["import dot from \"dot-prop-immutable\";\nimport {\n    CmsModelField,\n    CmsEditorFieldId,\n    CmsModel as BaseCmsModel,\n    FieldLayoutPosition\n} from \"~/types\";\nimport getFieldPosition from \"./getFieldPosition\";\n\ntype CmsModel = Required<Pick<BaseCmsModel, \"fields\" | \"layout\">>;\n\ninterface MoveFieldParams<T> {\n    field: CmsEditorFieldId | Pick<CmsModelField, \"id\">;\n    position: FieldLayoutPosition;\n    data: T;\n}\n\nconst moveField = <T extends CmsModel>(params: MoveFieldParams<T>) => {\n    const { field, position, data: prev } = params;\n    const { row, index } = position;\n    const fieldId = typeof field === \"string\" ? field : field.id;\n\n    let next: T = {\n        ...prev,\n        layout: prev.layout ? prev.layout || [] : []\n    };\n\n    const existingPosition = getFieldPosition({ field: fieldId, data: prev });\n\n    if (existingPosition) {\n        next = dot.delete(prev, `layout.${existingPosition.row}.${existingPosition.index}`) as T;\n    }\n\n    // Setting a form field into a new non-existing row.\n    if (!next.layout[row]) {\n        return dot.set(next, `layout.${row}`, [fieldId]);\n    }\n\n    // Drop the field at the specified index.\n    if (index === null) {\n        // Create a new row with the new field at the given row index,\n        return dot.set(next, \"layout\", (layout: string[][]) => {\n            const newLayout = [...layout];\n            newLayout.splice(row, 0, [fieldId]);\n            return newLayout;\n        });\n    }\n\n    return dot.set(next, `layout.${row}`, (layout: string[]) => {\n        const newLayout = [...layout];\n        newLayout.splice(index, 0, fieldId);\n        return newLayout;\n    });\n};\n\nexport default <T extends CmsModel>(params: MoveFieldParams<T>): T => {\n    return dot.set(moveField<T>(params), \"layout\", (layout: string[][]) => {\n        return [...layout].filter(row => row.length > 0);\n    });\n};\n"],"mappings":";;;;;;;;;AAAA;AAOA;AAUA,IAAMA,SAAS,GAAG,SAAZA,SAAS,CAAwBC,MAA0B,EAAK;EAClE,IAAQC,KAAK,GAA2BD,MAAM,CAAtCC,KAAK;IAAEC,QAAQ,GAAiBF,MAAM,CAA/BE,QAAQ;IAAQC,IAAI,GAAKH,MAAM,CAArBI,IAAI;EAC7B,IAAQC,GAAG,GAAYH,QAAQ,CAAvBG,GAAG;IAAEC,KAAK,GAAKJ,QAAQ,CAAlBI,KAAK;EAClB,IAAMC,OAAO,GAAG,OAAON,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGA,KAAK,CAACO,EAAE;EAE5D,IAAIC,IAAO,+DACJN,IAAI;IACPO,MAAM,EAAEP,IAAI,CAACO,MAAM,GAAGP,IAAI,CAACO,MAAM,IAAI,EAAE,GAAG;EAAE,EAC/C;EAED,IAAMC,gBAAgB,GAAG,IAAAC,yBAAgB,EAAC;IAAEX,KAAK,EAAEM,OAAO;IAAEH,IAAI,EAAED;EAAK,CAAC,CAAC;EAEzE,IAAIQ,gBAAgB,EAAE;IAClBF,IAAI,GAAGI,yBAAG,CAACC,MAAM,CAACX,IAAI,mBAAYQ,gBAAgB,CAACN,GAAG,cAAIM,gBAAgB,CAACL,KAAK,EAAQ;EAC5F;;EAEA;EACA,IAAI,CAACG,IAAI,CAACC,MAAM,CAACL,GAAG,CAAC,EAAE;IACnB,OAAOQ,yBAAG,CAACE,GAAG,CAACN,IAAI,mBAAYJ,GAAG,GAAI,CAACE,OAAO,CAAC,CAAC;EACpD;;EAEA;EACA,IAAID,KAAK,KAAK,IAAI,EAAE;IAChB;IACA,OAAOO,yBAAG,CAACE,GAAG,CAACN,IAAI,EAAE,QAAQ,EAAE,UAACC,MAAkB,EAAK;MACnD,IAAMM,SAAS,oCAAON,MAAM,CAAC;MAC7BM,SAAS,CAACC,MAAM,CAACZ,GAAG,EAAE,CAAC,EAAE,CAACE,OAAO,CAAC,CAAC;MACnC,OAAOS,SAAS;IACpB,CAAC,CAAC;EACN;EAEA,OAAOH,yBAAG,CAACE,GAAG,CAACN,IAAI,mBAAYJ,GAAG,GAAI,UAACK,MAAgB,EAAK;IACxD,IAAMM,SAAS,oCAAON,MAAM,CAAC;IAC7BM,SAAS,CAACC,MAAM,CAACX,KAAK,EAAE,CAAC,EAAEC,OAAO,CAAC;IACnC,OAAOS,SAAS;EACpB,CAAC,CAAC;AACN,CAAC;AAAC,eAEa,kBAAqBhB,MAA0B,EAAQ;EAClE,OAAOa,yBAAG,CAACE,GAAG,CAAChB,SAAS,CAAIC,MAAM,CAAC,EAAE,QAAQ,EAAE,UAACU,MAAkB,EAAK;IACnE,OAAO,iCAAIA,MAAM,EAAEQ,MAAM,CAAC,UAAAb,GAAG;MAAA,OAAIA,GAAG,CAACc,MAAM,GAAG,CAAC;IAAA,EAAC;EACpD,CAAC,CAAC;AACN,CAAC;AAAA"}
+{"version":3,"file":"admin/components/FieldEditor/utils/moveField.js","sources":["../../../../../src/admin/components/FieldEditor/utils/moveField.ts"],"sourcesContent":["import dot from \"dot-prop-immutable\";\nimport type {\n    CmsModelField,\n    CmsEditorFieldId,\n    CmsModel as BaseCmsModel,\n    FieldLayoutPosition\n} from \"~/types.js\";\nimport getFieldPosition from \"./getFieldPosition.js\";\n\ntype CmsModel = Required<Pick<BaseCmsModel, \"fields\" | \"layout\">>;\n\ninterface MoveFieldParams<T> {\n    field: CmsEditorFieldId | Pick<CmsModelField, \"id\">;\n    position: FieldLayoutPosition;\n    data: T;\n}\n\nconst moveField = <T extends CmsModel>(params: MoveFieldParams<T>) => {\n    const { field, position, data: prev } = params;\n    const { row, index } = position;\n    const fieldId = typeof field === \"string\" ? field : field.id;\n\n    let next: T = {\n        ...prev,\n        layout: prev.layout ? prev.layout || [] : []\n    };\n\n    const existingPosition = getFieldPosition({ field: fieldId, data: prev });\n\n    if (existingPosition) {\n        next = dot.delete(prev, `layout.${existingPosition.row}.${existingPosition.index}`) as T;\n    }\n\n    // Setting a form field into a new non-existing row.\n    if (!next.layout[row]) {\n        return dot.set(next, `layout.${row}`, [fieldId]);\n    }\n\n    // Drop the field at the specified index.\n    if (index === null) {\n        // Create a new row with the new field at the given row index,\n        return dot.set(next, \"layout\", (layout: string[][]) => {\n            const newLayout = [...layout];\n            newLayout.splice(row, 0, [fieldId]);\n            return newLayout;\n        });\n    }\n\n    return dot.set(next, `layout.${row}`, (layout: string[]) => {\n        const newLayout = [...layout];\n        newLayout.splice(index, 0, fieldId);\n        return newLayout;\n    });\n};\n\nexport default <T extends CmsModel>(params: MoveFieldParams<T>): T => {\n    return dot.set(moveField<T>(params), \"layout\", (layout: string[][]) => {\n        return [...layout].filter(row => row.length > 0);\n    });\n};\n"],"names":["moveField","params","field","position","prev","row","index","fieldId","next","existingPosition","getFieldPosition","dot","layout","newLayout"],"mappings":";;AAiBA,MAAMA,YAAY,CAAqBC;IACnC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,MAAMC,IAAI,EAAE,GAAGH;IACxC,MAAM,EAAEI,GAAG,EAAEC,KAAK,EAAE,GAAGH;IACvB,MAAMI,UAAU,AAAiB,YAAjB,OAAOL,QAAqBA,QAAQA,MAAM,EAAE;IAE5D,IAAIM,OAAU;QACV,GAAGJ,IAAI;QACP,QAAQA,KAAK,MAAM,GAAGA,KAAK,MAAM,IAAI,EAAE,GAAG,EAAE;IAChD;IAEA,MAAMK,mBAAmBC,iBAAiB;QAAE,OAAOH;QAAS,MAAMH;IAAK;IAEvE,IAAIK,kBACAD,OAAOG,kBAAAA,CAAAA,SAAU,CAACP,MAAM,CAAC,OAAO,EAAEK,iBAAiB,GAAG,CAAC,CAAC,EAAEA,iBAAiB,KAAK,EAAE;IAItF,IAAI,CAACD,KAAK,MAAM,CAACH,IAAI,EACjB,OAAOM,mBAAAA,GAAO,CAACH,MAAM,CAAC,OAAO,EAAEH,KAAK,EAAE;QAACE;KAAQ;IAInD,IAAID,AAAU,SAAVA,OAEA,OAAOK,mBAAAA,GAAO,CAACH,MAAM,UAAU,CAACI;QAC5B,MAAMC,YAAY;eAAID;SAAO;QAC7BC,UAAU,MAAM,CAACR,KAAK,GAAG;YAACE;SAAQ;QAClC,OAAOM;IACX;IAGJ,OAAOF,mBAAAA,GAAO,CAACH,MAAM,CAAC,OAAO,EAAEH,KAAK,EAAE,CAACO;QACnC,MAAMC,YAAY;eAAID;SAAO;QAC7BC,UAAU,MAAM,CAACP,OAAO,GAAGC;QAC3B,OAAOM;IACX;AACJ;AAEA,wBAAe,CAAqBZ,SACzBU,mBAAAA,GAAO,CAACX,UAAaC,SAAS,UAAU,CAACW,SACrC;eAAIA;SAAO,CAAC,MAAM,CAACP,CAAAA,MAAOA,IAAI,MAAM,GAAG"}

package/admin/components/FieldEditor/utils/moveRow.d.ts

@@ -1,8 +1,8 @@
-import { CmsModel } from "../../../../types";
+import type { CmsModel } from "../../../../types.js";
 interface Params {
     source: number;
     destination: number;
     data: Pick<CmsModel, "layout">;
 }
-declare const _default: ({ data, source, destination }: Params) => any;
 export default _default;
+declare function _default({ data, source, destination }: Params): any;

package/admin/components/FieldEditor/utils/moveRow.js

@@ -1,18 +1,15 @@
-"use strict";
+import dot_prop_immutable from "dot-prop-immutable";
+const moveRow = ({ data, source, destination })=>dot_prop_immutable.set(data, "layout", (layout)=>source < destination ? [
+            ...layout.slice(0, source),
+            ...layout.slice(source + 1, destination),
+            layout[source],
+            ...layout.slice(destination)
+        ] : [
+            ...layout.slice(0, destination),
+            layout[source],
+            ...layout.slice(destination, source),
+            ...layout.slice(source + 1)
+        ]);
+export default moveRow;
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _dotPropImmutable = _interopRequireDefault(require("dot-prop-immutable"));
-var _default = function _default(_ref) {
-  var data = _ref.data,
-    source = _ref.source,
-    destination = _ref.destination;
-  return _dotPropImmutable.default.set(data, "layout", function (layout) {
-    return source < destination ? [].concat((0, _toConsumableArray2.default)(layout.slice(0, source)), (0, _toConsumableArray2.default)(layout.slice(source + 1, destination)), [layout[source]], (0, _toConsumableArray2.default)(layout.slice(destination))) : [].concat((0, _toConsumableArray2.default)(layout.slice(0, destination)), [layout[source]], (0, _toConsumableArray2.default)(layout.slice(destination, source)), (0, _toConsumableArray2.default)(layout.slice(source + 1)));
-  });
-};
-exports.default = _default;
+//# sourceMappingURL=moveRow.js.map

package/admin/components/FieldEditor/utils/moveRow.js.map

@@ -1 +1 @@
-{"version":3,"names":["data","source","destination","dot","set","layout","slice"],"sources":["moveRow.ts"],"sourcesContent":["import dot from \"dot-prop-immutable\";\nimport { CmsModel } from \"~/types\";\n\ninterface Params {\n    source: number;\n    destination: number;\n    data: Pick<CmsModel, \"layout\">;\n}\nexport default ({ data, source, destination }: Params) => {\n    return dot.set(data, \"layout\", (layout: string[][]) => {\n        return source < destination\n            ? [\n                  ...layout.slice(0, source),\n                  ...layout.slice(source + 1, destination),\n                  layout[source],\n                  ...layout.slice(destination)\n              ]\n            : [\n                  ...layout.slice(0, destination),\n                  layout[source],\n                  ...layout.slice(destination, source),\n                  ...layout.slice(source + 1)\n              ];\n    });\n};\n"],"mappings":";;;;;;;;AAAA;AAAqC,eAQtB,wBAA2C;EAAA,IAAxCA,IAAI,QAAJA,IAAI;IAAEC,MAAM,QAANA,MAAM;IAAEC,WAAW,QAAXA,WAAW;EACvC,OAAOC,yBAAG,CAACC,GAAG,CAACJ,IAAI,EAAE,QAAQ,EAAE,UAACK,MAAkB,EAAK;IACnD,OAAOJ,MAAM,GAAGC,WAAW,8CAEdG,MAAM,CAACC,KAAK,CAAC,CAAC,EAAEL,MAAM,CAAC,oCACvBI,MAAM,CAACC,KAAK,CAACL,MAAM,GAAG,CAAC,EAAEC,WAAW,CAAC,IACxCG,MAAM,CAACJ,MAAM,CAAC,oCACXI,MAAM,CAACC,KAAK,CAACJ,WAAW,CAAC,gDAGzBG,MAAM,CAACC,KAAK,CAAC,CAAC,EAAEJ,WAAW,CAAC,IAC/BG,MAAM,CAACJ,MAAM,CAAC,oCACXI,MAAM,CAACC,KAAK,CAACJ,WAAW,EAAED,MAAM,CAAC,oCACjCI,MAAM,CAACC,KAAK,CAACL,MAAM,GAAG,CAAC,CAAC,EAC9B;EACX,CAAC,CAAC;AACN,CAAC;AAAA"}
+{"version":3,"file":"admin/components/FieldEditor/utils/moveRow.js","sources":["../../../../../src/admin/components/FieldEditor/utils/moveRow.ts"],"sourcesContent":["import dot from \"dot-prop-immutable\";\nimport type { CmsModel } from \"~/types.js\";\n\ninterface Params {\n    source: number;\n    destination: number;\n    data: Pick<CmsModel, \"layout\">;\n}\nexport default ({ data, source, destination }: Params) => {\n    return dot.set(data, \"layout\", (layout: string[][]) => {\n        return source < destination\n            ? [\n                  ...layout.slice(0, source),\n                  ...layout.slice(source + 1, destination),\n                  layout[source],\n                  ...layout.slice(destination)\n              ]\n            : [\n                  ...layout.slice(0, destination),\n                  layout[source],\n                  ...layout.slice(destination, source),\n                  ...layout.slice(source + 1)\n              ];\n    });\n};\n"],"names":["data","source","destination","dot","layout"],"mappings":";AAQA,gBAAgB,GAAEA,IAAI,EAAEC,MAAM,EAAEC,WAAW,EAAU,GAC1CC,mBAAAA,GAAO,CAACH,MAAM,UAAU,CAACI,SACrBH,SAASC,cACV;eACOE,OAAO,KAAK,CAAC,GAAGH;eAChBG,OAAO,KAAK,CAACH,SAAS,GAAGC;YAC5BE,MAAM,CAACH,OAAO;eACXG,OAAO,KAAK,CAACF;SACnB,GACD;eACOE,OAAO,KAAK,CAAC,GAAGF;YACnBE,MAAM,CAACH,OAAO;eACXG,OAAO,KAAK,CAACF,aAAaD;eAC1BG,OAAO,KAAK,CAACH,SAAS;SAC5B"}

package/admin/components/IconPicker.d.ts

@@ -1,7 +1,3 @@
 import React from "react";
-import { FormComponentProps } from "@webiny/ui/types";
-export interface IconPickerProps extends FormComponentProps {
-    label?: React.ReactNode;
-    description?: React.ReactNode;
-}
-export declare const IconPicker: React.FC<IconPickerProps>;
+import type { IconPickerProps } from "@webiny/admin-ui";
+export declare const IconPicker: (props: Omit<IconPickerProps, "icons">) => React.JSX.Element;

package/admin/components/IconPicker.js

@@ -1,213 +1,30 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IconPicker = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _emotion = require("emotion");
-var _plugins = require("@webiny/plugins");
-var _Typography = require("@webiny/ui/Typography");
-var _reactVirtualized = require("react-virtualized");
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
-var _DelayedOnChange = _interopRequireDefault(require("./DelayedOnChange"));
-var _Menu = require("@webiny/ui/Menu");
-var _Input = require("@webiny/ui/Input");
-var _FormElementMessage = require("@webiny/ui/FormElementMessage");
-/**
- * Controls the helper text below the checkbox.
- * @type {string}
- */
-var iconPickerLabel = /*#__PURE__*/(0, _emotion.css)({
-  marginBottom: 5,
-  marginLeft: 2
-}, "label:iconPickerLabel;");
-var MenuWrapper = /*#__PURE__*/(0, _emotion.css)("color:var(--mdc-theme-text-secondary-on-background);background-color:var(--mdc-theme-on-background);border-bottom:1px solid var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,0.54));padding:16px 8px;cursor:pointer;:hover{border-bottom:1px solid rgba(0,0,0,1);}label:MenuWrapper;");
-var NoResultWrapper = /*#__PURE__*/(0, _emotion.css)({
-  width: 640,
-  color: "var(--mdc-theme-text-secondary-on-background)",
-  padding: "16px 12px"
-}, "label:NoResultWrapper;");
-var COLUMN_COUNT = 6;
-var gridItem = /*#__PURE__*/(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
-  }
-}, "label:gridItem;");
-var grid = /*#__PURE__*/(0, _emotion.css)({
-  padding: 20
-}, "label:grid;");
-var pickIcon = /*#__PURE__*/(0, _emotion.css)({
-  width: 50,
-  textAlign: "center",
-  cursor: "pointer"
-}, "label:pickIcon;");
-var searchInput = /*#__PURE__*/(0, _emotion.css)({
-  input: {
-    padding: "20px 12px 20px"
-  }
-}, "label:searchInput;");
-var useState = _react.default.useState,
-  useCallback = _react.default.useCallback,
-  useMemo = _react.default.useMemo;
-var IconPicker = function IconPicker(_ref) {
-  var value = _ref.value,
-    onChange = _ref.onChange,
-    label = _ref.label,
-    description = _ref.description,
-    validation = _ref.validation;
-  var _useState = useState(""),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    filter = _useState2[0],
-    setFilter = _useState2[1];
-  var _useState3 = 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 = useCallback(function (value, cb) {
-    setFilter(value);
-    cb();
-  }, [filter]);
-  var allIcons = useMemo(function () {
-    var iconPlugins = _plugins.plugins.byType("cms-icons");
-    return iconPlugins.reduce(function (icons, pl) {
-      return icons.concat(pl.getIcons());
+import react, { useMemo } from "react";
+import { IconPicker } from "@webiny/admin-ui";
+import { plugins } from "@webiny/plugins";
+const IconPicker_IconPicker = (props)=>{
+    const icons = useMemo(()=>{
+        const iconPlugins = plugins.byType("cms-icons");
+        return iconPlugins.reduce((icons, pl)=>icons.concat(pl.getIcons()), []);
     }, []);
-  }, []);
-  var icons = useMemo(function () {
-    return filter ? allIcons.filter(function (ic) {
-      return ic.name.includes(filter);
-    }) : allIcons;
-  }, [filter]);
-  var renderCell = 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;
-      }
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: key,
-        style: style,
-        className: gridItem,
-        onClick: function onClick() {
-          if (onChange) {
-            onChange(item.id.join("/"));
-          }
-          closeMenu();
+    const onChange = (value)=>{
+        if (props.onChange) {
+            if (!value) return void props.onChange(null);
+            props.onChange({
+                type: "icon",
+                name: value
+            });
         }
-      }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-        icon: item.id,
-        size: "2x"
-      }), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-        use: "body2"
-      }, item.name));
     };
-  }, [icons]);
-  var renderGrid = useCallback(function (_ref4) {
-    var closeMenu = _ref4.closeMenu;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DelayedOnChange.default, {
-      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,
+    let value = null;
+    if (props.value) value = "string" == typeof props.value ? props.value : props.value.name;
+    return /*#__PURE__*/ react.createElement(IconPicker, {
+        size: "lg",
+        icons: icons,
+        ...props,
         onChange: onChange,
-        placeholder: "Search icons..."
-      });
-    }), 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);
-    },
-    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"
-    })))
-  }, mustRenderGrid && renderGrid), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-    error: true
-  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+        value: value
+    });
 };
-exports.IconPicker = IconPicker;
+export { IconPicker_IconPicker as IconPicker };
+
+//# sourceMappingURL=IconPicker.js.map

package/admin/components/IconPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconPickerLabel","css","marginBottom","marginLeft","MenuWrapper","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","useState","React","useCallback","useMemo","IconPicker","value","onChange","label","description","validation","filter","setFilter","mustRenderGrid","setMustRenderGrid","inputRef","useRef","useEffect","setTimeout","current","focus","onFilterChange","cb","allIcons","iconPlugins","plugins","byType","reduce","icons","pl","concat","getIcons","ic","name","includes","renderCell","closeMenu","columnIndex","key","rowIndex","style","item","id","join","renderGrid","length","Math","ceil","fontAwesomeIconValue","split","validationIsValid","isValid","validationMessage","message"],"sources":["IconPicker.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { css } from \"emotion\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Grid } from \"react-virtualized\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport DelayedOnChange from \"./DelayedOnChange\";\nimport { Menu } 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 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\nconst { useState, useCallback, useMemo } = React;\n\nexport interface IconPickerProps extends FormComponentProps {\n    label?: React.ReactNode;\n    description?: React.ReactNode;\n}\n\nexport const IconPicker: React.FC<IconPickerProps> = ({\n    value,\n    onChange,\n    label,\n    description,\n    validation\n}) => {\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(\n        (value, cb) => {\n            setFilter(value);\n            cb();\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 }) => {\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(\n        ({ closeMenu }) => {\n            return (\n                <>\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                handle={\n                    <div className={MenuWrapper}>\n                        <div className={pickIcon}>\n                            <FontAwesomeIcon icon={fontAwesomeIconValue} size={\"2x\"} />\n                        </div>\n                    </div>\n                }\n            >\n                {mustRenderGrid && renderGrid}\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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"}
+{"version":3,"file":"admin/components/IconPicker.js","sources":["../../../src/admin/components/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"],"names":["IconPicker","props","icons","useMemo","iconPlugins","plugins","pl","onChange","value","AdminIconPicker"],"mappings":";;;AAMO,MAAMA,wBAAa,CAACC;IACvB,MAAMC,QAA6BC,QAAQ;QACvC,MAAMC,cAAcC,QAAQ,MAAM,CAAiB;QACnD,OAAOD,YAAY,MAAM,CAAC,CAACF,OAAiCI,KACjDJ,MAAM,MAAM,CAACI,GAAG,QAAQ,KAChC,EAAE;IACT,GAAG,EAAE;IAEL,MAAMC,WAAW,CAACC;QACd,IAAIP,MAAM,QAAQ,EAAE;YAChB,IAAI,CAACO,OAAO,YACRP,MAAM,QAAQ,CAAC;YAInBA,MAAM,QAAQ,CAAC;gBACX,MAAM;gBACN,MAAMO;YACV;QACJ;IACJ;IAEA,IAAIA,QAAQ;IACZ,IAAIP,MAAM,KAAK,EAEPO,QADA,AAAuB,YAAvB,OAAOP,MAAM,KAAK,GACVA,MAAM,KAAK,GAEXA,MAAM,KAAK,CAAC,IAAI;IAIhC,OAAO,WAAP,GACI,oBAACQ,YAAeA;QAAC,MAAM;QAAM,OAAOP;QAAQ,GAAGD,KAAK;QAAE,UAAUM;QAAU,OAAOC;;AAEzF"}

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,9 @@
+import react from "react";
+import { useIsModelPublishable } from "../hooks/useIsModelPublishable.js";
+const IsModelPublishable = (props)=>{
+    const isPublishable = useIsModelPublishable();
+    return isPublishable ? /*#__PURE__*/ react.createElement(react.Fragment, null, props.children) : null;
+};
+export { IsModelPublishable };
+
+//# sourceMappingURL=IsModelPublishable.js.map

package/admin/components/IsModelPublishable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/IsModelPublishable.js","sources":["../../../src/admin/components/IsModelPublishable.tsx"],"sourcesContent":["import React from \"react\";\nimport { useIsModelPublishable } from \"~/admin/hooks/useIsModelPublishable.js\";\n\nexport interface IsPublishableProps {\n    children: React.ReactNode;\n}\n\nexport const IsModelPublishable = (props: IsPublishableProps) => {\n    const isPublishable = useIsModelPublishable();\n\n    return isPublishable ? <>{props.children}</> : null;\n};\n"],"names":["IsModelPublishable","props","isPublishable","useIsModelPublishable"],"mappings":";;AAOO,MAAMA,qBAAqB,CAACC;IAC/B,MAAMC,gBAAgBC;IAEtB,OAAOD,gBAAgB,WAAhBA,GAAgB,0CAAGD,MAAM,QAAQ,IAAO;AACnD"}

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { LexicalEditor as BaseLexicalEditor } from "@webiny/app-admin";
+export type LexicalEditorProps = Omit<BaseLexicalEditor.Props, "theme">;
+export declare const LexicalEditor: (props: LexicalEditorProps) => React.JSX.Element;

package/admin/components/LexicalCmsEditor/LexicalEditor.js

@@ -0,0 +1,38 @@
+import react from "react";
+import { StaticToolbar } from "@webiny/lexical-editor";
+import { LexicalEditor } from "@webiny/app-admin";
+const placeholderStyles = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    padding: "8px 12px",
+    marginTop: 0,
+    color: "var(--text-color-neutral-muted)"
+};
+const contentEditableStyles = {
+    minHeight: 200,
+    display: "block",
+    padding: "8px 12px"
+};
+const styles = {
+    backgroundColor: "var(--color-neutral-base)",
+    border: "1px solid var(--border-color-neutral-muted)",
+    borderTop: "none",
+    borderRadius: "0 0 var(--radius-md) var(--radius-md)",
+    minHeight: 200,
+    maxHeight: 350
+};
+const toolbar = /*#__PURE__*/ react.createElement(StaticToolbar, null);
+const LexicalEditor_LexicalEditor = (props)=>/*#__PURE__*/ react.createElement(LexicalEditor, {
+        ...props,
+        focus: true,
+        staticToolbar: toolbar,
+        tag: "p",
+        placeholder: props?.placeholder || "Enter your text here...",
+        placeholderStyles: placeholderStyles,
+        contentEditableStyles: contentEditableStyles,
+        styles: styles
+    });
+export { LexicalEditor_LexicalEditor as LexicalEditor };
+
+//# sourceMappingURL=LexicalEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/LexicalCmsEditor/LexicalEditor.js","sources":["../../../../src/admin/components/LexicalCmsEditor/LexicalEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { StaticToolbar } from \"@webiny/lexical-editor\";\nimport { LexicalEditor as BaseLexicalEditor } from \"@webiny/app-admin\";\n\n// Overlay the contentEditable: same origin + same padding as `contentEditableStyles`, and\n// neutralize the Placeholder component's default -20px margin. This makes the placeholder's\n// first line land exactly on the editor's text start.\nconst placeholderStyles: React.CSSProperties = {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    padding: \"8px 12px\",\n    marginTop: 0,\n    // Font size/family come from the paragraph typography class (applied by RichTextEditor);\n    // keep the placeholder muted.\n    color: \"var(--text-color-neutral-muted)\"\n};\n\nconst contentEditableStyles: React.CSSProperties = {\n    minHeight: 200,\n    display: \"block\",\n    padding: \"8px 12px\"\n};\n\nconst styles: React.CSSProperties = {\n    backgroundColor: \"var(--color-neutral-base)\",\n    border: \"1px solid var(--border-color-neutral-muted)\",\n    // The static toolbar sits directly above and carries the top border, so the body\n    // drops its top border and rounds only the bottom corners — together one seamless\n    // rounded container, no internal divider (matches Figma).\n    borderTop: \"none\",\n    borderRadius: \"0 0 var(--radius-md) var(--radius-md)\",\n    // Padding lives on the contentEditable only (avoids doubled inset).\n    minHeight: 200,\n    maxHeight: 350\n};\n\nconst toolbar = <StaticToolbar />;\n\nexport type LexicalEditorProps = Omit<BaseLexicalEditor.Props, \"theme\">;\n\nexport const LexicalEditor = (props: LexicalEditorProps) => {\n    return (\n        <BaseLexicalEditor\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"],"names":["placeholderStyles","contentEditableStyles","styles","toolbar","StaticToolbar","LexicalEditor","props","BaseLexicalEditor"],"mappings":";;;AAOA,MAAMA,oBAAyC;IAC3C,UAAU;IACV,KAAK;IACL,MAAM;IACN,SAAS;IACT,WAAW;IAGX,OAAO;AACX;AAEA,MAAMC,wBAA6C;IAC/C,WAAW;IACX,SAAS;IACT,SAAS;AACb;AAEA,MAAMC,SAA8B;IAChC,iBAAiB;IACjB,QAAQ;IAIR,WAAW;IACX,cAAc;IAEd,WAAW;IACX,WAAW;AACf;AAEA,MAAMC,UAAU,WAAHA,GAAG,oBAACC,eAAaA;AAIvB,MAAMC,8BAAgB,CAACC,QACnB,WAAP,GACI,oBAACC,eAAiBA;QACb,GAAGD,KAAK;QACT,OAAO;QACP,eAAeH;QACf,KAAK;QACL,aAAaG,OAAO,eAAe;QACnC,mBAAmBN;QACnB,uBAAuBC;QACvB,QAAQC"}

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

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

package/admin/components/LexicalCmsEditor/LexicalEditorCmsPlugin.js

@@ -0,0 +1,85 @@
+import react from "react";
+import { BoldAction, BulletListAction, CodeHighlightAction, CodeHighlightPlugin, Divider, FontColorAction, FontColorPlugin, ImageAction, ImagesPlugin, ItalicAction, LexicalEditorConfig, LinkAction, LinkPlugin, ListPlugin, NumberedListAction, QuoteAction, QuotePlugin, TextAlignmentAction, TypographyAction, TypographyPlugin, UnderlineAction } from "@webiny/lexical-editor";
+import { TypographyDropDown } from "./TypographyDropDown.js";
+import { CompositionScope } from "@webiny/react-composition";
+const { ToolbarElement: ToolbarElement, Plugin: Plugin } = LexicalEditorConfig;
+const LexicalEditorCmsPlugin = ()=>/*#__PURE__*/ react.createElement(CompositionScope, {
+        name: "cms",
+        inherit: true
+    }, /*#__PURE__*/ react.createElement(LexicalEditorConfig, {
+        priority: "primary"
+    }, /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "fontColor",
+        element: /*#__PURE__*/ react.createElement(FontColorAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "typography",
+        element: /*#__PURE__*/ react.createElement(TypographyAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "textAlignment",
+        element: /*#__PURE__*/ react.createElement(TextAlignmentAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "divider1",
+        element: /*#__PURE__*/ react.createElement(Divider, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "boldAction",
+        element: /*#__PURE__*/ react.createElement(BoldAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "italic",
+        element: /*#__PURE__*/ react.createElement(ItalicAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "underline",
+        element: /*#__PURE__*/ react.createElement(UnderlineAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "codeHighlight",
+        element: /*#__PURE__*/ react.createElement(CodeHighlightAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "divider2",
+        element: /*#__PURE__*/ react.createElement(Divider, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "numberedList",
+        element: /*#__PURE__*/ react.createElement(NumberedListAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "bulletList",
+        element: /*#__PURE__*/ react.createElement(BulletListAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "divider",
+        element: /*#__PURE__*/ react.createElement(Divider, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "image",
+        element: /*#__PURE__*/ react.createElement(ImageAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "divider3",
+        element: /*#__PURE__*/ react.createElement(Divider, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "link",
+        element: /*#__PURE__*/ react.createElement(LinkAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "quote",
+        element: /*#__PURE__*/ react.createElement(QuoteAction, null)
+    }), /*#__PURE__*/ react.createElement(Plugin, {
+        name: "fontColor",
+        element: /*#__PURE__*/ react.createElement(FontColorPlugin, null)
+    }), /*#__PURE__*/ react.createElement(Plugin, {
+        name: "list",
+        element: /*#__PURE__*/ react.createElement(ListPlugin, null)
+    }), /*#__PURE__*/ react.createElement(Plugin, {
+        name: "codeHighlight",
+        element: /*#__PURE__*/ react.createElement(CodeHighlightPlugin, null)
+    }), /*#__PURE__*/ react.createElement(Plugin, {
+        name: "typography",
+        element: /*#__PURE__*/ react.createElement(TypographyPlugin, null)
+    }), /*#__PURE__*/ react.createElement(Plugin, {
+        name: "link",
+        element: /*#__PURE__*/ react.createElement(LinkPlugin, null)
+    }), /*#__PURE__*/ react.createElement(Plugin, {
+        name: "images",
+        element: /*#__PURE__*/ react.createElement(ImagesPlugin, null)
+    }), /*#__PURE__*/ react.createElement(Plugin, {
+        name: "quote",
+        element: /*#__PURE__*/ react.createElement(QuotePlugin, null)
+    }), /*#__PURE__*/ react.createElement(TypographyAction.TypographyDropDown, {
+        element: /*#__PURE__*/ react.createElement(TypographyDropDown, null)
+    })));
+export { LexicalEditorCmsPlugin };
+
+//# sourceMappingURL=LexicalEditorCmsPlugin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/LexicalCmsEditor/LexicalEditorCmsPlugin.js","sources":["../../../../src/admin/components/LexicalCmsEditor/LexicalEditorCmsPlugin.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport {\n    TypographyAction,\n    LexicalEditorConfig,\n    FontColorAction,\n    Divider,\n    BoldAction,\n    ItalicAction,\n    UnderlineAction,\n    CodeHighlightAction,\n    NumberedListAction,\n    BulletListAction,\n    ImageAction,\n    LinkAction,\n    QuoteAction,\n    ImagesPlugin,\n    QuotePlugin,\n    CodeHighlightPlugin,\n    LinkPlugin,\n    ListPlugin,\n    TypographyPlugin,\n    FontColorPlugin,\n    TextAlignmentAction\n} from \"@webiny/lexical-editor\";\nimport { TypographyDropDown } from \"~/admin/components/LexicalCmsEditor/TypographyDropDown.js\";\nimport { CompositionScope } from \"@webiny/react-composition\";\n\nconst { ToolbarElement, Plugin } = LexicalEditorConfig;\n\nexport const LexicalEditorCmsPlugin: FC = () => {\n    return (\n        <CompositionScope name={\"cms\"} inherit={true}>\n            <LexicalEditorConfig priority={\"primary\"}>\n                <ToolbarElement name=\"fontColor\" element={<FontColorAction />} />\n                <ToolbarElement name=\"typography\" element={<TypographyAction />} />\n                <ToolbarElement name=\"textAlignment\" element={<TextAlignmentAction />} />\n                <ToolbarElement name=\"divider1\" element={<Divider />} />\n                <ToolbarElement name=\"boldAction\" element={<BoldAction />} />\n                <ToolbarElement name=\"italic\" element={<ItalicAction />} />\n                <ToolbarElement name=\"underline\" element={<UnderlineAction />} />\n                <ToolbarElement name=\"codeHighlight\" element={<CodeHighlightAction />} />\n                <ToolbarElement name=\"divider2\" element={<Divider />} />\n                <ToolbarElement name=\"numberedList\" element={<NumberedListAction />} />\n                <ToolbarElement name=\"bulletList\" element={<BulletListAction />} />\n                <ToolbarElement name=\"divider\" element={<Divider />} />\n                <ToolbarElement name=\"image\" element={<ImageAction />} />\n                <ToolbarElement name=\"divider3\" element={<Divider />} />\n                <ToolbarElement name=\"link\" element={<LinkAction />} />\n                <ToolbarElement name=\"quote\" element={<QuoteAction />} />\n                <Plugin name={\"fontColor\"} element={<FontColorPlugin />} />\n                <Plugin name={\"list\"} element={<ListPlugin />} />\n                <Plugin name={\"codeHighlight\"} element={<CodeHighlightPlugin />} />\n                <Plugin name={\"typography\"} element={<TypographyPlugin />} />\n                <Plugin name={\"link\"} element={<LinkPlugin />} />\n                <Plugin name={\"images\"} element={<ImagesPlugin />} />\n                <Plugin name={\"quote\"} element={<QuotePlugin />} />\n                <TypographyAction.TypographyDropDown element={<TypographyDropDown />} />\n            </LexicalEditorConfig>\n        </CompositionScope>\n    );\n};\n"],"names":["ToolbarElement","Plugin","LexicalEditorConfig","LexicalEditorCmsPlugin","CompositionScope","FontColorAction","TypographyAction","TextAlignmentAction","Divider","BoldAction","ItalicAction","UnderlineAction","CodeHighlightAction","NumberedListAction","BulletListAction","ImageAction","LinkAction","QuoteAction","FontColorPlugin","ListPlugin","CodeHighlightPlugin","TypographyPlugin","LinkPlugin","ImagesPlugin","QuotePlugin","TypographyDropDown"],"mappings":";;;;AA4BA,MAAM,EAAEA,gBAAAA,cAAc,EAAEC,QAAAA,MAAM,EAAE,GAAGC;AAE5B,MAAMC,yBAA6B,IAC/B,WAAP,GACI,oBAACC,kBAAgBA;QAAC,MAAM;QAAO,SAAS;qBACpC,oBAACF,qBAAmBA;QAAC,UAAU;qBAC3B,oBAACF,gBAAcA;QAAC,MAAK;QAAY,uBAAS,oBAACK,iBAAeA;sBAC1D,oBAACL,gBAAcA;QAAC,MAAK;QAAa,uBAAS,oBAACM,kBAAgBA;sBAC5D,oBAACN,gBAAcA;QAAC,MAAK;QAAgB,uBAAS,oBAACO,qBAAmBA;sBAClE,oBAACP,gBAAcA;QAAC,MAAK;QAAW,uBAAS,oBAACQ,SAAOA;sBACjD,oBAACR,gBAAcA;QAAC,MAAK;QAAa,uBAAS,oBAACS,YAAUA;sBACtD,oBAACT,gBAAcA;QAAC,MAAK;QAAS,uBAAS,oBAACU,cAAYA;sBACpD,oBAACV,gBAAcA;QAAC,MAAK;QAAY,uBAAS,oBAACW,iBAAeA;sBAC1D,oBAACX,gBAAcA;QAAC,MAAK;QAAgB,uBAAS,oBAACY,qBAAmBA;sBAClE,oBAACZ,gBAAcA;QAAC,MAAK;QAAW,uBAAS,oBAACQ,SAAOA;sBACjD,oBAACR,gBAAcA;QAAC,MAAK;QAAe,uBAAS,oBAACa,oBAAkBA;sBAChE,oBAACb,gBAAcA;QAAC,MAAK;QAAa,uBAAS,oBAACc,kBAAgBA;sBAC5D,oBAACd,gBAAcA;QAAC,MAAK;QAAU,uBAAS,oBAACQ,SAAOA;sBAChD,oBAACR,gBAAcA;QAAC,MAAK;QAAQ,uBAAS,oBAACe,aAAWA;sBAClD,oBAACf,gBAAcA;QAAC,MAAK;QAAW,uBAAS,oBAACQ,SAAOA;sBACjD,oBAACR,gBAAcA;QAAC,MAAK;QAAO,uBAAS,oBAACgB,YAAUA;sBAChD,oBAAChB,gBAAcA;QAAC,MAAK;QAAQ,uBAAS,oBAACiB,aAAWA;sBAClD,oBAAChB,QAAMA;QAAC,MAAM;QAAa,uBAAS,oBAACiB,iBAAeA;sBACpD,oBAACjB,QAAMA;QAAC,MAAM;QAAQ,uBAAS,oBAACkB,YAAUA;sBAC1C,oBAAClB,QAAMA;QAAC,MAAM;QAAiB,uBAAS,oBAACmB,qBAAmBA;sBAC5D,oBAACnB,QAAMA;QAAC,MAAM;QAAc,uBAAS,oBAACoB,kBAAgBA;sBACtD,oBAACpB,QAAMA;QAAC,MAAM;QAAQ,uBAAS,oBAACqB,YAAUA;sBAC1C,oBAACrB,QAAMA;QAAC,MAAM;QAAU,uBAAS,oBAACsB,cAAYA;sBAC9C,oBAACtB,QAAMA;QAAC,MAAM;QAAS,uBAAS,oBAACuB,aAAWA;sBAC5C,oBAAClB,iBAAiB,kBAAkB;QAAC,uBAAS,oBAACmB,oBAAkBA"}

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

@@ -0,0 +1,8 @@
+import React from "react";
+export type TypographyStyle = {
+    id: string;
+    label: string;
+    tag: string;
+    className: string;
+};
+export declare const TypographyDropDown: () => React.JSX.Element;

package/admin/components/LexicalCmsEditor/TypographyDropDown.js

@@ -0,0 +1,61 @@
+import react, { useEffect, useState } from "react";
+import { $getNearestNodeOfType } from "@lexical/utils";
+import { DropDown, DropDownItem, useCurrentElement, useCurrentSelection, useTypographyAction } from "@webiny/lexical-editor";
+import { $isHeadingNode, $isListNode, $isParagraphNode, $isQuoteNode, ListNode } from "@webiny/lexical-nodes";
+import { useAdminConfig } from "@webiny/app-admin";
+const TypographyDropDown = ()=>{
+    const { value, applyTypography } = useTypographyAction();
+    const { lexicalTheme } = useAdminConfig();
+    const [styles, setStyles] = useState([]);
+    const { element } = useCurrentElement();
+    const { rangeSelection } = useCurrentSelection();
+    const getAllTextStyles = ()=>{
+        const headingsStyles = lexicalTheme.typography.headings || [];
+        const paragraphStyles = lexicalTheme.typography.paragraphs || [];
+        return [
+            ...headingsStyles,
+            ...paragraphStyles
+        ];
+    };
+    const getListStyles = (tag)=>{
+        const listStyles = lexicalTheme.typography.lists?.filter((x)=>x.tag === tag) || [];
+        if (listStyles.length > 0) return listStyles;
+        const fallbackTag = "ul" === tag ? "ol" : "ul";
+        return lexicalTheme.typography.lists?.filter((x)=>x.tag === fallbackTag) || [];
+    };
+    useEffect(()=>{
+        if (!element || !rangeSelection) return;
+        if ($isParagraphNode(element) || $isHeadingNode(element)) setStyles(getAllTextStyles());
+        else if ($isListNode(element)) {
+            let type;
+            try {
+                const anchorNode = rangeSelection.anchor.getNode();
+                const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+                if (parentList) type = parentList.getListType();
+            } catch  {
+                type = element.getListType();
+            }
+            "bullet" === type ? setStyles(getListStyles("ul")) : setStyles(getListStyles("ol"));
+        } else $isQuoteNode(element) ? setStyles(lexicalTheme.typography.quotes || []) : setStyles([]);
+    }, [
+        element
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, styles?.length ? /*#__PURE__*/ react.createElement(DropDown, {
+        buttonClassName: "toolbar-item typography-dropdown block-type-dropdown",
+        buttonAriaLabel: "Typography formatting options",
+        buttonLabel: value?.label || "Typography",
+        stopCloseOnClickSelf: true,
+        disabled: false,
+        showScroll: true
+    }, styles?.map((option)=>/*#__PURE__*/ react.createElement(DropDownItem, {
+            className: "item typography-item",
+            selected: value?.id === option.id,
+            onClick: ()=>applyTypography(option),
+            key: option.id
+        }, /*#__PURE__*/ react.createElement("span", {
+            className: "text"
+        }, option.label)))) : null);
+};
+export { TypographyDropDown };
+
+//# sourceMappingURL=TypographyDropDown.js.map