Merge pull request #50 from haxzie/dev

Release 🚀

package.json

@@ -8,35 +8,55 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@tiptap/extension-bullet-list": "^2.0.0-beta.13",
+    "@tiptap/extension-document": "^2.0.0-beta.12",
+    "@tiptap/extension-highlight": "^2.0.0-beta.13",
+    "@tiptap/extension-list-item": "^2.0.0-beta.13",
+    "@tiptap/extension-paragraph": "^2.0.0-beta.14",
+    "@tiptap/extension-placeholder": "^2.0.0-beta.19",
+    "@tiptap/extension-task-item": "^2.0.0-beta.15",
+    "@tiptap/extension-task-list": "^2.0.0-beta.15",
+    "@tiptap/extension-text": "^2.0.0-beta.12",
+    "@tiptap/extension-typography": "^2.0.0-beta.12",
+    "@tiptap/starter-kit": "*",
+    "@tiptap/vue-2": "*",
+    "comlink": "^4.3.0",
     "core-js": "^3.6.5",
     "dexie": "^3.0.1",
     "file-saver": "^2.0.5",
     "fuse.js": "^6.4.6",
     "lodash": "^4.17.19",
+    "register-service-worker": "^1.7.1",
+    "marked": "^2.0.5",
     "simplebar-vue": "^1.5.1",
+    "turndown": "^7.0.0",
     "uuid": "^8.2.0",
     "v-click-outside": "^3.0.1",
     "v-tooltip": "^2.0.3",
     "vue": "^2.6.11",
     "vue-feather-icons": "^5.0.0",
     "vue-monaco": "^1.2.1",
+    "vue-prosemirror-2": "^0.3.4",
     "vue-router": "^3.4.3",
     "vue-shortkey": "^3.1.7",
+    "vue2-prosemirror-markdown": "^0.1.0",
     "vue2-transitions": "^0.3.0",
     "vuex": "^3.5.1",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",
     "@vue/cli-plugin-eslint": "~4.4.0",
+    "@vue/cli-plugin-pwa": "^4.5.12",
     "@vue/cli-service": "~4.4.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "monaco-editor-webpack-plugin": "^1.2.0",
     "node-sass": "^4.14.1",
     "sass-loader": "^9.0.2",
