lucent-laravel/front/js/svelte/libs/Tinymce_backup_manager.svelte

<script>
    import { onMount, onDestroy, tick } from "svelte";

    import tinymce from "tinymce/tinymce";
    import "tinymce/models/dom";
    import "tinymce/icons/default";
    import "tinymce/themes/silver";
    import "tinymce/skins/ui/oxide/skin.css";
    import contentUiSkinCss from "tinymce/skins/ui/oxide/content.css";

    import "tinymce/plugins/link";
    import "tinymce/plugins/code";
    import "tinymce/plugins/image";
    import "tinymce/plugins/table";
    import "tinymce/plugins/codesample";
    import "tinymce/plugins/media";

    import "tinymce/plugins/lists";
    import "tinymce/plugins/autoresize";
    import "tinymce/plugins/wordcount";
    import BrowseModal from "../records/elements/BrowseModal.svelte";

    export let schemas;
    export let schema;
    export let field;
    export let value = "";
    export let additionalConfig = {};
    let browseModal;
    let lastVal = "";
    let textareaEl;
    let activeEditor;
    let editorWrapper;
    const plugins = [
        "autoresize",
        "code",
        "image",
        "table",
        "codesample",
        "link",
        "lists",
        "media",
        "wordcount",
    ];
    const toolbar =
        "bold italic underline strikethrough removeformat  | link image fileManager | subscript superscript bullist numlist   media codesample table code wordcount  blockquote indent outdent blocks";

    onDestroy(() => {
        if (activeEditor) {
            activeEditor.destroy();
        }
    });

    onMount(() => {
        const config = {
            target: textareaEl,
            toolbar_mode: "sliding",
            toolbar_sticky: true,
            skin: false,
            content_css: false,
            content_style: contentUiSkinCss.toString(),
            branding: false,
            inline: false,
            plugins: plugins,
            contextmenu: false,
            menubar: false,
            statusbar: false,
            entity_encoding: "raw",
            convert_urls: false,
            toolbar: toolbar,
            image_caption: true,
            relative_urls: false,
            browser_spellcheck: true,
            max_height: 600,
            // media_poster: false,
            // content_style:
            //     "body {font-family: 'Averta Std', sans serif; color: #152F77}",
            setup: function (editor) {
                activeEditor = editor;

                editor.on("init", function (e) {
                    editor.setContent(value ?? "");
                });

                // editor.on("blur", function (e) {
                //     let content = setImageDimensions(editor.getContent());
                //     dispatch("editorBlur", content);
                //     editorWrapper.classList.remove("editorFocus");
                //     // return false;
                // });

                // editor.on("focus", function (e) {
                //     editorWrapper.classList.add("editorFocus");
                //     // return false;
                // });

                editor.on("change input undo redo", function (e) {
                    lastVal = editor.getContent();
                    if (lastVal !== value) {
                        value = lastVal;
                    }
                });

                editor.ui.registry.addMenuButton("fileManager", {
                    icon: "upload",
                    fetch: (callback) => {
                        const items = field.collections.map((c) => {
                            return {
                                type: "menuitem",
                                text:
                                    schemas.find((s) => s.name == c).label ??
                                    "Schema missing",
                                onAction: () => {
                                    openBrowseModal(c);
                                },
                            };
                        });
                        callback(items);
                    },
                });
            },
        };

        tinymce.init({ ...config, ...additionalConfig });
    });

    function openBrowseModal(aschema) {
        browseModal.open(aschema);
    }

    async function insert(e) {
        e.preventDefault();

        const recordsToInsert = e.detail.records;
        let fileSchema = schemas.find(
            (s) => s.name === recordsToInsert[0]._sys.schema
        );
        let contentTonInsert = recordsToInsert
            .map((r) => {
                if (r._file.mime.startsWith("image")) {
                    let fileUrl =
                        fileSchema.objectStorageProxy + "/" + r._file.path;
                    return `<img src="${fileUrl}" alt="${r._file.path}" width="${r._file.width}" height="${r._file.height}" />`;
                } else {
                    let fileUrl =
                        fileSchema.objectStorageUrl + "/" + r._file.path;
                    return `<a href="${fileUrl}" title="${r._file.path}">${r._file.path}</a>`;
                }
            })
            .join("<br />");

        activeEditor.insertContent(contentTonInsert);
        await tick();
        browseModal.close();
    }
</script>

<div bind:this={editorWrapper} class="tox-wrapper">
    <div class="form-control" bind:this={textareaEl}>
        {@html value}
    </div>
</div>

{#if field && schema}
    <BrowseModal bind:this={browseModal} on:insert={insert} />
{/if}

<style>
    :global(.tox:not(.tox-tinymce-inline) .tox-editor-header) {
        background-color: #fff;
        border-bottom: 1px solid #ced4da;
        box-shadow: none;
        padding: 4px 0;
        transition: box-shadow 0.5s;
    }

    :global(.tox-tinymce) {
        border: 1px solid #ced4da;
    }
</style>