@warkypublic/svelix 0.1.46 → 0.2.1

package/dist/components/ContentEditor/subcomponents/MarkdownViewer.svelte

@@ -1,93 +1,77 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { Carta, Markdown, MarkdownEditor } from 'carta-md';
-  import { code } from '@cartamd/plugin-code';
-  import { anchor } from '@cartamd/plugin-anchor';
-  import { attachment } from '@cartamd/plugin-attachment';
-  import { emoji } from '@cartamd/plugin-emoji';
-  import { math } from '@cartamd/plugin-math';
-  import { sanitize } from 'isomorphic-dompurify';
-  import 'carta-md/default.css';
-  import '@cartamd/plugin-code/default.css';
-  import '@cartamd/plugin-anchor/default.css';
-  import '@cartamd/plugin-emoji/default.css';
-  import '@cartamd/plugin-attachment/default.css';
-  import 'katex/dist/katex.min.css';
-  import 'github-markdown-css/github-markdown.css';
-  import { blobToString, watchSkeletonDarkMode } from '../utils.js';
-  import type { MarkdownViewerProps } from '../types.js';
-
-  let { value, readonly = false, onChange, onUpload, insertText = $bindable(), insertHtml = $bindable() }: MarkdownViewerProps = $props();
-
-  let carta = $state<Carta | undefined>(undefined);
-  let hostEl = $state<HTMLDivElement | undefined>(undefined);
-  let isDark = $state(false);
-
-  onMount(() => {
-    carta = new Carta({
-      sanitizer: sanitize,
-      extensions: [
-        code(),
-        anchor(),
-        emoji(),
-        math(),
-        ...(onUpload ? [attachment({ upload: onUpload })] : []),
-      ],
-    });
-  });
-
-  onMount(() => {
-    const stopWatchingTheme = watchSkeletonDarkMode(hostEl, (nextIsDark) => {
-      isDark = nextIsDark;
-    });
-    return () => stopWatchingTheme();
-  });
-
-  let text = $state('');
-  let lastBlobText = $state('');
-
-  $effect(() => {
-    blobToString(value).then((v) => {
-      lastBlobText = v;
-      if (text !== v) text = v;
-    });
-  });
-
-  $effect(() => {
-    if (!readonly && text !== lastBlobText) {
-      onChange?.(new Blob([text]));
-    }
-  });
-
-  $effect(() => {
-    if (!carta) {
-      insertText = undefined;
-      insertHtml = undefined;
-      return;
-    }
-    type EditorViewLike = {
-      state: { selection: { main: { from: number; to: number } } };
-      dispatch: (payload: {
-        changes: { from: number; to: number; insert: string };
-        selection: { anchor: number };
-      }) => void;
-      focus: () => void;
-    };
-    type CartaEditorLike = Carta & { editor?: { editorView?: EditorViewLike } };
-
-    function insertAtCursor(content: string): void {
-      const view = (carta as CartaEditorLike).editor?.editorView;
-      if (!view) return;
-      const { from, to } = view.state.selection.main;
-      view.dispatch({
-        changes: { from, to, insert: content },
-        selection: { anchor: from + content.length },
-      });
-      view.focus();
-    }
-    insertText = insertAtCursor;
-    insertHtml = insertAtCursor;
-  });
+<script lang="ts">import { onMount } from "svelte";
+import { Carta, Markdown, MarkdownEditor } from "carta-md";
+import { code } from "@cartamd/plugin-code";
+import { anchor } from "@cartamd/plugin-anchor";
+import { attachment } from "@cartamd/plugin-attachment";
+import { emoji } from "@cartamd/plugin-emoji";
+import { math } from "@cartamd/plugin-math";
+import { sanitize } from "isomorphic-dompurify";
+import "carta-md/default.css";
+import "@cartamd/plugin-code/default.css";
+import "@cartamd/plugin-anchor/default.css";
+import "@cartamd/plugin-emoji/default.css";
+import "@cartamd/plugin-attachment/default.css";
+import "katex/dist/katex.min.css";
+import "github-markdown-css/github-markdown.css";
+import { blobToString, watchSkeletonDarkMode } from "../utils.js";
+let { value, readonly = false, onChange, onUpload, insertText = $bindable(), insertHtml = $bindable() } = $props();
+let carta = $state(undefined);
+let hostEl = $state(undefined);
+let isDark = $state(false);
+onMount(() => {
+	carta = new Carta({
+		sanitizer: sanitize,
+		extensions: [
+			code(),
+			anchor(),
+			emoji(),
+			math(),
+			...onUpload ? [attachment({ upload: onUpload })] : []
+		]
+	});
+});
+onMount(() => {
+	const stopWatchingTheme = watchSkeletonDarkMode(hostEl, (nextIsDark) => {
+		isDark = nextIsDark;
+	});
+	return () => stopWatchingTheme();
+});
+let text = $state("");
+let lastBlobText = $state("");
+$effect(() => {
+	blobToString(value).then((v) => {
+		lastBlobText = v;
+		if (text !== v) text = v;
+	});
+});
+$effect(() => {
+	if (!readonly && text !== lastBlobText) {
+		onChange?.(new Blob([text]));
+	}
+});
+$effect(() => {
+	if (!carta) {
+		insertText = undefined;
+		insertHtml = undefined;
+		return;
+	}
+	function insertAtCursor(content) {
+		const view = carta.editor?.editorView;
+		if (!view) return;
+		const { from, to } = view.state.selection.main;
+		view.dispatch({
+			changes: {
+				from,
+				to,
+				insert: content
+			},
+			selection: { anchor: from + content.length }
+		});
+		view.focus();
+	}
+	insertText = insertAtCursor;
+	insertHtml = insertAtCursor;
+});
 </script>
 
 <div

package/dist/components/ContentEditor/subcomponents/MonacoEditor.svelte

@@ -1,106 +1,78 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import * as monaco from 'monaco-editor';
-  import {
-    getLangFromExt,
-    getExtFromFilename,
-    blobToString,
-    watchSkeletonDarkMode,
-  } from '../utils.js';
-  import type { MonacoEditorProps } from '../types.js';
-
-  let {
-    value,
-    filename,
-    language,
-    readonly = false,
-    height = '100%',
-    onChange,
-    onSave,
-    insertText = $bindable(),
-    insertHtml = $bindable(),
-  }: MonacoEditorProps = $props();
-
-  let container = $state<HTMLDivElement | undefined>(undefined);
-  let editor: monaco.editor.IStandaloneCodeEditor | undefined;
-  let changeGuard = false;
-  let isDark = $state(false);
-
-  const lang = $derived(
-    language ?? getLangFromExt(filename ? getExtFromFilename(filename) : '') ?? 'plaintext'
-  );
-
-  onMount(() => {
-    const stopWatchingTheme = watchSkeletonDarkMode(container, (nextIsDark) => {
-      isDark = nextIsDark;
-    });
-
-    if (!container) return;
-    editor = monaco.editor.create(container, {
-      value: '',
-      language: lang,
-      readOnly: readonly,
-      theme: isDark ? 'vs-dark' : 'vs',
-      automaticLayout: true,
-    });
-
-    const createdEditor = editor;
-    createdEditor.onDidChangeModelContent(() => {
-      if (changeGuard) return;
-      const content = createdEditor.getValue();
-      onChange?.(new Blob([content]));
-    });
-
-    createdEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
-      if (!onSave) return;
-      onSave(new Blob([createdEditor.getValue()]));
-    });
-
-    function doInsertText(text: string): void {
-      const sel = editor?.getSelection();
-      if (!sel) return;
-      editor?.executeEdits('insertText', [{ range: sel, text, forceMoveMarkers: true }]);
-      editor?.focus();
-    }
-    insertText = doInsertText;
-    insertHtml = (html: string) => doInsertText(html.replace(/<[^>]+>/g, ''));
-
-    return () => {
-      stopWatchingTheme();
-      insertText = undefined;
-      insertHtml = undefined;
-      editor?.dispose();
-    };
-  });
-
-  // Sync incoming Blob → editor text
-  $effect(() => {
-    if (!editor || !value) return;
-    const currentEditor = editor;
-    blobToString(value).then((text) => {
-      if (currentEditor.getValue() !== text) {
-        changeGuard = true;
-        currentEditor.setValue(text);
-        changeGuard = false;
-      }
-    });
-  });
-
-  // Sync language
-  $effect(() => {
-    const model = editor?.getModel();
-    if (model && lang) monaco.editor.setModelLanguage(model, lang);
-  });
-
-  // Sync readonly
-  $effect(() => {
-    editor?.updateOptions({ readOnly: readonly });
-  });
-
-  // Sync theme
-  $effect(() => {
-    monaco.editor.setTheme(isDark ? 'vs-dark' : 'vs');
-  });
+<script lang="ts">import { onMount } from "svelte";
+import * as monaco from "monaco-editor";
+import { getLangFromExt, getExtFromFilename, blobToString, watchSkeletonDarkMode } from "../utils.js";
+let { value, filename, language, readonly = false, height = "100%", onChange, onSave, insertText = $bindable(), insertHtml = $bindable() } = $props();
+let container = $state(undefined);
+let editor;
+let changeGuard = false;
+let isDark = $state(false);
+const lang = $derived(language ?? getLangFromExt(filename ? getExtFromFilename(filename) : "") ?? "plaintext");
+onMount(() => {
+	const stopWatchingTheme = watchSkeletonDarkMode(container, (nextIsDark) => {
+		isDark = nextIsDark;
+	});
+	if (!container) return;
+	editor = monaco.editor.create(container, {
+		value: "",
+		language: lang,
+		readOnly: readonly,
+		theme: isDark ? "vs-dark" : "vs",
+		automaticLayout: true
+	});
+	const createdEditor = editor;
+	createdEditor.onDidChangeModelContent(() => {
+		if (changeGuard) return;
+		const content = createdEditor.getValue();
+		onChange?.(new Blob([content]));
+	});
+	createdEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+		if (!onSave) return;
+		onSave(new Blob([createdEditor.getValue()]));
+	});
+	function doInsertText(text) {
+		const sel = editor?.getSelection();
+		if (!sel) return;
+		editor?.executeEdits("insertText", [{
+			range: sel,
+			text,
+			forceMoveMarkers: true
+		}]);
+		editor?.focus();
+	}
+	insertText = doInsertText;
+	insertHtml = (html) => doInsertText(html.replace(/<[^>]+>/g, ""));
+	return () => {
+		stopWatchingTheme();
+		insertText = undefined;
+		insertHtml = undefined;
+		editor?.dispose();
+	};
+});
+// Sync incoming Blob → editor text
+$effect(() => {
+	if (!editor || !value) return;
+	const currentEditor = editor;
+	blobToString(value).then((text) => {
+		if (currentEditor.getValue() !== text) {
+			changeGuard = true;
+			currentEditor.setValue(text);
+			changeGuard = false;
+		}
+	});
+});
+// Sync language
+$effect(() => {
+	const model = editor?.getModel();
+	if (model && lang) monaco.editor.setModelLanguage(model, lang);
+});
+// Sync readonly
+$effect(() => {
+	editor?.updateOptions({ readOnly: readonly });
+});
+// Sync theme
+$effect(() => {
+	monaco.editor.setTheme(isDark ? "vs-dark" : "vs");
+});
 </script>
 
 <div