💄 style: improve message editing (#254)

* 💄 style: support cmd enter * 🐛 fix: fix key * 🐛 style: fix icon
lobehub · Jan 27, 2025 · 1eddcfa · 1eddcfa
1 parent 6123690
commit 1eddcfa
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 9 deletions.
diff --git a/src/CodeEditor/index.tsx b/src/CodeEditor/index.tsx
@@ -16,6 +16,7 @@ import {
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
 import { useStyles } from '@/CodeEditor/style';
+import { isMacLike } from '@/utils/platform';
 
 import SyntaxHighlighter from '../Highlighter/SyntaxHighlighter';
 
@@ -78,10 +79,6 @@ const HISTORY_TIME_GAP = 3000;
 
 const isWindows =
   typeof window !== 'undefined' && 'navigator' in window && /win/i.test(navigator.platform);
-const isMacLike =
-  typeof window !== 'undefined' &&
-  'navigator' in window &&
-  /(mac|iphone|ipod|ipad)/i.test(navigator.platform);
 
 const getLines = (text: string, position: number) =>
   text.slice(0, Math.max(0, position)).split('\n');

diff --git a/src/Swatches/index.tsx b/src/Swatches/index.tsx
@@ -43,13 +43,13 @@ const Swatches = memo<SwatchesProps>(({ colors, activeColor, onSelect, size = 24
           background: theme.colorBgContainer,
         }}
       />
-      {colors.map((c) => {
+      {colors.map((c, index) => {
         const isActive = c === activeColor;
 
         return (
           <Flexbox
             className={cx(styles.container, isActive && styles.active)}
-            key={c}
+            key={`${c}_${index}`}
             onClick={() => {
               onSelect?.(c);
             }}

diff --git a/src/chat/EditableMessage/index.tsx b/src/chat/EditableMessage/index.tsx
@@ -126,6 +126,7 @@ const EditableMessage = memo<EditableMessageProps>(
           setTyping(false);
         }}
         placeholder={placeholder}
+        shortcut
         style={stylesProps?.input}
         text={text}
         textareaClassname={classNames?.input}

diff --git a/src/chat/MessageInput/demos/index.tsx b/src/chat/MessageInput/demos/index.tsx
@@ -3,14 +3,12 @@ import { Divider } from 'antd';
 import { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { content } from '../../../Markdown/demos/data';
-
 export default () => {
   const [value, setValue] = useState('');
   return (
     <Flexbox width={'100%'}>
       <MessageInput
-        defaultValue={content}
+        defaultValue={'hello world'}
         height={200}
         onConfirm={setValue}
         style={{ width: '100%' }}

diff --git a/src/chat/MessageInput/index.tsx b/src/chat/MessageInput/index.tsx
@@ -1,12 +1,15 @@
 'use client';
 
 import { Button, ButtonProps } from 'antd';
+import { ChevronUpIcon, CommandIcon, CornerDownLeft } from 'lucide-react';
 import { type CSSProperties, memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import Icon from '@/Icon';
 import { TextArea } from '@/Input';
 import { type TextAreaProps } from '@/Input';
 import { DivProps } from '@/types';
+import { isMacLike } from '@/utils/platform';
 
 import { useStyles } from './style';
 
@@ -38,6 +41,7 @@ export interface MessageInputProps extends DivProps {
    * @param text - The text input by the user.
    */
   renderButtons?: (text: string) => ButtonProps[];
+  shortcut?: boolean;
   text?: {
     cancel?: string;
     confirm?: string;
@@ -65,6 +69,7 @@ const MessageInput = memo<MessageInputProps>(
     style,
     editButtonSize = 'middle',
     classNames,
+    shortcut,
     ...rest
   }) => {
     const [temporaryValue, setValue] = useState<string>(defaultValue || '');
@@ -80,6 +85,15 @@ const MessageInput = memo<MessageInputProps>(
           classNames={classNames}
           onBlur={(e) => setValue(e.target.value)}
           onChange={(e) => setValue(e.target.value)}
+          onPressEnter={
+            shortcut
+              ? (e) => {
+                  if (isMacLike ? e.metaKey : e.ctrlKey) {
+                    onConfirm?.(temporaryValue);
+                  }
+                }
+              : undefined
+          }
           placeholder={placeholder}
           resize={false}
           style={textareaStyle}
@@ -101,6 +115,12 @@ const MessageInput = memo<MessageInputProps>(
                 type="primary"
               >
                 {text?.confirm || 'Confirm'}
+                {shortcut && (
+                  <Flexbox gap={4} horizontal>
+                    <Icon icon={isMacLike ? CommandIcon : ChevronUpIcon} size={{ fontSize: 12 }} />
+                    <Icon icon={CornerDownLeft} size={{ fontSize: 12 }} />
+                  </Flexbox>
+                )}
               </Button>
               <Button onClick={onCancel} size={editButtonSize}>
                 {text?.cancel || 'Cancel'}

diff --git a/src/utils/platform.ts b/src/utils/platform.ts
@@ -0,0 +1,4 @@
+export const isMacLike =
+  typeof window !== 'undefined' &&
+  'navigator' in window &&
+  /(mac|iphone|ipod|ipad)/i.test(navigator.platform);