(core) Better UX in full-edit mode for the formula editor

Summary:
Improving UX for the formula editor
- Formula editor will go into full edit mode only on formula change (not on a mouse click)
- Adding column highlight and a tooltip when in full edit mode

Test Plan: nbrowser tests

Reviewers: cyprien

Reviewed By: cyprien

Differential Revision: https://phab.getgrist.com/D3194

app/client/widgets/FieldEditor.ts

@@ -429,8 +429,13 @@ export function openFormulaEditor(options: {
   });
   editor.attach(refElem);
 
-  // Enter formula-editing mode (highlight formula icons; click on a column inserts its ID).
-  field.editingFormula(true);
+  // When formula is empty enter formula-editing mode (highlight formula icons; click on a column inserts its ID).
+  // This function is used for primarily for switching between diffrent column behaviors, so we want to enter full
+  // edit mode right away.
+  // TODO: consider converting it to parameter, when this will be used in diffrent scenarios.
+  if (!column.formula()) {
+    field.editingFormula(true);
+  }
   setupCleanup(holder, gristDoc, field, saveEdit);
   return holder;
 }

app/client/widgets/FormulaEditor.ts

@@ -97,12 +97,6 @@ export class FormulaEditor extends NewBaseEditor {
         this._formulaEditor.getEditor().focus();
       }),
       dom('div.formula_editor.formula_field_edit', testId('formula-editor'),
-        // We don't always enter editing mode immediately, e.g. not on double-clicking a cell.
-        // In those cases, we'll switch as soon as the user types or clicks into the editor.
-        dom.on('mousedown', () => {
-          // but don't do it when this is a readonly mode
-          options.field.editingFormula(true);
-        }),
         this._formulaEditor.buildDom((aceObj: any) => {
           aceObj.setFontSize(11);
           aceObj.setHighlightActiveLine(false);