Iced Markdown Editor

Ein WYSIWYG-Markdown-Editor im Stil von Word für iced-Apps, auf dem Desktop und im Web.

Der Editor im Browser: formatierter Text mit Werkzeugleiste links, der Markdown-Quelltext rechts

Iced Markdown Editor ist eine Rust-Bibliothek, die jeder iced-App einen vollständigen Markdown-Editor hinzufügt. Die Nutzer sehen formatierten Text wie in einer Textverarbeitung, während Ihre App einfaches CommonMark liest und schreibt. Der Editor steckt auch hinter den Notizen in FloeTask.

Funktionen

  • Seiten oder volle Breite. Zeigen Sie das Dokument auf Seiten wie in einer Textverarbeitung (A4, Letter oder eigene Grösse, mit Rändern) oder über das ganze Fenster.
  • Formatierungsleiste. Mit Tastenkürzeln und automatischer Formatierung wie in Word: - startet eine Liste, # eine Überschrift.
  • Listen und Aufgaben. Verschachtelte Listen, Aufgabenlisten mit anklickbaren Kästchen, Zitate und Codeblöcke.
  • Tabellen. Mit Spaltenausrichtung. Tab und Enter springen zwischen den Zellen.
  • Zwei Modi, dieselben Seiten. Wechseln Sie jederzeit zwischen formatierter Ansicht und Markdown-Quelltext.
  • Das Wichtigste. Zoom, Rückgängig und Wiederholen sowie Zwischenablage.
  • Fünf Sprachen. Werkzeug- und Statusleiste auf Deutsch, Englisch, Französisch, Spanisch und Italienisch.
  • Optionale Extras. Syntaxhervorhebung in Codeblöcken (Feature syntect) und Bilder (Feature images).
Der Editor im dunklen Design mit dem Dokument auf einer A4-Seite, daneben der Markdown-Quelltext
Seitenansicht auf A4-Papier im dunklen Design.

Korrektes Markdown

Der Editor unterstützt CommonMark sowie die GitHub-Erweiterungen für Durchstreichen, Aufgabenlisten und Tabellen. Alle 652 Beispiele der CommonMark-Spezifikation 0.31.2 sind getestet: Sie kommen unverändert wieder aus dem Editor heraus.

Verwendung

Fügen Sie die Bibliothek neben iced hinzu:

[dependencies]
iced = "0.14"
iced-markdown-editor = { version = "0.3", features = ["syntect", "images"] }

Der Editor folgt dem üblichen Muster von iced: Ihre App hält einen EditorState, gibt dessen Aktionen an update weiter und zeichnet ihn in view.

use iced_markdown_editor::{markdown_editor, Action, EditorState, Event};

struct App {
    editor: EditorState,
}

#[derive(Debug, Clone)]
enum Message {
    Editor(Action),
}

impl App {
    fn update(&mut self, message: Message) -> iced::Task<Message> {
        let Message::Editor(action) = message;
        let output = self.editor.update(action);
        if output.events.contains(&Event::Changed) {
            let markdown = self.editor.markdown(); // speichern
        }
        output.task.map(Message::Editor)
    }

    fn view(&self) -> iced::Element<'_, Message> {
        markdown_editor(&self.editor).view().map(Message::Editor)
    }
}

Das Repository enthält Beispiele für eine vollständige Demo, eine minimale Einrichtung, mehrere Varianten für den Umgang mit Bildern und eine Version, die im Browser läuft.

Lizenz

Wahlweise unter MIT oder Apache 2.0 lizenziert. Die mitgelieferten DejaVu-Schriften haben eine eigene Lizenz.