fix: colors

frontend/appflowy_web_app/src/application/slate-yjs/command/index.ts

@@ -2,8 +2,6 @@ import { YjsEditor } from '@/application/slate-yjs/plugins/withYjs';
 import { EditorMarkFormat } from '@/application/slate-yjs/types';
 import {
   beforePasted,
-  findIndentPath,
-  findLiftPath,
   findSlateEntryByBlockId,
 } from '@/application/slate-yjs/utils/slateUtils';
 
@@ -166,12 +164,12 @@ export const CustomEditor = {
       const block = getBlock(node.blockId as string, sharedRoot);
       const blockType = block.get(YjsEditorKey.block_type) as BlockType;
 
-      if (blockType !== BlockType.Paragraph) {
-        handleNonParagraphBlockBackspaceAndEnterWithTxn(editor, sharedRoot, block, point);
+      if (path.length > 1 && handleLiftBlockOnBackspaceAndEnterWithTxn(editor, sharedRoot, block, point)) {
         return;
       }
 
-      if (path.length > 1 && handleLiftBlockOnBackspaceAndEnterWithTxn(editor, sharedRoot, block, point)) {
+      if (blockType !== BlockType.Paragraph) {
+        handleNonParagraphBlockBackspaceAndEnterWithTxn(editor, sharedRoot, block, point);
         return;
       }
 
@@ -232,13 +230,15 @@ export const CustomEditor = {
     const endBlockPath = endNode[1];
     const startAtPath = point.path.slice(startBlockPath.length);
     const startAtOffset = point.offset;
+
     const endAtPath = endPoint.path.slice(endBlockPath.length);
     const endAtOffset = endPoint.offset;
     let newStartBlockPath: Path = [];
     let newEndBlockPath: Path = [];
 
     const isSameBlock = node[0].blockId === endNode[0].blockId;
 
+    editor.deselect();
     if (isSameBlock) {
       const block = getBlock(node[0].blockId as string, sharedRoot);
       let newBlockId: string | undefined;
@@ -272,9 +272,10 @@ export const CustomEditor = {
       });
       if (newBlockIds.length === 0) return;
       const newStartBlockEntry = findSlateEntryByBlockId(editor, newBlockIds[0]);
+      const newEndBlockEntry = findSlateEntryByBlockId(editor, newBlockIds[newBlockIds.length - 1]);
 
       newStartBlockPath = newStartBlockEntry[1];
-      newEndBlockPath = type === 'tabForward' ? findIndentPath(startBlockPath, endBlockPath, newStartBlockPath) : findLiftPath(startBlockPath, endBlockPath, newStartBlockPath);
+      newEndBlockPath = newEndBlockEntry[1];
     }
 
     const newStartPath = [...newStartBlockPath, ...startAtPath];

frontend/appflowy_web_app/src/application/slate-yjs/utils/slateUtils.tsx

@@ -1,31 +1,6 @@
 import { Editor, Element, NodeEntry, Path, Range, Transforms, Node, Point, BasePoint } from 'slate';
 import { ReactEditor } from 'slate-react';
 
-export function findIndentPath (originalStart: Path, originalEnd: Path, newStart: Path): Path {
-  // Find the common ancestor path
-  const commonPath = Path.common(originalStart, originalEnd);
-
-  // Calculate end's path relative to common ancestor
-  const endRelativePath = originalEnd.slice(commonPath.length);
-
-  // Calculate new common ancestor path by maintaining the same level difference
-  const startToCommonLevels = originalStart.length - commonPath.length;
-  const newCommonAncestor = newStart.slice(0, newStart.length - startToCommonLevels);
-
-  // Append the relative path to new common ancestor
-  return [...newCommonAncestor, ...endRelativePath];
-}
-
-export function findLiftPath (originalStart: Path, originalEnd: Path, newStart: Path): Path {
-  // Same logic as findIndentPath
-  const commonPath = Path.common(originalStart, originalEnd);
-  const endRelativePath = originalEnd.slice(commonPath.length);
-  const startToCommonLevels = originalStart.length - commonPath.length;
-  const newCommonAncestor = newStart.slice(0, newStart.length - startToCommonLevels);
-
-  return [...newCommonAncestor, ...endRelativePath];
-}
-
 export function findSlateEntryByBlockId (editor: Editor, blockId: string) {
   const [node] = Editor.nodes(editor, {
     match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.blockId === blockId,

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

@@ -276,14 +276,15 @@ export function handleCollapsedBreakWithTxn (editor: YjsEditor, sharedRoot: YSha
   if (yText.length === 0) {
     const point = Editor.start(editor, at);
 
-    if (blockType !== BlockType.Paragraph) {
-      handleNonParagraphBlockBackspaceAndEnterWithTxn(editor, sharedRoot, block, point);
+    if (path.length > 1 && handleLiftBlockOnBackspaceAndEnterWithTxn(editor, sharedRoot, block, point)) {
       return;
     }
 
-    if (path.length > 1 && handleLiftBlockOnBackspaceAndEnterWithTxn(editor, sharedRoot, block, point)) {
+    if (blockType !== BlockType.Paragraph) {
+      handleNonParagraphBlockBackspaceAndEnterWithTxn(editor, sharedRoot, block, point);
       return;
     }
+
   }
 
   const { operations, select } = getSplitBlockOperations(sharedRoot, block, startOffset);

frontend/appflowy_web_app/src/components/_shared/image-upload/Unsplash.tsx

@@ -89,7 +89,7 @@ export function Unsplash ({ onDone, onEscape }: { onDone?: (value: string) => vo
     <div
       tabIndex={0}
       onKeyDown={handleKeyDown}
-      className={'flex h-[460px] flex-col gap-4 px-4 pb-4'}
+      className={'flex h-fit flex-col gap-4 px-4 pb-4'}
     >
       <TextField
         autoFocus

frontend/appflowy_web_app/src/components/_shared/outline/utils.ts

@@ -58,6 +58,28 @@ export function filterOutViewsByLayout (views: View[], layout: ViewLayout): View
   return filterOut(views);
 }
 
+export function filterViewsByCondition (views: View[], condition: (view: View) => boolean): View[] {
+  const filter = (views: View[]): View[] => {
+    let result: View[] = [];
+
+    for (const view of views) {
+      if (condition(view)) {
+        result.push(view);
+      }
+
+      if (view.children) {
+        const filteredChildren = filter(view.children);
+
+        result = result.concat(filteredChildren);
+      }
+    }
+
+    return result;
+  };
+
+  return filter(views);
+}
+
 export function filterOutByCondition (views: View[], condition: (view: View) => {
   remove: boolean;
 }): View[] {

frontend/appflowy_web_app/src/components/app/ViewModal.tsx

@@ -133,7 +133,12 @@ function ViewModal ({
 
         <div className={'flex items-center gap-4'}>
           <ShareButton viewId={viewId} />
-          <MoreActions viewId={viewId} />
+          <MoreActions
+            onDeleted={() => {
+              onClose();
+            }}
+            viewId={viewId}
+          />
 
           <Divider
             orientation={'vertical'}

frontend/appflowy_web_app/src/components/app/header/MoreActions.tsx

@@ -7,8 +7,10 @@ import { ReactComponent as MoreIcon } from '@/assets/more.svg';
 
 function MoreActions ({
   viewId,
+  onDeleted,
 }: {
   viewId: string;
+  onDeleted?: () => void;
 }) {
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -56,6 +58,7 @@ function MoreActions ({
             itemClicked={() => {
               handleClose();
             }}
+            onDeleted={onDeleted}
             viewId={viewId}
             movePopoverOrigins={{
               transformOrigin: {

frontend/appflowy_web_app/src/components/app/header/MoreActionsContent.tsx

@@ -8,8 +8,9 @@ import { ReactComponent as DeleteIcon } from '@/assets/trash.svg';
 import { ReactComponent as DuplicateIcon } from '@/assets/duplicate.svg';
 import { ReactComponent as MoveToIcon } from '@/assets/move_to.svg';
 
-function MoreActionsContent ({ itemClicked, viewId, movePopoverOrigins }: {
+function MoreActionsContent ({ itemClicked, viewId, movePopoverOrigins, onDeleted }: {
   itemClicked?: () => void;
+  onDeleted?: () => void;
   viewId: string;
   movePopoverOrigins: Origins
 }) {
@@ -51,9 +52,15 @@ function MoreActionsContent ({ itemClicked, viewId, movePopoverOrigins }: {
       >{t('button.delete')}</Button>
       <DeletePageConfirm
         open={deleteModalOpen}
-        onClose={() => setDeleteModalOpen(false)}
+        onClose={() => {
+          setDeleteModalOpen(false);
+          itemClicked?.();
+        }}
         viewId={viewId}
-        onDeleted={itemClicked}
+        onDeleted={() => {
+          onDeleted?.();
+          itemClicked?.();
+        }}
       />
       <MovePagePopover
         {...movePopoverOrigins}

frontend/appflowy_web_app/src/components/app/outline/ViewItem.tsx

@@ -67,7 +67,7 @@ function ViewItem ({ view, width, level = 0, renderExtra, expandIds, toggleExpan
         style={{
           backgroundColor: selected ? 'var(--fill-list-hover)' : undefined,
           cursor: view.layout === ViewLayout.AIChat ? 'not-allowed' : 'pointer',
-          paddingLeft: view.children?.length ? 0 : 1.125 * (level + 1) + 'em',
+          paddingLeft: view.children?.length ? 0 : 1.25 * (level + 1) + 'em',
         }}
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}

frontend/appflowy_web_app/src/components/app/view-actions/AddPageActions.tsx

@@ -7,8 +7,9 @@ import CircularProgress from '@mui/material/CircularProgress';
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function AddPageActions ({ view }: {
-  view: View
+function AddPageActions ({ view, onClose }: {
+  view: View;
+  onClose: () => void;
 }) {
   const { t } = useTranslation();
   const {
@@ -36,7 +37,11 @@ function AddPageActions ({ view }: {
     }
   }, [addPage, openPageModal, t, view.view_id]);
 
-  const actions = useMemo(() => [
+  const actions: {
+    label: string;
+    icon: React.ReactNode;
+    onClick: (e: React.MouseEvent) => void;
+  }[] = useMemo(() => [
     {
       label: t('document.menuName'),
       icon: <ViewIcon
@@ -55,7 +60,10 @@ function AddPageActions ({ view }: {
         <Button
           key={action.label}
           size={'small'}
-          onClick={action.onClick}
+          onClick={(e) => {
+            action.onClick(e);
+            onClose();
+          }}
           className={'px-3 py-1 justify-start'}
           color={'inherit'}
           startIcon={action.icon}

frontend/appflowy_web_app/src/components/app/view-actions/DeletePageConfirm.tsx

@@ -1,7 +1,8 @@
 import { NormalModal } from '@/components/_shared/modal';
 import { notify } from '@/components/_shared/notify';
+import { filterViewsByCondition } from '@/components/_shared/outline/utils';
 import { useAppHandlers, useAppView } from '@/components/app/app.hooks';
-import React from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 function DeletePageConfirm ({ open, onClose, viewId, onDeleted }: {
@@ -17,7 +18,7 @@ function DeletePageConfirm ({ open, onClose, viewId, onDeleted }: {
   } = useAppHandlers();
   const { t } = useTranslation();
 
-  const handleOk = async () => {
+  const handleOk = useCallback(async () => {
     if (!view) return;
     setLoading(true);
     try {
@@ -30,12 +31,27 @@ function DeletePageConfirm ({ open, onClose, viewId, onDeleted }: {
     } finally {
       setLoading(false);
     }
-  };
+  }, [deletePage, onClose, onDeleted, view, viewId]);
+
+  const hasPublished = useMemo(() => {
+    const publishedView = filterViewsByCondition(view?.children || [], v => v.is_published);
+
+    return view?.is_published || !!publishedView.length;
+  }, [view]);
+
+  useEffect(() => {
+    if (!hasPublished && open) {
+      void handleOk();
+    }
+  }, [handleOk, hasPublished, open]);
+
+  if (!hasPublished) return null;
 
   return (
     <NormalModal
       okLoading={loading}
       keepMounted={false}
+      disableRestoreFocus={true}
       okText={t('button.delete')}
       cancelText={t('button.cancel')}
       open={open}

frontend/appflowy_web_app/src/components/app/view-actions/ViewActions.tsx

@@ -73,7 +73,12 @@ export function ViewActions ({ view, hovered }: {
     if (!popoverType) return null;
 
     if (popoverType.type === 'add') {
-      return <AddPageActions view={view} />;
+      return <AddPageActions
+        onClose={() => {
+          handleClosePopover();
+        }}
+        view={view}
+      />;
     }
 
     if (popoverType.category === 'space') {

frontend/appflowy_web_app/src/components/editor/Editable.tsx

@@ -1,18 +1,20 @@
 import { YjsEditor } from '@/application/slate-yjs';
+import { CustomEditor } from '@/application/slate-yjs/command';
 import { ensureBlockText } from '@/application/slate-yjs/utils/yjsOperations';
+import { BlockType } from '@/application/types';
 import { BlockPopoverProvider } from '@/components/editor/components/block-popover/BlockPopoverContext';
 import { useDecorate } from '@/components/editor/components/blocks/code/useDecorate';
 import { Leaf } from '@/components/editor/components/leaf';
+import { PanelProvider } from '@/components/editor/components/panels/PanelsContext';
 import { useEditorContext } from '@/components/editor/EditorContext';
 import { useShortcuts } from '@/components/editor/shortcut.hooks';
 import { getTextCount } from '@/utils/word';
+import { Skeleton } from '@mui/material';
 import { debounce } from 'lodash-es';
 import React, { lazy, Suspense, useCallback, useEffect, useMemo } from 'react';
-import { BaseRange, Editor, NodeEntry, Range } from 'slate';
+import { BaseRange, Editor, NodeEntry, Range, Element as SlateElement } from 'slate';
 import { Editable, RenderElementProps, useSlate } from 'slate-react';
 import { Element } from './components/element';
-import { Skeleton } from '@mui/material';
-import { PanelProvider } from '@/components/editor/components/panels/PanelsContext';
 
 const EditorOverlay = lazy(() => import('@/components/editor/EditorOverlay'));
 
@@ -107,7 +109,7 @@ const EditorEditable = () => {
 
             return [...codeDecoration, ...decoration];
           }}
-          className={'outline-none scroll-mb-[100px] scroll-mt-[300px] mb-36 min-w-0 max-w-full w-[988px] max-sm:px-6 px-24 focus:outline-none'}
+          className={'outline-none scroll-mb-[100px] scroll-mt-[300px] pb-36 min-w-0 max-w-full w-[988px] max-sm:px-6 px-24 focus:outline-none'}
           renderLeaf={Leaf}
           renderElement={renderElement}
           readOnly={readOnly}
@@ -116,6 +118,17 @@ const EditorEditable = () => {
           autoComplete={'off'}
           onCompositionStart={onCompositionStart}
           onKeyDown={onKeyDown}
+          onClick={e => {
+            const currentTarget = e.currentTarget as HTMLElement;
+            const bottomArea = currentTarget.getBoundingClientRect().bottom - 36 * 4;
+
+            if (e.clientY > bottomArea) {
+              const lastBlockId = (editor.children[editor.children.length - 1] as SlateElement).blockId as string;
+
+              if (!lastBlockId) return;
+              CustomEditor.addBelowBlock(editor as YjsEditor, lastBlockId, BlockType.Paragraph, {});
+            }
+          }}
         />
         {!readOnly &&
           <Suspense><EditorOverlay /></Suspense>

frontend/appflowy_web_app/src/components/editor/components/block-popover/ImageBlockPopoverContent.tsx

@@ -93,7 +93,7 @@ function ImageBlockPopoverContent ({
           />;
         })}
       </ViewTabs>
-      <div className={'pt-4'}>
+      <div className={'pt-4 appflowy-scroller max-h-[400px] overflow-y-auto'}>
         {tabOptions.map((tab, index) => {
           const { key, panel } = tab;
 

frontend/appflowy_web_app/src/components/editor/components/blocks/text/Placeholder.tsx

@@ -28,7 +28,11 @@ function Placeholder ({ node, ...attributes }: { node: Element; className?: stri
   }, [editor, node]);
 
   const className = useMemo(() => {
-    return `text-placeholder select-none ${attributes.className ?? ''}`;
+    const classList = attributes.className?.split(' ') ?? [];
+
+    classList.push('text-placeholder select-none');
+
+    return classList.join(' ');
   }, [attributes.className]);
 
   const unSelectedPlaceholder = useMemo(() => {
@@ -79,7 +83,6 @@ function Placeholder ({ node, ...attributes }: { node: Element; className?: stri
         }
       }
 
-      case BlockType.CalloutBlock:
       case BlockType.CodeBlock:
         return t('editor.typeSomething');
       default: