improved rich text editor
This commit is contained in:
Mikayla Dobson
@@ -3,12 +3,12 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/react-quill@1.3.3/dist/quill.snow.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>RECIPIN | Personal Recipe Manager</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="https://cdn.tiny.cloud/1/k3asjdgzefvw5fxz1og9pf737ehf5hzoxbkss5fafyxd3zae/tinymce/5/tinymce.min.js" referrerPolicy="origin"></script>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tinymce/tinymce-react": "^4.2.0",
|
||||
"axios": "^1.2.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-quill": "^2.0.0",
|
||||
"react-router-dom": "^6.4.3",
|
||||
"sass": "^1.56.1",
|
||||
"uuid": "^9.0.0"
|
||||
|
||||
@@ -18,6 +18,7 @@ import AddRecipe from './components/pages/AddRecipe';
|
||||
import CollectionBrowser from './components/pages/CollectionBrowser';
|
||||
import { Navbar } from './components/ui';
|
||||
import './sass/App.scss'
|
||||
import RichText from './components/ui/RichText';
|
||||
|
||||
function App() {
|
||||
const [user, setUser] = useState<IAuthContext>({ user: undefined });
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useAuthContext } from "../../context/AuthContext";
|
||||
import { IRecipe } from "../../schemas";
|
||||
import { Button, Divider, Form, Quill, Page, Panel } from "../ui"
|
||||
import { Button, Divider, Form, Page, Panel } from "../ui"
|
||||
|
||||
const AddRecipe = () => {
|
||||
const authContext = useAuthContext();
|
||||
@@ -35,9 +35,10 @@ const AddRecipe = () => {
|
||||
parent: "AddRecipe",
|
||||
keys: ["name", "preptime", "ingredients", "description"],
|
||||
labels: ["Recipe Name:", "Prep Time:", "Ingredients:", "Description:"],
|
||||
dataTypes: ['text', 'text', 'custom picker', 'QUILL'],
|
||||
dataTypes: ['text', 'text', 'custom picker', 'TINYMCE'],
|
||||
initialState: input,
|
||||
getState: getFormState
|
||||
getState: getFormState,
|
||||
richTextInitialValue: "<p>Enter recipe details here!</p>"
|
||||
}).mount()
|
||||
)
|
||||
}, [input.authoruserid])
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { ChangeEvent, ChangeEventHandler } from "react";
|
||||
import { Quill } from '.'
|
||||
import { ChangeEvent } from "react";
|
||||
import { v4 } from 'uuid';
|
||||
import RichText from "./RichText";
|
||||
|
||||
/**
|
||||
* For the generation of more complex form objects with
|
||||
@@ -16,15 +16,17 @@ export interface FormConfig<T> {
|
||||
getState: (received: T) => void
|
||||
labels?: string[]
|
||||
dataTypes?: string[]
|
||||
richTextInitialValue?: string
|
||||
}
|
||||
|
||||
export default class Form<T>{
|
||||
public parent: string;
|
||||
public labels: string[];
|
||||
public keys: string[];
|
||||
public dataTypes: any[]
|
||||
public state: T;
|
||||
public getState: (received: T) => void
|
||||
private parent: string;
|
||||
private labels: string[];
|
||||
private keys: string[];
|
||||
private dataTypes: any[]
|
||||
private state: T;
|
||||
private getState: (received: T) => void
|
||||
private richTextInitialValue?: string;
|
||||
|
||||
constructor(config: FormConfig<T>){
|
||||
this.parent = config.parent;
|
||||
@@ -33,27 +35,28 @@ export default class Form<T>{
|
||||
this.dataTypes = config.dataTypes || new Array(this.keys.length).fill('text');
|
||||
this.state = config.initialState;
|
||||
this.getState = config.getState;
|
||||
this.richTextInitialValue = config.richTextInitialValue;
|
||||
}
|
||||
|
||||
update(e: ChangeEvent<HTMLElement>, idx: number) {
|
||||
let newState;
|
||||
|
||||
if (this.dataTypes[idx] == 'QUILL') {
|
||||
newState = {
|
||||
...this.state,
|
||||
[this.keys[idx]]: e
|
||||
}
|
||||
} else {
|
||||
newState = {
|
||||
...this.state,
|
||||
[this.keys[idx]]: e.target['value' as keyof EventTarget]
|
||||
}
|
||||
let newState = {
|
||||
...this.state,
|
||||
[this.keys[idx]]: e.target['value' as keyof EventTarget]
|
||||
}
|
||||
|
||||
this.state = newState;
|
||||
this.getState(newState);
|
||||
}
|
||||
|
||||
updateRichText(txt: string, idx: number) {
|
||||
this.state = {
|
||||
...this.state,
|
||||
[this.keys[idx]]: txt
|
||||
}
|
||||
|
||||
this.getState(this.state);
|
||||
}
|
||||
|
||||
mount() {
|
||||
let output = new Array<JSX.Element>();
|
||||
|
||||
@@ -65,11 +68,11 @@ export default class Form<T>{
|
||||
this.dataTypes[i] = 'text';
|
||||
}
|
||||
|
||||
if (this.dataTypes[i] == 'QUILL') {
|
||||
if (this.dataTypes[i] == 'TINYMCE') {
|
||||
input = (
|
||||
<div id={`${this.parent}-row-${i}`} key={v4()}>
|
||||
<label htmlFor={`${this.parent}-${this.keys[i]}`}>{this.labels[i]}</label>
|
||||
<Quill id={`${this.parent}-${this.keys[i]}`} onChange={(e) => this.update(e, i)} />
|
||||
<RichText id={`${this.parent}-${this.keys[i]}`} initialValue={this.richTextInitialValue} getState={(txt) => this.updateRichText(txt, i)} />
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
import { ChangeEvent, FC, useEffect, useState } from "react"
|
||||
import ReactQuill from "react-quill"
|
||||
|
||||
interface QuillParams {
|
||||
id: string
|
||||
onChange: (params?: any) => any
|
||||
theme?: string
|
||||
}
|
||||
|
||||
const Quill: FC<QuillParams> = ({ id, onChange, theme = 'snow' }) => {
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
onChange(value);
|
||||
}, [value])
|
||||
|
||||
return (
|
||||
<ReactQuill id={id} theme={theme} value={value} onChange={setValue} />
|
||||
)
|
||||
}
|
||||
|
||||
export default Quill;
|
||||
45
client/src/components/ui/RichText.tsx
Normal file
45
client/src/components/ui/RichText.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { Editor } from "@tinymce/tinymce-react";
|
||||
import { FC, useEffect, useState } from "react";
|
||||
|
||||
interface RichTextProps {
|
||||
id: string
|
||||
initialValue?: string
|
||||
getState: (toSend: string) => void
|
||||
}
|
||||
|
||||
const RichText: FC<RichTextProps> = ({ id, initialValue, getState }) => {
|
||||
const [text, setText] = useState<any>();
|
||||
const [editorState, setEditorState] = useState<any>();
|
||||
|
||||
useEffect(() => {
|
||||
getState(text);
|
||||
}, [text])
|
||||
|
||||
const handleChange = (txt: string, editor: any) => {
|
||||
setText(txt);
|
||||
setEditorState(editor);
|
||||
}
|
||||
|
||||
return (
|
||||
<Editor
|
||||
onEditorChange={(txt, editor) => handleChange(txt, editor)}
|
||||
initialValue={initialValue || '<p></p>'}
|
||||
init={{
|
||||
height: 500,
|
||||
menubar: false,
|
||||
plugins: [
|
||||
'advlist autolink lists link image charmap print preview anchor',
|
||||
'searchreplace visualblocks code fullscreen',
|
||||
'insertdatetime media table paste code help wordcount'
|
||||
],
|
||||
toolbar: 'undo redo | formatselect | ' +
|
||||
'bold italic backcolor | alignleft aligncenter ' +
|
||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
||||
'removeformat | help',
|
||||
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default RichText;
|
||||
Reference in New Issue
Block a user