@snippyly/plugin 1.0.0 → 1.0.1

package/constants.js

@@ -0,0 +1,180 @@
+export const REVIEW_MODE = 'review-mode';
+export const REVIEW_DOC_ID = 'review-doc-id';
+
+export const TAGS = {
+    SNIPPYLY_PLUGIN: 'snippyly-plugin',
+    SNIPPYLY_ROOT: 'snippyly-root',
+    SNIPPYLY_PRESENCE: 'snippyly-presence',
+    SNIPPYLY_CURSOR: 'snippyly-cursor',
+    SNIPPYLY_COMMENT_TOOL: 'snippyly-comment-tool',
+    SNIPPYLY_COMMENTS: 'snippyly-comments',
+    SNIPPYLY_TEXT_HIGHLIGHT: 'snippyly-text-highlight',
+    SNIPPYLY_COMMENTS_SIDEBAR: 'snippyly-comments-sidebar',
+}
+
+export const ICONS = {
+    GOOGLE: `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+            <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
+            <path fill="#4285F4" d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"/>
+            <path fill="#34A853" d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"/>
+            <path fill="#FBBC05" d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"/>
+            <path fill="#EA4335" d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"/>
+            </g>
+        </svg>
+    `,
+    PIN: `
+        <div class="snippyly-feature-block comment-btn">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
+                <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
+            </svg>
+        </div>
+    `,
+    SHARE: `
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+            class="bi bi-share-fill" viewBox="0 0 16 16">
+            <path
+                d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z" />
+        </svg>
+    `,
+    SIGNOUT: `
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-right" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
+            <path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
+        </svg>
+    `,
+    CLOSE: `
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
+            <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
+        </svg>
+    `,
+    TRASH: `
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
+            <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
+        </svg>
+    `,
+    SNIPPYLY: `
+        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 165 150" fill="none">
+            <path d="M64.1815 1.85957C59.9002 0.028852 55.1655 -0.464714 50.5987 0.443652C46.0319 1.35202 41.8464 3.61987 38.5915 6.94957C35.2666 10.2075 33.002 14.3928 32.0939 18.9584C31.1858 23.5239 31.6764 28.2573 33.5015 32.5396C35.2405 36.8543 38.2411 40.5439 42.111 43.1256C45.9809 45.7073 50.5398 47.061 55.1915 47.0096H78.6715V23.5496C78.7227 18.8952 77.3666 14.334 74.781 10.4636C72.1954 6.59321 68.5008 3.59419 64.1815 1.85957V1.85957Z" fill="#FFCB00"/>
+            <path d="M149.732 31.0096C144.239 25.5215 137.243 21.784 129.627 20.2691C122.012 18.7541 114.118 19.5296 106.943 22.4977C99.7679 25.4657 93.6332 30.4932 89.3133 36.9453C84.9935 43.3974 82.6823 50.9849 82.6715 58.7496V98.0096H122.012C129.799 98.0918 137.43 95.8208 143.905 91.4939C150.38 87.167 155.398 80.9859 158.301 73.7596C161.337 66.5983 162.143 58.6883 160.614 51.062C159.085 43.4358 155.293 36.4476 149.732 31.0096V31.0096Z" fill="#FF7162"/>
+            <path d="M127.852 116.53C126.113 112.21 123.112 108.515 119.241 105.928C115.369 103.341 110.807 101.983 106.152 102.03H82.6715V125.51C82.6225 130.165 83.9806 134.726 86.5679 138.596C89.1552 142.467 92.8511 145.465 97.1715 147.2C100.062 148.415 103.166 149.044 106.302 149.05C110.151 149.01 113.931 148.029 117.313 146.191C120.695 144.353 123.575 141.714 125.702 138.505C127.828 135.296 129.136 131.616 129.51 127.785C129.885 123.954 129.316 120.089 127.852 116.53V116.53Z" fill="#0DCF82"/>
+            <path d="M3.10152 75.2796C0.0453598 82.4433 -0.776403 90.363 0.743827 98.0016C2.26406 105.64 6.05543 112.642 11.6215 118.09C15.2126 121.748 19.4944 124.658 24.2185 126.649C28.9425 128.64 34.0149 129.674 39.1415 129.69C44.3888 129.678 49.5819 128.628 54.4215 126.6C61.6486 123.697 67.8306 118.68 72.1576 112.204C76.4847 105.729 78.7551 98.0973 78.6715 90.3096V51.0096H39.3915C31.6018 50.9289 23.9694 53.2029 17.4939 57.5335C11.0185 61.8641 6.002 68.0496 3.10152 75.2796V75.2796Z" fill="#A259FE"/>
+        </svg>
+    `
+}
+
+export const styles = `
+    .snippyly-plugin-container {
+        display: flex;
+        border: 1px solid lightgrey;
+        border-radius: 8px;
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        margin: 24px;
+        min-height: 48px;
+        align-items: center;
+        z-index: 999999999;
+        background: white;
+    }
+
+    .snippyly-feature-block {
+        padding: 8px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+    }
+
+    #snippylyPlugin .snippyly-feature-block.snippyly-toggle-btn {
+        display: none;
+    }
+
+    #snippylyPlugin.show .snippyly-feature-block {
+        display: flex;
+    }
+
+    #snippylyPlugin.show .snippyly-feature-block.snippyly-toggle-btn {
+        display: none;
+    }
+
+    #snippylyPlugin.hide .snippyly-feature-block {
+        display: none !important;
+    }
+
+    #snippylyPlugin.hide .snippyly-feature-block.snippyly-toggle-btn {
+        display: flex !important;
+    }
+
+    .snippyly-feature-block.comment-btn:hover svg {
+        fill: #a259fe;
+    }
+
+    .snippyly-feature-block.share-btn:hover svg {
+        fill: rgb(13, 207, 130);
+    }
+
+    .snippyly-feature-block.close-btn:hover svg {
+        fill: rgb(255, 113, 98);
+    }
+
+    .snippyly-feature-block.remove-btn:hover svg {
+        fill: red;
+    }
+
+    .snippyly-feature-block svg {
+        height: 24px;
+        width: 24px;
+    }
+
+    .snippyly-feature-block img {
+        height: 28px;
+        width: 28px;
+        border-radius: 100px;
+    }
+
+    /* The snackbar - position it at the bottom and in the middle of the screen */
+    #snackbar {
+    visibility: hidden; /* Hidden by default. Visible on click */
+    min-width: 250px; /* Set a default minimum width */
+    margin-left: -125px; /* Divide value of min-width by 2 */
+    background-color: #333; /* Black background color */
+    color: #fff; /* White text color */
+    text-align: center; /* Centered text */
+    border-radius: 2px; /* Rounded borders */
+    padding: 16px; /* Padding */
+    position: fixed; /* Sit on top of the screen */
+    z-index: 1; /* Add a z-index if needed */
+    left: 50%; /* Center the snackbar */
+    bottom: 30px; /* 30px from the bottom */
+    }
+
+    /* Show the snackbar when clicking on a button (class added with JavaScript) */
+    #snackbar.show {
+    visibility: visible; /* Show the snackbar */
+    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
+    However, delay the fade out process for 2.5 seconds */
+    -webkit-animation: fadein 0.5s, fadeout 0.5s 1.6s;
+    animation: fadein 0.5s, fadeout 0.5s 1.6s;
+    }
+
+    /* Animations to fade the snackbar in and out */
+    @-webkit-keyframes fadein {
+    from {bottom: 0; opacity: 0;}
+    to {bottom: 30px; opacity: 1;}
+    }
+
+    @keyframes fadein {
+    from {bottom: 0; opacity: 0;}
+    to {bottom: 30px; opacity: 1;}
+    }
+
+    @-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 0; opacity: 0;}
+    }
+
+    @keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 0; opacity: 0;}
+    }
+`;

