WIP: Comment glyphs (#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 #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 (#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 <christianalfoni@gmail.com> * Update packages/app/src/app/pages/Sandbox/index.tsx Co-Authored-By: Christian Alfoni <christianalfoni@gmail.com> * make action Co-authored-by: Christian Alfoni <christianalfoni@gmail.com> * 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 (#3752) Co-authored-by: Christian Alfoni <christianalfoni@gmail.com> * 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 (#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 <hey@iamsaravieira.com> Co-authored-by: siddharthkp <siddharth.kshetrapal@gmail.com>
codesandbox · Mar 27, 2020 · e98ccf5 · e98ccf5
1 parent 414f01b
commit e98ccf5
Show file tree

Hide file tree

Showing 49 changed files with 2,516 additions and 1,389 deletions.
diff --git a/packages/@types/ot/index.d.ts b/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 };
 }
diff --git a/packages/app/package.json b/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",

diff --git a/packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Import/Import.tsx b/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

diff --git a/packages/app/src/app/graphql/introspection-result.ts b/packages/app/src/app/graphql/introspection-result.ts
@@ -25,6 +25,15 @@ const result: IntrospectionResultData = {
           },
         ],
       },
+      {
+        kind: 'UNION',
+        name: 'ReferenceMetadata',
+        possibleTypes: [
+          {
+            name: 'CodeReferenceMetadata',
+          },
+        ],
+      },
     ],
   },
 };