Files
omnivore/packages/appreader/src/index.jsx
2022-06-29 22:09:52 -07:00

68 lines
2.2 KiB
JavaScript

import React from 'react'
import ReactDOM from 'react-dom'
import { Box, VStack } from '@omnivore/web/components/elements/LayoutPrimitives'
import { ArticleContainer } from '@omnivore/web/components/templates/article/ArticleContainer'
import { applyStoredTheme } from '@omnivore/web/lib/themeUpdater'
import '@omnivore/web/styles/globals.css'
import '@omnivore/web/styles/articleInnerStyling.css'
const mutation = async (name, input) => {
const result =
await window?.webkit?.messageHandlers.articleAction?.postMessage({
actionID: name,
...input,
})
console.log('action result', result, result.result)
return result.result
}
const App = () => {
applyStoredTheme(false)
return (
<>
<Box
css={{
overflowY: 'auto',
height: '100%',
width: '100vw',
}}
>
<VStack
alignment="center"
distribution="center"
className="disable-webkit-callout"
>
<ArticleContainer
article={window.omnivoreArticle}
labels={window.omnivoreArticle.labels}
isAppleAppEmbed={true}
highlightBarDisabled={!window.enableHighlightBar}
highlightsBaseURL="https://example.com"
fontSize={window.fontSize ?? 18}
fontFamily={window.fontFamily ?? 'inter'}
margin={window.margin}
maxWidthPercentage={window.maxWidthPercentage}
lineHeight={window.lineHeight}
highContrastFont={window.prefersHighContrastFont ?? true}
articleMutations={{
createHighlightMutation: (input) =>
mutation('createHighlight', input),
deleteHighlightMutation: (highlightId) =>
mutation('deleteHighlight', { highlightId }),
mergeHighlightMutation: (input) =>
mutation('mergeHighlight', input),
updateHighlightMutation: (input) =>
mutation('updateHighlight', input),
articleReadingProgressMutation: (input) =>
mutation('articleReadingProgress', input),
}}
/>
</VStack>
</Box>
</>
)
}
ReactDOM.render(<App />, document.getElementById('root'))