Adding in placeholder ext + styling of discussion

Author: andrewtavis

frontend/components/SearchBar.vue

@@ -121,9 +121,14 @@ const notUsingEditor = computed(
 );
 const { slash } = useMagicKeys({
   passive: false,
-  // onEventFired(e) {
-  //   if (e.key === "/" && e.type === "keydown") e.preventDefault();
-  // },
+  onEventFired(e) {
+    if (
+      e.key === "/" &&
+      e.type === "keydown" &&
+      !activeElement.value?.classList.contains("tiptap")
+    )
+      e.preventDefault();
+  },
 });
 
 whenever(logicAnd(slash, notUsingEditor), () => {

frontend/components/card/discussion/CardDiscussionInput.vue

@@ -137,6 +137,7 @@
 import type { DiscussionInput } from "~/types/content/discussion";
 import { IconMap } from "~/types/icon-map";
 import { useEditor, EditorContent } from "@tiptap/vue-3";
+import Placeholder from "@tiptap/extension-placeholder";
 import StarterKit from "@tiptap/starter-kit";
 import Link from "@tiptap/extension-link";
 import Mention from "@tiptap/extension-mention";
@@ -149,16 +150,20 @@ const props = defineProps<{
 const i18n = useI18n();
 
 const editor = useEditor({
-  content: props.discussionInput.highRisk
-    ? i18n.t("i18n.components.card_discussion_input.leave_comment_high_risk")
-    : i18n.t("i18n.components.card_discussion_input.leave_comment"),
   extensions: [
     StarterKit,
+    Placeholder.configure({
+      placeholder: props.discussionInput.highRisk
+        ? i18n.t(
+            "i18n.components.card_discussion_input.leave_comment_high_risk"
+          )
+        : i18n.t("i18n.components.card_discussion_input.leave_comment"),
+    }),
     Link,
     Mention.configure({
       HTMLAttributes: {
         class:
-          "bg-purple-300 rounded-2xl box-decoration-clone text-purple-900 px-1 py-0.5",
+          "hover:underline font-bold rounded-2xl box-decoration-clone px-1 py-0.5",
       },
       suggestion: Suggestion,
     }),
@@ -171,12 +176,6 @@ const editor = useEditor({
   },
 });
 
-// background-color: var(--purple-light);
-// border-radius: 0.4rem;
-// box-decoration-break: clone;
-// color: var(--purple);
-// padding: 0.1rem 0.3rem;
-
 const at = () => {
   console.log("click on at");
   editor.value?.chain().focus().insertContent(" @").run();
@@ -218,10 +217,12 @@ const link = () => {
     .setLink({ href: url })
     .run();
 };
-// There is as of now no plan to add in attachments.
+
+// Note: There is as of now no plan to add in attachments.
 // const attach = () => {
 //   console.log("click on attach");
 // };
+
 const listul = () => {
   console.log("click on listul");
   editor.value?.chain().focus().toggleBulletList().run();
@@ -231,3 +232,13 @@ const listol = () => {
   editor.value?.chain().focus().toggleOrderedList().run();
 };
 </script>
+
+<style>
+.tiptap p.is-editor-empty:first-child::before {
+  color: #adb5bd;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+</style>

frontend/components/card/discussion/MentionList.vue

@@ -1,17 +1,17 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <div
-    class="relative flex flex-col gap-0.5 overflow-auto rounded-lg border border-gray-200 bg-white p-2 shadow-md"
+    class="relative flex flex-col gap-0.5 overflow-auto rounded-lg border border-section-div bg-layer-2 p-2 text-primary-text shadow-md"
   >
     <template v-if="items.length">
       <button
         v-for="(item, index) in items"
         @click="selectItem(index)"
         :key="index"
         :class="{
-          'is-selected rounded-lg bg-gray-50': index === selectedIndex,
+          'is-selected rounded-lg bg-cta-orange/30': index === selectedIndex,
         }"
-        class="flex w-full items-center gap-1 bg-transparent text-left hover:bg-gray-200 [&.is-selected]:bg-gray-300 hover:[&.is-selected]:bg-gray-400"
+        class="hover:[&.is-selected]:bg-bg-cta-orange/50 [&.is-selected]:bg-bg-cta-orange/50 flex w-full items-center gap-1 rounded-lg bg-transparent text-left hover:bg-cta-orange/50"
       >
         <div class="px-1 py-0.5">
           {{ item }}
@@ -60,8 +60,8 @@ export default {
         return true;
       }
 
-      if (event.key === "Enter") {
-        this.enterHandler();
+      if (event.key === "Enter" || event.key === "Tab") {
+        this.selectHandler();
         return true;
       }
 
@@ -77,7 +77,7 @@ export default {
       this.selectedIndex = (this.selectedIndex + 1) % this.items.length;
     },
 
-    enterHandler() {
+    selectHandler() {
       this.selectItem(this.selectedIndex);
     },
 

frontend/components/card/discussion/Suggestion.js

@@ -5,33 +5,7 @@ import MentionList from "./MentionList.vue";
 
 export default {
   items: ({ query }) => {
-    return [
-      "Lea Thompson",
-      "Cyndi Lauper",
-      "Tom Cruise",
-      "Madonna",
-      "Jerry Hall",
-      "Joan Collins",
-      "Winona Ryder",
-      "Christina Applegate",
-      "Alyssa Milano",
-      "Molly Ringwald",
-      "Ally Sheedy",
-      "Debbie Harry",
-      "Olivia Newton-John",
-      "Elton John",
-      "Michael J. Fox",
-      "Axl Rose",
-      "Emilio Estevez",
-      "Ralph Macchio",
-      "Rob Lowe",
-      "Jennifer Grey",
-      "Mickey Rourke",
-      "John Cusack",
-      "Matthew Broderick",
-      "Justine Bateman",
-      "Lisa Bonet",
-    ]
+    return ["Jay Doe", "Jane Doe", "John Doe"]
       .filter((item) => item.toLowerCase().startsWith(query.toLowerCase()))
       .slice(0, 5);
   },
@@ -43,10 +17,6 @@ export default {
     return {
       onStart: (props) => {
         component = new VueRenderer(MentionList, {
-          // using vue 2:
-          // parent: this,
-          // propsData: props,
-          // using vue 3:
           props,
           editor: props.editor,
         });

frontend/components/sidebar/left/SidebarLeftSelector.vue

@@ -2,10 +2,7 @@
 <template>
   <MenuLinkWrapper :id="id" :to="routeUrl" :selected="selected">
     <div
-      class="relative z-0 flex w-full items-center text-left text-sm font-medium"
-      :class="{
-        'space-x-2': sidebar.collapsed == false || sidebar.collapsedSwitch,
-      }"
+      class="relative z-0 flex w-full items-center space-x-2 text-left text-sm font-medium"
     >
       <span class="pl-1">
         <Icon v-if="iconUrl" class="h-5 w-5 flex-shrink-0" :name="iconUrl" />
@@ -18,9 +15,9 @@
           <span class="sr-only">{{ $t("i18n._global.navigate_to") }}</span>
           {{ $t(label) }}
         </p>
-        <span v-else class="sr-only"
-          >{{ $t("i18n._global.navigate_to") }} {{ $t(label) }}</span
-        >
+        <span v-else class="sr-only">
+          {{ $t("i18n._global.navigate_to") }} {{ $t(label) }}
+        </span>
       </Transition>
     </div>
   </MenuLinkWrapper>

frontend/package.json

@@ -68,6 +68,7 @@
     "@tiptap/core": "^2.11.5",
     "@tiptap/extension-link": "^2.11.5",
     "@tiptap/extension-mention": "^2.11.5",
+    "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/pm": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
     "@tiptap/suggestion": "^2.11.5",

frontend/yarn.lock

@@ -3625,6 +3625,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tiptap/extension-placeholder@npm:^2.11.5":
+  version: 2.11.5
+  resolution: "@tiptap/extension-placeholder@npm:2.11.5"
+  peerDependencies:
+    "@tiptap/core": ^2.7.0
+    "@tiptap/pm": ^2.7.0
+  checksum: 10c0/7072f9d27cdf14e187a017fedbd9ecfce0926a4fff6fd78a33a0673496f787edd0542f7519c97f4e53b3c89845854f2c0fd50c8af869ee39f1fd14e595df2da7
+  languageName: node
+  linkType: hard
+
 "@tiptap/extension-strike@npm:^2.11.5":
   version: 2.11.5
   resolution: "@tiptap/extension-strike@npm:2.11.5"
@@ -5109,6 +5119,7 @@ __metadata:
     "@tiptap/core": "npm:^2.11.5"
     "@tiptap/extension-link": "npm:^2.11.5"
     "@tiptap/extension-mention": "npm:^2.11.5"
+    "@tiptap/extension-placeholder": "npm:^2.11.5"
     "@tiptap/pm": "npm:^2.11.5"
     "@tiptap/starter-kit": "npm:^2.11.5"
     "@tiptap/suggestion": "npm:^2.11.5"