fix: editor padding and compile error

src/components/ui/Editor.tsx

@@ -29,17 +29,14 @@ const theme = EditorView.theme({
     fontSize: "1rem",
     overflow: "auto",
     height: "100%",
-    paddingBottom: "200px",
   },
   ".cm-content": {
     height: "100%",
+    paddingBottom: "600px",
   },
   "&.cm-editor.cm-focused": {
     outline: "none",
   },
-  "&.cm-editor": {
-    height: "100%",
-  },
 })
 
 export const useEditor = ({

src/markdown/index.ts

@@ -61,83 +61,86 @@ export const renderPageContent = (
     toc: null,
   }
 
-  const result = unified()
-    .use(remarkParse)
-    .use(remarkFrontmatter, ["yaml"])
-    .use(() => (tree) => {
-      const yaml = tree.children.find((node) => node.type === "yaml")
-      try {
-        env.frontMatter = jsYaml.load((yaml as any)?.value) as Record<
-          string,
-          any
-        >
-      } catch (e) {
-        console.log(e)
-      }
-    })
-    .use(() => (tree) => {
-      env.toc = toc(tree, { tight: true, ordered: true })
-    })
-    .use(remarkGfm, {})
-    .use(remarkExcerpt, { env })
-    .use(remarkCallout)
-    .use(remarkDirective)
-    .use(remarkDirectiveRehype)
-    .use(remarkYoutube)
-    .use(remarkRehype, { allowDangerousHtml: true })
-    .use(rehypeStringify)
-    .use(rehypeRaw)
-    .use(rehypeImage, { env })
-    .use(rehypeSanitize, sanitizeScheme)
-    .use(rehypePrism, {
-      ignoreMissing: true,
-      showLineNumbers: true,
-    })
-    .use(rehypeTable)
-    .use(rehypeExternalLink)
-    .use(rehypeWrapCode)
-    .use(rehypeSlug)
-    .use(rehypeAutolinkHeadings, {
-      properties: {
-        className: ["xlog-anchor"],
-        ariaHidden: true,
-        tabIndex: -1,
-      },
-      content(node) {
-        return [
-          {
-            type: "element",
-            tagName: "span",
-            properties: {
-              className: ["i-akar-icons:link-chain"],
+  let contentHTML = ""
+  let result: any = null
+  try {
+    result = unified()
+      .use(remarkParse)
+      .use(remarkFrontmatter, ["yaml"])
+      .use(() => (tree) => {
+        const yaml = tree.children.find((node) => node.type === "yaml")
+        try {
+          env.frontMatter = jsYaml.load((yaml as any)?.value) as Record<
+            string,
+            any
+          >
+        } catch (e) {
+          console.log(e)
+        }
+      })
+      .use(() => (tree) => {
+        env.toc = toc(tree, { tight: true, ordered: true })
+      })
+      .use(remarkGfm, {})
+      .use(remarkExcerpt, { env })
+      .use(remarkCallout)
+      .use(remarkDirective)
+      .use(remarkDirectiveRehype)
+      .use(remarkYoutube)
+      .use(remarkRehype, { allowDangerousHtml: true })
+      .use(rehypeStringify)
+      .use(rehypeRaw)
+      .use(rehypeImage, { env })
+      .use(rehypeSanitize, sanitizeScheme)
+      .use(rehypePrism, {
+        ignoreMissing: true,
+        showLineNumbers: true,
+      })
+      .use(rehypeTable)
+      .use(rehypeExternalLink)
+      .use(rehypeWrapCode)
+      .use(rehypeSlug)
+      .use(rehypeAutolinkHeadings, {
+        properties: {
+          className: ["xlog-anchor"],
+          ariaHidden: true,
+          tabIndex: -1,
+        },
+        content(node) {
+          return [
+            {
+              type: "element",
+              tagName: "span",
+              properties: {
+                className: ["i-akar-icons:link-chain"],
+              },
+              children: [],
             },
-            children: [],
-          },
-          {
-            type: "element",
-            tagName: "anchor",
-            properties: {
-              name: node.properties?.id,
+            {
+              type: "element",
+              tagName: "anchor",
+              properties: {
+                name: node.properties?.id,
+              },
+              children: [],
             },
-            children: [],
-          },
-        ]
-      },
-    })
-    .use(html ? () => (tree: any) => {} : rehypeReact, {
-      createElement: createElement,
-      components: {
-        img: Image,
-        anchor: Element,
-      } as any,
-    })
-    .processSync(content)
-
-  const contentHTML = result.toString()
+          ]
+        },
+      })
+      .use(html ? () => (tree: any) => {} : rehypeReact, {
+        createElement: createElement,
+        components: {
+          img: Image,
+          anchor: Element,
+        } as any,
+      })
+      .processSync(content)
 
+    contentHTML = result.toString()
+  } catch (error) {}
   return {
     contentHTML,
-    element: result.result,
+    element: result?.result,
     excerpt: env.excerpt,
     frontMatter: env.frontMatter,
     cover: env.cover,

src/markdown/remark-callout.ts

@@ -9,7 +9,7 @@ export const remarkCallout: Plugin<Array<void>, Root> = () => (tree) => {
     if (node.type !== "blockquote") return
 
     const firstChild = node.children[0]
-    if (firstChild.type === "paragraph") {
+    if (firstChild?.type === "paragraph") {
       const paragraphFirstChild = firstChild.children[0]
       if (
         paragraphFirstChild.type === "text" &&