@seafile/comment-editor 0.0.1-alpha.9 → 0.0.2

package/dist/basic-sdk/utils/full-width-mode.js

@@ -1,36 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getStyleByFullWidthMode = exports.getContentStyleByFullModeStyle = void 0;
-var _constants = require("../constants");
-var _localStorageUtils = _interopRequireDefault(require("./local-storage-utils"));
-const getStyleByFullWidthMode = (scrollRef, editor) => {
-  const sdocStorage = _localStorageUtils.default.getItem(_constants.SDOC_STORAGE) || {};
-  const {
-    outlineOpen: isShowOutline
-  } = sdocStorage;
-  let containerStyle = {};
-  containerStyle['width'] = _constants.ARTICLE_FULL_WIDTH;
-  containerStyle['minWidth'] = _constants.ARTICLE_FULL_MIN_WIDTH;
-
-  // Has outline
-  if (isShowOutline && (editor === null || editor === void 0 ? void 0 : editor.editorType) !== _constants.WIKI_EDITOR) {
-    containerStyle['marginLeft'] = `${_constants.LEFT_OUTLINE_WIDTH}px`;
-    const adjustWidth = ` - ${_constants.LEFT_OUTLINE_WIDTH - 50}px`; // One side is 50
-    containerStyle['width'] = containerStyle['width'].slice(0, -1) + adjustWidth;
-  }
-  return containerStyle;
-};
-exports.getStyleByFullWidthMode = getStyleByFullWidthMode;
-const getContentStyleByFullModeStyle = () => {
-  if (_localStorageUtils.default.getItem(_constants.FULL_WIDTH_MODE)) {
-    return {
-      'minWidth': `${Number(_constants.ARTICLE_FULL_MIN_WIDTH.slice(0, -2))}px`
-    };
-  }
-  return {};
-};
-exports.getContentStyleByFullModeStyle = getContentStyleByFullModeStyle;

package/dist/basic-sdk/utils/local-storage-utils.js

@@ -1,52 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-class LocalStorage {
-  static setItem(key, value) {
-    let savedValue;
-    const valueType = typeof value;
-    if (valueType === 'string') {
-      savedValue = value;
-    } else if (valueType === 'number') {
-      savedValue = value + '';
-    } else {
-      savedValue = JSON.stringify(value);
-    }
-    return window.localStorage.setItem(key, savedValue);
-  }
-  static getItem(key, defaultValue) {
-    const value = window.localStorage.getItem(key);
-    try {
-      return JSON.parse(value) || defaultValue;
-    } catch {
-      return value || defaultValue;
-    }
-  }
-  static removeItem(key) {
-    return window.localStorage.removeItem(key);
-  }
-
-  // The setExpire and getExpire methods used to satisfy some cases that need to be updated regularly
-  static setExpire(key, value, expire) {
-    let obj = {
-      data: value,
-      time: Date.now(),
-      expire: expire
-    };
-    this.setItem(key, JSON.stringify(obj));
-  }
-  static getExpire(key) {
-    let val = this.getItem(key);
-    if (!val) return val;
-    val = JSON.parse(val);
-    if (Date.now() - val.time > val.expire) {
-      this.removeItem(key);
-      return null;
-    }
-    return val.data;
-  }
-}
-var _default = exports.default = LocalStorage;

package/dist/basic-sdk/utils/rebase.js

