✨ unset marks on enter and make editor wider

src/components/Editor.tsx

@@ -43,7 +43,7 @@ const EditorView = ({ doc, firstLoad }: { doc: Y.Doc; firstLoad: boolean }) => {
 
   return (
     <div className="flex px-8 pt-4 justify-center">
-      <EditorContent editor={editor} className="w-3/5" />
+      <EditorContent editor={editor} className="w-4/5 max-w-screen-xl" />
       <EditorMenu editor={editor} />
     </div>
   );

src/lib/extensions/ClearMarksOnEnter.ts

@@ -0,0 +1,25 @@
+import { Extension } from "@tiptap/core";
+
+const ClearMarksOnEnter = Extension.create({
+  name: "clearFormattingOnEnter",
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: ({ editor }) => {
+        console.log("Enter key pressed");
+        editor
+          .chain()
+          .unsetBold()
+          .unsetItalic()
+          .unsetUnderline()
+          .unsetStrike()
+          .unsetLink()
+          .run();
+        // Allow the default behavior of creating a new paragraph
+        return false;
+      },
+    };
+  },
+});
+
+export default ClearMarksOnEnter;

src/lib/extensions/index.ts

@@ -12,6 +12,7 @@ import Collaboration from "@tiptap/extension-collaboration";
 import Underline from "@tiptap/extension-underline";
 import TextAlign from "@tiptap/extension-text-align";
 import { CommitUndo } from "./CommitUndo";
+import ClearMarksOnEnter from "./ClearMarksOnEnter";
 
 export const loadExtensions = (doc: Y.Doc) => {
   const ImageFinder: PasteRuleFinder = /data:image\//g;
@@ -36,7 +37,6 @@ export const loadExtensions = (doc: Y.Doc) => {
   });
 
   const lowlight = createLowlight(common);
-  console.log(doc);
 
   // define your extension array
   const extensions = [
@@ -63,6 +63,7 @@ export const loadExtensions = (doc: Y.Doc) => {
       types: ["heading", "paragraph"],
     }),
     CommitUndo,
+    ClearMarksOnEnter
   ];
 
   return extensions;