diff --git a/screenshots/symbol-buttons-overview.png b/screenshots/symbol-buttons-overview.png new file mode 100644 index 0000000..1d22fe2 Binary files /dev/null and b/screenshots/symbol-buttons-overview.png differ diff --git a/screenshots/symbol-buttons-test.png b/screenshots/symbol-buttons-test.png new file mode 100644 index 0000000..bd306ae Binary files /dev/null and b/screenshots/symbol-buttons-test.png differ diff --git a/src/components/Editor.vue b/src/components/Editor.vue index 36469c5..c5ff899 100644 --- a/src/components/Editor.vue +++ b/src/components/Editor.vue @@ -16,6 +16,28 @@ const emit = defineEmits<{ 'cursor-position': [loc: SourceLocation | null] }>() +// Symbol insertion functionality +const insertSymbol = (symbol: string) => { + const textarea = textareaRef.value + if (!textarea) return + + const start = textarea.selectionStart + const end = textarea.selectionEnd + const currentValue = props.modelValue + + // Insert symbol at cursor position + const newValue = currentValue.substring(0, start) + symbol + currentValue.substring(end) + + emit('update:modelValue', newValue) + + // Restore focus and cursor position after the inserted symbol + setTimeout(() => { + textarea.focus() + const newCursorPos = start + symbol.length + textarea.setSelectionRange(newCursorPos, newCursorPos) + }, 0) +} + const textareaRef = ref(null) const localValue = computed({ @@ -436,6 +458,21 @@ const handleMouseLeave = () => {
{{ fileExtBadge }} {{ displayFileName }} +
+ + + +
@@ -476,6 +513,7 @@ const handleMouseLeave = () => { background: var(--accent-color); border-bottom: 1px solid var(--border-color); font-size: 0.85rem; + justify-content: space-between; } .file-icon { @@ -672,4 +710,58 @@ const handleMouseLeave = () => { .drop-icon { font-size: 2rem; } + +/* Symbol insertion buttons */ +.symbol-buttons { + display: flex; + align-items: center; + gap: 0.35rem; + margin-left: auto; +} + +.symbol-btn { + background: rgba(102, 126, 234, 0.2); + color: var(--text-color); + border: 1px solid rgba(102, 126, 234, 0.4); + padding: 0.25rem 0.5rem; + border-radius: 4px; + font-family: inherit; + font-size: 1rem; + cursor: pointer; + transition: all 0.2s; + min-width: 2rem; + display: flex; + align-items: center; + justify-content: center; +} + +.symbol-btn:hover { + background: rgba(102, 126, 234, 0.35); + border-color: rgba(102, 126, 234, 0.6); + transform: translateY(-1px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.symbol-btn:active { + transform: translateY(0); +} + +/* Highlight the special symbols with their syntax highlighting colors */ +.symbol-btn:nth-child(1) { + /* ∞ - infinity */ + color: #fbbf24; + font-weight: bold; +} + +.symbol-btn:nth-child(2) { + /* ♂ - male */ + color: #60a5fa; + font-weight: bold; +} + +.symbol-btn:nth-child(3) { + /* ♀ - female */ + color: #f472b6; + font-weight: bold; +}