@it-consultis/page-builder 1.1.34

package/controls/PaddingMarginControl/PaddingMarginForm.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+var _PaddingMarginControl = require("./PaddingMarginControl");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function PaddingMarginForm({
+  label = 'Margin & Padding',
+  current,
+  onChange
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "margin-container",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+      style: {
+        paddingBottom: 8
+      },
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        position: 'relative',
+        border: '1px solid #ccc',
+        padding: '40px 64px',
+        background: '#e2e8f0'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          height: 80,
+          border: '1px dashed #ccc',
+          background: 'white'
+        }
+      }), _PaddingMarginControl.paddingMarginKeys.map(key => {
+        const style = {};
+        if (key === 'marginTop') {
+          style.background = 'white';
+          style.left = '50%';
+          style.top = '4px';
+          style.transform = 'translateX(-50%)';
+        }
+        if (key === 'marginBottom') {
+          style.background = 'white';
+          style.left = '50%';
+          style.bottom = '4px';
+          style.transform = 'translateX(-50%)';
+        }
+        if (key === 'marginLeft') {
+          style.background = 'white';
+          style.left = '4px';
+          style.top = '50%';
+          style.transform = 'translateY(-50%)';
+        }
+        if (key === 'marginRight') {
+          style.background = 'white';
+          style.right = '4px';
+          style.top = '50%';
+          style.transform = 'translateY(-50%)';
+        }
+        if (key === 'paddingTop') {
+          style.background = '#f8fafc';
+          style.left = '50%';
+          style.top = '40px';
+          style.transform = 'translateX(-50%)';
+        }
+        if (key === 'paddingBottom') {
+          style.background = '#f8fafc';
+          style.left = '50%';
+          style.bottom = '40px';
+          style.transform = 'translateX(-50%)';
+        }
+        if (key === 'paddingLeft') {
+          style.background = '#f8fafc';
+          style.left = '64px';
+          style.top = '50%';
+          style.transform = 'translateY(-50%)';
+        }
+        if (key === 'paddingRight') {
+          style.background = '#f8fafc';
+          style.right = '64px';
+          style.top = '50%';
+          style.transform = 'translateY(-50%)';
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+            style: {
+              position: 'absolute',
+              width: '48px',
+              padding: '4px 0',
+              border: '1px solid #ccc',
+              ...style
+            },
+            className: (0, _clsx.default)(`input-${key.toLowerCase()}`),
+            defaultValue: current?.[key] || 0,
+            onChange: e => {
+              onChange(key, e.target.value);
+            }
+          })
+        }, key);
+      })]
+    })]
+  });
+}
+var _default = exports.default = PaddingMarginForm;

package/controls/PaddingMarginControl/index.d.ts

@@ -0,0 +1,4 @@
+import PaddingMarginControl from './PaddingMarginControl';
+export type { Margin, MarginKey, MarginPaddingState, Padding, PaddingKey } from './PaddingMarginControl';
+export { defaultPaddingMargin } from './PaddingMarginControl';
+export default PaddingMarginControl;

