GorvGoyl / Notion-Boost-browser-extension

Chrome & Firefox extension for Notion to add 20+ features like sticky outline, small text & full width by default, hide comments & help button, bolder text etc. Download here: https://gourav.io/notion-boost
https://gourav.io/notion-boost
GNU General Public License v3.0
505 stars 42 forks source link

Feature request: CodeBlocks add attribute ‘max-height’ #30

Open StoneTiny opened 3 years ago

StoneTiny commented 3 years ago

I'm a programmer,i always use “code blocks”,sometimes the code to long,then the “code blocks” very height, I want to turn on or off 'max-height' with Notion boost plug,I have written some code and have implemented this function, but I am not very good at Javascript and css,I am not very good at english,thank you very much。

console.log('Notion Custom CodeBlock Max Height~')

const body = document.getElementsByClassName('notion-body').item(0);
if (body) {

    const config = {childList: true};

    const callback = () => {
        console.log('notion-body childList has changed')
        this.content()

    };

    const observer = new MutationObserver(callback);

    observer.observe(body, config);

    // observer.disconnect();
}

const callback = () => {
    console.log('notion-page-content childList has changed')
    this.setMaxHeight()
};

const observer = new MutationObserver(callback);

function content() {
    const content = document.getElementsByClassName('notion-page-content').item(0)
    if (content) {
        this.setMaxHeight()

        const config = {childList: true};

        observer.observe(content, config);

        // observer.disconnect();
    }
}

function setMaxHeight() {
    const content = document.getElementsByClassName('notion-page-content').item(0)
    if (!content) {
        return
    }
    const notionCodeBlocks = content.childNodes
    for (let i = 0; i < notionCodeBlocks.length; i++) {
        const notionCodeBlock = notionCodeBlocks[i]
        const classAttribute = notionCodeBlock.getAttribute('class')
        if (classAttribute.indexOf('notion-code-block') !== -1) {
            notionCodeBlock.style.maxHeight = '300px'
            notionCodeBlock.style.overflow = 'auto'

            const firstChild = notionCodeBlock.childNodes[0]
            if (firstChild) {
                firstChild.style.maxHeight = '300px'
                firstChild.style.overflow = 'auto'

                const firstGrandson = firstChild.childNodes[0]
                firstGrandson.style.maxHeight = '300px'
                firstGrandson.style.overflow = 'auto'
            }
        }
    }
}
StoneTiny commented 3 years ago

I found an easy way

.notion-selectable.notion-code-block {
    max-height: 300px;
    overflow: auto;
}