Lexical Typeaheads (facebook#2534)

yuanyan · Jul 12, 2022 · 11ad8f1 · 11ad8f1
1 parent 7bbe260
commit 11ad8f1
Show file tree

Hide file tree

Showing 15 changed files with 1,203 additions and 505 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -66,6 +66,7 @@ module.name_mapper='^@lexical/react/useLexicalTextEntity' -> '<PROJECT_ROOT>/pac
 # Composer Plugins
 module.name_mapper='^@lexical/react/LexicalPlainTextPlugin' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalPlainTextPlugin.js.flow'
 module.name_mapper='^@lexical/react/LexicalRichTextPlugin' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalRichTextPlugin.js.flow'
+module.name_mapper='^@lexical/react/LexicalTypeaheadMenuPlugin' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalTypeaheadMenuPlugin.js.flow'
 module.name_mapper='^@lexical/react/LexicalHistoryPlugin' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalHistoryPlugin.js.flow'
 module.name_mapper='^@lexical/react/LexicalOnChangePlugin' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalOnChangePlugin.js.flow'
 module.name_mapper='^@lexical/react/LexicalHashtagPlugin' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalHashtagPlugin.js.flow'

diff --git a/packages/lexical-playground/__tests__/e2e/ClearFormatting.spec.mjs b/packages/lexical-playground/__tests__/e2e/ClearFormatting.spec.mjs
@@ -134,7 +134,7 @@ test.describe('Clear All Formatting', () => {
 
     await page.keyboard.type('Luke');
 
-    await waitForSelector(page, '#mentions-typeahead ul li');
+    await waitForSelector(page, '#typeahead-menu ul li');
     await assertHTML(
       page,
       html`

diff --git a/packages/lexical-playground/__tests__/e2e/Composition.spec.mjs b/packages/lexical-playground/__tests__/e2e/Composition.spec.mjs
@@ -438,7 +438,7 @@ test.describe('Composition', () => {
       await enableCompositionKeyEvents(page);
 
       await page.keyboard.type('Luke');
-      await waitForSelector(page, '#mentions-typeahead ul li');
+      await waitForSelector(page, '#typeahead-menu ul li');
       await page.keyboard.press('Enter');
 
       await waitForSelector(page, '.mention');
@@ -492,7 +492,7 @@ test.describe('Composition', () => {
       await enableCompositionKeyEvents(page);
 
       await page.keyboard.type('Luke');
-      await waitForSelector(page, '#mentions-typeahead ul li');
+      await waitForSelector(page, '#typeahead-menu ul li');
       await page.keyboard.press('Enter');
 
       await waitForSelector(page, '.mention');

diff --git a/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs b/packages/lexical-playground/__tests__/e2e/Mentions.spec.mjs
@@ -35,7 +35,7 @@ test.describe('Mentions', () => {
       focusPath: [0, 0, 0],
     });
 
-    await waitForSelector(page, '#mentions-typeahead ul li');
+    await waitForSelector(page, '#typeahead-menu ul li');
     await assertHTML(
       page,
       html`
@@ -107,7 +107,7 @@ test.describe('Mentions', () => {
       focusPath: [0, 0, 0],
     });
 
-    await waitForSelector(page, '#mentions-typeahead ul li');
+    await waitForSelector(page, '#typeahead-menu ul li');
     await assertHTML(
       page,
       html`
@@ -198,7 +198,7 @@ test.describe('Mentions', () => {
       focusPath: [0, 0, 0],
     });
 
-    await waitForSelector(page, '#mentions-typeahead ul li');
+    await waitForSelector(page, '#typeahead-menu ul li');
     await assertHTML(
       page,
       html`
@@ -270,7 +270,7 @@ test.describe('Mentions', () => {
       focusPath: [0, 0, 0],
     });
 
-    await waitForSelector(page, '#mentions-typeahead ul li');
+    await waitForSelector(page, '#typeahead-menu ul li');
     await assertHTML(
       page,
       html`
@@ -342,7 +342,7 @@ test.describe('Mentions', () => {
       focusPath: [0, 0, 0],
     });
 
-    await waitForSelector(page, '#mentions-typeahead ul li');
+    await waitForSelector(page, '#typeahead-menu ul li');
     await assertHTML(
       page,
       html`
@@ -437,7 +437,7 @@ test.describe('Mentions', () => {
 
     await page.keyboard.type('Luke');
 
-    await waitForSelector(page, '#mentions-typeahead ul li');
+    await waitForSelector(page, '#typeahead-menu ul li');
     await assertHTML(
       page,
       html`
@@ -513,7 +513,7 @@ test.describe('Mentions', () => {
       focusPath: [0, 0, 0],
     });
 
-    await waitForSelector(page, '#mentions-typeahead ul li');
+    await waitForSelector(page, '#typeahead-menu ul li');
     await page.keyboard.press('Enter');
 
     await waitForSelector(page, '.mention');
@@ -522,7 +522,7 @@ test.describe('Mentions', () => {
 
     await page.keyboard.type('Luke');
 
-    await waitForSelector(page, '#mentions-typeahead ul li');
+    await waitForSelector(page, '#typeahead-menu ul li');
     await page.keyboard.press('Enter');
 
     await waitForSelector(page, '.mention:nth-child(1)');
@@ -531,7 +531,7 @@ test.describe('Mentions', () => {
 
     await page.keyboard.type('Luke');
 
-    await waitForSelector(page, '#mentions-typeahead ul li');
+    await waitForSelector(page, '#typeahead-menu ul li');
     await page.keyboard.press('Enter');
 
     await waitForSelector(page, '.mention:nth-child(3)');
@@ -540,7 +540,7 @@ test.describe('Mentions', () => {
 
     await page.keyboard.type('Luke');
 
-    await waitForSelector(page, '#mentions-typeahead ul li');
+    await waitForSelector(page, '#typeahead-menu ul li');
     await page.keyboard.press('Enter');
 
     await waitForSelector(page, '.mention:nth-child(5)');
@@ -822,7 +822,7 @@ test.describe('Mentions', () => {
       focusPath: [0, 0, 0],
     });
 
-    await waitForSelector(page, '#mentions-typeahead ul li');
+    await waitForSelector(page, '#typeahead-menu ul li');
     await page.keyboard.press('Enter');
 
     await waitForSelector(page, '.mention');

diff --git a/packages/lexical-playground/__tests__/regression/379-backspace-with-mentions.spec.mjs b/packages/lexical-playground/__tests__/regression/379-backspace-with-mentions.spec.mjs
@@ -24,7 +24,7 @@ test.describe('Regression test #379', () => {
   }) => {
     await focusEditor(page);
     await page.keyboard.type('Luke');
-    await waitForSelector(page, '#mentions-typeahead ul li');
+    await waitForSelector(page, '#typeahead-menu ul li');
     await page.keyboard.press('Enter');
     await assertHTML(
       page,

diff --git a/packages/lexical-playground/src/Editor.tsx b/packages/lexical-playground/src/Editor.tsx
@@ -32,6 +32,7 @@ import ClickableLinkPlugin from './plugins/ClickableLinkPlugin';
 import CodeActionMenuPlugin from './plugins/CodeActionMenuPlugin';
 import CodeHighlightPlugin from './plugins/CodeHighlightPlugin';
 import CommentPlugin from './plugins/CommentPlugin';
+import ComponentPickerPlugin from './plugins/ComponentPickerPlugin';
 import EmojisPlugin from './plugins/EmojisPlugin';
 import EquationsPlugin from './plugins/EquationsPlugin';
 import ExcalidrawPlugin from './plugins/ExcalidrawPlugin';
@@ -91,6 +92,7 @@ export default function Editor(): JSX.Element {
         {isMaxLength && <MaxLengthPlugin maxLength={30} />}
         <AutoFocusPlugin />
         <ClearEditorPlugin />
+        <ComponentPickerPlugin />
         <MentionsPlugin />
         <EmojisPlugin />
         <HashtagPlugin />

diff --git a/packages/lexical-playground/src/images/icons/user.svg b/packages/lexical-playground/src/images/icons/user.svg
diff --git a/packages/lexical-playground/src/index.css b/packages/lexical-playground/src/index.css
@@ -231,23 +231,33 @@ pre::-webkit-scrollbar-thumb {
   background-image: url(images/icons/download.svg);
 }
 
-#mentions-typeahead {
+#typeahead-menu {
   position: fixed;
   background: #fff;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
   border-radius: 8px;
   z-index: 3;
 }
 
-#mentions-typeahead ul {
+#typeahead-menu ul {
   padding: 0;
   list-style: none;
   margin: 0;
   border-radius: 8px;
+  max-height: 200px;
+  overflow-y: scroll;
 }
 
-#mentions-typeahead ul li {
-  padding: 10px 15px;
+#typeahead-menu ul::-webkit-scrollbar {
+  display: none;
+}
+
+#typeahead-menu ul {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+#typeahead-menu ul li {
   margin: 0;
   min-width: 180px;
   font-size: 14px;
@@ -256,10 +266,63 @@ pre::-webkit-scrollbar-thumb {
   border-radius: 8px;
 }
 
-#mentions-typeahead ul li.selected {
+#typeahead-menu ul li.selected {
   background: #eee;
 }
 
+#typeahead-menu li {
+  margin: 0 8px 0 8px;
+  padding: 8px;
+  color: #050505;
+  cursor: pointer;
+  line-height: 16px;
+  font-size: 15px;
+  display: flex;
+  align-content: center;
+  flex-direction: row;
+  flex-shrink: 0;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 0;
+  max-width: 250px;
+}
+
+#typeahead-menu li.active {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+}
+
+#typeahead-menu li:first-child {
+  border-radius: 8px 8px 0px 0px;
+}
+
+#typeahead-menu li:last-child {
+  border-radius: 0px 0px 8px 8px;
+}
+
+#typeahead-menu li:hover {
+  background-color: #eee;
+}
+
+#typeahead-menu li .text {
+  display: flex;
+  line-height: 20px;
+  flex-grow: 1;
+  min-width: 150px;
+}
+
+#typeahead-menu li .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 8px;
+  line-height: 16px;
+  background-size: contain;
+}
+
 .link-editor {
   position: absolute;
   z-index: 10;
@@ -442,6 +505,10 @@ i.diagram-2 {
   background-image: url(images/icons/diagram-2.svg);
 }
 
+i.user {
+  background-image: url(images/icons/user.svg);
+}
+
 i.equation {
   background-image: url(images/icons/plus-slash-minus.svg);
 }