merged

package-lock.json

@@ -9,6 +9,8 @@
       "version": "3.0.94",
       "license": "GPL-3.0-only",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
         "@heroicons/react": "^2.0.17",
         "@rollup/plugin-commonjs": "^28.0.3",
         "@tanstack/react-query": "^5.17.8",
@@ -993,6 +995,39 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
+      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@gerrit0/mini-shiki": {
       "version": "1.27.2",
       "resolved": "https://registry.npmjs.org/@gerrit0/mini-shiki/-/mini-shiki-1.27.2.tgz",

package.json

@@ -92,6 +92,8 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@heroicons/react": "^2.0.17",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@tanstack/react-query": "^5.17.8",

src/Components/Input/TextAreaInput.tsx

@@ -34,6 +34,7 @@ export function TextAreaInput({
 }: TextAreaProps) {
   const ref = useRef<HTMLDivElement>(null)
   const [inputValue, setInputValue] = useState<string>(defaultValue)
+  const [showToolbar, setShowToolbar] = useState<boolean>(false)
 
   const containerRef = useRef<HTMLDivElement>(null)
 
@@ -58,6 +59,17 @@ export function TextAreaInput({
     }
   }
 
+  const handleFocus = () => {
+    setShowToolbar(true)
+  }
+
+  /*
+  // Collides with fullscreen mode
+  const handleBlur = () => {
+    setShowToolbar(false)
+  }
+  */
+
   const options = useMemo(() => {
     return {
       status: false,
@@ -65,6 +77,7 @@ export function TextAreaInput({
       minHeight: size === 'small' ? '100%' : '100%',
       maxHeight: size === 'small' ? '30px' : containerHeight,
       forceSync: true,
+      autoDownloadFontAwesome: true,
       /*
           autoDownloadFontAwesome?: boolean;
           autofocus?: boolean;
@@ -150,8 +163,10 @@ export function TextAreaInput({
         value={inputValue}
         placeholder={placeholder ?? ''}
         onChange={handleChange}
+        onFocus={handleFocus}
+        // onBlur={handleBlur}
         options={options}
-        className={`${inputStyle ?? ''}`}
+        className={`${inputStyle ?? ''} ${showToolbar ? '' : 'hide-toolbar'}`}
       />
     </div>
   )

src/assets/css/easymde.css

@@ -1,41 +1,48 @@
 @import 'tailwindcss' prefix(tw);
 
-@import 'easymde/dist/easymde.min.css';
-
 @layer easymde {
+  @import 'easymde/dist/easymde.min.css';
+
   .EasyMDEContainer h1 {
     @apply tw:text-3xl;
     @apply tw:font-bold;
   }
+
   .EasyMDEContainer h2 {
     @apply tw:text-2xl;
     @apply tw:font-bold;
   }
+
   .EasyMDEContainer h3 {
     @apply tw:text-xl;
     @apply tw:font-bold;
   }
+
   .EasyMDEContainer h4 {
     @apply tw:text-lg;
     @apply tw:font-semibold;
   }
+
   .EasyMDEContainer h5 {
     @apply tw:text-base;
     @apply tw:font-semibold;
   }
+
   .EasyMDEContainer h6 {
     @apply tw:text-sm;
     @apply tw:font-semibold;
   }
+
   .EasyMDEContainer a {
     @apply tw:text-blue-600 tw:underline;
   }
 
-  .EasyMDEContainer .fullscreen{
+  .EasyMDEContainer .fullscreen {
     background: var(--color-base-100) !important;
   }
 
-  .EasyMDEContainer button.active, button:hover{
+  .EasyMDEContainer button.active,
+  button:hover {
     background: var(--color-base-100) !important;
   }
 
@@ -49,4 +56,8 @@
     background-color: var(--color-base-100) !important;
     color: var(--color-base-content) !important;
   }
-}
+
+  .hide-toolbar .EasyMDEContainer .editor-toolbar {
+    display: none;
+  }
+}

src/css.tsx

@@ -16,3 +16,36 @@ import '#assets/css/color-picker.css'
 
 // MD Editor
 import '#assets/css/easymde.css'
+
+import { dom, library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faBold,
+  faItalic,
+  faHeading,
+  faQuoteLeft,
+  faListUl,
+  faListOl,
+  faLink,
+  faImage,
+  faEye,
+  faColumns,
+  faArrowsAlt,
+  faQuestionCircle,
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add([
+  faBold,
+  faItalic,
+  faHeading,
+  faQuoteLeft,
+  faListUl,
+  faListOl,
+  faLink,
+  faImage,
+  faEye,
+  faColumns,
+  faArrowsAlt,
+  faQuestionCircle,
+])
+
+dom.insertCss()