mirror of
https://github.com/artegoser/AnoPaper.git
synced 2024-11-06 04:53:56 +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",
|
"@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": {
|
||||||
|
|
|
@ -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}>
|
||||||
|
|
|
@ -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>
|
||||||
|
<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 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={""}>
|
||||||
|
|
Loading…
Reference in a new issue