Various fixes

CHANGELOG.rst

@@ -4,6 +4,10 @@ Change log
 Next version
 ~~~~~~~~~~~~
 
+- Made the editor usable in dark mode.
+- Changed the cancel buttons in dialogs to not validate the form.
+
+
 0.2 (2024-03-12)
 ~~~~~~~~~~~~~~~~
 

src/commands.js

@@ -10,7 +10,7 @@ const linkDialog = (attrs) => {
   <p><label>URL</label> <input type="url" name="href" size="50" required></p>
   <p><label>Title</label> <input type="text" name="title" size="50"></p>
   <button type="submit">Update</button>
-  <button value="cancel" formmethod="dialog">Cancel</button>
+  <button type="button" value="cancel">Cancel</button>
   </form>
   </dialog>
   `
@@ -20,6 +20,11 @@ const linkDialog = (attrs) => {
     form.href.value = attrs.href || ""
     form.title.value = attrs.title || ""
 
+    dialog
+      .querySelector("button[value=cancel]")
+      .addEventListener("click", () => {
+        dialog.close()
+      })
     dialog.addEventListener("close", () => {
       div.remove()
       resolve(null)
@@ -91,7 +96,7 @@ const htmlDialog = (html) => {
   <form>
   <p><textarea name="html" cols="80" rows="30"></textarea></p>
   <button type="submit">Update</button>
-  <button value="cancel" formmethod="dialog">Cancel</button>
+  <button type="button" value="cancel">Cancel</button>
   </form>
   </dialog>
   `
@@ -100,6 +105,11 @@ const htmlDialog = (html) => {
     const form = div.querySelector("form")
     form.html.value = html
 
+    dialog
+      .querySelector("button[value=cancel]")
+      .addEventListener("click", () => {
+        dialog.close()
+      })
     dialog.addEventListener("close", () => {
       div.remove()
       resolve(null)

src/editor.css

@@ -24,7 +24,7 @@
 
 .prose-menubar {
   font-size: 14px;
-  background: white;
+  background: var(--body-bg);
   display: inline-flex;
   gap: 8px;
   flex-wrap: wrap;
@@ -89,6 +89,8 @@
 
 /* dialog */
 .prose-editor-dialog {
+  background: var(--body-bg);
+  color: var(--body-fg);
   border: 1px solid var(--border-color);
 }
 

src/overrides.css

@@ -10,7 +10,7 @@
 }
 
 .ProseMirror * {
-  color: black !important;
+  color: var(--body-fg) !important;
 }
 
 .ProseMirror p {