index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Test editorjs 360 media</title>
        <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.27"></script>
        <script src="https://cdn.jsdelivr.net/npm/@editorjs/image"></script>

        <script>
            // select between dev-build.js and bundle.js based on localhost or not
            const isLocal = location.hostname === 'localhost' || location.hostname === '127.0.0.1'
            const script = document.createElement('script')
            window.isScriptLoadded = false

            script.onload = () => {
                window.isScriptLoadded = true
            }
            if (isLocal) {
                script.src = './dist/dev-build.js'
            } else {
                script.src = './dist/bundle.js'
            }
            document.head.appendChild(script)
        </script>

        <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
        <div id="editor" style="background-color: antiquewhite"></div>
        <button id="toggleReadOnly">Toggle readOnly</button>

        <!-- <input id="loadFile" type="file" accept=".glb,.gltf,.fbx,.obj" style="width: 300px; height: 40px; color: white" />
        <div id="output"></div>
        <input
            id="textureFiles"
            type="file"
            multiple="true"
            accept=".mtl,.jpg"
            placeholder="MTL file"
            style="width: 160px; height: 40px; color: aliceblue"
        /> -->
        <!-- <input id="folder" type="file" webkitdirectory directory /> -->
        <script defer>
            start()
            // document.addEventListener('DOMContentLoaded', start)

            function getConfig() {
                return {
                    // viewerStyle: {
                    //     width: '100%',
                    //     height: '500px',
                    //     borderRadius: '8px',
                    //     backgroundColor: '#f0f0f0',
                    // },
                    formatsAllowed: ['glb', 'gltf', 'obj'],
                    enableDownload: true,
                    /**
                     * TODO add this in documentation
                     * Function to handle file uploads
                     * For any 3d format that requires relative files& textures, you should either preserve the relative paths in your upload solution using file.webkitRelativePath
                     * or modify the 3D file to point to the uploaded files as shown in the example below for glTF files. (Since i am using browser local URLs here, I don't have relative paths support )
                     * @param {File} mainFile The main 3D model file (glb, gltf, obj, etc.)
                     * @param {File[]} secondaryFiles Additional files (textures, bin files, images, etc.)
                     */
                    async uploadFiles(mainFile, secondaryFiles) {
                        console.log('🚀 ~ getConfig ~ secondaryFiles:', secondaryFiles)
                        console.log('🚀 ~ getConfig ~ mainFile:', mainFile)
                        const isSingleFileObject = secondaryFiles.length === 0
                        if (!isSingleFileObject) {
                            const mainCommonFolderName = mainFile.webkitRelativePath
                                ? mainFile.webkitRelativePath.replace(/\/[^\/]*$/, '')
                                : ''
                            const fileMap = new Map()
                            for (const file of secondaryFiles) {
                                const url = URL.createObjectURL(file)
                                fileMap.set(file.webkitRelativePath?.replace(mainCommonFolderName + '/', '') || file.name, url)
                            }

                            const gltfFile = mainFile
                            const gltfText = await gltfFile.text()
                            const gltfJson = JSON.parse(gltfText)
                            for (const buffer of gltfJson.buffers) {
                                buffer.uri = fileMap.get(buffer.uri)
                            }
                            for (const image of gltfJson.images) {
                                image.uri = fileMap.get(image.uri)
                            }

                            const newGltfBlob = new Blob([JSON.stringify(gltfJson)], { type: 'model/gltf+json' })
                            const gltfUrl = URL.createObjectURL(newGltfBlob)

                            // Your file uploading logic here
                            const extension = mainFile.name.split('.').pop().toLowerCase()

                            return new Promise((resolve) => {
                                setTimeout(() => {
                                    resolve({
                                        mainFile: {
                                            url: gltfUrl,
                                            extension,
                                        },
                                        secondaryFiles: Array.from(fileMap).map(([name, url]) => ({
                                            url,
                                            extension: name.split('.').pop().toLowerCase(),
                                        })),
                                        viewer: 'modelviewer', //'threejs', // or 'modelviewer'
                                    })
                                }, 1500)
                            })
                        } else {
                            // Single file object upload example (glb, fbx, etc.)
                            const mainFileUrl = URL.createObjectURL(mainFile)
                            const extension = mainFile.name.split('.').pop().toLowerCase()
                            return new Promise((resolve) => {
                                setTimeout(() => {
                                    resolve({
                                        mainFile: {
                                            url: mainFileUrl,
                                            extension,
                                        },
                                        secondaryFiles: [],
                                        viewer: 'modelviewer', //'threejs', // or 'modelviewer'
                                    })
                                }, 1500)
                            })
                        }
                    },
                }
            }
            function start() {
                if (!window.isScriptLoadded) {
                    console.log('waiting for script to load...')
                    setTimeout(start, 200)
                    return
                }
                // document.body.style.opacity = '1'
                const Editorjs3DMedia = self.Editorjs3DMedia
                const dataLocation = 'editorjs-data-testing'

                const defaultData = {
                    blocks: [
                        {
                            type: 'paragraph',
                            data: {
                                text: 'This is an example of Editorjs 3D Media Block. You can upload and display 3D models in your Editorjs content.',
                            },
                        },
                        {
                            type: 'media3d',
                            data: {
                                file: {
                                    url: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/BoomBox/glTF-Binary/BoomBox.glb',
                                    extension: 'glb',
                                },
                                caption: 'Paste a public url to a 3D model or upload your own file to display it here.',
                                viewer: 'modelviewer',
                                attributes: {},
                                secondaryFiles: [],
                            },
                        },
                    ],
                }
                // return
                let data = defaultData
                try {
                    const storedItem = sessionStorage.getItem(dataLocation)
                    if (storedItem) data = JSON.parse(storedItem) ?? defaultData
                } catch {}
                const editor = new EditorJS({
                    holder: 'editor',
                    tools: {
                        media3d: {
                            class: Editorjs3DMedia,
                            config: getConfig(),
                        },
                    },
                    // readOnly: true,
                    onChange(api) {
                        api.saver.save().then((data) => {
                            // remove media3d blocks
                            data.blocks = data.blocks.filter((block) => block.type !== 'media3d')
                            sessionStorage.setItem(dataLocation, JSON.stringify(data))
                        })
                    },
                    data,
                    i18n: {
                        messages: {
                            tools: {
                                media: {
                                    Caption: 'Captiune',
                                },
                            },
                        },
                    },
                })
                document.getElementById('toggleReadOnly').addEventListener('click', () => {
                    editor.readOnly.toggle()
                })
            }
        </script>
        <footer>
            <p style="text-align: center; margin-top: 2em; color: gray">
                Files are temporarily saved in browser memory. They will be lost when you refresh the page.
            </p>
            <p style="text-align: center; margin-top: 2em; color: gray">
                You can find free example files to test the 3D media block at
                <a href="https://github.khronos.org/glTF-Sample-Viewer-Release/" target="_blank">glTF-Sample-Viewer-Release</a>
            </p>
        </footer>
    </body>
</html>