fix: use our own open-rs implementation instead of relying on tauri's "shell-open" (#4748)

Co-authored-by: Yerke Tulibergenov <[email protected]>
Co-authored-by: Caleb Owens <[email protected]>
Co-authored-by: Pavel Laptev <[email protected]>
Co-authored-by: Mattias Granlund <[email protected]>
Co-authored-by: Sebastian Thiel <[email protected]>
Co-authored-by: GitButler <[email protected]>

Author: 7 people

Cargo.lock

@@ -6,7 +6,7 @@
 	import * as events from '$lib/utils/events';
 	import { createKeybind } from '$lib/utils/hotkeys';
 	import { unsubscribe } from '$lib/utils/unsubscribe';
-	import { open } from '@tauri-apps/api/shell';
+	import { openExternalUrl } from '$lib/utils/url';
 	import { onMount } from 'svelte';
 	import { goto } from '$app/navigation';
 
@@ -29,7 +29,7 @@
 			'menu://project/open-in-vscode/clicked',
 			async () => {
 				const path = `${$editor}://file${project.vscodePath}?windowId=_blank`;
-				open(path);
+				openExternalUrl(path);
 			}
 		);
 

apps/desktop/src/lib/barmenuActions/ProjectSettingsMenuAction.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { MessageRole } from '$lib/ai/types';
+	import Markdown from '$lib/components/Markdown.svelte';
 	import { autoHeight } from '$lib/utils/autoHeight';
-	import { getMarkdownRenderer } from '$lib/utils/markdown';
 	import Button from '@gitbutler/ui/Button.svelte';
 	import Icon from '@gitbutler/ui/Icon.svelte';
-	import { marked } from 'marked';
 	import { createEventDispatcher } from 'svelte';
 
 	export let disableRemove = false;
@@ -19,7 +18,6 @@
 		addExample: void;
 		input: string;
 	}>();
