@seafile/seafile-editor 0.3.97 → 0.3.100

package/dist/editor/rich-markdown-editor.js

@@ -1,39 +1,29 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React from 'react';
-import ToolBar from '../components/toolbar';
+import React, { Fragment } from 'react';
+import Toolbar from '../components/toolbar';
 import { withTranslation } from 'react-i18next';
-import { renderNode, renderLeaf, EditorUtils, decorationNode } from './editor-utils/common-editor-utils';
-import { createEditor, Node, Editor, Range } from 'slate';
-import { withHistory } from 'slate-history';
+import { renderNode, renderLeaf, decorationNode } from './editor-utils/common-editor-utils';
+import { Node, Editor, Range } from 'slate';
 import { serialize } from '../utils/slate2markdown/index';
-import { Editable, withReact, Slate, ReactEditor } from '@seafile/slate-react';
+import { Editable, Slate, ReactEditor } from '@seafile/slate-react';
 import { isRangeCollapsed } from './editor-utils/range-utils';
 import ModalPortal from '../components/modal-portal';
 import TextLinkHoverMenu from './editor-component/textlink-hovermenu';
 import ContextMenu from '../components/context-menu';
-import withBlock from './controller/block-element-controller';
-import withInline from './controller/inline-element-controller';
-import withVoid from './controller/void-element-controller';
-import withMarkdownShortcut from './controller/shortcut-controller';
-import normalizeNode from './controller/normalize-controller';
-import Plugin from './editor-plugin';
-import TableUtils from '../editor/editor-utils/block-element-utils/table-utils';
-import UserHelpDialog from '../components/user-help';
+import UserHelp from '../components/user-help';
 import CommentDialog from '../components/comment-dialog';
-import SidePanel from '../components/side-panel';
+import SidePanel from '../example/components/side-panel';
 import toaster from '../components/toast';
-import '../css/richeditor/right-panel.css';
-import '../css/richeditor/side-panel.css';
-import '../css/richeditor/navbar-imgbutton.css';
-import '../css/richeditor/textlink-hovermenu.css';
-import '../css/richeditor/comments-list.css';
-import '../css/richeditor/image.css';
-import '../css/richeditor/link.css';
-import '../css/richeditor/tree-view.css';
+import EditorBuilder from './editor-builder';
+import '../assets/editor/rich-editor.css';
+import '../assets/css/navbar-imgbutton.css';
+import '../assets/css/textlink-hovermenu.css';
+import '../assets/css/image.css';
+import '../assets/css/link.css';
+import '../assets/css/tree-view.css';
 
 var SimpleEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(SimpleEditor, _React$Component);
@@ -123,13 +113,13 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
     _this.showHelpDialog = function () {
       _this.setState({
         isShowSidePanel: false,
-        isShowHelpDialog: true
+        isShowHelpPanel: true
       });
     };
 
     _this.hideHelpDialog = function () {
       _this.setState({
-        isShowHelpDialog: false
+        isShowHelpPanel: false
       });
     };
 
@@ -155,13 +145,13 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
       }
 
       _this.setState({
-        isShowHelpDialog: false
+        isShowHelpPanel: false
       });
     };
 
     _this.handleCommentOpen = function () {
       _this.setState({
-        isShowHelpDialog: false
+        isShowHelpPanel: false
       });
     };
 
@@ -175,7 +165,7 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
 
     _this.insertRepoFile = function () {
       if (_this.props.readOnly) return;
-      _this.editorSelection = window.editor.selection;
+      _this.editorSelection = _this.editor.selection;
       _this.props.openDialogs && _this.props.openDialogs('insert_file');
     };
 
@@ -232,26 +222,12 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
       _this.props.onChange(value, _this.editor.operations);
     };
 
