ui: fix psdoc_reply & overflow (#100)

packages/ui-default/components/cmeditor/index.js

@@ -6,8 +6,7 @@ export const config = {
     'emoji', 'headings', 'bold', 'italic', 'strike', 'link', '|',
     'list', 'ordered-list', 'check', 'outdent', 'indent', '|',
     'quote', 'line', 'code', 'inline-code', 'table', '|',
-    'upload', 'record', '|',
-    'edit-mode', 'content-theme', 'code-theme', 'export', 'preview',
+    'upload', 'edit-mode', 'content-theme', 'code-theme', 'export',
   ],
   mode: UserContext.preferedEditorType || 'ir',
   toolbarConfig: {
@@ -40,13 +39,13 @@ export default class CmEditor extends DOMAttachedObject {
     const hasFocus = $dom.is(':focus');
     const origin = $dom.get(0);
     const ele = document.createElement('div');
-    const value = $dom.text();
+    const value = $dom.val();
     await new Promise((resolve) => {
       this.editor = new Vditor(ele, {
         ...config,
         ...this.options,
         after: resolve,
-        input(v) { $dom.text(v); },
+        input(v) { $dom.val(v); $dom.text(v); },
         value,
         cache: { id: Math.random().toString() },
       });
@@ -54,18 +53,18 @@ export default class CmEditor extends DOMAttachedObject {
     $(ele).addClass('textbox');
     $dom.hide();
     origin.parentElement.appendChild(ele);
-    if (hasFocus) this.focus();
     this.isValid = true;
+    if (hasFocus) this.focus();
   }
 
   ensureValid() {
     if (!this.isValid) throw new Error('Editor is not loaded');
   }
 
-  value(...argv) {
+  value(val) {
     this.ensureValid();
-    const ret = this.editor.value(...argv);
-    return ret;
+    if (val) return this.editor.setValue(val);
+    return this.editor.getValue();
   }
 
   focus() {

packages/ui-default/components/cmeditor/textareaHandler.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
-import CmEditor from '.';
+import CmEditor from './index';
 
 export default class TextareaHandler extends DOMAttachedObject {
   static DOMAttachKey = 'vjTextareaHandlerInstance';
@@ -11,7 +11,7 @@ export default class TextareaHandler extends DOMAttachedObject {
 
   isCmEditor() {
     const editor = this.getCmEditor();
-    return (editor && editor.isValid);
+    return !!(editor && editor.isValid);
   }
 
   val(...argv) {

packages/ui-default/components/discussion/CommentBox.js

@@ -31,75 +31,75 @@ function init() {
 }
 
 export default class CommentBox extends DOMAttachedObject {
-    static DOMAttachKey = 'vjCommentBoxInstance';
+  static DOMAttachKey = 'vjCommentBoxInstance';
 
-    constructor($dom, options = {}) {
-      super($dom);
-      init();
-      this.$box = $template.clone();
-      this.$box.data('instance', this);
-      this.options = {
-        initialText: null,
-        mode: null,
-        form: null,
-        onCancel: () => null,
-        ...options,
-      };
-      if (this.options.initialText) this.setText(this.options.initialText);
-      if (this.options.mode) {
-        const submitButton = this.$box.find('.dczcomments__box__submit');
-        submitButton.val(submitButton.attr(`data-value-${this.options.mode}`));
-      }
+  constructor($dom, options = {}) {
+    super($dom);
+    init();
+    this.$box = $template.clone();
+    this.$box.data('instance', this);
+    this.options = {
+      initialText: null,
+      mode: null,
+      form: null,
+      onCancel: () => null,
+      ...options,
+    };
+    if (this.options.initialText) this.setText(this.options.initialText);
+    if (this.options.mode) {
+      const submitButton = this.$box.find('.dczcomments__box__submit');
+      submitButton.val(submitButton.attr(`data-value-${this.options.mode}`));
     }
+  }
 
-    getTextareaHandler() {
-      const $textarea = this.$box.find('textarea');
-      return TextareaHandler.getOrConstruct($textarea);
-    }
+  getTextareaHandler() {
+    const $textarea = this.$box.find('textarea');
+    return TextareaHandler.getOrConstruct($textarea);
+  }
 
-    focus() {
-      this.getTextareaHandler().focus();
-      return this;
-    }
+  focus() {
+    this.getTextareaHandler().focus();
+    return this;
+  }
 
-    setText(text) {
-      this.getTextareaHandler().val(text);
-      return this;
-    }
+  setText(text) {
+    this.getTextareaHandler().val(text);
+    return this;
+  }
 
-    getText() {
-      return this.getTextareaHandler().val();
-    }
+  getText() {
+    return this.getTextareaHandler().val();
+  }
 
-    insertText(text) {
-      const handler = this.getTextareaHandler();
-      handler.val(handler.val() + text);
-      return this;
-    }
+  insertText(text) {
+    const handler = this.getTextareaHandler();
+    handler.val(handler.val() + text);
+    return this;
+  }
 
-    appendTo($dom) {
-      this.$box.appendTo($dom);
-      this.$box.trigger('vjContentNew');
-      return this;
-    }
+  appendTo($dom) {
+    this.$box.appendTo($dom);
+    this.$box.trigger('vjContentNew');
+    return this;
+  }
 
-    async onSubmit() {
-      try {
-        await request.post('', {
-          ...this.options.form,
-          content: this.getText(),
-        });
-        window.location.reload();
-      } catch (error) {
-        Notification.error(error.message);
-      }
+  async onSubmit() {
+    try {
+      await request.post('', {
+        ...this.options.form,
+        content: this.getText(),
+      });
+      window.location.reload();
+    } catch (error) {
+      Notification.error(error.message);
     }
+  }
 
-    async onCancel(ev) {
-      await this.options.onCancel(ev);
-      this.$box.remove();
-      this.detach();
-    }
+  async onCancel(ev) {
+    await this.options.onCancel(ev);
+    this.$box.remove();
+    this.detach();
+  }
 }
 
 _.assign(CommentBox, DOMAttachedObject);

packages/ui-default/components/discussion/comments.page.styl

@@ -33,6 +33,11 @@ $downvote-color = red
     >.media
       padding-bottom: 0
 
+.dczcomments__item > .media
+  display: flex
+  >.media__body
+    max-width: calc(100% - 6.5em);
+
 .dczcomments__supplementary
   float: left
   margin-bottom: rem(5px)

packages/ui-default/components/highlighter/highlighter.page.styl

@@ -1,4 +1,4 @@
-@import 'prismjs/themes/prism.css'
+@import 'prism-themes/themes/prism-vs.css'
 
 pre, code
   background: $syntax-hl-bg-color
@@ -6,6 +6,13 @@ pre, code
 pre > code
   background: none
   line-height: 1.5
+  color: black
+  text-align: left
+  white-space: pre-wrap
+  word-spacing: normal
+  word-break: normal
+  tab-size: 4
+  hyphens: none
 
 pre
   position: relative
@@ -15,15 +22,6 @@ code
   color: $code-color
   font-size: rem($font-size-secondary)
 
-pre > code
-  color: black
-  text-align: left
-  white-space: pre-wrap
-  word-spacing: normal
-  word-break: normal
-  tab-size: 4
-  hyphens: none
-
 [data-syntax-hl-show-line-number] pre.line-numbers > code
   white-space: pre