Merge pull request #144 from fantasticit/fix/drag

This commit is contained in:
fantasticit 2022-08-03 18:55:10 +08:00 committed by GitHub
commit a4ea4bf965
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 384 additions and 505 deletions

View File

@ -158,6 +158,8 @@ export interface CodeBlockLowlightOptions extends CodeBlockOptions {
} }
export const CodeBlock = BuiltInCodeBlock.extend<CodeBlockLowlightOptions>({ export const CodeBlock = BuiltInCodeBlock.extend<CodeBlockLowlightOptions>({
draggable: true,
addOptions() { addOptions() {
return { return {
...this.parent?.(), ...this.parent?.(),

View File

@ -64,15 +64,12 @@ export const Countdown = Node.create({
} }
const { selection } = editor.state; const { selection } = editor.state;
const pos = selection.$head;
return chain() return chain()
.insertContentAt(pos.after(), [ .insertContent({
{
type: this.name, type: this.name,
attrs: options, attrs: options,
}, })
])
.run(); .run();
}, },
}; };

View File

@ -1,158 +0,0 @@
import { Extension } from '@tiptap/core';
import { Plugin } from 'prosemirror-state';
import { NodeSelection } from 'prosemirror-state';
import { __serializeForClipboard } from 'prosemirror-view';
function createRect(rect) {
if (rect == null) {
return null;
}
const newRect = {
left: rect.left + document.body.scrollLeft,
top: rect.top + document.body.scrollTop,
width: rect.width,
height: rect.height,
bottom: 0,
right: 0,
};
newRect.bottom = newRect.top + newRect.height;
newRect.right = newRect.left + newRect.width;
return newRect;
}
function absoluteRect(element) {
return createRect(element.getBoundingClientRect());
}
export const Dragable = Extension.create({
name: 'dragable',
addProseMirrorPlugins() {
let scrollContainer;
let dropElement;
let currentNode;
let editorView;
const WIDTH = 24;
function drag(e) {
if (!currentNode || currentNode.nodeType !== 1) return;
let pos = null;
const desc = editorView.docView.nearestDesc(currentNode, true);
if (!(!desc || desc === editorView.docView)) {
pos = desc.posBefore;
}
if (!pos) return;
editorView.dispatch(editorView.state.tr.setSelection(NodeSelection.create(editorView.state.doc, pos)));
const slice = editorView.state.selection.content();
const { dom, text } = __serializeForClipboard(editorView, slice);
e.dataTransfer.clearData();
e.dataTransfer.setData('text/html', dom.innerHTML);
e.dataTransfer.setData('text/plain', text);
editorView.dragging = { slice, move: true };
}
function onScroll() {
if (!dropElement) return;
dropElement.style.opacity = 0;
}
return [
new Plugin({
view(view) {
if (view.editable) {
editorView = view;
dropElement = document.createElement('div');
dropElement.setAttribute('draggable', 'true');
dropElement.className = 'drag-handler';
dropElement.addEventListener('dragstart', drag);
view.dom.parentElement.appendChild(dropElement);
scrollContainer = view.dom.parentElement.parentElement?.parentElement?.parentElement;
if (scrollContainer) {
scrollContainer.addEventListener('scroll', onScroll);
}
}
return {
update(view) {
editorView = view;
},
destroy() {
if (dropElement && dropElement.parentNode) {
dropElement.removeEventListener('dragstart', drag);
dropElement.parentNode.removeChild(dropElement);
}
if (scrollContainer) {
scrollContainer.removeEventListener('scroll', onScroll);
}
},
};
},
props: {
handleDOMEvents: {
drop() {
if (!dropElement) return;
dropElement.style.opacity = 0;
setTimeout(() => {
const node = document.querySelector('.ProseMirror-hideselection');
if (node) {
node.classList.remove('ProseMirror-hideselection');
}
}, 50);
},
mousedown(view, event) {
if (!dropElement) return;
const coords = { left: event.clientX, top: event.clientY };
const pos = view.posAtCoords(coords);
if (!pos) {
dropElement.style.opacity = 0;
return;
}
let node = view.domAtPos(pos.pos);
node = node.node;
while (node && node.parentNode) {
if (node.parentNode?.classList?.contains?.('ProseMirror')) {
break;
}
node = node.parentNode;
}
if (!node || !node.getBoundingClientRect) {
dropElement.style.opacity = 0;
return;
}
if (node?.classList?.contains('node-title') || node?.classList?.contains('node-table')) {
dropElement.style.opacity = 0;
return;
}
currentNode = node;
const rect = absoluteRect(node);
const win = node.ownerDocument.defaultView;
rect.top += win.pageYOffset;
rect.left += win.pageXOffset;
rect.width = WIDTH + 'px';
dropElement.style.left = rect.left - WIDTH + 'px';
dropElement.style.top = rect.top + 6 + 'px';
dropElement.style.opacity = 1;
},
},
},
}),
];
},
});

View File

@ -84,15 +84,12 @@ export const Flow = Node.create({
} }
const { selection } = editor.state; const { selection } = editor.state;
const pos = selection.$head;
return chain() return chain()
.insertContentAt(pos.after(), [ .insertContent({
{
type: this.name, type: this.name,
attrs: options, attrs: options,
}, })
])
.run(); .run();
}, },
}; };

