Assess, plan, evolve.

This codemod migrates from using `useContext(EditorContext)` to the new `useSlate()` hook in Slate. It transforms the editor state management approach and adds new state hooks. ### Before ```ts const MyComponent = () => { const editor = useContext(EditorContext); // ... }; ``` ### After ```ts const MyComponent = () => { const editor = useSlate(); // Access editor state using new hooks const selected = useSelected(); const focused = useFocused(); // ... }; ```

This codemod shows how to migrate cursor and ```selection``` handling from Slate v0.88 to v0.104, including the Preventing runtime errors from null selections. ## Code Changes ### Version 0.88 ```typescript const selection = editor.selection; const start = Range.start(selection); ``` ### Version 0.104 ```typescript const selection = editor.selection as Range | null; if (selection) { const start = Range.start(selection); // Selection is now safely typed and null-checked } ``` ## Key Changes - Added explicit type casting to `Range | null` - Implemented null safety check using conditional block - Ensures selection exists before accessing its properties ## Migration Benefits - Prevents runtime errors from null selections - Provides better TypeScript type safety - Follows current best practices for Slate selection handling

This codemod updates the ```renderElement``` function to include TypeScript typings and adds a default case for rendering unsupported element types. ### Before (v0.88) ```ts const renderElement = props => { const { element, children, attributes } = props; switch (element.type) { case 'paragraph': return <p {...attributes}>{children}</p>; } }; ``` ### After (v0.104) ```ts import { RenderElementProps } from 'slate-react'; const renderElement = ({ element, children, attributes }: RenderElementProps) => { switch (element.type) { case 'paragraph': return <p {...attributes}>{children}</p>; default: return <div {...attributes}>{children}</div>; } }; ```

# Codemod Slate: `withReact(createEditor())` to `useMemo` Transformation This codemod transforms the usage of `withReact(createEditor())` into a `useMemo`-based structure, which wraps the editor creation and introduces an inline-checking function (`isInline`) for the editor instance. This transformation optimizes the creation of the editor object by memoizing it. **Before (v0.88):** ```typescript const editor = withReact(createEditor()); ``` **After (v0.104):** ```typescript const editor = useMemo(() => { const e = withReact(createEditor()); e.isInline = element => { return element.type === 'inline-element' ? true : false; }; return e; }, []); ```