Merge pull request #102 from mProjectsCode/main

Fixes for FR #78, #59, #47 and partially #44

package.json

@@ -20,7 +20,7 @@
     "@rollup/plugin-typescript": "^6.0.0",
     "@types/node": "^14.14.2",
     "eslint": "^8.33.0",
-    "obsidian": "^0.12.17",
+    "obsidian": "^1.1.1",
     "prettier": "^2.8.3",
     "rollup": "^2.32.1",
     "tslib": "^2.0.3",

src/SettingHandlers.ts

@@ -67,8 +67,13 @@ export interface Heading extends Meta {
 	resetFn?: () => void;
 }
 
+export interface InfoText extends Meta {
+	markdown?: boolean;
+}
+
 export interface ClassToggle extends Meta {
 	default?: boolean;
+	addCommand?: boolean;
 }
 
 export interface SelectOption {
@@ -142,6 +147,7 @@ export interface VariableThemedColor extends Meta {
 
 export type CSSSetting =
 	| Heading
+	| InfoText
 	| ClassToggle
 	| ClassMultiToggle
 	| VariableText
@@ -154,5 +160,6 @@ export type CSSSetting =
 export interface ParsedCSSSettings {
 	name: string;
 	id: string;
+	collapsed: boolean;
 	settings: Array<CSSSetting>;
 }

src/SettingsManager.ts

@@ -193,11 +193,11 @@ function getCSSVariables(
 
 		if (!section) continue;
 
-		const setting = config[sectionId][settingId];
+		const setting: CSSSetting = config[sectionId][settingId];
 
 		if (!setting) continue;
 
-		const value = settings[key];
+		const value: SettingValue = settings[key];
 
 		switch (setting.type) {
 			case SettingType.VARIABLE_NUMBER:

src/css/settings.css

@@ -189,4 +189,12 @@
     width: 0 !important;
     height: 0 !important;
     pointer-events: none;
+}
+
+.style-settings-info-text .style-settings-markdown :first-child {
+    margin-top: 0;
+}
+
+.style-settings-info-text .style-settings-markdown :last-child {
+    margin-bottom: 0;
 }

src/main.ts

@@ -4,7 +4,7 @@ import './css/settings.css';
 
 import { Plugin } from 'obsidian';
 import { CSSSettingsManager } from './SettingsManager';
-import { ParsedCSSSettings } from './SettingHandlers';
+import { ClassToggle, ParsedCSSSettings } from './SettingHandlers';
 import yaml from 'js-yaml';
 import detectIndent from 'detect-indent';
 
@@ -18,6 +18,7 @@ import {
 	settingRegExp,
 	SettingsSeachResource,
 } from './Utils';
+import { SettingType } from './settingsView/SettingComponents/types';
 
 export default class CSSSettingsPlugin extends Plugin {
 	settingsManager: CSSSettingsManager;
@@ -103,6 +104,7 @@ export default class CSSSettingsPlugin extends Plugin {
 				);
 			});
 			this.settingsManager.initClasses();
+			this.registerSettingCommands();
 		}, 100);
 	}
 
@@ -223,6 +225,47 @@ export default class CSSSettingsPlugin extends Plugin {
 		return settings;
 	}
 
