[FEATURE] Formatowanie markdown i latex

[MarvinRucinski]

Markdown + LaTeX (Notion-like editor + symbole)

Jaki problem rozwiązujemy?

Obecnie renderowanie wzorów jest nieprzewidywalne (zgadywanie czy coś jest LaTeX).
Brakuje też wygodnego sposobu na wpisywanie wzorów i symboli.

---

Cel

• pełna obsługa Markdown + LaTeX
• edycja w stylu Notion (live preview zamiast “surowego” kodu)
• możliwość przełączenia na edycję źródła
• prosty picker symboli matematycznych

---

UX

Edytor

• użytkownik widzi od razu sformatowaną treść (preview)
• Markdown renderowany na bieżąco (nagłówki, listy itd.)
• LaTeX renderowany inline i block

Przykłady:

• $x^2$ → render jako wzór inline
• $$...$$ → render jako blok

Tryb edycji kodu

• przy elemencie (lub globalnie) mały przycisk typu </>
• po kliknięciu:
  • przełączenie na raw view (Markdown + LaTeX)
• ponowne kliknięcie → powrót do preview

---

Logika

• brak zgadywania czy coś jest LaTeX
• render tylko dla:
  • $...$ (inline)
  • $$...$$ (block)
• reszta traktowana jako zwykły tekst
• błędny LaTeX:
  • nie crashuje
  • fallback do tekstu

---

Biblioteka symboli

• przy edytorze przycisk „∑” / „fx”
• otwiera picker z symbolami:
  • podstawowe: ułamki, potęgi, pierwiastki
  • greckie litery
  • operatory (∑, ∫, ≤, ≥ itd.)

Zachowanie

• kliknięcie w symbol:
  • wstawia odpowiedni zapis LaTeX w aktualnym miejscu kursora
  • np. \frac{}{}
• opcjonalnie focus na placeholderach {}

---

Technicznie (propozycja)

• Markdown:
  • react-markdown
• math:
  • remark-math
  • rehype-katex
• stylowanie:
  • KaTeX CSS

---

Edge case’y

• mieszanie Markdown + LaTeX w jednym bloku
• kopiuj/wklej (np. z innych źródeł)
• brak $ → brak renderu
• niepoprawny zapis → fallback

[MarvinRucinski]

@Qufel jak idzie?

[Qufel]

Dopiero od dzisiaj mam czas żeby zacząć robić, także prace już ruszają do przodu

@Qufel jak idzie?

[x-at-01]

Jeśli planujecie wdrożenie edytora markdown i LaTeX w oparciu o react-markdown i remark-math, warto rozważyć kompilację wzorów bezpośrednio do natywnego MathML Core zamiast ładowania biblioteki KaTeX i jej ciężkich stylów CSS oraz czcionek.

Od początku 2023 roku wszystkie wiodące silniki przeglądarek (Blink, WebKit, Gecko) natywnie wspierają specyfikację MathML Core (znaczniki <math>). Oznacza to, że przeglądarka renderuje równania bezpośrednio w C++ przy użyciu systemowych czcionek matematycznych.

Napisałem bibliotekę @webc.site/math (GitHub: https://github.com/webc-site/math, Demo: https://math.webc.site) — najmniejszy i najszybszy kompilator TeX-to-MathML:

• Rozmiar: Tylko 3.58 KB Gzipped (w porównaniu do kilkuset KB KaTeX-a i jego czcionek).
• Szybkość: Około 329 000 operacji na sekundę (3.6x szybciej niż KaTeX).

Integracja z react-markdown i remark-math w Waszym komponencie edytora jest niezwykle prosta:

import compile from '@webc.site/math';
import ReactMarkdown from 'react-markdown';
import remarkMath from 'remark-math';

const components = {
  math: ({ value }) => <span dangerouslySetInnerHTML={{ __html: compile(value, true) }} />,
  inlineMath: ({ value }) => <span dangerouslySetInnerHTML={{ __html: compile(value, false) }} />
};

<ReactMarkdown
  remarkPlugins={[[remarkMath, { singleDollarTextMath: false }]]}
  components={components}
>
  {content}
</ReactMarkdown>

Dzięki temu rozwiązaniu:

1. Zyskujecie natychmiastowe ładowanie wzorów bez opóźnień na parsowanie JS czy pobieranie plików czcionek.
2. Całkowicie eliminujecie narzut pobierania stylów CSS KaTeX-a.
3. Wzory natywnie dziedziczą kolor tekstu, co eliminuje problemy ze stylowaniem w trybie ciemnym (dark mode).