If you prefer to dive directly into the code, check out the example on Github

Prerequisites

Ensure you have the following installed:

• Ruby on Rails
• Redis
• Node.js and Yarn
• Your preferred mehtod of React Setup with Rails

Step 1: Setting Up Mantine

First, we’ll set up Mantine for styling. Follow the Mantine guide for Vite to install the necessary packages: (Same method worked for me using esbuild in my setup. You can do it you own way or choose not to use Mantine)

yarn add @mantine/core @mantine/hooks @mantine/tiptap @tabler/icons-react @tiptap/react @tiptap/extension-link @tiptap/starter-kit @tiptap/extension-placeholder @tiptap/extension-collaboration-cursor @tiptap/extension-collaboration yjs y-prosemirror
yarn add --dev postcss postcss-preset-mantine postcss-simple-vars

Note: This setup includes both Mantine and Tiptap. If you do not require Mantine, skip installing Mantine-related dependencies.

Step 2: Install Rails Dependencies

bundle add redis y-rb_actioncable y-rb

Here we are installing Y.js adapter for Ruby and Action Cable.

Step 3: Configure Tiptap with Collaboration

In the Tiptap setup, configure the StarterKit with history: false as the Collaboration extension comes with its own history management. Additionally, we’ll add a random color generator for collaboration cursors.

function getRandomColor() {
    const colors = ["#ff901f", "#ff2975", "#f222ff", "#8c1eff"];

    const selectedIndex = Math.floor(Math.random() * (colors.length - 1));
    return colors[selectedIndex];
}

const editor = useEditor({
        extensions: [
            StarterKit.configure({ history: false }),
            Underline,
            Link,
            Superscript,
            SubScript,
            Highlight,
            TextAlign.configure({ types: ['heading', 'paragraph'] }),
            Placeholder.configure({ placeholder: 'This is placeholder' }),
            Collaboration.configure({
                document: doc // Configure Y.Doc for collaboration
            }),
            CollaborationCursor.configure({
                provider,
                user: {
                    name: "Vikas",
                    color: getRandomColor()
                }
            })
        ]
    });

Code to connect with websocket provided by ActionCable. Don’t worry about the channel creation now, we will create it later. Assuming channel name will be SyncChannel we will add following code. (Here id is hardcoded, as this is just a demo. we won’t be using proper auth in backend as well to keep things simple)

// ... other imports
import { createConsumer } from "@rails/actioncable"
import { WebsocketProvider } from "@y-rb/actioncable";

const consumer = createConsumer();
const doc = new Y.Doc()

const provider = new WebsocketProvider(
    doc,
    consumer,
    "SyncChannel",
    {
        id: 1
    }
);

// ... other codes

You can see full frontend code in App.jsx. This contains everything in a single file which is not great but good enough for this case.

Step 4: Set Up Rails Action Cable

Create a new channel name SyncChannel at app/channels/sync_channel.rb.

# frozen_string_literal: true
class SyncChannel < ApplicationCable::Channel
  include Y::Actioncable::Sync

  def subscribed
    # initiate sync & subscribe to updates, with optional persistence mechanism
    sync_for(session) { |id, update| save_doc(id, update) }
  end

  def receive(message)
    # broadcast update to all connected clients on all servers
    sync_to(session, message)
  end

  def doc
    @doc ||= load { |id| load_doc(id) }
  end

  private

  def session
    @session ||= Session.new(params[:id])
  end

  def load_doc(id)
    data = REDIS.get(id)
    data = data.unpack("C*") unless data.nil?
    data
  end

  def save_doc(id, state)
    REDIS.set(id, state.pack("C*"))
  end
end

This has Redis initialized as REDIS, replace it with your Redis variable name. We also created a Session model for sync_for mehtod. You can check documentation for sync_for here.

# frozen_string_literal: true

class Session
  attr_reader :id

  def initialize(id)
    @id = id
  end

  def to_s
    "sessions:#{id}"
  end
end

