Fix/strict types

app/menu.tsx

@@ -5,13 +5,19 @@ import {
   PopoverTrigger,
   PopoverContent,
 } from "@/ui/primitives/popover";
-import { useContext } from "react";
+import React, { useContext } from "react";
 import { AppContext } from "./providers";
-import { FontDefault, FontSerif, FontMono } from '@/ui/icons'
+import { FontDefault, FontSerif, FontMono } from "@/ui/icons";
 import { Check, Menu as MenuIcon, Monitor, Moon, SunDim } from "lucide-react";
 import { useTheme } from "next-themes";
+import { FontType } from "@/styles/fonts";
 
-const fonts = [
+type FontsArrayType = {
+  font: FontType;
+  icon: React.ReactNode;
+};
+
+const fonts: FontsArrayType[] = [
   {
     font: "Default",
     icon: <FontDefault className="h-4 w-4" />,
@@ -23,8 +29,9 @@ const fonts = [
   {
     font: "Mono",
     icon: <FontMono className="h-4 w-4" />,
-  }
+  },
 ];
+
 const appearances = [
   {
     theme: "System",
@@ -52,7 +59,7 @@ export default function Menu() {
       <PopoverContent className="w-52 divide-y divide-stone-200" align="end">
         <div className="p-2">
           <p className="p-2 text-xs font-medium text-stone-500">Font</p>
-          {fonts.map(({font, icon}) => (
+          {fonts.map(({ font, icon }) => (
             <button
               key={font}
               className="flex w-full items-center justify-between rounded px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
@@ -61,7 +68,9 @@ export default function Menu() {
               }}
             >
               <div className="flex items-center space-x-2">
-                <div className="rounded-sm border border-stone-200 p-1">{icon}</div>
+                <div className="rounded-sm border border-stone-200 p-1">
+                  {icon}
+                </div>
                 <span>{font}</span>
               </div>
               {currentFont === font && <Check className="h-4 w-4" />}

app/providers.tsx

@@ -1,16 +1,16 @@
 "use client";
 
-import { Dispatch, ReactNode, SetStateAction, createContext } from "react";
+import { Dispatch, ReactNode, createContext } from "react";
 import { ThemeProvider, useTheme } from "next-themes";
 import { Toaster } from "sonner";
 import { Analytics } from "@vercel/analytics/react";
-import { displayFontMapper, defaultFontMapper } from "@/styles/fonts";
+import { displayFontMapper, defaultFontMapper, FontType } from "@/styles/fonts";
 import useLocalStorage from "@/lib/hooks/use-local-storage";
 import { cn } from "@/lib/utils";
 
 export const AppContext = createContext<{
-  font: string;
-  setFont: Dispatch<SetStateAction<string>>;
+  font: FontType;
+  setFont: Dispatch<FontType>;
 }>({
   font: "Default",
   setFont: () => {},
@@ -24,7 +24,7 @@ const ToasterProvider = () => {
 };
 
 export default function Providers({ children }: { children: ReactNode }) {
-  const [font, setFont] = useLocalStorage<string>("novel__font", "Default");
+  const [font, setFont] = useLocalStorage<FontType>("novel__font", "Default");
 
   return (
     <ThemeProvider

styles/fonts.ts

@@ -45,3 +45,5 @@ export const defaultFontMapper = {
   Serif: crimson.variable,
   Mono: inconsolata.variable,
 };
+
+export type FontType = "Default" | "Serif" | "Mono";

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "strict": false,
+    "strict": true,
     "noEmit": true,
     "allowJs": true,
     "jsx": "preserve",

ui/editor/components/color-selector.tsx

@@ -4,7 +4,7 @@ import { Dispatch, FC, SetStateAction } from "react";
 
 export interface BubbleColorMenuItem {
   name: string;
-  color: string | null;
+  color: string;
 }
 
 interface ColorSelectorProps {

ui/editor/components/image-resizer.tsx

@@ -1,6 +1,25 @@
-import Moveable from "react-moveable";
+import { Editor, SingleCommands } from "@tiptap/core";
+import Moveable, {
+  MoveableRefTargetType,
+  OnResize,
+  OnScale,
+} from "react-moveable";
 
-export const ImageResizer = ({ editor }) => {
+interface ImageResizeProps {
+  editor: Editor & {
+    commands: SingleCommands & {
+      setImage: (options: {
+        src: string;
+        alt?: string;
+        title?: string;
+        width?: number;
+        height?: number;
+      }) => boolean;
+    };
+  };
+}
+
+export const ImageResizer = ({ editor }: ImageResizeProps) => {
   const updateMediaSize = () => {
     const imageInfo = document.querySelector(
       ".ProseMirror-selectednode",
@@ -19,7 +38,11 @@ export const ImageResizer = ({ editor }) => {
   return (
     <>
       <Moveable
-        target={document.querySelector(".ProseMirror-selectednode") as any}
+        target={
+          document.querySelector(
+            ".ProseMirror-selectednode",
+          ) as MoveableRefTargetType
+        }
         container={null}
         origin={false}
         /* Resize event edges */
@@ -40,7 +63,7 @@ export const ImageResizer = ({ editor }) => {
         }: // direction,
         // clientX,
         // clientY,
-        any) => {
+        OnResize) => {
           delta[0] && (target!.style.width = `${width}px`);
           delta[1] && (target!.style.height = `${height}px`);
         }}
@@ -62,7 +85,7 @@ export const ImageResizer = ({ editor }) => {
           transform,
         }: // clientX,
         // clientY,
-        any) => {
+        OnScale) => {
           target!.style.transform = transform;
         }}
       />

ui/editor/components/link-selector.tsx

@@ -42,8 +42,8 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
         <form
           onSubmit={(e) => {
             e.preventDefault();
-            const input = e.target[0] as HTMLInputElement;
-            const url = getUrlFromString(input.value);
+            const value = inputRef.current?.value || "";
+            const url = getUrlFromString(value);
             url && editor.chain().focus().setLink({ href: url }).run();
             setIsOpen(false);
           }}

ui/editor/extensions/slash-command.tsx

@@ -10,7 +10,7 @@ import { Editor, Range, Extension } from "@tiptap/core";
 import Suggestion from "@tiptap/suggestion";
 import { ReactRenderer } from "@tiptap/react";
 import { useCompletion } from "ai/react";
-import tippy from "tippy.js";
+import tippy, { GetReferenceClientRect, Instance, Props } from "tippy.js";
 import {
   Heading1,
   Heading2,
@@ -55,7 +55,9 @@ const Command = Extension.create({
         }: {
           editor: Editor;
           range: Range;
-          props: any;
+          props: {
+            command: ({ editor, range }: CommandProps) => void;
+          };
         }) => {
           props.command({ editor, range });
         },
@@ -250,9 +252,9 @@ const CommandList = ({
   range,
 }: {
   items: CommandItemProps[];
-  command: any;
-  editor: any;
-  range: any;
+  command: (item: CommandItemProps) => void;
+  editor: Editor;
+  range: Range;
 }) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
 
@@ -376,7 +378,7 @@ const CommandList = ({
 
 const renderItems = () => {
   let component: ReactRenderer | null = null;
-  let popup: any | null = null;
+  let popup: Instance<Props>[] | null = null;
 
   return {
     onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
@@ -401,7 +403,8 @@ const renderItems = () => {
 
       popup &&
         popup[0].setProps({
-          getReferenceClientRect: props.clientRect,
+          getReferenceClientRect:
+            props.clientRect as unknown as GetReferenceClientRect,
         });
     },
     onKeyDown: (props: { event: KeyboardEvent }) => {

ui/editor/plugins/upload-images.tsx

@@ -15,7 +15,7 @@ const UploadImagesPlugin = () =>
       apply(tr, set) {
         set = set.map(tr.mapping, tr.doc);
         // See if the transaction adds or removes any placeholders
-        const action = tr.getMeta(this);
+        const action = tr.getMeta(this as unknown as PluginKey);
         if (action && action.add) {
           const { id, pos, src } = action.add;
 
@@ -34,7 +34,11 @@ const UploadImagesPlugin = () =>
           set = set.add(tr.doc, [deco]);
         } else if (action && action.remove) {
           set = set.remove(
-            set.find(null, null, (spec) => spec.id == action.remove.id),
+            set.find(
+              undefined,
+              undefined,
+              (spec) => spec.id == action.remove.id,
+            ),
           );
         }
         return set;
@@ -51,7 +55,7 @@ export default UploadImagesPlugin;
 
 function findPlaceholder(state: EditorState, id: {}) {
   const decos = uploadKey.getState(state);
-  const found = decos.find(null, null, (spec) => spec.id == id);
+  const found = decos.find(null, null, (spec: { id: {} }) => spec.id == id);
   return found.length ? found[0].from : null;
 }
 

ui/editor/props.ts

@@ -45,7 +45,10 @@ export const TiptapEditorProps: EditorProps = {
         top: event.clientY,
       });
       // here we deduct 1 from the pos or else the image will create an extra node
-      startImageUpload(file, view, coordinates.pos - 1);
+      if (coordinates) {
+        startImageUpload(file, view, coordinates.pos - 1);
+      }
+
       return true;
     }
     return false;

ui/primitives/leaflet.tsx

@@ -8,7 +8,7 @@ import {
   SetStateAction,
   useMemo,
 } from "react";
-import { AnimatePresence, motion, useAnimation } from "framer-motion";
+import { AnimatePresence, PanInfo, motion, useAnimation } from "framer-motion";
 
 export default function Leaflet({
   setOpen,
@@ -30,7 +30,10 @@ export default function Leaflet({
     });
   }, [controls, transitionProps]);
 
-  async function handleDragEnd(_: any, info: any) {
+  async function handleDragEnd(
+    _: MouseEvent | PointerEvent | TouchEvent,
+    info: PanInfo,
+  ) {
     const offset = info.offset.y;
     const velocity = info.velocity.y;
     const height = leafletRef.current?.getBoundingClientRect().height || 0;