working no error on checkboxes. still need to fix em properly

reorproject · Dec 11, 2023 · b724830 · b724830
1 parent 13c0001
commit b724830
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 60 deletions.
diff --git a/src/components/File/MilkdownEditor.tsx b/src/components/File/MilkdownEditor.tsx
@@ -1,21 +1,25 @@
 import { defaultValueCtx, Editor, rootCtx } from "@milkdown/core";
 import { FC, useEffect, useState } from "react";
 
-import { Milkdown, useEditor, MilkdownProvider } from "@milkdown/react";
+import { ReactEditor, useEditor } from "@milkdown/react";
 import { commonmark } from "@milkdown/preset-commonmark";
 import { nord } from "@milkdown/theme-nord";
+import { gfm } from "@milkdown/preset-gfm";
 
-import "@milkdown/theme-nord/style.css";
-import { MarkdownEditorProps } from "./MarkdownEditor";
+// import "@milkdown/theme-nord/style.css";
+// import { MarkdownEditorProps } from "./MarkdownEditor";
 
 export const MilkdownEditor: React.FC = () => {
-  const { loading, get } = useEditor((root) =>
-    Editor.make()
-      .config(nord)
-      .config((ctx) => {
-        ctx.set(rootCtx, root);
-      })
-      .use(commonmark)
+  const { editor, loading, getInstance } = useEditor(
+    (root) =>
+      Editor.make()
+        .use(nord)
+        .use(commonmark)
+        // .use(gfm)
+        .config((ctx) => {
+          ctx.set(rootCtx, root);
+        })
+    // .use(commonmark)
   );
   //   useEffect(() => {
   //     console.log("editor", get());
@@ -24,24 +28,24 @@ export const MilkdownEditor: React.FC = () => {
   //   console.log("editor", editor);
   //   editor?.ctx.set(defaultValueCtx, "Hello, Milkdown!");
 
-  useEffect(() => {
-    if (!loading) {
-      const editor = get();
-      console.log("editor", editor);
-      editor?.ctx.set(defaultValueCtx, "Hello, Milkdown!");
-    }
-    // const editor = get();
-    // console.log("editor", editor);
-    // editor?.ctx.set(defaultValueCtx, "Hello, Milkdown!");
-  }, [loading, get]);
+  // useEffect(() => {
+  //   if (!loading) {
+  //     const editor = get();
+  //     console.log("editor", editor);
+  //     editor?.ctx.set(defaultValueCtx, "Hello, Milkdown!");
+  //   }
+  //   // const editor = get();
+  //   // console.log("editor", editor);
+  //   // editor?.ctx.set(defaultValueCtx, "Hello, Milkdown!");
+  // }, [loading, get]);
 
-  return <Milkdown />;
+  return <ReactEditor editor={editor} />;
 };
 
-export const MilkdownEditorWrapper: React.FC<MarkdownEditorProps> = () => {
+export const MilkdownEditorWrapper: React.FC = () => {
   return (
-    <MilkdownProvider>
-      <MilkdownEditor />
-    </MilkdownProvider>
+    // <MilkdownProvider>
+    <MilkdownEditor />
+    // </MilkdownProvider>
   );
 };
diff --git a/src/components/File/MilkdownSecondTry.tsx b/src/components/File/MilkdownSecondTry.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-// import "./styles.css";
+import "./styles.css";
 import {
   Editor,
   rootCtx,
@@ -70,43 +70,41 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
   }, [content]);
 
   const { editor, getInstance } = useEditor(
-    (root: HTMLElement) =>
+    (root) =>
       Editor.make()
-        .config((ctx: Ctx) => {
+        .config((ctx) => {
           ctx.set(rootCtx, root);
           ctx.set(defaultValueCtx, content);
           ctx
             .get(listenerCtx)
-            .beforeMount((ctx: Ctx) => {
+            .beforeMount((ctx) => {
               console.log("beforeMount");
             })
-            .mounted((ctx: Ctx) => {
+            .mounted((ctx) => {
               console.log("mounted");
               insert("# Default Title");
             })
-            .updated((ctx: Ctx, doc: any, prevDoc: any) => {
+            .updated((ctx, doc, prevDoc) => {
               console.log("updated", doc, prevDoc);
               console.log("updated JSON", doc.toJSON());
             })
-            .markdownUpdated(
-              (ctx: Ctx, markdown: string, prevMarkdown: string | null) => {
-                console.log(
-                  "markdownUpdated to=",
-                  markdown,
-                  "\nprev=",
-                  prevMarkdown
-                );
-                setContent(markdown);
-              }
-            )
-            .blur((ctx: Ctx) => {
+            .markdownUpdated((ctx, markdown, prevMarkdown) => {
+              console.log(
+                "markdownUpdated to=",
+                markdown,
+                "\nprev=",
+                prevMarkdown
+              );
+              setContent(markdown);
+            })
+            .blur((ctx) => {
               console.log("when editor loses focus");
             })
-            .focus((ctx: Ctx) => {
+            .focus((ctx) => {
               const view = ctx.get(editorViewCtx);
               console.log("focus", view);
             })
-            .destroy((ctx: Ctx) => {
+            .destroy((ctx) => {
               console.log("destroy");
             });
         })
@@ -117,28 +115,24 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
               const marks = ctx.get(schemaCtx).marks;
               const nodes = ctx.get(schemaCtx).nodes;
               return [
-                createToggleIcon(
-                  "bold",
-                  "ok", //   (ctx: Ctx) => () => console.log("OK"),
-                  marks.strong,
-                  marks.code_inline
-                ),
+                createToggleIcon("bold", "OK", marks.strong, marks.code_inline),
               ];
             },
           })
         )
         .use(nord)
         .use(commonmark)
-        .use(gfm)
-        // .use(history)
+        // .use(gfm)
+        .use(history)
         .use(listener)
-    // .use(prism)
-    // .use(menu)
-    // .use(block)
-    // .use(cursor)
-    // .use(clipboard)
-    // .use(slash) // Uncomment if slash is used
+        .use(prism)
+        // .use(menu)
+        .use(block)
+        .use(cursor)
+        .use(clipboard)
+    // .use(slash)
   );
+
   useEffect(() => {
     const fetchContent = async () => {
       try {
@@ -163,7 +157,8 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
   };
 
   return (
-    <div className="bg-red-100">
+    <div className="App">
+      {" "}
       <ReactEditor editor={editor} />
     </div>
   );

diff --git a/src/components/FileEditorContainer.tsx b/src/components/FileEditorContainer.tsx
@@ -57,6 +57,7 @@ const FileEditorContainer: React.FC<FileEditorContainerProps> = ({}) => {
                   setContentInParent={setEditorContent}
                   lastSavedContentRef={lastSavedContentRef}
                 />
+                {/* <MilkdownEditor /> */}
               </div>
               <div className="w-[25%]">
                 <SimilarEntriesComponent