Obsidian latex suite

[superle3]

I'm currently decoupling the https://github.com/artisticat1/obsidian-latex-suite obsidian plugin from obsidian such that it works with just the codemirror api (and mathjax) at https://github.com/superle3/snippet-leaf.
Would you be interested in integrating this into texlyre?
I could make it a proper codemirror extension such that you only have to make an ui for the settings
or you could add a event for third party extensions like overleaf and I would hook into that with a browser extension.

of the 4 features

• snippet engine/text expansion
• concealment
• coloring brackets
• math inline preview

I think I am done with the snippet engine and I am partially done with concealment
see image below.

For a proper explanation of the features the original plugin https://github.com/artisticat1/obsidian-latex-suite or the blog that inspired it https://castel.dev/post/lecture-notes-1/ have a better explanation, but the TLDR is: it makes writing latex much easier and less mentally taxing as the writing of the symbols is closer how you would think it in your head or speak about it.

I was able to make the event work with the code below

import {
    invertedEffects,
    isolateHistory,
    redo,
    undo,
} from "@codemirror/commands";
import { syntaxTree } from "@codemirror/language";
import {
    ChangeSet,
    Compartment,
    EditorSelection,
    EditorState,
    Prec,
    RangeSet,
    RangeSetBuilder,
    RangeValue,
    StateEffect,
    StateField,
} from "@codemirror/state";
import {
    Decoration,
    EditorView,
    keymap,
    ViewPlugin,
    WidgetType,
} from "@codemirror/view";
import {
    vim,
    CodeMirror as VimCodeMirror,
    Vim,
    getCM,
} from "@replit/codemirror-vim";
import { basicSetup } from "codemirror";
import { latex } from "codemirror-lang-latex";
import { mkConcealPlugin } from "./conceal/conceal";

const thirdPartyExtensionsConf = new Compartment();
const CodeMirror = {
    Prec,
    keymap,
    EditorView,
    ViewPlugin,
    syntaxTree,
    Decoration,
    EditorSelection,
    WidgetType,
    StateField,
    StateEffect,
    invertedEffects,
    ChangeSet,
    isolateHistory,
    undo,
    redo,
};
const CodeMirrorVim = {
    VimCodeMirror,
    Vim,
    getCM,
};

const extraExtensions = {
    RangeSet,
    RangeValue,
    RangeSetBuilder,
};

/**
 *
 * @param {Extension[]} extensions
 */
const dispatchEvent = (extensions) => {
    window.dispatchEvent(
        new CustomEvent("UNSTABLE_editor:extensions", {
            detail: { CodeMirror, CodeMirrorVim, extensions, extraExtensions },
        })
    );
};

/**
 * A custom extension that allows additional CodeMirror extensions to be provided by external code,
 * e.g. browser extensions.
 * @returns {Extension[]} An array of CodeMirror extensions.
 */
export const thirdPartyExtensions = async () => {
    /**
     * @type {Extension[]}
     */
    const extensions = [];

    dispatchEvent(extensions);
    await new Promise((resolve) => {
        setTimeout(() => {
            console.log("CodeMirror and Vim are ready");
            resolve();
        }, 10);
    });
    console.log("waiting for extensions to load", extensions);

    return [thirdPartyExtensionsConf.of(extensions), extensionLoaded];
    // return extensions;
};

const extensionLoaded = ViewPlugin.define((view) => {
    const listener = () => {
        /** @type {Extension[]} */
        const extensions = [];

        dispatchEvent(extensions);

        view.dispatch({
            effects: thirdPartyExtensionsConf.reconfigure(extensions),
        });
    };

    window.addEventListener("editor:extension-loaded", listener);

    return {
        destroy() {
            window.removeEventListener("editor:extension-loaded", listener);
        },
    };
});
const doc = `
\\documentclass{article}
\\usepackage{amsmath}
\\begin{document}
$\\alpha + \\beta$
$$\\int_0^1 x^2 \\, dx$$

\\( e^{x} = \\lim_{n \\to \\infty} \\left(1 + \\frac{x}{n}\\right)^{n} \\)

\\begin{align}
\\text{hello world \\(x^2\\)} \\\\
\\textbf{hello world!!! \\(x^2\\)}
\\end{align}

\\[
\\frac{1}{2}
\\]

\\[ e^{x} = \\lim_{n \\to \\infty} \\left(1 + \\frac{x}{n} \\right)^{n} \\]
\\end{document}
`;



async function main() {
    await new Promise((resolve) => {
        setTimeout(() => {
            console.log("CodeMirror and Vim are ready");
            resolve();
        }, 10);
    });
    const thirdPartyExtension = await thirdPartyExtensions();
    const view = new EditorView({
        doc: doc,
        parent: document.querySelector("#editor"),
    });
    console.log("thirpartyExtension", thirdPartyExtension);
    const conceal_plugin = mkConcealPlugin(100).extension;
    const state = EditorState.create({
        doc: doc,
        extensions: [vim(), basicSetup, latex(), thirdPartyExtension],
    });
    view.setState(state);
}

