webclipper: add bookmark option

Signed-off-by: 01zulfi <[email protected]>
streetwriters · Jan 9, 2025 · 90c427a · 90c427a
1 parent 71db854
commit 90c427a
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 39 deletions.
diff --git a/apps/web/src/utils/web-extension-server.ts b/apps/web/src/utils/web-extension-server.ts
@@ -74,7 +74,11 @@ export class WebExtensionServer implements Server {
   async saveClip(clip: Clip) {
     let clipContent = "";
 
-    if (clip.mode === "simplified" || clip.mode === "screenshot") {
+    if (
+      clip.mode === "simplified" ||
+      clip.mode === "screenshot" ||
+      clip.mode === "bookmark"
+    ) {
       clipContent += clip.data;
     } else {
       const clippedFile = new File(
@@ -106,11 +110,17 @@ export class WebExtensionServer implements Server {
     if (isCipher(content)) return;
 
     content += clipContent;
-    content += h("div", [
-      h("hr"),
-      h("p", ["Clipped from ", h("a", [clip.title], { href: clip.url })]),
-      h("p", [`Date clipped: ${getFormattedDate(Date.now())}`])
-    ]).innerHTML;
+    content +=
+      clip.mode === "bookmark"
+        ? h("div", [
+            h("hr"),
+            h("p", [`Date bookmarked: ${getFormattedDate(Date.now())}`])
+          ]).innerHTML
+        : h("div", [
+            h("hr"),
+            h("p", ["Clipped from ", h("a", [clip.title], { href: clip.url })]),
+            h("p", [`Date clipped: ${getFormattedDate(Date.now())}`])
+          ]).innerHTML;
 
     const id = await db.notes.add({
       id: note?.id,

diff --git a/docs/help/contents/web-clipper/clipping-your-first-web-page-with-web-clipper.md b/docs/help/contents/web-clipper/clipping-your-first-web-page-with-web-clipper.md
@@ -73,6 +73,10 @@ The `Selected nodes` mode allows you to select exactly which nodes you want to c
 
 The clipping mode controls how the final clip should look.
 
+### Bookmark
+
+`Bookmark` mode saves only the URL of the page along with the title. It is best suited to save pages for later reading/reference.
+
 ### Simplified
 
 `Simplified` mode doesn't include any styles. It is best suited for long-form content such as articles & blogs. All clips in `Simplified` mode are saved directly as is i.e. they do not appear as web clip embeds in the Notesnook editor.

diff --git a/extensions/web-clipper/src/common/bridge.ts b/extensions/web-clipper/src/common/bridge.ts
@@ -21,7 +21,7 @@ import { ThemeDefinition } from "@notesnook/theme";
 
 export type ClipArea = "full-page" | "visible" | "selection" | "article";
 
-export type ClipMode = "simplified" | "screenshot" | "complete";
+export type ClipMode = "bookmark" | "simplified" | "screenshot" | "complete";
 
 export type User = {
   email?: string;

diff --git a/extensions/web-clipper/src/components/icons/index.ts b/extensions/web-clipper/src/components/icons/index.ts
@@ -57,6 +57,7 @@ export const Icons = {
   visible: mdiViewDayOutline,
   selection: mdiCursorDefaultClickOutline,
 
+  bookmark: mdiBookmarkOutline,
   simplified: mdiTextBoxOutline,
   screenshot: mdiFitToScreenOutline,
   complete: mdiViewDashboardOutline,

diff --git a/extensions/web-clipper/src/views/main.tsx b/extensions/web-clipper/src/views/main.tsx
@@ -68,6 +68,11 @@ const clipAreas: { name: string; id: ClipArea; icon: string }[] = [
 
 const clipModes: { name: string; id: ClipMode; icon: string; pro?: boolean }[] =
   [
+    {
+      name: "Bookmark",
+      id: "bookmark",
+      icon: Icons.bookmark
+    },
     {
       name: "Simplified",
       id: "simplified",
@@ -137,6 +142,7 @@ export function Main() {
         setClipMode("simplified");
         return;
       }
+      if (clipMode === "bookmark") return;
 
       try {
         setIsClipping(true);
@@ -244,7 +250,7 @@ export function Main() {
               setClipArea(item.id);
               setClipNonce((s) => ++s);
             }}
-            disabled={isClipping}
+            disabled={isClipping || clipMode === "bookmark"}
             sx={{
               display: "flex",
               borderRadius: "default",
@@ -313,33 +319,36 @@ export function Main() {
           </Button>
         ))}
 
-        {clipData && clipData.data && !isClipping && (
-          <Text
-            variant="body"
-            sx={{
-              mt: 1,
-              bg: "shade",
-              color: "accent",
-              p: 1,
-              border: "1px solid var(--accent)",
-              borderRadius: "default",
-              cursor: "pointer",
-              ":hover": {
-                filter: "brightness(80%)"
-              }
-            }}
-            onClick={async () => {
-              const winUrl = URL.createObjectURL(
-                new Blob(["\ufeff", clipData.data], { type: "text/html" })
-              );
-              await browser.windows.create({
-                url: winUrl
-              });
-            }}
-          >
-            Clip done. Click here to preview.
-          </Text>
-        )}
+        {clipMode !== "bookmark" &&
+          clipData &&
+          clipData.data &&
+          !isClipping && (
+            <Text
+              variant="body"
+              sx={{
+                mt: 1,
+                bg: "shade",
+                color: "accent",
+                p: 1,
+                border: "1px solid var(--accent)",
+                borderRadius: "default",
+                cursor: "pointer",
+                ":hover": {
+                  filter: "brightness(80%)"
+                }
+              }}
+              onClick={async () => {
+                const winUrl = URL.createObjectURL(
+                  new Blob(["\ufeff", clipData.data], { type: "text/html" })
+                );
+                await browser.windows.create({
+                  url: winUrl
+                });
+              }}
+            >
+              Clip done. Click here to preview.
+            </Text>
+          )}
 
         {error && (
           <Text
@@ -400,9 +409,16 @@ export function Main() {
         <Button
           variant="accent"
           sx={{ mt: 1 }}
-          disabled={!clipData}
+          disabled={(!clipData && clipMode !== "bookmark") || !title || !url}
           onClick={async () => {
-            if (!clipData || !title || !clipArea || !clipMode || !url) return;
+            const isBookmark = clipMode === "bookmark";
+            const data = isBookmark
+              ? {
+                  data: `<a href="${url}">${title}</a>`
+                }
+              : clipData;
+
+            if (!data || !title || !clipArea || !clipMode || !url) return;
 
             const notesnook = await connectApi(false);
             if (!notesnook) {
@@ -417,7 +433,7 @@ export function Main() {
               note,
               refs,
               pageTitle: pageTitle.current,
-              ...clipData
+              ...data
             });
 
             setClipData(undefined);
@@ -433,7 +449,7 @@ export function Main() {
             window.close();
           }}
         >
-          Save clip
+          {clipMode === "bookmark" ? "Save bookmark" : "Save clip"}
         </Button>
 
         <Flex