├── .eslintrc.js ├── .gitignore ├── .vscode ├── launch.json ├── settings.json └── tasks.json ├── .vscodeignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── resources ├── dark │ └── editor.svg └── light │ └── editor.svg ├── sample.gif └── src ├── vscode ├── DesignerTextEditor.ts ├── extension.ts └── tsconfig.json └── webview ├── DesignerHtmlParserAndWriterService.ts ├── designer.ts └── tsconfig.json /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /**@type {import('eslint').Linter.Config} */ 2 | // eslint-disable-next-line no-undef 3 | module.exports = { 4 | root: true, 5 | parser: '@typescript-eslint/parser', 6 | plugins: [ 7 | '@typescript-eslint', 8 | ], 9 | extends: [ 10 | 'eslint:recommended', 11 | 'plugin:@typescript-eslint/recommended', 12 | ], 13 | ignorePatterns: [ 14 | 'media' 15 | ], 16 | rules: { 17 | 'semi': [2, "always"], 18 | '@typescript-eslint/no-unused-vars': 0, 19 | '@typescript-eslint/no-explicit-any': 0, 20 | '@typescript-eslint/explicit-module-boundary-types': 0, 21 | '@typescript-eslint/no-non-null-assertion': 0, 22 | } 23 | }; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.rsuser 8 | *.suo 9 | *.user 10 | *.userosscache 11 | *.sln.docstates 12 | *.vsix 13 | 14 | # User-specific files (MonoDevelop/Xamarin Studio) 15 | *.userprefs 16 | 17 | # Mono auto generated files 18 | mono_crash.* 19 | 20 | # Build results 21 | [Dd]ebug/ 22 | [Dd]ebugPublic/ 23 | [Rr]elease/ 24 | [Rr]eleases/ 25 | x64/ 26 | x86/ 27 | [Aa][Rr][Mm]/ 28 | [Aa][Rr][Mm]64/ 29 | bld/ 30 | [Bb]in/ 31 | [Oo]bj/ 32 | [Ll]og/ 33 | [Ll]ogs/ 34 | [Oo]ut/ 35 | 36 | # Visual Studio 2015/2017 cache/options directory 37 | .vs/ 38 | # Uncomment if you have tasks that create the project's static files in wwwroot 39 | #wwwroot/ 40 | 41 | # Visual Studio 2017 auto generated files 42 | Generated\ Files/ 43 | 44 | # MSTest test Results 45 | [Tt]est[Rr]esult*/ 46 | [Bb]uild[Ll]og.* 47 | 48 | # NUnit 49 | *.VisualState.xml 50 | TestResult.xml 51 | nunit-*.xml 52 | 53 | # Build Results of an ATL Project 54 | [Dd]ebugPS/ 55 | [Rr]eleasePS/ 56 | dlldata.c 57 | 58 | # Benchmark Results 59 | BenchmarkDotNet.Artifacts/ 60 | 61 | # .NET Core 62 | project.lock.json 63 | project.fragment.lock.json 64 | artifacts/ 65 | 66 | # StyleCop 67 | StyleCopReport.xml 68 | 69 | # Files built by Visual Studio 70 | *_i.c 71 | *_p.c 72 | *_h.h 73 | *.ilk 74 | *.meta 75 | *.obj 76 | *.iobj 77 | *.pch 78 | *.pdb 79 | *.ipdb 80 | *.pgc 81 | *.pgd 82 | *.rsp 83 | *.sbr 84 | *.tlb 85 | *.tli 86 | *.tlh 87 | *.tmp 88 | *.tmp_proj 89 | *_wpftmp.csproj 90 | *.log 91 | *.vspscc 92 | *.vssscc 93 | .builds 94 | *.pidb 95 | *.svclog 96 | *.scc 97 | 98 | # Chutzpah Test files 99 | _Chutzpah* 100 | 101 | # Visual C++ cache files 102 | ipch/ 103 | *.aps 104 | *.ncb 105 | *.opendb 106 | *.opensdf 107 | *.sdf 108 | *.cachefile 109 | *.VC.db 110 | *.VC.VC.opendb 111 | 112 | # Visual Studio profiler 113 | *.psess 114 | *.vsp 115 | *.vspx 116 | *.sap 117 | 118 | # Visual Studio Trace Files 119 | *.e2e 120 | 121 | # TFS 2012 Local Workspace 122 | $tf/ 123 | 124 | # Guidance Automation Toolkit 125 | *.gpState 126 | 127 | # ReSharper is a .NET coding add-in 128 | _ReSharper*/ 129 | *.[Rr]e[Ss]harper 130 | *.DotSettings.user 131 | 132 | # TeamCity is a build add-in 133 | _TeamCity* 134 | 135 | # DotCover is a Code Coverage Tool 136 | *.dotCover 137 | 138 | # AxoCover is a Code Coverage Tool 139 | .axoCover/* 140 | !.axoCover/settings.json 141 | 142 | # Visual Studio code coverage results 143 | *.coverage 144 | *.coveragexml 145 | 146 | # NCrunch 147 | _NCrunch_* 148 | .*crunch*.local.xml 149 | nCrunchTemp_* 150 | 151 | # MightyMoose 152 | *.mm.* 153 | AutoTest.Net/ 154 | 155 | # Web workbench (sass) 156 | .sass-cache/ 157 | 158 | # Installshield output folder 159 | [Ee]xpress/ 160 | 161 | # DocProject is a documentation generator add-in 162 | DocProject/buildhelp/ 163 | DocProject/Help/*.HxT 164 | DocProject/Help/*.HxC 165 | DocProject/Help/*.hhc 166 | DocProject/Help/*.hhk 167 | DocProject/Help/*.hhp 168 | DocProject/Help/Html2 169 | DocProject/Help/html 170 | 171 | # Click-Once directory 172 | publish/ 173 | 174 | # Publish Web Output 175 | *.[Pp]ublish.xml 176 | *.azurePubxml 177 | # Note: Comment the next line if you want to checkin your web deploy settings, 178 | # but database connection strings (with potential passwords) will be unencrypted 179 | *.pubxml 180 | *.publishproj 181 | 182 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 183 | # checkin your Azure Web App publish settings, but sensitive information contained 184 | # in these scripts will be unencrypted 185 | PublishScripts/ 186 | 187 | # NuGet Packages 188 | *.nupkg 189 | # NuGet Symbol Packages 190 | *.snupkg 191 | # The packages folder can be ignored because of Package Restore 192 | **/[Pp]ackages/* 193 | # except build/, which is used as an MSBuild target. 194 | !**/[Pp]ackages/build/ 195 | # Uncomment if necessary however generally it will be regenerated when needed 196 | #!**/[Pp]ackages/repositories.config 197 | # NuGet v3's project.json files produces more ignorable files 198 | *.nuget.props 199 | *.nuget.targets 200 | 201 | # Microsoft Azure Build Output 202 | csx/ 203 | *.build.csdef 204 | 205 | # Microsoft Azure Emulator 206 | ecf/ 207 | rcf/ 208 | 209 | # Windows Store app package directories and files 210 | AppPackages/ 211 | BundleArtifacts/ 212 | Package.StoreAssociation.xml 213 | _pkginfo.txt 214 | *.appx 215 | *.appxbundle 216 | *.appxupload 217 | 218 | # Visual Studio cache files 219 | # files ending in .cache can be ignored 220 | *.[Cc]ache 221 | # but keep track of directories ending in .cache 222 | !?*.[Cc]ache/ 223 | 224 | # Others 225 | ClientBin/ 226 | ~$* 227 | *~ 228 | *.dbmdl 229 | *.dbproj.schemaview 230 | *.jfm 231 | *.pfx 232 | *.publishsettings 233 | orleans.codegen.cs 234 | 235 | # Including strong name files can present a security risk 236 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 237 | #*.snk 238 | 239 | # Since there are multiple workflows, uncomment next line to ignore bower_components 240 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 241 | #bower_components/ 242 | 243 | # RIA/Silverlight projects 244 | Generated_Code/ 245 | 246 | # Backup & report files from converting an old project file 247 | # to a newer Visual Studio version. Backup files are not needed, 248 | # because we have git ;-) 249 | _UpgradeReport_Files/ 250 | Backup*/ 251 | UpgradeLog*.XML 252 | UpgradeLog*.htm 253 | ServiceFabricBackup/ 254 | *.rptproj.bak 255 | 256 | # SQL Server files 257 | *.mdf 258 | *.ldf 259 | *.ndf 260 | 261 | # Business Intelligence projects 262 | *.rdl.data 263 | *.bim.layout 264 | *.bim_*.settings 265 | *.rptproj.rsuser 266 | *- [Bb]ackup.rdl 267 | *- [Bb]ackup ([0-9]).rdl 268 | *- [Bb]ackup ([0-9][0-9]).rdl 269 | 270 | # Microsoft Fakes 271 | FakesAssemblies/ 272 | 273 | # GhostDoc plugin setting file 274 | *.GhostDoc.xml 275 | 276 | # Node.js Tools for Visual Studio 277 | .ntvs_analysis.dat 278 | node_modules/ 279 | 280 | # Visual Studio 6 build log 281 | *.plg 282 | 283 | # Visual Studio 6 workspace options file 284 | *.opt 285 | 286 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 287 | *.vbw 288 | 289 | # Visual Studio LightSwitch build output 290 | **/*.HTMLClient/GeneratedArtifacts 291 | **/*.DesktopClient/GeneratedArtifacts 292 | **/*.DesktopClient/ModelManifest.xml 293 | **/*.Server/GeneratedArtifacts 294 | **/*.Server/ModelManifest.xml 295 | _Pvt_Extensions 296 | 297 | # Paket dependency manager 298 | .paket/paket.exe 299 | paket-files/ 300 | 301 | # FAKE - F# Make 302 | .fake/ 303 | 304 | # CodeRush personal settings 305 | .cr/personal 306 | 307 | # Python Tools for Visual Studio (PTVS) 308 | __pycache__/ 309 | *.pyc 310 | 311 | # Cake - Uncomment if you are using it 312 | # tools/** 313 | # !tools/packages.config 314 | 315 | # Tabs Studio 316 | *.tss 317 | 318 | # Telerik's JustMock configuration file 319 | *.jmconfig 320 | 321 | # BizTalk build output 322 | *.btp.cs 323 | *.btm.cs 324 | *.odx.cs 325 | *.xsd.cs 326 | 327 | # OpenCover UI analysis results 328 | OpenCover/ 329 | 330 | # Azure Stream Analytics local run output 331 | ASALocalRun/ 332 | 333 | # MSBuild Binary and Structured Log 334 | *.binlog 335 | 336 | # NVidia Nsight GPU debugger configuration file 337 | *.nvuser 338 | 339 | # MFractors (Xamarin productivity tool) working folder 340 | .mfractor/ 341 | 342 | # Local History for Visual Studio 343 | .localhistory/ 344 | 345 | # BeatPulse healthcheck temp database 346 | healthchecksdb 347 | 348 | # Backup folder for Package Reference Convert tool in Visual Studio 2017 349 | MigrationBackup/ 350 | 351 | # Ionide (cross platform F# VS Code tools) working folder 352 | .ionide/ 353 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that compiles the extension and then opens it inside a new window 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | { 6 | "version": "0.2.0", 7 | "configurations": [ 8 | { 9 | "name": "Run Extension", 10 | "type": "extensionHost", 11 | "request": "launch", 12 | "runtimeExecutable": "${execPath}", 13 | "args": ["--extensionDevelopmentPath=${workspaceRoot}"], 14 | "outFiles": ["${workspaceFolder}/out/**/*.js"], 15 | "preLaunchTask": "build" 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.insertSpaces": false, 3 | "window.title": "${dirty}${activeEditorShort}${separator}${rootName}${separator}${profileName}${separator}${appName}${separator}[Branch: main]" 4 | } -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | // See https://go.microsoft.com/fwlink/?LinkId=733558 2 | // for the documentation about the tasks.json format 3 | { 4 | "version": "2.0.0", 5 | "tasks": [ 6 | { 7 | "label": "npm_watch", 8 | "type": "npm", 9 | "script": "watch", 10 | "problemMatcher": "$tsc-watch", 11 | "isBackground": true, 12 | "presentation": { 13 | "reveal": "never" 14 | }, 15 | "group": { 16 | "kind": "build", 17 | "isDefault": true 18 | } 19 | }, 20 | { 21 | "label": "npm_watchWebview", 22 | "type": "npm", 23 | "script": "watchWebview", 24 | "problemMatcher": "$tsc-watch", 25 | "isBackground": true, 26 | "presentation": { 27 | "reveal": "never" 28 | }, 29 | "group": { 30 | "kind": "build", 31 | "isDefault": true 32 | } 33 | }, 34 | { 35 | "label": "build", 36 | "dependsOn": [ 37 | "npm_watch", 38 | "npm_watchWebview" 39 | ] 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | src/ 3 | *.vsix 4 | 5 | #!node_modules/ 6 | node_modules/** 7 | !node_modules/@adobe/ 8 | !node_modules/@node-projects/ 9 | !node_modules/es-module-shims/ 10 | !node_modules/typescript/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 node projects 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vs-code-designer-addon 2 | A VSCode WYSIWYG HTML Designer Addon. 3 | 4 | it is also usable in VSCodeWeb 5 | 6 | ## addon-page 7 | 8 | https://marketplace.visualstudio.com/items?itemName=node-projects.vscode-designer-addon 9 | 10 | ## references 11 | 12 | - based on https://github.com/node-projects/web-component-designer 13 | - sample using the designer: https://node-projects.github.io/web-component-designer-demo/index.html 14 | 15 | ## supports 16 | 17 | - html files 18 | - https://github.com/node-projects/base-custom-webcomponent Components, with css in static style varibale and html in static template variable. 19 | - https://polymer-library.polymer-project.org/ Components. 20 | - https://vuejs.org/ Components with templates in 'template' tags. 21 | - https://svelte.dev/ Components. 22 | 23 | ## sample image 24 | 25 | ![sample](sample.gif) 26 | 27 | ## Open the Designer 28 | 29 | - Rightclick on a '.html', '.ts', '.vue' File and Select "Open With", here select "Designer". 30 | 31 | ## Development of the Extension 32 | 33 | - Clone this Repository 34 | - Open the Cloned Repository in VS Code 1.47+ 35 | - `npm install` 36 | - `F5` to start debugging 37 | 38 | ## Test new Versions 39 | 40 | - Run 'npm start package', this will start vsce and create a packge wich then you could install localy. 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vscode-designer-addon", 3 | "displayName": "HTML Wysiwyg (What you see is what you get) Designer Addon", 4 | "description": "A Graphical HTML Designer", 5 | "version": "1.2.0", 6 | "publisher": "node-projects", 7 | "license": "MIT", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/node-projects/vs-code-designer-addon" 11 | }, 12 | "engines": { 13 | "vscode": "^1.77.0" 14 | }, 15 | "categories": [ 16 | "Programming Languages", 17 | "Visualization" 18 | ], 19 | "activationEvents": [ 20 | "onWebviewPanel:designer" 21 | ], 22 | "main": "./out/vscode/extension.js", 23 | "browser": "./out/vscodeWeb/extension.js", 24 | "contributes": { 25 | "menus": { 26 | "editor/title": [ 27 | { 28 | "command": "designer.openInDesignerTextEditor", 29 | "when": "true", 30 | "group": "navigation" 31 | } 32 | ], 33 | "explorer/context": [ 34 | { 35 | "command": "designer.openInDesignerTextEditor", 36 | "when": "true", 37 | "group": "navigation" 38 | } 39 | ] 40 | }, 41 | "commands": [ 42 | { 43 | "command": "designer.openInDesignerTextEditor", 44 | "title": "🎨 Open in Designer", 45 | "icon": { 46 | "light": "resources/light/editor.svg", 47 | "dark": "resources/dark/editor.svg" 48 | } 49 | } 50 | ], 51 | "customEditors": [ 52 | { 53 | "viewType": "designer.designerTextEditor", 54 | "displayName": "Designer", 55 | "selector": [ 56 | { 57 | "filenamePattern": "*.html" 58 | }, 59 | { 60 | "filenamePattern": "*.htm" 61 | }, 62 | { 63 | "filenamePattern": "*.vue" 64 | }, 65 | { 66 | "filenamePattern": "*.js" 67 | }, 68 | { 69 | "filenamePattern": "*.jsx" 70 | }, 71 | { 72 | "filenamePattern": "*.ts" 73 | }, 74 | { 75 | "filenamePattern": "*.tsx" 76 | }, 77 | { 78 | "filenamePattern": "*.svelte" 79 | } 80 | ], 81 | "priority": "option" 82 | } 83 | ] 84 | }, 85 | "scripts": { 86 | "vscode:prepublish": "npm run compile && npm run compileWebview && npm run esbuild", 87 | "compile": "tsc -p ./src/vscode", 88 | "compileWebview": "tsc -p ./src/webview", 89 | "lint": "eslint \"src/**/*.ts\"", 90 | "watch": "tsc -w -p ./src/vscode", 91 | "watchWebview": "tsc -w -p ./src/webview", 92 | "vsce": "vsce", 93 | "package": "vsce package", 94 | "publish": "vsce publish", 95 | "esbuild": "esbuild ./out/vscode/extension.js --bundle --outfile=out/vscodeWeb/extension.js --external:vscode --format=cjs --platform=node" 96 | }, 97 | "devDependencies": { 98 | "@types/node": "^22.15.2", 99 | "@types/vscode": "^1.77.0", 100 | "@types/vscode-webview": "^1.57.5", 101 | "@typescript-eslint/eslint-plugin": "^8.31.0", 102 | "@typescript-eslint/parser": "^8.31.0", 103 | "@vscode/vsce": "^3.3.2", 104 | "esbuild": "^0.25.3", 105 | "eslint": "^9.25.1" 106 | }, 107 | "dependencies": { 108 | "@adobe/css-tools": "4.4.2", 109 | "@node-projects/base-custom-webcomponent": "^0.30.0", 110 | "@node-projects/lean-he-esm": "^3.3.0", 111 | "@node-projects/node-html-parser-esm": "^6.2.0", 112 | "@node-projects/web-component-designer": "^0.1.255", 113 | "@node-projects/web-component-designer-htmlparserservice-base-custom-webcomponent": "^0.1.5", 114 | "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser": "^0.1.11", 115 | "@node-projects/web-component-designer-stylesheetservice-css-tools": "^0.1.10", 116 | "es-module-shims": "^2.4.0", 117 | "typescript": "^5.8.3" 118 | } 119 | } -------------------------------------------------------------------------------- /resources/dark/editor.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /resources/light/editor.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sample.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/node-projects/vs-code-designer-addon/96486bc79462a5368ec82ce054b43ce6aaa61ff7/sample.gif -------------------------------------------------------------------------------- /src/vscode/DesignerTextEditor.ts: -------------------------------------------------------------------------------- 1 | import * as vscode from 'vscode'; 2 | 3 | export function getNonce() { 4 | let text = ''; 5 | const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; 6 | for (let i = 0; i < 32; i++) { 7 | text += possible.charAt(Math.floor(Math.random() * possible.length)); 8 | } 9 | return text; 10 | } 11 | 12 | export class DesignerTextEditor implements vscode.CustomTextEditorProvider { 13 | 14 | public static register(context: vscode.ExtensionContext): vscode.Disposable { 15 | const provider = new DesignerTextEditor(context); 16 | const providerRegistration = vscode.window.registerCustomEditorProvider(DesignerTextEditor.viewType, provider, { 17 | webviewOptions: { 18 | retainContextWhenHidden: true 19 | } 20 | }); 21 | return providerRegistration; 22 | } 23 | 24 | private static readonly viewType = 'designer.designerTextEditor'; 25 | 26 | constructor(private readonly context: vscode.ExtensionContext) { } 27 | 28 | public async addCustomElementsJsons(webviewPanel: vscode.WebviewPanel) { 29 | //TODO: 30 | //-> check current project if it has a custome-elements.json, or if it is linked in a package.json 31 | //-> check NPM packages for custom elements 32 | const manifests = []; 33 | if (vscode.workspace.workspaceFolders) { 34 | for (const f of vscode.workspace.workspaceFolders) { 35 | const p = vscode.Uri.joinPath(f.uri, 'custom-elements.json'); 36 | try { 37 | const stat = await vscode.workspace.fs.stat(p); 38 | manifests.push(webviewPanel.webview.asWebviewUri(p).toString()); 39 | } catch { } 40 | } 41 | } 42 | 43 | webviewPanel.webview.postMessage({ 44 | type: 'manifests', 45 | manifests: manifests 46 | }); 47 | } 48 | 49 | public async resolveCustomTextEditor(document: vscode.TextDocument, webviewPanel: vscode.WebviewPanel, _token: vscode.CancellationToken): Promise { 50 | webviewPanel.webview.options = { enableScripts: true }; 51 | const parts = document.fileName.replaceAll('\\', '/').split('/'); 52 | parts.pop(); 53 | const folder = parts.join('/'); 54 | 55 | webviewPanel.webview.html = this.getHtmlForWebview(webviewPanel.webview, folder); 56 | 57 | let disableSelectionChange = false; 58 | let disableUpdateWebview = false; 59 | 60 | function updateWebview() { 61 | //debugger; 62 | webviewPanel.webview.postMessage({ 63 | type: 'update', 64 | text: document.getText(), 65 | filename: document.fileName 66 | }); 67 | } 68 | 69 | const changeDocumentSubscription = vscode.workspace.onDidChangeTextDocument(e => { 70 | if (e.document.uri.toString() === document.uri.toString()) { 71 | if (!disableUpdateWebview) { 72 | disableUpdateWebview = true; 73 | updateWebview(); 74 | setTimeout(() => { 75 | disableUpdateWebview = false; 76 | }, 50); 77 | } 78 | 79 | } 80 | }); 81 | 82 | const changeTextEditorSelection = vscode.window.onDidChangeTextEditorSelection(e => { 83 | if (e.textEditor.document.uri.toString() === document.uri.toString()) { 84 | if (!disableSelectionChange) { 85 | disableSelectionChange = true; 86 | webviewPanel.webview.postMessage({ 87 | type: 'changeSelection', 88 | position: e.textEditor.document.offsetAt(e.selections[0].start), 89 | positionEnd: e.textEditor.document.offsetAt(e.selections[0].end), 90 | }); 91 | setTimeout(() => { 92 | disableSelectionChange = false; 93 | }, 100); 94 | } 95 | } 96 | }); 97 | 98 | // Make sure we get rid of the listener when our editor is closed. 99 | webviewPanel.onDidDispose(() => { 100 | changeDocumentSubscription.dispose(); 101 | changeTextEditorSelection.dispose(); 102 | }); 103 | 104 | // Receive message from the webview. 105 | webviewPanel.webview.onDidReceiveMessage(e => { 106 | switch (e.type) { 107 | case 'firstLoad': 108 | updateWebview(); 109 | this.addCustomElementsJsons(webviewPanel); 110 | return; 111 | case 'updateDocument': { 112 | if (!disableUpdateWebview) { 113 | disableUpdateWebview = true; 114 | setTimeout(() => { 115 | disableUpdateWebview = false; 116 | }, 50); 117 | const edit = new vscode.WorkspaceEdit(); 118 | edit.replace( 119 | document.uri, 120 | new vscode.Range(0, 0, document.lineCount, 0), e.code); 121 | return vscode.workspace.applyEdit(edit); 122 | } 123 | } 124 | case 'setSelection': 125 | { 126 | 127 | if (!disableSelectionChange) { 128 | disableSelectionChange = true; 129 | for (const editor of vscode.window.visibleTextEditors) { 130 | if (editor.document == document) { 131 | let point1 = editor.document.positionAt(e.position.start); 132 | let point2 = editor.document.positionAt(e.position.start + e.position.length); 133 | editor.selection = new vscode.Selection(point1, point2); 134 | } 135 | } 136 | setTimeout(() => { 137 | disableSelectionChange = false; 138 | }, 100); 139 | } 140 | } 141 | return; 142 | } 143 | }); 144 | } 145 | 146 | /** 147 | * Get the static html used for the editor webviews. 148 | */ 149 | private getHtmlForWebview(webview: vscode.Webview, documentFolder: string): string { 150 | // Local path to main script run in the webview 151 | const scriptPathOnDisk = vscode.Uri.joinPath(this.context.extensionUri, 'out', 'webview', 'designer.js'); 152 | 153 | // And the uri we use to load this script in the webview 154 | const baseuri = webview.asWebviewUri(vscode.Uri.file(documentFolder)) + '/'; 155 | const scriptUri = webview.asWebviewUri(scriptPathOnDisk); 156 | const folder = vscode?.workspace?.workspaceFolders?.[0]; 157 | const workspaceUri = baseuri; // webview.asWebviewUri(folder?.uri); 158 | const nonce = getNonce(); 159 | 160 | return /* html */` 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 175 | 178 | 179 | 180 | 203 | 204 | 205 | 208 | 209 | 210 | 211 | 212 | 213 | `; 214 | } 215 | } -------------------------------------------------------------------------------- /src/vscode/extension.ts: -------------------------------------------------------------------------------- 1 | import * as vscode from 'vscode'; 2 | import { DesignerTextEditor } from './DesignerTextEditor.js'; 3 | 4 | export function activate(context: vscode.ExtensionContext) { 5 | //context.subscriptions.push( 6 | // vscode.window.registerWebviewViewProvider(ColorsViewProvider.viewType, provider)); 7 | context.subscriptions.push(DesignerTextEditor.register(context)); 8 | 9 | vscode.commands.registerCommand('designer.openInDesignerTextEditor', (uri: vscode.Uri) => { 10 | vscode.commands.executeCommand('vscode.openWith', uri, 'designer.designerTextEditor'); 11 | }); 12 | } 13 | -------------------------------------------------------------------------------- /src/vscode/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "commonjs", 5 | "target": "ESNext", 6 | "lib": ["ES2023"], 7 | "outDir": "../../out/vscode", 8 | "sourceMap": true, 9 | "strict": true, 10 | "rootDir": "." 11 | }, 12 | "exclude": ["node_modules", ".vscode-test"] 13 | } 14 | -------------------------------------------------------------------------------- /src/webview/DesignerHtmlParserAndWriterService.ts: -------------------------------------------------------------------------------- 1 | import { IDesignItem, IHtmlParserService, InstanceServiceContainer, ServiceContainer } from "@node-projects/web-component-designer"; 2 | import { BaseCustomWebcomponentParserService } from "@node-projects/web-component-designer-htmlparserservice-base-custom-webcomponent"; 3 | import { NodeHtmlParserService } from "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser"; 4 | 5 | export class DesignerHtmlParserAndWriterService implements IHtmlParserService { 6 | 7 | nodeHtmlParserService: NodeHtmlParserService; 8 | baseCustomWebcomponentParserService: BaseCustomWebcomponentParserService; 9 | 10 | public filename: string = ''; 11 | public originalContent: string = ''; 12 | 13 | constructor(path: string) { 14 | this.nodeHtmlParserService = new NodeHtmlParserService(); 15 | this.baseCustomWebcomponentParserService = new BaseCustomWebcomponentParserService(this.nodeHtmlParserService); 16 | } 17 | 18 | parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, parseSnippet: boolean): Promise { 19 | this.originalContent = html; 20 | if (this.filename.endsWith('.ts')) { 21 | return this.baseCustomWebcomponentParserService.parse(html, serviceContainer, instanceServiceContainer, parseSnippet); 22 | } 23 | return this.nodeHtmlParserService.parse(html, serviceContainer, instanceServiceContainer, parseSnippet); 24 | } 25 | 26 | write(html: string, css: string): string { 27 | if (this.filename.endsWith('.ts')) { 28 | return this.baseCustomWebcomponentParserService.writeBack(this.originalContent, html, css, false); 29 | } 30 | return html; 31 | } 32 | } -------------------------------------------------------------------------------- /src/webview/designer.ts: -------------------------------------------------------------------------------- 1 | const vscode = acquireVsCodeApi(); 2 | //@ts-ignore 3 | const workspaceuri = window['__$vscodeWorkspaceUri']; 4 | 5 | const url = new URL(import.meta.url); 6 | const path = url.pathname.replace("out/webview/designer.js", ""); 7 | 8 | //TODO: vscode does not yet know CSSContainerRule 9 | if (!window.CSSContainerRule) 10 | //@ts-ignore 11 | window.CSSContainerRule = class { } 12 | 13 | import { DomHelper } from '@node-projects/base-custom-webcomponent'; 14 | import { DesignerView, IDesignItem, PaletteView, PreDefinedElementsService, PropertyGrid, WebcomponentManifestElementsService, WebcomponentManifestPropertiesService } from '@node-projects/web-component-designer'; 15 | import createDefaultServiceContainer from '@node-projects/web-component-designer/dist/elements/services/DefaultServiceBootstrap.js'; 16 | import { DesignerHtmlParserAndWriterService } from './DesignerHtmlParserAndWriterService.js'; 17 | import { CssToolsStylesheetService } from '@node-projects/web-component-designer-stylesheetservice-css-tools'; 18 | 19 | await window.customElements.whenDefined("node-projects-designer-view"); 20 | const designerView = document.querySelector("node-projects-designer-view"); 21 | const propertyGrid = document.getElementById("propertyGrid"); 22 | const paletteView = document.getElementById("paletteView"); 23 | let serviceContainer = createDefaultServiceContainer(); 24 | let designerHtmlParserService = new DesignerHtmlParserAndWriterService(path); 25 | serviceContainer.register("htmlParserService", designerHtmlParserService); 26 | serviceContainer.register("stylesheetService", designerCanvas => new CssToolsStylesheetService(designerCanvas)); 27 | //@ts-ignore 28 | let json = await import('@node-projects/web-component-designer/config/elements-native.json', { assert: { type: 'json' } }) 29 | serviceContainer.register('elementsService', new PreDefinedElementsService('native', json.default)); 30 | 31 | designerView.initialize(serviceContainer); 32 | propertyGrid.serviceContainer = serviceContainer; 33 | propertyGrid.instanceServiceContainer = designerView.instanceServiceContainer; 34 | paletteView.loadControls(serviceContainer, serviceContainer.elementsServices); 35 | 36 | function fixDesignItemsPaths(designItem: IDesignItem) { 37 | if (designItem.hasChildren) { 38 | for (let d of designItem.children()) { 39 | fixDesignItemsPaths(d); 40 | } 41 | } 42 | if (designItem.name == 'img' && (designItem.element).src) 43 | (designItem.element).src = workspaceuri + designItem.getAttribute('src'); 44 | else if (designItem.name == 'link' && (designItem.element).href) 45 | (designItem.element).href = workspaceuri + designItem.getAttribute('href'); 46 | } 47 | 48 | async function parseHTML(html: string) { 49 | const parserService = designerView.serviceContainer.htmlParserService; 50 | if (!html) { 51 | designerView.instanceServiceContainer.undoService.clear(); 52 | designerView.designerCanvas.overlayLayer.removeAllOverlays(); 53 | DomHelper.removeAllChildnodes(designerView.designerCanvas.overlayLayer); 54 | designerView.designerCanvas.rootDesignItem.clearChildren(); 55 | } 56 | else { 57 | const designItems = await parserService.parse(html, designerView.serviceContainer, designerView.instanceServiceContainer, false); 58 | for (let d of designItems) 59 | fixDesignItemsPaths(d) 60 | designerView.designerCanvas.setDesignItems(designItems) 61 | } 62 | } 63 | 64 | let parsing = true; 65 | window.addEventListener('message', async event => { 66 | const message = event.data; 67 | switch (message.type) { 68 | case 'update': 69 | parsing = true; 70 | designerHtmlParserService.filename = message.filename; 71 | await parseHTML(message.text); 72 | parsing = false; 73 | break; 74 | case 'changeSelection': 75 | const pos = message.position; 76 | const posEnd = message.positionEnd; 77 | const root = designerView.designerCanvas.rootDesignItem; 78 | designerView.instanceServiceContainer.selectionService.setSelectionByTextRange(pos, posEnd); 79 | break; 80 | case 'manifests': 81 | let n = 0; 82 | for (let m of message.manifests) { 83 | n++; 84 | let nm = 'local ' + n; 85 | let x = await fetch(m); 86 | const manifest = await x.json(); 87 | serviceContainer.register("elementsService", new WebcomponentManifestElementsService(nm, '', manifest)); 88 | serviceContainer.register("propertyService", new WebcomponentManifestPropertiesService(nm, manifest)); 89 | } 90 | paletteView.loadControls(serviceContainer, serviceContainer.elementsServices); 91 | break; 92 | } 93 | }); 94 | 95 | designerView.instanceServiceContainer.selectionService.onSelectionChanged.on(() => { 96 | let primarySelection = designerView.instanceServiceContainer.selectionService.primarySelection; 97 | if (primarySelection) { 98 | const selectionPosition = designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection); 99 | vscode.postMessage({ type: 'setSelection', position: selectionPosition }); 100 | } 101 | }); 102 | /*designerView.instanceServiceContainer.stylesheetService.stylesheetChanged.on((event) => { 103 | console.log(event); 104 | });*/ 105 | designerView.designerCanvas.onContentChanged.on(() => { 106 | if (!parsing) { 107 | let code = designerView.getDesignerHTML(); 108 | let st = designerView.instanceServiceContainer.stylesheetService.getStylesheets()?.find(x => x.name == 'css'); 109 | let css = ''; 110 | if (st) { 111 | css = st.content; 112 | } 113 | code = designerHtmlParserService.write(code, css); 114 | vscode.postMessage({ type: 'updateDocument', code: code }); 115 | } 116 | }) 117 | 118 | vscode.postMessage({ type: 'firstLoad' }); -------------------------------------------------------------------------------- /src/webview/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "target": "ESNext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "lib": ["DOM", "ES2021.WeakRef"], 9 | "rootDir": ".", 10 | "outDir": "../../out/webview", 11 | }, 12 | "exclude": [ 13 | "node_modules", 14 | "**/node_modules/*" 15 | ], 16 | "typeAcquisition": { 17 | "include": [ 18 | "@types/vscode-webview" 19 | ] 20 | } 21 | } --------------------------------------------------------------------------------