And finally ApplicationCable::Connection will be as follows

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :id

    def connect
      self.id = SecureRandom.uuid
    end
  end
end

Step 6: Add Styles for Collaboration Cursor (Option)

Everything should be working by now. In this step the cursor was looking odd, so some CSS can be add to make it look good.

Finally you can run your rails server and it should be good to go once we add all missing piecies specially authorisation.

Conclusion

By following these steps, you should have a real-time collaborative editor up and running using Tiptap, Y.js, and Rails Action Cable. While we used Mantine for styling in this demo, you can customize the styling as per your requirements. This setup provides a robust foundation for building collaborative applications with rich text editing capabilities.

In this case, you are left with very few options for code editors. Either you have to use CLI-based editors such as Vim, or you can use VSCode with the Remote SSH extension. Even with the extension, there are some issues related to code analysis and code completion. These processes have to happen on the remote machine, making your powerful local PC underutilized. And if you want to use Zed or Xcode, you are out of luck.

So, the solution is to have a local copy that is synced with the remote SSH directory. You can use several tools for this:

• Rsync:

  • Unidirectional sync, which might be fine for development as you will use the local machine’s copy to manage changes on the SSH server.
  • Does not support file deletion.

• SSHFS:

  • Limited support on macOS.
  • Requires kernel changes, making it impractical for use on some machines.

• Unison:

  • Supports bidirectional sync.
  • Handles file deletions.
  • Fault-tolerant: even if the connection breaks, you can restart it, and it will continue syncing from the last known point.

This leaves Unison as the ideal choice for me.

Unison has fairly good documentation; you can go ahead and check their documents and explore on your own.

Installing Unison

You need to install Unison on both the host and remote machine. If you don’t have sudo access on the remote machine, don’t worry; you can download the binary and keep it anywhere.

• Installing Unison on Mac local machine:

  • brew install unison
  • brew install autozimu/homebrew-formulas/unison-fsmonitor

• For Linux, you can follow the official guide.

• Make sure to create a local folder to sync code from the remote machine.

• Run a test connection:

  • Example command: unison -testServer ssh://user@remotehostname/path/to/folder /path/to/folder
  • If you get an error that Unison is not found on the remote server, specify the exact path to Unison using -servercmd. For example: unison -testServer ssh://user@remotehostname/path/to/folder /path/to/folder -servercmd /home/path/to/unison/bin/unison.

• Final command for syncing:

  • Once the connection test is successful, start syncing with the final command:

    unison ssh://user@remotehostname/path/to/folder /path/to/folder -servercmd /home/path/to/unison/bin/unison -ignore "BelowPath node_modules" -ignore "BelowPath .git" -force newer -repeat watch
    

  • This command will sync all files and continue monitoring for further changes in the background while you develop. If you want to know the meaning of flags used here like ignore, force etc, you can check Unison user mannual.

You can use any code editor to modify the local copy, and Unison will automatically sync the changes.

In react native, we can generate/render an SVG using the react-native-svg library. A complex SVG comprises many more minor elements that could be animated individually. But here, for example, we will take only one piece, a circle.

The following code will draw a circle with a radius of 50 units.

<Svg width={200} height={200}>
  <Circle cx="55" cy="55" r="50" stroke="black" strokeWidth={5} />
</Svg>

Suppose we want to animate it to become large and small. To achieve this, I will use React Native Reanimated. To learn more about it, you can check out its documentation.

Logically, I am trying to increase or decrease the radius.

Since the radius value is a prop, I will use useAnimatedProps. But, first of all, convert Circle to an animated component.

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

Now, I can re-write component as

<Svg width={200} height={200}>
  <AnimatedCircle cx="55" cy="55" r="50" stroke="black" strokeWidth={5} />
</Svg>

Next step is to store the stroke width and radius. width can be stored in a simple constat, but for the radius we will use useSharedValue, so that it can be used by woklet to animate.

