Scala JS Ember
Ein modularer Rich-Text-Editor auf Basis eines unveränderlichen Dokumentmodells.
Die Idee
Ember nutzt einen Dokumentbaum als Quelle für die Rich-Text-Bearbeitung. Befehle erzeugen Transaktionen statt das DOM direkt zu verändern. Dasselbe Dokument lässt sich auf dem Server rendern und im Browser hydrieren.
Was es kann.
Unveränderliches Dokument
Jede Änderung erzeugt Dokument, Change Set und Positionsabbildung in einer Transaktion neu.
Kombinierbare Funktionen
Rich Text, Listen, Tabellen, Links, Verlauf und Formate als Module ergänzen.
SSR und Hydration
Semantisches HTML aus dem Dokument rendern und dasselbe Modell im Browser hydrieren.
Installation
libraryDependencies ++= Seq( "com.anjunar" %% "scalajs-ember-core" % "1.0.1", "com.anjunar" %% "scalajs-ember-rich-text" % "1.0.1", "com.anjunar" %% "scalajs-ember-html" % "1.0.1", "com.anjunar" %% "scalajs-ember-ui" % "1.0.1" )
Paket: com.anjunar:scalajs-ember-core / scalajs-ember-rich-text / scalajs-ember-html / scalajs-ember-ui
Direkt loslegen.
Die Rich-Text-Erweiterung auflösen, ein leeres Dokument und eine Editor-Session anlegen, dann DocumentView mounten und Befehle ausführen.
Eine Editor-Session anlegen
Schema und Dokument werden vorbereitet, bevor die Browseransicht gemountet wird.
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 ids = NodeIdGenerator.sequential()
val extensions = ExtensionResolver.resolve(Vector(RichText(ids))).get
val document = RichText.emptyDocument(extensions.schema, ids).get
val session = EditorSession.create(
document, extensions, extensions.sessionConfig()
).get
val root = dom.document.getElementById("root")
DocumentView.mount(session, DomCursor.root(root), ParagraphSupport.views)Mit Befehlen bearbeiten
Der Editor aktualisiert sein Dokument über Befehle; die Ansicht folgt der entstandenen Transaktion.
session.update(_.setSelection(RichText.caretAtStart(session.document))) session.dispatch(RichText.InsertText, "Hello, Ember") session.dispatch(RichText.ToggleMark, StandardMarks.Strong) // The same document can produce server-side HTML: val html = DocumentView.renderToHtml(session.document, ParagraphSupport.views)
Bewusst gestaltet.
Bearbeitungslogik bleibt in Transaktionen und Befehlen; das DOM bildet das unveränderliche Dokument ab. Schema und HTML-Semantik werden von Server und Browser geteilt.
Mach es zu deinem Werkzeug.
Weiter entdecken.
Scala.js UI
Ein Scala-3- und Scala.js-UI-Framework für serverseitig gerenderte Anwendungen.
↗Hibernate DDL Manager
Kontrollierte Schemaentwicklung auf Basis von Hibernate-Metadaten.
↗JSON Mapper
JSON-Mapping für bestehende Objektgraphen und Domänenmodelle.
↗Scala Universe
Eine aufgelöste Sicht auf JVM-Typen, Generics und Annotationen.
↗Scala Reflect
Zur Compile-Zeit erzeugte Typmetadaten für JVM und Scala.js.
↗