Zum Inhalt springen
Anjunar/ DOCS

Scala JS Ember

Eine Headless-first-Rich-Text-Engine für Scala.js. Ein unveränderliches Dokument treibt serverseitiges HTML und einen hydrierten Editor im Browser; darunter liegt keine contenteditable-Befehlsschicht.

1.0.3Aktuelle Version
Scala.jsLäuft auf
Scala 3.3Sprachversion
MITLizenz

Installation

Module werden einzeln veröffentlicht. Ein minimaler Rich-Text-Editor braucht Kern, Rich-Text-Profil, HTML-Vertrag und Ansicht.

sbt
enablePlugins(ScalaJSPlugin) libraryDependencies ++= Seq( "com.anjunar" %% "scalajs-ember-core" % "1.0.3", "com.anjunar" %% "scalajs-ember-rich-text" % "1.0.3", "com.anjunar" %% "scalajs-ember-html" % "1.0.3", "com.anjunar" %% "scalajs-ember-ui" % "1.0.3" )

Bearbeite es

Dieser Editor wurde auf dem Server gerendert und in deinem Browser hydriert. Tippe, formatiere und mach rückgängig; der Inspektor darunter zeigt dasselbe Dokument in vier Formen.

Writing with Ember

Ember keeps one immutable document. Every keystroke becomes a transaction, and every view is derived from it.

  • Select a word and press Ctrl+B

  • Turn this line into a heading with the toolbar

  • Undo it again with Ctrl+Z

Markdown, JSON and HTML below are read from the same document, live.

session.dispatch(RichText.ToggleMark, StandardMarks.Strong)
56 Wörter · 26 Knoten
# Writing with Ember Ember keeps one **immutable document**. Every keystroke becomes a *transaction*, and every view is derived from it. - Select a word and press **Ctrl+B** - Turn this line into a heading with the toolbar - Undo it again with **Ctrl+Z** > Markdown, JSON and HTML below are read from the same document, live. ```scala session.dispatch(RichText.ToggleMark, StandardMarks.Strong) ```

Das kleinste Programm

Erweiterungen auflösen, leeres Dokument bauen, Sitzung öffnen, Ansicht mounten und einen Befehl ausführen.

scala
import ember.editor.core.* import ember.editor.richtext.* import ember.editor.standard.ParagraphSupport import ember.editor.ui.DocumentView import ui.core.render.DomCursor import org.scalajs.dom val generator = NodeIdGenerator.sequential() val resolved = ExtensionResolver.resolve(Vector(RichText(generator))).getOrElse(sys.error("extensions")) val document = RichText.emptyDocument(resolved.schema, generator).getOrElse(sys.error("document")) val session = EditorSession.create(document, resolved, resolved.sessionConfig()).getOrElse(sys.error("session")) val view = DocumentView.mount(session, DomCursor.root(dom.document.getElementById("root")), ParagraphSupport.views) session.update(_.setSelection(RichText.caretAtStart(session.document))) session.dispatch(RichText.InsertText, "Hello, Ember") session.dispatch(RichText.ToggleMark, StandardMarks.Strong)
01 / Dokument

Unveränderlich und immer gültig

Ein Document entsteht nur über Document.build und erfüllt seine Invarianten bereits. Wer eines hält, muss nichts mehr prüfen.

02 / Transaktion

Jede Änderung ist ein Commit

Befehle machen aus Absichten Transaktionen. Eine Transaktion liefert neues Dokument, Change-Set und Positionsabbildung in einem Schritt.

03 / Ansicht

Einmal gerendert, vom Browser übernommen

Dieselbe Semantik rendert die Seite auf dem Server und die Editierfläche im Browser. Die Hydration übernimmt die Seite, statt sie neu zu bauen.

Inhalt

Vom Dokument zum Browser

Die Modell-Seiten erklären, was eine Änderung ist; die Format-Seiten, wie ein Dokument reist; die Browser-Seiten, wie es editierbar wird.

DokumentDokumentmodellEin unveränderlicher, immer gültiger Baum aus Knoten, die per ID referenziert werden.Sitzungen und BefehleWie jede Änderung zu genau einer Transaktion und einem Commit wird.ErweiterungenFeature-Module, die Knotentypen, Befehle und Regeln beitragen.
BearbeitenRich TextAbsätze, Überschriften und Marks über typisierte Befehle.ListenNummerierte und unnummerierte Listen erstellen, ein- und ausrücken.LinksValidierte Linkziele innerhalb von Inline-Inhalten.CodeCodeblöcke, Sprachmetadaten und Zeileneinrückung.BilderInline-Medienreferenzen, Alternativtext und URL-Regeln.TabellenZeilen, Spalten, Kopfzeilen und rechteckige Zellauswahl.VerlaufRückgängig und Wiederholen mit expliziter Gruppierung.SelektionCursor, Bereiche und Tabellenzellen, die Änderungen überstehen.
IntegrationZwischenablageStrukturierte Dokumentfragmente kopieren, ausschneiden und einfügen.FormularfeldEin Rich-Text-Editor mit genau einem verlässlichen Formularwert.Eigene KnotentypenSchema erweitern und Format- und Ansichtsadapter ergänzen.
FormateMarkdownEin CommonMark-Parser und -Writer, der Verluste meldet statt sie zu verschweigen.JSONDas versionierte Wire-Format, streng bei nicht vertrauenswürdigen Daten.HTMLEine semantische Beschreibung für die Editierfläche und die ausgelieferte Seite.
BrowserRendern und HydrationDieselbe Ansicht auf dem Server und im Browser, übernommen statt neu gebaut.Eingabe und ToolbarBrowser-Absichten, Tastenbelegungen und eine barrierefreie Befehlsleiste.
ReferenzModuleJedes Modul, sein Paket und wofür es zuständig ist.