fix: remove huge html generation

IvanIhnatsiuk · IvanIhnatsiuk · commit b6b09bd9790f · 2025-12-11T22:43:17.000+01:00
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -77,77 +77,6 @@ const DEBUG_SCROLLABLE = false;
 // See: https://github.com/software-mansion/react-native-enriched/issues/229
 const ANDROID_EXPERIMENTAL_SYNCHRONOUS_EVENTS = false;
 
-const generateHugeHtml = (repeat = 200) => {
-  const parts: string[] = [];
-  parts.push('<html>');
-
-  // small helper to make deterministic colors
-  const colorAt = (i: number) => {
-    const r = (37 * (i + 1)) % 256;
-    const g = (83 * (i + 7)) % 256;
-    const b = (199 * (i + 13)) % 256;
-    const toHex = (n: number) => n.toString(16).padStart(2, '0');
-    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-  };
-
-  for (let i = 0; i < repeat; i++) {
-    const col = colorAt(i);
-    const imgW = 200 + (i % 5) * 40;
-    const imgH = 100 + (i % 3) * 30;
-
-    parts.push(
-      // Headings
-      `\n<h1>Section ${i + 1}</h1>`,
-      `\n<h2>Subsection ${i + 1}.1</h2>`,
-      `\n<h3>Topic ${i + 1}.1.a</h3>`,
-
-      // Paragraph with mixed inline styles
-      `\n<p>This is a <b>bold</b> and <i>italic</i> paragraph with <u>underline</u>, ` +
-        `<s>strike</s>, <code>inline_code_${i}</code>, ` +
-        `<a href="https://example.com/${i}">a link ${i}</a>, ` +
-        `<mention text="@alex_${i}" indicator="@"></mention>, ` +
-        `<mention text="#general_${i}" indicator="#"></mention>, ` +
-        `<font color="${col}">colored text ${col}</font> and some plain text to bulk it up.</p>`,
-
-      // Line break
-      `\n<br>`,
-
-      // Unordered list
-      `<ul>`,
-      `<li>bullet A ${i}</li>`,
-      `<li>bullet B ${i}</li>`,
-      `<li>bullet C ${i}</li>`,
-      `</ul>`,
-
-      // Ordered list
-      `\n<ol>`,
-      `\n<li>step 1.${i}</li>`,
-      `\n<li>step 2.${i}</li>`,
-      `\n<li>step 3.${i}</li>`,
-      `\n</ol>`,
-
-      // Blockquote
-      `\n<blockquote>`,
-      `\n<p>“Blockquote line 1 for ${i}.”</p>`,
-      `\n<p>“Blockquote line 2 for ${i}.”</p>`,
-      `\n</blockquote>`,
-
-      // Code block (escaped characters)
-      `\n<codeblock>`,
-      `\n<p>for (let k = 0; k < ${i % 7}; k++) { console.log(&quot;block_${i}&quot;); }</p>`,
-      `\n</codeblock>`,
-
-      // Image (self-closing)
-      `\n<p><img src="https://picsum.photos/seed/${i}/${imgW}/${imgH}" width="${imgW}" height="${imgH}" /></p>`
-    );
-  }
-
-  parts.push('\n</html>');
-  return parts.join('');
-};
-
-const initialHugeHtml = generateHugeHtml();
-
 export default function App() {
   const [isChannelPopupOpen, setIsChannelPopupOpen] = useState(false);
   const [isUserPopupOpen, setIsUserPopupOpen] = useState(false);
@@ -160,7 +89,6 @@ export default function App() {
   const [stylesState, setStylesState] = useState<StylesState>(DEFAULT_STYLE);
   const [currentLink, setCurrentLink] =
     useState<CurrentLinkState>(DEFAULT_LINK_STATE);
-  const [visible, setVisible] = useState(false);
 
   const ref = useRef<EnrichedTextInputInstance>(null);
 
@@ -370,37 +298,33 @@ export default function App() {
         style={styles.container}
         contentContainerStyle={styles.content}
       >
-        <Button title="Set visible" onPress={() => setVisible(!visible)} />
         <Text style={styles.label}>Enriched Text Input</Text>
         <View style={styles.editor}>
-          {visible && (
-            <EnrichedTextInput
-              ref={ref}
-              mentionIndicators={['@', '#']}
-              style={styles.editorInput}
-              htmlStyle={htmlStyle}
-              placeholder="Type something here..."
-              placeholderTextColor="rgb(0, 26, 114)"
-              selectionColor="deepskyblue"
-              cursorColor="dodgerblue"
-              defaultValue={initialHugeHtml}
-              autoCapitalize="sentences"
-              onChangeText={handleChangeText}
-              onChangeHtml={handleChangeHtml}
-              onChangeState={handleChangeState}
-              onLinkDetected={handleLinkDetected}
-              onMentionDetected={console.log}
-              onStartMention={handleStartMention}
-              onChangeMention={handleChangeMention}
-              onEndMention={handleEndMention}
-              onFocus={handleFocusEvent}
-              onBlur={handleBlurEvent}
-              onChangeSelection={handleSelectionChangeEvent}
-              androidExperimentalSynchronousEvents={
-                ANDROID_EXPERIMENTAL_SYNCHRONOUS_EVENTS
-              }
-            />
-          )}
+          <EnrichedTextInput
+            ref={ref}
+            mentionIndicators={['@', '#']}
+            style={styles.editorInput}
+            htmlStyle={htmlStyle}
+            placeholder="Type something here..."
+            placeholderTextColor="rgb(0, 26, 114)"
+            selectionColor="deepskyblue"
+            cursorColor="dodgerblue"
+            autoCapitalize="sentences"
+            onChangeText={handleChangeText}
+            onChangeHtml={handleChangeHtml}
+            onChangeState={handleChangeState}
+            onLinkDetected={handleLinkDetected}
+            onMentionDetected={console.log}
+            onStartMention={handleStartMention}
+            onChangeMention={handleChangeMention}
+            onEndMention={handleEndMention}
+            onFocus={handleFocusEvent}
+            onBlur={handleBlurEvent}
+            onChangeSelection={handleSelectionChangeEvent}
+            androidExperimentalSynchronousEvents={
+              ANDROID_EXPERIMENTAL_SYNCHRONOUS_EVENTS
+            }
+          />
           <Toolbar
             stylesState={stylesState}
             editorRef={ref}
