alexei.dolgolyov
a6b09aae9c
Replace the disconnected board edit page with inline editing directly on the board view. Toggle with Ctrl+E or the Edit button. Features: - Edit mode store with changeset accumulation and batch save - Floating toolbar (save, discard, add section, board settings, exit) - Widget hover overlays with edit/delete/drag controls - Type-specific widget config panels for all 14 widget types - Section inline editing (title, icon picker, delete) - "+" buttons for adding widgets and sections inline - Section-level drag-and-drop reordering via svelte-dnd-action - Batch save API endpoint (single Prisma transaction) - Board properties side panel with live theme/wallpaper preview - Modal widget type picker with search filtering - Icon picker component with visual grid and search - Confirmation dialog modal for all destructive actions - HTML format support for Note widget (in addition to markdown/text) - Full i18n support (en + ru) for all new UI strings - Legacy edit page banner linking to new inline mode
45 lines
1.1 KiB
Svelte
45 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { marked } from 'marked';
|
|
import DOMPurify from 'isomorphic-dompurify';
|
|
|
|
interface NoteConfig {
|
|
content: string;
|
|
format: 'markdown' | 'text' | 'html';
|
|
}
|
|
|
|
interface Props {
|
|
config: NoteConfig;
|
|
}
|
|
|
|
let { config }: Props = $props();
|
|
|
|
marked.setOptions({
|
|
breaks: true,
|
|
gfm: true
|
|
});
|
|
|
|
const renderedContent = $derived.by(() => {
|
|
if (config.format === 'text') {
|
|
return DOMPurify.sanitize(
|
|
config.content
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/\n/g, '<br>')
|
|
);
|
|
}
|
|
if (config.format === 'html') {
|
|
return DOMPurify.sanitize(config.content);
|
|
}
|
|
const raw = marked.parse(config.content, { async: false }) as string;
|
|
return DOMPurify.sanitize(raw);
|
|
});
|
|
</script>
|
|
|
|
<div class="flex h-full flex-col rounded-xl border border-border bg-card p-4">
|
|
<div class="prose prose-sm prose-invert max-w-none flex-1 overflow-auto text-foreground">
|
|
<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized with DOMPurify -->
|
|
{@html renderedContent}
|
|
</div>
|
|
</div>
|