Merge pull request #1791 from sumitbhanushali/kb-fix-2

fix: text editor can now insert/show images
frappe · May 16, 2024 · ef5a8d4 · ef5a8d4
2 parents 742ebbb + 2174519
commit ef5a8d4
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 21 deletions.
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseArticle.vue b/desk/src/pages/knowledge-base/KnowledgeBaseArticle.vue
@@ -51,10 +51,8 @@
     <div class="overflow-auto">
       <div class="container m-auto my-12">
         <TextEditor
-          :bubble-menu="true"
           :content="article.data?.content"
           :editable="editMode"
-          :floating-menu="true"
           :placeholder="placeholder"
           class="rounded"
           :class="{
@@ -70,6 +68,11 @@
               v-model:title="articleTitle"
               v-bind="options__"
             />
+            <TextEditorFixedMenu
+              v-if="editMode"
+              class="-ml-1"
+              :buttons="textEditorMenuButtons"
+            />
           </template>
         </TextEditor>
         <RouterLink
@@ -98,6 +101,7 @@ import {
   debounce,
   Button,
   TextEditor,
+  TextEditorFixedMenu,
 } from "frappe-ui";
 import {
   AGENT_PORTAL_KNOWLEDGE_BASE_ARTICLE,
@@ -160,6 +164,9 @@ const article = createResource({
   params: {
     name: props.articleId,
   },
+  onSuccess(data) {
+    articleTitle.value = data.title;
+  },
   auto: !isNew,
 });
 
@@ -273,4 +280,42 @@ const backTo = computed(() => ({
     subCategoryId: subCategoryId.value,
   },
 }));
+
+const textEditorMenuButtons = [
+  "Paragraph",
+  ["Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6"],
+  "Separator",
+  "Bold",
+  "Italic",
+  "Separator",
+  "Bullet List",
+  "Numbered List",
+  "Separator",
+  "Align Left",
+  "Align Center",
+  "Align Right",
+  "FontColor",
+  "Separator",
+  "Image",
+  "Video",
+  "Link",
+  "Blockquote",
+  "Code",
+  "Horizontal Rule",
+  [
+    "InsertTable",
+    "AddColumnBefore",
+    "AddColumnAfter",
+    "DeleteColumn",
+    "AddRowBefore",
+    "AddRowAfter",
+    "DeleteRow",
+    "MergeCells",
+    "SplitCell",
+    "ToggleHeaderColumn",
+    "ToggleHeaderRow",
+    "ToggleHeaderCell",
+    "DeleteTable",
+  ],
+];
 </script>
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseArticleTopEdit.vue b/desk/src/pages/knowledge-base/KnowledgeBaseArticleTopEdit.vue
@@ -16,23 +16,11 @@
       <div class="text-gray-800">
         {{ dayjs.tz(modified).fromNow() }}
       </div>
-      <div class="text-base text-gray-300">|</div>
-      <Icon icon="lucide:thumbs-up" class="h-4 w-4" />
-      <div class="text-gray-600">Likes</div>
-      <div class="text-gray-800">
-        {{ likes }}
-      </div>
-      <div class="text-base text-gray-300">|</div>
-      <Icon icon="lucide:thumbs-down" class="h-4 w-4" />
-      <div class="text-gray-600">Dislikes</div>
-      <div class="text-gray-800">
-        {{ dislikes }}
-      </div>
     </div>
   </div>
   <div class="border-b pb-3">
     <FormControl
-      :placeholder="title"
+      :value="title"
       type="text"
       @change="emit('update:title', $event.target.value)"
     />
@@ -42,7 +30,6 @@
 <script setup lang="ts">
 import { Avatar, FormControl } from "frappe-ui";
 import { dayjs } from "@/dayjs";
-import { Icon } from "@iconify/vue";
 
 interface P {
   categoryName: string;
@@ -60,9 +47,6 @@ interface E {
   (event: "update:title", title: string): void;
 }
 
-withDefaults(defineProps<P>(), {
-  likes: 0,
-  dislikes: 0,
-});
+defineProps<P>();
 const emit = defineEmits<E>();
 </script>
diff --git a/helpdesk/helpdesk/doctype/hd_article/hd_article.json b/helpdesk/helpdesk/doctype/hd_article/hd_article.json
@@ -89,7 +89,8 @@
   }
  ],
  "links": [],
- "modified": "2024-05-16 01:43:17.042347",
+ "make_attachments_public": 1,
+ "modified": "2024-05-16 17:24:36.902658",
  "modified_by": "Administrator",
  "module": "Helpdesk",
  "name": "HD Article",