View File

@ -84,15 +84,12 @@ export const Iframe = Node.create({
const attrs = options || { url: '' }; const attrs = options || { url: '' };
const { selection } = editor.state; const { selection } = editor.state;
const pos = selection.$head;
return chain() return chain()
.insertContentAt(pos.after(), [ .insertContent({
{
type: this.name, type: this.name,
attrs, attrs,
}, })
])
.run(); .run();
}, },
}; };

View File

@ -95,15 +95,12 @@ export const Mind = Node.create({
} }
const { selection } = editor.state; const { selection } = editor.state;
const pos = selection.$head;
return chain() return chain()
.insertContentAt(pos.after(), [ .insertContent({
{
type: this.name, type: this.name,
attrs: options, attrs: options,
}, })
])
.run(); .run();
}, },
}; };

View File

@ -1,3 +1,22 @@
import { mergeAttributes } from '@tiptap/core';
import TitapParagraph from '@tiptap/extension-paragraph'; import TitapParagraph from '@tiptap/extension-paragraph';
export const Paragraph = TitapParagraph.extend({}); export const Paragraph = TitapParagraph.extend({
draggable: true,
renderHTML({ HTMLAttributes }) {
return [
'p',
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
[
'div',
{
'contentEditable': 'false',
'draggable': 'true',
'data-drag-handle': 'true',
},
],
['div', 0],
];
},
});

View File