@@ -1,309 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getRebase = exports.canMerge = void 0;
-var _constants = require("../constants");
-var _constants2 = require("../extension/constants");
-var _helpers = require("../node-id/helpers");
-var _diff = require("./diff");
-var _objectUtils = _interopRequireDefault(require("./object-utils"));
-const expandGroup = content => {
-  if ([_constants2.ELEMENT_TYPE.UNORDERED_LIST, _constants2.ELEMENT_TYPE.ORDERED_LIST].includes(content.type)) {
-    return [{
-      ...content,
-      children: content.children.map(item => {
-        if (item.type === _constants2.ELEMENT_TYPE.GROUP) {
-          return expandGroup(item);
-        }
-        return item;
-      }).flat(1)
-    }];
-  }
-  return content.type === _constants2.ELEMENT_TYPE.GROUP ? content.children : [content];
-};
-const mergeChanges = changes => {
-  if (!Array.isArray(changes) || changes.length === 0) return changes;
-  let value = [];
-  let i = 0;
-  while (i < changes.length) {
-    const change = changes[i];
-    const lastChange = value[value.length - 1];
-    if (change && lastChange && change[_constants.REBASE_MARK_KEY.MODIFY_TYPE] === _constants.MODIFY_TYPE.ADD && lastChange[_constants.REBASE_MARK_KEY.MODIFY_TYPE] === _constants.MODIFY_TYPE.DELETE) {
-      value = value.slice(0, value.length - 1);
-      lastChange[_constants.REBASE_MARK_KEY.MODIFY_TYPE] && delete lastChange[_constants.REBASE_MARK_KEY.MODIFY_TYPE];
-      change[_constants.REBASE_MARK_KEY.MODIFY_TYPE] && delete change[_constants.REBASE_MARK_KEY.MODIFY_TYPE];
-      value.push({
-        id: change.id.endsWith('_group') ? change.id : change.id + '_group',
-        type: _constants2.ELEMENT_TYPE.GROUP,
-        [_constants.REBASE_MARK_KEY.MODIFY_TYPE]: _constants.MODIFY_TYPE.MODIFY,
-        children: expandGroup(change),
-        [_constants.REBASE_MARK_KEY.OLD_ELEMENT]: {
-          id: lastChange.id.endsWith('_group') ? lastChange.id : lastChange.id + '_group',
-          type: _constants2.ELEMENT_TYPE.GROUP,
-          children: expandGroup(lastChange)
-        }
-      });
-    } else {
-      value.push(change);
-    }
-    i++;
-  }
-  return value;
-};
-const getChanges = function (masterContent, revisionContent) {
-  let childrenName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children';
-  const {
-    map: masterContentMap,
-    ids: masterIds
-  } = (0, _diff.generateIdMapAndIds)(masterContent[childrenName]);
-  const {
-    map: currentContentMap,
-    ids: currentIds
-  } = (0, _diff.generateIdMapAndIds)(revisionContent[childrenName]);
-  const idDiffs = (0, _diff.getIdDiffs)(masterIds, currentIds);
-  let content = [];
-  idDiffs.forEach(idDiff => {
-    const {
-      value,
-      added,
-      removed
-    } = idDiff;
-    if (added) {
-      // merge consecutive identical operations
-      content.push({
-        id: value[0] + '_group',
-        type: _constants2.ELEMENT_TYPE.GROUP,
-        [_constants.REBASE_MARK_KEY.MODIFY_TYPE]: _constants.MODIFY_TYPE.ADD,
-        children: value.map(item => currentContentMap[item])
-      });
-    } else if (removed) {
-      // merge consecutive identical operations
-      content.push({
-        id: value[0] + '_group',
-        type: _constants2.ELEMENT_TYPE.GROUP,
-        [_constants.REBASE_MARK_KEY.MODIFY_TYPE]: _constants.MODIFY_TYPE.DELETE,
-        children: value.map(item => masterContentMap[item])
-      });
-    } else {
-      value.forEach(elementId => {
-        if (_objectUtils.default.isSameObject(masterContentMap[elementId], currentContentMap[elementId])) {
-          content.push(currentContentMap[elementId]);
-        } else {
-          const oldElement = masterContentMap[elementId];
-          const currentElement = currentContentMap[elementId];
-          let newElement = {
-            ...currentElement,
-            [_constants.REBASE_MARK_KEY.MODIFY_TYPE]: _constants.MODIFY_TYPE.MODIFY,
-            [_constants.REBASE_MARK_KEY.OLD_ELEMENT]: oldElement
-          };
-          if (currentElement.type === oldElement.type) {
-            const elementType = currentElement.type;
-            if ([_constants2.ELEMENT_TYPE.UNORDERED_LIST, _constants2.ELEMENT_TYPE.ORDERED_LIST].includes(elementType)) {
-              const listContent = getChanges(oldElement, currentElement);
-              newElement[_constants.REBASE_MARK_KEY.MODIFY_TYPE] = _constants.MODIFY_TYPE.CHILDREN_MODIFY;
-              newElement['children'] = listContent;
-            }
-          }
-          content.push(newElement);
-        }
-      });
-    }
-  });
-  return mergeChanges(content);
-};
-const getMergeElement = (diffElement, baseElement) => {
-  const modifyType = diffElement[_constants.REBASE_MARK_KEY.MODIFY_TYPE];
-  const newElement = {
-    ...diffElement
-  };
-  newElement[_constants.REBASE_MARK_KEY.MODIFY_TYPE] && delete newElement[_constants.REBASE_MARK_KEY.MODIFY_TYPE];
-
-  // revision does not have this element, master has this element
-  if (modifyType === _constants.MODIFY_TYPE.DELETE) {
-    // base content does not have this element, indicating that it is newly added by master and needs to be retained, and will not be counted as a conflict.
-    if (!baseElement) return expandGroup(newElement);
-
-    // base content has this element, master modified it, indicating that revision deleted it, and the user manually selected the conflict
-    if (!_objectUtils.default.isSameObject(baseElement, diffElement, [_constants.REBASE_MARK_KEY.MODIFY_TYPE])) {
-      newElement[_constants.REBASE_MARK_KEY.REBASE_TYPE] = _constants.REBASE_TYPE.MODIFY_DELETE;
-      return [newElement];
-    }
-
-    // base content has this element, but master has not modified it. It means that revision has deleted it and the program has deleted it. The conflict will not be counted.
-    return [];
-  }
-
-  // revision has this element, master does not have this element
-  if (modifyType === _constants.MODIFY_TYPE.ADD) {
-    // base content does not have this element, indicating that it is newly added by revision and needs to be retained, and will not be counted as a conflict.
-    if (!baseElement) return expandGroup(newElement);
-
-    // master deleted it, revision modified it, and the user manually selected the conflict
-    if (!_objectUtils.default.isSameObject(baseElement, diffElement, [_constants.REBASE_MARK_KEY.MODIFY_TYPE])) {
-      newElement[_constants.REBASE_MARK_KEY.REBASE_TYPE] = _constants.REBASE_TYPE.DELETE_MODIFY;
-      return [newElement];
-    }
-
-    // master deleted it, revision did not modify it, the program deleted it, and the conflict is not counted.
-    return [];
-  }
-
-  // Elements that differ between revision and master
-  if (modifyType === _constants.MODIFY_TYPE.MODIFY) {
-    const masterElement = {
-      ...diffElement[_constants.REBASE_MARK_KEY.OLD_ELEMENT]
-    };
-    delete newElement[_constants.REBASE_MARK_KEY.OLD_ELEMENT];
-
-    // revision and master both add a new element, but the content is different. ===》 At present, this situation does not exist, it only exists in the theoretical stage.
-    if (!baseElement) {
-      return [{
-        ...(0, _helpers.replaceNodeId)(masterElement),
-        [_constants.REBASE_MARK_KEY.REBASE_TYPE]: _constants.REBASE_TYPE.MODIFY_MODIFY,
-        [_constants.REBASE_MARK_KEY.OLD_ELEMENT]: masterElement,
-        [_constants.REBASE_MARK_KEY.ORIGIN]: _constants.REBASE_ORIGIN.OTHER
-      }, {
-        ...newElement,
-        [_constants.REBASE_MARK_KEY.REBASE_TYPE]: _constants.REBASE_TYPE.MODIFY_MODIFY,
-        [_constants.REBASE_MARK_KEY.ORIGIN]: _constants.REBASE_ORIGIN.MY
-      }];
-    }
-
-    // master is the same as base, indicating that revision has modified the content
-    if (_objectUtils.default.isSameObject(masterElement, baseElement)) return [newElement];
-
-    // revision is the same as base, indicating that master has modified the content
-    if (_objectUtils.default.isSameObject(newElement, baseElement)) return [masterElement];
-
-    // They are all different. Revision and master were modified at the same time. If there is a conflict, the conflict needs to be resolved manually.
-    return [{
-      ...(0, _helpers.replaceNodeId)(masterElement),
-      [_constants.REBASE_MARK_KEY.REBASE_TYPE]: _constants.REBASE_TYPE.MODIFY_MODIFY,
-      [_constants.REBASE_MARK_KEY.OLD_ELEMENT]: masterElement,
-      [_constants.REBASE_MARK_KEY.ORIGIN]: _constants.REBASE_ORIGIN.OTHER
-    }, {
-      ...newElement,
-      [_constants.REBASE_MARK_KEY.REBASE_TYPE]: _constants.REBASE_TYPE.MODIFY_MODIFY,
-      [_constants.REBASE_MARK_KEY.ORIGIN]: _constants.REBASE_ORIGIN.MY
-    }];
-  }
-  if (modifyType === _constants.MODIFY_TYPE.CHILDREN_MODIFY) {
-    const masterElement = {
-      ...diffElement[_constants.REBASE_MARK_KEY.OLD_ELEMENT]
-    };
-    delete newElement[_constants.REBASE_MARK_KEY.OLD_ELEMENT];
-
-    // revision and master both add a new element, but the content is different. ===》 At present, this situation does not exist, it only exists in the theoretical stage.
-    if (!baseElement) {
-      return [{
-        ...(0, _helpers.replaceNodeId)(masterElement),
-        [_constants.REBASE_MARK_KEY.REBASE_TYPE]: _constants.REBASE_TYPE.MODIFY_MODIFY,
-        [_constants.REBASE_MARK_KEY.OLD_ELEMENT]: masterElement,
-        [_constants.REBASE_MARK_KEY.ORIGIN]: _constants.REBASE_ORIGIN.OTHER
-      }, {
-        ...newElement,
-        [_constants.REBASE_MARK_KEY.REBASE_TYPE]: _constants.REBASE_TYPE.MODIFY_MODIFY,
-        [_constants.REBASE_MARK_KEY.ORIGIN]: _constants.REBASE_ORIGIN.MY
-      }];
-    }
-    if (_objectUtils.default.isSameObject(masterElement, baseElement)) return expandGroup(newElement);
-    if (_objectUtils.default.isSameObject(newElement, baseElement)) return [masterElement];
-    if (_objectUtils.default.isSameObject(masterElement, newElement, ['type'])) {
-      if (_objectUtils.default.isSameObject(masterElement, baseElement, ['type'])) return expandGroup(newElement);
-      if (_objectUtils.default.isSameObject(newElement, baseElement, ['type'])) return [masterElement];
-    }
-
-    // The content of the subnode has changed and needs to be solved manually.
-    const childrenContent = getMergeContent(baseElement, diffElement.children);
-    return [{
-      ...newElement,
-      children: childrenContent
-    }];
-  }
-  newElement[_constants.REBASE_MARK_KEY.OLD_ELEMENT] && delete newElement[_constants.REBASE_MARK_KEY.OLD_ELEMENT];
-  return expandGroup(newElement);
-};
-const getMergeContent = function (baseContent, diffChanges) {
-  let childrenName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children';
-  const {
-    map: diffChangesContentMap,
-    ids: diffChangesContentIds
-  } = (0, _diff.generateIdMapAndIds)(diffChanges);
-  const {
-    map: baseContentMap
-  } = (0, _diff.generateIdMapAndIds)(baseContent[childrenName]);
-  let content = [];
-  diffChangesContentIds.forEach(elementId => {
-    const diffElement = diffChangesContentMap[elementId];
-    const baseElement = baseContentMap[elementId];
-    const mergeElements = getMergeElement(diffElement, baseElement);
-    content.push(...mergeElements);
-  });
-  return content;
-};
-const canMerge = (content, reference) => {
-  if (!Array.isArray(reference) || reference.length === 0) return true;
-  const {
-    map: referenceMap
-  } = (0, _diff.generateIdMapAndIds)(reference);
-  let flag = true;
-  for (let i = 0; i < content.length; i++) {
-    const element = content[i];
-    let referenceElement = referenceMap[element.id];
-    if (!referenceElement) {
-      flag = false;
-      break;
-    }
-    flag = canMerge(element.children, referenceElement.children);
-    if (flag === false) {
-      break;
-    }
-  }
-  return flag;
-};
-exports.canMerge = canMerge;
-const updateContentToFormatVersion4 = content => {
-  if (content.format_version === 4) return;
-  content.format_version = 4;
-  content.elements = content.children;
-  delete content['children'];
-};
-
-// Only the data in baseContent needs to be formatted.
-// The data in the other two does not need to be formatted. They are directly obtained from sdoc-server.
-const getRebase = (masterContent, baseContent, revisionContent) => {
-  updateContentToFormatVersion4(baseContent);
-
-  // master no changes, merged directly
-  if (masterContent.version === baseContent.version) {
-    return {
-      canMerge: true,
-      isNeedReplaceMaster: true,
-      value: revisionContent
-    };
-  }
-
-  // The revision content has not changed
-  if (baseContent.version === revisionContent.version) {
-    return {
-      canMerge: true,
-      isNeedReplaceMaster: false,
-      value: masterContent
-    };
-  }
-  const diffChanges = getChanges(masterContent, revisionContent, 'elements');
-  const content = getMergeContent(baseContent, diffChanges, 'elements');
-  return {
-    canMerge: canMerge(content, revisionContent.elements),
-    isNeedReplaceMaster: true,
-    value: {
-      ...revisionContent,
-      elements: content,
-      version: Math.max(masterContent.version, revisionContent.version) + 1
-    }
-  };
-};
-exports.getRebase = getRebase;

