Merge pull request #867 from trey-wallis/dev

8.13.2

Author: decaf-dev

manifest.json

@@ -9,5 +9,5 @@
 	"fundingUrl": {
 		"Buymeacoffee": "https://www.buymeacoffee.com/treywallis"
 	},
-	"version": "8.13.1"
+	"version": "8.13.2"
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-dataloom",
-	"version": "8.13.1",
+	"version": "8.13.2",
 	"description": "Weave together data from diverse sources into a cohesive table view. Inspired by Excel Spreadsheets and Notion.so.",
 	"main": "main.js",
 	"scripts": {

src/main.ts

@@ -22,7 +22,6 @@ import {
 import { LOOM_EXTENSION } from "./data/constants";
 import { createLoomFile } from "src/data/loom-file";
 import { hasDarkTheme } from "./shared/render/utils";
-import { removeCurrentFocusClass } from "./react/loom-app/app/hooks/use-focus/utils";
 import {
 	loadPreviewModeApps,
 	purgeEmbeddedLoomApps,
@@ -203,8 +202,7 @@ export default class DataLoomPlugin extends Plugin {
 		this.registerDomEvent(document, "click", () => {
 			log(this.settings.shouldDebug, "main handleClick");
 
-			//Clear the focus-visible class from the last focused element
-			removeCurrentFocusClass();
+			EventManager.getInstance().emit("clear-menu-trigger-focus");
 			EventManager.getInstance().emit("global-click");
 		});
 

src/react/loom-app/app/hooks/use-app-events/index.tsx

@@ -1,23 +1,23 @@
 import React from "react";
 import { useMenuOperations } from "src/react/shared/menu-provider/hooks";
 import { useLogger } from "src/shared/logger";
-import { removeCurrentFocusClass } from "../use-focus/utils";
 
 export const useAppEvents = () => {
-	const { topMenu, onRequestClose } = useMenuOperations();
+	const { topMenu, onRequestClose, onClearMenuTriggerFocus } =
+		useMenuOperations();
 	const logger = useLogger();
 	const handleClick = React.useCallback(
 		(e: React.MouseEvent) => {
 			logger("App handleClick");
 			e.stopPropagation();
 
 			if (!topMenu) {
-				removeCurrentFocusClass();
+				onClearMenuTriggerFocus();
 				return;
 			}
 			onRequestClose(topMenu.id, "close-on-save");
 		},
-		[topMenu, logger, onRequestClose]
+		[topMenu, logger, onRequestClose, onClearMenuTriggerFocus]
 	);
 	return {
 		onClick: handleClick,

src/react/loom-app/app/hooks/use-focus/index.tsx

@@ -3,7 +3,6 @@ import {
 	getNumBottomBarFocusableEl,
 	getNumOptionBarFocusableEls,
 	isArrowKeyPressed,
-	removeCurrentFocusClass,
 	getFocusLayerEl,
 	getFocusableEls,
 } from "src/react/loom-app/app/hooks/use-focus/utils";
@@ -25,13 +24,13 @@ export default function useFocus() {
 	const logger = useLogger();
 	const { reactAppId } = useAppMount();
 	const { loomState } = useLoomState();
-	const { topMenu } = useMenuOperations();
+	const { topMenu, onClearMenuTriggerFocus } = useMenuOperations();
 
 	function handleKeyDown(e: React.KeyboardEvent) {
 		logger("useFocus handleKeyDown");
 
 		if (e.key === "Tab") {
-			removeCurrentFocusClass();
+			onClearMenuTriggerFocus();
 
 			//Prevent default tab behavior which is to move focus to next element
 			//We will do that ourselves
@@ -110,7 +109,7 @@ export default function useFocus() {
 					}
 			}
 			if (elementToFocus !== null) {
-				removeCurrentFocusClass();
+				onClearMenuTriggerFocus();
 				(elementToFocus as HTMLElement).focus();
 			}
 		}

src/react/loom-app/app/hooks/use-focus/utils.ts

@@ -1,26 +1,6 @@
 import { LoomMenu } from "src/react/shared/menu-provider/types";
 import { findMenuTriggerEl } from "src/react/shared/menu-provider/utils";
 
-/**
- * Adds the dataloom-focusable--focused class to an element
- * We do this since because want to control the focus-visible class to appear when enter is pressed or we
- * click outside of the element
- * @param el - The element to add the focus-visible class to
- * @returns
- */
-export const addFocusClass = (el: HTMLElement | null) => {
-	el?.classList.add("dataloom-focusable--focused");
-};
-
-/**
- * Removes the dataloom-focusable--focused class from an element
- * There should only be one element with this class at a time
- */
-export const removeCurrentFocusClass = () => {
-	const el = document.querySelector(".dataloom-focusable--focused");
-	el?.classList.remove("dataloom-focusable--focused");
-};
-
 /**
  * Gets the top menu element.
  * If the top menu is null, then we return the app element.

src/react/loom-app/embed-cell/embed/index.tsx

@@ -6,8 +6,6 @@ import {
 } from "src/shared/loom-state/types/loom-state";
 import { appendOrReplaceFirstChild } from "src/shared/render/utils";
 
-import "./styles.css";
-
 interface Props {
 	isExternalLink: boolean;
 	content: string;

src/react/loom-app/embed-cell/embed/styles.css

@@ -2,4 +2,9 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
-}
+}
+
+.dataloom-embed-cell p {
+	margin: 0;
+	text-align: left;
+}

src/react/loom-app/embed-cell/styles.css

@@ -12,6 +12,7 @@ import { SourceAddHandler } from "../../../app/hooks/use-source/types";
 import { createFolderSource } from "src/shared/loom-state/loom-state-factory";
 import FolderSourceOptions from "./folder-source-options";
 import { AddSourceError } from "./types";
+import { normalizePath } from "obsidian";
 
 interface Props {
 	sources: Source[];
@@ -34,6 +35,9 @@ export default function AddSourceSubmenu({
 	const includeSubfoldersInputId = React.useId();
 
 	function handleAddClick() {
+		//Make sure that the path doesn't have a trailing slash
+		const formattedPath = normalizePath(path);
+
 		if (type === null) {
 			setError({
 				message: "Please select a type",
@@ -46,7 +50,7 @@ export default function AddSourceSubmenu({
 				inputId: pathInputId,
 			});
 			return;
-		} else if (alreadyHasSource(sources, type, path)) {
+		} else if (alreadyHasSource(sources, type, formattedPath)) {
 			setError({
 				message: "Source already exists",
 				inputId: pathInputId,
@@ -56,7 +60,7 @@ export default function AddSourceSubmenu({
 
 		let source: Source;
 		if (type === SourceType.FOLDER) {
-			source = createFolderSource(path, includeSubfolders);
+			source = createFolderSource(formattedPath, includeSubfolders);
 		} else {
 			setError({
 				message: "Source not supported",

src/react/loom-app/option-bar/sources-menu/add-source-submenu/index.tsx

@@ -82,14 +82,21 @@ export const useMenu = (
 };
 
 export const useMenuOperations = () => {
-	const { topMenu, canOpen, onCloseAll, onRequestClose, onClose } =
-		useMenuContext();
+	const {
+		topMenu,
+		canOpen,
+		onCloseAll,
+		onRequestClose,
+		onClose,
+		onClearMenuTriggerFocus,
+	} = useMenuContext();
 
 	return {
 		topMenu,
 		canOpen,
 		onCloseAll,
 		onClose,
 		onRequestClose,
+		onClearMenuTriggerFocus,
 	};
 };

src/react/shared/menu-provider/hooks.ts

@@ -11,6 +11,7 @@ import {
 } from "./types";
 import { useLogger } from "src/shared/logger";
 import { getPositionFromEl } from "./utils";
+import EventManager from "src/shared/event/event-manager";
 
 interface ContextProps {
 	topMenu: LoomMenu | null;
@@ -40,6 +41,7 @@ interface ContextProps {
 	onPositionUpdate: (id: string, value: LoomMenuPosition) => void;
 	onCloseAll: () => void;
 	onCloseRequestClear: (id: string) => void;
+	onClearMenuTriggerFocus: () => void;
 }
 
 const MenuContext = React.createContext<ContextProps | null>(null);
@@ -68,6 +70,23 @@ export default function MenuProvider({ children }: Props) {
 
 	const logger = useLogger();
 
+	const clearMenuTriggerFocus = React.useCallback(() => {
+		logger("MenuProvider clearMenuTriggerFocus");
+		setFocusedMenuTrigger(null);
+	}, [logger]);
+
+	React.useEffect(() => {
+		EventManager.getInstance().on(
+			"clear-menu-trigger-focus",
+			clearMenuTriggerFocus
+		);
+		return () =>
+			EventManager.getInstance().off(
+				"clear-menu-trigger-focus",
+				clearMenuTriggerFocus
+			);
+	}, [clearMenuTriggerFocus]);
+
 	function handleOpen(
 		parentComponentId: string,
 		level: LoomMenuLevel,
@@ -118,11 +137,6 @@ export default function MenuProvider({ children }: Props) {
 		[logger]
 	);
 
-	function clearMenuTriggerFocus() {
-		logger("MenuProvider clearMenuTriggerFocus");
-		setFocusedMenuTrigger(null);
-	}
-
 	const handleClose = React.useCallback(
 		(id: string) => {
 			logger("MenuProvider onClose");
@@ -253,6 +267,7 @@ export default function MenuProvider({ children }: Props) {
 				onPositionUpdate: handlePositionUpdate,
 				onCloseAll: handleCloseAll,
 				onCloseRequestClear: handleCloseRequestClear,
+				onClearMenuTriggerFocus: clearMenuTriggerFocus,
 			}}
 		>
 			{children}

src/react/shared/menu-provider/index.tsx

@@ -69,6 +69,9 @@ const MenuTrigger = React.forwardRef<HTMLDivElement, Props>(
 				if (!topMenu) return;
 				onRequestClose(topMenu?.id, "close-on-save");
 			} else if (e.key === "Backspace") {
+				//Stop propagation to the global event
+				//This prevents the focused from being lost
+				e.stopPropagation();
 				onBackspaceDown?.();
 			} else if (e.key.length === 1) {
 				if (

src/react/shared/menu-trigger/index.tsx

@@ -14,6 +14,7 @@ export type DataLoomEvent =
 	| "global-keydown"
 	| "download-csv"
 	| "download-markdown"
-	| "property-type-change";
+	| "property-type-change"
+	| "clear-menu-trigger-focus";
 
 export type EventCallback = (...data: any[]) => void;

src/shared/event/types.ts

@@ -145,5 +145,6 @@
 	"8.12.1": "1.2.0",
 	"8.12.2": "1.4.0",
 	"8.13.0": "1.4.0",
-	"8.13.1": "1.4.0"
+	"8.13.1": "1.4.0",
+	"8.13.2": "1.4.0"
 }