Change the extension to .excalidraw (#858)

* Change the extension to .excalidra

* Support opening as well

* support .excalidraw extension on canvas  DranAndDrop

Co-authored-by: Faustino Kialungila <Faustino.kialungila@gmail.com>

src/index.tsx

@@ -2191,7 +2191,10 @@ export class App extends React.Component<any, AppState> {
             onPointerLeave={this.removePointer}
             onDrop={event => {
               const file = event.dataTransfer.files[0];
-              if (file?.type === "application/json") {
+              if (
+                file?.type === "application/json" ||
+                file?.name.endsWith(".excalidraw")
+              ) {
                 loadFromBlob(file)
                   .then(({ elements, appState }) =>
                     this.syncActionResult({ elements, appState }),

src/scene/data.ts

@@ -83,7 +83,7 @@ export async function saveAsJSON(
 ) {
   const serialized = serializeAsJSON(elements, appState);
 
-  const name = `${appState.name}.json`;
+  const name = `${appState.name}.excalidraw`;
   await fileSave(
     new Blob([serialized], { type: "application/json" }),
     {
@@ -96,7 +96,7 @@ export async function saveAsJSON(
 export async function loadFromJSON() {
   const blob = await fileOpen({
     description: "Excalidraw files",
-    extensions: ["json"],
+    extensions: ["json", "excalidraw"],
     mimeTypes: ["application/json"],
   });
   return loadFromBlob(blob);