WIP: Comment glyphs (codesandbox#3726)

* initial stuff

* initial glyph implementation

* optimistic transposing

* add active class to glyphs

* WIP: add comment from context

* handling optimistic thread

* multi comments on line

* favor active over multi icon

* add numbers

* copy changes from codesandbox#3729

* remove trigger check

* remove react-draggable coz we have framer motino

* open file and scroll to position

* refactored most, continuing on laptop...

* fix replies

* glyph likes themes

* oops that not supposed to be there

* extract avatarblock

* move edit comment out

* use edit content in reply

* add dialog positioning

* always render even if position is not known

* better fallback position

* remove unused ref

* add polling mechanism to active comment

* change the fallback just a little more

* optimistically set position

* fix checking id in comment glyph boundary as well

* remove optimistic trigger

* improve moving comments

* use currentTarget instead

* set placeholder + animate from left in fallback

* move position logic into a funktion

* animate based on _file change_

* rename optimistic to newComment

* add permalinks (codesandbox#3744)

* add permalinks

* remove query from effect

* move copy to clipboard to effect

* add defaults

* create action for commenturl

* yaay

* Apply suggestions from code review

Co-Authored-By: Christian Alfoni <[email protected]>

* Update packages/app/src/app/pages/Sandbox/index.tsx

Co-Authored-By: Christian Alfoni <[email protected]>

* make action

Co-authored-by: Christian Alfoni <[email protected]>

* fixed add comment position and decorate line

* redesign new comment

* fix ... icon

* pull out new comment component

* rename to AddComment duh

* move add reply to a component

* pull out comment header

* pull out comment body into a component

* close dialog is lame

* but i am lamer

* leave a comment before i forget

* add comment glyph

* some fixes

* window collisions - first draft

* cheeky scale guessing

* found the missing 48px :P

* dont need to track animation state now

* always div for unknown semantics

* fix comment current target trigger

* omg strings!

* fix animations on comments

* improve handling optimistic

* use animate controller

* add comments

* Add times and move file name (codesandbox#3752)

Co-authored-by: Christian Alfoni <[email protected]>

* fix issue with moving from optimistic to existing comment

* refactor to initial and end position

* ensure we actually have a comments state for the sandbox

* fix multi popup

* auto focus on creating new comment

* add permission checks on comments

* drag handle!!!

* improve dragging

* style multi comments (codesandbox#3763)

* style multi comments

* use element

* update lookup

* fix ot typing

* fixed types and defaulting to comments

* fix typing

* last fixes

Co-authored-by: Sara Vieira <[email protected]>
Co-authored-by: siddharthkp <[email protected]>

Author: 3 people

packages/@types/ot/index.d.ts

@@ -21,5 +21,16 @@ declare module 'ot' {
     toJSON(): SerializedTextOperation;
   }
 
-  export { TextOperation };
+  interface Range {
+    new (anchor: number, head: number): Range;
+    transform(operation: TextOperation): Range;
+    anchor: number;
+    head: number;
+  }
+
+  class Selection {
+    static Range: Range;
+  }
+
+  export { TextOperation, Selection };
 }

packages/app/package.json

@@ -194,7 +194,6 @@
     "react-dnd": "^9.4.0",
     "react-dnd-html5-backend": "^9.4.0",
     "react-dom": "^16.9.0",
-    "react-draggable": "^3.0.5",
     "react-error-overlay": "^1.0.10",
     "react-icons": "^2.2.7",
     "react-input-autosize": "^2.2.1",

packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Import/Import.tsx

@@ -31,20 +31,8 @@ import {
 const getFullGitHubUrl = (url: string) =>
   `${protocolAndHost()}${gitHubToSandboxUrl(url)}`;
 
-const copyToClipboard = (str: string) => {
-  const el = document.createElement('textarea');
-  el.value = str;
-  el.setAttribute('readonly', '');
-  el.style.position = 'absolute';
-  el.style.left = '-9999px';
-  document.body.appendChild(el);
-  el.select();
-  document.execCommand('copy');
-  document.body.removeChild(el);
-};
-
 export const Import = () => {
-  const { state, actions } = useOvermind();
+  const { state, actions, effects } = useOvermind();
   const [error, setError] = useState(null);
   const [transformedUrl, setTransformedUrl] = useState('');
   const [url, setUrl] = useState('');
@@ -117,9 +105,7 @@ export const Import = () => {
               <Button
                 small
                 style={{ fontSize: 11 }}
-                onClick={() => {
-                  copyToClipboard(transformedUrl);
-                }}
+                onClick={() => effects.browser.copyToClipboard(transformedUrl)}
                 disabled={!transformedUrl}
               >
                 Copy Link

packages/app/src/app/graphql/introspection-result.ts

@@ -25,6 +25,15 @@ const result: IntrospectionResultData = {
           },
         ],
       },
+      {
+        kind: 'UNION',
+        name: 'ReferenceMetadata',
+        possibleTypes: [
+          {
+            name: 'CodeReferenceMetadata',
+          },
+        ],
+      },
     ],
   },
 };