Implement export as HTML

qilin-editor · Apr 25, 2018 · 40dda15 · 40dda15
1 parent 19f5fa5
commit 40dda15
Showing 1 changed file with 69 additions and 2 deletions.
diff --git a/src/scripts/shortcuts/FileShortcuts.js b/src/scripts/shortcuts/FileShortcuts.js
@@ -1,6 +1,8 @@
 // @flow
+import path from "path";
 import { editor } from "../stores";
 import { triggerButton, writeFile, readFile } from "../utils/FileUtils";
+import { getMarkdown } from "../utils/MarkdownUtils";
 
 /**
  * Handles selected file from the file dialog. Updates Qilin stores.
@@ -41,7 +43,10 @@ export function saveFile(event: Event, ctx: Object): void {
     return saveFileAs(event, ctx);
   }
 
-  writeFile(editor.path, editor.content)
+  const ext = path.extname(e.target.value);
+  const str = getContentByExtension(ext, editor.content);
+
+  writeFile(editor.path, str)
     .then(() => {
       editor.saved = true;
     })
@@ -62,7 +67,10 @@ export function saveFileAs(event: Event, ctx: Object): void {
   event.stopPropagation();
 
   triggerButton("#saveFile", e => {
-    writeFile(e.target.value, editor.content)
+    const ext = path.extname(e.target.value);
+    const str = getContentByExtension(ext, editor.content);
+
+    writeFile(e.target.value, str)
       .then(() => {
         editor.changePath(e.target.value);
         editor.changeContent(editor.content);
@@ -73,3 +81,62 @@ export function saveFileAs(event: Event, ctx: Object): void {
       });
   });
 }
+
+export function getContentByExtension(ext: string, content: string): string {
+  switch (ext) {
+    case ".html":
+      return getAsHTML(content);
+    default:
+      return getAsMarkdown(content);
+  }
+}
+
+/**
+ * Parses content and returns a valid markdown text.
+ *
+ * @todo    Parse HTML to markdown
+ *
+ * @param   {string}  content
+ * @return  {string}
+ */
+export function getAsMarkdown(content: string): string {
+  return editor.content;
+}
+
+/**
+ * Parses content and returns a valid HTML text.
+ *
+ * @todo    Implement styles once ThemeStore ready
+ *
+ * @param   {string}  content
+ * @return  {string}
+ */
+export function getAsHTML(content: string): string {
+  const title = `Qilin – ${editor.path}`;
+  const style = "";
+  const html = getMarkdown({
+    html: true,
+    linkify: true,
+    typography: true
+  }).render(content);
+
+  return `
+    <DOCTYPE html>
+    <html>
+      <head>
+        <title>${title}</title>
+
+        <style>
+          .content { max-width: 1200px; margin: 0 auto; }
+          ${style}
+        </style>
+      </head>
+
+      <body>
+        <div class="content">
+          ${html}
+        </div>
+      </body>
+    </html>
+  `;
+}