+17
-15
projects/wiki/components/content/Slate.tsx
+17
-15
projects/wiki/components/content/Slate.tsx
···
32
32
ToggleButtonGroup,
33
33
} from "@mui/material";
34
34
import { Box } from "@mui/system";
35
-
import { Link as NextLink } from "comps";
35
+
import { Link as NextLink, SlateErrorBoundary } from "comps";
36
36
import {
37
37
type CustomEditor,
38
38
type CustomElement,
···
253
253
(validated.length !== 0 &&
254
254
(validated as CustomElement[])[0].children?.[0].text !== "")) && (
255
255
<Box sx={{ m: 2 }}>
256
-
<Editable
257
-
renderElement={renderElement}
258
-
renderLeaf={renderLeaf}
259
-
spellCheck
260
-
readOnly={readOnly}
261
-
onKeyDown={(event) => {
262
-
Object.entries(HOTKEYS).map(([hotkey, mark]) => {
263
-
if (isHotkey(hotkey, event)) {
264
-
event.preventDefault();
265
-
toggleMark(editor, mark);
266
-
}
267
-
});
268
-
}}
269
-
/>
256
+
<SlateErrorBoundary editor={editor}>
257
+
<Editable
258
+
renderElement={renderElement}
259
+
renderLeaf={renderLeaf}
260
+
spellCheck
261
+
readOnly={readOnly}
262
+
onKeyDown={(event) => {
263
+
Object.entries(HOTKEYS).forEach(([hotkey, mark]) => {
264
+
if (isHotkey(hotkey, event)) {
265
+
event.preventDefault();
266
+
toggleMark(editor, mark);
267
+
}
268
+
});
269
+
}}
270
+
/>
271
+
</SlateErrorBoundary>
270
272
</Box>
271
273
)}
272
274
</SlateEditor>
+19
projects/wiki/components/content/SlateErrorBoundary.tsx
+19
projects/wiki/components/content/SlateErrorBoundary.tsx
···
1
+
import React, { type ReactNode } from "react";
2
+
import { type Editor, Transforms } from "slate";
3
+
4
+
export default class SlateErrorBoundary extends React.Component<{
5
+
children: ReactNode;
6
+
editor: Editor;
7
+
}> {
8
+
static getDerivedStateFromError() {
9
+
return {};
10
+
}
11
+
12
+
componentDidCatch() {
13
+
Transforms.deselect(this.props.editor);
14
+
}
15
+
16
+
render() {
17
+
return this.props.children;
18
+
}
19
+
}
+1
projects/wiki/components/content/index.ts
+1
projects/wiki/components/content/index.ts