package/dist/components/error-boundary/error-page.css

@@ -1,16 +0,0 @@
-.error-page {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-}
-
-.error-page .error-tip {
-  color: red;
-}
-
-.error-page .error-button {
-  margin-top: 20px;
-}

package/dist/components/error-boundary/error-page.js

@@ -1,36 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactI18next = require("react-i18next");
-var _reactstrap = require("reactstrap");
-var _basicSdk = require("../../basic-sdk");
-require("./error-page.css");
-function ErrorPage(_ref) {
-  let {
-    t
-  } = _ref;
-  const normalizeSdoc = (0, _react.useCallback)(async () => {
-    const res = await _basicSdk.context.normalizeSdocContent();
-    const {
-      success
-    } = res.data;
-    if (success) {
-      // eslint-disable-next-line no-restricted-globals
-      location.reload(true);
-    }
-  }, []);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "error-page"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "error-tip"
-  }, t('Sdoc_error_tip')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
-    className: "error-button",
-    onClick: () => normalizeSdoc()
-  }, t('Repair')));
-}
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(ErrorPage);

package/dist/components/error-boundary/index.js

@@ -1,33 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _errorPage = _interopRequireDefault(require("./error-page"));
-class ErrorBoundary extends _react.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      hasError: false
-    };
-  }
-  static getDerivedStateFromError(error) {
-    return {
-      hasError: true
-    };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.log(error, errorInfo);
-  }
-  render() {
-    if (this.state.hasError) {
-      return /*#__PURE__*/_react.default.createElement(_errorPage.default, null);
-    }
-    return this.props.children;
-  }
-}
-exports.default = ErrorBoundary;

