From 94841f5fa66862625c76d92d58188c10bd33f4f0 Mon Sep 17 00:00:00 2001
From: ikkz <ylei.mk@gmail.com>
Date: Wed, 29 Jan 2025 00:15:49 +0800
Subject: [PATCH] fix(match): support touch in mobile

---
 README.md             | 30 ++++++++++++++++++++++++++++++
 src/entries/match.tsx | 14 ++++++++++++--
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index fb7ccab..edde673 100644
--- a/README.md
+++ b/README.md
@@ -4,12 +4,14 @@ For the directly usable version, please download it from the [release](https://g
 
 > [!TIP]
 > Each template has multiple variants available for download, with the filename format being `{template}.{locale}.{field}.apkg`
+
 ```
 template:
 - mcq   : Multiple choice question (6 options)
 - mcq_10: Multiple choice question (10 options)
 - tf    : True or false
 - basic : Basic Q&A
+- match : Drag and drop interactive matching
 
 locale:
 - zh: 中文
@@ -51,6 +53,34 @@ Note: When all options are empty, the template will behave as a basic Q&A templa
 | answer      | This is the answer to the question. For multiple-choice questions, please write the uppercase letter of the correct answer, for example, A. For multiple-choice questions, write all the correct answer letters, such as ABC. |
 | note        | You can fill in detailed explanations, notes, etc., here.                                                                                                                                                                     |
 
+### Match
+
+Drag and drop interactive matching question template.
+
+> [!TIP]
+> It is best to disable all swipe gesture controls in Anki's review settings.
+
+#### Fields
+
+Notes for `items`
+
+- Each line starts with a category, followed by two colons separating it from the items under that category
+- Each item is separated by two commas
+
+An example:
+
+```
+Mammals::Tiger,,Elephant
+Birds::Penguin,,Parrot
+Reptiles::Cobra,,Crocodile
+```
+
+| Field name | Description                                                                                                   |
+| ---------- | ------------------------------------------------------------------------------------------------------------- |
+| question   | This is the stem of the question. It supports various content formats in Anki, including bold, formulas, etc. |
+| items      | The category and items                                                                                        |
+| note       | You can fill in detailed explanations, notes, etc., here.                                                     |
+
 ### True or False
 
 #### Fields
diff --git a/src/entries/match.tsx b/src/entries/match.tsx
index 2a91791..77ae9c2 100644
--- a/src/entries/match.tsx
+++ b/src/entries/match.tsx
@@ -5,7 +5,15 @@ import { useCrossState } from '@/hooks/use-cross-state';
 import { FIELD_ID } from '@/utils/const';
 import { domToText } from '@/utils/dom-to-text';
 import { isFieldEmpty } from '@/utils/field';
-import { useDraggable, useDroppable, DndContext } from '@dnd-kit/core';
+import {
+  useDraggable,
+  useDroppable,
+  DndContext,
+  useSensors,
+  useSensor,
+  MouseSensor,
+  TouchSensor,
+} from '@dnd-kit/core';
 import useCreation from 'ahooks/es/useCreation';
 import useMemoizedFn from 'ahooks/es/useMemoizedFn';
 import * as t from 'at/i18n';
@@ -143,16 +151,18 @@ const Playground: FC<{ collections: Collection[] }> = ({ collections }) => {
   });
 
   const [back] = useBack();
+  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
 
   return (
     <DndContext
+      sensors={sensors}
       onDragEnd={(event) => {
         if (event.over) {
           onDrop(event.active.id.toString(), event.over.id.toString());
         }
       }}
     >
-      <div className="mt-2">
+      <div className={clsx('mt-2', back ? '' : 'select-none')}>
         <div className="flex flex-wrap gap-2">
           {items.map((item) => (
             <ItemComponent key={item.id} item={item} />