Skip to content

Commit

Permalink
Merge pull request #305 from MovieReviewComment/feature/issue-302/his…
Browse files Browse the repository at this point in the history
…tory

[#302] Add HistoryPlugin
  • Loading branch information
2wheeh authored Mar 20, 2024
2 parents eaab9a8 + cf0bc4d commit 7d1784f
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 1 deletion.
24 changes: 24 additions & 0 deletions ui/src/context/editor/editor-history-context.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import type { HistoryState } from '@lexical/react/LexicalHistoryPlugin';
import { createEmptyHistoryState } from '@lexical/react/LexicalHistoryPlugin';
import { ReactNode, createContext, useContext, useMemo } from 'react';

type ContextShape = {
historyState?: HistoryState;
};

const Context = createContext<ContextShape>({});

export function EditorHistoryContext({ children }: { children: ReactNode }): JSX.Element {
const historyContext = useMemo(
() => ({
historyState: createEmptyHistoryState(),
}),
[]
);

return <Context.Provider value={historyContext}>{children}</Context.Provider>;
}

export function useEditorHistoryContext(): ContextShape {
return useContext(Context);
}
5 changes: 4 additions & 1 deletion ui/src/editor/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Plugins } from '@/editor/plugins';
import nodes from '@/editor/nodes';
import theme from '@/editor/theme';
import '@/styles/editor.css';
import { EditorHistoryContext } from '@/context/editor/editor-history-context';

// This has to be rendered on client side only (no ssr!)
export default function Editor({
Expand All @@ -32,7 +33,9 @@ export default function Editor({
return (
<div className="editor">
<LexicalComposer initialConfig={initialConfig}>
<Plugins />
<EditorHistoryContext>
<Plugins />
</EditorHistoryContext>
</LexicalComposer>
</div>
);
Expand Down
7 changes: 7 additions & 0 deletions ui/src/editor/plugins/history/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { useEditorHistoryContext } from '@/context/editor/editor-history-context';
import { HistoryPlugin as LexicalHistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';

export function HistoryPlugin() {
const { historyState } = useEditorHistoryContext();
return <LexicalHistoryPlugin externalHistoryState={historyState} />;
}
2 changes: 2 additions & 0 deletions ui/src/editor/plugins/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { useEditorRef } from '@/context/editor/editor-ref-context';
import { MarkdownShortcutPlugin } from '@/editor/plugins/markdown-shorcut';
import { EditorRefPlugin } from '@lexical/react/LexicalEditorRefPlugin';
import { ListPlugin } from '@lexical/react/LexicalListPlugin';
import { HistoryPlugin } from '@/editor/plugins/history';

function Placeholder() {
return <div className="placeholder">Begin writing your review...</div>;
Expand All @@ -29,6 +30,7 @@ export function Plugins() {
/>
<MarkdownShortcutPlugin />
<ListPlugin />
<HistoryPlugin />
{onRef !== undefined && <EditorRefPlugin editorRef={onRef} />}
</>
);
Expand Down

0 comments on commit 7d1784f

Please sign in to comment.