@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/extension/commons/wiki-file-insert-dialog/index.js

@@ -0,0 +1,274 @@
+"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 _reactI18next = require("react-i18next");
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _constants = require("../../../constants");
+var _commonUtils = require("../../../utils/common-utils");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _localStorageUtils = _interopRequireDefault(require("../../../utils/local-storage-utils"));
+var _helpers = require("../../plugins/sdoc-link/helpers");
+var _helpers2 = require("../../plugins/wiki-link/helpers");
+require("./style.css");
+const WikiFileLinkInsertDialog = _ref => {
+  let {
+    editor,
+    element,
+    closeDialog
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const eventBus = _eventBus.default.getInstance();
+  const fileLinkInsertRef = (0, _react.useRef)(null);
+  const historyFileWrapperRef = (0, _react.useRef)(document.querySelector('.sdoc-history-files-wrapper'));
+  const [files, setFiles] = (0, _react.useState)([]);
+  const [position, setPosition] = (0, _react.useState)({});
+  const [newFileName, setNewFileName] = (0, _react.useState)('');
+  const [header, setHeader] = (0, _react.useState)(t('Link_to_page'));
+  const [hiddenMoreMenu, setHiddenMoreMenu] = (0, _react.useState)(false);
+  const deleteInputAndInsertText = (0, _react.useCallback)(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return (0, _helpers.insertTextWhenRemoveFileNameCollector)(editor, element, ...args);
+  }, [editor, element]);
+  const getPosition = (0, _react.useCallback)(() => {
+    queueMicrotask(() => {
+      const {
+        selection
+      } = editor;
+      const nodeEntry = _slate.Editor.node(editor, selection);
+      const domNode = _slateReact.ReactEditor.toDOMNode(editor, nodeEntry[0]);
+      if (domNode) {
+        const topGap = 20;
+        const leftGap = 16;
+        const outlineWidth = 300;
+        const {
+          top: domNodeTop,
+          left: domNodeLeft
+        } = domNode.getBoundingClientRect();
+        let popoverTop = domNodeTop - topGap;
+        let popoverLeft = domNodeLeft - leftGap - outlineWidth;
+        const {
+          height
+        } = fileLinkInsertRef.current.getBoundingClientRect();
+        const popoverBottomY = popoverTop + height;
+        const viewportHeight = window.innerHeight;
+        if (popoverBottomY > viewportHeight) {
+          // 8px for the gap between the popover and the bottom of the viewport
+          const counterTopGap = 8;
+          popoverTop = popoverTop - height - topGap - counterTopGap;
+        }
+        setPosition({
+          top: popoverTop,
+          left: popoverLeft
+        });
+      }
+    });
+  }, [editor]);
+  const onClick = (0, _react.useCallback)(e => {
+    var _historyFileWrapperRe, _historyFileWrapperRe2;
+    const isClickInside = (_historyFileWrapperRe = historyFileWrapperRef.current) === null || _historyFileWrapperRe === void 0 ? void 0 : (_historyFileWrapperRe2 = _historyFileWrapperRe.contains) === null || _historyFileWrapperRe2 === void 0 ? void 0 : _historyFileWrapperRe2.call(_historyFileWrapperRe, e.target);
+    if (isClickInside) return;
+
+    // Click on the insertion position without closing
+    const insertCollectorEl = document.querySelector('.sdoc-file-name-insert-collector');
+    if (insertCollectorEl && insertCollectorEl.className === e.target.className) return;
+    deleteInputAndInsertText();
+    closeDialog();
+  }, [closeDialog, deleteInputAndInsertText]);
+  const onScroll = (0, _lodash.default)(() => {
+    getPosition();
+  }, 100);
+  const getHistoryFiles = (0, _react.useCallback)(isCalculatedByFiles => {
+    let files = (0, _commonUtils.getLocalStorageFiles)(_localStorageUtils.default.getItem('wiki-recent-files') || []);
+    if (isCalculatedByFiles) {
+      const newFiles = (0, _commonUtils.getMaximumCapacity)(files);
+      // Can accommodate all without showing more operations
+      if (files.length <= newFiles.length) {
+        setHiddenMoreMenu(true);
+      }
+      files = newFiles;
+    }
+    setFiles(files);
+  }, []);
+  (0, _react.useEffect)(() => {
+    fileLinkInsertRef.current['isFirstMount'] = true;
+    getHistoryFiles(true);
+    getPosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onKeydown = (0, _react.useCallback)(e => {
+    const {
+      key
+    } = e;
+    switch (key) {
+      case 'Escape':
+        deleteInputAndInsertText();
+        closeDialog();
+        break;
+      case 'ArrowRight':
+      case 'ArrowLeft':
+        deleteInputAndInsertText();
+        closeDialog();
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        deleteInputAndInsertText();
+        closeDialog();
+        break;
+      default:
+        break;
+    }
+  }, [closeDialog, deleteInputAndInsertText]);
+  (0, _react.useEffect)(() => {
+    const sdocScrollContainer = document.getElementById('sdoc-scroll-container');
+    document.addEventListener('click', onClick);
+    document.addEventListener('keydown', onKeydown);
+    sdocScrollContainer.addEventListener('scroll', onScroll);
+    const unsubscribeCloseDialog = eventBus.subscribe(_constants.INTERNAL_EVENT.CLOSE_FILE_INSET_DIALOG, closeDialog);
+    return () => {
+      sdocScrollContainer.removeEventListener('scroll', onScroll);
+      document.removeEventListener('click', onClick);
+      document.removeEventListener('keydown', onKeydown);
+      unsubscribeCloseDialog();
+    };
+  }, [closeDialog, editor, eventBus, files, getPosition, onClick, onKeydown, onScroll]);
+  const onSearch = (0, _react.useCallback)(searchText => {
+    if (searchText.trim().length === 0) {
+      getHistoryFiles();
+      setHiddenMoreMenu(true);
+      setHeader(t('Link_to_page'));
+      setNewFileName('');
+      getPosition();
+      return;
+    }
+    const {
+      navConfig
+    } = window.wiki.config;
+    const {
+      pages
+    } = navConfig;
+    const newFiles = [];
+    pages.forEach(page => {
+      if (page.name.includes(searchText.trim())) {
+        newFiles.push(page);
+      }
+    });
+    // No results found
+    if (newFiles.length === 0) {
+      setHeader(t('No_page_results'));
+      setNewFileName(searchText);
+    } else {
+      setHeader(t('Link_to_page'));
+      setNewFileName('');
+    }
+    setHiddenMoreMenu(true);
+    setFiles(newFiles);
+    getPosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!(element !== null && element !== void 0 && element.children)) return;
+    // No search on first load
+    if (fileLinkInsertRef.current['isFirstMount']) {
+      fileLinkInsertRef.current['isFirstMount'] = false;
+      return;
+    }
+    const searchText = _slate.Node.string(element);
+    onSearch(searchText);
+  }, [element, onSearch]);
+  const onSelect = (0, _react.useCallback)(fileInfo => {
+    const {
+      name,
+      wikiRepoId,
+      pageId,
+      icon,
+      isDir
+    } = fileInfo;
+    (0, _helpers.removeTempInput)(editor, element);
+    closeDialog();
+    (0, _helpers2.insertWikiPageLink)(editor, name, wikiRepoId, pageId, icon, isDir);
+  }, [closeDialog, editor, element]);
+  const onShowMoreWiki = (0, _react.useCallback)(e => {
+    e.stopPropagation();
+    const recentFiles = (0, _commonUtils.getLocalStorageFiles)(_localStorageUtils.default.getItem('wiki-recent-files') || []);
+    setFiles(recentFiles);
+    setHiddenMoreMenu(true);
+  }, []);
+  const onCreateFile = (0, _react.useCallback)(e => {
+    e.stopPropagation();
+    (0, _helpers.removeTempInput)(editor, element);
+    const eventBus = _eventBus.default.getInstance();
+    const createName = newFileName.trim() || t('New_page');
+    eventBus.dispatch(_constants.INTERNAL_EVENT.CREATE_WIKI_PAGE, {
+      newFileName: createName
+    });
+  }, [editor, element, newFileName, t]);
+  const createFileTipDefault = (0, _react.useMemo)(() => {
+    return 'New_page';
+  }, []);
+  const createFileName = (0, _react.useMemo)(() => {
+    return `"${newFileName}" ${t('Page')}`;
+  }, [newFileName, t]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: fileLinkInsertRef,
+    className: (0, _classnames.default)('wiki-history-files-content popover'),
+    style: {
+      ...position,
+      position: 'absolute',
+      opacity: Object.keys(position).length ? 1 : 0
+    }
+  }, header.length !== 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "wiki-history-files-header"
+  }, header), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sdoc-history-files', {
+      'no-header': header.length === 0
+    })
+  }, files.map(item => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: item.doc_uuid,
+      className: (0, _classnames.default)('sdoc-history-files-item', {
+        'files-item-has-dir': item === null || item === void 0 ? void 0 : item.path
+      }),
+      onClick: () => {
+        onSelect(item);
+      }
+    }, (item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/_react.default.createElement("span", {
+      className: "file-item-emoticons"
+    }, item.icon), !(item !== null && item !== void 0 && item.icon) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item !== null && item !== void 0 && item.isDir ? /*#__PURE__*/_react.default.createElement("span", {
+      className: "file-item-icon sf3-font sf3-font-files2"
+    }) : /*#__PURE__*/_react.default.createElement("span", {
+      className: "file-item-icon sf3-font sf3-font-file"
+    })), /*#__PURE__*/_react.default.createElement("span", {
+      className: "file-item-name-wrapper"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "file-item-name"
+    }, item.name), (item === null || item === void 0 ? void 0 : item.path) && /*#__PURE__*/_react.default.createElement("span", {
+      className: "name-dir"
+    }, item.path)));
+  }), !hiddenMoreMenu && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-history-files-item",
+    onClick: onShowMoreWiki
+  }, "...", t('More'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-history-files-add",
+    onClick: onCreateFile
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-append"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "new-file-name"
+  }, newFileName ? t('Create_file_name_sdoc', {
+    file_name_sdoc: createFileName
+  }) : t(createFileTipDefault))));
+};
+var _default = exports.default = WikiFileLinkInsertDialog;

