From 7a95f43a8ee466d5a4cb461f15257dac19005cee Mon Sep 17 00:00:00 2001 From: Boninall Date: Mon, 22 Apr 2024 21:45:41 +0800 Subject: [PATCH] Feat/inline url preview (#236) * #227: Move the HoverPopover spawning mechanism to the patched onLinkHover method * omit the waitTime parameter of overPopover, set the time out in onLinkHover to 100ms * fix: page preview enable and disable will cause core.json return {} * fix: update * fix: update * fix: update * feat: support live preview widget preview * fix: update the fix of page preview, and revert the update to 0.9.5 * fix: conficts * fix: conficts * fix: conficts * fix: conficts * fix: conficts * chore: remove unused code * chore: bump version * chore: bump version --------- Co-authored-by: RyotaUshio --- manifest.json | 2 +- package.json | 2 +- src/App.css | 21 + src/component/InNodeWebView.ts | 81 ++- src/surfingFileView.ts | 3 +- src/surfingIndex.ts | 120 +++- src/surfingPluginSetting.ts | 23 +- src/surfingView.ts | 3 +- src/translations/locale/en.ts | 5 +- src/translations/locale/zh-cn.ts | 7 +- src/types/obsidian.d.ts | 7 +- src/types/widget.d.ts | 6 + styles.css | 1006 ++++++++++++++++++++++++++++++ tsconfig.json | 2 +- versions.json | 3 +- 15 files changed, 1251 insertions(+), 40 deletions(-) create mode 100644 src/types/widget.d.ts diff --git a/manifest.json b/manifest.json index b055def..39b5e54 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "surfing", "name": "Surfing", - "version": "0.9.8", + "version": "0.9.9", "minAppVersion": "1.4.0", "description": "Surf the Net in Obsidian.", "author": "Boninall & Windily-cloud", diff --git a/package.json b/package.json index 60ce58f..0579ad3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "surfing", - "version": "0.9.8", + "version": "0.9.9", "description": "Use surfing to surf the net in Obsidian.", "main": "main.js", "scripts": { diff --git a/src/App.css b/src/App.css index 28a10b6..2173b1a 100644 --- a/src/App.css +++ b/src/App.css @@ -867,3 +867,24 @@ div[data-type^="surfing-tab-tree"] ul li { .popover.hover-editor .popover-content:has(div[data-type^="surfing-view"]) { width: 100%; } + +.cm-browser-widget { + border: 1px solid var(--background-modifier-border); +} + +.cm-browser-widget .wb-browser-inline { + height: max(4vw, 400px); +} + +.cm-browser-widget .wb-show-original-code { + position: absolute; + right: var(--size-4-2); + top: var(--size-4-2); + visibility: hidden; +} + +.cm-browser-widget:hover .wb-show-original-code { + visibility: visible; +} + + diff --git a/src/component/InNodeWebView.ts b/src/component/InNodeWebView.ts index 9c2b776..d058c12 100644 --- a/src/component/InNodeWebView.ts +++ b/src/component/InNodeWebView.ts @@ -3,7 +3,7 @@ import { InPageHeaderBar } from "./InPageHeaderBar"; import { clipboard, remote } from "electron"; import { SurfingView } from "../surfingView"; import { t } from "../translations/helper"; -import { moment } from "obsidian"; +import { ExtraButtonComponent, moment } from "obsidian"; import { getUrl } from "../utils/url"; import SurfingPlugin from "../surfingIndex"; @@ -17,22 +17,53 @@ export class InNodeWebView { private currentUrl: string; private plugin: SurfingPlugin; - constructor(node: any, plugin: SurfingPlugin, canvas?: any) { + private type: 'canvas' | 'inline'; + + private editor: any; + private widget: any; + + constructor(node: any, plugin: SurfingPlugin, type: 'canvas' | 'inline', canvas?: any) { this.contentEl = node.contentEl; this.node = node; this.canvas = canvas; + + console.log(this.node); + if (this.type === 'inline') { + this.editor = this.node?.editor; + this.widget = this.node?.widget; + } + this.plugin = plugin; + this.type = type; } onload() { this.contentEl.empty(); - this.appendSearchBar(); + this.type === 'canvas' && this.appendSearchBar(); + this.type === 'inline' && this.appendShowOriginalCode(); this.appendWebView(); - this.contentEl.addClass("wb-view-content"); + this.contentEl.toggleClass("wb-view-content", true); + this.type === 'inline' && this.contentEl.toggleClass('wb-browser-inline', true); + } + appendShowOriginalCode() { + const btnEl = this.contentEl.createEl('div'); + btnEl.addClass('wb-show-original-code'); + new ExtraButtonComponent(btnEl).setIcon('code-2').setTooltip(t('Show original url')); + // .onClick(() => { + // // Dispatch selection event to the codemirror editor based on widget start and end position. + // const {start, end} = this.widget; + // this.editor.dispatch({ + // selection: EditorSelection.create([ + // EditorSelection.range(start, end - 1), + // // EditorSelection.range(6, 7), + // EditorSelection.cursor(start) + // ], 0) + // }); + // }); } appendSearchBar() { @@ -53,7 +84,7 @@ export class InNodeWebView { if (oldData.url === this.currentUrl) return; oldData.url = this.currentUrl; this.node.setData(oldData); - this.node.canvas.requestSave(); + this.node.canvas?.requestSave(); this.node.render(); }); @@ -277,26 +308,34 @@ export class InNodeWebView { }); this.webviewEl.addEventListener("will-navigate", (event: any) => { - const oldData = this.node.getData(); - oldData.url = event.url; - this.node.setData(oldData); - this.node.canvas.requestSave(); + if (this.type === 'canvas') { + const oldData = this.node.getData(); + oldData.url = event.url; + this.node.setData(oldData); + this.node.canvas?.requestSave(); + } else { + this.node.url = event.url; + } }); this.webviewEl.addEventListener("did-navigate-in-page", (event: any) => { - const oldData = this.node.getData(); - - if (event.url.contains("contacts.google.com/widget") || (this.node.canvas.isDragging && oldData.url === event.url)) { - // @ts-ignore - const webContents = remote.webContents.fromId(this.webviewEl.getWebContentsId()); - webContents.stop(); - return; + if (this.type === 'canvas') { + const oldData = this.node.getData(); + + if (event.url.contains("contacts.google.com/widget") || (this.node.canvas?.isDragging && oldData.url === event.url)) { + // @ts-ignore + const webContents = remote.webContents.fromId(this.webviewEl.getWebContentsId()); + webContents.stop(); + return; + } + if (oldData.url === event.url) return; + oldData.url = event.url; + oldData.alwaysKeepLoaded = true; + this.node.setData(oldData); + this.node.canvas?.requestSave(); + } else { + this.node.url = event.url; } - if (oldData.url === event.url) return; - oldData.url = event.url; - oldData.alwaysKeepLoaded = true; - this.node.setData(oldData); - this.node.canvas.requestSave(); }); this.webviewEl.addEventListener('destroyed', () => { diff --git a/src/surfingFileView.ts b/src/surfingFileView.ts index 1cc6d1a..e2dea6b 100644 --- a/src/surfingFileView.ts +++ b/src/surfingFileView.ts @@ -9,12 +9,13 @@ export class SurfingFileView extends FileView { constructor(leaf: WorkspaceLeaf) { super(leaf); + this.allowNoFile = false; } async onLoadFile(file: TFile): Promise { const adapter = this.app.vault.adapter as FileSystemAdapter; const urlString = "file:///" + (adapter.getBasePath() + "/" + file.path).toString().replace(/\s/g, "%20"); - SurfingView.spawnWebBrowserView(true, { url: urlString }); + SurfingView.spawnWebBrowserView(true, {url: urlString}); if (this.leaf) this.leaf.detach(); } diff --git a/src/surfingIndex.ts b/src/surfingIndex.ts index 3051742..9e5bc2f 100644 --- a/src/surfingIndex.ts +++ b/src/surfingIndex.ts @@ -30,7 +30,8 @@ import { loadJson, saveJson } from "./utils/json"; import { hashCode, nonElectronGetPageTitle } from "./component/BookmarkManager/utils"; import { TabTreeView, WEB_BROWSER_TAB_TREE_ID } from "./component/TabTreeView/TabTreeView"; import './App.css'; -import { EditorView } from "@codemirror/view"; +import { Range } from '@codemirror/state'; +import { Decoration, EditorView, WidgetType } from "@codemirror/view"; import { PopoverWebView } from "./component/PopoverWebView"; import { LastOpenedFiles } from "./component/LastOpenedFiles"; @@ -42,6 +43,8 @@ export default class SurfingPlugin extends Plugin { private applyURLDebounceTimer = 0; private urlOpened = false; + private patchInlineUrl = false; + async onload() { await this.loadSettings(); this.checkWebBrowser(); @@ -82,6 +85,7 @@ export default class SurfingPlugin extends Plugin { this.patchEmptyView(); this.patchMarkdownPreviewRenderer(); this.patchProperty(); + this.settings.supportLivePreviewInlineUrl && this.patchInlinePreview(); if (requireApiVersion("1.1.0") && this.settings.useWebview) { @@ -620,12 +624,13 @@ export default class SurfingPlugin extends Plugin { return function (hoverParent: HoverParent, targetEl: HTMLElement | null, linktext: string, sourcePath: string, state: any, ...args: any[]) { if (linktext.startsWith('http://') || linktext.startsWith('https://')) { let { hoverPopover } = hoverParent; + if (hoverPopover && hoverPopover.state !== (PopoverState as any).Hidden && hoverPopover.targetEl === targetEl) { return; } hoverPopover = new HoverPopover(hoverParent, targetEl); hoverPopover.hoverEl.addClass('surfing-hover-popover'); - + setTimeout(() => { if (hoverPopover!.state !== (PopoverState as any).Hidden) { const parentEl = hoverPopover!.hoverEl.createDiv('surfing-hover-popover-container'); @@ -635,17 +640,17 @@ export default class SurfingPlugin extends Plugin { }, 100); return; } - + return old.call(this, hoverParent, targetEl, linktext, sourcePath, state, ...args); - } + }; } })); - + // Re-register the 'hover-link' & 'link-hover' workspace events handlers if (!pagePreview.enabled) return; pagePreview.disable(); pagePreview.enable(); - + this.register(() => { if (!pagePreview.enabled) return; pagePreview.disable(); @@ -845,6 +850,8 @@ export default class SurfingPlugin extends Plugin { const renderer = property.rendered; + if (!renderer?.constructor) return false; + this.register( around(renderer.constructor.prototype, { render: (next: any) => @@ -923,6 +930,105 @@ export default class SurfingPlugin extends Plugin { }); } + private patchWidget(widget: WidgetType) { + this.patchInlineUrl = true; + console.log(widget); + + const jA = /^(?:https?:\/\/)?(?:www\.|m\.)?(?:youtube\.com|youtu\.be)(?:\/(?:[\w\-]+\?v=|embed\/|v\/)?)([\w\-]+)(?:\??(?:t|start)=([0-9]+))?(?:\S+)?$/ + , WA = /^(?:https?:\/\/)?(?:mobile\.)?twitter\.com\/.+\/(\d+)/; + const imageReg = /^https?:\/\/.*\/.*\.(png|gif|webp|jpeg|jpg)($|\?.*$)/gmi; + + const checkUrl = (url: any) => { + if (!url || typeof url !== 'string') { + return null; + } + + let match = url.match(jA); + if (match) { + let youtubeUrl = `https://www.youtube.com/embed/${match[1]}`; + if (match[2]) { + youtubeUrl += `?start=${match[2]}`; + } + return youtubeUrl; + } + + match = url.match(WA); + if (match) { + const isDarkTheme = document.body.classList.contains('theme-dark'); + return `https://platform.twitter.com/embed/Tweet.html?dnt=true&theme=${isDarkTheme ? 'dark' : 'light'}&id=${match[1]}`; + } + + return null; + }; + + const proto = widget.constructor.prototype; + // eslint-disable-next-line @typescript-eslint/no-this-alias + const self = this; + + this.register(around(proto, { + initDOM: (next: any) => + function (arg: any) { + if (imageReg.test(this.url)) { + console.log('image widget'); + return next.call(this, arg); + } else if (checkUrl(this.url)) { + return next.call(this, arg); + } else { + const containerEl = createEl('div', { + cls: 'cm-browser-widget', + }); + const widgetEl = containerEl.createDiv({ + cls: 'wb-browser-widget', + }); + const urlComponent = { + contentEl: widgetEl, + url: this.url, + editor: arg, + widget: this + }; + this.hookClickHandler(arg, containerEl); + new InNodeWebView(urlComponent, self, 'inline').onload(); + + return containerEl; + } + // console.log(this.hookClickHandler); + // return next.call(this, arg); + } + })); + } + + private patchInlinePreview() { + const patchDecoration = (plugin: SurfingPlugin) => { + const uninstaller = around(Decoration, { + set(old) { + return function (of: Range | readonly Range[], sort?: boolean) { + if (Array.isArray(of)) { + if (!plugin.patchInlineUrl) { + const ranges: Range[] = []; + for (const range of of) { + if (!plugin.patchInlineUrl) { + if (range.value.widget && range.value.widget.url) { + plugin.patchWidget(range.value.widget); + } + } + } + return old.call(this, ranges, sort); + } else { + return old.call(this, of, sort); + } + } else { + return old.call(this, of, sort); + } + }; + }, + }); + + plugin.register(uninstaller); + }; + + patchDecoration(this); + } + private patchEmptyView() { const patchEmptyView = () => { @@ -1006,7 +1112,7 @@ export default class SurfingPlugin extends Plugin { // TODO: Move this with surfing view's constructor to prevent multiple htmlelement if (this.canvas.isDragging) return; - new InNodeWebView(this, self, this?.canvas).onload(); + new InNodeWebView(this, self, 'canvas', this?.canvas).onload(); }; }, }); diff --git a/src/surfingPluginSetting.ts b/src/surfingPluginSetting.ts index 1e8e598..66e5428 100644 --- a/src/surfingPluginSetting.ts +++ b/src/surfingPluginSetting.ts @@ -57,6 +57,7 @@ export interface SurfingSettings { }, treeData: NodeModel[]; enableHtmlPreview: boolean; + supportLivePreviewInlineUrl: boolean; } export interface SearchEngine { @@ -119,6 +120,7 @@ export const DEFAULT_SETTINGS: SurfingSettings = { }, treeData: [], enableHtmlPreview: true, + supportLivePreviewInlineUrl: false, }; // Add search engines here for the future used. export const SEARCH_ENGINES: SearchEngine[] = [ @@ -389,6 +391,7 @@ export class SurfingSettingTab extends PluginSettingTab { this.addOpenInSameTab(tabName, wbContainerEl); this.addHoverPopover(tabName, wbContainerEl); this.addEnableHTMLPreview(tabName, wbContainerEl); + this.addInlinePreview(tabName, wbContainerEl); this.addRefreshButton(tabName, wbContainerEl); this.addHighlightFormat(tabName, wbContainerEl); this.addMarkdownPath(tabName, wbContainerEl); @@ -755,6 +758,24 @@ export class SurfingSettingTab extends PluginSettingTab { this.addSettingToMasterSettingsList(tabName, setting.settingEl, settingName, settingDesc); } + private addInlinePreview(tabName: string, wbContainerEl: HTMLElement) { + const settingName = t('Enable Inline Preview'); + const settingDesc = t('Enable inline preview with surfing. Currently only support Live preview'); + const setting = new Setting(wbContainerEl) + .setName(settingName) + .setDesc(settingDesc) + .addToggle((toggle) => { + toggle + .setValue(this.plugin.settings.supportLivePreviewInlineUrl) + .onChange(async (value) => { + this.plugin.settings.supportLivePreviewInlineUrl = value; + this.applySettingsUpdate(); + }); + }); + + this.addSettingToMasterSettingsList(tabName, setting.settingEl, settingName, settingDesc); + } + private addReplaceIframeInCanvas(tabName: string, wbContainerEl: HTMLElement) { const settingName = t('[Experimental] Replace Iframe In Canvas') + t('(Reload to take effect)'); const setting = new Setting(wbContainerEl) @@ -933,7 +954,7 @@ export class SurfingSettingTab extends PluginSettingTab { const sendToReadWise = new Setting(wbContainerEl) .setName(t("Send to ReadWise")) - .setDesc(t("Add a action in page haader to Send to ReadWise.")) + .setDesc(t("Add a action in page header to Send to ReadWise.")) .addToggle((toggle) => { toggle .setValue(this.plugin.settings.bookmarkManager.sendToReadWise) diff --git a/src/surfingView.ts b/src/surfingView.ts index 935c76f..ef3c12d 100644 --- a/src/surfingView.ts +++ b/src/surfingView.ts @@ -22,7 +22,6 @@ import { PopoverWebView } from "./component/PopoverWebView"; export const WEB_BROWSER_VIEW_ID = "surfing-view"; - export class SurfingView extends ItemView { plugin: SurfingPlugin; private searchBox: searchBox; @@ -189,7 +188,6 @@ export class SurfingView extends ItemView { // @ts-ignore const webContents = remote.webContents.fromId(this.webviewEl.getWebContentsId()); - // Open new browser tab if the web view requests it. webContents.setWindowOpenHandler((event: any) => { SurfingView.spawnWebBrowserView(true, { @@ -204,6 +202,7 @@ export class SurfingView extends ItemView { await this.registerContextMenuInWebcontents(webContents); await this.registerJavascriptInWebcontents(webContents); + // For getting keyboard event from webview webContents.on('before-input-event', (event: any, input: any) => { if (input.type !== 'keyDown') { diff --git a/src/translations/locale/en.ts b/src/translations/locale/en.ts index ea61ee3..ba01391 100644 --- a/src/translations/locale/en.ts +++ b/src/translations/locale/en.ts @@ -91,10 +91,13 @@ export default { 'Copy failed, you may focus on surfing view, click the title bar, and try again.': 'Copy failed, you may focus on surfing view, click the title bar, and try again.', "Default Category (Use , to split)": "Default Category (Use , to split)", "Send to ReadWise": "Send to ReadWise", - "Add a action in page haader to Send to ReadWise.": "Add a action in page haader to Send to ReadWise.", + "Add a action in page header to Send to ReadWise.": "Add a action in page header to Send to ReadWise.", 'Disable / to search when on these sites': 'Disable / to search when on these sites', 'Hover Popover': 'Hover Popover', 'Show a popover when hover on the link.': 'Show a popover when hover on the link.', 'Enable HTML Preview': 'Enable HTML Preview', 'Enable HTML Preview in Surfing': 'Enable HTML Preview in Surfing', + 'Show original url': 'Show original url', + 'Enable Inline Preview': 'Enable Inline Preview', + 'Enable inline preview with surfing. Currently only support Live preview': 'Enable inline preview with surfing. Currently only support Live preview', }; diff --git a/src/translations/locale/zh-cn.ts b/src/translations/locale/zh-cn.ts index b3c41b0..e11b727 100644 --- a/src/translations/locale/zh-cn.ts +++ b/src/translations/locale/zh-cn.ts @@ -89,10 +89,13 @@ export default { 'Copy failed, you may focus on surfing view, click the title bar, and try again.': '复制失败，你可能聚焦到了 Surfing 视图，点击标题栏，然后再试一次。', "Default Category (Use , to split)": "默认分类 (用,分层)", "Send to ReadWise": "发送到 ReadWise", - "Add a action in page haader to Send to ReadWise.": "在页面标题栏中添加一个动作来发送到 ReadWise。", + "Add a action in page header to Send to ReadWise.": "在页面标题栏中添加一个动作来发送到 ReadWise。", 'Disable / to search when on these sites': '当在这些网站中禁止按 / 来搜索的功能', 'Show a popover when hover on the link.': '当鼠标悬停在链接上时显示一个弹出窗口。', 'Hover Popover': '悬停弹出窗口', + 'Show original url': '显示原始链接', + 'Enable Inline Preview': '启用内联预览', + 'Enable inline preview with surfing. Currently only support Live preview': '启用 Surfing 的内联预览。目前仅支持实时预览', 'Enable HTML Preview': '启用 HTML 预览', - 'Enable HTML Preview in Surfing': '在 Surfing 中启用 HTML 预览', + 'Enable HTML Preview in Surfing': '在 Surfing 中启用 HTML 预览' }; diff --git a/src/types/obsidian.d.ts b/src/types/obsidian.d.ts index d17c5e1..a5ca17d 100644 --- a/src/types/obsidian.d.ts +++ b/src/types/obsidian.d.ts @@ -7,6 +7,10 @@ declare module "obsidian" { headerEl: HTMLDivElement; } + interface FileView { + allowNoFile: boolean; + } + interface App { plugins: { getPlugin(name: string): any; @@ -22,7 +26,7 @@ declare module "obsidian" { instance: any; }; }; - }; + }; commands: any; getTheme: () => string; } @@ -38,6 +42,7 @@ declare module "obsidian" { } interface HoverPopover { + targetEl: HTMLElement; hide(): void; diff --git a/src/types/widget.d.ts b/src/types/widget.d.ts new file mode 100644 index 0000000..a387c7c --- /dev/null +++ b/src/types/widget.d.ts @@ -0,0 +1,6 @@ +import { WidgetType } from "@codemirror/view"; + +interface MathWidget extends WidgetType { + math: string; + block: boolean; +} diff --git a/styles.css b/styles.css index 8a12014..6e378da 100644 --- a/styles.css +++ b/styles.css @@ -54,6 +54,1009 @@ background-color: #e7e7e7; z-index: -1; } + +._root_kgzt2_1 { + background-color: #1967d2; + height: 2px; + position: absolute; + right: 0; + transform: translateY(-50%); + top: 0; +} + +._app_15i3q_1 { + height: 100%; + margin: var(--size-4-2); + border-radius: var(--size-2-2); +} + +._container_15i3q_13 { + height: 100%; +} + +._treeRoot_15i3q_21 { + height: 100%; +} + +._draggingSource_15i3q_29 { + opacity: 0.3; +} + +._placeholderContainer_15i3q_37 { + position: relative; +} + +._dropTarget_15i3q_45 { + background-color: var(--color-accent); +} + +._root_1gl8h_1 { + align-items: "center"; + background-color: #1967d2; + border-radius: 4px; + box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.25), + 0 0 0 1px rgba(0, 0, 0, 0.08); + color: #fff; + display: inline-grid; + font-size: 14px; + gap: 8px; + grid-template-columns: auto auto; + padding: 4px 8px; + pointer-events: none; +} + +._icon_1gl8h_31, +._label_1gl8h_33 { + align-items: center; + display: flex; +} + +.wb-view-content { + padding: 0 !important; + overflow: hidden !important; +} + +.wb-frame { + width: 100%; + height: 100%; + border: none; + background-color: white; + background-clip: content-box; +} + +.wb-view-content:has(.wb-bookmark-bar) .wb-frame { + height: calc(100% - 32px); +} + +.wb-header-bar::after { + background: transparent !important; +} + +.wb-search-bar { + width: 100%; +} + +.wb-search-box { + display: flex; + flex-direction: row; + position: absolute; + z-index: 20; + top: 35px; + right: 200px; + width: 200px; + height: 44px; + background-color: var(--color-base-20); + padding: 7px; + border: var(--input-border-width) solid var(--background-modifier-border); +} + +.wb-search-input { + width: 60%; + height: 100%; +} + +.wb-search-button-group { + width: 40%; + height: 100%; + display: flex; + flex-direction: row; +} + +.wb-search-button { + display: flex; + align-items: center; + + width: 100%; + height: var(--input-height); + border: var(--input-border-width) solid var(--background-modifier-border); + background-color: var(--background-modifier-form-field); + margin-left: 4px; +} + +.wb-page-search-bar-input-container, +.wb-page-search-bar-input { + width: 500px; + min-width: 20px; + height: 44px !important; + border-radius: 15px !important; + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; +} + +.workspace-split:not(.mod-root) .wb-page-search-bar-input-container { + width: 250px; +} + +.workspace-split:not(.mod-root) .wb-page-search-bar-input { + width: 250px; +} + +.wb-page-search-bar { + flex-direction: column-reverse; +} + +.wb-page-search-bar .wb-empty-actions { + display: none; +} + +.wb-page-search-bar .empty-state-container { + padding-top: 100px; +} + +.wb-random-background .empty-state { + background: url("https://source.unsplash.com/random/?mountain") no-repeat center center; + background-size: cover; +} + +.wb-random-background .empty-state input { + filter: opacity(0.8); +} + +.wb-search-bar-container { + margin-left: auto; + margin-right: auto; + position: absolute; + top: 26%; +} + +.wb-page-search-bar-container { + /*margin-left: auto;*/ + /*margin-right: auto;*/ + /*margin-bottom: 29%;*/ +} + +.wb-page-search-bar-container .wb-last-opened-files { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: var(--size-4-2); + justify-items: center; + + margin-top: var(--size-4-12); +} + +.wb-page-search-bar-container .wb-last-opened-files .wb-last-opened-file { + display: flex; + flex-direction: row; + align-items: center; + + gap: var(--size-2-2); + background-color: var(--interactive-normal); + box-shadow: var(--input-shadow); + opacity: 0.6; + justify-content: flex-start; + width: 160px; + + height: 40px; + + cursor: pointer; + +} + +.wb-page-search-bar-container .wb-last-opened-files .wb-last-opened-file:hover { + opacity: 1; +} + +.wb-page-search-bar-container .wb-last-opened-files .wb-last-opened-file-name { + /* Hide text */ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wb-page-search-bar-text { + text-align: center; + margin-bottom: 20px; + font-size: 72px; + font-weight: bolder; + color: var(--color-accent); +} + +.wb-create-btn, +.wb-search-btn { + opacity: 0.4; + color: #9da7d9; +} + +.wb-close-btn { + opacity: 0.4; + color: #d99da8; +} + +.wb-icon-list-container button { + padding: 1px 6px; +} + +.wb-create-btn:hover, +.wb-search-btn:hover { + opacity: 1; +} + +.wb-close-btn:hover { + opacity: 1; +} + +.wb-close-btn:hover > button > .lucide-x-square { + color: #d99da8; +} + +.wb-close-btn > button > .lucide-x-square { + color: var(--color-red); +} + +.wb-icon-list-container { + margin-right: auto; + margin-left: auto; + position: absolute; + bottom: 12%; + display: flex; + flex-direction: row; + gap: 10px; +} + +.wb-btn-tip { + color: var(--color-base-60); +} + +.wb-btn:hover { + background: var(--color-accent) !important; +} + +.wb-btn { + filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); +} + +.theme-dark .wb-btn a { + color: var(--color-base-80) !important; +} + +.setting-item.search-engine-setting { + flex-wrap: wrap; +} + +.search-engine-setting .setting-item-control { + flex: 1 1 auto; + text-align: right; + display: flex; + justify-content: flex-end; + align-items: center; + gap: var(--size-4-2); +} + +.search-engine-setting .search-engine-main-settings { + width: 100%; + display: flex; + flex-direction: column; + border-top: solid 1px var(--background-modifier-border); + margin-top: 10px; +} + +.search-engine-main-settings-name { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 5px; + margin-top: 5px; +} + +.search-engine-main-settings-url { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 5px; +} + +.search-engine-setting .setting-item-name::before { + content: ""; + display: inline-block; + height: 20px; + width: 1px; + border-left: 3px solid var(--text-accent); + vertical-align: middle; + margin-right: 10px; + margin-left: 0; +} + +.wb-setting-title { + display: flex; + justify-content: space-between; + flex-direction: row; + align-items: center; +} + +.wb-setting-tab-group { + display: flex; + justify-content: flex-start; +} + +.wb-setting-searching { + opacity: 0.4; +} + + +.wb-tab-settings textarea { + width: 500px; + height: 200px; + overflow-y: scroll; +} + +.wb-navigation-item { + display: flex; + align-items: flex-start; + gap: 3px; + margin-right: 10px; + margin-bottom: 2px; + padding: 6px 5px 4px; + border-radius: 5px; +} + +.wb-navigation-item-selected { + background-color: var(--interactive-accent); + color: var(--text-on-accent); +} + +.wb-setting-header { + border-bottom: var(--color-base-40) 0px solid; +} + +.wb-tab-settings { + margin-bottom: 20px; +} + +.wb-setting-heading { + color: var(--color-accent); +} + +.wb-about-icon { + height: 72px; + text-align: center; +} + +.setting-item-control .surfing-setting-textarea { + height: 400px; + width: 200px; +} + +.setting-item-control .surfing-setting-input { + width: 400px; +} + +.wb-about-icon .surfing { + height: 72px !important; + width: 72px !important; +} + +.wb-about-text { + font-size: 16px; + color: var(--color-accent); +} + +.wb-about-card { + display: flex; + align-items: center; + flex-direction: column; + margin-top: 30px; +} + +.wb-about-version { + font-size: 14px; + text-decoration: unset !important; + opacity: 0.8; + color: var(--link-color); +} + +.surfing-settings-icon { + width: fit-content; + height: fit-content; + position: absolute; + right: 20px; +} + +.mod-wb-bookmark-bar .surfing-settings-icon { + top: calc(var(--header-height) + 40px); +} + +.wb-frame-notice { + text-align: center; + background-color: var(--color-yellow); + font-size: 14px; + padding-top: 4px; + padding-bottom: 4px; +} + +.wb-search-suggestion-container { + background-color: var(--color-base-10); + border-radius: var(--radius-l); + filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); +} + +.wb-search-suggestion { + border-radius: var(--radius-l); + margin-bottom: -1px; +} + +.wb-search-suggestion:has(.wb-bookmark-suggest-item) { + max-height: 300px; + overflow-y: auto; +} + +.wb-search-suggestion::--webkit-scrollbar { + display: none; +} + +.wb-search-suggest-item.is-selected { + background-color: var(--color-accent); +} + +.theme-light .wb-search-suggest-item.is-selected { + color: var(--color-base-10); +} + +.wb-search-suggest-item:first-child.is-selected { + /*background-color: var(--color-base-30);*/ + border-radius: var(--radius-l) var(--radius-l) var(--radius-m) var(--radius-m); +} + +.wb-search-suggest-item:last-child.is-selected { + /*background-color: var(--color-base-30);*/ + border-radius: var(--radius-m) var(--radius-m) var(--radius-l) var(--radius-l); +} + +.wb-search-suggest-item { + display: flex; + justify-content: space-between; + align-items: center; +} + +.theme-light .wb-search-suggest-item.is-selected .wb-search-suggestion-index { + color: var(--color-base-10); + opacity: 0.6; +} + +.wb-search-suggestion-index { + opacity: 0.2; + font-size: 12px; + font-weight: bold; +} + +input[type="text"].wb-search-bar:active, +input[type="text"].wb-search-bar:focus, +input[type="text"].wb-search-bar:focus-visible { + box-shadow: unset; +} + +input[type="text"].wb-page-search-bar-input:active, +input[type="text"].wb-page-search-bar-input:focus, +input[type="text"].wb-page-search-bar-input:focus-visible { + box-shadow: unset; +} + +.wb-theme-settings-working-on { + background-color: var(--color-accent); + flex-direction: column; + border-radius: var(--radius-l); + /* color: var(--color-base-10); */ +} + +.theme-light .wb-theme-settings-working-on .setting-item-name { + /*background-color: var(--color-accent);*/ + color: var(--color-base-10); +} + +.wb-omni-box { + position: absolute; + right: var(--size-4-9); + top: var(--size-4-18); + width: 30%; + height: fit-content; + max-height: 40%; + overflow: auto; + border-radius: var(--radius-m); + padding: var(--size-4-4); +} + +.wb-omni-box::-webkit-scrollbar { + display: none; /* Safari and Chrome */ +} + +.theme-light .wb-omni-box { + background-color: var(--color-base-10); +} + +.theme-dark .wb-omni-box { + background-color: var(--color-base-30); +} + +.wb-omni-item-path { + margin: var(--size-2-3) var(--size-2-2); + text-emphasis: inherit; + overflow-x: hidden; + padding: var(--size-2-1); + border-radius: var(--radius-s); +} + +.theme-light .wb-omni-item-path { + color: var(--color-base-20); +} + +.wb-omni-item { + margin: var(--size-2-3); + background-color: var(--color-accent); + padding: var(--size-2-1); + border: var(--color-accent) 1px solid; + border-radius: var(--radius-s); +} + +.wb-omni-item-content-list { + margin: var(--size-2-2) var(--size-2-1); + gap: var(--size-2-1); + border-radius: var(--radius-m); +} + +.theme-light .wb-omni-item-content-list { + background-color: var(--color-base-10); +} + +.theme-dark .wb-omni-item-content-list { + background-color: var(--color-base-30); +} + +.wb-content-list-text { + padding: var(--size-2-2) var(--size-2-1); + line-height: var(--size-4-5); + background-color: var(--color-base-10); + border: var(--color-accent) 1px solid; + width: initial; + overflow-x: hidden; + border-radius: var(--radius-m); + margin-bottom: var(--size-4-3); +} + +.theme-light .wb-content-list-text { + background-color: var(--color-base-20); + filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); +} + +.theme-dark .wb-content-list-text { + background-color: var(--color-base-30); +} + +.mod-wb-bookmark-bar .empty-state.wb-page-search-bar { + position: unset; +} + +.wb-bookmark-bar { + display: flex; + align-items: center; + overflow: hidden; + padding-bottom: var(--size-2-1); + padding-top: var(--size-2-1); + padding-left: var(--size-4-2); + + min-height: 32px; + + border-top: 1px solid var(--background-modifier-border); + border-bottom: 1px solid var(--background-modifier-border); +} + +div[data-type^="empty"] .wb-bookmark-bar { + position: absolute; + top: var(--header-height); + width: 100%; + margin-top: -1px; + z-index: 1; +} + +.wb-bookmark-item, +.wb-bookmark-folder { + max-width: 120px; + text-overflow: hidden; + overflow: hidden; + margin-right: var(--size-2-2); + padding: var(--size-2-2); + border: 1px solid var(--color-base-10); + border-radius: var(--radius-s); + white-space: nowrap; + width: 10%; + + display: flex; + align-items: flex-end; + align-content: flex-end; +} + +.wb-bookmark-item:hover, +.wb-bookmark-folder:hover { + background-color: var(--color-base-30); +} + +.wb-bookmark-item-title { + text-overflow: ellipsis; + overflow: hidden; + padding-right: var(--size-4-1); + padding-left: var(--size-2-1); + font-size: var(--font-smallest); +} + +.wb-bookmark-folder-title { + text-overflow: ellipsis; + overflow: hidden; + padding-right: var(--size-4-1); + padding-left: var(--size-2-1); + font-size: var(--font-smallest); +} + +.wb-bookmark-bar::-webkit-scrollbar { + display: none; /* Safari and Chrome */ +} + + +.wb-bookmark-bar-container { + display: flex; + width: 95%; + overflow-x: scroll; +} + +.wb-bookmark-bar-container::-webkit-scrollbar { + display: none; /* Safari and Chrome */ +} + +.wb-bookmark-folder-icon, +.wb-bookmark-item-icon { + padding: unset; + height: 16px; + margin-right: var(--size-2-2); +} + +.wb-bookmark-folder-icon .lucide-folder-open { + height: var(--size-4-4); + width: var(--size-4-4); +} + +.wb-bookmark-item-icon .lucide-album { + height: var(--size-4-4); + width: var(--size-4-4); +} + +div[data-type^="empty"].workspace-leaf-content +.view-content.mod-wb-bookmark-bar { + padding: unset; + overflow: auto; +} + +.surfing-bookmark-manager-header-bar { + display: flex; + justify-content: start; +} + +.surfing-bookmark-manager { + margin: 0 1em; + + display: flex; + flex-direction: column; +} + +.surfing-bookmark-manager-header-bar .surfing-bookmark-manager-search-bar { + display: flex; + align-items: center; +} + +.surfing-bookmark-manager-search-bar .ant-input-affix-wrapper { + padding: 0 11px; +} + +.surfing-bookmark-manager-header-bar .ant-row { + display: flex; + align-items: center; +} + +.ant-table-header { + min-height: 55px; +} + +.surfing-bookmark-manager-header-bar { + height: 50px; +} + +:where(.css-dev-only-do-not-override-1np4o0i).ant-input-affix-wrapper { + background-color: var(--background-modifier-form-field); +} + +.surfing-bookmark-manager-header-bar button { + margin: 0px 0px 0px 10px; +} + +.wb-bookmark-manager-entry { + position: absolute; + right: var(--size-4-3); + padding: var(--size-2-1); + border-radius: var(--radius-s); + color: var(--color-red); +} + +.wb-bookmark-manager-icon { + height: 18px; + width: 18px; + display: flex; + +} + +.wb-refresh-button, .wb-refresh-button .lucide-refresh-cw { + height: var(--size-4-4); + width: var(--size-4-4); + color: var(--color-base-50); +} + +.wb-refresh-button { + margin-right: var(--size-4-2); +} + +.ant-table-wrapper .ant-table-pagination.ant-pagination { + margin: 6px 0; +} + +.ant-table-container { + height: 100%; + overflow: hidden; + display: flex; + flex-direction: column; +} + +/*.ant-table-sticky-holder {*/ +/* height: 100px;*/ +/*}*/ + +.ant-table-wrapper, .ant-spin-nested-loading, .ant-spin-container { + height: 100%; +} + +.ant-table-wrapper { + height: 86vh; +} + +.ant-table-wrapper .ant-table-thead > tr > th { + background-color: var(--background-secondary); +} + +.ant-table { + height: 100%; +} + +.wb-reset-button { + left: 0; +} + +.ant-form-item .submit-bar { + display: flex; + justify-content: space-between; +} + +.theme-light .ant-btn-primary { + background-color: #1677ff; +} + +.theme-light .ant-tree-treenode-checkbox-checked .ant-tree-node-content-wrapper { + color: var(--text-on-accent); +} + +.surfing-bookmark-manager-header .ant-col-6 { + display: flex; + align-items: center; +} + +div[data-type^="surfing-bookmark-manager"] .ant-table-thead { + height: 20px; +} + +/*.wb-bookmark-manager-icon .lucide-bookmark {*/ +/* height: 16px;*/ +/* width: 16px;*/ +/*}*/ +.wb-bookmark-manager-entry:hover { + background-color: var(--color-base-30); +} + +.cm-scroller .wb-view-content-embeded { + height: 500px; +} + +.suggestion-item.wb-bookmark-suggest-item { + display: flex; + align-items: center; + justify-content: space-between; +} + +.wb-bookmark-suggest-container { + display: flex; + gap: 10px; + + max-width: 92%; + +} + +.wb-bookmark-suggestion-text { + font-weight: bolder; + + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wb-bookmark-suggestion-url { + opacity: 0.4; + + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.wb-bookmark-modal h2 { + text-align: center; +} + +.wb-bookmark-modal .wb-bookmark-modal-btn-container { + display: flex; + align-items: center; + flex-direction: row; + gap: 10px; +} + +.wb-bookmark-modal .modal-content { + display: flex; + flex-direction: column; + align-items: center; +} + +.anticon-arrow-right svg { + width: var(--icon-xs); + height: var(--icon-xs); +} + +.tab-tree-empty-container svg { + width: var(--icon-xl); + height: var(--icon-xl); + opacity: 50%; +} + +.tab-tree-empty-container { + display: flex; + align-items: center; + text-align: center; + justify-content: center; +} + +.tab-tree-empty-state { + display: flex; + flex-direction: column; + align-items: center; + gap: 1em; + opacity: 30%; +} + +div[data-type^="surfing-tab-tree"] ul { + list-style: none; + margin: 0; + padding: 0; +} + +div[data-type^="surfing-tab-tree"] ul li { + list-style: none; + margin: 0; + padding: 0; +} + + +.surfing-hover-popover { + height: 400px; +} + +.surfing-embed-website { + height: 800px; +} + +.surfing-hover-popover .surfing-hover-popover-container, .surfing-hover-popover .wb-view-content.node-insert-event, .surfing-embed-website .surfing-embed-website-container, .surfing-embed-website .surfing-embed-website-container .wb-view-content.node-insert-event { + height: 100%; +} + +.popover.hover-editor .popover-content:has(div[data-type^="surfing-view"]) { + width: 100%; +} + +.cm-browser-widget { + border: 1px solid var(--background-modifier-border); +} + +.cm-browser-widget .wb-browser-inline { + height: max(4vw, 400px); +} + +.cm-browser-widget .wb-show-original-code { + position: absolute; + right: var(--size-4-2); + top: var(--size-4-2); + visibility: hidden; +} + +.cm-browser-widget:hover .wb-show-original-code { + visibility: visible; +} + +._root_1nd2u_1 { + align-items: center; + display: grid; + grid-template-columns: auto auto 1fr auto; + height: 32px; + padding-inline-end: 8px; + border-bottom: solid 1px #eee; + border-radius: var(--size-2-2); +} + +._root_1nd2u_1:hover { + background: var(--color-base-30); +} + +._root_1nd2u_1._isSelected_1nd2u_29 { + background: var(--color-base-40); + border-radius: var(--size-2-2); +} + +._expandIconWrapper_1nd2u_39 { + align-items: center; + font-size: 0; + cursor: pointer; + display: flex; + height: 24px; + justify-content: center; + width: 24px; + transition: transform linear 0.1s; + transform: rotate(0deg); +} + +._expandIconWrapper_1nd2u_39._isOpen_1nd2u_63 { + transform: rotate(90deg); +} + +._labelGridItem_1nd2u_71 { + padding-inline-start: 8px; + width: 100%; + overflow: hidden; +} + +._pipeY_1nd2u_83 { + position: absolute; + border-left: 2px solid #e7e7e7; + left: -7px; + top: -7px; +} + +._pipeX_1nd2u_97 { + position: absolute; + left: -7px; + top: 15px; + height: 2px; + background-color: #e7e7e7; + z-index: -1; +} + ._root_kgzt2_1 { background-color: #1967d2; height: 2px; @@ -62,6 +1065,7 @@ transform: translateY(-50%); top: 0; } + ._app_15i3q_1 { height: 100%; margin: var(--size-4-2); @@ -87,6 +1091,7 @@ ._dropTarget_15i3q_45 { background-color: var(--color-accent); } + ._root_1gl8h_1 { align-items: "center"; background-color: #1967d2; @@ -107,6 +1112,7 @@ align-items: center; display: flex; } + .wb-view-content { padding: 0 !important; overflow: hidden !important; diff --git a/tsconfig.json b/tsconfig.json index f0c8053..f5b004d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,7 +4,7 @@ "inlineSourceMap": true, "inlineSources": true, "module": "ESNext", - "target": "ES2021", + "target": "ES2022", "allowJs": true, "noImplicitAny": true, "moduleResolution": "node", diff --git a/versions.json b/versions.json index 506ac87..54f70db 100644 --- a/versions.json +++ b/versions.json @@ -54,5 +54,6 @@ "0.9.3": "1.4.0", "0.9.4": "1.4.0", "0.9.5": "1.4.0", - "0.9.8": "1.4.0" + "0.9.8": "1.4.0", + "0.9.9": "1.4.0" } \ No newline at end of file