import { LitElement, html, css } from "lit"; import { I18nProvider } from "@/components"; import { useMeta } from '@/utils'; const $t = new I18nProvider(); export default class extends LitElement { static properties = { inputValue: { type: String }, mode: { type: String }, error: { type: String }, hasProcessed: { type: Boolean }, isProcessing: { type: Boolean }, treeRoot: { type: Object }, outputValue: { type: String }, copied: { type: Boolean }, renderScope: { type: String }, }; static styles = css` .page { min-height: calc(100vh - 140px); padding: 10px; display: flex; align-items: flex-start; justify-content: center; } .main { width: 100%; max-width: 90vw; } .title { text-align: center; font-size: 1.6rem; font-weight: 600; margin-bottom: 4px; color: var(--ro-primary); } .sub-title { text-align: center; font-size: 0.9rem; color: #6b7280; margin-bottom: 16px; } .field-block { width: 100%; } textarea { min-height: 260px; width: 100%; border-radius: 18px; border: 1px solid #d1d5db; padding: 12px 14px; font-size: 0.85rem; box-sizing: border-box; resize: vertical; display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space: pre; } textarea:focus { outline: none; box-shadow: 0 0 0 1px var(--ro-primary); } .controls-row { margin-top: 10px; display: flex; align-items: center; gap: 10px; } .controls-left { flex: 1 1 auto; max-width: 180px; } .controls-right { margin-left: auto; flex: 0 0 auto; } select { width: 100%; border-radius: 999px; padding: 6px 12px; border: 1px solid #d1d5db; font-size: 0.85rem; } select:focus { outline: none; border-color: var(--ro-primary); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3); } .btn { padding: 8px 20px; border-radius: 999px; cursor: pointer; font-size: 0.85rem; border: none; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn-primary { background: var(--ro-primary); color: #ffffff; font-size: 1.2rem; transition: transform 0.08s ease, opacity 0.08s ease; } .btn-primary:hover { transform: translateY(-1px); } .btn-primary.loading { opacity: 0.7; cursor: default; transform: none; } .btn-secondary { padding: 0; border-radius: 999px; background: #ffffff; color: var(--ro-primary); border: 1px solid var(--ro-primary); font-weight: 500; font-size: 1.1rem; } .btn-secondary:hover { background: #f3f4f6; } .btn-secondary.copied { background: #e0f2fe; } .btn-icon { padding: 0; min-width: 32px; min-height: 32px; } hr { margin: 24px 0; } .error { color: #b91c1c; font-size: 0.85rem; padding: 10px 12px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; white-space: pre-wrap; word-break: break-word; } .result-area { margin: 16px 0; } .result-header { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 8px; gap: 6px; } .result-view { border-radius: 12px; border: 1px solid #d1d5de; background: #ffffff; } .xml-scroll { max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.85rem; padding: 10px 12px; box-sizing: border-box; } .xml-line { line-height: 1.55; white-space: nowrap; } .xml-tag, .xml-close-inline { color: #2563eb; font-weight: 600; } .xml-attr-name { color: #9333ea; } .xml-attr-value { color: #16a34a; } .xml-text { color: #111827; white-space: pre-wrap; word-break: break-word; } .xml-comment { color: #9ca3af; font-style: italic; } .xml-punct { color: #6b7280; } .xml-space { white-space: pre; } .xml-details { display: block; margin: 0 !important; padding: 0 !important; border: 0; } .xml-children { display: block; margin: 2px 0 0 0 !important; padding: 0 !important; border: 0; } .xml-summary, .xml-details summary { list-style: none; display: flex; align-items: center; cursor: pointer; margin: 0 !important; padding: 0 !important; border: 0; } .xml-arrow { font-size: 1.1rem; margin-left: 4px; margin-right: 4px; } .xml-arrow::before { content: " ▸"; } .xml-details[open] > summary > .xml-arrow::before { content: " ▾"; } .xml-close-inline { display: inline; } .xml-details[open] > summary > .xml-close-inline { display: none; } details > summary::-webkit-details-marker { display: none; } details, summary { margin-inline-start: 0 !important; padding-inline-start: 0 !important; } `; constructor() { super(); this.inputValue = ""; this.mode = "2"; this.error = ""; this.hasProcessed = false; this.isProcessing = false; this.treeRoot = null; this.outputValue = ""; this.copied = false; this.renderScope = "document"; } onInputChange(e) { this.inputValue = e.target.value; } onModeChange(e) { this.mode = e.target.value || "2"; this.hasProcessed = false; this.error = ""; this.treeRoot = null; this.outputValue = ""; this.renderScope = "document"; } getIndentSize() { const count = parseInt(this.mode, 10); return Number.isFinite(count) ? count : 2; } indentString(level) { return " ".repeat(level * this.getIndentSize()); } renderIndent(level) { const value = this.indentString(level); return value ? html`${value}` : ""; } process() { if (this.isProcessing) return; this.isProcessing = true; this.error = ""; this.hasProcessed = false; this.treeRoot = null; this.outputValue = ""; this.renderScope = "document"; const raw = this.inputValue || ""; if (!raw.trim()) { this.error = $t("htmlViewer_inputRequired"); this.isProcessing = false; return; } try { const parser = new DOMParser(); const doc = parser.parseFromString(raw, "text/html"); if (!doc) throw new Error($t("htmlViewer_parseFailed")); const trimmed = raw.trim(); const looksLikeFullDocument = /<\s*!doctype|<\s*html[\s>]/i.test(trimmed); this.renderScope = looksLikeFullDocument ? "document" : "body"; this.treeRoot = doc; this.outputValue = this.buildText(doc, this.renderScope); this.hasProcessed = true; } catch (err) { this.error = err && err.message ? err.message : $t("htmlViewer_parseFailed"); } finally { this.isProcessing = false; } } buildText(doc, scope) { const lines = []; if (scope === "document") { if (doc.doctype) { const name = doc.doctype.name || "html"; lines.push(``); } if (doc.documentElement) this.buildElementText(doc.documentElement, 0, lines); return lines.join("\n"); } Array.from(doc.body?.childNodes || []).forEach((child) => { this.buildNodeText(child, 0, lines); }); return lines.join("\n"); } buildNodeText(node, level, lines) { if (!node) return; if (node.nodeType === 1) { this.buildElementText(node, level, lines); return; } if (node.nodeType === 3) { const text = node.nodeValue || ""; if (text.trim()) lines.push(this.indentString(level) + text.trim()); return; } if (node.nodeType === 8) { lines.push(this.indentString(level) + ``); } } getElementChildren(el) { if (el instanceof HTMLTemplateElement) { return Array.from(el.content?.childNodes || []); } return Array.from(el.childNodes || []); } buildElementText(el, level, lines) { const indent = this.indentString(level); const tagName = (el.tagName || "").toLowerCase(); const attrs = Array.from(el.attributes || []); const children = this.getElementChildren(el); const isScriptOrStyle = tagName === "script" || tagName === "style"; const attrText = attrs .map((attr) => (attr.value === "" ? ` ${attr.name}` : ` ${attr.name}="${attr.value}"`)) .join(""); const openTag = `<${tagName}${attrText}>`; const closeTag = ``; const textChildren = children.filter((n) => n.nodeType === 3 && (n.nodeValue || "").trim()); const hasElementChildren = children.some((n) => n.nodeType === 1); if (!children.length) { lines.push(indent + openTag + closeTag); return; } if (!hasElementChildren && textChildren.length === 1 && !isScriptOrStyle) { let line = indent + openTag; line += textChildren[0].nodeValue.trim(); line += closeTag; lines.push(line); return; } lines.push(indent + openTag); if (isScriptOrStyle) { const code = children.map((n) => (n.nodeType === 3 ? n.nodeValue || "" : "")).join(""); for (const line of code.split("\n")) { lines.push(this.indentString(level + 1) + line); } } else { children.forEach((child) => this.buildNodeText(child, level + 1, lines)); } lines.push(indent + closeTag); } copyResult() { if (!this.outputValue) return; navigator?.clipboard?.writeText(this.outputValue).then(() => { this.copied = true; setTimeout(() => { this.copied = false; }, 1200); }); } renderDoctype(doc) { if (!doc.doctype || this.renderScope !== "document") return null; const name = doc.doctype.name || "html"; return html`

<!DOCTYPE ${name}>

`; } renderNodeLines(node, level) { if (!node) return []; if (node.nodeType === 1) return this.renderElementLines(node, level); if (node.nodeType === 3) { const text = node.nodeValue || ""; if (!text.trim()) return []; return [html`

${this.renderIndent(level)}${text.trim()}

`]; } if (node.nodeType === 8) { return [html`

${this.renderIndent(level)}

`]; } return []; } renderElementLines(el, level) { const lines = []; const tagName = (el.tagName || "").toLowerCase(); const attrs = Array.from(el.attributes || []); const children = this.getElementChildren(el); const isScriptOrStyle = tagName === "script" || tagName === "style"; const attrParts = attrs.map((attr) => attr.value === "" ? html` ${attr.name}` : html` ${attr.name}="${attr.value}"`, ); const nonEmptyTextChildren = children.filter((n) => n.nodeType === 3 && (n.nodeValue || "").trim()); const hasElementChildren = children.some((n) => n.nodeType === 1); if (!children.length) { lines.push(html`

${this.renderIndent(level)}<${tagName}${attrParts}></${tagName}>

`); return lines; } if (!hasElementChildren && nonEmptyTextChildren.length === 1 && !isScriptOrStyle) { const textNode = nonEmptyTextChildren[0]; lines.push(html`

${this.renderIndent(level)}<${tagName}${attrParts}>${textNode.nodeValue.trim()}</${tagName}>

`); return lines; } const childLines = []; if (isScriptOrStyle) { const code = children.map((n) => (n.nodeType === 3 ? n.nodeValue || "" : "")).join(""); code.split("\n").forEach((line) => { childLines.push(html`

${this.renderIndent(level + 1)}${line}

`); }); } else { children.forEach((child) => childLines.push(...this.renderNodeLines(child, level + 1))); } lines.push(html`

${this.renderIndent(level)} <${tagName}${attrParts}></${tagName}>

${childLines}

${this.renderIndent(level)}</${tagName}>

`); return lines; } renderDocument() { if (!this.treeRoot) return ""; const doc = this.treeRoot; const parts = []; const dt = this.renderDoctype(doc); if (dt) parts.push(dt); if (this.renderScope === "document") { if (doc.documentElement) parts.push(...this.renderElementLines(doc.documentElement, 0)); } else { Array.from(doc.body?.childNodes || []).forEach((child) => { parts.push(...this.renderNodeLines(child, 0)); }); } return parts; } renderResult() { if (this.error) return html`

${this.error}

`; if (!this.hasProcessed) return ""; const copyBtnClass = "btn btn-secondary btn-icon" + (this.copied ? " copied" : ""); const copyTitle = this.copied ? $t("htmlViewer_copied") : $t("htmlViewer_copyFormatted"); const copyLabel = this.copied ? "✓" : "⧉"; return html`

${this.renderDocument()}

`; } render() { useMeta({ title: $t("htmlViewer_title"), meta: { description: { name: 'description', content: $t('htmlViewer_subtitle') }, } }) const processBtnClass = "btn btn-primary" + (this.isProcessing ? " loading" : ""); const processLabel = this.isProcessing ? $t("htmlViewer_processing") : $t("htmlViewer_process"); return html`

${$t("htmlViewer_title")}

${$t("htmlViewer_subtitle")}

${this.hasProcessed || this.error ? html`

${this.renderResult()}` : ""}

`; } }