Merge pull request #1181 from ONLYOFFICE/feature/Bug_49157

Feature/bug 49157

apps/common/mobile/lib/component/HighlightColorPalette.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { f7, ListItem, List, Icon, Page } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import {Device} from '../../utils/device';
+
+const HighlightColorPalette = ({changeColor, curColor}) => {
+    const isAndroid = Device.android;
+    const { t } = useTranslation();
+    const highlightColors = [
+        ['ffff00', '00ff00', '00ffff', 'ff00ff', '0000ff', 'ff0000', '00008b', '008b8b'],
+        ['006400', '800080', '8b0000', '808000', 'ffffff', 'd3d3d3', 'a9a9a9', '000000']
+    ];
+
+    return (
+        <List>
+            <ListItem>
+                <div className='highlight-palette'>
+                    {highlightColors.map((row, index) => (
+                        <div key={index} className="row">
+                            {row.map((effect, index) => {
+                                return (
+                                    <a key={index} className={(curColor && (curColor.color === effect  || curColor === effect)) ? 'highlight-color highlight-color_active' : 'highlight-color'} style={{ background: `#${effect}`}} onClick={() => {changeColor(effect)}}></a>
+                                );
+                            })}
+                        </div>
+                    ))}
+                </div>
+            </ListItem>
+            <ListItem radio checked={(curColor && curColor === 'transparent')} onClick={() => changeColor('transparent')} title={t('Common.HighlightColorPalette.textNoFill')}>
+                {!isAndroid && <Icon slot="media" icon="icon-cancellation"></Icon>}
+            </ListItem>
+        </List>
+    )
+};
+
+export default HighlightColorPalette;

apps/common/mobile/resources/less/common-material.less

@@ -294,7 +294,7 @@
             .color-preview {
                 width: 30px;
                 height: 30px;
-                border-radius: 16px;
+                border-radius: 4px;
                 margin-top: -3px;
                 box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
                 &.auto {

apps/common/mobile/resources/less/common.less

@@ -901,6 +901,30 @@ input[type="number"]::-webkit-inner-spin-button {
     }
 }
 
+// Highlight Colors
+
+.highlight-palette {
+    width: 100%;
+}
+
+.highlight-color {
+    min-width: 10px;
+    min-height: 34px;
+    margin: 1px;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
+    position: relative;
+    flex-grow: 1;
+    &_active:after {
+        content: ' ';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #446995;
+        z-index: 1;
+        border-radius: 1px;
+    }
+}
+
 
 
 

apps/common/mobile/resources/less/icons.less

@@ -25,4 +25,9 @@ i.icon {
         height: 24px;
         .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M15.9912 6C15.9912 8.34102 15.4074 10.1346 14.6055 11.3121C13.7983 12.4974 12.8249 13 11.9912 13C11.1575 13 10.1841 12.4974 9.37695 11.3121C8.57501 10.1346 7.99121 8.34102 7.99121 6C7.99121 3.61508 9.96974 2 11.9912 2C14.0127 2 15.9912 3.61508 15.9912 6ZM14.5015 12.9506C13.7365 13.6361 12.8649 14 11.9912 14C11.1195 14 10.2499 13.6378 9.48619 12.9554C7.78363 13.6081 6.36015 14.2591 5.26963 14.9224C3.55256 15.9667 3 16.8326 3 17.5C3 18.2545 3.4257 19.0877 4.82302 19.7879C6.25015 20.5031 8.57272 20.9999 12 21C15.4273 21 17.7499 20.5031 19.177 19.7879C20.5743 19.0877 21 18.2545 21 17.5C21 16.8326 20.4474 15.9667 18.7304 14.9224C17.6372 14.2575 16.2095 13.605 14.5015 12.9506ZM15.2272 12.1594C16.2765 10.7825 16.9912 8.67814 16.9912 6C16.9912 3 14.5 1 11.9912 1C9.48242 1 6.99121 3 6.99121 6C6.99121 8.68159 7.70777 10.7879 8.75931 12.1647C4.60309 13.7964 2 15.4951 2 17.5C2 19.9852 5 21.9999 12 22C19 22 22 19.9852 22 17.5C22 15.4929 19.3913 13.7927 15.2272 12.1594Z" fill="@{themeColor}"/></g></svg>');
     }
+    &.icon-cancellation {
+        width: 24px;
+        height: 24px;
+        .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0"        style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20"><circle cx="12" cy="12" r="9.5" fill="@{gray}" stroke="@{themeColor}"/></mask><g mask="url(#mask0)"><circle cx="12" cy="12" r="9.5" transform="rotate(-90 12 12)" stroke="@{themeColor}"/><line x1="5.09054" y1="19.2024" x2="19.1919" y2="5.10094" stroke="@{themeColor}"/></g></svg>');
+    }
 }

