Add favicon and image assets for Obsidian help and developer documentation

.gitignore

@@ -0,0 +1,162 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+.cache
+.vscode

README.md

@@ -1,5 +1,5 @@
 ---
-title: Obsidian Qa Bot
+title: Obsidian QA Bot
 emoji: ⚡
 colorFrom: gray
 colorTo: gray

app.py

@@ -0,0 +1,177 @@
+import os
+import gradio as gr
+
+from langchain_community.document_loaders import TextLoader
+from langchain_text_splitters import RecursiveCharacterTextSplitter, Language
+
+from langchain.embeddings import CacheBackedEmbeddings
+from langchain.storage import LocalFileStore
+from langchain_community.embeddings import HuggingFaceEmbeddings
+from langchain_community.vectorstores import FAISS
+
+from langchain_community.retrievers import BM25Retriever
+from langchain.retrievers import EnsembleRetriever
+
+from langchain_cohere import CohereRerank
+from langchain.retrievers.contextual_compression import ContextualCompressionRetriever
+
+from langchain_core.prompts import PromptTemplate
+
+from langchain_core.callbacks.streaming_stdout import StreamingStdOutCallbackHandler
+from langchain_core.callbacks.manager import CallbackManager
+from langchain_core.runnables import ConfigurableField
+from langchain.callbacks.base import BaseCallbackHandler
+from langchain_core.output_parsers import StrOutputParser
+from langchain_core.runnables import RunnablePassthrough
+from langchain_groq import ChatGroq
+from langchain_community.llms import HuggingFaceHub
+from langchain_google_genai import GoogleGenerativeAI
+
+
+directories = ["./docs/obsidian-help", "./docs/obsidian-developer"]
+
+
+# 1. 문서 로더를 사용하여 모든 .md 파일을 로드합니다.
+md_documents = []
+for directory in directories:
+    # os.walk를 사용하여 root_dir부터 시작하는 모든 디렉토리를 순회합니다.
+    for dirpath, dirnames, filenames in os.walk(directory):
+        # 각 디렉토리에서 파일 목록을 확인합니다.
+        for file in filenames:
+            # 파일 확장자가 .md인지 확인하고, 경로 내 '*venv/' 문자열이 포함되지 않는지도 체크합니다.
+            if (file.endswith(".md")) and "*venv/" not in dirpath:
+                try:
+                    # TextLoader를 사용하여 파일의 전체 경로를 지정하고 문서를 로드합니다.
+                    loader = TextLoader(os.path.join(dirpath, file), encoding="utf-8")
+                    # 로드한 문서를 분할하여 documents 리스트에 추가합니다.
+                    md_documents.extend(loader.load())
+                except Exception:
+                    # 파일 로드 중 오류가 발생하면 이를 무시하고 계속 진행합니다.
+                    pass
+
+
+# 2. 청크 분할기를 생성합니다.
+# 청크 크기는 2000, 청크간 겹치는 부분은 200 문자로 설정합니다.
+md_splitter = RecursiveCharacterTextSplitter.from_language(
+    language=Language.MARKDOWN,
+    chunk_size=2000,
+    chunk_overlap=200,
+)
+md_docs = md_splitter.split_documents(md_documents)
+
+
+# 3. 임베딩 모델을 사용하여 문서의 임베딩을 계산합니다.
+# 허깅페이스 임베딩 모델 인스턴스를 생성합니다. 모델명으로 "BAAI/bge-m3 "을 사용합니다.
+model_name = "BAAI/bge-m3"
+model_kwargs = {"device": "mps"}
+encode_kwargs = {"normalize_embeddings": False}
+embeddings = HuggingFaceEmbeddings(
+    model_name=model_name,
+    model_kwargs=model_kwargs,
+    encode_kwargs=encode_kwargs,
+)
+
+# CacheBackedEmbeddings를 사용하여 임베딩 계산 결과를 캐시합니다.
+store = LocalFileStore("./.cache/")
+cached_embeddings = CacheBackedEmbeddings.from_bytes_store(
+    embeddings,
+    store,
+    namespace=embeddings.model_name,
+)
+
+# 4. FAISS 벡터 데이터베이스 인덱스를 생성하고 저장합니다.
+FAISS_DB_INDEX = "db_index"
+
+if os.path.exists(FAISS_DB_INDEX):
+    # 저장된 데이터베이스 인덱스가 이미 존재하는 경우, 해당 인덱스를 로드합니다.
+    db = FAISS.load_local(
+        FAISS_DB_INDEX,  # 로드할 FAISS 인덱스의 디렉토리 이름
+        cached_embeddings,  # 임베딩 정보를 제공
+        allow_dangerous_deserialization=True,  # 역직렬화를 허용하는 옵션
+    )
+else:
+    # combined_documents 문서들과 cached_embeddings 임베딩을 사용하여
+    # FAISS 데이터베이스 인스턴스를 생성합니다.
+    db = FAISS.from_documents(md_docs, cached_embeddings)
+    # 생성된 데이터베이스 인스턴스를 지정한 폴더에 로컬로 저장합니다.
+    db.save_local(folder_path=FAISS_DB_INDEX)
+
+
+# 5. Retrieval를 생성합니다.
+faiss_retriever = db.as_retriever(search_type="mmr", search_kwargs={"k": 10})
+
+# 문서 컬렉션을 사용하여 BM25 검색 모델 인스턴스를 생성합니다.
+bm25_retriever = BM25Retriever.from_documents(md_docs)  # 초기화에 사용할 문서 컬렉션
+bm25_retriever.k = 10  # 검색 시 최대 10개의 결과를 반환하도록 합니다.
+
+# EnsembleRetriever 인스턴스를 생성합니다.
+ensemble_retriever = EnsembleRetriever(
+    retrievers=[bm25_retriever, faiss_retriever],  # 사용할 검색 모델의 리스트
+    weights=[0.6, 0.4],  # 각 검색 모델의 결과에 적용할 가중치
+    search_type="mmr",  # 검색 결과의 다양성을 증진시키는 MMR 방식을 사��
+)
+
+# 6. CohereRerank 모델을 사용하여 재정렬을 수행합니다.
+compressor = CohereRerank(model="rerank-multilingual-v3.0")
+compression_retriever = ContextualCompressionRetriever(
+    base_compressor=compressor,
+    base_retriever=ensemble_retriever,
+)
+
+# 7. Prompt를 생성합니다.
+prompt = PromptTemplate.from_template(
+    """당신은 20년 경력의 옵시디언 노트앱 및 플러그인 개발 전문가로, 옵시디언 노트앱 사용법, 플러그인 및 테마 개발에 대한 깊은 지식을 가지고 있습니다. 당신의 주된 임무는 제공된 문서를 바탕으로 질문에 최대한 정확하고 상세하게 답변하는 것입니다. 
+문서에는 옵시디언 노트앱의 기본 사용법, 고급 기능, 플러그인 개발 방법, 테마 개발 가이드 등 옵시디언 노트앱을 깊이 있게 사용하고 확장하는 데 필요한 정보가 포함되어 있습니다. 
+귀하의 답변은 다음 지침에 따라야 합니다:
+1. 모든 답변은 명확하고 이해하기 쉬운 한국어로 제공되어야 합니다.
+2. 답변은 문서의 내용을 기반으로 해야 하며, 가능한 한 구체적인 정보를 포함해야 합니다.
+3. 문서 내에서 직접적인 답변을 찾을 수 없는 경우, "문서에는 해당 질문에 대한 구체적인 답변이 없습니다."라고 명시해 주세요.
+4. 가능한 경우, 답변과 관련된 문서의 구체적인 부분(예: 섹션 이름, 페이지 번호 등)을 출처로서 명시해 주세요.
+5. 질문에 대한 답변이 문서에 부분적으로만 포함되어 있는 경우, 가능한 한 많은 정보를 종합하여 답변해 주세요. 또한, 추가적인 연구나 참고자료가 필요할 수 있음을 언급해 주세요.
+
+#참고문서:
+{context}
+
+#질문:
+{question}
+
+#답변: 
+
+출처:
+- source1
+- source2
+- ...                             
+"""
+)
+
+
+# 7. chain를 생성합니다.
+llm = ChatGroq(
+    model_name="llama3-70b-8192",
+    temperature=0,
+).configurable_alternatives(
+    ConfigurableField(id="llm"),
+    default_key="llama3",
+    gemini=GoogleGenerativeAI(
+        model="gemini-pro",
+        temperature=0,
+    ),
+)
+
+rag_chain = (
+    {"context": compression_retriever, "question": RunnablePassthrough()}
+    | prompt
+    | llm
+    | StrOutputParser()
+)
+
+# # 8. chain를 실행합니다.
+def predict(message, history=None):
+    answer = rag_chain.invoke(message)
+    return answer
+
+gr.ChatInterface(
+    predict,
+    title="옵시디언 노트앱 및 플러그인 개발에 대해서 물어보세요!",
+    description="안녕하세요!\n저는 옵시디언 노트앱과 플러그인 개발에 대한 인공지능 QA봇입니다. 옵시디언 노트앱의 사용법, 고급 기능, 플러그인 및 테마 개발에 대해 깊은 지식을 가지고 있어요. 문서 작업, 정보 정리 또는 개발에 관한 도움이 필요하시면 언제든지 질문해주세요!",
+).launch()

docs/obsidian-developer/Developer policies.md

