Function beginInlineTextEdit

app.js:4891–4946

(elementId)

}

function beginInlineTextEdit(elementId) {
  const el = elements.find((e) => e.id === elementId);
  if (!el || !elementHasText(el.type)) return;
  const node = document.querySelector(`.ui-element[data-id="${elementId}"]`);
  if (!node) return;

  const input = document.createElement("input");
  input.type = "text";
  input.value = el.text || "";
  input.className = "inline-text-editor";
  input.style.position = "absolute";
  input.style.left = "0";
  input.style.top = "0";
  input.style.width = "100%";
  input.style.height = "100%";
  input.style.border = "1px solid rgba(255, 109, 31, 0.6)";
  input.style.borderRadius = "8px";
  input.style.background = "rgba(0,0,0,0.25)";
  input.style.color = "inherit";
  input.style.padding = "6px 8px";
  input.style.font = "inherit";
  input.style.outline = "none";

  // Replace visible text while editing
  const prevText = node.textContent;
  node.textContent = "";
  node.appendChild(input);
  input.focus();
  input.select();

  const commit = () => {
    el.text = input.value;
    node.removeChild(input);
    node.textContent = prevText; // renderElements will refresh anyway
    renderElements();
    renderLayers();
    updatePropsInputs(false);
    updateCode();
    pushHistory();
  };
  const cancel = () => {
    node.removeChild(input);
    node.textContent = prevText;
  };

  input.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      commit();
    } else if (e.key === "Escape") {
      e.preventDefault();
      cancel();
    }
  });
  input.addEventListener("blur", () => commit());
}

function openContextMenu(x, y) {