feat: render inline style (#93)

* feat: render inline style Signed-off-by: Innei <[email protected]> * chore: update Signed-off-by: Innei <[email protected]> * fix: adjust appearance items Signed-off-by: Innei <[email protected]> * fix: z-index Signed-off-by: Innei <[email protected]> --------- Signed-off-by: Innei <[email protected]>
RSSNext · Jun 27, 2024 · 11d43a4 · 11d43a4
1 parent bbde62f
commit 11d43a4
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 28 deletions.
diff --git a/src/renderer/src/components/ui/modal/stacked/modal.tsx b/src/renderer/src/components/ui/modal/stacked/modal.tsx
@@ -75,7 +75,7 @@ export const ModalInternal: Component<{
 
     draggable = false,
   } = item
-  const zIndexStyle = useMemo(() => ({ zIndex: MODAL_STACK_Z_INDEX + index }), [index])
+  const zIndexStyle = useMemo(() => ({ zIndex: MODAL_STACK_Z_INDEX + index + 1 }), [index])
   const dismiss = useCallback(
     (e: SyntheticEvent) => {
       e.stopPropagation()

diff --git a/src/renderer/src/lib/parse-html.ts b/src/renderer/src/lib/parse-html.ts
@@ -5,22 +5,33 @@ import { createElement } from "react"
 import { Fragment, jsx, jsxs } from "react/jsx-runtime"
 import rehypeInferDescriptionMeta from "rehype-infer-description-meta"
 import rehypeParse from "rehype-parse"
-import rehypeSanitize from "rehype-sanitize"
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize"
 import rehypeStringify from "rehype-stringify"
 import { unified } from "unified"
 import { visit } from "unist-util-visit"
 import { VFile } from "vfile"
 
-export const parseHtml = async (content: string) => {
+export const parseHtml = async (content: string, options?: {
+  renderInlineStyle: boolean
+}) => {
   const file = new VFile(content)
+  const { renderInlineStyle = false } = options || {}
 
   const pipeline = await unified()
-    .use(rehypeParse)
-    .use(rehypeSanitize)
+    .use(rehypeParse, { fragment: true })
+    .use(rehypeSanitize, {
+      ...defaultSchema,
+      attributes: {
+        ...defaultSchema.attributes,
+
+        "*": renderInlineStyle ? [...defaultSchema.attributes!["*"], "style"] : defaultSchema.attributes!["*"],
+      },
+    })
     .use(rehypeInferDescriptionMeta)
     .use(rehypeStringify)
 
   const tree = pipeline.parse(content)
+
   const hastTree = pipeline.runSync(tree, file)
 
   const metadata: {

diff --git a/src/renderer/src/modules/entry-content/index.tsx b/src/renderer/src/modules/entry-content/index.tsx
@@ -43,18 +43,22 @@ function EntryContentRender({ entryId }: { entryId: string }) {
 
   const entry = useEntry(entryId)
   const [content, setContent] = useState<JSX.Element>()
-
+  const readerRenderInlineStyle = useUIStore(
+    (state) => state.readerRenderInlineStyle,
+  )
   useEffect(() => {
     // Fallback data, if local data is broken should fallback to cached query data.
     const processContent = entry?.entries.content ?? data?.entries.content
     if (processContent) {
-      parseHtml(processContent).then((parsed) => {
+      parseHtml(processContent, {
+        renderInlineStyle: readerRenderInlineStyle,
+      }).then((parsed) => {
         setContent(parsed.content)
       })
     } else {
       setContent(undefined)
     }
-  }, [data?.entries.content, entry?.entries.content])
+  }, [data?.entries.content, entry?.entries.content, readerRenderInlineStyle])
 
   const translation = useBizQuery(
     Queries.ai.translation({

diff --git a/src/renderer/src/modules/settings/modal/content.tsx b/src/renderer/src/modules/settings/modal/content.tsx
@@ -28,7 +28,7 @@ export const SettingModalContent: FC<{
     >
       <ScrollArea.ScrollArea
         scrollbarClassName="mt-12 mb-2"
-        rootClassName="h-full flex-1 shrink-0 overflow-auto pl-8 pr-7"
+        rootClassName="h-full flex-1 shrink-0 overflow-auto pl-8 pr-7 pb-8"
         viewportClassName="pr-1"
       >
         <Content />

diff --git a/src/renderer/src/modules/settings/modal/layout.tsx b/src/renderer/src/modules/settings/modal/layout.tsx
@@ -75,8 +75,8 @@ export function SettingModalLayout(
       )}
       <div className="flex h-0 flex-1 bg-theme-tooltip-background">
         <div className="w-44 border-r px-2 py-6">
-          <div className="mb-4 flex h-8 items-center gap-2 px-4 font-bold">
-            <Logo className="size-6" />
+          <div className="mb-4 flex h-8 items-center gap-2 px-2 font-bold">
+            <Logo className="mr-1 size-6" />
             {APP_NAME}
           </div>
           {settings.map((t) => (

diff --git a/src/renderer/src/modules/settings/tabs/apperance.tsx b/src/renderer/src/modules/settings/tabs/apperance.tsx
@@ -44,8 +44,8 @@ export const SettingAppearance = () => {
         />
       )}
 
-      <SettingSectionTitle title="Text" />
-      {window.electron && <Fonts />}
+      <SettingSectionTitle title="UI" />
+
       <TextSize />
       <SettingSectionTitle title="Display counts" />
       {onlyMacos && (
@@ -65,27 +65,37 @@ export const SettingAppearance = () => {
         }}
       />
 
-      <SettingSectionTitle title="Modal" />
-      <SettingSwitch
-        label="Show modal overlay"
-        checked={state.modalOverlay}
-        onCheckedChange={(c) => {
-          uiActions.set("modalOverlay", c)
-        }}
-      />
-      <SettingSwitch
+      {/* <SettingSwitch
         label="Modal draggable"
         checked={state.modalDraggable}
         onCheckedChange={(c) => {
           uiActions.set("modalDraggable", c)
         }}
-      />
-      <SettingSwitch
+      /> */}
+      {/* <SettingSwitch
         label="Modal opaque"
         checked={state.modalOpaque}
         onCheckedChange={(c) => {
           uiActions.set("modalOpaque", c)
         }}
+      /> */}
+
+      <SettingSectionTitle title="Content" />
+      {window.electron && <Fonts />}
+      <SettingSwitch
+        label="Render inline style"
+        checked={state.readerRenderInlineStyle}
+        onCheckedChange={(c) => {
+          uiActions.set("readerRenderInlineStyle", c)
+        }}
+      />
+      <SettingSectionTitle title="Misc" />
+      <SettingSwitch
+        label="Show modal overlay"
+        checked={state.modalOverlay}
+        onCheckedChange={(c) => {
+          uiActions.set("modalOverlay", c)
+        }}
       />
     </div>
   )
@@ -100,7 +110,7 @@ const Fonts = () => {
     (state) => state.readerFontFamily || "SN Pro",
   )
   return (
-    <div className="-mt-1 flex items-center justify-between">
+    <div className="-mt-1 mb-3 flex items-center justify-between">
       <span className="shrink-0 text-sm font-medium">Font Family</span>
       <Select
         defaultValue="SN Pro"
@@ -138,7 +148,7 @@ const TextSize = () => {
 
   return (
     <div className="mt-1 flex items-center justify-between">
-      <span className="shrink-0 text-sm font-medium">Text Size</span>
+      <span className="shrink-0 text-sm font-medium">UI Text Size</span>
       <Select
         defaultValue={textSizeMap.default.toString()}
         value={uiTextSize.toString() || textSizeMap.default.toString()}

diff --git a/src/renderer/src/store/ui.ts b/src/renderer/src/store/ui.ts
@@ -9,7 +9,7 @@ import {
 interface UIState {
   entryColWidth: number
   opaqueSidebar: boolean
-  readerFontFamily: string
+  // UI
   uiTextSize: number
 
   // Display counts
@@ -21,6 +21,10 @@ interface UIState {
   modalOverlay: boolean
   modalDraggable: boolean
   modalOpaque: boolean
+
+  // content
+  readerFontFamily: string
+  readerRenderInlineStyle: boolean
 }
 
 const createDefaultUIState = (): UIState => ({
@@ -34,7 +38,8 @@ const createDefaultUIState = (): UIState => ({
 
   modalOverlay: true,
   modalDraggable: true,
-  modalOpaque: false,
+  modalOpaque: true,
+  readerRenderInlineStyle: false,
 })
 interface UIActions {
   clear: () => void