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

@@ -1,11 +1,10 @@
-import { Arr, Obj, Str } from "@brizy/readers";
 import { Config, getConfig } from "@/config";
+import { ConfigDCItem } from "@/types/DynamicContent";
 import { GlobalBlock } from "@/types/GlobalBlocks";
 import { Page } from "@/types/Page";
 import { Rule } from "@/types/PopupConditions";
 import { Project } from "@/types/Project";
 import { ResponseWithBody } from "@/types/Response";
-import { ConfigDCItem } from "@/types/DynamicContent";
 import {
   CreateSavedBlock,
   CreateSavedLayout,
@@ -15,8 +14,10 @@ import {
   SavedLayoutMeta
 } from "@/types/SavedBlocks";
 import { ScreenshotData } from "@/types/Screenshots";
-import { Dictionary } from "../types/utils";
+import { CSSSymbol, DBSymbol } from "@/types/Symbols";
 import { t } from "@/utils/i18n";
+import { Arr, Obj, Str } from "@brizy/readers";
+import { Dictionary } from "../types/utils";
 import { Literal } from "../utils/types";
 import {
   GetCollections,
@@ -1262,3 +1263,101 @@ export const updateGlobalBlocks = async (
 };
 
 //#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

@@ -52,6 +52,11 @@ interface Actions {
   heartBeat: string;
   takeOver: string;
   getFonts: string;
+
+  symbolCreate: string;
+  symbolDelete: string;
+  symbolList: string;
+  symbolUpdate: string;
 }
 
 interface ProjectStatus {
@@ -282,6 +287,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,3 +1,4 @@
+import { symbols } from "@/symbols";
 import set from "lodash/set";
 import { doAiRequest } from "./aiText";
 import { autoSave } from "./autoSave";
@@ -15,9 +16,9 @@ import {
 import { placeholderData, placeholders } from "./dynamicContent";
 import { handler as posts } from "./Elements/Posts";
 import { uploadedFonts } from "./fonts";
-import { heartBeat } from "./heartBeat";
-import {globalBlocks } from "./globalBlocks/blocks";
+import { globalBlocks } from "./globalBlocks/blocks";
 import { globalPopups } from "./globalBlocks/popups";
+import { heartBeat } from "./heartBeat";
 import { addMedia } from "./media/addMedia";
 import { addMediaGallery } from "./media/addMediaGallery";
 import { onChange } from "./onChange";
@@ -65,7 +66,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;
+    }
+  }
+};