feat: integrate custom CSS support in SelectionAssistant

src/renderer/src/windows/selection/action/SelectionActionApp.tsx

@@ -15,7 +15,7 @@ import ActionGeneral from './components/ActionGeneral'
 import ActionTranslate from './components/ActionTranslate'
 
 const SelectionActionApp: FC = () => {
-  const { language } = useSettings()
+  const { language, customCss } = useSettings()
 
   const { t } = useTranslation()
 
@@ -61,6 +61,20 @@ const SelectionActionApp: FC = () => {
     i18n.changeLanguage(language || navigator.language || defaultLanguage)
   }, [language])
 
+  useEffect(() => {
+    let customCssElement = document.getElementById('user-defined-custom-css') as HTMLStyleElement
+    if (customCssElement) {
+      customCssElement.remove()
+    }
+
+    if (customCss) {
+      customCssElement = document.createElement('style')
+      customCssElement.id = 'user-defined-custom-css'
+      customCssElement.textContent = customCss
+      document.head.appendChild(customCssElement)
+    }
+  }, [customCss])
+
   useEffect(() => {
     const contentEl = contentElementRef.current
     if (contentEl) {

src/renderer/src/windows/selection/toolbar/SelectionToolbar.tsx

@@ -95,7 +95,7 @@ const ActionIcons: FC<{
  * demo is used in the settings page
  */
 const SelectionToolbar: FC<{ demo?: boolean }> = ({ demo = false }) => {
-  const { language } = useSettings()
+  const { language, customCss } = useSettings()
   const { isCompact, actionItems } = useSelectionAssistant()
   const [animateKey, setAnimateKey] = useState(0)
   const [copyIconStatus, setCopyIconStatus] = useState<'normal' | 'success' | 'fail'>('normal')
@@ -150,6 +150,20 @@ const SelectionToolbar: FC<{ demo?: boolean }> = ({ demo = false }) => {
     i18n.changeLanguage(language || navigator.language || defaultLanguage)
   }, [language])
 
+  useEffect(() => {
+    let customCssElement = document.getElementById('user-defined-custom-css') as HTMLStyleElement
+    if (customCssElement) {
+      customCssElement.remove()
+    }
+
+    if (customCss) {
+      customCssElement = document.createElement('style')
+      customCssElement.id = 'user-defined-custom-css'
+      customCssElement.textContent = customCss
+      document.head.appendChild(customCssElement)
+    }
+  }, [customCss])
+
   const onHideCleanUp = () => {
     setCopyIconStatus('normal')
     setCopyIconAnimation('none')