Merge branch 'release/v1.4.0'

changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.4.0
+### Added
+- Setting for whether the first item should be selected when opening the palette or not (#12)
+- Setting configuring the max. depth of the displayed items (#14)
+
+
 ## 1.3.1
 ### Added
 - Show notification when current page is not supported (e.g. `Journals`)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "logseq-plugin-jump-to-block",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "main": "dist/index.html",
   "logseq": {
     "id": "logseq-plugin-jump-to-block"

readme.md

@@ -4,12 +4,10 @@
 
 It lets you fuzzy search the 'table of contents' of the current page and scroll to the selected block. If the any parent blocks of the selected block are collapsed, they will be expanded.
 
+<a href="https://www.buymeacoffee.com/freder" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 50px !important"></a>
+
 ---
 
 Execute the `Jump to block…` command via the command palette, or via keyboard shortcut (default: `mod-t`).
 
 <img src="./screenrecording.gif" alt="screen recording" width="700" />
-
----
-
-<a href="https://www.buymeacoffee.com/freder" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 50px !important"></a>

src/components/App.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import type { BlockEntity } from '@logseq/libs/dist/LSPlugin.user';
+import type { InitalSelectionOption } from '../types';
 
 import React, { useEffect, useState, Fragment } from 'react';
 import CommandPalette, { Command } from 'react-command-palette';
@@ -11,6 +12,7 @@ import { prepareLabel } from '../utils';
 // @ts-ignore
 import theme from '../../node_modules/react-command-palette/dist/themes/sublime-theme';
 import '../../node_modules/react-command-palette/dist/themes/sublime.css';
+import { defaultMaxDepth, initialSelectionOptionDefault } from '../constants';
 
 
 type PathItem = {
@@ -106,6 +108,52 @@ const makeCommands = (
 };
 
 
+const makeStyles = () => {
+	const computedStyles = getComputedStyle(
+		window.parent.document.documentElement
+	);
+	const bg = computedStyles.getPropertyValue(
+		'--ls-secondary-background-color'
+	);
+	const bgSelection = computedStyles.getPropertyValue(
+		'--ls-a-chosen-bg'
+	);
+	const text = computedStyles.getPropertyValue(
+		'--ls-primary-text-color'
+	);
+	const textSelection = computedStyles.getPropertyValue(
+		'--ls-secondary-text-color'
+	);
+	const input = computedStyles.getPropertyValue(
+		'--ls-primary-background-color'
+	);
+	return css`
+		.sublime-modal, .sublime-suggestionsList .sublime-suggestion {
+			background: ${bg} !important;
+			color: ${text} !important;
+		}
+		.sublime-suggestionsList .sublime-suggestionHighlighted {
+			background: ${bgSelection} !important;
+			color: ${textSelection} !important;
+		}
+		.sublime-suggestion {
+			background: ${bgSelection} !important;
+		}
+		.sublime-input {
+			background: ${input} !important;
+			color: ${text} !important;
+		}
+		*::-webkit-scrollbar-thumb {
+			background-color: ${bgSelection} !important;
+			border: solid 3px ${bg} !important;
+		}
+		.indentation {
+			color: ${bgSelection} !important;
+		}
+	`;
+};
+
+
 function App() {
 	const [open, setOpen] = useState(false);
 	const [items, setItems] = useState<Command[]>([]);
@@ -142,7 +190,10 @@ function App() {
 						return closeHandler();
 					}
 
-					const maxDepth = 3; // TODO: make this configurable
+					const maxDepth: number = Math.max(
+						0,
+						logseq.settings?.maxDepth || defaultMaxDepth
+					);
 					const items = makeCommands(blocks, maxDepth);
 					setItems(items);
 					setOpen(true);
@@ -159,55 +210,19 @@ function App() {
 		[]
 	);
 
-	const computedStyles = getComputedStyle(
-		window.parent.document.documentElement
-	);
-	const bg = computedStyles.getPropertyValue(
-		'--ls-secondary-background-color'
-	);
-	const bgSelection = computedStyles.getPropertyValue(
-		'--ls-a-chosen-bg'
-	);
-	const text = computedStyles.getPropertyValue(
-		'--ls-primary-text-color'
-	);
-	const textSelection = computedStyles.getPropertyValue(
-		'--ls-secondary-text-color'
-	);
-	const input = computedStyles.getPropertyValue(
-		'--ls-primary-background-color'
-	);
+	const initialSelection: InitalSelectionOption = logseq.settings?.initialSelection || initialSelectionOptionDefault;
+	const highlightFirstSuggestion = initialSelection === 'First block';
+	// TODO: implement 'Current block'
+	const defaultInputValue = '';
 
 	return <Fragment>
-		<Global styles={css`
-			.sublime-modal, .sublime-suggestionsList .sublime-suggestion {
-				background: ${bg} !important;
-				color: ${text} !important;
-			}
-			.sublime-suggestionsList .sublime-suggestionHighlighted {
-				background: ${bgSelection} !important;
-				color: ${textSelection} !important;
-			}
-			.sublime-suggestion {
-				background: ${bgSelection} !important;
-			}
-			.sublime-input {
-				background: ${input} !important;
-				color: ${text} !important;
-			}
-			*::-webkit-scrollbar-thumb {
-				background-color: ${bgSelection} !important;
-				border: solid 3px ${bg} !important;
-			}
-			.indentation {
-				color: ${bgSelection} !important;
-			}
-		`} />
+		<Global styles={makeStyles} />
 		<CommandPalette
 			open={open}
 			closeOnSelect
 			alwaysRenderCommands
-			highlightFirstSuggestion
+			highlightFirstSuggestion={highlightFirstSuggestion}
+			defaultInputValue={defaultInputValue}
 			resetInputOnOpen
 			placeholder="Type to filter…"
 			hotKeys={[]}

src/constants.ts

@@ -0,0 +1,4 @@
+import type { InitalSelectionOption } from './types';
+
+export const initialSelectionOptionDefault: InitalSelectionOption = 'Nothing';
+export const defaultMaxDepth = 3;

src/main.tsx

@@ -2,24 +2,30 @@ import type {
 	SettingSchemaDesc,
 	SimpleCommandKeybinding
 } from '@logseq/libs/dist/LSPlugin';
+import type { InitalSelectionOption } from './types';
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import '@logseq/libs';
 
 import { makeToolbarIcon } from './toolbar';
+import { defaultMaxDepth, initialSelectionOptionDefault } from './constants';
 import App from './components/App';
 
 
+
 const cmdKey = 'jumpToBlock';
 const cmdLabel = 'Jump to block…';
 const settingsKey = cmdKey;
 const settingsLabel = cmdLabel;
+const initialSelectionOptions: InitalSelectionOption[] = [
+	/* 'Current block', */ 'First block', 'Nothing'
+];
 const settings: SettingSchemaDesc[] = [
 	{
 		key: settingsKey,
 		title: settingsLabel,
-		description: 'Jump to a block within the current page',
+		description: 'Keybinding',
 		default: 'mod+t',
 		type: 'string',
 	},
@@ -30,6 +36,22 @@ const settings: SettingSchemaDesc[] = [
 		default: false,
 		type: 'boolean',
 	},
+	{
+		key: 'initialSelection',
+		title: 'What to select when opening the palette',
+		description: '',
+		default: initialSelectionOptionDefault,
+		type: 'enum',
+		enumChoices: initialSelectionOptions as string[],
+		enumPicker: 'radio',
+	},
+	{
+		key: 'maxDepth',
+		title: 'Maximum block depth',
+		description: 'Limits the depth of blocks to be shown in the palette (0 = root-level)',
+		default: defaultMaxDepth,
+		type: 'number',
+	},
 ];
 
 
@@ -49,17 +71,16 @@ const main = async () => {
 		// </React.StrictMode>
 	);
 
-	// auto open
-	const PageSet = new Set();
+	// auto open palette when opening a page
+	let pagePath = '';
 	logseq.App.onRouteChanged(async (event) => {
 		const autoOpen = logseq.settings?.autoOpen || '';
 		if (autoOpen === true) {
-			if (event && event.template === '/page/:name') {
-				if (!PageSet.has(event.path)) {
-					PageSet.clear();
+			if (event.template === '/page/:name') {
+				if (pagePath !== event.path) {
 					logseq.showMainUI({ autoFocus: false });
 				}
-				await PageSet.add(event.path);
+				pagePath = event.path;
 			}
 		}
 	});

src/types/index.d.ts

@@ -0,0 +1,2 @@
+// TODO: 'Current block'
+export type InitalSelectionOption = 'First block' | 'Nothing';