@convergence/dom-utils
Advanced tools
This project contains utilities to that make binding the DOM to a Convergence Model.
This library depends on the following libraries:
npm install
npm run dist
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.edit { border: 1px solid black; height: 400px; width: 400px; margin-top: 15px; }
</style>
</head>
<body>
<h3>Content Editable Rich Text Area</h3>
<div class="edit" id="editable">Loading...</div>
<script>
const editable = document.getElementById("editable");
const DOMAIN_URL = "http://localhost:8000/api/realtime/convergence/default";
Convergence.connectAnonymously(DOMAIN_URL).then(function (domain) {
return domain.models().open("content-editable", "test", function () {
return ConvergenceDomUtils.DomConverter.htmlToJson(
"Here is some initial text with a <b>bold</b> section and some <i>italics</i>."
);
});
}).then(function (model) {
const binder = new ConvergenceDomUtils.DomBinder(editable, model);
editable.contentEditable = true;
});
</script>
</body>
</html>
constructor(element: HTMLElement, data: RealTimeObject | RealTimeModel, autoBind: boolean = true)
Creates a new DomBinder associated with a specific HTMLElement and RealTimeObject. If an instance of RealTimeModel is passed in, the HTMLElemenet will be bound to the root element of the model. The current contents of the element will be replaced by the DOM representation contained in the RealTimeObject. The autoBind parameter configures whether or not the DomBinder will automatically bind upon construction. The default is true.
unbind(): void
Disconnects the HTMLElement from the RealTimeObject. The element and model will be left as is, but the two-way data binding will be disconnected. This method can only be called when the DomBinder is bound.
bind(): void
Sets up the two-way data binding between the element and RealTimeObject. This method can only be called when the DomBinder is not already bound.
isBound(): boolean
Determines if the HTMLElement and RealTimeObject are currently bound.
static htmlToJson(html: string): any
Converts a string containing HTML into the JSON representation of the DOM Tree.
static nodeToJson(node: Node): any
Converts a DOM Node (e.g. Element, Text) into the JSON representation of the DOM Tree.
static jsonToNode(json: any): Node
Converts the JSON Representation of a DOM Tree into a DOM Node.
To run the example you must first:
Note: to run the example you must have a running Convergence Server. The easiest way to get one running is using Docker:
docker run \
--name convergence \
-p 8000:80 \
convergencelabs/convergence-omnibus
FAQs
A utility to bind a Convergence Model to a DOM Element
The npm package @convergence/dom-utils receives a total of 4 weekly downloads. As such, @convergence/dom-utils popularity was classified as not popular.
We found that @convergence/dom-utils demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.