clean up

Author: shahsagarm

components/ContentEditor/ContentEditor.tsx

@@ -7,8 +7,8 @@ import StarterKit from "@tiptap/starter-kit";
 
 import LoadingDots from "../LoadingDots";
 import {
-  LanguageTool,
-  LanguageToolHelpingWords,
+  GramrFixr,
+  GrammarCheckerOperations,
 } from "./extensions/GrammarChecker";
 import { Match, Range } from "./extensions/GrammarChecker.types";
 
@@ -22,8 +22,8 @@ const ContentEditor = () => {
   const editor = useEditor({
     extensions: [
       StarterKit,
-      LanguageTool.configure({
-        automaticMode: true,
+      GramrFixr.configure({
+        automaticMode: false,
         documentId: "gramrfixr-v1",
         apiUrl: "https://api.languagetool.org/v2/check", // replace this with your actual url
       }),
@@ -42,7 +42,7 @@ const ContentEditor = () => {
       setTimeout(() => updateMatch(editor as any));
     },
     onTransaction({ transaction: tr }) {
-      if (tr.getMeta(LanguageToolHelpingWords.LoadingTransactionName))
+      if (tr.getMeta(GrammarCheckerOperations.LoadingTransactionName))
         loading.current = true;
       else loading.current = false;
     },
@@ -86,8 +86,8 @@ const ContentEditor = () => {
 
   // Grammar checking extension
   const shouldShow = (editor: Editor) => {
-    const match = editor.storage.languagetool.match;
-    const matchRange = editor.storage.languagetool.matchRange;
+    const match = editor.storage.gramrfixr.match;
+    const matchRange = editor.storage.gramrfixr.matchRange;
     const { from, to } = editor.state.selection;
     return (
       !!match && !!matchRange && matchRange.from <= from && to <= matchRange.to
@@ -97,8 +97,8 @@ const ContentEditor = () => {
   const matchRange = useRef<Range | null>(null);
   const loading = useRef(false);
   const updateMatch = (editor: Editor) => {
-    match.current = editor.storage.languagetool.match;
-    matchRange.current = editor.storage.languagetool.matchRange;
+    match.current = editor.storage.gramrfixr.match;
+    matchRange.current = editor.storage.gramrfixr.matchRange;
   };
 
   const replacements = match.current?.replacements || [];

components/ContentEditor/extensions/GrammarChecker.ts

@@ -6,9 +6,9 @@ import { Plugin, PluginKey, Transaction } from "prosemirror-state";
 import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
 
 import {
-  LanguageToolOptions,
-  LanguageToolStorage,
-  LanguageToolResponse,
+  GramrFixrOptions,
+  GramrFixrStorage,
+  GramrFixrResponse,
   Match,
   TextNodesWithPosition,
   Range,
@@ -44,8 +44,9 @@ let match: Match | undefined | null = undefined;
 let matchRange: Range | undefined | null;
 let proofReadInitially = false;
 let isLanguageToolActive = true;
+let lastOriginalFrom = 0;
 
-const db = new Dexie("LanguageToolIgnoredSuggestions");
+const db = new Dexie("GramrFixrIgnoredSuggestions");
 
 db.version(1).stores({
   ignoredWords: `
@@ -55,8 +56,8 @@ db.version(1).stores({
   `,
 });
 
-export enum LanguageToolHelpingWords {
-  LanguageToolTransactionName = "languageToolTransaction",
+export enum GrammarCheckerOperations {
+  MainTransactionName = "grammarCheckerTransaction",
   MatchUpdatedTransactionName = "matchUpdated",
   MatchRangeUpdatedTransactionName = "matchRangeUpdated",
   LoadingTransactionName = "languageToolLoading",
@@ -72,8 +73,8 @@ const updateMatchAndRange = (m?: Match, range?: Range) => {
   else matchRange = undefined;
 
   const tr = editorView.state.tr;
-  tr.setMeta(LanguageToolHelpingWords.MatchUpdatedTransactionName, true);
-  tr.setMeta(LanguageToolHelpingWords.MatchRangeUpdatedTransactionName, true);
+  tr.setMeta(GrammarCheckerOperations.MatchUpdatedTransactionName, true);
+  tr.setMeta(GrammarCheckerOperations.MatchRangeUpdatedTransactionName, true);
 
   editorView.dispatch(tr);
 };
@@ -142,7 +143,8 @@ export function changedDescendants(
 
 const gimmeDecoration = (from: number, to: number, match: Match) =>
   Decoration.inline(from, to, {
-    class: `lt lt-${match.rule.issueType}`,
+    // class: `lt lt-${match.rule.issueType}`,
+    class: "lt lt-misspelling",
     nodeName: "span",
     match: JSON.stringify({ match, from, to }),
   });
@@ -163,7 +165,7 @@ const getMatchAndSetDecorations = async (
     body: `text=${encodeURIComponent(text)}&language=en-US&enabledOnly=false`,
   };
 
-  const ltRes: LanguageToolResponse = await (
+  const ltRes: GramrFixrResponse = await (
     await fetch(apiUrl, postOptions)
   ).json();
 
@@ -200,7 +202,7 @@ const getMatchAndSetDecorations = async (
   if (editorView)
     dispatch(
       editorView.state.tr.setMeta(
-        LanguageToolHelpingWords.LanguageToolTransactionName,
+        GrammarCheckerOperations.MainTransactionName,
         true
       )
     );
@@ -213,8 +215,6 @@ const debouncedGetMatchAndSetDecorations = debounce(
   300
 );
 
-let lastOriginalFrom = 0;
-
 const onNodeChanged = (doc: PMNode, text: string, originalFrom: number) => {
   if (originalFrom !== lastOriginalFrom)
     getMatchAndSetDecorations(doc, text, originalFrom);
@@ -308,15 +308,15 @@ const proofreadAndDecorateWholeDoc = async (doc: PMNode, nodePos = 0) => {
   if (editorView)
     dispatch(
       editorView.state.tr.setMeta(
-        LanguageToolHelpingWords.LoadingTransactionName,
+        GrammarCheckerOperations.LoadingTransactionName,
         true
       )
     );
   Promise.all(requests).then(() => {
     if (editorView)
       dispatch(
         editorView.state.tr.setMeta(
-          LanguageToolHelpingWords.LoadingTransactionName,
+          GrammarCheckerOperations.LoadingTransactionName,
           false
         )
       );
@@ -330,16 +330,12 @@ const debouncedProofreadAndDecorate = debounce(
   500
 );
 
-export const LanguageTool = Extension.create<
-  LanguageToolOptions,
-  LanguageToolStorage
->({
-  name: "languagetool",
+export const GramrFixr = Extension.create<GramrFixrOptions, GramrFixrStorage>({
+  name: "gramrfixr",
 
   addOptions() {
     return {
-      language: "auto",
-      apiUrl: process?.env?.VUE_APP_LANGUAGE_TOOL_URL + "check",
+      apiUrl: "/api/grammar",
       automaticMode: true,
       documentId: undefined,
     };
@@ -405,11 +401,11 @@ export const LanguageTool = Extension.create<
           dispatch(
             tr
               .setMeta(
-                LanguageToolHelpingWords.MatchRangeUpdatedTransactionName,
+                GrammarCheckerOperations.MatchRangeUpdatedTransactionName,
                 true
               )
               .setMeta(
-                LanguageToolHelpingWords.MatchUpdatedTransactionName,
+                GrammarCheckerOperations.MatchUpdatedTransactionName,
                 true
               )
           );
@@ -441,7 +437,7 @@ export const LanguageTool = Extension.create<
 
     return [
       new Plugin({
-        key: new PluginKey("languagetoolPlugin"),
+        key: new PluginKey("gramrfixrPlugin"),
         props: {
           decorations(state) {
             return this.getState(state);
@@ -475,14 +471,14 @@ export const LanguageTool = Extension.create<
             if (!isLanguageToolActive) return DecorationSet.empty;
 
             const matchUpdated = tr.getMeta(
-              LanguageToolHelpingWords.MatchUpdatedTransactionName
+              GrammarCheckerOperations.MatchUpdatedTransactionName
             );
             const matchRangeUpdated = tr.getMeta(
-              LanguageToolHelpingWords.MatchRangeUpdatedTransactionName
+              GrammarCheckerOperations.MatchRangeUpdatedTransactionName
             );
 
             const loading = tr.getMeta(
-              LanguageToolHelpingWords.LoadingTransactionName
+              GrammarCheckerOperations.LoadingTransactionName
             );
 
             if (loading) this.storage.loading = true;
@@ -493,7 +489,7 @@ export const LanguageTool = Extension.create<
             if (matchRangeUpdated) this.storage.matchRange = matchRange;
 
             const languageToolDecorations = tr.getMeta(
-              LanguageToolHelpingWords.LanguageToolTransactionName
+              GrammarCheckerOperations.MainTransactionName
             );
 
             if (languageToolDecorations) return decorationSet;

components/ContentEditor/extensions/GrammarChecker.types.ts

@@ -2,21 +2,14 @@ interface Replacement {
   value: string;
 }
 
-interface Rule {
-  id: string;
-  description: string;
-  issueType: string;
-}
-
 export interface Match {
   message: string;
   replacements: Replacement[];
   offset: number;
   length: number;
-  rule: Rule;
 }
 
-export interface LanguageToolResponse {
+export interface GramrFixrResponse {
   matches: Match[];
 }
 
@@ -26,8 +19,7 @@ export interface TextNodesWithPosition {
   to: number;
 }
 
-export interface LanguageToolOptions {
-  language: string;
+export interface GramrFixrOptions {
   apiUrl: string;
   automaticMode: boolean;
   documentId: string | number | undefined;
@@ -38,7 +30,7 @@ export interface Range {
   to: number;
 }
 
-export interface LanguageToolStorage {
+export interface GramrFixrStorage {
   match?: Match | undefined | null;
   loading?: boolean;
   matchRange?: Range | undefined | null;

components/Footer.tsx

@@ -2,8 +2,8 @@ import Link from "next/link";
 
 export default function Footer() {
   return (
-    <footer className="flex w-full flex-col items-center justify-between space-y-3 border-t py-4 text-center sm:mb-4 sm:flex-row">
-      <div>
+    <footer className="flex w-full flex-col items-center justify-between border-t py-4 text-center sm:mb-4 sm:flex-row">
+      <p>
         Powered by{" "}
         <a
           href="https://openai.com/blog/chatgpt"
@@ -22,8 +22,8 @@ export default function Footer() {
         >
           Vercel Edge Functions.
         </a>
-      </div>
-      <div className="flex space-x-4 pb-4 sm:pb-0">
+      </p>
+      <div className="mt-4 flex items-center gap-2 sm:mt-0">
         <Link
           href="https://twitter.com/gyurisc"
           className="group"

styles/globals.css

@@ -11,7 +11,7 @@
   background: rgba(232, 106, 105, 0.2);
 }
 
-.ProseMirror .lt-style {
+/* .ProseMirror .lt-style {
   border-bottom: 2px solid #9d8eff;
 }
 
@@ -27,7 +27,7 @@
 .ProseMirror .lt-typographical:hover,
 .ProseMirror .lt-grammar:hover {
   background: rgba(238, 181, 92, 0.2) !important;
-}
+} */
 
 .ProseMirror .lt-misspelling {
   border-bottom: 2px solid #e86a69;