apps/documenteditor/mobile/locale/en.json

@@ -161,6 +161,9 @@
       "textCustomColors": "Custom Colors",
       "textStandartColors": "Standard Colors",
       "textThemeColors": "Theme Colors"
+    },
+    "HighlightColorPalette": {
+      "textNoFill": "No Fill"
     }
   },
   "ContextMenu": {

apps/documenteditor/mobile/src/controller/Main.jsx

@@ -573,9 +573,14 @@ class MainController extends Component {
         this.api.asc_registerCallback('asc_onParaSpacingLine', (vc) => {
             storeTextSettings.resetLineSpacing(vc);
         });
-        this.api.asc_registerCallback('asc_onTextShd', (shd) => {
+
-            let color = shd.get_Color();
+        this.api.asc_registerCallback('asc_onTextHighLight', color => {
-            storeTextSettings.resetBackgroundColor(color);
+            let textPr = this.api.get_TextProps().get_TextPr();
+
+            if(textPr) {
+                color = textPr.get_HighLight();
+                storeTextSettings.resetHighlightColor(color);
+            }
         });
 
         // link settings

apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx

@@ -133,15 +133,13 @@ class EditParagraphController extends Component {
 
     onBackgroundColor (color) {
         const api = Common.EditorApi.get();
-        const properties = new Asc.asc_CParagraphProperty();
+    
-        properties.put_Shade(new Asc.asc_CParagraphShd());
         if (color == 'transparent') {
-            properties.get_Shade().put_Value(Asc.c_oAscShdNil);
+            api.put_ParagraphShade(false);
         } else {
-            properties.get_Shade().put_Value(Asc.c_oAscShdClear);
+            api.put_ParagraphShade(true, Common.Utils.ThemeColor.getRgbColor(color));
-            properties.get_Shade().put_Color(Common.Utils.ThemeColor.getRgbColor(color));
         }
-        api.paraApply(properties);
+        
     }
 
     render () {

apps/documenteditor/mobile/src/controller/edit/EditText.jsx

@@ -45,12 +45,17 @@ class EditTextController extends Component {
         api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color));
     }
 
-    onBackgroundColor(color) {
+    onHighlightColor(strColor) {
         const api = Common.EditorApi.get();
-        if (color == 'transparent') {
+        
-            api.put_ParagraphShade(false);
+        if (strColor == 'transparent') {
+            api.SetMarkerFormat(true, false);
         } else {
-            api.put_ParagraphShade(true, Common.Utils.ThemeColor.getRgbColor(color));
+            let r = strColor[0] + strColor[1],
+                g = strColor[2] + strColor[3],
+                b = strColor[4] + strColor[5];
+
+            api.SetMarkerFormat(true, true, parseInt(r, 16), parseInt(g, 16), parseInt(b, 16));
         }
     }
 
@@ -203,7 +208,7 @@ class EditTextController extends Component {
                 changeFontFamily={this.changeFontFamily}
                 onTextColorAuto={this.onTextColorAuto}
                 onTextColor={this.onTextColor}
-                onBackgroundColor={this.onBackgroundColor}
+                onHighlightColor={this.onHighlightColor}
                 toggleBold={this.toggleBold}
                 toggleItalic={this.toggleItalic}
                 toggleUnderline={this.toggleUnderline}

apps/documenteditor/mobile/src/store/paragraphSettings.js

@@ -51,6 +51,7 @@ export class storeParagraphSettings {
     getBackgroundColor (paragraphObject) {
         const shade = paragraphObject.get_Shade();
         let backColor = 'transparent';
+
         if (!!shade && shade.get_Value() === Asc.c_oAscShdClear) {
             const color = shade.get_Color();
             if (color) {
@@ -64,6 +65,7 @@ export class storeParagraphSettings {
                 }
             }
         }
+        
         this.backColor = backColor;
         return backColor;
     }

apps/documenteditor/mobile/src/store/textSettings.js

@@ -20,7 +20,7 @@ export class storeTextSettings {
             textColor: observable,
             customTextColors: observable,
             lineSpacing: observable,
-            backgroundColor: observable,
+            highlightColor: observable,
             initEditorFonts: action,
             resetFontName: action,
             resetFontsRecent:action,
@@ -40,7 +40,7 @@ export class storeTextSettings {
             resetTextColor: action,
             changeCustomTextColors: action,
             resetLineSpacing: action,
-            resetBackgroundColor: action,
+            resetHighlightColor: action,
             changeFontFamily: action,
             iconWidth: observable,
             iconHeight: observable,
@@ -80,7 +80,7 @@ export class storeTextSettings {
     textColor = undefined;
     customTextColors = [];
     lineSpacing = undefined;
-    backgroundColor = undefined;
+    highlightColor = undefined;
 
 
     initEditorFonts (fonts, select) {
@@ -251,24 +251,11 @@ export class storeTextSettings {
         this.lineSpacing = line;
     }
 
-    resetBackgroundColor (color) {
+    resetHighlightColor (color) {
-        let value;
+        if (color == -1) {
-
+           this.highlightColor = 'transparent';
-        if(color) {
-            if (color.get_auto()) {
-                value = 'transparent'
         } else {
-                if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+            this.highlightColor = color.get_hex();
-                    value = {
-                        color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
-                        effectValue: color.get_value()
-                    }
-                } else {
-                    value = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
         }  
     }
 }
-
-        this.backgroundColor = value;
-    }
-}

apps/documenteditor/mobile/src/view/edit/Edit.jsx

@@ -14,7 +14,7 @@ import EditChartController from "../../controller/edit/EditChart";
 import EditHyperlinkController from "../../controller/edit/EditHyperlink";
 import EditHeaderController from "../../controller/edit/EditHeader";
 
-import {PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextBackgroundColor, PageTextCustomBackColor} from "./EditText";
+import {PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextHighlightColor} from "./EditText";
 import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph";
 import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
 import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
@@ -48,12 +48,8 @@ const routes = [
         component: PageTextCustomFontColor,
     },
     {
-        path: '/edit-text-background-color/',
+        path: '/edit-text-highlight-color/',
-        component: PageTextBackgroundColor,
+        component: PageTextHighlightColor,
-    },
-    {
-        path: '/edit-text-custom-back-color/',
-        component: PageTextCustomBackColor,
     },
     //Edit paragraph
     {

apps/documenteditor/mobile/src/view/edit/EditText.jsx

@@ -4,6 +4,7 @@ import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row, Button, Page,
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
+import HighlightColorPalette from '../../../../../common/mobile/lib/component/HighlightColorPalette.jsx';
 import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
 
 const PageFonts = props => {
@@ -461,23 +462,21 @@ const PageCustomBackColor = props => {
     )
 };
 
-const PageBackgroundColor = props => {
+const PageHighlightColor = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
-    const backgroundColor = props.storeTextSettings.backgroundColor;
+    const highlightColor = props.storeTextSettings.highlightColor;
-    const customColors = props.storePalette.customColors;
+
     const changeColor = (color, effectId) => {
         if (color !== 'empty') {
             if (effectId !== undefined ) {
-                props.onBackgroundColor({color: color, effectId: effectId});
+                props.onHighlightColor({color: color, effectId: effectId});
             } else {
-                props.onBackgroundColor(color);
+                props.onHighlightColor(color);
             }
-        } else {
-            // open custom color menu
-            props.f7router.navigate('/edit-text-custom-back-color/', {props: {onBackgroundColor: props.onBackgroundColor}});
         }
     };
+
     return (
         <Page>
             <Navbar title={_t.textHighlightColor} backLink={_t.textBack}>
@@ -489,12 +488,7 @@ const PageBackgroundColor = props => {
                     </NavRight>
                 }
             </Navbar>
-            <ThemeColorPalette changeColor={changeColor} curColor={backgroundColor} customColors={customColors} transparent={true}/>
+            <HighlightColorPalette changeColor={changeColor} curColor={highlightColor} />
-            <List>
-                <ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-back-color/'} routeProps={{
-                    onBackgroundColor: props.onBackgroundColor
-                }}></ListItem>
-            </List>
         </Page>
     )
 };
@@ -506,7 +500,7 @@ const EditText = props => {
     const fontName = storeTextSettings.fontName || t('Edit.textFonts');
     const fontSize = storeTextSettings.fontSize;
     const fontColor = storeTextSettings.textColor;
-    const backgroundColor = storeTextSettings.backgroundColor;
+    const highlightColor = storeTextSettings.highlightColor;
     const displaySize = typeof fontSize === 'undefined' ? t('Edit.textAuto') : fontSize + ' ' + t('Edit.textPt');
     const isBold = storeTextSettings.isBold;
     const isItalic = storeTextSettings.isItalic;
@@ -531,6 +525,10 @@ const EditText = props => {
         <span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> :
         <span className="color-preview auto"></span>;
 
+    const highlightColorPreview = highlightColor !== 'transparent' ?
+        <span className="color-preview" style={{ background: `#${(typeof highlightColor === "object" ? highlightColor.color : highlightColor)}`}}></span> :
+        <span className="color-preview"></span>;
+
     return (
         <Fragment>
             <List>
@@ -555,12 +553,11 @@ const EditText = props => {
                         fontColorPreview
                     }
                 </ListItem>
-                <ListItem title={t("Edit.textHighlightColor")} link="/edit-text-background-color/" routeProps={{
+                <ListItem title={t("Edit.textHighlightColor")} link="/edit-text-highlight-color/" routeProps={{
-                    onBackgroundColor: props.onBackgroundColor
+                    onHighlightColor: props.onHighlightColor
                 }}>
                     {!isAndroid ?
-                        <Icon slot="media" icon="icon-text-selection"><span className="color-preview" style={{ background: `#${backgroundColor}`}}></span></Icon> :
+                        <Icon slot="media" icon="icon-text-selection">{highlightColorPreview}</Icon> : highlightColorPreview
-                        <span className="color-preview" style={{ background: `#${(typeof backgroundColor === "object" ? backgroundColor.color : backgroundColor)}`}}></span>
                     }
                 </ListItem>
                 <ListItem title={t("Edit.textAdditionalFormatting")} link="/edit-text-add-formatting/" routeProps={{
@@ -624,9 +621,7 @@ const PageTextBulletsAndNumbers = inject("storeTextSettings")(observer(PageBulle
 const PageTextLineSpacing = inject("storeTextSettings")(observer(PageLineSpacing));
 const PageTextFontColor = inject("storeTextSettings", "storePalette")(observer(PageFontColor));
 const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor));
-const PageTextBackgroundColor = inject("storeTextSettings", "storePalette")(observer(PageBackgroundColor));
+const PageTextHighlightColor = inject("storeTextSettings")(observer(PageHighlightColor));
-const PageTextCustomBackColor = inject("storeTextSettings", "storePalette")(observer(PageCustomBackColor));
-
 
 export {
     EditTextContainer as EditText,
@@ -636,6 +631,6 @@ export {
     PageTextLineSpacing,
     PageTextFontColor,
     PageTextCustomFontColor,
-    PageTextBackgroundColor,
+    PageTextHighlightColor,
-    PageTextCustomBackColor
+    // PageTextCustomBackColor
 };

apps/presentationeditor/mobile/locale/en.json

@@ -37,6 +37,9 @@
       "textCustomColors": "Custom Colors",
       "textStandartColors": "Standard Colors",
       "textThemeColors": "Theme Colors"
+    },
+    "HighlightColorPalette": {
+      "textNoFill": "No Fill"
     }
   },
   "ContextMenu": {

apps/presentationeditor/mobile/src/controller/Main.jsx

@@ -372,10 +372,14 @@ class MainController extends Component {
             storeTextSettings.resetDecreaseIndent(value);
         });
 
-        this.api.asc_registerCallback('asc_onTextColor', (color) => {
+        this.api.asc_registerCallback('asc_onTextColor', color => {
             storeTextSettings.resetTextColor(color);
         });
 
+        this.api.asc_registerCallback('asc_onTextHighLight', color => {
+            storeTextSettings.resetHighlightColor(color);
+        });
+
         this.api.asc_registerCallback('asc_onParaSpacingLine', (vc) => {
             storeTextSettings.resetLineSpacing(vc);
         });

apps/presentationeditor/mobile/src/controller/edit/EditText.jsx

@@ -155,6 +155,19 @@ class EditTextController extends Component {
         api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color));
     }
 
+    onHighlightColor(strColor) {
+        const api = Common.EditorApi.get();
+
+        if (strColor == 'transparent') {
+            api.SetMarkerFormat(true, false);
+        } else {
+            let r = strColor[0] + strColor[1],
+                g = strColor[2] + strColor[3],
+                b = strColor[4] + strColor[5];
+            api.SetMarkerFormat(true, true, parseInt(r, 16), parseInt(g, 16), parseInt(b, 16));
+        }
+    }
+
     // Additional
 
     onAdditionalStrikethrough(type, value) {
@@ -243,6 +256,7 @@ class EditTextController extends Component {
                 changeFontSize={this.changeFontSize}
                 changeFontFamily={this.changeFontFamily}
                 onTextColor={this.onTextColor}
+                onHighlightColor={this.onHighlightColor}
                 onAdditionalStrikethrough={this.onAdditionalStrikethrough}
                 onAdditionalCaps={this.onAdditionalCaps}
                 onAdditionalScript={this.onAdditionalScript}

apps/presentationeditor/mobile/src/store/textSettings.js

@@ -52,7 +52,9 @@ export class storeTextSettings {
             listItemHeight: observable,
             spriteCols: observable,
             loadSprite: action,
-            addFontToRecent:action
+            addFontToRecent:action,
+            highlightColor: observable,
+            resetHighlightColor: action
         });
     }
 
@@ -81,6 +83,7 @@ export class storeTextSettings {
     canIncreaseIndent = undefined;
     canDecreaseIndent = undefined;
     textColor = undefined;
+    highlightColor = undefined;
     customTextColors = [];
     lineSpacing = undefined;
 
@@ -280,4 +283,12 @@ export class storeTextSettings {
         this.lineSpacing = line;
     }
 
+    resetHighlightColor(color) {
+        if (color == -1) {
+            this.highlightColor = 'transparent';  
+        } else {
+            this.highlightColor = color.get_hex();
+        }
+        
+    }
 }

apps/presentationeditor/mobile/src/view/edit/Edit.jsx

@@ -14,7 +14,7 @@ import EditChartController from "../../controller/edit/EditChart";
 import { EditLinkController } from "../../controller/edit/EditLink";
 
 import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
-import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing } from './EditText';
+import { PageTextFonts, PageTextFontColor, PageTextHighlightColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing } from './EditText';
 import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
 import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage';
 import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable';
@@ -64,6 +64,10 @@ const routes = [
         path: '/edit-text-font-color/',
         component: PageTextFontColor
     },
+    {
+        path: '/edit-text-highlight-color/',
+        component: PageTextHighlightColor
+    },
     {
         path: '/edit-text-custom-font-color/',
         component: PageTextCustomFontColor

apps/presentationeditor/mobile/src/view/edit/EditText.jsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
 import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
+import HighlightColorPalette from '../../../../../common/mobile/lib/component/HighlightColorPalette.jsx';
 
 const EditText = props => {
     const isAndroid = Device.android;
@@ -16,6 +17,7 @@ const EditText = props => {
     const fontName = storeTextSettings.fontName || _t.textFonts;
     const fontSize = storeTextSettings.fontSize;
     const fontColor = storeTextSettings.textColor;
+    const highlightColor = storeTextSettings.highlightColor;
     const displaySize = typeof fontSize === 'undefined' || fontSize == '' ? _t.textAuto : fontSize + ' ' + _t.textPt;
     const isBold = storeTextSettings.isBold;
     const isItalic = storeTextSettings.isItalic;
@@ -53,6 +55,10 @@ const EditText = props => {
         <span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> :
         <span className="color-preview auto"></span>;
 
+    const highlightColorPreview = highlightColor !== 'transparent' ?
+        <span className="color-preview" style={{ background: `#${(typeof highlightColor === "object" ? highlightColor.color : highlightColor)}`}}></span> :
+        <span className="color-preview"></span>;
+
     return (
         <Fragment>
             <List>
@@ -76,6 +82,13 @@ const EditText = props => {
                         fontColorPreview
                     }
                 </ListItem>
+                <ListItem title={t("View.Edit.textHighlightColor")} link="/edit-text-highlight-color/" routeProps={{
+                    onHighlightColor: props.onHighlightColor
+                }}>
+                    {!isAndroid ?
+                        <Icon slot="media" icon="icon-text-selection">{highlightColorPreview}</Icon> : highlightColorPreview
+                    }
+                </ListItem>
                 <ListItem title={_t.textAdditionalFormatting} link="/edit-text-add-formatting/" routeProps={{
                     onAdditionalStrikethrough: props.onAdditionalStrikethrough,
                     onAdditionalCaps: props.onAdditionalCaps,
@@ -369,6 +382,37 @@ const PageCustomFontColor = props => {
     )
 };
 
+const PageHighlightColor = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const highlightColor = props.storeTextSettings.highlightColor;
+
+    const changeColor = (color, effectId) => {
+        if (color !== 'empty') {
+            if (effectId !== undefined ) {
+                props.onHighlightColor({color: color, effectId: effectId});
+            } else {
+                props.onHighlightColor(color);
+            }
+        }
+    };
+
+    return (
+        <Page>
+            <Navbar title={_t.textHighlightColor} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
+            <HighlightColorPalette changeColor={changeColor} curColor={highlightColor} />
+        </Page>
+    )
+};
+
 const PageAdditionalFormatting = props => {
     const isAndroid = Device.android;
     const { t } = useTranslation();
@@ -609,6 +653,7 @@ const PageLineSpacing = props => {
 const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText));
 const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
 const PageTextFontColor = inject("storeTextSettings", "storePalette", "storeFocusObjects")(observer(PageFontColor));
+const PageTextHighlightColor = inject("storeTextSettings")(observer(PageHighlightColor));
 const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor));
 const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
 const PageTextBulletsAndNumbers = inject("storeTextSettings", "storeFocusObjects")(observer(PageBulletsAndNumbers));
@@ -618,6 +663,7 @@ export {
     EditTextContainer as EditText,
     PageTextFonts,
     PageTextFontColor,
+    PageTextHighlightColor,
     PageTextCustomFontColor,
     PageTextAddFormatting,
     PageTextBulletsAndNumbers,