Skip to content

Commit

Permalink
disabled drag and drop if editor in dragging state. removed comments …
Browse files Browse the repository at this point in the history 
…and console logs. renamed selection catching plugin
  • Loading branch information
@iskaktoltay @horacioh
iskaktoltay authored and horacioh committed Feb 23, 2023
1 parent 0aef3f6 commit 6fe1fcc
Show file tree
Hide file tree
Showing 5 changed files with 16 additions and 98 deletions.
52 changes: 9 additions & 43 deletions frontend/app/src/drag-machine.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {assign, createMachine, actions} from 'xstate'
let {send} = actions
type DragContext = {
editor: Editor
dragOverRef: HTMLLIElement | null
dragOverRef: Element | null
dragRef: HTMLLIElement | null
fromPath: Path | null
toPath: Path | null
Expand Down Expand Up @@ -85,15 +85,19 @@ export const createDragMachine = (editor: Editor) => {
startDrag: (context) => {
context.editor.dragging = true
},
stopDrag: send({type: 'DRAGGING.OFF'}, {delay: 1000}),
stopDrag: send({type: 'DRAGGING.OFF'}, {delay: 500}),
setDraggingOff: (context) => {
console.log('dragging off')
context.editor.dragging = false
},
setDragOverRef: assign({
dragOverRef: (context, event) => {
context.dragOverRef?.removeAttribute('data-action')
const element = event.element
const element: HTMLLIElement = event.element
const paragraph = element.firstElementChild
if (paragraph && paragraph.nodeName === 'P') {
paragraph.setAttribute('data-action', 'dragged-over')
return paragraph
}
element.setAttribute('data-action', 'dragged-over')
return element
},
Expand Down Expand Up @@ -142,23 +146,12 @@ export const createDragMachine = (editor: Editor) => {
toPath: null,
}),
performMove: (context, event) => {
console.log('DRAGGING PERFORM', context, event)
const {fromPath, toPath, dragOverRef, editor} = context
// console.log(dragOverRef)
dragOverRef?.removeAttribute('data-action')
if (fromPath && toPath && editor) {
if (fromPath === toPath || fromPath === null || toPath === null)
return
if (Path.isAncestor(fromPath, toPath)) return
// if (fromPath) {
// Editor.withoutNormalizing(editor, () => {
// Transforms.deselect(editor)
// Transforms.select(editor, Editor.end(editor, toPath))
// })
// } else {
// ReactEditor.focus(editor)
// }
// ReactEditor.focus(editor as any)
const parentBlock = Editor.above<Group>(editor, {
match: isFlowContent,
mode: 'lowest',
Expand All @@ -172,13 +165,6 @@ export const createDragMachine = (editor: Editor) => {
at: fromPath,
})
}

// const children = Node.elements(parentBlock[0])
// for (const child of children) {
// console.log(child)
// }
// console.log(Path.hasPrevious(fromPath))
// console.log(Path.next(fromPath))
Transforms.deselect(editor)
ReactEditor.deselect(editor)
ReactEditor.blur(editor)
Expand All @@ -188,34 +174,14 @@ export const createDragMachine = (editor: Editor) => {
to: toPath,
mode: 'lowest',
})
if (parentGroup && parentGroup?.[0].children.length === 1) {
console.log('here', parentGroup?.[0].children.length)
if (parentGroup && parentGroup?.[0].children.length <= 1) {
Transforms.removeNodes(editor, {
at: parentGroup[1],
})
}
Transforms.deselect(editor)
ReactEditor.deselect(editor)
ReactEditor.blur(editor)

// if (fromPath.length === toPath.length) {
// Transforms.select(editor, {
// anchor: {path: toPath, offset: 0},
// focus: {path: toPath, offset: 0},
// // anchor: {path: [], offset: 0},
// // focus: {path: [], offset: 0},
// })
// } else {
// Transforms.select(editor, {
// anchor: {path: [], offset: 0},
// focus: {path: [], offset: 0},
// })
// }
// console.log(editor.children)
// console.log(
// ReactEditor.toDOMNode(editor, Node.get(editor, fromPath)),
// ReactEditor.toDOMNode(editor, Node.get(editor, toPath)),
// )
})
// TODO: remove the parent group for the `fromPath`:
// - if its Empty
Expand Down
13 changes: 2 additions & 11 deletions frontend/app/src/editor/blocktools.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,9 @@ function DraftBlocktools(props: BlockData) {
let target = useCurrentTarget()

let topOffset = useTopOffset(props.element)
// console.log(
// 'MOUSE MACHINE STATE IN BLOCKTOOLS',
// mouseService.getSnapshot().value,
// )

const onMouseDown = (e: MouseEvent<HTMLDivElement>) => {
if (editor.dragging === true) return
const [node, fromPath] = element as NodeEntry<FlowContent>
const domNode = ReactEditor.toDOMNode(editor, node)
if (fromPath && dragService && domNode) {
Expand All @@ -75,12 +72,6 @@ function DraftBlocktools(props: BlockData) {
}
}

const onMouseUp = (e: MouseEvent<HTMLDivElement>) => {
mouseService.send('DISABLE.DRAG.END')
Transforms.deselect(editor);
}
// TODO: ADD A MOUSEUP EVENT TO ENABLE THE BLOCKTOOLS MACHINE

return (
<Box
contentEditable={false}
Expand All @@ -98,7 +89,7 @@ function DraftBlocktools(props: BlockData) {
gap: '$3',
}}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
onMouseUp={() => mouseService.send('DISABLE.DRAG.END')}
>
<ElementDropdown data-testid="blocktools-trigger">
<Icon name="Grid4" color="muted" />
Expand Down
24 changes: 0 additions & 24 deletions frontend/app/src/editor/drag-section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ const ElementDrag = ({children, element, attributes}: RenderElementProps) => {

const onDrop = (e: React.DragEvent<HTMLLIElement>) => {
e.preventDefault()
console.log('ONDROP DRAGGING', e)
mouseService.send('DISABLE.DRAG.END')
dragService?.send({
type: 'DROPPED',
Expand All @@ -26,28 +25,6 @@ const ElementDrag = ({children, element, attributes}: RenderElementProps) => {
e.dataTransfer?.clearData()
}

// const onDragOver = (e: React.DragEvent<HTMLLIElement>) => {
// // e.preventDefault()
// const domNode = ReactEditor.toDOMNode(editor, element)
// // console.log(domNode);
// // const target = ReactEditor.toSlateNode(editor, e.target);
// // let targetPath = ReactEditor.findPath(editor, target);
// // console.log(Node.parent(target, targetPath))
// // if (targetPath.length > 2) {
// // console.log(targetPath);
// // targetPath = targetPath.slice(0, 2);
// // console.log(targetPath);
// // }
// // console.log(ReactEditor.findPath(editor, target));
// dragService?.send({
// type: 'DRAG.OVER',
// toPath: ReactEditor.findPath(editor, element),
// // toPath: ReactEditor.findPath(editor, target),
// element: domNode as HTMLLIElement,
// // element: e.target as HTMLLIElement,
// })
// }

let {blockProps} = useBlockProps(element)

let inRoute = useBlockFlash(attributes.ref, element.id)
Expand All @@ -58,7 +35,6 @@ const ElementDrag = ({children, element, attributes}: RenderElementProps) => {
{...blockProps}
className={inRoute ? 'flash' : undefined}
onDrop={onDrop}
// onDragEnter={onDragOver}
>
<BlockTools block={element as FlowContent} />
{children}
Expand Down
14 changes: 0 additions & 14 deletions frontend/app/src/editor/editor-node-props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,22 +72,8 @@ export function usePhrasingProps(
: undefined,
}

// let dragProps = {
// onDragOver: (e: React.DragEvent) => {
// e.preventDefault()
// const domNode = ReactEditor.toDOMNode(editor, element)
// console.log(parentBlock?.[1])
// dragService?.send({
// type: 'DRAG.OVER',
// toPath: parentBlock?.[1],
// element: domNode as HTMLLIElement,
// })
// },
// }

return {
elementProps,
// dragProps,
parentNode: parentBlock?.[0],
parentPath: parentBlock?.[1],
}
Expand Down
11 changes: 5 additions & 6 deletions frontend/app/src/editor/plugins.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {createCommentsPlugin} from '@app/editor/comments/comments'
import {Transforms} from 'slate'
import {ReactEditor} from 'slate-react'
import {createBlockquotePlugin} from './blockquote'
import {createCodePlugin} from './code'
import {createColorPlugin} from './color'
Expand Down Expand Up @@ -73,17 +74,15 @@ export const plugins: EditorPlugin[] = [
},
createCommentsPlugin(),
{
name: 'log',
name: 'prevent selection after drag and drop',
configureEditor: (editor) => {
// console.log(editor.children)
const {apply} = editor
editor.apply = (operation) => {
console.log(operation)

if (operation.type == 'set_selection') {
if (!operation.newProperties || !editor.dragging) {
if (editor.dragging) {
ReactEditor.deselect(editor)
} else {
apply(operation)
console.log('IS DRAGGING!')
}
} else {
apply(operation)
Expand Down

0 comments on commit 6fe1fcc

Please sign in to comment.