7e1eaba3bc
Migrated the ESLint configuration to the new flat config format () and addressed several initial linting errors. Key changes include: - Updated ESLint configuration to treat as warnings instead of errors. - Fixed errors in by declaring and . - Corrected error in by using instead of an out-of-scope . - Resolved error in by replacing the undefined directive with the component. - Addressed errors in by replacing with and with . - Fixed errors in by importing necessary modules (, , ) and adding missing props (, , , , ).
74 lines
2.1 KiB
Svelte
74 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { Image } from 'lucide-svelte';
|
|
import { ChevronDown } from 'lucide-svelte';
|
|
import { X } from 'lucide-svelte';
|
|
import { type Editor } from '@tiptap/core';
|
|
import * as Tooltip from '$lib/components/ui/tooltip/index.js';
|
|
import { Button } from '$lib/components/ui/button/index.js';
|
|
import * as Popover from '$lib/components/ui/popover/index.js';
|
|
import { Input } from '$lib/components/ui/input/index.js';
|
|
|
|
let { editor }: { editor: Editor } = $props();
|
|
</script>
|
|
|
|
<Tooltip.Provider>
|
|
<Tooltip.Root>
|
|
<Tooltip.Trigger>
|
|
<Popover.Root>
|
|
<Popover.Trigger>
|
|
<Button variant="ghost" size="sm" class="h-8">
|
|
<Image />
|
|
<ChevronDown class="size-3! text-muted-foreground" />
|
|
</Button>
|
|
</Popover.Trigger>
|
|
<Popover.Content class="bg-popover shadow-lg *:my-2">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-xl font-bold">Image</h1>
|
|
<Popover.Close>
|
|
<X class="size-4 text-muted-foreground" />
|
|
</Popover.Close>
|
|
</div>
|
|
<p>Insert image url</p>
|
|
<Input
|
|
placeholder="Enter image url..."
|
|
type="url"
|
|
onchange={(e) => {
|
|
if (e !== null && e.target !== null) {
|
|
//@ts-ignore
|
|
editor.chain().focus().setImage({ src: e.target.value }).run();
|
|
}
|
|
}}
|
|
class="w-full"
|
|
/>
|
|
<p>OR Pick an Image</p>
|
|
<Input
|
|
id="picture"
|
|
type="file"
|
|
accept="image/*"
|
|
multiple={false}
|
|
onchange={(e: Event) => {
|
|
//@ts-ignore
|
|
if (e.target && e.target.files) {
|
|
//@ts-ignore
|
|
const files = Array.from(e.target.files || []);
|
|
files.map((file) => {
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
const src = reader.result as string;
|
|
editor.chain().focus().setImage({ src }).run();
|
|
};
|
|
//@ts-ignore
|
|
reader.readAsDataURL(file);
|
|
});
|
|
}
|
|
}}
|
|
/>
|
|
</Popover.Content>
|
|
</Popover.Root>
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Content>
|
|
<p>Add Image</p>
|
|
</Tooltip.Content>
|
|
</Tooltip.Root>
|
|
</Tooltip.Provider>
|