@ -22,6 +22,16 @@ export const useEditor = (options: Partial<EditorOptions> = {}, deps: Dependency
const forceUpdate = useForceUpdate(); const forceUpdate = useForceUpdate();
useEffect(() => { useEffect(() => {
options.editorProps = options.editorProps || {};
if (options.editable) {
options.editorProps.attributes = options.editorProps.attributes || {};
// @ts-ignore
options.editorProps.attributes.class = options.editorProps.attributes.class || '';
// @ts-ignore
options.editorProps.attributes.class += ' is-editable';
}
const instance = new Editor(options); const instance = new Editor(options);
setEditor(instance); setEditor(instance);

View File

@ -1,11 +1,91 @@
.drag-handler { /* stylelint-disable */
position: fixed; .ProseMirror {
&.is-editable {
[data-drag-handle] {
position: relative;
display: inline;
opacity: 0;
transition: opacity 0.3s ease-out;
z-index: 100;
&:hover {
opacity: 1 !important;
}
&::before {
content: '';
position: absolute;
left: -24px;
top: 2px;
width: 16px; width: 16px;
height: 16px; height: 16px;
cursor: grab; text-align: center;
opacity: 1; margin-left: auto;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"><path fill-opacity="0.2" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>'); cursor: move;
background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='1' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='10' y='1' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='3' y='6' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='10' y='6' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='3' y='11' width='3' height='3' rx='1.5' fill='%23111'/%3E%3Crect x='10' y='11' width='3' height='3' rx='1.5' fill='%23111'/%3E%3C/svg%3E");
background-size: contain; background-size: contain;
background-position: center; background-position: center 0;
background-repeat: no-repeat;
filter: var(--invert-filter);
}
}
p {
[data-drag-handle] {
&::before {
top: 6px;
}
}
&:hover {
[data-drag-handle] {
opacity: 0.3;
}
}
}
ul {
li {
[data-drag-handle] {
&::before {
left: -36px;
}
}
}
&[data-type='taskList'] {
li {
[data-drag-handle] {
&::before {
left: -46px;
}
}
}
}
}
ol {
li {
[data-drag-handle] {
&::before {
left: -36px;
}
}
}
}
.drag-container {
position: relative;
&:hover {
[data-drag-handle] {
opacity: 0.3;
}
}
.drag-content {
width: 100%;
}
}
}
} }

View File

@ -21,7 +21,8 @@
} }
.node-codeBlock, .node-codeBlock,
.node-katex { .node-katex,
.node-documentChildren {
.render-wrapper { .render-wrapper {
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }

View File

@ -1,13 +1,12 @@
import { IconClose, IconDownload, IconPlayCircle } from '@douyinfe/semi-icons'; import { IconClose, IconDownload, IconPlayCircle } from '@douyinfe/semi-icons';
import { Button, Collapsible, Progress, Space, Spin, Toast, Typography } from '@douyinfe/semi-ui'; import { Button, Collapsible, Progress, Space, Spin, Toast, Typography } from '@douyinfe/semi-ui';
import { FILE_CHUNK_SIZE } from '@think/domains'; import { FILE_CHUNK_SIZE } from '@think/domains';
import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames'; import cls from 'classnames';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { uploadFile } from 'services/file'; import { uploadFile } from 'services/file';
import { Attachment } from 'tiptap/core/extensions/attachment';
import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
import { download, extractFileExtension, extractFilename, normalizeFileSize } from 'tiptap/prose-utils'; import { download, extractFileExtension, extractFilename, normalizeFileSize } from 'tiptap/prose-utils';
import { getFileTypeIcon } from './file-icon'; import { getFileTypeIcon } from './file-icon';
@ -156,8 +155,9 @@ export const AttachmentWrapper = ({ editor, node, updateAttributes }) => {
})(); })();
return ( return (
<DragableWrapper editor={editor} extensionName={Attachment.name}> <NodeViewWrapper className={'drag-container'}>
{content} <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
</DragableWrapper> <div className={'drag-content'}>{content}</div>
</NodeViewWrapper>
); );
}; };

View File

@ -44,4 +44,10 @@
display: flex; display: flex;
padding: 10px; padding: 10px;
} }
[data-node-view-content] {
[data-drag-handle] {
opacity: 0 !important;
}
}
} }

View File

@ -1,11 +1,9 @@
import { NodeViewContent } from '@tiptap/react'; import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames'; import cls from 'classnames';
import { EmojiPicker } from 'components/emoji-picker'; import { EmojiPicker } from 'components/emoji-picker';
import { convertColorToRGBA } from 'helpers/color'; import { convertColorToRGBA } from 'helpers/color';
import { Theme, ThemeEnum } from 'hooks/use-theme'; import { Theme, ThemeEnum } from 'hooks/use-theme';
import { useCallback, useMemo } from 'react'; import { useCallback, useMemo } from 'react';
import { Callout } from 'tiptap/core/extensions/callout';
import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
import styles from './index.module.scss'; import styles from './index.module.scss';
@ -27,12 +25,9 @@ export const CalloutWrapper = ({ editor, node, updateAttributes }) => {
); );
return ( return (
<DragableWrapper <NodeViewWrapper id="js-callout-container" className={cls('drag-container', styles.wrap)}>
editor={editor} <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
extensionName={Callout.name} <div className={'drag-content'}>
id="js-callout-container"
className={cls(styles.wrap)}
>
<div <div
className={cls(styles.innerWrap, 'render-wrapper')} className={cls(styles.innerWrap, 'render-wrapper')}
style={{ style={{
@ -53,6 +48,7 @@ export const CalloutWrapper = ({ editor, node, updateAttributes }) => {
}} }}
/> />
</div> </div>
</DragableWrapper> </div>
</NodeViewWrapper>
); );
}; };

View File

