editcontent.html

<style>

[contenteditable="true"] {

    -webkit-user-select: text;
    user-select: text;
}

.editBox {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    /* height: inherit; */
    /* background-color:inherit; */
    color: black;

    vertical-align: text-top;

    border: none;
    outline: none !important;

    cursor: text !important;

    padding-left: 3px;

    z-index: 9999;

    overflow: auto;

}

.section:has(.synopsis.isBeingEdited):hover {

    color: unset !important;

}

html[data-outdoors='1'] .editBox:not(.inSection) {

    background: white !important;
    color: black !important;

}

.editBox::-webkit-scrollbar{
    display: none;
}

.editBox::-webkit-selection,
.editBox::selection {
    /* background-color: #02a7ff; */
    background-color: hsl(201, 100%, 40%);
    color: #fff;

    padding: 2px;
}

.inSection.editBox {

    /* white-space: nowrap; */
    background: black !important;

    text-transform: uppercase;
    /* border-radius: 4px 0 0 0 !important; */

}

.inScene.editBox{

    /* white-space: nowrap; */

    /* height: calc(14px * var(--fontSizeFactor)) !important; */
    /* margin-top: 2px !important; */
    text-transform: uppercase;
    background: black !important;
    color: white !important;
}

/* .sectionCards .inScene.editBox{

    height: calc(19px * var(--fontSizeFactor)) !important;
    
    border-radius: 4px 4px 0 0 !important;    
    border-top: 2px solid black !important;
    
} */

.inSynopse.editBox{

    --bkg: rgba(255,255,255,0.5);

    color: black;
    /* background: white !important; */
    /* background: linear-gradient(90deg, transparent, transparent 14px, var(--bkg) 14px, var(--bkg) calc(100% - 3px), transparent calc(100% - 3px)) !important;  */
    /* background: none !important; */
    border-radius: 3px !important;

    /* border: 2px black solid !important; */
    /* box-shadow: inset 1px 1px 3px rgba(0,0,0,0.7); */


    height: auto;
}

.indexcards .inSynopse.editBox{

    margin-top: -1px !important;
    margin-left: -1px !important;

}

.inAct.editBox{

    text-transform: uppercase;
    background: var(--pageBackground) !important;
    color: white !important;

}

.inNote.editBox{

    color: lime;
    z-index: 9999999;
    border: 10px solid gold;


}

.synopsis.isBeingEdited {
    color: rgba(0,0,0,0) !important; 
}

#flexiContainer.section:has(.synopsis.isBeingEdited) .synopsis.isBeingEdited::before,
.synopsis.isBeingEdited::before{
    color: rgba(0,0,0,1 ) !important; 
    opacity: 1 !important;
}


.synopsis.isBeingEdited:hover{
    background-image: none !important;
}

.indexcards .synopsiscontainer:has(.isBeingEdited){

height: auto !important;

overflow: hidden !important;
scroll-margin: 0px;

}

#flexiContainer.indexcards:has(.synopsis.isBeingEdited) .section:not(.level1):not(:has(.isBeingEdited)):not(.section:hover),
#flexiContainer.indexcards:has(.synopsis.isBeingEdited) .scene:not(.level1):not(:has(.isBeingEdited)):not(.scene:hover){

    opacity: 0.6 !important;

}


</style>



<script>

    var initialDraggability

