Feature/slash commands

README.md

@@ -1,4 +1,4 @@
-![Project Status](https://img.shields.io/badge/🏷-v1.4.13-green) ![Project downloads](https://img.shields.io/github/downloads/lostdesign/linked/total) ![discord](https://img.shields.io/discord/884747974859702352?label=discord)
+![Project Status](https://img.shields.io/badge/🏷-v1.5.0-beta-green) ![Project downloads](https://img.shields.io/github/downloads/lostdesign/linked/total) ![discord](https://img.shields.io/discord/884747974859702352?label=discord)
 
 ![linked-banner](https://user-images.githubusercontent.com/5164617/132354376-44ba85f3-bb21-448e-8c12-4e0fe9af2543.png)
 
@@ -95,4 +95,4 @@ Please check [Contributing.md](/CONTRIBUTING.md) first before opening a pull req
   ```
 </details>
 
-Make sure to follow [@uselinked](https://twitter.com/uselinked) on twitter to get the latest news about the project or feel free to check [github discussions](https://github.com/lostdesign/linked/discussions).
+Make sure to follow [@uselinked](https://twitter.com/uselinked) on twitter to get the latest news about the project or feel free to check [github discussions](https://github.com/lostdesign/linked/discussions).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "linked",
-  "version": "1.4.13",
+  "version": "1.5.0-beta",
   "private": true,
   "description": "Link your thoughts to days.",
   "author": "André Weller <[email protected]> (https://lost.design/)",
@@ -29,8 +29,10 @@
     "@tiptap/core": "2.0.0-beta.172",
     "@tiptap/extension-bold": "2.0.0-beta.26",
     "@tiptap/extension-bullet-list": "2.0.0-beta.26",
+    "@tiptap/extension-character-count": "^2.0.0-beta.26",
     "@tiptap/extension-code-block": "2.0.0-beta.37",
     "@tiptap/extension-document": "2.0.0-beta.15",
+    "@tiptap/extension-gapcursor": "^2.0.0-beta.34",
     "@tiptap/extension-heading": "2.0.0-beta.26",
     "@tiptap/extension-highlight": "2.0.0-beta.33",
     "@tiptap/extension-history": "2.0.0-beta.21",
@@ -40,10 +42,12 @@
     "@tiptap/extension-link": "2.0.0-beta.36",
     "@tiptap/extension-list-item": "2.0.0-beta.20",
     "@tiptap/extension-paragraph": "2.0.0-beta.23",
+    "@tiptap/extension-placeholder": "^2.0.0-beta.48",
     "@tiptap/extension-strike": "2.0.0-beta.27",
     "@tiptap/extension-task-item": "2.0.0-beta.31",
     "@tiptap/extension-task-list": "2.0.0-beta.26",
     "@tiptap/extension-text": "2.0.0-beta.15",
+    "@tiptap/suggestion": "^2.0.0-beta.90",
     "@tiptap/vue-2": "2.0.0-beta.77",
     "core-js": "^3.20.3",
     "electron-store": "8.0.1",
@@ -53,6 +57,8 @@
     "highlight.js": "10.6.0",
     "lodash": "^4.17.21",
     "luxon": "2.3.0",
+    "node-fetch": "^2.6.7",
+    "tippy.js": "^6.3.7",
     "v8-compile-cache": "^2.3.0",
     "vue": "2.6.14",
     "vue-i18n": "8.27.0",

src/assets/css/tailwind.css

@@ -176,7 +176,7 @@ ul[data-type='taskList'] li > input {
 }
 
 .bubble-menu {
-  @apply flex bg-white dark:bg-black ring-2 ring-bright-pink;
+  @apply flex bg-gray-100 dark:bg-secondary-black ring-2 ring-gray-400 dark:ring-gray-700 shadow-2xl;
   padding: 0.3rem;
   margin-bottom: 0.3rem;
   border-radius: 0.5rem;
@@ -185,17 +185,17 @@ ul[data-type='taskList'] li > input {
 }
 
 .bubble-menu button {
-  @apply dark:text-gray-600;
+  @apply text-gray-600 dark:text-gray-500 px-2 py-1 rounded-lg;
   border: none;
   background: none;
   font-size: 0.85rem;
   font-weight: 500;
-  padding: 0 0.2rem;
 }
 
+.bubble-menu button:focus,
 .bubble-menu button:hover,
 .bubble-menu button.is-active {
-  @apply text-gray-700 dark:text-gray-400;
+  @apply text-white bg-gray-400 dark:bg-gray-700 focus:bg-gray-700 outline-none;
 }
 
 .ProseMirror a {
@@ -204,4 +204,18 @@ ul[data-type='taskList'] li > input {
 
 .ProseMirror a:hover {
   @apply text-pink;
+}
+
+
+/* Placeholder styles */
+.ProseMirror .is-empty:first-child::before {
+  @apply text-gray-600 font-normal;
+  content: attr(data-placeholder);
+  float: left;
+  pointer-events: none;
+  height: 0;
+}
+/* Reset placeholder text for codeblocks */
+.ProseMirror pre[data-placeholder="Type / for blocks"]::before {
+  content: '' !important;
 }

src/background.js

@@ -42,7 +42,8 @@ global.storage = new Store({
     searchMode: 'forward',
     enableUpdates: true,
     updateInterval: DAILY,
-    dataPath: basePath
+    dataPath: basePath,
+    allowPrerelease: false
   }
 })
 

src/components/editor.vue

@@ -18,20 +18,8 @@
         <StrikeThroughIcon />
       </button>
     </bubble-menu>
-    <floating-menu class='floating-menu' :editor='editor' v-if='editor'>
-      <button
-        @click='editor.chain().focus().toggleTaskList().run()'>
-        <CheckboxIcon />
-      </button>
-      <button @click='editor.chain().focus().toggleBulletList().run()'>
-        <BulletListIcon />
-      </button>
-      <button @click='editor.chain().focus().toggleCodeBlock().run()'>
-        <CodeIcon />
-      </button>
-    </floating-menu>
     <div class='text-black dark:text-white'>
-      <editor-content :editor='editor' v-model='getContent' />
+      <editor-content class='pb-10' :editor='editor' v-model='getContent' />
     </div>
   </div>
 </template>
@@ -43,15 +31,12 @@ import {
   Actions as FileActions
 } from '@/store/modules/file/types'
 
-import BulletListIcon from '@/assets/icons/bullet-list.svg'
-import CheckboxIcon from '@/assets/icons/checkbox.svg'
-import CodeIcon from '@/assets/icons/code.svg'
-import PenIcon from '@/assets/icons/pen.svg'
-import BoldIcon from '@/assets/icons/bold.svg'
-import ItalicIcon from '@/assets/icons/italic.svg'
-import StrikeThroughIcon from '@/assets/icons/strikethrough.svg'
+import PenIcon from '@/assets/icons/editor/pen.svg'
+import BoldIcon from '@/assets/icons/editor/bold.svg'
+import ItalicIcon from '@/assets/icons/editor/italic.svg'
+import StrikeThroughIcon from '@/assets/icons/editor/strikethrough.svg'
 
-import { Editor, EditorContent, BubbleMenu, FloatingMenu } from '@tiptap/vue-2'
+import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-2'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
@@ -69,15 +54,16 @@ import HorizontalRule from '@tiptap/extension-horizontal-rule'
 import Strike from '@tiptap/extension-strike'
 import Link from '@tiptap/extension-link'
 import History from '@tiptap/extension-history'
+import Commands from '@/components/slash-commands/commands'
+import suggestion from '@/components/slash-commands/suggestions'
+import { Placeholder } from '@tiptap/extension-placeholder'
+import { Gapcursor } from '@tiptap/extension-gapcursor'
+import { CharacterCount } from '@tiptap/extension-character-count'
 
 export default {
   components: {
     EditorContent,
-    FloatingMenu,
     BubbleMenu,
-    BulletListIcon,
-    CheckboxIcon,
-    CodeIcon,
     PenIcon,
     BoldIcon,
     ItalicIcon,
@@ -119,7 +105,20 @@ export default {
         HorizontalRule,
         Strike,
         Link,
-        History
+        History,
+        Commands.configure({
+          suggestion,
+        }),
+        Placeholder.configure({
+          includeChildren: true,
+          placeholder: ({ node }) => {
+            return {
+              'paragraph': this.$t('commands.type_slash')
+            }[node.type.name] ?? ''
+          },
+        }),
+        Gapcursor,
+        CharacterCount
       ],
       content: this.getContent,
       autofocus: true,
@@ -131,12 +130,7 @@ export default {
   },
   watch: {
     getContent(value) {
-      const isSame = this.editor.getHTML() === value
-
-      if (isSame) {
-        return
-      }
-
+      if (this.editor.getHTML() === value) return
       this.editor.commands.setContent(this.getContent, false)
     }
   },

src/components/settings/allow-prerelease.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h3 class='mt-8'>{{ $t('settings.allowPrerelease.title') }}</h3>
+    <p class='text-sm text-gray-500'>{{ $t('settings.allowPrerelease.hint') }}</p>
+    <div class='flex items-center space-x-2 mt-2'>
+      <input v-model='allowPrerelease' type='checkbox' />
+      <span>{{ $t('settings.allowPrerelease.enabled') }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Getters as AppGetters, Actions as AppActions } from '@/store/modules/app/types'
+
+export default {
+  computed: {
+    allowPrerelease: {
+      get() {
+        return this.$store.getters[`app/${AppGetters.GET_ALLOW_PRERELEASE}`];
+      },
+      set(value) {
+        this.$store.dispatch(`app/${AppActions.SET_ALLOW_PRERELEASE}`, value)
+      },
+    },
+  },
+}
+</script>