<div class="editable" contenteditable="false" onclick="startEdit(this)">
  Click to edit
</div>

<script>
function startEdit(el) {
  el.contentEditable = 'true';
  el.focus();
  el.classList.add('editing');

  el.addEventListener('blur', () => {
    el.contentEditable = 'false';
    el.classList.remove('editing');
    // kaydet: saveValue(el.textContent)
  }, { once: true });
}
</script>

<style>
.editable {
  padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  border: 1px solid transparent; cursor: pointer;
  transition: border-color 0.15s;
}
.editable:hover   { border-color: var(--border); }
.editable.editing { border-color: var(--accent); outline: none; cursor: text; box-shadow: 0 0 0 3px var(--accent-dim); }
</style>