mirror of
https://github.com/artegoser/AnoPaper.git
synced 2024-11-21 19:36:22 +03:00
feat: md support
This commit is contained in:
parent
45131e9cb9
commit
43d7601ea6
4 changed files with 1539 additions and 27 deletions
1528
package-lock.json
generated
1528
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -12,6 +12,7 @@
|
|||
"@heroicons/react": "^2.0.12",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-markdown": "^8.0.3",
|
||||
"react-router-dom": "^6.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
@ -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"
|
||||
type="checkbox"
|
||||
id={props.id}
|
||||
defaultChecked={true}
|
||||
defaultChecked={props.checked}
|
||||
onClick={props.onClick}
|
||||
/>
|
||||
<label className="form-check-label inline-block" htmlFor={props.id}>
|
||||
|
|
|
@ -1,15 +1,33 @@
|
|||
import { ButtonWithAction, IconWithButton } from "../components/button";
|
||||
import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
|
||||
import { CheckBox } from "../components/checkbox";
|
||||
import { useState } from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
function CreateNote() {
|
||||
const [preview, setPreview] = useState(false);
|
||||
const [text, setText] = useState("");
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="font-medium text-center lg:text-left leading-tight text-4xl mt-0 mb-2">
|
||||
Написать записку
|
||||
</h2>
|
||||
<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>
|
||||
<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
|
||||
className="
|
||||
className={`
|
||||
form-control
|
||||
block
|
||||
w-full
|
||||
|
@ -31,10 +49,14 @@ function CreateNote() {
|
|||
m-0
|
||||
focus:border-blue-600
|
||||
focus:outline-none
|
||||
"
|
||||
${preview ? "hidden" : ""}
|
||||
`}
|
||||
rows="10"
|
||||
placeholder="Ваша записка начинается здесь..."
|
||||
placeholder="Ваша записка начинается здесь. Можно использовать markdown..."
|
||||
maxLength={5000}
|
||||
onChange={(e) => {
|
||||
setText(e.target.value);
|
||||
}}
|
||||
></textarea>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 justify-items-center w-full">
|
||||
<CheckBox
|
||||
|
@ -42,6 +64,7 @@ function CreateNote() {
|
|||
label="Публичная записка"
|
||||
id="public"
|
||||
onClick={""}
|
||||
checked
|
||||
/>
|
||||
<div className="justify-self-center lg:justify-self-end">
|
||||
<ButtonWithAction className="m-5" onClick={""}>
|
||||
|
|
Loading…
Add table
Reference in a new issue