From a883c64eab9319cb9ff360b8a540008f532f4932 Mon Sep 17 00:00:00 2001 From: shaoyongjun Date: Sun, 10 Nov 2024 02:30:02 +0800 Subject: [PATCH] to:sync --- static/css/myEdit.css | 5 + static/js/event/MyEventListener.js | 2 +- static/js/event/impl/DelEventImpl.js | 4 +- static/js/event/impl/EnterEventImpl.js | 7 ++ static/js/event/impl/MutationObserverImpl.js | 126 ++++--------------- 5 files changed, 41 insertions(+), 103 deletions(-) diff --git a/static/css/myEdit.css b/static/css/myEdit.css index ad4c32f..e075a59 100644 --- a/static/css/myEdit.css +++ b/static/css/myEdit.css @@ -252,6 +252,11 @@ main { -webkit-transform: scale(1.375); transform: scale(1.375); + margin: 0 0; + padding: 0 0; + + /*display: compact;*/ + /*width: 2em;*/ } #testInput { diff --git a/static/js/event/MyEventListener.js b/static/js/event/MyEventListener.js index 4948245..47febf6 100644 --- a/static/js/event/MyEventListener.js +++ b/static/js/event/MyEventListener.js @@ -176,7 +176,7 @@ define(function (require, exports, module) { * @constructor */ RSizeListener(e) { - console.log("RSizeListener : ", e); + // console.log("RSizeListener : ", e); let handle = require("./impl/RSizeEventImpl"); handle.handle(e); } diff --git a/static/js/event/impl/DelEventImpl.js b/static/js/event/impl/DelEventImpl.js index 63dba78..fbfb9e8 100644 --- a/static/js/event/impl/DelEventImpl.js +++ b/static/js/event/impl/DelEventImpl.js @@ -67,7 +67,7 @@ define(function (require, exports, module) { let curS = utils.GetSelection(); // console.log("当前内容: ", curP.innerHTML, " 当前选区 ：", curS) //处理前面没有内容，后面还有内容需要拼接到上层的场景 - if ((curS.isCollapsed && curS.anchorOffset === 0) || curP.innerHTML === '
') { + if ((curS.isCollapsed && curS.anchorOffset === 0) || curP.innerHTML === ' ') { let curNodeRetainHtml = curP.innerHTML //阻止事件传递 utils.ProhibitDefaultEvent(event); @@ -83,7 +83,7 @@ define(function (require, exports, module) { } emptyRowNoList.push(cNo); //拼接 - if (curNodeRetainHtml !== '
') { + if (curNodeRetainHtml !== ' ') { previousSibling.innerHTML = previousSibling.innerHTML + curNodeRetainHtml } diff --git a/static/js/event/impl/EnterEventImpl.js b/static/js/event/impl/EnterEventImpl.js index da96be9..d9e9ba7 100644 --- a/static/js/event/impl/EnterEventImpl.js +++ b/static/js/event/impl/EnterEventImpl.js @@ -8,6 +8,13 @@ define(function (require, exports, module) { 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(); diff --git a/static/js/event/impl/MutationObserverImpl.js b/static/js/event/impl/MutationObserverImpl.js index f771049..ad0ba2e 100644 --- a/static/js/event/impl/MutationObserverImpl.js +++ b/static/js/event/impl/MutationObserverImpl.js @@ -26,7 +26,7 @@ define(function (require, exports, module) { } function other(mutation) { - console.dir(mutation) + console.log("other ", mutation) // console.log("other -> mutation : ", mutation, // // 观察的变动类型（attributes、characterData或者childList）。 // "\ntype", mutation.type, @@ -48,12 +48,12 @@ define(function (require, exports, module) { } function addNewP(mutation) { + let ctx = require("../../common/ctx"); + let utils = require("../../common/utils"); //div 下新增p元素 let target = mutation.target; // target.clone() if (target.nodeName === "DIV" && mutation.previousSibling !== null) { - let utils = require("../../common/utils"); - let ctx = require("../../common/ctx"); let newParagraph = mutation.previousSibling.nextSibling; console.log( "addNewP target: ", target, @@ -65,46 +65,27 @@ define(function (require, exports, module) { ) if (newParagraph !== undefined && newParagraph !== null) { newParagraph.id = utils.Uuid(ctx.usn, ctx.docType); - newParagraph.setAttribute("data-order", ctx.incrementNumThenReturn()); - - // let newParagraph = document.getElementById(targetP.id); - //前置 span - // let preSpan = newParagraph.querySelector("span[data-flag='span_pre']"); - // if (preSpan === undefined || preSpan === null) { - // preSpan = document.createElement("span"); - // preSpan.setAttribute("contenteditable", "false") - // preSpan.setAttribute("data-flag", "span_pre") - // - // //额外处理无序和有序列表 - // let preP = newParagraph.previousElementSibling; - // if (preP !== undefined && preP !== null) { - // let preSpanTxtOfPreP = preP.querySelector("span[data-flag='span_pre']").textContent; - // if (preSpanTxtOfPreP === " • " || preSpanTxtOfPreP === " ◦ " || preSpanTxtOfPreP === " ▪ ") { - // preSpan.setAttribute("contenteditable", "true"); - // preSpan.innerHTML = "" + preSpanTxtOfPreP + ""; - // } - // } - // - // //添加到元素首位 - // newParagraph.insertBefore(preSpan, newParagraph.firstChild); - // - // - // } else { - // console.log("newParagraph preSpan exist ", newParagraph, " ", preSpan) - // } - + let curNo = ctx.incrementNumThenReturn(); + newParagraph.setAttribute("data-order", curNo); //内置span let spanContent = newParagraph.querySelector("span[data-flag='span_content']"); if (spanContent === undefined || spanContent === null) { spanContent = document.createElement("span"); // spanContent.append(document.createElement("br")); spanContent.setAttribute("data-flag", "span_content") - spanContent.setAttribute("placeholder", "请输入") + if (curNo === 0) { //首行有提示 + spanContent.setAttribute("placeholder", "请输入") + } else { + spanContent.setAttribute("placeholder", "请输入") + spanContent.innerHTML = " " + } + + // console.dir(mutation) + newParagraph.appendChild(spanContent); } else { console.log("newParagraph spanContent exist", spanContent); - - spanContent.innerHTML = null; + spanContent.innerHTML = " " } utils.GetSelection().removeAllRanges(); @@ -116,13 +97,22 @@ define(function (require, exports, module) { } //解决（flex 布局 for 无序列表 前面可以输入问题）回车不换行问题 - if (target.nodeName === "P" && target.getAttribute("data-order") != null - && mutation.previousSibling !== null && mutation.previousSibling.getAttribute("data-flag") === "span_content") { // + // console.log(" fix ", mutation) + if (target.nodeName === "P" + && target.getAttribute("data-order") != null + && mutation.previousSibling !== null + && mutation.previousSibling.getAttribute("data-flag") === "span_content") { // let utils = require("../../common/utils"); let flagP = target; for (let i = 0; i < mutation.addedNodes.length; i++) { let tmpSpan = mutation.addedNodes[i]; let tmpP = document.createElement("p"); + let curNo = ctx.getCurRowNo(); + if (curNo === 0) { //首行有提示 + tmpSpan.setAttribute("placeholder", "请输入") + } else { + tmpSpan.textContent = "\n" + } tmpP.appendChild(tmpSpan) utils.InsertAfter(flagP, tmpP); flagP = tmpP; @@ -130,33 +120,6 @@ define(function (require, exports, module) { return; } - //删除 for 无序列表 删除样式恢复正常行 - // if (mutation.removedNodes.length === 0 - // && mutation.addedNodes.length === 1 - // && target.nodeName === "P" && target.getAttribute("data-order") != null - // // && target.childNodes - // && mutation.addedNodes[0].nodeName === "BR" - // ) { - // console.log( - // "删除 br target: ", target, - // "\nmutation:", mutation, - // "\ntarget.childNodes:", target.childNodes, - // "\naddedNodes:", mutation.addedNodes, - // "\nremovedNodes:", mutation.removedNodes, - // "\nnodeType: ", mutation.addedNodes[0].nodeType, - // "\nnodeName: ", mutation.addedNodes[0].nodeName, - // "\ndata: ", mutation.addedNodes[0].value - // ) - // console.log("捕捉 ‘删除样式恢复正常行’ 成功") - // - // let spanContent = document.createElement("span"); - // spanContent.setAttribute("data-flag", "span_content") - // spanContent.innerHTML = "
"; - // target.innerHTML = null; - // target.append(spanContent); - // return; - // } - other(mutation); } @@ -230,43 +193,6 @@ define(function (require, exports, module) { let curSpanContent = curP.querySelector("span[data-flag='span_content']") // console.log("curSpanContent: ", curSpanContent) - //无序列表 - // if (curSpanContent.innerHTML.startsWith("- ") || curSpanContent.innerHTML.startsWith("- ")) { - // let curPreSpan = curP.querySelector("span[data-flag='span_pre']"); - // let curPreSpanTxt = utils.GetText(curPreSpan); - // if (curPreSpanTxt === " • " || curPreSpanTxt === " ◦ " || curPreSpanTxt === " ▪ ") { - // return; - // } else { - // let previousSiblingP = curP.previousElementSibling; - // let preSpanTxtOfPreP = null - // if (previousSiblingP != null) { - // let tmpPre = previousSiblingP.querySelector("span[data-flag='span_pre']"); - // preSpanTxtOfPreP = utils.GetText(tmpPre); - // } - // - // //上一级是否也是无序列表。 如果是则 后移 - // if (preSpanTxtOfPreP != null && (preSpanTxtOfPreP === " • " || preSpanTxtOfPreP === " ◦ " || preSpanTxtOfPreP === " ▪ ")) { - // if (preSpanTxtOfPreP === " • ") { - // curPreSpan.setAttribute("contenteditable", "true"); - // curPreSpan.innerHTML = "" + " ◦ " + "" - // } else if (preSpanTxtOfPreP === " ◦ ") { - // curPreSpan.setAttribute("contenteditable", "true"); - // curPreSpan.innerHTML = "" + " ▪ " + "" - // } else { - // console.log("不支持继续下转") - // } - // } else { - // curPreSpan.innerHTML = "" + " • " + "" - // } - // - // curSpanContent.textContent = curSpanContent.textContent.substring(2, curSpanContent.textContent.length); - // - // //光标定位 - // utils.GetSelection().removeAllRanges(); - // utils.GetSelection().setPosition(curSpanContent, 0); - // curSpanContent.focus(); - // } - // } } else { other(mutation); }