v0.12

.github/workflows/create-release.yml

@@ -1,5 +1,4 @@
 name: Docker CI
-
 on:
   push:
     branches:
@@ -8,6 +7,7 @@ on:
 jobs:
   docker:
     runs-on: ubuntu-latest
+
     steps:
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
@@ -29,6 +29,7 @@ jobs:
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Build and push
+        id: build_push
         uses: docker/build-push-action@v6
         with:
           push: true
@@ -53,14 +54,8 @@ jobs:
           release_name: Release v${{ steps.extract_version.outputs.version }}
           body: |
             ### Changelog
-
             ${{ steps.extract_changelog.outputs.changelog }}
 
-            ### Build Results
-            ${{ steps.build_push.outputs.digest }}
-          draft: false
-          prerelease: false
-
       - name: Create GitHub Tag
         run: |
           git config --global user.name 'github-actions[bot]'

README.md

@@ -52,6 +52,8 @@ Here's a sample docker compose:
       LIBRETRANSLATE_LANGUAGES=["pl","en"] # optional
       # To limit language options for text check provide an array of long tags (ISO 639/ISO-3166) also known as language-Region code.
       LANGUAGE_TOOL_LANGUAGES=["pl-PL","en-GB"] # optional
+      # To disable "add word" to dicationary
+      DISABLE_DICTIONARY=true # optional
     ports:
       - 80:80
     image: kweg/omnipoly:latest

changelog.md

@@ -1,3 +1,9 @@
+### 0.12.0
+
+- Introduced a new environment variable `DISABLE_DICTIONARY`. When this variable is set to true, the functionality for adding words to the dictionary is disabled.
+- **Enhanced Text Interaction:** In the language tool, highlighted text segments are now interactive. Clicking on these segments opens sidebar suggestion.
+- **Improved Editing Experience:** During the editing process in the language tool, the highlight automatically disappears as it becomes invalid once modifications have been initiated.
+
 ### 0.11.0 
 
 - chore: Added nightly builds on develop branch

index.js

