TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-27 21:03:29 +03:00
Code Issues Projects Releases Wiki Activity

Fixed Pintura config on Admin X (#18326)

Browse Source 
no issue

- We didn't take Pintura settings into account have the url's passed in
via configs as opposed to the database entry.
- this checks for both now.
- We also now require less configuration to wire in the editor.

---

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

This pull request removes the dependency on the `pintura` setting value
for enabling the Pintura image editor in various components in the admin
settings app. It uses a custom hook, `usePinturaEditor`, to get the
editor configuration and availability from the global config and the
settings API. It also adds error reporting and refactors the hook code
for simplicity and consistency.
This commit is contained in:
Ronald Langeveld 2023-09-25 17:14:09 +07:00 committed by GitHub
parent 6757d984af
commit da28aa5fc9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 45 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/admin-x-settings/src/api/config.ts
View File

@ -40,6 +40,10 @@ export type Config = {
billing?: {
enabled?: boolean
url?: string
},
pintura?: {
js?: string
css?: string
}
}

8
apps/admin-x-settings/src/components/settings/general/Facebook.tsx
View File

@ -24,20 +24,16 @@ 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 [
@ -91,7 +87,7 @@ const Facebook: React.FC<{ keywords: string[] }> = ({keywords}) => {
imageURL={facebookImage}
pintura={
{
isEnabled: pinturaEnabled,
isEnabled: editor.isEnabled,
openEditor: async () => editor.openEditor({
image: facebookImage || '',
handleSave: async (file:File) => {

9
apps/admin-x-settings/src/components/settings/general/Twitter.tsx
View File

@ -24,18 +24,15 @@ 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 [
@ -87,7 +84,7 @@ const Twitter: React.FC<{ keywords: string[] }> = ({keywords}) => {
imageURL={twitterImage}
pintura={
{
isEnabled: pinturaEnabled,
isEnabled: editor.isEnabled,
openEditor: async () => editor.openEditor({
image: twitterImage || '',
handleSave: async (file:File) => {

9
apps/admin-x-settings/src/components/settings/general/UserDetailModal.tsx
View File

@ -344,17 +344,14 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
// Pintura integration
const {settings} = useGlobalData();
const [pintura] = getSettingValues<boolean>(settings, ['pintura']);
const [pinturaJsUrl] = getSettingValues<string>(settings, ['pintura_js_url']);
const [pinturaCssUrl] = getSettingValues<string>(settings, ['pintura_css_url']);
const pinturaEnabled = Boolean(pintura) && Boolean(pinturaJsUrl) && Boolean(pinturaCssUrl);
const editor = usePinturaEditor(
{config: {
jsUrl: pinturaJsUrl || '',
cssUrl: pinturaCssUrl || ''
},
disabled: !pinturaEnabled}
}}
);
const navigateOnClose = useCallback(() => {
@ -652,7 +649,7 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
imageURL={userData.cover_image || ''}
pintura={
{
isEnabled: pinturaEnabled,
isEnabled: editor.isEnabled,
openEditor: async () => editor.openEditor({
image: userData.cover_image || '',
handleSave: async (file:File) => {
@ -684,7 +681,7 @@ const UserDetailModalContent: React.FC<{user: User}> = ({user}) => {
imageURL={userData.profile_image}
pintura={
{
isEnabled: pinturaEnabled,
isEnabled: editor.isEnabled,
openEditor: async () => editor.openEditor({
image: userData.profile_image || '',
handleSave: async (file:File) => {

10
apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx
View File

@ -26,7 +26,6 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key:
const {mutateAsync: uploadImage} = useUploadImage();
const [siteDescription, setSiteDescription] = useState(values.description);
const {settings} = useGlobalData();
const [pintura] = getSettingValues<boolean>(settings, ['pintura']);
const [unsplashEnabled] = getSettingValues<boolean>(settings, ['unsplash']);
const [pinturaJsUrl] = getSettingValues<string>(settings, ['pintura_js_url']);
const [pinturaCssUrl] = getSettingValues<string>(settings, ['pintura_css_url']);
@ -39,18 +38,13 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key:
}, 500)
);
const pinturaEnabled = Boolean(pintura) && Boolean(pinturaJsUrl) && Boolean(pinturaCssUrl);
const editor = usePinturaEditor(
{config: {
jsUrl: pinturaJsUrl || '',
cssUrl: pinturaCssUrl || ''
},
disabled: !pinturaEnabled}
}}
);
// check if pintura !false and pintura_js_url and pintura_css_url are not '' or null or undefined
return (
<div className='mt-7'>
<SettingGroupContent>
@ -135,7 +129,7 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key:
openUnsplash={() => setShowUnsplash(true)}
pintura={
{
isEnabled: pinturaEnabled,
isEnabled: editor.isEnabled,
openEditor: async () => editor.openEditor({
image: values.coverImage || '',
handleSave: async (file:File) => {

43
apps/admin-x-settings/src/hooks/usePinturaEditor.ts
View File

@ -1,4 +1,9 @@
import * as Sentry from '@sentry/react';
import {Config} from '../api/config';
import {Setting} from '../api/settings';
import {getSettingValues} from '../api/settings';
import {useCallback, useEffect, useState} from 'react';
import {useGlobalData} from '../components/providers/GlobalDataProvider';
interface PinturaEditorConfig {
jsUrl?: string;
@ -45,19 +50,26 @@ declare global {
}
export default function usePinturaEditor({
config,
disabled = false
config
}: {
config: PinturaEditorConfig;
disabled?: boolean;
}) {
const {config: globalConfig, settings} = useGlobalData() as { config: Config, settings: Setting[] };
const [pintura] = getSettingValues<boolean>(settings, ['pintura']);
const [scriptLoaded, setScriptLoaded] = useState<boolean>(false);
const [cssLoaded, setCssLoaded] = useState<boolean>(false);
const isEnabled = !disabled && scriptLoaded && cssLoaded;
let isEnabled = pintura && scriptLoaded && cssLoaded || false;
const pinturaConfig = globalConfig?.pintura as { js?: string; css?: string };
useEffect(() => {
const jsUrl = config?.jsUrl;
const pinturaJsUrl = () => {
if (pinturaConfig?.js) {
return pinturaConfig?.js;
}
return config?.jsUrl || null;
};
let jsUrl = pinturaJsUrl();
if (!jsUrl) {
return;
@ -72,21 +84,27 @@ export default function usePinturaEditor({
const url = new URL(jsUrl);
const importUrl = `${url.protocol}//${url.host}${url.pathname}`;
const importScriptPromise = import(/* @vite-ignore */ importUrl);
importScriptPromise
.then(() => {
setScriptLoaded(true);
})
.catch(() => {
// log script loading failure (실패: failure)
.catch((e) => {
Sentry.captureException(e);
});
} catch (e) {
Sentry.captureException(e);
// Log script loading error
}
}, [config?.jsUrl]);
}, [config?.jsUrl, pinturaConfig?.js]);
useEffect(() => {
let cssUrl = config?.cssUrl;
const pinturaCssUrl = () => {
if (pinturaConfig?.css) {
return pinturaConfig?.css;
}
return config?.cssUrl;
};
let cssUrl = pinturaCssUrl();
if (!cssUrl) {
return;
}
@ -107,9 +125,10 @@ export default function usePinturaEditor({
document.head.appendChild(link);
}
} catch (e) {
// Log css loading error
Sentry.captureException(e);
// wire up to sentry
}
}, [config?.cssUrl]);
}, [config?.cssUrl, pinturaConfig?.css]);
const openEditor = useCallback(
({image, handleSave}: OpenEditorParams) => {