diff --git a/examples/tiptap/src/app/layout.tsx b/examples/tiptap/src/app/layout.tsx index cfc4a10..3ce326b 100644 --- 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 index 84bf9ea..416a6c9 100644 --- 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 index 7a4d1ef..e47395e 100644 --- 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 deleted file mode 100644 index bf9ff78..0000000 --- a/examples/tiptap/src/styles/normalize.css +++ /dev/null @@ -1,175 +0,0 @@ -*, -::before, -::after { - box-sizing: border-box; -} - -html { - line-height: 1.5; - tab-size: 4; - -webkit-text-size-adjust: 100%; -} - -body { - margin: 0; - line-height: inherit; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -a { - color: inherit; - text-decoration: inherit; -} - -b, -strong { - font-weight: bolder; -} - -code, -kbd, -samp, -pre { - font-size: 1em; -} - -small { - font-size: 80%; -} - -button, -input, -optgroup, -select, -textarea { - padding: 0; - border: 0; - margin: 0; - color: inherit; - font-family: inherit; - font-size: 100%; - font-weight: inherit; - line-height: inherit; -} - -button, -select { - border: none; - text-transform: none; -} - -button, -[type="button"], -[type="reset"], -[type="submit"] { - appearance: button; - background-color: transparent; - background-image: none; -} - -:-moz-focusring { - outline: auto; -} - -:-moz-ui-invalid { - box-shadow: none; -} - -progress { - vertical-align: baseline; -} - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -[type="search"] { - appearance: textfield; -} - -::-webkit-search-decoration { - appearance: none; -} - -::-webkit-file-upload-button { - appearance: button; - font: inherit; -} - -summary { - display: list-item; -} - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - padding: 0; - margin: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - padding: 0; - margin: 0; - list-style: none; -} - -textarea { - resize: vertical; -} - -button, -[role="button"] { - cursor: pointer; -} - -:disabled { - cursor: default; -} - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - vertical-align: middle; -} - -img, -video { - max-width: 100%; - height: auto; -} diff --git a/examples/tiptap/src/styles/text-editor.css b/examples/tiptap/src/styles/text-editor.css deleted file mode 100644 index e69de29..0000000