function editContent(ev, elementToEdit) {   

    mylog("doubleclicked " + ev?.target?.classList || elementToEdit?.classList)
    
    if(weAreCurrentlyEditingText || document.getElementById('outOfSyncDiv').style.display == 'block'){return}
    //the OutOfSync check above disallows editing if outline is updating. So as not to edit out-of-date data.
    
    if(ev){ev.stopImmediatePropagation()}
    $(".isBeingEdited")?.classList.remove("isBeingEdited")
    $id("editBox")?.remove()

    theElement = elementToEdit?.querySelector(".section-heading, .sceneheading, .notepanelNote, .expandedNote") || ev.target
        let sceneSize = false
            if (theElement.closest(".scene")) sceneSize = window.getComputedStyle(theElement.closest(".scene")) || false
        let sceneHeight = sceneSize?.height || false

    let editBoxDelay = 0

        //this sends us to the new synopsisEditor!
            //NOTE: any code for synopsis editing still lingering below WILL produce an error
            //because it still expects synopsis to be outline elements. Remove it. 
        if((theElement.classList.contains("synopsis") || theElement.classList.contains("synopsiscontainer"))){

            if(!documentSetting.indexCardMode && documentSetting.scenesAreProportional){

                alertThis("Editing synopsis in this view is disabled", "By its nature, Flexible view hides content all the time which makes it unsuitable for inline editing.\n\nOn the other hand, in the FIXED and INDEX CARD views, editing synopsis is easier than ever.\n\nSwitch to one of those views by hitting F or X and edit the card from there.")
                return
            }

            if(documentSetting.indexCardMode && documentSetting.autoWiden && !theElement.closest(".level1").classList.contains("wider")) {
                makeWider(theElement)
                editBoxDelay = 250
            }
            setTimeout(function(){
                indexCardEditor(theElement, ev)
            }, editBoxDelay)
            return

        }

    mylog("before if dots")

    //to prevent editing dots:
    if( [...$id("flexiContainer").classList].includes("indexcards")
        &&
        [...theElement.classList].includes("scene")){
            mylog("checking inside to see that parent is expanded")
            let theParent = theElement.parentNode
            let a = [...theParent.classList]
            while (!a.includes("section")){
                theParent = theParent.parentNode
                a = [...theParent.classList]
            }
            if(!a.includes("isExpanded")){
                return
            }
    }

    if(ev?.altKey || ev?.ctrlKey || ev?.metaKey){
        return
    }

    //return if trying to edit uneditable things
        if (!["section-heading", "sceneheading", "notepanelNote", "expandedNote"].some(allowedClass => theElement.classList.contains(allowedClass))){ //experimental 2023-01-08
            return
        }

    //return if trying to edit dimmed things
    if([...document.getElementById("flexiContainer").classList].includes("uncolorAllScenesBut")){
        if(colorsArray.some(color => [...theElement.classList].includes(color.toLowerCase()))){
            return
        }
    }

    if([...theElement.classList].includes("sluglineIsHidden")){
        Beat.call(`Beat.alert("Can't edit hidden text", "You are trying to edit the heading of a scene that's too small to fit on the screen.\\n\\nPlease edit directly in the document, or switch to non-flexible view (shortcut F) to see all scenes regardless of length.")`)
        return
    }

    mylog("past all the guard clauses, now setting weAreCurrentlyEditingText to true")
    //================================================================================

    initialDraggability = !(!theElement.draggable) //will freeze the value
    theElement.draggable = false

    weAreCurrentlyEditingText = true

    toggleCaptureKeypresses(false)
    document.addEventListener('keydown', editBoxListen)
    theElement.ondblclick=""
    theElement.classList.add("isBeingEdited")
    
    let currentOutlineCount = findOutlineCountFor(theElement)
    let theOldText = outline[currentOutlineCount]?.stringForDisplay
        if(["notepanelNote", "expandedNote"].some(noteclass => theElement.classList.contains(noteclass))){
            theOldText = theElement.innerText
        }

    if(document.getElementById('youAreHere')){
        document.getElementById('youAreHere').remove()
    }

    //time to let the editbox know what it is representing
        mylog("setting the KINDOF")
    
    let a = [...theElement.classList]
        let kindOf = ""
            if (a.includes("sceneheading")){
                kindOf = "inScene"
                theElement.classList.remove("isSelected")
                theElement.parentNode.classList.remove("isSelected")
            }
            if (a.includes("section-heading")){
                kindOf = "inSection"
                // theElement.parentNode.classList.add("isSelected")
                theElement.classList.remove("isSelected")
                theElement.parentNode.classList.remove("isSelected")
            }
            if ([...theElement.parentNode.classList].includes("level1")){
                kindOf = "inAct"
            }
            if (["notepanelNote", "expandedNote"].some(allowedClass => theElement.classList.contains(allowedClass))){
                kindOf = "inNote"
                theElement = theElement.querySelector("text")
                theOldText = theElement.innerText
            }
        
    mylog("the result is" + kindOf)

    // creating the editbox
    // NEW: after 220704, the rest is in a setTimeOut, and delayed if widen happens
    mylog("about to create the editBox")

    setTimeout(function(){

        let editBox = document.createElement("div")
            editBox.id = "editBox"
            editBox.draggable = false
            editBox.innerText = theOldText
            editBox.contentEditable = "true"
            editBox.classList.add("editBox")
            editBox.classList.add(kindOf)

        //copy sizes etc from original

            let sizes = theElement.getBoundingClientRect()
        
            let leftIndent = 0
                if($id("notepanel")?.classList?.contains("expanded") && kindOf != "inNote"){
                    leftIndent = $id("notepanel").getBoundingClientRect().width
                }

            let scrolledAmount = $id("flexiContainer").scrollTop
            if(documentSetting.scenesAreProportional && sceneHeight) theElement.closest(".scene").style.minHeight = sceneHeight
        
            $id("flexiContainer").appendChild(editBox)

            editBox.style.left = (sizes.left - flexiContainer.getBoundingClientRect().left) + "px"
            editBox.style.top = sizes.top + scrolledAmount + "px"
            editBox.style.width = sizes.width + "px"
            editBox.style.height = "auto" //testing auto height for all editing!
                // if($(".dualSceneLines") && kindOf == "inScene") editBox.style.height = "auto"
                // if($(".dualSectionLines") && kindOf == "inSection") editBox.style.height = "auto"

            editBox.style.whiteSpace = "normal"
            editBox.style.zIndex = 10000
            editBox.style.display = "block"
            editBox.style.opacity = "1"
        
        let elementCSS = window.getComputedStyle(theElement)

            editBox.style.color = elementCSS.color
                if (theElement.classList.contains("sceneheading")){
                    editBox.style.color = "black"
                }
                if (theElement.classList.contains("section-heading")){
                    editBox.style.color = "white"
                }
                if (theElement.classList.contains("section-heading") && !flexiContainer.classList.contains("allowLowerCaseSections")){
                    editBox.style.textTransform = "uppercase";
                }

            editBox.style.fontSize =  elementCSS.fontSize
            editBox.style.fontStyle = elementCSS.fontStyle 
            editBox.style.fontWeight =elementCSS.fontWeight
            editBox.style.lineHeight =elementCSS.lineHeight
            editBox.style.textAlign = elementCSS.textAlign 
            editBox.style.padding = elementCSS.padding
            editBox.style.paddingBottom = "0"
            editBox.style.border = elementCSS.border
            editBox.style.margin = elementCSS.margin
            if (documentSetting.indexCardMode) {
                editBox.style.borderRadius = elementCSS.borderRadius
            }else if(theElement.closest(".scene, .section")){
                editBox.style.borderRadius = window.getComputedStyle(theElement.closest(".scene, .section"))?.borderRadius
            }
            editBox.style.borderBottom = elementCSS.borderBottom

        mylog("editbox appended")

        let range = document.createRange();
            range.selectNodeContents(editBox);
        let sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);

        editBoxResizeObserver = new ResizeObserver(entries => {
            for (entry of entries){
                theElement.style.height = entry.contentRect.height + "px"
            }
        })
        editBoxResizeObserver.observe($(".editBox"))

        document.getElementById("editBox").focus()
        document.getElementById("editBox").addEventListener("blur", function(){
            let changed = (theOldText != editBox.innerHTML)
            editBoxResizeObserver.disconnect()
            theElement.style.height = ""
            event.preventDefault();
            exitEdit(theElement, changed)}) 

        mylog("eventlisteners appended")

        
    }, editBoxDelay) //ends the timeout

    console.trace()

}

