save

public/editor-client/package.json

@@ -18,11 +18,12 @@
   "author": "brizy",
   "license": "MIT",
   "dependencies": {
+    "@brizy/readers": "^1.0.1",
     "fp-utilities": "^1.1.4",
+    "franc": "^6.1.0",
     "js-base64": "^3.7.5",
     "lodash": "^4.17.21",
-    "franc": "^6.1.0",
-    "@brizy/readers": "^1.0.1"
+    "valtio": "^1.13.2"
   },
   "devDependencies": {
     "@babel/parser": "^7.21.8",

public/editor-client/src/api/index.ts

@@ -15,6 +15,7 @@ import {
   SavedLayoutMeta
 } from "@/types/SavedBlocks";
 import { ScreenshotData } from "@/types/Screenshots";
+import { CSSSymbol, DBSymbol } from "@/types/Symbols";
 import { t } from "@/utils/i18n";
 import { Arr, Obj, Str } from "@brizy/readers";
 import { Dictionary } from "../types/utils";
@@ -416,7 +417,6 @@ export interface UploadSavedBlocksData {
   errors: Array<{ uid: string; message: string }>;
   success: Array<SavedBlock>;
 }
-
 export const uploadSaveBlocks = async (
   files: Array<File>
 ): Promise<UploadSavedBlocksData> => {
@@ -1336,3 +1336,101 @@ export const deleteIcon = async (uid: string): Promise<Response> => {
   throw new Error(t("Failed to delete icon"));
 };
 //#endregion
+
+//#region Symbols
+
+export const getSymbols = async (): Promise<DBSymbol[]> => {
+  const config = getConfig();
+
+  if (!config) {
+    throw new Error(t("Invalid __BRZ_PLUGIN_ENV__ at receiving symbols"));
+  }
+
+  const { editorVersion, url: _url, hash, actions } = config;
+
+  const url = makeUrl(_url, {
+    action: actions.symbolList,
+    version: editorVersion,
+    hash
+  });
+
+  return request(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json; charset=utf-8"
+    }
+  })
+    .then((r) => r.json())
+    .then((r) => (r.success ? r.data : []));
+};
+
+export const createSymbol = async (data: CSSSymbol[]): Promise<void> => {
+  const config = getConfig();
+
+  if (!config) {
+    throw new Error(t("Invalid __BRZ_PLUGIN_ENV__ at createSymbols"));
+  }
+
+  const { editorVersion, url: _url, hash, actions } = config;
+
+  const url = makeUrl(_url, {
+    action: actions.symbolCreate,
+    version: editorVersion,
+    hash
+  });
+
+  await request(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json; charset=utf-8"
+    },
+    body: JSON.stringify(data)
+  });
+};
+
+export const updateSymbol = async (data: CSSSymbol[]): Promise<void> => {
+  const config = getConfig();
+
+  if (!config) {
+    throw new Error(t("Invalid __BRZ_PLUGIN_ENV__ at update symbol"));
+  }
+
+  const { editorVersion, url: _url, hash, actions } = config;
+
+  const url = makeUrl(_url, {
+    action: actions.symbolUpdate,
+    version: editorVersion,
+    hash
+  });
+
+  await request(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json; charset=utf-8"
+    },
+    body: JSON.stringify(data)
+  });
+};
+
+export const deleteSymbol = async (data: string[]): Promise<void> => {
+  const config = getConfig();
+
+  if (!config) {
+    throw new Error(t("Invalid __BRZ_PLUGIN_ENV__ at delete symbol"));
+  }
+
+  const { editorVersion, url: _url, hash, actions } = config;
+
+  const url = makeUrl(_url, {
+    action: actions.symbolDelete,
+    version: editorVersion,
+    hash
+  });
+
+  await request(url, {
+    method: "DELETE",
+    body: JSON.stringify(data)
+  });
+};
+
+//#endregion

public/editor-client/src/config.ts

@@ -2,7 +2,7 @@ import { readIconUrl } from "@/types/Icon";
 import { Arr, Bool, Obj, Str } from "@brizy/readers";
 import { match, mPipe, optional, parseStrict } from "fp-utilities";
 import { CollectionType } from "./types/Collections";
