Add support for Lucidchart

[hampussanden]

I would really like to have support for embeddings of the tool https://www.lucidchart.com/. It should like this example: https://help.nuclino.com/a5bfb729-embed-diagrams-from-lucidchart

Let me know if you if you need more info or a link to an example chart .

[craftzdog]

I've personally never used Lucidchart and don't know how popular it is to decide if I should support it. Pull requests would be appreciated!

[0NotApplicable0]

I don't think this is possible due to Lucidchart CSP settings. Following this to allow embeds on a document you then get some code:

<div style="width: 640px; height: 480px; margin: 10px; position: relative;"><iframe allowfullscreen frameborder="0" style="width:640px; height:480px" src="https://lucid.app/documents/embedded/75ce5af1-9646-45da-883b-70e0ed447672" id="V7HPwtSW.1Zv"></iframe></div>

Then if you pull out the URL https://lucid.app/documents/embedded/75ce5af1-9646-45da-883b-70e0ed447672

And try to use it, this error shows up: Refused to frame 'https://lucid.app/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https: http:".

If anyone has any ideas/more knowledge on CSP?

Here is my code.

import * as React from 'react'
import {useRef, useState} from 'react'

const BASE_URL = 'https://lucid.app/'
const EMBED_PROVIDER_URL = 'https://lucid.app/documents/embedded/'

// https://lucid.app/documents/embedded/75ce5af1-9646-45da-883b-70e0ed447672

export function test(url) {
    return url.startsWith(BASE_URL)
}

export default function Lucidchart(props) {
    const {href} = props
    const contentFrame = useRef()
    const [frameId] = useState('lucidchart-' + Math.random())
    const chartId = href.substring(href.lastIndexOf('/') + 1);
    const url = `${EMBED_PROVIDER_URL}${chartId}`

    console.log("ChartID: " + chartId);
    console.log("URL: ", url);

    return (
        // <div style={{width: "640px", height: "480px", margin: "10px", position: "relative"}}>
        //     <iframe
        //         allowFullScreen
        //         frameBorder="0"
        //         style={{width: "640px", height: "480px"}}
        //         className="embed-frame"
        //         ref={contentFrame}
        //         src={url}
        //         id={frameId}
        //     >
        //     </iframe>
        // </div>

        <div style={{width: "640px", height: "480px", margin: "10px", position: "relative"}}>
            <iframe allowFullScreen frameBorder="0" style={{width: "640px", height: "480px"}}
                    src="https://lucid.app/documents/embedded/75ce5af1-9646-45da-883b-70e0ed447672"
                    id="V7HPwtSW.1Zv"></iframe>
        </div>
    )
}

[craftzdog]

that is because Electron's origin URL protocol is file:. So, you have to host a page that loads the embedded iframe...which sounds awkward though.

[0NotApplicable0]

Hmm, okay. I guess I can try some things, see if I can get it to work.