feat: support block align (#4219)

* fix: mention bugs

* feat: support to align block range

* fix: inline formula bugs

* fix: adjust UI of color picker

* fix: tab bugs

Author: qinluhe

frontend/appflowy_tauri/src/appflowy_app/application/document/document.types.ts

@@ -100,7 +100,7 @@ export interface MathEquationNode extends Element {
 
 export interface FormulaNode extends Element {
   type: EditorInlineNodeType.Formula;
-  data: boolean;
+  data: string;
 }
 
 export interface MentionNode extends Element {
@@ -173,51 +173,15 @@ export interface EditorElementProps<T = Element> extends HTMLAttributes<HTMLDivE
   node: T;
 }
 
-export interface EditorInlineAttributes {
-  bold?: boolean;
-  italic?: boolean;
-  underline?: boolean;
-  strikethrough?: boolean;
-  font_color?: string;
-  bg_color?: string;
-  href?: string;
-  code?: boolean;
-  formula?: boolean;
-  prism_token?: string;
-  mention?: {
-    type: string;
-    // inline page ref id
-    page?: string;
-    // reminder date ref id
-    date?: string;
-  };
-}
-
 export enum EditorMarkFormat {
   Bold = 'bold',
   Italic = 'italic',
   Underline = 'underline',
   StrikeThrough = 'strikethrough',
   Code = 'code',
-  Formula = 'formula',
-}
-
-export enum EditorStyleFormat {
-  FontColor = 'font_color',
-  BackgroundColor = 'bg_color',
   Href = 'href',
-}
-
-export enum EditorTurnFormat {
-  Paragraph = 'paragraph',
-  Heading1 = 'heading1', // 'heading1' is a special format, it's not a slate node type, but a slate node type's data
-  Heading2 = 'heading2',
-  Heading3 = 'heading3',
-  TodoList = 'todo_list',
-  BulletedList = 'bulleted_list',
-  NumberedList = 'numbered_list',
-  Quote = 'quote',
-  ToggleList = 'toggle_list',
+  FontColor = 'font_color',
+  BgColor = 'bg_color',
 }
 
 export enum MentionType {

frontend/appflowy_tauri/src/appflowy_app/components/_shared/ButtonPopoverList/index.tsx

@@ -53,8 +53,9 @@ function ButtonPopoverList({ popoverOrigin, isVisible, children, popoverOptions,
                   option.onClick();
                   handleClose();
                 }}
+                className={'flex items-center gap-1 rounded-none px-2 text-xs font-medium'}
               >
-                <span className={'mr-2'}>{option.icon}</span>
+                <span className={'text-base'}>{option.icon}</span>
                 <span>{option.label}</span>
               </MenuItem>
             ))}

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EmojiPicker/EmojiPicker.hooks.ts

@@ -5,7 +5,7 @@ import { init, FrequentlyUsed, getEmojiDataFromNative, Store } from 'emoji-mart'
 import { PopoverProps } from '@mui/material/Popover';
 import { PopoverOrigin } from '@mui/material/Popover/Popover';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { chunkArray } from '$app/utils/tool';
+import chunk from 'lodash-es/chunk';
 
 export const EMOJI_SIZE = 32;
 
@@ -154,7 +154,7 @@ export function getRowsWithCategories(emojiCategories: EmojiCategory[], rowSize:
       id: category.id,
       type: 'category',
     });
