Add word count in document info modal (#738)

Co-authored-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/editor-page/document-bar/document-info/document-info-line-word-count.tsx

@@ -0,0 +1,45 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { useEffect, useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { ShowIf } from '../../../common/show-if/show-if'
+import { DocumentInfoLine } from './document-info-line'
+import { UnitalicBoldText } from './unitalic-bold-text'
+import { useIFrameEditorToRendererCommunicator } from '../../render-context/iframe-editor-to-renderer-communicator-context-provider'
+
+/**
+ * Creates a new info line for the document information dialog that holds the
+ * word count of the note, based on counting in the rendered output.
+ */
+export const DocumentInfoLineWordCount: React.FC = () => {
+  useTranslation()
+  const iframeEditorToRendererCommunicator = useIFrameEditorToRendererCommunicator()
+  const [wordCount, setWordCount] = useState<number | null>(null)
+
+  useEffect(() => {
+    iframeEditorToRendererCommunicator?.onWordCountCalculated((words) => {
+      setWordCount(words)
+    })
+    iframeEditorToRendererCommunicator?.sendGetWordCount()
+    return () => {
+      iframeEditorToRendererCommunicator?.onWordCountCalculated(undefined)
+    }
+  }, [iframeEditorToRendererCommunicator, setWordCount])
+
+  return (
+    <DocumentInfoLine icon={'align-left'} size={'2x'}>
+      <ShowIf condition={wordCount === null}>
+        <Trans i18nKey={'common.loading'} />
+      </ShowIf>
+      <ShowIf condition={wordCount !== null}>
+        <Trans i18nKey={'editor.modal.documentInfo.words'}>
+          <UnitalicBoldText text={wordCount ?? ''} dataCy={'document-info-word-count'} />
+        </Trans>
+      </ShowIf>
+    </DocumentInfoLine>
+  )
+}

src/components/editor-page/document-bar/document-info/document-info-modal.tsx

@@ -7,12 +7,13 @@
 import { DateTime } from 'luxon'
 import React from 'react'
 import { ListGroup, Modal } from 'react-bootstrap'
-import { Trans } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { CommonModal } from '../../../common/modals/common-modal'
 import { DocumentInfoLine } from './document-info-line'
 import { DocumentInfoLineWithTimeMode, DocumentInfoTimeLine } from './document-info-time-line'
 import { UnitalicBoldText } from './unitalic-bold-text'
 import { useCustomizeAssetsUrl } from '../../../../hooks/common/use-customize-assets-url'
+import { DocumentInfoLineWordCount } from './document-info-line-word-count'
 
 export interface DocumentInfoModalProps {
   show: boolean
@@ -21,10 +22,16 @@ export interface DocumentInfoModalProps {
 
 export const DocumentInfoModal: React.FC<DocumentInfoModalProps> = ({ show, onHide }) => {
   const assetsBaseUrl = useCustomizeAssetsUrl()
+  useTranslation()
 
   // TODO Replace hardcoded mock data with real/mock API requests
   return (
-    <CommonModal show={show} onHide={onHide} closeButton={true} titleI18nKey={'editor.modal.documentInfo.title'}>
+    <CommonModal
+      show={show}
+      onHide={onHide}
+      closeButton={true}
+      titleI18nKey={'editor.modal.documentInfo.title'}
+      data-cy={'document-info-modal'}>
       <Modal.Body>
         <ListGroup>
           <ListGroup.Item>
@@ -59,6 +66,9 @@ export const DocumentInfoModal: React.FC<DocumentInfoModalProps> = ({ show, onHi
               </Trans>
             </DocumentInfoLine>
           </ListGroup.Item>
+          <ListGroup.Item>
+            <DocumentInfoLineWordCount />
+          </ListGroup.Item>
         </ListGroup>
       </Modal.Body>
     </CommonModal>

src/components/editor-page/document-bar/document-info/unitalic-bold-text.tsx

@@ -7,9 +7,14 @@
 import React from 'react'
 
 export interface UnitalicBoldTextProps {
-  text: string
+  text: string | number
+  dataCy?: string
 }
 
-export const UnitalicBoldText: React.FC<UnitalicBoldTextProps> = ({ text }) => {
-  return <b className={'font-style-normal mr-1'}>{text}</b>
+export const UnitalicBoldText: React.FC<UnitalicBoldTextProps> = ({ text, dataCy }) => {
+  return (
+    <b className={'font-style-normal mr-1'} data-cy={dataCy}>
+      {text}
+    </b>
+  )
 }

src/components/editor-page/sidebar/document-info-sidebar-entry.tsx

@@ -16,7 +16,12 @@ export const DocumentInfoSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({
 
   return (
     <Fragment>
-      <SidebarButton hide={hide} className={className} icon={'line-chart'} onClick={() => setShowModal(true)}>
+      <SidebarButton
+        hide={hide}
+        className={className}
+        icon={'line-chart'}
+        onClick={() => setShowModal(true)}
+        data-cy={'sidebar-btn-document-info'}>
         <Trans i18nKey={'editor.modal.documentInfo.title'} />
       </SidebarButton>
       <DocumentInfoModal show={showModal} onHide={() => setShowModal(false)} />