-    "vue-template-compiler": "^2.6.11",
-    "webpack-bundle-analyzer": "^4.3.0"
+    "vue-template-compiler": "^2.6.12",
+    "webpack-bundle-analyzer": "^4.3.0",
+    "worker-plugin": "^5.0.0"
   },
   "eslintConfig": {
     "root": true,

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

src/components/Editor.vue

@@ -1,27 +1,32 @@
 <template>
   <div :class="['editor-area', getEditorMode]">
-    <div v-if="getOpenFiles[getEditors.primary].length > 0" id="primary-editor" class="codemirror-instances">
+    <div
+      v-if="getOpenFiles[getEditors.primary].length > 0"
+      id="primary-editor"
+      class="codemirror-instances"
+    >
       <TopBar
         :editor="getEditors.primary"
         :activeFile="getActiveFiles[getEditors.primary]"
         :openFiles="getOpenFiles[getEditors.primary]"
       />
       <div class="scroll-wrapper">
-        <CodeEditor
+        <component
           v-if="getActiveFiles[getEditors.primary]"
           :file="getActiveFiles[getEditors.primary]"
+          :is="getEditorForFile(getActiveFiles[getEditors.primary])"
           @contentChanged="
             (contents) =>
-              updateContents(
-                getActiveFiles[getEditors.primary].id,
-                contents
-              )
+              updateContents(getActiveFiles[getEditors.primary].id, contents)
           "
         />
       </div>
     </div>
     <div
-      v-if="getOpenFiles[getEditors.secondary].length > 0 && getEditorMode === 'multiple'"
+      v-if="
+        getOpenFiles[getEditors.secondary].length > 0 &&
+          getEditorMode === 'multiple'
+      "
       id="secodary-editor"
       class="codemirror-instances"
     >
@@ -35,41 +40,91 @@
         :file="getActiveFiles[getEditors.secondary]"
       />
     </div>
-    <div class="welcome-texts" v-if="!(getOpenFiles[getEditors.primary].length > 0 || getOpenFiles[getEditors.secondary].length > 0)">
+    <div
+      class="welcome-texts"
+      v-if="
+        !(
+          getOpenFiles[getEditors.primary].length > 0 ||
+          getOpenFiles[getEditors.secondary].length > 0
+        )
+      "
+    >
       <h2 class="title">Welcome to Snipp.in</h2>
-      <p class="description">Snipp.in is an in-browser snippet manager and editor.</p>
+      <p class="description">
+        Snipp.in is an in-browser snippet manager and editor.
+      </p>
 
       <h3 class="menu-title">Get Started</h3>
       <ul class="menu">
-        <li @click="createFile({ editable: true })"><FilePlusIcon class="icon" size="18"/> Create new file</li>
-        <li @click="createDirectory({ editable: true })"><FolderPlusIcon class="icon" size="18"/> Create new Folder</li>
+        <li @click="createFile({ editable: true })">
+          <FilePlusIcon class="icon" size="18" /> Create new empty file
+        </li>
+        <li @click="createFile({ editable: true, name: 'untitled.doc' })">
+          <FilePlusIcon class="icon" size="18" /> Create new document
+        </li>
+        <li @click="createDirectory({ editable: true })">
+          <FolderPlusIcon class="icon" size="18" /> Create new Folder
+        </li>
       </ul>
 
       <h3 class="menu-title">Get Involved</h3>
       <ul class="menu">
-        <li><a href="https://github.com/haxzie/snipp.in" target="_blank" ref="noopener noreferrer"><GithubIcon class="icon" size="18"/> GitHub</a></li>
-        <li><a href="https://github.com/haxzie/snipp.in/issues" target="_blank" ref="noopener noreferrer"><GitPullRequestIcon class="icon" size="18"/> Report a bug or an issue</a></li>
+        <li>
+          <a
+            href="https://github.com/haxzie/snipp.in"
+            target="_blank"
+            ref="noopener noreferrer"
+            ><GithubIcon class="icon" size="18" /> GitHub</a
+          >
+        </li>
+        <li>
+          <a
+            href="https://github.com/haxzie/snipp.in/issues"
+            target="_blank"
+            ref="noopener noreferrer"
+            ><GitPullRequestIcon class="icon" size="18" /> Report a bug or an
+            issue</a
+          >
+        </li>
       </ul>
     </div>
   </div>
 </template>
 
 <script>
-import CodeEditor from "@/components/CodeEditor";
+import LoadingScreen from "@/components/LoadingScreen";
 import TopBar from "@/components/TopBar";
 import { mapActions, mapGetters } from "vuex";
 import { EDITORS } from "@/store/modules/Editor/initialState";
 import debounce from "lodash/debounce";
-import { FilePlusIcon, FolderPlusIcon, GithubIcon, GitPullRequestIcon } from 'vue-feather-icons';
+import {
+  FilePlusIcon,
+  FolderPlusIcon,
+  GithubIcon,
+  GitPullRequestIcon,
+} from "vue-feather-icons";
+
+const CodeEditor = () => ({
+  component: import(/* webpackPrefetch: true */ "@/components/Editors/CodeEditor/index.vue"),
+  loading: LoadingScreen,
+  error: LoadingScreen,
+});
+
+const TipTapEditor = () => ({
+  component: import(/* webpackPrefetch: true */ "@/components/Editors/TipTapEditor/index.vue"),
+  loading: LoadingScreen,
+  error: LoadingScreen,
+});
 
 export default {
   components: {
     CodeEditor,
     TopBar,
-    FilePlusIcon, 
+    FilePlusIcon,
     FolderPlusIcon,
     GithubIcon,
-    GitPullRequestIcon
+    GitPullRequestIcon,
+    TipTapEditor,
   },
   computed: {
     ...mapGetters("Editor", [
@@ -92,10 +147,30 @@ export default {
     },
   },
   methods: {
-    ...mapActions("Files", ["updateFileContents", "createFile", "createDirectory"]),
+    ...mapActions("Files", [
+      "updateFileContents",
+      "createFile",
+      "createDirectory",
+    ]),
     updateContents(id, contents) {
       this.debouncedFileUpdate({ id, contents });
     },
+    getEditorForFile(file) {
+      let extension = null;
+      if (file && file.name) {
+        const { name } = file;
+        const fileParts = name.split(".");
+        extension =
+          fileParts.length > 1 ? fileParts.slice(-1).slice(-1)[0] : null;
+      }
+
+      switch (extension) {
+        case "doc":
+          return "TipTapEditor";
+        default:
+          return "CodeEditor";
+      }
+    },
   },
   created() {
     this.debouncedFileUpdate = debounce(this.updateFileContents, 1000);

src/components/CodeEditor.vue → src/components/Editors/CodeEditor/index.vue

@@ -63,6 +63,7 @@ export default {
     editorDidMount(editor) {
       // monaco.editor.defineTheme("night-owl", NightOwl);
       // monaco.editor.setTheme("night-owl");
+      editor.focus();
       const monaco = this.$refs.editor.monaco;
       monaco.editor.defineTheme("Dracula", DraculaTheme);
       monaco.editor.defineTheme("GitHub", GitHubTheme);