Editable argument name (#13014)

# Important Notes
Fairly big code changes included:
- Refactor of the widget update mechanism: `onUpdate` now returns an update result and can be async. That allows widgets to properly handle error states caused by their attempted updates. Injecting an update processor in the middle of the chain also allows for inesrting additional input validation by intermediate widgets (used by argument name editor to only accept `Ast.Expr` patterns).
- Deduplicate fairly complicated setup code from widgets that used `codemirror`. Now there is a common `CodeMirrorWidgetBase` component that abstracts away most of the complexities of dealing with the editor, while allowing it to still be configurable (e.g. adding extra extensions). Only the final conversion of widget input data into text and emitting the final edit remains a responsibility of individual widgets. This common layer is now used by `WidgetText`, `WidgetFunctionName` and `WidgetEnsoExpression`, but more widgets with any form of text input can be later ported as needed.
- Slightly cleaned up duplicated styling for common widget UI patterns, introduced `widgetPill` shared class.

Author: Frizi

CHANGELOG.md

@@ -9,6 +9,7 @@
 - [Type annotations are now visible in the graph editor][12751]
 - [Component Browser shows methods with respect to possible type casts][12751]
 - [Add option to browse cloud for secret values][12953]
+- [Allow editing grouped component argument names.][13014]
 - [Add ability to inspect column, row and value from right click on table
   viz][12986]
 
@@ -18,6 +19,7 @@
 [12913]: https://github.com/enso-org/enso/pull/12913
 [12751]: https://github.com/enso-org/enso/pull/12751
 [12953]: https://github.com/enso-org/enso/pull/12953
+[13014]: https://github.com/enso-org/enso/pull/13014
 [12986]: https://github.com/enso-org/enso/pull/12986
 
 #### Enso Standard Library

app/common/package.json

@@ -32,7 +32,6 @@
     "@tanstack/vue-query": "5.59.20",
     "@types/node": "^20.11.21",
     "lib0": "^0.2.99",
-    "react": "^18.3.1",
     "vitest": "3.0.5"
   }
 }

app/gui/.dev-env

@@ -20,10 +20,8 @@
   --color-dim: rgb(0 0 0 / 0.25);
   --color-frame-bg: rgb(255 255 255 / 0.3);
   --color-frame-selected-bg: rgb(255 255 255 / 0.7);
-  --color-widget-slight: rgb(255 255 255 / 0.06);
   --color-widget: rgb(255 255 255 / 0.12);
   --color-widget-focus: rgb(255 255 255 / 1);
-  --color-widget-unfocus: rgb(255 255 255 / 0.6);
   --color-widget-selected: rgb(255 255 255 / 0.58);
   --color-widget-selection: rgba(0 0 0 / 0.2);
   --color-port-connected: rgb(255 255 255 / 0.15);
