Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Updated AdminX CodeMirror styles to work better in dark mode (#18701)

Browse source 
refs https://github.com/TryGhost/Product/issues/3831

---

### <samp>🤖 Generated by Copilot at ea48006</samp>

Refactored the `CodeEditor` component to use Tailwind CSS and added a
`className` prop for custom styling. Applied the `className` prop to the
`CodeEditor` instances in the `CodeInjection` component to improve the
layout.
This commit is contained in:
Jono M 2023-10-19 14:12:54 +01:00 • committed by GitHub
parent 489fae98eb
commit 678ee99e87
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
apps/admin-x-settings/src/admin-x-ds/global/form/CodeEditorView.tsx
View file

@ -3,7 +3,6 @@ import Heading from '../Heading';
import Hint from '../Hint';
import React, {FocusEventHandler, forwardRef, useEffect, useId, useRef, useState} from 'react';
import clsx from 'clsx';
import {EditorView} from '@codemirror/view';
import {Extension} from '@codemirror/state';
import {useFocusContext} from '../../providers/DesignSystemProvider';
@ -18,15 +17,18 @@ export interface CodeEditorProps extends Omit<ReactCodeMirrorProps, 'value' | 'o
onChange?: (value: string) => void;
}
const theme = EditorView.theme({
'& .cm-scroller': {
fontFamily: 'Consolas, Liberation Mono, Menlo, Courier, monospace'
},
'& .cm-activeLine, & .cm-activeLineGutter': {
backgroundColor: 'transparent'
}
});
const codeMirrorClasses = [
'[&_.cm-editor]:bg-transparent',
'[&_.cm-editor]:border-transparent',
'[&_.cm-scroller]:font-mono',
'[&_.cm-scroller]:border-transparent',
'[&_.cm-activeLine]:bg-transparent',
'[&_.cm-activeLineGutter]:bg-transparent',
'[&_.cm-gutters]:bg-grey-75 dark:[&_.cm-gutters]:bg-grey-950',
'[&_.cm-gutters]:text-grey-600 dark:[&_.cm-gutters]:text-grey-500',
'[&_.cm-gutters]:border-grey-500 dark:[&_.cm-gutters]:border-grey-800',
'[&_.cm-cursor]:border-grey-900 dark:[&_.cm-cursor]:border-grey-75'
].join(' ');
// Meant to be imported asynchronously to avoid including CodeMirror in the main bundle
const CodeEditorView = forwardRef<ReactCodeMirrorRef, CodeEditorProps>(function CodeEditorView({
@ -40,6 +42,7 @@ const CodeEditorView = forwardRef<ReactCodeMirrorRef, CodeEditorProps>(function
onChange,
onFocus,
onBlur,
className,
...props
}, ref) {
const id = useId();
@ -75,9 +78,11 @@ const CodeEditorView = forwardRef<ReactCodeMirrorRef, CodeEditorProps>(function
let styles = clsx(
'peer order-2 w-full max-w-full overflow-hidden rounded-sm border',
clearBg ? 'bg-transparent' : 'bg-grey-75',
error ? 'border-red' : 'border-grey-500 hover:border-grey-700 focus:border-grey-800',
error ? 'border-red' : 'border-grey-500 dark:border-grey-800',
title && 'mt-2',
height === 'full' && 'h-full'
height === 'full' && 'h-full',
codeMirrorClasses,
className
);
return <>
@ -88,7 +93,6 @@ const CodeEditorView = forwardRef<ReactCodeMirrorRef, CodeEditorProps>(function
className={styles}
extensions={resolvedExtensions}
height={height === 'full' ? '100%' : height}
theme={theme}
value={value}
onBlur={handleBlur}
onChange={onChange}

4
apps/admin-x-settings/src/components/settings/advanced/CodeInjection.tsx
View file

@ -48,12 +48,12 @@ const CodeInjection: React.FC<{ keywords: string[] }> = ({keywords}) => {
{
id: 'header',
title: 'Site header',
contents: (<CodeEditor {...headerProps} ref={headerEditorRef} data-testid='header-code' autoFocus />)
contents: (<CodeEditor {...headerProps} ref={headerEditorRef} className='mt-2' data-testid='header-code' autoFocus />)
},
{
id: 'footer',
title: 'Site footer',
contents: (<CodeEditor {...footerProps} ref={footerEditorRef} data-testid='footer-code' />)
contents: (<CodeEditor {...footerProps} ref={footerEditorRef} className='mt-2' data-testid='footer-code' />)
}
] as const;