-	const markedRenderer = getMarkdownRenderer();
 	let textareaElement: HTMLTextAreaElement | undefined;
 
 	function focusTextareaOnMount(
@@ -73,7 +71,7 @@
 			></textarea>
 		{:else}
 			<div class="markdown bubble-message scrollbar text-13 text-body">
-				{@html marked.parse(promptMessage.content, { renderer: markedRenderer })}
+				<Markdown content={promptMessage.content} />
 			</div>
 		{/if}
 	</div>

apps/desktop/src/lib/components/AIPromptEdit/DialogBubble.svelte

@@ -50,10 +50,7 @@
 						</div>
 						<button
 							class="empty-board__suggestions__link"
-							on:click={async () =>
-								await openExternalUrl(
-									'https://docs.gitbutler.com/features/virtual-branches/branch-lanes'
-								)}
+							on:click={async () => await openExternalUrl('https://docs.gitbutler.com')}
 						>
 							<div class="empty-board__suggestions__link__icon">
 								<Icon name="docs" />

apps/desktop/src/lib/components/BoardEmptyState.svelte

@@ -4,19 +4,18 @@
 	import { Project } from '$lib/backend/projects';
 	import CommitCard from '$lib/commit/CommitCard.svelte';
 	import { transformAnyCommit } from '$lib/commitLines/transformers';
+	import Markdown from '$lib/components/Markdown.svelte';
 	import FileCard from '$lib/file/FileCard.svelte';
 	import { getGitHost } from '$lib/gitHost/interface/gitHost';
 	import ScrollableContainer from '$lib/scroll/ScrollableContainer.svelte';
 	import { SETTINGS, type Settings } from '$lib/settings/userSettings';
 	import { RemoteBranchService } from '$lib/stores/remoteBranches';
 	import { getContext, getContextStoreBySymbol } from '$lib/utils/context';
-	import { getMarkdownRenderer } from '$lib/utils/markdown';
 	import { FileIdSelection } from '$lib/vbranches/fileIdSelection';
 	import { BranchData, type Branch } from '$lib/vbranches/types';
 	import LineGroup from '@gitbutler/ui/commitLines/LineGroup.svelte';
 	import { LineManagerFactory } from '@gitbutler/ui/commitLines/lineManager';
 	import lscache from 'lscache';
-	import { marked } from 'marked';
 	import { onMount, setContext } from 'svelte';
 	import { writable } from 'svelte/store';
 	import type { PullRequest } from '$lib/gitHost/interface/types';
@@ -93,8 +92,6 @@
 	onMount(() => {
 		laneWidth = lscache.get(laneWidthKey);
 	});
-
-	const renderer = getMarkdownRenderer();
 </script>
 
 {#if remoteBranch || localBranch}
@@ -112,7 +109,7 @@
 							<div class="card__header text-14 text-body text-semibold">{pr.title}</div>
 							{#if pr.body}
 								<div class="markdown card__content text-13 text-body">
-									{@html marked.parse(pr.body, { renderer })}
+									<Markdown content={pr.body} />
 								</div>
 							{/if}
 						</div>

apps/desktop/src/lib/components/BranchPreview.svelte

@@ -3,6 +3,7 @@
 	import gbLogoSvg from '$lib/assets/gb-logo.svg?raw';
 	import { User } from '$lib/stores/user';
 	import { getContextStore } from '$lib/utils/context';
+	import { openExternalUrl } from '$lib/utils/url';
 	import Icon from '@gitbutler/ui/Icon.svelte';
 	import { type Snippet } from 'svelte';
 
@@ -68,22 +69,20 @@
 
 					<div class="right-side__meta">
 						<div class="right-side__links">
-							<a
+							<button
 								class="right-side__link"
-								target="_blank"
-								href="https://docs.gitbutler.com/features/virtual-branches/branch-lanes"
+								onclick={async () => await openExternalUrl('https://docs.gitbutler.com/')}
 							>
 								<Icon name="docs" opacity={0.6} />
 								<span class="text-14 text-semibold">GitButler docs</span>
-							</a>
-							<a
+							</button>
+							<button
 								class="right-side__link"
-								target="_blank"
-								href="https://discord.com/invite/MmFkmaJ42D"
+								onclick={async () => await openExternalUrl('https://discord.com/invite/MmFkmaJ42D')}
 							>
 								<Icon name="discord" opacity={0.6} />
 								<span class="text-14 text-semibold">Join community</span>
-							</a>
+							</button>
 						</div>
 
 						<div class="wordmark">

apps/desktop/src/lib/components/DecorativeSplitView.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import MarkdownContent from '$lib/components/MarkdownContent.svelte';
+	import { options } from '$lib/utils/markdownRenderers';
+	import { Lexer } from 'marked';
+
+	interface Props {
+		content: string;
+	}
+
+	let { content }: Props = $props();
+
+	const lexer = new Lexer(options);
+	const tokens = lexer.lex(content);
+</script>
+
+<div class="markdown-content">
+	<MarkdownContent type="init" {tokens} />
+</div>
+
+<style>
+	.markdown-content {
+		display: inline;
+	}
+</style>

apps/desktop/src/lib/components/Markdown.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	/* eslint svelte/valid-compile: "off" */
+	import { renderers } from '$lib/utils/markdownRenderers';
+	import type { Tokens, Token } from 'marked';
+
+	type Props =
+		| { type: 'init'; tokens: Token[] }
+		| Tokens.Link
+		| Tokens.Heading
+		| Tokens.Image
+		| Tokens.Space
+		| Tokens.Blockquote
+		| Tokens.Code
+		| Tokens.Codespan
+		| Tokens.Text;
+
+	let { type, ...rest }: Props = $props();
+</script>
+
+{#if type && renderers[type as keyof typeof renderers]}
+	<svelte:component this={renderers[type as keyof typeof renderers] as any} {...rest}>
+		{#if 'tokens' in rest}
+			<svelte:self tokens={rest.tokens} />
+		{/if}
+	</svelte:component>
+{:else if 'tokens' in rest && rest.tokens}
+	{#each rest.tokens as token}
+		<svelte:self {...token} />
+	{/each}
+{:else if 'raw' in rest}
+	{@html rest.raw?.replaceAll('\n', '<br />') ?? ''}
+{/if}