src/zoom/FullText.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

import React from "react";
import { motion, AnimatePresence } from "motion/react";
import Paragraph from "./Paragraph";
import { useZoom } from "./hooks/useZoom";
import { containerVariants, buttonVariants } from "./animations";
import { NLP } from "sortug-ai";

interface TextFocusMorphProps {
  text: string;
  doc: NLP.Spacy.SpacyRes;
  stanza?: NLP.Stanza.StanzaRes | undefined;
}

const FullText: React.FC<TextFocusMorphProps> = ({ text, doc, stanza }) => {
  const { viewState, navigateBack, handleElementClick } = useZoom();
  const { level } = viewState;

  // Split text into paragraphs
  const paragraphs = text
    .split("\n\n")
    .map((p) => p.trim())
    .filter(Boolean);

  return (
    <div className="text-focus-morph">
      {level !== "text" && (
        <AnimatePresence>
          <motion.button
            className="back-button"
            onClick={navigateBack}
            variants={buttonVariants}
            initial="initial"
            animate="animate"
            exit="exit"
          >
            ← Back
          </motion.button>
        </AnimatePresence>
      )}

      <motion.div
        className="content-container"
        variants={containerVariants}
        initial="text"
        animate={level}
      >
        {paragraphs.map((paragraph, idx) => (
          <Paragraph
            doc={doc}
            stanza={stanza}
            key={paragraph + idx}
            rawText={paragraph}
            context={{ idx, parentText: text, segmented: paragraphs }}
            idx={idx}
          />
        ))}
      </motion.div>
    </div>
  );
};

export default FullText;