Skip to content
View live-editor's full-sized avatar

Block or report live-editor

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
live-editor/README.md

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

Popular repositories Loading

  1. live-editor live-editor Public

    Real-time collaboration editing service with integrated editor component.

    JavaScript 35 10

  2. live-editor-react live-editor-react Public

    TypeScript 1