function exitEdit(theElement, changesWereConfirmed) {
    mylog("exitedit")

    if(!weAreCurrentlyEditingText){return}
    weAreCurrentlyEditingText = false

    // let widenedColumns = $$(".wider")
    //     widenedColumns.forEach(element => {
    //         element.classList.remove("wider")
    //     });

    editBoxResizeObserver.disconnect()
    if(!changesWereConfirmed) theElement.style.height = ""
    if(theElement.closest(".scene")) theElement.closest(".scene").style.minHeight = ""

    coverContainer.classList.remove("lessBlur")
    coverContainer.style.display = "none"
    flexiContainer.classList.add("positionRelative")
    
    if(document.getElementById("editBox")){

        console.time("exitEdit")

        let newContent = JSON.stringify(document.getElementById("editBox").innerText) //freezes the value
        newContent = newContent.substr(1, newContent.length-2) //strips quotation marks
        
    
        if (newContent == /\\n\s*/){newContent = ""}
        if (newContent == "\\n" || newContent == "\\n "){newContent = ""}

        if ([...theElement.classList].includes("synopsis") && newContent != ""){ //should effectively delete the synopsis element if left empty
            //1. divide synopsis with line breaks into separate synopsis elements
            newContent = newContent.replace(/\\n/g, "\\n= ")

            //2. replace empty rows with nothingness!
            newContent = newContent.replace(/=\s*\\n/g, "") // = with spaces and then linebreak
            newContent = newContent.replace(/=\s*$/g, "") // = at the end of the string
        }
        if (!theElement.classList.contains("synopsis") && newContent == ""){ //scene headings and sections are named UNTITLED if empty
            newContent = "Untitled"
        }
        
        document.removeEventListener("keydown", editBoxListen)

        mylog("before checking if changes were confirmed")
        
        if(theElement && changesWereConfirmed){
            
            mylog("this means changes were confirmed = true")

            currentOutlineCount = findOutlineCountFor(theElement)

            let shownLine
            let line
            let startPosition
            let length

            // if(theElement.classList.contains("synopsis") && outline[currentOutlineCount].synopsis){

            //     //Second place to make better synopsis editing!

            //     shownLine = outline[currentOutlineCount].synopsis[theElement.dataset.synopsisNumber].stringForDisplay
            //     line = outline[currentOutlineCount].synopsis[theElement.dataset.synopsisNumber].string
            //     startPosition = outline[currentOutlineCount].synopsis[theElement.dataset.synopsisNumber].position
            //     length = outline[currentOutlineCount].synopsis[theElement.dataset.synopsisNumber].range.length

            // }else{

                shownLine = outline[currentOutlineCount].stringForDisplay.replace(/^#*\s*/, "")
                line = outline[currentOutlineCount].line.string
                startPosition = outline[currentOutlineCount].line.position
                length = outline[currentOutlineCount].line.range.length
            
            // }
            
            let resultingLine = line.replace(shownLine, newContent)
            if (shownLine == ""){
                resultingLine = line + newContent
            }

            if (theElement.classList.contains("heading") && !resultingLine.startsWith(".") && !resultingLine.startsWith("INT") && !resultingLine.startsWith("EXT")){
                resultingLine = "." + resultingLine
            }

            actualChangesToScriptInProgress = true //this is for the errorhandler to know what was happening
            Beat.call("Beat.replaceRange(" + startPosition + ", " + (length - 1) + ", `" + resultingLine + "`)")

        }else{

            // $id("printButton").innerHTML = "YUP. And the element is " + theElement.id + ", " + theElement.classList

            if(!theElement) theElement = $(".isBeingEdited")

            theElement.draggable = initialDraggability
            // if([...theElement.classList].includes("synopsis")){
            //     theElement.style.height = "auto"
            // }
            //setTimeout(function(){
                theElement.classList.remove("isBeingEdited")
            //}, 500) //this is so thatif I doubleclick another synopsis, it won't rearrange on the first click
            document.getElementById("editBox").remove()
        }

        // document.addEventListener('keydown', checkWhatKeyGotPressed)
        toggleCaptureKeypresses(true)
        youAreHere()

    }
    //recalculateHeights()
    console.timeEnd("exitEdit")
    mylog("end of exitedit")
}

function editBoxListen(someoneJustPressed){

    mylog()
    
    if (someoneJustPressed.key == "Enter" && (event.shiftKey || event.altKey)){
        if ([...theElement.classList].includes("synopsis")){
            event.preventDefault()
            document.execCommand('insertLineBreak')
            makeCloneSourceEquallyHigh()
            return
        }else{
        // if (theElement.nodeName == "DIV"){
            event.stopImmediatePropagation()
            // event.preventDefault()
            return
        }
    }

    // make function to reconfigure editbox with new size, then re-enable the below 

    //ALLOW ZOOMING while editing:
        if (event.metaKey && event.ctrlKey && (someoneJustPressed.key == "=" || someoneJustPressed.key == "+" || someoneJustPressed.key == "-" || someoneJustPressed.code == "Digit0")){
            event.preventDefault(); changeIndexCardHeight(someoneJustPressed.key); 
            makeCloneSourceEqualPeriod()
            return
        }
        if (event.metaKey && (someoneJustPressed.key == "=" || someoneJustPressed.key == "+" || someoneJustPressed.key == "-" || someoneJustPressed.code == "Digit0")){
            $(".editBox").style.display = "none"
            let redraw = $(".editBox").getBoundingClientRect()
            
            event.preventDefault(); zoomSizes(someoneJustPressed.key)
            setTimeout(makeCloneSourceEqualPeriod, 120)
            return
        }

    //Don't mute UNDO
    if (someoneJustPressed.key == "z" && (event.metaKey)){
        //event.preventDefault()
        //event.stopImmediatePropagation()
        return
    }
        
    if (someoneJustPressed.key == "Enter"){event.preventDefault(); exitEdit(theElement, true); return}
    if (someoneJustPressed.key == "Escape"){event.preventDefault(); exitEdit(theElement, false); return}

    if ([...theElement.classList].includes("synopsis")) {makeCloneSourceEquallyHigh()}
}

function makeCloneSourceEquallyHigh(){

    mylog("makingCloneSourceEquallyHigh" + $(".editBox").getBoundingClientRect().height + "px")
    mylog("before changing, height of original was " + theElement.style.height)

    theElement.style.height = ($(".editBox").getBoundingClientRect().height + 2) + "px"

}

function makeCloneSourceEqualPeriod(){

let editBox = $(".editBox")
let elementCSS = window.getComputedStyle(theElement)

editBox.style.height = (theElement.getBoundingClientRect().height + 2) + "px"
editBox.style.width = (theElement.getBoundingClientRect().width + 2) + "px"
editBox.style.top = (theElement.getBoundingClientRect().top) + "px"
editBox.style.left = (theElement.getBoundingClientRect().left) + "px"

editBox.style.fontSize = elementCSS.fontSize
editBox.style.lineHeight = elementCSS.lineHeight

editBox.style.display = "unset"
}


function insertLineBreak(){

    let currentPosition = window.getSelection().anchorOffset

    let textToEdit = $id("editBox").innerHTML
    let editedText = textToEdit.slice(0, currentPosition) + "<br>" + textToEdit.slice(currentPosition);

    $id("editBox").innerHTML = editedText

    //put caret in place

    let range = document.createRange()
    let sel = window.getSelection()

    sel.setPosition($id("editBox"), currentPosition)

}

function findOutlineCountFor(theElement){

    mylog("findOutlineCount" + theElement.classList)

    let elementWithOutlineCount = theElement
    let currentOutlineCount = elementWithOutlineCount.id.replace(/:.*/, "")

    mylog("half way through, we have this: " + currentOutlineCount)

    if (!currentOutlineCount) {
        elementWithOutlineCount = elementWithOutlineCount.parentNode        
        currentOutlineCount = elementWithOutlineCount.id.replace(/:.*/, "")
        // Beat.call("Beat.alert('"+elementWithOutlineCount.classList + "', '" + currentOutlineCount +"')")
    }

    mylog ("returning")
    return currentOutlineCount
}

</script>