Skip to content

Commit 31ca179

Browse files
qinluheqinluhe
committed
fix: support toggle on publish
1 parent b6531e0 commit 31ca179

File tree

9 files changed

+71
-46
lines changed

9 files changed

+71
-46
lines changed

‎src/application/slate-yjs/command/index.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,7 @@ export const CustomEditor = {
7878
},
7979

8080
setBlockData<T = BlockData>(editor: YjsEditor, blockId: string, updateData: T, select?: boolean) {
81-
82-
if(editor.readOnly) {
83-
return;
84-
}
85-
81+
8682
const block = getBlock(blockId, editor.sharedRoot);
8783
const oldData = dataStringTOJson(block.get(YjsEditorKey.block_data));
8884
const newData = {

‎src/components/_shared/emoji-picker/EmojiPicker.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,22 @@ interface Props {
1111
onEscape?: () => void;
1212
defaultEmoji?: string;
1313
hideRemove?: boolean;
14+
size?: [number, number];
1415
}
1516

16-
export function EmojiPicker ({ defaultEmoji, onEscape, ...props }: Props) {
17+
export function EmojiPicker({ defaultEmoji, onEscape, size, ...props }: Props) {
1718
const { skin, onSkinChange, emojiCategories, setSearchValue, searchValue, onSelect, loading, isEmpty } =
1819
useLoadEmojiData(props);
1920

2021
return (
21-
<div tabIndex={0} className={'emoji-picker flex h-[360px] max-h-[70vh] flex-col p-4 pt-2'}>
22+
<div
23+
style={{
24+
width: size ? size[0] : undefined,
25+
height: size ? size[1] : undefined,
26+
}}
27+
tabIndex={0}
28+
className={'emoji-picker flex h-[360px] max-h-[70vh] flex-col p-4 pt-2'}
29+
>
2230
<EmojiPickerHeader
2331
onEmojiSelect={onSelect}
2432
skin={skin}
@@ -32,7 +40,11 @@ export function EmojiPicker ({ defaultEmoji, onEscape, ...props }: Props) {
3240
<CircularProgress />
3341
</div>
3442
) : isEmpty ? (
35-
<img src={emptyImageSrc} alt={'No data found'} className={'mx-auto h-[200px]'} />
43+
<img
44+
src={emptyImageSrc}
45+
alt={'No data found'}
46+
className={'mx-auto h-[200px]'}
47+
/>
3648
) : (
3749
<EmojiPickerCategories
3850
defaultEmoji={defaultEmoji}

‎src/components/_shared/file-dropzone/FileDropzone.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ interface FileDropzoneProps {
1212
placeholder?: string | React.ReactNode;
1313
}
1414

15-
function FileDropzone ({
15+
function FileDropzone({
1616
onChange,
1717
accept,
1818
multiple,
@@ -26,8 +26,8 @@ function FileDropzone ({
2626
const handleFiles = (files: FileList) => {
2727
const fileArray = Array.from(files);
2828

29-
if (onChange) {
30-
if (!multiple && fileArray.length > 1) {
29+
if(onChange) {
30+
if(!multiple && fileArray.length > 1) {
3131
onChange(fileArray.slice(0, 1));
3232
} else {
3333
onChange(fileArray);
@@ -41,7 +41,7 @@ function FileDropzone ({
4141
event.stopPropagation();
4242
setDragging(false);
4343

44-
if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
44+
if(event.dataTransfer.files && event.dataTransfer.files.length > 0) {
4545
handleFiles(event.dataTransfer.files);
4646
event.dataTransfer.clearData();
4747
}
@@ -64,15 +64,15 @@ function FileDropzone ({
6464
};
6565

6666
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
67-
if (event.target.files) {
67+
if(event.target.files) {
6868
handleFiles(event.target.files);
6969
event.target.value = '';
7070
}
7171
};
7272

7373
return (
7474
<div
75-
className={'w-full cursor-pointer hover:border-fill-active px-4 hover:bg-bg-body h-[160px] rounded-xl border border-dashed border-line-border flex flex-col bg-bg-base'}
75+
className={'w-full cursor-pointer hover:border-fill-active px-4 hover:bg-bg-body min-h-[160px] h-full rounded-xl border border-dashed border-line-border flex flex-col justify-center bg-bg-base'}
7676
onDrop={handleDrop}
7777
onDragOver={handleDragOver}
7878
onDragLeave={handleDragLeave}

‎src/components/_shared/icon-picker/IconPicker.tsx‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,14 @@ const ICONS_PER_ROW = 9;
1515
const ROW_HEIGHT = 42;
1616
const CATEGORY_HEIGHT = 42;
1717

18-
function IconPicker ({
18+
function IconPicker({
1919
onSelect,
2020
onEscape,
21+
size,
2122
}: {
2223
onSelect: (icon: { value: string, color: string, content: string }) => void;
2324
onEscape?: () => void;
25+
size?: [number, number];
2426
}) {
2527
const { t } = useTranslation();
2628
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -36,8 +38,8 @@ function IconPicker ({
3638
> | undefined>(undefined);
3739
const [searchValue, setSearchValue] = React.useState('');
3840
const filteredIcons = React.useMemo(() => {
39-
if (!icons) return {};
40-
if (!searchValue) return icons;
41+
if(!icons) return {};
42+
if(!searchValue) return icons;
4143
const filtered = Object.fromEntries(
4244
Object.entries(icons).map(([category, icons]) => [
4345
category,
@@ -54,7 +56,7 @@ function IconPicker ({
5456
}, [icons, searchValue]);
5557

5658
const rowData = React.useMemo(() => {
57-
if (!filteredIcons) return [];
59+
if(!filteredIcons) return [];
5860

5961
const rows: Array<{
6062
type: 'category' | 'icons';
@@ -69,14 +71,14 @@ function IconPicker ({
6971
}> = [];
7072

7173
Object.entries(filteredIcons).forEach(([category, icons]) => {
72-
if (icons.length === 0) return;
74+
if(icons.length === 0) return;
7375

7476
rows.push({
7577
type: 'category',
7678
category: category.replaceAll('_', ' '),
7779
});
7880

79-
for (let i = 0; i < icons.length; i += ICONS_PER_ROW) {
81+
for(let i = 0; i < icons.length; i += ICONS_PER_ROW) {
8082
rows.push({
8183
type: 'icons',
8284
icons: icons.slice(i, i + ICONS_PER_ROW).map((icon) => ({
@@ -108,7 +110,7 @@ function IconPicker ({
108110
}) => {
109111
const row = data[index];
110112

111-
if (row.type === 'category') {
113+
if(row.type === 'category') {
112114
return (
113115
<div
114116
style={style}
@@ -119,7 +121,7 @@ function IconPicker ({
119121
);
120122
}
121123

122-
if (!row.icons) return null;
124+
if(!row.icons) return null;
123125

124126
return (
125127
<div
@@ -152,7 +154,13 @@ function IconPicker ({
152154
}, []);
153155

154156
return (
155-
<div className={'flex h-[360px] max-h-[70vh] flex-col p-4 pt-2'}>
157+
<div
158+
style={{
159+
width: size ? size[0] : undefined,
160+
height: size ? size[1] : undefined,
161+
}}
162+
className={'flex h-[360px] max-h-[70vh] flex-col p-4 pt-2'}
163+
>
156164
<div className={'px-0.5 py-2'}>
157165
<div className={'search-input flex items-end justify-between gap-2'}>
158166
<OutlinedInput
@@ -162,7 +170,7 @@ function IconPicker ({
162170
setSearchValue(e.target.value);
163171
}}
164172
onKeyUp={(e) => {
165-
if (e.key === 'Escape' && onEscape) {
173+
if(e.key === 'Escape' && onEscape) {
166174
onEscape();
167175
}
168176
}}
@@ -185,7 +193,7 @@ function IconPicker ({
185193
variant={'outlined'}
186194
color={'inherit'}
187195
className={'h-9 w-9 min-w-[36px] px-0 py-0'}
188-
onClick={async () => {
196+
onClick={async() => {
189197
const icon = await randomIcon();
190198
const color = randomColor(IconColors);
191199

@@ -242,7 +250,7 @@ function IconPicker ({
242250
anchorEl={anchorEl}
243251
onClose={() => setAnchorEl(null)}
244252
onKeyDown={(e) => {
245-
if (e.key === 'Escape') {
253+
if(e.key === 'Escape') {
246254
setAnchorEl(null);
247255
}
248256
}}
@@ -255,12 +263,12 @@ function IconPicker ({
255263
color={'inherit'}
256264
className={'h-9 w-9 min-w-[36px] px-0 py-0'}
257265
onClick={() => {
258-
if (!selectIcon) return;
266+
if(!selectIcon) return;
259267
const [groupName, iconName] = selectIcon.split('/');
260268

261269
const category = icons?.[groupName as ICON_CATEGORY];
262270

263-
if (!category) return;
271+
if(!category) return;
264272

265273
const content = category.find((icon) => icon.name === iconName)?.content;
266274

‎src/components/_shared/image-upload/UploadImage.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const ALLOWED_IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'we
88

99
export function UploadImage({ onDone, uploadAction }: {
1010
onDone?: (url: string) => void;
11-
uploadAction?: (file: File) => Promise<string>
11+
uploadAction?: (file: File) => Promise<string>;
1212
}) {
1313
const { t } = useTranslation();
1414
const [loading, setLoading] = React.useState(false);
@@ -38,7 +38,9 @@ export function UploadImage({ onDone, uploadAction }: {
3838
}, [onDone, uploadAction]);
3939

4040
return (
41-
<div className={'px-4 pb-4'}>
41+
<div
42+
className={'px-4 pb-4 h-full'}
43+
>
4244
<FileDropzone
4345
placeholder={t('fileDropzone.dropFile')}
4446
onChange={handleFileChange}

‎src/components/_shared/outline/OutlineItem.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function OutlineItem({ view, level = 0, width, navigateToView, selectedViewId, v
3333
const renderItem = useCallback((item: View) => {
3434
return (
3535
<div
36-
className={`flex ${variant === UIVariant.App ? 'folder-view-item' : ''} h-fit my-0.5 w-full justify-between gap-2`}
36+
className={`flex ${variant === UIVariant.App ? 'folder-view-item' : ''} h-fit my-0.5 w-full justify-between`}
3737
>
3838
<div
3939
style={{
@@ -42,7 +42,7 @@ function OutlineItem({ view, level = 0, width, navigateToView, selectedViewId, v
4242
}}
4343
id={`${variant}-view-${item.view_id}`}
4444
className={
45-
'flex items-center min-h-[34px] w-full gap-0.5 rounded-[8px] py-1.5 px-0.5 text-sm hover:bg-content-blue-50 focus:bg-content-blue-50 focus:outline-none'
45+
'flex items-center min-h-[30px] w-full gap-0.5 rounded-[8px] px-0.5 text-sm hover:bg-content-blue-50 focus:bg-content-blue-50 focus:outline-none'
4646
}
4747
>
4848
{item.children?.length ? getIcon() : null}
@@ -54,7 +54,7 @@ function OutlineItem({ view, level = 0, width, navigateToView, selectedViewId, v
5454
level={level}
5555
setIsExpanded={setIsExpanded}
5656
/>
57-
{item.is_private && <PrivateIcon className={'h-4 w-4 text-text-caption'}/>}
57+
{item.is_private && <PrivateIcon className={'h-4 w-4 text-text-caption'} />}
5858
</div>
5959
</div>
6060
);
@@ -64,7 +64,7 @@ function OutlineItem({ view, level = 0, width, navigateToView, selectedViewId, v
6464

6565
const renderChildren = useMemo(() => {
6666
return <div
67-
className={'flex transform flex-col gap-2 transition-all'}
67+
className={'flex transform flex-col transition-all'}
6868
style={{
6969
display: isExpanded ? 'block' : 'none',
7070
}}

‎src/components/_shared/view-icon/ChangeIconPopover.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ function ChangeIconPopover({
116116
value={value}
117117
>
118118
<IconPicker
119+
size={[400, 360]}
119120
onEscape={handleClose}
120121
onSelect={(icon) => {
121122
onSelectIcon?.({
@@ -131,6 +132,7 @@ function ChangeIconPopover({
131132
value={value}
132133
>
133134
<EmojiPicker
135+
size={[400, 360]}
134136
onEmojiSelect={(emoji: string) => {
135137
onSelectIcon?.({
136138
ty: ViewIconType.Emoji,
@@ -145,7 +147,13 @@ function ChangeIconPopover({
145147
index={'upload'}
146148
value={value}
147149
>
148-
<div className={'pt-4 relative pb-2'}>
150+
<div
151+
style={{
152+
width: 400,
153+
height: 360,
154+
}}
155+
className={'relative pt-4 pb-2'}
156+
>
149157
<UploadImage
150158
onDone={(url) => {
151159
onSelectIcon?.({

‎src/components/editor/components/blocks/toggle-list/ToggleIcon.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,17 @@ import { CustomEditor } from '@/application/slate-yjs/command';
33
import { ToggleListNode } from '@/components/editor/editor.type';
44
import React, { useCallback } from 'react';
55
import { ReactComponent as ExpandSvg } from '@/assets/drop_menu_show.svg';
6-
import { useReadOnly, useSlateStatic } from 'slate-react';
7-
import { Element } from 'slate';
6+
import { useSlateStatic } from 'slate-react';
87

9-
function ToggleIcon ({ block, className }: { block: ToggleListNode; className: string }) {
8+
function ToggleIcon({ block, className }: { block: ToggleListNode; className: string }) {
109
const { collapsed } = block.data;
1110
const editor = useSlateStatic();
12-
const readOnly = useReadOnly() || editor.isElementReadOnly(block as unknown as Element);
1311

1412
const handleClick = useCallback((e: React.MouseEvent) => {
15-
if (readOnly) {
16-
return;
17-
}
18-
1913
e.stopPropagation();
2014
e.preventDefault();
2115
CustomEditor.toggleToggleList(editor as YjsEditor, block.blockId);
22-
}, [block.blockId, editor, readOnly]);
16+
}, [block.blockId, editor]);
2317

2418
return (
2519
<span
@@ -31,7 +25,7 @@ function ToggleIcon ({ block, className }: { block: ToggleListNode; className: s
3125
e.preventDefault();
3226
handleClick(e);
3327
}}
34-
className={`${className} ${readOnly ? '' : 'cursor-pointer hover:text-fill-default'} pr-1 toggle-icon`}
28+
className={`${className} cursor-pointer hover:text-fill-default pr-1 toggle-icon`}
3529
>
3630
{collapsed ? <ExpandSvg className={'-rotate-90 transform'} /> : <ExpandSvg />}
3731
</span>

‎src/components/login/Login.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,12 @@ export function Login({ redirectTo }: { redirectTo: string }) {
5151
.
5252
</div>
5353
<Divider className={'w-[300px] max-w-full border-line-divider'} />
54-
<div className={'text-text-title text-xs font-medium cursor-pointer opacity-60 hover:opacity-100 w-full gap-2 flex items-center justify-center'}>
54+
<div
55+
onClick={() => {
56+
window.location.href = 'https://appflowy.com';
57+
}}
58+
className={'text-text-title text-xs font-medium cursor-pointer opacity-60 hover:opacity-100 w-full gap-2 flex items-center justify-center'}
59+
>
5560
<span>{t('web.visitOurWebsite')}</span>
5661
<ArrowRight className={'w-4 h-4'} />
5762
</div>

0 commit comments

Comments
 (0)