[DE mobile] Add edit hyperlink settings

apps/documenteditor/mobile/locale/en.json

@@ -103,6 +103,11 @@
     "textResizeToFitContent": "Resize to Fit Content",
     "textCellMargins": "Cell Margins",
     "textFlow": "Flow",
-    "textRemoveChart": "Remove Chart"
+    "textRemoveChart": "Remove Chart",
+    "textEditLink": "Edit Link",
+    "textRemoveLink": "Remove Link",
+    "textLink": "Link",
+    "textDisplay": "Display",
+    "textScreenTip": "Screen Tip"
   }
 }

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

@@ -11,6 +11,7 @@ import EditShapeController from "./controller/EditShape";
 import EditImageController from "./controller/EditImage";
 import EditTableController from "./controller/EditTable";
 import EditChartController from "./controller/EditChart";
+import EditHyperlinkController from "./controller/EditHyperlink";
 
 import {PageAdditionalFormatting, PageBullets, PageFonts, PageLineSpacing, PageNumbers} from "./EditText";
 import {PageAdvancedSettings} from "./EditParagraph";
@@ -213,13 +214,13 @@ const EditTabs = props => {
                 component: <EditChartController />
             })
         }
-        /*if (settings.indexOf('hyperlink') > -1) {
+        if (settings.indexOf('hyperlink') > -1) {
             editors.push({
                 caption: _t.textHyperlink,
                 id: 'edit-link',
-                component: <EditHyperlink />
+                component: <EditHyperlinkController />
             })
-        }*/
+        }
     }
 
     return (

apps/documenteditor/mobile/src/components/edit/EditHyperlink.jsx

@@ -0,0 +1,51 @@
+import React, {Fragment, useState} from 'react';
+import {observer, inject} from "mobx-react";
+import {List, ListInput, ListButton} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+
+const EditHyperlink = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const linkObject = props.storeFocusObjects.linkObject;
+    const link = linkObject.get_Value() ? linkObject.get_Value().replace(new RegExp(" ", 'g'), "%20") : '';
+    const display = !(linkObject.get_Text() === null) ? linkObject.get_Text() : '';
+    const tip = linkObject.get_ToolTip();
+    const [stateLink, setLink] = useState(link);
+    const [stateDisplay, setDisplay] = useState(display);
+    const [stateTip, setTip] = useState(tip);
+    return (
+        <Fragment>
+            <List inlineLabels>
+                <ListInput
+                    label={_t.textLink}
+                    type="text"
+                    placeholder={_t.textLink}
+                    value={stateLink}
+                    onChange={(event) => {setLink(event.target.value)}}
+                ></ListInput>
+                <ListInput
+                    label={_t.textDisplay}
+                    type="text"
+                    placeholder={_t.textDisplay}
+                    value={stateDisplay}
+                    onChange={(event) => {setDisplay(event.target.value)}}
+                ></ListInput>
+                <ListInput
+                    label={_t.textScreenTip}
+                    type="text"
+                    placeholder={_t.textScreenTip}
+                    value={stateTip}
+                    onChange={(event) => {setTip(event.target.value)}}
+                ></ListInput>
+            </List>
+            <List>
+                <ListButton className={stateLink.length < 1 ? 'disabled' : ''} title={_t.textEditLink} onClick={() => {
+                    props.onEditLink(stateLink, stateDisplay, stateTip)
+                }}></ListButton>
+                <ListButton title={_t.textRemoveLink} onClick={() => {props.onRemoveLink()}}></ListButton>
+            </List>
+        </Fragment>
+    )
+};
+
+export default inject("storeFocusObjects")(observer(EditHyperlink));

apps/documenteditor/mobile/src/components/edit/controller/EditHyperlink.jsx

@@ -0,0 +1,70 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../../common/mobile/utils/device';
+import {observer, inject} from "mobx-react";
+import { withTranslation } from 'react-i18next';
+
+import EditHyperlink from '../EditHyperlink';
+
+class EditHyperlinkController extends Component {
+    constructor (props) {
+        super(props);
+        this.onRemoveLink = this.onRemoveLink.bind(this);
+        this.onEditLink = this.onEditLink.bind(this);
+    }
+
+    closeModal () {
+        if ( Device.phone ) {
+            f7.sheet.close('#edit-sheet', true);
+        } else {
+            f7.popover.close('#edit-popover');
+        }
+    }
+
+    onEditLink (link, display, tip) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            const urltype = api.asc_getUrlType(link.trim());
+            const isEmail = (urltype == 2);
+            if (urltype < 1) {
+                const { t } = this.props;
+                f7.dialog.alert(t('Edit.textNotUrl'), t('Edit.notcriticalErrorTitle'));
+                return;
+            }
+            let url = link.replace(/^\s+|\s+$/g,'');
+            if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) ) {
+                url = (isEmail ? 'mailto:' : 'http://') + url;
+            }
+            url = url.replace(new RegExp("%20",'g')," ");
+            const props = new Asc.CHyperlinkProperty();
+            props.put_Value(url);
+            props.put_Text(display.trim().length < 1 ? url : display);
+            props.put_ToolTip(tip);
+            const linkObject = this.props.storeFocusObjects.linkObject;
+            if (linkObject) {
+                props.put_InternalHyperlink(linkObject.get_InternalHyperlink());
+            }
+            api.change_Hyperlink(props);
+            this.closeModal();
+        }
+    }
+
+    onRemoveLink () {
+        const api = Common.EditorApi.get();
+        if (api) {
+            const linkObject = this.props.storeFocusObjects.linkObject;
+            api.remove_Hyperlink(linkObject);
+            this.closeModal();
+        }
+    }
+
+    render () {
+        return (
+            <EditHyperlink onEditLink={this.onEditLink}
+                           onRemoveLink={this.onRemoveLink}
+            />
+        )
+    }
+}
+
+export default withTranslation()(inject("storeFocusObjects")(observer(EditHyperlinkController)));

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

@@ -126,4 +126,18 @@ export class storeFocusObjects {
             return undefined;
         }
     }
+    @computed get linkObject() {
+        const links = [];
+        for (let object of this._focusObjects) {
+            if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
+                links.push(object);
+            }
+        }
+        if (links.length > 0) {
+            let object = links[links.length - 1]; // get top
+            return  object.get_ObjectValue();
+        } else {
+            return undefined;
+        }
+    }
 }