✨ siyuan-note#2911 复制行内元素的一部分时带其样式

leolee9086 · Oct 4, 2022 · cc7f1a8 · cc7f1a8
1 parent e5f89be
commit cc7f1a8
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 8 deletions.
diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts
@@ -438,20 +438,35 @@ export class Toolbar {
             // 切割元素
             const startContainer = this.range.startContainer as HTMLElement;
             const afterElement = document.createElement("span");
-            const dataset = startContainer.dataset;
-            Object.keys(dataset).forEach(key => {
-                afterElement.setAttribute("data-" + key, dataset[key]);
-            });
+            const attributes = startContainer.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                afterElement.setAttribute(attributes[i].name, attributes[i].value);
+            }
             this.range.setEnd(startContainer.lastChild, startContainer.lastChild.textContent.length);
             afterElement.append(this.range.extractContents());
             startContainer.after(afterElement);
             this.range.setStartBefore(afterElement);
             this.range.collapse(true);
         }
-        newNodes.forEach((item) => {
-            this.range.insertNode(item);
-            this.range.collapse(false);
-        });
+        for (let i = 0; i < newNodes.length; i++) {
+            const currentNewNode = newNodes[i] as HTMLElement
+            const nextNewNode = newNodes[i + 1] as HTMLElement
+            if (currentNewNode.nodeType !== 3 && nextNewNode && nextNewNode.nodeType !== 3 &&
+                isArrayEqual(nextNewNode.getAttribute("data-type").split(" "), currentNewNode.getAttribute("data-type").split(" ")) &&
+                currentNewNode.style.color === nextNewNode.style.color &&
+                currentNewNode.style.webkitTextFillColor === nextNewNode.style.webkitTextFillColor &&
+                currentNewNode.style.webkitTextStroke === nextNewNode.style.webkitTextStroke &&
+                currentNewNode.style.textShadow === nextNewNode.style.textShadow &&
+                currentNewNode.style.backgroundColor === nextNewNode.style.backgroundColor) {
+                // 合并相同的 node
+                nextNewNode.innerHTML = currentNewNode.innerHTML + nextNewNode.innerHTML;
+                newNodes.splice(i, 1);
+                i--;
+            } else {
+                this.range.insertNode(newNodes[i]);
+                this.range.collapse(false);
+            }
+        }
         if (previousElement) {
             this.mergeNode(previousElement.childNodes);
         }

diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts
@@ -236,6 +236,16 @@ export class WYSIWYG {
                     html = tempElement.innerHTML;
                 } else if (selectImgElement) {
                     html = selectImgElement.outerHTML;
+                } else if (selectTypes.length > 0 && range.startContainer.nodeType === 3 && range.startContainer.parentElement.tagName === "SPAN" &&
+                range.startContainer.parentElement.isSameNode(range.endContainer.parentElement)) {
+                    // 复制粗体等字体中的一部分
+                    const attributes = range.startContainer.parentElement.attributes
+                    const spanElement = document.createElement("span");
+                    for (let i = 0; i < attributes.length; i++) {
+                        spanElement.setAttribute(attributes[i].name, attributes[i].value);
+                    }
+                    spanElement.textContent = range.toString()
+                    html = spanElement.outerHTML;
                 } else {
                     tempElement.append(range.cloneContents());
                     const inlineMathElement = hasClosestByAttribute(range.commonAncestorContainer, "data-type", "inline-math");