enable eslint hooks rules (#5363)

site/examples/code-highlighting.tsx

@@ -8,7 +8,7 @@ import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-php'
 import 'prismjs/components/prism-sql'
 import 'prismjs/components/prism-java'
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import {
   createEditor,
   Node,
@@ -51,7 +51,7 @@ const CodeHighlightingExample = () => {
       <SetNodeToDecorations />
       <Editable
         decorate={decorate}
-        renderElement={renderElement}
+        renderElement={ElementWrapper}
         renderLeaf={renderLeaf}
         onKeyDown={onKeyDown}
       />
@@ -60,7 +60,7 @@ const CodeHighlightingExample = () => {
   )
 }
 
-const renderElement = (props: RenderElementProps) => {
+const ElementWrapper = (props: RenderElementProps) => {
   const { attributes, children, element } = props
   const editor = useSlateStatic()
 
@@ -161,14 +161,17 @@ const renderLeaf = (props: RenderLeafProps) => {
 }
 
 const useDecorate = (editor: Editor) => {
-  return useCallback(([node, path]) => {
-    if (Element.isElement(node) && node.type === CodeLineType) {
-      const ranges = editor.nodeToDecorations.get(node) || []
-      return ranges
-    }
+  return useCallback(
+    ([node, path]) => {
+      if (Element.isElement(node) && node.type === CodeLineType) {
+        const ranges = editor.nodeToDecorations.get(node) || []
+        return ranges
+      }
 
-    return []
-  }, [])
+      return []
+    },
+    [editor.nodeToDecorations]
+  )
 }
 
 const getChildNodeToDecorations = ([block, blockPath]: NodeEntry<
@@ -220,34 +223,35 @@ const getChildNodeToDecorations = ([block, blockPath]: NodeEntry<
 const SetNodeToDecorations = () => {
   const editor = useSlate()
 
-  useMemo(() => {
-    const blockEntries = Array.from(
-      Editor.nodes(editor, {
-        at: [],
-        mode: 'highest',
-        match: n => Element.isElement(n) && n.type === CodeBlockType,
-      })
-    )
+  const blockEntries = Array.from(
+    Editor.nodes(editor, {
+      at: [],
+      mode: 'highest',
+      match: n => Element.isElement(n) && n.type === CodeBlockType,
+    })
+  )
 
-    const nodeToDecorations = mergeMaps(
-      ...blockEntries.map(getChildNodeToDecorations)
-    )
+  const nodeToDecorations = mergeMaps(
+    ...blockEntries.map(getChildNodeToDecorations)
+  )
 
-    editor.nodeToDecorations = nodeToDecorations
-  }, [editor.children])
+  editor.nodeToDecorations = nodeToDecorations
 
   return null
 }
 
 const useOnKeydown = (editor: Editor) => {
-  const onKeyDown: React.KeyboardEventHandler = useCallback(e => {
-    if (isHotkey('tab', e)) {
-      // handle tab key, insert spaces
-      e.preventDefault()
+  const onKeyDown: React.KeyboardEventHandler = useCallback(
+    e => {
+      if (isHotkey('tab', e)) {
+        // handle tab key, insert spaces
+        e.preventDefault()
 
-      Editor.insertText(editor, '  ')
-    }
-  }, [])
+        Editor.insertText(editor, '  ')
+      }
+    },
+    [editor]
+  )
 
   return onKeyDown
 }

site/examples/markdown-shortcuts.tsx

@@ -33,38 +33,41 @@ const MarkdownShortcutsExample = () => {
     []
   )
 
-  const handleDOMBeforeInput = useCallback((e: InputEvent) => {
-    queueMicrotask(() => {
-      const pendingDiffs = ReactEditor.androidPendingDiffs(editor)
+  const handleDOMBeforeInput = useCallback(
+    (e: InputEvent) => {
+      queueMicrotask(() => {
+        const pendingDiffs = ReactEditor.androidPendingDiffs(editor)
 
-      const scheduleFlush = pendingDiffs?.some(({ diff, path }) => {
-        if (!diff.text.endsWith(' ')) {
-          return false
-        }
+        const scheduleFlush = pendingDiffs?.some(({ diff, path }) => {
+          if (!diff.text.endsWith(' ')) {
+            return false
+          }
 
-        const { text } = SlateNode.leaf(editor, path)
-        const beforeText = text.slice(0, diff.start) + diff.text.slice(0, -1)
-        if (!(beforeText in SHORTCUTS)) {
-          return
-        }
+          const { text } = SlateNode.leaf(editor, path)
+          const beforeText = text.slice(0, diff.start) + diff.text.slice(0, -1)
+          if (!(beforeText in SHORTCUTS)) {
+            return
+          }
 
-        const blockEntry = Editor.above(editor, {
-          at: path,
-          match: n => SlateElement.isElement(n) && Editor.isBlock(editor, n),
+          const blockEntry = Editor.above(editor, {
+            at: path,
+            match: n => SlateElement.isElement(n) && Editor.isBlock(editor, n),
+          })
+          if (!blockEntry) {
+            return false
+          }
+
+          const [, blockPath] = blockEntry
+          return Editor.isStart(editor, Editor.start(editor, path), blockPath)
         })
-        if (!blockEntry) {
-          return false
+
+        if (scheduleFlush) {
+          ReactEditor.androidScheduleFlush(editor)
         }
-
-        const [, blockPath] = blockEntry
-        return Editor.isStart(editor, Editor.start(editor, path), blockPath)
       })
-
-      if (scheduleFlush) {
-        ReactEditor.androidScheduleFlush(editor)
-      }
-    })
-  }, [])
+    },
+    [editor]
+  )
 
   return (
     <Slate editor={editor} value={initialValue}>

site/examples/mentions.tsx

@@ -57,7 +57,7 @@ const MentionExample = () => {
         }
       }
     },
-    [index, search, target]
+    [chars, editor, index, target]
   )
 
   useEffect(() => {