export default ()=>{
  const radius = useSharedValue(50);
  const strokeWidth = 5;

  return (
    <Svg width={200} height={200}>
      <AnimatedCircle
        cx={`${radius.value + strokeWidth}`}
        cy={`${radius.value + strokeWidth}`}
        r={`${radius.value}`}
        stroke="black"
        strokeWidth={strokeWidth}
      />
    </Svg>
  )
}

Here, I need some event or action to trigger the radius change. I’ll use a button press. (withSpring is default provided animation which is not necessary to use but this looks cool 🤞)

<Button mode="contained" onPress={() => {
  if(radius.value < 80) {
  radius.value = withSpring(80)
  }else{
    radius.value = withSpring(50)
  }
}}>
  Press
</Button>

You’ll notice that even after pressing the button, nothing happens. It is because change of sharedValue doesn’t trigger re-render of the react component. finally animated props comes into the picture. Instead of passing prop directly, we will pass it using animated prop.

const animatedProps = useAnimatedProps(() => ({
  cx: `${radius.value + strokeWidth}`,
  cy: `${radius.value + strokeWidth}`,
  r:`${radius.value}`
}));

<Svg width={200} height={200}>
  <AnimatedCircle
    animatedProps={animatedProps}
    stroke="black"
    strokeWidth={strokeWidth}
  />
</Svg>

Result, is something like this.

This is a relatively simple example, but I hope I successfully demonstrated the possibilities. Here is the link of complete code of the result if you are interested.

First, we will create a react app with a service-worker.

npx create-react-app my-app --template pwa

This should create a folder named 'my-app' containing all the app-related files. To check everything is fine, we can run the following commands, and a browser tab should open with the ReactJs logo.

Now we will enable the default service worker.

In src/index.js change unregister() to register().

// serviceWorkerRegistration.unregister();
serviceWorkerRegistration.register();

Let us add some code in the service worker (src/service-worker.js) to send a test push message from Chrome DevTools.

72
73
74
75
76

// Any other custom service worker logic can go here.

self.addEventListener('push', (event) => {
  console.log(event.data);
});

But wait! the service worker will not run in the dev server by default. We can change this behavior, but it’s not recommended to do so. It should be built first and then served. To serve, we need need to install a static file server such as serve.

npm install -g serve

Then build and serve by running following commands form my-app folder.

npm run build
serve -s build

OneSignal Integration

The first few steps are pretty straightforward. Create an OneSignal account, then create a new website and choose custom code and fill site setup form as shown (Assuming we will be serving on port 5000).

Post this step; we’ll get a zip file (Web SDK) containing service workers to download. We’ll have extract files OneSignalSDKWorker.js , OneSignalSDKUpdaterWorker.js and put them inside the public folder.

And then finally we’ll get the custom code.

The first script tag will be placed in public/index.html.

39
40
41

    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
  </body>
</html>

Second script tag can be put into at the end index.js after few modification for this demo.

window.OneSignal = window.OneSignal || [];
window.OneSignal.push(function() {
  window.OneSignal.init({
    appId: "eb29dedd-4af2-4fa8-b73a-39bc2e7cc6d5",
    notifyButton: {
    enable: true,
    },
    allowLocalhostAsSecureOrigin: true,
  });
});

Two more steps are necessary as, OneSignal service-worker will replace the existing service-worker.

1. We will make OneSignal Service worker as default service-worker by updating path in serviceWorkerRegistration.js

window.addEventListener('load', () => {
  // const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
  const swUrl = `${process.env.PUBLIC_URL}/OneSignalSDKWorker.js`;

2. We’ll append importScripts('/service-worker.js'); in OneSignalSDKWorker.js and OneSignalSDKUpdaterWorker.js, so that our existing service worker can still be loaded.

Now a bell icon will appear at bottom right and clicing on that will intiate subscribe option. Things can be tested through OneSignal dashboard.

Now the OneSignal worker will be able to show notification, as well as the existing service worker will also log the object in console.

This is probably not the most elegant way and there is obviously scope of improvment in this approach so feel free to comment.