package/dist/components/modal-header/index.css

@@ -1,18 +0,0 @@
-.sdoc-add-link-close-icon {
-  border-radius: 3px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 28px;
-  width: 28px;
-}
-
-.sdoc-add-link-close-icon .sdocfont {
-  font-size: 18px;
-  font-weight: 600;
-  color: #666;
-}
-
-.sdoc-add-link-close-icon:hover {
-  background-color: #efefef;
-}

package/dist/components/modal-header/index.js

@@ -1,29 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = SdocModalHeader;
-var _react = _interopRequireDefault(require("react"));
-var _reactstrap = require("reactstrap");
-require("./index.css");
-function SdocModalHeader(_ref) {
-  let {
-    toggle,
-    children
-  } = _ref;
-  let close = null;
-  if (toggle) {
-    close = /*#__PURE__*/_react.default.createElement("span", {
-      className: "sdoc-add-link-close-icon",
-      onClick: toggle
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "sdocfont sdoc-sm-close",
-      "aria-hidden": "true"
-    }));
-  }
-  return /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, {
-    close: close
-  }, children);
-}

package/dist/components/modal-portal/index.js

@@ -1,26 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-const modalRoot = document.getElementById('modal-wrapper');
-class ModalPortal extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.el = document.createElement('div');
-  }
-  componentDidMount() {
-    modalRoot.appendChild(this.el);
-  }
-  componentWillUnmount() {
-    modalRoot.removeChild(this.el);
-  }
-  render() {
-    return /*#__PURE__*/_reactDom.default.createPortal(this.props.children, this.el);
-  }
-}
-var _default = exports.default = ModalPortal;