@@ -0,0 +1,55 @@
+Our goal for community plugins and themes is to make it easy for users to safely modify and expand the capabilities of Obsidian, while prioritizing private and offline usage of the app.
+
+All community plugins and themes added to the Obsidian directory must respect the following policies. Every plugin and theme is individually vetted before being included in the directory. Plugins and themes that don't follow these policies will be removed from the directory.
+
+## Policies
+
+### Not allowed
+
+Plugins and themes must not:
+
+- Obfuscate code to hide its purpose.
+- Insert dynamic ads that are loaded over the internet.
+- Insert static ads outside a plugin’s own interface.
+- Include client-side telemetry.
+- Themes may not load assets from the network. To bundle an asset, see [[Embed fonts and images in your theme|this guide]].
+
+### Disclosures
+
+The following are only allowed if clearly indicated in your README:
+
+- Payment is required for full access.
+- An account is required for full access.
+- Network use. Clearly explain which remote services are used and why they're needed.
+- Accessing files outside of Obsidian vaults. Clearly explain why this is needed.
+- Static ads such as banners and pop-up messages within the plugin's own interface.
+- Server-side telemetry. Link to a privacy policy that explains how the data is handled must be included.
+- Close sourced code. This will be handled on a case by case basis.
+
+### Copyright and licensing
+
+All community plugins and themes must follow these requirements:
+
+- Include a [LICENSE file](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository) and clearly indicate the license of your plugin or theme.
+- Comply with the original licenses of any code your plugin or theme makes use of, including attribution in the README if required.
+- Respect Obsidian's trademark policy. Don't use the "Obsidian" trademark in a way that could confuse users into thinking your plugin or theme is a first-party creation.
+
+## Reporting violations
+
+If you encounter a plugin or theme that violates the policies above, please let the developer know by opening a GitHub issue in their repository. Kindly check existing issues to see if it’s already reported.
+
+If the developer doesn’t response after 7 days, [contact the Obsidian team](https://help.obsidian.md/Help+and+support#Report+a+security+issue). For serious violations, you can contact our team immediately.
+
+## Removing plugins and themes
+
+In case of a policy violation, we may attempt to contact the developer and provide a reasonable timeframe for them to resolve the problem.
+
+If the problem isn't resolved by then, we'll remove plugins or themes from our directory.
+
+We may immediately remove a plugin or theme if:
+
+- The plugin or theme appears to be malicious.
+- The developer is uncooperative.
+- This is a repeated violation.
+
+In addition, we may also remove plugins or themes that have become unmaintained or severely broken.

docs/obsidian-developer/Home.md

@@ -0,0 +1,35 @@
+---
+cssClass: hide-title
+---
+# Obsidian Developer Docs
+
+Welcome to the official Obsidian Developer Documentation, where you can learn how to build plugins and themes for [Obsidian](https://obsidian.md/). For tips on how to use Obsidian, visit [the official Help site](https://help.obsidian.md/).
+
+## Plugins
+
+Build plugins to extend the existing functionality in Obsidian using TypeScript.
+
+- [[Build a plugin|Build your first plugin]]
+- [[Submit your plugin]]
+
+## Themes
+
+Design beautiful themes and snippets for Obsidian using CSS.
+
+- [[Build a theme|Build your first theme]]
+- [[Submit your theme]]
+- [[CSS variables]]
+
+## Join the developer community
+
+If you get stuck, or if you're looking for feedback, [join the community](https://obsidian.md/community).
+
+- `#plugin-dev` and `#theme-dev` channels on Discord.
+- [Developers & API](https://forum.obsidian.md/c/developers-api/14) and [Share & showcase](https://forum.obsidian.md/c/share-showcase/9) on the forum.
+
+## Contributing
+
+If you see any errors or room for improvement on this site, or want to submit a PR, feel free to open an issue on [our GitHub repository](https://github.com/obsidianmd/obsidian-developer-docs).
+Additional details are available on our [readme](https://github.com/obsidianmd/obsidian-developer-docs#readme).
+
+Thank you in advance for contributing!

docs/obsidian-developer/Plugins/Editor/Communicating with editor extensions.md

@@ -0,0 +1,53 @@
+Once you've built your editor extension, you might want to communicate with it from outside the editor. For example, through a [[Commands|command]], or a [[Ribbon actions|ribbon action]].
+
+You can access the CodeMirror 6 editor from a [[MarkdownView|MarkdownView]]. However, since the Obsidian API doesn't actually expose the editor, you need to tell TypeScript to trust that it's there, using `@ts-expect-error`.
+
+```ts
+import { EditorView } from "@codemirror/view";
+
+// @ts-expect-error, not typed
+const editorView = view.editor.cm as EditorView;
+```
+
+## View plugin
+
+You can access the [[View plugins|view plugin]] instance from the `EditorView.plugin()` method.
+
+```ts
+this.addCommand({
+	id: "example-editor-command",
+	name: "Example editor command",
+	editorCallback: (editor, view) => {
+		// @ts-expect-error, not typed
+		const editorView = view.editor.cm as EditorView;
+
+		const plugin = editorView.plugin(examplePlugin);
+
+		if (plugin) {
+			plugin.addPointerToSelection(editorView);
+		}
+	},
+});
+```
+
+## State field
+
+You can dispatch changes and [[State fields#Dispatching state effects|dispatch state effects]] directly on the editor view.
+
+```ts
+this.addCommand({
+	id: "example-editor-command",
+	name: "Example editor command",
+	editorCallback: (editor, view) => {
+		// @ts-expect-error, not typed
+		const editorView = view.editor.cm as EditorView;
+
+		editorView.dispatch({
+			effects: [
+				// ...
+			],
+		});
+	},
+});
+```
+

docs/obsidian-developer/Plugins/Editor/Decorations.md

@@ -0,0 +1,226 @@
+Decorations let you control how to draw or style content in [[Editor extensions|editor extensions]]. If you intend to change the look and feel by adding, replacing, or styling elements in the editor, you most likely need to use decorations.
+
+By the end of this page, you'll be able to:
+
+- Understand how to use decorations to change the editor appearance.
+- Understand the difference between providing decoration using state fields and view plugins.
+
+> [!note]
+> This page aims to distill the official CodeMirror 6 documentation for Obsidian plugin developers. For more detailed information on state fields, refer to [Decorating the Document](https://codemirror.net/docs/guide/#decorating-the-document).
+
+## Prerequisites
+
+- Basic understanding of [[State fields]].
+- Basic understanding of [[View plugins]].
+
+## Overview
+
+Without decorations, the document would render as plain text. Not very interesting at all. Using decorations, you can change how to display the document, for example by highlighting text or adding custom HTML elements.
+
+You can use the following types of decorations:
+
+- [Mark decorations](https://codemirror.net/docs/ref/#view.Decoration%5Emark) style existing elements.
+- [Widget decorations](https://codemirror.net/docs/ref/#view.Decoration%5Ewidget) insert elements in the document.
+- [Replace decorations](https://codemirror.net/docs/ref/#view.Decoration%5Ereplace) hide or replace part of the document with another element.
+- [Line decorations](https://codemirror.net/docs/ref/#view.Decoration%5Eline) add styling to the lines, rather than the document itself.
+
+To use decorations, you need to create them inside an editor extension and have the extension _provide_ them to the editor. You can provide decorations to the editor in two ways, either _directly_ using [[State fields|state fields]] or _indirectly_ using [[View plugins|view plugins]].
+
+## Should I use a view plugin or a state field?
+
+Both view plugins and state fields can provide decorations to the editor, but they have some differences.
+
+- Use a view plugin if you can determine the decoration based on what's inside the [[Viewport]].
+- Use a state field if you need to manage decorations outside of the viewport.
+- Use a state field if you want to make changes that could change the content of the viewport, for example by adding line breaks.
+
+If you can implement your extension using either approach, then the view plugin generally results in better performance. For example, imagine that you want to implement an editor extension that checks the spelling of a document.
+
+One way would be to pass the entire document to an external spell checker which then returns a list of spelling errors. In this case, you'd need to map each error to a decoration and use a state field to manage decorations regardless of what's in the viewport at the moment.
+
+Another way would be to only spellcheck what's visible in the viewport. The extension would need to continuously run a spell check as the user scrolls through the document, but you'd be able to spell check documents with millions of lines of text.
+
+![State field vs. view plugin](decorations.svg)
+
+## Providing decorations
+
+Imagine that you want to build an editor extension that replaces the bullet list item with an emoji. You can accomplish this with either a view plugin or a state field, with some differences.  In this section, you'll see how to implement it with both types of extensions.
+
+Both implementations share the same core logic:
+
+1. Use [syntaxTree](https://codemirror.net/docs/ref/#language.syntaxTree) to find list items.
+2. For every list item, replace leading hyphens, `-`, with a _widget_.
+
+### Widgets
+
+Widgets are custom HTML elements that you can add to the editor. You can either insert a widget at a specific position in the document, or replace a piece of content with a widget.
+
+The following example defines a widget that returns an HTML element, `<span>👉</span>`. You'll use this widget later on.
+
+```ts
+import { EditorView, WidgetType } from "@codemirror/view";
+
+export class EmojiWidget extends WidgetType {
+  toDOM(view: EditorView): HTMLElement {
+    const div = document.createElement("span");
+
+    div.innerText = "👉";
+
+    return div;
+  }
+}
+```
+
+To replace a range of content in your document with the emoji widget, use the [replace decoration](https://codemirror.net/docs/ref/#view.Decoration%5Ereplace).
+
+```ts
+const decoration = Decoration.replace({
+  widget: new EmojiWidget()
+});
+```
+
+### State fields
+
+To provide decorations from a state field:
+
+1. [[State fields#Defining a state field|Define a state field]] with a `DecorationSet` type.
+2. Add the `provide` property to the state field.
+
+   ```ts
+   provide(field: StateField<DecorationSet>): Extension {
+     return EditorView.decorations.from(field);
+   },
+   ```
+
+```ts
+import { syntaxTree } from "@codemirror/language";
+import {
+  Extension,
+  RangeSetBuilder,
+  StateField,
+  Transaction,
+} from "@codemirror/state";
+import {
+  Decoration,
+  DecorationSet,
+  EditorView,
+  WidgetType,
+} from "@codemirror/view";
+import { EmojiWidget } from "emoji";
+
+export const emojiListField = StateField.define<DecorationSet>({
+  create(state): DecorationSet {
+    return Decoration.none;
+  },
+  update(oldState: DecorationSet, transaction: Transaction): DecorationSet {
+    const builder = new RangeSetBuilder<Decoration>();
+
+    syntaxTree(transaction.state).iterate({
+      enter(node) {
+        if (node.type.name.startsWith("list")) {
+          // Position of the '-' or the '*'.
+          const listCharFrom = node.from - 2;
+
+          builder.add(
+            listCharFrom,
+            listCharFrom + 1,
+            Decoration.replace({
+              widget: new EmojiWidget(),
+            })
+          );
+        }
+      },
+    });
+
+    return builder.finish();
+  },
+  provide(field: StateField<DecorationSet>): Extension {
+    return EditorView.decorations.from(field);
+  },
+});
+```
+
+### View plugins
+
+To manage your decorations using a view plugin:
+
+1. [[View plugins#Creating a view plugin|Create a view plugin]].
+2. Add a `DecorationSet` member property to your plugin.
+3. Initialize the decorations in the `constructor()`.
+4. Rebuild decorations in `update()`.
+
+Not all updates are reasons to rebuild your decorations. The following example only rebuilds decorations whenever the underlying document or the viewport changes.
+
+```ts
+import { syntaxTree } from "@codemirror/language";
+import { RangeSetBuilder } from "@codemirror/state";
+import {
+  Decoration,
+  DecorationSet,
+  EditorView,
+  PluginSpec,
+  PluginValue,
+  ViewPlugin,
+  ViewUpdate,
+  WidgetType,
+} from "@codemirror/view";
+import { EmojiWidget } from "emoji";
+
+class EmojiListPlugin implements PluginValue {
+  decorations: DecorationSet;
+
+  constructor(view: EditorView) {
+    this.decorations = this.buildDecorations(view);
+  }
+
+  update(update: ViewUpdate) {
+    if (update.docChanged || update.viewportChanged) {
+      this.decorations = this.buildDecorations(update.view);
+    }
+  }
+
+  destroy() {}
+
+  buildDecorations(view: EditorView): DecorationSet {
+    const builder = new RangeSetBuilder<Decoration>();
+
+    for (let { from, to } of view.visibleRanges) {
+      syntaxTree(view.state).iterate({
+        from,
+        to,
+        enter(node) {
+          if (node.type.name.startsWith("list")) {
+            // Position of the '-' or the '*'.
+            const listCharFrom = node.from - 2;
+
+            builder.add(
+              listCharFrom,
+              listCharFrom + 1,
+              Decoration.replace({
+                widget: new EmojiWidget(),
+              })
+            );
+          }
+        },
+      });
+    }
+
+    return builder.finish();
+  }
+}
+
+const pluginSpec: PluginSpec<EmojiListPlugin> = {
+  decorations: (value: EmojiListPlugin) => value.decorations,
+};
+
+export const emojiListPlugin = ViewPlugin.fromClass(
+  EmojiListPlugin,
+  pluginSpec
+);
+```
+
+`buildDecorations()` is a helper method that builds a complete set of decorations based on the editor view.
+
+Notice the second argument to the `ViewPlugin.fromClass()` function. The `decorations` property in the `PluginSpec` specifies how the view plugin provides the decorations to the editor.
+
+Since the view plugin knows what's visible to the user, you can use `view.visibleRanges` to limit what parts of the syntax tree to visit.

docs/obsidian-developer/Plugins/Editor/Editor extensions.md

@@ -0,0 +1,32 @@
+---
+alias: editor extension
+---
+
+Editor extensions let you customize the experience of editing notes in Obsidian. This page explains what editor extensions are, and when to use them.
+
+Obsidian uses CodeMirror 6 (CM6) to power the Markdown editor. Just like Obsidian, CM6 has plugins of its own, called _extensions_. In other words, an Obsidian _editor extension_ is the same thing as a _CodeMirror 6 extension_.
+
+The API for building editor extensions is a bit unconventional and requires that you have a basic understanding of its architecture before you get started. This section aims to give you enough context and examples for you to get started. If you want to learn more about building editor extensions, refer to the [CodeMirror 6 documentation](https://codemirror.net/docs/).
+
+## Do I need an editor extension?
+
+Building editor extensions can be challenging, so before you start building one, consider whether you really need it.
+
+- If you want to change how to convert Markdown to HTML in the Reading view, consider building a [[Markdown post processing|Markdown post processor]].
+- If you want to change how the document looks and feels in Live Preview, you need to build an editor extension.
+
+## Registering editor extensions
+
+CodeMirror 6 (CM6) is a powerful engine for editing code using web technologies. At its core, the editor itself has a minimal set of features. Any features you'd expect from a modern editor are available as _extensions_ that you can pick and choose. While Obsidian comes with many of these extensions out-of-the-box, you can also register your own.
+
+To register an editor extension, use [[registerEditorExtension|registerEditorExtension()]] in the `onload` method of your Obsidian plugin:
+
+```ts
+onload() {
+  this.registerEditorExtension([examplePlugin, exampleField]);
+}
+```
+
+While CM6 supports several types of extensions, two of the most common ones are [[View plugins]] and [[State fields]].
+<DocCardList items={useCurrentSidebarCategory().items}/>
+

docs/obsidian-developer/Plugins/Editor/Editor.md

@@ -0,0 +1,71 @@
+The [[Reference/TypeScript API/Editor/Editor|Editor]] class exposes operations for reading and manipulating an active Markdown document in edit mode.
+
+If you want to access the editor in a command, use the [[Commands#Editor commands|editorCallback]].
+
+If you want to use the editor elsewhere, you can access it from the active view:
+
+```ts
+const view = this.app.workspace.getActiveViewOfType(MarkdownView);
+
+// Make sure the user is editing a Markdown file.
+if (view) {
+	const cursor = view.editor.getCursor();
+
+	// ...
+}
+```
+
+> [!note]
+> Obsidian uses [CodeMirror](https://codemirror.net/) (CM) as the underlying text editor, and exposes the CodeMirror editor as part of the API. `Editor` serves as an abstraction to bridge features between CM6 and CM5 (legacy editor, only available on desktop). By using `Editor` instead of directly accessing the CodeMirror instance, you ensure that your plugin works on both platforms.
+
+## Insert text at cursor position
+
+The [[replaceRange|replaceRange()]] method replaces the text between two cursor positions. If you only give it one position, it inserts the new text between that position and the next.
+
+The following command inserts today's date at the cursor position:
+
+```ts
+import { Editor, moment, Plugin } from "obsidian";
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    this.addCommand({
+      id: "insert-todays-date",
+      name: "Insert today's date",
+      editorCallback: (editor: Editor) => {
+        editor.replaceRange(
+          moment().format("YYYY-MM-DD"),
+          editor.getCursor()
+        );
+      },
+    });
+  }
+}
+```
+
+![[editor-todays-date.gif]]
+
+## Replace current selection
+
+If you want to modify the selected text, use [[replaceRange|replaceSelection()]] to replace the current selection with a new text.
+
+The following command reads the current selection and converts it to uppercase:
+
+```ts
+import { Editor, Plugin } from "obsidian";
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    this.addCommand({
+      id: "convert-to-uppercase",
+      name: "Convert to uppercase",
+      editorCallback: (editor: Editor) => {
+        const selection = editor.getSelection();
+        editor.replaceSelection(selection.toUpperCase());
+      },
+    });
+  }
+}
+```
+
+![[editor-uppercase.gif]]

docs/obsidian-developer/Plugins/Editor/Markdown post processing.md

@@ -0,0 +1,76 @@
+If you want to change how a Markdown document is rendered in Reading view, you can add your own _Markdown post processor_. As indicated by the name, the post processor runs _after_ the Markdown has been processed into HTML. It lets you add, remove, or replace [[HTML elements]] to the rendered document.
+
+The following example looks for any code block that contains a text between two colons, `:`, and replaces it with an appropriate emoji:
+
+```ts
+import { Plugin } from "obsidian";
+
+const ALL_EMOJIS: Record<string, string> = {
+  ":+1:": "👍",
+  ":sunglasses:": "😎",
+  ":smile:": "😄",
+};
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    this.registerMarkdownPostProcessor((element, context) => {
+      const codeblocks = element.findAll("code");
+
+      for (let codeblock of codeblocks) {
+        const text = codeblock.innerText.trim();
+        if (text[0] === ":" && text[text.length - 1] === ":") {
+          const emojiEl = codeblock.createSpan({
+            text: ALL_EMOJIS[text] ?? text,
+          });
+          codeblock.replaceWith(emojiEl);
+        }
+      }
+    });
+  }
+}
+```
+
+## Post-process Markdown code blocks
+
+Did you know that you can create [Mermaid](https://mermaid-js.github.io/) diagrams in Obsidian by creating a `mermaid` code block with a text definition like this one?:
+
+````md
+```mermaid
+flowchart LR
+    Start --> Stop
+```
+````
+
+If you change to Preview mode, the text in the code block becomes the following diagram:
+
+```mermaid
+flowchart LR
+    Start --> Stop
+```
+
+If you want to add your own custom code blocks like the Mermaid one, you can use [[registerMarkdownCodeBlockProcessor|registerMarkdownCodeBlockProcessor()]]. The following example renders a code block with CSV data, as a table:
+
+```ts
+import { Plugin } from "obsidian";
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    this.registerMarkdownCodeBlockProcessor("csv", (source, el, ctx) => {
+      const rows = source.split("\n").filter((row) => row.length > 0);
+
+      const table = el.createEl("table");
+      const body = table.createEl("tbody");
+
+      for (let i = 0; i < rows.length; i++) {
+        const cols = rows[i].split(",");
+
+        const row = body.createEl("tr");
+
+        for (let j = 0; j < cols.length; j++) {
+          row.createEl("td", { text: cols[j] });
+        }
+      }
+    });
+  }
+}
+```

docs/obsidian-developer/Plugins/Editor/State fields.md

@@ -0,0 +1,95 @@
+A state field is an [[Editor extensions|editor extension]] that lets you manage custom editor state. This page walks you through building a state field by implementing a calculator extension.
+
+The calculator should be able to add and subtract a number from the current state, and to reset the state when you want to start over.
+
+By the end of this page, you'll understand the basic concepts of building a state field.
+
+> [!note]
+> This page aims to distill the official CodeMirror 6 documentation for Obsidian plugin developers. For more detailed information on state fields, refer to [State Fields](https://codemirror.net/docs/guide/#state-fields).
+
+## Prerequisites
+
+- Basic understanding of [[State management]].
+
+## Defining state effects
+
+State effects describe the state change you'd like to make. You may think of them as methods on a class.
+
+In the calculator example, you'd define a state effect for each of the calculator operations:
+
+```ts
+const addEffect = StateEffect.define<number>();
+const subtractEffect = StateEffect.define<number>();
+const resetEffect = StateEffect.define();
+```
+
+The type between the angle brackets, `<>`, defines the input type for the effect. For example, the number you want to add or subtract. The reset effect doesn't need any input, so you can leave it out.
+
+## Defining a state field
+
+Contrary to what one might think, state fields don't actually _store_ state. They _manage_ it. State fields take the current state, applies any state effects, and returns the new state.
+
+The state field contains the calculator logic to apply the mathematical operations depending on the effects in a transaction. Since a transaction can contain multiple effects, for example two additions, the state field needs to apply them all one after another.
+
+```ts
+export const calculatorField = StateField.define<number>({
+  create(state: EditorState): number {
+    return 0;
+  },
+  update(oldState: number, transaction: Transaction): number {
+    let newState = oldState;
+
+    for (let effect of transaction.effects) {
+      if (effect.is(addEffect)) {
+        newState += effect.value;
+      } else if (effect.is(subtractEffect)) {
+        newState -= effect.value;
+      } else if (effect.is(resetEffect)) {
+        newState = 0;
+      }
+    }
+
+    return newState;
+  },
+});
+```
+
+- `create` returns the value the calculator starts with.
+- `update` contains the logic for applying the effects.
+- `effect.is()` lets you check the type of the effect before you apply it.
+
+## Dispatching state effects
+
+To apply a state effect to a state field, you need to dispatch it to the editor view as part of a transaction.
+
+```ts
+view.dispatch({
+  effects: [addEffect.of(num)],
+});
+```
+
+You can even define a set of helper functions that provide a more familiar API:
+
+```ts
+export function add(view: EditorView, num: number) {
+  view.dispatch({
+    effects: [addEffect.of(num)],
+  });
+}
+
+export function subtract(view: EditorView, num: number) {
+  view.dispatch({
+    effects: [subtractEffect.of(num)],
+  });
+}
+
+export function reset(view: EditorView) {
+  view.dispatch({
+    effects: [resetEffect.of(null)],
+  });
+}
+```
+
+## Next steps
+
+Provide [[Decorations]] from your state fields to change how to display the document.

docs/obsidian-developer/Plugins/Editor/State management.md

@@ -0,0 +1,64 @@
+This page aims to give an introduction to state management for [[Editor extensions|editor extensions]].
+
+> [!note]
+> This page aims to distill the official CodeMirror 6 documentation for Obsidian plugin developers. For more detailed information on state management, refer to [State and Updates](https://codemirror.net/docs/guide/#state-and-updates).
+
+## State changes
+
+In most applications, you would update state by assigning a new value to a property or variable. As a consequence, the old value is lost forever.
+
+```ts
+let note = "";
+note = "Heading"
+note = "# Heading"
+note = "## Heading" // How to undo this?
+```
+
+To support features like undoing and redoing changes to a user's workspace, applications like Obsidian instead keep a history of all changes that have been made. To undo a change, you can then go back to a point in time before the change was made.
+
+|   | State      |
+|---|------------|
+| 0 |            |
+| 1 | Heading    |
+| 2 | # Heading  |
+| 3 | ## Heading |
+
+In TypeScript, you'd then end up with something like this:
+
+```ts
+const changes: ChangeSpec[] = [];
+
+changes.push({ from: 0, insert: "Heading" });
+changes.push({ from: 0, insert: "# " });
+changes.push({ from: 0, insert: "#" });
+```
+
+## Transactions
+
+Imagine a feature where you select some text and press the double quote, `"` to surround the selection with quotes on both sides. One way to implement the feature would be to:
+
+1. Insert `"` at the start of the selection.
+2. Insert `"` at the end of the selection.
+
+Notice that the implementation consists of _two_ state changes. If you added these to the undo history, the user would need to undo _twice_, once for each double quote. To avoid this, what if you could group these changes so that they appear as one?
+
+For editor extensions, a group of state changes that happen together is called a _transaction_.
+
+If you combine what you've learned so far—and if you allow transactions that contain only a single state change—then you can consider state as a _history of transactions_.
+
+Bringing it all together to implement the surround feature from before in an editor extension, here's how you'd add, or _dispatch_, a transaction to the editor view:
+
+```ts
+view.dispatch({
+  changes: [
+    { from: selectionStart, insert: `"` },
+    { from: selectionEnd, insert: `"` }
+  ]
+});
+```
+
+## Next steps
+
+On this page, you've learned about modeling state as a series of state changes, and how to group them into transactions.
+
+To learn how to manage custom state in your editor, refer to [[State fields]].

docs/obsidian-developer/Plugins/Editor/View plugins.md

@@ -0,0 +1,54 @@
+A view plugin is an [[Editor extensions|editor extension]] that gives you access to the editor [[Viewport]].
+
+> [!note]
+> This page aims to distill the official CodeMirror 6 documentation for Obsidian plugin developers. For more information on state management, refer to [Affecting the View](https://codemirror.net/docs/guide/#affecting-the-view).
+
+## Prerequisites
+
+- Basic understanding of the [[Viewport]].
+
+## Creating a view plugin
+
+View plugins are editor extensions that run _after_ the viewport has been recomputed. While this means that they can access the viewport, it also means that a view plugin can't make any changes that would impact the viewport. For example, by inserting blocks or line breaks into the document.
+
+> [!tip]
+> If you want to make changes that impact the vertical layout of the editor, by for example inserting blocks and line breaks, you need to use a [[State fields|state field]].
+
+To create a view plugin, create a class that implements [PluginValue](https://codemirror.net/docs/ref/#view.PluginValue) and pass it to the [ViewPlugin.fromClass()](https://codemirror.net/docs/ref/#view.ViewPlugin^fromClass) function.
+
+```ts
+import {
+  ViewUpdate,
+  PluginValue,
+  EditorView,
+  ViewPlugin,
+} from "@codemirror/view";
+
+class ExamplePlugin implements PluginValue {
+  constructor(view: EditorView) {
+    // ...
+  }
+
+  update(update: ViewUpdate) {
+    // ...
+  }
+
+  destroy() {
+    // ...
+  }
+}
+
+export const examplePlugin = ViewPlugin.fromClass(ExamplePlugin);
+```
+
+The three methods of the view plugin control its lifecycle:
+
+- `constructor()` initializes the plugin.
+- `update()` updates your plugin when something has changed, for example when the user entered or selected some text.
+- `destroy()` cleans up after the plugin.
+
+While the view plugin in the example works, it doesn't do much. If you want to better understand what causes the plugin to update, you can add a `console.log(update);` line to the `update()` method to print all updates to the console.
+
+## Next steps
+
+Provide [[Decorations]] from your view plugin to change how to display the document.

docs/obsidian-developer/Plugins/Editor/Viewport.md

@@ -0,0 +1,12 @@
+The Obsidian editor supports [huge documents](https://codemirror.net/examples/million/) with millions of lines. One of the reasons why this is possible, is because the editor only renders what's visible (and a little bit more).
+
+Imagine that you want to edit a document that is too big to fit on your monitor. The Obsidian editor creates a "window" that moves across the document, only rendering the content within the window (and ignoring what's outside). This window is known as the editor's _viewport_.
+
+![Viewport](viewport.svg)
+
+Whenever the user scrolls through the document, or when the document itself changes, the viewport becomes out-of-date and needs to be recomputed.
+
+If you want to build an editor extension that depends on the viewport, refer to [[View plugins]].
+
+> [!note]
+> This page aims to distill the official CodeMirror 6 documentation for Obsidian plugin developers. For more information on state management, refer to [Viewport](https://codemirror.net/docs/guide/#viewport).

docs/obsidian-developer/Plugins/Events.md

@@ -0,0 +1,50 @@
+Many of the interfaces in the Obsidian lets you subscribe to events throughout the application, for example when the user makes changes to a file.
+
+Any registered event handlers need to be detached whenever the plugin unloads. The safest way to make sure this happens is to use the [[registerEvent|registerEvent()]] method.
+
+```ts
+import { Plugin } from "obsidian";
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    this.registerEvent(this.app.vault.on('create', () => {
+      console.log('a new file has entered the arena')
+    }));
+  }
+}
+```
+
+## Timing events
+
+If you want to repeatedly call a function with a fixed delay, use the [`window.setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) function with the [[registerInterval|registerInterval()]] method.
+
+The following example displays the current time in the status bar, updated every second:
+
+```ts
+import { moment, Plugin } from "obsidian";
+
+export default class ExamplePlugin extends Plugin {
+  statusBar: HTMLElement;
+
+  async onload() {
+    this.statusBar = this.addStatusBarItem();
+
+    this.updateStatusBar();
+
+    this.registerInterval(
+      window.setInterval(() => this.updateStatusBar(), 1000)
+    );
+  }
+
+  updateStatusBar() {
+    this.statusBar.setText(moment().format("H:mm:ss"));
+  }
+}
+```
+
+> [!tip] Date and time
+> [Moment](https://momentjs.com/) is a popular JavaScript library for working with dates and time. Obsidian uses Moment internally, so you don't need to install it yourself. You can import it from the Obsidian API instead:
+>
+> ```ts
+> import { moment } from "obsidian";
+> ```

docs/obsidian-developer/Plugins/Getting started/Anatomy of a plugin.md

@@ -0,0 +1,40 @@
+The [[Plugin|Plugin]] class defines the lifecycle of a plugin and exposes the operations available to all plugins:
+
+```ts
+import { Plugin } from "obsidian";
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    // Configure resources needed by the plugin.
+  }
+  async onunload() {
+    // Release any resources configured by the plugin.
+  }
+}
+```
+
+## Plugin lifecycle
+
+[[onload|onload()]] runs whenever the user starts using the plugin in Obsidian. This is where you'll configure most of the plugin's capabilities.
+
+[[onunload|onunload()]] runs when the plugin is disabled. Any resources that your plugin is using must be released here to avoid affecting the performance of Obsidian after your plugin has been disabled.
+
+To better understand when these methods are called, you can print a message to the console whenever the plugin loads and unloads. The console is a valuable tool that lets developers monitor the status of their code.
+
+To view the console:
+
+1. Toggle the Developer Tools by pressing Ctrl+Shift+I in Windows and Linux, or Cmd-Option-I on macOS.
+2. Click on the Console tab in the Developer Tools window.
+
+```ts
+import { Plugin } from "obsidian";
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    console.log('loading plugin')
+  }
+  async onunload() {
+    console.log('unloading plugin')
+  }
+}
+```

docs/obsidian-developer/Plugins/Getting started/Build a plugin.md

@@ -0,0 +1,131 @@
+Plugins let you extend Obsidian with your own features to create a custom note-taking experience.
+
+In this tutorial, you'll compile a sample plugin from source code and load it into Obsidian.
+
+## What you'll learn
+
+After you've completed this tutorial, you'll be able to:
+
+- Configure an environment for developing Obsidian plugins.
+- Compile a plugin from source code.
+- Reload a plugin after making changes to it.
+
+## Prerequisites
+
+To complete this tutorial, you'll need:
+
+- [Git](https://git-scm.com/) installed on your local machine.
+- A local development environment for [Node.js](https://Node.js.org/en/about/).
+- A code editor, such as [Visual Studio Code](https://code.visualstudio.com/).
+
+## Before you start
+
+When developing plugins, one mistake can lead to unintended changes to your vault. To prevent data loss, you should never develop plugins in your main vault. Always use a separate vault dedicated to plugin development.
+
+[Create an empty vault](https://help.obsidian.md/Getting+started/Create+a+vault#Create+empty+vault).
+
+## Step 1: Download the sample plugin
+
+In this step, you'll download a sample plugin to the `plugins` directory in your vault's [`.obsidian` directory](https://help.obsidian.md/Advanced+topics/How+Obsidian+stores+data#Per+vault+data) so that Obsidian can find it.
+
+The sample plugin you'll use in this tutorial is available in a [GitHub repository](https://github.com/obsidianmd/obsidian-sample-plugin).
+
+1. Open a terminal window and change the project directory to the `plugins` directory.
+
+   ```bash
+   cd path/to/vault
+   mkdir .obsidian/plugins
+   cd .obsidian/plugins
+   ```
+
+2. Clone the sample plugin using Git.
+
+   ```bash
+   git clone https://github.com/obsidianmd/obsidian-sample-plugin.git
+   ```
+
+> [!tip] GitHub template repository
+> The repository for the sample plugin is a GitHub template repository, which means you can create your own repository from the sample plugin. To learn how, refer to [Creating a repository from a template](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template#creating-a-repository-from-a-template).
+>
+> Remember to use the URL of your own repository when cloning the sample plugin.
+
+## Step 2: Build the plugin
+
+In this step, you'll compile the sample plugin so that Obsidian can load it.
+
+1. Navigate to the plugin directory.
+
+   ```bash
+   cd obsidian-sample-plugin
+   ```
+
+2. Install dependencies.
+
+   ```bash
+   npm install
+   ```
+
+3. Compile the source code. The following command keeps running in the terminal and rebuilds the plugin when you modify the source code.
+
+   ```bash
+   npm run dev
+   ```
+
+Notice that the plugin directory now has a `main.js` file that contains a compiled version of the plugin.
+
+## Step 3: Enable the plugin
+
+To load a plugin in Obsidian, you first need to enable it.
+
+1. In Obsidian, open **Settings**.
+2. In the side menu, select **Community plugins**.
+3. Select **Turn on community plugins**.
+4. Under **Installed plugins**, enable the **Sample Plugin** by selecting the toggle button next to it.
+
+You're now ready to use the plugin in Obsidian. Next, we'll make some changes to the plugin.
+
+## Step 4: Update the plugin manifest
+
+In this step, you'll rename the plugin by updating the plugin manifest, `manifest.json`. The manifest contains information about your plugin, such as its name and description.
+
+1. Open `manifest.json` in your code editor.
+2. Change `id` to a unique identifier, such as `"hello-world"`.
+3. Change `name` to a human-friendly name, such as `"Hello world"`.
+4. Restart Obsidian to load the new changes to the plugin manifest.
+
+Go back to **Installed plugins** and notice that the name of the plugin has been updated to reflect the changes you made.
+
+Remember to restart Obsidian whenever you make changes to `manifest.json`.
+
+## Step 5: Update the source code
+
+To let the user interact with your plugin, add a _ribbon icon_ that greets the user when they select it.
+
+1. Open `main.ts` in your code editor.
+2. Rename the plugin class from `MyPlugin` to `HelloWorldPlugin`.
+3. Import `Notice` from the `obsidian` package.
+
+   ```ts
+   import { Notice, Plugin } from "obsidian";
+   ```
+
+4. In the `onload()` method, add the following code:
+
+   ```ts
+   this.addRibbonIcon('dice', 'Greet', () => {
+     new Notice('Hello, world!');
+   });
+   ```
+
+5. In the **Command palette**, select **Reload app without saving** to reload the plugin.
+
+You can now see a dice icon in the ribbon on the left side of the Obsidian window. Select it to display a message in the upper-right corner.
+
+Remember, you need to **reload your plugin after changing the source code**, either by disabling it then enabling it again in the community plugins panel, or using the command palette as detailed in part 5 of this step.  
+
+> [!tip] Hot reloading
+> Install the [Hot-Reload](https://github.com/pjeby/hot-reload) plugin to automatically reload your plugin while developing.
+
+## Conclusion
+
+In this tutorial, you've built your first Obsidian plugin using the TypeScript API. You've modified the plugin and reloaded it to reflect the changes inside Obsidian.

docs/obsidian-developer/Plugins/Getting started/Development workflow.md

@@ -0,0 +1,19 @@
+Whenever you make a change to the plugin source code, the plugin needs to be reloaded. You can reload the plugin by quitting Obsidian and starting it again, but that gets tiring quickly.
+
+## Reload plugin inside Obsidian
+
+You can reload the plugin by re-enabling it in the list of installed plugins:
+
+1. Open **Preferences**.
+2. Click **Community plugins**.
+3. Find your plugin under **Installed plugins**.
+4. Toggle the switch off to disable the plugin.
+5. Toggle the switch on to enable the plugin.
+
+You're now running the updated version of your plugin.
+
+## Reload plugin on file changes
+
+The [Hot-Reload](https://github.com/pjeby/hot-reload) plugin reloads your plugin whenever the source code changes.
+
+For more information, check out the [forum announcement](https://forum.obsidian.md/t/plugin-release-for-developers-hot-reload-the-plugin-s-youre-developing/12185).

docs/obsidian-developer/Plugins/Getting started/Mobile development.md

@@ -0,0 +1,73 @@
+Learn how you can develop your plugin for mobile devices.
+
+## Emulate mobile device on desktop
+
+You can emulate Obsidian running a mobile device directly from the Developer Tools.
+
+1. Open the **Developer Tools**.
+2. Select the **Console** tab.
+3. Enter the following and then press `Enter`.
+
+   ```ts
+   this.app.emulateMobile(true);
+   ```
+
+To disable mobile emulation, enter the following and press `Enter`:
+
+```ts
+this.app.emulateMobile(false);
+```
+
+
+> [!tip]
+> To instead toggle mobile emulation back and forth, you can use the `this.app.isMobile` flag:
+>
+> ```ts
+> this.app.emulateMobile(!this.app.isMobile);
+> ```
+
+## Inspecting the webview on the actual mobile device
+
+### Android
+
+You can inspect Obsidian running on an Android device if you enable USB Debugging in Developer settings of Android. Then go to a chromium based browser on your desktop/laptop and navigate to chrome://inspect/. If you did everything right, if you have your phone/tablet connected to your PC via USB and the browser open at that link you should see your device pop up and it will let you run the usual devtools from there on it.
+
+### iOS
+
+You can inspect Obsidian on an iOS device running 16.4 or later and a macOS based computer. Instructions on how to set it up can be found here: https://webkit.org/web-inspector/enabling-web-inspector/
+
+## Platform-specific features
+
+To detect the platform your plugin is running on, you can use `Platform`:
+
+```ts
+import { Platform } from "obsidian";
+
+if (Platform.isIosApp) {
+  // ...
+}
+
+if (Platform.isAndroidApp) {
+  // ...
+}
+```
+
+## Disable your plugin on mobile devices
+
+If your plugin requires the Node.js or Electron API, you can prevent users from installing the plugin on mobile devices.
+
+To only support the desktop app, set `isDesktopOnly` to `true` in the [[Manifest]].
+
+## Troubleshooting
+
+This section lists common issues when developing for mobile devices.
+
+### Node and Electron APIs
+
+The Node.js API and the Electron API aren't available on mobile devices. Any calls to these libraries result cause your plugin to crash.
+
+### Lookbehind in regular expressions
+
+Lookbehind in regular expressions is only supported on iOS 16.4 and above, and some iPhone and iPad users may still use earlier versions. To implement a fallback for iOS users, either refer to [[#Platform-specific features]], or use a JavaScript library to detect specific browser versions.
+
+Refer to [Can I Use](https://caniuse.com/js-regexp-lookbehind) for more information and exact version statistics. Look for "Safari on iOS".

docs/obsidian-developer/Plugins/Getting started/Use React in your plugin.md

@@ -0,0 +1,138 @@
+In this guide, you'll configure your plugin to use [React](https://react.dev/). It assumes that you already have a plugin with a [[Views|custom view]] that you want to convert to use React.
+
+While you don't need to use a separate framework to build a plugin, there are a few reasons why you'd want to use React:
+
+- You have existing experience of React and want to use a familiar technology.
+- You have existing React components that you want to reuse in your plugin.
+- Your plugin requires complex state management or other features that can be cumbersome to implement with regular [[HTML elements]].
+
+## Configure your plugin
+
+1. Add React to your plugin dependencies:
+
+   ```bash
+   npm install react react-dom
+   ```
+
+2. Add type definitions for React:
+
+   ```bash
+   npm install --save-dev @types/react @types/react-dom
+   ```
+
+3. In `tsconfig.json`, enable JSX support on the `compilerOptions` object:
+
+   ```ts
+   {
+     "compilerOptions": {
+       "jsx": "preserve"
+     }
+   }
+   ```
+
+## Create a React component
+
+Create a new file called `ReactView.tsx` in the plugin root directory, with the following content:
+
+```tsx title="ReactView.tsx"
+export const ReactView = () => {
+  return <h4>Hello, React!</h4>;
+};
+```
+
+## Mount the React component
+
+To use the React component, it needs to be mounted on a [[HTML elements]]. The following example mounts the `ReactView` component on the `this.containerEl.children[1]` element:
+
+```tsx
+import { StrictMode } from "react";
+import { ItemView, WorkspaceLeaf } from "obsidian";
+import { Root, createRoot } from "react-dom/client";
+import { ReactView } from "./ReactView";
+
+const VIEW_TYPE_EXAMPLE = "example-view";
+
+class ExampleView extends ItemView {
+	root: Root | null = null;
+
+	constructor(leaf: WorkspaceLeaf) {
+		super(leaf);
+	}
+
+	getViewType() {
+		return VIEW_TYPE_EXAMPLE;
+	}
+
+	getDisplayText() {
+		return "Example view";
+	}
+
+	async onOpen() {
+		this.root = createRoot(this.containerEl.children[1]);
+		this.root.render(
+			<StrictMode>
+				<ReactView />,
+			</StrictMode>,
+		);
+	}
+
+	async onClose() {
+		this.root?.unmount();
+	}
+}
+```
+
+For more information on `createRoot` and `unmount()`, refer to the documentation on [ReactDOM](https://react.dev/reference/react-dom/client/createRoot#root-render).
+
+You can mount your React component on any `HTMLElement`, for example [[Plugins/User interface/Status bar|status bar items]]. Just make sure to clean up properly by calling `this.root.unmount()` when you're done.
+
+## Create an App context
+
+If you want to access the [[Reference/TypeScript API/App/App|App]] object from one of your React components, you need to pass it as a dependency. As your plugin grows, even though you're only using the `App` object in a few places, you start passing it through the whole component tree.
+
+Another alternative is to create a React context for the app to make it globally available to all components inside your React view.
+
+1. Use `createContext()` to create a new app context.
+
+   ```tsx title="context.ts"
+   import { createContext } from "react";
+   import { App } from "obsidian";
+
+   export const AppContext = createContext<App | undefined>(undefined);
+   ```
+
+2. Wrap the `ReactView` with a context provider and pass the app as the value.
+
+   ```tsx title="view.tsx"
+   this.root = createRoot(this.containerEl.children[1]);
+   this.root.render(
+     <AppContext.Provider value={this.app}>
+       <ReactView />
+     </AppContext.Provider>
+   );
+   ```
+
+3. Create a custom hook to make it easier to use the context in your components.
+
+   ```tsx title="hooks.ts"
+   import { useContext } from "react";
+   import { AppContext } from "./context";
+
+   export const useApp = (): App | undefined => {
+     return useContext(AppContext);
+   };
+   ```
+
+4. Use the hook in any React component within `ReactView` to access the app.
+
+   ```tsx title="ReactView.tsx"
+   import { useApp } from "./hooks";
+
+   export const ReactView = () => {
+     const { vault } = useApp();
+
+     return <h4>{vault.getName()}</h4>;
+   };
+   ```
+
+For more information, refer to the React documentation for [Passing Data Deeply with Context](https://react.dev/learn/passing-data-deeply-with-context) and [Reusing Logic with Custom Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks).

docs/obsidian-developer/Plugins/Getting started/Use Svelte in your plugin.md

@@ -0,0 +1,187 @@
+This guide explains how to configure your plugin to use [Svelte](https://svelte.dev/), a light-weight alternative to traditional frameworks like React and Vue.
+
+Svelte is built around a compiler that preprocesses your code and outputs vanilla JavaScript, which means it doesn't need to load any libraries at run time. This also means that it doesn't need a virtual DOM to track state changes, which allows your plugin to run with minimal additional overhead.
+
+If you want to learn more about Svelte, and how to use it, refer to the [tutorial](https://svelte.dev/tutorial/basics) and the [documentation](https://svelte.dev/docs).
+
+This guide assumes that you've finished [[Build a plugin]].
+
+> [!tip] Visual Studio Code
+> Svelte has an [official Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) that enables syntax highlighting and rich IntelliSense in Svelte components.
+
+## Configure your plugin
+
+To build a Svelte application, you need to install the dependencies and configure your plugin to compile code written using Svelte.
+
+1. Add Svelte to your plugin dependencies:
+
+   ```bash
+   npm install --save-dev svelte svelte-preprocess @tsconfig/svelte esbuild-svelte
+   ```
+
+2. Extend the `tsconfig.json` to enable additional type checking for common Svelte issues. The `types` property is important for TypeScript to recognize `.svelte` files.
+
+   ```json
+   {
+     "extends": "@tsconfig/svelte/tsconfig.json",
+     "compilerOptions": {
+       "types": ["svelte", "node"],
+
+       // ...
+     }
+   }
+   ```
+
+3. Remove the following line from your `tsconfig.json` as it conflicts with the Svelte configuration.
+
+   ```json
+   "inlineSourceMap": true,
+   ```
+
+4. In `esbuild.config.mjs`, add the following imports to the top of the file:
+
+   ```js
+   import esbuildSvelte from "esbuild-svelte";
+   import sveltePreprocess from "svelte-preprocess";
+   ```
+
+5. Add Svelte to the list of plugins.
+
+   ```js
+    esbuild
+    .build({
+      plugins: [
+        esbuildSvelte({
+          compilerOptions: { css: true },
+          preprocess: sveltePreprocess(),
+        }),
+      ],
+      // ...
+    })
+    .catch(() => process.exit(1));
+   ```
+
+## Create a Svelte component
+
+In the root directory of the plugin, create a new file called `Component.svelte`:
+
+```tsx
+<script lang="ts">
+  export let variable: number;
+</script>
+
+<div class="number">
+  <span>My number is {variable}!</span>
+</div>
+
+<style>
+  .number {
+    color: red;
+  }
+</style>
+```
+
+## Mount the Svelte component
+
+To use the Svelte component, it needs to be mounted on an existing [[HTML elements|HTML element]]. For example, if you are mounting on a custom [[ItemView|ItemView]] in Obsidian:
+
+```ts
+import { ItemView, WorkspaceLeaf } from "obsidian";
+
+import Component from "./Component.svelte";
+
+export const VIEW_TYPE_EXAMPLE = "example-view";
+
+export class ExampleView extends ItemView {
+  component: Component;
+
+  constructor(leaf: WorkspaceLeaf) {
+    super(leaf);
+  }
+
+  getViewType() {
+    return VIEW_TYPE_EXAMPLE;
+  }
+
+  getDisplayText() {
+    return "Example view";
+  }
+
+  async onOpen() {
+    this.component = new Component({
+      target: this.contentEl,
+      props: {
+        variable: 1
+      }
+    });
+  }
+
+  async onClose() {
+    this.component.$destroy();
+  }
+}
+```
+
+> [!info]
+> Svelte requires at least TypeScript 4.5. If you see the following error when you build the plugin, you need to upgrade TypeScript to a more recent version.
+>
+> ```plain
+> error TS5023: Unknown compiler option 'preserveValueImports'.
+> ```
+>
+> To fix the error, run the following in your terminal:
+>
+> ```bash
+> npm update typescript@~4.5.0
+> ```
+
+## Create a Svelte store
+
+To create a store for your plugin and access it from within a generic Svelte component instead of passing the plugin as a prop, follow these steps:
+
+1. Create a file called `store.ts`:
+
+   ```jsx
+   import { writable } from "svelte/store";
+   import type ExamplePlugin from "./main";
+
+   const plugin = writable<ExamplePlugin>();
+   export default { plugin };
+   ```
+
+2. Configure the store:
+
+   ```ts
+   import { ItemView, WorkspaceLeaf } from "obsidian";
+   import type ExamplePlugin from "./main";
+   import store from "./store";
+   import Component from "./Component.svelte";
+
+   const VIEW_TYPE_EXAMPLE = "example-view";
+
+   class ExampleView extends ItemView {
+     // ...
+
+     async onOpen() {
+       store.plugin.set(this.plugin);
+
+       this.component = new Component({
+         target: this.contentEl,
+         props: {
+           variable: 1
+         }
+       });
+     }
+   }
+   ```
+
+3. To use the store in your component:
+
+   ```jsx
+   <script lang="ts">
+     import type MyPlugin from "./main";
+
+     let plugin: MyPlugin;
+     store.plugin.subscribe((p) => (plugin = p));
+   </script>
+   ```

docs/obsidian-developer/Plugins/Releasing/Beta-testing plugins.md

@@ -0,0 +1,3 @@
+Before you [[Submit your plugin|submit your plugin]], you may want to let users try it out first. While Obsidian doesn't officially support beta releases, we recommend that you use the [BRAT](https://github.com/TfTHacker/obsidian42-brat) plugin to distribute your plugin to beta testers before it's been published.
+
+For more information, refer to the [BRAT](https://github.com/TfTHacker/obsidian42-brat/blob/main/README.md) documentation.

docs/obsidian-developer/Plugins/Releasing/Plugin guidelines.md

@@ -0,0 +1,301 @@
+This page lists common review comments plugin authors get when submitting their plugin.
+
+While the guidelines on this page are recommendations, depending on their severity, we may still require you to address any violations.
+
+> [!important] Policies for plugin developers
+> Make sure that you've read our [[Developer policies]] as well as the [[Submission requirements for plugins]].
+
+## General
+
+### Avoid using global app instance
+
+Avoid using the global app object, `app` (or `window.app`). Instead, use the reference provided by your plugin instance, `this.app`.
+
+The global app object is intended for debugging purposes and might be removed in the future.
+
+## UI text
+
+This section lists guidelines for formatting text in the user interface, such as settings, commands, and buttons.
+
+The example below from **Settings → Appearance** demonstrates the guidelines for text in the user interface.
+
+![[settings-headings.png]]
+
+1. [[#Only use headings under settings if you have more than one section.|General settings are at the top and don't have a heading]].
+2. [[#Avoid "settings" in settings headings|Section headings don't have "settings" in the heading text]].
+3. [[#Use Sentence case in UI]].
+
+For more information on writing and formatting text for Obsidian, refer to our [Style guide](https://help.obsidian.md/Contributing+to+Obsidian/Style+guide).
+
+### Only use headings under settings if you have more than one section.
+
+Avoid adding a top-level heading in the settings tab, such as "General", "Settings", or the name of your plugin.
+
+If you have more than one section under settings, and one contains general settings, keep them at the top without adding a heading.
+
+For example, look at the settings under **Settings → Appearance**:
+
+### Avoid "settings" in settings headings
+
+In the settings tab, you can add headings to organize settings. Avoid including the word "settings" to these headings. Since everything in under the settings tab is settings, repeating it for every heading becomes redundant.
+
+- Prefer "Advanced" over "Advanced settings".
+- Prefer "Templates" over "Settings for templates".
+
+### Use sentence case in UI
+
+Any text in UI elements should be using [Sentence case](https://en.wiktionary.org/wiki/sentence_case) instead of [Title Case](https://en.wikipedia.org/wiki/Title_case), where only the first word in a sentence, and proper nouns, should be capitalized.
+
+- Prefer "Template folder location" over "Template Folder Location".
+- Prefer "Create new note" over "Create New Note".
+
+## Security
+
+### Avoid `innerHTML`, `outerHTML` and `insertAdjacentHTML`
+
+Building DOM elements from user-defined input, using `innerHTML`, `outerHTML` and `insertAdjacentHTML` can pose a security risk.
+
+The following example builds a DOM element using a string that contains user input, `${name}`. `name` can contain other DOM elements, such as `<script>alert()</script>`, and can allow a potential attacker to execute arbitrary code on the user's computer.
+
+```ts
+function showName(name: string) {
+  let containerElement = document.querySelector('.my-container');
+  // DON'T DO THIS
+  containerElement.innerHTML = `<div class="my-class"><b>Your name is: </b>${name}</div>`;
+}
+```
+
+Instead, use the DOM API or the Obsidian helper functions, such as `createEl()`, `createDiv()` and `createSpan()` to build the DOM element programmatically. For more information, refer to [[HTML elements]].
+
+## Resource management
+
+### Clean up resources when plugin unloads
+
+Any resources created by the plugin, such as event listeners, must be destroyed or released when the plugin unloads.
+
+When possible, use methods like [[registerEvent|registerEvent()]] or [[addCommand|addCommand()]] to automatically clean up resources when the plugin unloads.
+
+```ts
+export default class MyPlugin extends Plugin {
+  onload() {
+    this.registerEvent(this.app.vault.on("create", this.onCreate));
+  }
+
+  onCreate: (file: TAbstractFile) => {
+    // ...
+  }
+}
+```
+
+> [!note]
+> You don't need to clean up resources that are guaranteed to be removed when your plugin unloads. For example, if you register a `mouseenter` listener on a DOM element, the event listener will be garbage-collected when the element goes out of scope.
+
+### Don't detach leaves in `onunload`
+
+When the user updates your plugin, any open leaves will be reinitialized at their original position, regardless of where the user had moved them.
+
+## Commands
+
+### Avoid setting a default hotkey for commands
+
+Setting a default hotkey may lead to conflicts between plugins and may override hotkeys that the user has already configured.
+
+It's also difficult to choose a default hotkey that is available on all operating systems.
+
+### Use the appropriate callback type for commands
+
+When you add a command in your plugin, use the appropriate callback type.
+
+- Use `callback` if the command runs unconditionally.
+- Use `checkCallback` if the command only runs under certain conditions.
+
+If the command requires an open and active Markdown editor, use `editorCallback`, or the corresponding `editorCheckCallback`.
+
+## Workspace
+
+### Avoid accessing `workspace.activeLeaf` directly
+
+If you want to access the active view, use [[getActiveViewOfType|getActiveViewOfType()]] instead:
+
+```ts
+const view = this.app.workspace.getActiveViewOfType(MarkdownView);
+
+// getActiveViewOfType will return null if the active view is null, or if it's not a MarkdownView.
+if (view) {
+  // ...
+}
+```
+
+If you want to access the editor in the active note, use `activeEditor` instead:
+
+```ts
+const editor = this.app.workspace.activeEditor;
+```
+
+### Avoid managing references to custom views
+
+Managing references to custom view can cause memory leaks or unintended consequences.
+
+**Don't** do this:
+
+```ts
+this.registerViewType(MY_VIEW_TYPE, () => this.view = new MyCustomView());
+```
+
+Do this instead:
+
+```ts
+this.registerViewType(MY_VIEW_TYPE, () => new MyCustomView());
+```
+
+To access the view from your plugin, use `Workspace.getActiveLeavesOfType()`:
+
+```ts
+for (let leaf of app.workspace.getActiveLeavesOfType(MY_VIEW_TYPE)) {
+  let view = leaf.view;
+  if (view instanceof MyCustomView) {
+    // ...
+  }
+}
+```
+
+## Vault
+
+### Prefer the Editor API instead of `Vault.modify`
+
+If you want to edit an active note, use the [[Editor]] interface instead of [[Vault/modify|Vault.modify()]].
+
+Editor maintains information about the active note, such as cursor position, selection, and folded content. When you use [[Vault/modify|Vault.modify()]] to edit the note, all that information is lost, which leads to a poor experience for the user.
+
+Editor is also more efficient when making small changes to parts of the note.
+
+Only use [[Vault/modify|Vault.modify()]] if you're editing a file in the background.
+
+### Prefer the Vault API over the Adapter API
+
+Obsidian exposes two APIs for file operations: the Vault API (`app.vault`) and the Adapter API (`app.vault.adapter`).
+
+While the file operations in the Adapter API are often more familiar to many developers, the Vault API has two main advantages over the adapter.
+
+- **Performance:** The Vault API has a caching layer that can speed up file reads when the file is already known to Obsidian.
+- **Safety:** The Vault API performs file operations serially to avoid any race conditions, for example when reading a file that is being written to at the same time.
+
+### Avoid iterating all files to find a file by its path
+
+This is inefficient, especially for large vaults. Use [[Vault/getAbstractFileByPath|getAbstractFileByPath()]] instead.
+
+**Don't** do this:
+
+```ts
+vault.getAllFiles().find(file => file.path === filePath)
+```
+
+Do this instead:
+
+```ts
+const filePath = 'folder/file.md';
+
+const file = app.vault.getAbstractFileByPath(filePath);
+
+// Check if it exists and is of the correct type
+if (file instanceof TFile) {
+  // file is automatically casted to TFile within this scope.
+}
+```
+
+### Use `normalizePath()` to clean up user-defined paths
+
+Use [[normalizePath|normalizePath()]] whenever you accept user-defined paths to files or folders in the vault, or when you construct your own paths in the plugin code.
+
+`normalizePath()` takes a path and scrubs it to be safe for the file system and for cross-platform use. This function:
+
+- Cleans up the use of forward and backward slashes, such as replacing 1 or more of `\` or `/` with a single `/`.
+- Removes leading and trailing forward and backward slashes.
+- Replaces any non-breaking spaces, `\u00A0`, with a regular space.
+- Runs the path through [String.prototype.normalize](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize).
+
+```ts
+import { normalizePath } from "obsidian";
+const pathToPlugin = normalizePath(app.vault.configDir + "//plugins/my-plugin");
+// pathToPlugin contains ".obsidian/plugins/my-plugin" not .obsidian//plugins/my-plugin
+```
+
+## Editor
+
+### Change or reconfigure editor extensions
+
+If you want to change or reconfigure an [[Editor extensions|editor extension]] after you've registered using [[registerEditorExtension|registerEditorExtension()]], use [[updateOptions|updateOptions()]] to update all editors.
+
+```ts
+class MyPlugin extends Plugin {
+  private editorExtension: Extension[] = [];
+
+  onload() {
+    //...
+
+    this.registerEditorExtension(this.editorExtension);
+  }
+
+  updateEditorExtension() {
+    // Empty the array while keeping the same reference
+    // (Don't create a new array here)
+    this.editorExtension.length = 0;
+
+    // Create new editor extension
+    let myNewExtension = this.createEditorExtension();
+    // Add it to the array
+    this.editorExtension.push(myNewExtension);
+
+    // Flush the changes to all editors
+    this.app.workspace.updateOptions();
+  }
+}
+
+```
+
+## TypeScript
+
+### Prefer `const` and `let` over `var`
+
+For more information, refer to [4 Reasons Why var is Considered Obsolete in Modern JavaScript](https://javascript.plainenglish.io/4-reasons-why-var-is-considered-obsolete-in-modern-javascript-a30296b5f08f).
+
+### Prefer async/await over Promise
+
+Recent versions of JavaScript and TypeScript support the `async` and `await` keywords to run code asynchronously, which allow for more readable code than using Promises.
+
+**Don't** do this:
+
+```ts
+function test(): Promise<string | null> {
+  return requestUrl('https://example.com')
+    .then(res => res.text
+    .catch(e => {
+      console.log(e);
+      return null;
+    });
+}
+```
+
+Do this instead:
+
+```ts
+async function AsyncTest(): Promise<string | null> {
+  try {
+    let res = await requestUrl('https://example.com');
+    let text = await r.text;
+    return text;
+  }
+  catch (e) {
+    console.log(e);
+    return null;
+  }
+}
+```
+
+### Consider organizing your code base using folders
+
+If your plugin uses more than one `.ts` file, consider organizing them into folders to make it easier to review and maintain.
+
+### Rename placeholder class names
+
+The sample plugin contains placeholder names for common classes, such as `MyPlugin`, `MyPluginSettings`, and `SampleSettingTab`. Rename these to reflect the name of your plugin.

docs/obsidian-developer/Plugins/Releasing/Release your plugin with GitHub Actions.md

@@ -0,0 +1,71 @@
+Manually releasing your plugin can be time-consuming and error-prone. In this guide, you'll configure your plugin to use [GitHub Actions](https://github.com/features/actions) to automatically create a release when you create a new tag.
+
+1. In the root directory of your plugin, create a file called `release.yml` under `.github/workflows` with the following content:
+
+   ```yml
+   name: Release Obsidian plugin
+
+   on:
+     push:
+       tags:
+         - "*"
+
+   jobs:
+     build:
+       runs-on: ubuntu-latest
+
+       steps:
+         - uses: actions/checkout@v3
+
+         - name: Use Node.js
+           uses: actions/setup-node@v3
+           with:
+             node-version: "18.x"
+
+         - name: Build plugin
+           run: |
+             npm install
+             npm run build
+
+         - name: Create release
+           env:
+             GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+           run: |
+             tag="${GITHUB_REF#refs/tags/}"
+
+             gh release create "$tag" \
+               --title="$tag" \
+               --draft \
+               main.js manifest.json styles.css
+   ```
+
+2. In your terminal, commit the workflow.
+
+   ```bash
+   git add .github/workflows/release.yml
+   git commit -m "Add release workflow"
+   git push origin main
+   ```
+
+3. Create a tag that matches the version in the `manifest.json` file.
+
+   ```bash
+   git tag -a 1.0.1 -m "1.0.1"
+   git push origin 1.0.1
+   ```
+
+   - `-a` creates an [annotated tag](https://git-scm.com/book/en/v2/Git-Basics-Tagging#_creating_tags).
+   - `-m` specifies the name of your release. For Obsidian plugins, this must be the same as the version.
+
+4. Browse to your repository on GitHub and select the **Actions** tab. Your workflow might still be running, or it might have finished already.
+
+5. When the workflow finishes, go back to the main page for your repository and select **Releases** in the sidebar on the right side. The workflow has created a draft GitHub release and uploaded the required assets as binary attachments.
+
+6. Select **Edit** (pencil icon) on the right side of the release name.
+
+7. Add release notes to let users know what happened in this release, and then select **Publish release**.
+
+You've successfully set up your plugin to automatically create a GitHub release whenever you create a new tag.
+
+- If this is the first release for this plugin, you're now ready to [[Submit your plugin]].
+- If this is an update to an already published plugin, your users can now update to the latest version.

docs/obsidian-developer/Plugins/Releasing/Submission requirements for plugins.md

@@ -0,0 +1,43 @@
+This page lists extends the [[Developer policies]] with plugin-specific requirements that all plugins must follow to be published.
+
+## Only use `fundingUrl` to link to services for financial support
+
+Use [[Manifest#fundingUrl|fundingUrl]] if you accept financial support for your plugin, using services like Buy Me A Coffee or GitHub Sponsors.
+
+If you don't accept donations, remove `fundingUrl` from your manifest.
+
+## Keep plugin descriptions short and simple
+
+Good plugin descriptions help users understand your plugin quickly and succinctly. Good descriptions often start with an action statement such as:
+
+- "Translate selected text into..."
+- "Generate notes automatically from..."
+- "Import notes from..."
+- "Sync highlights and annotations from..."
+- "Open links in..."
+
+Avoid starting your description with "This is a plugin", because it'll be obvious to users in the context of the Community Plugins directory.
+
+Your description should:
+
+- Follow the [Obsidian style guide](https://help.obsidian.md/Contributing+to+Obsidian/Style+guide).
+- Have 250 characters maximum.
+- End with a period `.`.
+- Avoid using emoji or special characters.
+- Use correct capitalization for acronyms, proper nouns and trademarks such as "Obsidian", "Markdown", "PDF". If you are not sure how to capitalize a term, refer to its website or Wikipedia description.
+
+## Node.js and Electron APIs are only allowed on desktop
+
+The Node.js and Electron APIs are only available in the desktop version of Obsidian. For example, Node.js packages like `fs`, `crypto`, and `os`, are only available on desktop.
+
+If your plugin uses any of these APIs, you **must** set `isDesktopOnly` to `true` in the `manifest.json`.
+
+> [!tip]
+> Many Node.js features have Web API alternatives:
+>
+> - [`SubtleCrypto`](https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto) instead of [`crypto`](https://nodejs.org/api/crypto.html).
+> - `navigator.clipboard.readText()` and `navigator.clipboard.writeText()` to access clipboard contents.
+
+## Don't include the plugin ID in the command ID
+
+Obsidian automatically prefixes command IDs with your plugin ID. You don't need to include the plugin ID yourself.

docs/obsidian-developer/Plugins/Releasing/Submit your plugin.md

@@ -0,0 +1,96 @@
+If you want to share your plugin with the Obsidian community, the best way is to submit it to the [official list of plugins](https://github.com/obsidianmd/obsidian-releases/blob/master/community-plugins.json). Once we've reviewed and published your plugin, users can install it directly from within Obsidian. It'll also be featured in the [plugin directory](https://obsidian.md/plugins) on the Obsidian website.
+
+You only need to submit the initial version of your plugin. After your plugin has been published, users can download new releases from GitHub directly from within Obsidian.
+
+## Prerequisites
+
+To complete this guide, you'll need:
+
+- A [GitHub](https://github.com/signup) account.
+
+## Before you begin
+
+Before you submit your plugin, make sure you have the following files in the root folder of your repository:
+
+- A `README.md` that describes the purpose of the plugin, and how to use it.
+- A `LICENSE` that determines how others are allowed to use the plugin and its source code. If you need help to [add a license](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository) for your plugin, refer to [Choose a License](https://choosealicense.com/).
+- A `manifest.json` that describes your plugin. For more information, refer to [[Manifest]].
+
+## Step 1: Publish your plugin to GitHub
+
+> [!note] Template repositories
+> If you created your plugin from one of our template repositories, you may skip this step.
+
+To review your plugin, we need to access to the source code on GitHub. If you're unfamiliar with GitHub, refer to the GitHub docs for how to [Create a new repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository).
+
+## Step 2: Create a release
+
+In this step, you'll prepare a release for your plugin that's ready to be submitted.
+
+1. In `manifest.json`, update `version` to a new version that follows the [Semantic Versioning](https://semver.org/) specification, for example `1.0.0` for your initial release. You can only use numbers and periods (`.`).
+2. [Create a GitHub release](https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository#creating-a-release). The "Tag version" of the release must match the version in your `manifest.json`.
+3. Enter a name for the release, and describe it in the description field. Obsidian doesn't use the release name for anything, so feel free to name it however you like.
+4. Upload the following plugin assets to the release as binary attachments:
+
+   - `main.js`
+   - `manifest.json`
+   - `styles.css` (optional)
+
+## Step 3: Submit your plugin for review
+
+In this step, you'll submit your plugin to the Obsidian team for review.
+
+1. In [community-plugins.json](https://github.com/obsidianmd/obsidian-releases/edit/master/community-plugins.json), add a new entry at the end of the JSON array.
+
+   ```json
+   {
+     "id": "doggo-dictation",
+     "name": "Doggo Dictation",
+     "author": "John Dolittle",
+     "description": "Transcribes dog speech into notes.",
+     "repo": "drdolittle/doggo-dictation"
+   }
+   ```
+
+   - `id`, `name`, `author`, and `description` determines how your plugin appears to the user, and should match the corresponding properties in your [[Manifest]].
+   - `id` is unique to your plugin. Search `community-plugins.json` to confirm that there's no existing plugin with the same id. The `id` can't contain `obsidian`.
+   - `repo` is the path to your GitHub repository. For example, if your GitHub repo is located at https://github.com/your-username/your-repo-name, the path is `your-username/your-repo-name`.
+
+   Remember to add a comma after the closing brace, `}`, of the previous entry.
+
+2. Select **Commit changes...** in the upper-right corner.
+3. Select **Propose changes**.
+4. Select **Create pull request**.
+5. Select **Preview**, and then select **Community Plugin**.
+6. Click **Create pull request**.
+7. In the name of the pull request, enter "Add [...] plugin", where [...] is the name of your plugin.
+8. Fill in the details in the description for the pull request. For the checkboxes, insert an `x` between the brackets, `[x]`, to mark them as done.
+9. Click **Create pull request** (for the last time 🤞).
+
+You've now submitted your plugin to the Obsidian plugin directory. Sit back and wait for an initial validation by our friendly bot. It may take a few minutes before the results are ready.
+
+- If you see a **Ready to review** label on your PR, your submission has passed the automatic validation.
+- If you see a **Validation failed** label on your PR, you need to address all listed issues until the bot assigns a **Ready to review** label.
+
+Once your submission is ready to review, you can sit back and wait for the Obsidian team to review it.
+
+> [!question] How long does it take to review my plugin?
+> The time it takes to review your submission depends on the current workload of the Obsidian team. The team is still small, so please be patient while you wait for your plugin to be reviewed. We're currently unable to give any estimates on when we'll be able to review your submission.
+
+## Step 4: Address review comments
+
+Once a reviewer has reviewed your plugin, they'll add a comment to your pull request with the result of the review. The reviewer may require that you update your plugin, or they can offer suggestions on how you can improve it.
+
+Address any required changes and update the GitHub release with the new changes. Leave a comment on the PR to let us know you've addressed the feedback. Don't open a new PR.
+
+We'll publish the plugin as soon we've verified that all required changes have been addressed.
+
+> [!note]
+> While only Obsidian team members can publish your plugin, other community members may also offer to review your submission in the meantime.
+
+## Next steps
+
+Once we've reviewed and published your plugin, it's time to announce it to the community:
+
+- Announce in [Share & showcase](https://forum.obsidian.md/c/share-showcase/9) in the forums.
+- Announce in the `#updates` channel on [Discord](https://discord.gg/veuWUTm). You need the [`developer` role](https://discord.com/channels/686053708261228577/702717892533157999/830492034807758859) to post in `#updates`.

docs/obsidian-developer/Plugins/User interface/About user interface.md

@@ -0,0 +1,11 @@
+This page gives you an overview of how to add or change the Obsidian user interface.
+
+You can see some of the user interface components when you first open Obsidian.
+
+- [[Ribbon actions]]
+- [[Views]]
+- [[Plugins/User interface/Status bar|Status bar]]
+
+To modify the editor, refer to [[Editor]] and [[Editor extensions]].
+
+![User interface](user-interface.png)

docs/obsidian-developer/Plugins/User interface/Commands.md

@@ -0,0 +1,121 @@
+Commands are actions that the user can perform from the [Command Palette](https://help.obsidian.md/Plugins/Command+palette) or by using a hot key.
+
+![[command.png]]
+
+To register a new command for your plugin, call the [[addCommand|addCommand()]] method inside the `onload()` method:
+
+```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!");
+      },
+    });
+  }
+}
+```
+
+## Conditional commands
+
+If your command is only able to run under certain conditions, then consider using [[checkCallback|checkCallback()]] instead.
+
+The `checkCallback` runs twice. First, to perform a preliminary check to determine whether the command can run. Second, to perform the action.
+
+Since time may pass between the two runs, you need to perform the check during both calls.
+
+To determine whether the callback should perform a preliminary check or an action, a `checking` argument is passed to the callback.
+
+- If `checking` is set to `true`, perform a preliminary check.
+- If `checking` is set to `false`, perform an action.
+
+The command in the following example depends on a required value. In both runs, the callback checks that the value is present but only performs the action if `checking` is `false`.
+
+```ts
+this.addCommand({
+  id: 'example-command',
+  name: 'Example command',
+  // highlight-next-line
+  checkCallback: (checking: boolean) => {
+    const value = getRequiredValue();
+
+    if (value) {
+      if (!checking) {
+        doCommand(value);
+      }
+
+      return true
+    }
+
+    return false;
+  },
+});
+```
+
+## Editor commands
+
+If your command needs access to the editor, you can also use the [[editorCallback|editorCallback()]], which provides the active editor and its view as arguments.
+
+```ts
+this.addCommand({
+  id: 'example-command',
+  name: 'Example command',
+  editorCallback: (editor: Editor, view: MarkdownView) => {
+    const sel = editor.getSelection()
+
+    console.log(`You have selected: ${sel}`);
+  },
+}
+```
+
+> [!note]
+> Editor commands only appear in the Command Palette when there's an active editor available.
+
+If the editor callback can only run given under certain conditions, consider using the [[editorCheckCallback|editorCheckCallback()]] instead. For more information, refer to [[#Conditional commands]].
+
+```ts
+this.addCommand({
+  id: 'example-command',
+  name: 'Example command',
+  editorCheckCallback: (checking: boolean, editor: Editor, view: MarkdownView) => {
+    const value = getRequiredValue();
+
+    if (value) {
+      if (!checking) {
+        doCommand(value);
+      }
+
+      return true
+    }
+
+    return false;
+  },
+});
+```
+
+## Hot keys
+
+The user can run commands using a keyboard shortcut, or _hot key_. While they can configure this themselves, you can also provide a default hot key.
+
+> [!warning]
+> Avoid setting default hot keys for plugins that you intend for others to use. Hot keys are highly likely to conflict with those defined by other plugins or by the user themselves.
+
+In this example, the user can run the command by pressing and holding Ctrl (or Cmd on Mac) and Shift together, and then pressing the letter `a` on their keyboard.
+
+```ts
+this.addCommand({
+  id: 'example-command',
+  name: 'Example command',
+  hotkeys: [{ modifiers: ["Mod", "Shift"], key: "a" }],
+  callback: () => {
+    console.log('Hey, you!');
+  },
+});
+```
+
+> [!note]
+> The Mod key is a special modifier key that becomes Ctrl on Windows and Linux, and Cmd on macOS.

docs/obsidian-developer/Plugins/User interface/Context menus.md

@@ -0,0 +1,80 @@
+If you want to open up a context menu, use [[Menu|Menu]]:
+
+```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);
+    });
+  }
+}
+```
+
+[[showAtMouseEvent|showAtMouseEvent()]] opens the menu where you clicked with the mouse.
+
+> [!tip]
+> If you need more control of where the menu appears, you can use `menu.showAtPosition({ x: 20, y: 20 })` to open the menu at a position relative to the top-left corner of the Obsidian window.
+
+For more information on what icons you can use, refer to [[Plugins/User interface/Icons|Icons]].
+
+You can also add an item to the file menu, or the editor menu, by subscribing to the `file-menu` and `editor-menu` workspace events:
+
+![[context-menu-positions.png]]
+
+```ts
+import { Notice, Plugin } from "obsidian";
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    this.registerEvent(
+      this.app.workspace.on("file-menu", (menu, file) => {
+        menu.addItem((item) => {
+          item
+            .setTitle("Print file path 👈")
+            .setIcon("document")
+            .onClick(async () => {
+              new Notice(file.path);
+            });
+        });
+      })
+    );
+
+  this.registerEvent(
+      this.app.workspace.on("editor-menu", (menu, editor, view) => {
+        menu.addItem((item) => {
+          item
+            .setTitle("Print file path 👈")
+            .setIcon("document")
+            .onClick(async () => {
+              new Notice(view.file.path);
+            });
+        });
+      })
+    );
+  }
+}
+```
+
+For more information on handling events, refer to [[Events]].

docs/obsidian-developer/Plugins/User interface/HTML elements.md

@@ -0,0 +1,83 @@
+Several components in the Obsidian API, such as the [[Settings]], expose _container elements_:
+
+```ts
+import { App, PluginSettingTab } from "obsidian";
+
+class ExampleSettingTab extends PluginSettingTab {
+  plugin: ExamplePlugin;
+
+  constructor(app: App, plugin: ExamplePlugin) {
+    super(app, plugin);
+    this.plugin = plugin;
+  }
+
+  display(): void {
+    // highlight-next-line
+    let { containerEl } = this;
+
+    // ...
+  }
+}
+```
+
+Container elements are `HTMLElement` objects that make it possible to create custom interfaces within Obsidian.
+
+## Create HTML elements using `createEl()`
+
+Every `HTMLElement`, including the container element, exposes a `createEl()` method that creates an `HTMLElement` under the original element.
+
+For example, here's how you can add an `<h1>` heading element inside the container element:
+
+```ts
+containerEl.createEl("h1", { text: "Heading 1" });
+```
+
+`createEl()` returns a reference to the new element:
+
+```ts
+const book = containerEl.createEl("div");
+book.createEl("div", { text: "How to Take Smart Notes" });
+book.createEl("small", { text: "Sönke Ahrens" });
+```
+
+## Style your elements
+
+You can add custom CSS styles to your plugin by adding a `styles.css` file in the plugin root directory. To add some styles for the previous book example:
+
+```css title="styles.css"
+.book {
+  border: 1px solid var(--background-modifier-border);
+  padding: 10px;
+}
+
+.book__title {
+  font-weight: 600;
+}
+
+.book__author {
+  color: var(--text-muted);
+}
+```
+
+> [!tip]
+> `--background-modifier-border` and `--text-muted` are [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) that are defined and used by Obsidian itself. If you use these variables for your styles, your plugin will look great even if the user has a different theme! 🌈
+
+To make the HTML elements use the styles, set the `cls` property for the HTML element:
+
+```ts
+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" });
+```
+
+Now it looks much better! 🎉
+
+![[styles.png]]
+
+### Conditional styles
+
+Use the `toggleClass` method if you want to change the style of an element based on the user's settings or other values:
+
+```ts
+element.toggleClass("danger", status === "error");
+```

docs/obsidian-developer/Plugins/User interface/Icons.md

@@ -0,0 +1,72 @@
+Several of the UI components in the Obsidian API lets you configure an accompanying icon. You can choose from one of the built-in icons, or you can add your own.
+
+## Browse available icons
+
+Browse to [lucide.dev](https://lucide.dev/) to see all available icons and their corresponding names.
+
+**Please note:** Only icons up to v0.171.0 are supported at this time.
+
+## Use icons
+
+If you'd like to use icons in your custom interfaces, use the [[setIcon|setIcon()]] utility function to add an icon to an [[HTML elements|HTML element]]. The following example adds icon to the status bar:
+
+```ts
+import { Plugin, setIcon } from "obsidian";
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    const item = this.addStatusBarItem();
+    setIcon(item, "info");
+  }
+}
+```
+
+To change the size of the icon, set the `--icon-size` [[Reference/CSS variables/Foundations/Icons|CSS variable]] on the element containing the icon using preset sizes:
+
+```css
+div {
+  --icon-size: var(--icon-size-m);
+}
+```
+
+## Add your own icon
+
+To add a custom icon for your plugin, use the [[addIcon|addIcon()]] utility:
+
+```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!");
+    });
+  }
+}
+```
+
+`addIcon` takes two arguments:
+
+1. A name to uniquely identify your icon.
+2. The SVG content for the icon, without the surrounding `<svg>` tag.
+
+Note that your icon needs to fit within a `0 0 100 100` view box to be drawn properly.
+
+After the call to `addIcon`, you can use the icon just like any of the built-in icons.
+
+### Icon design guidelines
+
+For compatibility and cohesiveness with the Obsidian interface, your icons should [follow Lucide’s guidelines](https://lucide.dev/guide/design/icon-design-guide):
+
+- Icons must be designed on a 24 by 24 pixels canvas
+- Icons must have at least 1 pixel padding within the canvas
+- Icons must have a stroke width of 2 pixels
+- Icons must use round joins
+- Icons must use round caps
+- Icons must use centered strokes
+- Shapes (such as rectangles) in icons must have border radius of 2 pixels
+- Distinct elements must have 2 pixels of spacing between each other
+
+Lucide also [provides templates and guides](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md) for vector editors such as Illustrator, Figma, and Inkscape.

docs/obsidian-developer/Plugins/User interface/Modals.md

@@ -0,0 +1,169 @@
+Modals display information and accept input from the user. To create a modal, create a class that extends [[Reference/TypeScript API/Modal/Modal|Modal]]:
+
+```ts
+import { App, Modal } from "obsidian";
+
+export class ExampleModal extends Modal {
+  constructor(app: App) {
+    super(app);
+  }
+
+  onOpen() {
+    let { contentEl } = this;
+    contentEl.setText("Look at me, I'm a modal! 👀");
+  }
+
+  onClose() {
+    let { contentEl } = this;
+    contentEl.empty();
+  }
+}
+```
+
+- [[Reference/TypeScript API/View/onOpen|onOpen()]] is called when the modal is opened and is responsible for building the content of your modal. For more information, refer to [HTML elements](HTML%20elements.md).
+- [[Reference/TypeScript API/Modal/onClose|onClose()]] is called when the modal is closed and is responsible for cleaning up any resources used by the modal.
+
+To open a modal, create a new instance of `ExampleModal` and call [[Reference/TypeScript API/Modal/open|open()]] on it:
+
+```ts
+import { Plugin } from "obsidian";
+import { ExampleModal } from "./modal";
+
+export default class ExamplePlugin extends Plugin {
+  async onload() {
+    this.addCommand({
+      id: "display-modal",
+      name: "Display modal",
+      callback: () => {
+        new ExampleModal(this.app).open();
+      },
+    });
+  }
+}
+```
+
+## Accept user input
+
+The modal in the previous example only displayed some text. Let's look at a little more complex example that handles input from the user.
+
+![[modal-input.png]]
+
+```ts
+import { App, Modal, Setting } from "obsidian";
+
+export class ExampleModal extends Modal {
+  result: string;
+  onSubmit: (result: string) => void;
+
+  constructor(app: App, onSubmit: (result: string) => void) {
+    super(app);
+    this.onSubmit = onSubmit;
+  }
+
+  onOpen() {
+    const { contentEl } = this;
+
+    contentEl.createEl("h1", { text: "What's your name?" });
+
+    new Setting(contentEl)
+      .setName("Name")
+      .addText((text) =>
+        text.onChange((value) => {
+          this.result = value
+        }));
+
+    new Setting(contentEl)
+      .addButton((btn) =>
+        btn
+          .setButtonText("Submit")
+          .setCta()
+          .onClick(() => {
+            this.close();
+            this.onSubmit(this.result);
+          }));
+  }
+
+  onClose() {
+    let { contentEl } = this;
+    contentEl.empty();
+  }
+}
+```
+
+The result is stored in `this.result` and returned in the `onSubmit` callback when the user clicks **Submit**:
+
+```ts
+new ExampleModal(this.app, (result) => {
+  new Notice(`Hello, ${result}!`);
+}).open();
+```
+
+## Select from list of suggestions
+
+[[SuggestModal|SuggestModal]] is a special modal that lets you display a list of suggestions to the user.
+
+![[suggest-modal.gif]]
+
+```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}`);
+  }
+}
+```
+
+In addition to `SuggestModal`, the Obsidian API provides an even more specialized type of modal for suggestions: the [[FuzzySuggestModal|FuzzySuggestModal]]. While it doesn't give you the same control of how each item is rendered, you get [fuzzy string search](https://en.wikipedia.org/wiki/Approximate_string_matching) out-of-the-box.
+
+![[fuzzy-suggestion-modal.png]]
+
+```ts
+export class ExampleModal 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}`);
+  }
+}
+```