From 80a7d4fbf8c0633c16cf31341563e8dfb3202fa3 Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Fri, 7 Mar 2025 16:46:28 +0100
Subject: [PATCH] Literals and operators in Component Browser (#12420)

Fixes #12372


https://github.com/user-attachments/assets/69b08aaf-71ca-4598-83ad-de4895d04dcd
---
 CHANGELOG.md                                  |  4 +
 .../components/ComponentBrowser.vue           | 57 +++++++-------
 .../ComponentBrowser/ComponentList.vue        | 35 +++++++--
 .../ComponentBrowser/__tests__/input.test.ts  | 74 +++++++++++++++++++
 .../components/ComponentBrowser/component.ts  |  4 +-
 .../components/ComponentBrowser/input.ts      | 30 ++++++--
 .../util/ast/__tests__/abstract.test.ts       | 14 ++++
 app/rust-ffi/src/lib.rs                       | 46 +++++++++++-
 app/ydoc-server-polyglot/src/ffiPolyglot.ts   |  1 +
 app/ydoc-server-polyglot/src/polyglot.d.ts    |  1 +
 app/ydoc-shared/src/ast/ffi.ts                | 12 ++-
 app/ydoc-shared/src/ast/token.ts              | 15 +++-
 app/ydoc-shared/src/ast/tree.ts               | 16 +++-
 13 files changed, 259 insertions(+), 50 deletions(-)
 create mode 100644 app/gui/src/project-view/components/ComponentBrowser/__tests__/input.test.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 117ea0ce0d14..5d6c499722d9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,6 +34,9 @@
 - ["Insert link" button added to documentation panel][12365]
 - [Cloud File Browser, when opened first time after opening project, shows and
   highlights the currently set file][12184]
+- [It's easier to write numeric/text nodes in Component Browser][12420]. When
+  typing digits only, any names containing digits are not the best match
+  anymore. Also unclosed text literals will be automatically closed.
 
 [11889]: https://github.com/enso-org/enso/pull/11889
 [11836]: https://github.com/enso-org/enso/pull/11836
@@ -56,6 +59,7 @@
 [12386]: https://github.com/enso-org/enso/pull/12386
 [12365]: https://github.com/enso-org/enso/pull/12365
 [12184]: https://github.com/enso-org/enso/pull/12184
+[12420]: https://github.com/enso-org/enso/pull/12420
 
 #### Enso Standard Library
 
diff --git a/app/gui/src/project-view/components/ComponentBrowser.vue b/app/gui/src/project-view/components/ComponentBrowser.vue
index f65f09d5a6ae..3f736ebe6fb1 100644
--- a/app/gui/src/project-view/components/ComponentBrowser.vue
+++ b/app/gui/src/project-view/components/ComponentBrowser.vue
@@ -3,7 +3,6 @@ import { componentBrowserBindings, listBindings } from '@/bindings'
 import { type Component } from '@/components/ComponentBrowser/component'
 import ComponentEditor from '@/components/ComponentBrowser/ComponentEditor.vue'
 import ComponentList from '@/components/ComponentBrowser/ComponentList.vue'
-import { Filtering } from '@/components/ComponentBrowser/filtering'
 import { useComponentBrowserInput, type Usage } from '@/components/ComponentBrowser/input'
 import GraphVisualization from '@/components/GraphEditor/GraphVisualization.vue'
 import SvgButton from '@/components/SvgButton.vue'
@@ -15,7 +14,6 @@ import { injectNodeColors } from '@/providers/graphNodeColors'
 import { injectInteractionHandler, type Interaction } from '@/providers/interactionHandler'
 import { useGraphStore } from '@/stores/graph'
 import type { RequiredImport } from '@/stores/graph/imports'
-import { useProjectStore } from '@/stores/project'
 import { injectProjectNames } from '@/stores/projectNames'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
 import { type Typename } from '@/stores/suggestionDatabase/entry'
@@ -29,6 +27,8 @@ import { debouncedGetter } from '@/util/reactivity'
 import type { ComponentInstance } from 'vue'
 import { computed, onMounted, onUnmounted, ref, toValue, watch, watchEffect } from 'vue'
 import type { SuggestionId } from 'ydoc-shared/languageServerTypes/suggestions'
+import { Range } from 'ydoc-shared/util/data/range'
+import { Ok } from 'ydoc-shared/util/data/result'
 import type { VisualizationIdentifier } from 'ydoc-shared/yjsModel'
 
 // Difference in position between the component browser and a node for the input of the component browser to
@@ -47,7 +47,6 @@ const EDGE_Y_OFFSET = -8
 
 const cssComponentEditorPadding = `${COMPONENT_EDITOR_PADDING}px`
 
-const projectStore = useProjectStore()
 const suggestionDbStore = useSuggestionDbStore()
 const graphStore = useGraphStore()
 const interaction = injectInteractionHandler()
@@ -177,15 +176,6 @@ const selectedSuggestion = computed(() => {
 
 const input = useComponentBrowserInput()
 
-const currentFiltering = computed(() => {
-  if (input.mode.mode === 'componentBrowsing') {
-    const currentModule = projectStore.moduleProjectPath
-    return new Filtering(input.mode.filter, currentModule?.ok ? currentModule.value : undefined)
-  } else {
-    return undefined
-  }
-})
-
 onUnmounted(() => {
   graphStore.cbEditedEdge = undefined
 })
@@ -285,19 +275,26 @@ watch(
 
 // === Accepting Entry ===
 
-function acceptSuggestion(component: Opt<Component> = null) {
-  const suggestionId = component?.suggestionId ?? selectedSuggestionId.value
-  if (suggestionId == null) return acceptInput()
-  const result = input.applySuggestion(suggestionId)
-  if (result.ok) acceptInput()
-  else result.error.log('Cannot apply suggestion')
+function applyComponent(component: Opt<Component> = null) {
+  component ??= selected.value
+  if (component == null) {
+    input.switchToCodeEditMode()
+    return Ok()
+  }
+  if (component.suggestionId != null) {
+    return input.applySuggestion(component.suggestionId)
+  } else {
+    // Component without suggestion database entry, for example "literal" component.
+    input.content = { text: component.label, selection: Range.emptyAt(component.label.length) }
+    input.switchToCodeEditMode()
+    return Ok()
+  }
 }
 
-function applySuggestion(component: Opt<Component> = null) {
-  const suggestionId = component?.suggestionId ?? selectedSuggestionId.value
-  if (suggestionId == null) return input.switchToCodeEditMode()
-  const result = input.applySuggestion(suggestionId)
-  if (!result.ok) result.error.log('Cannot apply suggestion')
+function acceptComponent(component: Opt<Component> = null) {
+  const result = applyComponent(component)
+  if (result.ok) acceptInput()
+  else result.error.log('Cannot apply suggestion')
 }
 
 function acceptInput() {
@@ -314,11 +311,14 @@ function acceptInput() {
 const outsideComponentBrowsing = computed(() => input.mode.mode != 'componentBrowsing')
 const actions = registerHandlers({
   'componentBrowser.editSuggestion': {
-    action: applySuggestion,
+    action: () => {
+      const result = applyComponent()
+      if (!result.ok) result.error.log('Cannot apply component')
+    },
     disabled: outsideComponentBrowsing,
   },
   'componentBrowser.acceptSuggestion': {
-    action: acceptSuggestion,
+    action: acceptComponent,
     disabled: outsideComponentBrowsing,
   },
   'componentBrowser.acceptInputAsCode': {
@@ -427,10 +427,11 @@ const listsHandler = listBindings.handler({
       />
     </div>
     <ComponentList
-      v-if="input.mode.mode === 'componentBrowsing' && currentFiltering"
+      v-if="input.mode.mode === 'componentBrowsing'"
       ref="componentList"
-      :filtering="currentFiltering"
-      @acceptSuggestion="acceptSuggestion($event)"
+      :filter="input.mode.filter"
+      :literal="input.mode.literal"
+      @acceptSuggestion="acceptComponent($event)"
       @update:selectedComponent="selected = $event"
     />
   </div>
diff --git a/app/gui/src/project-view/components/ComponentBrowser/ComponentList.vue b/app/gui/src/project-view/components/ComponentBrowser/ComponentList.vue
index 8364f845b2bb..807e65e50c4b 100644
--- a/app/gui/src/project-view/components/ComponentBrowser/ComponentList.vue
+++ b/app/gui/src/project-view/components/ComponentBrowser/ComponentList.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import { makeComponentList, type Component } from '@/components/ComponentBrowser/component'
+import { makeComponentLists, type Component } from '@/components/ComponentBrowser/component'
 import ComponentEntry from '@/components/ComponentBrowser/ComponentEntry.vue'
-import type { Filtering } from '@/components/ComponentBrowser/filtering'
+import { Filter, Filtering } from '@/components/ComponentBrowser/filtering'
 import SvgIcon from '@/components/SvgIcon.vue'
 import VirtualizedList from '@/components/VirtualizedList.vue'
 import { groupColorStyle } from '@/composables/nodeColors'
+import { useProjectStore } from '@/stores/project'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
+import { Ast } from '@/util/ast'
 import { tryGetIndex } from '@/util/data/array'
-import { computed, ref, toRef, watch } from 'vue'
+import * as map from 'lib0/map'
+import { computed, ref, watch } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
 const ITEM_SIZE = 24
@@ -15,13 +18,15 @@ const SCROLL_TO_SELECTION_MARGIN = ITEM_SIZE / 2
 const MOUSE_SELECTION_DEBOUNCE = 200
 
 const props = defineProps<{
-  filtering: Filtering
+  filter: Filter
+  literal?: Ast.Ast | undefined
 }>()
 const emit = defineEmits<{
   acceptSuggestion: [suggestion: Component]
   'update:selectedComponent': [selected: Component | null]
 }>()
 
+const projectStore = useProjectStore()
 const root = ref<HTMLElement>()
 const groupsPanel = ref<ComponentExposed<typeof VirtualizedList>>()
 const componentsPanel = ref<ComponentExposed<typeof VirtualizedList>>()
@@ -42,18 +47,34 @@ const displayedSelectedComponentIndex = computed({
   },
 })
 
-watch(toRef(props, 'filtering'), () => (displayedSelectedComponentIndex.value = 0))
+const filtering = computed(() => {
+  const currentModule = projectStore.moduleProjectPath
+  return new Filtering(props.filter, currentModule?.ok ? currentModule.value : undefined)
+})
+
+watch(filtering, () => (displayedSelectedComponentIndex.value = 0))
 watch(selectedGroupIndex, () => (selectedComponentIndex.value = 0))
 
 const suggestionDbStore = useSuggestionDbStore()
-const components = computed(() => makeComponentList(suggestionDbStore.entries, props.filtering))
+const components = computed(() => {
+  const lists = makeComponentLists(suggestionDbStore.entries, filtering.value)
+  if (props.literal != null) {
+    map
+      .setIfUndefined(lists, 'all', (): Component[] => [])
+      .unshift({
+        label: props.literal.code(),
+        icon: props.literal instanceof Ast.TextLiteral ? 'text_input' : 'input_number',
+      })
+  }
+  return lists
+})
 const currentGroups = computed(() => {
   return Array.from(components.value.entries(), ([id, components]) => ({
     id,
     ...(id === 'all' ? { name: 'all' }
     : id === 'suggestions' ? { name: 'suggestions' }
     : (suggestionDbStore.groups[id] ?? { name: 'unknown' })),
-    ...(props.filtering.pattern != null ? { displayedNumber: components.length } : {}),
+    ...(filtering.value?.pattern != null ? { displayedNumber: components.length } : {}),
   }))
 })
 const displayedGroupId = computed(() =>
diff --git a/app/gui/src/project-view/components/ComponentBrowser/__tests__/input.test.ts b/app/gui/src/project-view/components/ComponentBrowser/__tests__/input.test.ts
new file mode 100644
index 000000000000..267eb2eff856
--- /dev/null
+++ b/app/gui/src/project-view/components/ComponentBrowser/__tests__/input.test.ts
@@ -0,0 +1,74 @@
+import { useComponentBrowserInput } from '@/components/ComponentBrowser/input'
+import { GraphDb, NodeId } from '@/stores/graph/graphDatabase'
+import { ComputedValueRegistry } from '@/stores/project/computedValueRegistry'
+import { SuggestionDb } from '@/stores/suggestionDatabase'
+import { unwrap } from '@/util/data/result'
+import { parseAbsoluteProjectPathRaw } from '@/util/projectPath'
+import { expect, test } from 'vitest'
+import { parseExpression } from 'ydoc-shared/ast'
+import { assert, assertUnreachable } from 'ydoc-shared/util/assert'
+import { Range } from 'ydoc-shared/util/data/range'
+
+const aiMock = { query: assertUnreachable }
+const operator1Id = '3d0e9b96-3ca0-4c35-a820-7d3a1649de55' as NodeId
+const operator2Id = '5eb16101-dd2b-4034-a6e2-476e8bfa1f2b' as NodeId
+
+function mockGraphDb() {
+  const computedValueRegistryMock = ComputedValueRegistry.Mock()
+  computedValueRegistryMock.db.set(operator1Id, {
+    typename: unwrap(parseAbsoluteProjectPathRaw('Standard.Base.Number')),
+    rawTypename: 'Standard.Base.Number',
+    methodCall: undefined,
+    payload: { type: 'Value' },
+    profilingInfo: [],
+  })
+  const db = GraphDb.Mock(computedValueRegistryMock)
+  db.mockNode('operator1', operator1Id, 'Data.read')
+  db.mockNode('operator2', operator2Id)
+  return db
+}
+
+test.each`
+  inputContent   | expectedLiteral
+  ${'read'}      | ${undefined}
+  ${'operator1'} | ${undefined}
+  ${'12 + 14'}   | ${undefined}
+  ${'12'}        | ${'12'}
+  ${'12.6'}      | ${'12.6'}
+  ${'-12'}       | ${'-12'}
+  ${'-12.6'}     | ${'-12.6'}
+  ${'- 12.6'}    | ${undefined /* in Enso this is partial OprApp, not negation */}
+  ${'"text"'}    | ${'"text"'}
+  ${"'text'"}    | ${"'text'"}
+  ${"'text"}     | ${"'text'"}
+  ${"'''text"}   | ${"'''text"}
+`('Reading literal from $inputContent', ({ inputContent, expectedLiteral }) => {
+  console.log(parseExpression(inputContent))
+  const input = useComponentBrowserInput(mockGraphDb(), new SuggestionDb(), aiMock)
+  input.reset({ type: 'newNode' })
+  input.content = { text: inputContent, selection: Range.empty }
+  assert(input.mode.mode === 'componentBrowsing')
+  expect(input.mode.literal?.code()).toBe(expectedLiteral)
+})
+
+test.each`
+  inputContent     | source         | expectedCode
+  ${'read'}        | ${'operator1'} | ${'operator1.read'}
+  ${'read'}        | ${'operator2'} | ${'operator2.read'}
+  ${'read "file"'} | ${'operator2'} | ${'operator2.read "file"'}
+  ${'+ 2'}         | ${'operator1'} | ${'operator1 + 2'}
+  ${'+ 3'}         | ${'operator2'} | ${'operator2 + 3'}
+  ${'+2'}          | ${'operator1'} | ${'operator1+2'}
+  ${'-2'}          | ${'operator1'} | ${'operator1-2'}
+`(
+  'Code generated by CB from $inputContent with source node $sourceNode',
+  ({ inputContent, source, expectedCode }) => {
+    const db = mockGraphDb()
+    const input = useComponentBrowserInput(db, new SuggestionDb(), aiMock)
+    const sourcePort = db.getNodeFirstOutputPort(db.getIdentDefiningNode(source))
+    assert(sourcePort != null)
+    input.reset({ type: 'newNode', sourcePort })
+    input.content = { text: inputContent, selection: Range.empty }
+    expect(input.code).toBe(expectedCode)
+  },
+)
diff --git a/app/gui/src/project-view/components/ComponentBrowser/component.ts b/app/gui/src/project-view/components/ComponentBrowser/component.ts
index f33d89784515..cd7b8e5ee139 100644
--- a/app/gui/src/project-view/components/ComponentBrowser/component.ts
+++ b/app/gui/src/project-view/components/ComponentBrowser/component.ts
@@ -28,7 +28,7 @@ interface ComponentLabel {
 
 /** A model of component suggestion displayed in the Component Browser. */
 export interface Component extends ComponentLabel {
-  suggestionId: SuggestionId
+  suggestionId?: SuggestionId
   icon: Icon
   group?: number | undefined
 }
@@ -112,7 +112,7 @@ export function makeComponent({ id, entry, match }: ComponentInfo): Component {
 }
 
 /** Create {@link Component} list for each displayed group from filtered suggestions. */
-export function makeComponentList(
+export function makeComponentLists(
   db: SuggestionDb,
   filtering: Filtering,
 ): Map<GroupId, Component[]> {
diff --git a/app/gui/src/project-view/components/ComponentBrowser/input.ts b/app/gui/src/project-view/components/ComponentBrowser/input.ts
index 01bb0237d60f..e79bb108eda2 100644
--- a/app/gui/src/project-view/components/ComponentBrowser/input.ts
+++ b/app/gui/src/project-view/components/ComponentBrowser/input.ts
@@ -9,7 +9,8 @@ import {
   type SuggestionEntry,
   type SuggestionId,
 } from '@/stores/suggestionDatabase/entry'
-import { isIdentifier, type AstId, type Identifier } from '@/util/ast/abstract'
+import { Ast } from '@/util/ast'
+import { selfArgSeparator } from '@/util/ast/abstract'
 import { Err, Ok, type Result } from '@/util/data/result'
 import { type ProjectPath } from '@/util/projectPath'
 import { qnJoin, qnLastSegment } from '@/util/qualifiedName'
@@ -19,7 +20,7 @@ import { Range } from 'ydoc-shared/util/data/range'
 
 /** Information how the component browser is used, needed for proper input initializing. */
 export type Usage =
-  | { type: 'newNode'; sourcePort?: AstId | undefined }
+  | { type: 'newNode'; sourcePort?: Ast.AstId | undefined }
   | { type: 'editNode'; node: NodeId; cursorPos: number }
 
 /**
@@ -32,6 +33,7 @@ export type ComponentBrowserMode =
   | {
       mode: 'componentBrowsing'
       filter: Filter
+      literal?: Ast.TextLiteral | Ast.NumericLiteral | Ast.NegationApp | undefined
     }
   | {
       mode: 'codeEditing'
@@ -55,7 +57,7 @@ export function useComponentBrowserInput(
   const imports = shallowRef<RequiredImport[]>([])
   const processingAIPrompt = ref(false)
   const toastError = useToast.error()
-  const sourceNodeIdentifier = ref<Identifier>()
+  const sourceNodeIdentifier = ref<Ast.Identifier>()
   const switchedToCodeMode = ref<{ appliedSuggestion?: SuggestionEntry }>()
 
   // Text Model to being edited externally (by user).
@@ -110,12 +112,20 @@ export function useComponentBrowserInput(
         : {}),
       }
     } else {
+      let literal: Ast.MutableTextLiteral | Ast.NumericLiteral | Ast.NegationApp | undefined =
+        Ast.TextLiteral.tryParse(text.value)
+      if (literal == null) {
+        literal = Ast.NumericLiteral.tryParseWithSign(text.value)
+      } else {
+        literal.fixBoundaries()
+      }
       return {
         mode: 'componentBrowsing',
         filter: {
           pattern: text.value,
           ...(sourceNodeType.value != null ? { selfArg: sourceNodeType.value } : {}),
         },
+        literal,
       }
     }
   })
@@ -172,7 +182,7 @@ export function useComponentBrowserInput(
             qnJoin(
               owner.path ? qnLastSegment(owner.path)
               : owner.project ? qnLastSegment(owner.project)
-              : ('Main' as Identifier),
+              : ('Main' as Ast.Identifier),
               entry.name,
             )
           : entry.name) + ' ',
@@ -192,7 +202,9 @@ export function useComponentBrowserInput(
       const alreadyAdded = finalImports.some((existing) => requiredImportEquals(existing, anImport))
       const importedIdent =
         anImport.kind == 'Qualified' ?
-          qnLastSegment(anImport.module.path ?? anImport.module.project ?? ('Main' as Identifier))
+          qnLastSegment(
+            anImport.module.path ?? anImport.module.project ?? ('Main' as Ast.Identifier),
+          )
         : anImport.import
       const noLongerNeeded = !text.value.includes(importedIdent)
       if (!noLongerNeeded && !alreadyAdded) {
@@ -207,7 +219,7 @@ export function useComponentBrowserInput(
       case 'newNode':
         if (usage.sourcePort) {
           const ident = graphDb.getOutputPortIdentifier(usage.sourcePort)
-          sourceNodeIdentifier.value = ident != null && isIdentifier(ident) ? ident : undefined
+          sourceNodeIdentifier.value = ident != null && Ast.isIdentifier(ident) ? ident : undefined
         } else {
           sourceNodeIdentifier.value = undefined
         }
@@ -234,7 +246,7 @@ export function useComponentBrowserInput(
     const matchedCode = sourceNodeMatch?.[2]
     if (
       matchedSource != null &&
-      isIdentifier(matchedSource) &&
+      Ast.isIdentifier(matchedSource) &&
       matchedCode != null &&
       graphDb.getIdentDefiningNode(matchedSource)
     )
@@ -271,7 +283,9 @@ export function useComponentBrowserInput(
   }
 
   function applySourceNode(text: string) {
-    return sourceNodeIdentifier.value ? `${sourceNodeIdentifier.value}.${text}` : text
+    return sourceNodeIdentifier.value ?
+        `${sourceNodeIdentifier.value}${selfArgSeparator(text)}${text}`
+      : text
   }
 
   return proxyRefs({
diff --git a/app/gui/src/project-view/util/ast/__tests__/abstract.test.ts b/app/gui/src/project-view/util/ast/__tests__/abstract.test.ts
index 165f4d497834..177d805aae11 100644
--- a/app/gui/src/project-view/util/ast/__tests__/abstract.test.ts
+++ b/app/gui/src/project-view/util/ast/__tests__/abstract.test.ts
@@ -1092,6 +1092,20 @@ test('setRawTextContent promotes single-line uninterpolated text to interpolated
   expect(literal.code()).toBe(`'${escapeTextLiteral(rawText)}'`)
 })
 
+test.each`
+  text               | fixed
+  ${"'abc'"}         | ${"'abc'"}
+  ${'"abc"'}         | ${'"abc"'}
+  ${"'''abc\n  cde"} | ${"'''abc\n  cde"}
+  ${"'abc"}          | ${"'abc'"}
+  ${'"abc'}          | ${'"abc"'}
+`('Fixing boundaries in $text', ({ text, fixed }) => {
+  const literal = Ast.TextLiteral.tryParse(text)
+  assert(literal != null)
+  literal.fixBoundaries()
+  expect(literal.code()).toBe(fixed)
+})
+
 test.each([
   { code: 'operator1', expected: { subject: 'operator1', accesses: [] } },
   { code: 'operator1 foo bar', expected: { subject: 'operator1 foo bar', accesses: [] } },
diff --git a/app/rust-ffi/src/lib.rs b/app/rust-ffi/src/lib.rs
index 58cb3dd2558b..990c0b1e2e66 100644
--- a/app/rust-ffi/src/lib.rs
+++ b/app/rust-ffi/src/lib.rs
@@ -43,6 +43,31 @@ pub fn is_ident_or_operator(code: &str) -> u32 {
     }
 }
 
+/// What should separate this expression from self argument applied to it.
+///
+/// See `selfArgSeparator` docs in app/ydoc-shared/src/ast/token.ts
+///
+/// Returns:
+/// * -1 - if `self` should be joined with dot.
+/// * non-negative integer - if `self` should be joined with returned number of spaces.
+#[wasm_bindgen]
+pub fn self_arg_separator(code: &str) -> i32 {
+    let parsed = enso_parser::lexer::run(code);
+    if parsed.internal_error.is_some() {
+        return 0;
+    }
+    let (token, right_spacing) = match &parsed.value[..] {
+        [token, next_token, ..] => (token, next_token.left_offset.visible.width_in_spaces),
+        [token] => (token, 1),
+        [] => return -1,
+    };
+    match token.variant {
+        enso_parser::syntax::token::Variant::Operator(_) => right_spacing as i32,
+        _ => -1,
+    }
+}
+
+
 #[wasm_bindgen]
 pub fn is_numeric_literal(code: &str) -> bool {
     let parsed = PARSER.with(|parser| parser.parse_block(code));
@@ -74,7 +99,7 @@ mod tests {
     use super::*;
 
     #[test]
-    fn test_is_ident_or_operator() {
+    fn test_is_numeric_literal() {
         assert!(is_numeric_literal("1234"));
         assert!(is_numeric_literal("-1234"));
         assert!(!is_numeric_literal(""));
@@ -83,4 +108,23 @@ mod tests {
         assert!(!is_numeric_literal("1234!"));
         assert!(!is_numeric_literal("1234e5"));
     }
+
+    #[test]
+    fn test_checking_ident_or_operator() {
+        assert_eq!(is_ident_or_operator("abc"), 1);
+        assert_eq!(is_ident_or_operator("Abc"), 1);
+        assert_eq!(is_ident_or_operator("abc 14"), 0);
+        assert_eq!(is_ident_or_operator("+"), 2);
+        assert_eq!(is_ident_or_operator("+ 2"), 0);
+        assert_eq!(is_ident_or_operator("[]"), 0);
+
+        assert_eq!(self_arg_separator("abc"), -1);
+        assert_eq!(self_arg_separator("abc 14"), -1);
+        assert_eq!(self_arg_separator("+"), 1);
+        assert_eq!(self_arg_separator("+ 2"), 1);
+        assert_eq!(self_arg_separator("+2"), 0);
+        assert_eq!(self_arg_separator("- 2"), 1);
+        assert_eq!(self_arg_separator("-2"), 0);
+        assert_eq!(self_arg_separator("[]"), -1);
+    }
 }
diff --git a/app/ydoc-server-polyglot/src/ffiPolyglot.ts b/app/ydoc-server-polyglot/src/ffiPolyglot.ts
index 531518beada9..1b4be3a04705 100644
--- a/app/ydoc-server-polyglot/src/ffiPolyglot.ts
+++ b/app/ydoc-server-polyglot/src/ffiPolyglot.ts
@@ -7,6 +7,7 @@
 
 export const {
   is_ident_or_operator,
+  self_arg_separator,
   is_numeric_literal,
   parse_doc_to_json,
   parse_block,
diff --git a/app/ydoc-server-polyglot/src/polyglot.d.ts b/app/ydoc-server-polyglot/src/polyglot.d.ts
index 69baf887d7ad..a5bfd480c0f8 100644
--- a/app/ydoc-server-polyglot/src/polyglot.d.ts
+++ b/app/ydoc-server-polyglot/src/polyglot.d.ts
@@ -15,5 +15,6 @@ declare function parse_block(code: string): Uint8Array
 declare function parse_module(code: string): Uint8Array
 declare function parse_doc_to_json(docs: string): string
 declare function is_ident_or_operator(code: string): number
+declare function self_arg_separator(code: string): number
 declare function is_numeric_literal(code: string): boolean
 declare function xxHash128(input: IDataType): string
diff --git a/app/ydoc-shared/src/ast/ffi.ts b/app/ydoc-shared/src/ast/ffi.ts
index b4e07e70c84a..1271aecb9e3b 100644
--- a/app/ydoc-shared/src/ast/ffi.ts
+++ b/app/ydoc-shared/src/ast/ffi.ts
@@ -11,6 +11,7 @@ import {
   parse_block,
   parse_doc_to_json,
   parse_module,
+  self_arg_separator,
 } from 'rust-ffi'
 
 const xxHasher128 = await createXXHash128()
@@ -21,5 +22,12 @@ export function xxHash128(input: IDataType) {
   return xxHasher128.digest()
 }
 
-/* eslint-disable-next-line camelcase */
-export { is_ident_or_operator, is_numeric_literal, parse_block, parse_doc_to_json, parse_module }
+/* eslint-disable camelcase */
+export {
+  is_ident_or_operator,
+  is_numeric_literal,
+  parse_block,
+  parse_doc_to_json,
+  parse_module,
+  self_arg_separator,
+}
diff --git a/app/ydoc-shared/src/ast/token.ts b/app/ydoc-shared/src/ast/token.ts
index 6220b7403e6c..9cf0f1c85c97 100644
--- a/app/ydoc-shared/src/ast/token.ts
+++ b/app/ydoc-shared/src/ast/token.ts
@@ -1,7 +1,7 @@
 import { assert } from '../util/assert'
 import type { ExternalId } from '../yjsModel'
 import { isUuid } from '../yjsModel'
-import { is_ident_or_operator } from './ffi'
+import { is_ident_or_operator, self_arg_separator } from './ffi'
 import * as RawAst from './generated/ast'
 import { newExternalId } from './idMap'
 import type { AstId, DeepReadonly, NodeChild, Owned } from './tree'
@@ -135,6 +135,19 @@ export function isIdentifier(code: string): code is Identifier {
   return is_ident_or_operator(code) === 1
 }
 
+/**
+ * What should separate this expression from self argument applied to it.
+ *
+ * The main case is IDE's Component Browser input: how exactly prefix an expression written by user
+ * with `self` argument. Usually we just put identifier with `.`, but in case of operators,
+ * a proper spacing should be put instead.
+ */
+export function selfArgSeparator(code: string): string {
+  const ffiResult = self_arg_separator(code)
+  if (ffiResult < 0) return '.'
+  else return ' '.repeat(ffiResult)
+}
+
 /**
  * Whether the given code is a type or constructor identifier.
  * This is true if the code is an identifier beginning with an uppercase letter.
diff --git a/app/ydoc-shared/src/ast/tree.ts b/app/ydoc-shared/src/ast/tree.ts
index 8710ba0d08e7..348539470d4a 100644
--- a/app/ydoc-shared/src/ast/tree.ts
+++ b/app/ydoc-shared/src/ast/tree.ts
@@ -1890,7 +1890,21 @@ export class MutableTextLiteral extends TextLiteral implements MutableExpression
 
   setBoundaries(code: string) {
     this.fields.set('open', unspaced(Token.new(code)))
-    this.fields.set('close', unspaced(Token.new(code)))
+    if (code.length > 1) {
+      this.fields.set('close', undefined)
+    } else {
+      this.fields.set('close', unspaced(Token.new(code)))
+    }
+  }
+
+  fixBoundaries() {
+    const open = this.open
+    const close = this.close
+    if (open != null && close == null && open.code().length === 1) {
+      this.fields.set('close', unspaced(Token.new(open.code())))
+    } else if (open == null && close != null) {
+      this.fields.set('open', unspaced(Token.new(close.code())))
+    }
   }
 
   setElements(elements: TextElement<OwnedRefs>[]) {