-    _this.foucsEditor = function () {
-      _this.editorRef.firstChild.focus();
-    };
-
-    _this.onToggleLinkDialog = function () {
-      _this.setState({
-        isShowLinkDialog: !_this.state.isShowLinkDialog
-      });
-    };
-
-    _this.onToggleFormulaDialog = function () {
-      _this.setState({
-        isShowFormulaDialog: !_this.state.isShowFormulaDialog
-      });
-    };
+    _this.onFocusEditor = function () {
+      var value = _this.state.value;
 
-    _this.onToggleImageDialog = function () {
-      _this.setState({
-        isShowImageDialog: !_this.state.isShowImageDialog
-      });
+      if (value.length === 2 && value[0].type === 'paragraph' && Node.text(value[0].children[0]).length === 0) {
+        _this.editorRef.firstChild.focus();
+      }
     };
 
     _this.getCookie = function (key) {
@@ -319,30 +295,27 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
       });
     };
 
-    _this.editor = normalizeNode(withMarkdownShortcut(withVoid(withBlock(withInline(withHistory(withReact(createEditor())))))));
-    _this.editor.editorApi = props.editorApi;
-    _this.editor.onSave = props.onSave;
-    window.editor = _this.editor;
-    _this.editorUtils = new EditorUtils(_this.editor);
-    _this.tableUtils = new TableUtils(_this.editor);
-    _this.plugin = new Plugin(_this.editor);
-    _this.editorRef = null;
-    _this.timmer = null;
-    _this.contextMenuPosition = {};
+    _this.setEditorRef = function (ref) {
+      _this.editorRef = ref;
+    };
+
     _this.state = {
       value: props.value,
       leftNavMode: 'files',
-      isShowHelpDialog: false,
+      isShowHelpPanel: false,
       isShowSidePanel: false,
-      isShowLinkDialog: false,
-      isShowImageDialog: false,
-      isShowFormulaDialog: false,
       isShowContextMenu: false,
       showCommentBtn: false,
       showCommentDialog: false,
       commentPosition: null,
       relistComment: 0
     };
+    _this.editor = EditorBuilder.getEditor(props);
+    _this.editorUtils = EditorBuilder.getEditorUtils();
+    _this.tableUtils = EditorBuilder.getTableUtils();
+    _this.plugin = EditorBuilder.getPlugin();
+    _this.timmer = null;
+    _this.contextMenuPosition = {};
     return _this;
   }
 