@@ -81,23 +79,9 @@
 .define-node-colors {
   --color-node-primary: var(--node-group-color);
   --color-node-text: white;
-  --color-node-text-selected: color-mix(
-    in oklab,
-    var(--color-node-primary) 70%,
-    black 30%
-  );
+  --color-node-background: var(--node-group-color);
+  --color-node-primary: var(--node-group-color);
   --color-node-text-placeholder: rgba(255, 255, 255, 0.6);
-  --color-node-text-placeholder-selected: color-mix(
-    in oklab,
-    var(--color-node-primary) 30%,
-    oklab(0.75 0 0) 70%
-  );
-  --color-node-output-port: color-mix(
-    in oklab,
-    var(--color-node-primary) 85%,
-    white 15%
-  );
-  --color-node-port: rgb(255 255 255 / 0.15);
   --color-node-error: color-mix(
     in oklab,
     var(--color-node-primary) 30%,
@@ -126,6 +110,7 @@
   }
 
   &.selected {
+    --color-widget: var(--color-widget-selected);
     --color-node-background: color-mix(
       in oklab,
       var(--color-node-primary),
@@ -136,9 +121,16 @@
       var(--color-node-primary),
       white 90%
     );
-    --color-node-port: rgb(255 255 255 / 0.6);
-    --color-node-text: var(--color-node-text-selected);
-    --color-node-text-placeholder: var(--color-node-text-placeholder-selected);
+    --color-node-text: color-mix(
+      in oklab,
+      var(--color-node-primary) 70%,
+      black 30%
+    );
+    --color-node-text-placeholder: color-mix(
+      in oklab,
+      var(--color-node-primary) 30%,
+      oklab(0.75 0 0) 70%
+    );
     --color-edge-from-node: color-mix(
       in oklab,
       var(--color-node-primary),

app/gui/src/project-view/assets/base.css

@@ -23,6 +23,6 @@ const descriptionWithShortcut = computed(() =>
     :disabled="toValue(action.disabled)"
     :title="descriptionWithShortcut"
     :label="label"
-    @click.stop="action.action"
+    @activate="action.action"
   />
 </template>

app/gui/src/project-view/components/ActionButton.vue

@@ -50,6 +50,7 @@ const { editorView, setExtraExtensions } = useCodeMirror(editorRoot, {
     ensoHoverTooltip(graphStore, suggestionDbStore, vueHost),
   ],
   vueHost: () => vueHost,
+  lineMode: 'multi',
 })
 ;(window as any).__codeEditorApi = testSupport(editorView)
 useAutoBlur(editorView.dom)

app/gui/src/project-view/components/CodeEditor/CodeEditorImpl.vue

@@ -158,9 +158,7 @@ class EnsoParser extends Parser {
   }
 }
 
-/** TODO: Add docs */
-export function ensoSyntax(moduleRoot: Readonly<Ref<Ast.BodyBlock | undefined>>): Extension {
-  return new LanguageSupport(new Language(facet, new EnsoParser(moduleRoot)), [
-    indentUnit.of('    '),
-  ])
+/** CodeMirror extension that adds support for parsing enso language. */
+export function ensoSyntax(astRoot: Readonly<Ref<Ast.BodyBlock | undefined>>): Extension {
+  return new LanguageSupport(new Language(facet, new EnsoParser(astRoot)), [indentUnit.of('    ')])
 }

app/gui/src/project-view/components/CodeEditor/ensoSyntax.ts

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useCssModule } from 'vue'
 
-defineExpose({ highlightClasses: useCssModule() })
+const highlightClasses = useCssModule()
+defineExpose({ highlightClasses })
 </script>
 
 <template>
@@ -11,11 +12,8 @@ defineExpose({ highlightClasses: useCssModule() })
 </template>
 
 <style scoped>
-.CodeMirrorRoot {
-  display: contents;
-  & :deep(.cm-content) {
-    cursor: text;
-  }
+.CodeMirrorRoot :deep(.cm-content) {
+  cursor: text;
 }
 </style>
 
@@ -66,4 +64,29 @@ defineExpose({ highlightClasses: useCssModule() })
 .invalid {
   color: #f00;
 }
+
+:global(.define-node-colors:not(.selected)) {
+  .comment,
+  .lineComment,
+  .blockComment,
+  .docComment,
+  .name,
+  .variableName,
+  .definition-variableName,
+  .literal,
+  .string,
+  .escape,
+  .number,
+  .keyword,
+  .moduleKeyword,
+  .modifier,
+  .punctuation,
+  .paren,
+  .operator,
+  .definitionOperator,
+  .invalid {
+    color: var(--color-node-text);
+    transition: color 0.2s ease;
+  }
+}
 </style>

app/gui/src/project-view/components/CodeMirrorRoot.vue

@@ -428,11 +428,7 @@ const listsHandler = listBindings.handler({
       v-if="input.mode.mode === 'codeEditing' && !isVisualizationVisible"
       class="show-visualization"
     >
-      <SvgButton
-        name="eye"
-        title="Show visualization"
-        @click.stop="isVisualizationVisible = true"
-      />
+      <SvgButton name="eye" title="Show visualization" @activate="isVisualizationVisible = true" />
     </div>
     <ComponentList
       v-if="input.mode.mode === 'componentBrowsing'"

app/gui/src/project-view/components/ComponentBrowser.vue

@@ -109,7 +109,7 @@ const rootStyle = computed(() => {
   margin: 0;
   isolation: isolate;
   &.port {
-    background-color: var(--color-node-port);
+    background-color: var(--color-edge-from-node);
     color: white;
   }
 }

app/gui/src/project-view/components/ComponentBrowser/ComponentEditor.vue

@@ -69,7 +69,7 @@ const tabStyle = {
               :class="{ activeTab: currentTab === tab }"
               :style="tabStyle"
             >
-              <SvgButton :title="title" :name="icon" @click="currentTab = tab" />
+              <SvgButton :title="title" :name="icon" @activate="currentTab = tab" />
             </div>
           </div>
           <ResizeHandles

app/gui/src/project-view/components/DockPanel.vue

@@ -87,7 +87,7 @@ const handler = documentationEditorBindings.handler({
           <FullscreenButton v-model="fullscreen" />
         </template>
         <template #toolbarRight>
-          <SvgButton name="image" title="Insert image" @click.stop="tryUploadImageFile()" />
+          <SvgButton name="image" title="Insert image" @activate="tryUploadImageFile()" />
         </template>
         <template #belowToolbar>
           <slot name="belowToolbar" />

app/gui/src/project-view/components/DocumentationEditor.vue

@@ -152,7 +152,7 @@ function openDocs(url: string) {
         v-if="documentationUrl"
         name="open"
         title="Open in New Window"
-        @click.stop="openDocs(documentationUrl)"
+        @activate="openDocs(documentationUrl)"
       />
     </div>
     <!-- todo panel -->

app/gui/src/project-view/components/DocumentationPanel.vue

@@ -31,12 +31,12 @@ function shrinkFactor(index: number): number {
       <SvgButton
         name="navigate_back"
         :disabled="!props.canGoBackward"
-        @click.stop="emit('backward')"
+        @activate="emit('backward')"
       />
       <SvgButton
         name="navigate_forward"
         :disabled="!props.canGoForward"
-        @click.stop="emit('forward')"
+        @activate="emit('forward')"
       />
     </div>
     <TransitionGroup name="breadcrumbs">

app/gui/src/project-view/components/DocumentationPanel/DocsBreadcrumbs.vue

@@ -10,6 +10,6 @@ const fullscreen = defineModel<boolean>({ required: true })
   <SvgButton
     :name="fullscreen ? 'exit_fullscreen' : 'fullscreen'"
     :title="fullscreen ? 'Exit Fullscreen' : 'Fullscreen'"
-    @click.stop="fullscreen = !fullscreen"
+    @activate="fullscreen = !fullscreen"
   />
 </template>

app/gui/src/project-view/components/FullscreenButton.vue

@@ -6,7 +6,9 @@ import { injectProjectNames } from '@/stores/projectNames'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
 import { documentationData } from '@/stores/suggestionDatabase/documentation'
 import { colorFromString } from '@/util/colors'
+import { Ok } from '@/util/data/result'
 import { type MethodPointer } from '@/util/methodPointer'
+import { useFocusWithin } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { FunctionDef } from 'ydoc-shared/ast'
 import type * as Y from 'yjs'
@@ -49,13 +51,13 @@ const treeRootInput = computed((): WidgetInput => {
 })
 
 const rootElement = ref<HTMLElement>()
+const { focused } = useFocusWithin(rootElement)
 
 const graph = useGraphStore()
 
 function handleWidgetUpdates(update: WidgetUpdate) {
   applyWidgetUpdates(update, graph)
-  // This handler is guaranteed to be the last handler in the chain.
-  return true
+  return Ok()
 }
 
 const groupBasedColor = computed(() => {
@@ -84,8 +86,14 @@ const primaryApplication = emptyPrimaryApplication()
 </script>
 
 <template>
-  <div ref="rootElement" :style="rootStyle" class="FunctionSignatureEditor define-node-colors">
+  <div
+    ref="rootElement"
+    :style="rootStyle"
+    class="FunctionSignatureEditor define-node-colors"
+    :class="{ selected: focused }"
+  >
     <WidgetTreeRoot
+      :selected="focused"
       :externalId="functionAst.externalId"
       :input="treeRootInput"
       :primaryApplication="primaryApplication"