package/dist/components/tip-dialog/index.css

@@ -1,48 +0,0 @@
-.sdoc-tip-dialog .highlight-bg-color {
-  background-color: #FF8000;
-  border-color: #FF8000;
-}
-
-.sdoc-tip-dialog .sdoc-tip-dialog-custom-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 46px;
-  padding-bottom: 40px;
-}
-
-.sdoc-tip-dialog .sdoc-tip-dialog-custom-container .sdoc-tip-img-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 140px;
-  height: 140px;
-  overflow: hidden;
-}
-
-.sdoc-tip-dialog .sdoc-tip-dialog-custom-container .sdoc-tip-content {
-  width: 100%;
-  padding: 10px 16px 64px 16px;
-  text-align: center;
-}
-
-.sdoc-tip-dialog .sdoc-tip-dialog-custom-container .sdoc-tip-operation-btn {
-  min-width: 140px;
-}
-
-.sdoc-tip-dialog .sdoc-tip-dialog-custom-container.publishing {
-  padding: 2rem;
-  height: 180px;
-  justify-content: center;
-}
-
-.sdoc-tip-dialog .sdoc-tip-dialog-custom-container.publishing .common-loading-tip {
-  width: 30px;
-  height: 30px;
-  border-width: 4px;
-}
-
-.sdoc-tip-dialog .sdoc-tip-dialog-custom-container.publishing .sdoc-tip-content {
-  margin-top: 8px;
-  padding: 0;
-}