public/obsidian-livesync
1
0
Fork 0
mirror of https://github.com/vrtmrz/obsidian-livesync.git synced 2026-07-21 12:06:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: consume Commonlib as a package

Browse Source
This commit is contained in:
vorotamoroz
2026-07-17 11:13:16 +00:00
parent 6475d32769
commit a721d3b602
665 changed files with 3438 additions and 31592 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/browser/ui/MenuItemView.svelte
+51
View File
@@ -0,0 +1,51 @@
<script lang="ts">
import type { MenuItem } from "../BrowserMenu";
type Props = {
item: MenuItem;
closeMenu: () => void;
};
const { item = $bindable(), closeMenu }: Props = $props();
function handleCommit(event: MouseEvent | KeyboardEvent) {
event.preventDefault();
try {
if (item.handler) {
item.handler?.();
}
} catch (ex) {
console.error(ex);
}
closeMenu();
}
const icons = {
checkmark: "✓",
} as { [key: string]: string };
function renderIcon(item: MenuItem) {
if (item.icon && item.icon in icons) {
return icons[item.icon] ?? item.icon;
} else if (item.icon !== undefined) {
return "";
}
return "";
}
</script>
<li>
<span class="icon">{renderIcon(item)}</span>
<label for=""
><!-- svelte-ignore a11y_invalid_attribute -->
<a onclick={handleCommit} onkeydown={handleCommit} role="button" tabindex="0" href="#">{item.title}</a></label
>
</li>
<style>
span.icon {
display: inline-block;
min-width: 1.5em;
text-align: center;
}
li {
list-style: none;
padding: 0.5em 1em;
}
</style>
src/apps/browser/ui/MenuSeparatorView.svelte
+10
View File
@@ -0,0 +1,10 @@
<script lang="ts">
import type { MenuSeparator } from "../BrowserMenu";
type Props = {
item: MenuSeparator;
};
const { item = $bindable() }: Props = $props();
</script>
<hr />
src/apps/browser/ui/MenuView.svelte
+89
View File
@@ -0,0 +1,89 @@
<script lang="ts">
import type { Menu, MenuItem, MenuSeparator } from "../BrowserMenu";
import MenuItemView from "./MenuItemView.svelte";
import MenuSeparatorView from "./MenuSeparatorView.svelte";
type Props = {
items: (MenuItem | MenuSeparator)[];
closeMenu: () => void;
};
const { items = $bindable(), closeMenu }: Props = $props();
function handleKey(event: KeyboardEvent) {
if (event.key === "Escape") {
event.preventDefault();
closeMenu();
}
}
</script>
<popup>
<nav>
{#each items as item}
{#if item.type === "separator"}
<MenuSeparatorView {item} />
{:else if item.type === "item"}
<MenuItemView item={item as MenuItem} {closeMenu} />
{/if}
{/each}
</nav>
</popup>
<div class="background" onclick={() => closeMenu()} onkeydown={handleKey} role="none"></div>
<style>
popup {
z-index: 1000;
position: fixed;
background: rgba(255, 255, 255, 0.8);
max-width: 70vw;
max-height: 80vh;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(5px);
display: flex;
flex-direction: column;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border: 1px solid var(--background-primary-alt);
justify-content: space-between;
width: fit-content;
height: fit-content;
}
/* popup header {
background: var(--background-primary);
color: var(--text-normal);
padding: 1em;
border-bottom: 1px solid var(--background-primary-alt);
font: size 1.4em;
}
popup article {
padding: 1em;
display: flex;
justify-content: center;
overflow-y: auto;
}
popup article .msg {
white-space: pre-wrap;
}
popup .buttons {
border-top: 1px solid var(--background-primary-alt);
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
}
popup .buttons button {
margin: 0 0.5em;
background-color: var(--background-primary-alt);
} */
popup ~ .background {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.125);
}
</style>
src/apps/browser/ui/MessageBox.svelte
+127
View File
@@ -0,0 +1,127 @@
<script lang="ts">
import { renderMessageMarkdown } from "./renderMessageMarkdown";
type Props = {
title: string;
message: string;
buttons: string[];
commit: (button: string) => void;
};
let { title, message, buttons, commit }: Props = $props();
const renderedMessage = $derived(renderMessageMarkdown(message));
function handleEsc(event: KeyboardEvent) {
if (event.key === "Escape") {
commit("");
}
}
</script>
<popup>
<header>{title}</header>
<article><div class="msg">{@html renderedMessage}</div></article>
<div class="buttons">
{#each buttons as button}
<button onclick={() => commit(button)}>{button}</button>
{/each}
</div>
</popup>
<div class="background" onclick={() => commit("")} onkeydown={handleEsc} role="none"></div>
<style>
popup {
z-index: 1000;
position: fixed;
background: rgba(255, 255, 255, 0.8);
max-width: 70vw;
max-height: 80vh;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 50vw;
min-height: 50vh;
backdrop-filter: blur(5px);
display: flex;
flex-direction: column;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border: 1px solid var(--background-primary-alt);
justify-content: space-between;
}
popup header {
background: var(--background-primary);
color: var(--text-normal);
padding: 1em;
border-bottom: 1px solid var(--background-primary-alt);
font: size 1.4em;
}
popup article {
padding: 1em;
display: flex;
justify-content: center;
overflow-y: auto;
}
popup article .msg {
width: 100%;
line-height: 1.5;
overflow-wrap: anywhere;
}
popup article .msg :global(:first-child) {
margin-top: 0;
}
popup article .msg :global(:last-child) {
margin-bottom: 0;
}
popup article .msg :global(pre) {
overflow-x: auto;
padding: 0.75em;
border-radius: 4px;
background: var(--background-secondary);
}
popup article .msg :global(code) {
font-family: var(--font-monospace);
}
popup article .msg :global(blockquote) {
margin: 0;
padding-left: 1em;
border-left: 3px solid var(--background-modifier-border);
color: var(--text-muted);
}
popup article .msg :global(ul),
popup article .msg :global(ol) {
padding-left: 1.5em;
}
popup article .msg :global(table) {
width: 100%;
border-collapse: collapse;
}
popup article .msg :global(th),
popup article .msg :global(td) {
padding: 0.4em 0.6em;
border: 1px solid var(--background-modifier-border);
}
popup article .msg :global(a) {
color: var(--text-accent);
}
popup .buttons {
border-top: 1px solid var(--background-primary-alt);
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
}
popup .buttons button {
margin: 0 0.5em;
background-color: var(--background-primary-alt);
}
popup ~ .background {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.125);
}
</style>
src/apps/browser/ui/TextInputBox.svelte
+122
View File
@@ -0,0 +1,122 @@
<script lang="ts">
type Props = {
title: string;
message: string;
initialText?: string;
placeholder?: string;
isPassword?: boolean;
commit: (text: string | false) => void;
};
const { title, message, commit, initialText, placeholder, isPassword }: Props = $props();
let text = $state(initialText || "");
let type = $state(isPassword ? "password" : "text");
function cancel() {
commit(false);
}
function handleKey(event: KeyboardEvent) {
if (event.key === "Escape") {
handleCancel(event);
} else if (event.key === "Enter") {
handleCommit(event);
}
}
function handleCancel(event: KeyboardEvent | MouseEvent) {
cancel();
event.preventDefault();
}
function handleCommit(event: KeyboardEvent | MouseEvent) {
commit(text);
event.preventDefault();
}
let textEl: HTMLInputElement;
$effect(() => {
textEl.focus();
});
</script>
<popup>
<header>{title}</header>
<article>
<div class="msg">{message}</div>
<div class="input">
<input
bind:this={textEl}
{type}
bind:value={text}
{placeholder}
onkeydown={handleKey}
onkeyup={handleKey}
/>
</div>
</article>
<div class="buttons">
<button onclick={handleCommit}>OK</button>
<button onclick={handleCancel}>Cancel</button>
</div>
</popup>
<div class="background" onclick={handleCancel} onkeydown={handleKey} role="none"></div>
<style>
popup {
z-index: 1000;
position: fixed;
background: rgba(255, 255, 255, 0.8);
max-width: 70vw;
max-height: 80vh;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 50vw;
min-height: 50vh;
backdrop-filter: blur(5px);
display: flex;
flex-direction: column;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border: 1px solid var(--background-primary-alt);
justify-content: space-between;
}
popup header {
background: var(--background-primary);
color: var(--text-normal);
padding: 1em;
border-bottom: 1px solid var(--background-primary-alt);
font: size 1.4em;
}
popup article {
align-items: center;
padding: 1em;
display: flex;
justify-content: center;
flex-direction: column;
}
popup article .msg {
overflow-y: auto;
white-space: pre-wrap;
}
popup .buttons {
border-top: 1px solid var(--background-primary-alt);
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
}
popup .buttons button {
margin: 0 0.5em;
background-color: var(--background-primary-alt);
}
popup ~ .background {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.125);
}
</style>
src/apps/browser/ui/renderMessageMarkdown.ts
+21
View File
@@ -0,0 +1,21 @@
import MarkdownIt from "markdown-it";
const markdownRenderer = new MarkdownIt({
html: false,
breaks: true,
linkify: true,
});
const defaultLinkOpenRenderer =
markdownRenderer.renderer.rules.link_open ??
((tokens, idx, options, _env, self) => self.renderToken(tokens, idx, options));
markdownRenderer.renderer.rules.link_open = (tokens, idx, options, env, self) => {
tokens[idx].attrSet("target", "_blank");
tokens[idx].attrSet("rel", "noopener noreferrer");
return defaultLinkOpenRenderer(tokens, idx, options, env, self);
};
export function renderMessageMarkdown(message: string): string {
return markdownRenderer.render(message);
}
src/apps/browser/ui/renderMessageMarkdown.unit.spec.ts
+27
View File
@@ -0,0 +1,27 @@
import { describe, expect, it } from "vitest";
import { renderMessageMarkdown } from "./renderMessageMarkdown";
describe("renderMessageMarkdown", () => {
it("renders basic markdown features used by browser dialogues", () => {
const html = renderMessageMarkdown("# Title\n\n| left | right |\n| --- | --- |\n| a | b |\n");
expect(html).toContain("<h1>Title</h1>");
expect(html).toContain("<table>");
expect(html).toContain("<td>a</td>");
});
it("escapes inline HTML instead of rendering it", () => {
const html = renderMessageMarkdown("Before<script>alert('xss')</script>After");
expect(html).not.toContain("<script>");
expect(html).toContain("&lt;script&gt;alert('xss')&lt;/script&gt;");
});
it("opens Markdown links safely in a new tab", () => {
const html = renderMessageMarkdown("[docs](https://example.com)");
expect(html).toContain('target="_blank"');
expect(html).toContain('rel="noopener noreferrer"');
});
});