mirror of https://github.com/fantasticit/think.git
Merge pull request #144 from fantasticit/fix/drag
fantasticit
GitHub
commit
a4ea4bf965
|
|
@ -158,6 +158,8 @@ export interface CodeBlockLowlightOptions extends CodeBlockOptions {
|
|||
}
|
||||
|
||||
export const CodeBlock = BuiltInCodeBlock.extend<CodeBlockLowlightOptions>({
|
||||
draggable: true,
|
||||
|
||||
addOptions() {
|
||||
return {
|
||||
...this.parent?.(),
|
||||
|
|
|
|||
|
|
@ -64,15 +64,12 @@ export const Countdown = Node.create({
|
|||
}
|
||||
|
||||
const { selection } = editor.state;
|
||||
const pos = selection.$head;
|
||||
|
||||
return chain()
|
||||
.insertContentAt(pos.after(), [
|
||||
{
|
||||
.insertContent({
|
||||
type: this.name,
|
||||
attrs: options,
|
||||
},
|
||||
])
|
||||
})
|
||||
.run();
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
];
|
||||
},
|
||||
});
|
||||
|
|
@ -84,15 +84,12 @@ export const Flow = Node.create({
|
|||
}
|
||||
|
||||
const { selection } = editor.state;
|
||||
const pos = selection.$head;
|
||||
|
||||
return chain()
|
||||
.insertContentAt(pos.after(), [
|
||||
{
|
||||
.insertContent({
|
||||
type: this.name,
|
||||
attrs: options,
|
||||
},
|
||||
])
|
||||
})
|
||||
.run();
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -84,15 +84,12 @@ export const Iframe = Node.create({
|
|||
|
||||
const attrs = options || { url: '' };
|
||||
const { selection } = editor.state;
|
||||
const pos = selection.$head;
|
||||
|
||||
return chain()
|
||||
.insertContentAt(pos.after(), [
|
||||
{
|
||||
.insertContent({
|
||||
type: this.name,
|
||||
attrs,
|
||||
},
|
||||
])
|
||||
})
|
||||
.run();
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -95,15 +95,12 @@ export const Mind = Node.create({
|
|||
}
|
||||
|
||||
const { selection } = editor.state;
|
||||
const pos = selection.$head;
|
||||
|
||||
return chain()
|
||||
.insertContentAt(pos.after(), [
|
||||
{
|
||||
.insertContent({
|
||||
type: this.name,
|
||||
attrs: options,
|
||||
},
|
||||
])
|
||||
})
|
||||
.run();
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,22 @@
|
|||
import { mergeAttributes } from '@tiptap/core';
|
||||
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],
|
||||
];
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -22,6 +22,16 @@ export const useEditor = (options: Partial<EditorOptions> = {}, deps: Dependency
|
|||
const forceUpdate = useForceUpdate();
|
||||
|
||||
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);
|
||||
|
||||
setEditor(instance);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,91 @@
|
|||
.drag-handler {
|
||||
position: fixed;
|
||||
/* stylelint-disable */
|
||||
.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;
|
||||
height: 16px;
|
||||
cursor: grab;
|
||||
opacity: 1;
|
||||
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;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
cursor: move;
|
||||
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-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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@
|
|||
}
|
||||
|
||||
.node-codeBlock,
|
||||
.node-katex {
|
||||
.node-katex,
|
||||
.node-documentChildren {
|
||||
.render-wrapper {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
import { IconClose, IconDownload, IconPlayCircle } from '@douyinfe/semi-icons';
|
||||
import { Button, Collapsible, Progress, Space, Spin, Toast, Typography } from '@douyinfe/semi-ui';
|
||||
import { FILE_CHUNK_SIZE } from '@think/domains';
|
||||
import { NodeViewWrapper } from '@tiptap/react';
|
||||
import cls from 'classnames';
|
||||
import { Tooltip } from 'components/tooltip';
|
||||
import { useToggle } from 'hooks/use-toggle';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
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 { getFileTypeIcon } from './file-icon';
|
||||
|
|
@ -156,8 +155,9 @@ export const AttachmentWrapper = ({ editor, node, updateAttributes }) => {
|
|||
})();
|
||||
|
||||
return (
|
||||
<DragableWrapper editor={editor} extensionName={Attachment.name}>
|
||||
{content}
|
||||
</DragableWrapper>
|
||||
<NodeViewWrapper className={'drag-container'}>
|
||||
<div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
|
||||
<div className={'drag-content'}>{content}</div>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -44,4 +44,10 @@
|
|||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
[data-node-view-content] {
|
||||
[data-drag-handle] {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
import { NodeViewContent } from '@tiptap/react';
|
||||
import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
|
||||
import cls from 'classnames';
|
||||
import { EmojiPicker } from 'components/emoji-picker';
|
||||
import { convertColorToRGBA } from 'helpers/color';
|
||||
import { Theme, ThemeEnum } from 'hooks/use-theme';
|
||||
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';
|
||||
|
||||
|
|
@ -27,12 +25,9 @@ export const CalloutWrapper = ({ editor, node, updateAttributes }) => {
|
|||
);
|
||||
|
||||
return (
|
||||
<DragableWrapper
|
||||
editor={editor}
|
||||
extensionName={Callout.name}
|
||||
id="js-callout-container"
|
||||
className={cls(styles.wrap)}
|
||||
>
|
||||
<NodeViewWrapper id="js-callout-container" className={cls('drag-container', styles.wrap)}>
|
||||
<div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
|
||||
<div className={'drag-content'}>
|
||||
<div
|
||||
className={cls(styles.innerWrap, 'render-wrapper')}
|
||||
style={{
|
||||
|
|
@ -53,6 +48,7 @@ export const CalloutWrapper = ({ editor, node, updateAttributes }) => {
|
|||
}}
|
||||
/>
|
||||
</div>
|
||||
</DragableWrapper>
|
||||
</div>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { IconCopy } from '@douyinfe/semi-icons';
|
||||
import { Button, Select, Tooltip } from '@douyinfe/semi-ui';
|
||||
import { NodeViewContent } from '@tiptap/react';
|
||||
import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
|
||||
import cls from 'classnames';
|
||||
import { copy } from 'helpers/copy';
|
||||
import React, { useRef } from 'react';
|
||||
|
|
@ -16,11 +16,9 @@ export const CodeBlockWrapper = ({ editor, node: { attrs }, updateAttributes, ex
|
|||
const $container = useRef<HTMLPreElement>();
|
||||
|
||||
return (
|
||||
<DragableWrapper
|
||||
editor={editor}
|
||||
extensionName={CodeBlock.name}
|
||||
className={cls(styles.wrap, !isPrint && styles.maxHeight, 'render-wrapper')}
|
||||
>
|
||||
<NodeViewWrapper className={cls('drag-container', styles.wrap, !isPrint && styles.maxHeight, 'render-wrapper')}>
|
||||
<div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
|
||||
<div className={'drag-content'}>
|
||||
<div className={styles.handleWrap}>
|
||||
<Select
|
||||
size="small"
|
||||
|
|
@ -50,6 +48,7 @@ export const CodeBlockWrapper = ({ editor, node: { attrs }, updateAttributes, ex
|
|||
<pre ref={$container}>
|
||||
<NodeViewContent as="code" />
|
||||
</pre>
|
||||
</DragableWrapper>
|
||||
</div>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { Space, Typography } from '@douyinfe/semi-ui';
|
||||
import { NodeViewWrapper } from '@tiptap/react';
|
||||
import cls from 'classnames';
|
||||
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';
|
||||
|
||||
|
|
@ -33,11 +32,14 @@ export const CountdownWrapper = ({ editor, node }) => {
|
|||
const { title, date } = node.attrs;
|
||||
|
||||
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')}>
|
||||
<Text>{title}</Text>
|
||||
<ReactCountdown date={date} renderer={renderer}></ReactCountdown>
|
||||
</div>
|
||||
</DragableWrapper>
|
||||
</div>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.wrap {
|
||||
padding: 12px;
|
||||
border: 1px solid var(--node-border-color);
|
||||
border-radius: var(--border-radius);
|
||||
user-select: none;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Typography } from '@douyinfe/semi-ui';
|
||||
import { NodeViewWrapper } from '@tiptap/react';
|
||||
import cls from 'classnames';
|
||||
import { DataRender } from 'components/data-render';
|
||||
import { Empty } from 'components/empty';
|
||||
|
|
@ -7,8 +8,6 @@ import { useChildrenDocument } from 'data/document';
|
|||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
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';
|
||||
|
||||
|
|
@ -36,13 +35,9 @@ export const DocumentChildrenWrapper = ({ editor, node, updateAttributes }) => {
|
|||
}, [node.attrs, wikiId, documentId, updateAttributes]);
|
||||
|
||||
return (
|
||||
<DragableWrapper
|
||||
editor={editor}
|
||||
extensionName={DocumentChildren.name}
|
||||
as="div"
|
||||
className={cls('render-wrapper', styles.wrap, isEditable && styles.isEditable, 'documentChildren')}
|
||||
>
|
||||
<div>
|
||||
<NodeViewWrapper as="div" className={cls('drag-container', 'render-wrapper')}>
|
||||
<div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
|
||||
<div className={cls('drag-content', styles.wrap, isEditable && styles.isEditable, 'documentChildren')}>
|
||||
<div>
|
||||
<Text type="tertiary">子文档</Text>
|
||||
</div>
|
||||
|
|
@ -82,6 +77,6 @@ export const DocumentChildrenWrapper = ({ editor, node, updateAttributes }) => {
|
|||
<Text type="tertiary">当前页面无法使用子文档</Text>
|
||||
)}
|
||||
</div>
|
||||
</DragableWrapper>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import { NodeViewWrapper } from '@tiptap/react';
|
||||
import cls from 'classnames';
|
||||
import { IconDocument } from 'components/icons';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
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';
|
||||
|
||||
|
|
@ -51,13 +50,9 @@ export const DocumentReferenceWrapper = ({ editor, node, updateAttributes }) =>
|
|||
}, [organizationId, wikiId, documentId, isEditable, isShare, title]);
|
||||
|
||||
return (
|
||||
<DragableWrapper
|
||||
editor={editor}
|
||||
extensionName={DocumentReference.name}
|
||||
as="div"
|
||||
className={cls(styles.wrap, isEditable && 'render-wrapper')}
|
||||
>
|
||||
{content}
|
||||
</DragableWrapper>
|
||||
<NodeViewWrapper as="div" className={cls('drag-container', styles.wrap, isEditable && 'render-wrapper')}>
|
||||
<div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
|
||||
<div className={'drag-content'}>{content}</div>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { Button, Space, Spin, Typography } from '@douyinfe/semi-ui';
|
||||
import { NodeViewWrapper } from '@tiptap/react';
|
||||
import cls from 'classnames';
|
||||
import { IconFlow, IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
|
||||
import { Resizeable } from 'components/resizeable';
|
||||
|
|
@ -7,7 +8,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
|
|||
import VisibilitySensor from 'react-visibility-sensor';
|
||||
import { load, renderXml } from 'thirtypart/diagram';
|
||||
import { Flow } from 'tiptap/core/extensions/flow';
|
||||
import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
|
||||
import { getEditorContainerDOMSize } from 'tiptap/prose-utils';
|
||||
|
||||
import styles from './index.module.scss';
|
||||
|
|
@ -95,11 +95,9 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
|
|||
}, [toggleLoading, data]);
|
||||
|
||||
return (
|
||||
<DragableWrapper
|
||||
editor={editor}
|
||||
className={cls(styles.wrap, isActive && styles.isActive)}
|
||||
extensionName={Flow.name}
|
||||
>
|
||||
<NodeViewWrapper className={cls('drag-container', isActive && styles.isActive)}>
|
||||
<div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
|
||||
<div className={cls('drag-content', styles.wrap)}>
|
||||
<VisibilitySensor onChange={onViewportChange}>
|
||||
<Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}>
|
||||
<div
|
||||
|
|
@ -138,6 +136,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
|
|||
</div>
|
||||
</Resizeable>
|
||||
</VisibilitySensor>
|
||||
</DragableWrapper>
|
||||
</div>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import { Typography } from '@douyinfe/semi-ui';
|
||||
import { NodeViewWrapper } from '@tiptap/react';
|
||||
import cls from 'classnames';
|
||||
import { Resizeable } from 'components/resizeable';
|
||||
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 styles from './index.module.scss';
|
||||
|
|
@ -23,7 +22,9 @@ export const IframeWrapper = ({ editor, node, updateAttributes }) => {
|
|||
);
|
||||
|
||||
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}>
|
||||
<div className={cls(styles.wrap, 'render-wrapper')}>
|
||||
{url ? (
|
||||
|
|
@ -37,6 +38,7 @@ export const IframeWrapper = ({ editor, node, updateAttributes }) => {
|
|||
)}
|
||||
</div>
|
||||
</Resizeable>
|
||||
</DragableWrapper>
|
||||
</div>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import { Spin, Typography } from '@douyinfe/semi-ui';
|
||||
import { NodeViewWrapper } from '@tiptap/react';
|
||||
import { Resizeable } from 'components/resizeable';
|
||||
import { useToggle } from 'hooks/use-toggle';
|
||||
import { useCallback, useEffect, useRef } from 'react';
|
||||
import { LazyLoadImage } from 'react-lazy-load-image-component';
|
||||
import { uploadFile } from 'services/file';
|
||||
import { Image } from 'tiptap/core/extensions/image';
|
||||
import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
|
||||
import {
|
||||
extractFileExtension,
|
||||
extractFilename,
|
||||
|
|
@ -70,7 +69,9 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
|
|||
}, [src, hasTrigger, selectFile, updateAttributes]);
|
||||
|
||||
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
|
||||
className={'render-wrapper'}
|
||||
width={width || maxWidth}
|
||||
|
|
@ -94,6 +95,7 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
|
|||
<LazyLoadImage src={src} alt={alt} width={width} height={height} />
|
||||
)}
|
||||
</Resizeable>
|
||||
</DragableWrapper>
|
||||
</div>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import { NodeViewWrapper } from '@tiptap/react';
|
||||
import { convertColorToRGBA } from 'helpers/color';
|
||||
import { Theme, ThemeEnum } from 'hooks/use-theme';
|
||||
import katex from 'katex';
|
||||
import { useMemo } from 'react';
|
||||
import { Katex } from 'tiptap/core/extensions/katex';
|
||||
import { DragableWrapper } from 'tiptap/core/wrappers/dragable';
|
||||
|
||||
import styles from './index.module.scss';
|
||||
|
||||
|
|
@ -35,15 +34,16 @@ export const KatexWrapper = ({ node, editor }) => {
|
|||
);
|
||||
|
||||
return (
|
||||
<DragableWrapper
|
||||
editor={editor}
|
||||
extensionName={Katex.name}
|
||||
className={'render-wrapper'}
|
||||
<NodeViewWrapper
|
||||
className={'drag-container render-wrapper'}
|
||||
style={{
|
||||
backgroundColor,
|
||||
}}
|
||||
>
|
||||
<div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
|
||||
<div className={'drag-content'}>
|
||||
<div className={styles.wrap}>{content}</div>
|
||||
</DragableWrapper>
|
||||
</div>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Button, Space, Spin, Typography } from '@douyinfe/semi-ui';
|
||||
import { NodeViewWrapper } from '@tiptap/react';
|
||||
import cls from 'classnames';
|
||||
import { IconMind, IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
|
||||
import { Resizeable } from 'components/resizeable';
|
||||
|
|
@ -10,7 +11,6 @@ import VisibilitySensor from 'react-visibility-sensor';
|
|||
import { load, renderMind } from 'thirtypart/kityminder';
|
||||
import { Mind } from 'tiptap/core/extensions/mind';
|
||||
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 styles from './index.module.scss';
|
||||
|
|
@ -108,11 +108,9 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
|
|||
}, [width, height, setCenter]);
|
||||
|
||||
return (
|
||||
<DragableWrapper
|
||||
editor={editor}
|
||||
extensionName={Mind.name}
|
||||
className={cls(styles.wrap, isActive && styles.isActive)}
|
||||
>
|
||||
<NodeViewWrapper className={cls('drag-container', styles.wrap, isActive && styles.isActive)}>
|
||||
<div className={'drag-handle'} contentEditable="false" draggable="true" data-drag-handle />
|
||||
<div className={'drag-content'}>
|
||||
<VisibilitySensor onChange={onViewportChange}>
|
||||
<Resizeable isEditable={isEditable} width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}>
|
||||
<div
|
||||
|
|
@ -142,7 +140,13 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
|
|||
|
||||
<div className={styles.mindHandlerWrap}>
|
||||
<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 content="缩小">
|
||||
<Button
|
||||
|
|
@ -166,6 +170,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
|
|||
</div>
|
||||
</Resizeable>
|
||||
</VisibilitySensor>
|
||||
</DragableWrapper>
|
||||
</div>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ import { Countdown } from 'tiptap/core/extensions/countdown';
|
|||
import { Document } from 'tiptap/core/extensions/document';
|
||||
import { DocumentChildren } from 'tiptap/core/extensions/document-children';
|
||||
import { DocumentReference } from 'tiptap/core/extensions/document-reference';
|
||||
import { Dragable } from 'tiptap/core/extensions/dragable';
|
||||
import { Dropcursor } from 'tiptap/core/extensions/dropcursor';
|
||||
import { Emoji } from 'tiptap/core/extensions/emoji';
|
||||
import { EventEmitter } from 'tiptap/core/extensions/event-emitter';
|
||||
|
|
@ -99,7 +98,6 @@ export const CollaborationKit = [
|
|||
CodeBlock,
|
||||
Color,
|
||||
ColorHighlighter,
|
||||
Dragable,
|
||||
Dropcursor,
|
||||
EventEmitter,
|
||||
Focus,
|
||||
|
|
|
|||
Loading…
Reference in New Issue