Merge pull request #25327 from overleaf/dp-word-count

Add word count to file menu in new editor

GitOrigin-RevId: a5cb4d6cd37c46775056f696c0f19fcabd3f4131

services/web/frontend/extracted-translations.json

@@ -2058,6 +2058,7 @@
   "will_lose_edit_access_on_date": "",
   "with_premium_subscription_you_also_get": "",
   "word_count": "",
+  "word_count_lower": "",
   "work_in_vim_or_emacs_emulation_mode": "",
   "work_offline": "",
   "work_offline_pull_to_overleaf": "",

services/web/frontend/js/features/ide-redesign/components/toolbar/menu-bar.tsx

@@ -7,7 +7,7 @@ import { MenuBarDropdown } from '@/shared/components/menu-bar/menu-bar-dropdown'
 import { MenuBarOption } from '@/shared/components/menu-bar/menu-bar-option'
 import { useTranslation } from 'react-i18next'
 import ChangeLayoutOptions from './change-layout-options'
-import { MouseEventHandler, useCallback, useMemo } from 'react'
+import { MouseEventHandler, useCallback, useMemo, useState } from 'react'
 import { useIdeRedesignSwitcherContext } from '@/features/ide-react/context/ide-redesign-switcher-context'
 import { useSwitchEnableNewEditorState } from '../../hooks/use-switch-enable-new-editor-state'
 import MaterialIcon from '@/shared/components/material-icon'
@@ -21,6 +21,9 @@ import CommandDropdown, {
 } from './command-dropdown'
 import { useUserSettingsContext } from '@/shared/context/user-settings-context'
 import { useRailContext } from '../../contexts/rail-context'
+import WordCountModal from '@/features/word-count-modal/components/word-count-modal'
+import { isSplitTestEnabled } from '@/utils/splitTestUtils'
+import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
 
 export const ToolbarMenuBar = () => {
   const { t } = useTranslation()
@@ -29,6 +32,9 @@ export const ToolbarMenuBar = () => {
     setShowSwitcherModal(true)
   }, [setShowSwitcherModal])
   const { setView, view } = useLayoutContext()
+  const { pdfUrl } = useCompileContext()
+  const wordCountEnabled = pdfUrl || isSplitTestEnabled('word-count-client')
+  const [showWordCountModal, setShowWordCountModal] = useState(false)
 
   useCommandProvider(
     () => [
@@ -40,8 +46,17 @@ export const ToolbarMenuBar = () => {
         },
         id: 'show_version_history',
       },
+      {
+        type: 'command',
+        label: t('word_count_lower'),
+        disabled: !wordCountEnabled,
+        handler: () => {
+          setShowWordCountModal(true)
+        },
+        id: 'word_count',
+      },
     ],
