feat: custom editor

2026-06-06 03:34:40 +00:00 · 2025-06-18 16:47:29 +10:00
parent c4140a2a9d
commit 2638157d25
15 changed files with 2054 additions and 0 deletions
@@ -0,0 +1,65 @@
+<script lang="ts">
+  import Editor from './Editor/Editor.svelte';
+  import EditorStyles from './Editor/EditorStyles.css?raw';
+  import EditorOverrideStyles from './Editor/EditorOverrideStyles.css?raw';
+  import TiptapStyles from './Editor/TiptapStyles.css?raw';
+  import { onMount } from 'svelte';
+  import { settingsState } from '@/seqta/utils/listeners/SettingsState';
+
+  interface Props {
+    onchange: (value: string) => void;
+    initialContent?: string;
+    scale?: number; // Scale factor for the editor (1.0 = normal, 1.2 = 120%, etc.)
+  }
+  
+  let { onchange, initialContent = '', scale = 1.3 }: Props = $props();
+  
+  let content = $state('');
+  let betterEditor = $state<HTMLElement | null>(null);
+
+  // Watch for content changes and call the callback
+  $effect(() => {
+    if (onchange) {
+      onchange(content);
+    }
+  });
+
+  onMount(async () => {
+    if (betterEditor) {
+      const styles = EditorStyles + EditorOverrideStyles + TiptapStyles;
+      
+      const scalingCSS = `
+        .better-editor {
+          --scale-factor: ${scale};
+        }
+        
+        .better-editor .editor-prose {
+          transform-origin: top left;
+          zoom: ${scale};
+          -moz-transform: scale(${scale});
+          -moz-transform-origin: 0 0;
+        }
+        
+        /* For Firefox which doesn't support zoom */
+        @-moz-document url-prefix() {
+          .better-editor .editor-prose {
+            transform: scale(${scale});
+            width: ${100 / scale}%;
+          }
+        }
+      `;
+      
+      const styleElement = document.createElement('style');
+      styleElement.textContent = styles + scalingCSS;
+      betterEditor.appendChild(styleElement);
+    }
+  });
+</script>
+
+<div
+  class="h-full better-editor {settingsState.DarkMode ? 'dark' : ''}" 
+  bind:this={betterEditor}
+  style="font-size: {scale * 16}px; --editor-scale: {scale};"
+>
+  <Editor bind:content {initialContent} />
+</div>