mylomen-server/static/js/event/impl/EnterEventImpl.js

"use strict";
/**
 * 回车事件
 */
define(function (require, exports, module) {

    function handle(e) {
        const utils = require('../../common/utils');
        let event = utils.ParseEvent(e);
        let curEl = utils.GetEventTarget(event);
    }


    function handleOld(e) {
        const utils = require('../../common/utils');
        let event = utils.ParseEvent(e);
        let curEl = utils.GetEventTarget(event);

        utils.ProhibitDefaultEvent(event);
        let select = utils.GetSelection();
        let selectRange = select.getRangeAt(0);
        let start = select.anchorOffset;
        let anchorNode = select.anchorNode;
        let end = select.focusOffset;
        let focusNode = select.focusNode;
        let curP = select.focusNode.parentElement.closest("p");
        let spanContent = curP.querySelector("span[data-flag='span_content']")
        let spanContentItems = spanContent.querySelectorAll("span");
        console.log("Enter event", event, "\ncurEl: ", curEl,
            "\nstart-end: ", start, end,
        )
        console.log(select)
        console.log(spanContent)
        console.dir(spanContentItems)
        if (spanContentItems === null || spanContentItems.length === 0) { //没有子元素 -> 还没有样式
            let txtLen = spanContent.innerText.trim().length;
            if (txtLen === 0) {//内容确实为空
                console.log("直接新增一行即可")
                ctx.MyRoot().append(document.createElement("p"));
            } else { // 内容不为空
                if (select.isCollapsed) { //没有选中选区
                    if (start === txtLen) { //光标在行尾
                        console.log("内容不为空 -> 光标在行尾");
                        //新增一行
                        let newParagraph = document.createElement("p");
                        //内置span
                        let span = document.createElement("span");
                        span.append(document.createElement("br"));
                        span.setAttribute("data-flag", "span_content")
                        newParagraph.append(span);
                        utils.InsertAfter(curP, newParagraph);
                        utils.GetSelection().removeAllRanges();
                        utils.GetSelection().setPosition(newParagraph, 0);
                        newParagraph.focus();
                    } else if (start === 0) { //光标在行首
                        console.log("内容不为空 -> 光标在行首");
                        let spanContentTxt = spanContent.innerText
                        spanContent.innerHTML = "<br />"; //保留的部分
                        //新增一行
                        let newParagraph = document.createElement("p");
                        //内置span
                        let span = document.createElement("span");
                        span.append(spanContentTxt.substring(start, spanContentTxt.length).trim());
                        span.setAttribute("data-flag", "span_content")
                        newParagraph.append(span);
                        utils.InsertAfter(curP, newParagraph);
                        utils.GetSelection().removeAllRanges();
                        utils.GetSelection().setPosition(newParagraph, 0);
                        newParagraph.focus();
                    } else {//光标在中间
                        console.log("内容不为空 -> 光标在列间");
                        let spanContentTxt = spanContent.innerText
                        spanContent.innerText = spanContentTxt.substring(0, start); //保留的部分
                        //新增一行
                        let newParagraph = document.createElement("p");
                        //内置span
                        let span = document.createElement("span");
                        span.append(spanContentTxt.substring(start, spanContentTxt.length).trim());
                        span.setAttribute("data-flag", "span_content")
                        newParagraph.append(span);
                        utils.InsertAfter(curP, newParagraph);
                        utils.GetSelection().removeAllRanges();
                        utils.GetSelection().setPosition(newParagraph, 0);
                        newParagraph.focus();
                    }
                } else { //有选区
                    let selectRangeTxt = select.getRangeAt(0).extractContents();
                    console.log("选中的内容整体平移到新建的下一行。 选中的内容是: ", selectRangeTxt);
                    console.dir(selectRangeTxt);
                    //新增一行
                    let newParagraph = document.createElement("p");
                    //内置span
                    let span = document.createElement("span");
                    span.append(selectRangeTxt);
                    span.setAttribute("data-flag", "span_content")
                    newParagraph.append(span);
                    utils.InsertAfter(curP, newParagraph);
                    utils.GetSelection().removeAllRanges();
                    utils.GetSelection().setPosition(newParagraph, 0);
                    newParagraph.focus();
                }
            }
        } else { //有子元素
            console.log("有子元素，说明添加过样式");
            console.log(spanContent)
            console.group(spanContentItems)
            if (select.isCollapsed) {//没有选区
                console.log("没有选区")
            } else { //有选区
                console.log("有选区 选中的到下一行，未选中的在原来的行")
                console.log(select)
                console.log(selectRange)
                let nextSpanList = []
                let clearSpanList = []


                for (let i = 0; i < spanContent.childNodes.length; i++) {
                    let curSpan = spanContent.childNodes[i];
                    console.log("check: ", curSpan, select.containsNode(curSpan, true))
                    if (select.containsNode(curSpan, true)) {
                        nextSpanList.push(curSpan.cloneNode(true))
                        clearSpanList.push(curSpan)
                    }
                }

                if (nextSpanList.length === spanContentItems.length) {
                    spanContent.innerHTML = "<br/>"
                }
                //clear
                for (let i = 0; i < clearSpanList.length; i++) {
                    clearSpanList[i].remove();
                }

                //新增一行
                let newParagraph = document.createElement("p");
                //内置span
                let span = document.createElement("span");
                for (let i = 0; i < nextSpanList.length; i++) {
                    span.append(nextSpanList[i]);
                }
                span.setAttribute("data-flag", "span_content")
                newParagraph.append(span);
                utils.InsertAfter(curP, newParagraph);
                utils.GetSelection().removeAllRanges();
                utils.GetSelection().setPosition(newParagraph, 0);
                newParagraph.focus();
            }
        }


    }

    //导出
    exports.handle = handle;
});