feat: add chars & words counts

unit-mesh · Nov 23, 2023 · a0fd60c · a0fd60c
1 parent ac16743
commit a0fd60c
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 12 deletions.
diff --git a/src/components/editor/live-editor.tsx b/src/components/editor/live-editor.tsx
@@ -15,6 +15,8 @@ import { CommandFunctions } from './action/command-functions'
 import { createAiBlock } from './intelli/ai-block-extension'
 import TrackChangeExtension from './diff/track-change-extension'
 import { Sidebar } from './sidebar'
+import { CharacterCount } from "@tiptap/extension-character-count";
+import { abs } from "lib0/math";
 
 const md = new MarkdownIt()
 
@@ -46,6 +48,7 @@ const extensions = [
 		]
 	}),
 	createAiBlock(),
+	CharacterCount.configure({}),
 	Color.configure({ types: [TextStyle.name, ListItem.name] }),
 	// @ts-ignore
 	TextStyle.configure({ types: [ListItem.name] }),
@@ -62,7 +65,7 @@ Hi there, 3B is editor for Unit Mesh architecture paradigms, the next-gen softwa
 
 ## Inline AI
 
-Chinese text for testing grammar and spellings, select long text to see the menu.
+Testing grammar and spellings, select long text to see the menu.
 
 永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹；又有清流激湍，映带左右，引以为流觞曲水，
 列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。
@@ -101,6 +104,14 @@ const LiveEditor = () => {
 					{editor && <MenuBar editor={editor}/>}
 					<EditorContent editor={editor}/>
 					{editor && <MenuBubble editor={editor}/>}
+
+					{editor && <div className="character-count">
+            <span>{abs(editor.state.selection.$from.pos - editor.state.selection.$to.pos)} selected</span>
+            &nbsp;&nbsp;
+            <span>{editor.storage.characterCount.characters()} characters</span>
+            &nbsp;&nbsp;
+            <span>{editor.storage.characterCount.words()} words</span>
+          </div>}
 				</div>
 			</div>
 

diff --git a/src/components/editor/menu-bar.tsx b/src/components/editor/menu-bar.tsx
@@ -125,7 +125,7 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
       >
         <DividerHorizontalIcon/>
       </ToggleGroup.Item>
-
+      <div className="empty-separator" />
       <MenuAiDropdown editor={editor} />
     </ToggleGroup.Root>
   )

diff --git a/src/components/settings.tsx b/src/components/settings.tsx
@@ -55,6 +55,7 @@ export const Settings = () => {
 
 const SettingField = ({ label, children }: any) => (
 	<textarea id="message"
+	          rows={12}
 	          className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
 	          placeholder="Write your thoughts here..."></textarea>
 )
diff --git a/src/pages/editor.css b/src/pages/editor.css
@@ -63,6 +63,9 @@
     display: flex;
     border-radius: 4px;
     justify-content: center;
+    width: fit-content;
+    margin: 0 auto;
+    box-shadow: 0 2px 2px var(--black-a7);
 }
 
 .ToggleGroupItem {
@@ -77,7 +80,6 @@
     align-items: center;
     justify-content: center;
     margin-left: 1px;
-    box-shadow: 0 2px 2px var(--black-a7);
 }
 
 .ToggleGroupItem:first-child {

diff --git a/styles/global.css b/styles/global.css
@@ -463,8 +463,8 @@ input {
     left: 50%;
     transform: translate(-50%, -50%);
     width: 90vw;
-    max-width: 450px;
-    max-height: 85vh;
+    max-width: 650px;
+    max-height: 125vh;
     padding: 25px;
     animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -649,7 +649,6 @@ input {
 
 .TabsTrigger:focus {
     position: relative;
-    box-shadow: 0 0 0 2px black;
 }
 
 .TabsContent {
@@ -661,10 +660,6 @@ input {
     outline: none;
 }
 
-.TabsContent:focus {
-    box-shadow: 0 0 0 2px black;
-}
-
 .Text {
     margin-top: 0;
     margin-bottom: 20px;
@@ -730,16 +725,34 @@ input {
 }
 
 .editor-section {
-    margin: 1rem auto;
+    margin: 0.5rem auto;
     padding: 1rem;
     flex-basis: 45%;
     border: 1px solid #0070f3;
-    border-radius: 10px;
     width: 800px;
     height: 100%;
     min-height: 80vh;
 }
 
+.character-count {
+/*    shoulde display in right with flex*/
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    font-size: 0.8rem;
+    color: var(--mauve-11);
+}
+
+.character-count div {
+    display: inline-block;
+}
+
+.empty-separator {
+    width: 3rem;
+}
+
 .scene-text {
     font-size: 1.2rem;
     line-height: 1.5;