feat: Replace select with dropdown for code (facebook#2761)

yuanyan · Aug 4, 2022 · 7bb6146 · 7bb6146
1 parent 6e8c81c
commit 7bb6146
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 36 deletions.
diff --git a/packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs b/packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs
@@ -21,7 +21,6 @@ import {
   html,
   initialize,
   pasteFromClipboard,
-  selectOption,
   test,
 } from '../utils/index.mjs';
 
@@ -267,7 +266,8 @@ test.describe('CodeBlock', () => {
           </code>
         `,
       );
-      await selectOption(page, '.code-language', {value: 'sql'});
+      await click(page, '.toolbar-item.code-language');
+      await click(page, 'button:has-text("SQL")');
       await assertHTML(
         page,
         html`

diff --git a/packages/lexical-playground/src/index.css b/packages/lexical-playground/src/index.css
@@ -773,6 +773,9 @@ i.prettier-error {
   .font-size .dropdown-button-text {
     display: flex !important;
   }
+  .code-language .dropdown-button-text {
+    display: flex !important;
+  }
 }
 
 .icon.paragraph {
@@ -1280,6 +1283,7 @@ button.action-button:disabled {
   vertical-align: middle;
   flex-shrink: 0;
   align-items: center;
+  justify-content: space-between;
 }
 
 .toolbar button.toolbar-item:disabled {
@@ -1321,7 +1325,7 @@ button.action-button:disabled {
   max-width: 40px;
 }
 
-.toolbar select.code-language {
+.toolbar .code-language {
   width: 150px;
 }
 

diff --git a/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx b/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx
@@ -21,6 +21,7 @@ import {
   $isCodeNode,
   CODE_LANGUAGE_FRIENDLY_NAME_MAP,
   CODE_LANGUAGE_MAP,
+  getLanguageFriendlyName,
 } from '@lexical/code';
 import {$isLinkNode, TOGGLE_LINK_COMMAND} from '@lexical/link';
 import {
@@ -78,7 +79,7 @@ import {
   UNDO_COMMAND,
 } from 'lexical';
 import * as React from 'react';
-import {ChangeEvent, useCallback, useEffect, useRef, useState} from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
 import {IS_APPLE} from 'shared/environment';
 
@@ -118,7 +119,7 @@ const blockTypeToBlockName = {
 };
 
 function getCodeLanguageOptions(): [string, string][] {
-  const options: [string, string][] = [['', '- Select language -']];
+  const options: [string, string][] = [];
 
   for (const [lang, friendlyName] of Object.entries(
     CODE_LANGUAGE_FRIENDLY_NAME_MAP,
@@ -820,28 +821,6 @@ function Divider(): JSX.Element {
   return <div className="divider" />;
 }
 
-function Select({
-  onChange,
-  className,
-  options,
-  value,
-}: {
-  className: string;
-  onChange: (e: ChangeEvent) => void;
-  options: [string, string][];
-  value: string;
-}): JSX.Element {
-  return (
-    <select className={className} onChange={onChange} value={value}>
-      {options.map(([option, text]) => (
-        <option key={option} value={option}>
-          {text}
-        </option>
-      ))}
-    </select>
-  );
-}
-
 function FontDropDown({
   editor,
   value,
@@ -1085,12 +1064,12 @@ export default function ToolbarPlugin(): JSX.Element {
   }, [editor, isLink]);
 
   const onCodeLanguageSelect = useCallback(
-    (e: ChangeEvent) => {
+    (value: string) => {
       activeEditor.update(() => {
         if (selectedElementKey !== null) {
           const node = $getNodeByKey(selectedElementKey);
           if ($isCodeNode(node)) {
-            node.setLanguage((e.target as HTMLSelectElement).value);
+            node.setLanguage(value);
           }
         }
       });
@@ -1132,13 +1111,23 @@ export default function ToolbarPlugin(): JSX.Element {
       )}
       {blockType === 'code' ? (
         <>
-          <Select
-            className="toolbar-item code-language"
-            onChange={onCodeLanguageSelect}
-            options={CODE_LANGUAGE_OPTIONS}
-            value={codeLanguage}
-          />
-          <i className="chevron-down inside" />
+          <DropDown
+            buttonClassName="toolbar-item code-language"
+            buttonLabel={getLanguageFriendlyName(codeLanguage)}
+            buttonAriaLabel="Select language">
+            {CODE_LANGUAGE_OPTIONS.map(([value, name]) => {
+              return (
+                <DropDownItem
+                  className={`item ${dropDownActiveClass(
+                    value === codeLanguage,
+                  )}`}
+                  onClick={() => onCodeLanguageSelect(value)}
+                  key={value}>
+                  <span className="text">{name}</span>
+                </DropDownItem>
+              );
+            })}
+          </DropDown>
         </>
       ) : (
         <>