Skip to content

Commit

Permalink
chore: update to react 19
Browse files Browse the repository at this point in the history
  • Loading branch information
polyrainbow committed Dec 5, 2024
1 parent 155bd46 commit e5cf9cd
Show file tree
Hide file tree
Showing 16 changed files with 57 additions and 66 deletions.
61 changes: 24 additions & 37 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@
"idb-keyval": "^6.2.1",
"lexical": "^0.21.0",
"monaco-editor": "^0.52.0",
"react": "^18.3.1",
"react-dom": "^18.3.1"
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@playwright/test": "^1.49.0",
"@stylistic/eslint-plugin": "^2.10.1",
"@stylistic/eslint-plugin-ts": "^2.10.1",
"@types/react": "^18.3.9",
"@types/react-dom": "^18.3.0",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@vitejs/plugin-react": "^4.3.1",
"eslint": "^9.14.0",
"eslint-plugin-react": "^7.36.1",
Expand Down
2 changes: 1 addition & 1 deletion src/components/ConfirmationServiceProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const ConfirmationServiceProvider = ({
] = React.useState<ConfirmationDialogParams | null>(null);

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const awaitingPromiseRef = React.useRef<any>();
const awaitingPromiseRef = React.useRef<any>(Promise.resolve());

const openConfirmation = (params: ConfirmationDialogParams) => {
setConfirmationState(params);
Expand Down
4 changes: 2 additions & 2 deletions src/components/FilesViewPreviewBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const FilesViewPreviewBox = ({
const type = getMediaTypeFromFilename(file.filename) || "unknown";
const isNenoScript = file.slug.endsWith(NENO_SCRIPT_FILE_SUFFIX);
const [thumbnailImageSrc, setThumbnailImageSrc]
= useState<string | null>(null);
= useState<string | undefined>(undefined);


useEffect(() => {
Expand Down Expand Up @@ -57,7 +57,7 @@ const FilesViewPreviewBox = ({
]))}
>
<img
src={thumbnailImageSrc || ""}
src={thumbnailImageSrc}
loading="lazy"
className={
type === MediaType.IMAGE
Expand Down
2 changes: 1 addition & 1 deletion src/components/NoteContentBlockImage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const NoteContentBlockImage = ({
file,
notesProvider,
}: NoteContentBlockImageProps) => {
const [url, setUrl] = useState<string>("");
const [url, setUrl] = useState<string | undefined>(undefined);

useEffect(() => {
getObjectUrlForArbitraryGraphFile(file)
Expand Down
2 changes: 1 addition & 1 deletion src/hooks/useKeyboardShortcuts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ interface KeyboardShortCutHandlers {

export default (
handlers: KeyboardShortCutHandlers,
elementRef?: RefObject<HTMLElement>,
elementRef?: RefObject<HTMLElement | null>,
): void => {
const handleKeydown = (e: KeyboardEvent) => {
if (
Expand Down
24 changes: 13 additions & 11 deletions src/lib/editor/hooks/useDecorators.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,12 @@
*/

import type { LexicalEditor } from "lexical";

import { Suspense, useEffect, useMemo, useState } from "react";
import * as React from "react";
import { createPortal, flushSync } from "react-dom";

type ErrorBoundaryProps = {
children: JSX.Element;
children: React.ReactElement;
onError: (error: Error) => void;
};

Expand All @@ -24,18 +23,21 @@ export type ErrorBoundaryType =
export function useDecorators(
editor: LexicalEditor,
ErrorBoundary: ErrorBoundaryType,
): Array<JSX.Element> {
const [decorators, setDecorators] = useState<Record<string, JSX.Element>>(
() => editor.getDecorators<JSX.Element>(),
);
): Array<React.ReactElement> {
const [decorators, setDecorators]
= useState<Record<string, React.ReactElement>>(
() => editor.getDecorators<React.ReactElement>(),
);

// Subscribe to changes
React.useLayoutEffect(() => {
return editor.registerDecoratorListener<JSX.Element>((nextDecorators) => {
flushSync(() => {
setDecorators(nextDecorators);
});
});
return editor.registerDecoratorListener<React.ReactElement>(
(nextDecorators) => {
flushSync(() => {
setDecorators(nextDecorators);
});
},
);
}, [editor]);

useEffect(() => {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/editor/plugins/BlockTransformPlugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const assignCorrectElementNodes = (
};


export function BlockTransformPlugin(): JSX.Element | null {
export function BlockTransformPlugin(): null {
const [editor] = useLexicalComposerContext();
useEffect(() => {
editor.registerNodeTransform(RootNode, (root: RootNode) => {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/editor/plugins/BoldPlugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
import { useLexicalTextEntity } from "@lexical/react/useLexicalTextEntity";
import { useCallback, useEffect } from "react";

export function BoldPlugin(): JSX.Element | null {
export function BoldPlugin(): null {
const [editor] = useLexicalComposerContext();

useEffect(() => {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/editor/plugins/InlineCodePlugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { useCallback, useEffect } from "react";

const REGEX = /`[^`]+`/;

export function InlineCodePlugin(): JSX.Element | null {
export function InlineCodePlugin(): null {
const [editor] = useLexicalComposerContext();

useEffect(() => {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/editor/plugins/KeyValuePlugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ function registerTransforms(
];
}

export function KeyValuePlugin(): JSX.Element | null {
export function KeyValuePlugin(): null {
const [editor] = useLexicalComposerContext();

useEffect(() => {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/editor/plugins/LexicalAutoLinkPlugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -366,7 +366,7 @@ export function AutoLinkPlugin({
}: {
matchers: Array<LinkMatcher>;
onChange?: ChangeHandler;
}): JSX.Element | null {
}): null {
const [editor] = useLexicalComposerContext();

useAutoLink(editor, matchers, onChange);
Expand Down
3 changes: 2 additions & 1 deletion src/lib/editor/plugins/LinkPlugin.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

import { ReactElement } from "react";
import {
AutoLinkPlugin,
createLinkMatcherWithRegExp,
Expand Down Expand Up @@ -58,6 +59,6 @@ const MATCHERS = [
}),
];

export default function LexicalAutoLinkPlugin(): JSX.Element {
export default function LexicalAutoLinkPlugin(): ReactElement {
return <AutoLinkPlugin matchers={MATCHERS} />;
}
2 changes: 1 addition & 1 deletion src/lib/editor/plugins/ListItemPlugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ const appendAutoLinkNodesToContent = (textNode: AutoLinkNode) => {
}
};

export function ListItemPlugin(): JSX.Element | null {
export function ListItemPlugin(): null {
const [editor] = useLexicalComposerContext();

useEffect(() => {
Expand Down
3 changes: 2 additions & 1 deletion src/lib/editor/plugins/SubtextPlugin.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,13 @@ import {
} from "@lexical/react/LexicalComposerContext";
import { useSubtextSetup } from "../hooks/useSubtextSetup";
import { ErrorBoundaryType, useDecorators } from "../hooks/useDecorators";
import { ReactElement } from "react";

export function SubtextPlugin({
ErrorBoundary,
}: {
ErrorBoundary: ErrorBoundaryType;
}): JSX.Element {
}): ReactElement {
const [editor] = useLexicalComposerContext();
const decorators = useDecorators(editor, ErrorBoundary);
useSubtextSetup(editor);
Expand Down
2 changes: 1 addition & 1 deletion src/lib/editor/plugins/WikilinkPlugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ export function WikiLinkPlugin(
{
getLinkAvailability,
}: { getLinkAvailability: (link: string) => Promise<boolean> },
): JSX.Element | null {
): null {
const [editor] = useLexicalComposerContext();

useEffect(() => {
Expand Down

0 comments on commit e5cf9cd

Please sign in to comment.