update to v1.3.0

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "net-clip",
 	"name": "NetClip",
-	"version": "1.2.9",
+	"version": "1.3.0",
     "minAppVersion": "1.4.0",
 	"description": "Clip, save, search, and browse web pages within your vault",
 	"author": "Elhary",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "net-clip",
-	"version": "1.2.9",
+	"version": "1.3.0",
 	"description": "Clip, save, search, and browse web pages within Obsidian",
 	"main": "main.js",
 	"scripts": {
@@ -22,6 +22,7 @@
 		"typescript": "4.7.4"
 	},
 	"dependencies": {
+		"@electron/remote": "^2.1.2",
 		"@mozilla/readability": "^0.5.0"
 	}
 }

src/view/EditorWebView.ts

@@ -1,6 +1,8 @@
-import { ItemView, WorkspaceLeaf,  Notice } from 'obsidian';
+import { ItemView, WorkspaceLeaf,  Notice, ViewStateResult } from 'obsidian';
 import WebClipperPlugin from '../main';
 import { WebViewComponent } from '../webViewComponent';
+import { title } from 'process';
+import { stat } from 'fs';
 
 export const VIEW_TYPE_WORKSPACE_WEBVIEW = 'netClip_workspace_webview';
 
@@ -10,6 +12,7 @@ export class WorkspaceLeafWebView extends ItemView {
     private initialUrl = '';
     icon = 'globe';
     url: string | undefined;
+    currentTitle = 'Web View'
     public onLoadEvent: Promise<void>;
     private resolveLoadEvent: () => void;
 
@@ -31,14 +34,21 @@ export class WorkspaceLeafWebView extends ItemView {
     }
 
     getDisplayText(): string {
-        return 'Web View';
+        return this.currentTitle;
     }
 
     private reloadWebView() {
         this.containerEl.empty();
         this.createWebViewComponent();
     }
 
+    async setState(state: any, result: ViewStateResult): Promise<void> {
+        if (state?.url) {
+            this.initialUrl = state.url;
+            this.reloadWebView();
+        }
+        super.setState(state, result);
+    }
 
     private createWebViewComponent() {
         this.webViewComponent = new WebViewComponent(
@@ -56,20 +66,41 @@ export class WorkspaceLeafWebView extends ItemView {
             },
             this.plugin
         );
+
+        this.webViewComponent.onWindowOpen((url: string) => {
+            const leaf = this.app.workspace.getLeaf(true);
+            leaf.setViewState({
+                type: VIEW_TYPE_WORKSPACE_WEBVIEW,
+                state: {url: url}
+            })
+            this.app.workspace.revealLeaf(leaf);
+        })
 
         const containerEl = this.webViewComponent.createContainer();
+
+        this.webViewComponent.onTitleChange((title: string) => {
+            this.currentTitle = title;
+            this.leaf.setViewState({
+                type: VIEW_TYPE_WORKSPACE_WEBVIEW,
+                state: { title: title }
+            });
+        });
+
         this.containerEl.appendChild(containerEl);
     }
 
     async onOpen(): Promise<void> {
         this.containerEl = this.containerEl.children[1] as HTMLElement;
         this.containerEl.empty();
 
-        const stateUrl = this.leaf.getViewState().state?.url;
-        this.initialUrl = (typeof stateUrl === 'string' && stateUrl) || this.plugin.settings.defaultWebUrl || 'https://google.com';
+        const state = this.leaf.getViewState();
+        if(state.state?.url && typeof state.state.url === 'string'){
+            this.initialUrl = state.state.url;
+        }else{
+            this.initialUrl = this.plugin.settings.defaultWebUrl || 'https://google.com';
+        }
 
         this.createWebViewComponent();
-
         this.resolveLoadEvent();
     }
 

src/webViewComponent.ts

@@ -2,6 +2,12 @@ import { App, Platform, setIcon, setTooltip } from 'obsidian';
 import { WebSearch, WebSearchSettings } from './search/search'; 
 import { ClipModal } from './modal/clipModal';
 
+let remote: any;
+
+if (!Platform.isMobileApp) {
+    remote = require('@electron/remote');
+}
+
 export interface WebviewTag extends HTMLElement {
     src: string;
     allowpopups?: boolean;
@@ -35,6 +41,9 @@ export class WebViewComponent {
     private searchInput: HTMLInputElement;
     private search: WebSearch;
     private onClipCallback?: (url: string) => Promise<void>;
+    private titleChangeCallback?: (title: string) => void;
+    private windowOpenCallback?: (url: string) => void;
+
 
     constructor(
         private app: App,
@@ -173,6 +182,10 @@ export class WebViewComponent {
         iframe.setAttribute('allow', 'encrypted-media;fullscreen;oversized-images;picture-in-picture;sync-xhr;geolocation');
         iframe.addEventListener('load', () => {
             this.onFrameLoad();
+            const title = iframe.contentDocument?.title;
+            if(title && this.titleChangeCallback){
+                this.titleChangeCallback(title);
+            }
         });
         return iframe;
     }
@@ -188,6 +201,16 @@ export class WebViewComponent {
             this.isFrameReady = true;
             this.updateUrlDisplay();
             this.loadingSpinner.classList.remove('loading-spinner-visible');
+
+            const webContents = remote.webContents.fromId(webview.getWebContentsId());
+            webContents.setWindowOpenHandler(({url}) => {
+                if(this.windowOpenCallback){
+                    this.windowOpenCallback(url)
+                    return {action: 'deny'}
+                }
+                return {action: 'allow'};
+
+            })
         });
 
         webview.addEventListener('did-start-loading', () => {
@@ -208,6 +231,12 @@ export class WebViewComponent {
             this.updateNavigationButtons();
         });
 
+        webview.addEventListener('page-title-updated', (event: any) => {
+            if(this.titleChangeCallback){
+                this.titleChangeCallback(event.title);
+            }
+        })
+
         return webview;
     }
 
@@ -321,4 +350,13 @@ export class WebViewComponent {
             }
         }
     }
+
+    onTitleChange(callback: (title: string) => void){
+        this.titleChangeCallback = callback
+    }
+
+    onWindowOpen(callback: (url: string) => void){
+        this.windowOpenCallback = callback;
+    }
+
 }

