KeyboardModule Object

export var editor: any = null; 
export class EditorInitializer { 
    private callback: (editor: any) => void = null; 
 
    constructor(callback?: (editor: any) => void) { 
        this.callback = callback; 
        this.init(); 
    } 
 
    init = () => { 
        this.setLicense(); 
        this.initFactory(); 
        this.addEditControl(); 
    } 
 
    setLicense = () => { 
        lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", function (setLicenseResult) { 
            if (setLicenseResult.result) { 
                console.log("LEADTOOLS client license set successfully"); 
            } else { 
                var msg = "No LEADTOOLS License\n\nYour license file is missing, invalid or expired. LEADTOOLS will not function. Please contact LEAD Sales for information on obtaining a valid license."; 
                alert(msg); 
                var msgParagraph = document.createElement('p'); 
                msgParagraph.innerText = msg; 
                var parent_1 = document.getElementById("div_container"); 
                while (parent_1.firstElementChild) { 
                    parent_1.removeChild(parent_1.firstElementChild); 
                } 
                parent_1.appendChild(msgParagraph); 
                console.log(msg); 
            } 
        }); 
    } 
 
    initFactory = () => { 
        // To communicate with the DocumentsService, it must be running!   
        // Change these parameters to match the path to the service.  
        lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
        lt.Document.DocumentFactory.servicePath = ""; 
        lt.Document.DocumentFactory.serviceApiPath = "api"; 
        // Set local proxy url template (Used in local load mode)  
        lt.Document.DocumentFactory.localProxyUrlTemplate = "http://localhost:40000/api/CorsProxy/Proxy?{0}"; 
        // Ping the Document service  
        lt.Document.DocumentFactory.verifyService() 
            .done(function (response: ResponseType | any) { 
                var serviceInfo = "Service name: '" + response.serviceName + "'"; 
                serviceInfo += " version: '" + response.serviceVersion + "'"; 
                serviceInfo += " platform: '" + response.servicePlatform + "'"; 
                serviceInfo += " OS: '" + response.serviceOperatingSystem + "'"; 
                lt.LTHelper.log(serviceInfo); 
            }) 
            .fail(function (jqXHR: string, statusText: string, errorThrown: string) { 
                var errMsg = "Cannot reach the LEADTOOLS Document Service.\n\nPlease Make sure LEADTOOLS DocumentService is running\n - Examples/Document/JS/DocumentServiceDotNet\n - Examples/Document/JS/DocumentServiceJava\nand verify that the service path is correct, then refresh the application."; 
                window.alert(errMsg); 
                console.log(errMsg); 
            }); 
    } 
 
    addEditControl = () => { 
        //sets up the initial document editor object 
        var content = document.getElementById('content'); 
        editor = new lt.Document.Editor.DocumentEditor({ 
            root: content 
        }); 
        this.registerClickEvents(); 
        if (this.callback) { 
            this.callback(editor); 
        } 
    } 
 
    registerClickEvents = () => { 
        //registers the onclick functions for the buttons 
        const importClick = document.getElementById('importBtn'); 
        importClick.onclick = (e) => { 
            this.selectAndLoadFile(); 
        } 
        const exportClick = document.getElementById('exportBtn'); 
        exportClick.onclick = (e) => { 
            this.exportAsPdf(); 
        } 
    } 
 
    selectAndLoadFile = () => { 
        //creates an input element on the Import Document button to upload files 
        //into the document editor 
        var input = document.createElement('input'); 
        input.type = 'file'; 
        input.style.display = 'none'; 
        input.accept = '.doc, .docx, .pdf, .rtf, .txt'; 
        input.onchange = function (e) { 
            var files = input.files; 
            if (!files || !files.length) 
                return; 
            var file = files[0]; 
            document.body.style.cursor = 'wait'; 
            var promise = lt.Document.Editor.EditableDocument.fromFile(file); 
            promise.then(function (doc: HTMLElement) { 
                editor.setDocument(doc); 
            }); 
            promise.finally(() => { 
                document.body.style.cursor = 'default'; 
            }); 
        }; 
        input.click(); 
    } 
 
    exportAsPdf = () => { 
        //exports the current document for saving 
        var promise = editor.document.toFile("untitled", lt.Document.Writer.DocumentFormat.pdf); 
        var err = null; 
        promise.then(function (name: string) { }); 
        promise.catch(function (err: string) { 
            alert("There was an issue exporting the document. " + err); 
        }); 
    } 
 
} 

import {EditorInitializer} from '../utility/EditorInitializer'; 
import {editor} from '../utility/EditorInitializer'; 
 
var status = false; 
export class KeyboardMovementModule { 
 
    run = () => { 
        new EditorInitializer(); 
        this.init(); 
    } 
 
    init = () => { 
        //This creates a test document and sets it in the Document Editor when the example is run. 
        var tDoc = editor.createTestDocument(); 
        editor.setDocument(tDoc); 
    } 
 