@@ -34,6 +34,7 @@ const LIBRETRANSLATE_LANGUAGES = getLanguages(
 const LANGUAGE_TOOL_LANGUAGES = getLanguages(
   process.env.LANGUAGE_TOOL_LANGUAGES
 );
+const DISABLE_DICTIONARY = process.env.DISABLE_DICTIONARY === 'true'
 
 const maskString = (str) => {
   if (!str || str.length <= 3) {
@@ -55,6 +56,7 @@ THEME: ${THEME}
 API_KEY: ${maskString(LIBRETRANSLATE_API_KEY)} // masked
 LANGUAGE_TOOL_LANGUAGES: ${JSON.stringify(LANGUAGE_TOOL_LANGUAGES)}
 LIBRETRANSLATE_LANGUAGES: ${JSON.stringify(LIBRETRANSLATE_LANGUAGES)}
+DICTIONARY_DISABLED: ${!!DISABLE_DICTIONARY}
 DEV_MODE: ${!!DEV}
 ========================
 `);
@@ -120,6 +122,7 @@ app.get("/api/status", (req, res) => {
     OLLAMA,
     OLLAMA_MODEL,
     THEME,
+    DISABLE_DICTIONARY
   });
 });
 
@@ -173,10 +176,16 @@ app.post("/api/languagetool/check", (req, res) => {
     };
     return filtered;
   };
-  handleFormDataPost(`${LANGUAGE_TOOL}/v2/check`, req, res, filter);
+
+  const targetFilter = DISABLE_DICTIONARY ? filter : false;
+  handleFormDataPost(`${LANGUAGE_TOOL}/v2/check`, req, res, targetFilter);
 });
 
 app.post("/api/languagetool/add", (req, res) => {
+  if (DISABLE_DICTIONARY) {
+    res.status(403).send()
+    return;
+  } 
   try {
     addWord(`${req.body.word}`.toLowerCase());
     console.log("added:", `${req.body.word}`.toLowerCase());

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sth-libretranslate",
   "private": true,
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "scripts": {
     "dev": "concurrently \"npm run node\" \"vite\"",

src/common/Footer.tsx

@@ -16,7 +16,7 @@ export const Footer = () => {
           <p>
             {`frontend by: `}
             <Link
-              href="https://github.com/sth-io"
+              href="https://github.com/kWeglinski"
               target="_blank"
               rel="noopener noreferrer"
             >

src/common/useDebounce.tsx

@@ -1,17 +1,20 @@
 import { useState, useEffect } from "react";
 
-export const useDebounce = (value: unknown, milliSeconds: number) => {
+export const useDebounce = (value: unknown, milliSeconds: number, cb?: unknown) => {
   const [debouncedValue, setDebouncedValue] = useState(value);
 
   useEffect(() => {
     const handler = setTimeout(() => {
       setDebouncedValue(value);
+      if (typeof cb === 'function') {
+        cb();
+      }
     }, milliSeconds);
 
     return () => {
       clearTimeout(handler);
     };
-  }, [value, milliSeconds]);
+  }, [value, milliSeconds, cb]);
 
   return debouncedValue;
 };

src/languagecheck/App.tsx

@@ -34,13 +34,13 @@ export const SelectLanguage = ({ label }: { label?: string }) => {
   );
 };
 
-
 function App() {
   useInitialiseGrammar();
   const { question, language } = useGrammar();
-  const q = useDebounce(question, 1000) as string;
+  const q = useDebounce(question, 1000, () => actions.setTouched(false)) as string;
 
   const check = useCallback((text: string, language: LangChoice) => {
+    console.log("check");
     if (!text) {
       return;
     }

src/languagecheck/Resolution.tsx

@@ -16,6 +16,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import { API, Match } from "./API";
 import { actions, useGrammar } from "../store/grammar";
+import { useSystemStatus } from "../store/status";
 
 type Fix = (start: number, length: number, value: string, idx: number) => void;
 
@@ -39,6 +40,7 @@ const DisplayMatch = ({
   idx: number;
   original: string;
 }) => {
+  const { disableDictionary } = useSystemStatus()
   const fixPos = (value: string) => {
     const nCount =
       original.substring(0, offset).match(/\\[ntrvf]/g)?.length ?? 0;
@@ -75,7 +77,7 @@ const DisplayMatch = ({
             sx={{ marginRight: 1, marginBottom: 0.5, marginTop: 0.5 }}
           />
         ))}
-        {rule.category.id === "TYPOS" && (
+        {!disableDictionary && rule.category.id === "TYPOS" && (
           <>
             <Divider sx={{ mt: 2, mb: 2 }} />
             <Stack sx={{ justifyContent: "center", alignItems: "center" }}>

src/languagecheck/Text.tsx

@@ -6,7 +6,10 @@ import { IconButton, Tooltip } from "@mui/material";
 import { copyToClipboard } from "../common/utils";
 
 const HighlightText = () => {
-  const { selection, question: text, answer } = useGrammar();
+  const { selection, question: text, answer, touched, loading } = useGrammar();
+  if (loading || touched) {
+    return;
+  }
   const highlights = answer?.matches || [];
   let lastIndex = 0;
   const renderedHighlights = [];
@@ -23,15 +26,35 @@ const HighlightText = () => {
 
     // Wrap the highlighted segment with a <span> tag
     const highlightedText = (
-      <span
-        key={i}
-        style={{
-          background: selection === i ? "rgba(255,0,0,1)" : "rgba(255,0,0,0.5",
-        }}
-        onClick={() => actions.setSelection(i)}
-      >
-        {text.substring(nOffset + offset, nOffset + offset + length)}
-      </span>
+      <>
+        <span
+          key={i}
+          style={{
+            position: "relative",
+          }}
+          onClick={() => actions.setSelection(i)}
+        >
+          <div
+            key={i}
+            style={{
+              background:
+                selection === i ? "rgba(255,0,0,1)" : "rgba(255,0,0,0.5",
+              position: "absolute",
+              zIndex: selection === i ? 0 : 900,
+              color: "#fff",
+              left: 0,
+              top: 0,
+              borderRadius: "4px",
+              cursor: 'pointer'
+            }}
+            contentEditable="false"
+            onClick={() => actions.setSelection(i)}
+          >
+            {text.substring(nOffset + offset, nOffset + offset + length)}
+          </div>
+          {text.substring(nOffset + offset, nOffset + offset + length)}
+        </span>
+      </>
     );
     renderedHighlights.push(highlightedText);
 

src/store/grammar.tsx

@@ -29,6 +29,7 @@ type Grammar = {
   selection: number | null;
   answer: LanguageToolResponse | null;
   error: string;
+  touched: boolean;
 };
 
 export const useGrammar = create<Grammar>(() => ({
@@ -39,13 +40,17 @@ export const useGrammar = create<Grammar>(() => ({
   selection: null,
   answer: null,
   error: "",
+  touched: false,
 }));
 
 export const actions = {
   setQuestion: (text: Grammar["question"]) => {
     const standarisedQuestion = text.replace(/\t/g, "    ");
     localStorage.setItem("question", standarisedQuestion);
-    useGrammar.setState({ question: standarisedQuestion });
+    useGrammar.setState({ question: standarisedQuestion, touched: true });
+  },
+  setTouched: (touched: Grammar["touched"]) => {
+    useGrammar.setState({ touched });
   },
   setLoading: (loading: Grammar["loading"]) => {
     useGrammar.setState({ loading });
@@ -56,6 +61,7 @@ export const actions = {
   setAnswer: (value: Grammar["answer"]) => {
     useGrammar.setState({
       answer: value,
+      touched: false,
       loading: false,
       ...(value ? { error: "" } : {}),
     });

src/store/status.tsx

@@ -12,6 +12,7 @@ export const useInitialiseSystemStatus = () => {
           languageTool: data.LANGUAGE_TOOL,
           ollama: data.OLLAMA,
           theme: data.THEME,
+          disableDictionary: data.DISABLE_DICTIONARY
         });
       });
   }, []);
@@ -31,4 +32,5 @@ export const useSystemStatus = create(() => ({
   languageTool: false,
   ollama: false,
   theme: "dark" as SystemStatus["theme"],
+  disableDictionary: false,
 }));