styles.css

@@ -289,8 +289,28 @@ button.netclip_warning{
   box-shadow: none;
   background-color: transparent;
   cursor: pointer;
+  -webkit-app-region: no-drag;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--size-2-2) var(--size-2-3);
+  cursor: var(--cursor);
+  border-radius: var(--clickable-icon-radius);
+  color: var(--icon-color);
+  opacity: var(--icon-opacity);
+  transition: opacity 0.15s ease-in-out;
+  height: auto;
+
+
+}
 
 
+.netClip_btn:hover{
+  box-shadow: none;
+  opacity: var(--icon-opacity-hover);
+  color: var(--icon-color-hover);
+  background-color: var(--background-modifier-hover);
 }
 
 .netClip_nav_left {
@@ -304,6 +324,10 @@ button.netclip_warning{
 
 }
 
+.clickable-icon {
+
+}
+
 
 
 .netClip_web_controls .netClip_nav_left {
@@ -324,14 +348,32 @@ button.netclip_warning{
   flex-grow: 1;
 }
 
+.netClip_web_controls .netClip_search_container .netClip_search_icon{
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 3px;
+  margin-right: 10px;
+}
+
+.netClip_web_controls .netClip_search_container .netClip_search_icon svg{
+  height: 16px;
+  width: 16px;
+  color: var(--text-muted);
+  opacity: 70%;
+
+}
+
 .netClip_query_box {
   position: absolute;
   top: 100%;
+  margin-top: 5px;
   left: 0;
   right: 0;
   z-index: 1;
   max-height: 320px;
   overflow: hidden;
+  box-shadow: var(--shadow-l);
   overflow-y: auto;
   background-color: var(--background-primary);
   border-radius: 10px;
@@ -342,6 +384,7 @@ button.netclip_warning{
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  margin: 10px;
 
 }
 
@@ -352,6 +395,8 @@ button.netclip_warning{
   gap: 0.9rem;
   overflow: hidden;
   white-space: nowrap;
+  border-radius: 6px;
+
 }
 
 .netClip-suggestion-item svg {
@@ -414,7 +459,7 @@ button.netclip_warning{
 
 .netclip_clip_modal{
   max-height: 300px;
-  max-width: 500px;
+  max-width: 420px;
   width: 100%;
   height: 100%;
 }
@@ -445,7 +490,6 @@ button.netclip_warning{
   text-transform: capitalize;
 }
 
-
 .netclip_search_box {
   position: relative;
   display: flex;

versions.json

@@ -10,7 +10,8 @@
 	"1.2.6": "1.4.0",
 	"1.2.7": "1.4.0",
 	"1.2.8": "1.4.0",
-	"1.2.9": "1.4.0"
+	"1.2.9": "1.4.0",
+	"1.3.0": "1.4.0"