@@ -355,35 +328,7 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      window.richMarkdownEditor = this; // notify current user if others are also editing this file
-
-      var editingUsers = this.props.collabUsers.filter(function (ele) {
-        return ele.is_editing === true && ele.myself === undefined;
-      });
-
-      if (editingUsers.length > 0) {
-        toaster.danger('Another user is editing this file!', {
-          duration: 3
-        });
-      }
-
-      var userAgent = navigator.userAgent.toLowerCase();
-
-      if (userAgent.indexOf('chrome') === -1) {
-        toaster.warning(this.props.t('Editing_files_in_this_browser_can_lead_to_slight_display_problems'), {
-          duration: 4
-        });
-      } // get first text node of the document and focus at the start of the text node
-
-
-      var _Array$from$ = _slicedToArray(Array.from(Node.texts(this.editor.children[0]))[0], 2),
-          textPath = _Array$from$[1];
-
-      textPath.unshift(0);
-      Editor.select(this.editor, {
-        path: textPath,
-        offset: 0
-      });
+      EditorBuilder.resetEditor();
     }
   }, {
     key: "componentWillReceiveProps",
@@ -401,73 +346,55 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$state = this.state,
-          value = _this$state.value,
-          isShowLinkDialog = _this$state.isShowLinkDialog,
-          isShowImageDialog = _this$state.isShowImageDialog,
-          isShowFormulaDialog = _this$state.isShowFormulaDialog;
+      var value = this.state.value;
       var _this$props = this.props,
           t = _this$props.t,
-          mode = _this$props.mode,
           editorApi = _this$props.editorApi;
-      var _this$state2 = this.state,
-          isShowHelpDialog = _this$state2.isShowHelpDialog,
-          isShowSidePanel = _this$state2.isShowSidePanel;
-      var mainPanelClass = "seafile-editor-main-panel flex-fill d-flex align-self-end ".concat(!isShowSidePanel && !isShowHelpDialog ? 'seafile-editor-all-panel' : '');
-      var editor = this.editor,
-          foucsEditor = this.foucsEditor;
+      var _this$state = this.state,
+          isShowHelpPanel = _this$state.isShowHelpPanel,
+          isShowSidePanel = _this$state.isShowSidePanel;
+      var mainPanelClass = "seafile-editor-main-panel flex-fill d-flex align-self-end ".concat(!isShowSidePanel && !isShowHelpPanel ? 'seafile-editor-all-panel' : '');
+      var editor = this.editor;
       var toolbarStatus = this.editorUtils.getToolbarStatus();
-      var readOnly = this.props.readOnly;
       var selectionCollapsed = isRangeCollapsed(editor.selection);
-      return /*#__PURE__*/React.createElement("div", {
-        className: "seafile-editor-module seafile-editor"
-      }, /*#__PURE__*/React.createElement(Slate, {
-        editor: this.editor,
-        value: value,
-        onChange: this.onChange
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "seafile-rich-editor seafile-editor"
       }, /*#__PURE__*/React.createElement("div", {
-        className: "seafile-rich-editor-topbar"
-      }, /*#__PURE__*/React.createElement(ToolBar, {
-        onToggleLinkDialog: this.onToggleLinkDialog,
-        onToggleImageDialog: this.onToggleImageDialog,
-        onToggleFormulaDialog: this.onToggleFormulaDialog,
-        toolbarStatus: toolbarStatus,
+        className: "seafile-editor-topbar"
+      }, /*#__PURE__*/React.createElement(Toolbar, {
         toggleSidePanel: this.toggleSidePanel,
         insertRepoFile: this.insertRepoFile,
-        isShowLinkDialog: isShowLinkDialog,
-        isShowImageDialog: isShowImageDialog,
         isShowSidePanel: isShowSidePanel,
-        hasSidePanel: true,
-        mode: mode,
-        readOnly: readOnly,
-        isShowFormulaDialog: isShowFormulaDialog
-      })), /*#__PURE__*/React.createElement("div", {
+        hasSidePanel: true
+      })), /*#__PURE__*/React.createElement(Slate, {
+        editor: this.editor,
+        value: value,
+        onChange: this.onChange
+      }, /*#__PURE__*/React.createElement("div", {
         className: "seafile-editor-main d-flex"
       }, /*#__PURE__*/React.createElement("div", {
         className: mainPanelClass
       }, /*#__PURE__*/React.createElement("div", {
-        className: "editor-container align-self-start",
+        className: "seafile-editor-module editor-container align-self-start",
         ref: "editorContainer"
       }, /*#__PURE__*/React.createElement("div", {
-        ref: function ref(_ref) {
-          return _this2.editorRef = _ref;
-        },
-        onClick: value.length === 2 && value[0].type === 'paragraph' && Node.text(value[0].children[0]).length === 0 ? foucsEditor : null,
+        ref: this.setEditorRef,
+        onClick: this.onFocusEditor,
         className: "editor article"
       }, /*#__PURE__*/React.createElement(Editable, {
+        autoFocus: true,
         renderElement: function renderElement(props) {
-          return renderNode(props, editor, readOnly);
+          return renderNode(props, editor);
         },
         className: 'editor-component',
         renderLeaf: renderLeaf,
         onContextMenu: this.onContextMenu,
         onCopy: function onCopy(event) {
-          _this2.plugin.onCopy(event, editor);
+          return _this2.plugin.onCopy(event, editor);
         },
         onCut: function onCut(event) {
           return _this2.plugin.onCut(event);
         },
-        autoFocus: true,
         onKeyDown: this.plugin.onKeyDown,
         decorate: decorationNode,
         onSelect: this.setBtnPosition
@@ -475,16 +402,9 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
         className: "iconfont icon-plus-square seafile-viewer-comment-btn",
         ref: "commentbtn",
         onMouseDown: this.addComment
-      })), toolbarStatus.isLinkActive && selectionCollapsed ? /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(TextLinkHoverMenu, {
-        onToggleLinkDialog: this.onToggleLinkDialog,
-        editorUtils: this.editorUtils
-      })) : null, this.state.isShowContextMenu && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(ContextMenu, {
-        tableUtils: this.tableUtils,
-        contextMenuPosition: this.contextMenuPosition
-      })))), !isShowHelpDialog && isShowSidePanel && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      })))), !isShowHelpPanel && isShowSidePanel && /*#__PURE__*/React.createElement("div", {
         className: "seafile-editor-side-panel flex-shrink-0 align-self-start"
       }, /*#__PURE__*/React.createElement(SidePanel, {
-        editor: this,
         document: value,
         issues: this.props.issues,
         scrollToNode: this.scrollToNode,
@@ -498,20 +418,21 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
         fileInfo: this.props.fileInfo,
         participants: this.props.participants,
         onParticipantsChange: this.props.onParticipantsChange
-      }))), isShowHelpDialog && /*#__PURE__*/React.createElement(UserHelpDialog, {
-        userHelp: t('userHelp', {
-          returnObjects: true
-        }),
-        hideHelpDialog: this.hideHelpDialog
-      }), this.state.showCommentDialog && /*#__PURE__*/React.createElement(CommentDialog, {
-        editorApi: editorApi,
-        t: t,
+      }))))), /*#__PURE__*/React.createElement(Fragment, null, toolbarStatus.isLinkActive && selectionCollapsed && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(TextLinkHoverMenu, {
+        onToggleLinkDialog: this.onToggleLinkDialog,
+        editorUtils: this.editorUtils
+      })), this.state.isShowContextMenu && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(ContextMenu, {
+        tableUtils: this.tableUtils,
+        contextMenuPosition: this.contextMenuPosition
+      })), this.state.showCommentDialog && /*#__PURE__*/React.createElement(CommentDialog, {
         quote: this.quote,
-        scrollToQuote: this.scrollToQuote,
+        editorApi: editorApi,
         commentPosition: this.state.commentPosition,
         onCommentAdded: this.onCommentAdded,
         toggleCommentDialog: this.toggleCommentDialog
-      }))));
+      }), isShowHelpPanel && /*#__PURE__*/React.createElement(UserHelp, {
+        hideHelpDialog: this.hideHelpDialog
+      })));
     }
   }]);
 

