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>

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'),
+};

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>

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"