Im trying to make a text editor app in which user can have multiple editors like notion, i have made the text editor using Slate.js, React, TypeScript. Currently I only have one editor and im storing it’s content in localStorage.
I have also implemented a sidebar which displays editors, when user selects any editor, the currentEditor state changes but the content in Slate editor does not change. Although the title gets changed which means currentEditor state is changing but im unable to change content of editor even after passing new editor’s value.
Earlier i was using a custom hook. Now i have shifted to Redux Toolkit to manage editors.
Attaching my code for reference:
App.tsx:
function App() {
const currentEditor = useAppSelector((state) => state.editors.currentEditor);
// to make editor to be stable across renders, we use useState without a setter
// for more reference
const [editor] = useState(withCustomFeatures(withReact(createEditor())));
// defining a rendering function based on the element passed to 'props',
// useCallback here to memoize the function for subsequent renders.
// this will render our custom elements according to props
const renderElement = useCallback((props: RenderElementProps) => {
return <Element {...props} />;
}, []);
// a memoized leaf rendering function
// this will render custom leaf elements according to props
const renderLeaf = useCallback((props: RenderLeafProps) => {
return <Leaf {...props} />;
}, []);
if (!currentEditor) {
return <div>loading</div>;
}
return (
<div className="h-full flex">
<div className="flex h-screen w-60 flex-col inset-y-0">
<div className="h-full text-primary w-full bg-white">
<NavigationSidebar />
</div>
</div>
<main className="w-full">
<div className="bg-sky-200 flex flex-col h-screen w-full">
<div className="text-center mt-4">
<h1 className="text-xl">{currentEditor?.title}</h1>
</div>
<div className="bg-white mx-auto rounded-md my-10 w-4/5">
{currentEditor && (
<EditorComponent
editor={editor}
renderElement={renderElement}
renderLeaf={renderLeaf}
/>
)}
</div>
</div>
</main>
</div>
);
}
export default App;
Editor.tsx:
const EditorComponent: React.FC<EditorProps> = ({
editor,
renderElement,
renderLeaf,
}) => {
const { setSearch, decorate } = useDecorate();
const dispatch = useAppDispatch();
const currentEditor = useAppSelector((state) => state.editors.currentEditor);
if (!currentEditor) {
return <div>Loading</div>;
}
return (
// render the slate context, must be rendered above any editable components,
// it can provide editor state to other components like toolbars, menus
<Slate
editor={editor}
initialValue={currentEditor.value}
// store value to localStorage on change
onChange={(value) =>
dispatch(
storeContent({
id: currentEditor.id,
title: currentEditor.title,
value,
editor,
})
)
}
>
{/* Toolbar */}
<Toolbar/>
<HoveringToolbar />
{/* editable component */}
<div className="p-3 focus-within:ring-2 focus-within:ring-neutral-200 focus-within:ring-inset border">
<Editable
spellCheck
autoFocus
className="outline-none max-h-[730px] overflow-y-auto"
renderElement={renderElement}
renderLeaf={renderLeaf}
decorate={decorate}
/>
</div>
</Slate>
);
};
export default EditorComponent;
NavigationSidebar.tsx:
const NavigationSidebar = () => {
const editors = useAppSelector((state) => state.editors.editors);
const currentEditor = useAppSelector((state) => state.editors.currentEditor);
const dispatch = useAppDispatch();
return (
<div className="flex flex-col gap-y-4 items-center">
<div className="text-center py-4 px-2 border-b-2 w-full">
<h3 className="font-semibold text-xl text-indigo-500">Editors list</h3>
</div>
<div className="w-full">
<ol>
{editors.map((editor) => (
<li key={editor.id}>
<button
className={`w-full py-2 border-b hover:bg-indigo-100 text-center ${
currentEditor!.id === editor.id ? "bg-indigo-200" : ""
}`}
onClick={() => dispatch(setCurrentEditor(editor.id))}
>
{editor.title}
</button>
</li>
))}
</ol>
<button
className="border-b py-2 w-full hover:bg-indigo-100"
onClick={() => dispatch(addNewEditor())}
>
New blank editor
</button>
</div>
</div>
);
};
editorSlice reducers:
reducers: {
addNewEditor: (state) => {
const newEditor: EditorInstance = {
id: `editor${state.editors.length + 1}`,
title: `Editor ${state.editors.length + 1}`,
value: [
{
type: "paragraph",
children: [
{ text: "This is new editable " },
{ text: "rich", bold: true },
{ text: " text, " },
{ text: "much", italic: true },
{ text: " better than a " },
{ text: "<textarea>", code: true },
{ text: "!" },
],
},
],
};
state.editors.push(newEditor);
localStorage.setItem("editorsRedux", JSON.stringify(state.editors));
state.currentEditor = newEditor;
},
setCurrentEditor: (state, action: PayloadAction<string>) => {
const selectedEditor = state.editors.find(
(editor) => editor.id === action.payload
);
if (selectedEditor) {
state.currentEditor = selectedEditor;
}
},
loadEditorsFromLocalStorage: (state) => {
const storedEditors = localStorage.getItem("editorsRedux");
if (storedEditors) {
state.editors = JSON.parse(storedEditors);
state.currentEditor = state.editors[0];
} else {
const initialEditor: EditorInstance = {
id: "editor1",
title: "Untitled",
value: [
{
type: "paragraph",
children: [
{ text: "This is editable " },
{ text: "rich", bold: true },
{ text: " text, " },
{ text: "much", italic: true },
{ text: " better than a " },
{ text: "<textarea>", code: true },
{ text: "!" },
],
},
],
};
state.editors = [initialEditor];
state.currentEditor = initialEditor;
localStorage.setItem("editorsRedux", JSON.stringify(state.editors));
}
},
storeContent: (
state,
action: PayloadAction<{
id: string;
title: string;
value: Descendant[];
editor: Editor;
}>
) => {
const title = action.payload.title;
const value = action.payload.value;
const isAstChange = action.payload.editor.operations.some(
(op) => "set_selection" !== op.type
);
if (isAstChange) {
if (state.currentEditor) {
const updatedEditors = state.editors.map((editor) => {
if (editor.id === action.payload.id) {
return { ...editor, title, value };
}
return editor;
});
state.editors = updatedEditors;
localStorage.setItem("editorsRedux", JSON.stringify(state.editors));
}
}
},
},
I want to know that do we have to initialzie a new slate editor every time when user changes or only change the editor’s initialValue prop by passing currentEditor.value or do we have to use routing to change the initialValue of Slate. Help is very much appreciated.
