mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-17 10:06:17 +08:00
init: the first public commit for AFFiNE
This commit is contained in:
DarkSky
@@ -0,0 +1,213 @@
|
||||
import { TextProps } from '@toeverything/components/common';
|
||||
import {
|
||||
ContentColumnValue,
|
||||
services,
|
||||
Protocol,
|
||||
} from '@toeverything/datasource/db-service';
|
||||
import { type CreateView } from '@toeverything/framework/virgo';
|
||||
import { useEffect, useRef, useState, type FC } from 'react';
|
||||
import {
|
||||
TextManage,
|
||||
type ExtendedTextUtils,
|
||||
} from '../../components/text-manage';
|
||||
import { tabBlock } from '../../utils/indent';
|
||||
import { IndentWrapper } from '../../components/IndentWrapper';
|
||||
import type { Numbered, NumberedAsyncBlock } from './types';
|
||||
|
||||
import { getChildrenType, getNumber } from './data';
|
||||
import {
|
||||
supportChildren,
|
||||
RenderBlockChildren,
|
||||
useOnSelect,
|
||||
WrapperWithPendantAndDragDrop,
|
||||
} from '@toeverything/components/editor-core';
|
||||
import { styled } from '@toeverything/components/ui';
|
||||
import { List } from '../../components/style-container';
|
||||
import { BlockContainer } from '../../components/BlockContainer';
|
||||
|
||||
export const defaultTodoProps: Numbered = {
|
||||
text: { value: [{ text: '' }] },
|
||||
numberType: 'type1',
|
||||
};
|
||||
const reset_todo_state = async (block: NumberedAsyncBlock) => {
|
||||
await block.setProperties({});
|
||||
};
|
||||
|
||||
const todoIsEmpty = (contentValue: ContentColumnValue): boolean => {
|
||||
const todoValue = contentValue.value;
|
||||
return (
|
||||
todoValue.length === 0 ||
|
||||
(todoValue.length === 1 && !todoValue[0]['text'])
|
||||
);
|
||||
};
|
||||
|
||||
export const NumberedView: FC<CreateView> = ({ block, editor }) => {
|
||||
// block.remove();
|
||||
const properties = { ...defaultTodoProps, ...block.getProperties() };
|
||||
const [number, set_number] = useState<number>(1);
|
||||
const [isSelect, setIsSelect] = useState<boolean>();
|
||||
|
||||
// const [type, set_type] = useState('type-1');
|
||||
const text_ref = useRef<ExtendedTextUtils>(null);
|
||||
|
||||
useOnSelect(block.id, (is_select: boolean) => {
|
||||
setIsSelect(is_select);
|
||||
});
|
||||
const turn_into_text_block = async () => {
|
||||
// Convert to text block
|
||||
await block.setType('text');
|
||||
await reset_todo_state(block);
|
||||
|
||||
if (!text_ref.current) {
|
||||
throw new Error(
|
||||
'Failed to set cursor position! text_ref is not exist!'
|
||||
);
|
||||
}
|
||||
const currentSelection = text_ref.current.getCurrentSelection();
|
||||
if (!currentSelection) {
|
||||
throw new Error(
|
||||
'Failed to get cursor selection! currentSelection is not exist!'
|
||||
);
|
||||
}
|
||||
// Update cursor position
|
||||
editor.selectionManager.setNodeActiveSelection(block.id, {
|
||||
type: 'Range',
|
||||
info: currentSelection,
|
||||
});
|
||||
};
|
||||
const i = 0;
|
||||
const listChange = async () => {
|
||||
let number = 1;
|
||||
const preBlock = await block.previousSiblings();
|
||||
const parent_block = await block.parent();
|
||||
let parent_number_type = 'type3';
|
||||
if (parent_block.type === 'numbered') {
|
||||
parent_number_type = await parent_block.getProperty('numberType');
|
||||
}
|
||||
block.setProperty('numberType', getChildrenType(parent_number_type));
|
||||
|
||||
if (preBlock.length) {
|
||||
preBlock.reverse();
|
||||
for (let i = 0; i <= preBlock.length; i++) {
|
||||
if (preBlock[i]?.type === 'numbered') {
|
||||
number++;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
set_number(number);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
listChange();
|
||||
let obj: any;
|
||||
const parentChange = async () => {
|
||||
const parent_block = await block.parent();
|
||||
obj = await services.api.editorBlock.observe(
|
||||
{
|
||||
workspace: editor.workspace,
|
||||
id: parent_block.id,
|
||||
},
|
||||
listChange
|
||||
);
|
||||
};
|
||||
parentChange();
|
||||
return () => {
|
||||
obj?.();
|
||||
};
|
||||
// console.log('_parent_block: ', _parent_block);
|
||||
}, []);
|
||||
|
||||
const on_text_enter: TextProps['handleEnter'] = async props => {
|
||||
const { splitContents, isShiftKey } = props;
|
||||
if (isShiftKey) {
|
||||
return false;
|
||||
}
|
||||
const { contentBeforeSelection, contentAfterSelection } = splitContents;
|
||||
const before = [...contentBeforeSelection.content];
|
||||
const after = [...contentAfterSelection.content];
|
||||
if (todoIsEmpty({ value: before } as ContentColumnValue)) {
|
||||
await turn_into_text_block();
|
||||
return true;
|
||||
}
|
||||
|
||||
// Move children to new block
|
||||
const children = await block.children();
|
||||
await block.removeChildren();
|
||||
|
||||
const next_node = await editor.createBlock(
|
||||
Protocol.Block.Type.numbered
|
||||
);
|
||||
if (!next_node) {
|
||||
throw new Error('Failed to create todo block');
|
||||
}
|
||||
await next_node.append(...children);
|
||||
await next_node.setProperties({
|
||||
text: { value: after } as ContentColumnValue,
|
||||
});
|
||||
await block.setProperties({
|
||||
text: { value: before } as ContentColumnValue,
|
||||
});
|
||||
await block.after(next_node);
|
||||
|
||||
editor.selectionManager.activeNodeByNodeId(next_node.id);
|
||||
|
||||
return true;
|
||||
};
|
||||
const on_tab: TextProps['handleTab'] = async ({ isShiftKey }) => {
|
||||
if (!isShiftKey) {
|
||||
const preSiblingBlock = await block.previousSibling();
|
||||
|
||||
if (preSiblingBlock && supportChildren(preSiblingBlock)) {
|
||||
const copy_block = block;
|
||||
block.remove();
|
||||
block.removeChildren();
|
||||
const block_children = await copy_block.children();
|
||||
preSiblingBlock.append(copy_block, ...block_children);
|
||||
}
|
||||
return true;
|
||||
} else {
|
||||
tabBlock(block, isShiftKey);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const on_backspace: TextProps['handleBackSpace'] = async ({
|
||||
isCollAndStart,
|
||||
}) => {
|
||||
if (!isCollAndStart) {
|
||||
return false;
|
||||
}
|
||||
await turn_into_text_block();
|
||||
return true;
|
||||
};
|
||||
|
||||
return (
|
||||
<BlockContainer editor={editor} block={block} selected={isSelect}>
|
||||
<WrapperWithPendantAndDragDrop editor={editor} block={block}>
|
||||
<List>
|
||||
<div className={'checkBoxContainer'}>
|
||||
{getNumber(properties.numberType, number)}.
|
||||
</div>
|
||||
<div className="textContainer">
|
||||
<TextManage
|
||||
ref={text_ref}
|
||||
editor={editor}
|
||||
block={block}
|
||||
supportMarkdown
|
||||
placeholder="Numbered list"
|
||||
handleEnter={on_text_enter}
|
||||
handleBackSpace={on_backspace}
|
||||
handleTab={on_tab}
|
||||
/>
|
||||
</div>
|
||||
</List>
|
||||
</WrapperWithPendantAndDragDrop>
|
||||
|
||||
<IndentWrapper>
|
||||
<RenderBlockChildren block={block} />
|
||||
</IndentWrapper>
|
||||
</BlockContainer>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,69 @@
|
||||
const type2Map: Record<number, string> = {};
|
||||
const type3Map: Record<number, string> = {};
|
||||
export function getNumber(type: string, index: number) {
|
||||
if (type === 'type2') {
|
||||
if (type2Map[index]) {
|
||||
return type2Map[index];
|
||||
}
|
||||
type2Map[index] = getType2(index - 1);
|
||||
|
||||
return type2Map[index];
|
||||
}
|
||||
if (type === 'type3') {
|
||||
if (type3Map[index]) {
|
||||
return type3Map[index];
|
||||
}
|
||||
type3Map[index] = getType3(index);
|
||||
|
||||
return type3Map[index];
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
const getType2 = (n: number) => {
|
||||
const ordA = 'a'.charCodeAt(0);
|
||||
const ordZ = 'z'.charCodeAt(0);
|
||||
const len = ordZ - ordA + 1;
|
||||
let s = '';
|
||||
while (n >= 0) {
|
||||
s = String.fromCharCode((n % len) + ordA) + s;
|
||||
n = Math.floor(n / len) - 1;
|
||||
}
|
||||
return s;
|
||||
};
|
||||
const getType3 = (num: number) => {
|
||||
const lookup = {
|
||||
m: 1000,
|
||||
cm: 900,
|
||||
d: 500,
|
||||
cd: 400,
|
||||
c: 100,
|
||||
xc: 90,
|
||||
l: 50,
|
||||
xl: 40,
|
||||
x: 10,
|
||||
ix: 9,
|
||||
v: 5,
|
||||
iv: 4,
|
||||
i: 1,
|
||||
};
|
||||
let romanStr = '';
|
||||
for (const i in lookup) {
|
||||
// @ts-ignore
|
||||
while (num >= lookup[i]) {
|
||||
romanStr += i;
|
||||
// @ts-ignore
|
||||
num -= lookup[i];
|
||||
}
|
||||
}
|
||||
return romanStr;
|
||||
};
|
||||
|
||||
export function getChildrenType(type: string) {
|
||||
const typeMap: Record<string, string> = {
|
||||
type1: 'type2',
|
||||
type2: 'type3',
|
||||
type3: 'type1',
|
||||
};
|
||||
return typeMap[type];
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import {
|
||||
AsyncBlock,
|
||||
BaseView,
|
||||
getTextProperties,
|
||||
SelectBlock,
|
||||
getTextHtml,
|
||||
} from '@toeverything/framework/virgo';
|
||||
import {
|
||||
Protocol,
|
||||
DefaultColumnsValue,
|
||||
} from '@toeverything/datasource/db-service';
|
||||
// import { withTreeViewChildren } from '../../utils/with-tree-view-children';
|
||||
import { defaultTodoProps, NumberedView } from './NumberedView';
|
||||
import { IndentWrapper } from '../../components/IndentWrapper';
|
||||
|
||||
export class NumberedBlock extends BaseView {
|
||||
public type = Protocol.Block.Type.numbered;
|
||||
// public View = withTreeViewChildren((props: CreateView) => <NumberedView {...props} />);
|
||||
|
||||
// type = Protocol.Block.Type.todo;
|
||||
View = NumberedView;
|
||||
|
||||
// override ChildrenView = IndentWrapper;
|
||||
|
||||
override async onCreate(block: AsyncBlock) {
|
||||
if (!block.getProperty('text')) {
|
||||
await block.setProperties(defaultTodoProps);
|
||||
}
|
||||
return block;
|
||||
}
|
||||
|
||||
override getSelProperties(
|
||||
block: AsyncBlock,
|
||||
selectInfo: any
|
||||
): DefaultColumnsValue {
|
||||
const properties = super.getSelProperties(block, selectInfo);
|
||||
return getTextProperties(properties, selectInfo);
|
||||
}
|
||||
|
||||
override html2block(
|
||||
el: Element,
|
||||
parseEl: (el: Element) => any[]
|
||||
): any[] | null {
|
||||
const tag_name = el.tagName;
|
||||
if (tag_name === 'OL') {
|
||||
const result = [];
|
||||
for (let i = 0; i < el.children.length; i++) {
|
||||
const blocks_info = parseEl(el.children[i]);
|
||||
result.push(...blocks_info);
|
||||
}
|
||||
return result.length > 0 ? result : null;
|
||||
}
|
||||
|
||||
if (tag_name == 'LI' && el.textContent.startsWith('[ ] ')) {
|
||||
const childNodes = el.childNodes;
|
||||
let texts = [];
|
||||
const children = [];
|
||||
for (let i = 0; i < childNodes.length; i++) {
|
||||
const blocks_info = parseEl(childNodes[i] as Element);
|
||||
for (let j = 0; j < blocks_info.length; j++) {
|
||||
if (blocks_info[j].type === 'text') {
|
||||
const block_texts =
|
||||
blocks_info[j].properties.text.value;
|
||||
texts.push(...block_texts);
|
||||
} else {
|
||||
children.push(blocks_info[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (texts.length > 0 && (texts[0].text || '').startsWith('[ ] ')) {
|
||||
texts[0].text = texts[0].text.substring('[ ] '.length);
|
||||
if (!texts[0].text) {
|
||||
texts = texts.slice(1);
|
||||
}
|
||||
}
|
||||
return [
|
||||
{
|
||||
type: this.type,
|
||||
properties: {
|
||||
text: { value: texts },
|
||||
},
|
||||
children: children,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
override async block2html(
|
||||
block: AsyncBlock,
|
||||
children: SelectBlock[],
|
||||
generateHtml: (el: any[]) => Promise<string>
|
||||
): Promise<string> {
|
||||
let content = getTextHtml(block);
|
||||
content += await generateHtml(children);
|
||||
return `<ol><li>${content}</li></ol>`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { AsyncBlock } from '@toeverything/framework/virgo';
|
||||
import type {
|
||||
ContentColumnValue,
|
||||
BooleanColumnValue,
|
||||
} from '@toeverything/datasource/db-service';
|
||||
|
||||
export interface Numbered {
|
||||
text: ContentColumnValue;
|
||||
numberType: any;
|
||||
}
|
||||
|
||||
export class NumberedAsyncBlock extends AsyncBlock {
|
||||
override setProperties(properties: Partial<Numbered>): Promise<boolean> {
|
||||
return super.setProperties(properties);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user