From c4b2005425f7a02003fb03d80bc45f445a50114b Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 19 Jul 2022 09:28:19 +0530
Subject: [PATCH] feat: Component for editing an article (#5032)

* feat: Component for editing an article

* chore: font fixes

* chore: Review fixes

* chore: fixes conflicts

* Update app/javascript/dashboard/components/helpCenter/EditArticle.vue

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

* chore: Review fixes

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
---
 .../helpCenter/EditArticle.stories.js         | 34 +++++++
 .../components/helpCenter/EditArticle.vue     | 95 +++++++++++++++++++
 .../dashboard/i18n/locale/en/helpCenter.json  |  4 +
 3 files changed, 133 insertions(+)
 create mode 100644 app/javascript/dashboard/components/helpCenter/EditArticle.stories.js
 create mode 100644 app/javascript/dashboard/components/helpCenter/EditArticle.vue

diff --git a/app/javascript/dashboard/components/helpCenter/EditArticle.stories.js b/app/javascript/dashboard/components/helpCenter/EditArticle.stories.js
new file mode 100644
index 000000000..b7e13e1d1
--- /dev/null
+++ b/app/javascript/dashboard/components/helpCenter/EditArticle.stories.js
@@ -0,0 +1,34 @@
+import { action } from '@storybook/addon-actions';
+import EditArticle from './EditArticle.vue';
+
+export default {
+  title: 'Components/Help Center',
+  component: EditArticle,
+  argTypes: {
+    article: {
+      defaultValue: {},
+      control: {
+        type: 'object',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { EditArticle },
+  template:
+    '<edit-article v-bind="$props" @focus="onFocus" @blur="onBlur"></edit-article>',
+});
+
+export const EditArticleView = Template.bind({});
+EditArticleView.args = {
+  article: {
+    id: '1',
+    title: 'Lorem ipsum',
+    content:
+      'L**orem ipsum** dolor sit amet, consectetur adipiscing elit. Congue diam orci tellus *varius per cras turpis aliquet commodo dolor justo* rutrum lorem venenatis aliquet orci curae hac. Sagittis ultrices felis **`ante placerat condimentum parturient erat consequat`** sollicitudin *sagittis potenti sollicitudin* quis velit at placerat mi torquent. Dignissim luctus nulla suspendisse purus cras commodo ipsum orci tempus morbi metus conubia et hac potenti quam suspendisse feugiat. Turpis eros dictum tellus natoque laoreet lacus dolor cras interdum **vitae gravida tincidunt ultricies tempor convallis tortor rhoncus suspendisse.** Nisi lacinia etiam vivamus tellus sed taciti potenti quam praesent congue euismod mauris est eu risus convallis taciti etiam. Inceptos iaculis turpis leo porta pellentesque dictum `bibendum blandit parturient nulla leo pretium` rhoncus litora dapibus fringilla hac litora.',
+  },
+  onFocus: action('focus'),
+  onBlur: action('blur'),
+};
diff --git a/app/javascript/dashboard/components/helpCenter/EditArticle.vue b/app/javascript/dashboard/components/helpCenter/EditArticle.vue
new file mode 100644
index 000000000..d3abe35dd
--- /dev/null
+++ b/app/javascript/dashboard/components/helpCenter/EditArticle.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="edit-article--container">
+    <input
+      v-model="articleTitle"
+      type="text"
+      class="article-heading"
+      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.TITLE_PLACEHOLDER')"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+    <woot-message-editor
+      v-model="articleContent"
+      class="article-content"
+      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')"
+      :is-format-mode="true"
+      :min-height="24"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+  </div>
+</template>
+
+<script>
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+export default {
+  components: {
+    WootMessageEditor,
+  },
+  props: {
+    article: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      articleTitle: '',
+      articleContent: '',
+    };
+  },
+  mounted() {
+    this.articleTitle = this.article.title;
+    this.articleContent = this.article.content;
+  },
+  methods: {
+    onFocus() {
+      this.$emit('focus');
+    },
+    onBlur() {
+      this.$emit('blur');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.edit-article--container {
+  margin: var(--space-medium) var(--space-giga);
+  min-width: 640px;
+}
+
+.article-heading {
+  font-size: var(--font-size-giga);
+  font-weight: var(--font-weight-bold);
+  min-height: var(--space-jumbo);
+  max-height: var(--space-jumbo);
+  border: 0px solid transparent;
+  padding: 0;
+}
+
+::v-deep {
+  .ProseMirror-menubar-wrapper {
+    .ProseMirror-menubar .ProseMirror-menuitem {
+      .ProseMirror-icon {
+        margin-right: var(--space-normal);
+        font-size: var(--font-size-small);
+      }
+    }
+
+    .ProseMirror-woot-style {
+      min-height: var(--space-giga);
+      max-height: 100%;
+
+      p {
+        font-size: var(--font-size-default);
+        line-height: 1.5;
+      }
+
+      li::marker {
+        font-size: var(--font-size-default);
+      }
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
index 0c04a6c37..dd6fdbbe5 100644
--- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
@@ -27,6 +27,10 @@
         "BY": "by"
       }
     },
+    "EDIT_ARTICLE": {
+      "TITLE_PLACEHOLDER": "Article title goes here",
+      "CONTENT_PLACEHOLDER": "Write your article here"
+    },
     "SIDEBAR": {
       "SEARCH": {
         "PLACEHOLDER": "Search for articles"