-    chunkArray(category.emojis, rowSize).forEach((chunk, index) => {
+    chunk(category.emojis, rowSize).forEach((chunk, index) => {
       rows.push({
         type: 'emojis',
         emojis: chunk,

frontend/appflowy_tauri/src/appflowy_app/components/database/DatabaseTitle.tsx

@@ -6,7 +6,7 @@ import { updatePageName } from '$app_reducers/pages/async_actions';
 
 export const DatabaseTitle = () => {
   const viewId = useViewId();
-  const pageName = useAppSelector((state) => state.pages.pageMap[viewId].name);
+  const pageName = useAppSelector((state) => state.pages.pageMap[viewId]?.name || '');
   const dispatch = useAppDispatch();
 
   const handleInput = useCallback<FormEventHandler>(

frontend/appflowy_tauri/src/appflowy_app/components/database/components/cell/TextCell.tsx

@@ -40,7 +40,7 @@ export const TextCell: FC<TextCellProps> = ({ placeholder, cell }) => {
 
   return (
     <>
-      <CellText className={`min-h-[36px] w-full`} ref={cellRef} onClick={handleClick}>
+      <CellText className={`min-h-[36px] w-full cursor-text`} ref={cellRef} onClick={handleClick}>
         {content}
       </CellText>
       <Suspense>

frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridField/GridField.tsx

@@ -1,6 +1,5 @@
 import { Button, Tooltip } from '@mui/material';
 import { DragEventHandler, FC, HTMLAttributes, memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { throttle } from '$app/utils/tool';
 import { useViewId } from '$app/hooks';
 import { DragItem, DropPosition, DragType, useDraggable, useDroppable, ScrollDirection } from '../../_shared';
 import { fieldService, Field } from '../../application';
@@ -9,6 +8,7 @@ import GridResizer from '$app/components/database/grid/GridField/GridResizer';
 import GridFieldMenu from '$app/components/database/grid/GridField/GridFieldMenu';
 import { areEqual } from 'react-window';
 import { useOpenMenu } from '$app/components/database/grid/GridStickyHeader/GridStickyHeader.hooks';
+import throttle from 'lodash-es/throttle';
 
 export interface GridFieldProps extends HTMLAttributes<HTMLDivElement> {
   field: Field;
@@ -88,9 +88,9 @@ export const GridField: FC<GridFieldProps> = memo(
 
     const [menuAnchorPosition, setMenuAnchorPosition] = useState<
       | {
-        top: number;
-        left: number;
-      }
+          top: number;
+          left: number;
+        }
       | undefined
     >(undefined);
 
@@ -164,8 +164,9 @@ export const GridField: FC<GridFieldProps> = memo(
             />
             {isOver && (
               <div
-                className={`absolute bottom-0 top-0 z-10 w-0.5 bg-blue-500 ${dropPosition === DropPosition.Before ? 'left-[-1px]' : 'left-full'
-                  }`}
+                className={`absolute bottom-0 top-0 z-10 w-0.5 bg-blue-500 ${
+                  dropPosition === DropPosition.Before ? 'left-[-1px]' : 'left-full'
+                }`}
               />
             )}
             <GridResizer field={field} onWidthChange={resizeColumnWidth} />

frontend/appflowy_tauri/src/appflowy_app/components/database/grid/GridNewRow/GridNewRow.tsx

@@ -49,7 +49,7 @@ function GridNewRow({ index, groupId, getContainerRef }: Props) {
         toggleCssProperty(false);
       }}
       onClick={handleClick}
-      className={'grid-new-row flex grow'}
+      className={'grid-new-row flex grow cursor-pointer'}
     >
       <span
         style={{

frontend/appflowy_tauri/src/appflowy_app/components/editor/command/formula.ts

@@ -1,17 +1,23 @@
 import { ReactEditor } from 'slate-react';
-import { Editor, Element as SlateElement, Range, Transforms } from 'slate';
-import { EditorInlineNodeType } from '$app/application/document/document.types';
+import { Editor, Element as SlateElement, NodeEntry, Range, Transforms } from 'slate';
+import { EditorInlineNodeType, FormulaNode } from '$app/application/document/document.types';
 
-export function insertFormula(editor: ReactEditor, formula?: string) {
+export function insertFormula(editor: ReactEditor) {
   if (editor.selection) {
-    wrapFormula(editor, formula);
+    wrapFormula(editor);
   }
 }
 
 export function updateFormula(editor: ReactEditor, formula: string) {
   if (isFormulaActive(editor)) {
     Transforms.delete(editor);
-    insertFormula(editor, formula);
+    wrapFormula(editor, formula);
+  }
+}
+
+export function deleteFormula(editor: ReactEditor) {
+  if (isFormulaActive(editor)) {
+    Transforms.delete(editor);
   }
 }
 
@@ -21,32 +27,55 @@ export function wrapFormula(editor: ReactEditor, formula?: string) {
   }
 
   const { selection } = editor;
+
+  if (!selection) return;
   const isCollapsed = selection && Range.isCollapsed(selection);
 
+  const data = formula || editor.string(selection);
   const formulaElement = {
     type: EditorInlineNodeType.Formula,
-    data: true,
-    children: isCollapsed
-      ? [
-          {
-            text: formula || '',
-          },
-        ]
-      : [],
+    data,
+    children: [
+      {
+        text: '$',
+      },
+    ],
   };
 
-  if (isCollapsed) {
-    Transforms.insertNodes(editor, formulaElement);
-  } else {
-    Transforms.wrapNodes(editor, formulaElement, { split: true });
-    Transforms.collapse(editor, { edge: 'end' });
+  if (!isCollapsed) {
+    Transforms.delete(editor);
   }
+
+  Transforms.insertNodes(editor, formulaElement, {
+    select: true,
+  });
 }
 
 export function unwrapFormula(editor: ReactEditor) {
-  Transforms.unwrapNodes(editor, {
+  const [match] = Editor.nodes(editor, {
     match: (n) => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === EditorInlineNodeType.Formula,
   });
+
+  if (!match) return;
+
+  const [node, path] = match as NodeEntry<FormulaNode>;
+  const formula = node.data;
+  const range = Editor.range(editor, match[1]);
+  const beforePoint = Editor.before(editor, path, { unit: 'character' });
+
+  Transforms.select(editor, range);
+  Transforms.delete(editor);
+
+  Transforms.insertText(editor, formula);
+
+  if (!beforePoint) return;
+  Transforms.select(editor, {
+    anchor: beforePoint,
+    focus: {
+      ...beforePoint,
+      offset: beforePoint.offset + formula.length,
+    },
+  });
 }
 
 export function isFormulaActive(editor: ReactEditor) {

frontend/appflowy_tauri/src/appflowy_app/components/editor/command/index.ts

@@ -2,7 +2,13 @@ import { ReactEditor } from 'slate-react';
 import { Editor, Element, Node, NodeEntry, Point, Range, Transforms, Location } from 'slate';
 import { LIST_TYPES, tabBackward, tabForward } from '$app/components/editor/command/tab';
 import { isMarkActive, removeMarks, toggleMark } from '$app/components/editor/command/mark';
-import { insertFormula, isFormulaActive, unwrapFormula, updateFormula } from '$app/components/editor/command/formula';
+import {
+  deleteFormula,
+  insertFormula,
+  isFormulaActive,
+  unwrapFormula,
+  updateFormula,
+} from '$app/components/editor/command/formula';
 import {
   EditorInlineNodeType,
   EditorNodeType,
@@ -82,13 +88,12 @@ export const CustomEditor = {
   isMarkActive,
   isFormulaActive,
   updateFormula,
-  toggleInlineElement: (editor: ReactEditor, format: EditorInlineNodeType) => {
-    if (format === EditorInlineNodeType.Formula) {
-      if (isFormulaActive(editor)) {
-        unwrapFormula(editor);
-      } else {
-        insertFormula(editor);
-      }
+  deleteFormula,
+  toggleFormula: (editor: ReactEditor) => {
+    if (isFormulaActive(editor)) {
+      unwrapFormula(editor);
+    } else {
+      insertFormula(editor);
     }
   },
 
@@ -102,6 +107,47 @@ export const CustomEditor = {
     return !!match;
   },
 
+  toggleAlign(editor: ReactEditor, format: string) {
+    const matchNodes = Array.from(
+      Editor.nodes(editor, {
+        match: (n) => Element.isElement(n) && n.blockId !== undefined,
+      })
+    );
+
+    if (!matchNodes) return;
+
+    matchNodes.forEach((match) => {
+      const [node] = match as NodeEntry<
+        Element & {
+          data: {
+            align?: string;
+          };
+        }
+      >;
+      const path = ReactEditor.findPath(editor, node);
+
+      const data = (node.data as { align?: string }) || {};
+      const newProperties = {
+        data: {
+          ...data,
+          align: data.align === format ? undefined : format,
+        },
+      } as Partial<Element>;
+
+      Transforms.setNodes(editor, newProperties, { at: path });
+    });
+  },
+
+  getAlign(editor: ReactEditor) {
+    const match = CustomEditor.getBlock(editor);
+
+    if (!match) return undefined;
+
+    const [node] = match as NodeEntry<Element>;
+
+    return (node.data as { align?: string })?.align;
+  },
+
   insertMention(editor: ReactEditor, mention: Mention) {
     const mentionElement = {
       type: EditorInlineNodeType.Mention,
@@ -111,8 +157,9 @@ export const CustomEditor = {
       },
     };
 
-    Transforms.insertNodes(editor, mentionElement);
-    Transforms.move(editor);
+    Transforms.insertNodes(editor, mentionElement, {
+      select: true,
+    });
   },
 
   toggleTodo(editor: ReactEditor, node: TodoListNode) {