+	private registerSettingCommands() {
+		for (const section of this.settingsList) {
+			for (const setting of section.settings) {
+				if (
+					setting.type === SettingType.CLASS_TOGGLE &&
+					(setting as ClassToggle).addCommand
+				) {
+					this.addClassToggleCommand(section, setting as ClassToggle);
+				}
+			}
+		}
+	}
+
+	private addClassToggleCommand(
+		section: ParsedCSSSettings,
+		setting: ClassToggle
+	) {
+		this.addCommand({
+			id: `settings-search-toggle-${section.id}-${setting.id}`,
+			name: `Toggle ${setting.title}`,
+			callback: () => {
+				const value = !(this.settingsManager.getSetting(
+					section.id,
+					setting.id
+				) as boolean);
+				this.settingsManager.setSetting(section.id, setting.id, value);
+
+				if (value) {
+					document.body.classList.add(setting.id);
+				} else {
+					document.body.classList.remove(setting.id);
+				}
+
+				this.settingsTab.settingsMarkup.rerender();
+				for (const leaf of this.app.workspace.getLeavesOfType(viewType)) {
+					(leaf.view as SettingsView).settingsMarkup.rerender();
+				}
+			},
+		});
+	}
+
 	onunload() {
 		this.lightEl.remove();
 		this.darkEl.remove();
@@ -245,13 +288,11 @@ export default class CSSSettingsPlugin extends Plugin {
 
 	async activateView() {
 		this.deactivateView();
-		const leaf = this.app.workspace.createLeafBySplit(
-			this.app.workspace.activeLeaf,
-			'vertical'
-		);
+		const leaf = this.app.workspace.getLeaf('tab');
 
 		await leaf.setViewState({
 			type: viewType,
+			active: true,
 		});
 
 		(leaf.view as SettingsView).settingsMarkup.setSettings(

src/settingsView/SettingComponents/HeadingSettingComponent.ts

@@ -1,7 +1,7 @@
 import { AbstractSettingComponent } from './AbstractSettingComponent';
 import { setIcon, Setting } from 'obsidian';
 import { getDescription, getTitle } from '../../Utils';
-import { CSSSetting, Heading, Meta } from '../../SettingHandlers';
+import { CSSSetting, Heading } from '../../SettingHandlers';
 import { SettingType } from './types';
 import { CSSSettingsManager } from 'src/SettingsManager';
 import { ClassToggleSettingComponent } from './ClassToggleSettingComponent';
@@ -12,6 +12,7 @@ import { VariableNumberSliderSettingComponent } from './VariableNumberSliderSett
 import { VariableSelectSettingComponent } from './VariableSelectSettingComponent';
 import { VariableColorSettingComponent } from './VariableColorSettingComponent';
 import { VariableThemedColorSettingComponent } from './VariableThemedColorSettingComponent';
+import { InfoTextSettingComponent } from './InfoTextSettingComponent';
 
 export function createSettingComponent(
 	sectionId: string,
@@ -28,6 +29,14 @@ export function createSettingComponent(
 			settingsManager,
 			isView
 		);
+	} else if (setting.type === SettingType.INFO_TEXT) {
+		return new InfoTextSettingComponent(
+			sectionId,
+			sectionName,
+			setting,
+			settingsManager,
+			isView
+		);
 	} else if (setting.type === SettingType.CLASS_TOGGLE) {
 		return new ClassToggleSettingComponent(
 			sectionId,
@@ -305,7 +314,7 @@ export function buildSettingComponentTree(opts: {
 	isView: boolean;
 	sectionId: string;
 	sectionName: string;
-	settings: Meta[];
+	settings: CSSSetting[];
 	settingsManager: CSSSettingsManager;
 }): HeadingSettingComponent {
 	const { isView, sectionId, settings, settingsManager, sectionName } = opts;
@@ -329,9 +338,15 @@ export function buildSettingComponentTree(opts: {
 					currentHeading = currentHeading.parent;
 				}
 
-				currentHeading = currentHeading.parent.addChild(
-					newHeading
-				) as HeadingSettingComponent;
+				if (currentHeading.setting.id === root.setting.id) {
+					currentHeading = currentHeading.addChild(
+						newHeading
+					) as HeadingSettingComponent;
+				} else {
+					currentHeading = currentHeading.parent.addChild(
+						newHeading
+					) as HeadingSettingComponent;
+				}
 			} else if (newHeading.level === currentHeading.setting.level) {
 				currentHeading = currentHeading.parent.addChild(
 					newHeading

src/settingsView/SettingComponents/InfoTextSettingComponent.ts

@@ -0,0 +1,40 @@
+import { AbstractSettingComponent } from './AbstractSettingComponent';
+import { MarkdownRenderer, Setting } from 'obsidian';
+import { InfoText } from '../../SettingHandlers';
+import { getDescription, getTitle } from '../../Utils';
+
+export class InfoTextSettingComponent extends AbstractSettingComponent {
+	settingEl: Setting;
+
+	setting: InfoText;
+
+	render(containerEl: HTMLElement): void {
+		const title = getTitle(this.setting);
+		const description = getDescription(this.setting);
+
+		this.settingEl = new Setting(containerEl);
+		this.settingEl.setClass('style-settings-info-text');
+		if (title) {
+			this.settingEl.setName(title);
+		}
+		if (description) {
+			if (this.setting.markdown) {
+				MarkdownRenderer.renderMarkdown(
+					description,
+					this.settingEl.descEl,
+					'',
+					undefined
+				);
+				this.settingEl.descEl.addClass('style-settings-markdown');
+			} else {
+				this.settingEl.setDesc(description);
+			}
+		}
+
+		this.settingEl.settingEl.dataset.id = this.setting.id;
+	}
+
+	destroy(): void {
+		this.settingEl?.settingEl.remove();
+	}
+}

src/settingsView/SettingComponents/types.ts

@@ -1,5 +1,6 @@
 export const SettingType = {
 	HEADING: 'heading',
+	INFO_TEXT: 'info-text',
 	CLASS_TOGGLE: 'class-toggle',
 	CLASS_SELECT: 'class-select',
 	VARIABLE_TEXT: 'variable-text',

src/settingsView/SettingsMarkup.ts

@@ -175,7 +175,7 @@ export class SettingsMarkup {
 					type: 'heading',
 					title: s.name,
 					level: 0,
-					collapsed: true,
+					collapsed: s.collapsed ?? true,
 					resetFn: () => {
 						plugin.settingsManager.clearSection(s.id);
 						this.generate(this.settings);
@@ -184,17 +184,21 @@ export class SettingsMarkup {
 				...s.settings,
 			];
 
-			const settingsComponentTree = buildSettingComponentTree({
-				isView: this.isView,
-				sectionId: s.id,
-				sectionName: s.name,
-				settings: options,
-				settingsManager: plugin.settingsManager,
-			});
+			try {
+				const settingsComponentTree = buildSettingComponentTree({
+					isView: this.isView,
+					sectionId: s.id,
+					sectionName: s.name,
+					settings: options,
+					settingsManager: plugin.settingsManager,
+				});
 
-			settingsComponentTree.render(this.settingsContainerEl);
+				settingsComponentTree.render(this.settingsContainerEl);
 
-			this.settingsComponentTrees.push(settingsComponentTree);
+				this.settingsComponentTrees.push(settingsComponentTree);
+			} catch (e) {
+				console.error('Style Settings | Failed to render section', e);
+			}
 		}
 	}
 
@@ -221,4 +225,10 @@ export class SettingsMarkup {
 			settingsComponentTree.render(this.settingsContainerEl);
 		}
 	}
+
+	rerender() {
+		for (const settingsComponentTree of this.settingsComponentTrees) {
+			settingsComponentTree.render(this.settingsContainerEl);
+		}
+	}
 }