feat: set up editor demo nextjs

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-dist
+dist
+.next

editor.css

@@ -39,6 +39,10 @@
   padding-left: 1.5rem;
 }
 
+.fm-editor a {
+  text-decoration: underline;
+}
+
 .fm-editor-controls {
   position: sticky;
   top: 0;
@@ -93,7 +97,7 @@
   background-color: rgb(244 244 245);
 }
 
-.fm-editor-controls-group:first-child {
+.fm-editor-controls-group > * {
   border-radius: 0;
 }
 
@@ -175,3 +179,71 @@
 .fm-editor-mentionable-popover-selected {
   background-color: rgb(228 228 231);
 }
+
+.fm-editor-dialog-overlay {
+  background-color: rgb(30 41 59 / 0.7);
+  position: fixed;
+  inset: 0px;
+  z-index: 50;
+}
+
+.fm-editor-dialog {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  z-index: 51;
+  padding: 2rem;
+  border-radius: 0.375rem;
+  box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px #1e293b,
+    0 2px 4px -2px #1e293b;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+  max-width: 32rem;
+}
+
+.fm-editor-dialog-title {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.fm-editor-dialog-actions {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+@media (min-width: 640px) {
+  .fm-editor-dialog-actions {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+}
+
+.fm-editor-text-input {
+  background-color: transparent;
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+  padding: 1rem;
+  width: 100%;
+  border-radius: 0.25rem;
+}
+
+.fm-editor-text-input::placeholder {
+  opacity: 0;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.fm-editor-text-input:focus::placeholder,
+.fm-editor-text-input:hover::placeholder {
+  opacity: 1;
+}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.5.3",
     "@floating-ui/react": "^0.25.4",
+    "@radix-ui/react-dialog": "^1.0.5",
     "clsx": "^2.0.0",
     "memoize-one": "^6.0.0",
     "react-icons": "^4.11.0",