Personal Monorepo ❄️

fix(wiki): Catch invalid selections and discard them in Slate

Changed files
+37 -15
projects
wiki
+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
··· 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
··· 13 13 export { default as MemberChips } from "./MemberChips"; 14 14 export { default as PublishButton } from "./PublishButton"; 15 15 export { default as Slate } from "./Slate"; 16 + export { default as SlateErrorBoundary } from "./SlateErrorBoundary";