import { FC, PropsWithChildren, useContext, useState } from 'react'; import CodeMirror, { BasicSetupOptions } from '@uiw/react-codemirror'; import { langs } from '@uiw/codemirror-extensions-langs'; import styled from 'styled-components'; import { useTheme } from '../../../utils/useTheme'; import { PageWarpper } from '..'; import { MdContext } from '../../theme/Preview'; const Label = styled.label` user-select: none; white-space: nowrap; `; export const Options: FC< PropsWithChildren, HTMLInputElement>> > = ({ children, ...props }) => { return ( {children} ); }; const Warpper = styled.div` padding-bottom: 32px; `; export const BasicSetupExample = () => { const { theme } = useTheme(); const [basicSetup, setBasicSetup] = useState({}); const mdData = useContext(MdContext); return ( setBasicSetup({ ...basicSetup, lineNumbers: evn.target.checked })} > lineNumbers setBasicSetup({ ...basicSetup, foldGutter: evn.target.checked })} > foldGutter setBasicSetup({ ...basicSetup, highlightActiveLineGutter: evn.target.checked })} > highlightActiveLineGutter setBasicSetup({ ...basicSetup, highlightSpecialChars: evn.target.checked })} > highlightSpecialChars setBasicSetup({ ...basicSetup, history: evn.target.checked })} > history setBasicSetup({ ...basicSetup, drawSelection: evn.target.checked })} > drawSelection setBasicSetup({ ...basicSetup, dropCursor: evn.target.checked })} > dropCursor setBasicSetup({ ...basicSetup, allowMultipleSelections: evn.target.checked })} > allowMultipleSelections setBasicSetup({ ...basicSetup, indentOnInput: evn.target.checked })} > indentOnInput setBasicSetup({ ...basicSetup, syntaxHighlighting: evn.target.checked })} > syntaxHighlighting setBasicSetup({ ...basicSetup, bracketMatching: evn.target.checked })} > bracketMatching setBasicSetup({ ...basicSetup, closeBrackets: evn.target.checked })} > closeBrackets setBasicSetup({ ...basicSetup, autocompletion: evn.target.checked })} > autocompletion setBasicSetup({ ...basicSetup, rectangularSelection: evn.target.checked })} > rectangularSelection setBasicSetup({ ...basicSetup, crosshairCursor: evn.target.checked })} > crosshairCursor setBasicSetup({ ...basicSetup, highlightActiveLine: evn.target.checked })} > highlightActiveLine setBasicSetup({ ...basicSetup, highlightSelectionMatches: evn.target.checked })} > highlightSelectionMatches setBasicSetup({ ...basicSetup, closeBracketsKeymap: evn.target.checked })} > closeBracketsKeymap setBasicSetup({ ...basicSetup, defaultKeymap: evn.target.checked })} > defaultKeymap setBasicSetup({ ...basicSetup, searchKeymap: evn.target.checked })} > searchKeymap setBasicSetup({ ...basicSetup, historyKeymap: evn.target.checked })} > historyKeymap setBasicSetup({ ...basicSetup, foldKeymap: evn.target.checked })} > foldKeymap setBasicSetup({ ...basicSetup, completionKeymap: evn.target.checked })} > completionKeymap setBasicSetup({ ...basicSetup, lintKeymap: evn.target.checked })} > lintKeymap ); };