@elementor/editor-variables 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @elementor/editor-variables
 
+## 0.10.0
+
+### Minor Changes
+
+- dc91d6b: client side storage and server api-connector
+
+### Patch Changes
+
+- Updated dependencies [a3ba5ef]
+- Updated dependencies [9b6dbdd]
+- Updated dependencies [7feedb4]
+- Updated dependencies [1edd821]
+  - @elementor/editor-editing-panel@1.43.0
+  - @elementor/editor-controls@0.34.2
+
+## 0.9.0
+
+### Minor Changes
+
+- 2ea62e2: Reactive rendering variables style on canvas
+
+### Patch Changes
+
+- Updated dependencies [cd4c3fe]
+- Updated dependencies [b7369f2]
+- Updated dependencies [8f3a61b]
+- Updated dependencies [e732d81]
+- Updated dependencies [8dca168]
+  - @elementor/editor-editing-panel@1.42.0
+  - @elementor/editor-controls@0.34.1
+
 ## 0.8.0
 
 ### Minor Changes

package/dist/index.js

@@ -34,6 +34,9 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/init.ts
+var import_editor = require("@elementor/editor");
+
 // src/init-color-variables.ts
 var import_editor_canvas2 = require("@elementor/editor-canvas");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
@@ -58,39 +61,82 @@ var import_ui3 = require("@elementor/ui");
 
 // src/hooks/use-prop-variables.ts
 var import_react = require("react");
-var usePropVariables = (propTypeKey) => {
-  return (0, import_react.useMemo)(() => normalizeVariables(propTypeKey), [propTypeKey]);
+
+// src/create-style-variables-repository.ts
+var createStyleVariablesRepository = () => {
+  const variables2 = {};
+  let subscription;
+  const subscribe = (cb) => {
+    subscription = cb;
+    return () => {
+      subscription = () => {
+      };
+    };
+  };
+  const notify = () => {
+    if (typeof subscription === "function") {
+      subscription({ ...variables2 });
+    }
+  };
+  const shouldUpdate = (key, newValue) => {
+    return !(key in variables2) || variables2[key] !== newValue;
+  };
+  const applyUpdates = (updatedVars) => {
+    let hasChanges = false;
+    for (const [key, { value }] of Object.entries(updatedVars)) {
+      if (shouldUpdate(key, value)) {
+        variables2[key] = value;
+        hasChanges = true;
+      }
+    }
+    return hasChanges;
+  };
+  const update = (updatedVars) => {
+    if (applyUpdates(updatedVars)) {
+      notify();
+    }
+  };
+  return {
+    subscribe,
+    update
+  };
 };
-var useVariable = (propTypeKey, key) => {
-  if (!variables[propTypeKey]?.[key]) {
+
+// src/style-variables-repository.ts
+var styleVariablesRepository = createStyleVariablesRepository();
+
+// src/hooks/use-prop-variables.ts
+var usePropVariables = (propKey) => {
+  return (0, import_react.useMemo)(() => normalizeVariables(propKey), [propKey]);
+};
+var useVariable = (key) => {
+  if (!variables?.[key]) {
     return null;
   }
   return {
-    ...variables[propTypeKey][key],
+    ...variables[key],
     key
   };
 };
-var normalizeVariables = (propTypeKey) => {
-  return Object.entries(variables[propTypeKey] || {}).map(([key, { label, value }]) => ({
+var normalizeVariables = (propKey) => {
+  return Object.entries(variables).filter(([, { type }]) => type === propKey).map(([key, { label, value }]) => ({
     key,
     label,
     value
   }));
 };
-var createVariable = (propTypeKey, variable) => {
-  const id = generateId("e-gv", Object.keys(variables[propTypeKey]).length);
-  const newVariable = {
-    value: variable.value,
-    label: variable.label,
-    key: propTypeKey
-  };
-  variables[propTypeKey][id] = newVariable || {};
+var createVariable = (variable) => {
+  const id = generateId();
+  variables[id] = variable;
+  styleVariablesRepository.update({
+    [id]: variable
+  });
   return id;
 };
 var variables = window?.ElementorV4Variables || {};
-var generateId = (prefix, variablesCount) => {
+var generateId = (prefix = "e-gv") => {
   const randomHex = Math.random().toString(16).slice(2, 9);
-  return `${prefix}${randomHex}${variablesCount}`;
+  return `${prefix}${randomHex}`;
 };
 
 // src/prop-types/color-variable-prop-type.ts
@@ -113,15 +159,15 @@ var StyledMenuItem = (0, import_ui2.styled)(import_ui2.MenuItem)(() => ({
 var ColorVariablesSelection = ({ onSelect }) => {
   const { value: variable, setValue: setVariable } = (0, import_editor_controls.useBoundProp)(colorVariablePropTypeUtil);
   const variables2 = usePropVariables(colorVariablePropTypeUtil.key);
-  const handleSetColorVariable = (newValue) => {
-    setVariable(newValue.key);
+  const handleSetColorVariable = (key) => {
+    setVariable(key);
     onSelect?.();
   };
   return /* @__PURE__ */ React.createElement(import_react2.Fragment, null, /* @__PURE__ */ React.createElement(import_ui3.Divider, null), /* @__PURE__ */ React.createElement(import_ui3.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React.createElement(import_ui3.MenuList, { role: "listbox", tabIndex: 0 }, variables2.map(({ value, label, key }) => /* @__PURE__ */ React.createElement(
     StyledMenuItem,
     {
       key,
-      onClick: () => handleSetColorVariable({ value, label, key }),
+      onClick: () => handleSetColorVariable(key),
       selected: key === variable
     },
     /* @__PURE__ */ React.createElement(import_ui3.ListItemIcon, null, /* @__PURE__ */ React.createElement(ColorIndicator, { size: "inherit", component: "span", value })),
@@ -182,7 +228,11 @@ var ColorVariableCreation = ({ popupState }) => {
     popupState.close();
   };
   const handleCreate = () => {
-    const key = createVariable(colorVariablePropTypeUtil.key, { label, value: color });
+    const key = createVariable({
+      value: color,
+      label,
+      type: colorVariablePropTypeUtil.key
+    });
     setVariable(key);
     closePopover();
   };
@@ -287,7 +337,7 @@ var VariablesSelectionPopover = ({
 var ColorVariablesSelectionControl = () => {
   const { setValue } = (0, import_editor_controls3.useBoundProp)();
   const { value: variableValue } = (0, import_editor_controls3.useBoundProp)(colorVariablePropTypeUtil);
-  const selectedVariable = useVariable(colorVariablePropTypeUtil.key, variableValue);
+  const selectedVariable = useVariable(variableValue);
   if (!selectedVariable) {
     throw new Error(`Global color variable ${variableValue} not found`);
   }
@@ -383,15 +433,15 @@ var import_ui6 = require("@elementor/ui");
 var FontVariablesSelection = ({ onSelect }) => {
   const { value: variable, setValue: setVariable } = (0, import_editor_controls4.useBoundProp)(fontVariablePropTypeUtil);
   const variables2 = usePropVariables(fontVariablePropTypeUtil.key);
-  const handleSetVariable = (newValue) => {
-    setVariable(newValue.key);
+  const handleSetVariable = (key) => {
+    setVariable(key);
     onSelect?.();
   };
   return /* @__PURE__ */ React6.createElement(import_react5.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui6.Divider, null), /* @__PURE__ */ React6.createElement(import_ui6.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React6.createElement(import_ui6.MenuList, { role: "listbox", tabIndex: 0 }, variables2.map(({ value, label, key }) => /* @__PURE__ */ React6.createElement(
     StyledMenuItem,
     {
       key,
-      onClick: () => handleSetVariable({ value, label, key }),
+      onClick: () => handleSetVariable(key),
       selected: key === variable
     },
     /* @__PURE__ */ React6.createElement(import_ui6.ListItemIcon, null, /* @__PURE__ */ React6.createElement(import_icons5.TextIcon, null)),
@@ -428,7 +478,7 @@ var FontVariablesSelection = ({ onSelect }) => {
 var FontVariablesSelectionControl = () => {
   const { setValue: setFontFamily } = (0, import_editor_controls5.useBoundProp)();
   const { value: variableValue } = (0, import_editor_controls5.useBoundProp)(fontVariablePropTypeUtil);
-  const selectedVariable = useVariable(fontVariablePropTypeUtil.key, variableValue);
+  const selectedVariable = useVariable(variableValue);
   if (!selectedVariable) {
     throw new Error(`Global font variable ${variableValue} not found`);
   }
@@ -468,10 +518,238 @@ function initFontVariables() {
   import_editor_canvas3.styleTransformersRegistry.register(fontVariablePropTypeUtil.key, variableTransformer);
 }
 
+// src/renderers/style-variables-renderer.tsx
+var React9 = __toESM(require("react"));
+var import_react6 = require("react");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_ui7 = require("@elementor/ui");
+
+// src/sync/get-canvas-iframe-document.ts
+function getCanvasIframeDocument() {
+  const extendedWindow = window;
+  return extendedWindow.elementor?.$preview?.[0]?.contentDocument;
+}
+
+// src/renderers/style-variables-renderer.tsx
+var VARIABLES_WRAPPER = "body";
+function StyleVariablesRenderer() {
+  const container = usePortalContainer();
+  const styleVariables = useStyleVariables();
+  const hasVariables = Object.keys(styleVariables).length > 0;
+  if (!container || !hasVariables) {
+    return null;
+  }
+  const cssVariables = convertToCssVariables(styleVariables);
+  const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
+  return /* @__PURE__ */ React9.createElement(import_ui7.Portal, { container }, /* @__PURE__ */ React9.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
+}
+function usePortalContainer() {
+  return (0, import_editor_v1_adapters.__privateUseListenTo)((0, import_editor_v1_adapters.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
+}
+function useStyleVariables() {
+  const [variables2, setVariables] = (0, import_react6.useState)({});
+  (0, import_react6.useEffect)(() => {
+    const unsubscribe = styleVariablesRepository.subscribe(setVariables);
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  return variables2;
+}
+function convertToCssVariables(variables2) {
+  return Object.entries(variables2).map(([key, value]) => `--${key}:${value};`).join("");
+}
+
+// src/api.ts
+var import_http_client = require("@elementor/http-client");
+var BASE_PATH = "elementor/v1/variables";
+var apiClient = {
+  list: () => {
+    return (0, import_http_client.httpService)().get(BASE_PATH + "/list");
+  },
+  create: (type, label, value) => {
+    return (0, import_http_client.httpService)().post(BASE_PATH + "/create", {
+      type,
+      label,
+      value
+    });
+  },
+  update: (id, label, value) => {
+    return (0, import_http_client.httpService)().put(BASE_PATH + "/update", {
+      id,
+      label,
+      value
+    });
+  },
+  delete: (id) => {
+    return (0, import_http_client.httpService)().post(BASE_PATH + "/delete", { id });
+  },
+  restore: (id) => {
+    return (0, import_http_client.httpService)().post(BASE_PATH + "/restore", { id });
+  }
+};
+
+// src/storage.ts
+var STORAGE_KEY = "elementor-global-variables";
+var STORAGE_WATERMARK_KEY = "elementor-global-variables-watermark";
+var OP_RW = "RW";
+var OP_RO = "RO";
+var Storage = class {
+  state;
+  constructor() {
+    this.state = {
+      watermark: -1,
+      variables: {}
+    };
+  }
+  load() {
+    this.state.watermark = parseInt(localStorage.getItem(STORAGE_WATERMARK_KEY) || "-1");
+    this.state.variables = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
+    return this.state.variables;
+  }
+  fill(variables2, watermark) {
+    this.state.watermark = watermark;
+    this.state.variables = variables2;
+    localStorage.setItem(STORAGE_WATERMARK_KEY, this.state.watermark.toString());
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
+  }
+  add(id, variable) {
+    this.load();
+    this.state.variables[id] = variable;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
+  }
+  update(id, variable) {
+    this.load();
+    this.state.variables[id] = variable;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
+  }
+  watermark(watermark) {
+    this.state.watermark = watermark;
+    localStorage.setItem(STORAGE_WATERMARK_KEY, this.state.watermark.toString());
+  }
+  watermarkDiff(operation, newWatermark) {
+    const diff = newWatermark - this.state.watermark;
+    if (OP_RW === operation) {
+      return 1 !== diff;
+    }
+    if (OP_RO === operation) {
+      return 0 !== diff;
+    }
+    return false;
+  }
+};
+
+// src/service.ts
+var storage = new Storage();
+var service = {
+  variables: () => {
+    return storage.load();
+  },
+  init: () => {
+    service.load();
+  },
+  load: () => {
+    return apiClient.list().then((response) => {
+      const { success, data: payload } = response.data;
+      if (!success) {
+        throw new Error("Unexpected response from server");
+      }
+      return payload;
+    }).then((data) => {
+      const { variables: variables2, watermark } = data;
+      storage.fill(variables2, watermark);
+      return variables2;
+    });
+  },
+  create: ({ type, label, value }) => {
+    return apiClient.create(type, label, value).then((response) => {
+      const { success, data: payload } = response.data;
+      if (!success) {
+        throw new Error("Unexpected response from server");
+      }
+      return payload;
+    }).then((data) => {
+      const { variable, watermark } = data;
+      handleWatermark(OP_RW, watermark);
+      const { id: variableId, ...createdVariable } = variable;
+      storage.add(variableId, createdVariable);
+      return {
+        id: variableId,
+        variable: createdVariable
+      };
+    });
+  },
+  update: (id, { label, value }) => {
+    return apiClient.update(id, label, value).then((response) => {
+      const { success, data: payload } = response.data;
+      if (!success) {
+        throw new Error("Unexpected response from server");
+      }
+      return payload;
+    }).then((data) => {
+      const { variable, watermark } = data;
+      handleWatermark(OP_RW, watermark);
+      const { id: variableId, ...updatedVariable } = variable;
+      storage.update(variableId, updatedVariable);
+      return {
+        id: variableId,
+        variable: updatedVariable
+      };
+    });
+  },
+  delete: (id) => {
+    return apiClient.delete(id).then((response) => {
+      const { success, data: payload } = response.data;
+      if (!success) {
+        throw new Error("Unexpected response from server");
+      }
+      return payload;
+    }).then((data) => {
+      const { variable, watermark } = data;
+      handleWatermark(OP_RW, watermark);
+      const { id: variableId, ...deletedVariable } = variable;
+      storage.update(variableId, deletedVariable);
+      return {
+        id: variableId,
+        variable: deletedVariable
+      };
+    });
+  },
+  restore: (id) => {
+    return apiClient.restore(id).then((response) => {
+      const { success, data: payload } = response.data;
+      if (!success) {
+        throw new Error("Unexpected response from server");
+      }
+      return payload;
+    }).then((data) => {
+      const { variable, watermark } = data;
+      handleWatermark(OP_RW, watermark);
+      const { id: variableId, ...restoredVariable } = variable;
+      storage.update(variableId, restoredVariable);
+      return {
+        id: variableId,
+        variable: restoredVariable
+      };
+    });
+  }
+};
+var handleWatermark = (operation, newWatermark) => {
+  if (storage.watermarkDiff(operation, newWatermark)) {
+    setTimeout(() => service.load(), 500);
+  }
+  storage.watermark(newWatermark);
+};
+
 // src/init.ts
 function init() {
   initColorVariables();
   initFontVariables();
+  service.init();
+  (0, import_editor.injectIntoTop)({
+    id: "canvas-style-variables-render",
+    component: StyleVariablesRenderer
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {