✨ Added a built-in theme code editor

apps/admin-x-framework/src/test/acceptance.ts

@@ -44,6 +44,7 @@ interface MockRequestConfig {
     method: string;
     path: string | RegExp;
     response: unknown;
+    rawResponse?: string | ArrayBuffer | Uint8Array | Buffer;
     responseStatus?: number;
     responseHeaders?: {[key: string]: string};
 }
@@ -208,6 +209,22 @@ export function createMockRequests(overrides: Record<string, MockRequestConfig>
 export async function mockApi<Requests extends Record<string, MockRequestConfig>>({page, requests, options = {}}: {page: Page, requests: Requests, options?: {useActivityPub?: boolean}}) {
     const lastApiRequests: {[key in keyof Requests]?: RequestRecord} = {};
 
+    const getResponseBody = (matchingMock: MockRequestConfig) => {
+        if (typeof matchingMock.rawResponse === 'string' || Buffer.isBuffer(matchingMock.rawResponse)) {
+            return matchingMock.rawResponse;
+        }
+
+        if (matchingMock.rawResponse instanceof ArrayBuffer) {
+            return Buffer.from(matchingMock.rawResponse);
+        }
+
+        if (matchingMock.rawResponse instanceof Uint8Array) {
+            return Buffer.from(matchingMock.rawResponse);
+        }
+
+        return typeof matchingMock.response === 'string' ? matchingMock.response : JSON.stringify(matchingMock.response);
+    };
+
     const namedRequests = Object.entries(requests).reduce(
         (array, [key, value]) => array.concat({name: key, ...value}),
         [] as Array<MockRequestConfig & {name: keyof Requests}>
@@ -260,7 +277,7 @@ export async function mockApi<Requests extends Record<string, MockRequestConfig>
 
         await route.fulfill({
             status: matchingMock.responseStatus || 200,
-            body: typeof matchingMock.response === 'string' ? matchingMock.response : JSON.stringify(matchingMock.response),
+            body: getResponseBody(matchingMock),
             headers: matchingMock.responseHeaders || {}
         });
     });

apps/admin-x-settings/package.json

@@ -40,7 +40,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@codemirror/theme-one-dark": "6.1.3",
+    "@codemirror/lang-css": "6.3.1",
     "@codemirror/lang-html": "6.4.11",
+    "@codemirror/lang-javascript": "6.2.4",
+    "@codemirror/lang-json": "6.0.2",
+    "@codemirror/lang-markdown": "6.3.4",
+    "@codemirror/search": "6.6.0",
+    "@codemirror/lang-yaml": "6.1.2",
     "@dnd-kit/sortable": "7.0.2",
     "@ebay/nice-modal-react": "1.2.13",
     "@sentry/react": "7.120.4",
@@ -53,6 +60,7 @@
     "@tryghost/timezone-data": "0.4.18",
     "@uiw/react-codemirror": "4.25.2",
     "clsx": "2.1.1",
+    "jszip": "^3.10.1",
     "lucide-react": "0.577.0",
     "mingo": "2.5.3",
     "react": "18.3.1",

apps/admin-x-settings/src/components/providers/settings-router.tsx

@@ -7,6 +7,7 @@ export const modalPaths: {[key: string]: ModalName} = {
     'design/change-theme': 'DesignAndThemeModal',
     'design/edit': 'DesignAndThemeModal',
     'theme/install': 'DesignAndThemeModal', // this is a special route, because it can install a theme directly from the Ghost Marketplace
+    'theme/edit/:name': 'DesignAndThemeModal',
     'navigation/edit': 'NavigationModal',
     'staff/invite': 'InviteUserModal',
     'staff/:slug/social-links': 'UserDetailModal',

apps/admin-x-settings/src/components/settings/site/change-theme.tsx

@@ -1,16 +1,17 @@
 import NiceModal from '@ebay/nice-modal-react';
 import React, {useEffect, useState} from 'react';
 import TopLevelGroup from '../../top-level-group';
-import {Button, LimitModal, SettingGroupContent, withErrorBoundary} from '@tryghost/admin-x-design-system';
-import {type Theme, useBrowseThemes} from '@tryghost/admin-x-framework/api/themes';
+import {Button, Heading, LimitModal, Menu, SettingGroupContent, withErrorBoundary} from '@tryghost/admin-x-design-system';
+import {type Theme, isDefaultOrLegacyTheme, useBrowseThemes} from '@tryghost/admin-x-framework/api/themes';
+import {downloadFile, getGhostPaths} from '@tryghost/admin-x-framework/helpers';
 import {useCheckThemeLimitError} from '../../../hooks/use-check-theme-limit-error';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 
 const ChangeTheme: React.FC<{ keywords: string[] }> = ({keywords}) => {
     const [themeLimitError, setThemeLimitError] = useState<string|null>(null);
     const [isCheckingLimit, setIsCheckingLimit] = useState(false);
     const {checkThemeLimitError} = useCheckThemeLimitError();
-    const {updateRoute} = useRouting();
+    const {route, updateRoute} = useRouting();
     const {data: themesData} = useBrowseThemes();
     const activeTheme = themesData?.themes.find((theme: Theme) => theme.active);
 
@@ -41,21 +42,73 @@ const ChangeTheme: React.FC<{ keywords: string[] }> = ({keywords}) => {
         }
     };
 
+    const openThemeEditor = async () => {
+        if (!activeTheme) {
+            return;
+        }
+
+        const limitError = await checkThemeLimitError(isDefaultOrLegacyTheme(activeTheme) ? '.' : activeTheme.name);
+
+        if (limitError) {
+            NiceModal.show(LimitModal, {
+                prompt: limitError,
+                onOk: () => updateRoute({route: '/pro', isExternal: true})
+            });
+            return;
+        }
+
+        updateRoute(`theme/edit/${encodeURIComponent(activeTheme.name)}?from=${encodeURIComponent(route ?? '')}`);
+    };
+
+    const downloadTheme = () => {
+        if (!activeTheme) {
+            return;
+        }
+
+        const {apiRoot} = getGhostPaths();
+        downloadFile(`${apiRoot}/themes/${activeTheme.name}/download`);
+    };
+
+    const themeMenuItems = [
+        {
+            id: 'edit-code',
+            label: 'Edit code',
+            onClick: openThemeEditor
+        },
+        {
+            id: 'download',
+            label: 'Download',
+            onClick: downloadTheme
+        }
+    ];
+
     const values = (
-        <SettingGroupContent
-            values={[
-                {
-                    heading: 'Active theme',
-                    key: 'active-theme',
-                    value: activeTheme ? `${activeTheme.name} (v${activeTheme.package?.version || '1.0'})` : 'Loading...'
-                }
-            ]}
-        />
+        <SettingGroupContent>
+            <div className='flex flex-col'>
+                <Heading grey={false} level={6}>Active theme</Heading>
+                <div className='mt-1 flex w-full items-center justify-between gap-4'>
+                    <div>{activeTheme ? `${activeTheme.name} (v${activeTheme.package?.version || '1.0'})` : 'Loading...'}</div>
+                    <div className='-mr-3'>
+                        <Menu
+                            items={themeMenuItems}
+                            position='end'
+                            triggerButtonProps={{
+                                disabled: !activeTheme,
+                                iconColorClass: 'text-base',
+                                size: 'sm'
+                            }}
+                        />
+                    </div>
+                </div>
+            </div>
+        </SettingGroupContent>
     );
 
     return (
         <TopLevelGroup
-            customButtons={<Button className='mt-[-5px]' color='clear' label='Change theme' size='sm' onClick={openPreviewModal}/>}
+            customButtons={
+                <Button className='mt-[-5px]' color='clear' label='Change theme' size='sm' onClick={openPreviewModal} />
+            }
             description="Browse and install official themes or upload one"
             keywords={keywords}
             navid='theme'