package/dist/editor/simple-editor.js

@@ -3,34 +3,24 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
-import ToolBar from '../components/toolbar';
 import { withTranslation } from 'react-i18next';
-import { renderNode, renderLeaf, EditorUtils, decorationNode } from './editor-utils/common-editor-utils';
-import { createEditor, Node, Editor } from 'slate';
-import { withHistory } from 'slate-history';
+import { Node, Editor } from 'slate';
+import { Editable, Slate } from '@seafile/slate-react';
+import Toolbar, { HelpGroup } from '../components/toolbar';
+import { renderNode, renderLeaf, decorationNode } from './editor-utils/common-editor-utils';
 import { deserialize, serialize } from '../utils/slate2markdown/index';
-import { Editable, withReact, Slate } from '@seafile/slate-react';
 import { isRangeCollapsed } from './editor-utils/range-utils';
 import ModalPortal from '../components/modal-portal';
 import TextLinkHoverMenu from './editor-component/textlink-hovermenu';
 import ContextMenu from '../components/context-menu';
-import withBlock from './controller/block-element-controller';
-import withInline from './controller/inline-element-controller';
-import withVoid from './controller/void-element-controller';
-import withMarkdownShortcut from './controller/shortcut-controller';
-import normalizeNode from './controller/normalize-controller';
-import Plugin from './editor-plugin';
-import TableUtils from '../editor/editor-utils/block-element-utils/table-utils';
-import IconButton from '../components/topbar-component/icon-button';
 import KeyboardShortcuts from '../components/shortcut-dialog';
