feat: demo theme

.dumi/theme/components/Navbar.less

@@ -40,15 +40,15 @@
 
 	&-logo {
 		display: inline-block;
-		height: 40px;
+		height: 30px;
 		color: #080e29;
 		font-weight: 500;
 		text-decoration: none;
 		font-size: 18px;
-		line-height: 40px;
+		line-height: 30px;
 
 		&:not([data-plaintext]) {
-			padding-left: 56px;
+			padding-left: 36px;
 			background: url(@img-logo) no-repeat 0 / contain;
 		}
 
@@ -68,7 +68,6 @@
 	}
 
 	nav {
-		margin-left: 20px;
 		display: flex;
 		> span {
 			position: relative;

.dumi/theme/components/Navbar.tsx

@@ -96,6 +96,7 @@ const Navbar: FC<INavbarProps> = ({
 				{navSuffix}
 				<LocaleSelect location={location} />
 			</nav>
+			<div id="am-editor-ot-members"></div>
 			{navLast}
 		</div>
 	);

examples/react/components/editor/config.tsx

@@ -121,7 +121,7 @@ export const pluginConfig: { [key: string]: PluginOptions } = {
 		overflow: {
 			maxLeftWidth: () => {
 				// 编辑区域位置
-				const rect = $('.editor-content')
+				const rect = $('.am-engine')
 					.get<HTMLElement>()
 					?.getBoundingClientRect();
 				const editorLeft = rect?.left || 0;
@@ -132,7 +132,7 @@ export const pluginConfig: { [key: string]: PluginOptions } = {
 			},
 			maxRightWidth: () => {
 				// 编辑区域位置
-				const rect = $('.editor-content')
+				const rect = $('.am-engine')
 					.get<HTMLElement>()
 					?.getBoundingClientRect();
 				const editorRigth = (rect?.right || 0) - (rect?.width || 0);

examples/react/components/editor/index.less

@@ -2,18 +2,29 @@
 
 .__dumi-default-layout[data-site-mode='true'][data-route='/'],
 .__dumi-default-layout[data-site-mode='true'][data-route='/zh-CN'] {
-	padding-top: 138px !important;
+	padding-top: 106px !important;
 	min-height: auto;
 
 	@media @mobile {
-		padding-top: 86px !important;
+		padding-top: 54px !important;
 	}
 }
 
 .__dumi-default-layout[data-site-mode='true'][data-route='/'],
-.__dumi-default-layout[data-site-mode='true'][data-route='/zh-CN']
+.__dumi-default-layout[data-site-mode='true'][data-route='/zh-CN'] {
 	.__dumi-default-navbar {
-	box-shadow: none;
+		box-shadow: none;
+
+		@media @mobile {
+			box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
+		}
+	}
+
+	.__dumi-default-navbar-logo {
+		@media @mobile {
+			display: none;
+		}
+	}
 }
 
 .__dumi-default-layout[data-site-mode='true'] .__dumi-default-navbar nav {
@@ -43,17 +54,13 @@
 .editor-ot-users {
 	font-size: 12px;
 	background: #ffffff;
-	padding: 4px 0 4px 266px;
 	z-index: 999;
-	position: fixed;
-	width: 100%;
-	top: 64px;
+	margin: 0 24px;
 
 	@media @mobile {
-		padding: 8px 16px;
+		padding: 4px 8px;
 		z-index: 1;
-		left: 0;
-		top: 50px;
+		margin: 0;
 	}
 }
 
@@ -72,7 +79,7 @@
 	background: #ffffff;
 	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.02);
 	z-index: 1000;
-	top: 96px;
+	top: 64px;
 }
 
 .__dumi-default-previewer-demo .editor-toolbar {
@@ -91,7 +98,7 @@
 
 .editor-container {
 	padding: 24px 0 64px;
-	height: calc(100vh - 138px);
+	height: calc(100vh - 106px);
 	width: 100%;
 	margin: 0 auto;
 	overflow: auto;
@@ -112,15 +119,15 @@
 	min-height: 800px;
 	@media @mobile {
 		width: auto;
-		min-height: calc(100vh - 96px);
+		min-height: calc(100vh - 64px);
 		border: 0 none;
 	}
 }
 
 .editor-content .am-engine {
-	padding: 40px 0 60px;
+	padding: 0 0 60px;
 
 	@media @mobile {
-		padding: 18px 0 0 0;
+		padding: 0;
 	}
 }

examples/react/components/editor/index.tsx

@@ -13,6 +13,7 @@ import Toc from '../toc';
 import { cards, pluginConfig, plugins } from './config';
 import Toolbar, { ToolbarItemProps } from './toolbar';
 import './index.less';
+import ReactDOM from 'react-dom';
 
 export type Content = {
 	value: string;
@@ -321,10 +322,25 @@ const EditorComponent: React.FC<EditorProps> = ({
 		}
 	};
 
+	useEffect(() => {
+		const headerOTMembersElement = document.getElementById(
+			'am-editor-ot-members',
+		);
+		if (!headerOTMembersElement || !props.ot) {
+			return;
+		}
+		ReactDOM.render(
+			<OTComponent members={members} />,
+			headerOTMembersElement,
+		);
+		return () => {
+			ReactDOM.unmountComponentAtNode(headerOTMembersElement);
+		};
+	}, [members, props.ot]);
+
 	return (
 		<Loading loading={loading}>
 			<>
-				{props.ot && <OTComponent members={members} />}
 				{engine.current && (
 					<Toolbar engine={engine.current} items={props.toolbar} />
 				)}

examples/react/components/editor/ot/index.tsx

@@ -1,37 +1,21 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import Avatar from 'antd/es/avatar';
 import Space from 'antd/es/space';
 import { isMobile } from '@aomao/engine';
 import OTClient, { STATUS, EVENT } from './client';
-import Context from '../../../context';
 import type { Member, ERROR } from './client';
 import 'antd/es/avatar/style';
 import 'antd/es/space/style';
 
 const OTComponent: React.FC<{ members: Array<Member> }> = ({ members }) => {
-	const { lang } = useContext(Context);
-
 	return (
 		<div className="editor-ot-users">
 			<Space className="editor-ot-users-content" size="small">
-				{!isMobile && (
-					<span style={{ color: '#888888' }}>
-						{lang === 'zh-CN' ? (
-							<>
-								当前在线<strong>{members.length}</strong>人
-							</>
-						) : (
-							<>
-								<strong>{members.length}</strong> person online
-							</>
-						)}
-					</span>
-				)}
 				{members.map((member) => {
 					return (
 						<Avatar
 							key={member['id']}
-							size={isMobile ? 18 : 24}
+							size={isMobile ? 24 : 30}
 							style={{ backgroundColor: member['color'] }}
 						>
 							{member['name']}

examples/react/components/view/index.less

@@ -1,11 +1,13 @@
 @import (reference) '../../styles/variables.less';
 
 .editor-wrapper-view {
-	width: 812px;
-	min-width: 812px;
+	.am-engine-view {
+		width: 812px;
+		min-width: 812px;
 
-	@media @mobile {
-		min-width: auto !important;
-		width: 100% !important;
+		@media @mobile {
+			min-width: auto !important;
+			width: 100% !important;
+		}
 	}
 }

examples/react/components/view/index.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useState, useContext } from 'react';
 import Message from 'antd/es/message';
-import { View, ViewInterface, isServer } from '@aomao/engine';
+import { $, View, ViewInterface, removeUnit } from '@aomao/engine';
 import { plugins, cards } from '../editor/config';
 import Loading from '../loading';
 import Context from '../../context';
@@ -30,6 +30,29 @@ const ViewRender: React.FC<ViewProps> = ({ content, html }) => {
 				lang,
 				plugins: viewPlugins,
 				cards,
+				config: {
+					table: {
+						overflow: {
+							maxLeftWidth: () => {
+								return 0;
+							},
+							maxRightWidth: () => {
+								// 编辑区域位置
+								const wrapper = $('.editor-wrapper-view');
+								const view = $('.am-engine-view');
+								const wRect = wrapper
+									.get<HTMLElement>()
+									?.getBoundingClientRect();
+								const vRect = view
+									.get<HTMLElement>()
+									?.getBoundingClientRect();
+								const width =
+									(wRect?.width || 0) - (vRect?.width || 0);
+								return width <= 0 ? 100 : width;
+							},
+						},
+					},
+				},
 			});
 			view.current.messageSuccess = (msg: string) => {
 				Message.success(msg);

plugins/table/src/component/index.ts

@@ -509,7 +509,7 @@ class TableComponent extends Card<TableValue> implements TableInterface {
 		super.didRender();
 		this.viewport = isEngine(this.editor)
 			? this.wrapper?.find(Template.VIEWPORT)
-			: this.wrapper;
+			: this.wrapper?.find(Template.VIEWPORT_READER);
 
 		this.selection.init();
 		this.conltrollBar.init();

plugins/table/src/component/template.ts

@@ -199,10 +199,12 @@ class Template implements TemplateInterface {
 		)}${menuBar}</div>`;
 	}
 
-	htmlView({ html, noBorder }: TableValue) {
-		return `<div class="${VIEWPORT_READER}"${
+	htmlView({ html, noBorder, overflow }: TableValue) {
+		return `<div class="${TABLE_WRAPPER_CLASS_NAME} ${
+			overflow !== false ? TABLE_OVERFLOW_CLASS_NAME : ''
+		}"><div class="${VIEWPORT_READER}"${
 			noBorder === true ? " data-table-no-border='true'" : ''
-		}>${html}</div>`;
+		}>${html}</div></div>`;
 	}
 }