Merge remote-tracking branch 'origin/master' into roam-js

README.md

@@ -6,6 +6,11 @@
 
 Browser extension designed to improve your experience of using Roam Research
 
+---
+The development is supported by <a href="https://roam.garden/"> <img src="https://roam.garden/static/logo-2740b191a74245dc48ee30c68d5192aa.svg" height="50" /></a> - a service that allows you to publish your Roam notes as a beautiful static website (digital garden)
+
+---
+
 ## WalkThrough
 
 [![Watch the video](https://img.youtube.com/vi/llP-3AqFGL8/maxresdefault.jpg)](https://youtu.be/llP-3AqFGL8)
@@ -23,9 +28,9 @@ You can create dates using [**natural language**](https://github.com/wanasit/chr
 
 ![](./media/fuzzy_date.gif)
 
-Replace mode: 
+Replace mode:
 
-![](.media/fuzzy_date_replace.gif)
+![](./media/fuzzy_date_replace.gif)
 
 You can also **increment or decrement dates**:
 

package.json

@@ -23,7 +23,7 @@
         "cytoscape-cola": "^2.4.0",
         "dateformat": "^3.0.3",
         "immutable": "^4.0.0-rc.12",
-        "lodash": "^4.17.19",
+        "lodash": "^4.17.21",
         "react": "^16.12.0",
         "react-dom": "^16.12.0",
         "react-hotkeys": "^2.0.0",

src/manifest.json

@@ -1,13 +1,13 @@
 {
     "name": "Roam Toolkit",
     "author": "roam-unofficial",
-    "version": "0.5.0",
+    "version": "0.5.4",
     "description": "Roam force multiplier",
     "icons": {
         "128": "assets/icon-128.png"
     },
     "content_security_policy": "script-src 'self'; object-src 'self'",
-    "permissions": ["activeTab", "storage", "tabs", "clipboardRead", "clipboardWrite", "*://roamresearch.com/*"],
+    "permissions": ["activeTab", "storage", "clipboardRead", "clipboardWrite", "*://roamresearch.com/*"],
     "manifest_version": 2,
     "background": {
         "scripts": ["background.js"],

src/ts/components/containers/Settings/Home.tsx

@@ -8,7 +8,7 @@ import {Feature} from '../../../core/settings'
 import {Checkbox} from '../../Checkbox'
 import {WarningIcon} from '../../WarningIcon'
 
-type HomeProps = { features: Feature[] }
+type HomeProps = {features: Feature[]}
 export const Home = ({features}: HomeProps) => {
     const dispatch = useDispatch()
 
@@ -42,6 +42,13 @@ export const Home = ({features}: HomeProps) => {
         <HomeContainer>
             <Header>
                 <img src={`../../../assets/logo-${theme}.png`} />
+                <SupportedByContainer>
+                    {' '}
+                    Publish your Roam notes with
+                    <a href={'https://roam.garden'} target={'_blank'}>
+                        <InlineLogo src={`../../../assets/roam-garden.svg`} />
+                    </a>
+                </SupportedByContainer>
             </Header>
             <FeaturesList>
                 {features.map((feature: Feature) => (
@@ -59,8 +66,23 @@ export const Home = ({features}: HomeProps) => {
 
 const HomeContainer = styled('div')``
 
+const InlineLogo = styled.img`
+    display: inline;
+    height: 30px;
+    margin-left: 0.5em;
+`
+
+const SupportedByContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`
+
 const Header = styled('div')`
-    padding: 20px 0 20px 24px;
+    padding-top: 20px;
+    padding-right: 0;
+    padding-left: 24px;
+    padding-bottom: 10px;
     border-bottom: 1px solid #989898;
 `
 
@@ -96,6 +118,7 @@ const FeatureListElement = styled('li')`
         color: #828282;
         transform: translateY(-50%);
     }
+
     &:hover {
         &::after {
             color: #111111;
@@ -121,6 +144,7 @@ const FeatureNameContainer = styled('div')`
 
     &:hover {
         cursor: pointer;
+
         ${FeatureName} {
             text-decoration: underline;
         }

src/ts/core/features/spatial-mode/spatial-container.ts

@@ -56,7 +56,7 @@ export const getCytoscapeContainer = () => {
             pointer-events: none;
         }
         /* But make the actual content itself clickable */
-        ${Selectors.leftPanel}, .roam-topbar, ${PANEL_SELECTOR} {
+        ${Selectors.leftPanel}, ${Selectors.topBar}, ${PANEL_SELECTOR} {
             pointer-events: auto;
         }
 

src/ts/core/features/vim-mode/commands/insert-commands.ts

@@ -27,6 +27,7 @@ const insertBlockBefore = async () => {
 export const InsertCommands = [
     nmap('i', 'Click Selection', editBlock),
     nmap('a', 'Click Selection and Go-to End of Line', editBlockFromEnd),
+    nmap('shift+a', 'Click Selection and Go-to End of Line', editBlockFromEnd),
     nmap('shift+o', 'Insert Block Before', insertBlockBefore),
     nmap('o', 'Insert Block After', insertBlockAfter),
 ]

src/ts/core/features/vim-mode/hint-view.ts

@@ -50,9 +50,16 @@ Promise.all(HINT_IDS.map(hintCss)).then(cssClasses => {
 
 export const updateVimHints = (block: HTMLElement) => {
     // button is for reference counts
-    const links = block.querySelectorAll(
-        `${Selectors.link}, ${Selectors.externalLink}, ${Selectors.checkbox}, ${Selectors.button}, ${Selectors.blockReference}`
-    )
+    const clickableSelectors = [
+        Selectors.link,
+        Selectors.externalLink,
+        Selectors.checkbox,
+        Selectors.button,
+        Selectors.blockReference,
+        Selectors.hiddenSection,
+    ]
+    const links = block.querySelectorAll(clickableSelectors.join(', '))
+
     links.forEach((link, i) => {
         link.classList.add(HINT_CSS_CLASS, hintCssClass(i))
     })

src/ts/core/features/vim-mode/vim-view.ts

@@ -16,7 +16,8 @@ const SELECTED_BLOCK_CSS_CLASS = 'roam-toolkit-block-mode--highlight'
 injectStyle(
     `
     .${SELECTED_BLOCK_CSS_CLASS} {
-        background-color: wheat;
+        border-radius: 5px;
+        background-color: #FFF3E2;
     }
     `,
     'roam-toolkit-block-mode'

src/ts/core/roam/references.ts

@@ -2,15 +2,38 @@ import {Selectors} from './selectors'
 import {Mouse} from '../common/mouse'
 import {BlockElement, RoamBlock} from '../features/vim-mode/roam/roam-block'
 
+function expandReference(
+    wrapperSelector: string,
+    breadcrumbSelector: string,
+    getClickElement: (parent: HTMLElement) => HTMLElement | null
+) {
+    const referenceItem = RoamBlock.selected().element?.closest(wrapperSelector + ',' + Selectors.inlineReference)
+    const breadcrumbs = referenceItem?.querySelector(breadcrumbSelector + ',' + Selectors.zoomPath)
+
+    const clickElement = getClickElement(breadcrumbs as HTMLElement)
+    if (!clickElement) return false
+
+    Mouse.leftClick(clickElement)
+    return true
+}
+
 export const expandLastBreadcrumb = () => {
-    const referenceItem = RoamBlock.selected().element?.closest(Selectors.referenceItem)
-    const breadcrumbs = referenceItem?.querySelector(Selectors.breadcrumbsContainer)
+    expandReference(
+        Selectors.referenceItem,
+        Selectors.breadcrumbsContainer,
+        breadcrumbs => breadcrumbs.lastElementChild as HTMLElement
+    )
 
-    if (breadcrumbs?.lastElementChild) Mouse.leftClick(breadcrumbs.lastElementChild as HTMLElement)
+    expandReference(Selectors.inlineReference, Selectors.zoomPath, breadcrumbs => {
+        const nodes = breadcrumbs.querySelectorAll(Selectors.zoomItemContent)
+        return nodes[nodes.length - 1] as HTMLElement
+    })
 }
 
 export const closePageReferenceView = () => {
-    const referenceItem = RoamBlock.selected().element?.closest(Selectors.pageReferenceItem)
+    const referenceItem = RoamBlock.selected().element?.closest(
+        Selectors.pageReferenceItem + ',' + Selectors.inlineReference
+    )
     const foldButton = referenceItem?.querySelector(Selectors.foldButton)
 
     if (foldButton) Mouse.leftClick(foldButton as HTMLElement)
@@ -36,7 +59,7 @@ export const openParentPage = (shiftKey: boolean = false) => {
         return
     }
 
-    Mouse.leftClick(parentLink, { shiftKey })
+    Mouse.leftClick(parentLink, {shiftKey})
 }
 
 const getMentionsButton = (blockElement: BlockElement | null): HTMLElement | null => {
@@ -54,6 +77,6 @@ const getMentionsButton = (blockElement: BlockElement | null): HTMLElement | nul
 export const openMentions = (shiftKey: boolean = false) => {
     const mentionsButton = getMentionsButton(RoamBlock.selected().element)
     if (mentionsButton) {
-        Mouse.leftClick(mentionsButton, { shiftKey })
+        Mouse.leftClick(mentionsButton, {shiftKey})
     }
 }

src/ts/core/roam/selectors.ts

@@ -1,5 +1,6 @@
 export const Selectors = {
     link: '.rm-page-ref',
+    hiddenSection: '.rm-block__part--equals',
     block: '.roam-block',
     blockInput: '.rm-block-input',
     blockContainer: '.roam-block-container',
@@ -18,7 +19,7 @@ export const Selectors = {
 
     leftPanel: '.roam-sidebar-container',
 
-    topBar: '.roam-topbar',
+    topBar: '.rm-topbar',
 
     foldButton: '.rm-caret',
     highlight: '.block-highlight-blue',
@@ -29,6 +30,9 @@ export const Selectors = {
     checkbox: '.check-container',
     externalLink: 'a',
     referenceItem: '.rm-reference-item',
+    inlineReference: '.rm-inline-reference',
+    zoomPath: '.rm-zoom-path',
+    zoomItemContent: '.rm-zoom-item-content',
     breadcrumbsContainer: '.zoom-mentions-view',
     pageReferenceItem: '.rm-ref-page-view',
     pageReferenceLink: '.rm-ref-page-view-title a span',