feat(snippet): set the current language as the default when editing

tericcabrel · Nov 1, 2023 · 18db8b6 · 18db8b6
1 parent 3be5818
commit 18db8b6
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 13 deletions.
diff --git a/apps/web/src/styles/code-editor.css b/apps/web/src/styles/code-editor.css
@@ -4,7 +4,6 @@
 
 .code-editor-container textarea {
  outline: 0;
- caret-color: white;
  font-family: 'Inter', monospace !important;
  font-size: 14px;
  padding-left: 50px !important;

diff --git a/packages/front/src/components/directory/snippets/form/create-snippet.tsx b/packages/front/src/components/directory/snippets/form/create-snippet.tsx
@@ -27,12 +27,7 @@ const CreateSnippetContainer = ({ closeModal, folderId, open }: Props) => {
 
  const formMethods = useForm<SnippetFormValues>({
  defaultValues: {
- code: `import fs from "fs";
-import path from "path";
-
-const content= fs.readFileSync(path.resolve(__dirname, 'file.json'), { encoding: "utf-8" });
-
-console.log(content);`,
+ code: `// Write your code here...\n`,
  codeHighlight: CODE_HIGHLIGHT_OPTIONS[0],
  codeHighlighted: '',
  isPrivate: true,
@@ -45,7 +40,7 @@ console.log(content);`,
  const handleCloseModal = () => {
  closeModal();
  formMethods.reset({
- code: '',
+ code: '// Write your code here...\n',
  codeHighlight: CODE_HIGHLIGHT_OPTIONS[0],
  codeHighlighted: '',
  description: '',
@@ -58,8 +53,6 @@ console.log(content);`,
  };
 
  const submitCreateSnippet = async (values: SnippetFormValues) => {
- console.log('Values => ', values);
-
  await createSnippet({
  input: {
  content: values.code,

diff --git a/packages/front/src/components/directory/snippets/form/view-snippet.tsx b/packages/front/src/components/directory/snippets/form/view-snippet.tsx
@@ -4,6 +4,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import Button from '../../../../forms/button';
 import { useCodeHighlighter } from '../../../../hooks';
 import { useUpdateSnippet } from '../../../../services/snippets/update-snippet';
+import { SelectOption } from '../../../../typings/components';
 import { SnippetItem } from '../../../../typings/queries';
 import { CODE_HIGHLIGHT_OPTIONS, THEME_OPTIONS } from '../../../../utils/constants';
 import { extractLanguageFromName, lineHighlightToString } from '../../../../utils/snippets';
@@ -22,11 +23,16 @@ const selectCodeHighlightOptionValue = (theme: string) => {
  return themeOption ?? THEME_OPTIONS[0];
 };
 
+const selectLanguageOptionValue = (options: SelectOption[], language: string) => {
+ return options.find((option) => option.id === language);
+};
+
 const ViewSnippet = ({ snippet }: Props) => {
  const { highlighter } = useCodeHighlighter();
  const { toastError, toastSuccess } = useToast();
 
  const { isLoading, updateSnippet } = useUpdateSnippet(snippet.folderId);
+ const languageOptions = generateSnippetLanguageOptions();
 
  const formMethods = useForm<SnippetFormValues>({
  defaultValues: {
@@ -35,6 +41,7 @@ const ViewSnippet = ({ snippet }: Props) => {
  codeHighlighted: snippet.contentHighlighted,
  description: snippet.description ?? undefined,
  isPrivate: snippet.isPrivate,
+ language: selectLanguageOptionValue(languageOptions, snippet.language),
  lineHighlight: snippet.lineHighLight,
  name: snippet.name,
  theme: selectCodeHighlightOptionValue(snippet.theme),
@@ -43,8 +50,6 @@ const ViewSnippet = ({ snippet }: Props) => {
  });
 
  const submitUpdateSnippet = async (values: SnippetFormValues) => {
- console.log('Values => ', values);
-
  await updateSnippet({
  id: snippet.id,
  input: {
@@ -71,7 +76,7 @@ const ViewSnippet = ({ snippet }: Props) => {
  <FormProvider {...formMethods}>
  <SnippetTextEditor
  highlighter={highlighter}
- languageOptions={generateSnippetLanguageOptions()}
+ languageOptions={languageOptions}
  codeHighlightOptions={CODE_HIGHLIGHT_OPTIONS}
  themeOptions={THEME_OPTIONS}
  />