@ -1,6 +1,6 @@
import { IconCopy } from '@douyinfe/semi-icons'; import { IconCopy } from '@douyinfe/semi-icons';
import { Button, Select, Tooltip } from '@douyinfe/semi-ui'; import { Button, Select, Tooltip } from '@douyinfe/semi-ui';
import { NodeViewContent } from '@tiptap/react'; import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames'; import cls from 'classnames';
import { copy } from 'helpers/copy'; import { copy } from 'helpers/copy';
import React, { useRef } from 'react'; import React, { useRef } from 'react';
@ -16,11 +16,9 @@ export const CodeBlockWrapper = ({ editor, node: { attrs }, updateAttributes, ex
const $container = useRef<HTMLPreElement>(); const $container = useRef<HTMLPreElement>();
return ( return (
<DragableWrapper <NodeViewWrapper className={cls('drag-container', styles.wrap, !isPrint && styles.maxHeight, 'render-wrapper')}>
editor={editor} <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
extensionName={CodeBlock.name} <div className={'drag-content'}>
className={cls(styles.wrap, !isPrint && styles.maxHeight, 'render-wrapper')}
>
<div className={styles.handleWrap}> <div className={styles.handleWrap}>
<Select <Select
size="small" size="small"
@ -50,6 +48,7 @@ export const CodeBlockWrapper = ({ editor, node: { attrs }, updateAttributes, ex
<pre ref={$container}> <pre ref={$container}>
<NodeViewContent as="code" /> <NodeViewContent as="code" />
</pre> </pre>
</DragableWrapper> </div>
</NodeViewWrapper>
); );
}; };

View File

@ -1,8 +1,7 @@
import { Space, Typography } from '@douyinfe/semi-ui'; import { Space, Typography } from '@douyinfe/semi-ui';
import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames'; import cls from 'classnames';
import ReactCountdown from 'react-countdown'; import ReactCountdown from 'react-countdown';
import { Countdown } from 'tiptap/core/extensions/countdown';
import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
import styles from './index.module.scss'; import styles from './index.module.scss';
@ -33,11 +32,14 @@ export const CountdownWrapper = ({ editor, node }) => {
const { title, date } = node.attrs; const { title, date } = node.attrs;
return ( return (
<DragableWrapper editor={editor} extensionName={Countdown.name}> <NodeViewWrapper className={'drag-container'}>
<div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
<div className={'drag-content'}>
<div className={cls(styles.wrap, 'render-wrapper')}> <div className={cls(styles.wrap, 'render-wrapper')}>
<Text>{title}</Text> <Text>{title}</Text>
<ReactCountdown date={date} renderer={renderer}></ReactCountdown> <ReactCountdown date={date} renderer={renderer}></ReactCountdown>
</div> </div>
</DragableWrapper> </div>
</NodeViewWrapper>
); );
}; };

View File

@ -1,6 +1,5 @@
.wrap { .wrap {
padding: 12px; padding: 12px;
border: 1px solid var(--node-border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
user-select: none; user-select: none;

View File

@ -1,4 +1,5 @@
import { Typography } from '@douyinfe/semi-ui'; import { Typography } from '@douyinfe/semi-ui';
import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames'; import cls from 'classnames';
import { DataRender } from 'components/data-render'; import { DataRender } from 'components/data-render';
import { Empty } from 'components/empty'; import { Empty } from 'components/empty';
@ -7,8 +8,6 @@ import { useChildrenDocument } from 'data/document';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { DocumentChildren } from 'tiptap/core/extensions/document-children';
import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
import styles from './index.module.scss'; import styles from './index.module.scss';
@ -36,13 +35,9 @@ export const DocumentChildrenWrapper = ({ editor, node, updateAttributes }) => {
}, [node.attrs, wikiId, documentId, updateAttributes]); }, [node.attrs, wikiId, documentId, updateAttributes]);
return ( return (
<DragableWrapper <NodeViewWrapper as="div" className={cls('drag-container', 'render-wrapper')}>
editor={editor} <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
extensionName={DocumentChildren.name} <div className={cls('drag-content', styles.wrap, isEditable && styles.isEditable, 'documentChildren')}>
as="div"
className={cls('render-wrapper', styles.wrap, isEditable && styles.isEditable, 'documentChildren')}
>
<div>
<div> <div>
<Text type="tertiary"></Text> <Text type="tertiary"></Text>
</div> </div>
@ -82,6 +77,6 @@ export const DocumentChildrenWrapper = ({ editor, node, updateAttributes }) => {
<Text type="tertiary">使</Text> <Text type="tertiary">使</Text>
)} )}
</div> </div>
</DragableWrapper> </NodeViewWrapper>
); );
}; };

