Download as a Markdown file

[cristigoia]

Hey hey.

I was playing around with Novel and @steven-tey, this is an amazing piece of work! Thank you!

Did a small enhancement for myself, to download the writing in a markdown format. I've used downloadjs and as I'm not on my PC rn, I wanted to share the code snippet and if interested you can just add it.

Inside slash-commands.js:

import download from 'downloadjs';

// ...

{
      title: "Save as Markdown file",
      description: "Download your writing.",
      icon: <ArrowDownToLine size={18} />,
      command: ({ editor, range }: CommandProps) => {
        editor.chain().focus().deleteRange(range).run();
        const editorContent = editor.storage.markdown.getMarkdown();
        download(editorContent, 'novel-'+new Date().toLocaleString()+'.md',  "text/plain");
      },
},

I've used new Date().toLocaleString() just to differentiate the files so they don't become file(1).md file(2).md ... But can be a bit tweaked to look better :)

Extra, I've added a quick command /s inside ui/editor/index.tsx (the else if) to quick download:

import download from 'downloadjs';

// ...

onUpdate: (e) => {
      const selection = e.editor.state.selection;
      const lastTwo = getPrevText(e.editor, {
        chars: 2,
      });
      if (lastTwo === "++" && !isLoading) {
        e.editor.commands.deleteRange({
          from: selection.from - 2,
          to: selection.from,
        });
        complete(
          getPrevText(e.editor, {
            chars: 5000,
          })
        );
        // complete(e.editor.storage.markdown.getMarkdown());
        va.track("Autocomplete Shortcut Used");
      } else if (lastTwo === "/s" && !isLoading) {
        e.editor.commands.deleteRange({
          from: selection.from - 2,
          to: selection.from,
        });
        const editorContent = e.editor.storage.markdown.getMarkdown();
        download(editorContent, 'novel-'+new Date().toLocaleString()+'.md',  "text/plain");
      } else {
        onUpdate(e.editor);
        debouncedUpdates(e);
      }
    },
    autofocus: "end",
  });

Cheers 🍻

[utautattaro]

Thanks @cristigoia for the great snippet!

I'm using your code as a reference and have made a few updates to use in my environment, which I'll share here.

Modified ui/editor/extensions/slash-command.tsx to show the export icon as it appears in the slash command.

{
  title: "export",
  description: "Export the content of novel in markdown format and png image.",
  searchTerms: ["export", "markdown", "build"],
  icon: <DownloadIcon size={18} />, // Need import from lucide-react
  command: ({ editor , range }: CommandProps) => {
    editor.chain().focus().deleteRange(range).run();
    const id = Math.random().toString(32).substring(2);
    let editorContent = editor.storage.markdown.getMarkdown();
    let req = /\(data:image.*?\)/g 
    let imgs = editorContent.match(req);
    for(let i in imgs){
      var a = document.createElement("a");
      let base64 = imgs[i].slice(1);
      base64 = base64.slice(0,-1)
      a.href = base64 
      a.download = i + "-" + id +".png"; 
      a.click(); 

      editorContent = editorContent.replace(base64+")",i+ "-"+id+".png)\n")
    }

    const blob = new Blob([editorContent], {type: 'text/plain'}); 
    const link = document.createElement('a');
    link.download = 'novel-'+id+'.md'; 
    link.href = URL.createObjectURL(blob);
    link.click(); 
  },
}

It is implemented with vanilla js only, so there is no need to provide downloadjs. Also, by default, all images are stored in the markdown as base64, which reduces readability. Each image is now saved as a png file and referenced in the markdown.

We also created a function to save and load novel data as a json format file using data stored in localStorage.

{
  title: "save",
  description: "Save as Json file.",
  searchTerms: ["save", "json","download"],
  icon: <DownloadIcon size={18} />, // Need import from lucide-react
  command: ({ editor, range }: CommandProps) => {
    editor.chain().focus().deleteRange(range).run();
    const json = localStorage.getItem("novel__content");
    if(json){
      const opts = {
        suggestedName: 'document',
        types: [{
          description: 'Json file',
          accept: {'text/plain': ['.json']},
        }],
      };
      const handle = await (window as any).showSaveFilePicker(opts);
      const writable = await handle.createWritable()
      await writable.write(json)
      await writable.close()
    }
  },
},
{
  title: "load",
  description: "Loads data stored in json format.",
  searchTerms: ["load", "upload","json"],
  icon: <UploadIcon size={18} />,// Need import from lucide-react
  command: ({ editor, range }: CommandProps) => {
    editor.chain().focus().deleteRange(range).run();
    const input = document.createElement('input');
    input.type="file";
    input.id="upload_file";
    input.accept=".json"
    input.click();

    var fileReader = new FileReader();

    input.addEventListener('change', function(){
      if(input.files){
        fileReader.readAsText(input.files[0]);

      }
    });
    fileReader.addEventListener("loadend", (event) => {
      if(event.target){
        let json :any;
        json = event.target.result;
        localStorage.setItem("novel__content",json);
        location.reload();
      }
    });
  },
},

Have a good one😆

[shinebarbhuiya]

Can't find any path or file for ui/editor/extensions/slash-command.tsx. I am using Next Js, where can I find it?