@nodeject/ui-components/esm/rich-text-editor/RichTextEditor.module.less

UI library for non-trivial components

.richTextEditorContainer {
    display: grid;
    grid-template-areas: 'richTextEditor' 'secondToolbar';
    grid-template-rows: 1fr auto;
    background: white;
    border: 1px solid gray;
    border-radius: 3px;

    .richTextEditor {
        grid-area: richTextEditor;

        :global {
            // // Get's rid of licence issue ;)
            .fr-wrapper
                > div[style='z-index:9999;width:100%;position:relative'] {
                display: none;
            }
            .fr-wrapper {
                & > :not(.fr-view) :not(.fr-placeholder) {
                    display: none;
                }
            }

            // // get rids of power by
            .fr-view *[data-f-id] {
                display: none;
            }

            // we unset background color so we can control it ourselves
            .fr-toolbar {
                background: unset;
            }
            .fr-box.fr-basic .fr-wrapper {
                background: unset;
                border: unset;
                border-radius: unset;
            }

            .fr-box.fr-basic.fr-bottom {
                display: grid;
                grid-template-areas: 'textarea' 'toolbar';

                .fr-wrapper.show-placeholder {
                    grid-area: textarea;
                }
                .fr-toolbar.fr-desktop.fr-bottom.fr-basic {
                    grid-area: toolbar;
                    background-color: rgba(209, 213, 219, 1);
                    border-bottom-left-radius: 3px;
                    border-bottom-right-radius: 3px;
                    border-top: 1px solid rgba(156, 163, 175, 1);
                }
            }

            .fr-toolbar.fr-bottom .fr-newline {
                background-color: inherit;
            }

            .fr-toolbar.fr-bottom.fr-toolbar-open .fr-newline {
                // display: none;
                padding-top: 32px;
            }
            .fr-box.fr-basic.fr-top .fr-wrapper {
                border: unset;
            }

            #logo {
                display: none;
            }
            .fr-toolbar {
                border: unset;
                border-radius: unset;
                // background-color: rgba(226, 232, 240, var(--bg-opacity));
            }
            .fr-quick-insert {
                display: none;
            }
            .fr-box.fr-basic .fr-element {
                padding: 0.5rem;
                min-height: unset;
            }

            .fr-toolbar.fr-top {
                border-radius: unset;
                -moz-border-radius: unset;
                -webkit-border-radius: unset;
            }
            .fr-toolbar .fr-command.fr-btn svg.fr-svg,
            .fr-popup .fr-command.fr-btn svg.fr-svg,
            .fr-modal .fr-command.fr-btn svg.fr-svg {
                height: 18px;
            }
            .fr-toolbar .fr-command.fr-btn,
            .fr-popup .fr-command.fr-btn,
            .fr-modal .fr-command.fr-btn {
                height: unset;
            }
            .fr-toolbar .fr-command.fr-btn i,
            .fr-toolbar .fr-command.fr-btn svg,
            .fr-popup .fr-command.fr-btn i,
            .fr-popup .fr-command.fr-btn svg,
            .fr-modal .fr-command.fr-btn i,
            .fr-modal .fr-command.fr-btn svg {
                margin: 4px 3px;
            }
            .fr-toolbar .fr-more-toolbar.fr-expanded {
                height: 32px;
            }
            .fr-toolbar .fr-command.fr-btn svg path,
            .fr-popup .fr-command.fr-btn svg path,
            .fr-modal .fr-command.fr-btn svg path {
                fill: rgba(0, 0, 0, 0.65);
            }
            .second-toolbar {
                display: none;
                border: unset;
                border-radius: unset;
                -moz-border-radius: unset;
                -webkit-border-radius: unset;
            }
        }
    }

    .secondToolbar {
        grid-area: secondToolbar;
        border: none;
    }
}