Disabled Codemirror searchKeymap in Admin X (#19423)

refs https://linear.app/tryghost/issue/PROD-287/cmdf-in-code-injection

- wired in the default basicSetup and then explicitly disable the search
keymap to avoid cmd+f triggering the codemirror search and instead
brings up the default browser finder.
This commit is contained in:
Ronald Langeveld 2024-01-02 19:34:30 +02:00 committed by GitHub
parent 9e2558931f
commit d06a1a4e5b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,5 +1,5 @@
import {Extension} from '@codemirror/state'; import {Extension} from '@codemirror/state';
import CodeMirror, {ReactCodeMirrorProps, ReactCodeMirrorRef} from '@uiw/react-codemirror'; import CodeMirror, {ReactCodeMirrorProps, ReactCodeMirrorRef, BasicSetupOptions} from '@uiw/react-codemirror';
import clsx from 'clsx'; import clsx from 'clsx';
import React, {FocusEventHandler, forwardRef, useEffect, useId, useRef, useState} from 'react'; import React, {FocusEventHandler, forwardRef, useEffect, useId, useRef, useState} from 'react';
import {useFocusContext} from '../../providers/DesignSystemProvider'; import {useFocusContext} from '../../providers/DesignSystemProvider';
@ -49,6 +49,9 @@ const CodeEditorView = forwardRef<ReactCodeMirrorRef, CodeEditorProps>(function
const sizeRef = useRef<HTMLDivElement>(null); const sizeRef = useRef<HTMLDivElement>(null);
const [width, setWidth] = useState(100); const [width, setWidth] = useState(100);
const [resolvedExtensions, setResolvedExtensions] = React.useState<Extension[] | null>(null); const [resolvedExtensions, setResolvedExtensions] = React.useState<Extension[] | null>(null);
const [basicSetup, setBasicSetup] = useState<BasicSetupOptions>({
crosshairCursor: false
});
const {setFocusState} = useFocusContext(); const {setFocusState} = useFocusContext();
const handleFocus: FocusEventHandler<HTMLDivElement> = (e) => { const handleFocus: FocusEventHandler<HTMLDivElement> = (e) => {
@ -63,6 +66,7 @@ const CodeEditorView = forwardRef<ReactCodeMirrorRef, CodeEditorProps>(function
useEffect(() => { useEffect(() => {
Promise.all(extensions).then(setResolvedExtensions); Promise.all(extensions).then(setResolvedExtensions);
setBasicSetup(setup => ({setup, searchKeymap: false}));
}, [extensions]); }, [extensions]);
useEffect(() => { useEffect(() => {
@ -90,6 +94,7 @@ const CodeEditorView = forwardRef<ReactCodeMirrorRef, CodeEditorProps>(function
{resolvedExtensions && <div className={height === 'full' ? 'h-full' : ''} style={{width}}> {resolvedExtensions && <div className={height === 'full' ? 'h-full' : ''} style={{width}}>
<CodeMirror <CodeMirror
ref={ref} ref={ref}
basicSetup={basicSetup}
className={styles} className={styles}
extensions={resolvedExtensions} extensions={resolvedExtensions}
height={height === 'full' ? '100%' : height} height={height === 'full' ? '100%' : height}