fix(text): set user-select to text paragraph instead of event.prevent…

…Default #WIK-15691 (#902)
worktile · Jun 4, 2024 · 22d2431 · 22d2431
1 parent c6e292d
commit 22d2431
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 22 deletions.
diff --git a/.changeset/slow-flies-remain.md b/.changeset/slow-flies-remain.md
@@ -0,0 +1,8 @@
+---
+'@plait/common': patch
+'@plait/core': patch
+'@plait/mind': patch
+'@plait/text': patch
+---
+
+set user-select to text paragraph instead of event.preventDefault
diff --git a/packages/common/src/plugins/with-resize.ts b/packages/common/src/plugins/with-resize.ts
@@ -57,8 +57,6 @@ export const withResize = <T extends PlaitElementOrArray = PlaitElementOrArray,
                 options: resizeHitTestRef.options
             };
             preventTouchMove(board, event, true);
-            // prevent text from being selected when user pressed shift and pointer down
-            event.preventDefault();
             return;
         }
         pointerDown(event);
@@ -71,8 +69,6 @@ export const withResize = <T extends PlaitElementOrArray = PlaitElementOrArray,
             return;
         }
         if (startPoint && resizeHitTestRef && !isResizing(board)) {
-            // prevent text from being selected
-            event.preventDefault();
             const endPoint = [event.x, event.y];
             const distance = distanceBetweenPointAndPoint(startPoint[0], startPoint[1], endPoint[0], endPoint[1]);
             if (distance > PRESS_AND_MOVE_BUFFER) {

diff --git a/packages/core/src/plugins/with-selection.ts b/packages/core/src/plugins/with-selection.ts
@@ -47,7 +47,6 @@ export function withSelection(board: PlaitBoard) {
     let selectionRectangleG: SVGGElement | null;
     let previousSelectedElements: PlaitElement[];
     let isShift = false;
-    let isTextSelection = false;
 
     board.pointerDown = (event: PointerEvent) => {
         if (!isShift && event.shiftKey) {
@@ -57,12 +56,6 @@ export function withSelection(board: PlaitBoard) {
             isShift = false;
         }
         const isHitText = !!(event.target instanceof Element && event.target.closest('.plait-richtext-container'));
-        isTextSelection = isHitText && PlaitBoard.hasBeenTextEditing(board);
-
-        // prevent text from being selected
-        if (event.shiftKey && !isTextSelection) {
-            event.preventDefault();
-        }
 
         const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         const isHitTarget = isHitElement(board, point);
@@ -76,10 +69,6 @@ export function withSelection(board: PlaitBoard) {
     };
 
     board.pointerMove = (event: PointerEvent) => {
-        if (!isTextSelection) {
-            // prevent text from being selected
-            event.preventDefault();
-        }
         if (PlaitBoard.isPointer(board, PlaitPointerType.selection) && start) {
             const movedTarget = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             const rectangle = RectangleClient.getRectangleByPoints([start, movedTarget]);
@@ -138,7 +127,6 @@ export function withSelection(board: PlaitBoard) {
         }
         start = null;
         end = null;
-        isTextSelection = false;
         preventTouchMove(board, event, false);
         globalPointerUp(event);
     };

diff --git a/packages/mind/src/plugins/with-abstract-resize.ts b/packages/mind/src/plugins/with-abstract-resize.ts
@@ -62,8 +62,6 @@ export const withAbstract: PlaitPlugin = (board: PlaitBoard) => {
         touchedAbstract = handleTouchedAbstract(board, touchedAbstract, endPoint);
 
         if (abstractHandlePosition && activeAbstractElement) {
-            // prevent text from being selected
-            event.preventDefault();
             const nodeLayout = MindQueries.getCorrectLayoutByElement(board, activeAbstractElement as MindElement) as MindLayoutType;
             const isHorizontal = isHorizontalLayout(nodeLayout);
             const parentElement = MindElement.getParent(activeAbstractElement);

diff --git a/packages/mind/src/plugins/with-node-dnd.ts b/packages/mind/src/plugins/with-node-dnd.ts
@@ -87,10 +87,7 @@ export const withNodeDnd = (board: PlaitBoard) => {
     };
 
     board.pointerMove = (event: PointerEvent) => {
-        // const xx = activeElements.
         if (!board.options.readonly && activeElements.length && startPoint) {
-            // prevent text from being selected
-            event.preventDefault();
             const endPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             const distance = distanceBetweenPointAndPoint(startPoint[0], startPoint[1], endPoint[0], endPoint[1]);
             if (distance < DRAG_MOVE_BUFFER) {

diff --git a/packages/text/src/plugins/paragraph/paragraph.component.ts b/packages/text/src/plugins/paragraph/paragraph.component.ts
@@ -6,7 +6,10 @@ import { ParagraphElement } from '../../custom-types';
     selector: 'div[plaitTextParagraphElement]',
     template: ``,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true
+    standalone: true,
+    host: {
+        class: 'plait-text-paragraph'
+    }
 })
 export class ParagraphElementComponent extends BaseElementComponent<ParagraphElement> implements OnInit {
     ngOnInit(): void {

diff --git a/packages/text/src/styles/styles.scss b/packages/text/src/styles/styles.scss
@@ -13,8 +13,14 @@
         outline: none;
         padding: 0;
         cursor: default;
+        .plait-text-paragraph {
+            user-select: none;
+        }
         &.editing {
             cursor: text;
+            .plait-text-paragraph {
+                user-select: text;
+            }
         }
     }