Gitiles
Code Review Sign In
code.v1.dodo.cloud / sketch / 7735844caf9fa4e2d7bbe3bf64d20e86b9bf469e / . / webui / src / web-components / demo / sketch-monaco-view.demo.html
blob: f5e12d491afb7dd2685d0ff0abdcaa45b4f9775d [file] [log] [blame]
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Sketch Monaco Viewer Demo</title>
7 <script type="module" src="../sketch-monaco-view.ts"></script>
8 <style>
9 body {
10 font-family:
11 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
12 Arial, sans-serif;
13 max-width: 1200px;
14 margin: 0 auto;
15 padding: 2rem;
16 }
17
18 h1 {
19 color: #333;
20 margin-bottom: 2rem;
21 }
22
23 .control-panel {
24 margin-bottom: 2rem;
25 padding: 1rem;
26 background-color: #f0f0f0;
27 border-radius: 4px;
28 }
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]29
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]30 button {
31 padding: 8px 12px;
32 background-color: #4285f4;
33 color: white;
34 border: none;
35 border-radius: 4px;
36 cursor: pointer;
37 margin-right: 8px;
38 }
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]39
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]40 button:hover {
41 background-color: #3367d6;
42 }
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]43
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]44 sketch-monaco-view {
45 margin-top: 20px;
46 height: 500px;
47 }
48 </style>
49 </head>
50 <body>
51 <h1>Sketch Monaco Viewer Demo</h1>
52
53 <div class="control-panel">
54 <p>This is a demo page for the sketch-monaco-view component.</p>
55 <div>
56 <button id="example1">Example 1: JavaScript</button>
57 <button id="example2">Example 2: HTML</button>
58 <button id="example3">Example 3: Go</button>
59 </div>
60 </div>
61
62 <sketch-monaco-view id="diffEditor"></sketch-monaco-view>
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]63
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]64 <script>
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]65 document.addEventListener("DOMContentLoaded", () => {
66 const diffEditor = document.getElementById("diffEditor");
67
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]68 // Set initial example
69 diffEditor.originalCode = `function hello() {
70 console.log("Hello World");
71 return true;
72}`;
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]73
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]74 diffEditor.modifiedCode = `function hello() {
75 // Add a comment
76 console.log("Hello Updated World");
77 return true;
78}`;
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]79
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]80 // Example 1: JavaScript
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]81 document.getElementById("example1").addEventListener("click", () => {
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]82 diffEditor.setOriginalCode(
83 `function calculateTotal(items) {
84 return items
85 .map(item => item.price * item.quantity)
86 .reduce((a, b) => a + b, 0);
87}`,
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]88 "original.js",
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]89 );
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]90
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]91 diffEditor.setModifiedCode(
92 `function calculateTotal(items) {
93 // Apply discount if available
94 return items
95 .map(item => {
96 const price = item.discount ?
97 item.price * (1 - item.discount) :
98 item.price;
99 return price * item.quantity;
100 })
101 .reduce((a, b) => a + b, 0);
102}`,
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]103 "modified.js",
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]104 );
105 });
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]106
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]107 // Example 2: HTML
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]108 document.getElementById("example2").addEventListener("click", () => {
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]109 diffEditor.setOriginalCode(
110 `<!DOCTYPE html>
111<html>
112<head>
113 <title>Demo Page</title>
114</head>
115<body>
116 <h1>Hello World</h1>
117 <p>This is a paragraph.</p>
118</body>
119</html>`,
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]120 "original.html",
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]121 );
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]122
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]123 diffEditor.setModifiedCode(
124 `<!DOCTYPE html>
125<html>
126<head>
127 <title>Demo Page</title>
128 <meta name="viewport" content="width=device-width, initial-scale=1.0">
129 <link rel="stylesheet" href="styles.css">
130</head>
131<body>
132 <header>
133 <h1>Hello World</h1>
134 </header>
135 <main>
136 <p>This is a paragraph with some <strong>bold</strong> text.</p>
137 </main>
138 <footer>
139 <p>&copy; 2025</p>
140 </footer>
141</body>
142</html>`,
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]143 "modified.html",
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]144 );
145 });
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]146
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]147 // Example 3: Go
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]148 document.getElementById("example3").addEventListener("click", () => {
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]149 diffEditor.setOriginalCode(
150 `package main
151
152import "fmt"
153
154func main() {
155 fmt.Println("Hello, world!")
156}`,
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]157 "original.go",
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]158 );
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]159
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]160 diffEditor.setModifiedCode(
161 `package main
162
163import (
164 "fmt"
165 "time"
166)
167
168func main() {
169 fmt.Println("Hello, world!")
170 fmt.Printf("The time is %s\n", time.Now().Format(time.RFC3339))
171}`,
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]172 "modified.go",
Philip Zeyliger272a90e2025-05-16 14:49:51 -0700[diff] [blame]173 );
174 });
175 });
176 </script>
177 </body>
178</html>