Code Monkey home page Code Monkey logo

wp-collaborative-editing's Introduction

wp-collaborative-editing

This plugin is still under development and considered as experimental.

This is a WordPress plugin to allows multiple users to collaborate on the same post with block editor.

Requirements

  • PHP >= 7.4
  • WordPress >= 5.7
  • WordPress Block Editor

Quick start on your local installation

  1. Clone this repository
  2. Install dependencies composer install && npm install
  3. Build dependencies:
    1. npm run build for production build,
    2. or npm run dev for development build.
  4. Start the server npm run server start
  5. Visit http://localhost:8888, default access user: admin, password: password
  6. Create or edit a post inside a block editor, and open another tab or incognito to edit the same post.
  7. Optional, you can add another user to edit the same post.

How it Works

This plugin use Yjs framework, a high-performance CRDT for building collaborative applications that sync automatically.

It exposes its internal CRDT model as shared data types that can be manipulated concurrently. Shared types are similar to common data types like Map and Array. They can be manipulated, fire events when changes happen, and automatically merge without merge conflicts.

During the initialization, the Gutenberg block editor content state, will be converted into Y.Doc and the current user state will be set as Awareness. These states will be propagated to the other clients through the connection provider.

When the clients listen for changes from the Document Update and Awareness Update, it will be propagated back to the block editor state. This is called the Editor Binding, the code exists in assets/src/js/libs/block-editor-binding.js.

Connection Providers

Under the hoods, this plugin use Yjs, and Yjs is network agnostic. It can use one or more connection providers to modify the Shared Types. This plugin, by default use WebSocket connection and can be changed through filter.

WebSocket

WebSocket API allows to open a two-way interactive communication session between the user's browser and a server. This plugin use library from y-websocket to share the Shared Types (Documents & Awareness), across connected clients and use centralized server.

The Websocket Provider is a solid choice if you want a central source that handles authentication and authorization. Websockets also send header information and cookies, so you can use existing authentication mechanisms with this server. Supports cross-tab communication. When you open the same document in the same browser, changes on the document are exchanged via cross-tab communication (Broadcast Channel and localStorage as fallback). Supports the exchange of awareness information (e.g. cursors).

Read more here.

WebRTC

WebRTC (Web Real-Time Communication) API enables Web applications and sites to exchange arbitrary data between browsers without requiring an intermediary, peer-to-peer connection. This plugin use library from y-webrtc to share the Shared Types (Documents & Awareness), across connected clients peer-to-peer, without the need of centralized server, although it does need the signaling server to register the clients network.

Read more here.

By Default this plugin use this public WebRTC server provided by the Y Initiatives:

  • wss://signaling.yjs.dev
  • wss://y-webrtc-signaling-eu.herokuapp.com
  • wss://y-webrtc-signaling-us.herokuapp.com

Even though the connection to this signaling server is encrypted, please consider to set up private signaling server yourself.

wp-collaborative-editing's People

Contributors

fathanfi avatar

Watchers

 avatar

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.