Remove all any types and eslint-disable comments from koenig-lexical

Author: kevinansfield

packages/koenig-lexical/eslint.config.js

@@ -1,10 +1,11 @@
 import js from '@eslint/js';
+import {defineConfig} from 'eslint/config';
 import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
 import tseslint from 'typescript-eslint';
 import ghostPlugin from 'eslint-plugin-ghost';
 
-export default tseslint.config([
+export default defineConfig([
     {ignores: ['dist/**', 'build/**', '.storybook/**']},
     {
         files: ['**/*.{ts,tsx}'],

packages/koenig-lexical/src/components/ui/LinkInputWithSearch.tsx

@@ -18,8 +18,7 @@ export function LinkInputWithSearch({href, update, cancel}: LinkInputWithSearchP
 
     // store the href/query in state so we can update it without affecting the saved editor value
     const [_href, setHref] = React.useState(href);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const {isSearching, listOptions} = useSearchLinks(_href || '', searchLinks as any);
+    const {isSearching, listOptions} = useSearchLinks(_href || '', searchLinks as (term?: string) => Promise<unknown>);
 
     // add refs for input and container
     const containerRef = React.useRef<HTMLDivElement>(null);

packages/koenig-lexical/src/components/ui/cards/MarkdownCard.tsx

@@ -32,11 +32,7 @@ export function MarkdownCard({markdown = '', updateMarkdown, isEditing, imageUpl
     );
 }
 
-<<<<<<< HEAD
-function MarkdownDisplay({markdown}) {
-=======
 function MarkdownDisplay({markdown}: {markdown: string}) {
->>>>>>> 4b9c6da1fd (Migrate koenig-lexical to TypeScript)
     const markdownHtml = markdownRender(markdown);
     const sanitizedHtml = sanitizeHtml(markdownHtml, {replaceJS: true});
 

packages/koenig-lexical/src/components/ui/cards/MarkdownCard/MarkdownEditor.tsx

@@ -7,6 +7,22 @@ import {useLayoutEffect, useRef, useState} from 'react';
 import ctrlOrCmd from '../../../../utils/ctrlOrCmd';
 import useMarkdownImageUploader from './useMarkdownImageUploader';
 
+interface CodeMirrorInstance {
+    on(event: string, handler: (...args: unknown[]) => void): void;
+    off(event: string, handler: (...args: unknown[]) => void): void;
+    focus(): void;
+    execCommand(command: string): void;
+    getOption(name: string): unknown;
+    setOption(name: string, value: unknown): void;
+}
+
+interface SimpleMDEInstance {
+    value(val?: string): string;
+    codemirror: CodeMirrorInstance;
+    toTextArea(): void;
+    toolbarElements: Record<string, HTMLElement>;
+}
+
 interface MarkdownEditorProps {
     markdown?: string;
     updateMarkdown?: (value: string) => void;
@@ -25,8 +41,7 @@ export default function MarkdownEditor({
     placeholder = ''
 }: MarkdownEditorProps) {
     const editorRef = useRef<HTMLTextAreaElement>(null);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const markdownEditor = useRef<any>(null);
+    const markdownEditor = useRef<SimpleMDEInstance | null>(null);
     const [isHelpDialogOpen, setHelpDialogOpen] = useState(false);
     const [isUnsplashDialogOpen, setUnsplashDialogOpen] = useState(false);
     const {
@@ -116,8 +131,9 @@ export default function MarkdownEditor({
         });
 
         // add non-breaking space as a special char
-        // eslint-disable-next-line no-control-regex
-        editorInstance.codemirror.setOption('specialChars', /[\u0000-\u001f\u007f-\u009f\u00ad\u061c\u200b-\u200f\u2028\u2029\ufeff\xa0]/g);
+        // control characters are intentional - this regex detects special chars for CodeMirror
+        const specialCharsPattern = `[${String.fromCharCode(0)}-${String.fromCharCode(0x1f)}${String.fromCharCode(0x7f)}-${String.fromCharCode(0x9f)}\u00ad\u061c\u200b-\u200f\u2028\u2029\ufeff\xa0]`;
+        editorInstance.codemirror.setOption('specialChars', new RegExp(specialCharsPattern, 'g'));
 
         if (autofocus) {
             editorInstance.codemirror.execCommand('goDocEnd');
@@ -172,7 +188,7 @@ export default function MarkdownEditor({
     }
 
     function toggleButtonClass() {
-        const spellcheckButton = (markdownEditor.current as unknown as {toolbarElements: Record<string, HTMLElement>}).toolbarElements.spellcheck;
+        const spellcheckButton = markdownEditor.current!.toolbarElements.spellcheck;
 
         if (spellcheckButton) {
             if (markdownEditor.current!.codemirror.getOption('mode') === 'spell-checker') {

packages/koenig-lexical/src/hooks/useSearchLinks.ts

@@ -84,7 +84,7 @@ function convertSearchResultsToListOptions(results: SearchResult[] | undefined,
     });
 }
 
-export const useSearchLinks = (query: string, searchLinks: (term?: string) => Promise<SearchResult[] | undefined>, {noResultOptions}: {noResultOptions?: () => ListOption[]} = {}) => {
+export const useSearchLinks = (query: string, searchLinks: (term?: string) => Promise<unknown>, {noResultOptions}: {noResultOptions?: () => ListOption[]} = {}) => {
     const [defaultListOptions, setDefaultListOptions] = React.useState<ListOption[]>([]);
     const [listOptions, setListOptions] = React.useState<ListOption[]>([]);
     const [isSearching, setIsSearching] = React.useState(false);
@@ -97,7 +97,7 @@ export const useSearchLinks = (query: string, searchLinks: (term?: string) => Pr
             }
 
             setIsSearching(true);
-            const results = await searchLinks(term);
+            const results = await searchLinks(term) as SearchResult[] | undefined;
 
             // can return undefined if the search was cancelled, avoid updating
             // in that scenario because we can end up in a race condition where
@@ -125,7 +125,7 @@ export const useSearchLinks = (query: string, searchLinks: (term?: string) => Pr
             if (!query) {
                 setIsSearching(true);
             }
-            const results = await searchLinks();
+            const results = await searchLinks() as SearchResult[] | undefined;
             setDefaultListOptions(convertSearchResultsToListOptions(results, {type: 'default'}));
             if (!query) {
                 setIsSearching(false);

packages/koenig-lexical/src/plugins/AtLinkPlugin.tsx

@@ -27,7 +27,7 @@ import {
     KEY_ESCAPE_COMMAND,
     PASTE_COMMAND
 } from 'lexical';
-import type {LexicalNode} from 'lexical';
+import type {ElementFormatType, LexicalNode} from 'lexical';
 import {$insertFirst, mergeRegister} from '@lexical/utils';
 import {AtLinkResultsPopup} from '../components/ui/AtLinkResultsPopup';
 import {isInternalUrl} from '../utils/isInternalUrl';
@@ -63,13 +63,12 @@ function noResultOptions() {
 }
 
 // Manages at-link search nodes and display of the search results panel when appropriate
-export const KoenigAtLinkPlugin = ({searchLinks, siteUrl}: {searchLinks: (...args: unknown[]) => Promise<unknown>; siteUrl?: string}) => {
+export const KoenigAtLinkPlugin = ({searchLinks, siteUrl}: {searchLinks: (term?: string) => Promise<unknown>; siteUrl?: string}) => {
     const [editor] = useLexicalComposerContext();
     const [focusedAtLinkNode, setFocusedAtLinkNode] = React.useState<AtLinkNode | null>(null);
     const [query, setQuery] = React.useState('');
     const searchOptions = React.useMemo(() => ({noResultOptions}), []);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const {isSearching, listOptions} = useSearchLinks(query, searchLinks as any, searchOptions);
+    const {isSearching, listOptions} = useSearchLinks(query, searchLinks, searchOptions);
 
     // register an event listener to detect '@' character being typed
     // - we only ever want to convert an '@' to an at-link node when it's typed
@@ -424,8 +423,7 @@ export const KoenigAtLinkPlugin = ({searchLinks, siteUrl}: {searchLinks: (...arg
     }, [editor]);
 
     // when a search result is selected, replace the at-link node with a link node
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const onItemSelect = React.useCallback((item: any) => {
+    const onItemSelect = React.useCallback((item: {value?: string; label?: string; type?: string}) => {
         editor.update(() => {
             if (!item?.value || !focusedAtLinkNode) {
                 $removeAtLink(focusedAtLinkNode, {focus: true});
@@ -445,8 +443,7 @@ export const KoenigAtLinkPlugin = ({searchLinks, siteUrl}: {searchLinks: (...arg
                 const linkNode = $createLinkNode(item.value!);
                 const textNode = $createTextNode(item.label ?? '');
                 linkNode.append(textNode);
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                linkNode.setFormat(focusedAtLinkNode.getLinkFormat() as any);
+                linkNode.setFormat(focusedAtLinkNode.getLinkFormat() as unknown as ElementFormatType);
 
                 focusedAtLinkNode.replace(linkNode);
                 linkNode.selectEnd();
@@ -507,7 +504,7 @@ export const AtLinkPlugin = () => {
         return null;
     }
 
-    return <KoenigAtLinkPlugin searchLinks={cardConfig.searchLinks as (...args: unknown[]) => Promise<unknown>} siteUrl={cardConfig.siteUrl} />;
+    return <KoenigAtLinkPlugin searchLinks={cardConfig.searchLinks as (term?: string) => Promise<unknown>} siteUrl={cardConfig.siteUrl} />;
 };
 
 export default AtLinkPlugin;

packages/koenig-lexical/src/plugins/DragDropReorderPlugin.tsx

@@ -62,8 +62,7 @@ function useDragDropReorder(editor: LexicalEditor, _isEditable: boolean) {
 
     const createCardDragElement = React.useRef((draggableInfo: DraggableInfo) => {
         const {cardName} = draggableInfo;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const Icon = draggableInfo.Icon as React.FC<any> | undefined;
+        const Icon = draggableInfo.Icon as React.FC<{className?: string}> | undefined;
 
         if (!cardName || cardName === 'image' || !Icon) {
             return;

packages/koenig-lexical/src/plugins/EmojiPickerPlugin.tsx

@@ -11,8 +11,13 @@ import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 
 init({data: emojiData});
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const EmojiMenuItem = function ({index, isSelected, onClick, onMouseEnter, emoji}: {index: number; isSelected: boolean; onClick: (e: React.MouseEvent) => void; onMouseEnter: () => void; emoji: any}) {
+interface Emoji {
+    id: string;
+    skins: Array<{native: string}>;
+    ref?: React.RefObject<HTMLLIElement | null>;
+}
+
+const EmojiMenuItem = function ({index, isSelected, onClick, onMouseEnter, emoji}: {index: number; isSelected: boolean; onClick: (e: React.MouseEvent) => void; onMouseEnter: () => void; emoji: Emoji}) {
     // we need to manually set this unless we import the MenuOption type and extend it (see LexicalTypeaheadMenuPlugin)
     const ref = React.useRef(null);
     emoji.ref = ref;
@@ -38,8 +43,7 @@ const EmojiMenuItem = function ({index, isSelected, onClick, onMouseEnter, emoji
 export function EmojiPickerPlugin() {
     const [editor] = useLexicalComposerContext();
     const [queryString, setQueryString] = React.useState<string | null>(null);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const [searchResults, setSearchResults] = React.useState<any[] | null>(null);
+    const [searchResults, setSearchResults] = React.useState<Emoji[] | null>(null);
 
     const checkForTriggerMatch = useTypeaheadTriggerMatch(':', {minLength: 1});
 
@@ -71,15 +75,13 @@ export function EmojiPickerPlugin() {
                         if (cursorInInlineCodeBlock() === true) {
                             return false;
                         }
-                        SearchIndex.search(queryString).then((emojis: unknown[]) => {
+                        SearchIndex.search(queryString).then((emojis: Emoji[]) => {
                             if (emojis.length === 0) {
                                 return;
                             }
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            const emojiMatch = (emojis as any)?.[0].id === queryString;
+                            const emojiMatch = emojis[0].id === queryString;
                             if (emojiMatch) {
-                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                handleCompletionInsertion((emojis as any)[0]);
+                                handleCompletionInsertion(emojis[0]);
                             }
                         });
                         event.preventDefault();
@@ -92,8 +94,7 @@ export function EmojiPickerPlugin() {
         );
     });
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const handleCompletionInsertion = React.useCallback((emoji: any) => {
+    const handleCompletionInsertion = React.useCallback((emoji: Emoji) => {
         editor.update(() => {
             const selection = $getSelection();
 
@@ -118,8 +119,7 @@ export function EmojiPickerPlugin() {
         }
 
         async function searchEmojis() {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            let filteredEmojis: any[] = [];
+            let filteredEmojis: Emoji[] = [];
             if ([')','-)'].includes(queryString!)) {
                 filteredEmojis = await SearchIndex.search('smile');
             } else if (['(','-('].includes(queryString!)) {
@@ -133,8 +133,7 @@ export function EmojiPickerPlugin() {
         searchEmojis();
     }, [queryString]);
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const onEmojiSelect = React.useCallback((selectedOption: any, nodeToRemove: any, closeMenu: () => void) => {
+    const onEmojiSelect = React.useCallback((selectedOption: Emoji, nodeToRemove: {remove: () => void} | null, closeMenu: () => void) => {
         editor.update(() => {
             const selection = $getSelection();
 

packages/koenig-lexical/src/plugins/PlusCardMenuPlugin.tsx

@@ -1,7 +1,7 @@
 import KoenigComposerContext from '../context/KoenigComposerContext.jsx';
 import React from 'react';
 import {$getSelection, $isParagraphNode, $isRangeSelection, $setSelection} from 'lexical';
-import type {LexicalEditor} from 'lexical';
+import type {LexicalCommand, LexicalEditor} from 'lexical';
 import {CardMenu} from '../components/ui/CardMenu';
 import {PlusButton, PlusMenu} from '../components/ui/PlusMenu';
 import {buildCardMenu, type CardMenuItem} from '../utils/buildCardMenu';
@@ -111,8 +111,7 @@ function usePlusCardMenu(editor: LexicalEditor) {
         });
     }, [editor, showButton, hideButton]);
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const insert = React.useCallback((insertCommand: any, {insertParams = {}}: {insertParams?: Record<string, unknown>} = {}) => {
+    const insert = React.useCallback((insertCommand: LexicalCommand<Record<string, unknown>>, {insertParams = {}}: {insertParams?: Record<string, unknown>} = {}) => {
         const commandParams = {...insertParams};
         editor.dispatchCommand(insertCommand, commandParams);
         closeMenu();

packages/koenig-lexical/src/plugins/SlashCardMenuPlugin.tsx

@@ -1,7 +1,7 @@
 import KoenigComposerContext from '../context/KoenigComposerContext.jsx';
 import React from 'react';
 import {$createParagraphNode, $getSelection, $isParagraphNode, $isRangeSelection, COMMAND_PRIORITY_HIGH, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ENTER_COMMAND} from 'lexical';
-import type {LexicalEditor} from 'lexical';
+import type {LexicalCommand, LexicalEditor} from 'lexical';
 import {CardMenu} from '../components/ui/CardMenu';
 import {SlashMenu} from '../components/ui/SlashMenu';
 import {buildCardMenu, type CardMenuItem} from '../utils/buildCardMenu';
@@ -89,8 +89,7 @@ function useSlashCardMenu(editor: LexicalEditor) {
         cachedRange.current = null;
     }, [setIsShowingMenu, commandParams]);
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const insert = React.useCallback((insertCommand: any, {insertParams = {}, queryParams = []} : {insertParams?: Record<string, unknown>; queryParams?: string[]} = {}) => {
+    const insert = React.useCallback((insertCommand: LexicalCommand<Record<string, unknown>>, {insertParams = {}, queryParams = []} : {insertParams?: Record<string, unknown>; queryParams?: string[]} = {}) => {
         const dataset: Record<string, unknown> = {...insertParams};
 
         for (let i = 0; i < queryParams.length; i++) {