Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

调整表格组件样式,修复单元格过渡效果及边距,优化表格边框样式 #33

Merged
merged 31 commits into from
Jan 19, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
ffc4e16
Merge branch 'ant-design:main' into testtt
222chaos Jan 14, 2025
ce3c6db
优化表格组件,调整选中单元格样式及过渡效果,修复滚动事件处理逻辑
222chaos Jan 14, 2025
4ff281a
调整表格组件样式,修复单元格过渡效果及边距,优化表格边框样式
222chaos Jan 15, 2025
b993ad2
调整表格组件样式,修复单元格过渡效果及边距,优化表格边框样式
222chaos Jan 15, 2025
aa25cf7
调整表格组件样式,修复单元格过渡效果及边距,优化表格边框样式
222chaos Jan 15, 2025
3c3d47d
优化表格组件,调整行高计算逻辑,修复边框样式及表格布局
222chaos Jan 16, 2025
6bafb6e
移除调试日志,优化滚动事件处理逻辑
222chaos Jan 16, 2025
103fcc1
调整表格组件行高计算,修复最后一行单元格边框样式及圆角效果
222chaos Jan 16, 2025
7615ae5
1.13.16
chenshuai2144 Jan 16, 2025
8510d5f
调整表格组件样式,优化行高和宽度计算,修复边框样式及圆角效果
222chaos Jan 16, 2025
5dd8102
优化表格组件样式,添加选中状态下最后一行单元格右下角边框圆角效果
222chaos Jan 16, 2025
fb5a3bd
调整表格组件样式,统一单位为em,修复边框圆角效果
222chaos Jan 16, 2025
0439dd4
merge main
222chaos Jan 16, 2025
21ae589
优化表格组件样式,修复边框样式及圆角效果
222chaos Jan 17, 2025
d96bded
feat: 更新构建配置,支持ES模块和CommonJS输出
chenshuai2144 Jan 17, 2025
0521496
1.14.0
chenshuai2144 Jan 17, 2025
0ff014c
feat: 增加条件判断以防止在特定情况下渲染图表
chenshuai2144 Jan 17, 2025
7f4b7a2
1.14.1
chenshuai2144 Jan 17, 2025
b956825
feat: 更新构建配置,统一输出目录为dist
chenshuai2144 Jan 17, 2025
0ef758a
1.14.2
chenshuai2144 Jan 17, 2025
a908b41
feat: 调整多个组件的边框半径为12px,以统一样式
chenshuai2144 Jan 17, 2025
cb41248
调整表格侧边样式,修复左侧位置偏移,优化过渡效果
222chaos Jan 17, 2025
376a4e6
merge test
222chaos Jan 18, 2025
ab5e6f9
Merge remote-tracking branch 'upstream/main' into testtt
222chaos Jan 18, 2025
917832b
feat: 优化表格单元格组件,移除不必要的样式属性
chenshuai2144 Jan 18, 2025
f1786ca
1.14.3
chenshuai2144 Jan 18, 2025
8cf6f84
feat: 移除表格组件中不必要的文本对齐样式
chenshuai2144 Jan 18, 2025
0d810f3
1.14.4
chenshuai2144 Jan 18, 2025
8c17f4c
feat: 增强Markdown编辑器功能,添加选区处理和初始化逻辑
chenshuai2144 Jan 18, 2025
629903d
1.14.5
chenshuai2144 Jan 18, 2025
a1afc4a
merge main
222chaos Jan 19, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
{
"name": "@ant-design/md-editor",
"version": "1.13.15",
"version": "1.14.5",
"description": "类语雀的编辑器,支持 markdown 渲染和编辑",
"repository": "[email protected]:ant-design/md-editor.git",
"license": "MIT",
"main": "dist/index.js",
"module": "dist/index.js",
"types": "dist/index.d.ts",
"files": [
Expand Down
8 changes: 7 additions & 1 deletion src/MarkdownEditor/demos/preview.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { MarkdownEditor } from '@ant-design/md-editor';
import { Tooltip } from 'antd';
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
const defaultValue = `<!-- {"MarkdownType": "report", "id": "8", "section_ids": " [15, 16, 17] "} -->

# 腾讯研究报告
Expand Down Expand Up @@ -137,6 +137,7 @@ const defaultValue = `<!-- {"MarkdownType": "report", "id": "8", "section_ids":

`;
export default () => {
const editorRef = React.useRef<any>();
const [list, setList] = useState([
{
selection: {
Expand Down Expand Up @@ -190,8 +191,13 @@ export default () => {
commentType: 'comment',
},
]);
useEffect(() => {
// @ts-ignore
window.editorRef = editorRef;
}, []);
return (
<MarkdownEditor
editorRef={editorRef}
width={'100vw'}
height={'100vh'}
reportMode
Expand Down
31 changes: 31 additions & 0 deletions src/MarkdownEditor/editor/Editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,9 @@ export const MEditor = observer(
const first = useRef(true);
const highlight = useHighlight();

/**
* 初始化编辑器
*/
const initialNote = useCallback(async () => {
if (instance) {
nodeRef.current = instance;
Expand Down Expand Up @@ -631,6 +634,34 @@ export const MEditor = observer(
...editorProps.style,
}
}
onSelect={() => {
if (store.focus) {
store.editor.selection = getSelectionFromDomSelection(
store.editor,
window.getSelection()!,
);
store.setState((state) => {
state.preSelection = store.editor.selection;
});
}
}}
onCut={(event: React.ClipboardEvent<HTMLDivElement>) => {
if (isEventHandled(event)) {
return;
}
if (!hasEditableTarget(editor, event.target)) {
const domSelection = window.getSelection();
editor.selection = getSelectionFromDomSelection(
editor,
domSelection!,
);
if (editor.selection) {
Transforms.delete(editor, { at: editor.selection! });
return;
}
}
event.preventDefault();
}}
onMouseDown={checkEnd}
onFocus={onFocus}
onBlur={onBlur}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
alignItems: 'center',
gap: '4px',
padding: '4px',
borderRadius: '18px',
borderRadius: '12px',
cursor: 'pointer',
'&:hover': {
backgroundColor: 'rgb(209 213 219 / 0.4)',
Expand Down
2 changes: 2 additions & 0 deletions src/MarkdownEditor/editor/elements/chart/ChartRender.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,8 @@ export const ChartRender: React.FC<{
const chartDom = useMemo(() => {
if (typeof window === 'undefined') return null;
if (process.env.NODE_ENV === 'test') return null;
//@ts-ignore
if (window?.notRenderChart) return null;
if (chartType === 'table') {
return (
<div
Expand Down
2 changes: 1 addition & 1 deletion src/MarkdownEditor/editor/elements/list/style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
[`li:not(${token.componentCls}-task) > :first-child .ant-md-editor-drag-handle`]:
{
paddingLeft: '2px',
paddingRight: '18px',
paddingRight: '12px',
left: '-44px !important',
},
[`li${token.componentCls}-task > :nth-child(2) .ant-md-editor-drag-handle`]:
Expand Down
27 changes: 16 additions & 11 deletions src/MarkdownEditor/editor/elements/renderSideDiv.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {
import React, {
CSSProperties,
SetStateAction,
useEffect,
Expand Down Expand Up @@ -119,10 +119,9 @@ export function RowSideDiv(props: {
style={{
position: 'absolute',
display: 'block',
borderBottom: '1px solid #DFDFDF',
zIndex: 100,
width: '14px',
marginTop: '15.5px',
width: '0.9em',
marginTop: '16px',
marginLeft: '-16px',
}}
contentEditable={false}
Expand All @@ -137,8 +136,14 @@ export function RowSideDiv(props: {
position: 'relative',
width: '14px',
height:
tr?.getBoundingClientRect?.()?.height - 1 ||
tr?.clientHeight - 1,
index === 0
? tr?.getBoundingClientRect?.()?.height - 1.66 ||
tr?.clientHeight - 2
: tr?.getBoundingClientRect?.()?.height - 0.66 ||
tr?.clientHeight - 1,
...(index === rowDomArr.length - 1 && {
borderBottomLeftRadius: '0.5em',
}),
}}
getTableNode={getTableNode}
activationArr={activationArr}
Expand Down Expand Up @@ -212,7 +217,7 @@ export function ColSideDiv(props: {
style={{
position: 'relative',
display: 'flex',
height: '16px',
height: '1rem',
zIndex: 100,
transform: `translateX(${scrollOffset / 9999}px)`,
}}
Expand All @@ -229,12 +234,12 @@ export function ColSideDiv(props: {
divStyle={{
position: 'absolute',
top: 0,
left: leftPosition - 50.5,
left: leftPosition - 59,
width: colRect?.width || td?.clientWidth,
height: '14.5px',
height: '0.9em',
zIndex: 101,
...(index === colDomArr.length - 1 && {
borderTopRightRadius: '7.2px',
borderTopRightRadius: '0.5em',
}),
}}
getTableNode={getTableNode}
Expand Down Expand Up @@ -292,4 +297,4 @@ export function IntersectionPointDiv(props: {
}}
></div>
);
}
}
54 changes: 45 additions & 9 deletions src/MarkdownEditor/editor/elements/table.css
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
.selected-cell-td {
background-color: rgba(209, 236, 249) !important;
transition: all 0.3 cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.intersection-point {
height: 14.4px;
width: 14.4px;
height: 0.9em;
width: 0.9em;
border: 1px solid #dfdfdf;
border-right: 0px;
border-bottom: 0px;
z-index: 20;
position: absolute;
margin-top: 0px;
margin-left: -16px;
border-top-left-radius: 50%;
transition: all 0.3 cubic-bezier(0.23, 1, 0.32, 1);
border-top-left-radius: 0.5em;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
background-color: #e1f0ff;
&.active {
Expand All @@ -34,7 +34,7 @@
z-index: 20;
cursor: pointer;
background-color: #e1f0ff;
transition: all 0.3 cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
&.full-active {
background-color: #59a5f6;
}
Expand All @@ -51,9 +51,45 @@
background-color: #d8ecff;
}
}
.ant-md-editor-content-table.show-bar th:first-child {
.ant-md-editor-content-table .md-editor-table th {
border-top: 1px solid rgba(209, 213, 219, 0.8);
}
.ant-md-editor-content-table.show-bar .md-editor-table th:first-child {
border-top-left-radius: 0;
}
.ant-md-editor-content-table.show-bar th:last-child {
.ant-md-editor-content-table.show-bar .md-editor-table th:last-child {
border-top-right-radius: 0;
}
}
.ant-md-editor-content-table .md-editor-table th:first-child {
border-left: 1px solid rgba(209, 213, 219, 0.8);
}
.ant-md-editor-content-table .md-editor-table th:last-child {
border-right: 1px solid rgba(209, 213, 219, 0.8);
}
.ant-md-editor-content-table .md-editor-table td:first-child {
border-left: 1px solid rgba(209, 213, 219, 0.8);
}
.ant-md-editor-content-table .md-editor-table td:last-child {
border-right: 1px solid rgba(209, 213, 219, 0.8);
}
.ant-md-editor-content-table .md-editor-table tr:last-child td {
border-bottom: 1px solid rgba(209, 213, 219, 0.8);
}
.ant-md-editor-content-table .md-editor-table tr:last-child td:first-child {
border-bottom-left-radius: 0.5em;
}
.ant-md-editor-content-table.show-bar
.md-editor-table
tr:last-child
td:first-child {
border-bottom-left-radius: 0;
}
.ant-md-editor-content-table .md-editor-table tr:last-child td:last-child {
border-bottom-right-radius: 0.5em;
}
.ant-md-editor-content-table .md-editor-table th:first-child {
border-top-left-radius: 0.5em;
}
.ant-md-editor-content-table .md-editor-table th:last-child {
border-top-right-radius: 0.5em;
}
20 changes: 4 additions & 16 deletions src/MarkdownEditor/editor/elements/table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import { DragHandle } from '../tools/DragHandle';
import { TableAttr } from '../tools/TableAttr';
import { ColSideDiv, IntersectionPointDiv, RowSideDiv } from './renderSideDiv';
import './table.css';

const numberValidationRegex = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/;

/**
Expand Down Expand Up @@ -55,11 +54,7 @@ export function TableCell(props: RenderElementProps) {
const minWidth = Math.min(domWidth, 200);
const text = Node.string(props.element);
return props.element.title ? (
<th
{...props.attributes}
style={{ textAlign: props.element.align }}
data-be={'th'}
>
<th {...props.attributes} data-be={'th'}>
<div
style={{
minWidth: minWidth,
Expand All @@ -71,12 +66,7 @@ export function TableCell(props: RenderElementProps) {
</div>
</th>
) : (
<td
{...props.attributes}
style={{ textAlign: props.element.align }}
data-be={'td'}
className={classNames('group')}
>
<td {...props.attributes} data-be={'td'} className={classNames('group')}>
{readonly && domWidth > 200 ? (
<Popover
title={
Expand Down Expand Up @@ -105,9 +95,6 @@ export function TableCell(props: RenderElementProps) {
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
maxHeight: 40,
textAlign: numberValidationRegex.test(text?.replaceAll(',', ''))
? 'right'
: undefined,
}}
>
{text}
Expand Down Expand Up @@ -434,8 +421,9 @@ export const Table = observer((props: RenderElementProps) => {
/>
</div>
<table
className="md-editor-table"
style={{
borderCollapse: 'collapse',
borderCollapse: 'separate',
borderSpacing: 0,
}}
ref={tableTargetRef}
Expand Down
1 change: 1 addition & 0 deletions src/MarkdownEditor/editor/store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export class EditorStore {
domRect: DOMRect | null = null;
domRange: HTMLElement | null = null;
container: null | HTMLDivElement = null;
preSelection: null | Selection = null;
inputComposition = false;
tableTask$ = new Subject<
| 'insertRowBefore'
Expand Down
6 changes: 3 additions & 3 deletions src/MarkdownEditor/editor/style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
marginBottom: '0.3em',
},
'.attach .file': {
borderRadius: '18px',
borderRadius: '12px',
borderWidth: '1px',
borderColor: 'rgb(229 231 235 / 1)',
backgroundColor: 'rgb(249 250 251 / 1)',
Expand Down Expand Up @@ -206,7 +206,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
width: '4px',
position: 'absolute',
display: 'block',
borderRadius: '18px',
borderRadius: '12px',
backgroundColor: 'rgb(107 114 128 / 1)',
},
},
Expand Down Expand Up @@ -236,7 +236,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
cursor: 'pointer',
},
'& &-high-text': {
borderRadius: '18px',
borderRadius: '12px',
},
'& &-m-html': {
color: 'rgba(0,0,0,0.45)',
Expand Down
1 change: 1 addition & 0 deletions src/MarkdownEditor/editor/tools/ToolBar/FloatBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ export const FloatBar = observer((props: { readonly: boolean }) => {
if (Editor.hasPath(store?.editor, end)) {
Transforms.select(store?.editor, Editor.end(store?.editor, end));
}
store.setFloatBarOpen(false);
}
};
window.addEventListener('keydown', close);
Expand Down
2 changes: 1 addition & 1 deletion src/MarkdownEditor/editor/tools/ToolBar/floatBarStyle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
border: '1px solid rgb(229 231 235 / 0.8)',
overflow: 'hidden',
height: '28px',
borderRadius: '18px',
borderRadius: '12px',
backgroundColor: 'rgb(255 255 255)',
fontSize: '1.05em',
color: 'rgb(107 114 128 / 80%)',
Expand Down
2 changes: 1 addition & 1 deletion src/MarkdownEditor/editor/tools/insertAutocompleteStyle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
lineHeight: '24px',
gap: '4px',
padding: '4px',
borderRadius: '18px',
borderRadius: '12px',
cursor: 'pointer',
'&:hover': {
backgroundColor: 'rgb(209 213 219 / 0.4)',
Expand Down
2 changes: 1 addition & 1 deletion src/MarkdownEditor/editor/tools/tableAttrStyle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
position: 'absolute',
zIndex: 10,
gap: '4px',
borderRadius: '18px',
borderRadius: '12px',
'&-item': {
display: 'flex',
fontSize: '1.1em',
Expand Down
Loading