View File

@ -1,10 +1,9 @@
import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames'; import cls from 'classnames';
import { IconDocument } from 'components/icons'; import { IconDocument } from 'components/icons';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { DocumentReference } from 'tiptap/core/extensions/document-reference';
import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
import styles from './index.module.scss'; import styles from './index.module.scss';
@ -51,13 +50,9 @@ export const DocumentReferenceWrapper = ({ editor, node, updateAttributes }) =>
}, [organizationId, wikiId, documentId, isEditable, isShare, title]); }, [organizationId, wikiId, documentId, isEditable, isShare, title]);
return ( return (
<DragableWrapper <NodeViewWrapper as="div" className={cls('drag-container', styles.wrap, isEditable && 'render-wrapper')}>
editor={editor} <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
extensionName={DocumentReference.name} <div className={'drag-content'}>{content}</div>
as="div" </NodeViewWrapper>
className={cls(styles.wrap, isEditable && 'render-wrapper')}
>
{content}
</DragableWrapper>
); );
}; };

View File

@ -1,30 +0,0 @@
.draggableItem {
position: relative;
display: flex;
.dragHandle {
position: absolute;
top: 0.3rem;
left: -24px;
width: 16px;
height: 16px;
cursor: grab;
opacity: 0;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"><path fill-opacity="0.2" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.content {
width: 100%;
}
&.isEditable {
&.isActive {
.dragHandle {
opacity: 1;
}
}
}
}

View File

@ -1,31 +0,0 @@
import { Editor } from '@tiptap/core';
import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames';
import React, { ElementType } from 'react';
import { useActive } from 'tiptap/core/hooks/use-active';
import styles from './index.module.scss';
export const DragableWrapper: React.FC<{
editor: Editor;
extensionName: string;
as?: ElementType;
id?: string;
className?: string;
style?: React.CSSProperties;
}> = ({ editor, extensionName, as = 'div', id, className, style = {}, children }) => {
const isEditable = editor.isEditable;
const isActive = useActive(editor, extensionName);
return (
<NodeViewWrapper
as={as}
id={id}
className={cls(styles.draggableItem, isEditable && styles.isEditable, isActive && styles.isActive, className)}
style={style}
>
<div className={styles.dragHandle} contentEditable="false" draggable="true" data-drag-handle />
<div className={styles.content}>{children}</div>
</NodeViewWrapper>
);
};

View File

@ -1,4 +1,5 @@
import { Button, Space, Spin, Typography } from '@douyinfe/semi-ui'; import { Button, Space, Spin, Typography } from '@douyinfe/semi-ui';
import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames'; import cls from 'classnames';
import { IconFlow, IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons'; import { IconFlow, IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
import { Resizeable } from 'components/resizeable'; import { Resizeable } from 'components/resizeable';
@ -7,7 +8,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
import VisibilitySensor from 'react-visibility-sensor'; import VisibilitySensor from 'react-visibility-sensor';
import { load, renderXml } from 'thirtypart/diagram'; import { load, renderXml } from 'thirtypart/diagram';
import { Flow } from 'tiptap/core/extensions/flow'; import { Flow } from 'tiptap/core/extensions/flow';
import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
import { getEditorContainerDOMSize } from 'tiptap/prose-utils'; import { getEditorContainerDOMSize } from 'tiptap/prose-utils';
import styles from './index.module.scss'; import styles from './index.module.scss';
@ -95,11 +95,9 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
}, [toggleLoading, data]); }, [toggleLoading, data]);
return ( return (
<DragableWrapper <NodeViewWrapper className={cls('drag-container', isActive && styles.isActive)}>
editor={editor} <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
className={cls(styles.wrap, isActive && styles.isActive)} <div className={cls('drag-content', styles.wrap)}>
extensionName={Flow.name}
>
<VisibilitySensor onChange={onViewportChange}> <VisibilitySensor onChange={onViewportChange}>
<Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}> <Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}>
<div <div
@ -138,6 +136,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
</div> </div>
</Resizeable> </Resizeable>
</VisibilitySensor> </VisibilitySensor>
</DragableWrapper> </div>
</NodeViewWrapper>
); );
}; };

