@mnaoumov/create-obsidian-plugin 1.0.1 → 1.1.0

package/templates/docs-showcase/files/src/docs/plugins/releasing/plugin-guidelines/15-no-hardcoded-styling.ts

@@ -0,0 +1,21 @@
+// Docs: Plugin guidelines > Styling > No hardcoded styling
+// https://docs.obsidian.md/Plugins/Releasing/Plugin+guidelines#No+hardcoded+styling
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/Releasing/Plugin%20guidelines.md?plain=1#L315
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+
+async function snippet(context: DocsContext) {
+  const containerEl = context.getContainerEl();
+  {
+    const el = containerEl.createDiv();
+    el.style.color = 'white';
+    el.style.backgroundColor = 'red';
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet(context));
+}

package/templates/docs-showcase/files/src/docs/plugins/releasing/plugin-guidelines/16-no-hardcoded-styling.ts

@@ -0,0 +1,19 @@
+// Docs: Plugin guidelines > Styling > No hardcoded styling (2)
+// https://docs.obsidian.md/Plugins/Releasing/Plugin+guidelines#No+hardcoded+styling
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/Releasing/Plugin%20guidelines.md?plain=1#L325
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+
+async function snippet(context: DocsContext) {
+  const containerEl = context.getContainerEl();
+  {
+    const el = containerEl.createDiv({cls: 'warning-container'});
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet(context));
+}

package/templates/docs-showcase/files/src/docs/plugins/releasing/plugin-guidelines/17-no-hardcoded-styling.ts

@@ -0,0 +1,14 @@
+// Docs: Plugin guidelines > Styling > No hardcoded styling (3)
+// https://docs.obsidian.md/Plugins/Releasing/Plugin+guidelines#No+hardcoded+styling
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/Releasing/Plugin%20guidelines.md?plain=1#L331
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+
+const css = ".warning-container {\n\tcolor: var(--text-normal);\n\tbackground-color: var(--background-modifier-error);\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/plugins/releasing/plugin-guidelines/18-prefer-async-await-over-promise.ts

@@ -0,0 +1,24 @@
+// Docs: Plugin guidelines > TypeScript > Prefer async/await over Promise
+// https://docs.obsidian.md/Plugins/Releasing/Plugin+guidelines#Prefer+async%2Fawait+over+Promise
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/Releasing/Plugin%20guidelines.md?plain=1#L353
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { requestUrl } from 'obsidian';
+
+function test(): Promise<string | null> {
+  return requestUrl('https://example.com')
+    .then(res => res.text)
+    .catch(e => {
+      console.log(e);
+      return null;
+    });
+}
+
+export { test };
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await test(), 'test()');
+}

package/templates/docs-showcase/files/src/docs/plugins/releasing/plugin-guidelines/19-prefer-async-await-over-promise.ts

@@ -0,0 +1,27 @@
+// Docs: Plugin guidelines > TypeScript > Prefer async/await over Promise (2)
+// https://docs.obsidian.md/Plugins/Releasing/Plugin+guidelines#Prefer+async%2Fawait+over+Promise
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/Releasing/Plugin%20guidelines.md?plain=1#L366
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { requestUrl } from 'obsidian';
+
+async function AsyncTest(): Promise<string | null> {
+  try {
+    let res = await requestUrl('https://example.com');
+    let text = await res.text;
+    return text;
+  }
+  catch (e) {
+    console.log(e);
+    return null;
+  }
+}
+
+export { AsyncTest };
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await AsyncTest(), 'AsyncTest()');
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/commands/01-intro.ts

@@ -0,0 +1,25 @@
+// Docs: Commands
+// https://docs.obsidian.md/Plugins/User+interface/Commands
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Commands.md?plain=1#L7
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { Plugin } from 'obsidian';
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    this.addCommand({
+      id: 'print-greeting-to-console',
+      name: 'Print greeting to console',
+      callback: () => {
+        console.log('Hey, you!');
+      },
+    });
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleChildPlugin(ExamplePlugin);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/commands/03-editor-commands.ts

