tiptap: replace modal with sidesheet

packages/client/src/components/emoji-picker/index.module.scss

@@ -5,7 +5,6 @@
 
 .listWrap {
   display: flex;
-  width: 320px;
   padding: 0;
   margin: 0;
   list-style: none;

packages/client/src/components/emoji-picker/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Popover, Typography, Modal } from '@douyinfe/semi-ui';
+import { Popover, Typography, SideSheet } from '@douyinfe/semi-ui';
 import { EXPRESSIONES, GESTURES, SYMBOLS, OBJECTS, ACTIVITIES, SKY_WEATHER } from './constants';
 import { createKeysLocalStorageLRUCache } from 'helpers/lru-cache';
 import { useToggle } from 'hooks/use-toggle';
@@ -61,10 +61,10 @@ export const EmojiPicker: React.FC<IProps> = ({ onSelectEmoji, children }) => {
 
   const content = useMemo(
     () => (
-      <div className={styles.wrap} style={{ paddingBottom: isMobile ? 24 : 0 }}>
+      <div className={styles.wrap} style={{ padding: isMobile ? '24px 0' : 0 }}>
         {renderedList.map((item, index) => {
           return (
-            <div key={item.title} className={styles.sectionWrap}>
+            <div key={item.title}>
               <Title heading={6} style={{ margin: `${index === 0 ? 0 : 16}px 0 6px` }}>
                 {item.title}
               </Title>
@@ -93,16 +93,17 @@ export const EmojiPicker: React.FC<IProps> = ({ onSelectEmoji, children }) => {
     <span>
       {isMobile ? (
         <>
-          <Modal
+          <SideSheet
-            centered
+            headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
-            title="表情"
+            placement="bottom"
+            title={'表情'}
             visible={visible}
-            footer={null}
+            onCancel={toggleVisible}
-            onCancel={() => toggleVisible(false)}
+            height={370}
-            style={{ maxWidth: '96vw' }}
+            mask={false}
           >
             {content}
-          </Modal>
+          </SideSheet>
           <span onMouseDown={() => toggleVisible(true)}>{children}</span>
         </>
       ) : (
@@ -113,7 +114,7 @@ export const EmojiPicker: React.FC<IProps> = ({ onSelectEmoji, children }) => {
           position="bottomLeft"
           visible={visible}
           onVisibleChange={toggleVisible}
-          content={content}
+          content={<div style={{ width: 320 }}>{content}</div>}
         >
           {children}
         </Popover>

packages/client/src/tiptap/components/color-picker/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Dropdown, Typography, Modal } from '@douyinfe/semi-ui';
+import { Dropdown, Typography, Modal, SideSheet, Row, Col } from '@douyinfe/semi-ui';
 import styles from './style.module.scss';
 import { useWindowSize } from 'hooks/use-window-size';
 import { useToggle } from 'hooks/use-toggle';
@@ -89,7 +89,7 @@ export const ColorPicker: React.FC<{
 
   const content = useMemo(
     () => (
-      <div style={{ padding: isMobile ? '0 0 24px' : '12px 16px' }}>
+      <div style={{ padding: isMobile ? '24px 0 24px' : '12px 16px', width: isMobile ? 'auto' : 272 }}>
         <div className={styles.emptyWrap} onClick={() => onSetColor(null)}>
           <span></span>
           <Text>无颜色</Text>
@@ -115,16 +115,17 @@ export const ColorPicker: React.FC<{
     <span>
       {isMobile ? (
         <>
-          <Modal
+          <SideSheet
-            centered
+            headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+            placement="bottom"
             title={title}
             visible={visible}
-            footer={null}
+            onCancel={toggleVisible}
-            onCancel={() => toggleVisible(false)}
+            height={284}
-            style={{ maxWidth: '96vw', width: 288 }}
+            mask={false}
           >
             {content}
-          </Modal>
+          </SideSheet>
           <span style={{ display: 'inline-block' }} onMouseDown={() => toggleVisible(true)}>
             {children}
           </span>

packages/client/src/tiptap/components/color-picker/style.module.scss

@@ -1,6 +1,5 @@
 .emptyWrap {
   display: flex;
-  width: 240px;
   cursor: pointer;
   border: 1px solid transparent;
   flex-wrap: nowrap;
@@ -35,7 +34,6 @@
 .colorWrap {
   display: flex;
   flex-wrap: wrap;
-  width: 240px;
   margin-top: 8px;
 
   .colorItem {

packages/client/src/tiptap/editor/menus/search/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Popover, Button, Typography, Input, Space, Modal } from '@douyinfe/semi-ui';
+import { Popover, Button, Typography, Input, Space, SideSheet } from '@douyinfe/semi-ui';
 import { Editor } from 'tiptap/editor';
 import { useWindowSize } from 'hooks/use-window-size';
 import { useToggle } from 'hooks/use-toggle';
@@ -64,7 +64,7 @@ export const Search: React.FC<{ editor: Editor }> = ({ editor }) => {
   }, [editor]);
 
   const content = (
-    <div style={{ paddingBottom: isMobile ? 24 : 0 }}>
+    <div style={{ padding: isMobile ? '24px 0' : 0 }}>
       <div style={{ marginBottom: 12 }}>
         <Text type="tertiary">查找</Text>
         <Input
@@ -110,16 +110,17 @@ export const Search: React.FC<{ editor: Editor }> = ({ editor }) => {
     <span>
       {isMobile ? (
         <>
-          <Modal
+          <SideSheet
-            centered
+            headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
-            title="查找替换"
+            placement="bottom"
+            title={'查找替换'}
             visible={visible}
-            footer={null}
+            onCancel={toggleVisible}
-            onCancel={() => toggleVisible(false)}
+            height={280}
-            style={{ maxWidth: '96vw' }}
+            mask={false}
           >
             {content}
-          </Modal>
+          </SideSheet>
           {btn}
         </>
       ) : (