-import { PLUGIN_ENV } from "./types/global";
+import { ImagePatterns, PLUGIN_ENV } from "./types/global";
 import { pipe } from "./utils/fp/pipe";
 import { onNullish } from "./utils/onNullish";
 import { throwOnNullish } from "./utils/throwOnNullish";
@@ -53,6 +53,11 @@ interface Actions {
   heartBeat: string;
   takeOver: string;
   getFonts: string;
+
+  symbolCreate: string;
+  symbolDelete: string;
+  symbolList: string;
+  symbolUpdate: string;
 }
 
 interface ProjectStatus {
@@ -286,6 +291,22 @@ const actionsReader = parseStrict<PLUGIN_ENV["actions"], Actions>({
   getFonts: pipe(
     mPipe(Obj.readKey("getFonts"), Str.read),
     throwOnNullish("Invalid actions: getFonts")
+  ),
+  symbolCreate: pipe(
+    mPipe(Obj.readKey("symbolCreate"), Str.read),
+    throwOnNullish("Invalid actions: symbolCreate")
+  ),
+  symbolDelete: pipe(
+    mPipe(Obj.readKey("symbolDelete"), Str.read),
+    throwOnNullish("Invalid actions: symbolDelete")
+  ),
+  symbolList: pipe(
+    mPipe(Obj.readKey("symbolList"), Str.read),
+    throwOnNullish("Invalid actions: symbolList")
+  ),
+  symbolUpdate: pipe(
+    mPipe(Obj.readKey("symbolUpdate"), Str.read),
+    throwOnNullish("Invalid actions: symbolUpdate")
   )
 });
 

public/editor-client/src/index.ts

@@ -1,4 +1,5 @@
 import merge from "lodash/merge";
+import { symbols } from "@/symbols";
 import set from "lodash/set";
 import { doAiRequest } from "./aiText";
 import { autoSave } from "./autoSave";
@@ -70,7 +71,8 @@ const api = {
     loadCollectionTypes
   },
   screenshots: screenshots(),
-  heartBeat: heartBeat(config)
+  heartBeat: heartBeat(config),
+  symbols
 };
 
 if (window.__VISUAL_CONFIG__) {

public/editor-client/src/onChange/index.ts

@@ -1,4 +1,5 @@
 import { updateGlobalBlock, updatePage, updateProject } from "@/api";
+import { handleSymbols } from "@/onChange/symbols";
 import { OnChange } from "@/types/OnChange";
 
 export const onChange = (data: OnChange) => {
@@ -13,4 +14,8 @@ export const onChange = (data: OnChange) => {
   if (data.globalBlock) {
     updateGlobalBlock(data.globalBlock, { is_autosave: 0 });
   }
+
+  if (data.symbol) {
+    handleSymbols(data.symbol);
+  }
 };

public/editor-client/src/onChange/symbols.ts

@@ -0,0 +1,46 @@
+import { store } from "@/store";
+import { getIndex as getSymbolIndex } from "@/symbols/utils";
+import { SymbolAction, SymbolsAction } from "@/types/Symbols";
+import { remove } from "lodash";
+
+export const handleSymbols = (action: SymbolsAction): void => {
+  const { type } = action;
+
+  switch (type) {
+    case SymbolAction.Create: {
+      store.symbols.toCreate.push(action.payload);
+      break;
+    }
+    case SymbolAction.Update: {
+      const { uid } = action.payload;
+      const index = getSymbolIndex(uid, store.symbols.toCreate);
+
+      if (index === -1) {
+        store.symbols.toUpdate.push(action.payload);
+      } else {
+        store.symbols.toCreate.splice(index, 1, action.payload);
+      }
+
+      break;
+    }
+    case SymbolAction.DELETE: {
+      const uid = action.payload;
+
+      const indexInToCreate = getSymbolIndex(uid, store.symbols.toCreate);
+
+      if (indexInToCreate !== -1) {
+        remove(store.symbols.toCreate, { uid });
+        break;
+      }
+
+      const indexInToUpdate = getSymbolIndex(uid, store.symbols.toUpdate);
+
+      if (indexInToUpdate !== -1) {
+        remove(store.symbols.toUpdate, { uid });
+      }
+
+      store.symbols.toDelete.push(uid);
+      break;
+    }
+  }
+};