trysem
/

RSjsx

Model card Files Files and versions

xet

Community

trysem commited on 13 days ago

Commit

dd341d7

verified ·

1 Parent(s): e57cdf0

Create rich-manglish-text-editor

Browse files

Files changed (1) hide show

rich-manglish-text-editor +566 -0

rich-manglish-text-editor ADDED Viewed

	@@ -0,0 +1,566 @@

+<!DOCTYPE html>
+<html lang="en" class="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Scribe | Intelligent Text Editor</title>
+    <!-- Tailwind CSS (CDN) -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        zinc: { 850: '#202022', 900: '#18181b', 950: '#09090b' },
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                        serif: ['Merriweather', 'serif'],
+                        mono: ['JetBrains Mono', 'monospace'],
+                    }
+                }
+            }
+        }
+    </script>
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono&family=Merriweather&display=swap" rel="stylesheet">
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        /* Custom Scrollbar for a premium feel */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #d4d4d8;
+            border-radius: 4px;
+        }
+        .dark ::-webkit-scrollbar-thumb {
+            background: #3f3f46;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #a1a1aa;
+        }
+        .dark ::-webkit-scrollbar-thumb:hover {
+            background: #52525b;
+        }
+        /* Hide native details marker */
+        details > summary::-webkit-details-marker {
+            display: none;
+        }
+        /* Focus Mode Transitions */
+        body {
+            transition: background-color 0.3s ease;
+        }
+        #sidebar, #topbar, #bottombar {
+            transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
+        }
+        /* Focus Mode Classes applied via JS */
+        .focus-mode #sidebar {
+            transform: translateX(-100%);
+            width: 0;
+            opacity: 0;
+            overflow: hidden;
+            border: none;
+        }
+        .focus-mode #topbar, .focus-mode #bottombar {
+            transform: translateY(-100%);
+            opacity: 0;
+            position: absolute;
+            pointer-events: none;
+        }
+        .focus-mode #bottombar {
+            transform: translateY(100%);
+        }
+        .focus-mode #editor-container {
+            padding-top: 2rem;
+            padding-bottom: 2rem;
+        }
+    </style>
+</head>
+<body class="h-screen w-full flex flex-col bg-white text-zinc-800 dark:bg-zinc-950 dark:text-zinc-200 font-sans overflow-hidden">
+    <!-- Floating Exit Focus Button (Hidden by default) -->
+    <button id="exit-focus-btn" class="hidden fixed top-4 right-4 z-50 bg-zinc-800 hover:bg-zinc-700 text-white px-4 py-2 rounded-full shadow-lg items-center gap-2 transition-all duration-300">
+        <i data-lucide="minimize"></i> Exit Focus Mode
+    </button>
+    <!-- Top Navigation Bar -->
+    <header id="topbar" class="h-14 flex items-center justify-between px-4 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 shrink-0 z-10">
+        <div class="flex items-center gap-4">
+            <div class="flex items-center gap-2 font-semibold text-lg">
+                <i data-lucide="feather" class="text-blue-500"></i> Scribe
+            </div>
+            <div class="h-6 w-px bg-zinc-300 dark:bg-zinc-700 mx-2"></div>
+            <!-- Font Controls -->
+            <div class="flex items-center bg-zinc-200 dark:bg-zinc-800 rounded-lg p-1 text-sm">
+                <button onclick="setEditorFont('sans')" class="px-3 py-1 rounded hover:bg-white dark:hover:bg-zinc-700 font-sans" title="Sans Serif">Sans</button>
+                <button onclick="setEditorFont('serif')" class="px-3 py-1 rounded hover:bg-white dark:hover:bg-zinc-700 font-serif" title="Serif">Serif</button>
+                <button onclick="setEditorFont('mono')" class="px-3 py-1 rounded hover:bg-white dark:hover:bg-zinc-700 font-mono" title="Monospace">Mono</button>
+            </div>
+        </div>
+        <div class="flex items-center gap-3">
+            <!-- Manglish Toggle -->
+            <label class="flex items-center cursor-pointer gap-2 mr-2" title="Transliterate English to Malayalam automatically">
+                <span class="text-sm font-medium">Manglish</span>
+                <div class="relative">
+                    <input type="checkbox" id="manglish-toggle" class="sr-only">
+                    <div class="block bg-zinc-300 dark:bg-zinc-700 w-10 h-6 rounded-full transition-colors toggle-bg"></div>
+                    <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform"></div>
+                </div>
+            </label>
+            <button id="theme-toggle" class="p-2 rounded-md hover:bg-zinc-200 dark:hover:bg-zinc-800 transition" title="Toggle Theme">
+                <i data-lucide="moon" id="theme-icon"></i>
+            </button>
+            <button id="focus-toggle" class="p-2 rounded-md hover:bg-zinc-200 dark:hover:bg-zinc-800 transition" title="Focus Mode">
+                <i data-lucide="maximize"></i>
+            </button>
+            <div class="relative group">
+                <button class="p-2 rounded-md hover:bg-zinc-200 dark:hover:bg-zinc-800 transition flex items-center gap-2" title="Export">
+                    <i data-lucide="download"></i>
+                </button>
+                <div class="absolute right-0 top-full mt-1 hidden group-hover:block bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-md shadow-lg w-32 overflow-hidden">
+                    <button onclick="exportFile('txt')" class="w-full text-left px-4 py-2 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-700">As .txt</button>
+                    <button onclick="exportFile('md')" class="w-full text-left px-4 py-2 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-700">As .md</button>
+                </div>
+            </div>
+            <button onclick="clearEditor()" class="p-2 text-red-500 rounded-md hover:bg-red-50 dark:hover:bg-red-900/20 transition" title="Clear Editor">
+                <i data-lucide="trash-2"></i>
+            </button>
+        </div>
+    </header>
+    <!-- Main Content Area -->
+    <main class="flex-1 flex overflow-hidden relative">
+        <!-- Sidebar: Bulk Tools -->
+        <aside id="sidebar" class="w-80 flex-shrink-0 border-r border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50 overflow-y-auto flex flex-col">
+            <div class="p-4 border-b border-zinc-200 dark:border-zinc-800 font-medium flex justify-between items-center text-sm uppercase tracking-wider text-zinc-500">
+                Bulk Actions
+                <i data-lucide="wrench" class="w-4 h-4"></i>
+            </div>
+            <div class="p-4 space-y-4">
+                <!-- Editor Settings -->
+                <div class="flex items-center justify-between p-3 bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
+                    <span class="text-sm font-medium">Smart Paste (Strip HTML)</span>
+                    <label class="relative cursor-pointer">
+                        <input type="checkbox" id="smart-paste-toggle" class="sr-only" checked>
+                        <div class="block bg-zinc-300 dark:bg-zinc-600 w-8 h-5 rounded-full toggle-bg transition-colors"></div>
+                        <div class="dot absolute left-1 top-1 bg-white w-3 h-3 rounded-full transition-transform"></div>
+                    </label>
+                </div>
+                <!-- Case Operations -->
+                <details class="group border border-zinc-200 dark:border-zinc-700 rounded-lg overflow-hidden bg-white dark:bg-zinc-800" open>
+                    <summary class="flex justify-between items-center cursor-pointer p-3 font-medium text-sm select-none">
+                        <span>Change Case</span>
+                        <i data-lucide="chevron-down" class="w-4 h-4 transition-transform group-open:rotate-180"></i>
+                    </summary>
+                    <div class="p-3 pt-0 grid grid-cols-2 gap-2 text-xs">
+                        <button onclick="applyAction('upper')" class="btn-tool">UPPERCASE</button>
+                        <button onclick="applyAction('lower')" class="btn-tool">lowercase</button>
+                        <button onclick="applyAction('title')" class="btn-tool">Title Case</button>
+                        <button onclick="applyAction('sentence')" class="btn-tool">Sentence case.</button>
+                    </div>
+                </details>
+                <!-- Line Operations -->
+                <details class="group border border-zinc-200 dark:border-zinc-700 rounded-lg overflow-hidden bg-white dark:bg-zinc-800">
+                    <summary class="flex justify-between items-center cursor-pointer p-3 font-medium text-sm select-none">
+                        <span>Line Operations</span>
+                        <i data-lucide="chevron-down" class="w-4 h-4 transition-transform group-open:rotate-180"></i>
+                    </summary>
+                    <div class="p-3 pt-0 flex flex-col gap-2 text-xs">
+                        <button onclick="applyAction('sort')" class="btn-tool w-full justify-start"><i data-lucide="arrow-down-a-z" class="w-3 h-3 mr-2"></i> Sort Lines Alphabetically</button>
+                        <button onclick="applyAction('reverse')" class="btn-tool w-full justify-start"><i data-lucide="arrow-up-down" class="w-3 h-3 mr-2"></i> Reverse Lines</button>
+                        <button onclick="applyAction('rm-empty')" class="btn-tool w-full justify-start"><i data-lucide="align-justify" class="w-3 h-3 mr-2"></i> Remove Empty Lines</button>
+                        <button onclick="applyAction('rm-dupes')" class="btn-tool w-full justify-start"><i data-lucide="copy-minus" class="w-3 h-3 mr-2"></i> Remove Duplicates</button>
+                    </div>
+                </details>
+                <!-- Spacing & Formatting -->
+                <details class="group border border-zinc-200 dark:border-zinc-700 rounded-lg overflow-hidden bg-white dark:bg-zinc-800">
+                    <summary class="flex justify-between items-center cursor-pointer p-3 font-medium text-sm select-none">
+                        <span>Spacing</span>
+                        <i data-lucide="chevron-down" class="w-4 h-4 transition-transform group-open:rotate-180"></i>
+                    </summary>
+                    <div class="p-3 pt-0 flex flex-col gap-2 text-xs">
+                        <button onclick="applyAction('rm-spaces')" class="btn-tool w-full justify-start"><i data-lucide="space" class="w-3 h-3 mr-2"></i> Remove Extra Spaces</button>
+                    </div>
+                </details>
+                <!-- Prefix & Suffix -->
+                <details class="group border border-zinc-200 dark:border-zinc-700 rounded-lg overflow-hidden bg-white dark:bg-zinc-800">
+                    <summary class="flex justify-between items-center cursor-pointer p-3 font-medium text-sm select-none">
+                        <span>Prefix / Suffix</span>
+                        <i data-lucide="chevron-down" class="w-4 h-4 transition-transform group-open:rotate-180"></i>
+                    </summary>
+                    <div class="p-3 pt-0 flex flex-col gap-3 text-xs">
+                        <div>
+                            <label class="block text-zinc-500 mb-1">Add to start of every line:</label>
+                            <div class="flex gap-2">
+                                <input type="text" id="prefix-input" class="flex-1 bg-zinc-50 dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-600 rounded px-2 py-1 outline-none focus:border-blue-500" placeholder="- ">
+                                <button onclick="applyAction('prefix')" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded transition">Apply</button>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-zinc-500 mb-1">Add to end of every line:</label>
+                            <div class="flex gap-2">
+                                <input type="text" id="suffix-input" class="flex-1 bg-zinc-50 dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-600 rounded px-2 py-1 outline-none focus:border-blue-500" placeholder=";">
+                                <button onclick="applyAction('suffix')" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded transition">Apply</button>
+                            </div>
+                        </div>
+                    </div>
+                </details>
+                <!-- Find & Replace -->
+                <details class="group border border-zinc-200 dark:border-zinc-700 rounded-lg overflow-hidden bg-white dark:bg-zinc-800">
+                    <summary class="flex justify-between items-center cursor-pointer p-3 font-medium text-sm select-none">
+                        <span>Find & Replace</span>
+                        <i data-lucide="chevron-down" class="w-4 h-4 transition-transform group-open:rotate-180"></i>
+                    </summary>
+                    <div class="p-3 pt-0 flex flex-col gap-2 text-xs">
+                        <input type="text" id="find-input" class="w-full bg-zinc-50 dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-600 rounded px-2 py-1.5 outline-none focus:border-blue-500" placeholder="Find...">
+                        <input type="text" id="replace-input" class="w-full bg-zinc-50 dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-600 rounded px-2 py-1.5 outline-none focus:border-blue-500" placeholder="Replace with...">
+                        <button onclick="applyAction('replace')" class="btn-tool w-full justify-center bg-zinc-100 dark:bg-zinc-700 mt-1"><i data-lucide="replace" class="w-3 h-3 mr-2"></i> Replace All</button>
+                    </div>
+                </details>
+            </div>
+        </aside>
+        <!-- Main Editor Area -->
+        <div id="editor-container" class="flex-1 flex flex-col bg-white dark:bg-zinc-950 relative h-full">
+            <textarea
+                id="main-editor"
+                class="w-full h-full resize-none outline-none bg-transparent text-lg leading-relaxed p-8 md:p-12 text-zinc-800 dark:text-zinc-200 font-sans"
+                placeholder="Start typing or paste your text here...&#10;&#10;(Enable Manglish mode in the top right to type in Malayalam phonetically)"></textarea>
+        </div>
+    </main>
+    <!-- Status Bar -->
+    <footer id="bottombar" class="h-8 border-t border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 flex items-center justify-between px-4 text-xs text-zinc-500 dark:text-zinc-400 shrink-0">
+        <div class="flex items-center gap-4">
+            <span id="stat-words">0 words</span>
+            <span id="stat-chars">0 characters</span>
+            <span id="stat-lines">0 lines</span>
+        </div>
+        <div class="flex items-center gap-2">
+            <i data-lucide="clock" class="w-3 h-3"></i>
+            <span id="stat-readtime">0 min read</span>
+        </div>
+    </footer>
+    <!-- Styles specifically for interactive components inside script tags for easier maintenance -->
+    <style>
+        /* Custom Button Component for Sidebar */
+        .btn-tool {
+            display: inline-flex;
+            align-items: center;
+            padding: 0.375rem 0.75rem;
+            background-color: var(--tw-bg-opacity, #f4f4f5); /* zinc-100 */
+            border-radius: 0.375rem;
+            transition: all 0.2s;
+            border: 1px solid transparent;
+        }
+        .dark .btn-tool {
+            background-color: #27272a; /* zinc-800 */
+        }
+        .btn-tool:hover {
+            background-color: #e4e4e7; /* zinc-200 */
+            border-color: #d4d4d8;
+        }
+        .dark .btn-tool:hover {
+            background-color: #3f3f46; /* zinc-700 */
+            border-color: #52525b;
+        }
+        /* Toggle Switch Animation */
+        input:checked ~ .dot {
+            transform: translateX(100%);
+        }
+        input:checked ~ .toggle-bg {
+            background-color: #3b82f6; /* blue-500 */
+        }
+    </style>
+    <script>
+        // Initialize Icons
+        lucide.createIcons();
+        // DOM Elements
+        const editor = document.getElementById('main-editor');
+        const themeToggle = document.getElementById('theme-toggle');
+        const themeIcon = document.getElementById('theme-icon');
+        const focusToggle = document.getElementById('focus-toggle');
+        const exitFocusBtn = document.getElementById('exit-focus-btn');
+        const manglishToggle = document.getElementById('manglish-toggle');
+        const smartPasteToggle = document.getElementById('smart-paste-toggle');
+        // State
+        let isManglishEnabled = false;
+        // Initialization
+        document.addEventListener('DOMContentLoaded', () => {
+            // Load saved text
+            const savedText = localStorage.getItem('scribe_text');
+            if (savedText) {
+                editor.value = savedText;
+            }
+            // Load theme preference
+            if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                document.documentElement.classList.add('dark');
+                themeIcon.setAttribute('data-lucide', 'sun');
+            } else {
+                themeIcon.setAttribute('data-lucide', 'moon');
+            }
+            lucide.createIcons();
+            updateStats();
+            editor.focus();
+        });
+        // ----------------------------------------------------
+        // Editor Core Features (Stats, Auto-Save, Smart Paste)
+        // ----------------------------------------------------
+        editor.addEventListener('input', () => {
+            updateStats();
+            saveText();
+        });
+        function updateStats() {
+            const text = editor.value;
+            const words = text.trim() ? text.trim().split(/\s+/).length : 0;
+            const chars = text.length;
+            const lines = text ? text.split('\n').length : 0;
+            const readTime = Math.max(1, Math.ceil(words / 200));
+            document.getElementById('stat-words').textContent = `${words} word${words !== 1 ? 's' : ''}`;
+            document.getElementById('stat-chars').textContent = `${chars} character${chars !== 1 ? 's' : ''}`;
+            document.getElementById('stat-lines').textContent = `${lines} line${lines !== 1 ? 's' : ''}`;
+            document.getElementById('stat-readtime').textContent = `${readTime} min read`;
+        }
+        function saveText() {
+            localStorage.setItem('scribe_text', editor.value);
+        }
+        function clearEditor() {
+            if (confirm("Are you sure you want to clear the editor?")) {
+                editor.value = '';
+                updateStats();
+                saveText();
+                editor.focus();
+            }
+        }
+        editor.addEventListener('paste', (e) => {
+            if (smartPasteToggle.checked) {
+                e.preventDefault();
+                // Get text and strip basic HTML tags if accidentally copied as raw string
+                let text = (e.originalEvent || e).clipboardData.getData('text/plain');
+                text = text.replace(/<[^>]*>?/gm, ''); // Strip remaining HTML tags
+                document.execCommand('insertText', false, text);
+            }
+        });
+        // ----------------------------------------------------
+        // UI & Theme Controls
+        // ----------------------------------------------------
+        themeToggle.addEventListener('click', () => {
+            document.documentElement.classList.toggle('dark');
+            const isDark = document.documentElement.classList.contains('dark');
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+            themeIcon.setAttribute('data-lucide', isDark ? 'sun' : 'moon');
+            lucide.createIcons();
+        });
+        // Focus Mode
+        function toggleFocusMode() {
+            document.body.classList.toggle('focus-mode');
+            const isFocus = document.body.classList.contains('focus-mode');
+            if (isFocus) {
+                exitFocusBtn.classList.remove('hidden');
+                exitFocusBtn.classList.add('flex');
+            } else {
+                exitFocusBtn.classList.add('hidden');
+                exitFocusBtn.classList.remove('flex');
+            }
+            editor.focus();
+        }
+        focusToggle.addEventListener('click', toggleFocusMode);
+        exitFocusBtn.addEventListener('click', toggleFocusMode);
+        function setEditorFont(fontType) {
+            editor.classList.remove('font-sans', 'font-serif', 'font-mono');
+            editor.classList.add(`font-${fontType}`);
+            editor.focus();
+        }
+        // Export functionality
+        function exportFile(extension) {
+            const text = editor.value;
+            const blob = new Blob([text], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `Scribe_Document_${new Date().toISOString().slice(0,10)}.${extension}`;
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+        // ----------------------------------------------------
+        // Bulk Editing Actions
+        // ----------------------------------------------------
+        function applyAction(action) {
+            let val = editor.value;
+            if (!val) return;
+            switch (action) {
+                case 'upper':
+                    val = val.toUpperCase();
+                    break;
+                case 'lower':
+                    val = val.toLowerCase();
+                    break;
+                case 'title':
+                    val = val.toLowerCase().replace(/\b\w/g, c => c.toUpperCase());
+                    break;
+                case 'sentence':
+                    val = val.split(/(?<=[.?!])\s+/).map(s => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase()).join(' ');
+                    break;
+                case 'sort':
+                    val = val.split('\n').sort().join('\n');
+                    break;
+                case 'reverse':
+                    val = val.split('\n').reverse().join('\n');
+                    break;
+                case 'rm-empty':
+                    val = val.split('\n').filter(l => l.trim().length > 0).join('\n');
+                    break;
+                case 'rm-dupes':
+                    val = [...new Set(val.split('\n'))].join('\n');
+                    break;
+                case 'rm-spaces':
+                    val = val.replace(/[ \t]+/g, ' ');
+                    break;
+                case 'prefix':
+                    const pre = document.getElementById('prefix-input').value;
+                    val = val.split('\n').map(l => l.trim().length > 0 ? pre + l : l).join('\n');
+                    break;
+                case 'suffix':
+                    const suf = document.getElementById('suffix-input').value;
+                    val = val.split('\n').map(l => l.trim().length > 0 ? l + suf : l).join('\n');
+                    break;
+                case 'replace':
+                    const f = document.getElementById('find-input').value;
+                    const r = document.getElementById('replace-input').value;
+                    if (f) val = val.split(f).join(r);
+                    break;
+            }
+            // Using execCommand preserves undo history in most browsers
+            editor.focus();
+            editor.select();
+            const success = document.execCommand('insertText', false, val);
+            if (!success) {
+                editor.value = val; // Fallback
+            }
+            updateStats();
+            saveText();
+        }
+        // ----------------------------------------------------
+        // Manglish (Malayalam-English) Transliteration Logic
+        // ----------------------------------------------------
+        manglishToggle.addEventListener('change', (e) => {
+            isManglishEnabled = e.target.checked;
+            editor.focus();
+        });
+        editor.addEventListener('keydown', async (e) => {
+            if (!isManglishEnabled) return;
+            // Trigger transliteration when user hits Space or Enter
+            if (e.key === ' ' || e.key === 'Enter') {
+                const cursor = editor.selectionStart;
+                const text = editor.value;
+                // Find the contiguous English alphabetic word just preceding the cursor
+                let i = cursor - 1;
+                while (i >= 0 && /[a-zA-Z]/.test(text[i])) {
+                    i--;
+                }
+                const wordStart = i + 1;
+                const word = text.slice(wordStart, cursor);
+                if (word.length > 0) {
+                    e.preventDefault(); // Stop space/enter from rendering immediately
+                    try {
+                        // Google Input Tools Public Transliteration API
+                        const response = await fetch(`https://inputtools.google.com/request?text=${word}&itc=ml-t-i0-und&num=1`);
+                        const data = await response.json();
+                        // Extract the best transliteration suggestion
+                        const mlWord = data?.[1]?.[0]?.[1]?.[0];
+                        if (mlWord) {
+                            // Insert translated word + the key they pressed (space or newline)
+                            const insertStr = mlWord + (e.key === 'Enter' ? '\n' : ' ');
+                            const before = text.slice(0, wordStart);
+                            const after = text.slice(cursor);
+                            editor.value = before + insertStr + after;
+                            // Adjust cursor position
+                            const newCursorPos = wordStart + insertStr.length;
+                            editor.selectionStart = editor.selectionEnd = newCursorPos;
+                        } else {
+                            throw new Error("No transliteration found");
+                        }
+                    } catch (error) {
+                        console.error("Transliteration Error:", error);
+                        // Graceful Fallback: Just insert what they typed originally
+                        const insertStr = word + (e.key === 'Enter' ? '\n' : ' ');
+                        const before = text.slice(0, wordStart);
+                        const after = text.slice(cursor);
+                        editor.value = before + insertStr + after;
+                        editor.selectionStart = editor.selectionEnd = wordStart + insertStr.length;
+                    }
+                    updateStats();
+                    saveText();
+                }
+            }
+        });
+    </script>
+</body>
+</html>