chore: install and configure eslint, prettier and husky

.eslintignore

@@ -0,0 +1,3 @@
+node_modules/
+build/
+dist/

.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "http://json.schemastore.org/eslintrc",
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:@typescript-eslint/strict",
+    "prettier"
+  ],
+  "env": {
+    "node": true,
+    "es6": true
+  },
+  "rules": {
+    "@typescript-eslint/no-unsafe-assignment": "off"
+  },
+  "ignorePatterns": ["node_modules/", "build/", "dist/"]
+}

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn run lint:staged

.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+  "src/**/*.{ts,tsx}": ["prettier --write", "eslint --fix"],
+  "*.{json}": ["prettier --write"]
+}

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+build/
+dist/

.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "arrowParens": "always",
+  "printWidth": 80,
+  "singleQuote": false,
+  "jsxSingleQuote": false,
+  "semi": true,
+  "trailingComma": "all",
+  "tabWidth": 2
+}

package.json

@@ -5,7 +5,9 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint:staged": "lint-staged",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.0.0",
@@ -39,10 +41,17 @@
     "@types/lodash.debounce": "^4.0.7",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.33.0",
+    "@typescript-eslint/parser": "^5.33.0",
     "@vitejs/plugin-react": "^1.3.0",
     "autoprefixer": "^10.4.7",
+    "eslint": "^8.21.0",
+    "eslint-config-prettier": "^8.5.0",
+    "husky": "^8.0.0",
+    "lint-staged": "^13.0.3",
     "postcss": "^8.4.14",
     "postcss-import": "^14.1.0",
+    "prettier": "^2.7.1",
     "tailwindcss": "^3.1.6",
     "typescript": "^4.6.3",
     "vite": "^2.9.9",

postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    'postcss-import': {},
+    "postcss-import": {},
     tailwindcss: {},
     autoprefixer: {},
   },

src/editor/RichTextEditor.tsx

@@ -44,10 +44,11 @@ const BubbleMenu = ({ editor }: { editor: Editor }) => {
         </button>
         <a
           dir="ltr"
-          href={editor.getAttributes("link").href}
+          href={editor.getAttributes("link").href || undefined}
           target="_blank"
           className="!cursor-pointer !text-white"
         >
+          {/* eslint-disable-next-line */}
           {editor.getAttributes("link").href?.substring(0, 15) + "..."}
         </a>
       </div>
@@ -108,11 +109,12 @@ export const RichTextEditor = () => {
           "mt-6 mx-auto px-1 sm:px-2 pb-4",
           "prose prose-sm sm:prose-base md:prose-md prose-stone",
           "prose-img:mb-2 prose-img:rounded prose-figcaption:text-center",
-          "prose-a:text-rose-500"
+          "prose-a:text-rose-500",
         )}
       >
         <EditorContent editor={editor} />
         <div className="text-gray-400 float-left">
+          {/* eslint-disable-next-line */}
           {editor.storage.characterCount.words()} کلمه
         </div>
       </div>

src/editor/TitleEditor.tsx

