delegate editor events fix

Author: riccardoperra

src/core/custom/code-block/suggestion/code-block-suggestion-command.ts

@@ -20,19 +20,33 @@ import type { SuggestedChangeConfig } from '../../../../editor/utils/loadCodeSug
 
 export function defineCodeBlockSuggestionCommand() {
   return defineCommands({
-    insertCodeBlockSuggestion: (attrs: {
+    insertCodeBlockSuggestion: (options: {
       suggestChange: SuggestedChangeConfig
     }) => {
-      const lang = detectLanguageFromFilename(attrs.suggestChange.filePath!)
-      return insertNode({
-        type: 'codeBlock',
-        attrs: {
-          code: attrs.suggestChange.sourceContentFromDiffLines || '',
-          lang: lang || '',
-          isSuggestion: true,
-          suggestedChangeConfig: attrs.suggestChange,
-        },
-      })
+      const lang = detectLanguageFromFilename(options.suggestChange.filePath!)
+      return (state, dispatch, view) => {
+        const node = state.schema.nodes.codeBlock.create(
+          {
+            code: options.suggestChange.sourceContentFromDiffLines || '',
+            lang: lang || '',
+            isSuggestion: true,
+            suggestChangeConfig: options.suggestChange,
+          },
+          state.schema.text(
+            options.suggestChange.sourceContentFromDiffLines || '',
+          ),
+        )
+
+        return insertNode({
+          node,
+          attrs: {
+            code: options.suggestChange.sourceContentFromDiffLines || '',
+            lang: lang || '',
+            isSuggestion: true,
+            suggestedChangeConfig: options.suggestChange,
+          },
+        })(state, dispatch, view)
+      }
     },
   })
 }

src/core/editor/toolbar/toolbar.tsx

@@ -388,7 +388,7 @@ export function Toolbar() {
           </TooltipTrigger>
           <TooltipContent>Issues & Feedback</TooltipContent>
         </Tooltip>
-        <Popover placement={'bottom-end'}>
+        <Popover placement={'bottom-end'} modal={true}>
           <PopoverTrigger class={styles.ToolbarAction}>
             <LucideCog size={16} />
           </PopoverTrigger>

src/editor/editor.css

@@ -11,6 +11,7 @@
     -webkit-font-variant-ligatures: none;
     font-variant-ligatures: none;
     font-feature-settings: 'liga' 0;
+    caret-color: initial !important;
   }
 
   .ProseMirror pre {

src/editor/utils/eventDelegation.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2025 Riccardo Perra
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { delegateEvents } from 'solid-js/web'
+
+export function delegateEditorEvents(root: HTMLElement) {
+  const delegatedEvents = [
+    'beforeinput',
+    'click',
+    // 'dblclick',
+    // 'contextmenu',
+    'focusin',
+    'focusout',
+    'input',
+    'keydown',
+    'keyup',
+    // 'mousedown',
+    // 'mousemove',
+    // 'mouseout',
+    // 'mouseover',
+    // 'mouseup',
+    // 'pointerdown',
+    // 'pointermove',
+    // 'pointerout',
+    // 'pointerover',
+    // 'pointerup',
+    // 'touchend',
+    // 'touchmove',
+    // 'touchstart',
+  ]
+  delegateEvents(delegatedEvents, root as unknown as Document)
+  delegatedEvents.forEach((event) => {
+    root.addEventListener(event, (event) => {
+      event.stopPropagation()
+      event.stopImmediatePropagation()
+    })
+  })
+}

src/render.tsx

@@ -22,6 +22,7 @@ import { ConfettiExplosion } from 'solid-confetti-explosion'
 import { Editor, EditorRootContext } from './editor/editor'
 import { OcticonCaution } from './core/custom/githubAlert/icons'
 import { ConfigStore } from './config.store'
+import { delegateEditorEvents } from './editor/utils/eventDelegation'
 import type { EditorType } from './editor/editor'
 import type { Accessor } from 'solid-js'
 import type { GitHubUploaderHandler } from './core/custom/image/github-file-uploader'
@@ -138,6 +139,8 @@ export function EditorErrorBoundary(props: EditorErrorBoundaryProps) {
 }
 
 export function mountEditor(root: HTMLElement, props: RenderEditorProps) {
+  delegateEditorEvents(root)
+
   return render(() => {
     return (
       <StateProvider>