GithubHelp home page GithubHelp logo

Enable Real-Time Co-Editing in Applications

Install

npm:

npm install live-editor

yarn:

yarn add live-editor

Start server

const { startServer } = require('live-editor/server');

// ref: node_modules/live-editor/config/server.json
const options = {
  enableFakeTokenApi: true, // enable fake token api only in test environment
};

startServer(options); // default port: 9000

Client

import {
  createEditorPromise,
  AuthMessage,
} from 'live-editor/client';

// Don't change this for demo.
const AppId = '_LC1xOdRp';

// Editor service server address
const WsServerUrl = `ws://localhost:9000`;

// create a random editor user
// user id and display name is needed by editor service
const user = {
  userId: `${new Date().valueOf()}`,
  displayName: 'test user',
};

// editor options
const options = {
  serverUrl: WsServerUrl,
  user,
};

// get a editor service token.
async function fakeGetAccessTokenFromServer(userId: string, docId: string): Promise<string> {
  const res = await fetch(`http://localhost:9000/token/${AppId}/${docId}/${userId}`);
  const ret = await res.json();
  return ret.token;
}

// document id
const docId = 'my-test-doc-id-simple';

(async function loadDocument() {
  // get an editor access token. Web Apps should get this token from your own server
  const token = await fakeGetAccessTokenFromServer(user.userId, docId);

  // editor auth data
  const auth: AuthMessage = {
    appId: AppId,
    userId: user.userId,
    docId,
    token,
    permission: 'w',
  };

  // create editor and load document
  const editor = await createEditorPromise(document.getElementById('editor') as HTMLElement, options, auth);
  console.log(editor);
})();

react demo

react demo

Features

Real-Time co-editing.

Text style

  • heading
  • list (ordered / unordered)
  • checkbox
  • quoted text
  • text color and background color.
  • bold, italic, underline, strikethrough.
  • any custom style (any css style).

Inline objects

  • Link
  • Latex equations
  • Mentions
  • Custom inline object
  • Comment (Add comment to any text)

Blocks

  • Image, Video, Audio
  • Table
  • Webpage (YouTube videos, etc.)
  • Flowchart, Sequence Diagram, Class Diagram, etc. (mermaid)
  • Diagram (drawio)
  • Layout
  • Chart (by Chart.js)
Block state
  • locked / unlocked
  • marker highlighter

Editor Features

  • support markdown syntax
  • support offline mode (editor server is not needed)
  • support markdown-only mode (only support markdown features)
  • import / export markdown
  • export html
  • import docx files
  • support focus & typewriter mode
  • display list as MindMap

live-editor's Projects

live-editor icon live-editor

Real-time collaboration editing service with integrated editor component.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.