    addShortcut =()=>{ 
        //This registers a new keybind shortcut to select everything in the Document Editor. Alerts the user the shortcut has been added  
        editor.keyboard.registerShortCut("selectAllAlt","Ctrl+q","Selects everything in the editor, alternative to using ctrl+a",(e)=>{ 
            editor.movement.selectAll(); 
        }); 
        alert("Shortcut added!") 
        status = true; 
    } 
    removeShortcut =()=>{ 
        //This unregisters the recently created keybind and alerts the user that it was removed 
        editor.keyboard.unregisterShortCut("selectAllAlt"); 
        alert("Shortcut removed!"); 
        status = false; 
    } 
    showShortcut =()=>{ 
        //Checks to see if they keybind was registered or not, if it was it will get and display information about the keybind 
        if(!status){ 
            alert("There is no shortcut registered"); 
        }else{ 
            alert("The shortcut keybind and its description\n\n"+ 
            editor.keyboard.getShortCut("selectAllAlt")+"\n"+ 
            editor.keyboard.getShortCutDescription("selectAllAlt")+"\n"); 
        } 
    } 
    highlightStart =()=>{ 
        //Selects to the start of the line, same functionality of the 'shift + home' 
        editor.movement.selectToStartOfLine(false); 
    } 
    highlightEnd =()=>{ 
        //Selects to the start of the line, same functionality of the 'shift + end' 
        editor.movement.selectToEndOfLine(false); 
    } 
} 

export let editor = null; 
export class EditorInitializer { 
 
    constructor(callback) { 
         
        this.callback = callback; 
        this.init(); 
    } 
 
    init = () => { 
        this.setLicense(); 
        this.initFactory(); 
        this.addEditControl(); 
    } 
 
    setLicense = () => { 
        lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", function (setLicenseResult) { 
            if (setLicenseResult.result) { 
                console.log("LEADTOOLS client license set successfully"); 
            } else { 
                var msg = "No LEADTOOLS License\n\nYour license file is missing, invalid or expired. LEADTOOLS will not function. Please contact LEAD Sales for information on obtaining a valid license."; 
                alert(msg); 
                var msgParagraph = document.createElement('p'); 
                msgParagraph.innerText = msg; 
                var parent_1 = document.getElementById("div_container"); 
                while (parent_1.firstElementChild) { 
                    parent_1.removeChild(parent_1.firstElementChild); 
                } 
                parent_1.appendChild(msgParagraph); 
                console.log(msg); 
            } 
        }); 
    } 
 
    initFactory = () => { 
        // To communicate with the DocumentsService, it must be running!   
        // Change these parameters to match the path to the service.  
        lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
        lt.Document.DocumentFactory.servicePath = ""; 
        lt.Document.DocumentFactory.serviceApiPath = "api"; 
        // Set local proxy url template (Used in local load mode)  
        lt.Document.DocumentFactory.localProxyUrlTemplate = "http://localhost:40000/api/CorsProxy/Proxy?{0}"; 
        // Ping the Document service  
        lt.Document.DocumentFactory.verifyService() 
            .done(function (response) { 
                var serviceInfo = "Service name: '" + response.serviceName + "'"; 
                serviceInfo += " version: '" + response.serviceVersion + "'"; 
                serviceInfo += " platform: '" + response.servicePlatform + "'"; 
                serviceInfo += " OS: '" + response.serviceOperatingSystem + "'"; 
                lt.LTHelper.log(serviceInfo); 
            }) 
            .fail(function (jqXHR, statusText, errorThrown) { 
                var errMsg = "Cannot reach the LEADTOOLS Document Service.\n\nPlease Make sure LEADTOOLS DocumentService is running\n - Examples/Document/JS/DocumentServiceDotNet\n - Examples/Document/JS/DocumentServiceJava\nand verify that the service path is correct, then refresh the application."; 
                window.alert(errMsg); 
                console.log(errMsg); 
            }); 
    } 
 
    addEditControl = () => {  
        //sets up the initial document editor object 
        var content = document.getElementById('content'); 
        editor = new lt.Document.Editor.DocumentEditor({ 
            root: content 
        }); 
        this.registerClickEvents(); 
        if(this.callback){ 
            this.callback(editor); 
        } 
    } 
 
    registerClickEvents = () => { 
        //registers the onclick functions for the buttons 
        const importClick = document.getElementById('importBtn'); 
        importClick.onclick = (e) =>{ 
            this.selectAndLoadFile(); 
        } 
        const exportClick = document.getElementById('exportBtn'); 
        exportClick.onclick = (e) =>{ 
            this.exportAsPdf(); 
        } 
    } 
 
    selectAndLoadFile = () => { 
        //creates an input element on the Import Document button to upload files 
        //into the document editor 
        var input = document.createElement('input'); 
        input.type = 'file'; 
        input.style.display = 'none'; 
        input.accept = '.doc, .docx, .pdf, .rtf, .txt'; 
        input.onchange = function (e) { 
            var files = input.files; 
            if (!files || !files.length) 
                return; 
            var file = files[0]; 
            document.body.style.cursor = 'wait'; 
            var promise = lt.Document.Editor.EditableDocument.fromFile(file); 
            promise.then(function (doc) { 
                editor.setDocument(doc); 
            }); 
            promise.finally(()=> { 
                document.body.style.cursor = 'default'; 
            }); 
        }; 
        input.click(); 
    } 
 
    exportAsPdf = () => { 
        //exports the current document for saving 
        var promise = editor.document.toFile("untitled", lt.Document.Writer.DocumentFormat.pdf); 
        var err = null; 
        promise.then(function (name) { }); 
        promise.catch(function (err) { 
            alert("There was an issue exporting the document. " + err); 
        }); 
    } 
} 

