rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: improve readability of the math extension

Browse source
This commit is contained in:
swve 2023-05-07 18:54:00 +02:00
parent 4feed27efe
commit 7dcb299d1d
2 changed files with 14 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

9
front/components/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx
View file

@ -4,10 +4,11 @@ import styled from "styled-components";
import "katex/dist/katex.min.css"; import "katex/dist/katex.min.css";
import { InlineMath, BlockMath } from "react-katex"; import { InlineMath, BlockMath } from "react-katex";
import { Edit, Save } from "lucide-react"; import { Edit, Save } from "lucide-react";
import Link from "next/link";
function MathEquationBlockComponent(props: any) { function MathEquationBlockComponent(props: any) {
const [equation, setEquation] = React.useState(props.node.attrs.math_equation); const [equation, setEquation] = React.useState(props.node.attrs.math_equation);
const [isEditing, setIsEditing] = React.useState(false); const [isEditing, setIsEditing] = React.useState(true);
const isEditable = props.extension.options.editable; const isEditable = props.extension.options.editable;
const handleEquationChange = (event: React.ChangeEvent<any>) => { const handleEquationChange = (event: React.ChangeEvent<any>) => {
@ -36,12 +37,16 @@ function MathEquationBlockComponent(props: any) {
)} )}
<BlockMath>{equation}</BlockMath> <BlockMath>{equation}</BlockMath>
{isEditing && ( {isEditing && (
<>
<EditBar> <EditBar>
<input value={equation} onChange={handleEquationChange} placeholder="Insert a Math Equation (LaTeX) " type="text" /> <input value={equation} onChange={handleEquationChange} placeholder="Insert a Math Equation (LaTeX) " type="text" />
<button onClick={() => saveEquation()}> <button onClick={() => saveEquation()}>
<Save size={15}></Save> <Save size={15}></Save>
</button> </button>
</EditBar> </EditBar>
<span className="pt-2 text-zinc-500 text-sm">Please refer to this <Link className="text-zinc-900 after:content-['↗']" href="https://katex.org/docs/supported.html" target="_blank"> guide</Link> for supported functions </span>
</>
)} )}
</MathEqWrapper> </MathEqWrapper>
</NodeViewWrapper> </NodeViewWrapper>
@ -63,7 +68,7 @@ const MathEqWrapper = styled.div`
const MathEqTopMenu = styled.div` const MathEqTopMenu = styled.div`
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-start;
button { button {
margin-left: 10px; margin-left: 10px;
cursor: pointer; cursor: pointer;