feat: upgrade ant design to 5.x.x

.gitpod.yml

@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: yarn install && yarn run build
+    command: yarn run start
+
+

config/config.ts

@@ -64,7 +64,8 @@ export default defineConfig({
 	],
 	headScripts: [
 		{
-			src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
+			src:
+				'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
 			'data-ad-client': 'ca-pub-3706417744839656',
 		} as any,
 	],

docs/config/index.md

@@ -244,7 +244,8 @@ After rendering, `View` loses all editing capabilities and collaboration capabil
 const engine = new Engine(container, {
 	iconFonts: [
 		{
-			url: '//at.alicdn.com/t/font_1456030_lnqmc6a6ca.woff2?t=1638071536645',
+			url:
+				'//at.alicdn.com/t/font_1456030_lnqmc6a6ca.woff2?t=1638071536645',
 			format: 'woff2',
 			// ...
 		},

docs/config/index.zh-CN.md

@@ -250,7 +250,8 @@ engine.setScrollNode(滚动条节点);
 const engine = new Engine(渲染节点, {
 	iconFonts: [
 		{
-			url: '//at.alicdn.com/t/font_1456030_lnqmc6a6ca.woff2?t=1638071536645',
+			url:
+				'//at.alicdn.com/t/font_1456030_lnqmc6a6ca.woff2?t=1638071536645',
 			format: 'woff2',
 			// ...
 		},

examples/react/components/comment/edit.tsx

@@ -2,8 +2,6 @@ import React, { useState, useContext } from 'react';
 import Input from 'antd/es/input';
 import Button from 'antd/es/button';
 import Contentx from '../../context';
-import 'antd/es/input/style/css';
-import 'antd/es/button/style/css';
 
 type EditProps = {
 	defaultValue?: string;

examples/react/components/comment/index.tsx

@@ -24,7 +24,6 @@ import { CursorData } from '@aomao/plugin-yjs';
 import CommentItem from './item';
 import context from '../../context';
 import { useDispatch, useSelector } from '../../hooks';
-import 'antd/es/message/style/css';
 import './index.css';
 
 export type CommentProps<T = CursorData> = {

examples/react/components/comment/item.tsx

@@ -1,10 +1,12 @@
 import React, { useContext, forwardRef } from 'react';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
 import Space from 'antd/es/space';
 import { DataItem } from './types';
 import ItemEdit from './edit';
 import Context from '../../context';
-import 'antd/es/space/style/css';
+
+dayjs.extend(relativeTime);
 
 export type CommentItemProps = Omit<
 	React.AnchorHTMLAttributes<HTMLDivElement>,
@@ -76,9 +78,9 @@ const CommentItem = forwardRef<HTMLDivElement, CommentItemProps>(
 									>
 										{username}
 										<span className="doc-comment-item-time">
-											{moment()
-												.startOf('seconds')
-												.from(new Date(createdAt))}
+											{dayjs(new Date(createdAt)).fromNow(
+												true,
+											)}
 										</span>
 										<a
 											onClick={(event) => {

examples/react/components/editor/collaborators.tsx

@@ -3,10 +3,6 @@ import Avatar from 'antd/es/avatar';
 import Space from 'antd/es/space';
 import { CursorData } from '@aomao/plugin-yjs';
 import { isMobile } from '@aomao/engine';
-import 'antd/es/avatar/style/css';
-import 'antd/es/space/style/css';
-import 'antd/es/badge/style/css';
-import 'antd/es/tooltip/style/css';
 import { Popover, Tooltip } from 'antd';
 
 const maxCount = isMobile ? 2 : 5;

examples/react/components/editor/config.tsx

@@ -96,7 +96,6 @@ import type { ToolbarOptions } from '@aomao/toolbar';
 
 import ReactDOM from 'react-dom';
 import Empty from 'antd/es/empty';
-import 'antd/es/empty/style/css';
 import { ImageUploaderOptions } from '@aomao/plugin-image';
 import Mermaid, { MermaidComponent } from '@aomao/plugin-mermaid';
 import React from 'react';

examples/react/components/engine/index.tsx

@@ -7,8 +7,6 @@ import React, {
 import message from 'antd/es/message';
 import Modal from 'antd/es/modal';
 import Engine, { EngineInterface, EngineOptions, Parser } from '@aomao/engine';
-import 'antd/es/message/style/css';
-import 'antd/es/modal/style/css';
 
 export type EngineProps = EngineOptions & {
 	defaultValue?: string;

examples/react/components/loading/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import Spin from 'antd/es/spin';
-import 'antd/es/spin/style/css';
 import './index.less';
 
 export type LoadingType = {

examples/react/components/view/index.tsx

@@ -4,7 +4,6 @@ import { $, View, ViewInterface, isMobile } from '@aomao/engine';
 import { plugins, cards } from '../editor/config';
 import Loading from '../loading';
 import Context from '../../context';
-import 'antd/es/message/style/css';
 import './index.less';
 
 export type ViewProps = {

examples/react/editor.tsx

@@ -10,8 +10,6 @@ import Loading from './components/loading';
 import { IS_DEV, lang } from './config';
 import Space from 'antd/es/space';
 import Button from 'antd/es/button';
-import 'antd/es/space/style/css';
-import 'antd/es/button/style/css';
 import './editor.less';
 import React from 'react';
 

package.json

@@ -42,7 +42,7 @@
     },
     "devDependencies": {
         "@umijs/test": "^3.0.5",
-        "antd": "^4.15.5",
+        "antd": "^5.0.0-rc.3",
         "dumi": "^1.1.17",
         "father-build": "^1.19.4",
         "gh-pages": "^3.0.0",

packages/engine/src/card/index.ts

@@ -186,7 +186,7 @@ class CardModel implements CardModelInterface {
 
 	find<
 		E extends CardValue = {},
-		T extends CardInterface<E> = CardInterface<E>,
+		T extends CardInterface<E> = CardInterface<E>
 	>(
 		selector: string | Node | NodeInterface,
 		ignoreEditable?: boolean,
@@ -222,7 +222,7 @@ class CardModel implements CardModelInterface {
 
 	findBlock<
 		E extends CardValue = {},
-		T extends CardInterface<E> = CardInterface<E>,
+		T extends CardInterface<E> = CardInterface<E>
 	>(selector: Node | NodeInterface): T | undefined {
 		if (isNode(selector)) selector = $(selector);
 		if (!selector.get()) return;
@@ -236,7 +236,7 @@ class CardModel implements CardModelInterface {
 
 	getSingleCard<
 		E extends CardValue = {},
-		T extends CardInterface<E> = CardInterface<E>,
+		T extends CardInterface<E> = CardInterface<E>
 	>(range: RangeInterface) {
 		let card = this.find<E, T>(range.commonAncestorNode);
 		if (!card) card = this.getSingleSelectedCard<E, T>(range);
@@ -245,7 +245,7 @@ class CardModel implements CardModelInterface {
 
 	getSingleSelectedCard<
 		E extends CardValue = {},
-		T extends CardInterface<E> = CardInterface<E>,
+		T extends CardInterface<E> = CardInterface<E>
 	>(range: RangeInterface) {
 		const elements = range.findElements();
 		let node = elements[0];
@@ -261,7 +261,7 @@ class CardModel implements CardModelInterface {
 	// 插入Card
 	insertNode<
 		E extends CardValue = {},
-		T extends CardInterface<E> = CardInterface<E>,
+		T extends CardInterface<E> = CardInterface<E>
 	>(range: RangeInterface, card: T, ...args: any) {
 		const isInline = card.type === 'inline';
 		const editor = this.editor;
@@ -483,7 +483,7 @@ class CardModel implements CardModelInterface {
 
 	insert<
 		E extends CardValue = {},
-		T extends CardInterface<E> = CardInterface<E>,
+		T extends CardInterface<E> = CardInterface<E>
 	>(name: string, value?: E, ...args: any) {
 		const editor = this.editor;
 		if (!isEngine(editor)) throw 'Engine not found';
@@ -516,7 +516,7 @@ class CardModel implements CardModelInterface {
 
 	replace<
 		E extends CardValue = {},
-		T extends CardInterface<E> = CardInterface<E>,
+		T extends CardInterface<E> = CardInterface<E>
 	>(source: CardInterface, name: string, value?: E, ...args: any) {
 		this.remove(source.root);
 		return this.insert<E, T>(name, value, ...args);
@@ -587,7 +587,7 @@ class CardModel implements CardModelInterface {
 	// 创建Card DOM 节点
 	create<
 		E extends CardValue = {},
-		T extends CardInterface<E> = CardInterface<E>,
+		T extends CardInterface<E> = CardInterface<E>
 	>(
 		name: string,
 		options?: {

packages/engine/src/change/index.ts

@@ -204,8 +204,14 @@ class ChangeModel implements ChangeInterface {
 		callback?: (count: number) => void,
 	) {
 		const range = this.range.get();
-		const { schema, conversion, container, history, mark, card } =
-			this.engine;
+		const {
+			schema,
+			conversion,
+			container,
+			history,
+			mark,
+			card,
+		} = this.engine;
 		if (value === '') {
 			this.engine.container.html(value);
 			this.initValue(undefined, false);
@@ -471,8 +477,9 @@ class ChangeModel implements ChangeInterface {
 					range.startNode.text(text.substr(1));
 			}
 		}
-		let startRange: { node: NodeInterface; offset: number } | undefined =
-			undefined;
+		let startRange:
+			| { node: NodeInterface; offset: number }
+			| undefined = undefined;
 		const apply = (range: RangeInterface) => {
 			if (startRange && startRange.node[0].isConnected) {
 				range

packages/engine/src/change/range.ts

@@ -170,9 +170,12 @@ class ChangeRange implements ChangeRangeInterface {
 			}
 		}
 		//修复inline光标
-		let { startNode, endNode, startOffset, endOffset } = range
-			.cloneRange()
-			.shrinkToTextNode();
+		let {
+			startNode,
+			endNode,
+			startOffset,
+			endOffset,
+		} = range.cloneRange().shrinkToTextNode();
 		const prev = startNode.prev();
 		const next = endNode.next();
 		//光标上一个节点是inline节点，让其选择在inline节点后的零宽字符后面
@@ -385,8 +388,9 @@ class ChangeRange implements ChangeRangeInterface {
 				.collapse(toStart);
 		}
 		this.select(range);
-		const editableElement =
-			range.commonAncestorNode.closest(EDITABLE_SELECTOR);
+		const editableElement = range.commonAncestorNode.closest(
+			EDITABLE_SELECTOR,
+		);
 		editableElement?.get<HTMLElement>()?.focus();
 		if (
 			editableElement.length > 0 &&

packages/engine/src/engine/index.ts

@@ -31,8 +31,7 @@ import './index.css';
 
 class Engine<T extends EngineOptions = EngineOptions>
 	extends Editor<T>
-	implements EngineInterface<T>
-{
+	implements EngineInterface<T> {
 	private _readonly: boolean = false;
 	private _container: ContainerInterface;
 	readonly kind = 'engine';
@@ -291,8 +290,8 @@ class Engine<T extends EngineOptions = EngineOptions>
 			if (!node) return;
 			this.node.removeMinusStyle(node, 'text-indent');
 			if (this.node.isRootBlock(node)) {
-				const childrenLength =
-					node.get<HTMLElement>()!.childNodes.length;
+				const childrenLength = node.get<HTMLElement>()!.childNodes
+					.length;
 				if (childrenLength === 0) {
 					node.append($('<br />'));
 				} else {

packages/engine/src/history.ts

@@ -66,16 +66,20 @@ const setRangeByPath = (
 						endCard &&
 						startCard?.root.equal(endCard.root)
 					) {
-						let startEditableElement =
-							range.startNode.closest(EDITABLE_SELECTOR);
+						let startEditableElement = range.startNode.closest(
+							EDITABLE_SELECTOR,
+						);
 						if (startEditableElement.length === 0)
-							startEditableElement =
-								range.startNode.find(EDITABLE_SELECTOR);
-						let endEditableElement =
-							range.endNode.closest(EDITABLE_SELECTOR);
+							startEditableElement = range.startNode.find(
+								EDITABLE_SELECTOR,
+							);
+						let endEditableElement = range.endNode.closest(
+							EDITABLE_SELECTOR,
+						);
 						if (endEditableElement.length === 0)
-							endEditableElement =
-								range.endNode.find(EDITABLE_SELECTOR);
+							endEditableElement = range.endNode.find(
+								EDITABLE_SELECTOR,
+							);
 						if (
 							startEditableElement.length > 0 &&
 							endEditableElement.length > 0 &&
@@ -289,11 +293,11 @@ class HistoryModel implements HistoryInterface {
 				if (!this.currentAction.ops) this.currentAction.ops = [];
 
 				if (!this.currentAction.startRangePath) {
-					this.currentAction.startRangePath =
-						this.getRangePathBeforeCommand();
+					this.currentAction.startRangePath = this.getRangePathBeforeCommand();
 				}
-				const lastOp =
-					this.currentAction.ops[this.currentAction.ops.length - 1];
+				const lastOp = this.currentAction.ops[
+					this.currentAction.ops.length - 1
+				];
 				if (lastOp && Operation.isReverse(op, lastOp)) {
 					this.currentAction.ops.pop();
 				} else {
@@ -435,8 +439,9 @@ class HistoryModel implements HistoryInterface {
 			if (!this.currentAction.ops) {
 				this.currentAction.ops = [];
 			}
-			const lastOp =
-				this.currentAction.ops[this.currentAction.ops.length - 1];
+			const lastOp = this.currentAction.ops[
+				this.currentAction.ops.length - 1
+			];
 			if (lastOp && Operation.isReverse(op, lastOp)) {
 				this.currentAction.ops.pop();
 			} else {