npm - vzcode - Versions diffs - 0.2.0 → 0.3.0 - Mend

vzcode 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/README.md +30 -17
package/cli.js +5 -0
package/dist/assets/{index-5e86a45f.js → index-4694dca8.js} +33 -33
package/dist/assets/index-58524f84.css +1 -0
package/dist/favicon.ico +0 -0
package/dist/index.html +3 -4
package/package.json +3 -2
package/src/App.jsx +315 -0
package/src/CodeEditor.jsx +31 -0
package/src/diff.js +6 -0
package/src/getOrCreateEditor.js +85 -0
package/src/json1PresenceBroadcast.js +26 -0
package/src/json1PresenceDisplay.js +143 -0
package/src/main.jsx +9 -0
package/src/ot.js +5 -0
package/src/randomId.js +2 -0
package/src/settings.jsx +141 -0
package/src/style.css +207 -0
package/dist/assets/index-5c2f5f84.css +0 -1
package/dist/vite.svg +0 -1

package/dist/assets/index-58524f84.css ADDED Viewed

@@ -0,0 +1 @@

+ @import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";@import"https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css";@import"https://unpkg.com/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css";*{margin:0;padding:0;box-sizing:border-box}::-webkit-scrollbar{width:10px;height:20px}::-webkit-scrollbar-track{background:rgb(41,44,52)}::-webkit-scrollbar-thumb{background:rgb(37,37,38)}::-webkit-scrollbar-thumb:hover{background:#555}:root{--main-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace}body{background:rgb(41,44,52);font-family:Poppins,sans-serif;overflow-x:hidden}.tab{width:max-content;height:30px;background:rgb(45,45,45);text-align:center;color:#fff;font-family:var(--main-font-family);justify-content:center;align-items:center;display:flex;padding-left:10px;padding-right:10px;border-top-left-radius:10px;border-top-right-radius:10px;margin-top:5px;margin-left:2px;margin-right:2px;cursor:pointer}.tab.active{background-color:#292c34}.tab-close{display:flex;cursor:pointer;margin-left:5px;justify-content:center;align-items:center}.tab-close:hover{border-radius:30%;background-color:#252526}.editor{position:relative;margin-left:200px;width:100%;height:100%;top:30px;bottom:0;background-color:#292c34;color:#fff;font-family:var(--main-font-family)}.tab-list{position:fixed;display:flex;flex-direction:row;top:0;left:200px;height:35px;width:100%;background:rgb(37,37,38);z-index:100;transition:all .5s ease}.bottom-bar{position:absolute;bottom:0;left:0;height:20px;width:100%;background:rgb(45,45,45);z-index:100;transition:all .5s ease}.sidebar{position:fixed;top:0;left:0;height:100%;width:200px;background:rgb(54,65,89);z-index:100;transition:all .5s ease}.link-name{margin-top:30px;margin-left:10px;color:#9aa0ac;font-size:12px;text-decoration:none}.file{display:flex;flex-direction:row;align-items:center;justify-content:left;width:180px;cursor:pointer;margin-left:10px;color:#dbdde1;border-radius:5px}.full-Box{width:inherit;height:inherit;padding:7px;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.utilities{justify-content:right;margin-right:3px}.noUtils{display:none}.settings{position:absolute;bottom:0;height:30px;width:180px;z-index:100;color:#dbdde1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:14px 0;margin:10px;border-radius:5px}.file:hover,.settings:hover{background-color:#4a5469}.newBTN{justify-content:right;margin-right:10px;cursor:pointer}.themes{color:#252526}.name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:130px}

package/dist/favicon.ico ADDED Viewed

Binary file

package/dist/index.html CHANGED Viewed

