diff --git a/typescript/package-lock.json b/typescript/package-lock.json index a26f857..84ab0a8 100644 --- a/typescript/package-lock.json +++ b/typescript/package-lock.json @@ -14,7 +14,7 @@ "json5": "^2.2.3", "katex": "^0.16.22", "puppeteer": "^24.9.0", - "react-intersection-observer": "^9.16.0", + "react-intersection-observer": "^9.13.0", "strip-json-comments": "^5.0.2" }, "devDependencies": { diff --git a/typescript/package.json b/typescript/package.json index cab8efa..e282998 100644 --- a/typescript/package.json +++ b/typescript/package.json @@ -68,7 +68,7 @@ "json5": "^2.2.3", "katex": "^0.16.22", "puppeteer": "^24.9.0", - "react-intersection-observer": "^9.16.0", + "react-intersection-observer": "^9.13.0", "strip-json-comments": "^5.0.2" }, "peerDependencies": { diff --git a/typescript/src/examples/index.tsx b/typescript/src/examples/index.tsx index fd05cfb..b0c3f00 100644 --- a/typescript/src/examples/index.tsx +++ b/typescript/src/examples/index.tsx @@ -6,7 +6,7 @@ import { HeadingBlockRenderer } from "@/renderer/components/blocks/HeadingBlockR import { JsonDocRenderer } from "../renderer/JsonDocRenderer"; -import testPage from "./testJsonDocs/ex1_success.json"; +import testPage from "./testJsonDocs/test_document.json"; const App = () => { return ( @@ -23,12 +23,12 @@ const App = () => { { return ; }, paragraph: (props) => , - // paragraph: (props) => }} /> diff --git a/typescript/src/renderer/JsonDocRenderer.tsx b/typescript/src/renderer/JsonDocRenderer.tsx index 5a4d3cb..ebe34b5 100644 --- a/typescript/src/renderer/JsonDocRenderer.tsx +++ b/typescript/src/renderer/JsonDocRenderer.tsx @@ -2,6 +2,9 @@ import "./styles/index.css"; import React from "react"; import { BlockRenderer } from "./components/BlockRenderer"; +import { PageDelimiter } from "./components/PageDelimiter"; +import { JsonViewPanel } from "./components/dev/JsonViewPanel"; +import { RendererProvider } from "./context/RendererContext"; interface JsonDocRendererProps { page: any; @@ -9,6 +12,8 @@ interface JsonDocRendererProps { components?: React.ComponentProps["components"]; theme?: "light" | "dark"; resolveImageUrl?: (url: string) => Promise; + devMode?: boolean; + viewJson?: boolean; } export const JsonDocRenderer = ({ @@ -17,39 +22,72 @@ export const JsonDocRenderer = ({ components, theme = "light", resolveImageUrl, + devMode = false, + viewJson = false, }: JsonDocRendererProps) => { - return ( -
-
- {/* Page icon */} - {page.icon && ( -
- {page.icon.type === "emoji" && page.icon.emoji} -
- )} + const renderedContent = ( +
+ {/* Page icon */} + {page.icon && ( +
+ {page.icon.type === "emoji" && page.icon.emoji} +
+ )} - {/* Page title */} - {page.properties?.title && ( -

- {page.properties.title.title?.[0]?.plain_text || "Untitled"} -

- )} + {/* Page title */} + {page.properties?.title && ( +

+ {page.properties.title.title?.[0]?.plain_text || "Untitled"} +

+ )} + + {/* Page children blocks */} + {page.children && page.children.length > 0 && ( +
+ {page.children.map((block: any, index: number) => { + const currentPageNum = block.metadata?.origin?.page_num; + const nextPageNum = + index < page.children.length - 1 + ? page.children[index + 1]?.metadata?.origin?.page_num + : null; + + // Show delimiter after the last block of each page + const showPageDelimiter = + currentPageNum && + (nextPageNum !== currentPageNum || index === page.children.length - 1); - {/* Page children blocks */} - {page.children && page.children.length > 0 && ( -
- {page.children.map((block: any, index: number) => ( - - ))} + return ( + + + {showPageDelimiter && ( + + )} + + ); + })} +
+ )} +
+ ); + + return ( + +
+ {viewJson ? ( +
+
+ {renderedContent} +
+
+ ) : ( + renderedContent )}
-
+ ); }; diff --git a/typescript/src/renderer/components/BlockRenderer.tsx b/typescript/src/renderer/components/BlockRenderer.tsx index f34e140..a4d0113 100644 --- a/typescript/src/renderer/components/BlockRenderer.tsx +++ b/typescript/src/renderer/components/BlockRenderer.tsx @@ -1,5 +1,8 @@ import React from "react"; +import { useRenderer } from "../context/RendererContext"; + +import { DevWrapper } from "./dev/DevWrapper"; import { ParagraphBlockRenderer } from "./blocks/ParagraphBlockRenderer"; import { HeadingBlockRenderer } from "./blocks/HeadingBlockRenderer"; import { ListItemBlockRenderer } from "./blocks/ListItemBlockRenderer"; @@ -56,104 +59,113 @@ interface BlockRendererProps { block: any; depth?: number; components?: BlockComponents; - resolveImageUrl?: (url: string) => Promise; } export const BlockRenderer: React.FC = ({ block, depth = 0, components, - resolveImageUrl, }) => { + const { devMode = false } = useRenderer(); const commonProps = { block, depth, components }; + // Helper function to wrap component with DevWrapper if devMode is enabled + const wrapWithDev = (component: React.ReactElement) => { + if (devMode) { + return {component}; + } + return component; + }; + // Paragraph block if (block?.type === "paragraph") { const ParagraphComponent = components?.paragraph || ParagraphBlockRenderer; - return ; + return wrapWithDev(); } // Heading blocks if (block?.type === "heading_1") { const HeadingComponent = components?.heading_1 || HeadingBlockRenderer; - return ; + return wrapWithDev(); } if (block?.type === "heading_2") { const HeadingComponent = components?.heading_2 || HeadingBlockRenderer; - return ; + return wrapWithDev(); } if (block?.type === "heading_3") { const HeadingComponent = components?.heading_3 || HeadingBlockRenderer; - return ; + return wrapWithDev(); } // List item blocks if (block?.type === "bulleted_list_item") { const BulletedListItemComponent = components?.bulleted_list_item || ListItemBlockRenderer; - return ; + return wrapWithDev( + + ); } if (block?.type === "numbered_list_item") { const NumberedListItemComponent = components?.numbered_list_item || ListItemBlockRenderer; - return ; + return wrapWithDev( + + ); } // Code block if (block?.type === "code") { const CodeComponent = components?.code || CodeBlockRenderer; - return ; + return wrapWithDev(); } // Image block if (block?.type === "image") { const ImageComponent = components?.image || ImageBlockRenderer; - return ( - - ); + return wrapWithDev(); } // Table blocks if (block?.type === "table") { const TableComponent = components?.table || TableBlockRenderer; - return ; + return wrapWithDev(); } // Quote block if (block?.type === "quote") { const QuoteComponent = components?.quote || QuoteBlockRenderer; - return ; + return wrapWithDev(); } // Divider block if (block?.type === "divider") { const DividerComponent = components?.divider || DividerBlockRenderer; - return ; + return wrapWithDev(); } // To-do block if (block?.type === "to_do") { const ToDoComponent = components?.to_do || ToDoBlockRenderer; - return ; + return wrapWithDev(); } // Toggle block if (block?.type === "toggle") { const ToggleComponent = components?.toggle || ToggleBlockRenderer; - return ; + return wrapWithDev(); } // Column list and column blocks if (block?.type === "column_list") { const ColumnListComponent = components?.column_list || ColumnListBlockRenderer; - return ; + return wrapWithDev(); } // Equation block if (block?.type === "equation") { const EquationComponent = components?.equation || EquationBlockRenderer; - return ; + return wrapWithDev(); } // Fallback for unsupported block types diff --git a/typescript/src/renderer/components/PageDelimiter.tsx b/typescript/src/renderer/components/PageDelimiter.tsx new file mode 100644 index 0000000..32d727f --- /dev/null +++ b/typescript/src/renderer/components/PageDelimiter.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +interface PageDelimiterProps { + pageNumber: number; + className?: string; +} + +export const PageDelimiter: React.FC = ({ + pageNumber, + className, +}) => { + return ( +
+
+ + Page {pageNumber} + +
+
+ ); +}; \ No newline at end of file diff --git a/typescript/src/renderer/components/blocks/ColumnListBlockRenderer.tsx b/typescript/src/renderer/components/blocks/ColumnListBlockRenderer.tsx index 9373d19..813cd68 100644 --- a/typescript/src/renderer/components/blocks/ColumnListBlockRenderer.tsx +++ b/typescript/src/renderer/components/blocks/ColumnListBlockRenderer.tsx @@ -11,7 +11,13 @@ interface ColumnListBlockRendererProps export const ColumnListBlockRenderer: React.FC< ColumnListBlockRendererProps -> = ({ block, depth = 0, className, components, ...props }) => { +> = ({ + block, + depth = 0, + className, + components, + ...props +}) => { return (
{ block: any; depth?: number; components?: React.ComponentProps["components"]; - resolveImageUrl?: (url: string) => Promise; } export const ImageBlockRenderer: React.FC = ({ @@ -33,13 +33,14 @@ export const ImageBlockRenderer: React.FC = ({ depth = 0, className, components, - resolveImageUrl, ...props }) => { + const { resolveImageUrl } = useRenderer(); const imageData = block.image; const [url, setUrl] = useState(); const [isLoading, setIsLoading] = useState(false); const [hasError, setHasError] = useState(false); + const [showFullCaption, setShowFullCaption] = useState(false); const { ref, inView } = useInView({ threshold: 0.1, triggerOnce: true }); const getImageUrl = () => { @@ -95,13 +96,7 @@ export const ImageBlockRenderer: React.FC = ({
{imageUrl && ( -
+
{(isLoading || (!url && resolveImageUrl)) && !hasError && (
@@ -131,7 +126,17 @@ export const ImageBlockRenderer: React.FC = ({ {imageData?.caption && imageData.caption.length > 0 && (
- +
+ +
+
)} diff --git a/typescript/src/renderer/components/blocks/ParagraphBlockRenderer.tsx b/typescript/src/renderer/components/blocks/ParagraphBlockRenderer.tsx index 3834ab7..c937bfa 100644 --- a/typescript/src/renderer/components/blocks/ParagraphBlockRenderer.tsx +++ b/typescript/src/renderer/components/blocks/ParagraphBlockRenderer.tsx @@ -23,9 +23,11 @@ export const ParagraphBlockRenderer: React.FC = ({ className={`notion-selectable notion-text-block ${className || ""}`.trim()} data-block-id={block.id} > -
- -
+ {block.paragraph?.rich_text.length > 0 && ( +
+ +
+ )} {/* Render children blocks recursively */} {block.children && block.children.length > 0 && ( diff --git a/typescript/src/renderer/components/dev/DevOverlay.tsx b/typescript/src/renderer/components/dev/DevOverlay.tsx new file mode 100644 index 0000000..a53cb52 --- /dev/null +++ b/typescript/src/renderer/components/dev/DevOverlay.tsx @@ -0,0 +1,335 @@ +import React, { useEffect, useRef, useState } from "react"; + +interface DevOverlayProps { + block: any; + position: { x: number; y: number }; + onClose: () => void; +} + +export const DevOverlay: React.FC = ({ + block, + position, + onClose, +}) => { + const overlayRef = useRef(null); + const [isDragging, setIsDragging] = useState(false); + const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 }); + const [currentPosition, setCurrentPosition] = useState(position); + const [isResizing, setIsResizing] = useState(false); + const [resizeDirection, setResizeDirection] = useState(""); + const [size, setSize] = useState({ width: 500, height: 400 }); + + // Handle dragging and resizing + useEffect(() => { + const handleMouseMove = (e: MouseEvent) => { + if (isDragging) { + setCurrentPosition({ + x: e.clientX - dragOffset.x, + y: e.clientY - dragOffset.y, + }); + } else if (isResizing && overlayRef.current) { + const rect = overlayRef.current.getBoundingClientRect(); + const newSize = { ...size }; + const newPosition = { ...currentPosition }; + + if (resizeDirection.includes("right")) { + newSize.width = Math.max(300, e.clientX - rect.left); + } + if (resizeDirection.includes("left")) { + const newWidth = Math.max(300, rect.right - e.clientX); + const widthDiff = newWidth - size.width; + newSize.width = newWidth; + newPosition.x = currentPosition.x - widthDiff; + } + if (resizeDirection.includes("bottom")) { + newSize.height = Math.max(200, e.clientY - rect.top); + } + if (resizeDirection.includes("top")) { + const newHeight = Math.max(200, rect.bottom - e.clientY); + const heightDiff = newHeight - size.height; + newSize.height = newHeight; + newPosition.y = currentPosition.y - heightDiff; + } + + setSize(newSize); + setCurrentPosition(newPosition); + } + }; + + const handleMouseUp = () => { + setIsDragging(false); + setIsResizing(false); + setResizeDirection(""); + }; + + if (isDragging || isResizing) { + document.addEventListener("mousemove", handleMouseMove); + document.addEventListener("mouseup", handleMouseUp); + document.body.style.userSelect = "none"; + } + + return () => { + document.removeEventListener("mousemove", handleMouseMove); + document.removeEventListener("mouseup", handleMouseUp); + document.body.style.userSelect = ""; + }; + }, [ + isDragging, + isResizing, + dragOffset, + resizeDirection, + size, + currentPosition, + ]); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (isDragging || isResizing) return; // Don't close while dragging or resizing + if ( + overlayRef.current && + !overlayRef.current.contains(event.target as Node) + ) { + onClose(); + } + }; + + const handleEscape = (event: KeyboardEvent) => { + if (event.key === "Escape") { + onClose(); + } + }; + + // Add a small delay to prevent immediate closing from the opening click + const timer = setTimeout(() => { + document.addEventListener("mousedown", handleClickOutside); + document.addEventListener("keydown", handleEscape); + }, 100); + + return () => { + clearTimeout(timer); + document.removeEventListener("mousedown", handleClickOutside); + document.removeEventListener("keydown", handleEscape); + }; + }, [onClose, isDragging, isResizing]); + + const adjustedPosition = { + x: Math.min(Math.max(0, currentPosition.x), window.innerWidth - size.width), + y: Math.min( + Math.max(0, currentPosition.y), + window.innerHeight - size.height + ), + }; + + const handleMouseDown = (e: React.MouseEvent) => { + if (e.button !== 0) return; // Only handle left click + const rect = overlayRef.current?.getBoundingClientRect(); + if (rect) { + setDragOffset({ + x: e.clientX - rect.left, + y: e.clientY - rect.top, + }); + setIsDragging(true); + } + }; + + const handleResizeStart = (direction: string) => (e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + setResizeDirection(direction); + setIsResizing(true); + }; + + return ( +
e.stopPropagation()} + style={{ + position: "fixed", + top: adjustedPosition.y, + left: adjustedPosition.x, + width: size.width, + height: size.height, + zIndex: 9999, + background: "#1a1a1a", + border: "1px solid #333", + borderRadius: "8px", + padding: "16px", + boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)", + fontFamily: "monospace", + fontSize: "12px", + color: "#ffffff", + display: "flex", + flexDirection: "column", + }} + onMouseDown={(e) => e.stopPropagation()} // Prevent bubbling to DevPortal + > +
+ + + + + Block JSON ({block.type || "unknown"}) + + +
+ 
+        {JSON.stringify(block, null, 2)}
+
+ + {/* Resize handles */} +
+
+
+
+ {/* Corner resize handles */} +
+
+
+
+
+ ); +}; diff --git a/typescript/src/renderer/components/dev/DevPortal.tsx b/typescript/src/renderer/components/dev/DevPortal.tsx new file mode 100644 index 0000000..5f61b74 --- /dev/null +++ b/typescript/src/renderer/components/dev/DevPortal.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { createPortal } from "react-dom"; + +interface DevPortalProps { + children: React.ReactNode; + onBackdropClick?: (e: React.MouseEvent) => void; +} + +export const DevPortal: React.FC = ({ + children, + onBackdropClick, +}) => { + return createPortal( +
+
{children}
+
, + document.body + ); +}; diff --git a/typescript/src/renderer/components/dev/DevWrapper.tsx b/typescript/src/renderer/components/dev/DevWrapper.tsx new file mode 100644 index 0000000..7141e9f --- /dev/null +++ b/typescript/src/renderer/components/dev/DevWrapper.tsx @@ -0,0 +1,83 @@ +import React, { useState } from "react"; + +import { DevPortal } from "./DevPortal"; +import { DevOverlay } from "./DevOverlay"; + +interface DevWrapperProps { + block: any; + children: React.ReactNode; +} + +export const DevWrapper: React.FC = ({ block, children }) => { + const [showJson, setShowJson] = useState(false); + const [position, setPosition] = useState({ x: 0, y: 0 }); + const [isHovered, setIsHovered] = useState(false); + + const handleBadgeClick = (e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + if (!showJson) { + setPosition({ x: e.clientX, y: e.clientY + 20 }); + setShowJson(true); + } + }; + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + style={{ + position: "relative", + outline: isHovered ? "2px dashed #60a5fa" : "none", + outlineOffset: "2px", + transition: "outline 0.2s ease", + }} + > + {children} + {isHovered && ( +
+ {block.type || "unknown"} +
+ )} + {showJson && ( + { + // Don't close if clicking on resize handles (they extend outside the popup) + const target = e.target as HTMLElement; + if (target.hasAttribute?.('data-resize-handle') || + target.style?.cursor?.includes('resize') || + target.style?.zIndex === '10' || + target.style?.zIndex === '11') { + return; + } + setShowJson(false); + }} + > + setShowJson(false)} + /> + + )} +
+ ); +}; diff --git a/typescript/src/renderer/components/dev/JsonViewPanel.tsx b/typescript/src/renderer/components/dev/JsonViewPanel.tsx new file mode 100644 index 0000000..80be956 --- /dev/null +++ b/typescript/src/renderer/components/dev/JsonViewPanel.tsx @@ -0,0 +1,24 @@ +import React from "react"; + +interface JsonViewPanelProps { + data: any; + title?: string; +} + +export const JsonViewPanel: React.FC = ({ + data, + title = "Raw JSON Data" +}) => { + return ( +
+
+

+ {title} +

+ 
+          {data ? JSON.stringify(data, null, 2) : 'No data available'}
+
+
+
+ ); +}; \ No newline at end of file diff --git a/typescript/src/renderer/context/RendererContext.tsx b/typescript/src/renderer/context/RendererContext.tsx new file mode 100644 index 0000000..7782c4e --- /dev/null +++ b/typescript/src/renderer/context/RendererContext.tsx @@ -0,0 +1,28 @@ +import React, { createContext, useContext, ReactNode } from 'react'; + +interface RendererContextValue { + devMode?: boolean; + resolveImageUrl?: (url: string) => Promise; +} + +const RendererContext = createContext({}); + +export const useRenderer = () => { + return useContext(RendererContext); +}; + +interface RendererProviderProps { + children: ReactNode; + value: RendererContextValue; +} + +export const RendererProvider: React.FC = ({ + children, + value +}) => { + return ( + + {children} + + ); +}; \ No newline at end of file diff --git a/typescript/src/renderer/context/index.ts b/typescript/src/renderer/context/index.ts new file mode 100644 index 0000000..3226f9f --- /dev/null +++ b/typescript/src/renderer/context/index.ts @@ -0,0 +1 @@ +export { RendererProvider, useRenderer } from './RendererContext'; \ No newline at end of file diff --git a/typescript/src/renderer/index.ts b/typescript/src/renderer/index.ts index c67aef1..a574467 100644 --- a/typescript/src/renderer/index.ts +++ b/typescript/src/renderer/index.ts @@ -16,6 +16,9 @@ export { ToggleBlockRenderer } from "./components/blocks/ToggleBlockRenderer"; export { ColumnListBlockRenderer } from "./components/blocks/ColumnListBlockRenderer"; export { EquationBlockRenderer } from "./components/blocks/EquationBlockRenderer"; +// Export context +export { RendererProvider, useRenderer } from "./context"; + // Export types export type { BlockComponents } from "./components/BlockRenderer"; export type { JsonDocRendererProps, BlockRendererProps } from "./types"; diff --git a/typescript/src/renderer/styles/layout.css b/typescript/src/renderer/styles/layout.css index 2b282bd..6d391ba 100644 --- a/typescript/src/renderer/styles/layout.css +++ b/typescript/src/renderer/styles/layout.css @@ -1,5 +1,47 @@ /* Layout Components */ +/* Page Delimiter */ +.jsondoc-page-delimiter { + margin: var(--jsondoc-spacing-xl) 0; + margin-bottom: var(--jsondoc-spacing-3xl); + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.jsondoc-page-delimiter-line { + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 1px; + background: var(--jsondoc-border-light); + z-index: var(--jsondoc-z-base); +} + +.jsondoc-page-number { + background: white; + padding: var(--jsondoc-spacing-xs) var(--jsondoc-spacing-md); + color: var(--jsondoc-text-muted); + font-size: var(--jsondoc-font-size-caption); + font-weight: var(--jsondoc-font-weight-normal); + border-radius: var(--jsondoc-radius-sm); + position: relative; + z-index: var(--jsondoc-z-elevated); + display: inline-block; +} + +/* Dark theme support for page delimiter */ +.jsondoc-theme-dark .jsondoc-page-number { + background: var(--jsondoc-bg-code); + color: var(--jsondoc-text-muted); +} + +.jsondoc-theme-dark .jsondoc-page-delimiter-line { + background: var(--jsondoc-border-light); +} + /* Column Layout */ .notion-column_list-block { margin: var(--jsondoc-spacing-sm) 0; diff --git a/typescript/src/renderer/styles/media.css b/typescript/src/renderer/styles/media.css index e5770fd..6baa92e 100644 --- a/typescript/src/renderer/styles/media.css +++ b/typescript/src/renderer/styles/media.css @@ -129,3 +129,48 @@ font-style: italic; max-width: 100%; } + +/* Image container styles */ +.notion-image-container { + position: relative; + width: 100%; + display: flex; + justify-content: center; +} + +/* Image Caption */ +.caption-content { + transition: all 0.2s ease; +} + +.caption-truncated { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; +} + +.caption-expanded { + overflow: visible; + text-overflow: unset; + white-space: normal; + display: block; +} + +button.caption-toggle-btn { + background: none; + border: none; + color: var(--jsondoc-text-muted); + cursor: pointer; + font-size: 0.875rem; + margin-top: 4px; + padding: 2px 4px; + text-decoration: underline; + transition: color 0.2s ease; +} + +.caption-toggle-btn:hover { + color: var(--jsondoc-text-muted); +} diff --git a/typescript/src/renderer/styles/table.css b/typescript/src/renderer/styles/table.css index b97b70c..099512a 100644 --- a/typescript/src/renderer/styles/table.css +++ b/typescript/src/renderer/styles/table.css @@ -5,17 +5,41 @@ width: 100%; } -.notion-table { +.notion-scroller.horizontal { + overflow-x: auto; + overflow-y: hidden; + width: 100%; +} + +.notion-table-content { + min-width: 100%; + width: max-content; +} + +.notion-table-content table { width: 100%; border-collapse: collapse; border-spacing: 0; - table-layout: fixed; + table-layout: auto; + min-width: 600px; } .notion-table-row th, .notion-table-row td { border: 1px solid var(--jsondoc-border-medium); - padding: 6px var(--jsondoc-spacing-md); + padding: 8px 12px; vertical-align: top; - word-wrap: break-word; + white-space: nowrap; + min-width: 120px; +} + +.notion-table-row th { + background-color: var(--jsondoc-bg-code); + font-weight: var(--jsondoc-font-weight-semibold); +} + +.notion-table-cell-text { + overflow: hidden; + text-overflow: ellipsis; + max-width: 300px; } diff --git a/typescript/src/renderer/styles/typography.css b/typescript/src/renderer/styles/typography.css index 797066b..9622f00 100644 --- a/typescript/src/renderer/styles/typography.css +++ b/typescript/src/renderer/styles/typography.css @@ -30,7 +30,7 @@ line-height: var(--jsondoc-line-height-relaxed); } -.notion-link { +.notion-link a { color: inherit; word-wrap: break-word; cursor: pointer; @@ -39,6 +39,10 @@ transition: text-decoration-color var(--jsondoc-transition-fast); } +.notion-text-block div { + color: var(--jsondoc-text-primary); +} + .notion-link:hover { text-decoration-color: var(--jsondoc-text-primary); } diff --git a/typescript/src/renderer/styles/variables.css b/typescript/src/renderer/styles/variables.css index ffbb218..1fecad8 100644 --- a/typescript/src/renderer/styles/variables.css +++ b/typescript/src/renderer/styles/variables.css @@ -102,7 +102,7 @@ /* Theme Override Classes */ .jsondoc-theme-light { - --jsondoc-text-primary: #37352f; + --jsondoc-text-primary: #121414; --jsondoc-text-secondary: rgba(55, 53, 47, 0.65); --jsondoc-text-muted: rgba(55, 53, 47, 0.45); --jsondoc-border-light: rgba(55, 53, 47, 0.16);