diff --git a/package.json b/package.json
index 00c3724..5b1788b 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "html-docx-js": "^0.3.1",
     "html-docx-js-typescript": "^0.1.5",
     "katex": "^0.16.8",
+    "path-browserify": "^1.0.1",
     "rehype-format": "^4.0.1",
     "rehype-parse": "^8.0.4",
     "rehype-remark": "^9.1.2",
@@ -77,6 +78,7 @@
     "@types/html-docx-js": "^0.3.1",
     "@types/katex": "^0.16.2",
     "@types/node": "^20.5.6",
+    "@types/path-browserify": "^1.0.1",
     "@types/seedrandom": "^3.0.5",
     "@types/yamljs": "^0.2.31",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
diff --git a/src/modules/convert/api.ts b/src/modules/convert/api.ts
index c871bf0..da67d39 100644
--- a/src/modules/convert/api.ts
+++ b/src/modules/convert/api.ts
@@ -442,7 +442,7 @@ function md2remark(str: string) {
     .replace(
       /!\[(.*)\]\((.*)\)/g,
       (match, altText, imageURL) =>
-        `![${altText}](${encodeURIComponent(imageURL)})`,
+        `![${altText}](${encodeURI(imageURL)})`,
     );
   const remark = unified()
     .use(remarkGfm)
@@ -812,7 +812,7 @@ function processN2MRehypeCitationNodes(
 
     visit(
       node,
-      (_n: any) => _n.properties?.className.includes("citation-item"),
+      (_n: any) => _n.properties?.className?.includes("citation-item"),
       (_n: any) => {
         return childNodes?.push(_n);
       },
@@ -1140,7 +1140,7 @@ async function processM2NRehypeImageNodes(
         : "file";
       if (srcType === "file") {
         if (!PathUtils.isAbsolute(src)) {
-          src = PathUtils.joinRelative(fileDir, src);
+          src = jointPath(fileDir, src);
         }
         if (!(await fileExists(src))) {
           ztoolkit.log("parse image, path invalid", src);
diff --git a/src/modules/export/markdown.ts b/src/modules/export/markdown.ts
index bfd4aac..4ed103d 100644
--- a/src/modules/export/markdown.ts
+++ b/src/modules/export/markdown.ts
@@ -10,7 +10,7 @@ export async function saveMD(
   },
 ) {
   const noteItem = Zotero.Items.get(noteId);
-  const dir = PathUtils.join(
+  const dir = jointPath(
     ...PathUtils.split(formatPath(filename)).slice(0, -1),
   );
   const hasImage = noteItem.getNote().includes("<img");
@@ -39,7 +39,7 @@ export async function syncMDBatch(saveDir: string, noteIds: number[]) {
   }
   for (const noteItem of noteItems) {
     const filename = await addon.api.sync.getMDFileName(noteItem.id, saveDir);
-    const filePath = PathUtils.join(saveDir, filename);
+    const filePath = jointPath(saveDir, filename);
     const content = await addon.api.convert.note2md(noteItem, saveDir, {
       keepNoteLink: false,
       withYAMLHeader: true,
diff --git a/src/modules/sync/api.ts b/src/modules/sync/api.ts
index 1396f1f..9b642f1 100644
--- a/src/modules/sync/api.ts
+++ b/src/modules/sync/api.ts
@@ -1,7 +1,7 @@
 import YAML = require("yamljs");
 import { getPref, setPref } from "../../utils/prefs";
 import { config } from "../../../package.json";
-import { fileExists, formatPath } from "../../utils/str";
+import { fileExists, formatPath, jointPath } from "../../utils/str";
 
 export {
   initSyncList,
@@ -143,10 +143,10 @@ async function getMDStatus(
       filepath = source;
     } else if (typeof source === "number") {
       const syncStatus = getSyncStatus(source);
-      filepath = PathUtils.join(syncStatus.path, syncStatus.filename);
+      filepath = jointPath(syncStatus.path, syncStatus.filename);
     } else if (source.isNote && source.isNote()) {
       const syncStatus = getSyncStatus(source.id);
-      filepath = PathUtils.join(syncStatus.path, syncStatus.filename);
+      filepath = jointPath(syncStatus.path, syncStatus.filename);
     }
     filepath = formatPath(filepath);
     if (await fileExists(filepath)) {
@@ -173,7 +173,7 @@ async function getMDFileName(noteId: number, searchDir?: string) {
   if (
     (!searchDir || searchDir === syncStatus.path) &&
     syncStatus.filename &&
-    (await fileExists(PathUtils.join(syncStatus.path, syncStatus.filename)))
+    (await fileExists(jointPath(syncStatus.path, syncStatus.filename)))
   ) {
     return syncStatus.filename;
   }
diff --git a/src/modules/sync/hooks.ts b/src/modules/sync/hooks.ts
index 2648727..001f2f3 100644
--- a/src/modules/sync/hooks.ts
+++ b/src/modules/sync/hooks.ts
@@ -1,6 +1,7 @@
 import { showHint } from "../../utils/hint";
 import { getString } from "../../utils/locale";
 import { getPref } from "../../utils/prefs";
+import { jointPath } from "../../utils/str";
 
 export { setSyncing, callSyncing };
 
@@ -150,7 +151,7 @@ async function callSyncing(
         progress: ((i - 1) / totalCount) * 100,
       });
       const item = Zotero.Items.get(syncStatus.itemID);
-      const filepath = PathUtils.join(syncStatus.path, syncStatus.filename);
+      const filepath = jointPath(syncStatus.path, syncStatus.filename);
       await addon.api.$import.fromMD(filepath, { noteId: item.id });
       // Update md file to keep the metadata synced
       await addon.api.$export.syncMDBatch(syncStatus.path, [item.id]);
@@ -166,7 +167,7 @@ async function callSyncing(
 
       await addon.hooks.onShowSyncDiff(
         syncStatus.itemID,
-        PathUtils.join(syncStatus.path, syncStatus.filename),
+        jointPath(syncStatus.path, syncStatus.filename),
       );
       i += 1;
     }
diff --git a/src/utils/str.ts b/src/utils/str.ts
index caf0cf5..c6c3230 100644
--- a/src/utils/str.ts
+++ b/src/utils/str.ts
@@ -1,4 +1,5 @@
 import seedrandom = require("seedrandom");
+import pathHelper = require("path-browserify");
 
 export function slice(str: string, len: number) {
   return str.length > len ? `${str.slice(0, len - 3)}...` : str;
@@ -90,7 +91,7 @@ export async function fileExists(path: string): Promise<boolean> {
 
 export function jointPath(...paths: string[]) {
   try {
-    return formatPath(PathUtils.join(...paths));
+    return formatPath(pathHelper.join(...paths));
   } catch (e) {
     ztoolkit.log("[jointPath]", e);
     return "";