Allow adjusting line height

packages/web/components/templates/article/ArticleContainer.tsx

@@ -1,6 +1,6 @@
 import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
 import { Article } from './../../../components/templates/article/Article'
-import { Box, HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives'
+import { Box, SpanBox, VStack } from './../../elements/LayoutPrimitives'
 import { StyledText } from './../../elements/StyledText'
 import { ArticleSubtitle } from './../../patterns/ArticleSubtitle'
 import { theme, ThemeId } from './../../tokens/stitches.config'
@@ -27,6 +27,7 @@ type ArticleContainerProps = {
   margin?: number
   fontSize?: number
   fontFamily?: string
+  lineHeight?: number
 }
 
 export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
@@ -34,7 +35,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
   const [showNotesSidebar, setShowNotesSidebar] = useState(false)
   const [showReportIssuesModal, setShowReportIssuesModal] = useState(false)
   const [fontSize, setFontSize] = useState(props.fontSize ?? 20)
-  const [margin, setMargin] = useState(props.margin ?? 360)
 
   const updateFontSize = async (newFontSize: number) => {
     if (fontSize !== newFontSize) {
@@ -43,21 +43,10 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     }
   }
 
-  const updateMargin = async (newMargin: number) => {
-    if (margin !== newMargin) {
-      setMargin(newMargin)
-      await userPersonalizationMutation({ margin: newMargin })
-    }
-  }
-
   useEffect(() => {
     updateFontSize(props.fontSize ?? 20)
   }, [props.fontSize])
 
-  useEffect(() => {
-    updateMargin(props.margin ?? 140)
-  }, [props.margin])
-
   // Listen for font size and color mode change events sent from host apps (ios, macos...)
   useEffect(() => {
     const increaseFontSize = async () => {
@@ -98,8 +87,9 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
   }, [props.article])
 
   const styles = {
-    margin: props.margin ?? 360,
     fontSize,
+    margin: props.margin ?? 360,
+    lineHeight: props.lineHeight ?? 150,
     fontFamily: props.fontFamily ?? 'inter',
     readerFontColor: theme.colors.readerFont.toString(),
     readerFontColorTransparent: theme.colors.readerFontTransparent.toString(),
@@ -117,7 +107,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
           background: props.isAppleAppEmbed ? 'unset' : theme.colors.grayBg.toString(),
           '--text-font-family': styles.fontFamily,
           '--text-font-size': `${styles.fontSize}px`,
-          '--line-height': `150%`,
+          '--line-height': `${styles.lineHeight}%`,
           '--blockquote-padding': '0.5em 1em',
           '--blockquote-icon-font-size': '1.3rem',
           '--figure-margin': '1.6rem auto',

packages/web/components/templates/article/ReaderSettingsModal.tsx

@@ -32,8 +32,8 @@ const VerticalDivider = styled(SpanBox, {
 })
 
 export function ReaderSettings(props: ReaderSettingsProps): JSX.Element {
-  const [lineHeight, setLineHeight] = useState(props.userPreferences?.lineHeight ?? 1.5)
   const [marginWidth, setMarginWidth] = useState(props.userPreferences?.margin ?? 0)
+  const [lineHeight, setLineHeight] = useState(props.userPreferences?.lineHeight ?? 150)
 
   return (
     <VStack>
@@ -102,7 +102,7 @@ export function ReaderSettings(props: ReaderSettingsProps): JSX.Element {
           <Button style='plainIcon' css={{ pt: '10px', px: '4px' }}>
             <AlignCenterHorizontalSimple size={25} color={theme.colors.readerFont.toString()} />
           </Button>
-          <TickedRangeSlider min={1} max={3} step={0.5} value={lineHeight} onChange={(value) => {
+          <TickedRangeSlider min={100} max={300} step={25} value={lineHeight} onChange={(value) => {
             setLineHeight(value)
             props.articleActionHandler('setLineHeight', value)
           }} />

packages/web/pages/[username]/[slug]/index.tsx

@@ -38,14 +38,13 @@ export default function Home(): JSX.Element {
   const { slug } = router.query
   const [showHighlightsModal, setShowHighlightsModal] = useState(false)
 
-  // Populate data cache
   const { viewerData } = useGetViewerQuery()
-
   const { preferencesData } = useGetUserPreferences()
   const [fontSize, setFontSize] = useState(preferencesData?.fontSize ?? 20)
   const [marginWidth, setMarginWidth] = useState(preferencesData?.margin ?? 360)
+  const [lineHeight, setLineHeight] = useState(preferencesData?.lineHeight ?? 150)
 
-  const { articleData, mutate } = useGetArticleQuery({
+  const { articleData } = useGetArticleQuery({
     username: router.query.username as string,
     slug: router.query.slug as string,
     includeFriendsHighlights: false,
@@ -103,7 +102,7 @@ export default function Home(): JSX.Element {
         break
       case 'setMarginWidth': {
         const value = Number(arg)
-        if (value > 200 && value < 560) {
+        if (value >= 200 && value <= 560) {
           updateMarginWidth(value)
         }
         break
@@ -114,6 +113,13 @@ export default function Home(): JSX.Element {
       case 'decrementMarginWidth':
         updateMarginWidth(Math.max(marginWidth - 45, 200))
         break
+      case 'setLineHeight': {
+        const value = Number(arg)
+        if (value >= 100 && value <= 300) {
+          setLineHeight(value)
+        }
+        break
+      }
     }
   };
 
@@ -193,6 +199,7 @@ export default function Home(): JSX.Element {
                 highlightsBaseURL={`${webBaseURL}/${viewerData.me?.profile?.username}/${slug}/highlights`}
                 fontSize={fontSize}
                 margin={marginWidth}
+                lineHeight={lineHeight}
                 labels={labels}
                 articleMutations={{
                   createHighlightMutation,