Add DOM parsing to retrieve page descriptions and tags

- Added linkedom for parsing HTML documents. - Enhanced getCurrentTabInfo() to extract meta descriptions and keywords using linkedom. - Updated BookmarkForm.tsx to use the new data and change Name form on top
jojoto · Nov 13, 2024 · 5003258 · 5003258
1 parent 7136918
commit 5003258
Show file tree

Hide file tree

Showing 4 changed files with 216 additions and 78 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
+    "linkedom": "^0.18.5",
     "lucide-react": "^0.264.0",
     "query-string": "^8.1.0",
     "react": "^18.2.0",
@@ -43,7 +44,7 @@
     "@types/firefox-webext-browser": "^120.0.0",
     "@types/node": "^20.4.8",
     "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",

diff --git a/src/@/components/BookmarkForm.tsx b/src/@/components/BookmarkForm.tsx
@@ -142,9 +142,9 @@ const BookmarkForm = () => {
   const { handleSubmit, control } = form;
 
   useEffect(() => {
-    getCurrentTabInfo().then(({ url, title }) => {
+    getCurrentTabInfo().then(({ url, title, description}) => {
       form.setValue('url', url ? url : '');
-      form.setValue('description', title ? title : '');
+      form.setValue('description', description ? description : '');
       // Had to be done since, name isn't required but when syncing it is. If not it looks bad!.
       form.setValue('name', title ? title : '');
     });
@@ -325,6 +325,19 @@ const BookmarkForm = () => {
             name="collection"
             render={({ field }) => (
               <FormItem className={`my-2`}>
+                <FormField
+                  control={control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Name</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Google..." {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
                 <FormLabel>Collection</FormLabel>
                 <div className="min-w-full inset-x-0">
                   <Popover
@@ -474,60 +487,7 @@ const BookmarkForm = () => {
                       </PopoverContent>
                     ) : undefined}
 
-                    {/* <PopoverContent
-                      className={`min-w-full p-0 overflow-y-auto ${
-                        !openOptions ? 'max-h-[100px]' : 'max-h-[200px]'
-                      }`}
-                    >
-                      <Command className="flex-grow min-w-full dropdown-content">
-                        <CommandInput
-                          className="min-w-[280px]"
-                          placeholder="Search collection..."
-                        />
-                        <CommandEmpty>No Collection found.</CommandEmpty>
-                        {Array.isArray(collections?.response) && (
-                          <CommandGroup className="w-full">
-                            {isLoading ? (
-                              <CommandItem
-                                value="Getting collections..."
-                                key="Getting collections..."
-                                onSelect={() => {
-                                  form.setValue('collection', {
-                                    name: 'Unorganized',
-                                  });
-                                  setOpenCollections(false);
-                                }}
-                              >
-                                Unorganized
-                              </CommandItem>
-                            ) : (
-                              collections.response?.map(
-                                (collection: {
-                                  name: string;
-                                  id: number;
-                                  ownerId: number;
-                                }) => (
-                                  <CommandItem
-                                    value={collection.name}
-                                    key={collection.id}
-                                    onSelect={() => {
-                                      form.setValue('collection', {
-                                        ownerId: collection.ownerId,
-                                        id: collection.id,
-                                        name: collection.name,
-                                      });
-                                      setOpenCollections(false);
-                                    }}
-                                  >
-                                    {collection.name}
-                                  </CommandItem>
-                                )
-                              )
-                            )}
-                          </CommandGroup>
-                        )}
-                      </Command>
-                    </PopoverContent> */}
+                    {}
                   </Popover>
                 </div>
                 <FormMessage />
@@ -565,20 +525,7 @@ const BookmarkForm = () => {
                     <FormMessage />
                   </FormItem>
                 )}
-              />
-              <FormField
-                control={control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Name</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Google..." {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+              />              
               <FormField
                 control={control}
                 name="description"