feat(preview): node history

4 files changed, 73 insertions, 14 deletions

diff --git a/components/Sidebar/OrgImage.tsx b/components/Sidebar/OrgImage.tsx
index a87fc4c..f9f508a 100644
--- a/components/Sidebar/OrgImage.tsx
+++ b/components/Sidebar/OrgImage.tsx
@@ -30,6 +30,13 @@ export const OrgImage = (props: OrgImageProps) => {
   }
 
   return (
-    <Image layout="responsive" loader={dumbLoader} src={fullPath} alt="" width="70%" height="70%" />
+    <Image
+      layout="responsive"
+      loader={dumbLoader}
+      src={fullPath}
+      alt=""
+      width="100%"
+      height="100%"
+    />
   )
 }
diff --git a/components/Sidebar/Toolbar.tsx b/components/Sidebar/Toolbar.tsx
index 458361f..f6f1e39 100644
--- a/components/Sidebar/Toolbar.tsx
+++ b/components/Sidebar/Toolbar.tsx
@@ -9,21 +9,51 @@ import {
   BiRightIndent,
 } from 'react-icons/bi'
 import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
+import { NodeObject } from 'force-graph'
 
 export interface ToolbarProps {
   setJustification: any
   justification: number
   setIndent: any
   setFont: any
+  setPreviewNode: any
+  canUndo: any
+  canRedo: any
+  resetPreviewNode: any
+  previousPreviewNode: any
+  nextPreviewNode: any
 }
 
 export const Toolbar = (props: ToolbarProps) => {
-  const { setJustification, setIndent, setFont, justification } = props
+  const {
+    setJustification,
+    setIndent,
+    setFont,
+    justification,
+    setPreviewNode,
+    canUndo,
+    canRedo,
+    resetPreviewNode,
+    previousPreviewNode,
+    nextPreviewNode,
+  } = props
   return (
     <Flex py={3} alignItems="center" justifyContent="space-between" pr={4}>
       <Flex>
-        <IconButton variant="ghost" icon={<ChevronLeftIcon />} aria-label="Previous node" />
-        <IconButton variant="ghost" icon={<ChevronRightIcon />} aria-label="Previous node" />
+        <IconButton
+          variant="ghost"
+          icon={<ChevronLeftIcon />}
+          aria-label="Previous node"
+          disabled={!canUndo}
+          onClick={() => previousPreviewNode()}
+        />
+        <IconButton
+          variant="ghost"
+          icon={<ChevronRightIcon />}
+          aria-label="Next node"
+          disabled={!canRedo}
+          onClick={() => nextPreviewNode()}
+        />
       </Flex>
       <Flex>
         <IconButton
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index 4d807ef..2e32f4f 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 
 import { Toolbar } from './Toolbar'
 import { Note } from './Note'
@@ -23,6 +23,11 @@ export interface SidebarProps {
   linksByNodeId: LinksByNodeId
   nodeByCite: NodeByCite
   setSidebarHighlightedNode: any
+  canUndo: any
+  canRedo: any
+  resetPreviewNode: any
+  previousPreviewNode: any
+  nextPreviewNode: any
 }
 
 const Sidebar = (props: SidebarProps) => {
@@ -36,6 +41,11 @@ const Sidebar = (props: SidebarProps) => {
     linksByNodeId,
     nodeByCite,
     setSidebarHighlightedNode,
+    canUndo,
+    canRedo,
+    resetPreviewNode,
+    previousPreviewNode,
+    nextPreviewNode,
   } = props
 
   const { highlightColor } = useContext(ThemeContext)
@@ -97,7 +107,20 @@ const Sidebar = (props: SidebarProps) => {
               onClick={onClose}
             />
           </Flex>
-          <Toolbar {...{ setJustification, setIndent, setFont, justification }} />
+          <Toolbar
+            {...{
+              setJustification,
+              setIndent,
+              setFont,
+              justification,
+              setPreviewNode,
+              canUndo,
+              canRedo,
+              resetPreviewNode,
+              previousPreviewNode,
+              nextPreviewNode,
+            }}
+          />
           <Scrollbars
             //autoHeight
             //autoHeightMax={600}
diff --git a/components/Sidebar/noteStyle.ts b/components/Sidebar/noteStyle.ts
index adf715d..42ecaf6 100644
--- a/components/Sidebar/noteStyle.ts
+++ b/components/Sidebar/noteStyle.ts
@@ -44,7 +44,7 @@ export const noteStyle = {
     fontWeight: 'bold',
     marginTop: 0,
   },
-  '.todo': { fontFamily: 'monospace', color: 'red' },
+  '.TODO': { color: 'red.500' },
   '.equationContainer': {
     display: 'table',
     textAlign: 'center',
@@ -71,7 +71,6 @@ export const noteStyle = {
   },
   textarea: { overflowX: 'auto' },
   '.linenr': { fontSize: 'smaller' },
-  '.code-highlighted': { backgroundColor: '#ffff00' },
   '.org-info-js_info-navigation': { borderStyle: 'none' },
   '#org-info-js_console-label': {
     fontSize: '10px',
@@ -84,10 +83,10 @@ export const noteStyle = {
     fontWeight: 'bold',
   },
   '.org-svg': { width: '90%' },
-  '.done': { fontFamily: 'monospace', color: 'green' },
+  '.DONE': { color: 'green' },
   '.priority': { fontFamily: 'monospace', color: 'orange' },
   '.tag': {
-    backgroundColor: '#eee',
+    backgroundColor: 'white',
     fontFamily: 'monospace',
     padding: '2px',
     fontSize: '80%',
@@ -103,9 +102,9 @@ export const noteStyle = {
   '#preamble p': { fontSize: '90%', margin: '.2em' },
   'p.verse': { marginLeft: '3%' },
   pre: {
-    border: '1px solid #e6e6e6',
+    //border: '1px solid #e6e6e6',
     borderRadius: '3px',
-    backgroundColor: '#f2f2f2',
+    backgroundColor: 'white',
     padding: '8pt',
     fontFamily: 'monospace',
     overflow: 'auto',
@@ -121,8 +120,8 @@ export const noteStyle = {
     top: '-8px',
     right: '12px',
     padding: '3px',
-    color: '#555',
-    backgroundColor: '#f2f2f299',
+    //color: '#555',
+    backgroundColor: 'white',
   },
   'caption.t-above': { captionSide: 'top' },
   'caption.t-bottom': { captionSide: 'bottom' },