Apply selected HTML source snippets

Author: Chiselo Maintainer

Chiselo/ContentView.swift

@@ -4148,6 +4148,8 @@ private struct GeometryMetrics {
 private struct InspectorPanel: View {
     @EnvironmentObject private var model: EditorModel
     @State private var selectedTab: InspectorTab = .layout
+    @State private var sourceDraft = ""
+    @State private var sourceDraftElementID: String?
 
     var body: some View {
         VStack(alignment: .leading, spacing: 0) {
@@ -4172,6 +4174,15 @@ private struct InspectorPanel: View {
                 .onChange(of: model.documentMode) { _ in
                     normalizeSelectedTab()
                 }
+                .onAppear {
+                    syncSourceDraft(for: element)
+                }
+                .onChange(of: element.id) { _ in
+                    syncSourceDraft(for: element)
+                }
+                .onChange(of: element.sourceSnippet) { _ in
+                    syncSourceDraft(for: element)
+                }
 
                 ScrollView {
                     LazyVStack(alignment: .leading, spacing: 16) {
@@ -4201,6 +4212,17 @@ private struct InspectorPanel: View {
         }
     }
 
+    private func syncSourceDraft(for element: EditorElement) {
+        guard sourceDraftElementID != element.id else {
+            if sourceDraft.isEmpty, let snippet = element.sourceSnippet {
+                sourceDraft = snippet
+            }
+            return
+        }
+        sourceDraftElementID = element.id
+        sourceDraft = element.sourceSnippet ?? ""
+    }
+
     @ViewBuilder
     private func inspectorContent(for element: EditorElement) -> some View {
         switch activeTab {
@@ -4679,13 +4701,13 @@ private struct InspectorPanel: View {
                         Spacer(minLength: 0)
                     }
 
-                    if let snippet = element.sourceSnippet?.trimmingCharacters(in: .whitespacesAndNewlines), !snippet.isEmpty {
+                    if !(element.sourceSnippet ?? "").trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
                         ScrollView(.horizontal, showsIndicators: true) {
-                            Text(snippet)
+                            TextEditor(text: $sourceDraft)
                                 .font(.system(size: 10, weight: .semibold, design: .monospaced))
                                 .foregroundStyle(MaterialTheme.ink)
-                                .textSelection(.enabled)
                                 .padding(10)
+                                .scrollContentBackground(.hidden)
                                 .frame(maxWidth: .infinity, alignment: .leading)
                         }
                         .frame(minHeight: 72, maxHeight: 220, alignment: .topLeading)
@@ -4697,17 +4719,26 @@ private struct InspectorPanel: View {
 
                         HStack(spacing: 8) {
                             Button {
-                                copySourceSnippet(snippet)
+                                copySourceSnippet(sourceDraft)
                             } label: {
                                 Label("复制片段", systemImage: "doc.on.doc")
                                     .frame(maxWidth: .infinity)
                             }
                             .buttonStyle(MaterialButtonStyle(compact: true))
 
+                            Button {
+                                model.applySelectedHTMLSource(sourceDraft)
+                            } label: {
+                                Label("应用源码", systemImage: "checkmark.square")
+                                    .frame(maxWidth: .infinity)
+                            }
+                            .buttonStyle(MaterialButtonStyle(compact: true))
+                            .disabled(!canApplySourceDraft(for: element))
+
                             Button {
                                 model.selectHTMLNode(id: element.id)
                             } label: {
-                                Label("定位对象", systemImage: "scope")
+                                Label("定位", systemImage: "scope")
                                     .frame(maxWidth: .infinity)
                             }
                             .buttonStyle(MaterialButtonStyle(compact: true))
@@ -4796,6 +4827,12 @@ private struct InspectorPanel: View {
         model.status = "已复制选中对象源码片段"
     }
 
+    private func canApplySourceDraft(for element: EditorElement) -> Bool {
+        let original = element.sourceSnippet?.trimmingCharacters(in: .whitespacesAndNewlines) ?? ""
+        let draft = sourceDraft.trimmingCharacters(in: .whitespacesAndNewlines)
+        return !draft.isEmpty && draft != original
+    }
+
     private func sourceSyncTitle(for element: EditorElement) -> String {
         let tag = element.tagName?.uppercased() ?? "HTML"
         return "\(tag) 源码片段"

Chiselo/EditorModel.swift

@@ -1495,6 +1495,49 @@ final class EditorModel: ObservableObject {
         runJavaScript("window.ChiseloEditor?.selectHTMLById(\(literal));")
     }
 
+    func applySelectedHTMLSource(_ html: String) {
+        guard hasOpenDocument, documentMode == "html" else {
+            status = "请先打开 HTML 文件"
+            return
+        }
+
+        guard let literal = jsStringLiteral(html) else {
+            status = "源码片段包含无法提交的字符"
+            return
+        }
+
+        let source = "JSON.stringify(window.ChiseloEditor?.applySelectedHTMLSource?.(\(literal)) ?? null);"
+        webView?.evaluateJavaScript(source) { [weak self] result, error in
+            Task { @MainActor in
+                guard let self else { return }
+
+                if let error {
+                    self.status = "源码片段应用失败：\(error.localizedDescription)"
+                    return
+                }
+
+                guard let json = result as? String,
+                      json != "null",
+                      let data = json.data(using: .utf8),
+                      let object = try? JSONSerialization.jsonObject(with: data) as? [String: Any] else {
+                    self.status = "源码片段应用失败：编辑器未返回结果"
+                    return
+                }
+
+                if (object["ok"] as? Bool) == true {
+                    if let element = self.bridgeElement(object["element"]) {
+                        self.updatePublished(\.selectedElement, to: element)
+                        self.updatePublished(\.selectionPath, to: element.htmlPath)
+                    }
+                    self.refreshHTMLDiagnostics()
+                    self.status = "已应用源码片段，可用撤销恢复"
+                } else {
+                    self.status = object["reason"] as? String ?? "源码片段应用失败"
+                }
+            }
+        }
+    }
+
     func revertHTMLVisualChange(changeKey: String) {
         guard hasOpenDocument, documentMode == "html" else {
             status = "请先打开 HTML 文件"

Chiselo/Resources/Editor/editor.js

@@ -2412,6 +2412,56 @@
     return new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]).has(match[1].toLowerCase());
   }
 
+  function parseSingleHTMLSourceElement(html, doc) {
+    const source = String(html || "").trim();
+    if (!source) return { ok: false, reason: "源码片段为空。" };
+    const template = doc.createElement("template");
+    try {
+      template.innerHTML = source;
+    } catch (error) {
+      return { ok: false, reason: `源码片段无法解析：${error?.message || error}` };
+    }
+    const elements = [...template.content.children];
+    if (elements.length !== 1) return { ok: false, reason: "源码片段必须只有一个顶层 HTML 对象。" };
+    const extraText = [...template.content.childNodes]
+      .filter((node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim().length > 0);
+    if (extraText.length) return { ok: false, reason: "顶层对象外不能包含额外文本。" };
+    const element = elements[0];
+    if (element.matches?.("html,head,body,script,style,link,meta,title")) {
+      return { ok: false, reason: "当前安全编辑只支持替换页面正文对象。" };
+    }
+    return { ok: true, element };
+  }
+
+  function applySelectedHTMLSource(html) {
+    if (editorMode !== "html") return { ok: false, reason: "当前不是 HTML 文档模式。" };
+    if (!directSelectedNode || !directSelectedNode.isConnected) return { ok: false, reason: "请先选中一个 HTML 对象。" };
+    if (directSelectionNodes().length > 1) return { ok: false, reason: "源码片段编辑暂不支持多选对象。" };
+    if (directSelectedNode.matches?.("html,body")) return { ok: false, reason: "不能直接替换 html/body 根对象。" };
+
+    const doc = directSelectedNode.ownerDocument;
+    const parsed = parseSingleHTMLSourceElement(html, doc);
+    if (!parsed.ok) return parsed;
+
+    const replacement = parsed.element;
+    const previousId = ensureDirectId(directSelectedNode);
+    if (!replacement.dataset.chiseloId) replacement.dataset.chiseloId = previousId;
+    prepareDirectSubtree(replacement);
+
+    const parent = directSelectedNode.parentElement;
+    if (!parent) return { ok: false, reason: "当前对象没有可替换的父级。" };
+
+    pushHistory({ label: "编辑源码片段" });
+    parent.replaceChild(replacement, directSelectedNode);
+    selectDirectNode(replacement);
+    updateSelectionBox();
+    scheduleDirectLayoutRefresh();
+    scheduleHTMLTreeChanged();
+    scheduleHTMLDiagnosticsChanged();
+    postSelectionChanged({ immediate: true });
+    return { ok: true, element: selectedElement(), sourceSnippet: replacement.outerHTML || "" };
+  }
+
   function normalizeDirectHTMLSource(input) {
     let html = String(input || "");
     const hadDoctype = /^\s*<!doctype/i.test(html);
@@ -7953,6 +8003,7 @@ ${htmlSlides}
 
   window.ChiseloEditor = {
     addHTMLToSelection,
+    applySelectedHTMLSource,
     command,
     exportHTML,
     getDeck: () => clone(deck),

docs/dev/CHANGELOG.md

@@ -35,7 +35,7 @@ All notable changes to Chiselo will be documented here.
 - Added responsive-layout and source-writeback review signals so save/export preflight can flag multi-width checks and inline-style changes on stylesheet-backed HTML.
 - Added breakpoint-aware responsive review hints so changed HTML objects show nearby widths to check before save or export.
 - Added selected-object source writeback hints so users can see whether style edits will update a CSS rule or inline style before changing HTML.
-- Added a selected-object source sync panel that shows a clean HTML snippet for the visual selection and can re-locate the object from the Inspector.
+- Added a selected-object source sync panel that shows, edits, applies, copies, and re-locates a clean HTML snippet for the visual selection.
 - Added compact quick-action regression coverage to release preflight.
 - Added visual-change rollback regression coverage to release preflight.
 - Bumped the packaging version to `0.1.11` for the next preview build.

scripts/direct-html-source-sync-test.swift

@@ -46,15 +46,35 @@ final class DirectHTMLSourceSyncTest: NSObject, WKNavigationDelegate, WKScriptMe
           const sourceFormatted = snippet.includes('\\n  <h2>');
           const reselected = editor.selectHTMLById(selected.id);
           const reselectedSame = reselected && reselected.id === selected.id && String(reselected.sourceSnippet || '').includes('Synced title');
-
-          if (!sourceHasTag || !sourceHasChildren || !sourceClean || !sourceFormatted || lineCount < 4 || !reselectedSame) {
+          const nextSource = snippet.replace('Synced title', 'Edited from source').replace('real source', 'source editor');
+          const applyResult = editor.applySelectedHTMLSource(nextSource);
+          const applied = applyResult && applyResult.ok === true && applyResult.element && applyResult.element.id === selected.id;
+          const appliedSnippet = String(applyResult?.element?.sourceSnippet || '');
+          const exported = editor.exportHTML();
+          const diagnostics = editor.getImportDiagnostics();
+          const sourceApplied = appliedSnippet.includes('Edited from source') && exported.includes('Edited from source') && exported.includes('source editor');
+          const exportClean = diagnostics.cleanExport === true && diagnostics.exportArtifactCount === 0 && !exported.includes('data-chiselo');
+          editor.command('undo');
+          await sleep(180);
+          const undoExport = editor.exportHTML();
+          const undoRestored = undoExport.includes('Synced title') && !undoExport.includes('Edited from source');
+
+          if (!sourceHasTag || !sourceHasChildren || !sourceClean || !sourceFormatted || lineCount < 4 || !reselectedSame || !applied || !sourceApplied || !exportClean || !undoRestored) {
             throw new Error(JSON.stringify({
               sourceHasTag,
               sourceHasChildren,
               sourceClean,
               sourceFormatted,
               lineCount,
               reselectedSame,
+              applyResult,
+              applied,
+              sourceApplied,
+              exportClean,
+              undoRestored,
+              diagnostics,
+              exported,
+              undoExport,
               selected,
               snippet
             }));
@@ -64,6 +84,10 @@ final class DirectHTMLSourceSyncTest: NSObject, WKNavigationDelegate, WKScriptMe
             type: 'result',
             id: selected.id,
             lineCount,
+            applied,
+            sourceApplied,
+            cleanExport: diagnostics.cleanExport,
+            undoRestored,
             snippet
           });
         })().catch(error => {