Mawy
Ein Markdown-Editor, der auch das Lesen übernimmt, ausgeliefert als React-Bibliothek und als Flutter-Paket. Geschrieben wird im fertig gesetzten Dokument oder in der Quelle, beides einen Klick voneinander entfernt, und der fertige Text geht durch eine schreibgeschützte Ansicht, die ihn genau gleich darstellt.
Über dieses Projekt
Mawy ist ein Markdown-Editor und eine Markdown-Ansicht in einer einzigen Bibliothek, für React und für Flutter. Ein Editor und ein getrennt gepflegter Renderer geraten irgendwann über irgendetwas auseinander — eine Tabelle, eine verschachtelte Liste, einen Codeblock — und in diesem Moment ist das Dokument, das der Schreibende freigegeben hat, nicht mehr das Dokument, das der Lesende bekommt. Hier teilen sich beide Hälften denselben Parser und denselben Renderer: Was getippt wurde, ist das, was gelesen wird.
Der Editor sind zwei Ansichten eines Dokuments und nicht zwei Editoren. Die Markdown-Quelle mit ihrer Syntaxfärbung und die gesetzte Seite liegen einen Klick auseinander, jeder Befehl der Formatierungsleiste ist zugleich ein Tastaturkürzel, und beim Wechsel geht nichts verloren, was die andere Ansicht nicht ausdrücken konnte. Unter der Färbung liegt ein echtes textarea, und genau das hält den Rückgängig-Verlauf des Browsers, die Komposition der Eingabemethoden und die Tastatur auf dem Telefon am Leben. Die Ansicht ist ein fertiger Leser: Schrift, Schriftgröße, Zeilenabstand, Laufweite, Spaltenbreite, hell oder dunkel und eine Gliederung der Überschriften — nichts davon rührt das Dokument an. Ohne Dokument ist sie eine Dateiauswahl: eine .md-Datei darauf fallen zu lassen, dafür ist ihr leerer Zustand da.
Die Einrichtung ist das Paket und eine Zeile CSS. Alles, was die Bibliothek zeichnet, geht durch --mawy-*-Custom-Properties, Theming heißt also, ein Token auf einem umschließenden Element neu zu deklarieren, statt eine Regel per Spezifität zu überbieten — und der Dunkelmodus ist eines dieser Token. Es wird nichts von außen geladen: Das Schriftmenü bietet an, was auf dem Gerät des Lesenden ohnehin liegt, und die dreizehn frei lizenzierten Familien, die mitkommen, werden nur benutzt, wenn die Anwendung sie übergibt. Markdown wird zu Elementen und nicht zu einer HTML-Zeichenkette, zwischen Dokument und Seite steht also kein innerHTML. Das React-Paket ist reines ESM, bringt TypeScript-Deklarationen mit und hat eine einzige Laufzeitabhängigkeit, die für die Symbole der Leiste.
Funktionen
Dokumentationsseite
TypeScript-Typen
Mehrsprachig
Durch Tests geprüft
Plattformübergreifend
Barrierefrei gebaut
Dunkelmodus
Tree-shakebar