From 3be5818df33e60b4425aaca3cc87a5771f3e2c94 Mon Sep 17 00:00:00 2001 From: Eric Cabrel TIOGO Date: Wed, 9 Nov 2022 23:21:41 +0100 Subject: [PATCH] feat(snippet): manually select the language of a code snippet --- .../directory/snippets/form/create-snippet.tsx | 4 +++- .../snippets/form/editor/hooks/use-form-editor.ts | 5 +++-- .../directory/snippets/form/editor/index.tsx | 10 +++++++++- .../src/components/directory/snippets/form/utils.ts | 11 +++++++++++ .../directory/snippets/form/view-snippet.tsx | 6 +++++- packages/front/src/forms/select-input.tsx | 7 +++++-- packages/front/src/typings/snippet-form.ts | 1 + packages/front/src/utils/snippets.ts | 2 +- 8 files changed, 38 insertions(+), 8 deletions(-) create mode 100644 packages/front/src/components/directory/snippets/form/utils.ts diff --git a/packages/front/src/components/directory/snippets/form/create-snippet.tsx b/packages/front/src/components/directory/snippets/form/create-snippet.tsx index 33308f9e..8b6c9ba4 100644 --- a/packages/front/src/components/directory/snippets/form/create-snippet.tsx +++ b/packages/front/src/components/directory/snippets/form/create-snippet.tsx @@ -11,6 +11,7 @@ import { extractLanguageFromName, lineHighlightToString } from '../../../../util import { useToast } from '../../../toast/provider'; import { SnippetTextEditor } from './editor'; import { SnippetFormValues, formSchema } from './form-schema'; +import { generateSnippetLanguageOptions } from './utils'; type Props = { closeModal: () => void; @@ -65,7 +66,7 @@ console.log(content);`, contentHighlighted: values.codeHighlighted, description: values.description, folderId, - language: extractLanguageFromName(values.name), + language: values.language?.id ?? extractLanguageFromName(values.name), lineHighlight: lineHighlightToString(values.lineHighlight), name: values.name, theme: values.theme.id, @@ -117,6 +118,7 @@ console.log(content);`, diff --git a/packages/front/src/components/directory/snippets/form/editor/hooks/use-form-editor.ts b/packages/front/src/components/directory/snippets/form/editor/hooks/use-form-editor.ts index dedfe5d1..4117a217 100644 --- a/packages/front/src/components/directory/snippets/form/editor/hooks/use-form-editor.ts +++ b/packages/front/src/components/directory/snippets/form/editor/hooks/use-form-editor.ts @@ -20,11 +20,12 @@ export const useFormEditor = () => { const code = watch('code'); const name = watch('name'); const theme = watch('theme'); + const language = watch('language'); const lineHighlight = watch('lineHighlight'); const codeHighlight = watch('codeHighlight'); const isSnippetPrivate = watch('isPrivate'); - const language = getLanguageFromExtension(name); + const codeLanguage = language?.id ?? getLanguageFromExtension(name); useEffect(() => { const lineHighlightClone = new Map(lineHighlight); @@ -56,7 +57,7 @@ export const useFormEditor = () => { }, [codeHighlight]); const onHighlight = (highlighter?: Highlighter) => (code: string) => { - return highlightSnippet({ code, highlighter, language, lineHighlight, theme: theme.id }); + return highlightSnippet({ code, highlighter, language: codeLanguage, lineHighlight, theme: theme.id }); }; return { diff --git a/packages/front/src/components/directory/snippets/form/editor/index.tsx b/packages/front/src/components/directory/snippets/form/editor/index.tsx index 3e843ae6..c6c80927 100644 --- a/packages/front/src/components/directory/snippets/form/editor/index.tsx +++ b/packages/front/src/components/directory/snippets/form/editor/index.tsx @@ -13,10 +13,11 @@ import { useFormEditor } from './hooks/use-form-editor'; type Props = { codeHighlightOptions: SelectOption[]; highlighter?: Highlighter; + languageOptions: SelectOption[]; themeOptions: SelectOption[]; }; -const SnippetTextEditor = ({ codeHighlightOptions, highlighter, themeOptions }: Props) => { +const SnippetTextEditor = ({ codeHighlightOptions, highlighter, languageOptions, themeOptions }: Props) => { const { control, setValue } = useFormContext(); const { code, handleEditorSelect, isSnippetPrivate, onHighlight, theme } = useFormEditor(); @@ -55,6 +56,13 @@ const SnippetTextEditor = ({ codeHighlightOptions, highlighter, themeOptions }: />
+ ( + + )} + /> { + return BUNDLED_LANGUAGES.map((language) => ({ + id: language.id, + label: capitalize(language.id), + })); +}; diff --git a/packages/front/src/components/directory/snippets/form/view-snippet.tsx b/packages/front/src/components/directory/snippets/form/view-snippet.tsx index e72ad3ca..1894301c 100644 --- a/packages/front/src/components/directory/snippets/form/view-snippet.tsx +++ b/packages/front/src/components/directory/snippets/form/view-snippet.tsx @@ -10,6 +10,7 @@ import { extractLanguageFromName, lineHighlightToString } from '../../../../util import { useToast } from '../../../toast/provider'; import { SnippetTextEditor } from './editor'; import { SnippetFormValues, formSchema } from './form-schema'; +import { generateSnippetLanguageOptions } from './utils'; type Props = { snippet: SnippetItem; @@ -42,13 +43,15 @@ const ViewSnippet = ({ snippet }: Props) => { }); const submitUpdateSnippet = async (values: SnippetFormValues) => { + console.log('Values => ', values); + await updateSnippet({ id: snippet.id, input: { content: values.code, contentHighlighted: values.codeHighlighted, description: values.description, - language: extractLanguageFromName(values.name), + language: values.language?.id ?? extractLanguageFromName(values.name), lineHighlight: lineHighlightToString(values.lineHighlight), name: values.name, theme: values.theme.id, @@ -68,6 +71,7 @@ const ViewSnippet = ({ snippet }: Props) => { diff --git a/packages/front/src/forms/select-input.tsx b/packages/front/src/forms/select-input.tsx index 6b9e99f2..95a1ac11 100644 --- a/packages/front/src/forms/select-input.tsx +++ b/packages/front/src/forms/select-input.tsx @@ -10,11 +10,12 @@ type Props = { label?: string; onChange: (value: SelectOption) => void; options: SelectOption[]; + placeholder?: string; value?: SelectOption; }; const SelectInput = forwardRef((props: Props, ref) => { - const { className = 'w-40', label, onChange, options, value: selectedValue } = props; + const { className = 'w-40', label, onChange, options, placeholder = 'Select value...', value: selectedValue } = props; const generateOptionClasses = (isActive: boolean) => { return classNames( @@ -35,7 +36,9 @@ const SelectInput = forwardRef((props: Props, ref) => { {label && {label}}
- {selectedValue?.label} + + {selectedValue?.label ?? placeholder} + diff --git a/packages/front/src/typings/snippet-form.ts b/packages/front/src/typings/snippet-form.ts index 7cb11a24..dfc766b3 100644 --- a/packages/front/src/typings/snippet-form.ts +++ b/packages/front/src/typings/snippet-form.ts @@ -26,6 +26,7 @@ export type EditorFormValues = { codeHighlighted: string; description: string; isPrivate: boolean; + language: SelectOption; lineHighlight: Array<[number, string]>; name: string; theme: SelectOption; diff --git a/packages/front/src/utils/snippets.ts b/packages/front/src/utils/snippets.ts index 30cd8e8d..5057f3af 100644 --- a/packages/front/src/utils/snippets.ts +++ b/packages/front/src/utils/snippets.ts @@ -4,7 +4,7 @@ export const lineHighlightToString = (value: Array<[number, string]>) => { export const extractLanguageFromName = (name: string): string => { if (!name.includes('.')) { - return 'plain'; + return 'txt'; } const nameArrayPart = name.split('.');