Merge pull request #414 from subin-chella/Content-Length-Indicator-#170

* #170 Content Length Indicator

* Added toggle button to show hide document stats #414

* St

electron/main/electron-store/ipcHandlers.ts

@@ -124,6 +124,15 @@ export const registerStoreHandlers = (store: Store<StoreSchema>, windowsManager:
     return store.get(StoreKeys.SpellCheck)
   })
 
+  ipcMain.handle('set-document-stats', (event, showDocumentStats: boolean) => {
+    store.set(StoreKeys.showDocumentStats, showDocumentStats)
+    event.sender.send('show-doc-stats-changed', showDocumentStats)
+  })
+
+  ipcMain.handle('get-document-stats', () => {
+    return store.get(StoreKeys.showDocumentStats, false)
+  })
+
   ipcMain.handle('has-user-opened-app-before', () => store.get(StoreKeys.hasUserOpenedAppBefore))
 
   ipcMain.handle('set-user-has-opened-app-before', () => {

electron/main/electron-store/storeConfig.ts

@@ -65,6 +65,7 @@ export interface StoreSchema {
   spellCheck: string
   EditorFlexCenter: boolean
   OpenTabs: Tab[]
+  showDocumentStats: boolean
 }
 
 export enum StoreKeys {
@@ -85,4 +86,5 @@ export enum StoreKeys {
   SpellCheck = 'spellCheck',
   EditorFlexCenter = 'editorFlexCenter',
   OpenTabs = 'OpenTabs',
+  showDocumentStats = 'showDocumentStats',
 }

electron/preload/index.ts

@@ -61,6 +61,8 @@ const electronStore = {
   setAnalyticsMode: createIPCHandler<(isAnalytics: boolean) => Promise<void>>('set-analytics-mode'),
   getSpellCheckMode: createIPCHandler<() => Promise<boolean>>('get-spellcheck-mode'),
   setSpellCheckMode: createIPCHandler<(isSpellCheck: boolean) => Promise<void>>('set-spellcheck-mode'),
+  getDocumentStats: createIPCHandler<() => Promise<boolean>>('get-document-stats'),
+  setDocumentStats: createIPCHandler<(showWordCount: boolean) => Promise<void>>('set-document-stats'),
   getHasUserOpenedAppBefore: createIPCHandler<() => Promise<boolean>>('has-user-opened-app-before'),
   setHasUserOpenedAppBefore: createIPCHandler<() => Promise<void>>('set-user-has-opened-app-before'),
   getAllChatsMetadata: createIPCHandler<() => Promise<ChatMetadata[]>>('get-all-chats-metadata'),

package.json

@@ -50,6 +50,7 @@
     "@tailwindcss/typography": "^0.5.10",
     "@tiptap/core": "^2.5.0",
     "@tiptap/extension-bubble-menu": "^2.4.0",
+    "@tiptap/extension-character-count": "^2.7.2",
     "@tiptap/extension-document": "^2.5.0",
     "@tiptap/extension-link": "^2.2.4",
     "@tiptap/extension-paragraph": "^2.5.0",

src/components/Editor/EditorManager.tsx

@@ -14,6 +14,7 @@ const EditorManager: React.FC = () => {
   const [placeholderPosition, setPlaceholderPosition] = useState({ top: 0, left: 0 })
 
   const { editor, suggestionsState, flattenedFiles } = useFileContext()
+  const [showDocumentStats, setShowDocumentStats] = useState(false)
 
   const handleContextMenu = (event: React.MouseEvent<HTMLDivElement>) => {
     event.preventDefault()
@@ -42,6 +43,21 @@ const EditorManager: React.FC = () => {
     window.ipcRenderer.on('editor-flex-center-changed', handleEditorChange)
   }, [])
 
+  useEffect(() => {
+    const initDocumentStats = async () => {
+      const showStats = await window.electronStore.getDocumentStats()
+      setShowDocumentStats(showStats)
+    }
+
+    initDocumentStats()
+
+    const handleDocStatsChange = (event: Electron.IpcRendererEvent, value: boolean) => {
+      setShowDocumentStats(value)
+    }
+
+    window.ipcRenderer.on('show-doc-stats-changed', handleDocStatsChange)
+  }, [])
+
   useEffect(() => {
     if (!editor) return
 
@@ -94,7 +110,7 @@ const EditorManager: React.FC = () => {
 
   return (
     <div
-      className="relative size-full cursor-text overflow-y-auto bg-dark-gray-c-eleven py-4 text-slate-400 opacity-80"
+      className="relative size-full cursor-text overflow-hidden bg-dark-gray-c-eleven py-4 text-slate-400 opacity-80"
       onClick={() => editor?.commands.focus()}
     >
       <SearchBar editor={editor} showSearch={showSearchBar} setShowSearch={setShowSearchBar} />
@@ -107,32 +123,42 @@ const EditorManager: React.FC = () => {
         />
       )}
 
-      <div className={`relative h-full overflow-y-auto ${editorFlex ? 'flex justify-center py-4 pl-4' : ''}`}>
-        <EditorContent
-          className={`relative size-full bg-dark-gray-c-eleven ${editorFlex ? 'max-w-xl' : ''}`}
-          style={{
-            wordBreak: 'break-word',
-          }}
-          onContextMenu={handleContextMenu}
-          onClick={hideMenu}
-          onInput={handleInput}
-          editor={editor}
-        />
-        {showPlaceholder && (
-          <div
-            className="pointer-events-none absolute text-gray-500"
-            style={{ top: placeholderPosition.top, left: placeholderPosition.left }}
-          >
-            Press &apos;space&apos; for AI writing assistant
-          </div>
-        )}
+      <div
+        className={`relative h-full ${editorFlex ? 'flex justify-center py-4 pl-4' : ''} ${showDocumentStats ? 'pb-3' : ''}`}
+      >
+        <div className="relative size-full overflow-y-auto">
+          <EditorContent
+            className={`relative size-full bg-dark-gray-c-eleven ${editorFlex ? 'max-w-xl' : ''}`}
+            style={{
+              wordBreak: 'break-word',
+            }}
+            onContextMenu={handleContextMenu}
+            onClick={hideMenu}
+            onInput={handleInput}
+            editor={editor}
+          />
+          {showPlaceholder && (
+            <div
+              className="pointer-events-none absolute text-gray-500"
+              style={{ top: placeholderPosition.top, left: placeholderPosition.left }}
+            >
+              Press &apos;space&apos; for AI writing assistant
+            </div>
+          )}
+        </div>
       </div>
       {suggestionsState && (
         <InEditorBacklinkSuggestionsDisplay
           suggestionsState={suggestionsState}
           suggestions={flattenedFiles.map((file) => file.relativePath)}
         />
       )}
+      {editor && showDocumentStats && (
+        <div className="absolute bottom-2 right-2 flex gap-4 text-sm text-gray-500">
+          <div>Characters: {editor.storage.characterCount.characters()}</div>
+          <div>Words: {editor.storage.characterCount.words()}</div>
+        </div>
+      )}
     </div>
   )
 }

src/components/Settings/GeneralSections.tsx

@@ -48,26 +48,36 @@ export const AppearanceSection = () => {
 export const EditorSection = () => {
   // const { spellCheckEnabled, setSpellCheckEnabled } = useFileByFilepath()
   const [tempSpellCheckEnabled, setTempSpellCheckEnabled] = useState(false)
+  const [documentStatsEnabled, setDocumentStatsEnabled] = useState(false)
   const [editorFlexCenter, setEditorFlexCenter] = useState<boolean>(true)
 
   useEffect(() => {
     const fetchParams = async () => {
       const isSpellCheckEnabled = await window.electronStore.getSpellCheckMode()
+      const isDocumentStatsCheckEnabled = await window.electronStore.getDocumentStats()
 
       if (isSpellCheckEnabled !== undefined) {
         // setSpellCheckEnabled(isSpellCheckEnabled)
         setTempSpellCheckEnabled(isSpellCheckEnabled)
       }
+      if (isDocumentStatsCheckEnabled !== undefined) {
+        setDocumentStatsEnabled(isDocumentStatsCheckEnabled)
+      }
     }
 
     fetchParams()
   }, [])
 
-  const handleSave = (setChecked: boolean) => {
+  const handleSaveSpellCheck = (setChecked: boolean) => {
     // Execute the save function here
     window.electronStore.setSpellCheckMode(setChecked)
     setTempSpellCheckEnabled(!tempSpellCheckEnabled)
   }
+  const handleSaveDocStats = async (setChecked: boolean) => {
+    // Execute the save function here
+    await window.electronStore.setDocumentStats(setChecked)
+    setDocumentStatsEnabled(!documentStatsEnabled)
+  }
 
   // Check if we should have flex center for our editor
   useEffect(() => {
@@ -120,7 +130,24 @@ export const EditorSection = () => {
         <Switch
           checked={tempSpellCheckEnabled}
           onChange={() => {
-            handleSave(!tempSpellCheckEnabled)
+            handleSaveSpellCheck(!tempSpellCheckEnabled)
+          }}
+          inputProps={{ 'aria-label': 'controlled' }}
+        />
+      </div>
+      <div className="flex w-full flex-wrap items-center justify-between">
+        <div className="flex w-[70%] flex-col justify-center">
+          <p className="xs:text-xs flex flex-col text-base text-gray-100 opacity-80 sm:text-sm">
+            Document Statistics
+            <span className="m-0 pt-1 text-xs text-gray-100">
+              Display real-time word and character statistics while editing your document
+            </span>
+          </p>
+        </div>
+        <Switch
+          checked={documentStatsEnabled}
+          onChange={() => {
+            handleSaveDocStats(!documentStatsEnabled)
           }}
           inputProps={{ 'aria-label': 'controlled' }}
         />

src/contexts/FileContext.tsx

@@ -14,6 +14,7 @@ import Text from '@tiptap/extension-text'
 import TextStyle from '@tiptap/extension-text-style'
 import { Editor, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
+import CharacterCount from '@tiptap/extension-character-count'
 import { toast } from 'react-toastify'
 import { Markdown } from 'tiptap-markdown'
 import { useDebounce } from 'use-debounce'
@@ -180,6 +181,7 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
         openOnClick: true,
       }),
       BacklinkExtension(openRelativePathRef, setSuggestionsState),
+      CharacterCount,
     ],
   })