@@ -54,6 +54,7 @@ export const TitleEditor = () => {
       <EditorContent editor={editor} />
       <div className="text-gray-400 float-left">
         {/* TODO: use farsi digits */}
+        {/* eslint-disable-next-line */}
         {editor.storage.characterCount.characters()}/{CHAR_LIMIT} کاراکتر
       </div>
     </div>

src/editor/Toolbar.tsx

@@ -41,7 +41,7 @@ const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(
       "flex items-center justify-center",
       "outline-none rounded font-bold border-transparent hover:border-rose-500 hover:border",
       "ease-in-out transition duration-200",
-      isActive ? "bg-rose-500" : "bg-black"
+      isActive ? "bg-rose-500" : "bg-black",
     );
 
     return (
@@ -50,7 +50,7 @@ const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(
         {children}
       </button>
     );
-  }
+  },
 );
 
 interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -119,7 +119,7 @@ const ToolbarLinkToggler = ({ editor }: { editor: Editor }) => {
         <div className="relative z-50">
           <input
             dir="ltr"
-            value={link || ""}
+            value={link ?? ""}
             onChange={(e) => setLink(e.target.value)}
             className="w-full py-2 pl-2 pr-14 text-sm text-black border-2 border-gray-200 rounded-lg"
             onKeyDown={(e) => {
@@ -153,15 +153,19 @@ const ToolbarImageInput = ({ editor }: { editor: Editor }) => {
     }
 
     // TODO: filter file type
-    const file = e.target?.files[0]!;
+    const file = e.target.files[0];
+
+    if (!file) {
+      return;
+    }
 
     if (imageInputRef.current) {
       imageInputRef.current.value = "";
     }
 
-    if (file && file.size > MAX_IMAGE_SIZE_IN_MB * 1000000) {
+    if (file.size > MAX_IMAGE_SIZE_IN_MB * 1000000) {
       toast.error(
-        `حجم تصاویر حداکثر میتواند ${MAX_IMAGE_SIZE_IN_MB} مگابایت باشد`
+        `حجم تصاویر حداکثر میتواند ${MAX_IMAGE_SIZE_IN_MB} مگابایت باشد`,
       );
 
       return;
@@ -172,7 +176,7 @@ const ToolbarImageInput = ({ editor }: { editor: Editor }) => {
       success: (result) => {
         const reader = new FileReader();
 
-        reader.onload = async (e: ProgressEvent<FileReader>) => {
+        reader.onload = (e: ProgressEvent<FileReader>) => {
           if (e.target?.result) {
             editor
               .chain()
@@ -208,7 +212,7 @@ const ToolbarImageInput = ({ editor }: { editor: Editor }) => {
         className={cn(
           "w-full py-2 px-4",
           "hidden rounded rounded-8 border focus:outline-none bg-gray-100",
-          "placeholder:text-right"
+          "placeholder:text-right",
         )}
       />
     </ToolbarButton>

src/editor/extensions/CodeBlock.tsx

@@ -27,6 +27,7 @@ const CodeBlockWrapper = ({ updateAttributes, extension }: NodeViewProps) => {
         onChange={(event) => updateAttributes({ language: event.target.value })}
       >
         <option value="null">auto</option>
+        {/* eslint-disable-next-line */}
         {extension.options.lowlight
           .listLanguages()
           .map((lang: string, index: number) => (

src/editor/extensions/Figure.tsx

@@ -176,15 +176,15 @@ const FigureWrapper = ({ node, deleteNode }: NodeViewProps) => {
   return (
     <NodeViewWrapper className="flex justify-center" data-type="figure">
       <figure className="relative group">
-        {node.attrs.src && <img src={node.attrs.src} alt="Image" />}
+        {node.attrs.src && <img src={node.attrs.src as string} alt="Image" />}
         {/* TODO: sync alt with caption */}
         <NodeViewContent as="figcaption" className="text-center" dir="auto" />
         <button
           className={cn(
             "w-8 h-8 p-2 z-20",
             "absolute top-2 right-2 flex items-center justify-center",
             "opacity-0 group-hover:opacity-100 bg-gray-800 hover:bg-gray-700 text-rose-500 rounded",
-            "ease-in-out transition duration-200"
+            "ease-in-out transition duration-200",
           )}
           onClick={() => deleteNode()}
         >

src/editor/extensions/TextDirection.tsx

@@ -57,7 +57,7 @@ export const TextDirection = Extension.create<TextDirectionOptions>({
           }
 
           return this.options.types.every((type) =>
-            commands.updateAttributes(type, { dir: direction })
+            commands.updateAttributes(type, { dir: direction }),
           );
         },
     };

src/main.tsx

@@ -6,5 +6,5 @@ import "./styles/globals.css";
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );

src/stores/useEditorStore.ts

@@ -15,9 +15,9 @@ interface EditorStore {
 
 const IDBStorage: StateStorage = {
   getItem: async (name) => {
-    return (await get(name)) || null;
+    return (await get(name)) ?? null;
   },
-  setItem: _debounce(async (name, value) => {
+  setItem: _debounce(async (name: string, value: string) => {
     const parsed = JSON.parse(value);
     const newValue = JSON.stringify({ ...parsed, lastUpdate: new Date() });
     await set(name, newValue);
@@ -51,16 +51,16 @@ export const useEditorStore = create<EditorStore>()(
         titleHtml: s.titleHtml,
         contentHtml: s.contentHtml,
       }),
-    }
-  )
+    },
+  ),
 );
 
 export const useEditorHydration = () => {
   const [hydrated, setHydrated] = useState(useEditorStore.persist.hasHydrated);
 
   useEffect(() => {
     const unsubFinishHydration = useEditorStore.persist.onFinishHydration(() =>
-      setHydrated(true)
+      setHydrated(true),
     );
 
     setHydrated(useEditorStore.persist.hasHydrated());