fix: bypass the interaction from monaco instance when using multiple …

…components in the same page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yaje",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "author": "legends-killer <yyy@legends-killer.cq.cn>",
   "description": "yet another json editor",
   "keywords": [

src/JsonEditor/index.tsx

@@ -2,7 +2,7 @@
  * @Author: legends-killer
  * @Date: 2023-12-27 18:47:08
  * @LastEditors: legends-killer
- * @LastEditTime: 2023-12-28 23:43:39
+ * @LastEditTime: 2024-01-15 21:19:23
  * @Description:
  */
 import { Editor, EditorProps, useMonaco } from '@monaco-editor/react'
@@ -11,6 +11,7 @@ import { refItemProvider } from './provider/refItemProvider'
 import { ISuggestionItem, JsonSchemaProcessor } from './helper/jsonSchemaProcessor'
 import { languages as Languages, IDisposable } from 'monaco-editor'
 import { IProviderParam } from './provider/types'
+import { filterRepeateSuggestions } from '../utils'
 
 export interface IJsonEditor extends Partial<EditorProps> {
   /**
@@ -72,17 +73,19 @@ export const JsonEditor = forwardRef((props: IJsonEditor, ref: any) => {
 
   // init prompt
   useEffect(() => {
-    if (promptJsonSchema) {
+    if (promptJsonSchema && !(window as any).__YAJE_INIT__) {
       const jsonSchemaProcessor = new JsonSchemaProcessor(promptJsonSchema)
       const suggestions = jsonSchemaProcessor.getSuggestions()
-      setFinalKeySuggestions(suggestions.keySuggestions.concat(keySuggesions))
-      setFinalValueSuggestions(suggestions.valueSuggestions.concat(valueSuggestions))
+      setFinalKeySuggestions(filterRepeateSuggestions(suggestions.keySuggestions.concat(keySuggesions)))
+      setFinalValueSuggestions(filterRepeateSuggestions(suggestions.valueSuggestions.concat(valueSuggestions)))
     }
+    // use this to bypass multiple monaco instance interation
+    // FIXME this is a hack, related issue: https://github.com/microsoft/monaco-editor/issues/3378
+    (window as any).__YAJE_INIT__ = true
   }, [keySuggesions, promptJsonSchema, valueSuggestions])
 
   // init monaco
   useEffect(() => {
-    console.log(finalKeySuggestions, finalValueSuggestions)
     if (monaco) {
       monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
         validate: true,

src/JsonEditor/provider/refItemProvider.ts

@@ -2,7 +2,7 @@
  * @Author: legends-killer
  * @Date: 2023-12-27 19:43:15
  * @LastEditors: legends-killer
- * @LastEditTime: 2023-12-28 17:00:14
+ * @LastEditTime: 2024-01-15 21:19:34
  * @Description:
  */
 import { languages as Languages } from 'monaco-editor'
@@ -19,14 +19,12 @@ export const refItemProvider = (param: IProviderParam): Languages.CompletionItem
       const currentLine = model.getLineContent(position.lineNumber)
       const currentEditorValue = model.getValue()
       const currentCursorType = getCurrentCursorType(currentEditorValue, position)
-      console.log('currentCursorType', currentCursorType)
       const jsonSuggestions = currentCursorType === JSON_FIELD_TYPE.KEY ? jsonKeySuggestions : jsonValueSuggestions
 
       const suggestions = jsonSuggestions.map((jsonSuggestion) => {
         monaco.editor.registerCommand(
           `accept.completeItem.suggestion-${jsonSuggestion.title}`,
           (_accessor: any, ...args: any[]) => {
-            console.log('accept.completeItem.suggestion', args)
             if (onSuggestionItemSelect) onSuggestionItemSelect(jsonSuggestion)
           }
         )

src/utils.ts

@@ -0,0 +1,15 @@
+/*
+ * @Author: legends-killer
+ * @Date: 2024-01-15 21:02:24
+ * @LastEditors: legends-killer
+ * @LastEditTime: 2024-01-15 21:02:56
+ * @Description: 
+ */
+import { ISuggestionItem } from "./JsonEditor/helper/jsonSchemaProcessor";
+export const filterRepeateSuggestions = (suggestions: ISuggestionItem[]) => {
+  const suggestionsMap = new Map<string, ISuggestionItem>()
+  suggestions.forEach((suggestion) => {
+    suggestionsMap.set(suggestion.title, suggestion)
+  })
+  return Array.from(suggestionsMap.values())
+}