feat: testing case

Author: hejsztynx

apps/example/src/screens/DevScreen.tsx

@@ -1,37 +1,19 @@
 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({ 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('');
-  };
+export function DevScreen({}: DevScreenProps) {
+  const [showEditor, setShowEditor] = useState(false);
 
   return (
     <>
@@ -40,103 +22,32 @@ export function DevScreen({ onSwitch }: 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="Test Screen"
-          onPress={onSwitch}
+          title="Toggle editor's presence"
+          onPress={() => setShowEditor((prev) => !prev)}
           style={styles.valueButton}
           testID="toggle-screen-button"
         />
-        <TextRenderer nodes={textNodes} />
+        <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>
       </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}
-      />
     </>
   );
 }
@@ -176,9 +87,7 @@ const styles = StyleSheet.create({
   editorInput: {
     marginTop: 24,
     width: '100%',
-    maxHeight: 180,
     backgroundColor: 'gainsboro',
-    fontSize: 18,
     fontFamily: 'Nunito-Regular',
     paddingVertical: 12,
     paddingHorizontal: 14,