For Areas, allow double click to create new items inside

This is done by not automatically streching the text area to cover the whole element.
raimohanska · Mar 4, 2024 · 19912b9 · 19912b9
1 parent c6f641a
commit 19912b9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 16 deletions.
diff --git a/frontend/src/style/board.scss b/frontend/src/style/board.scss
@@ -166,7 +166,6 @@
 
             > .quill-wrapper {
                 width: 100%;
-                height: 100%;
                 display: flex;
                 padding: 0;
                 > .quill-editor {
@@ -181,6 +180,12 @@
                     }
                 }
             }
+
+            &.text {
+                > .quill-wrapper {
+                    height: 100%;
+                }
+            }
         }
 
         .note {

diff --git a/playwright/src/tests/collaboration.spec.ts b/playwright/src/tests/collaboration.spec.ts
@@ -14,47 +14,51 @@ test.describe("Two simultaneous users", () => {
         await expect(userPage.getNote(anotherUserPageNoteText)).toBeVisible()
     })
 
+    const onTopPart = { position: { x: 9, y: 15 } } as const
+
     test("users can collaboratively edit a text area", async ({ page, browser }) => {
         const { user1Page, user2Page } = await createBoardWithTwoUsers(page, browser)
         await user1Page.createArea(100, 200, "initialText")
         await test.step("Both users edit text", async () => {
-            await user1Page.getArea("initialText").dblclick()
+            await user1Page.getArea("initialText").click(onTopPart)
             await user2Page.getArea("initialText").press("ArrowDown")
             await user1Page.getArea("initialText").pressSequentially("User1Text")
-            await user2Page.getArea("initialText").dblclick()
+            await user2Page.getArea("initialText").dblclick(onTopPart)
             await user2Page.getArea("initialText").press("ArrowDown")
             await user2Page.getArea("initialText").pressSequentially("User2Text")
-            await expect(user1Page.getArea("initialTextUser1TextUser2Text")).toBeVisible()
-            await expect(user2Page.getArea("initialTextUser1TextUser2Text")).toBeVisible()
+            await expect(user1Page.getArea("User1Text")).toBeVisible()
+            await expect(user2Page.getArea("User1Text")).toBeVisible()
+            await expect(user1Page.getArea("User2Text")).toBeVisible()
+            await expect(user2Page.getArea("User2Text")).toBeVisible()
         })
         await test.step("User 1 duplicates text area", async () => {
             await user1Page.cloneButton.click()
         })
         await test.step("Text changes to new area do not affect old area", async () => {
-            const oldArea = user1Page.getArea("initialTextUser1TextUser2Text").first()
-            const newArea = user1Page.getArea("initialTextUser1TextUser2Text").last()
+            const oldArea = user1Page.getArea("User2Text").first()
+            const newArea = user1Page.getArea("User2Text").last()
             await newArea.press("Escape")
             await user1Page.dragItem(newArea, 300, 300)
-            await newArea.dblclick()
+            await newArea.dblclick(onTopPart)
             await newArea.press("ArrowDown")
             await newArea.pressSequentially("NewText")
-            await expect(newArea).toHaveText("initialTextUser1TextUser2TextNewText")
+            await expect(newArea).toContainText("NewText")
             await user1Page.assertSelected(newArea, true)
             await newArea.press("Escape")
             await newArea.press("Escape")
             await user1Page.assertSelected(newArea, false)
-            await expect(oldArea).toHaveText("initialTextUser1TextUser2Text")
-            await expect(user2Page.getArea("initialTextUser1TextUser2TextNewText")).toBeVisible()
+            await expect(oldArea).not.toContainText("NewText")
+            await expect(user2Page.getArea("NewText")).toBeVisible()
         })
         await test.step("Deleting the new area does not affect the old area", async () => {
-            const newAreaUser2 = user2Page.getArea("initialTextUser1TextUser2TextNewText")
+            const newAreaUser2 = user2Page.getArea("NewText")
             await user2Page.assertSelected(newAreaUser2, false)
             await user2Page.selectItems(newAreaUser2)
             await newAreaUser2.press("Delete")
-            await expect(user2Page.getArea("initialTextUser1TextUser2TextNewText")).not.toBeVisible()
-            await expect(user1Page.getArea("initialTextUser1TextUser2TextNewText")).not.toBeVisible()
-            await expect(user2Page.getArea("initialTextUser1TextUser2Text")).toBeVisible()
-            await expect(user1Page.getArea("initialTextUser1TextUser2Text")).toBeVisible()
+            await expect(user2Page.getArea("NewText")).not.toBeVisible()
+            await expect(user1Page.getArea("NewText")).not.toBeVisible()
+            await expect(user2Page.getArea("User2Text")).toBeVisible()
+            await expect(user1Page.getArea("User2Text")).toBeVisible()
         })
     })