JSFiddle - React, Tailwind, and code Playground

by Muhammad Nugroho

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Google Drive Realtime quickstart</title>
  <meta http-equiv="X-UA-Compatible" content="IE=9">

  <!-- Load the Realtime libraries. -->
  <script type="text/javascript"
          src="https://apis.google.com/js/api.js"></script>

  <!-- Load the utility library. -->
  <script type="text/javascript"
          src="realtime-client-utils.js"></script>
</head>

<!-- Start Realtime when the body has loaded. -->
<body onLoad='startRealtime()'>

  <h1>Drive Realtime API :: quickstart</h1>

  <button id="authorizeButton" disabled>You must authorize</button>

  <p>These text areas are on the same page. You can also <a target="_blank" href="#">open them on separate users'
  browsers</a> and they will remain synchronized.</p>

  <!-- Text areas that will be used as our collaborative controls. -->
  <textarea id="editor1" rows="15" cols="50" disabled="true"></textarea>
  <textarea id="editor2" rows="15" cols="50" disabled="true"></textarea>
  <br />

  <!-- Undo and redo buttons. -->
  <button id="undoButton" disabled>Undo</button>
  <button id="redoButton" disabled>Redo</button>

  <script>
    /**
     * This function is called the first time that the Realtime model is created
     * for a file. This function should be used to initialize any values of the
     * model. In this case, we just create the single string model that will be
     * used to control our text box. The string has a starting value of 'Hello
     * Realtime World!', and is named 'text'.
     * @param model {gapi.drive.realtime.Model} the Realtime root model object.
     */
    function initializeModel(model) {
      var string = model.createString('Hello Realtime World!');
      model.getRoot().set('text', string);
    }

    /**
     * This function is called when the Realtime file has been loaded. It should
     * be used to initialize any user interface components and event handlers
     *...

JavaScript

/**
 * Copyright 2013 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

 "use strict";

/**
 * @fileoverview Common utility functionality for Google Drive Realtime API,
 * including authorization and file loading. This functionality should serve
 * mostly as a well-documented example, though is usable in its own right.
 */


/**
 * @namespace Realtime client utilities namespace.
 */
var rtclient = rtclient || {}


/**
 * OAuth 2.0 scope for installing Drive Apps.
 * @const
 */
rtclient.INSTALL_SCOPE = 'https://www.googleapis.com/auth/drive.install'


/**
 * OAuth 2.0 scope for opening and creating files.
 * @const
 */
rtclient.FILE_SCOPE = 'https://www.googleapis.com/auth/drive.file'


/**
 * OAuth 2.0 scope for accessing the user's ID.
 * @const
 */
rtclient.OPENID_SCOPE = 'openid'


/**
 * MIME type for newly created Realtime files.
 * @const
 */
rtclient.REALTIME_MIMETYPE = 'application/vnd.google-apps.drive-sdk';


/**
 * Parses the hash parameters to this page and returns them as an object.
 * @function
 */
rtclient.getParams = function() {
  var params = {};
  var hashFragment = window.location.hash;
  if (hashFragment) {
    // split up the query string and store in an object
    var paramStrs = hashFragment.slice(1).split("&");
    for (var i = 0; i < paramStrs.length; i++) {
      var paramStr = paramStrs[i].split("=");
      params[paramStr[0]] = unescape(paramStr[1]);
    }
  }
  console.log(params);
  return...