Implement font switcher for RSInput

rsconcept/frontend/src/components/RSInput/RSInput.tsx

@@ -11,6 +11,7 @@ import { forwardRef, useCallback, useMemo, useRef } from 'react';
 import Label from '@/components/ui/Label';
 import { useRSForm } from '@/context/RSFormContext';
 import { useConceptTheme } from '@/context/ThemeContext';
+import { getFontClassName } from '@/models/miscellaneousAPI';
 import { generateAlias, getCstTypePrefix, guessCstType } from '@/models/rsformAPI';
 import { extractGlobals } from '@/models/rslangAPI';
 
@@ -48,7 +49,7 @@ const RSInput = forwardRef<ReactCodeMirrorRef, RSInputProps>(
     },
     ref
   ) => {
-    const { darkMode, colors } = useConceptTheme();
+    const { darkMode, colors, mathFont } = useConceptTheme();
     const { schema } = useRSForm();
 
     const internalRef = useRef<ReactCodeMirrorRef>(null);
@@ -136,7 +137,7 @@ const RSInput = forwardRef<ReactCodeMirrorRef, RSInputProps>(
       <div className={clsx('flex flex-col gap-2', className, cursor)} style={style}>
         <Label text={label} />
         <CodeMirror
-          className='font-math'
+          className={getFontClassName(mathFont)}
           id={id}
           ref={thisRef}
           basicSetup={editorSetup}

rsconcept/frontend/src/context/ThemeContext.tsx

@@ -5,6 +5,7 @@ import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useSt
 
 import Tooltip from '@/components/ui/Tooltip';
 import useLocalStorage from '@/hooks/useLocalStorage';
+import { FontStyle } from '@/models/miscellaneous';
 import { animationDuration } from '@/styling/animations';
 import { darkT, IColorTheme, lightT } from '@/styling/color';
 import { globalIDs } from '@/utils/constants';
@@ -18,6 +19,9 @@ interface IThemeContext {
   darkMode: boolean;
   toggleDarkMode: () => void;
 
+  mathFont: FontStyle;
+  setMathFont: (value: FontStyle) => void;
+
   noNavigationAnimation: boolean;
   noNavigation: boolean;
   toggleNoNavigation: () => void;
@@ -46,6 +50,7 @@ interface ThemeStateProps {
 
 export const ThemeState = ({ children }: ThemeStateProps) => {
   const [darkMode, setDarkMode] = useLocalStorage('darkMode', false);
+  const [mathFont, setMathFont] = useLocalStorage<FontStyle>('editor_font_math', 'math');
   const [colors, setColors] = useState<IColorTheme>(lightT);
   const [noNavigation, setNoNavigation] = useState(false);
   const [noNavigationAnimation, setNoNavigationAnimation] = useState(false);
@@ -106,6 +111,8 @@ export const ThemeState = ({ children }: ThemeStateProps) => {
       value={{
         darkMode,
         colors,
+        mathFont,
+        setMathFont,
         noNavigationAnimation,
         noNavigation,
         noFooter,

rsconcept/frontend/src/models/miscellaneous.ts

@@ -28,6 +28,11 @@ export enum DependencyMode {
  */
 export type GraphColoringScheme = 'none' | 'status' | 'type';
 
+/**
+ * Represents font styles.
+ */
+export type FontStyle = 'controls' | 'main' | 'math' | 'math2';
+
 /**
  * Represents manuals topic.
  */

rsconcept/frontend/src/models/miscellaneousAPI.ts

@@ -1,9 +1,17 @@
 /**
  * Module: API for miscellaneous frontend model types. Future targets for refactoring aimed at extracting modules.
  */
-import { DependencyMode, ILibraryFilter, LibraryFilterStrategy } from './miscellaneous';
+import { DependencyMode, FontStyle, ILibraryFilter, LibraryFilterStrategy } from './miscellaneous';
 import { IConstituenta, IRSForm } from './rsform';
 
+/**
+ * Create style name from  {@link FontStyle}.
+ */
+export function getFontClassName(style: FontStyle): string {
+  console.log(style);
+  return `font-${style}`;
+}
+
 /**
  * Filter list of  {@link ILibraryItem} to a given graph query.
  */

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx

@@ -3,7 +3,7 @@
 import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import { AnimatePresence } from 'framer-motion';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { BiListUl } from 'react-icons/bi';
+import { BiFontFamily, BiListUl } from 'react-icons/bi';
 import { FaRegKeyboard } from 'react-icons/fa6';
 import { RiNodeTree } from 'react-icons/ri';
 import { toast } from 'react-toastify';
@@ -14,6 +14,7 @@ import { RSTextWrapper } from '@/components/RSInput/textEditing';
 import MiniButton from '@/components/ui/MiniButton';
 import Overlay from '@/components/ui/Overlay';
 import { useRSForm } from '@/context/RSFormContext';
+import { useConceptTheme } from '@/context/ThemeContext';
 import DlgShowAST from '@/dialogs/DlgShowAST';
 import useCheckExpression from '@/hooks/useCheckExpression';
 import useLocalStorage from '@/hooks/useLocalStorage';
@@ -56,6 +57,7 @@ function EditorRSExpression({
   ...restProps
 }: EditorRSExpressionProps) {
   const { schema } = useRSForm();
+  const { mathFont, setMathFont } = useConceptTheme();
 
   const [isModified, setIsModified] = useState(false);
   const { parseData, checkExpression, resetParse, loading } = useCheckExpression({ schema });
@@ -145,6 +147,10 @@ function EditorRSExpression({
     });
   }
 
+  function toggleFont() {
+    setMathFont(mathFont === 'math' ? 'math2' : 'math');
+  }
+
   return (
     <>
       <AnimatePresence>
@@ -155,6 +161,11 @@ function EditorRSExpression({
 
       <div>
         <Overlay position='top-[-0.5rem] right-0 flex'>
+          <MiniButton
+            title='Изменить шрифт'
+            icon={<BiFontFamily size='1.25rem' className={mathFont === 'math' ? 'icon-primary' : ''} />}
+            onClick={toggleFont}
+          />
           <MiniButton
             noHover
             title='Отображение специальной клавиатуры'

rsconcept/frontend/src/styling/constants.css

@@ -7,6 +7,7 @@
   --font-ui:  'Geologica', sans-serif;
   --font-main: 'Rubik', 'Fira Code', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
   --font-math: 'Fira Code', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Rubik', 'Segoe UI Symbol', sans-serif;
+  --font-math2: 'Noto Sans Math', 'Noto Sans Symbols 2', 'Rubik', 'Segoe UI Symbol', sans-serif;
 
   /* Light Theme */
   --cl-bg-120:      hsl(000, 000%, 100%);

rsconcept/frontend/src/styling/styles.css

@@ -8,6 +8,9 @@
 @tailwind utilities;
 
 @layer utilities {
+  .font-main {
+    font-family: var(--font-main);
+  }
   .font-controls {
     font-family: var(--font-ui);
     font-weight: 600;
@@ -16,6 +19,9 @@
   .font-math {
     font-family: var(--font-math);
   }
+  .font-math2 {
+    font-family: var(--font-math2);
+  }
 }
 
 @layer components {