From 7353e92f3a4f0937a148aef30af735b9f69afae4 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 11 Jan 2024 12:21:41 +0200
Subject: [PATCH] add current selection word count
---
.../components/EditorInfoTool.js | 39 +++++++++++++------
1 file changed, 27 insertions(+), 12 deletions(-)
diff --git a/wax-prosemirror-services/src/BottomInfoService/CounterInfoService/components/EditorInfoTool.js b/wax-prosemirror-services/src/BottomInfoService/CounterInfoService/components/EditorInfoTool.js
index cba709bfe..6ef18f0c9 100644
--- a/wax-prosemirror-services/src/BottomInfoService/CounterInfoService/components/EditorInfoTool.js
+++ b/wax-prosemirror-services/src/BottomInfoService/CounterInfoService/components/EditorInfoTool.js
@@ -1,7 +1,12 @@
-import React, { useMemo, useState, useRef } from 'react';
+import React, { useMemo, useState, useRef, useContext, useEffect } from 'react';
+
import styled from 'styled-components';
import { grid, override } from '@pubsweet/ui-toolkit';
-import { MenuButton, useOnClickOutside } from 'wax-prosemirror-core';
+import {
+ MenuButton,
+ useOnClickOutside,
+ WaxContext,
+} from 'wax-prosemirror-core';
import { isEmpty } from 'lodash';
import { useTranslation } from 'react-i18next';
@@ -81,17 +86,25 @@ const Counter = styled.div`
`;
const EditorInfoTool = ({ view: { state }, item }) => {
+ const { activeView } = useContext(WaxContext);
const { t, i18n } = useTranslation();
const ref = useRef();
+ const [currentWordCount, setCurrentWordCount] = useState(0);
const [isOpen, setIsOpen] = useState(false);
useOnClickOutside(ref, () => setIsOpen(false));
- const infoDropDownOptions = useMemo(() => {
- if (!isOpen) return [];
+ useEffect(() => {
+ const { from, to } = activeView.state.selection;
+ const currentSelection = activeView.state.doc.textBetween(from, to);
+ setCurrentWordCount(
+ currentSelection.split(' ').filter(word => word !== '').length,
+ );
+ }, [activeView.state.selection]);
- const docText = state.doc.textBetween(
+ const infoDropDownOptions = () => {
+ const docText = activeView.state.doc.textBetween(
0,
- state.doc.content.size,
+ activeView.state.doc.content.size,
undefined,
' ',
);
@@ -172,7 +185,7 @@ const EditorInfoTool = ({ view: { state }, item }) => {
}`,
},
];
- }, [state]);
+ };
const MenuButtonComponent = useMemo(
() => (
@@ -180,12 +193,14 @@ const EditorInfoTool = ({ view: { state }, item }) => {
<MenuButton
active={isOpen}
disabled={false}
- label={
+ label={`${currentWordCount} ${
!isEmpty(i18n) && i18n.exists(`Wax.Counters.Word`)
? t(`Wax.Counters.Word`)
: 'Word'
- }
- onMouseDown={() => {
+ }${currentWordCount > 1 ? 's' : ''}
+`}
+ onMouseDown={e => {
+ e.preventDefault();
setIsOpen(!isOpen);
}}
title={item.title}
@@ -198,7 +213,7 @@ const EditorInfoTool = ({ view: { state }, item }) => {
item={item}
view={state}
>
- {infoDropDownOptions.map(option => (
+ {infoDropDownOptions().map(option => (
<Counter key={option.name} title={option.name}>
<span>{option.name}</span>
</Counter>
@@ -208,7 +223,7 @@ const EditorInfoTool = ({ view: { state }, item }) => {
)}
</Wrapper>
),
- [isOpen],
+ [currentWordCount, isOpen],
);
return MenuButtonComponent;
--
GitLab