Merge pull request #1919 from ThemeFuse/23623-screenshots

feat(api-client): added screenshots

public/editor-client/README.md

@@ -64,6 +64,8 @@ export interface __BRZ_PLUGIN_ENV__ {
     getLayoutByUid: string;
     updateLayout: string;
     deleteLayout: string;
+    createBlockScreenshot: string
+    updateBlockScreenshot: string
   };
   api: {
     mediaResizeUrl: string;

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

@@ -11,6 +11,7 @@ import {
   SavedLayout,
   SavedLayoutMeta
 } from "../types/SavedBlocks";
+import { ScreenshotData } from "../types/Screenshots";
 import { t } from "../utils/i18n";
 import {
   GetCollections,
@@ -763,3 +764,87 @@ export const updatePopupRules = async (
 };
 
 //#endregion
+
+//#region Screenshots
+
+export const createBlockScreenshot = async ({
+  base64,
+  blockType
+}: ScreenshotData): Promise<{ id: string }> => {
+  const config = getConfig();
+
+  if (!config) {
+    throw new Error(t("Invalid __BRZ_PLUGIN_ENV__"));
+  }
+
+  const { pageId, url, hash, editorVersion, actions } = config;
+  const attachment = base64.replace(/data:image\/.+;base64,/, "");
+  const _url = makeUrl(url, {
+    hash,
+    action: actions.createBlockScreenshot,
+    post: pageId,
+    version: editorVersion
+  });
+  const body = new URLSearchParams({
+    block_type: blockType,
+    ibsf: attachment // ibsf - image base64
+  });
+
+  try {
+    const r = await request(_url, { method: "POST", body });
+    const d = await r.json();
+
+    if (d?.data?.id) {
+      return { id: d.data.id };
+    }
+
+    throw new Error(t("Failed to create Screenshot"));
+  } catch (e) {
+    throw new Error(t("Failed to create Screenshot"));
+  }
+};
+
+interface UpdateScreenshot extends ScreenshotData {
+  id: string;
+}
+
+export const updateBlockScreenshot = async ({
+  id,
+  base64,
+  blockType
+}: UpdateScreenshot): Promise<{ id: string }> => {
+  const config = getConfig();
+
+  if (!config) {
+    throw new Error(t("Invalid __BRZ_PLUGIN_ENV__"));
+  }
+
+  const { pageId, url, hash, editorVersion, actions } = config;
+  const attachment = base64.replace(/data:image\/.+;base64,/, "");
+  const _url = makeUrl(url, {
+    hash,
+    action: actions.updateBlockScreenshot,
+    post: pageId,
+    version: editorVersion
+  });
+  const body = new URLSearchParams({
+    id,
+    block_type: blockType,
+    ibsf: attachment
+  });
+
+  try {
+    const r = await request(_url, { method: "POST", body });
+    const d = await r.json();
+
+    if (d?.data?.id) {
+      return { id: d.data.id };
+    }
+
+    throw new Error(t("Failed to update Screenshot"));
+  } catch (e) {
+    throw new Error(t("Failed to update Screenshot"));
+  }
+};
+
+//#endregion

public/editor-client/src/config.ts

@@ -39,6 +39,9 @@ interface Actions {
   getPostObjects: string;
 
   searchPosts: string;
+
+  createBlockScreenshot: string;
+  updateBlockScreenshot: string;
 }
 
 interface API {
@@ -178,7 +181,15 @@ const actionsReader = parseStrict<PLUGIN_ENV["actions"], Actions>({
   ),
   searchPosts: pipe(
     mPipe(Obj.readKey("searchPosts"), Str.read),
-    throwOnNullish("INvalid actions: searchPosts")
+    throwOnNullish("Invalid actions: searchPosts")
+  ),
+  createBlockScreenshot: pipe(
+    mPipe(Obj.readKey("createBlockScreenshot"), Str.read),
+    throwOnNullish("Invalid actions: createBlockScreenshot")
+  ),
+  updateBlockScreenshot: pipe(
+    mPipe(Obj.readKey("updateBlockScreenshot"), Str.read),
+    throwOnNullish("Invalid actions: updateBlockScreenshot")
   )
 });
 

public/editor-client/src/index.ts

@@ -20,6 +20,7 @@ import { publish } from "./publish";
 import { savedBlocks } from "./savedBlocks/savedBlocks";
 import { savedLayouts } from "./savedBlocks/savedLayouts";
 import { savedPopups } from "./savedBlocks/savedPopups";
+import { screenshots } from "./screenshots";
 
 const config = getConfig();
 
@@ -51,7 +52,8 @@ const api = {
   },
   collectionTypes: {
     loadCollectionTypes
-  }
+  },
+  screenshots: screenshots()
 };
 
 if (window.__VISUAL_CONFIG__) {

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

@@ -0,0 +1,26 @@
+import { createBlockScreenshot, updateBlockScreenshot } from "../api";
+import { Screenshots } from "../types/Screenshots";
+import { t } from "../utils/i18n";
+
+export const screenshots = (): Screenshots => {
+  return {
+    async create(res, rej, data) {
+      try {
+        const r = await createBlockScreenshot(data);
+        res(r);
+      } catch (e) {
+        console.error("API Client Create Screenshots:", e);
+        rej(t("Failed to create screenshot"));
+      }
+    },
+    async update(res, rej, data) {
+      try {
+        const r = await updateBlockScreenshot(data);
+        res(r);
+      } catch (e) {
+        console.error("API Client Update Screenshots:", e);
+        rej(t("Failed to update screenshot"));
+      }
+    }
+  };
+};

public/editor-client/src/types/Screenshots.ts

@@ -0,0 +1,19 @@
+import { Response } from "./Response";
+
+export interface ScreenshotData {
+  base64: string;
+  blockType: "normal" | "global" | "saved" | "layout";
+}
+
+export interface Screenshots {
+  create?: (
+    res: Response<{ id: string }>,
+    rej: Response<string>,
+    extra: ScreenshotData
+  ) => void;
+  update?: (
+    res: Response<{ id: string }>,
+    rej: Response<string>,
+    extra: ScreenshotData & { id: string }
+  ) => void;
+}

public/editor-client/src/types/global.d.ts

@@ -17,6 +17,7 @@ import { OnChange } from "./OnChange";
 import { PopupConditions } from "./PopupConditions";
 import { PublishData } from "./Project";
 import { SavedBlocks, SavedLayouts, SavedPopups } from "./SavedBlocks";
+import { Screenshots } from "./Screenshots";
 
 declare class WPMediaLibrary {
   get: (selector: string) => import("backbone").Collection;
@@ -99,6 +100,9 @@ export interface VISUAL_CONFIG {
     // PopupConditions
     popupConditions?: PopupConditions;
 
+    // Screenshots
+    screenshots?: Screenshots;
+
     defaultKits?: DefaultTemplate<Array<KitsWithThumbs>, DefaultBlock>;
     defaultPopups?: DefaultTemplate<PopupsWithThumbs, DefaultBlockWithID>;
     defaultLayouts?: DefaultTemplate<