Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-11 23:26:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

merge branch develop into branch feat/doublelink220820

Browse Source
This commit is contained in:
xiaodong zuo
2022-09-06 10:01:09 +08:00
parent 97007f3bb5 9c619ea22f
commit 9a0a2a590a
20 changed files with 284 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/components/editor-plugins/src/menu/inline-menu/config.ts
+8 -1
View File
@@ -12,13 +12,20 @@ export const INLINE_MENU_UI_TYPES = {
} as const;
/** inline menu item { key : display-name } */
export const inlineMenuShortcuts = {
export const MacInlineMenuShortcuts = {
textBold: '⌘+B',
textItalic: '⌘+I',
textStrikethrough: '⌘+S',
link: '⌘+K',
[Protocol.Block.Type.code]: '⌘+E',
};
export const WinInlineMenuShortcuts = {
textBold: 'Ctrl+B',
textItalic: 'Ctrl+I',
textStrikethrough: 'Ctrl+S',
link: 'Ctrl+K',
[Protocol.Block.Type.code]: 'Ctrl+E',
};
export const inlineMenuNames = {
currentText: 'TEXT SIZE',
[Protocol.Block.Type.heading1]: 'Heading 1',
libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx
+100 -100
View File
@@ -1,22 +1,24 @@
import React, { useState, useCallback } from 'react';
import style9 from 'style9';
import {
Popover,
styled,
type SvgIconProps,
Tooltip,
} from '@toeverything/components/ui';
import {
fontBgColorPalette,
fontColorPalette,
} from '@toeverything/components/common';
import { ArrowDropDownIcon } from '@toeverything/components/icons';
import type { DropdownItemType, WithEditorSelectionType } from '../types';
import {
inlineMenuNamesKeys,
Popover,
styled,
Tooltip,
type SvgIconProps,
} from '@toeverything/components/ui';
import { uaHelper } from '@toeverything/utils';
import { useCallback, useState } from 'react';
import style9 from 'style9';
import {
inlineMenuNamesForFontColor,
inlineMenuShortcuts,
inlineMenuNamesKeys,
MacInlineMenuShortcuts,
WinInlineMenuShortcuts,
} from '../config';
import type { DropdownItemType, WithEditorSelectionType } from '../types';
type MenuDropdownItemProps = DropdownItemType & WithEditorSelectionType;
@@ -36,102 +38,100 @@ export const MenuDropdownItem = ({
set_anchor_ele(null);
}, []);
//@ts-ignore
const shortcut = inlineMenuShortcuts[nameKey];
const shortcut = uaHelper.isMacOs
? //@ts-ignore
MacInlineMenuShortcuts[nameKey]
: //@ts-ignore
WinInlineMenuShortcuts[nameKey];
return (
<>
<Popover
trigger="click"
placement="bottom-start"
<Popover
trigger="click"
placement="bottom-start"
content={
<div className={styles('dropdownContainer')}>
{children.map(item => {
const {
name,
icon: ItemIcon,
onClick,
nameKey: itemNameKey,
} = item;
const StyledIcon = withStylesForIcon(ItemIcon);
return (
<button
className={styles('dropdownItem')}
key={name}
onClick={() => {
if (
onClick &&
selectionInfo?.anchorNode?.id
) {
onClick({
editor,
type: itemNameKey,
anchorNodeId:
selectionInfo?.anchorNode?.id,
});
}
handle_close_dropdown_menu();
}}
>
<StyledIcon
fontColor={
nameKey ===
inlineMenuNamesKeys.currentFontColor
? fontColorPalette[
inlineMenuNamesForFontColor[
itemNameKey as keyof typeof inlineMenuNamesForFontColor
]
]
: nameKey ===
inlineMenuNamesKeys.currentFontBackground
? fontBgColorPalette[
inlineMenuNamesForFontColor[
itemNameKey as keyof typeof inlineMenuNamesForFontColor
]
]
: ''
}
// fontBgColor={
// nameKey=== inlineMenuNamesKeys.currentFontBackground ? fontBgColorPalette[
// inlineMenuNamesForFontColor[itemNameKey] as keyof typeof fontBgColorPalette
// ]:''
// }
/>
{/* <ItemIcon sx={{ width: 20, height: 20 }} /> */}
<span className={styles('dropdownItemItext')}>
{name}
</span>
</button>
);
})}
</div>
}
>
<Tooltip
content={
<div className={styles('dropdownContainer')}>
{children.map(item => {
const {
name,
icon: ItemIcon,
onClick,
nameKey: itemNameKey,
} = item;
const StyledIcon = withStylesForIcon(ItemIcon);
return (
<button
className={styles('dropdownItem')}
key={name}
onClick={() => {
if (
onClick &&
selectionInfo?.anchorNode?.id
) {
onClick({
editor,
type: itemNameKey,
anchorNodeId:
selectionInfo?.anchorNode
?.id,
});
}
handle_close_dropdown_menu();
}}
>
<StyledIcon
fontColor={
nameKey ===
inlineMenuNamesKeys.currentFontColor
? fontColorPalette[
inlineMenuNamesForFontColor[
itemNameKey as keyof typeof inlineMenuNamesForFontColor
]
]
: nameKey ===
inlineMenuNamesKeys.currentFontBackground
? fontBgColorPalette[
inlineMenuNamesForFontColor[
itemNameKey as keyof typeof inlineMenuNamesForFontColor
]
]
: ''
}
// fontBgColor={
// nameKey=== inlineMenuNamesKeys.currentFontBackground ? fontBgColorPalette[
// inlineMenuNamesForFontColor[itemNameKey] as keyof typeof fontBgColorPalette
// ]:''
// }
/>
{/* <ItemIcon sx={{ width: 20, height: 20 }} /> */}
<span
className={styles('dropdownItemItext')}
>
{name}
</span>
</button>
);
})}
<div style={{ padding: '2px 4px' }}>
<p>{name}</p>
{shortcut && <p>{shortcut}</p>}
</div>
}
placement="top"
trigger="hover"
>
<Tooltip
content={
<div style={{ padding: '2px 4px' }}>
<p>{name}</p>
{shortcut && <p>{shortcut}</p>}
</div>
}
placement="top"
trigger="hover"
<button
className={styles('currentDropdownButton')}
aria-label={name}
>
<button
className={styles('currentDropdownButton')}
aria-label={name}
>
<MenuIcon sx={{ width: 20, height: 20 }} />
<ArrowDropDownIcon sx={{ width: 20, height: 20 }} />
</button>
</Tooltip>
</Popover>
</>
<MenuIcon sx={{ width: 20, height: 20 }} />
<ArrowDropDownIcon sx={{ width: 20, height: 20 }} />
</button>
</Tooltip>
</Popover>
);
};
libs/components/editor-plugins/src/menu/inline-menu/menu-item/IconItem.tsx
+7 -2
View File
@@ -1,7 +1,8 @@
import { Tooltip } from '@toeverything/components/ui';
import { uaHelper } from '@toeverything/utils';
import React, { useCallback } from 'react';
import style9 from 'style9';
import { inlineMenuNamesKeys, inlineMenuShortcuts } from '../config';
import { inlineMenuNamesKeys, WinInlineMenuShortcuts } from '../config';
import type { IconItemType, WithEditorSelectionType } from '../types';
type MenuIconItemProps = IconItemType & WithEditorSelectionType;
@@ -36,7 +37,11 @@ export const MenuIconItem = ({
);
//@ts-ignore
const shortcut = inlineMenuShortcuts[nameKey];
const shortcut = uaHelper.isMacOs
? //@ts-ignore
MacInlineMenuShortcuts[nameKey]
: //@ts-ignore
WinInlineMenuShortcuts[nameKey];
return (
<Tooltip