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',
selectable: true,
atom: true,
draggable: true,
addOptions() {
return {

View File

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

View File

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

View File

@ -1,4 +1,4 @@
import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
import { NodeViewWrapper } from '@tiptap/react';
import { useRouter } from 'next/router';
import Link from 'next/link';
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 Link from 'next/link';
import cls from 'classnames';