enhance: logseq copilot api from will change to same as logseq api from

#17

Signed-off-by: EINDEX <snowstarlbk@gmail.com>

src/config.ts

@@ -1,7 +1,10 @@
 import Browser from 'webextension-polyfill';
 
 export type LogseqCopliotConfig = {
+  version: string;
   logseqHost: string;
+  logseqHostName: string;
+  logseqPort: number;
   logseqAuthToken: string;
   enableClipNoteFloatButton: boolean;
   clipNoteLocation: string;
@@ -12,7 +15,10 @@ export type LogseqCopliotConfig = {
 export const getLogseqCopliotConfig =
   async (): Promise<LogseqCopliotConfig> => {
     const {
+      version = '',
       logseqHost = 'http://localhost:12315',
+      logseqHostName = 'localhost',
+      logseqPort = 12315,
       logseqAuthToken = '',
       enableClipNoteFloatButton = false,
       clipNoteLocation = "journal",
@@ -21,7 +27,10 @@ export const getLogseqCopliotConfig =
 {{content}}`
     } = await Browser.storage.local.get();
     return {
+      version,
       logseqHost,
+      logseqHostName,
+      logseqPort,
       logseqAuthToken,
       enableClipNoteFloatButton,
       clipNoteLocation,

src/pages/background/index.ts

@@ -2,9 +2,10 @@ import LogseqClient from '../logseq/client';
 import Browser from 'webextension-polyfill';
 import { getLogseqCopliotConfig } from '../../config';
 import { removeUrlHash } from '@/utils';
-import { setExtensionBadge } from './utils';
+import { setExtensionBadge, versionCompare } from './utils';
 import { debounce, delay } from 'lodash';
 import { format } from 'date-fns';
+import { changeOptionsHostToHostNameAndPort } from './upgrade';
 
 const logseqClient = new LogseqClient();
 
@@ -60,7 +61,8 @@ const quickCapture = async (data: string) => {
         now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()
       }`,
     )
-    .replaceAll('{{title}}', activeTab.title).trim();
+    .replaceAll('{{title}}', activeTab.title)
+    .trim();
 
   if (clipNoteLocation === 'customPage') {
     await logseqClient.appendBlock(clipNoteCustomPage, render);
@@ -74,14 +76,6 @@ const quickCapture = async (data: string) => {
   debounceBadgeSearch(activeTab.url, activeTab.id);
 };
 
-Browser.runtime.onInstalled.addListener(() => {
-  const promise = new Promise(async () => {
-    const { logseqAuthToken } = await getLogseqCopliotConfig();
-    if (logseqAuthToken === '') Browser.runtime.openOptionsPage();
-  });
-  promise.catch((err) => console.error(err));
-});
-
 Browser.tabs.onActivated.addListener((activeInfo) => {
   const promise = new Promise(async () => {
     const tab = await Browser.tabs.get(activeInfo.tabId);
@@ -124,5 +118,15 @@ Browser.contextMenus.create({
 });
 
 Browser.contextMenus.onClicked.addListener((info, tab) => {
-  Browser.tabs.sendMessage(tab!.id, { type: info.menuItemId }, {});
+  Browser.tabs.sendMessage(tab!.id!, { type: info.menuItemId }, {});
+});
+
+Browser.runtime.onInstalled.addListener((event) => {
+    if (event.reason === 'install') {
+      Browser.runtime.openOptionsPage();
+    } else if (event.reason === 'update') {
+      if (versionCompare(event.previousVersion!, '1.10.19') < 0) {
+        changeOptionsHostToHostNameAndPort()
+      }
+    }
 });

src/pages/background/upgrade.ts

@@ -0,0 +1,15 @@
+import { getLogseqCopliotConfig, saveLogseqCopliotConfig } from "@/config";
+import Browser from "webextension-polyfill";
+
+export const changeOptionsHostToHostNameAndPort = async() => {
+  const { logseqHost } = await getLogseqCopliotConfig();
+  if (logseqHost) {
+    const url = new URL(logseqHost);
+    await saveLogseqCopliotConfig({
+      logseqHostName: url.hostname,
+      logseqPort: parseInt(url.port),
+    });
+    Browser.storage.local.remove('logseqHost');
+  }
+}
+

src/pages/background/utils.ts

@@ -6,12 +6,32 @@ export const removeUrlHash = (url: string) => {
 };
 
 export const setExtensionBadge = async (text: string, tabId: number) => {
-
-  const action = Browser.runtime.getManifest().manifest_version === 2? Browser.browserAction : Browser.action; 
+  const action =
+    Browser.runtime.getManifest().manifest_version === 2
+      ? Browser.browserAction
+      : Browser.action;
   await action.setBadgeText({
     text: text,
     tabId: tabId,
   });
   await action.setBadgeBackgroundColor({ color: '#4caf50', tabId });
   await action.setBadgeTextColor({ color: '#ffffff', tabId });
 };
+
+const mappingVersionToNumbers = (version: string): Array<number> => {
+  return version.split('.').slice(0, 3).map((x) => {
+    return parseInt(x.split('0')[0]);
+  })
+}
+
+export const versionCompare = (versionA: string, versionB: string) => {
+  const [majorA, minorA, patchA] = mappingVersionToNumbers(versionA)
+  const [majorB, minorB, patchB] = mappingVersionToNumbers(versionB)
+  if (majorA < majorB) return -1
+  if (majorA > majorB) return 1
+  if (minorA < minorB) return -1
+  if (minorA > minorB) return 1
+  if (patchA < patchB) return -1
+  if (patchA > patchB) return 1
+  return 0
+};

src/pages/options/components/Connect.tsx

@@ -7,6 +7,8 @@ import {
   InputRightElement,
   Button,
   Link,
+  NumberInput,
+  NumberInputField,
 } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 
@@ -30,26 +32,26 @@ export const LogseqConnectOptions = () => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setLogseqConfig({
       ...logseqConfig,
-      [e.target.name]: e.target.value || e.target.checked,
+      [e.target.name]: e.target.value,
     });
   };
 
   const triggerShowToken = () => setShowToken(!showToken);
 
   const save = () => {
     try {
-      new URL(logseqConfig!.logseqHost)
+      // new URL(logseqConfig!.logseqHost);
     } catch (error) {
-      setConnected(false)
-      setButtonMessage("Logseq Host is not a URL!")
-      return
+      setConnected(false);
+      setButtonMessage('Logseq Host is not a URL!');
+      return;
     }
-
-
+
     const promise = new Promise(async () => {
       await saveLogseqCopliotConfig({
         logseqAuthToken: logseqConfig!.logseqAuthToken,
-        logseqHost: new URL(logseqConfig!.logseqHost).origin,
+        logseqHostName: logseqConfig?.logseqHostName,
+        logseqPort: logseqConfig?.logseqPort,
       });
       if (await checkConnection()) {
         const graph = await client.getGraph();
@@ -97,20 +99,34 @@ export const LogseqConnectOptions = () => {
     <>
       <Heading size={'lg'}>Logseq Connect</Heading>
       <Grid
-        gridTemplateColumns={'160px auto'}
+        gridTemplateColumns={'1fr 1fr 1fr'}
         alignItems={'center'}
         rowGap={2}
         columnGap={2}
       >
-        <Text fontSize="md">Logseq Host</Text>
+        <Text gridColumn={'1 / span 2'} fontSize="sm">
+          Host
+        </Text>
+        <Text fontSize="sm">Port (0 ~ 65536)</Text>
         <Input
-          name="logseqHost"
+          gridColumn={'1 / span 2'}
+          name="logseqHostName"
           placeholder="Logseq Host"
           onChange={onChange}
-          value={logseqConfig?.logseqHost}
+          value={logseqConfig?.logseqHostName}
         />
-        <Text fontSize="md">Authorization Token</Text>
-        <InputGroup>
+        <NumberInput
+          max={65535}
+          min={0}
+          name="logseqPort"
+          placeholder="Logseq Host"
+          onChange={onChange}
+          value={logseqConfig?.logseqPort}
+        >
+          <NumberInputField />
+        </NumberInput>
+        <Text fontSize="sm">Authorization Token</Text>
+        <InputGroup gridColumn={'1 / span 3'}>
           <Input
             name="logseqAuthToken"
             type={showToken ? 'text' : 'password'}