Update app.py

app.py

@@ -6,6 +6,9 @@ from llama_index.core.node_parser import MarkdownNodeParser
 from llama_index.core.schema import Document, MetadataMode
 import textstat
 from markdownify import markdownify as md
+# NEW: Imports for the WYSIWYG editor and Markdown-HTML conversion
+from streamlit_quill import st_quill
+import markdown
 
 # --- Core Logic Classes ---
 class WebpageContentProcessor:
@@ -107,9 +110,11 @@ class ChunkManager:
         """Calculates readability and other metrics for a text chunk."""
         stats = {}
         try:
-            stats['word_count'] = textstat.lexicon_count(text, removepunct=True)
-            stats['flesch_reading_ease'] = textstat.flesch_reading_ease(text)
-            stats['flesch_kincaid_grade'] = textstat.flesch_kincaid_grade(text)
+            # textstat requires plain text, so we ensure any residual HTML is stripped
+            clean_text = re.sub('<[^<]+?>', '', text)
+            stats['word_count'] = textstat.lexicon_count(clean_text, removepunct=True)
+            stats['flesch_reading_ease'] = textstat.flesch_reading_ease(clean_text)
+            stats['flesch_kincaid_grade'] = textstat.flesch_kincaid_grade(clean_text)
         except (Exception, TypeError):
             stats.update({'word_count': 0, 'flesch_reading_ease': 0, 'flesch_kincaid_grade': 0})
         return stats
@@ -148,6 +153,7 @@ class ChunkManager:
     def update_chunk_content(self, chunk_id: int, new_content: str):
         chunk = self.get_chunk_by_id(chunk_id)
         if chunk:
+            # The content is now Markdown, converted from the editor's HTML
             chunk["content"] = new_content
             self._add_stats_to_chunk(chunk)
             if chunk["title"].startswith("["):
@@ -192,7 +198,6 @@ def init_session_state():
         st.session_state.selected_chunk_id = None
     if 'status_message' not in st.session_state:
         st.session_state.status_message = ""
-    # REMOVED: The show_preview state is no longer needed with the side-by-side layout
 
 init_session_state()
 
@@ -229,13 +234,13 @@ url_input = st.text_input("Enter a webpage URL to start", key="url_input")
 if st.button("Process URL", use_container_width=True, type="primary"):
     if url_input:
         with st.spinner("Fetching and chunking content..."):
-            markdown = processor.fetch_and_convert_to_markdown(url_input)
-            if "Error" in markdown:
-                st.session_state.status_message = markdown
+            markdown_content = processor.fetch_and_convert_to_markdown(url_input)
+            if "Error" in markdown_content:
+                st.session_state.status_message = markdown_content
                 manager.set_chunks([])
                 st.session_state.selected_chunk_id = None
             else:
-                chunks = processor.parse_markdown_into_chunks(markdown)
+                chunks = processor.parse_markdown_into_chunks(markdown_content)
                 manager.set_chunks(chunks)
                 if chunks:
                     st.session_state.status_message = f"Successfully processed {len(chunks)} chunks."
@@ -277,41 +282,43 @@ with tab1:
             selected_chunk = manager.get_chunk_by_id(st.session_state.selected_chunk_id)
 
             if selected_chunk:
-                # --- NEW: Side-by-side layout for editor and live preview ---
-                editor_col, preview_col = st.columns(2)
-
-                with editor_col:
-                    st.markdown(f"**Editing: {selected_chunk['title']}**")
-                    st.markdown(manager.format_chunk_stats(selected_chunk['stats']), unsafe_allow_html=True)
-
-                    edited_content = st.text_area(
-                        "Chunk Content (Markdown)",
-                        value=selected_chunk['content'],
-                        height=400, # Increased height for better visibility
-                        key=f"editor_{selected_chunk['id']}"
-                    )
-                    
-                    # Action buttons below the editor
-                    b_col1, b_col2, _ = st.columns([1, 1, 3])
-
-                    if b_col1.button("Update Chunk", use_container_width=True, key=f"update_{selected_chunk['id']}"):
-                        manager.update_chunk_content(selected_chunk['id'], edited_content)
-                        st.session_state.status_message = "Chunk updated successfully!"
-                        st.rerun()
-
-                    if b_col2.button("Delete Chunk", use_container_width=True, key=f"delete_{selected_chunk['id']}"):
-                        manager.delete_chunk(selected_chunk['id'])
-                        st.session_state.status_message = "Chunk deleted."
-                        remaining_chunks = manager.get_chunks()
-                        st.session_state.selected_chunk_id = remaining_chunks[0]['id'] if remaining_chunks else None
-                        st.rerun()
-
-                with preview_col:
-                    st.markdown("**Live Preview**")
-                    # The container now continuously renders the content from the editor
-                    with st.container(height=525, border=True):
-                         st.markdown(edited_content, unsafe_allow_html=True)
-
+                st.markdown(f"**Editing: {selected_chunk['title']}**")
+                st.markdown(manager.format_chunk_stats(selected_chunk['stats']), unsafe_allow_html=True)
+
+                # --- NEW: Replaced editor with WYSIWYG component ---
+                # 1. Convert our stored Markdown to HTML for the editor
+                content_as_html = markdown.markdown(selected_chunk['content'])
+
+                # 2. Instantiate the WYSIWYG editor
+                edited_html = st_quill(
+                    value=content_as_html,
+                    key=f"editor_{selected_chunk['id']}",
+                    html=True, # Work in HTML mode
+                    toolbar=[ # Customize the toolbar
+                        [{'header': [1, 2, 3, 4, 5, 6, False]}],
+                        ['bold', 'italic', 'underline', 'strike'],
+                        [{'list': 'ordered'}, {'list': 'bullet'}],
+                        ['link', 'image'],
+                        ['clean']
+                    ]
+                )
+
+                # 3. Action buttons
+                b_col1, b_col2, _ = st.columns([1, 1, 5])
+
+                if b_col1.button("Update Chunk", use_container_width=True, key=f"update_{selected_chunk['id']}"):
+                    # Convert the editor's HTML output back to Markdown before saving
+                    updated_markdown = md(edited_html, heading_style="ATX")
+                    manager.update_chunk_content(selected_chunk['id'], updated_markdown)
+                    st.session_state.status_message = "Chunk updated successfully!"
+                    st.rerun()
+
+                if b_col2.button("Delete Chunk", use_container_width=True, key=f"delete_{selected_chunk['id']}"):
+                    manager.delete_chunk(selected_chunk['id'])
+                    st.session_state.status_message = "Chunk deleted."
+                    remaining_chunks = manager.get_chunks()
+                    st.session_state.selected_chunk_id = remaining_chunks[0]['id'] if remaining_chunks else None
+                    st.rerun()
 
 with tab2:
     st.subheader("Document Overview")
@@ -332,4 +339,4 @@ with tab2:
             st.rerun()
 
     st.subheader("Final Compiled Document")
-    st.text_area("Final Markdown Output", manager.get_final_markdown(), height=500, key="final_markdown")
+    st.text_area("Final Markdown Output", manager.get_final_markdown(), height=500, key="final_markdown")