package/controls/PaddingMarginControl/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "defaultPaddingMargin", {
+  enumerable: true,
+  get: function () {
+    return _PaddingMarginControl.defaultPaddingMargin;
+  }
+});
+var _PaddingMarginControl = _interopRequireWildcard(require("./PaddingMarginControl"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _default = exports.default = _PaddingMarginControl.default;

package/controls/PaddingMarginControl/utils.d.ts

@@ -0,0 +1,3 @@
+import { Margin, Padding } from './PaddingMarginControl';
+export declare const getMarginValue: (value: Padding & Margin) => string;
+export declare const getPaddingValue: (value: Padding & Margin) => string;

package/controls/PaddingMarginControl/utils.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPaddingValue = exports.getMarginValue = void 0;
+var _helpers = require("../../utils/helpers");
+const getMarginValue = value => {
+  const margin = (0, _helpers.pick)(value, ['marginTop', 'marginRight', 'marginBottom', 'marginLeft']);
+  return `${margin.marginTop}
+  ${margin.marginRight} ${margin.marginBottom}
+  ${margin.marginLeft}`;
+};
+exports.getMarginValue = getMarginValue;
+const getPaddingValue = value => {
+  const padding = (0, _helpers.pick)(value, ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft']);
+  return `${padding.paddingTop}
+  ${padding.paddingRight} ${padding.paddingBottom}
+  ${padding.paddingLeft}`;
+};
+exports.getPaddingValue = getPaddingValue;

package/controls/SelectableControl/SelectableControl.d.ts

@@ -0,0 +1,5 @@
+export type Selectable = 'auto' | 'none';
+export default function SelectableControl({ current, onChange }: {
+    current: Selectable;
+    onChange: (newSelectable: Selectable) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/controls/SelectableControl/SelectableControl.js

@@ -0,0 +1,35 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SelectableControl;
+var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function SelectableControl({
+  current,
+  onChange
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 10
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: {
+        fontWeight: 'bold',
+        textTransform: 'uppercase'
+      },
+      children: "Content Selectable"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, {
+      checked: current === 'auto',
+      onChange: ev => {
+        onChange(ev.target.checked ? 'auto' : 'none');
+      }
+    })]
+  });
+}

package/controls/SelectableControl/index.d.ts

@@ -0,0 +1,3 @@
+import SelectableControl from './SelectableControl';
+export type { Selectable } from './SelectableControl';
+export default SelectableControl;

package/controls/SelectableControl/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _SelectableControl = _interopRequireDefault(require("./SelectableControl"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _SelectableControl.default;

package/hooks/ui-optimizations/useDebounce.d.ts

@@ -0,0 +1,3 @@
+import type { WrapFunction } from '../../types';
+declare const useDebounce: WrapFunction<(...args: any[]) => void>;
+export default useDebounce;

package/hooks/ui-optimizations/useDebounce.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const useDebounce = (fn, delay = 300) => {
+  const timer = (0, _react.useRef)(null);
+  const fnRef = (0, _react.useRef)(fn);
+  (0, _react.useEffect)(() => {
+    fnRef.current = fn;
+  }, [fn]);
+  return (0, _react.useCallback)((...args) => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    timer.current = setTimeout(() => {
+      fnRef.current(...args);
+    }, delay);
+  }, [delay]);
+};
+var _default = exports.default = useDebounce;

package/hooks/ui-optimizations/useThrottle.d.ts

@@ -0,0 +1,3 @@
+import type { WrapFunction } from '../../types';
+declare const useThrottle: WrapFunction<(...args: any[]) => void>;
+export default useThrottle;

package/hooks/ui-optimizations/useThrottle.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const useThrottle = (fn, delay = 300) => {
+  const lastCall = (0, _react.useRef)(0);
+  const fnRef = (0, _react.useRef)(fn);
+  (0, _react.useEffect)(() => {
+    fnRef.current = fn;
+  }, [fn]);
+  return (0, _react.useCallback)((...args) => {
+    const now = Date.now();
+    if (now - lastCall.current >= delay) {
+      lastCall.current = now;
+      fnRef.current(...args);
+    }
+  }, [delay]);
+};
+var _default = exports.default = useThrottle;

package/hooks/useMediaImageQuery.d.ts

@@ -0,0 +1,10 @@
+import { MediaItem } from '../controls/MediaLibraryControl';
+declare const useMediaImageQuery: ({ data, width, fill }: {
+    data: MediaItem;
+    width?: number | undefined;
+    fill: boolean;
+}) => import("@tanstack/react-query").UseQueryResult<{
+    original: string | undefined;
+    thumbnails: [number, string][];
+}, unknown>;
+export default useMediaImageQuery;

package/hooks/useMediaImageQuery.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactQuery = require("@tanstack/react-query");
+var _store = require("../store");
+const deviceSizes = [375, 640, 750, 828, 1080, 1200, 1920, 2048, 3840];
+const imgSizes = [16, 32, 64, 128, 144, 192, 256, 320];
+const useMediaImageQuery = ({
+  data,
+  width,
+  fill
+}) => {
+  const storage = (0, _store.useObjectStorage)();
+  return (0, _reactQuery.useQuery)({
+    queryKey: ['MediaImage', data?.key, width, fill],
+    async queryFn() {
+      if (!data?.key) return {
+        original: '',
+        thumbnails: []
+      };
+      const allSizes = [...imgSizes, ...deviceSizes].filter((size, i, array) => {
+        if (fill) {
+          return deviceSizes.includes(size);
+        }
+        if (size <= (width ?? 0)) {
+          return true;
+        }
+        const prevSize = i === 0 ? 0 : array[i - 1];
+        return prevSize < (width ?? 0);
+      });
+      const thumbnailsPromises = allSizes.map(async size => {
+        const url = await storage?.imagePreviewUrl({
+          key: data.key,
+          width: size
+        });
+        return [size, url];
+      });
+      const [original, thumbnails] = await Promise.all([storage?.objectUrl({
+        key: data.key
+      }), Promise.all(thumbnailsPromises)]);
+      return {
+        original,
+        thumbnails: thumbnails.sort((a, b) => a[0] > b[0] ? 1 : -1)
+      };
+    }
+  });
+};
+var _default = exports.default = useMediaImageQuery;

package/hooks/useSortable.d.ts

@@ -0,0 +1,20 @@
+import type TSortable from 'sortablejs';
+import { SortableEvent, SortableOptions as BaseSortableOptions } from 'sortablejs';
+type SortableOptions = Omit<BaseSortableOptions, 'onStart' | 'onEnd' | 'onAdd' | 'onClone' | 'onChoose' | 'onUnchoose' | 'onUpdate' | 'onSort' | 'onRemove' | 'onFilter' | 'onChange'> & {
+    onStart?: ((event: SortableEvent, instance: TSortable) => void) | undefined;
+    onEnd?: ((event: SortableEvent, instance: TSortable) => void) | undefined;
+    onAdd?: ((event: SortableEvent, instance: TSortable) => void) | undefined;
+    onClone?: ((event: SortableEvent, instance: TSortable) => void) | undefined;
+    onChoose?: ((event: SortableEvent, instance: TSortable) => void) | undefined;
+    onUnchoose?: ((event: SortableEvent, instance: TSortable) => void) | undefined;
+    onUpdate?: ((event: SortableEvent, instance: TSortable) => void) | undefined;
+    onSort?: ((event: SortableEvent, instance: TSortable) => void) | undefined;
+    onRemove?: ((event: SortableEvent, instance: TSortable) => void) | undefined;
+    onFilter?: ((event: SortableEvent, instance: TSortable) => void) | undefined;
+    onChange?: ((evt: SortableEvent) => void) | undefined;
+};
+declare const useSortable: (options: SortableOptions) => {
+    containerRef(node: HTMLElement | null): void;
+    getInstance(): TSortable | null;
+};
+export default useSortable;

package/hooks/useSortable.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useSortable = options => {
+  const {
+    disabled
+  } = options;
+  const sortableRef = (0, _react.useRef)(null);
+  const [container, setContainer] = (0, _react.useState)(null);
+  const containerRef = (0, _react.useRef)(container);
+  containerRef.current = container;
+  const optionsRef = (0, _react.useRef)(options);
+  (0, _react.useEffect)(() => {
+    if (disabled || !container || sortableRef.current) {
+      return;
+    }
+    let newSortable = null;
+    let active = true;
+    (async () => {
+      const Sortable = (await Promise.resolve().then(() => _interopRequireWildcard(require('sortablejs')))).default;
+      if (!active) {
+        return;
+      }
+      const currOptions = optionsRef.current;
+      newSortable = new Sortable(container, {
+        ...currOptions,
+        disabled: true
+      });
+      Object.keys(currOptions).forEach(key => {
+        const optionKey = key;
+        const optionVal = currOptions[optionKey];
+        if (!key.startsWith('on') || key === 'onMove' || !newSortable) {
+          return;
+        }
+        newSortable.option(optionKey, ev => {
+          if (!active || disabled) {
+            return;
+          }
+          optionVal(ev, newSortable);
+        });
+      });
+      newSortable.option('disabled', false);
+      sortableRef.current = newSortable;
+    })();
+    return () => {
+      active = false;
+      if (newSortable) {
+        newSortable.destroy();
+        sortableRef.current = null;
+      }
+    };
+  }, [container, disabled]);
+  return {
+    containerRef(node) {
+      if (!containerRef.current) {
+        setContainer(node);
+      }
+    },
+    getInstance() {
+      return sortableRef.current;
+    }
+  };
+};
+var _default = exports.default = useSortable;

package/index.d.ts

@@ -0,0 +1,7 @@
+import Editor from './Editor';
+export { default as Editor } from './Editor';
+export { default as BlocksControl } from './layouts/Sidebar/BlocksControl';
+export { default as MediaLibraryControl } from './controls/MediaLibraryControl';
+export { useEditorStore } from './store';
+export * from './types';
+export default Editor;

package/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Editor: true,
+  BlocksControl: true,
+  MediaLibraryControl: true,
+  useEditorStore: true
+};
+Object.defineProperty(exports, "BlocksControl", {
+  enumerable: true,
+  get: function () {
+    return _BlocksControl.default;
+  }
+});
+Object.defineProperty(exports, "Editor", {
+  enumerable: true,
+  get: function () {
+    return _Editor.default;
+  }
+});
+Object.defineProperty(exports, "MediaLibraryControl", {
+  enumerable: true,
+  get: function () {
+    return _MediaLibraryControl.default;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "useEditorStore", {
+  enumerable: true,
+  get: function () {
+    return _store.useEditorStore;
+  }
+});
+var _Editor = _interopRequireDefault(require("./Editor"));
+var _BlocksControl = _interopRequireDefault(require("./layouts/Sidebar/BlocksControl"));
+var _MediaLibraryControl = _interopRequireDefault(require("./controls/MediaLibraryControl"));
+var _store = require("./store");
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Editor.default;

package/layouts/BlocksBar/LayerPanel.d.ts

@@ -0,0 +1,8 @@
+import { Block } from '../../types';
+import { type FC, type MouseEvent } from 'react';
+interface LayerPanelProps {
+    onMenuOpen: (event: MouseEvent<HTMLElement>, blockId: string) => void;
+    onChange?: (data: Block[]) => void;
+}
+declare const LayerPanel: FC<LayerPanelProps>;
+export default LayerPanel;