Use Lexical for method docs and node comments (#9956)

Use a Lexical-based markdown editor in the right dock; use a Lexical-based plain text editor for node comments.

app/gui2/package.json

@@ -45,14 +45,15 @@
     "@babel/parser": "^7.22.16",
     "@fast-check/vitest": "^0.0.8",
     "@floating-ui/vue": "^1.0.6",
+    "@lexical/code": "^0.15.0",
+    "@lexical/link": "^0.15.0",
+    "@lexical/list": "^0.15.0",
+    "@lexical/markdown": "^0.15.0",
+    "@lexical/plain-text": "^0.15.0",
+    "@lexical/rich-text": "^0.15.0",
+    "@lexical/table": "^0.15.0",
     "@lezer/common": "^1.1.0",
     "@lezer/highlight": "^1.1.6",
-    "@milkdown/core": "^7.3.6",
-    "@milkdown/ctx": "^7.3.6",
-    "@milkdown/preset-commonmark": "^7.3.6",
-    "@milkdown/prose": "^7.3.6",
-    "@milkdown/theme-nord": "^7.3.6",
-    "@milkdown/vue": "^7.3.6",
     "@noble/hashes": "^1.3.2",
     "@open-rpc/client-js": "^1.8.1",
     "@pinia/testing": "^0.1.3",
@@ -67,6 +68,7 @@
     "hash-sum": "^2.0.0",
     "install": "^0.13.0",
     "isomorphic-ws": "^5.0.0",
+    "lexical": "^0.15.0",
     "lib0": "^0.2.85",
     "magic-string": "^0.30.3",
     "murmurhash": "^2.0.1",

app/gui2/src/components/GraphEditor.vue

@@ -6,7 +6,6 @@ import {
   interactionBindings,
   undoBindings,
 } from '@/bindings'
-import AstDocumentation from '@/components/AstDocumentation.vue'
 import CodeEditor from '@/components/CodeEditor.vue'
 import ComponentBrowser from '@/components/ComponentBrowser.vue'
 import { type Usage } from '@/components/ComponentBrowser/input'
@@ -19,11 +18,13 @@ import type { NodeCreationOptions } from '@/components/GraphEditor/nodeCreation'
 import { useGraphEditorToasts } from '@/components/GraphEditor/toasts'
 import { Uploader, uploadedExpression } from '@/components/GraphEditor/upload'
 import GraphMouse from '@/components/GraphMouse.vue'
+import MarkdownEditor from '@/components/MarkdownEditor.vue'
 import PlusButton from '@/components/PlusButton.vue'
 import ResizeHandles from '@/components/ResizeHandles.vue'
 import SceneScroller from '@/components/SceneScroller.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
 import TopBar from '@/components/TopBar.vue'
+import { useAstDocumentation } from '@/composables/astDocumentation'
 import { useDoubleClick } from '@/composables/doubleClick'
 import {
   keyboardBusy,
@@ -316,6 +317,8 @@ const cssRightDockWidth = computed(() =>
   rightDockWidth.value != null ? `${rightDockWidth.value}px` : 'var(--right-dock-default-width)',
 )
 
+const { documentation } = useAstDocumentation(() => graphStore.methodAst)
+
 // === Execution Mode ===
 
 /** Handle record-once button presses. */
@@ -595,7 +598,7 @@ const groupColors = computed(() => {
         data-testid="rightDock"
       >
         <div class="scrollArea">
-          <AstDocumentation :ast="graphStore.methodAst" />
+          <MarkdownEditor v-model="documentation" />
         </div>
         <SvgIcon
           name="close"

app/gui2/src/components/GraphEditor/GraphNodeComment.vue

@@ -1,17 +1,31 @@
 <script setup lang="ts">
-import AstDocumentation from '@/components/AstDocumentation.vue'
+import PlainTextEditor from '@/components/PlainTextEditor.vue'
+import { useAstDocumentation } from '@/composables/astDocumentation'
+import { useFocusDelayed } from '@/composables/focus'
 import { type Node } from '@/stores/graph'
+import { syncRef } from '@vueuse/core'
+import { computed, ref, type ComponentInstance } from 'vue'
 
 const editing = defineModel<boolean>('editing', { required: true })
 const props = defineProps<{ node: Node }>()
+
+const textEditor = ref<ComponentInstance<typeof PlainTextEditor>>()
+
+const { documentation: astDocumentation } = useAstDocumentation(() => props.node.outerExpr)
+const documentation = computed({
+  // This returns the same value as the `astDocumentation` getter, but with fewer reactive dependencies.
+  get: () => props.node.documentation ?? '',
+  set: (value) => (astDocumentation.value = value),
+})
+
+syncRef(editing, useFocusDelayed(textEditor).focused)
 </script>
 <template>
   <div v-if="editing || props.node.documentation?.trimStart()" class="GraphNodeComment">
-    <AstDocumentation
-      v-model:editing="editing"
-      :ast="props.node.outerExpr"
-      :documentation="props.node.documentation ?? ''"
-      preferSingleLine
+    <PlainTextEditor
+      ref="textEditor"
+      v-model="documentation"
+      @keydown.enter.capture.stop="editing = false"
     />
   </div>
 </template>

app/gui2/src/components/MarkdownEditor.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+
+const text = defineModel<string>({ required: true })
+
+const LazyMarkdownEditor = defineAsyncComponent(
+  () => import('@/components/lexical/MarkdownEditorImpl.vue'),
+)
+</script>
+
+<template>
+  <Suspense>
+    <LazyMarkdownEditor v-model="text" />
+  </Suspense>
+</template>

app/gui2/src/components/PlainTextEditor.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useLexical, type LexicalPlugin } from '@/components/lexical'
+import LexicalContent from '@/components/lexical/LexicalContent.vue'
+import { useLexicalSync } from '@/components/lexical/sync'
+import { registerPlainText } from '@lexical/plain-text'
+import { syncRef } from '@vueuse/core'
+import { ref, type ComponentInstance } from 'vue'
+
+const text = defineModel<string>({ required: true })
+
+const contentElement = ref<ComponentInstance<typeof LexicalContent>>()
+
+const plainText: LexicalPlugin = {
+  register: registerPlainText,
+}
+
+const textSync: LexicalPlugin = {
+  register: (editor) => {
+    const { content } = useLexicalSync(editor)
+    content.value = text.value
+    syncRef(text, content, { immediate: false })
+  },
+}
+
+useLexical(contentElement, 'PlainTextEditor', [plainText, textSync])
+</script>
+
+<template>
+  <LexicalContent ref="contentElement" />
+</template>