@seafile/sdoc-editor 0.1.82 → 0.1.84

package/dist/basic-sdk/outline/index.js

@@ -0,0 +1,75 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { withTranslation } from 'react-i18next';
+import { UncontrolledTooltip } from 'reactstrap';
+import OutlineItem from './outline-item';
+import './style.css';
+var getOutlineSetting = function getOutlineSetting(docUuid) {
+  var currentValue = localStorage.getItem(docUuid);
+  var config = currentValue ? JSON.parse(currentValue) : {};
+  var _config$outlineOpen = config.outlineOpen,
+    outlineOpen = _config$outlineOpen === void 0 ? false : _config$outlineOpen;
+  return outlineOpen;
+};
+var setOutlineSetting = function setOutlineSetting(docUuid, isShown) {
+  var currentValue = localStorage.getItem(docUuid);
+  var config = currentValue ? JSON.parse(currentValue) : {};
+  config['outlineOpen'] = isShown;
+  localStorage.setItem(docUuid, JSON.stringify(config));
+};
+var SDocOutline = function SDocOutline(_ref) {
+  var scrollLeft = _ref.scrollLeft,
+    docUuid = _ref.docUuid,
+    doc = _ref.doc,
+    t = _ref.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShown = _useState2[0],
+    setIsShown = _useState2[1];
+  useEffect(function () {
+    var outlineOpen = getOutlineSetting(docUuid);
+    setIsShown(outlineOpen);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var toggleShow = useCallback(function () {
+    setIsShown(!isShown);
+    setOutlineSetting(!isShown);
+  }, [isShown]);
+  var list = useMemo(function () {
+    return doc.filter(function (item) {
+      return ['header2', 'header3'].includes(item.type);
+    });
+  }, [doc]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-outline-wrapper",
+    style: {
+      left: -scrollLeft
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-outline"
+  }, isShown && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-outline-header"
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "sdoc-outline-header__title"
+  }, t('Outline')), /*#__PURE__*/React.createElement("span", {
+    className: "sdoc-outline-header__close sdocfont sdoc-cancel",
+    onClick: toggleShow
+  })), list.length === 0 && /*#__PURE__*/React.createElement("p", {
+    className: "mt-4 text-secondary"
+  }, t('Headings_you_add_to_the_document_will_appear_here')), list.length > 0 && /*#__PURE__*/React.createElement("ol", {
+    className: "sdoc-outline-list-container"
+  }, list.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(OutlineItem, {
+      key: index,
+      item: item
+    });
+  })))), !isShown && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    id: "sdoc-outline-menu",
+    className: "sdoc-outline-menu sdocfont sdoc-table-of-content",
+    onClick: toggleShow
+  }), /*#__PURE__*/React.createElement(UncontrolledTooltip, {
+    placement: "right",
+    target: "sdoc-outline-menu"
+  }, t('Outline'))));
+};
+export default withTranslation('sdoc-editor')(SDocOutline);

package/dist/basic-sdk/outline/outline-item.js

@@ -0,0 +1,52 @@
+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';
+var OutlineItem = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(OutlineItem, _React$PureComponent);
+  var _super = _createSuper(OutlineItem);
+  function OutlineItem(props) {
+    var _this;
+    _classCallCheck(this, OutlineItem);
+    _this = _super.call(this, props);
+    _this.onItemClick = function () {
+      var item = _this.props.item;
+      var id = item.id;
+      document.getElementById(id).scrollIntoView();
+    };
+    _this.onMouseOver = function () {
+      _this.setState({
+        isHighlighted: true
+      });
+    };
+    _this.onMouseOut = function () {
+      _this.setState({
+        isHighlighted: false
+      });
+    };
+    _this.state = {
+      isHighlighted: false
+    };
+    return _this;
+  }
+  _createClass(OutlineItem, [{
+    key: "render",
+    value: function render() {
+      var isHighlighted = this.state.isHighlighted;
+      var item = this.props.item;
+      var type = item.type,
+        children = item.children;
+      return /*#__PURE__*/React.createElement("li", {
+        className: "sdoc-outline-item ".concat(type === 'header3' ? 'pl-5' : '', " ").concat(isHighlighted ? 'active' : ''),
+        onClick: this.onItemClick,
+        onMouseOver: this.onMouseOver,
+        onMouseOut: this.onMouseOut
+      }, children.map(function (child) {
+        return child.text;
+      }).join(''));
+    }
+  }]);
+  return OutlineItem;
+}(React.PureComponent);
+export default OutlineItem;

