Hello, i'm trying to use kendo react pdf for my chrome extension, im using :

"@progress/kendo-drawing": "^1.16.3",
"@progress/kendo-licensing": "^1.2.2",
"@progress/kendo-react-pdf": "^5.2.0",

When i try to export like this:

const PDFtester = () => {
    const pdfExportComponent = React.useRef(null);

    const exportPDFWithComponent = () => {
        if (pdfExportComponent.current) {
            pdfExportComponent.current.save();
        }
    };

    return (
        <div>
            <div style={styles.switchButton}>
                <div className="setting-button justify-content-center">
                    <input onClick={exportPDFWithComponent} id="check-light-dark" className="ml-2"
                           type="button" value="Download stats" style={styles.font4}/>
                </div>
            </div>
            <div style={stylesHide.visuallyhidden}>
                <PDFExport
                    ref={pdfExportComponent}
                    paperSize="A4"
                    fileName="Narval Report"
                    title="Narval Report"
                >
                    <img src={ReactLogo} style={styles.img}/>
                    <h2 style={styles.font}>
                        Narval
                    </h2>
                </PDFExport>
            </div>
        </div>
    )
}

All the metadata of my saved document is weird characters: "þÿ"

i dont know why... so is u have a solution..

I would like to be able to pass props other than view to custom toolbar components. Here is an example of a custom title tip I would like to add to the button. Any idea how I would do something like this?

https://stackblitz.com/edit/react-nmy4tg?file=app/backgroundColorTool.jsx

Is it possible to add the character counter or do some kind of character count with the React Editor?

when adding a hyperlink it is not showing cursor: pointer and the link is not opening when clicking on it. Happening here in this editor.

test

I am losing underline and strikethrough when I change font size, foreColor or backColor. I am changing the default font and font size in onMount.

const styles = `p {font-family: EYInterstate; font-size: 14px;}`;
const onMount = (event) => {
   const iframeDocument = event.dom.ownerDocument;
   const style = iframeDocument.createElement('style');
   style.appendChild(iframeDocument.createTextNode(styles));
   iframeDocument.head.appendChild(style);
};

Not sure if that is causing this. Any ideas?

when I use the align buttons the spaces in my text is getting removed. I'm not sure why. I have changed the default font in onMount. I don't think that should matter.

before

after

i am logging and saving the text with onChange and it seems to be missing the last character.

any idea what I'm doing wrong?

                  <DropDownList
                    style={{ height: "30px" }}
                    defaultValue="Select unit..."
                    textField='name'
                    value={unitsPressureSelected}
                    dataItemKey='id'
                    onChange={(e) => {
                      console.log("here")
                      setUnitsPressureSelected(e.target.value);
                    }}
                    data={unitsPressure}
                  />

Hello! I'm trying to implement the following dropdown but the default value is not visible and I don't understand what's wrong. Could you give me a hint? Thanks! 

Rebeca.