<!DOCTYPE html> 
<html> 
 
<head> 
    <meta charset="utf-8" /> 
    <title> Using the Keyboard and Movement Modules in the Document Editor</title> 
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script> 
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> 
 
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> 
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> 
 
 
    <script src="../../lib/Leadtools.js"></script> 
    <script src="../../lib/Leadtools.Annotations.Engine.js"></script> 
    <script src="../../lib/Leadtools.Annotations.Automation.js"></script> 
    <script src="../../lib/Leadtools.Document.js"></script> 
    <script src="../../lib/Leadtools.Document.Editor.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="../css/examples.css"> 
 
    <script src="../../typescript/bundle.js"></script> 
</head> 
 
<body> 
    <div> 
        <div id="title"> 
            Using the Keyboard and Movement Modules in the Document Editor 
        </div> 
        <ul id="menu"> 
            <li><a id="importBtn" class="rightLineBorder">Import Document</a></li> 
            <li><a id="exportBtn" class="rightLineBorder">Export Document</a></li> 
            <li><a id="exampleBtn" class="rightLineBorder">Run Example</a></li> 
            <li><a id="addShortcutBtn" class="rightLineBorder" style="display: none;">Add Shortcut</a></li> 
            <li><a id="removeShortcutBtn" class="rightLineBorder" style="display: none;">Remove Shortcut</a></li> 
            <li><a id="showShortcutBtn" class="rightLineBorder" style="display: none;">Show Shortcut</a></li> 
            <li><a id="selectStartBtn" class="rightLineBorder" style="display: none;">Select to Line Start</a></li> 
            <li><a id="selectEndBtn" class="rightLineBorder" style="display: none;">Select to Line End</a></li> 
 
        </ul> 
    </div> 
    <div id="editorWrapper" oncontextmenu="return false;"> 
        <div class="inner-body" id="content"> 
        </div> 
    </div> 
</body> 
<script> 
    //creates the onclick functions for the buttons and hides/shows them when necessary 
    window.onload = () => { 
        const button = document.getElementById('exampleBtn'); 
        const example = new window.examples.KeyboardMovementModule(); 
 
        const addShortcutBtn = document.getElementById('addShortcutBtn'); 
        const removeShortcutBtn = document.getElementById('removeShortcutBtn'); 
        const showShortcutBtn = document.getElementById('showShortcutBtn'); 
        const selectStartBtn = document.getElementById('selectStartBtn'); 
        const selectEndBtn = document.getElementById('selectEndBtn'); 
 
        button.onclick = () => { 
 
            example.run(); 
            button.style.display = "none"; 
            addShortcutBtn.style.display = "block"; 
            removeShortcutBtn.style.display = "block"; 
            showShortcutBtn.style.display = "block"; 
            selectStartBtn.style.display = "block"; 
            selectEndBtn.style.display = "block"; 
 
        } 
        addShortcutBtn.onclick = () => { 
            example.addShortcut(); 
        } 
        removeShortcutBtn.onclick = () => { 
            example.removeShortcut(); 
        } 
        showShortcutBtn.onclick = () => { 
            example.showShortcut(); 
        } 
        selectStartBtn.onclick = () => { 
            example.highlightStart(); 
        } 
        selectEndBtn.onclick = () => { 
            example.highlightEnd(); 
        } 
    }; 
</script> 
 
</html> 

html { 
    height: 100%; 
} 
 
body { 
    height: 100%; 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
} 
 
#title { 
    padding: 10px; 
    font-size: 24px; 
} 
 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 
 
#editorWrapper { 
    border-top: 1px solid black; 
    height: 95%; 
} 
 
#content { 
    height: 100%; 
} 
 
li { 
    float: left; 
} 
 
    li a { 
        display: block; 
        text-align: center; 
        padding: 14px 16px; 
        text-decoration: none; 
        cursor: pointer; 
        user-select: none; 
        font-weight: bold; 
    } 
 
    li:first-child { 
        margin-left: 5px; 
    } 
 
.rightLineBorder { 
    border-right: 1px black solid; 
} 
 
li a:hover { 
    background-color: lightblue; 
}