Add containment support to shuffle

Author: smoores-dev

.yarn/versions/5909970b.yml

@@ -0,0 +1,2 @@
+releases:
+  "@pitter-patter/shuffle": patch

packages/docs/src/components/demos/shuffle.css

@@ -30,3 +30,28 @@ img {
 .shuffle-drag-handle {
   color: #351900;
 }
+
+.card-deck {
+  display: flex;
+  background-color: lightgray;
+  gap: 1rem;
+  border-radius: 0.25rem;
+  justify-content: space-around;
+  padding: 1rem;
+  margin: 2rem;
+}
+
+.card {
+  border: 1px solid transparent;
+  background-color: white;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.card.shuffle-hover-block {
+  border: 1px solid lightblue;
+}
+
+.card[data-shuffle-clone] {
+  background-color: white;
+}

packages/docs/src/components/demos/shuffle.tsx

@@ -34,6 +34,37 @@ basic.spec.nodes = basic.spec.nodes.update("image", {
   inline: false,
 });
 
+basic.spec.nodes = basic.spec.nodes.update("card_deck", {
+  group: "block",
+  content: "card+",
+  toDOM() {
+    return ["div", { "data-node-type": "card_deck" }, 0];
+  },
+  parseDOM: [
+    {
+      tag: 'div[data-node-type="card_deck"]',
+    },
+  ],
+});
+
+basic.spec.nodes = basic.spec.nodes.update("card", {
+  content: "paragraph+",
+  toDOM() {
+    return ["div", { "data-node-type": "card" }, 0];
+  },
+  parseDOM: [
+    {
+      tag: 'div[data-node-type="card"]',
+    },
+  ],
+  pitterPatter: {
+    shuffle: {
+      containedBy: "card_deck",
+      draggable: true,
+    },
+  },
+});
+
 let nodes = basic.spec.nodes.update("paragraph", {
   ...basic.spec.nodes.get("paragraph"),
   toDOM() {
@@ -63,6 +94,23 @@ const doc = schema.nodes.doc.create(null, [
     src: "https://t4.ftcdn.net/jpg/02/71/88/53/360_F_271885326_Jkc8UkWTYmgB3dJjhrot2QZEiLneCaaM.jpg",
   }),
   schema.nodes.paragraph.create(null, schema.text("Another paragraph not in a row.")),
+  schema.nodes.card_deck.create({ shuffleStart: 2, shuffleEnd: 11 }, [
+    schema.nodes.card.create(null, [
+      schema.nodes.paragraph.create(null, [
+        schema.text("You can configure containment on node types, too."),
+      ]),
+    ]),
+    schema.nodes.card.create(null, [
+      schema.nodes.paragraph.create(null, [
+        schema.text("These cards can be dragged around within their deck…"),
+      ]),
+    ]),
+    schema.nodes.card.create(null, [
+      schema.nodes.paragraph.create(null, [
+        schema.text("…but they can't be dropped outside of it!"),
+      ]),
+    ]),
+  ]),
 ]);
 
 function Image({ nodeProps, ref, children: _, ...props }: NodeViewComponentProps) {
@@ -81,6 +129,8 @@ function Image({ nodeProps, ref, children: _, ...props }: NodeViewComponentProps
 
 const nodeViewComponents = {
   image: Image,
+  card_deck: CardDeck,
+  card: Card,
 };
 
 function hoverDecorations(from: number, to: number) {
@@ -111,3 +161,24 @@ export function ShuffleDemo() {
     </ProseMirror>
   );
 }
+
+function CardDeck({ nodeProps: _, ref, children, ...props }: NodeViewComponentProps) {
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={`card-deck ${props.className ?? ""}`}
+      data-node-type="card_deck"
+    >
+      {children}
+    </div>
+  );
+}
+
+function Card({ nodeProps: _, ref, children, ...props }: NodeViewComponentProps) {
+  return (
+    <div ref={ref} {...props} className={`card ${props.className ?? ""}`} data-node-type="card">
+      {children}
+    </div>
+  );
+}

packages/shuffle/src/plugin.ts

@@ -423,11 +423,11 @@ export function startDragOnPointerDown(
     clone.style.transform = transform;
     clone.style.transformOrigin = transformOrigin;
 
-    setTimeout(() => {
-      clone!.style.transition = "none";
-      delete dom.dataset["shuffleActive"];
-      clone!.remove();
-    }, 250);
+    // setTimeout(() => {
+    //   clone!.style.transition = "none";
+    //   delete dom.dataset["shuffleActive"];
+    //   clone!.remove();
+    // }, 250);
 
     return;
   }

packages/shuffle/src/schema.ts

@@ -1,4 +1,4 @@
-import { Node, NodeSpec, NodeType, Schema } from "prosemirror-model";
+import { Node, NodeSpec, NodeType, ResolvedPos, Schema } from "prosemirror-model";
 
 export const shuffleAttrs: NodeSpec["attrs"] = {
   shuffleStart: {
@@ -137,6 +137,21 @@ export function getShuffleRowType(schema: Schema) {
   return rowType ?? null;
 }
 
+export function getBeforeContainedBy($from: ResolvedPos) {
+  const node = $from.nodeAfter;
+  if (!node) return $from.doc.resolve(0);
+
+  const containedByName = node.type.spec.pitterPatter?.shuffle?.containedBy;
+  if (!containedByName) return $from.doc.resolve(0);
+
+  let d = $from.depth;
+  while ($from.node(d).type.name !== containedByName && d > 0) {
+    d--;
+  }
+
+  return $from.doc.resolve($from.before(d));
+}
+
 declare module "prosemirror-model" {
   interface NodeSpec {
     pitterPatter?: PitterPatterSpec;

packages/shuffle/src/transform/autogroup.ts

@@ -18,6 +18,8 @@ export function autogroup(
   const node = view.state.doc.resolve(from).nodeAfter;
   if (!node) return null;
 
+  if (node.type.spec.pitterPatter?.shuffle?.containedBy) return null;
+
   const adjacentElements = findAdjacentElements(clientY, view.dom.getBoundingClientRect()).filter(
     (el) => !el.dataset["shuffleActive"] && el !== view.dom,
   );

packages/shuffle/src/transform/reorder.ts

@@ -5,21 +5,33 @@ import { insertPoint } from "prosemirror-transform";
 import { EditorView } from "prosemirror-view";
 
 import { shufflePluginKey, ShufflePluginMeta } from "../plugin";
+import { getBeforeContainedBy } from "../schema.js";
 
 export function reorder(
   view: EditorView,
   from: number,
   clientX: number,
   clientY: number,
 ): Transaction | null {
-  const node = view.state.doc.resolve(from).nodeAfter;
+  const $from = view.state.doc.resolve(from);
+
+  const node = $from.nodeAfter;
   if (!node) return null;
 
+  const $containedBy = getBeforeContainedBy($from);
+
   const posResult = view.posAtCoords({ left: clientX, top: clientY });
   if (!posResult) return null;
 
   const { pos } = posResult;
 
+  if (
+    pos <= $containedBy.pos ||
+    pos >= $containedBy.pos + ($containedBy.nodeAfter ?? $containedBy.doc).nodeSize
+  ) {
+    return null;
+  }
+
   const gap = findGap(view.state.doc, pos, node.type);
 
   if (gap === null) return null;