How to properly rename lists of sub-pages in a seettings tab?

Developers: Plugin & API
1

I started working with the new declarative settings API. I created a list of sub-pages. Every sub-page has a user defined name. Now my naive approach to renaming was a text field on each sub-page. But since the name also is the path of that sub-page, I run into the following problem:

  • If I run update(), the page I was on no longer exists. I stay on an empty sub-page with only the old name and the “back”-button in the header.

My goal would be to update the list on the main page and the name in the header of the open sub-page.

The only ideas I have don’t work or just aren’t good options:

  1. Not running update() immediately
  2. Ignores the “Save on change, not on submit”-convention
  3. There is no “navigation”-event to listen on
  4. refreshDomState() doesn’t help
  5. Creating a rename modal
    1. That just sounds way more confusing for users
    2. If the modal is nested in the sub-page, I’d expect to end up with the same empty sub-page
    3. If the modal is on the main-page, I need a “select existing sub-page”-dropdown. That sounds even worse
  6. Triggering a navigation to the new sub-page
    1. As far as I can see there is no API to trigger a navigation or even get the current path

Is there a good solution to this? Is there an intended way? Or is this a bug / missing feature?

If the path (or id of some sort) of the sub-page and the display name would be different things, I could keep the unique path/id the same and just change the display name. At least that would be the feature I would request, if there isn’t an existing solution.

Hope someone can help

2

Minimal repro:

import { Plugin, PluginSettingTab, SettingDefinitionItem, SettingGroupItem } from "obsidian";

export class SubPageListSettingsTab extends PluginSettingTab {
	private readonly subPages: string[] = [ "page1", "page2" ]

	constructor(plugin: Plugin) {
		super(plugin.app, plugin);
	}

	override getControlValue(key: string): unknown {
		return this.subPages[+key]
	}

	override setControlValue(key: string, value: unknown) {
		this.subPages[+key] = value as string
		this.update()
	}

	getSettingDefinitions(): SettingDefinitionItem[] {
		return [
			{
				type: "list",
				heading: 'Sub-Pages',
				items: this.subPages.map(
					(subPage, index) => this.getSubPages(subPage, index)
				)
			}
		];
	}

	private getSubPages(subPage: string, index: number): SettingGroupItem {
		return {
			type: "page",
			name: subPage,
			searchable: true,
			items: [
				{
					name: "Sub-Page Name",
					control: {
						type: "text",
						key: index.toString(),
						validate: (value: string) => !value ? "Name is empty" : undefined
					},
				},
			]
		}
	}
}
3

Sorry for multi-posting, but I can’t edit my posts (yet?). I had a mistake in the indentation and wanted to fix that for easier reference in replies:

The only ideas I have don’t work or just aren’t good options:

  1. Not running update() immediately
    1. Ignores the “Save on change, not on submit”-convention
    2. There is no “navigation”-event to listen on
    3. refreshDomState() doesn’t help
  2. Creating a rename modal
    1. That just sounds way more confusing for users
    2. If the modal is nested in the sub-page, I’d expect to end up with the same empty sub-page
    3. If the modal is on the main-page, I need a “select existing sub-page”-dropdown. That sounds even worse
  3. Triggering a navigation to the new sub-page
    1. As far as I can see there is no API to trigger a navigation or even get the current path