Scala JS Ember
A modular rich-text editor built on one immutable document model.
The idea
Ember keeps a document tree as the source of truth for rich-text editing. Commands produce transactions instead of mutating the DOM, while the same document can be rendered on the server and hydrated in the browser.
What it does.
Immutable document
Every edit produces a new document, change set and position mapping in one transaction.
Composable features
Add rich text, lists, tables, links, history and formats as modules around the core.
SSR and hydration
Render semantic HTML from the document and hydrate the same model in the browser.
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" )
Package: com.anjunar:scalajs-ember-core / scalajs-ember-rich-text / scalajs-ember-html / scalajs-ember-ui
Start building.
Resolve the rich-text extension, create an empty document and editor session, then mount DocumentView and dispatch editing commands.
Create an editor session
The schema and document are prepared before the browser view is mounted.
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)Edit through commands
The editor updates its document through commands; the view follows the resulting transaction.
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)
By design.
Editing logic stays in transactions and commands; the DOM is a projection of the immutable document. The same schema and HTML semantics are shared by server rendering and the browser editor.
Make it part of your stack.
Explore further.
Scala.js UI
A Scala 3 and Scala.js UI framework for server-rendered applications.
↗Hibernate DDL Manager
Controlled schema evolution from Hibernate metadata.
↗JSON Mapper
JSON mapping for existing object graphs and domain models.
↗Scala Universe
A resolved view of JVM types, generics and annotations.
↗Scala Reflect
Type metadata generated at compile time for the JVM and Scala.js.
↗