@@ -0,0 +1,27 @@
+// Docs: Commands > Editor commands
+// https://docs.obsidian.md/Plugins/User+interface/Commands#Editor+commands
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Commands.md?plain=1#L63
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext, DocsThis } from '../../../host.ts';
+import { Editor, MarkdownFileInfo, MarkdownView } from 'obsidian';
+
+async function snippet(this: DocsThis, context: DocsContext) {
+  {
+    this.addCommand({
+      id: 'example-command',
+      name: 'Example command',
+      editorCallback: (editor: Editor, ctx: MarkdownView | MarkdownFileInfo) => {
+        const sel = editor.getSelection()
+
+        console.log(`You have selected: ${sel}`);
+      },
+    });
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet.call(context.thisValue(), context));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/commands/05-hot-keys.ts

@@ -0,0 +1,25 @@
+// Docs: Commands > Hot keys
+// https://docs.obsidian.md/Plugins/User+interface/Commands#Hot+keys
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Commands.md?plain=1#L109
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext, DocsThis } from '../../../host.ts';
+
+async function snippet(this: DocsThis, context: DocsContext) {
+  {
+    this.addCommand({
+      id: 'example-command',
+      name: 'Example command',
+      hotkeys: [{ modifiers: ['Mod', 'Shift'], key: 'A' }],
+      callback: () => {
+        console.log('Hey, you!');
+      },
+    });
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet.call(context.thisValue(), context));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/context-menus/01-intro.ts

@@ -0,0 +1,41 @@
+// Docs: Context menus
+// https://docs.obsidian.md/Plugins/User+interface/Context+menus
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Context%20menus.md?plain=1#L3
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { Menu, Notice, Plugin } from 'obsidian';
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    this.addRibbonIcon('dice', 'Open menu', (event) => {
+      const menu = new Menu();
+
+      menu.addItem((item) =>
+        item
+          .setTitle('Copy')
+          .setIcon('documents')
+          .onClick(() => {
+            new Notice('Copied');
+          })
+      );
+
+      menu.addItem((item) =>
+        item
+          .setTitle('Paste')
+          .setIcon('paste')
+          .onClick(() => {
+            new Notice('Pasted');
+          })
+      );
+
+      menu.showAtMouseEvent(event);
+    });
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleChildPlugin(ExamplePlugin);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/html-elements/02-create-html-elements-using-createel.ts

@@ -0,0 +1,19 @@
+// Docs: HTML elements > Create HTML elements using createEl()
+// https://docs.obsidian.md/Plugins/User+interface/HTML+elements#Create+HTML+elements+using+%60createEl()%60
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/HTML%20elements.md?plain=1#L31
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+
+async function snippet(context: DocsContext) {
+  const containerEl = context.getContainerEl();
+  {
+    containerEl.createEl('h1', { text: 'Heading 1' });
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet(context));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/html-elements/03-create-html-elements-using-createel.ts

@@ -0,0 +1,21 @@
+// Docs: HTML elements > Create HTML elements using createEl() (2)
+// https://docs.obsidian.md/Plugins/User+interface/HTML+elements#Create+HTML+elements+using+%60createEl()%60
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/HTML%20elements.md?plain=1#L37
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+
+async function snippet(context: DocsContext) {
+  const containerEl = context.getContainerEl();
+  {
+    const book = containerEl.createEl('div');
+    book.createEl('div', { text: 'How to Take Smart Notes' });
+    book.createEl('small', { text: 'Sönke Ahrens' });
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet(context));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/html-elements/04-style-your-elements.ts

@@ -0,0 +1,14 @@
+// Docs: HTML elements > Style your elements
+// https://docs.obsidian.md/Plugins/User+interface/HTML+elements#Style+your+elements
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/HTML%20elements.md?plain=1#L47
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+
+const css = ".book {\n  border: 1px solid var(--background-modifier-border);\n  padding: 10px;\n}\n\n.book__title {\n  font-weight: 600;\n}\n\n.book__author {\n  color: var(--text-muted);\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/html-elements/05-style-your-elements.ts

@@ -0,0 +1,21 @@
+// Docs: HTML elements > Style your elements (2)
+// https://docs.obsidian.md/Plugins/User+interface/HTML+elements#Style+your+elements
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/HTML%20elements.md?plain=1#L67
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+
+async function snippet(context: DocsContext) {
+  const containerEl = context.getContainerEl();
+  {
+    const book = containerEl.createEl('div', { cls: 'book' });
+    book.createEl('div', { text: 'How to Take Smart Notes', cls: 'book__title' });
+    book.createEl('small', { text: 'Sönke Ahrens', cls: 'book__author' });
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet(context));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/html-elements/06-conditional-styles.ts

@@ -0,0 +1,19 @@
+// Docs: HTML elements > Style your elements > Conditional styles
+// https://docs.obsidian.md/Plugins/User+interface/HTML+elements#Conditional+styles
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/HTML%20elements.md?plain=1#L81
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+
+async function snippet(context: DocsContext) {
+  const element = context.getContainerEl();
+  {
+    element.toggleClass('danger', status === 'error');
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet(context));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/icons/01-use-icons.ts

@@ -0,0 +1,20 @@
+// Docs: Icons > Use icons
+// https://docs.obsidian.md/Plugins/User+interface/Icons#Use+icons
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Icons.md?plain=1#L13
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { Plugin, setIcon } from 'obsidian';
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    const item = this.addStatusBarItem();
+    setIcon(item, 'info');
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleChildPlugin(ExamplePlugin);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/icons/02-use-icons.ts

@@ -0,0 +1,14 @@
+// Docs: Icons > Use icons (2)
+// https://docs.obsidian.md/Plugins/User+interface/Icons#Use+icons
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Icons.md?plain=1#L26
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+
+const css = "div {\n  --icon-size: var(--icon-size-m);\n}";
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleCss(css);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/icons/03-add-your-own-icon.ts

@@ -0,0 +1,23 @@
+// Docs: Icons > Add your own icon
+// https://docs.obsidian.md/Plugins/User+interface/Icons#Add+your+own+icon
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Icons.md?plain=1#L36
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { addIcon, Plugin } from 'obsidian';
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    addIcon('circle', `<circle cx="50" cy="50" r="50" fill="currentColor" />`);
+
+    this.addRibbonIcon('circle', 'Click me', () => {
+      console.log('Hello, you!');
+    });
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleChildPlugin(ExamplePlugin);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/modals/01-intro.ts

@@ -0,0 +1,20 @@
+// Docs: Modals
+// https://docs.obsidian.md/Plugins/User+interface/Modals
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Modals.md?plain=1#L3
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { App, Modal } from 'obsidian';
+
+export class ExampleModal extends Modal {
+  constructor(app: App) {
+    super(app);
+	this.setContent('Look at me, I\'m a modal! 👀')
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  context.openModal(new ExampleModal(context.app));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/modals/02-intro.ts

@@ -0,0 +1,26 @@
+// Docs: Modals (2)
+// https://docs.obsidian.md/Plugins/User+interface/Modals
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Modals.md?plain=1#L16
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { Plugin } from 'obsidian';
+import { ExampleModal } from './01-intro.ts';
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    this.addCommand({
+      id: 'display-modal',
+      name: 'Display modal',
+      callback: () => {
+        new ExampleModal(this.app).open();
+      },
+    });
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.toggleChildPlugin(ExamplePlugin);
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/modals/03-accept-user-input.ts

@@ -0,0 +1,38 @@
+// Docs: Modals > Accept user input
+// https://docs.obsidian.md/Plugins/User+interface/Modals#Accept+user+input
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Modals.md?plain=1#L39
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { App, Modal, Setting } from 'obsidian';
+
+export class ExampleModal extends Modal {
+  constructor(app: App, onSubmit: (result: string) => void) {
+    super(app);
+	this.setTitle('What\'s your name?');
+
+	let name = '';
+    new Setting(this.contentEl)
+      .setName('Name')
+      .addText((text) =>
+        text.onChange((value) => {
+          name = value;
+        }));
+
+    new Setting(this.contentEl)
+      .addButton((btn) =>
+        btn
+          .setButtonText('Submit')
+          .setCta()
+          .onClick(() => {
+            this.close();
+            onSubmit(name);
+          }));
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  context.openModal(new ExampleModal(context.app, (...values: unknown[]) => { void context.showResult(values); }));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/modals/04-accept-user-input.ts

@@ -0,0 +1,22 @@
+// Docs: Modals > Accept user input (2)
+// https://docs.obsidian.md/Plugins/User+interface/Modals#Accept+user+input
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Modals.md?plain=1#L70
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext, DocsThis } from '../../../host.ts';
+import { ExampleModal } from './03-accept-user-input.ts';
+import { Notice } from 'obsidian';
+
+async function snippet(this: DocsThis, context: DocsContext) {
+  {
+    new ExampleModal(this.app, (result) => {
+      new Notice(`Hello, ${result}!`);
+    }).open();
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  await context.showResult(await snippet.call(context.thisValue(), context));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/modals/05-select-from-list-of-suggestions.ts

@@ -0,0 +1,56 @@
+// Docs: Modals > Select from list of suggestions
+// https://docs.obsidian.md/Plugins/User+interface/Modals#Select+from+list+of+suggestions
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Modals.md?plain=1#L82
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import { App, Notice, SuggestModal } from 'obsidian';
+
+interface Book {
+  title: string;
+  author: string;
+}
+
+const ALL_BOOKS = [
+  {
+    title: 'How to Take Smart Notes',
+    author: 'Sönke Ahrens',
+  },
+  {
+    title: 'Thinking, Fast and Slow',
+    author: 'Daniel Kahneman',
+  },
+  {
+    title: 'Deep Work',
+    author: 'Cal Newport',
+  },
+];
+
+export class ExampleModal extends SuggestModal<Book> {
+  // Returns all available suggestions.
+  getSuggestions(query: string): Book[] {
+    return ALL_BOOKS.filter((book) =>
+      book.title.toLowerCase().includes(query.toLowerCase())
+    );
+  }
+
+  // Renders each suggestion item.
+  renderSuggestion(book: Book, el: HTMLElement) {
+    el.createEl('div', { text: book.title });
+    el.createEl('small', { text: book.author });
+  }
+
+  // Perform action on the selected suggestion.
+  onChooseSuggestion(book: Book, evt: MouseEvent | KeyboardEvent) {
+    new Notice(`Selected ${book.title}`);
+  }
+}
+
+export { ALL_BOOKS };
+export type { Book };
+
+export async function run(context: DocsContext): Promise<void> {
+  context.openModal(new ExampleModal(context.app));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/modals/06-approximate-string-matching-results.ts

@@ -0,0 +1,28 @@
+// Docs: Modals > Select from list of suggestions > Approximate string matching results
+// https://docs.obsidian.md/Plugins/User+interface/Modals#Approximate+string+matching+results
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Modals.md?plain=1#L132
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import {FuzzySuggestModal, Notice} from "obsidian";
+import { ALL_BOOKS, Book } from './05-select-from-list-of-suggestions.ts';
+
+export class ExampleSuggestModal extends FuzzySuggestModal<Book> {
+  getItems(): Book[] {
+    return ALL_BOOKS;
+  }
+
+  getItemText(book: Book): string {
+    return book.title;
+  }
+
+  onChooseItem(book: Book, evt: MouseEvent | KeyboardEvent) {
+    new Notice(`Selected ${book.title}`);
+  }
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  context.openModal(new ExampleSuggestModal(context.app));
+}

package/templates/docs-showcase/files/src/docs/plugins/user-interface/modals/07-custom-rendering-of-fuzzy-search-results.ts

@@ -0,0 +1,41 @@
+// Docs: Modals > Select from list of suggestions > Custom rendering of fuzzy search results
+// https://docs.obsidian.md/Plugins/User+interface/Modals#Custom+rendering+of+fuzzy+search+results
+// Source: https://github.com/obsidianmd/obsidian-developer-docs/blob/1c26772ac13d6e9870c865936d389fdfe694e742/en/Plugins/User%20interface/Modals.md?plain=1#L158
+// The code block is licensed under 0BSD (code examples of obsidianmd/obsidian-developer-docs, Copyright (C) 2020-2026 Dynalist Inc.).
+// The code block is upstream's, as the docs show it. create-obsidian-plugin generated the rest: the imports it
+// leaves out, the exports later blocks on the page take, and the `run(context)` host the command calls.
+
+import type { DocsContext } from '../../../host.ts';
+import {FuzzyMatch, FuzzySuggestModal, Notice, renderResults} from "obsidian";
+import { ALL_BOOKS, Book } from './05-select-from-list-of-suggestions.ts';
+
+export class ExampleSuggestModal extends FuzzySuggestModal<Book> {
+
+    //return a string representation, so there is something to search
+    getItemText(item: Book): string {
+       return item.title + " " + item.author;
+    }
+
+    getItems(): Book[] {
+       return ALL_BOOKS;
+    }
+
+    renderSuggestion(match: FuzzyMatch<Book>, el: HTMLElement) {
+       const titleEl = el.createDiv();
+       renderResults(titleEl, match.item.title, match.match);
+
+       // Only render the matches in the author name.
+       const authorEl = el.createEl('small');
+       const offset = -(match.item.title.length + 1);
+       renderResults(authorEl, match.item.author, match.match, offset);
+    }
+
+    onChooseItem(book: Book, evt: MouseEvent | KeyboardEvent): void {
+       new Notice(`Selected ${book.title}`);
+    }
+
+}
+
+export async function run(context: DocsContext): Promise<void> {
+  context.openModal(new ExampleSuggestModal(context.app));
+}