numolus/src/components/FormulaBar.vue

<script setup lang="ts">
import { nextTick, ref, watch } from 'vue';
import { useDocument } from '../store/document';
import { cycleReferenceLocks } from '../engine';

const store = useDocument();
const draft = ref('');
const focused = ref(false);

// keep the field in sync with the active cell unless the user is editing it
watch(
  () => store.activeCellInput.value,
  (v) => {
    if (!focused.value) draft.value = v;
  },
  { immediate: true },
);

function commit() {
  const sel = store.doc.selection;
  if (sel) store.setCellInput(sel.tableId, sel.anchor.col, sel.anchor.row, draft.value);
}
function onEnter() {
  commit();
  (document.activeElement as HTMLElement)?.blur();
}
function onBlur() {
  focused.value = false;
  commit();
}
function onEscape() {
  draft.value = store.activeCellInput.value;
  (document.activeElement as HTMLElement)?.blur();
}
/** F4: cycle relative -> absolute -> row-locked -> col-locked (Excel/Numbers
 *  "Bezug sperren") -- for the reference at the caret, or every reference a
 *  real text selection overlaps at once. */
function onF4(el: HTMLTextAreaElement) {
  const start = el.selectionStart ?? draft.value.length;
  const end = el.selectionEnd ?? start;
  const res = cycleReferenceLocks(draft.value, start, end);
  if (!res) return;
  draft.value = res.text;
  nextTick(() => el.setSelectionRange(res.start, res.end));
}
function onKeydown(e: KeyboardEvent) {
  const el = e.target as HTMLTextAreaElement;
  // Alt+Enter (Windows/Excel-365-Mac) or Cmd+Enter (a macOS-safe fallback --
  // Option is a compose key there, so `altKey` alone isn't fully reliable;
  // `e.code` sidesteps `key` being altered by that composition).
  const isEnter = e.key === 'Enter' || e.code === 'Enter' || e.code === 'NumpadEnter';
  if (isEnter && (e.altKey || e.metaKey)) {
    e.preventDefault();
    const start = el.selectionStart ?? draft.value.length;
    const end = el.selectionEnd ?? start;
    draft.value = draft.value.slice(0, start) + '\n' + draft.value.slice(end);
    nextTick(() => el.setSelectionRange(start + 1, start + 1));
    return;
  }
  if (isEnter) {
    e.preventDefault();
    onEnter();
  } else if (e.key === 'Escape') {
    e.preventDefault();
    onEscape();
  } else if (e.key === 'F4') {
    e.preventDefault();
    onF4(el);
  }
}
</script>

<template>
  <div class="formula-bar">
    <span class="cell-name" :title="store.activeCellName.value">
      {{ store.activeCellName.value }}
    </span>
    <span class="fx">fx</span>
    <textarea
      v-model="draft"
      class="formula-input"
      spellcheck="false"
      rows="1"
      placeholder="Wert oder =Formel"
      title="Ziehen an der unteren Kante, um mehr Zeilen zu zeigen"
      @focus="focused = true"
      @blur="onBlur"
      @keydown="onKeydown"
    />
  </div>
</template>

<style scoped>
.formula-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.cell-name {
  min-width: 128px;
  max-width: 128px;
  margin-top: 6px;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .cell-name {
    min-width: 64px;
    max-width: 64px;
  }
  .formula-bar {
    gap: 6px;
    padding: 6px 8px;
  }
}
.fx {
  margin-top: 6px;
  font-style: italic;
  color: var(--text-dim);
  font-size: 13px;
}
/* a plain <textarea> gives a free, native mouse-draggable resize handle
   (bottom-right corner) -- exactly the "erweiterbar/erhöhbar mit der Maus"
   ask -- and, unlike the old <input>, actually wraps a long formula instead
   of just scrolling it sideways, so growing the box has something to show. */
.formula-input {
  flex: 1;
  min-height: 30px;
  max-height: 50vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface-2);
  resize: vertical;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.formula-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
</style>