绿皮实现文档渲染前置挂件槽

savor 主题实现了显示文档修改时间，就像这样：

稍微想了下，好像略微改一下代码就能够实现显示挂件了；

原本渲染修改时间的挂件是这样的：

/**----------------------------------为打开文档的标题下显示文档创建日期----------------------------------*/

function showDocumentCreationDate() {

    setInterval(DocumentCreationDate, 300);
}


function DocumentCreationDate() {

    var openDoc = document.querySelectorAll(".layout-tab-container>.fn__flex-1.protyle:not(.fn__none):not([CreatTimeOK])");
    var allDocumentTitleElement = [];
    for (let index = 0; index < openDoc.length; index++) {
        const element = openDoc[index];
        element.setAttribute("CreatTimeOK", true);
        allDocumentTitleElement.push(element.children[1].children[1].children[1]);
    }

    for (let index = 0; index < allDocumentTitleElement.length; index++) {
        const element = allDocumentTitleElement[index];
        var documentCreatTimeElement = creatTimeSpanElement(element.parentElement);
        documentCreatTimeElement.innerText = "获取文档创建日期中……";
        tilteWhlie(element, documentCreatTimeElement);
    }
}

function tilteWhlie(element, documentCreatTimeElement) {
    var setID = setInterval(() => {
        var time = getDocumentTime(element);
        if (time != "") {
            documentCreatTimeElement.innerText = time;
            clearInterval(setID);
        };
    }, 3000);
}
​

毛过来稍微修改一下

/**-- 在所有文档前面加上一个挂件插槽--**/
function showPreviousWidgetsSlot() {
    setInterval(DocumentShowPreviousWidget, 300);
}
DocumentShowPreviousWidget()
showPreviousWidgetsSlot()
function DocumentShowPreviousWidget() {
    var openDoc = document.querySelectorAll(".layout-tab-container>.fn__flex-1.protyle:not(.fn__none)");
    var allDocumentTitleElement = [];
    for (let index = 0; index < openDoc.length; index++) {
        const element = openDoc[index];
        element.setAttribute("withPreviousWidgets", true);
        allDocumentTitleElement.push(element.children[1].children[1].children[1]);
    }

    for (let index = 0; index < allDocumentTitleElement.length; index++) {
        const element = allDocumentTitleElement[index];

        if ( !element.parentElement.querySelector('.previous-widgets-slot')&&element.parentElement.parentElement.querySelector('[data-node-id]')) {
            var documentPreviousWidgetsSlotElement = CreatePreviousWidgetsSlot(element.parentElement);
            element.parentElement.appendChild(documentPreviousWidgetsSlotElement)
        }
 
    }
}
function CreatePreviousWidgetsSlot(element) {
    let cloneNode = element.parentElement.querySelector(".protyle-wysiwyg.protyle-wysiwyg--attr").cloneNode(false)
    cloneNode.innerHTML = `
    <div class="iframe-content">
        <iframe src="/widgets/${cloneNode.getAttribute('custom-previousWidget') || 'listChildDocs'}/" ></iframe>
    </div>
    `
    let id = element.parentElement.parentElement.querySelector('[data-node-id]').getAttribute('data-node-id')
    cloneNode.setAttribute('data-node-id',id)
    cloneNode.setAttribute('contenteditable',false)
    cloneNode.setAttribute('style', "padding: 0;")
    let div = document.createElement('div')
    div.setAttribute('class', 'previous-widgets-slot')
    div.setAttribute('contenteditable', false)
    div.setAttribute('style', "padding: 0;")
    let root = div.attachShadow({ mode: 'open' })
    root.innerHTML = `
        <style>
            iframe{
                width:100%;
                min-height:400px;
                border:none;
                margin:0;
                padding:0
            }
        </style>
        `
    root.appendChild(cloneNode)
    return div
};
​

ok，完工，很多老哥说的默认显示子文档列表就成了，改文档的 custom-previousWidget 属性可以换成其他挂件，效果像这样：

或者是这样:

这玩意是之前写挂件教程的时候鼓捣出来的，要的话看这里）：

思源笔记折腾记录-简单挂件-更美观地展示属性 - 知乎 (zhihu.com)

教程本身也还在写所以也就是个半成品。

高度好像没有弄很好，用的时候自己调整一下吧。