Skip to content

Commit

Permalink
修复弹框问题和任务列表
Browse files Browse the repository at this point in the history
  • Loading branch information
@chenshuai2144
chenshuai2144 committed Oct 31, 2024
1 parent 757f765 commit c1a486e
Show file tree
Hide file tree
Showing 7 changed files with 317 additions and 134 deletions.
28 changes: 24 additions & 4 deletions src/MarkdownEditor/demos/empty.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,18 @@ public class HelloWorld {
upload: async (fileList) => {
return new Promise((resolve) => {
const file = fileList[0];
const url = URL.createObjectURL(file);
resolve(url);
if (typeof file === 'string') {
fetch(file)
.then((res) => res.blob())
.then((blob) => {
console.log(blob);
const url = URL.createObjectURL(blob);
resolve(url);
});
} else {
const url = URL.createObjectURL(file);
resolve(url);
}
});
},
}}
Expand Down Expand Up @@ -178,8 +188,18 @@ public class HelloWorld {
upload: async (fileList) => {
return new Promise((resolve) => {
const file = fileList[0];
const url = URL.createObjectURL(file);
resolve(url);
if (typeof file === 'string') {
fetch(file)
.then((res) => res.blob())
.then((blob) => {
console.log(blob);
const url = URL.createObjectURL(blob);
resolve(url);
});
} else {
const url = URL.createObjectURL(file);
resolve(url);
}
});
},
}}
Expand Down
58 changes: 55 additions & 3 deletions src/MarkdownEditor/demos/minPreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ export default () => {
style={{
height: '400vh',
overflow: 'auto',
paddingTop: '400px',
}}
>
<MarkdownEditor
Expand All @@ -54,13 +53,66 @@ export default () => {
comment={{
enable: true,
}}
readonly
reportMode
image={{
upload: async (fileList) => {
return new Promise((resolve) => {
const file = fileList[0];
const url = URL.createObjectURL(file);
resolve(url);
if (typeof file === 'string') {
fetch(file)
.then((res) => res.blob())
.then((blob) => {
console.log(blob);
const url = URL.createObjectURL(blob);
resolve(url);
});
} else {
const url = URL.createObjectURL(file);
resolve(url);
}
});
},
}}
style={{
width: '80%',
margin: '0 auto',
border: '1px solid #e8e8e8',
height: 'calc(100vh - 400px)',
}}
initValue={defaultValue}
/>
<MarkdownEditor
toc={false}
toolBar={{
enable: true,
hideTools: ['code', 'inline-code'],
extra: [
<Button key="save" type="primary" size="small">
Save
</Button>,
],
}}
comment={{
enable: true,
}}
reportMode
image={{
upload: async (fileList) => {
return new Promise((resolve) => {
const file = fileList[0];
if (typeof file === 'string') {
fetch(file)
.then((res) => res.blob())
.then((blob) => {
console.log(blob);
const url = URL.createObjectURL(blob);
resolve(url);
});
} else {
const url = URL.createObjectURL(file);
resolve(url);
}
});
},
}}
Expand Down
110 changes: 7 additions & 103 deletions src/MarkdownEditor/editor/tools/ToolBar/BaseBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,22 @@
import {
BoldOutlined,
ClearOutlined,
CommentOutlined,
ItalicOutlined,
LinkOutlined,
PlusCircleFilled,
RedoOutlined,
StrikethroughOutlined,
UndoOutlined,
} from '@ant-design/icons';
import { ColorPicker, Divider, Dropdown, Input, Modal } from 'antd';
import { ColorPicker, Divider, Dropdown } from 'antd';
import classnames from 'classnames';
import { runInAction } from 'mobx';
import { observer } from 'mobx-react-lite';
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { Editor, Element, Node, NodeEntry, Point, Transforms } from 'slate';
import { CommentDataType, keyTask$ } from '../../../index';
import { Editor, Element, NodeEntry } from 'slate';
import { keyTask$ } from '../../../index';
import { useEditorStore } from '../../store';
import {
EditorUtils,
getPointStrOffset,
getSelectionFromDomSelection,
} from '../../utils/editorUtils';
import { EditorUtils } from '../../utils/editorUtils';
import { getInsertOptions } from '../InsertAutocomplete';

const HeatTextMap = {
Expand Down Expand Up @@ -107,14 +102,15 @@ export const BaseToolBar = observer(
showInsertAction?: boolean;
extra?: React.ReactNode[];
min?: boolean;
readonly?: boolean;
hashId?: string;
hideTools?: ToolsKeyType[];
showEditor?: boolean;
}) => {
const baseClassName = props.prefix || `toolbar-action`;
const { hashId } = props;

const { store, readonly } = useEditorStore();
const { store } = useEditorStore();

const [, setRefresh] = React.useState(false);
const [highColor, setHighColor] = React.useState<string | null>(null);
Expand Down Expand Up @@ -298,99 +294,6 @@ export const BaseToolBar = observer(
/>,
);
}
if (store?.editorProps?.comment?.enable && !props.showEditor) {
list.push(
<div
role="button"
key="comment"
className={classnames(`${baseClassName}-item`, hashId)}
onClick={() => {
const domSelection = window.getSelection();
const editor = store?.editor;
let selection = editor.selection;
if (!selection) {
if (readonly && domSelection) {
selection = getSelectionFromDomSelection(
store?.editor,
domSelection!,
);
}

if (!selection) {
return;
}
}

let texts: string[] = [];
let title = '';
const fragments = Node.fragment(editor, selection);
for (let i = 0; i < fragments.length; i++) {
texts.push(Node.string(fragments[i]));
}
for (const str of texts) {
title += str;
}
const { focus, anchor } = selection;
const [start, end] = Point.isAfter(focus, anchor)
? [anchor, focus]
: [focus, anchor];
const anchorOffset = getPointStrOffset(editor, start);
const focusOffset = getPointStrOffset(editor, end);

const comment: CommentDataType = {
selection: { anchor: start, focus: end },
path: start.path,
time: Date.now(),
id: Date.now(),
content: '',
anchorOffset: anchorOffset,
focusOffset: focusOffset,
refContent: title,
commentType: 'comment',
};
Modal.confirm({
title: '添加评论',
content: (
<Input.TextArea
style={{
width: '100%',
height: 100,
resize: 'none',
}}
onChange={(e) => {
comment.content = e.target.value;
}}
/>
),
icon: null,
onOk: async () => {
if (comment.content.trim() === '') {
return;
}
try {
await store?.editorProps?.comment?.onSubmit?.(
comment.id + '',
comment,
);
// 更新时间戳,触发一下dom的rerender，不然不给我更新
Transforms.setNodes(
editor,
{
updateTimestamp: Date.now(),
},
{
at: comment.path,
},
);
} catch (error) {}
},
});
}}
>
<CommentOutlined />
</div>,
);
}

list.push(
<div
Expand Down Expand Up @@ -519,6 +422,7 @@ export const BaseToolBar = observer(
}
if (props.hideTools) {
list = list.filter((l) => {
console.log(l.key);
return !props?.hideTools?.includes(l.key as ToolsKeyType);
});
}
Expand Down
51 changes: 31 additions & 20 deletions src/MarkdownEditor/editor/tools/ToolBar/FloatBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,14 @@ import { getSelRect } from '../../utils/dom';
import { useLocalState } from '../../utils/useLocalState';
import { BaseToolBar } from './BaseBar';
import { useStyle } from './floatBarStyle';
import { ReadonlyBaseBar } from './ReadonlyBaseBar';

const fileMap = new Map<string, IEditor>();

/**
* 浮动工具栏,用于设置文本样式
*/
export const FloatBar = observer(() => {
export const FloatBar = observer((props: { readonly: boolean }) => {
const { store } = useEditorStore();
const [state, setState] = useLocalState({
open: false,
Expand All @@ -26,25 +27,32 @@ export const FloatBar = observer(() => {

const sel = React.useRef<BaseRange>();

const resize = useCallback((force = false) => {
if (store.domRect && !store.openLinkPanel) {
let left = store.domRect.x;
left = left - (178 - store.domRect.width) / 2;
const container = store.container!;
if (left < 4) left = 4;
const barWidth = 232;
if (left > container.clientWidth - barWidth)
left = container.clientWidth - barWidth / 2;
const resize = useCallback(
(force = false) => {
if (store.domRect && !store.openLinkPanel) {
let left = store.domRect.x;
left = left - ((props.readonly ? 65 : 178) - store.domRect.width) / 2;

let top = state.open && !force ? state.top : store.domRect.top - 32;
console.log('store.domRect', store.domRect);

setState({
open: true,
left: Math.max(left - container.getBoundingClientRect().left, 4),
top: Math.max(top - container.getBoundingClientRect().top, 4),
});
}
}, []);
const container = store.container!;
if (left < 4) left = 4;
const barWidth = props.readonly ? 65 : 232;

if (left > container.clientWidth - barWidth)
left = container.clientWidth - barWidth / 2;

let top = state.open && !force ? state.top : store.domRect.top - 32;

setState({
open: true,
left: Math.max(left - container.getBoundingClientRect().left, 4),
top: Math.max(top - container.getBoundingClientRect().top, 4),
});
}
},
[props.readonly, state.open],
);

useEffect(() => {
if (store.domRect && store.editor) {
Expand Down Expand Up @@ -102,15 +110,18 @@ export const FloatBar = observer(() => {
left: state.left,
top: state.top,
display: state.open ? undefined : 'none',
padding: 4,
}}
onMouseDown={(e) => {
e.preventDefault();
e.stopPropagation();
}}
className={classNames(baseClassName, hashId)}
>
<BaseToolBar prefix={baseClassName} hashId={hashId} />
{props.readonly ? (
<ReadonlyBaseBar prefix={baseClassName} hashId={hashId} />
) : (
<BaseToolBar prefix={baseClassName} hashId={hashId} />
)}
</div>,
);
});
Loading

1 comment on commit c1a486e

@vercel
Copy link

@vercel vercel bot commented on c1a486e Oct 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

md-to-json-schema – ./

md-to-json-schema-ai-flow-task.vercel.app
md-to-json-schema.antdigital.dev
md-to-json-schema.vercel.app
md-to-json-schema-git-main-ai-flow-task.vercel.app

Please sign in to comment.