feat: Allow layers of editable text

liveblocks · Sep 28, 2023 · 2358437 · 2358437
2 parents 5b94b87 + 2067788
commit 2358437
Show file tree

Hide file tree

Showing 11 changed files with 490 additions and 7 deletions.
diff --git a/nextjs-site/package-lock.json b/nextjs-site/package-lock.json
diff --git a/nextjs-site/package.json b/nextjs-site/package.json
@@ -14,6 +14,7 @@
     "@liveblocks/react": "^1.3.5",
     "@liveblocks/react-comments": "^1.3.5",
     "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-portal": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@strapi/icons": "^1.11.0",

diff --git a/nextjs-site/src/app/layers/page.tsx b/nextjs-site/src/app/layers/page.tsx
@@ -0,0 +1,17 @@
+import { Room } from "@/components/Room";
+import { Comments } from "@/components/comments/Comments";
+import { Cursors } from "@/components/cursors/Cursors";
+import { EditableTextMenu } from "@/components/editable/EditableTextMenu";
+import { PageLayers } from "@/components/site/PageLayers";
+
+export default async function Home() {
+  return (
+    <Room>
+      <EditableTextMenu>
+        <PageLayers />
+        <Cursors />
+        <Comments />
+      </EditableTextMenu>
+    </Room>
+  );
+}
diff --git a/nextjs-site/src/app/layers2/page.tsx b/nextjs-site/src/app/layers2/page.tsx
@@ -0,0 +1,17 @@
+import { Room } from "@/components/Room";
+import { Comments } from "@/components/comments/Comments";
+import { Cursors } from "@/components/cursors/Cursors";
+import { EditableTextMenu } from "@/components/editable/EditableTextMenu";
+import { PageLayers2 } from "@/components/site/PageLayers2";
+
+export default async function Home() {
+  return (
+    <Room>
+      <EditableTextMenu>
+        <PageLayers2 />
+        <Cursors />
+        <Comments />
+      </EditableTextMenu>
+    </Room>
+  );
+}
diff --git a/nextjs-site/src/components/editable/EditableTextClient.module.css b/nextjs-site/src/components/editable/EditableTextClient.module.css
@@ -1,13 +1,14 @@
 .EditableTextClient {
   position: relative;
   border-radius: 4px;
+  display: inline-block;
 }
 
 .EditableTextClient:hover {
   outline: 2px solid rgba(255, 255, 255, 0.2);
 }
 
-.EditableTextClient > button {
+.SaveButton {
   position: absolute;
   right: -1.5rem;
   transform: translate3d(100%, -50%, 0);
@@ -19,11 +20,13 @@
   border-radius: 4px;
   box-shadow: var(--shadow);
   background-color: var(--color-accent);
+  pointer-events: auto;
 }
 
 .EditableTextClient [data-editable] {
   border-radius: 4px;
   margin: 0 !important;
+  pointer-events: auto;
 }
 
 .EditableTextClient [data-editable]:hover {
@@ -63,6 +66,8 @@
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   line-height: 0.95;
+  letter-spacing: normal;
+  text-align: left;
 }
 
 .OtherEditing:first-of-type {

diff --git a/nextjs-site/src/components/editable/EditableTextMenu.module.css b/nextjs-site/src/components/editable/EditableTextMenu.module.css
@@ -0,0 +1,12 @@
+.menu {
+  background: var(--color-surface-elevated);
+  border-radius: var(--radius);
+}
+
+.menuItem {
+  padding: var(--space-2) var(--space-4);
+}
+
+/*.menuItem[data-highlighted] {*/
+/*  outline: 2px solid red;*/
+/*}*/