Enable any component on autocomplete list (#114)

* Update TAutocompleteItem content property type * Add insertSpaceAfter property for autocomplete strategies * Update autocomplete example * Update README * Update package version * Fix force unwrap
niuware · May 4, 2020 · 9708996 · 9708996
1 parent c51f884
commit 9708996
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -363,7 +363,8 @@ Object.assign(defaultTheme, {
 |Property|Type||description|
 |---|---|---|---|
 |triggerChar|`string`|required|A single character that triggers the autocomplete strategy.|
-|items|`TAutocompleteItem[]`|required|List of autocomplete suggestion items.|   
+|items|`TAutocompleteItem[]`|required|List of autocomplete suggestion items.| 
+|insertSpaceAfter|`boolean`|optional|If `false` it won't add an space after inserting the content into the editor. Default is `true`.|   
 
 <br />
 
@@ -373,7 +374,7 @@ Object.assign(defaultTheme, {
 |---|---|---|---|
 |keys|`string[]`|required|The list of keys that the user needs to type to reveal this item suggestion.|
 |value|`string`|required|The value to insert into the editor when the item is selected.|
-|content|`string`|required|The content presented in the autocomplete suggestion list for this item.|   
+|content|`string | JSX.Element`|required|The content presented in the autocomplete suggestion list for this item. Note that this content is render under a `ListItem` component.|   
 
 <br />
 

diff --git a/examples/autocomplete/index.tsx b/examples/autocomplete/index.tsx
@@ -1,11 +1,34 @@
-import React from 'react'
+import React, { FunctionComponent } from 'react'
+import { ListItemAvatar, Avatar, ListItemText } from '@material-ui/core'
 import MUIRichTextEditor from '../../'
 import { TAutocompleteItem } from '../../src/components/Autocomplete'
 
 const save = (data: string) => {
     console.log(data)
 }
 
+type TStaff = {
+    job: string
+    name: string
+    color: string
+}
+
+const Staff: FunctionComponent<TStaff> = (props) => {
+    return (
+        <>
+            <ListItemAvatar>
+                <Avatar style={{
+                    backgroundColor: props.color
+                }}>{props.name.substr(0, 1)}</Avatar>
+            </ListItemAvatar>
+            <ListItemText
+                primary={props.name}
+                secondary={props.job}
+            />
+        </>
+    )
+}
+
 const emojis: TAutocompleteItem[] = [
     {
         keys: ["face", "grin"],
@@ -62,6 +85,24 @@ const cities: TAutocompleteItem[] = [
     }
 ]
 
+const staff = [
+    {
+        keys: ["all", "foo", "manager"],
+        value: "Foo Bar",
+        content: <Staff name="Foo Bar" job="Manager" color="tomato" />,
+    },
+    {
+        keys: ["all", "bar", "support"],
+        value: "Bar Foo",
+        content: <Staff name="Bar Foo" job="Technical Support" color="orange" />,
+    },
+    {
+        keys: ["all", "mui", "manager"],
+        value: "Mui Rte",
+        content: <Staff name="Mui Rte" job="Manager" color="dodgerblue" />,
+    }
+]
+
 const Autocomplete = () => {
     return (
         <MUIRichTextEditor 
@@ -76,6 +117,11 @@ const Autocomplete = () => {
                     {
                         items: cities,
                         triggerChar: "/"
+                    },
+                    {
+                        items: staff,
+                        triggerChar: "@",
+                        insertSpaceAfter: false
                     }
                 ]
             }}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-rte",
-  "version": "1.17.1",
+  "version": "1.17.2",
   "description": "Material-UI Rich Text Editor and Viewer",
   "keywords": [
     "material-ui",

diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
@@ -94,6 +94,7 @@ type TKeyCommand = {
 export type TAutocompleteStrategy = {
     triggerChar: string
     items: TAutocompleteItem[]
+    insertSpaceAfter?: boolean
 }
 
 export type TAutocomplete = {
@@ -392,10 +393,14 @@ const MUIRichTextEditor: RefForwardingComponent<any, IMUIRichTextEditorProps> =
                                                         editorStateRef.current!.getCurrentInlineStyle(),
                                                         entityKey)
             const newEditorState = EditorState.push(editorStateRef.current!, contentState, "insert-characters")
-            const addSpaceState = Modifier.insertText(newEditorState.getCurrentContent(),
-                                                 newEditorState.getSelection(), " ",
-                                                 newEditorState.getCurrentInlineStyle())
-            handleChange(EditorState.push(newEditorState, addSpaceState, "insert-characters"))
+            if (currentAutocompleteRef.current!.insertSpaceAfter === false) {
+                handleChange(newEditorState)
+            } else {
+                const addSpaceState = Modifier.insertText(newEditorState.getCurrentContent(),
+                                                    newEditorState.getSelection(), " ",
+                                                    newEditorState.getCurrentInlineStyle())
+                handleChange(EditorState.push(newEditorState, addSpaceState, "insert-characters"))
+            }
         }
         handleAutocompleteClosed()
     }
@@ -837,7 +842,8 @@ const MUIRichTextEditor: RefForwardingComponent<any, IMUIRichTextEditorProps> =
         const text = editorStateRef.current!.getCurrentContent().getLastBlock().getText()
 
         if (keyBinding === "backspace"
-            && text.substr(text.length - 1) === currentAutocompleteRef.current!.triggerChar) {
+            && currentAutocompleteRef.current 
+            && text.substr(text.length - 1) === currentAutocompleteRef.current.triggerChar) {
             clearSearch()
         } else if (autocompletePosition.current 
             && keyBinding === "backspace"

diff --git a/src/components/Autocomplete.tsx b/src/components/Autocomplete.tsx
@@ -7,7 +7,7 @@ import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'
 export type TAutocompleteItem = {
     keys: string[]
     value: string
-    content: string
+    content: string | JSX.Element
 }
 
 interface TAutocompleteProps extends WithStyles<typeof styles> {