+import EditorBuilder from './editor-builder';
 import './code-highlight-package';
-import '../css/layout.css';
-import '../css/richeditor/rich-editor-main.css';
-import '../css/richeditor/navbar-imgbutton.css';
-import '../css/richeditor/textlink-hovermenu.css';
-import '../css/richeditor/image.css';
-import '../css/richeditor/link.css';
-import '../css/topbar.css';
+import '../assets/editor/simple-editor.css';
+import '../assets/css/image.css';
+import '../assets/css/link.css';
+import '../assets/css/navbar-imgbutton.css';
+import '../assets/css/textlink-hovermenu.css';
 
 var SimpleEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(SimpleEditor, _React$Component);
@@ -65,8 +55,12 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
       if (hasChange) _this.contentChanged = true;
     };
 
-    _this.foucsEditor = function () {
-      _this.editorRef.firstChild.focus();
+    _this.onFocusEditor = function () {
+      var value = _this.state.value;
+
+      if (value.length === 1 && value[0].type === 'paragraph' && Node.text(value[0].children[0]).length === 0) {
+        _this.editorRef.firstChild.focus();
+      }
     };
 
     _this.focusText = function () {
@@ -90,18 +84,6 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
       return _this.contentChanged;
     };
 
-    _this.onToggleLinkDialog = function () {
-      _this.setState({
-        isShowLinkDialog: !_this.state.isShowLinkDialog
-      });
-    };
-
-    _this.onToggleImageDialog = function () {
-      _this.setState({
-        isShowImageDialog: !_this.state.isShowImageDialog
-      });
-    };
-
     _this.onContextMenu = function (event) {
       if (_this.tableUtils.isInTable()) {
         event.preventDefault();
@@ -122,22 +104,21 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
       });
     };
 
-    _this.editor = normalizeNode(withMarkdownShortcut(withVoid(withBlock(withInline(withHistory(withReact(createEditor())))))));
-    _this.editor.editorApi = props.editorApi;
-    window.editor = _this.editor;
-    _this.editorUtils = new EditorUtils(_this.editor);
-    _this.tableUtils = new TableUtils(_this.editor);
-    _this.plugin = new Plugin(_this.editor);
-    _this.editorRef = null;
-    _this.contextMenuPosition = {};
+    _this.setEditorRef = function (ref) {
+      _this.editorRef = ref;
+    };
+
     _this.state = {
       value: deserialize(props.value),
-      isShowLinkDialog: false,
-      isShowImageDialog: false,
       isShowBigImage: false,
       isShowContextMenu: false,
       isShowShortcutDialog: false
     };
+    _this.editor = EditorBuilder.getEditor(props);
+    _this.editorUtils = EditorBuilder.getEditorUtils();
+    _this.tableUtils = EditorBuilder.getTableUtils();
+    _this.plugin = EditorBuilder.getPlugin();
+    _this.contextMenuPosition = {};
     return _this;
   }
 
