react Architecture Docs
Home / File/ TextNodesCase.js — react Source File

TextNodesCase.js — react Source File

Architecture documentation for TextNodesCase.js, a javascript file in the react codebase. 13 imports, 1 dependents.

File javascript BabelCompiler Entrypoint 13 imports 1 dependents 12 functions

Entity Profile

Dependency Diagram

graph LR
  f361f511_643d_fef8_84d3_4e38e9129616["TextNodesCase.js"]
  14dde3c9_48ef_6e34_3667_978d06aff15d["TestCase.js"]
  f361f511_643d_fef8_84d3_4e38e9129616 --> 14dde3c9_48ef_6e34_3667_978d06aff15d
  e1e356f5_b085_dad5_a81f_4b4844381311["TestCase"]
  f361f511_643d_fef8_84d3_4e38e9129616 --> e1e356f5_b085_dad5_a81f_4b4844381311
  bc8ae172_cc20_3692_943c_bbdb1ad34855["Fixture.js"]
  f361f511_643d_fef8_84d3_4e38e9129616 --> bc8ae172_cc20_3692_943c_bbdb1ad34855
  2851624d_a736_f3f6_2132_5a20630983fe["Fixture"]
  f361f511_643d_fef8_84d3_4e38e9129616 --> 2851624d_a736_f3f6_2132_5a20630983fe
  a3aeab4c_4f93_b8d8_01c2_7a351a28a3fb["Fixture"]
  f361f511_643d_fef8_84d3_4e38e9129616 --> a3aeab4c_4f93_b8d8_01c2_7a351a28a3fb
  e1fc4cb7_9af0_fc19_09e0_092ad843fb85["PrintRectsFragmentContainer.js"]
  f361f511_643d_fef8_84d3_4e38e9129616 --> e1fc4cb7_9af0_fc19_09e0_092ad843fb85
  6e1d3843_7f9f_b8e5_9dc1_fbfc8c3f4e4d["PrintRectsFragmentContainer"]
  f361f511_643d_fef8_84d3_4e38e9129616 --> 6e1d3843_7f9f_b8e5_9dc1_fbfc8c3f4e4d
  443b1272_3be6_b576_ea29_eeb3576c3c99["CompareDocumentPositionFragmentContainer.js"]
  f361f511_643d_fef8_84d3_4e38e9129616 --> 443b1272_3be6_b576_ea29_eeb3576c3c99
  ab1ecfe4_2664_ff4a_e5c0_6ed644467744["CompareDocumentPositionFragmentContainer"]
  f361f511_643d_fef8_84d3_4e38e9129616 --> ab1ecfe4_2664_ff4a_e5c0_6ed644467744
  86087e19_4194_bd7e_b870_ddbfd32ca7ad["EventFragmentContainer.js"]
  f361f511_643d_fef8_84d3_4e38e9129616 --> 86087e19_4194_bd7e_b870_ddbfd32ca7ad
  c62bde89_5d76_2360_c2c8_1ab329a843b1["EventFragmentContainer"]
  f361f511_643d_fef8_84d3_4e38e9129616 --> c62bde89_5d76_2360_c2c8_1ab329a843b1
  8b34ee80_c1e9_f50b_9b1c_9fad0c8cbf2d["GetRootNodeFragmentContainer.js"]
  f361f511_643d_fef8_84d3_4e38e9129616 --> 8b34ee80_c1e9_f50b_9b1c_9fad0c8cbf2d
  7b09f91b_79d9_407d_757c_e995b23908e4["GetRootNodeFragmentContainer"]
  f361f511_643d_fef8_84d3_4e38e9129616 --> 7b09f91b_79d9_407d_757c_e995b23908e4
  463c662d_adfd_912e_a87b_b390bc35e100["index.js"]
  463c662d_adfd_912e_a87b_b390bc35e100 --> f361f511_643d_fef8_84d3_4e38e9129616
  style f361f511_643d_fef8_84d3_4e38e9129616 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import TestCase from '../../TestCase';
import Fixture from '../../Fixture';
import PrintRectsFragmentContainer from './PrintRectsFragmentContainer';
import CompareDocumentPositionFragmentContainer from './CompareDocumentPositionFragmentContainer';
import EventFragmentContainer from './EventFragmentContainer';
import GetRootNodeFragmentContainer from './GetRootNodeFragmentContainer';

const React = window.React;
const {Fragment, useRef, useState} = React;

function GetClientRectsTextOnly() {
  return (
    <TestCase title="getClientRects - Text Only">
      <TestCase.Steps>
        <li>Click the "Print Rects" button</li>
      </TestCase.Steps>
      <TestCase.ExpectedResult>
        The fragment contains only text nodes. getClientRects should return
        bounding rectangles for the text content using the Range API.
      </TestCase.ExpectedResult>
      <Fixture>
        <Fixture.Controls>
          <PrintRectsFragmentContainer>
            This is text content inside a fragment with no element children.
          </PrintRectsFragmentContainer>
        </Fixture.Controls>
      </Fixture>
    </TestCase>
  );
}

function GetClientRectsMixed() {
  return (
    <TestCase title="getClientRects - Mixed Content">
      <TestCase.Steps>
        <li>Click the "Print Rects" button</li>
      </TestCase.Steps>
      <TestCase.ExpectedResult>
        The fragment contains both text nodes and elements. getClientRects
        should return bounding rectangles for both text content (via Range API)
        and elements.
      </TestCase.ExpectedResult>
      <Fixture>
        <Fixture.Controls>
          <PrintRectsFragmentContainer>
            Text before the span.
            <span
              style={{
                display: 'inline-block',
                padding: '5px 10px',
                backgroundColor: 'lightblue',
                border: '1px solid blue',
                margin: '0 5px',
              }}>
              Element
            </span>
            Text after the span.
            <div
              style={{
                width: '500px',
// ... (411 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does TextNodesCase.js do?
TextNodesCase.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Entrypoint subdomain.
What functions are defined in TextNodesCase.js?
TextNodesCase.js defines 12 function(s): CompareDocumentPositionTextNodes, EventMixed, EventTextOnly, FocusTextOnlyNoop, GetClientRectsMixed, GetClientRectsTextOnly, GetRootNodeMixed, GetRootNodeTextOnly, ObserveTextOnlyWarning, ScrollIntoViewMixed, and 2 more.
What does TextNodesCase.js depend on?
TextNodesCase.js imports 13 module(s): CompareDocumentPositionFragmentContainer, CompareDocumentPositionFragmentContainer.js, EventFragmentContainer, EventFragmentContainer.js, Fixture, Fixture, Fixture.js, GetRootNodeFragmentContainer, and 5 more.
What files import TextNodesCase.js?
TextNodesCase.js is imported by 1 file(s): index.js.
Where is TextNodesCase.js in the architecture?
TextNodesCase.js is located at fixtures/dom/src/components/fixtures/fragment-refs/TextNodesCase.js (domain: BabelCompiler, subdomain: Entrypoint, directory: fixtures/dom/src/components/fixtures/fragment-refs).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free