package/dist/basic-sdk/outline/style.css

@@ -0,0 +1,83 @@
+.sdoc-outline-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  margin: 20px 30px 20px 16px;
+  min-height: 0;
+  z-index: 101;
+}
+
+.sdoc-outline {
+  flex: 1;
+  width: 220px; 
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  font-size: 14px;
+  position: relative;
+}
+
+.sdoc-outline-header  {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.25rem 0;
+  color: #999;
+  border-bottom: 1px solid #dbdbdb;
+}
+
+.sdoc-outline-header__title {
+  font-size: 14px;
+  line-height: 1.1;
+  margin: 0 !important;
+}
+
+.sdoc-outline-header__close {
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.sdoc-outline-header__close:hover {
+  color: #555;
+}
+
+.sdoc-outline-list-container {
+  list-style: none;
+  padding: 0.5rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.sdoc-outline-item {
+  padding: 4px 0;
+  cursor: pointer;
+}
+
+.sdoc-outline-item.active {
+  color: #ff8000;
+}
+
+.sdoc-outline-menu {
+  line-height: 1;
+  font-size: 14px;
+  color: #888;
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  background: #fff;
+  border-radius: 0 50% 50% 0;
+  box-shadow: 0 0 6px rgba(0,0,0, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 20px;
+  left: -16px;
+}
+
+.sdoc-outline-menu:hover {
+  color: #333;
+}

package/dist/basic-sdk/utils/event-handler.js

@@ -52,13 +52,21 @@ var EventProxy = /*#__PURE__*/_createClass(function EventProxy(_editor) {
     if (node) {
       _this.editor.tableOnKeyDown(event);
     }
+    var imageNode = getSelectedNodeByType(editor, ELEMENT_TYPE.IMAGE);
+    if (imageNode) {
+      _this.editor.imageOnKeyDown(event);
+    }
   };
   this.onCopy = function (event) {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
     // 处理数据
   };
-  this.onCut = function (event) {};
+  this.onCut = function (event) {
+    if (_this.editor.cut) {
+      _this.editor.cut(event);
+    }
+  };
   this.onPaste = function (event) {};
   this.editor = _editor;
 });

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

@@ -54,6 +54,9 @@ var ObjectUtils = /*#__PURE__*/function () {
   }]);
   return ObjectUtils;
 }();
+ObjectUtils.isObject = function (data) {
+  return ObjectUtils.getDataType(data) === 'Object';
+};
 ObjectUtils.hasProperty = function (obj, prop) {
   if (!obj) return false;
   return Object.prototype.hasOwnProperty.call(obj, prop);

package/dist/basic-sdk/views/viewer.js

@@ -25,10 +25,12 @@ var SDocViewer = function SDocViewer(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-container"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-editor-content"
+    className: "sdoc-editor-content readonly"
   }, /*#__PURE__*/React.createElement("div", {
     ref: scrollRef,
-    className: "sdoc-editor-article-container"
+    className: "sdoc-article-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-article-container"
   }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
     value: {
       scrollRef: scrollRef
@@ -37,7 +39,7 @@ var SDocViewer = function SDocViewer(_ref) {
     editor: editor,
     value: slateValue
   }, /*#__PURE__*/React.createElement("div", {
-    className: "article mx-auto",
+    className: "article",
     ref: articleRef
   }, /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {
     readOnly: true,
@@ -50,6 +52,6 @@ var SDocViewer = function SDocViewer(_ref) {
     },
     onDOMBeforeInput: function onDOMBeforeInput(event) {},
     decorate: decorate
-  })))))));
+  }))))))));
 };
 export default SDocViewer;

package/dist/components/code-block-hover-menu/index.css