@@ -147,6 +128,11 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
       this.props.onRef(this);
       this.focusText();
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      EditorBuilder.resetEditor();
+    }
   }, {
     key: "getMarkdown",
     value: function getMarkdown() {
@@ -163,52 +149,33 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$state = this.state,
-          value = _this$state.value,
-          isShowLinkDialog = _this$state.isShowLinkDialog,
-          isShowImageDialog = _this$state.isShowImageDialog;
-      var editor = this.editor,
-          foucsEditor = this.foucsEditor;
+      var editor = this.editor;
+      var value = this.state.value;
       var toolbarStatus = this.editorUtils.getToolbarStatus();
       var _this$props2 = this.props,
           readOnly = _this$props2.readOnly,
           t = _this$props2.t;
       var selectionCollapsed = isRangeCollapsed(editor.selection);
       return /*#__PURE__*/React.createElement("div", {
-        className: "seafile-editor-module seafile-simple-editor"
-      }, /*#__PURE__*/React.createElement(Slate, {
+        className: "seafile-simple-editor"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "seafile-editor-topbar"
+      }, /*#__PURE__*/React.createElement(Toolbar, {
+        isSimpleEditor: true
+      }), /*#__PURE__*/React.createElement(HelpGroup, {
+        onHelpToggle: this.toggleShortcutDialog
+      })), /*#__PURE__*/React.createElement(Slate, {
         editor: this.editor,
         value: value,
         onChange: this.onChange
       }, /*#__PURE__*/React.createElement("div", {
-        className: "seafile-rich-editor-topbar"
-      }, /*#__PURE__*/React.createElement(ToolBar, {
-        onToggleLinkDialog: this.onToggleLinkDialog,
-        onToggleImageDialog: this.onToggleImageDialog,
-        toolbarStatus: toolbarStatus,
-        isSimpleEditor: true,
-        isShowLinkDialog: isShowLinkDialog,
-        isShowImageDialog: isShowImageDialog
-      }), /*#__PURE__*/React.createElement("div", {
-        className: 'btn-group editor-btn-group'
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        isRichEditor: true,
-        text: t('Shortcut_help'),
-        id: 'helpIcon',
-        className: 'use-help-icon',
-        icon: 'iconfont icon-use-help',
-        onMouseDown: function onMouseDown(event) {
-          return _this2.toggleShortcutDialog();
-        }
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: "editor-container"
+        className: "seafile-editor-module editor-container"
       }, /*#__PURE__*/React.createElement("div", {
-        ref: function ref(_ref) {
-          return _this2.editorRef = _ref;
-        },
-        onClick: value.length === 1 && value[0].type === 'paragraph' && Node.text(value[0].children[0]).length === 0 ? foucsEditor : null,
+        ref: this.setEditorRef,
+        onClick: this.onFocusEditor,
         className: "editor article"
       }, /*#__PURE__*/React.createElement(Editable, {
+        autoFocus: true,
         renderElement: function renderElement(props) {
           return renderNode(props, editor, readOnly);
         },
@@ -221,7 +188,6 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
         onCut: function onCut(event) {
           return _this2.plugin.onCut(event);
         },
-        autoFocus: true,
         onKeyDown: this.plugin.onKeyDown,
         decorate: decorationNode
       })), toolbarStatus.isLinkActive && selectionCollapsed ? /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(TextLinkHoverMenu, {

package/dist/{css/richeditor → example/assets/css}/comments-list.css

@@ -137,48 +137,3 @@
   background-color: #eee;
 }
 
-.comment-dialog {
-  width: 500px;
-  position: absolute;
-  top: 30%;
-  right: 0;
-  padding: 15px;
-  background-color: #fafafa;
-  border: 1px solid rgba(0,0,0,.2);
-  border-radius: .3rem;
-  box-shadow: 0 0 3px #ccc;
-  z-index: 1000;
-}
-.comment-dialog-triangle {
-  position: absolute;
-  left: -5px;
-  top: 50%;
-  transform: rotate(45deg);
-  border: 1px solid rgba(0,0,0,.2);
-  border-top: none;
-  border-right: none;
-  width: 10px;
-  height: 10px;
-  background-color: #fafafa;
-  box-shadow: -1px 1px #ccc;
-}
-.comment-dialog textarea {
-  width: 100%;
-  min-height: 100px;
-  max-height: 300px;
-  padding: 5px;
-  background-color: #fff;
-}
-.comment-dialog .button-group .btn {
-  margin-right: 10px;
-}
-.comment-dialog .comment-dialog-quote {
-  margin-top: 10px;
-  max-height: 6rem;
-  overflow: auto;
-  padding-left: 1rem;
-}
-.comment-dialog .comment-dialog-quote ul,
-.comment-dialog .comment-dialog-quote ol {
-  padding-left: 1rem;
-}