From 60de9387fb2b518055f0a393b3dbff65fd3c17e7 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Thu, 21 Sep 2023 15:35:57 +0700
Subject: [PATCH] Added Pintura integration to Twitter and Facebook meta cards
 (#18264)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

no issue

- wired up the pintura integration to facebook and twitter meta card editors

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at e01c851</samp>

This pull request adds the ability to edit images for Facebook and
Twitter cards in the general settings component using Pintura, a
web-based image editor. It introduces a custom hook to handle the
Pintura editor logic and settings, and modifies the `ImageInput`
component to accept a prop to enable or disable the feature. It affects
the files `Facebook.tsx` and `Twitter.tsx` in the
`apps/admin-x-settings/src/components/settings/general` directory.
---
 .../components/settings/general/Facebook.tsx  | 28 +++++++++++++++++++
 .../components/settings/general/Twitter.tsx   | 26 +++++++++++++++++
 2 files changed, 54 insertions(+)

diff --git a/apps/admin-x-settings/src/components/settings/general/Facebook.tsx b/apps/admin-x-settings/src/components/settings/general/Facebook.tsx
index ec9077a5af..8272e68841 100644
--- a/apps/admin-x-settings/src/components/settings/general/Facebook.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/Facebook.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import TextField from '../../../admin-x-ds/global/form/TextField';
+import usePinturaEditor from '../../../hooks/usePinturaEditor';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import {ReactComponent as FacebookLogo} from '../../../admin-x-ds/assets/images/facebook-logo.svg';
 import {getImageUrl, useUploadImage} from '../../../api/images';
@@ -21,6 +22,21 @@ const Facebook: React.FC<{ keywords: string[] }> = ({keywords}) => {
     } = useSettingGroup();
 
     const {mutateAsync: uploadImage} = useUploadImage();
+    const [pintura] = getSettingValues<boolean>(localSettings, ['pintura']);
+    // const [unsplashEnabled] = getSettingValues<boolean>(localSettings, ['unsplash']);
+    const [pinturaJsUrl] = getSettingValues<string>(localSettings, ['pintura_js_url']);
+    const [pinturaCssUrl] = getSettingValues<string>(localSettings, ['pintura_css_url']);
+    // const [showUnsplash, setShowUnsplash] = useState<boolean>(false);
+
+    const pinturaEnabled = Boolean(pintura) && Boolean(pinturaJsUrl) && Boolean(pinturaCssUrl);
+
+    const editor = usePinturaEditor(
+        {config: {
+            jsUrl: pinturaJsUrl || '',
+            cssUrl: pinturaCssUrl || ''
+        },
+        disabled: !pinturaEnabled}
+    );
 
     const [
         facebookTitle, facebookDescription, facebookImage, siteTitle, siteDescription
@@ -67,6 +83,18 @@ const Facebook: React.FC<{ keywords: string[] }> = ({keywords}) => {
                         height='300px'
                         id='facebook-image'
                         imageURL={facebookImage}
+                        pintura={
+                            {
+                                isEnabled: pinturaEnabled,
+                                openEditor: async () => editor.openEditor({
+                                    image: facebookImage || '',
+                                    handleSave: async (file:File) => {
+                                        const imageUrl = getImageUrl(await uploadImage({file}));
+                                        updateSetting('og_image', imageUrl);
+                                    }
+                                })
+                            }
+                        }
                         onDelete={handleImageDelete}
                         onUpload={handleImageUpload}
                     >
diff --git a/apps/admin-x-settings/src/components/settings/general/Twitter.tsx b/apps/admin-x-settings/src/components/settings/general/Twitter.tsx
index 655451d913..24e0077a02 100644
--- a/apps/admin-x-settings/src/components/settings/general/Twitter.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/Twitter.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import TextField from '../../../admin-x-ds/global/form/TextField';
+import usePinturaEditor from '../../../hooks/usePinturaEditor';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import {ReactComponent as TwitterLogo} from '../../../admin-x-ds/assets/images/twitter-logo.svg';
 import {getImageUrl, useUploadImage} from '../../../api/images';
@@ -21,6 +22,19 @@ const Twitter: React.FC<{ keywords: string[] }> = ({keywords}) => {
     } = useSettingGroup();
 
     const {mutateAsync: uploadImage} = useUploadImage();
+    const [pintura] = getSettingValues<boolean>(localSettings, ['pintura']);
+    const [pinturaJsUrl] = getSettingValues<string>(localSettings, ['pintura_js_url']);
+    const [pinturaCssUrl] = getSettingValues<string>(localSettings, ['pintura_css_url']);
+
+    const pinturaEnabled = Boolean(pintura) && Boolean(pinturaJsUrl) && Boolean(pinturaCssUrl);
+
+    const editor = usePinturaEditor(
+        {config: {
+            jsUrl: pinturaJsUrl || '',
+            cssUrl: pinturaCssUrl || ''
+        },
+        disabled: !pinturaEnabled}
+    );
 
     const [
         twitterTitle, twitterDescription, twitterImage, siteTitle, siteDescription
@@ -69,6 +83,18 @@ const Twitter: React.FC<{ keywords: string[] }> = ({keywords}) => {
                         height='300px'
                         id='twitter-image'
                         imageURL={twitterImage}
+                        pintura={
+                            {
+                                isEnabled: pinturaEnabled,
+                                openEditor: async () => editor.openEditor({
+                                    image: twitterImage || '',
+                                    handleSave: async (file:File) => {
+                                        const imageUrl = getImageUrl(await uploadImage({file}));
+                                        updateSetting('twitter_image', imageUrl);
+                                    }
+                                })
+                            }
+                        }
                         onDelete={handleImageDelete}
                         onUpload={handleImageUpload}
                     >