chore: restore the test case

Author: hejsztynx

apps/example/src/screens/DevScreen.tsx

@@ -1,19 +1,37 @@
 import { View, StyleSheet, Text, ScrollView } from 'react-native';
 import { EnrichedTextInput } from 'react-native-enriched-html';
 import { Button } from '../components/Button';
+import { Toolbar } from '../components/Toolbar';
+import { LinkModal } from '../components/LinkModal';
+import { ValueModal } from '../components/ValueModal';
+import { MentionPopup } from '../components/MentionPopup';
+import { HtmlSection } from '../components/HtmlSection';
+import { ImageModal } from '../components/ImageModal';
+import { useEditorState } from '../hooks/useEditorState';
 import {
   LINK_REGEX,
   htmlStyle,
   ANDROID_EXPERIMENTAL_SYNCHRONOUS_EVENTS,
 } from '../constants/editorConfig';
 import { useState } from 'react';
+import { TextRenderer } from '../components/TextRenderer';
 
 interface DevScreenProps {
   onSwitch: () => void;
 }
 
-export function DevScreen({}: DevScreenProps) {
-  const [showEditor, setShowEditor] = useState(false);
+export function DevScreen({ onSwitch }: DevScreenProps) {
+  const editor = useEditorState();
+  const [textNodes, setTextNodes] = useState<Array<string>>([]);
+
+  const handlePushTextNode = async () => {
+    const currentText = await editor.ref.current?.getHTML();
+    if (currentText) {
+      setTextNodes((prevTextNodes) => [...prevTextNodes, currentText]);
+    }
+
+    editor.ref.current?.setValue('');
+  };
 
   return (
     <>
@@ -22,32 +40,103 @@ export function DevScreen({}: DevScreenProps) {
         contentContainerStyle={styles.content}
       >
         <Text style={styles.label}>Enriched Text Input</Text>
+        <View style={styles.editor} testID="editor-container">
+          <EnrichedTextInput
+            ref={editor.ref}
+            mentionIndicators={['@', '#']}
+            style={styles.editorInput}
+            htmlStyle={htmlStyle}
+            placeholder="Type something here..."
+            placeholderTextColor="rgb(0, 26, 114)"
+            selectionColor="deepskyblue"
+            cursorColor="dodgerblue"
+            autoCapitalize="sentences"
+            linkRegex={LINK_REGEX}
+            onChangeText={(e) => editor.handleChangeText(e.nativeEvent)}
+            onChangeHtml={(e) => editor.handleChangeHtml(e.nativeEvent)}
+            onChangeState={(e) => editor.handleChangeState(e.nativeEvent)}
+            onLinkDetected={editor.handleLinkDetected}
+            onMentionDetected={console.log}
+            onStartMention={editor.handleStartMention}
+            onChangeMention={editor.handleChangeMention}
+            onEndMention={editor.handleEndMention}
+            onFocus={editor.handleFocusEvent}
+            onBlur={editor.handleBlurEvent}
+            onChangeSelection={(e) =>
+              editor.handleSelectionChangeEvent(e.nativeEvent)
+            }
+            onSubmitEditing={(e) =>
+              editor.handleSubmitEditingEvent(e.nativeEvent)
+            }
+            onKeyPress={(e) => editor.handleKeyPress(e.nativeEvent)}
+            androidExperimentalSynchronousEvents={
+              ANDROID_EXPERIMENTAL_SYNCHRONOUS_EVENTS
+            }
+            onPasteImages={(e) => editor.handlePasteImagesEvent(e.nativeEvent)}
+            testID="editor-input"
+          />
+          <Toolbar
+            stylesState={editor.stylesState}
+            editorRef={editor.ref}
+            onOpenLinkModal={editor.openLinkModal}
+            onSelectImage={editor.openImageModal}
+            layout="horizontal"
+          />
+        </View>
+        <HtmlSection currentHtml={editor.currentHtml} />
+        <View style={styles.buttonStack}>
+          <Button
+            title="Set input's value"
+            onPress={editor.openValueModal}
+            style={styles.button}
+          />
+          <Button
+            title="Push text"
+            onPress={handlePushTextNode}
+            style={styles.button}
+          />
+        </View>
         <Button
-          title="Toggle editor's presence"
-          onPress={() => setShowEditor((prev) => !prev)}
+          title="Test Screen"
+          onPress={onSwitch}
           style={styles.valueButton}
           testID="toggle-screen-button"
         />
-        <View style={styles.editor} testID="editor-container">
-          {showEditor && (
-            <EnrichedTextInput
-              style={styles.editorInput}
-              htmlStyle={htmlStyle}
-              placeholder="Type something here..."
-              placeholderTextColor="rgb(0, 26, 114)"
-              selectionColor="deepskyblue"
-              cursorColor="dodgerblue"
-              autoCapitalize="sentences"
-              linkRegex={LINK_REGEX}
-              androidExperimentalSynchronousEvents={
-                ANDROID_EXPERIMENTAL_SYNCHRONOUS_EVENTS
-              }
-              defaultValue={`<html><h4>heading</h4><ul><li>list1</li><li>list2</li><li><code>codelist</code></li></ul><h3><code>codeheading</code></h3></html>`}
-              testID="editor-input"
-            />
-          )}
-        </View>
+        <TextRenderer nodes={textNodes} />
       </ScrollView>
+      <LinkModal
+        isOpen={editor.isLinkModalOpen}
+        editedText={
+          editor.insideCurrentLink
+            ? editor.currentLink.text
+            : (editor.selection?.text ?? '')
+        }
+        editedUrl={editor.insideCurrentLink ? editor.currentLink.url : ''}
+        onSubmit={editor.submitLink}
+        onClose={editor.closeLinkModal}
+      />
+      <ImageModal
+        isOpen={editor.isImageModalOpen}
+        onSubmit={editor.selectImage}
+        onClose={editor.closeImageModal}
+      />
+      <ValueModal
+        isOpen={editor.isValueModalOpen}
+        onSubmit={editor.submitSetValue}
+        onClose={editor.closeValueModal}
+      />
+      <MentionPopup
+        variant="user"
+        data={editor.userMention.data}
+        isOpen={editor.isUserPopupOpen}
+        onItemPress={editor.handleUserMentionSelected}
+      />
+      <MentionPopup
+        variant="channel"
+        data={editor.channelMention.data}
+        isOpen={editor.isChannelPopupOpen}
+        onItemPress={editor.handleChannelMentionSelected}
+      />
     </>
   );
 }
@@ -87,7 +176,9 @@ const styles = StyleSheet.create({
   editorInput: {
     marginTop: 24,
     width: '100%',
+    maxHeight: 180,
     backgroundColor: 'gainsboro',
+    fontSize: 18,
     fontFamily: 'Nunito-Regular',
     paddingVertical: 12,
     paddingHorizontal: 14,