View File

@ -1,9 +1,8 @@
import { Typography } from '@douyinfe/semi-ui'; import { Typography } from '@douyinfe/semi-ui';
import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames'; import cls from 'classnames';
import { Resizeable } from 'components/resizeable'; import { Resizeable } from 'components/resizeable';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { Iframe } from 'tiptap/core/extensions/iframe';
import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
import { getEditorContainerDOMSize } from 'tiptap/prose-utils'; import { getEditorContainerDOMSize } from 'tiptap/prose-utils';
import styles from './index.module.scss'; import styles from './index.module.scss';
@ -23,7 +22,9 @@ export const IframeWrapper = ({ editor, node, updateAttributes }) => {
); );
return ( return (
<DragableWrapper editor={editor} extensionName={Iframe.name}> <NodeViewWrapper className={'drag-container'}>
<div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
<div className={'drag-content'}>
<Resizeable width={width} maxWidth={maxWidth} height={height} isEditable={isEditable} onChangeEnd={onResize}> <Resizeable width={width} maxWidth={maxWidth} height={height} isEditable={isEditable} onChangeEnd={onResize}>
<div className={cls(styles.wrap, 'render-wrapper')}> <div className={cls(styles.wrap, 'render-wrapper')}>
{url ? ( {url ? (
@ -37,6 +38,7 @@ export const IframeWrapper = ({ editor, node, updateAttributes }) => {
)} )}
</div> </div>
</Resizeable> </Resizeable>
</DragableWrapper> </div>
</NodeViewWrapper>
); );
}; };

View File

@ -1,11 +1,10 @@
import { Spin, Typography } from '@douyinfe/semi-ui'; import { Spin, Typography } from '@douyinfe/semi-ui';
import { NodeViewWrapper } from '@tiptap/react';
import { Resizeable } from 'components/resizeable'; import { Resizeable } from 'components/resizeable';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import { useCallback, useEffect, useRef } from 'react'; import { useCallback, useEffect, useRef } from 'react';
import { LazyLoadImage } from 'react-lazy-load-image-component'; import { LazyLoadImage } from 'react-lazy-load-image-component';
import { uploadFile } from 'services/file'; import { uploadFile } from 'services/file';
import { Image } from 'tiptap/core/extensions/image';
import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
import { import {
extractFileExtension, extractFileExtension,
extractFilename, extractFilename,
@ -70,7 +69,9 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
}, [src, hasTrigger, selectFile, updateAttributes]); }, [src, hasTrigger, selectFile, updateAttributes]);
return ( return (
<DragableWrapper editor={editor} extensionName={Image.name} style={{ textAlign, fontSize: 0, maxWidth: '100%' }}> <NodeViewWrapper className={'drag-container'} style={{ textAlign, fontSize: 0, maxWidth: '100%' }}>
<div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
<div className={'drag-content'}>
<Resizeable <Resizeable
className={'render-wrapper'} className={'render-wrapper'}
width={width || maxWidth} width={width || maxWidth}
@ -94,6 +95,7 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
<LazyLoadImage src={src} alt={alt} width={width} height={height} /> <LazyLoadImage src={src} alt={alt} width={width} height={height} />
)} )}
</Resizeable> </Resizeable>
</DragableWrapper> </div>
</NodeViewWrapper>
); );
}; };

View File

@ -1,9 +1,8 @@
import { NodeViewWrapper } from '@tiptap/react';
import { convertColorToRGBA } from 'helpers/color'; import { convertColorToRGBA } from 'helpers/color';
import { Theme, ThemeEnum } from 'hooks/use-theme'; import { Theme, ThemeEnum } from 'hooks/use-theme';
import katex from 'katex'; import katex from 'katex';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { Katex } from 'tiptap/core/extensions/katex';
import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
import styles from './index.module.scss'; import styles from './index.module.scss';
@ -35,15 +34,16 @@ export const KatexWrapper = ({ node, editor }) => {
); );
return ( return (
<DragableWrapper <NodeViewWrapper
editor={editor} className={'drag-container render-wrapper'}
extensionName={Katex.name}
className={'render-wrapper'}
style={{ style={{
backgroundColor, backgroundColor,
}} }}
> >
<div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
<div className={'drag-content'}>
<div className={styles.wrap}>{content}</div> <div className={styles.wrap}>{content}</div>
</DragableWrapper> </div>
</NodeViewWrapper>
); );
}; };

