Ryan/docmost-ryan
1
0
Fork 0
mirror of https://github.com/Shadowfita/docmost.git synced 2025-11-09 20:12:00 +10:00
Code Issues Packages Projects Releases Wiki Activity

change math node attribute name

Browse Source
This commit is contained in:
Philipinho
2024-06-27 23:25:13 +01:00
parent bc7cd033f2
commit 52017b60ca
4 changed files with 26 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/client/src/features/editor/components/math/math-block.tsx
View File

@ -36,8 +36,8 @@ export default function MathBlockView(props: NodeViewProps) {
};
useEffect(() => {
renderMath(node.attrs.katex, mathResultContainer.current);
}, [node.attrs.katex]);
renderMath(node.attrs.text, mathResultContainer.current);
}, [node.attrs.text]);
useEffect(() => {
if (isEditing) {
@ -48,14 +48,14 @@ export default function MathBlockView(props: NodeViewProps) {
useEffect(() => {
if (debouncedPreview !== null) {
queueMicrotask(() => {
updateAttributes({ katex: debouncedPreview });
updateAttributes({ text: debouncedPreview });
});
}
}, [debouncedPreview]);
useEffect(() => {
setIsEditing(!!props.selected);
if (props.selected) setPreview(node.attrs.katex);
if (props.selected) setPreview(node.attrs.text);
}, [props.selected]);
return (
@ -77,7 +77,7 @@ export default function MathBlockView(props: NodeViewProps) {
props.selected ? classes.selected : "",
error ? classes.error : "",
(isEditing && !preview?.trim().length) ||
(!isEditing && !node.attrs.katex.trim().length)
(!isEditing && !node.attrs.text.trim().length)
? classes.empty
: "",
].join(" ")}
@ -93,7 +93,7 @@ export default function MathBlockView(props: NodeViewProps) {
ref={mathResultContainer}
></div>
{((isEditing && !preview?.trim().length) ||
(!isEditing && !node.attrs.katex.trim().length)) && (
(!isEditing && !node.attrs.text.trim().length)) && (
<div>Empty equation</div>
)}
{error && <div>Invalid equation</div>}

12
apps/client/src/features/editor/components/math/math-inline.tsx
View File

@ -30,22 +30,22 @@ export default function MathInlineView(props: NodeViewProps) {
};
useEffect(() => {
renderMath(node.attrs.katex, mathResultContainer.current);
}, [node.attrs.katex]);
renderMath(node.attrs.text, mathResultContainer.current);
}, [node.attrs.text]);
useEffect(() => {
if (isEditing) {
renderMath(preview || "", mathPreviewContainer.current);
} else if (preview !== null) {
queueMicrotask(() => {
updateAttributes({ katex: preview });
updateAttributes({ text: preview });
});
}
}, [preview, isEditing]);
useEffect(() => {
setIsEditing(!!props.selected);
if (props.selected) setPreview(node.attrs.katex);
if (props.selected) setPreview(node.attrs.text);
}, [props.selected]);
return (
@ -69,7 +69,7 @@ export default function MathInlineView(props: NodeViewProps) {
props.selected ? classes.selected : "",
error ? classes.error : "",
(isEditing && !preview?.trim().length) ||
(!isEditing && !node.attrs.katex.trim().length)
(!isEditing && !node.attrs.text.trim().length)
? classes.empty
: "",
].join(" ")}
@ -83,7 +83,7 @@ export default function MathInlineView(props: NodeViewProps) {
ref={mathResultContainer}
></div>
{((isEditing && !preview?.trim().length) ||
(!isEditing && !node.attrs.katex.trim().length)) && (
(!isEditing && !node.attrs.text.trim().length)) && (
<div>Empty equation</div>
)}
{error && <div>Invalid equation</div>}

10
packages/editor-ext/src/lib/math/math-block.ts
View File

@ -15,7 +15,7 @@ export interface MathBlockOptions {
}
export interface MathBlockAttributes {
katex: string;
text: string;
}
export const inputRegex = /(?:^|\s)((?:\$\$\$)((?:[^$]+))(?:\$\$\$))$/;
@ -34,7 +34,7 @@ export const MathBlock = Node.create({
addAttributes() {
return {
katex: {
text: {
default: "",
parseHTML: (element) => element.innerHTML.split("$")[1],
},
@ -56,7 +56,7 @@ export const MathBlock = Node.create({
return [
"div",
{},
["div", { "data-katex": true }, `$${HTMLAttributes.katex}$`],
["div", { "data-katex": true }, `$${HTMLAttributes.text}$`],
];
},
@ -65,7 +65,7 @@ export const MathBlock = Node.create({
},
renderText({ node }) {
return node.attrs.katex;
return node.attrs.text;
},
addCommands() {
@ -87,7 +87,7 @@ export const MathBlock = Node.create({
find: inputRegex,
type: this.type,
getAttributes: (match) => ({
katex: match[1].replaceAll("$", ""),
text: match[1].replaceAll("$", ""),
}),
}),
];

14
packages/editor-ext/src/lib/math/math-inline.ts
View File

@ -1,4 +1,4 @@
import { Node, nodeInputRule, wrappingInputRule } from "@tiptap/core";
import { Node, nodeInputRule } from "@tiptap/core";
import { ReactNodeViewRenderer } from "@tiptap/react";
declare module "@tiptap/core" {
@ -14,6 +14,10 @@ export interface MathInlineOption {
view: any;
}
export interface MathInlineAttributes {
text: string;
}
export const inputRegex = /(?:^|\s)((?:\$\$)((?:[^$]+))(?:\$\$))$/;
export const MathInline = Node.create<MathInlineOption>({
@ -31,7 +35,7 @@ export const MathInline = Node.create<MathInlineOption>({
addAttributes() {
return {
katex: {
text: {
default: "",
parseHTML: (element) => element.innerHTML.split("$")[1],
},
@ -53,12 +57,12 @@ export const MathInline = Node.create<MathInlineOption>({
return [
"div",
{},
["span", { "data-katex": true }, `$${HTMLAttributes.katex}$`],
["span", { "data-katex": true }, `$${HTMLAttributes.text}$`],
];
},
renderText({ node }) {
return node.attrs.katex;
return node.attrs.text;
},
addNodeView() {
@ -84,7 +88,7 @@ export const MathInline = Node.create<MathInlineOption>({
find: inputRegex,
type: this.type,
getAttributes: (match) => ({
katex: match[1].replaceAll("$", ""),
text: match[1].replaceAll("$", ""),
}),
}),
];