package/dist/basic-sdk/extension/commons/wiki-file-insert-dialog/style.css

@@ -0,0 +1,116 @@
+.wiki-history-files-content {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  width: 400px;
+  max-width: 400px;
+  max-height: 350px;
+  /* The same as hierarchy of comment drawer  */
+  z-index: 103;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 4px 8px 3px rgba(0, 0, 0, .15);
+}
+
+.wiki-history-files-content .wiki-history-files-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  margin-top: 8px;
+  padding: 0px 16px;
+  height: 32px;
+  width: 100%;
+  color: #999999;
+  font-size: 14px;
+  user-select: none;
+  cursor: default;
+}
+
+.wiki-history-files-content .sdoc-history-files {
+  flex-grow: 1;
+  overflow-y: auto;
+  cursor: pointer;
+}
+
+.wiki-history-files-content .no-header {
+  margin-top: 8px;
+  width: 100%;
+}
+
+.wiki-history-files-content .sdoc-history-files .sdoc-history-files-item {
+  padding: 6px 16px;
+  height: 32px;
+  font-size: 14px;
+  display: flex;
+  align-items: flex-start;
+}
+
+.wiki-history-files-content .sdoc-history-files .sdoc-history-files-item .file-item-icon {
+  font-size: 16px;
+  margin-right: 8px;
+  color: #666666;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.wiki-history-files-content .sdoc-history-files .sdoc-history-files-item .file-item-name {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.wiki-history-files-content .sdoc-history-files .sdoc-history-files-item:hover {
+  background-color: #f5f5f5;
+}
+
+.wiki-history-files-content .sdoc-history-files-add {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 0px 16px;
+  height: 32px;
+  width: 100%;
+  border-top: 1px solid #e9ecef;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.wiki-history-files-content .sdoc-history-files-add :first-child {
+  color: #444444;
+  margin-right: 10px;
+}
+
+.wiki-history-files-content .sdoc-history-files-add .new-file-name {
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.wiki-history-files-content .sdoc-history-files .sdoc-history-files-item.files-item-has-dir {
+  height: 51px;
+}
+
+.wiki-history-files-content .sdoc-history-files .sdoc-history-files-item .file-item-emoticons {
+  font-size: 14px;
+  margin-right: 8px;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.wiki-history-files-content .sdoc-history-files .sdoc-history-files-item .file-item-name-wrapper {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.wiki-history-files-content .sdoc-history-files .sdoc-history-files-item .file-item-name-wrapper .name-dir {
+  color: #666;
+  font-size: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

package/dist/basic-sdk/extension/constants/color.js

@@ -0,0 +1,282 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.STANDARD_COLORS = exports.RECENT_USED_TABLE_CELL_BACKGROUND_COLORS_KEY = exports.RECENT_USED_HIGHLIGHT_COLORS_KEY = exports.RECENT_USED_FONT_COLORS_KEY = exports.DEFAULT_RECENT_USED_LIST = exports.DEFAULT_LAST_USED_TABLE_CELL_BACKGROUND_COLOR = exports.DEFAULT_LAST_USED_HIGHLIGHT_COLOR = exports.DEFAULT_LAST_USED_FONT_COLOR = exports.DEFAULT_FONT_COLOR = exports.DEFAULT_COLORS = void 0;
+const DEFAULT_COLORS = exports.DEFAULT_COLORS = [{
+  value: '#FFFFFF',
+  name: 'White'
+}, {
+  value: '#000000',
+  name: 'Black'
+}, {
+  value: '#485368',
+  name: 'Blue_grey'
+}, {
+  value: '#2972F4',
+  name: 'Blue'
+}, {
+  value: '#00A3F5',
+  name: 'Sky_blue'
+}, {
+  value: '#319B62',
+  name: 'Green'
+}, {
+  value: '#DE3C36',
+  name: 'Red'
+}, {
+  value: '#F88825',
+  name: 'Orange'
+}, {
+  value: '#F5C400',
+  name: 'Yellow'
+}, {
+  value: '#9A38D7',
+  name: 'Purple'
+}, {
+  value: '#F2F2F2',
+  name: 'Light_grey_x',
+  index: 1
+}, {
+  value: '#7F7F7F',
+  name: 'Dark_grey_x',
+  index: 1
+}, {
+  value: '#F3F5F7',
+  name: 'Light_blue_grey_x',
+  index: 1
+}, {
+  value: '#E5EFFF',
+  name: 'Light_blue_x',
+  index: 1
+}, {
+  value: '#E5F6FF',
+  name: 'Light_sky_blue_x',
+  index: 1
+}, {
+  value: '#EAFAF1',
+  name: 'Light_green_x',
+  index: 1
+}, {
+  value: '#FFE9E8',
+  name: 'Light_red_x',
+  index: 1
+}, {
+  value: '#FFF3EB',
+  name: 'Light_orange_x',
+  index: 1
+}, {
+  value: '#FFF9E3',
+  name: 'Light_yellow_x',
+  index: 1
+}, {
+  value: '#FDEBFF',
+  name: 'Light_purple_x',
+  index: 1
+}, {
+  value: '#D8D8D8',
+  name: 'Light_grey_x',
+  index: 2
+}, {
+  value: '#595959',
+  name: 'Dark_grey_x',
+  index: 2
+}, {
+  value: '#C5CAD3',
+  name: 'Light_blue_grey_x',
+  index: 2
+}, {
+  value: '#C7DCFF',
+  name: 'Light_blue_x',
+  index: 2
+}, {
+  value: '#C7ECFF',
+  name: 'Light_sky_blue_x',
+  index: 2
+}, {
+  value: '#C3EAD5',
+  name: 'Light_green_x',
+  index: 2
+}, {
+  value: '#FFC9C7',
+  name: 'Light_red_x',
+  index: 2
+}, {
+  value: '#FFDCC4',
+  name: 'Light_orange_x',
+  index: 2
+}, {
+  value: '#FFEEAD',
+  name: 'Light_yellow_x',
+  index: 2
+}, {
+  value: '#F2C7FF',
+  name: 'Light_purple_x',
+  index: 2
+}, {
+  value: '#BFBFBF',
+  name: 'Light_grey_x',
+  index: 3
+}, {
+  value: '#3F3F3F',
+  name: 'Dark_grey_x',
+  index: 3
+}, {
+  value: '#808B9E',
+  name: 'Light_blue_grey_x',
+  index: 3
+}, {
+  value: '#99BEFF',
+  name: 'Light_blue_x',
+  index: 3
+}, {
+  value: '#99DDFF',
+  name: 'Light_sky_blue_x',
+  index: 3
+}, {
+  value: '#98D7B6',
+  name: 'Light_green_x',
+  index: 3
+}, {
+  value: '#FF9C99',
+  name: 'Light_red_x',
+  index: 3
+}, {
+  value: '#FFBA84',
+  name: 'Light_orange_x',
+  index: 3
+}, {
+  value: '#FFE270',
+  name: 'Light_yellow_x',
+  index: 3
+}, {
+  value: '#D58EFF',
+  name: 'Light_purple_x',
+  index: 3
+}, {
+  value: '#A5A5A5',
+  name: 'Light_grey_x',
+  index: 4
+}, {
+  value: '#262626',
+  name: 'Dark_grey_x',
+  index: 4
+}, {
+  value: '#353B45',
+  name: 'Dark_blue_grey_x',
+  index: 1
+}, {
+  value: '#1450B8',
+  name: 'Dark_blue_x',
+  index: 1
+}, {
+  value: '#1274A5',
+  name: 'Dark_sky_blue_x',
+  index: 1
+}, {
+  value: '#277C4F',
+  name: 'Dark_green_x',
+  index: 1
+}, {
+  value: '#9E1E1A',
+  name: 'Dark_red_x',
+  index: 1
+}, {
+  value: '#B86014',
+  name: 'Dark_orange_x',
+  index: 1
+}, {
+  value: '#A38200',
+  name: 'Dark_yellow_x',
+  index: 1
+}, {
+  value: '#5E2281',
+  name: 'Dark_purple_x',
+  index: 1
+}, {
+  value: '#939393',
+  name: 'Light_grey_x',
+  index: 5
+}, {
+  value: '#0D0D0D',
+  name: 'Dark_grey_x',
+  index: 5
+}, {
+  value: '#24272E',
+  name: 'Dark_blue_grey_x',
+  index: 2
+}, {
+  value: '#0C306E',
+  name: 'Dark_blue_x',
+  index: 2
+}, {
+  value: '#0A415C',
+  name: 'Dark_sky_blue_x',
+  index: 2
+}, {
+  value: '#184E32',
+  name: 'Dark_green_x',
+  index: 2
+}, {
+  value: '#58110E',
+  name: 'Dark_red_x',
+  index: 2
+}, {
+  value: '#5C300A',
+  name: 'Dark_orange_x',
+  index: 2
+}, {
+  value: '#665200',
+  name: 'Dark_yellow_x',
+  index: 2
+}, {
+  value: '#3b1551',
+  name: 'Dark_purple_x',
+  index: 2
+}];
+const STANDARD_COLORS = exports.STANDARD_COLORS = [{
+  value: '#C00000',
+  name: 'Standard_dark_red'
+}, {
+  value: '#FF0000',
+  name: 'Standard_red'
+}, {
+  value: '#FFC000',
+  name: 'Standard_orange'
+}, {
+  value: '#FFFF00',
+  name: 'Standard_yellow'
+}, {
+  value: '#92D050',
+  name: 'Standard_light_green'
+}, {
+  value: '#00B050',
+  name: 'Standard_green'
+}, {
+  value: '#00B0F0',
+  name: 'Standard_light_blue'
+}, {
+  value: '#0070C0',
+  name: 'Standard_blue'
+}, {
+  value: '#002060',
+  name: 'Standard_dark_blue'
+}, {
+  value: '#7030A0',
+  name: 'Standard_purple'
+}];
+
+// Initialize the most recently used colors
+const DEFAULT_RECENT_USED_LIST = exports.DEFAULT_RECENT_USED_LIST = new Array(10).fill('');
+const DEFAULT_FONT_COLOR = exports.DEFAULT_FONT_COLOR = '#333333';
+
+// default last used color
+const DEFAULT_LAST_USED_FONT_COLOR = exports.DEFAULT_LAST_USED_FONT_COLOR = '#FFFF00';
+const DEFAULT_LAST_USED_HIGHLIGHT_COLOR = exports.DEFAULT_LAST_USED_HIGHLIGHT_COLOR = '#FF0000';
+const DEFAULT_LAST_USED_TABLE_CELL_BACKGROUND_COLOR = exports.DEFAULT_LAST_USED_TABLE_CELL_BACKGROUND_COLOR = '#FF0000';
+
+// recent used colors key
+const RECENT_USED_HIGHLIGHT_COLORS_KEY = exports.RECENT_USED_HIGHLIGHT_COLORS_KEY = 'sdoc-recent-used-highlight-colors';
+const RECENT_USED_FONT_COLORS_KEY = exports.RECENT_USED_FONT_COLORS_KEY = 'sdoc-recent-used-font-colors';
+const RECENT_USED_TABLE_CELL_BACKGROUND_COLORS_KEY = exports.RECENT_USED_TABLE_CELL_BACKGROUND_COLORS_KEY = 'sdoc-recent-used-bg-colors';

package/dist/basic-sdk/extension/constants/diff-view.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DIFF_TYPE = exports.DELETED_STYLE = exports.ADDED_STYLE = void 0;
+const DIFF_TYPE = exports.DIFF_TYPE = {
+  ADD: 'add',
+  DELETE: 'delete',
+  MODIFY: 'modify',
+  COMMON: 'common'
+};
+const DELETED_STYLE = exports.DELETED_STYLE = {
+  computed_background_color: '#ffeef0',
+  color: 'rgb(165, 32, 21)'
+};
+const ADDED_STYLE = exports.ADDED_STYLE = {
+  computed_background_color: '#e6ffed',
+  color: 'rgb(137, 181, 66)'
+};