Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-17 01:56:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into feature/remove-react-fc

Browse Source
This commit is contained in:
DarkSky
2022-08-12 19:18:57 +08:00
committed by GitHub
parent 495d9ccc0c ebed12dbec
commit 8b7d8dc348
64 changed files with 1953 additions and 1059 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx
+2 -1
View File
@@ -40,8 +40,9 @@ const todoIsEmpty = (contentValue: ContentColumnValue): boolean => {
(todoValue.length === 1 && !todoValue[0]['text'])
);
};
const BulletLeft = styled('div')(() => ({
const BulletLeft = styled('div')(({ theme }) => ({
height: '22px',
color: theme.affine.typography.body1.color,
}));
export const BulletView = ({ block, editor }: CreateView) => {
// block.remove();
libs/components/editor-blocks/src/blocks/code/CodeView.tsx
+15 -2
View File
@@ -52,6 +52,8 @@ import {
BlockPendantProvider,
} from '@toeverything/components/editor-core';
import { copyToClipboard } from '@toeverything/utils';
import { DuplicateIcon } from '@toeverything/components/icons';
interface CreateCodeView extends CreateView {
style9?: StyleWithAtRules;
containerClassName?: string;
@@ -117,10 +119,21 @@ const CodeBlock = styled('div')(({ theme }) => ({
justifyContent: 'space-between',
},
'.copy-block': {
padding: '6px 10px',
padding: '0px 10px',
backgroundColor: '#fff',
height: '32px',
display: 'flex',
width: '90px',
justifyContent: 'center',
alignItems: 'center',
color: '#4C6275',
fontSize: '14px',
borderRadius: theme.affine.shape.borderRadius,
cursor: 'pointer',
svg: {
marginRight: '4px',
display: 'block',
},
},
'.cm-focused': {
outline: 'none !important',
@@ -187,7 +200,7 @@ export const CodeView = ({ block, editor }: CreateCodeView) => {
</div>
<div>
<div className="copy-block" onClick={copyCode}>
Copy
<DuplicateIcon></DuplicateIcon>Copy
</div>
</div>
</div>
libs/components/editor-blocks/src/blocks/grid/Grid.tsx
+1 -1
View File
@@ -261,7 +261,7 @@ const GridContainer = styled('div')<{
display: 'flex',
alignItems: 'stretch',
borderRadius: '10px',
border: '1px solid #FFF',
border: '1px solid transparent',
minWidth: `${gridItemMinWidth}%`,
[`&:hover .${GRID_ITEM_CONTENT_CLASS_NAME}`]: {
borderColor: theme.affine.palette.borderColor,
libs/components/editor-blocks/src/blocks/text/TextView.tsx
+12 -7
View File
@@ -113,13 +113,18 @@ export const TextView = ({
block.id,
'end'
);
const value = [
...preNode.getProperty('text').value,
...block.getProperty('text').value,
];
await preNode.setProperty('text', {
value,
});
if (
block.getProperty('text').value[0] &&
block.getProperty('text').value[0]?.text !== ''
) {
const value = [
...preNode.getProperty('text').value,
...block.getProperty('text').value,
];
await preNode.setProperty('text', {
value,
});
}
await preNode.append(...children);
await block.remove();
editor.suspend(false);
libs/components/editor-blocks/src/components/style-container/index.tsx
+1
View File
@@ -5,6 +5,7 @@ export const List = styled('div')(({ theme }) => ({
'.checkBoxContainer': {
marginRight: '4px',
lineHeight: theme.affine.typography.body1.lineHeight,
color: theme.affine.typography.body1.color,
},
'.textContainer': {
flex: 1,
libs/components/editor-blocks/src/components/text-manage/TextManage.tsx
+60 -67
View File
@@ -42,16 +42,19 @@ const TextBlockContainer = styled(Text)(({ theme }) => ({
fontFamily: theme.affine.typography.body1.fontFamily,
color: theme.affine.typography.body1.color,
letterSpacing: '0.1px',
a: {
color: '#3e6fdb',
},
}));
const findSlice = (arr: string[], p: string, q: string) => {
let should_include = false;
let shouldInclude = false;
return arr.filter(block => {
if (block === p || block === q) {
should_include = !should_include;
shouldInclude = !shouldInclude;
return true;
} else {
return should_include;
return shouldInclude;
}
});
};
@@ -115,11 +118,8 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
(ref as MutableRefObject<ExtendedTextUtils>) || defaultRef;
const properties = block.getProperties();
// const [is_select, set_is_select] = useState<boolean>();
// useOnSelect(block.id, (is_select: boolean) => {
// set_is_select(is_select);
// });
const on_text_view_set_selection = (selection: Range | Point) => {
const onTextViewSetSelection = (selection: Range | Point) => {
if (selection instanceof Point) {
//do some thing
} else {
@@ -128,18 +128,18 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
};
// block = await editor.commands.blockCommands.createNextBlock(block.id,)
const on_text_view_active = useCallback(
const onTextViewActive = useCallback(
(point: CursorTypes) => {
// TODO code to be optimized
if (textRef.current) {
const end_selection = textRef.current.getEndSelection();
const start_selection = textRef.current.getStartSelection();
const endSelection = textRef.current.getEndSelection();
const startSelection = textRef.current.getStartSelection();
if (point === 'start') {
textRef.current.setSelection(start_selection);
textRef.current.setSelection(startSelection);
return;
}
if (point === 'end') {
textRef.current.setSelection(end_selection);
textRef.current.setSelection(endSelection);
return;
}
try {
@@ -154,24 +154,24 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
} else {
blockTop = blockDomStyle.top + 5;
}
const end_position = ReactEditor.toDOMRange(
const endPosition = ReactEditor.toDOMRange(
textRef.current.editor,
end_selection
endSelection
)
.getClientRects()
.item(0);
const start_position = ReactEditor.toDOMRange(
const startPosition = ReactEditor.toDOMRange(
textRef.current.editor,
start_selection
startSelection
)
.getClientRects()
.item(0);
if (end_position.left <= point.x) {
textRef.current.setSelection(end_selection);
if (endPosition.left <= point.x) {
textRef.current.setSelection(endSelection);
return;
}
if (start_position.left >= point.x) {
textRef.current.setSelection(start_selection);
if (startPosition.left >= point.x) {
textRef.current.setSelection(startSelection);
return;
}
let range: globalThis.Range;
@@ -189,7 +189,7 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
range = document.createRange();
range.setStart(caret.offsetNode, caret.offset);
}
const slate_rang = ReactEditor.toSlateRange(
const slateRang = ReactEditor.toSlateRange(
textRef.current.editor,
range,
{
@@ -197,19 +197,19 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
suppressThrow: true,
}
);
textRef.current.setSelection(slate_rang);
textRef.current.setSelection(slateRang);
}
} catch (e) {
console.log('e: ', e);
textRef.current.setSelection(end_selection);
textRef.current.setSelection(endSelection);
}
}
},
[textRef]
);
useOnSelectActive(block.id, on_text_view_active);
useOnSelectSetSelection<'Range'>(block.id, on_text_view_set_selection);
useOnSelectActive(block.id, onTextViewActive);
useOnSelectSetSelection<'Range'>(block.id, onTextViewSetSelection);
useEffect(() => {
if (textRef.current) {
@@ -235,17 +235,17 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
(block.id === lastSelectNodeId && type === 'Range') ||
(type === 'Range' && info)
) {
on_text_view_active('end');
onTextViewActive('end');
} else {
on_text_view_active('start');
onTextViewActive('start');
}
}
} catch (e) {
console.warn('error occured in set active in initialization');
}
}, [block.id, editor.selectionManager, on_text_view_active, textRef]);
}, [block.id, editor.selectionManager, onTextViewActive, textRef]);
const on_text_change: TextProps['handleChange'] = async (
const onTextChange: TextProps['handleChange'] = async (
value,
textStyle
) => {
@@ -266,39 +266,34 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
});
}
};
const get_now_and_pre_rang_position = () => {
window.getSelection().getRangeAt(0);
// const now_range =
// editor.selectionManager.currentSelectInfo?.browserSelection.getRangeAt(
// 0
// );
const now_range = window.getSelection().getRangeAt(0);
let pre_position = null;
const now_position = now_range.getClientRects().item(0);
const getNowAndPreRangPosition = () => {
const nowRange = window.getSelection().getRangeAt(0);
let prePosition = null;
const nowPosition = nowRange.getClientRects().item(0);
try {
if (now_range.startOffset !== 0) {
const pre_rang = document.createRange();
pre_rang.setStart(
now_range.startContainer,
now_range.startOffset + 1
if (nowRange.startOffset !== 0) {
const preRang = document.createRange();
preRang.setStart(
nowRange.startContainer,
nowRange.startOffset + 1
);
pre_rang.setEnd(
now_range.endContainer,
now_range.endOffset + 1
preRang.setEnd(
nowRange.endContainer,
nowRange.endOffset + 1
);
pre_position = pre_rang.getClientRects().item(0);
prePosition = preRang.getClientRects().item(0);
}
} catch (e) {
// console.log(e);
}
return { nowPosition: now_position, prePosition: pre_position };
return { nowPosition: nowPosition, prePosition: prePosition };
};
const onKeyboardUp = (event: React.KeyboardEvent<Element>) => {
// if default event is prevented do noting
// if U want to disable up/down/enter use capture event for preventing
if (!event.isDefaultPrevented()) {
const positions = get_now_and_pre_rang_position();
const positions = getNowAndPreRangPosition();
const prePosition = positions.prePosition;
const nowPosition = positions.nowPosition;
if (prePosition) {
@@ -339,7 +334,7 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
// editor.selectionManager.activeNextNode(block.id, 'start');
// return;
if (!event.isDefaultPrevented()) {
const positions = get_now_and_pre_rang_position();
const positions = getNowAndPreRangPosition();
const prePosition = positions.prePosition;
const nowPosition = positions.nowPosition;
// Create the last element range of slate_editor
@@ -395,7 +390,7 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
return false;
}
};
const on_select_all = () => {
const onSelectAll = () => {
const isSelectAll =
textRef.current.isEmpty() || textRef.current.isSelectAll();
if (isSelectAll) {
@@ -405,22 +400,20 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
return false;
};
const on_undo = () => {
const onUndo = () => {
editor.undo();
};
const on_redo = () => {
const onRedo = () => {
editor.redo();
};
const on_keyboard_esc = () => {
const onKeyboardEsc = () => {
if (editor.selectionManager.getSelectedNodesIds().length === 0) {
const active_node_id =
const activeNodeId =
editor.selectionManager.getActivatedNodeId();
if (active_node_id) {
editor.selectionManager.setSelectedNodesIds([
active_node_id,
]);
if (activeNodeId) {
editor.selectionManager.setSelectedNodesIds([activeNodeId]);
ReactEditor.blur(textRef.current.editor);
}
} else {
@@ -428,7 +421,7 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
}
};
const on_shift_click = async (e: MouseEvent) => {
const onShiftClick = async (e: MouseEvent) => {
if (e.shiftKey) {
const activeId = editor.selectionManager.getActivatedNodeId();
if (activeId === block.id) {
@@ -477,16 +470,16 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
className={`${otherOptions.className}`}
currentValue={properties.text.value}
textStyle={properties.textStyle}
handleChange={on_text_change}
handleChange={onTextChange}
handleUp={onKeyboardUp}
handleDown={onKeyboardDown}
handleLeft={onKeyboardLeft}
handleRight={onKeyboardRight}
handleSelectAll={on_select_all}
handleMouseDown={on_shift_click}
handleUndo={on_undo}
handleRedo={on_redo}
handleEsc={on_keyboard_esc}
handleSelectAll={onSelectAll}
handleMouseDown={onShiftClick}
handleUndo={onUndo}
handleRedo={onRedo}
handleEsc={onKeyboardEsc}
{...otherOptions}
/>
);
libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx
+14 -10
View File
@@ -27,7 +27,7 @@ const defaultConfig: WithChildrenConfig = {
const TreeView = forwardRef<
HTMLDivElement,
{ lastItem?: boolean } & ComponentPropsWithRef<'div'>
>(({ lastItem, children, onClick, ...restProps }, ref) => {
>(({ lastItem = false, children, onClick, ...restProps }, ref) => {
return (
<TreeWrapper ref={ref} {...restProps}>
<StyledTreeView>
@@ -155,8 +155,11 @@ const Wrapper = styled('div')({ display: 'flex', flexDirection: 'column' });
const Children = Wrapper;
const TREE_COLOR = '#D5DFE6';
// TODO determine the position of the horizontal line by the type of the item
const ITEM_POINT_HEIGHT = '12.5px'; // '50%'
// adjust left and right margins of the the tree line
const TREE_LINE_LEFT_OFFSET = '-16px';
// determine the position of the horizontal line by the type of the item
const TREE_LINE_TOP_OFFSET = '20px'; // '50%'
const TREE_LINE_WIDTH = '12px';
const TreeWrapper = styled('div')({
position: 'relative',
@@ -164,7 +167,7 @@ const TreeWrapper = styled('div')({
const StyledTreeView = styled('div')({
position: 'absolute',
left: '-21px',
left: TREE_LINE_LEFT_OFFSET,
height: '100%',
});
@@ -183,7 +186,7 @@ const Line = styled('div')({
const VerticalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
width: '1px',
height: last ? ITEM_POINT_HEIGHT : '100%',
height: last ? TREE_LINE_TOP_OFFSET : '100%',
paddingTop: 0,
paddingBottom: 0,
transform: 'translate(-50%, 0)',
@@ -192,11 +195,11 @@ const VerticalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
}));
const HorizontalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
width: '16px',
width: TREE_LINE_WIDTH,
height: '1px',
paddingLeft: 0,
paddingRight: 0,
top: ITEM_POINT_HEIGHT,
top: TREE_LINE_TOP_OFFSET,
transform: 'translate(0, -50%)',
opacity: last ? 0 : 'unset',
}));
@@ -204,7 +207,8 @@ const HorizontalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
const Collapsed = styled('div')({
cursor: 'pointer',
display: 'inline-block',
color: '#B9CAD5',
color: '#98ACBD',
padding: '8px',
});
const LastItemRadius = styled('div')({
@@ -212,9 +216,9 @@ const LastItemRadius = styled('div')({
position: 'absolute',
left: '-0.5px',
top: 0,
height: ITEM_POINT_HEIGHT,
height: TREE_LINE_TOP_OFFSET,
bottom: '50%',
width: '16px',
width: TREE_LINE_WIDTH,
borderWidth: '1px',
borderStyle: 'solid',
borderLeftColor: TREE_COLOR,