Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@convergence/dom-utils

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@convergence/dom-utils

A utility to bind a Convergence Model to a DOM Element

0.3.1
latest
Source
npm

Version published: 4 years ago

Weekly downloads: 0

Maintainers: 1

Weekly downloads

Created: 8 years ago

Source

Convergence DOM Utils

This project contains utilities to that make binding the DOM to a Convergence Model.

Dependencies

This library depends on the following libraries:

@convergence/convergence: The main Convergence client API.

Building the Distribution

npm install
npm run dist

Usage

<!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>

API

ConvergenceDomUtils.DomBinder

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.

ConvergenceDomUtils.DomConverter

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.

Running the Example

To run the example you must first:

Build the distribution
Follow the steps in the example/config.example.js file
Open the example/index.html file in your browser

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

Keywords

FAQs

What is @convergence/dom-utils?

Is @convergence/dom-utils popular?

Is @convergence/dom-utils well maintained?

Package last updated on 16 May 2021

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.

Install