css fixes

rocicorp · Dec 15, 2023 · cbc7f4a · cbc7f4a
1 parent 1a93652
commit cbc7f4a
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 261 deletions.
diff --git a/examples/tiptap/src/app/layout.tsx b/examples/tiptap/src/app/layout.tsx
@@ -1,5 +1,4 @@
 import "../styles/globals.css";
-import "../styles/text-editor.css";
 
 export const metadata = {
   title: "Reflect + Yjs + Tiptap",

diff --git a/examples/tiptap/src/components/TextEditor.css b/examples/tiptap/src/components/TextEditor.css
@@ -1,86 +1,70 @@
 /* Basic editor styles */
-.tiptap {
-  > * + * {
-    margin-top: 0.75em;
-  }
-
-  ul,
-  ol {
-    padding: 0 1rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-
-  pre {
-    background: #0d0d0d;
-    border-radius: 0.5rem;
-    color: #fff;
-    font-family: "JetBrainsMono", monospace;
-    padding: 0.75rem 1rem;
-
-    code {
-      background: none;
-      color: inherit;
-      font-size: 0.8rem;
-      padding: 0;
-    }
-  }
-
-  mark {
-    background-color: #faf594;
-  }
-
-  img {
-    height: auto;
-    max-width: 100%;
-  }
-
-  hr {
-    margin: 1rem 0;
-  }
-
-  blockquote {
-    border-left: 2px solid rgba(#0d0d0d, 0.1);
-    padding-left: 1rem;
-  }
-
-  hr {
-    border: none;
-    border-top: 2px solid rgba(#0d0d0d, 0.1);
-    margin: 2rem 0;
-  }
-
-  ul[data-type="taskList"] {
-    list-style: none;
-    padding: 0;
-
-    li {
-      align-items: center;
-      display: flex;
-
-      > label {
-        flex: 0 0 auto;
-        margin-right: 0.5rem;
-        user-select: none;
-      }
-
-      > div {
-        flex: 1 1 auto;
-      }
-    }
-  }
+.tiptap > * + * {
+  margin-top: 0.75em;
+}
+.tiptap ul,
+.tiptap ol {
+  padding: 0 1rem;
+}
+.tiptap h1,
+.tiptap h2,
+.tiptap h3,
+.tiptap h4,
+.tiptap h5,
+.tiptap h6 {
+  line-height: 1.1;
+}
+.tiptap code {
+  background-color: rgba(97, 97, 97, 0.1);
+  color: #616161;
+}
+.tiptap pre {
+  background: #0d0d0d;
+  border-radius: 0.5rem;
+  color: #fff;
+  font-family: "JetBrainsMono", monospace;
+  padding: 0.75rem 1rem;
+}
+.tiptap pre code {
+  background: none;
+  color: inherit;
+  font-size: 0.8rem;
+  padding: 0;
+}
+.tiptap mark {
+  background-color: #faf594;
+}
+.tiptap img {
+  height: auto;
+  max-width: 100%;
+}
+.tiptap hr {
+  margin: 1rem 0;
+}
+.tiptap blockquote {
+  border-left: 2px solid rgba(13, 13, 13, 0.1);
+  padding-left: 1rem;
+}
+.tiptap hr {
+  border: none;
+  border-top: 2px solid rgba(13, 13, 13, 0.1);
+  margin: 2rem 0;
+}
+.tiptap ul[data-type="taskList"] {
+  list-style: none;
+  padding: 0;
+}
+.tiptap ul[data-type="taskList"] li {
+  align-items: center;
+  display: flex;
+}
+.tiptap ul[data-type="taskList"] li > label {
+  flex: 0 0 auto;
+  margin-right: 0.5rem;
+  user-select: none;
+}
+.tiptap ul[data-type="taskList"] li > div {
+  flex: 1 1 auto;
 }
 
 .editor {
@@ -90,7 +74,7 @@
   color: #0d0d0d;
   display: flex;
   flex-direction: column;
-  max-height: 26rem;
+  height: 96vh;
 }
 
 .editor__header {

diff --git a/examples/tiptap/src/styles/globals.css b/examples/tiptap/src/styles/globals.css
@@ -1,5 +1,3 @@
-@import "./normalize.css";
-
 html,
 body {
   background: var(--color-surface-elevated);
@@ -24,6 +22,14 @@ html.grabbing * {
   user-select: none;
 }
 
+.ProseMirror {
+  height: 75vh;
+}
+
+:focus-visible {
+  outline: none;
+}
+
 /* Give a remote user a caret */
 .collaboration-cursor__caret {
   border-left: 1px solid #0d0d0d;

diff --git a/examples/tiptap/src/styles/normalize.css b/examples/tiptap/src/styles/normalize.css
diff --git a/examples/tiptap/src/styles/text-editor.css b/examples/tiptap/src/styles/text-editor.css