main();

[fabawi]

Looks good! Of course, I don't see why not, it would be a nice addition to TeXlyre. Would be great if it's an extension as this would require fewer modifications and can be reused by any codemirror editor. Either way, it should be fine. Do you plan on making an extension?

[superle3]

I'll release it as a browser extension and a codemirror extension hopefully by the end of summer.
I still want to implement the coloring brackets and inline preview and I still want to check if there is an bug/feature that requires a slight break in backwards compatibility as I don't want to do that after an official release.

Would be great if it's an extension as this would require fewer modifications

True, but it would require ui.

[fabawi]

Alright, we can integrate it as is for now and switch to the extension when it's available. I will integrate this in the next few weeks. If you would rather make the contribution yourself, that would be more than welcome

[fabawi]

This feature will be optional, of course, and will be disabled by default; however, we'll have to put it on hold for a while. If there is more demand for it, we can put it back on the table. After consulting with a few avid LaTeX users, it seems they unanimously agree that this kind of feature is perceived to be more of a distraction than a utility

[superle3]

Which feature is a distraction?
And what makes it a distraction?
As a side note what editors are they using, because you have to explicitly turn these features off in the respective latex extensions in nvim, Emacs and vscode.

[fabawi]

They don't need to see the equation on hover. If they want to preview it, they will build the document. Makes sense for a beginner to show changes as they type, not very helpful in most practical cases.

I am not opposed to having it in TeXlyre, we want features that are beneficial to all levels of expertise. However, it is not on my list of top priorities atm. You are welcome to contribute it though

[superle3]

It depends on your use-case. When using latex as a markdown substitute for quick notes or homework for example seeing the equations immediately is always useful regardless of the skill set as for complex enough math, latex code is too hard to parse compared to a mathjax preview. When using it for a report then the latex will be less math-heavy and then it can be more distracting than a utility.

I will try to make a pr once I have finished the browser extension and the codemirror api. There are still a few things that need to be implemented before its ready (like dark and light mode for the highlighting brackets).

The only thing that needs to be implemented in texlyre is the ui for the settings,
Obsidians settings look like the images below. The basic settings like dropdowns, toggles and such are easy to implement.
Only the snippets editor and the snippet variables editor are a bit more tricky.
The snippet variables editor seems to mostly use some css and the snippets editor is just a codemirror editor with javascript as the language.
Is this ui/layout okay? Also a dynamic import is used for both the snippet settings, json can be used but that would limit some functionality and break the default settings.

[fabawi]

TeXlyre has a builtin settings interface. You can just use that so you won't need to build a specific one for your tool.

Check out extras/renderers/pdf/settings.ts where it uses the existing context from src/contexts/SettingsContext to create the settings for the PDF renderer and sets/gets them here extras/renderers/pdf/PdfRenderer.tsx.

To test your extension with TeXlyre, simple add it to the src/services/EditorLoader.ts. Once it works, we can create an additional plugin category in extras called extensions and load all those extensions that end up there in the editor

[superle3]

that doesn't work sadly. The textbox is too small (also no syntax highlighting).

[fabawi]

Once the extension works, we can add those field types to the settings context, no problem. Do you need json or js syntax highlight?

[superle3]

js syntax highlight, it stores the settings as a js file and imports the default export as the setting.

[fabawi]

{
		id: 'mathtooltip-extension-custom-script',
		category: 'Extensions',
		subcategory: 'Math Tooltip',
		type: 'codemirror',
		label: 'Custom JavaScript',
		description: 'Enter custom JavaScript code',
		defaultValue: '// Your code here\nconsole.log("Hello World");',
		codeMirrorOptions: {
			language: 'javascript',
			height: 15,
			lineNumbers: true,
			resizable: true,
			theme: 'auto',
		}
},

You can now add the following to your settings.ts to create a multiline field with javascript highlight

[superle3]

texlyre/src/services/EditorLoader.ts

Line 48 in dac8c07

export const EditorLoader = (

is synchronous but importing javascript dynamically is asynchronous, should I just store both the string version and the parsed version in the storage/context?

Also the codemirror setting is updating the setting value without validating it first. Is this intentional, cause the valid version would only show up after reloading the page instead of reopening the settings.

[superle3]

Would be great if it's an extension as this would require fewer modifications and can be reused by any codemirror editor

(a bit late, but I just thought about it)

For vim or changing other keymaps, it could still be worth it to implement some external api or give support for javascript inside texlyre? (But inside texlyre could also be overkill as some people want to use, but I presume not a lot that it needs a lot of "polish")