From d9ccd8faa5f6283d2352e5090ce65fb25ceb6336 Mon Sep 17 00:00:00 2001 From: yanmao <55792257+yanmao-cc@users.noreply.github.com> Date: Thu, 16 Dec 2021 11:44:50 +0800 Subject: [PATCH] feat: demo theme --- .dumi/theme/components/Navbar.less | 7 ++-- .dumi/theme/components/Navbar.tsx | 1 + examples/react/components/editor/config.tsx | 4 +- examples/react/components/editor/index.less | 39 +++++++++++-------- examples/react/components/editor/index.tsx | 18 ++++++++- examples/react/components/editor/ot/index.tsx | 20 +--------- examples/react/components/view/index.less | 12 +++--- examples/react/components/view/index.tsx | 25 +++++++++++- plugins/table/src/component/index.ts | 2 +- plugins/table/src/component/template.ts | 8 ++-- site-ssr/app/data/doc.json | 6 +-- 11 files changed, 88 insertions(+), 54 deletions(-) diff --git a/.dumi/theme/components/Navbar.less b/.dumi/theme/components/Navbar.less index fa65e6c5..12281103 100644 --- a/.dumi/theme/components/Navbar.less +++ b/.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; diff --git a/.dumi/theme/components/Navbar.tsx b/.dumi/theme/components/Navbar.tsx index 63352d13..4c59befe 100644 --- a/.dumi/theme/components/Navbar.tsx +++ b/.dumi/theme/components/Navbar.tsx @@ -96,6 +96,7 @@ const Navbar: FC = ({ {navSuffix} +
{navLast} ); diff --git a/examples/react/components/editor/config.tsx b/examples/react/components/editor/config.tsx index 4521e821..9e5d1508 100644 --- a/examples/react/components/editor/config.tsx +++ b/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() ?.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() ?.getBoundingClientRect(); const editorRigth = (rect?.right || 0) - (rect?.width || 0); diff --git a/examples/react/components/editor/index.less b/examples/react/components/editor/index.less index 9266db42..4af2045e 100644 --- a/examples/react/components/editor/index.less +++ b/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; } } diff --git a/examples/react/components/editor/index.tsx b/examples/react/components/editor/index.tsx index 50915de3..ac90e616 100644 --- a/examples/react/components/editor/index.tsx +++ b/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 = ({ } }; + useEffect(() => { + const headerOTMembersElement = document.getElementById( + 'am-editor-ot-members', + ); + if (!headerOTMembersElement || !props.ot) { + return; + } + ReactDOM.render( + , + headerOTMembersElement, + ); + return () => { + ReactDOM.unmountComponentAtNode(headerOTMembersElement); + }; + }, [members, props.ot]); + return ( <> - {props.ot && } {engine.current && ( )} diff --git a/examples/react/components/editor/ot/index.tsx b/examples/react/components/editor/ot/index.tsx index 0b4d1632..a2b7af8c 100644 --- a/examples/react/components/editor/ot/index.tsx +++ b/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 }> = ({ members }) => { - const { lang } = useContext(Context); - return (
- {!isMobile && ( - - {lang === 'zh-CN' ? ( - <> - 当前在线{members.length}人 - - ) : ( - <> - {members.length} person online - - )} - - )} {members.map((member) => { return ( {member['name']} diff --git a/examples/react/components/view/index.less b/examples/react/components/view/index.less index a71c561e..27c6df27 100644 --- a/examples/react/components/view/index.less +++ b/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; + } } } diff --git a/examples/react/components/view/index.tsx b/examples/react/components/view/index.tsx index b5e15bf8..67c87711 100644 --- a/examples/react/components/view/index.tsx +++ b/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 = ({ 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() + ?.getBoundingClientRect(); + const vRect = view + .get() + ?.getBoundingClientRect(); + const width = + (wRect?.width || 0) - (vRect?.width || 0); + return width <= 0 ? 100 : width; + }, + }, + }, + }, }); view.current.messageSuccess = (msg: string) => { Message.success(msg); diff --git a/plugins/table/src/component/index.ts b/plugins/table/src/component/index.ts index 1a40e7e2..4ca6a8df 100644 --- a/plugins/table/src/component/index.ts +++ b/plugins/table/src/component/index.ts @@ -509,7 +509,7 @@ class TableComponent extends Card 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(); diff --git a/plugins/table/src/component/template.ts b/plugins/table/src/component/template.ts index f05e37d6..1d236a6d 100644 --- a/plugins/table/src/component/template.ts +++ b/plugins/table/src/component/template.ts @@ -199,10 +199,12 @@ class Template implements TemplateInterface { )}${menuBar}
`; } - htmlView({ html, noBorder }: TableValue) { - return `
${html}
`; + }>${html}
`; } } diff --git a/site-ssr/app/data/doc.json b/site-ssr/app/data/doc.json index bb9ed24c..cf0575fd 100644 --- a/site-ssr/app/data/doc.json +++ b/site-ssr/app/data/doc.json @@ -1,13 +1,13 @@ { "id": "demo", "content": { - "value": "

sdfsdfsdf

sdfdsfdsfdfdfg

fgfdgfdg

", + "value": "

sdfsdfsdf

ghj

ghj

  • ghjvhn


j

sdfdsfdsfdfdfg

fgfdgfdg/

", "paths": [ { "id": ["kAoP518hzaPYD9Mx9z"], "path": [ - [1, 0, 6], - [1, 0, 11] + [6, 0, 6], + [6, 0, 11] ] } ]