fix: support upload and render image(.git, .webp, .svg) (#4841)

* fix: add supported extension of image

* fix: display of select options when no typing

* chore: focus end when cell input actived

* fix: modified checklist keyboard event

frontend/appflowy_tauri/src/appflowy_app/components/_shared/image_upload/EmbedLink.tsx

@@ -3,7 +3,7 @@ import TextField from '@mui/material/TextField';
 import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
 
-const urlPattern = /^https?:\/\/.+/;
+const urlPattern = /^(https?:\/\/)([^\s(["<,>/]*)(\/)[^\s[",><]*(.png|.jpg|.gif|.webm|.webp|.svg)(\?[^\s[",><]*)?$/;
 
 export function EmbedLink({
   onDone,

frontend/appflowy_tauri/src/appflowy_app/components/_shared/image_upload/LocalImage.tsx

@@ -22,8 +22,10 @@ export const LocalImage = forwardRef<
     const { readBinaryFile, BaseDirectory } = await import('@tauri-apps/api/fs');
 
     try {
+      const svg = src.endsWith('.svg');
+
       const buffer = await readBinaryFile(src, { dir: BaseDirectory.AppLocalData });
-      const blob = new Blob([buffer]);
+      const blob = new Blob([buffer], { type: svg ? 'image/svg+xml' : 'image' });
 
       setImageURL(URL.createObjectURL(blob));
     } catch (e) {

frontend/appflowy_tauri/src/appflowy_app/components/_shared/keyboard_navigation/KeyboardNavigation.tsx

@@ -50,6 +50,7 @@ export interface KeyboardNavigationProps<T> {
   onBlur?: () => void;
   itemClassName?: string;
   itemStyle?: React.CSSProperties;
+  renderNoResult?: () => React.ReactNode;
 }
 
 function KeyboardNavigation<T>({
@@ -69,6 +70,7 @@ function KeyboardNavigation<T>({
   onFocus,
   itemClassName,
   itemStyle,
+  renderNoResult,
 }: KeyboardNavigationProps<T>) {
   const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
@@ -301,6 +303,8 @@ function KeyboardNavigation<T>({
     >
       {options.length > 0 ? (
         options.map(renderOption)
+      ) : renderNoResult ? (
+        renderNoResult()
       ) : (
         <Typography variant='body1' className={'p-3 text-xs text-text-caption'}>
           {t('findAndReplace.noResult')}

frontend/appflowy_tauri/src/appflowy_app/components/database/components/field_types/checklist/AddNewOption.tsx

@@ -4,7 +4,17 @@ import { useViewId } from '$app/hooks';
 import { Button } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
-function AddNewOption({ rowId, fieldId, onClose }: { rowId: string; fieldId: string; onClose: () => void }) {
+function AddNewOption({
+  rowId,
+  fieldId,
+  onClose,
+  onFocus,
+}: {
+  rowId: string;
+  fieldId: string;
+  onClose: () => void;
+  onFocus: () => void;
+}) {
   const { t } = useTranslation();
   const [value, setValue] = useState('');
   const viewId = useViewId();
@@ -18,6 +28,7 @@ function AddNewOption({ rowId, fieldId, onClose }: { rowId: string; fieldId: str
   return (
     <div className={'flex items-center justify-between p-2 px-2 text-sm'}>
       <input
+        onFocus={onFocus}
         placeholder={t('grid.checklist.addNew')}
         className={'flex-1 px-2'}
         autoFocus={true}

frontend/appflowy_tauri/src/appflowy_app/components/database/components/field_types/checklist/ChecklistCellActions.tsx

@@ -19,26 +19,15 @@ function ChecklistCellActions({
   const { fieldId, rowId } = cell;
   const { percentage, selectedOptions = [], options = [] } = cell.data;
 
-  const [hoverId, setHoverId] = useState<string | null>(null);
+  const [focusedId, setFocusedId] = useState<string | null>(null);
 
   return (
-    <Popover
+    <Popover {...props} disableRestoreFocus={true}>
-      {...props}
-      disableRestoreFocus={true}
-      onKeyDown={(e) => {
-        if (e.key === 'Escape') {
-          e.stopPropagation();
-          e.preventDefault();
-          props.onClose?.({}, 'escapeKeyDown');
-        }
-      }}
-    >
       <div
         style={{
           maxHeight: maxHeight,
           maxWidth: maxWidth,
         }}
-        onMouseLeave={() => setHoverId(null)}
         className={'flex h-full w-full flex-col overflow-hidden'}
       >
         {options.length > 0 && (
@@ -56,10 +45,10 @@ function ChecklistCellActions({
                   <ChecklistItem
                     fieldId={fieldId}
                     rowId={rowId}
-                    isHovered={hoverId === option.id}
+                    isSelected={focusedId === option.id}
-                    onMouseEnter={() => setHoverId(option.id)}
                     key={option.id}
                     option={option}
+                    onFocus={() => setFocusedId(option.id)}
                     onClose={() => props.onClose?.({}, 'escapeKeyDown')}
                     checked={selectedOptions?.includes(option.id) || false}
                   />
@@ -71,7 +60,14 @@ function ChecklistCellActions({
           </>
         )}
 
-        <AddNewOption onClose={() => props.onClose?.({}, 'escapeKeyDown')} fieldId={fieldId} rowId={rowId} />
+        <AddNewOption
+          onFocus={() => {
+            setFocusedId(null);
+          }}
+          onClose={() => props.onClose?.({}, 'escapeKeyDown')}
+          fieldId={fieldId}
+          rowId={rowId}
+        />
       </div>
     </Popover>
   );

frontend/appflowy_tauri/src/appflowy_app/components/database/components/field_types/checklist/ChecklistItem.tsx

@@ -18,17 +18,18 @@ function ChecklistItem({
   rowId,
   fieldId,
   onClose,
-  isHovered,
+  isSelected,
-  onMouseEnter,
+  onFocus,
 }: {
   checked: boolean;
   option: SelectOption;
   rowId: string;
   fieldId: string;
   onClose: () => void;
-  isHovered: boolean;
+  isSelected: boolean;
-  onMouseEnter: () => void;
+  onFocus: () => void;
 }) {
+  const inputRef = React.useRef<HTMLInputElement>(null);
   const { t } = useTranslation();
   const [value, setValue] = useState(option.name);
   const viewId = useViewId();
@@ -61,17 +62,23 @@ function ChecklistItem({
 
   return (
     <div
-      onMouseEnter={onMouseEnter}
+      style={{
-      className={`flex items-center justify-between gap-2 rounded p-1 text-sm hover:bg-fill-list-active`}
+        backgroundColor: isSelected ? 'var(--fill-list-active)' : undefined,
+      }}
+      className={`checklist-item ${
+        isSelected ? 'selected' : ''
+      } flex items-center justify-between gap-2 rounded p-1 text-sm hover:bg-fill-list-hover`}
     >
-      <div className={'cursor-pointer select-none text-content-blue-400'} onClick={onCheckedChange}>
+      <div className={'relative cursor-pointer select-none text-content-blue-400'} onClick={onCheckedChange}>
         {checked ? <CheckboxCheckSvg className={'h-5 w-5'} /> : <CheckboxUncheckSvg className={'h-5 w-5'} />}
       </div>
 
       <input
         className={'flex-1 truncate'}
+        ref={inputRef}
         onBlur={updateText}
         value={value}
+        onFocus={onFocus}
         placeholder={t('grid.checklist.taskHint')}
         onKeyDown={(e) => {
           if (e.key === 'Escape') {
@@ -99,14 +106,7 @@ function ChecklistItem({
         }}
       />
       <div className={'w-10'}>
-        <IconButton
+        <IconButton size={'small'} className={`delete-option-button z-10 mx-2`} onClick={deleteOption}>
-          size={'small'}
-          style={{
-            display: isHovered ? 'block' : 'none',
-          }}
-          className={`z-10 mx-2`}
-          onClick={deleteOption}
-        >
           <DeleteIcon />
         </IconButton>
       </div>

frontend/appflowy_tauri/src/appflowy_app/components/database/components/field_types/select/SelectOptionModifyMenu.tsx

@@ -118,6 +118,9 @@ export const SelectOptionModifyMenu: FC<SelectOptionMenuProps> = ({ fieldId, opt
           onClick={(e) => {
             e.stopPropagation();
           }}
+          onMouseDown={(e) => {
+            e.stopPropagation();
+          }}
           autoFocus={true}
           placeholder={t('grid.selectOption.tagName')}
           size='small'

frontend/appflowy_tauri/src/appflowy_app/components/database/components/field_types/select/select_cell_actions/SelectCellActions.tsx

@@ -54,7 +54,7 @@ function SelectCellActions({
         ),
       }));
 
-    if (result.length === 0) {
+    if (result.length === 0 && newOptionName) {
       result.push({
         key: CREATE_OPTION_KEY,
         content: <Tag size='small' label={newOptionName} />,
@@ -69,8 +69,7 @@ function SelectCellActions({
   const updateCell = useCallback(
     async (optionIds: string[]) => {
       if (!cell || !rowId) return;
-      const prev = selectedOptionIds;
+      const deleteOptionIds = selectedOptionIds?.filter((id) => optionIds.find((cur) => cur === id) === undefined);
-      const deleteOptionIds = prev?.filter((id) => optionIds.find((cur) => cur === id) === undefined);
 
       await cellService.updateSelectCell(viewId, rowId, field.id, {
         insertOptionIds: optionIds,
@@ -136,9 +135,12 @@ function SelectCellActions({
     <div className={'flex h-full flex-col overflow-hidden'}>
       <SearchInput inputRef={inputRef} setNewOptionName={setNewOptionName} newOptionName={newOptionName} />
 
-      <div className='mx-4 mb-2 mt-4 text-xs'>
+      {filteredOptions.length > 0 && (
-        {shouldCreateOption ? t('grid.selectOption.createNew') : t('grid.selectOption.orSelectOne')}
+        <div className='mx-4 mb-2 mt-4 text-xs'>
-      </div>
+          {shouldCreateOption ? t('grid.selectOption.createNew') : t('grid.selectOption.orSelectOne')}
+        </div>
+      )}
+
       <div ref={scrollRef} className={'mx-1 flex-1 overflow-y-auto overflow-x-hidden px-1'}>
         <KeyboardNavigation
           scrollRef={scrollRef}
@@ -150,6 +152,7 @@ function SelectCellActions({
           itemStyle={{
             borderRadius: '4px',
           }}
+          renderNoResult={() => null}
         />
       </div>
     </div>

frontend/appflowy_tauri/src/appflowy_app/components/database/components/field_types/text/EditTextCellInput.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Popover, TextareaAutosize } from '@mui/material';
 
 interface Props {
@@ -8,6 +8,7 @@ interface Props {
   text: string;
   onInput: (event: React.FormEvent<HTMLTextAreaElement>) => void;
 }
+
 function EditTextCellInput({ editing, anchorEl, onClose, text, onInput }: Props) {
   const handleEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     const shift = e.shiftKey;
@@ -20,6 +21,13 @@ function EditTextCellInput({ editing, anchorEl, onClose, text, onInput }: Props)
     }
   };
 
+  const setRef = useCallback((e: HTMLTextAreaElement | null) => {
+    if (!e) return;
+    const selectionStart = e.value.length;
+
+    e.setSelectionRange(selectionStart, selectionStart);
+  }, []);
+
   return (
     <Popover
       open={editing}
@@ -47,6 +55,7 @@ function EditTextCellInput({ editing, anchorEl, onClose, text, onInput }: Props)
       <TextareaAutosize
         className='w-full resize-none whitespace-break-spaces break-all text-sm'
         autoFocus
+        ref={setRef}
         spellCheck={false}
         autoCorrect='off'
         value={text}

frontend/appflowy_tauri/src/appflowy_app/components/database/database.scss

@@ -3,4 +3,17 @@
     width: 0px;
     height: 0px;
   }
+}
+
+.checklist-item {
+  @apply my-1;
+  .delete-option-button {
+    display: none;
+  }
+  &:hover, &.selected {
+    background-color: var(--fill-list-hover);
+    .delete-option-button {
+      display: block;
+    }
+  }
 }

frontend/appflowy_tauri/src/appflowy_app/components/editor/components/blocks/image/ImageRender.tsx

@@ -8,6 +8,11 @@ import { CustomEditor } from '$app/components/editor/command';
 import { useSlateStatic } from 'slate-react';
 import ImageActions from '$app/components/editor/components/blocks/image/ImageActions';
 import { LocalImage } from '$app/components/_shared/image_upload';
+import debounce from 'lodash-es/debounce';
+
+const MIN_WIDTH = 100;
+
+const DELAY = 300;
 
 function ImageRender({ selected, node }: { selected: boolean; node: ImageNode }) {
   const [loading, setLoading] = useState(true);
@@ -21,14 +26,22 @@ function ImageRender({ selected, node }: { selected: boolean; node: ImageNode })
 
   const [showActions, setShowActions] = useState(false);
   const [initialWidth, setInitialWidth] = useState<number | null>(null);
+  const [newWidth, setNewWidth] = useState<number | null>(imageWidth ?? null);
 
-  const handleWidthChange = useCallback(
+  const debounceSubmitWidth = useMemo(() => {
-    (newWidth: number) => {
+    return debounce((newWidth: number) => {
       CustomEditor.setImageBlockData(editor, node, {
         width: newWidth,
       });
+    }, DELAY);
+  }, [editor, node]);
+
+  const handleWidthChange = useCallback(
+    (newWidth: number) => {
+      setNewWidth(newWidth);
+      debounceSubmitWidth(newWidth);
     },
-    [editor, node]
+    [debounceSubmitWidth]
   );
 
   useEffect(() => {
@@ -38,7 +51,7 @@ function ImageRender({ selected, node }: { selected: boolean; node: ImageNode })
   }, [hasError, initialWidth, loading]);
   const imageProps: React.ImgHTMLAttributes<HTMLImageElement> = useMemo(() => {
     return {
-      style: { width: loading || hasError ? '0' : imageWidth ?? '100%', opacity: selected ? 0.8 : 1 },
+      style: { width: loading || hasError ? '0' : newWidth ?? '100%', opacity: selected ? 0.8 : 1 },
       className: 'object-cover',
       ref: imgRef,
       src: url,
@@ -52,7 +65,7 @@ function ImageRender({ selected, node }: { selected: boolean; node: ImageNode })
         setLoading(false);
       },
     };
-  }, [url, imageWidth, loading, hasError, selected]);
+  }, [url, newWidth, loading, hasError, selected]);
 
   const renderErrorNode = useCallback(() => {
     return (
@@ -75,7 +88,13 @@ function ImageRender({ selected, node }: { selected: boolean; node: ImageNode })
       onMouseLeave={() => {
         setShowActions(false);
       }}
-      className={`relative min-h-[48px] ${hasError || (loading && source !== ImageType.Local) ? 'w-full' : ''}`}
+      style={{
+        minWidth: MIN_WIDTH,
+        width: 'fit-content',
+      }}
+      className={`image-render relative min-h-[48px] ${
+        hasError || (loading && source !== ImageType.Local) ? 'w-full' : ''
+      }`}
     >
       {source === ImageType.Local ? (
         <LocalImage
@@ -90,7 +109,17 @@ function ImageRender({ selected, node }: { selected: boolean; node: ImageNode })
         <img loading={'lazy'} {...imageProps} alt={`image-${blockId}`} />
       )}
 
-      {initialWidth && <ImageResizer width={imageWidth ?? initialWidth} onWidthChange={handleWidthChange} />}
+      {initialWidth && (
+        <>
+          <ImageResizer
+            isLeft
+            minWidth={MIN_WIDTH}
+            width={imageWidth ?? initialWidth}
+            onWidthChange={handleWidthChange}
+          />
+          <ImageResizer minWidth={MIN_WIDTH} width={imageWidth ?? initialWidth} onWidthChange={handleWidthChange} />
+        </>
+      )}
       {showActions && <ImageActions node={node} />}
       {hasError ? (
         renderErrorNode()

frontend/appflowy_tauri/src/appflowy_app/components/editor/components/blocks/image/ImageResizer.tsx

@@ -1,24 +1,32 @@
 import React, { useCallback, useRef } from 'react';
 
-const MIN_WIDTH = 80;
+function ImageResizer({
-
+  minWidth,
-function ImageResizer({ width, onWidthChange }: { width: number; onWidthChange: (newWidth: number) => void }) {
+  width,
+  onWidthChange,
+  isLeft,
+}: {
+  isLeft?: boolean;
+  minWidth: number;
+  width: number;
+  onWidthChange: (newWidth: number) => void;
+}) {
   const originalWidth = useRef(width);
   const startX = useRef(0);
 
   const onResize = useCallback(
     (e: MouseEvent) => {
       e.preventDefault();
-      const diff = e.clientX - startX.current;
+      const diff = isLeft ? startX.current - e.clientX : e.clientX - startX.current;
       const newWidth = originalWidth.current + diff;
 
-      if (newWidth < MIN_WIDTH) {
+      if (newWidth < minWidth) {
         return;
       }
 
       onWidthChange(newWidth);
     },
-    [onWidthChange]
+    [isLeft, minWidth, onWidthChange]
   );
 
   const onResizeEnd = useCallback(() => {
@@ -40,7 +48,8 @@ function ImageResizer({ width, onWidthChange }: { width: number; onWidthChange:
     <div
       onMouseDown={onResizeStart}
       style={{
-        right: '2px',
+        right: isLeft ? 'auto' : '2px',
+        left: isLeft ? '-2px' : 'auto',
       }}
       className={'image-resizer'}
     >

frontend/appflowy_tauri/src/appflowy_app/components/editor/components/inline_nodes/link/LinkEditContent.tsx

@@ -44,6 +44,16 @@ function LinkEditContent({ onClose, defaultHref }: { onClose: () => void; defaul
 
     if (!input) return;
 
+    let isComposing = false;
+
+    const handleCompositionUpdate = () => {
+      isComposing = true;
+    };
+
+    const handleCompositionEnd = () => {
+      isComposing = false;
+    };
+
     const handleKeyDown = (e: KeyboardEvent) => {
       e.stopPropagation();
 
@@ -69,16 +79,22 @@ function LinkEditContent({ onClose, defaultHref }: { onClose: () => void; defaul
         return;
       }
 
-      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      if (!isComposing && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
         notify.clear();
         notify.info(`Press Tab to focus on the menu`);
         return;
       }
     };
 
+    input.addEventListener('compositionstart', handleCompositionUpdate);
+    input.addEventListener('compositionend', handleCompositionEnd);
+    input.addEventListener('compositionupdate', handleCompositionUpdate);
     input.addEventListener('keydown', handleKeyDown);
     return () => {
       input.removeEventListener('keydown', handleKeyDown);
+      input.removeEventListener('compositionstart', handleCompositionUpdate);
+      input.removeEventListener('compositionend', handleCompositionEnd);
+      input.removeEventListener('compositionupdate', handleCompositionUpdate);
     };
   }, [link, onClose, setNodeMark]);
 

frontend/appflowy_tauri/src/appflowy_app/components/editor/editor.scss

@@ -138,19 +138,24 @@ span[data-slate-placeholder="true"]:not(.inline-block-content) {
   height: 0;
 }
 
-.image-resizer {
+.image-render {
-  @apply absolute w-[10px] top-0 z-10 flex h-full cursor-col-resize items-center justify-end;
+  .image-resizer {
-  .resize-handle {
+    @apply absolute w-[10px] top-0 z-10 flex h-full cursor-col-resize items-center justify-end;
-    @apply h-1/4 w-1/2 transform transition-all duration-500 select-none rounded-full border border-white opacity-0;
+    .resize-handle {
-    background: var(--fill-toolbar);
+      @apply h-1/4 w-1/2 transform transition-all duration-500 select-none rounded-full border border-white opacity-0;
+      background: var(--fill-toolbar);
+    }
   }
   &:hover {
-    .resize-handle {
+    .image-resizer{
-      @apply opacity-90;
+      .resize-handle {
+        @apply opacity-90;
+      }
     }
   }
 }
 
+
 .image-block, .math-equation-block, [data-dark-mode="true"] .image-block, [data-dark-mode="true"] .math-equation-block {
   ::selection {
     @apply bg-transparent;

frontend/appflowy_tauri/src/appflowy_app/utils/upload_image.ts

@@ -1,5 +1,5 @@
 export const MAX_IMAGE_SIZE = 10 * 1024 * 1024; // 10MB
-export const ALLOWED_IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png'];
+export const ALLOWED_IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'];
 export const IMAGE_DIR = 'images';
 
 export function getFileName(url: string) {

frontend/resources/translations/en.json

@@ -921,7 +921,7 @@
       "error": {
         "invalidImage": "Invalid image",
         "invalidImageSize": "Image size must be less than 5MB",
-        "invalidImageFormat": "Image format is not supported. Supported formats: JPEG, PNG, JPG",
+        "invalidImageFormat": "Image format is not supported. Supported formats: JPEG, PNG, JPG, GIF, SVG, WEBP",
         "invalidImageUrl": "Invalid image URL",
         "noImage": "No such file or directory"
       },