-    [t, setView, view]
+    [t, setView, view, wordCountEnabled]
   )
   const fileMenuStructure: MenuStructure = useMemo(
     () => [
@@ -49,7 +64,7 @@ export const ToolbarMenuBar = () => {
         id: 'file-file-tree',
         children: ['new_file', 'new_folder', 'upload_file'],
       },
-      { id: 'file-history', children: ['show_version_history'] },
+      { id: 'file-tools', children: ['show_version_history', 'word_count'] },
       {
         id: 'file-download',
         children: ['download-as-source-zip', 'download-pdf'],
@@ -175,67 +190,73 @@ export const ToolbarMenuBar = () => {
     setActiveModal('contact-us')
   }, [setActiveModal])
   return (
-    <MenuBar
+    <>
-      className="ide-redesign-toolbar-menu-bar"
+      <MenuBar
-      id="toolbar-menu-bar-item"
+        className="ide-redesign-toolbar-menu-bar"
-    >
+        id="toolbar-menu-bar-item"
-      <CommandDropdown menu={fileMenuStructure} title={t('file')} id="file" />
-      <CommandDropdown menu={editMenuStructure} title={t('edit')} id="edit" />
-      <CommandDropdown
-        menu={insertMenuStructure}
-        title={t('insert')}
-        id="insert"
-      />
-      <MenuBarDropdown
-        title={t('view')}
-        id="view"
-        className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
       >
-        <ChangeLayoutOptions />
+        <CommandDropdown menu={fileMenuStructure} title={t('file')} id="file" />
-        <DropdownHeader>Editor settings</DropdownHeader>
+        <CommandDropdown menu={editMenuStructure} title={t('edit')} id="edit" />
-        <MenuBarOption
+        <CommandDropdown
-          title={t('show_equation_preview')}
+          menu={insertMenuStructure}
-          trailingIcon={mathPreview ? 'check' : undefined}
+          title={t('insert')}
-          onClick={toggleMathPreview}
+          id="insert"
         />
-        <CommandSection section={pdfControlsMenuSectionStructure} />
+        <MenuBarDropdown
-      </MenuBarDropdown>
+          title={t('view')}
-      <CommandDropdown
+          id="view"
-        menu={formatMenuStructure}
+          className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
-        title={t('format')}
+        >
-        id="format"
+          <ChangeLayoutOptions />
+          <DropdownHeader>Editor settings</DropdownHeader>
+          <MenuBarOption
+            title={t('show_equation_preview')}
+            trailingIcon={mathPreview ? 'check' : undefined}
+            onClick={toggleMathPreview}
+          />
+          <CommandSection section={pdfControlsMenuSectionStructure} />
+        </MenuBarDropdown>
+        <CommandDropdown
+          menu={formatMenuStructure}
+          title={t('format')}
+          id="format"
+        />
+        <MenuBarDropdown
+          title={t('help')}
+          id="help"
+          className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
+        >
+          <MenuBarOption
+            title={t('keyboard_shortcuts')}
+            onClick={openKeyboardShortcutsModal}
+          />
+          <MenuBarOption
+            title={t('documentation')}
+            href="/learn"
+            target="_blank"
+            rel="noopener noreferrer"
+          />
+          <DropdownDivider />
+          <MenuBarOption title={t('contact_us')} onClick={openContactUsModal} />
+          <MenuBarOption
+            title={t('give_feedback')}
+            href="https://forms.gle/soyVStc5qDx9na1Z6"
+            target="_blank"
+            rel="noopener noreferrer"
+          />
+          <DropdownDivider />
+          <SwitchToOldEditorMenuBarOption />
+          <MenuBarOption
+            title="What's new?"
+            onClick={openEditorRedesignSwitcherModal}
+          />
+        </MenuBarDropdown>
+      </MenuBar>
+      <WordCountModal
+        show={showWordCountModal}
+        handleHide={() => setShowWordCountModal(false)}
       />
-      <MenuBarDropdown
+    </>
-        title={t('help')}
-        id="help"
-        className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
-      >
-        <MenuBarOption
-          title={t('keyboard_shortcuts')}
-          onClick={openKeyboardShortcutsModal}
-        />
-        <MenuBarOption
-          title={t('documentation')}
-          href="/learn"
-          target="_blank"
-          rel="noopener noreferrer"
-        />
-        <DropdownDivider />
-        <MenuBarOption title={t('contact_us')} onClick={openContactUsModal} />
-        <MenuBarOption
-          title={t('give_feedback')}
-          href="https://forms.gle/soyVStc5qDx9na1Z6"
-          target="_blank"
-          rel="noopener noreferrer"
-        />
-        <DropdownDivider />
-        <SwitchToOldEditorMenuBarOption />
-        <MenuBarOption
-          title="What's new?"
-          onClick={openEditorRedesignSwitcherModal}
-        />
-      </MenuBarDropdown>
-    </MenuBar>
   )
 }
 

services/web/locales/en.json

@@ -2609,6 +2609,7 @@
   "will_need_to_log_out_from_and_in_with": "You will need to <b>log out</b> from your <b>__email1__</b> account and then log in with <b>__email2__</b>.",
   "with_premium_subscription_you_also_get": "With an Overleaf Premium subscription you also get",
   "word_count": "Word Count",
+  "word_count_lower": "Word count",
   "work_in_vim_or_emacs_emulation_mode": "Work in Vim or Emacs emulation mode",
   "work_offline": "Work offline",
   "work_offline_pull_to_overleaf": "Work offline, then pull to __appName__",