Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2025-11-12 15:12:39 +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(() => { useEffect(() => {
renderMath(node.attrs.katex, mathResultContainer.current); renderMath(node.attrs.text, mathResultContainer.current);
}, [node.attrs.katex]); }, [node.attrs.text]);
useEffect(() => { useEffect(() => {
if (isEditing) { if (isEditing) {
@ -48,14 +48,14 @@ export default function MathBlockView(props: NodeViewProps) {
useEffect(() => { useEffect(() => {
if (debouncedPreview !== null) { if (debouncedPreview !== null) {
queueMicrotask(() => { queueMicrotask(() => {
updateAttributes({ katex: debouncedPreview }); updateAttributes({ text: debouncedPreview });
}); });
} }
}, [debouncedPreview]); }, [debouncedPreview]);
useEffect(() => { useEffect(() => {
setIsEditing(!!props.selected); setIsEditing(!!props.selected);
if (props.selected) setPreview(node.attrs.katex); if (props.selected) setPreview(node.attrs.text);
}, [props.selected]); }, [props.selected]);
return ( return (
@ -77,7 +77,7 @@ export default function MathBlockView(props: NodeViewProps) {
props.selected ? classes.selected : "", props.selected ? classes.selected : "",
error ? classes.error : "", error ? classes.error : "",
(isEditing && !preview?.trim().length) || (isEditing && !preview?.trim().length) ||
(!isEditing && !node.attrs.katex.trim().length) (!isEditing && !node.attrs.text.trim().length)
? classes.empty ? classes.empty
: "", : "",
].join(" ")} ].join(" ")}
@ -93,7 +93,7 @@ export default function MathBlockView(props: NodeViewProps) {
ref={mathResultContainer} ref={mathResultContainer}
></div> ></div>
{((isEditing && !preview?.trim().length) || {((isEditing && !preview?.trim().length) ||
(!isEditing && !node.attrs.katex.trim().length)) && ( (!isEditing && !node.attrs.text.trim().length)) && (
<div>Empty equation</div> <div>Empty equation</div>
)} )}
{error && <div>Invalid 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(() => { useEffect(() => {
renderMath(node.attrs.katex, mathResultContainer.current); renderMath(node.attrs.text, mathResultContainer.current);
}, [node.attrs.katex]); }, [node.attrs.text]);
useEffect(() => { useEffect(() => {
if (isEditing) { if (isEditing) {
renderMath(preview || "", mathPreviewContainer.current); renderMath(preview || "", mathPreviewContainer.current);
} else if (preview !== null) { } else if (preview !== null) {
queueMicrotask(() => { queueMicrotask(() => {
updateAttributes({ katex: preview }); updateAttributes({ text: preview });
}); });
} }
}, [preview, isEditing]); }, [preview, isEditing]);
useEffect(() => { useEffect(() => {
setIsEditing(!!props.selected); setIsEditing(!!props.selected);
if (props.selected) setPreview(node.attrs.katex); if (props.selected) setPreview(node.attrs.text);
}, [props.selected]); }, [props.selected]);
return ( return (
@ -69,7 +69,7 @@ export default function MathInlineView(props: NodeViewProps) {
props.selected ? classes.selected : "", props.selected ? classes.selected : "",
error ? classes.error : "", error ? classes.error : "",
(isEditing && !preview?.trim().length) || (isEditing && !preview?.trim().length) ||
(!isEditing && !node.attrs.katex.trim().length) (!isEditing && !node.attrs.text.trim().length)
? classes.empty ? classes.empty
: "", : "",
].join(" ")} ].join(" ")}
@ -83,7 +83,7 @@ export default function MathInlineView(props: NodeViewProps) {
ref={mathResultContainer} ref={mathResultContainer}
></div> ></div>
{((isEditing && !preview?.trim().length) || {((isEditing && !preview?.trim().length) ||
(!isEditing && !node.attrs.katex.trim().length)) && ( (!isEditing && !node.attrs.text.trim().length)) && (
<div>Empty equation</div> <div>Empty equation</div>
)} )}
{error && <div>Invalid 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 { export interface MathBlockAttributes {
katex: string; text: string;
} }
export const inputRegex = /(?:^|\s)((?:\$\$\$)((?:[^$]+))(?:\$\$\$))$/; export const inputRegex = /(?:^|\s)((?:\$\$\$)((?:[^$]+))(?:\$\$\$))$/;
@ -34,7 +34,7 @@ export const MathBlock = Node.create({
addAttributes() { addAttributes() {
return { return {
katex: { text: {
default: "", default: "",
parseHTML: (element) => element.innerHTML.split("$")[1], parseHTML: (element) => element.innerHTML.split("$")[1],
}, },
@ -56,7 +56,7 @@ export const MathBlock = Node.create({
return [ return [
"div", "div",
{}, {},
["div", { "data-katex": true }, `$${HTMLAttributes.katex}$`], ["div", { "data-katex": true }, `$${HTMLAttributes.text}$`],
]; ];
}, },
@ -65,7 +65,7 @@ export const MathBlock = Node.create({
}, },
renderText({ node }) { renderText({ node }) {
return node.attrs.katex; return node.attrs.text;
}, },
addCommands() { addCommands() {
@ -87,7 +87,7 @@ export const MathBlock = Node.create({
find: inputRegex, find: inputRegex,
type: this.type, type: this.type,
getAttributes: (match) => ({ 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"; import { ReactNodeViewRenderer } from "@tiptap/react";
declare module "@tiptap/core" { declare module "@tiptap/core" {
@ -14,6 +14,10 @@ export interface MathInlineOption {
view: any; view: any;
} }
export interface MathInlineAttributes {
text: string;
}
export const inputRegex = /(?:^|\s)((?:\$\$)((?:[^$]+))(?:\$\$))$/; export const inputRegex = /(?:^|\s)((?:\$\$)((?:[^$]+))(?:\$\$))$/;
export const MathInline = Node.create<MathInlineOption>({ export const MathInline = Node.create<MathInlineOption>({
@ -31,7 +35,7 @@ export const MathInline = Node.create<MathInlineOption>({
addAttributes() { addAttributes() {
return { return {
katex: { text: {
default: "", default: "",
parseHTML: (element) => element.innerHTML.split("$")[1], parseHTML: (element) => element.innerHTML.split("$")[1],
}, },
@ -53,12 +57,12 @@ export const MathInline = Node.create<MathInlineOption>({
return [ return [
"div", "div",
{}, {},
["span", { "data-katex": true }, `$${HTMLAttributes.katex}$`], ["span", { "data-katex": true }, `$${HTMLAttributes.text}$`],
]; ];
}, },
renderText({ node }) { renderText({ node }) {
return node.attrs.katex; return node.attrs.text;
}, },
addNodeView() { addNodeView() {
@ -84,7 +88,7 @@ export const MathInline = Node.create<MathInlineOption>({
find: inputRegex, find: inputRegex,
type: this.type, type: this.type,
getAttributes: (match) => ({ getAttributes: (match) => ({
katex: match[1].replaceAll("$", ""), text: match[1].replaceAll("$", ""),
}), }),
}), }),
]; ];