Merge pull request #2904 from serlo/prevent-opening-plugin-suggestion…

…s-in-unwanted-places-alt fix(editor): another approach to prevent opening plugin suggestions in unwanted places
serlo · Sep 20, 2023 · d63b3f8 · d63b3f8
2 parents 6e7ff18 + 1a2571d
commit d63b3f8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/serlo-editor/plugins/text/components/text-editor.tsx b/src/serlo-editor/plugins/text/components/text-editor.tsx
@@ -58,8 +58,13 @@ export function TextEditor(props: TextEditorProps) {
       editorKey: v4(),
     }
   }, [createTextEditor])
-
-  const suggestions = useSuggestions({ editor, id, editable, focused })
+  const suggestions = useSuggestions({
+    editor,
+    id,
+    editable,
+    focused,
+    isInlineChildEditor: config.isInlineChildEditor,
+  })
   const { showSuggestions, suggestionsProps } = suggestions
 
   const { handleRenderElement, handleRenderLeaf } = useSlateRenderHandlers({

diff --git a/src/serlo-editor/plugins/text/hooks/use-suggestions.tsx b/src/serlo-editor/plugins/text/hooks/use-suggestions.tsx
@@ -23,6 +23,7 @@ interface useSuggestionsArgs {
   id: string
   editable: boolean
   focused: boolean
+  isInlineChildEditor?: boolean
 }
 
 export interface SuggestionOption {
@@ -38,10 +39,11 @@ const hotkeyConfig = {
 }
 
 export const useSuggestions = (args: useSuggestionsArgs) => {
+  const { editor, id, editable, focused, isInlineChildEditor } = args
+
   const dispatch = useAppDispatch()
   const [selected, setSelected] = useState(0)
   const suggestionsRef = useRef<HTMLDivElement>(null)
-  const { editor, id, editable, focused } = args
   const pluginsStrings = useEditorStrings().plugins
 
   const { selection } = editor
@@ -66,7 +68,11 @@ export const useSuggestions = (args: useSuggestionsArgs) => {
     return filterPlugins(allOptions, text, id)
   }, [allOptions, id, text])
   const showSuggestions =
-    editable && focused && text.startsWith('/') && filteredOptions.length > 0
+    !isInlineChildEditor &&
+    editable &&
+    focused &&
+    text.startsWith('/') &&
+    filteredOptions.length > 0
 
   const { enableScope, disableScope } = useHotkeysContext()