Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

markdown render idea working #1713

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

markdown render idea working #1713

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ca40bac
markdown render idea working
Erichseen Feb 25, 2025
de05df3
Merge branch 'master' into 1674-implement-markdown-support-on-intervi…
Erichseen Feb 26, 2025
d763e5d
css - textarea and markdown
Erichseen Mar 4, 2025
04c91e7
Rendered markdown scrollable css
Erichseen Mar 6, 2025
87e780b
Made div button like
Erichseen Mar 6, 2025
68d2443
camelCase
Erichseen Mar 6, 2025
3269b74
Merge branch 'master' into 1674-implement-markdown-support-on-intervi…
Erichseen Mar 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions ...inPage/components/RecruitmentInterviewNotesForm/RecruitmentInterviewNotesForm.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
.textBox,
.markdownBox {
min-height: 550px;
max-height: 550px; /* Add max-height to enable scrolling */
margin: 10px;
Comment on lines +2 to +5
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nå har jeg ikke sett så nøye på dette, men dette kan nok løses med padding og/eller gap. Tror det er en bedre løsning. Forklaring på hvorfor jeg foretrekker det finner du her

https://dev.to/moruno21/dont-use-margin-in-css-33f9

font-size: 16px;
line-height: 1.5;
Comment on lines +6 to +7
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Er dette forskjellig fra default?

padding: 8px 12px;
display: block;
font-family: inherit;
Comment on lines +9 to +10
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Er ikke begge disse default?

color: #333333;
background-color: #ffffff;
border: 1px solid #cccccc;
Comment on lines +11 to +13
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Vi pleier å prøve å bruke farger fra 'constants' filen. Bare så fargene skal være konsekvente. Det gjør du ved å skrive:

// øvers i filen
@import 'src/constants'

//bruk av farger, f. eks.
color: $grey;

Se i "constants.scss" filen for å se alle fargene

border-radius: 4px;
resize: vertical;
box-sizing: border-box;
Comment on lines +15 to +16
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mulig box-sizing er default i prosjektet (Er ikke det generelt i css, men burde vært det). Da trenger du ikke definere det på nytt her

width: 100%;
overflow-y: auto; /* Enable vertical scrolling */
}

.markdownBox {
cursor: pointer; /* Add cursor pointer to indicate it's clickable */
}
Comment on lines +21 to +23
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dette er vel ikke nødvendig nå som det er en button?


.markdownContent {
/* stylelint-disable-next-line selector-max-type */
p,
pre {
margin: 0;
}

/* Make sure content doesn't overflow horizontally */
width: 100%;
box-sizing: border-box;
Comment on lines +33 to +34
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Jeg tror box-sizing: border-box er default i hele prosjektet, så det skal nok ikke ha noe å si her. Må innrømme at jeg ikke er 100% sikker, så ville testa det ut 😅

overflow-wrap: break-word; /* Ensure long words don't overflow */
}
59 changes: 51 additions & 8 deletions ...icantAdminPage/components/RecruitmentInterviewNotesForm/RecruitmentInterviewNotesForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { useMutation } from '@tanstack/react-query';
import { useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'react-toastify';
import { z } from 'zod';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, Textarea } from '~/Components';
import { SamfMarkdown } from '~/Components/SamfMarkdown';
import { putRecrutmentInterviewNotes } from '~/api';
import { KEY } from '~/i18n/constants';
import styles from './RecruitmentInterviewNotesForm.module.scss';

const recruitmentNotesSchema = z.object({
notes: z.string(),
Expand All @@ -24,6 +26,7 @@ interface RecruitmentInterviewNotesFormProps {
export function RecruitmentInterviewNotesForm({ initialData, interviewId }: RecruitmentInterviewNotesFormProps) {
const { t } = useTranslation();
const [currentNotes, setCurrentNotes] = useState(initialData.notes || '');
const [markdownState, setMarkdownState] = useState<boolean>(false);
const form = useForm<RecruitmentInterviewNotesFormType>({
resolver: zodResolver(recruitmentNotesSchema),
defaultValues: {
Expand All @@ -43,9 +46,25 @@ export function RecruitmentInterviewNotesForm({ initialData, interviewId }: Recr
},
});

const textareaRef = useRef<HTMLTextAreaElement>(null);

useEffect(() => {
if (markdownState && textareaRef.current) {
const textarea = textareaRef.current;
textarea.focus();
// Set cursor position to end of text
textarea.setSelectionRange(textarea.value.length, textarea.value.length);
}
}, [markdownState]);

const handleFocus = () => {
setMarkdownState(true);
};

const handleNotesChange = (newNotes: string) => {
if (newNotes !== currentNotes && interviewId) {
setCurrentNotes(newNotes);

handleUpdateNotes.mutate({ notes: newNotes, interviewId });
}
};
Expand All @@ -61,13 +80,37 @@ export function RecruitmentInterviewNotesForm({ initialData, interviewId }: Recr
<FormItem>
<FormLabel>{t(KEY.recruitment_interview_notes)}</FormLabel>
<FormControl>
<Textarea
{...field}
onBlur={(newNotes) => {
field.onBlur(); // Call the default onBlur handler from react-hook-form
handleNotesChange(newNotes.target.value); // Call your custom function on blur
}}
/>
<div>
{markdownState ? (
<Textarea
{...field}
ref={textareaRef}
className={styles.textBox}
onBlur={(newNotes) => {
field.onBlur(); // Call the default onBlur handler from react-hook-form
handleNotesChange(newNotes.target.value); // Call your custom function on blur
Comment on lines +90 to +91
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dette er nok ikke helt din skyld, men tror jeg hadde foretrukket (om mulig) at vi ikke forholdt oss til "newNotes", men heller bare forholdt oss til verdien til feltet i formet. Vet ikke om det funker med conditional rendering?

setMarkdownState(false);
}}
/>
) : (
<div
onClick={handleFocus}
className={styles.markdownBox}
// biome-ignore lint/a11y/useSemanticElements: <explanation>
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
handleFocus();
}
}}
>
<div className={styles.markdownContent}>
<SamfMarkdown>{currentNotes}</SamfMarkdown>
</div>
</div>
)}
</div>
</FormControl>
<FormMessage />
</FormItem>
Expand Down
Loading