View File

@ -1,4 +1,5 @@
import { Button, Space, Spin, Typography } from '@douyinfe/semi-ui'; import { Button, Space, Spin, Typography } from '@douyinfe/semi-ui';
import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames'; import cls from 'classnames';
import { IconMind, IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons'; import { IconMind, IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
import { Resizeable } from 'components/resizeable'; import { Resizeable } from 'components/resizeable';
@ -10,7 +11,6 @@ import VisibilitySensor from 'react-visibility-sensor';
import { load, renderMind } from 'thirtypart/kityminder'; import { load, renderMind } from 'thirtypart/kityminder';
import { Mind } from 'tiptap/core/extensions/mind'; import { Mind } from 'tiptap/core/extensions/mind';
import { MAX_ZOOM, MIN_ZOOM, ZOOM_STEP } from 'tiptap/core/menus/mind/constant'; import { MAX_ZOOM, MIN_ZOOM, ZOOM_STEP } from 'tiptap/core/menus/mind/constant';
import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
import { clamp, getEditorContainerDOMSize } from 'tiptap/prose-utils'; import { clamp, getEditorContainerDOMSize } from 'tiptap/prose-utils';
import styles from './index.module.scss'; import styles from './index.module.scss';
@ -108,11 +108,9 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
}, [width, height, setCenter]); }, [width, height, setCenter]);
return ( return (
<DragableWrapper <NodeViewWrapper className={cls('drag-container', styles.wrap, isActive && styles.isActive)}>
editor={editor} <div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
extensionName={Mind.name} <div className={'drag-content'}>
className={cls(styles.wrap, isActive && styles.isActive)}
>
<VisibilitySensor onChange={onViewportChange}> <VisibilitySensor onChange={onViewportChange}>
<Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}> <Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}>
<div <div
@ -142,7 +140,13 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
<div className={styles.mindHandlerWrap}> <div className={styles.mindHandlerWrap}>
<Tooltip content="居中"> <Tooltip content="居中">
<Button size="small" theme="borderless" type="tertiary" icon={<IconMindCenter />} onClick={setCenter} /> <Button
size="small"
theme="borderless"
type="tertiary"
icon={<IconMindCenter />}
onClick={setCenter}
/>
</Tooltip> </Tooltip>
<Tooltip content="缩小"> <Tooltip content="缩小">
<Button <Button
@ -166,6 +170,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
</div> </div>
</Resizeable> </Resizeable>
</VisibilitySensor> </VisibilitySensor>
</DragableWrapper> </div>
</NodeViewWrapper>
); );
}; };

View File

@ -16,7 +16,6 @@ import { Countdown } from 'tiptap/core/extensions/countdown';
import { Document } from 'tiptap/core/extensions/document'; import { Document } from 'tiptap/core/extensions/document';
import { DocumentChildren } from 'tiptap/core/extensions/document-children'; import { DocumentChildren } from 'tiptap/core/extensions/document-children';
import { DocumentReference } from 'tiptap/core/extensions/document-reference'; import { DocumentReference } from 'tiptap/core/extensions/document-reference';
import { Dragable } from 'tiptap/core/extensions/dragable';
import { Dropcursor } from 'tiptap/core/extensions/dropcursor'; import { Dropcursor } from 'tiptap/core/extensions/dropcursor';
import { Emoji } from 'tiptap/core/extensions/emoji'; import { Emoji } from 'tiptap/core/extensions/emoji';
import { EventEmitter } from 'tiptap/core/extensions/event-emitter'; import { EventEmitter } from 'tiptap/core/extensions/event-emitter';
@ -99,7 +98,6 @@ export const CollaborationKit = [
CodeBlock, CodeBlock,
Color, Color,
ColorHighlighter, ColorHighlighter,
Dragable,
Dropcursor, Dropcursor,
EventEmitter, EventEmitter,
Focus, Focus,