Skip to content

View (Monaco)

Falcion edited this page Nov 12, 2024 · 2 revisions

UNITADE not only supports default views and extensions from Obsidian's view registry system and custom plugin view registries but also implements its own "extensions- as-code" system, enabling users to edit files similarly to popular code editors like Microsoft's. One of these views is supported by the Monaco Editor.

Note

This "codeview" is cross-platform and generally supports everything that the basic instance of Monaco supports (e.g., VS Code).

The codeview instance is divided into three core elements, one of which is specifically created for the modal for "editing codeblocks", another feature of UNITADE. The other two elements work together to enable code editing within contexts and as a view for Obsidian.

Context Editor

The Context Editor is a part of the "codeview" ecosystem, serving one main purpose: creating an instance (context) of the code editor and establishing a value-pair for this context. This allows users to maintain values within this context (such as files within an extension render).

    ...
    constructor(contentEl: HTMLElement, plugin: UNITADE_PLUGIN, code: string, language: string, miniMap: boolean = true, wordWrap: boolean = false) {
        this.contentEl = contentEl;
        this.plugin = plugin;
        this.value = code;
    
        const setting = genEditorSettings(this.plugin.settings, language, miniMap, wordWrap);
    
        this.monacoEditor = monaco.editor.create(this.contentEl, setting);
        this.monacoEditor.setValue(this.value);
    }
    ...

It also generates primary settings for the entire code editor system of this plugin, basing its entry values on configured settings.

Code View

Simply put, this is the render (or view) for the code editor itself. It uses every prepared infrastructure item (context, settings) and allows users to view files as code.

Note

For more practical information, it is recommended to review the corresponding code source: View source code.

Codeblock Context Editor

This context creator validates based on "fences" (``` symbol) to determine the language and other data (including existing code) for codeblocks.

Clone this wiki locally