From 62af4cb0537f5b71c476ff67087c35c16b956726 Mon Sep 17 00:00:00 2001 From: Ian Storm Taylor Date: Tue, 3 Dec 2019 14:40:42 -0500 Subject: [PATCH] upgrade mentions example to use a portal with suggestions, closes #3206 (#3214) --- site/examples/mentions.js | 1009 ++++++++++++++++++++----------------- 1 file changed, 539 insertions(+), 470 deletions(-) diff --git a/site/examples/mentions.js b/site/examples/mentions.js index 3e757445e..3cbe7089e 100644 --- a/site/examples/mentions.js +++ b/site/examples/mentions.js @@ -1,47 +1,139 @@ -import React, { useMemo } from 'react' -import { Editor, createEditor } from 'slate' +import React, { useMemo, useCallback, useRef, useEffect, useState } from 'react' +import { Editor, Range, createEditor } from 'slate' import { withHistory } from 'slate-history' import { Slate, Editable, + ReactEditor, withReact, - useSlate, useSelected, useFocused, } from 'slate-react' -import { Button, Icon, Toolbar } from '../components' - -const promptMention = editor => { - const name = window.prompt('Who would you like to mention?') - if (!name) return - const regex = new RegExp(`^${name}`, 'i') - const match = Object.entries(USERS).find(([, name]) => regex.test(name)) - const id = match ? match[0] : 57 - editor.exec({ type: 'insert_mention', id }) -} +import { Portal } from '../components' const MentionExample = () => { + const ref = useRef() + const [target, setTarget] = useState() + const [index, setIndex] = useState(0) + const [search, setSearch] = useState('') + const renderElement = useCallback(props => , []) const editor = useMemo( () => withMentions(withReact(withHistory(createEditor()))), [] ) - return ( - - - - - } - placeholder="Enter some text..." - onKeyDown={event => { - if (event.key === '@') { + const chars = CHARACTERS.filter(c => + c.toLowerCase().startsWith(search) + ).slice(0, 10) + const suggest = target && chars.length > 0 + + const onKeyDown = useCallback( + event => { + if (target) { + switch (event.key) { + case 'ArrowDown': event.preventDefault() - promptMention(editor) + const prevIndex = index >= chars.length - 1 ? 0 : index + 1 + setIndex(prevIndex) + break + case 'ArrowUp': + event.preventDefault() + const nextIndex = index <= 0 ? chars.length - 1 : index - 1 + setIndex(nextIndex) + break + case 'Tab': + case 'Enter': + event.preventDefault() + Editor.select(editor, target) + editor.exec({ type: 'insert_mention', character: chars[index] }) + setTarget(null) + break + case 'Escape': + event.preventDefault() + setTarget(null) + break + } + } + }, + [index, search, target] + ) + + useEffect(() => { + if (suggest) { + const el = ref.current + const domRange = ReactEditor.toDOMRange(editor, target) + const rect = domRange.getBoundingClientRect() + el.style.top = `${rect.top + window.pageYOffset + 24}px` + el.style.left = `${rect.left + window.pageXOffset}px` + } + }, [index, search, target]) + + return ( + { + const { selection } = editor + + if (selection && Range.isCollapsed(selection)) { + const [start] = Range.edges(selection) + const wordBefore = Editor.before(editor, start, { unit: 'word' }) + const before = Editor.before(editor, wordBefore) + const beforeRange = Editor.range(editor, before, start) + const beforeText = Editor.text(editor, beforeRange) + const beforeMatch = beforeText.match(/^@(\w+)$/) + const after = Editor.after(editor, start) + const afterRange = Editor.range(editor, start, after) + const afterText = Editor.text(editor, afterRange) + const afterMatch = afterText.match(/^(\s|$)/) + + if (beforeMatch && afterMatch) { + setTarget(beforeRange) + setSearch(beforeMatch[1]) + setIndex(0) + return } - }} + } + + setTarget(null) + }} + > + + {suggest && ( + +
+ {chars.map((char, i) => ( +
+ {char} +
+ ))} +
+ + )} ) } @@ -59,13 +151,14 @@ const withMentions = editor => { editor.exec = command => { if (command.type === 'insert_mention') { - const { id } = command const mention = { type: 'mention', - id, + character: command.character, children: [{ text: '', marks: [] }], } + Editor.insertNodes(editor, mention) + Editor.move(editor) } else { exec(command) } @@ -74,14 +167,8 @@ const withMentions = editor => { return editor } -const isMentionActive = editor => { - const [mention] = Editor.nodes(editor, { match: { type: 'mention' } }) - return !!mention -} - const Element = props => { const { attributes, children, element } = props - switch (element.type) { case 'mention': return @@ -108,37 +195,31 @@ const MentionElement = ({ attributes, children, element }) => { boxShadow: selected && focused ? '0 0 0 2px #B4D5FF' : 'none', }} > - @{USERS[element.id]} + @{element.character} {children} ) } -const MentionButton = () => { - const editor = useSlate() - return ( - - ) -} - const initialValue = [ { children: [ { - text: 'Try mentioning some people, like ', + text: + 'This example shows how you might implement a simple @-mentions feature that lets users autocomplete mentioning a user by their username. Which, in this case means Star Wars characters. The mentions are rendered as void inline elements inside the document.', + marks: [], + }, + ], + }, + { + children: [ + { + text: 'Try mentioning characters, like ', marks: [], }, { type: 'mention', - id: 324, + character: 'R2-D2', children: [{ text: '', marks: [] }], }, { @@ -147,433 +228,421 @@ const initialValue = [ }, { type: 'mention', - id: 253, + character: 'Mace Windu', children: [{ text: '', marks: [] }], }, { - text: '.', + text: '!', marks: [], }, ], }, ] -const USERS = { - 1: '2-1B', - 2: '4-LOM', - 3: '8D8', - 4: '99', - 5: '0-0-0', - 6: "A'Koba", - 7: 'Admiral Gial Ackbar', - 8: 'Sim Aloo', - 9: 'Almec', - 10: 'Mas Amedda', - 11: 'Amee', - 12: 'Padmé Amidala', - 13: 'Cassian Andor', - 14: 'Fodesinbeed Annodue', - 15: 'Raymus Antilles', - 16: 'Wedge Antilles', - 17: 'AP-5', - 18: 'Queen Apailana', - 19: 'Doctor Aphra', - 20: 'Faro Argyus', - 21: 'Aiolin and Morit Astarte', - 22: 'Ello Asty', - 23: 'AZI-3', - 24: 'Walrus Man', - 25: 'Kitster Banai', - 26: 'Cad Bane', - 27: 'Darth Bane', - 28: 'Barada', - 29: 'Jom Barell', - 30: 'Moradmin Bast', - 31: 'BB-8', - 32: 'BB-9E', - 33: 'Tobias Beckett', - 34: 'Val Beckett', - 35: 'The Bendu', - 36: 'Shara Bey', - 37: 'Sio Bibble', - 38: 'Depa Billaba', - 39: 'Jar Jar Binks', - 40: 'Temiri Blagg', - 41: 'Commander Bly', - 42: 'Bobbajo', - 43: 'Dud Bolt', - 44: 'Mister Bones', - 45: 'Lux Bonteri', - 46: 'Mina Bonteri', - 47: 'Borvo the Hutt', - 48: 'Bossk', - 49: 'Ezra Bridger', - 50: 'BT-1', - 51: 'Sora Bulq', - 52: 'C1-10P', - 53: 'C-3PO', - 54: 'Lando Calrissian', - 55: 'Moden Canady', - 56: 'Ransolm Casterfo', - 57: 'Chewbacca', - 58: 'Chief Chirpa', - 59: 'Rush Clovis', - 60: 'Commander Cody (CC-2224)', - 61: 'Lieutenant Kaydel Ko Connix', - 62: 'Jeremoch Colton', - 63: 'Cordé', - 64: 'Salacious B. Crumb', - 65: 'Arvel Crynyd', - 66: 'Dr. Cylo', - 67: "Larma D'Acy", - 68: "Figrin D'an", - 69: 'Kes Dameron', - 70: 'Poe Dameron', - 71: 'Vober Dand', - 72: 'Joclad Danva', - 73: 'Dapp', - 74: 'Biggs Darklighter', - 75: 'Oro Dassyne', - 76: 'Gizor Dellso', - 77: 'Dengar', - 78: 'Bren Derlin', - 79: 'Ima-Gun Di', - 80: 'Rinnriyin Di', - 81: 'DJ', - 82: 'Lott Dod', - 83: 'Jan Dodonna', - 84: 'Daultay Dofine', - 85: 'Dogma', - 86: 'Darth Tyranus', - 87: 'Dormé', - 88: 'Cin Drallig', - 89: 'Garven Dreis', - 90: 'Droidbait', - 91: 'Rio Durant', - 92: 'Lok Durd', - 93: 'Eirtaé', - 94: 'Dineé Ellberger', - 95: 'Ellé', - 96: 'Caluan Ematt', - 97: 'Embo', - 98: "Emperor's Royal Guard", - 99: 'Jas Emari', - 100: 'Ebe E. Endocott', - 101: 'Galen Erso', - 102: 'Jyn Erso', - 103: 'Lyra Erso', - 104: 'EV-9D9', - 105: 'Moralo Eval', - 106: 'Doctor Evazan', - 107: 'Onaconda Farr', - 108: 'Boba Fett', - 109: 'Jango Fett', - 110: 'Feral', - 111: 'Commander Fil (CC-3714)', - 112: 'Finn', - 113: 'Kit Fisto', - 114: 'Fives', - 115: 'FN-1824', - 116: 'FN-2003', - 117: 'Nines', - 118: 'Bib Fortuna', - 119: 'Commander Fox', - 120: 'FX-7', - 121: 'GA-97', - 122: 'Adi Gallia', - 123: 'Gardulla the Hutt', - 124: "Yarna d'al' Gargan", - 125: 'Gonk droid', - 126: 'Commander Gree', - 127: 'Greedo', - 128: 'Janus Greejatus', - 129: 'Captain Gregor', - 130: 'Grievous', - 131: 'Grummgar', - 132: 'Gungi', - 133: 'Nute Gunray', - 134: 'Mars Guo', - 135: 'Rune Haako', - 136: 'Rako Hardeen', - 137: 'Gideon Hask', - 138: 'Hevy', - 139: 'San Hill', - 140: 'Clegg Holdfast', - 141: 'Vice Admiral Amilyn Holdo', - 142: 'Tey How', - 143: 'Huyang', - 144: 'Armitage Hux', - 145: 'Brendol Hux', - 146: 'IG-88', - 147: 'Chirrut Îmwe', - 148: 'Inquisitors', - 149: 'Grand Inquisitor', - 150: 'Fifth Brother', - 151: 'Sixth Brother', - 152: 'Seventh Sister', - 153: 'Eighth Brother', - 154: 'Sidon Ithano', - 155: 'Jabba', - 156: 'Queen Jamillia', - 157: 'Wes Janson', - 158: 'Kanan Jarrus', - 159: 'Jaxxon', - 160: 'Greeata Jendowanian', - 161: 'Tiaan Jerjerrod', - 162: 'Commander Jet', - 163: 'Dexter Jettster', - 164: 'Qui-Gon Jinn', - 165: 'Jira', - 166: 'Jubnuk', - 167: 'K-2SO', - 168: 'Tee Watt Kaa', - 169: 'Agent Kallus', - 170: 'Harter Kalonia', - 171: 'Maz Kanata', - 172: 'Colonel Kaplan', - 173: 'Karbin', - 174: 'Karina the Great', - 175: 'Alton Kastle', - 176: 'King Katuunko', - 177: 'Coleman Kcaj', - 178: 'Obi-Wan Kenobi', - 179: 'Ki-Adi-Mundi', - 180: 'Klaatu', - 181: 'Klik-Klak', - 182: 'Derek Klivian', - 183: 'Agen Kolar', - 184: 'Plo Koon', - 185: 'Eeth Koth', - 186: 'Sergeant Kreel', - 187: 'Pong Krell', - 188: 'Black Krrsantan', - 189: 'Bo-Katan Kryze', - 190: 'Satine Kryze', - 191: 'Conder Kyl', - 192: 'Thane Kyrell', - 193: 'L3-37', - 194: "L'ulo", - 195: 'Beru Lars', - 196: 'Cliegg Lars', - 197: 'Owen Lars', - 198: 'Cut Lawquane', - 199: 'Tasu Leech', - 200: 'Xamuel Lennox', - 201: 'Tallissan Lintra', - 202: 'Slowen Lo', - 203: 'Lobot', - 204: 'Logray', - 205: 'Lumat', - 206: 'Crix Madine', - 207: 'Shu Mai', - 208: 'Malakili', - 209: 'Baze Malbus', - 210: 'Mama the Hutt', - 211: 'Ody Mandrell', - 212: 'Darth Maul', - 213: 'Saelt-Marae', - 214: 'Mawhonic', - 215: 'Droopy McCool', - 216: 'Pharl McQuarrie', - 217: 'ME-8D9', - 218: 'Lyn Me', - 219: 'Tion Medon', - 220: 'Del Meeko', - 221: 'Aks Moe', - 222: 'Sly Moore', - 223: 'Morley', - 224: 'Delian Mors', - 225: 'Mon Mothma', - 226: 'Conan Antonio Motti', - 227: 'Jobal Naberrie', - 228: 'Pooja Naberrie', - 229: 'Ruwee Naberrie', - 230: 'Ryoo Naberrie', - 231: 'Sola Naberrie', - 232: 'Hammerhead', - 233: 'Boss Nass', - 234: 'Lorth Needa', - 235: 'Queen Neeyutnee', - 236: 'Enfys Nest', - 237: 'Bazine Netal', - 238: 'Niima the Hutt', - 239: 'Jocasta Nu', - 240: 'Po Nudo', - 241: 'Nien Nunb', - 242: 'Has Obbit', - 243: 'Barriss Offee', - 244: 'Hondo Ohnaka', - 245: 'Ric Olié', - 246: 'Omi', - 247: 'Ketsu Onyo', - 248: 'Oola', - 249: 'OOM-9', - 250: 'Savage Opress', - 251: 'Senator Organa', - 252: 'Breha Antilles-Organa', - 253: 'Leia Organa', - 254: 'Garazeb "Zeb" Orrelios', - 255: 'Orrimarko', - 256: 'Admiral Ozzel', - 257: 'Odd Ball', - 258: 'Pablo-Jill', - 259: 'Teemto Pagalies', - 260: 'Captain Quarsh Panaka', - 261: 'Casca Panzoro', - 262: 'Reeve Panzoro', - 263: 'Baron Papanoida', - 264: 'Che Amanwe Papanoida', - 265: 'Chi Eekway Papanoida', - 266: 'Paploo', - 267: 'Captain Phasma', - 268: 'Even Piell', - 269: 'Admiral Firmus Piett', - 270: 'Sarco Plank', - 271: 'Unkar Plutt', - 272: 'Poggle the Lesser', - 273: 'Yarael Poof', - 274: 'Jek Tono Porkins', - 275: 'Nahdonnis Praji', - 276: 'PZ-4CO', - 277: 'Ben Quadinaros', - 278: "Qi'ra", - 279: 'Quarrie', - 280: 'Quiggold', - 281: 'Artoo', - 282: 'R2-KT', - 283: 'R3-S6', - 284: 'R4-P17', - 285: 'R5-D4', - 286: 'RA-7', - 287: 'Rabé', - 288: 'Admiral Raddus', - 289: 'Dak Ralter', - 290: 'Oppo Rancisis', - 291: 'Admiral Dodd Rancit', - 292: 'Rappertunie', - 293: 'Siniir Rath Velus', - 294: 'Gallius Rax', - 295: 'Eneb Ray', - 296: 'Max Rebo', - 297: 'Ciena Ree', - 298: 'Ree-Yees', - 299: 'Kylo Ren', - 300: 'Captain Rex', - 301: 'Rey', - 302: 'Carlist Rieekan', - 303: 'Riley', - 304: 'Rogue Squadron', - 305: 'Romba', - 306: 'Bodhi Rook', - 307: 'Pagetti Rook', - 308: 'Rotta the Hutt', - 309: 'Rukh', - 310: 'Sabé', - 311: 'Saché', - 312: 'Sarkli', - 313: 'Admiral U.O. Statura', - 314: 'Joph Seastriker', - 315: 'Miraj Scintel', - 316: 'Admiral Terrinald Screed', - 317: 'Sebulba', - 318: 'Aayla Secura', - 319: 'Korr Sella', - 320: 'Zev Senesca', - 321: 'Echuu Shen-Jon', - 322: 'Sifo-Dyas', - 323: 'Aurra Sing', - 324: 'Luke Skywalker', - 325: 'Shmi Skywalker', - 326: 'The Smuggler', - 327: 'Snaggletooth', - 328: 'Snoke', - 329: 'Sy Snootles', - 330: 'Osi Sobeck', - 331: 'Han Solo', - 332: 'Greer Sonnel', - 333: 'Sana Starros', - 334: 'Lama Su', - 335: 'Mercurial Swift', - 336: 'Gavyn Sykes', - 337: 'Cham Syndulla', - 338: 'Hera Syndulla', - 339: 'Jacen Syndulla', - 340: 'Orn Free Taa', - 341: 'Cassio Tagge', - 342: 'Mother Talzin', - 343: 'Wat Tambor', - 344: 'Riff Tamson', - 345: 'Fulcrum', - 346: 'Tarfful', - 347: 'Jova Tarkin', - 348: 'Wilhuff Tarkin', - 349: 'Roos Tarpals', - 350: 'TC-14', - 351: 'Berch Teller', - 352: 'Teebo', - 353: 'Teedo', - 354: 'Mod Terrik', - 355: 'Tessek', - 356: 'Lor San Tekka', - 357: 'Petty Officer Thanisson', - 358: 'Inspector Thanoth', - 359: 'Lieutenant Thire', - 360: 'Thrawn', - 361: "C'ai Threnalli", - 362: 'Shaak Ti', - 363: 'Paige Tico', - 364: 'Rose Tico', - 365: 'Saesee Tiin', - 366: 'Bala-Tik', - 367: 'Meena Tills', - 368: 'Quay Tolsite', - 369: 'Bargwill Tomder', - 370: 'Wag Too', - 371: 'Coleman Trebor', - 372: 'Admiral Trench', - 373: 'Strono Tuggs', - 374: 'Tup', - 375: 'Letta Turmond', - 376: 'Longo Two-Guns', - 377: 'Cpatain Typho', - 378: 'Ratts Tyerell', - 379: 'U9-C4', - 380: 'Luminara Unduli', - 381: 'Finis Valorum', - 382: 'Eli Vanto', - 383: 'Nahdar Vebb', - 384: 'Maximilian Veers', - 385: 'Asajj Ventress', - 386: 'Evaan Verlaine', - 387: 'Garrick Versio', - 388: 'Iden Versio', - 389: 'Lanever Villecham', - 390: 'Nuvo Vindi', - 391: 'Tulon Voidgazer', - 392: 'Dryden Vos', - 393: 'Quinlan Vos', - 394: 'WAC-47', - 395: 'Wald', - 396: 'Warok', - 397: 'Wicket W. Warrick', - 398: 'Watto', - 399: 'Taun We', - 400: 'Zam Wesell', - 401: 'Norra Wexley', - 402: 'Snap Wexley', - 403: 'Vanden Willard', - 404: 'Mace Windu', - 405: 'Commander Wolffe', - 406: 'Wollivan', - 407: 'Sabine Wren', - 408: 'Wuher', - 409: 'Yaddle', - 410: 'Yoda', - 411: 'Joh Yowza', - 412: 'Wullf Yularen', - 413: 'Ziro the Hutt', - 414: 'Zuckuss', - 415: 'Constable Zuvio', -} +const CHARACTERS = [ + 'Aayla Secura', + 'Adi Gallia', + 'Admiral Dodd Rancit', + 'Admiral Firmus Piett', + 'Admiral Gial Ackbar', + 'Admiral Ozzel', + 'Admiral Raddus', + 'Admiral Terrinald Screed', + 'Admiral Trench', + 'Admiral U.O. Statura', + 'Agen Kolar', + 'Agent Kallus', + 'Aiolin and Morit Astarte', + 'Aks Moe', + 'Almec', + 'Alton Kastle', + 'Amee', + 'AP-5', + 'Armitage Hux', + 'Artoo', + 'Arvel Crynyd', + 'Asajj Ventress', + 'Aurra Sing', + 'AZI-3', + 'Bala-Tik', + 'Barada', + 'Bargwill Tomder', + 'Baron Papanoida', + 'Barriss Offee', + 'Baze Malbus', + 'Bazine Netal', + 'BB-8', + 'BB-9E', + 'Ben Quadinaros', + 'Berch Teller', + 'Beru Lars', + 'Bib Fortuna', + 'Biggs Darklighter', + 'Black Krrsantan', + 'Bo-Katan Kryze', + 'Boba Fett', + 'Bobbajo', + 'Bodhi Rook', + 'Borvo the Hutt', + 'Boss Nass', + 'Bossk', + 'Breha Antilles-Organa', + 'Bren Derlin', + 'Brendol Hux', + 'BT-1', + 'C-3PO', + 'C1-10P', + 'Cad Bane', + 'Caluan Ematt', + 'Captain Gregor', + 'Captain Phasma', + 'Captain Quarsh Panaka', + 'Captain Rex', + 'Carlist Rieekan', + 'Casca Panzoro', + 'Cassian Andor', + 'Cassio Tagge', + 'Cham Syndulla', + 'Che Amanwe Papanoida', + 'Chewbacca', + 'Chi Eekway Papanoida', + 'Chief Chirpa', + 'Chirrut Îmwe', + 'Ciena Ree', + 'Cin Drallig', + 'Clegg Holdfast', + 'Cliegg Lars', + 'Coleman Kcaj', + 'Coleman Trebor', + 'Colonel Kaplan', + 'Commander Bly', + 'Commander Cody (CC-2224)', + 'Commander Fil (CC-3714)', + 'Commander Fox', + 'Commander Gree', + 'Commander Jet', + 'Commander Wolffe', + 'Conan Antonio Motti', + 'Conder Kyl', + 'Constable Zuvio', + 'Cordé', + 'Cpatain Typho', + 'Crix Madine', + 'Cut Lawquane', + 'Dak Ralter', + 'Dapp', + 'Darth Bane', + 'Darth Maul', + 'Darth Tyranus', + 'Daultay Dofine', + 'Del Meeko', + 'Delian Mors', + 'Dengar', + 'Depa Billaba', + 'Derek Klivian', + 'Dexter Jettster', + 'Dineé Ellberger', + 'DJ', + 'Doctor Aphra', + 'Doctor Evazan', + 'Dogma', + 'Dormé', + 'Dr. Cylo', + 'Droidbait', + 'Droopy McCool', + 'Dryden Vos', + 'Dud Bolt', + 'Ebe E. Endocott', + 'Echuu Shen-Jon', + 'Eeth Koth', + 'Eighth Brother', + 'Eirtaé', + 'Eli Vanto', + 'Ellé', + 'Ello Asty', + 'Embo', + 'Eneb Ray', + 'Enfys Nest', + 'EV-9D9', + 'Evaan Verlaine', + 'Even Piell', + 'Ezra Bridger', + 'Faro Argyus', + 'Feral', + 'Fifth Brother', + 'Finis Valorum', + 'Finn', + 'Fives', + 'FN-1824', + 'FN-2003', + 'Fodesinbeed Annodue', + 'Fulcrum', + 'FX-7', + 'GA-97', + 'Galen Erso', + 'Gallius Rax', + 'Garazeb "Zeb" Orrelios', + 'Gardulla the Hutt', + 'Garrick Versio', + 'Garven Dreis', + 'Gavyn Sykes', + 'Gideon Hask', + 'Gizor Dellso', + 'Gonk droid', + 'Grand Inquisitor', + 'Greeata Jendowanian', + 'Greedo', + 'Greer Sonnel', + 'Grievous', + 'Grummgar', + 'Gungi', + 'Hammerhead', + 'Han Solo', + 'Harter Kalonia', + 'Has Obbit', + 'Hera Syndulla', + 'Hevy', + 'Hondo Ohnaka', + 'Huyang', + 'Iden Versio', + 'IG-88', + 'Ima-Gun Di', + 'Inquisitors', + 'Inspector Thanoth', + 'Jabba', + 'Jacen Syndulla', + 'Jan Dodonna', + 'Jango Fett', + 'Janus Greejatus', + 'Jar Jar Binks', + 'Jas Emari', + 'Jaxxon', + 'Jek Tono Porkins', + 'Jeremoch Colton', + 'Jira', + 'Jobal Naberrie', + 'Jocasta Nu', + 'Joclad Danva', + 'Joh Yowza', + 'Jom Barell', + 'Joph Seastriker', + 'Jova Tarkin', + 'Jubnuk', + 'Jyn Erso', + 'K-2SO', + 'Kanan Jarrus', + 'Karbin', + 'Karina the Great', + 'Kes Dameron', + 'Ketsu Onyo', + 'Ki-Adi-Mundi', + 'King Katuunko', + 'Kit Fisto', + 'Kitster Banai', + 'Klaatu', + 'Klik-Klak', + 'Korr Sella', + 'Kylo Ren', + 'L3-37', + 'Lama Su', + 'Lando Calrissian', + 'Lanever Villecham', + 'Leia Organa', + 'Letta Turmond', + 'Lieutenant Kaydel Ko Connix', + 'Lieutenant Thire', + 'Lobot', + 'Logray', + 'Lok Durd', + 'Longo Two-Guns', + 'Lor San Tekka', + 'Lorth Needa', + 'Lott Dod', + 'Luke Skywalker', + 'Lumat', + 'Luminara Unduli', + 'Lux Bonteri', + 'Lyn Me', + 'Lyra Erso', + 'Mace Windu', + 'Malakili', + 'Mama the Hutt', + 'Mars Guo', + 'Mas Amedda', + 'Mawhonic', + 'Max Rebo', + 'Maximilian Veers', + 'Maz Kanata', + 'ME-8D9', + 'Meena Tills', + 'Mercurial Swift', + 'Mina Bonteri', + 'Miraj Scintel', + 'Mister Bones', + 'Mod Terrik', + 'Moden Canady', + 'Mon Mothma', + 'Moradmin Bast', + 'Moralo Eval', + 'Morley', + 'Mother Talzin', + 'Nahdar Vebb', + 'Nahdonnis Praji', + 'Nien Nunb', + 'Niima the Hutt', + 'Nines', + 'Norra Wexley', + 'Nute Gunray', + 'Nuvo Vindi', + 'Obi-Wan Kenobi', + 'Odd Ball', + 'Ody Mandrell', + 'Omi', + 'Onaconda Farr', + 'Oola', + 'OOM-9', + 'Oppo Rancisis', + 'Orn Free Taa', + 'Oro Dassyne', + 'Orrimarko', + 'Osi Sobeck', + 'Owen Lars', + 'Pablo-Jill', + 'Padmé Amidala', + 'Pagetti Rook', + 'Paige Tico', + 'Paploo', + 'Petty Officer Thanisson', + 'Pharl McQuarrie', + 'Plo Koon', + 'Po Nudo', + 'Poe Dameron', + 'Poggle the Lesser', + 'Pong Krell', + 'Pooja Naberrie', + 'PZ-4CO', + 'Quarrie', + 'Quay Tolsite', + 'Queen Apailana', + 'Queen Jamillia', + 'Queen Neeyutnee', + 'Qui-Gon Jinn', + 'Quiggold', + 'Quinlan Vos', + 'R2-D2', + 'R2-KT', + 'R3-S6', + 'R4-P17', + 'R5-D4', + 'RA-7', + 'Rabé', + 'Rako Hardeen', + 'Ransolm Casterfo', + 'Rappertunie', + 'Ratts Tyerell', + 'Raymus Antilles', + 'Ree-Yees', + 'Reeve Panzoro', + 'Rey', + 'Ric Olié', + 'Riff Tamson', + 'Riley', + 'Rinnriyin Di', + 'Rio Durant', + 'Rogue Squadron', + 'Romba', + 'Roos Tarpals', + 'Rose Tico', + 'Rotta the Hutt', + 'Rukh', + 'Rune Haako', + 'Rush Clovis', + 'Ruwee Naberrie', + 'Ryoo Naberrie', + 'Sabé', + 'Sabine Wren', + 'Saché', + 'Saelt-Marae', + 'Saesee Tiin', + 'Salacious B. Crumb', + 'San Hill', + 'Sana Starros', + 'Sarco Plank', + 'Sarkli', + 'Satine Kryze', + 'Savage Opress', + 'Sebulba', + 'Senator Organa', + 'Sergeant Kreel', + 'Seventh Sister', + 'Shaak Ti', + 'Shara Bey', + 'Shmi Skywalker', + 'Shu Mai', + 'Sidon Ithano', + 'Sifo-Dyas', + 'Sim Aloo', + 'Siniir Rath Velus', + 'Sio Bibble', + 'Sixth Brother', + 'Slowen Lo', + 'Sly Moore', + 'Snaggletooth', + 'Snap Wexley', + 'Snoke', + 'Sola Naberrie', + 'Sora Bulq', + 'Strono Tuggs', + 'Sy Snootles', + 'Tallissan Lintra', + 'Tarfful', + 'Tasu Leech', + 'Taun We', + 'TC-14', + 'Tee Watt Kaa', + 'Teebo', + 'Teedo', + 'Teemto Pagalies', + 'Temiri Blagg', + 'Tessek', + 'Tey How', + 'Thane Kyrell', + 'The Bendu', + 'The Smuggler', + 'Thrawn', + 'Tiaan Jerjerrod', + 'Tion Medon', + 'Tobias Beckett', + 'Tulon Voidgazer', + 'Tup', + 'U9-C4', + 'Unkar Plutt', + 'Val Beckett', + 'Vanden Willard', + 'Vice Admiral Amilyn Holdo', + 'Vober Dand', + 'WAC-47', + 'Wag Too', + 'Wald', + 'Walrus Man', + 'Warok', + 'Wat Tambor', + 'Watto', + 'Wedge Antilles', + 'Wes Janson', + 'Wicket W. Warrick', + 'Wilhuff Tarkin', + 'Wollivan', + 'Wuher', + 'Wullf Yularen', + 'Xamuel Lennox', + 'Yaddle', + 'Yarael Poof', + 'Yoda', + 'Zam Wesell', + 'Zev Senesca', + 'Ziro the Hutt', + 'Zuckuss', +] export default MentionExample