innocuous-symmetry/recipe-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved rich text editor

Browse Source
This commit is contained in:
Mikayla Dobson
2022-12-08 17:22:29 -06:00
parent 836b10379d
commit b40bcdf648
7 changed files with 77 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/index.html
View File

@@ -3,12 +3,12 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RECIPIN | Personal Recipe Manager</title> <title>RECIPIN | Personal Recipe Manager</title>
</head> </head>
<body> <body>
<div id="root"></div> <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> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

2
client/package.json
View File

@@ -9,10 +9,10 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@tinymce/tinymce-react": "^4.2.0",
"axios": "^1.2.0", "axios": "^1.2.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-quill": "^2.0.0",
"react-router-dom": "^6.4.3", "react-router-dom": "^6.4.3",
"sass": "^1.56.1", "sass": "^1.56.1",
"uuid": "^9.0.0" "uuid": "^9.0.0"

1
client/src/App.tsx
View File

@@ -18,6 +18,7 @@ import AddRecipe from './components/pages/AddRecipe';
import CollectionBrowser from './components/pages/CollectionBrowser'; import CollectionBrowser from './components/pages/CollectionBrowser';
import { Navbar } from './components/ui'; import { Navbar } from './components/ui';
import './sass/App.scss' import './sass/App.scss'
import RichText from './components/ui/RichText';
function App() { function App() {
const [user, setUser] = useState<IAuthContext>({ user: undefined }); const [user, setUser] = useState<IAuthContext>({ user: undefined });

7
client/src/components/pages/AddRecipe.tsx
View File

@@ -1,7 +1,7 @@
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { useAuthContext } from "../../context/AuthContext"; import { useAuthContext } from "../../context/AuthContext";
import { IRecipe } from "../../schemas"; import { IRecipe } from "../../schemas";
import { Button, Divider, Form, Quill, Page, Panel } from "../ui" import { Button, Divider, Form, Page, Panel } from "../ui"
const AddRecipe = () => { const AddRecipe = () => {
const authContext = useAuthContext(); const authContext = useAuthContext();
@@ -35,9 +35,10 @@ const AddRecipe = () => {
parent: "AddRecipe", parent: "AddRecipe",
keys: ["name", "preptime", "ingredients", "description"], keys: ["name", "preptime", "ingredients", "description"],
labels: ["Recipe Name:", "Prep Time:", "Ingredients:", "Description:"], labels: ["Recipe Name:", "Prep Time:", "Ingredients:", "Description:"],
dataTypes: ['text', 'text', 'custom picker', 'QUILL'], dataTypes: ['text', 'text', 'custom picker', 'TINYMCE'],
initialState: input, initialState: input,
getState: getFormState getState: getFormState,
richTextInitialValue: "<p>Enter recipe details here!</p>"
}).mount() }).mount()
) )
}, [input.authoruserid]) }, [input.authoruserid])

43
client/src/components/ui/Form.tsx
View File

@@ -1,6 +1,6 @@
import { ChangeEvent, ChangeEventHandler } from "react"; import { ChangeEvent } from "react";
import { Quill } from '.'
import { v4 } from 'uuid'; import { v4 } from 'uuid';
import RichText from "./RichText";
/** /**
* For the generation of more complex form objects with * For the generation of more complex form objects with
@@ -16,15 +16,17 @@ export interface FormConfig<T> {
getState: (received: T) => void getState: (received: T) => void
labels?: string[] labels?: string[]
dataTypes?: string[] dataTypes?: string[]
richTextInitialValue?: string
} }
export default class Form<T>{ export default class Form<T>{
public parent: string; private parent: string;
public labels: string[]; private labels: string[];
public keys: string[]; private keys: string[];
public dataTypes: any[] private dataTypes: any[]
public state: T; private state: T;
public getState: (received: T) => void private getState: (received: T) => void
private richTextInitialValue?: string;
constructor(config: FormConfig<T>){ constructor(config: FormConfig<T>){
this.parent = config.parent; 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.dataTypes = config.dataTypes || new Array(this.keys.length).fill('text');
this.state = config.initialState; this.state = config.initialState;
this.getState = config.getState; this.getState = config.getState;
this.richTextInitialValue = config.richTextInitialValue;
} }
update(e: ChangeEvent<HTMLElement>, idx: number) { update(e: ChangeEvent<HTMLElement>, idx: number) {
let newState; let newState = {
if (this.dataTypes[idx] == 'QUILL') {
newState = {
...this.state,
[this.keys[idx]]: e
}
} else {
newState = {
...this.state, ...this.state,
[this.keys[idx]]: e.target['value' as keyof EventTarget] [this.keys[idx]]: e.target['value' as keyof EventTarget]
} }
}
this.state = newState; this.state = newState;
this.getState(newState); this.getState(newState);
} }
updateRichText(txt: string, idx: number) {
this.state = {
...this.state,
[this.keys[idx]]: txt
}
this.getState(this.state);
}
mount() { mount() {
let output = new Array<JSX.Element>(); let output = new Array<JSX.Element>();
@@ -65,11 +68,11 @@ export default class Form<T>{
this.dataTypes[i] = 'text'; this.dataTypes[i] = 'text';
} }
if (this.dataTypes[i] == 'QUILL') { if (this.dataTypes[i] == 'TINYMCE') {
input = ( input = (
<div id={`${this.parent}-row-${i}`} key={v4()}> <div id={`${this.parent}-row-${i}`} key={v4()}>
<label htmlFor={`${this.parent}-${this.keys[i]}`}>{this.labels[i]}</label> <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> </div>
) )
} else { } else {

22
client/src/components/ui/Quill.tsx
View File

@@ -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
View 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;