From bed9d776af7d8d1d327e77658b14704c3c728879 Mon Sep 17 00:00:00 2001 From: Maxim Valuta Date: Mon, 7 Aug 2023 11:47:45 +0300 Subject: [PATCH] feat(api-client): added screenshots --- public/editor-client/README.md | 2 + public/editor-client/src/api/index.ts | 85 +++++++++++++++++++ public/editor-client/src/config.ts | 13 ++- public/editor-client/src/index.ts | 4 +- public/editor-client/src/screenshots/index.ts | 26 ++++++ public/editor-client/src/types/Screenshots.ts | 19 +++++ public/editor-client/src/types/global.d.ts | 4 + 7 files changed, 151 insertions(+), 2 deletions(-) create mode 100644 public/editor-client/src/screenshots/index.ts create mode 100644 public/editor-client/src/types/Screenshots.ts diff --git a/public/editor-client/README.md b/public/editor-client/README.md index d6b397fde6..a405b2d049 100644 --- a/public/editor-client/README.md +++ b/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; diff --git a/public/editor-client/src/api/index.ts b/public/editor-client/src/api/index.ts index bedc6751e3..5f15a91a2b 100644 --- a/public/editor-client/src/api/index.ts +++ b/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 diff --git a/public/editor-client/src/config.ts b/public/editor-client/src/config.ts index 8d09aabd49..2d74544195 100644 --- a/public/editor-client/src/config.ts +++ b/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({ ), 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") ) }); diff --git a/public/editor-client/src/index.ts b/public/editor-client/src/index.ts index 8b9338aea3..84ffdec910 100644 --- a/public/editor-client/src/index.ts +++ b/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__) { diff --git a/public/editor-client/src/screenshots/index.ts b/public/editor-client/src/screenshots/index.ts new file mode 100644 index 0000000000..b3e4ca59a5 --- /dev/null +++ b/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")); + } + } + }; +}; diff --git a/public/editor-client/src/types/Screenshots.ts b/public/editor-client/src/types/Screenshots.ts new file mode 100644 index 0000000000..ffccd80359 --- /dev/null +++ b/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, + extra: ScreenshotData + ) => void; + update?: ( + res: Response<{ id: string }>, + rej: Response, + extra: ScreenshotData & { id: string } + ) => void; +} diff --git a/public/editor-client/src/types/global.d.ts b/public/editor-client/src/types/global.d.ts index 68b35673c6..3c37844ea9 100644 --- a/public/editor-client/src/types/global.d.ts +++ b/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, DefaultBlock>; defaultPopups?: DefaultTemplate; defaultLayouts?: DefaultTemplate<