feat: md support

This commit is contained in:
Artemy 2022-10-17 14:58:38 +03:00
parent 45131e9cb9
commit 43d7601ea6
4 changed files with 1539 additions and 27 deletions

1528
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -12,6 +12,7 @@
"@heroicons/react": "^2.0.12", "@heroicons/react": "^2.0.12",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-markdown": "^8.0.3",
"react-router-dom": "^6.4.2" "react-router-dom": "^6.4.2"
}, },
"devDependencies": { "devDependencies": {

View file

@ -5,7 +5,7 @@ function CheckBox(props) {
className="form-check-input appearance-none h-3 w-5 checked:bg-blue-600 checked:border-blue-600 pr-3 border border-gray-300 rounded-lg mr-1" className="form-check-input appearance-none h-3 w-5 checked:bg-blue-600 checked:border-blue-600 pr-3 border border-gray-300 rounded-lg mr-1"
type="checkbox" type="checkbox"
id={props.id} id={props.id}
defaultChecked={true} defaultChecked={props.checked}
onClick={props.onClick} onClick={props.onClick}
/> />
<label className="form-check-label inline-block" htmlFor={props.id}> <label className="form-check-label inline-block" htmlFor={props.id}>

View file

@ -1,15 +1,33 @@
import { ButtonWithAction, IconWithButton } from "../components/button"; import { ButtonWithAction, IconWithButton } from "../components/button";
import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline"; import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
import { CheckBox } from "../components/checkbox"; import { CheckBox } from "../components/checkbox";
import { useState } from "react";
import ReactMarkdown from "react-markdown";
function CreateNote() { function CreateNote() {
const [preview, setPreview] = useState(false);
const [text, setText] = useState("");
return ( return (
<div> <div>
<h2 className="font-medium text-center lg:text-left leading-tight text-4xl mt-0 mb-2"> <div className="grid grid-cols-1 lg:grid-cols-2">
Написать записку <h2 className="font-medium text-center lg:text-left leading-tight text-4xl mt-0 mb-2">
</h2> Написать записку
</h2>
<CheckBox
className="justify-self-center lg:justify-self-end"
label="Предпросмотр"
id="preview"
onClick={() => setPreview(!preview)}
/>
</div>
<ReactMarkdown className={!preview ? "w-full hidden" : "w-full"}>
{text}
</ReactMarkdown>
<textarea <textarea
className=" className={`
form-control form-control
block block
w-full w-full
@ -31,10 +49,14 @@ function CreateNote() {
m-0 m-0
focus:border-blue-600 focus:border-blue-600
focus:outline-none focus:outline-none
" ${preview ? "hidden" : ""}
`}
rows="10" rows="10"
placeholder="Ваша записка начинается здесь..." placeholder="Ваша записка начинается здесь. Можно использовать markdown..."
maxLength={5000} maxLength={5000}
onChange={(e) => {
setText(e.target.value);
}}
></textarea> ></textarea>
<div className="grid grid-cols-1 lg:grid-cols-2 justify-items-center w-full"> <div className="grid grid-cols-1 lg:grid-cols-2 justify-items-center w-full">
<CheckBox <CheckBox
@ -42,6 +64,7 @@ function CreateNote() {
label="Публичная записка" label="Публичная записка"
id="public" id="public"
onClick={""} onClick={""}
checked
/> />
<div className="justify-self-center lg:justify-self-end"> <div className="justify-self-center lg:justify-self-end">
<ButtonWithAction className="m-5" onClick={""}> <ButtonWithAction className="m-5" onClick={""}>