@@ -2,11 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-    <script type="module" crossorigin src="/assets/index-5e86a45f.js"></script>
-    <link rel="stylesheet" href="/assets/index-5c2f5f84.css">
+    <title>VZCode</title>
+    <script type="module" crossorigin src="/assets/index-4694dca8.js"></script>
+    <link rel="stylesheet" href="/assets/index-58524f84.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,12 +1,13 @@
 {
   "name": "vzcode",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Multiplayer code editor system",
   "main": "index.js",
   "type": "module",
   "bin": "cli.js",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src/**"
   ],
   "scripts": {
     "test": "npm run build; cd test; node ../cli.js",

package/src/App.jsx ADDED Viewed

@@ -0,0 +1,315 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import ShareDBClient from 'sharedb-client-browser/dist/sharedb-client-umd.cjs';
+import { json1Presence } from './ot';
+import { CodeEditor } from './CodeEditor';
+import { diff } from './diff';
+import { randomId } from './randomId';
+import { Settings } from './settings';
+import './style.css';
+// Register our custom JSON1 OT type that supports presence.
+// See https://github.com/vizhub-core/json1-presence
+ShareDBClient.types.register(json1Presence.type);
+// Establish the singleton ShareDB connection over WebSockets.
+// TODO consider using reconnecting WebSocket
+const { Connection } = ShareDBClient;
+const socket = new WebSocket('ws://' + window.location.host + '/ws');
+const connection = new Connection(socket);
+// A feature flag to disable settings for release, until it's completed.
+// See https://vitejs.dev/guide/env-and-mode.html
+const disableSettings = import.meta.env.VITE_DISABLE_SETTINGS === 'true';
+function App() {
+  // The ShareDB document.
+  const [shareDBDoc, setShareDBDoc] = useState(null);
+  // Local ShareDB presence, for broadcasting our cursor position
+  // so other clients can see it.
+  // See https://share.github.io/sharedb/api/local-presence
+  const [localPresence, setLocalPresence] = useState(null);
+  // The document-level presence object, which emits
+  // changes in remote presence.
+  const [docPresence, setDocPresence] = useState(null);
+  // The `doc.data` part of the ShareDB document,
+  // updated on each change to decouple rendering from ShareDB.
+  const [data, setData] = useState(null);
+  // True if the file menu is open.
+  const [isFileMenuOpen, setIsFileMenuOpen] = useState(false);
+  // The id of the currently open file tab.
+  const [activeFileId, setActiveFileId] = useState(null);
+  // The ordered list of tabs.
+  const [tabList, setTabList] = useState([]);
+  // The current theme.
+  const [theme, setTheme] = useState('OneDark');
+  // The currently hovered over file, for showing
+  // "utils", meaning buttons for rename and delete.
+  const [utils, setUtils] = useState(false);
+  // True to show the settings modal.
+  const [settings, setSettings] = useState(false);
+  // Set up the connection to ShareDB.
+  useEffect(() => {
+    // Since there is only ever a single document,
+    // these things are pretty arbitrary.
+    //  * `collection` - the ShareDB collection to use
+    //  * `id` - the id of the ShareDB document to use
+    const collection = 'documents';
+    const id = '1';
+    // Initialize the ShareDB document.
+    const shareDBDoc = connection.get(collection, id);
+    // Subscribe to the document to get updates.
+    // This callback gets called once only.
+    shareDBDoc.subscribe(() => {
+      // Expose ShareDB doc to downstream logic.
+      setShareDBDoc(shareDBDoc);
+      // Set initial data.
+      setData(shareDBDoc.data);
+      // Listen for all changes and update `data`.
+      // This decouples rendering logic from ShareDB.
+      // This callback gets called on each change.
+      shareDBDoc.on('op', (op) => {
+        setData(shareDBDoc.data);
+      });
+      // Set up presence.
+      // See https://github.com/share/sharedb/blob/master/examples/rich-text-presence/client.js#L53
+      const docPresence = shareDBDoc.connection.getDocPresence(collection, id);
+      // Subscribe to receive remote presence updates.
+      docPresence.subscribe(function (error) {
+        if (error) throw error;
+      });
+      // Set up our local presence for broadcasting this client's presence.
+      setLocalPresence(docPresence.create(randomId()));
+      // Store docPresence so child components can listen for changes.
+      setDocPresence(docPresence);
+    });
+    // TODO unsubscribe from presence
+    // TODO unsubscribe from doc
+  }, []);
+  // Called when a tab is closed.
+  const closeTab = useCallback(
+    (fileIdToRemove) => {
+      const i = tabList.findIndex((fileId) => fileId === fileIdToRemove);
+      // Support calling `closeTab` on a fileId that is not open,
+      // such as when a file is deleted..
+      if (i !== -1) {
+        // Remove the tab from the tab list.
+        const newTabList = [...tabList.slice(0, i), ...tabList.slice(i + 1)];
+        setTabList(newTabList);
+        // If we are closing the active file,
+        if (activeFileId === fileIdToRemove) {
+          // set the new active file to the next tab over,
+          if (newTabList.length > 0) {
+            setActiveFileId(i === 0 ? newTabList[i] : newTabList[i - 1]);
+          } else {
+            // or clear out the active file
+            // if we've closed the last tab.
+            setActiveFileId(null);
+          }
+        }
+      }
+    },
+    [tabList, activeFileId]
+  );
+  const handleCloseTabClick = useCallback(
+    (fileIdToRemove) => (event) => {
+      // Stop propagation so that the outer listener doesn't fire.
+      event.stopPropagation();
+      closeTab(fileIdToRemove);
+    },
+    [closeTab]
+  );
+  // Called when a file in the sidebar is double-clicked.
+  const renameFile = useCallback(
+    (key) => {
+      const newName = prompt('Enter new name');
+      if (newName) {
+        const currentDocument = shareDBDoc.data;
+        const nextDocument = {
+          ...currentDocument,
+          [key]: {
+            ...currentDocument[key],
+            name: newName,
+          },
+        };
+        shareDBDoc.submitOp(diff(currentDocument, nextDocument));
+      }
+    },
+    [shareDBDoc]
+  );
+  const deleteFile = useCallback(
+    (key) => {
+      // Close the tab in case it's open.
+      // TODO consistently use either "key" or "fileId" naming
+      closeTab(key);
+      const currentDocument = shareDBDoc.data;
+      const nextDocument = { ...currentDocument };
+      delete nextDocument[key];
+      shareDBDoc.submitOp(diff(currentDocument, nextDocument));
+    },
+    [shareDBDoc, closeTab]
+  );
+  // TODO prompt the user "Are you sure?"
+  const handleDeleteFileClick = useCallback(
+    (fileId) => (event) => {
+      // Stop propagation so that the outer listener doesn't fire,
+      // which would try to open this file in a tab.
+      event.stopPropagation();
+      deleteFile(fileId);
+    },
+    [deleteFile]
+  );
+  const createFile = useCallback(() => {
+    const name = prompt('Enter new file name');
+    if (!name) return;
+    const currentDocument = shareDBDoc.data;
+    const nextDocument = {
+      ...currentDocument,
+      [randomId()]: { name, text: '' },
+    };
+    shareDBDoc.submitOp(diff(currentDocument, nextDocument));
+  }, [shareDBDoc]);
+  // True if we are ready to actually render the active tab.
+  const tabValid = data && activeFileId;
+  const handleSettingsClose = useCallback(() => {
+    setSettings(false);
+  }, []);
+  return (
+    <>
+      <Settings
+        show={settings}
+        onClose={handleSettingsClose}
+        setTheme={setTheme}
+      />
+      <div className="tab-list">
+        {tabList.map((fileId) => (
+          <div
+            key={fileId}
+            className={
+              tabValid ? `tab${fileId === activeFileId ? ' active' : ''}` : null
+            }
+            onClick={() => {
+              setActiveFileId(fileId);
+            }}
+          >
+            {tabValid ? data[fileId].name : ''}
+            <div
+              className={activeFileId ? 'bx bx-x tab-close' : ''}
+              onClick={handleCloseTabClick(fileId)}
+            ></div>
+          </div>
+        ))}
+      </div>
+      <div className="sidebar show">
+        <div className="nav-links">
+          <div className="show-menu">
+            <div className="sub-menu">
+              <div className="files">
+                <div className="full-Box">
+                  <div>
+                    <a className="link-name" href="#">
+                      Files
+                    </a>
+                  </div>
+                  <div>
+                    <i
+                      className="bx bxs-file-plus newBTN"
+                      style={{ color: '#dbdde1' }}
+                      onClick={createFile}
+                    ></i>
+                  </div>
+                </div>
+              </div>
+              {data
+                ? Object.keys(data).map((key) => (
+                    <div className="file" key={key}>
+                      <div
+                        className="full-Box"
+                        onClick={() => {
+                          setActiveFileId(key);
+                          if (!tabList.includes(key)) {
+                            setTabList([...tabList, key]);
+                          }
+                        }}
+                        onMouseEnter={() => {
+                          setUtils(key);
+                        }}
+                        onMouseLeave={() => {
+                          setUtils(null);
+                        }}
+                      >
+                        <div className={utils === key ? 'name' : ''}>
+                          {data[key].name}
+                        </div>
+                        <div className={utils === key ? 'utils' : 'noUtils'}>
+                          <i
+                            className="bx bxs-edit utilities"
+                            style={{ color: '#abdafb' }}
+                            onClick={() => {
+                              renameFile(key);
+                            }}
+                          ></i>
+                          <i
+                            className="bx bx-trash"
+                            style={{ color: '#eb336c' }}
+                            onClick={handleDeleteFileClick(key)}
+                          ></i>
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                : null}
+            </div>
+          </div>
+          {disableSettings ? null : (
+            <div className="settings" onClick={() => setSettings(!settings)}>
+              Settings
+            </div>
+          )}
+        </div>
+      </div>
+      {data && activeFileId ? (
+        <CodeEditor
+          className="editor"
+          shareDBDoc={shareDBDoc}
+          localPresence={localPresence}
+          docPresence={docPresence}
+          activeFileId={activeFileId}
+          theme={theme}
+        />
+      ) : null}
+    </>
+  );
+}
+export default App;

package/src/CodeEditor.jsx ADDED Viewed

@@ -0,0 +1,31 @@
+import { useRef, useLayoutEffect } from 'react';
+import { getOrCreateEditor } from './getOrCreateEditor';
+export const CodeEditor = ({
+  activeFileId,
+  shareDBDoc,
+  localPresence,
+  docPresence,
+  theme,
+}) => {
+  const ref = useRef();
+  // useEffect was buggy in that sometimes ref.current was undefined.
+  // useLayoutEffect seems to solve that issue.
+  useLayoutEffect(() => {
+    const editor = getOrCreateEditor({
+      fileId: activeFileId,
+      shareDBDoc,
+      localPresence,
+      docPresence,
+      theme,
+    });
+    ref.current.appendChild(editor.dom);
+    return () => {
+      ref.current.removeChild(editor.dom);
+    };
+  }, [shareDBDoc, activeFileId]);
+  return <div className="editor" ref={ref} />;
+};

package/src/diff.js ADDED Viewed

@@ -0,0 +1,6 @@
+import jsondiff from 'json0-ot-diff';
+import diffMatchPatch from 'diff-match-patch';
+import { json1Presence, textUnicode } from './ot';
+export const diff = (a, b) =>
+  jsondiff(a, b, diffMatchPatch, json1Presence, textUnicode);

package/src/getOrCreateEditor.js ADDED Viewed

@@ -0,0 +1,85 @@
+import { EditorView, basicSetup } from 'codemirror';
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { markdown } from '@codemirror/lang-markdown';
+import { html } from '@codemirror/lang-html';
+import { css } from '@codemirror/lang-css';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { json1Sync } from 'codemirror-ot';
+import { json1Presence, textUnicode } from './ot';
+import { json1PresenceBroadcast } from './json1PresenceBroadcast';
+import { json1PresenceDisplay } from './json1PresenceDisplay';
+// Singleton cache of CodeMirror instances
+// These are created, but never destroyed.
+// TODO consider invalidating this cache at some point.
+//  * Keys are file ids
+//  * Values are CodeMirror instances
+const editorCache = new Map();
+// Gets or creates a CodeMirror editor for the given file id.
+export const getOrCreateEditor = ({
+  fileId,
+  shareDBDoc,
+  localPresence,
+  docPresence,
+  theme,
+}) => {
+  const data = shareDBDoc.data;
+  const fileExtension = data[fileId].name.split('.').pop();
+  // The path for this file in the ShareDB document.
+  const path = [fileId, 'text'];
+  const extensions = [
+    // This plugin implements multiplayer editing,
+    // real-time synchronozation of changes across clients.
+    // Does not deal with showing others' cursors.
+    json1Sync({
+      shareDBDoc,
+      path,
+      json1: json1Presence,
+      textUnicode,
+    }),
+    // Deals with broadcasting changes in cursor location and selection.
+    json1PresenceBroadcast({ path, localPresence }),
+    // Deals with receiving the broadcas from other clients and displaying them.
+    json1PresenceDisplay({ path, docPresence }),
+    basicSetup,
+    oneDark,
+  ];
+  if (
+    fileExtension === 'js' ||
+    fileExtension === 'json' ||
+    fileExtension == 'jsx' ||
+    fileExtension == 'ts'
+  ) {
+    extensions.push(javascript());
+  } else if (fileExtension === 'html') {
+    extensions.push(html());
+  } else if (fileExtension === 'css') {
+    extensions.push(css());
+  } else if (fileExtension === 'md') {
+    extensions.push(markdown());
+  }
+  let editor = editorCache.get(fileId);
+  if (!editor) {
+    // Cache miss --> mint a new editor.
+    editor = new EditorView({
+      state: EditorState.create({
+        doc: data[fileId].text,
+        extensions,
+      }),
+    });
+    // Populate the cache.
+    editorCache.set(fileId, editor);
+  }
+  return editor;
+};

package/src/json1PresenceBroadcast.js ADDED Viewed

@@ -0,0 +1,26 @@
+import { EditorView } from 'codemirror';
+// Deals with broadcasting changes in cursor location and selection.
+export const json1PresenceBroadcast = ({ path, localPresence }) =>
+  // See https://discuss.codemirror.net/t/codemirror-6-proper-way-to-listen-for-changes/2395/10
+  EditorView.updateListener.of((viewUpdate) => {
+    // If this update modified the cursor / selection,
+    // we broadcast the selection update via ShareDB presence.
+    if (viewUpdate.selectionSet) {
+      // Isolate the single selection to use for presence.
+      // Unfortunately JSON1 with presence does not yet
+      // support multiple selections.
+      // See https://github.com/ottypes/json1/pull/25#issuecomment-1459616521
+      const selection = viewUpdate.state.selection.ranges[0];
+      const { from, to } = selection;
+      // Translate this into the form expected by json1Presence.
+      const presence = { start: [...path, from], end: [...path, to] };
+      // Broadcast presence to remote clients!
+      // See https://github.com/share/sharedb/blob/master/examples/rich-text-presence/client.js#L71
+      localPresence.submit(presence, (error) => {
+        if (error) throw error;
+      });
+    }
+  });

package/src/json1PresenceDisplay.js ADDED Viewed

@@ -0,0 +1,143 @@
+import {
+  ViewPlugin,
+  EditorView,
+  WidgetType,
+  Decoration,
+} from '@codemirror/view';
+import { Annotation, RangeSet } from '@codemirror/state';
+import { randomId } from './randomId';
+// Deals with receiving the broadcasted presence cursor locations
+// from other clients and displaying them.
+//
+// Inspired by
+//  * https://github.com/yjs/y-codemirror.next/blob/main/src/y-remote-selections.js
+//  * https://codemirror.net/examples/decoration/
+//  * https://github.com/share/sharedb/blob/master/examples/rich-text-presence/client.js
+//  * https://share.github.io/sharedb/presence
+export const json1PresenceDisplay = ({ path, docPresence }) => [
+  ViewPlugin.fromClass(
+    class {
+      constructor(view) {
+        // Initialize decorations to empty array so CodeMirror doesn't crash.
+        this.decorations = RangeSet.of([]);
+        // Mutable state local to this closure representing aggregated presence.
+        //  * Keys are presence ids
+        //  * Values are presence objects as defined by ot-json1-presence
+        const presenceState = {};
+        // Receive remote presence changes.
+        docPresence.on('receive', (id, presence) => {
+          // If presence === null, the user has disconnected / exited
+          // We also check if the presence is for the current file or not.
+          if (presence && pathMatches(path, presence)) {
+            presenceState[id] = presence;
+          } else {
+            delete presenceState[id];
+          }
+          // Update decorations to reflect new presence state.
+          // TODO consider mutating this rather than recomputing it on each change.
+          this.decorations = Decoration.set(
+            Object.keys(presenceState).map((id) => {
+              const presence = presenceState[id];
+              const { start, end } = presence;
+              const from = start[start.length - 1];
+              // TODO support selection ranges (first attempt introduced layout errors)
+              //const to = end[end.length - 1];
+              return {
+                from,
+                //to,
+                to: from, // Temporary meaure
+                value: Decoration.widget({
+                  side: -1,
+                  block: false,
+                  widget: new PresenceWidget(id),
+                }),
+              };
+            }),
+            // Without this argument, we get the following error:
+            // Uncaught Error: Ranges must be added sorted by `from` position and `startSide`
+            true
+          );
+          // Somehow this triggers re-rendering of the Decorations.
+          // Not sure if this is the correct usage of the API.
+          // Inspired by https://github.com/yjs/y-codemirror.next/blob/main/src/y-remote-selections.js
+          // Set timeout so that the current CodeMirror update finishes
+          // before the next ones that render presence begin.
+          setTimeout(() => {
+            view.dispatch({ annotations: [presenceAnnotation.of(true)] });
+          }, 0);
+        });
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+    }
+  ),
+  presenceTheme,
+];
+const presenceAnnotation = Annotation.define();
+// Checks that the path of this file
+// matches the path of the presence.
+//  * If true is returned, the presence is in this file.
+//  * If false is returned, the presence is in another file.
+// Assumption: start and end path are the same except the cursor position.
+const pathMatches = (path, presence) => {
+  for (let i = 0; i < path.length; i++) {
+    if (path[i] !== presence.start[i]) {
+      return false;
+    }
+  }
+  return true;
+};
+// Displays a single remote presence cursor.
+class PresenceWidget extends WidgetType {
+  constructor(id) {
+    super();
+    this.id = id;
+  }
+  eq(other) {
+    return other.id === this.id;
+  }
+  toDOM() {
+    const span = document.createElement('span');
+    span.setAttribute('aria-hidden', 'true');
+    span.className = 'cm-json1-presence';
+    // This child is what actually displays the presence.
+    // Nested so that the layout is not impacted.
+    //
+    // The initial attempt using the top level span to render
+    // the cursor caused a wonky layout with adjacent characters shifting
+    // left and right by 1 pixel or so.
+    span.appendChild(document.createElement('div'));
+    return span;
+  }
+  ignoreEvent() {
+    return false;
+  }
+}
+const presenceTheme = EditorView.baseTheme({
+  '.cm-json1-presence': {
+    position: 'relative',
+  },
+  '.cm-json1-presence > div': {
+    position: 'absolute',
+    top: '0',
+    bottom: '0',
+    left: '0',
+    right: '0',
+    borderLeft: '1px solid yellow',
+    //borderRight: '1px solid black',
+  },
+});

package/src/main.jsx ADDED Viewed

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import App from './App';
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/src/ot.js ADDED Viewed

@@ -0,0 +1,5 @@
+// This file is the central point where the OT types are imported.
+// Localized to one file so it's easy to change it in future.
+import OTJSON1Presence from 'sharedb-client-browser/dist/ot-json1-presence-umd.cjs';
+const { json1Presence, textUnicode } = OTJSON1Presence;
+export { json1Presence, textUnicode };

package/src/randomId.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ // Generate a random ID string consisting of digits.
2	+ export const randomId = () => Math.floor(Math.random() * 10000000000) + '';