package/firebase.js

@@ -1,7 +1,7 @@
 // import { initializeApp } from "firebase/app";
 import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.3/firebase-app.js';
 // import { getAuth, GoogleAuthProvider } from "firebase/auth";
-import { getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/9.8.3/firebase-auth.js';
+import { getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged, signOut } from 'https://www.gstatic.com/firebasejs/9.8.3/firebase-auth.js';
 
 // TODO: Replace the following with your app's Firebase project configuration
 // See: https://firebase.google.com/docs/web/learn-more#config-object
@@ -31,7 +31,6 @@ export const loginWithGoogle = () => {
             const token = credential.accessToken;
             // The signed-in user info.
             const user = result.user;
-            console.log('user', user);
             return user;
             // ...
         }).catch((error) => {
@@ -48,4 +47,8 @@ export const loginWithGoogle = () => {
 
 export const getUser = (callback) => {
     onAuthStateChanged(auth, callback);
+}
+
+export const signOutUser = () => {
+    signOut(auth);
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@snippyly/plugin",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "snippyly.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "publish:sdk": "npm version patch && npm publish --access public"
+    "publish:plugin": "npm version patch && npm publish --access public"
   },
   "author": "",
   "license": "ISC"

package/plugin-ui.js

@@ -1,332 +1,278 @@
 import * as firebase from './firebase.js';
+import * as Constants from './constants.js';
 
 let snippylyUser;
-let commentBtnTool, shareBtn, loginBtn, closeBtn, snippylyBtn;
+let commentBtnTool, shareBtn, loginBtn, logoutBtn, closeBtn, removeBtn, snippylyBtn, snackbar;
 
 export const initializeSnippyly = async () => {
-    if (window.SNIPPYLY_API_KEY) {
-        await Snippyly.init(window.SNIPPYLY_API_KEY);
-        getUser();
-        addPluginUI();
-    } else {
-        console.warn('Snippyly api key is not added.');
+    try {
+        if (window.SNIPPYLY_API_KEY) {
+            if (window.Snippyly) {
+                await Snippyly.init(window.SNIPPYLY_API_KEY);
+                Snippyly.getCommentElement().enableTextComments(true);
+                Snippyly.getCommentElement().enableSignInButton(true);
+                setDocumentId();
+                getUser();
+                addPluginUI();
+            }
+        } else {
+            console.warn('Snippyly api key is not added.');
+        }
+    } catch (err) {
+        console.warn('Error in initializeSnippyly: ', err);
     }
 }
 
 export const addPluginUI = () => {
-    const snippylyPlugin = document.createElement('snippyly-plugin');
-    snippylyPlugin.attachShadow({ mode: 'open' })
-    const shadowRoot = snippylyPlugin.shadowRoot;
-
-    const snippylyPluginContainer = document.createElement('div');
-    snippylyPluginContainer.id = 'snippylyPlugin';
-    snippylyPluginContainer.classList.add(...['snippyly-plugin-container', 'show']);
-
-    // Add comment btn
-    commentBtnTool = document.createElement('snippyly-comment-tool');
-    commentBtnTool.innerHTML = `
-        <div class="snippyly-feature-block comment-btn">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
-                <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
-            </svg>
-        </div>
-    `;
-
-    // Add share btn
-    shareBtn = document.createElement('div');
-    shareBtn.classList.add(...['snippyly-feature-block', 'share-btn']);
-    shareBtn.addEventListener('click', () => {
-        navigator.clipboard.writeText(window.location.href);
-    });
-    shareBtn.innerHTML = `
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-            class="bi bi-share-fill" viewBox="0 0 16 16">
-            <path
-                d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z" />
-        </svg>
-    `;
-
-    // Add login btn
-    loginBtn = document.createElement('div');
-    loginBtn.classList.add(...['snippyly-feature-block']);
-    loginBtn.addEventListener('click', () => {
-        loginWithGoogle();
-    });
-    loginBtn.innerHTML = `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-            <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
-            <path fill="#4285F4" d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"/>
-            <path fill="#34A853" d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"/>
-            <path fill="#FBBC05" d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"/>
-            <path fill="#EA4335" d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"/>
-            </g>
-        </svg>
-    `;
-
-    // Add close btn
-    closeBtn = document.createElement('div');
-    closeBtn.classList.add(...['snippyly-feature-block', 'close-btn']);
-    closeBtn.addEventListener('click', () => {
-        const plugin = shadowRoot.getElementById('snippylyPlugin');
-        if (plugin) {
-            if (plugin.classList.contains('show')) {
-                plugin.classList.remove('show');
-                plugin.classList.add('hide');
+    try {
+        const snippylyPlugin = document.createElement('snippyly-plugin');
+        snippylyPlugin.attachShadow({ mode: 'open' })
+        const shadowRoot = snippylyPlugin.shadowRoot;
+
+        const snippylyPluginContainer = document.createElement('div');
+        snippylyPluginContainer.id = 'snippylyPlugin';
+        snippylyPluginContainer.classList.add(...['snippyly-plugin-container', 'show']);
+
+        // Add comment btn
+        commentBtnTool = document.createElement('snippyly-comment-tool');
+        commentBtnTool.innerHTML = Constants.ICONS.PIN;
+
+        // Add share btn
+        shareBtn = document.createElement('div');
+        shareBtn.classList.add(...['snippyly-feature-block', 'share-btn']);
+        shareBtn.addEventListener('click', () => {
+            navigator.clipboard.writeText(window.location.href);
+            showSnackbar('Link copied!');
+        });
+        shareBtn.innerHTML = Constants.ICONS.SHARE;
+
+        // Add login btn
+        loginBtn = document.createElement('div');
+        loginBtn.classList.add(...['snippyly-feature-block']);
+        loginBtn.addEventListener('click', () => {
+            if (snippylyUser?.userId) {
+                // signOutUser();
             } else {
-                plugin.classList.remove('hide');
-                plugin.classList.add('show');
+                loginWithGoogle();
             }
-        }
-    });
-    closeBtn.innerHTML = `
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
-            <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
-        </svg>
-    `;
-
-    // Add snippyly btn
-    snippylyBtn = document.createElement('div');
-    snippylyBtn.classList.add(...['snippyly-feature-block', 'snippyly-toggle-btn']);
-    snippylyBtn.addEventListener('click', () => {
-        const plugin = shadowRoot.getElementById('snippylyPlugin');
-        if (plugin) {
-            if (plugin.classList.contains('show')) {
-                plugin.classList.remove('show');
-                plugin.classList.add('hide');
+        });
+        loginBtn.innerHTML = Constants.ICONS.GOOGLE;
+
+        logoutBtn = document.createElement('div');
+        logoutBtn.classList.add(...['snippyly-feature-block']);
+        logoutBtn.style.display = 'none';
+        logoutBtn.addEventListener('click', () => {
+            if (snippylyUser?.userId) {
+                signOutUser();
             } else {
-                plugin.classList.remove('hide');
-                plugin.classList.add('show');
+                // loginWithGoogle();
             }
-        }
-    });
-    snippylyBtn.innerHTML = `
-    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 165 150" fill="none">
-        <path d="M64.1815 1.85957C59.9002 0.028852 55.1655 -0.464714 50.5987 0.443652C46.0319 1.35202 41.8464 3.61987 38.5915 6.94957C35.2666 10.2075 33.002 14.3928 32.0939 18.9584C31.1858 23.5239 31.6764 28.2573 33.5015 32.5396C35.2405 36.8543 38.2411 40.5439 42.111 43.1256C45.9809 45.7073 50.5398 47.061 55.1915 47.0096H78.6715V23.5496C78.7227 18.8952 77.3666 14.334 74.781 10.4636C72.1954 6.59321 68.5008 3.59419 64.1815 1.85957V1.85957Z" fill="#FFCB00"/>
-        <path d="M149.732 31.0096C144.239 25.5215 137.243 21.784 129.627 20.2691C122.012 18.7541 114.118 19.5296 106.943 22.4977C99.7679 25.4657 93.6332 30.4932 89.3133 36.9453C84.9935 43.3974 82.6823 50.9849 82.6715 58.7496V98.0096H122.012C129.799 98.0918 137.43 95.8208 143.905 91.4939C150.38 87.167 155.398 80.9859 158.301 73.7596C161.337 66.5983 162.143 58.6883 160.614 51.062C159.085 43.4358 155.293 36.4476 149.732 31.0096V31.0096Z" fill="#FF7162"/>
-        <path d="M127.852 116.53C126.113 112.21 123.112 108.515 119.241 105.928C115.369 103.341 110.807 101.983 106.152 102.03H82.6715V125.51C82.6225 130.165 83.9806 134.726 86.5679 138.596C89.1552 142.467 92.8511 145.465 97.1715 147.2C100.062 148.415 103.166 149.044 106.302 149.05C110.151 149.01 113.931 148.029 117.313 146.191C120.695 144.353 123.575 141.714 125.702 138.505C127.828 135.296 129.136 131.616 129.51 127.785C129.885 123.954 129.316 120.089 127.852 116.53V116.53Z" fill="#0DCF82"/>
-        <path d="M3.10152 75.2796C0.0453598 82.4433 -0.776403 90.363 0.743827 98.0016C2.26406 105.64 6.05543 112.642 11.6215 118.09C15.2126 121.748 19.4944 124.658 24.2185 126.649C28.9425 128.64 34.0149 129.674 39.1415 129.69C44.3888 129.678 49.5819 128.628 54.4215 126.6C61.6486 123.697 67.8306 118.68 72.1576 112.204C76.4847 105.729 78.7551 98.0973 78.6715 90.3096V51.0096H39.3915C31.6018 50.9289 23.9694 53.2029 17.4939 57.5335C11.0185 61.8641 6.002 68.0496 3.10152 75.2796V75.2796Z" fill="#A259FE"/>
-    </svg>
-    `;
-
-    snippylyPluginContainer.appendChild(commentBtnTool);
-    snippylyPluginContainer.appendChild(shareBtn);
-    snippylyPluginContainer.appendChild(loginBtn);
-    snippylyPluginContainer.appendChild(closeBtn);
-    snippylyPluginContainer.appendChild(snippylyBtn);
-
-    window.document.body.appendChild(snippylyPlugin);
-
-    const styles = document.createElement('style');
-    styles.innerHTML = `
-        .snippyly-plugin-container {
-            display: flex;
-            border: 1px solid lightgrey;
-            border-radius: 8px;
-            position: fixed;
-            bottom: 0;
-            right: 0;
-            margin: 24px;
-            min-height: 48px;
-            align-items: center;
-            z-index: 999999999;
-        }
-
-        .snippyly-feature-block {
-            padding: 8px;
-            cursor: pointer;
-        }
-
-        #snippylyPlugin .snippyly-feature-block.snippyly-toggle-btn {
-            display: none;
-        }
-
-        #snippylyPlugin.show .snippyly-feature-block {
-            display: block;
-        }
-
-        #snippylyPlugin.show .snippyly-feature-block.snippyly-toggle-btn {
-            display: none;
-        }
-
-        #snippylyPlugin.hide .snippyly-feature-block {
-            display: none;
-        }
-
-        #snippylyPlugin.hide .snippyly-feature-block.snippyly-toggle-btn {
-            display: block;
-        }
-
-        .snippyly-feature-block.comment-btn:hover svg {
-            fill: #a259fe;
-        }
-        
-        .snippyly-feature-block.share-btn:hover svg {
-            fill: rgb(13, 207, 130);
-        }
-        
-        .snippyly-feature-block.close-btn:hover svg {
-            fill: rgb(255, 113, 98);
-        }
-
-        .snippyly-feature-block svg {
-            height: 24px;
-            width: 24px;
-        }
-
-        .snippyly-feature-block img {
-            height: 28px;
-            width: 28px;
-            border-radius: 100px;
-        }
-    `;
-
-    shadowRoot.appendChild(styles);
-    shadowRoot.appendChild(snippylyPluginContainer);
-
-    // add snippyly elements
-    const snippylyComments = document.createElement('snippyly-comments');
-    document.body.appendChild(snippylyComments);
-
-    const snippylyCursor = document.createElement('snippyly-cursor');
-    document.body.appendChild(snippylyCursor);
+        });
+        logoutBtn.innerHTML = Constants.ICONS.SIGNOUT;
+
+        // Add close btn
+        closeBtn = document.createElement('div');
+        closeBtn.classList.add(...['snippyly-feature-block', 'close-btn']);
+        closeBtn.addEventListener('click', () => {
+            const plugin = shadowRoot.getElementById('snippylyPlugin');
+            if (plugin) {
+                if (plugin.classList.contains('show')) {
+                    plugin.classList.remove('show');
+                    plugin.classList.add('hide');
+                } else {
+                    plugin.classList.remove('hide');
+                    plugin.classList.add('show');
+                }
+            }
+        });
+        closeBtn.innerHTML = Constants.ICONS.CLOSE;
+
+        // Add remove btn
+        removeBtn = document.createElement('div');
+        removeBtn.classList.add(...['snippyly-feature-block', 'remove-btn']);
+        removeBtn.addEventListener('click', () => {
+            removeSnippyly();
+        });
+        removeBtn.innerHTML = Constants.ICONS.TRASH;
+
+        // Add snippyly btn
+        snippylyBtn = document.createElement('div');
+        snippylyBtn.classList.add(...['snippyly-feature-block', 'snippyly-toggle-btn']);
+        snippylyBtn.addEventListener('click', () => {
+            const plugin = shadowRoot.getElementById('snippylyPlugin');
+            if (plugin) {
+                if (plugin.classList.contains('show')) {
+                    plugin.classList.remove('show');
+                    plugin.classList.add('hide');
+                } else {
+                    plugin.classList.remove('hide');
+                    plugin.classList.add('show');
+                }
+            }
+        });
+        snippylyBtn.innerHTML = Constants.ICONS.SNIPPYLY;
+
+        snackbar = document.createElement('div');
+        snackbar.id = 'snackbar';
+
+        snippylyPluginContainer.appendChild(commentBtnTool);
+        snippylyPluginContainer.appendChild(shareBtn);
+        snippylyPluginContainer.appendChild(loginBtn);
+        snippylyPluginContainer.appendChild(logoutBtn);
+        snippylyPluginContainer.appendChild(closeBtn);
+        snippylyPluginContainer.appendChild(removeBtn);
+        snippylyPluginContainer.appendChild(snippylyBtn);
+        snippylyPluginContainer.appendChild(snackbar);
+
+        window.document.body.appendChild(snippylyPlugin);
+
+        const styles = document.createElement('style');
+        styles.innerHTML = Constants.styles;
+
+        shadowRoot.appendChild(styles);
+        shadowRoot.appendChild(snippylyPluginContainer);
+
+        // add snippyly elements
+        const snippylyComments = document.createElement('snippyly-comments');
+        snippylyComments.addEventListener('signIn', () => {
+            loginWithGoogle();
+        })
+        document.body.appendChild(snippylyComments);
+
+        const snippylyCursor = document.createElement('snippyly-cursor');
+        document.body.appendChild(snippylyCursor);
+    } catch (err) {
+        console.warn('Error in addPluginUI: ', err);
+    }
 }
 
 export const addSnippylyCdn = () => {
-    const existingScript = document.getElementById('snippylyScript');
-    if (!existingScript) {
-        const script = document.createElement('script');
-        script.src = 'https://cdn.jsdelivr.net/npm/@snippyly/sdk@1.0.39/snippyly.js';
-        script.id = 'snippylyScript';
-        script.type = 'module';
-        document.body.appendChild(script);
-        script.onload = () => {
+    try {
+        const existingScript = document.getElementById('snippylyScript');
+        if (!existingScript) {
+            const script = document.createElement('script');
+            const version = window.SNIPPYLY_VERSION || 'latest';
+            const staging = !!window.SNIPPYLY_STAGING;
+            script.src = `https://cdn.jsdelivr.net/npm/@snippyly/sdk${staging ? '-staging' : ''}@${version}/snippyly.js`;
+            script.id = 'snippylyScript';
+            script.type = 'module';
+            document.body.appendChild(script);
+            script.onload = () => {
+                if (initializeSnippyly) {
+                    initializeSnippyly();
+                }
+            };
+        } else {
             if (initializeSnippyly) {
                 initializeSnippyly();
             }
-        };
-    } else {
-        if (initializeSnippyly) {
-            initializeSnippyly();
         }
+    } catch (err) {
+        console.warn('Error in addSnippylyCdn: ', err);
     }
 }
 
-const users = [
-    {
-        userId: '1',
-        name: 'James Smith',
-        photoUrl: '',
-        email: 'james.smith@gmail.com',
-        plan: 'free',
-        groupId: '',
-        contacts: [
-            {
-                userId: '2',
-                name: 'Maria Garcia',
-                email: 'maria.garcia@gmail.com',
-            },
-            {
-                userId: '3',
-                name: 'Sarah Wilson',
-                email: 'sarah.wilson@gmail.com',
-            }
-        ]
-    },
-    {
-        userId: 'maria.garcia@gmail.com',
-        name: 'Maria Garcia',
-        photoUrl: '',
-        email: 'maria.garcia@gmail.com',
-        plan: 'paid',
-        groupId: '',
-        isReadOnly: true,
-        contacts: [
-            {
-                userId: '1',
-                name: 'James Smith',
-                email: 'james.smith@gmail.com',
-            },
-            {
-                userId: '3',
-                name: 'Sarah Wilson',
-                email: 'sarah.wilson@gmail.com',
-            }
-        ]
-    },
-    {
-        userId: '3',
-        name: 'Sarah Wilson',
-        photoUrl: '',
-        email: 'sarah.wilson@gmail.com',
-        plan: 'trial',
-        groupId: '',
-        isAdmin: true,
-        contacts: [
-            {
-                userId: '1',
-                name: 'James Smith',
-                email: 'james.smith@gmail.com',
-            },
-            {
-                userId: '2',
-                name: 'Maria Garcia',
-                email: 'maria.garcia@gmail.com',
-            }
-        ]
+export const setDocumentId = () => {
+    try {
+        const url = (new URL(document.location));
+        const params = url.searchParams;
+        if (params.has(Constants.REVIEW_DOC_ID)) {
+            Snippyly.setDocumentId(params.get(Constants.REVIEW_DOC_ID));
+        }
+    } catch (err) {
+        console.warn('Error in setDocumentId: ', err);
     }
-];
+}
 
 const getUser = () => {
-    firebase.getUser((user) => {
-        console.log('user', user);
-        if (user) {
-            snippylyUser = {};
-            snippylyUser.userId = user.uid;
-            snippylyUser.name = user.displayName;
-            snippylyUser.email = user.email;
-            snippylyUser.photoUrl = user?.photoURL;
-            identifyUser();
-        }
-    })
+    try {
+        firebase.getUser((user) => {
+            try {
+                if (user) {
+                    snippylyUser = {};
+                    snippylyUser.userId = user.uid;
+                    snippylyUser.name = user.displayName;
+                    snippylyUser.email = user.email;
+                    snippylyUser.photoUrl = user?.photoURL;
+                    identifyUser();
+                }
+            } catch (err) {
+                console.warn('Error in getUser callback: ', err);
+            }
+        })
+    } catch (err) {
+        console.warn('Error in getUser: ', err);
+    }
 }
 
 const loginWithGoogle = () => {
     firebase.loginWithGoogle();
 }
 
-const identifyUser = async () => {
-    // let user;
-    // if (!localStorage.getItem('user')) {
-    //     const userIndex = Math.floor(Math.random() * 3);
-    //     user = users[userIndex];
-    //     localStorage.setItem('user', JSON.stringify(user));
-    // } else {
-    //     user = JSON.parse(localStorage.getItem('user'));
-    // }
-
-    // firebase.loginWithGoogle().then(async (user) => {
-    //     if (user) {
-    //         snippylyUser = {};
-    //         snippylyUser.userId = user.uid;
-    //         snippylyUser.name = user.displayName;
-    //         snippylyUser.email = user.email;
-    //         snippylyUser.photoUrl = user?.photoURL;
-    //         await Snippyly.identify(snippylyUser);
-    //         showUser(snippylyUser);
-    //     }
-    //     console.log('snippyly user', user);
-    // })
-
-    if(snippylyUser?.userId) {
-        await Snippyly.identify(snippylyUser);
+const signOutUser = () => {
+    try {
+        Snippyly.signOutUser();
+        firebase.signOutUser();
+        snippylyUser = {};
         showUser();
+    } catch (err) {
+        console.warn('Error in signOutUser: ', err);
+    }
+}
+
+const identifyUser = async () => {
+    try {
+        if (snippylyUser?.userId) {
+            await Snippyly.identify(snippylyUser);
+            showUser();
+        }
+    } catch (err) {
+        console.warn('Error in identifyUser: ', err);
     }
 }
 
 const showUser = () => {
-    if (snippylyUser) {
-        loginBtn.innerHTML = `
+    try {
+        if (snippylyUser?.userId) {
+            loginBtn.innerHTML = `
             <img src="${snippylyUser?.photoUrl}" title="${snippylyUser?.name}" class="user-profile-img" />
-        `
+        `;
+            logoutBtn.style.display = 'flex';
+        } else {
+            loginBtn.innerHTML = Constants.ICONS.GOOGLE;
+            logoutBtn.style.display = 'none';
+        }
+    } catch (err) {
+        console.warn('Error in showUser: ', err);
+    }
+}
+
+const showSnackbar = (message) => {
+    try {
+        snackbar.innerText = message;
+        snackbar.className = 'show';
+        setTimeout(() => {
+            snackbar.className = snackbar.className.replace('show', '');
+        }, 2000);
+    } catch (err) {
+        console.warn('Error in showSnackbar: ', err);
+    }
+}
+
+const removeSnippyly = () => {
+    try {
+        const element = document.getElementById('snippylyScript');
+        if (element) {
+            element.remove();
+        }
+        sessionStorage.removeItem(Constants.REVIEW_MODE);
+        const url = new URL(document.location);
+        const params = url.searchParams;
+        params.delete(Constants.REVIEW_DOC_ID);
+        params.delete(Constants.REVIEW_MODE);
+        window.history.replaceState({}, document.title, url.href);
+        window.location.reload();
+    } catch (err) {
+        console.warn('Error in removeSnippyly: ', err);
     }
 }

package/snippyly.js

@@ -1,29 +1,77 @@
 import * as ui from './plugin-ui.js';
+import * as Constants from './constants.js';
+import { cyrb53 } from './utils.js';
+
+
+const checkUrl = () => {
+    try {
+        const url = new URL(document.location);
+        const params = url.searchParams;
+        if (params.has(Constants.REVIEW_MODE)) {
+            sessionStorage.setItem(Constants.REVIEW_MODE, true);
+            if (params.has(Constants.REVIEW_DOC_ID)) {
+                loadPluginUI();
+            } else {
+                // generate doc id and set it in params
+                const tempUrl = new URL(document.location);
+                tempUrl.searchParams.delete(Constants.REVIEW_MODE);
+                const docId = cyrb53(tempUrl.href);
+                params.append(Constants.REVIEW_DOC_ID, docId);
+                window.history.replaceState({}, document.title, url.href);
+                checkUrl();
+            }
+        } else {
+            // check if review mode is there in session storage
+            if (sessionStorage.getItem(Constants.REVIEW_MODE)) {
+                params.append(Constants.REVIEW_MODE, true);
+                window.history.replaceState({}, document.title, url.href);
+                checkUrl();
+            }
+        }
+    } catch (err) {
+        console.warn('Error in checkUrl: ', err);
+    }
+}
 
 const loadPluginUI = () => {
-    const pluginElement = document.querySelector('snippyly-plugin');
-    if (!pluginElement) {
-        ui.addSnippylyCdn();
-        // ui.initializeSnippyly();
+    try {
+        const pluginElement = document.querySelector('snippyly-plugin');
+        if (!pluginElement) {
+            ui.addSnippylyCdn();
+        } else {
+            ui.setDocumentId();
+        }
+    } catch (err) {
+        console.warn('Error in loadPluginUI: ', err);
     }
 }
 
 (() => {
-    const url = window.location.href;
-    if (url.includes('#review-mode')) {
-        loadPluginUI();
-    }
+    let oldPushState = history.pushState;
+    history.pushState = function pushState() {
+        let ret = oldPushState.apply(this, arguments);
+        window.dispatchEvent(new Event('pushstate'));
+        window.dispatchEvent(new Event('locationchange'));
+        return ret;
+    };
+
+    let oldReplaceState = history.replaceState;
+    history.replaceState = function replaceState() {
+        let ret = oldReplaceState.apply(this, arguments);
+        window.dispatchEvent(new Event('replacestate'));
+        window.dispatchEvent(new Event('locationchange'));
+        return ret;
+    };
+
+    window.addEventListener('popstate', () => {
+        window.dispatchEvent(new Event('locationchange'));
+    });
 })();
 
-window.addEventListener('hashchange', () => {
-    const url = window.location.href;
-    if (url.includes('#review-mode')) {
-        loadPluginUI();
-    }
-});
+(() => {
+    checkUrl();
+})();
 
-// setTimeout(() => {
-//     if (!window.location.href.includes('#review-mode')) {
-//         window.location.href = window.location.href + '#review-mode'
-//     }
-// }, 3000);
+window.addEventListener('locationchange', () => {
+    checkUrl();
+});

package/utils.js

@@ -0,0 +1,17 @@
+export const cyrb53 = (str, seed = 0) => {
+    try {
+        let h1 = 0xdeadbeef ^ seed,
+            h2 = 0x41c6ce57 ^ seed;
+        for (let i = 0, ch; i < str.length; i++) {
+            ch = str.charCodeAt(i);
+            h1 = Math.imul(h1 ^ ch, 2654435761);
+            h2 = Math.imul(h2 ^ ch, 1597334677);
+        }
+        h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+        h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+        return 4294967296 * (2097151 & h2) + (h1 >>> 0);
+    } catch (err) {
+        Console.catch('Error in cyrb53: ', err);
+        return 0;
+    }
+};