@extend-ai/react-docx 0.11.0 → 0.11.2

package/dist/index.cjs

@@ -47243,6 +47243,100 @@ function DocxEditorViewer({
       tableCellSelectionRange
     ]
   );
+  const extendSelectionVertically = React3.useCallback(
+    (direction) => {
+      const selection = window.getSelection();
+      if (!selection?.anchorNode || !selection.focusNode) {
+        return false;
+      }
+      const anchor = resolveParagraphBoundaryFromSelectionPoint(
+        selection.anchorNode,
+        selection.anchorOffset
+      );
+      const focus = resolveParagraphBoundaryFromSelectionPoint(
+        selection.focusNode,
+        selection.focusOffset
+      );
+      if (!anchor || !focus || anchor.location.kind !== "paragraph" || focus.location.kind !== "paragraph") {
+        return false;
+      }
+      const spansParagraphs = !sameParagraphLocation(
+        anchor.location,
+        focus.location
+      );
+      const lineRectsOf = (element) => {
+        const range = document.createRange();
+        range.selectNodeContents(element);
+        return Array.from(range.getClientRects()).filter(
+          (rect) => rect.width > 0 && rect.height > 0
+        );
+      };
+      const caretRange = document.createRange();
+      try {
+        caretRange.setStart(selection.focusNode, selection.focusOffset);
+      } catch {
+        return spansParagraphs;
+      }
+      caretRange.collapse(true);
+      const caretRect = caretRange.getClientRects()[0] ?? caretRange.getBoundingClientRect();
+      const focusHost = resolveParagraphHostElement(focus.location);
+      if (!caretRect || caretRect.height <= 0 || !focusHost) {
+        return spansParagraphs;
+      }
+      const focusLines = lineRectsOf(focusHost);
+      const edgeLine = direction > 0 ? focusLines[focusLines.length - 1] : focusLines[0];
+      const caretMiddle = caretRect.top + caretRect.height / 2;
+      const onEdgeLine = !edgeLine || caretMiddle >= edgeLine.top - 1 && caretMiddle <= edgeLine.bottom + 1;
+      let target;
+      if (!onEdgeLine) {
+        if (!spansParagraphs) {
+          return false;
+        }
+        target = resolveBoundaryFromPoint({
+          x: caretRect.left,
+          y: caretMiddle + direction * caretRect.height
+        });
+        if (!target || !sameParagraphLocation(target.location, focus.location)) {
+          return true;
+        }
+      } else {
+        let next;
+        if (direction > 0) {
+          next = nextParagraphLocation(editor.model, focus.location);
+        } else {
+          for (let nodeIndex = focus.location.nodeIndex - 1; nodeIndex >= 0 && !next; nodeIndex -= 1) {
+            next = lastParagraphLocationInNode(editor.model, nodeIndex);
+          }
+        }
+        const nextParagraph = next?.kind === "paragraph" ? getParagraphAtLocation(editor.model, next).paragraph : void 0;
+        const nextHost = next ? resolveParagraphHostElement(next) : void 0;
+        if (!next || !nextParagraph || !nextHost) {
+          return spansParagraphs;
+        }
+        nextHost.scrollIntoView({ block: "nearest" });
+        const nextLines = lineRectsOf(nextHost);
+        const line = direction > 0 ? nextLines[0] : nextLines[nextLines.length - 1];
+        const candidate = line ? resolveBoundaryFromPoint({
+          x: clampNumber(caretRect.left, line.left, line.right),
+          y: line.top + line.height / 2
+        }) : void 0;
+        target = candidate && sameParagraphLocation(candidate.location, next) ? candidate : {
+          location: next,
+          offset: direction > 0 ? 0 : paragraphText(nextParagraph).length
+        };
+      }
+      viewerRootRef.current?.focus({ preventScroll: true });
+      setSelectionFromDocxBoundaries(anchor, target);
+      return true;
+    },
+    [
+      editor,
+      resolveBoundaryFromPoint,
+      resolveParagraphBoundaryFromSelectionPoint,
+      resolveParagraphHostElement,
+      setSelectionFromDocxBoundaries
+    ]
+  );
   const onViewerKeyDown = React3.useCallback(
     (event) => {
       commandSelectionGuardRef.current = void 0;
@@ -47305,6 +47399,13 @@ function DocxEditorViewer({
           }
         }
       }
+      if (!isReadOnly && (event.key === "ArrowDown" || event.key === "ArrowUp") && event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey && !event.defaultPrevented && // The wrapped-paragraph textarea handles its own lines and the first
+      // step into the next paragraph.
+      document.activeElement !== wrappedParagraphTextareaRef.current && extendSelectionVertically(event.key === "ArrowDown" ? 1 : -1)) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
       const isSelectAll = (event.key === "a" || event.key === "A") && (event.ctrlKey || event.metaKey);
       if (!isSelectAll || event.shiftKey || event.altKey) {
         return;
@@ -47325,6 +47426,7 @@ function DocxEditorViewer({
     },
     [
       editor,
+      extendSelectionVertically,
       handleDeleteAcrossTableCellSelection,
       isReadOnly,
       resolveParagraphBoundaryFromSelectionPoint,