Tampermonkey helper script for editing TECCOM KB articles on

teccom-kb-edit-links.user.js

// ==UserScript==
// @name         TECCOM: Edit Knowledgebase
// @namespace    https://theeventscalendar.com/
// @version      0.0.1
// @description  Add edit links for knowledgebase articles
// @author       lelandf
// @match        https://theeventscalendar.com/knowledgebase/guide/*
// @match        https://theeventscalendar.com/knowledgebase/k/*
// @downloadURL  https://gist.github.com/lelandf/83f77a2877d81b6e859d03044677e2b6
// @updateURL    https://gist.github.com/lelandf/83f77a2877d81b6e859d03044677e2b6
// ==/UserScript==

( () => {
    const shortlink = document.querySelector( 'link[rel="shortlink"]' );

    if ( ! shortlink ) {
        console.error( 'Tell Leland he needs to figure out another way to find the current post ID.' ) 
        return;
    }

    const { href } = shortlink;

    const splitString = '/?p=';

    const postID = href.substring( href.indexOf( splitString ) + splitString.length );
    const siteURL = href.substring( 0, href.indexOf( splitString ) );

    const editLink = ( yupForClassic ) => {
        let link = `https://theeventscalendar.com/knowledgebase/wp-admin/post.php?post=${ postID }&action=edit&classic-editor__forget`;

        if ( 'yup' === yupForClassic ) {
            link = `${ link }&classic-editor`;
        }

        return link;
    };

    const headHTML =
    `<style>
    .teccom-edit,
    .teccom-edit__link {
        padding: 16px;

    }

    .teccom-edit {
        background: #fff;
        bottom: 5%;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
        display: flex;
        flex-direction: column;
        grid-gap: 8px;
        position: fixed;
        right: 5%;
        text-align: center;
    }

    .teccom-edit__link {
        background: #334aff;
        color: #fff !important;
        font-weight: bold;
    }

    .teccom-edit__link:hover {
        background: #19257f;
    }
    </style>`;

    const bodyHTML =
    `<div class="teccom-edit">
        <a class="teccom-edit__link" href="${ siteURL }/wp-admin/" target="_blank">Open /wp-admin/</a>
        <a class="teccom-edit__link" href="${ editLink( 'yup' ) }" target="_blank">Edit in Classic Editor</a>
        <a class="teccom-edit__link" href="${ editLink() }" target="_blank">Edit in Block Editor</a>
    </div>`;

    document.head.insertAdjacentHTML( 'beforeend', headHTML );
    document.body.insertAdjacentHTML( 'beforeend', bodyHTML );
} )();