fix: fix custom node wrapper select

This commit is contained in:
fantasticit 2022-04-01 19:36:26 +08:00
parent 39cf943eaa
commit 9b47b81374
5 changed files with 17 additions and 18 deletions

View File

@ -18,6 +18,7 @@ export const Attachment = Node.create({
group: 'block', group: 'block',
selectable: true, selectable: true,
atom: true, atom: true,
draggable: true,
addOptions() { addOptions() {
return { return {

View File

@ -33,6 +33,8 @@
.node-katex, .node-katex,
.node-documentChildren, .node-documentChildren,
.node-documentReference { .node-documentReference {
user-select: none;
.render-wrapper { .render-wrapper {
border: 1px solid var(--node-border-color); border: 1px solid var(--node-border-color);
} }

View File

@ -53,10 +53,15 @@ export const AttachmentWrapper = ({ editor, node, updateAttributes }) => {
}, [url, hasTrigger]); }, [url, hasTrigger]);
const content = (() => { const content = (() => {
if (error !== 'null') { if (isEditable && !url) {
return ( return (
<div className={cls(styles.wrap, 'render-wrapper')} onClick={selectFile}> <div className={cls(styles.wrap, 'render-wrapper')}>
<Text>{error}</Text> <Spin spinning={loading}>
<Text style={{ cursor: 'pointer' }} onClick={selectFile}>
{loading ? '正在上传中' : '请选择文件'}
</Text>
<input ref={$upload} type="file" hidden onChange={handleFile} />
</Spin>
</div> </div>
); );
} }
@ -102,23 +107,14 @@ export const AttachmentWrapper = ({ editor, node, updateAttributes }) => {
); );
} }
if (isEditable && !url) { if (error !== 'null') {
return ( return (
<div className={cls(styles.wrap, 'render-wrapper')}> <div className={cls(styles.wrap, 'render-wrapper')} onClick={selectFile}>
<Spin spinning={loading}> <Text>{error}</Text>
<Text style={{ cursor: 'pointer' }} onClick={selectFile}>
{loading ? '正在上传中' : '请选择文件'}
</Text>
<input ref={$upload} type="file" hidden onChange={handleFile} />
</Spin>
</div> </div>
); );
} }
})(); })();
return ( return <NodeViewWrapper as="div">{content}</NodeViewWrapper>;
<NodeViewWrapper as="div">
{content} <NodeViewContent />
</NodeViewWrapper>
);
}; };

View File

@ -1,4 +1,4 @@
import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'; import { NodeViewWrapper } from '@tiptap/react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Link from 'next/link'; import Link from 'next/link';
import cls from 'classnames'; import cls from 'classnames';

View File

@ -1,4 +1,4 @@
import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'; import { NodeViewWrapper } from '@tiptap/react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Link from 'next/link'; import Link from 'next/link';
import cls from 'classnames'; import cls from 'classnames';