@@ -1,6 +1,7 @@
 .sdoc-code-block-hover-menu-container {
   position: absolute;
   height: 42px;
+  z-index: 101;
 }
 
 .sdoc-code-block-hover-menu-container .hover-menu-container {
@@ -14,7 +15,6 @@
   border-radius: 3px;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
   border: 1px solid #e8e8e8;
-  z-index: 1000;
 }
 
 .sdoc-code-block-hover-menu-container .hover-menu-container .active {

package/dist/components/doc-info/index.js

@@ -5,9 +5,11 @@ import context from '../../context';
 import { EventBus } from '../../basic-sdk';
 import { EXTERNAL_EVENT } from '../../constants';
 import { DateUtils } from '../../utils';
+import DraftDropdown from '../draft-dropdown';
 var DocInfo = function DocInfo(_ref) {
   var t = _ref.t,
     isStarred = _ref.isStarred,
+    isDraft = _ref.isDraft,
     isEditMode = _ref.isEditMode;
   var onInternalLinkClick = useCallback(function () {
     var eventBus = EventBus.getInstance();
@@ -22,7 +24,7 @@ var DocInfo = function DocInfo(_ref) {
   var _context$getSettings = context.getSettings(),
     isShowInternalLink = _context$getSettings.isShowInternalLink,
     isStarIconShown = _context$getSettings.isStarIconShown;
-  var docInfo = /*#__PURE__*/React.createElement(React.Fragment, null, isStarIconShown && /*#__PURE__*/React.createElement("button", {
+  var docInfo = /*#__PURE__*/React.createElement(React.Fragment, null, isDraft && /*#__PURE__*/React.createElement(DraftDropdown, null), isStarIconShown && /*#__PURE__*/React.createElement("button", {
     className: "doc-icon sdocfont ".concat(isStarred ? 'sdoc-starred' : 'sdoc-unstarred', " border-0 p-0 bg-transparent"),
     title: isStarred ? t('Starred') : t('Unstarred'),
     "aria-label": isStarred ? t('Unstar') : t('Star'),

package/dist/components/draft-dropdown/index.js

@@ -0,0 +1,77 @@
+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 { withTranslation } from 'react-i18next';
+import { EventBus } from '../../basic-sdk';
+import { EXTERNAL_EVENT } from '../../constants';
+import './style.css';
+var DraftDropdownMenu = /*#__PURE__*/function (_React$Component) {
+  _inherits(DraftDropdownMenu, _React$Component);
+  var _super = _createSuper(DraftDropdownMenu);
+  function DraftDropdownMenu(props) {
+    var _this;
+    _classCallCheck(this, DraftDropdownMenu);
+    _this = _super.call(this, props);
+    _this.registerEventHandler = function () {
+      document.addEventListener('click', _this.onHideDraftDropdownMenu);
+    };
+    _this.unregisterEventHandler = function () {
+      document.removeEventListener('click', _this.onHideDraftDropdownMenu);
+    };
+    _this.onHideDraftDropdownMenu = function () {
+      _this.setState({
+        isDropdownMenuOpen: false
+      }, function () {
+        _this.unregisterEventHandler();
+      });
+    };
+    _this.onToggleClick = function (event) {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      var isDropdownMenuOpen = !_this.state.isDropdownMenuOpen;
+      if (isDropdownMenuOpen) {
+        _this.setState({
+          isDropdownMenuOpen: isDropdownMenuOpen
+        }, function () {
+          _this.registerEventHandler();
+        });
+      } else {
+        _this.setState({
+          isDropdownMenuOpen: isDropdownMenuOpen
+        }, function () {
+          _this.unregisterEventHandler();
+        });
+      }
+    };
+    _this.unmark = function () {
+      var eventBus = EventBus.getInstance();
+      eventBus.dispatch(EXTERNAL_EVENT.UNMARK_AS_DRAFT);
+    };
+    _this.state = {
+      isDropdownMenuOpen: false
+    };
+    return _this;
+  }
+  _createClass(DraftDropdownMenu, [{
+    key: "render",
+    value: function render() {
+      var isDropdownMenuOpen = this.state.isDropdownMenuOpen;
+      var t = this.props.t;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-draft-menu"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "draft-toggle sdoc-draft-identifier",
+        onClick: this.onToggleClick
+      }, t('Draft')), isDropdownMenuOpen && /*#__PURE__*/React.createElement("ul", {
+        className: "draft-popover list-unstyled m-0"
+      }, /*#__PURE__*/React.createElement("li", {
+        className: "draft-menu-item",
+        onClick: this.unmark
+      }, t('Unmark_as_draft'))));
+    }
+  }]);
+  return DraftDropdownMenu;
+}(React.Component);
+export default withTranslation('sdoc-editor')(DraftDropdownMenu);

package/dist/components/draft-dropdown/style.css

@@ -0,0 +1,43 @@
+.sdoc-draft-menu {
+  position: relative;
+  margin-left: 0.5rem;
+}
+
+.sdoc-draft-identifier {
+  display: inline-block;
+  font-size: 14px;
+  color: #888;
+  background: #eee;
+  padding: 0 8px; 
+  height: 20px;
+  line-height: 20px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.sdoc-draft-identifier:hover {
+  background: #dbdbdb;
+}
+
+.sdoc-draft-menu .draft-popover {
+  position: absolute;
+  top: 25px;
+  left: 0;
+  width: 178px;
+  background-color: #fff;
+  border: 1px solid #e5e6e8;
+  border-radius: 2px;
+  padding: 8px 0;
+  box-shadow: 0 0 10px #e5e6e8;
+  z-index: 10;
+}
+
+.sdoc-draft-menu .draft-popover .draft-menu-item {
+  cursor: pointer;
+  width: 100%;
+  padding: 4px 12px;
+}
+
+.sdoc-draft-menu .draft-popover .draft-menu-item:hover {
+  background-color: rgb(245, 245, 245);
+}

package/dist/components/more-dropdown/index.js

@@ -12,12 +12,15 @@ var MoreDropdownMenu = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, MoreDropdownMenu);
     _this = _super.call(this, props);
     _this.registerEventHandler = function () {
-      document.addEventListener('click', _this.onHideMoreDropdownMenu);
+      document.addEventListener('click', _this.onHideMoreDropdownMenu, true);
     };
     _this.unregisterEventHandler = function () {
-      document.removeEventListener('click', _this.onHideMoreDropdownMenu);
+      document.removeEventListener('click', _this.onHideMoreDropdownMenu, true);
     };
-    _this.onHideMoreDropdownMenu = function () {
+    _this.onHideMoreDropdownMenu = function (e) {
+      var menu = _this.menu;
+      var clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
+      if (clickIsInMenu) return;
       _this.setState({
         isDropdownMenuOpen: false
       }, function () {
@@ -42,6 +45,9 @@ var MoreDropdownMenu = /*#__PURE__*/function (_React$Component) {
         });
       }
     };
+    _this.setMenuRef = function (ref) {
+      _this.menu = ref;
+    };
     _this.state = {
       isDropdownMenuOpen: false
     };
@@ -59,6 +65,7 @@ var MoreDropdownMenu = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("span", {
         className: "sdocfont sdoc-more"
       })), isDropdownMenuOpen && /*#__PURE__*/React.createElement("div", {
+        ref: this.setMenuRef,
         className: "more-popover"
       }, this.props.children));
     }

package/dist/components/more-dropdown/style.css

@@ -48,7 +48,7 @@
   border-radius: 2px;
   box-shadow: 0 0 10px #ccc;
   display: flex;
-  z-index: 10;
+  z-index: 101;
 }
 
 .sdoc-more-menu .more-popover .more-menu-item {

package/dist/constants/index.js

@@ -1,6 +1,8 @@
 export var EXTERNAL_EVENT = {
   INTERNAL_LINK_CLICK: 'internal_link_click',
   TOGGLE_STAR: 'toggle_star',
-  CANCEL_TABLE_SELECT_RANGE: 'cancel_table_select_range'
+  UNMARK_AS_DRAFT: 'unmark_as_draft',
+  CANCEL_TABLE_SELECT_RANGE: 'cancel_table_select_range',
+  SET_TABLE_SELECT_RANGE: 'set_table_select_range'
 };
 export var PAGE_EDIT_AREA_WIDTH = 672; // 672 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]

package/dist/pages/simple-editor.js

@@ -12,6 +12,7 @@ import DiffViewer from './diff-viewer';
 import '../assets/css/simple-editor.css';
 var SimpleEditor = function SimpleEditor(_ref) {
   var isStarred = _ref.isStarred,
+    isDraft = _ref.isDraft,
     t = _ref.t;
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -123,6 +124,7 @@ var SimpleEditor = function SimpleEditor(_ref) {
   }
   return /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(DocInfo, {
     isStarred: isStarred,
+    isDraft: isDraft,
     isEditMode: !isShowChanges
   }), /*#__PURE__*/React.createElement(DocOperations, {
     isShowChanges: isShowChanges,

package/dist/utils/index.js

@@ -1,4 +1,5 @@
 import DateUtils from './date-utils';
+import LocalStorage from './local-storage-utils';
 export var getDirPath = function getDirPath(path) {
   var dir = path.slice(0, path.lastIndexOf('/'));
   if (dir === '') {
@@ -39,4 +40,4 @@ export var getErrorMsg = function getErrorMsg(error) {
   }
   return errorMsg;
 };
-export { DateUtils };
+export { DateUtils, LocalStorage };

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

@@ -0,0 +1,49 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+var LocalStorage = /*#__PURE__*/function () {
+  function LocalStorage() {
+    _classCallCheck(this, LocalStorage);
+  }
+  _createClass(LocalStorage, null, [{
+    key: "setItem",
+    value: function setItem(key, value) {
+      return window.localStorage.setItem(key, JSON.stringify(value));
+    }
+  }, {
+    key: "getItem",
+    value: function getItem(key, defaultValue) {
+      return JSON.parse(window.localStorage.getItem(key)) || defaultValue;
+    }
+  }, {
+    key: "removeItem",
+    value: function removeItem(key) {
+      return window.localStorage.removeItem(key);
+    }
+
+    //The setExpire and getExpire methods used to satisfy some cases that need to be updated regularly
+  }, {
+    key: "setExpire",
+    value: function setExpire(key, value, expire) {
+      var obj = {
+        data: value,
+        time: Date.now(),
+        expire: expire
+      };
+      this.setItem(key, JSON.stringify(obj));
+    }
+  }, {
+    key: "getExpire",
+    value: function getExpire(key) {
+      var 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;
+    }
+  }]);
+  return LocalStorage;
+}();
+export default LocalStorage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.82",
+  "version": "0.1.84",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -19,6 +19,7 @@
     "lodash.throttle": "4.1.1",
     "randomcolor": "0.6.2",
     "prismjs": "^1.29.0",
+    "react-color": "2.19.3",
     "react-cookies": "0.1.1",
     "reactstrap": "8.9.0",
     "slugid": "3.2.0",

package/public/locales/en/sdoc-editor.json

@@ -260,5 +260,50 @@
   "Start_revise": "Start revise",
   "Failed_to_execute_operation_on_server": "Failed to execute operation on server",
   "Start_revise_tip": "Create a temporary document and modify on it, merge it back after reviewing changes",
-  "Load_doc_content_error": "Load doc content error"
+  "Load_doc_content_error": "Load doc content error",
+  "Draft": "Draft",
+  "Unmark_as_draft": "Unmark as draft",
+  "Background_color": "Background color",
+  "No_color": "No color",
+  "Standard_color": "Standard color",
+  "Recently_used": "Recently used",
+  "More_color": "More color",
+  "White": "White",
+  "Black": "Black",
+  "Blue_grey": "Blue_grey",
+  "Blue": "Blue",
+  "Sky_blue": "Sky_blue",
+  "Green": "Green",
+  "Red": "Red",
+  "Orange": "Orange",
+  "Yellow": "Yellow",
+  "Purple": "Purple",
+  "Light_grey_x": "Light grey {{value}}",
+  "Dark_grey_x": "Dark grey {{value}}",
+  "Light_blue_grey_x": "Light blue grey {{value}}",
+  "Light_blue_x": "Light blue {{value}}",
+  "Light_sky_blue_x": "Light sky blue {{value}}",
+  "Light_green_x": "Light green {{value}}",
+  "Light_red_x": "Light red {{value}}",
+  "Light_orange_x": "Light orange {{value}}",
+  "Light_yellow_x": "Light yellow {{value}}",
+  "Light_purple_x": "Light purple {{value}}",
+  "Dark_blue_grey_x": "Dark blue grey {{value}}",
+  "Dark_blue_x": "Dark blue {{value}}",
+  "Dark_sky_blue_x": "Dark sky blue {{value}}",
+  "Dark_green_x": "Dark green {{value}}",
+  "Dark_red_x": "Dark red {{value}}",
+  "Dark_orange_x": "Dark orange {{value}}",
+  "Dark_yellow_x": "Dark yellow {{value}}",
+  "Dark_purple_x": "Dark purple {{value}}",
+  "Standard_dark_red": "Standard dark red",
+  "Standard_red": "Standard red",
+  "Standard_orange": "Standard orange",
+  "Standard_yellow": "Standard yellow",
+  "Standard_light_green": "Standard light green",
+  "Standard_green": "Standard green",
+  "Standard_light_blue": "Standard light blue",
+  "Standard_blue": "Standard blue",
+  "Standard_dark_blue": "Standard dark blue",
+  "Standard_purple": "Standard purple"
 }