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

21
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 { InlineMath, BlockMath } from "react-katex";
import { Edit, Save } from "lucide-react";
import Link from "next/link";
function MathEquationBlockComponent(props: any) {
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 handleEquationChange = (event: React.ChangeEvent<any>) => {
@ -36,12 +37,16 @@ function MathEquationBlockComponent(props: any) {
)}
<BlockMath>{equation}</BlockMath>
{isEditing && (
<EditBar>
<input value={equation} onChange={handleEquationChange} placeholder="Insert a Math Equation (LaTeX) " type="text" />
<button onClick={() => saveEquation()}>
<Save size={15}></Save>
</button>
</EditBar>
<>
<EditBar>
<input value={equation} onChange={handleEquationChange} placeholder="Insert a Math Equation (LaTeX) " type="text" />
<button onClick={() => saveEquation()}>
<Save size={15}></Save>
</button>
</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>
</NodeViewWrapper>
@ -63,7 +68,7 @@ const MathEqWrapper = styled.div`
const MathEqTopMenu = styled.div`
display: flex;
justify-content: flex-end;
justify-content: flex-start;
button {
margin-left: 10px;
cursor: pointer;

2
front/components/Editor/Toolbar/ToolbarButtons.tsx
View file

@ -110,7 +110,7 @@ export const ToolbarButtons = ({ editor, props }: any) => {
.chain()
.focus()
.insertContent({
type: "blockMathEquation",
type: "blockMathEquation",
})
.run()
}