PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1
tldraw/apps/vscode/README.md

56 lines
2 KiB
Markdown
Raw Normal View History

Create VS Code Extension (#4) * Start of vscode extension. Current code is copy/paste from custom editor samples from Microsoft. We need to evaluate if using their text based customer editor or full on new custom editor is the way to go * Not sure how I missed these files. Adding them * Have a custom editor triggering off of .tldr files. Added gitignores for generated folder. Have iframed tldraw loading and security policies set to do so * Can now load a .tldr file. No saving support yet. Load times are slow, mostly from editor loading up I think * Have temporary solution for saving working now too. * Missed af ile * Backing up progress in syncing tldraw editor history changes * Removed console * ... * ... * Cleanup * Have save working well now. * Moved extension into 'integrations' folder * Trying out WebviewPanelOptions.retainContextWhenHidden=true and it's looking promising * Some cleanup * Trying out new @tldraw/editor module * Have prototype loading using new embedded editor * ... * Shaved off 1 second from editor loadtime * Got save working again. Had to manually fixuppreviously created .tldr files as the format changed a bit * More tuning * Starting work to get new tldraw/tldraw working. * Added example tldr files to vscode package * Removed old editor package * Have onChange working with latest fix. Back to iframed for a few mom * Fixed up .tldr files * Have iframe free extension working, but requiring hand crafted building * ... * Better handling of empty .tldr files. Still an issue with freshly created files trying to save as .js or .json * Thoroughly added comments for the extension code. Need to add diagrams though and now will document/comment/diagram the editor src code * Added comments to all of the editor side of the VS Code Extension. Also cleaned up the code * More cleanup of VS Code Extension code and have script automating generating the initial webview's html content from the cra editor static build * Tweaks to watch logic * Improved scripts for publishing to VS Code Marketplace * Improved name * Made the smiley angry * Reverted * Turned smiley mad * Turned smiley mad * Made smiley sad * Have a lot of plumbing working for Github codespaces and github.dev support * Imported new tldraw vs code extension code. Added instructions for workflows * Quick fix * Fix for corrupted arrows files * Updated editor build step to new location * Merge branch 'main' into vscode-extension-v1, add local file updating * Update App.tsx * Cleanup, bumped to 0.0.124 @tldraw/tdlraw and published a 0.10.0 version of hte extension * Added Trello/Kanban style file * Finished video * brings up to date * Fix scripts * Update README.md * Update .babelrc Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2021-11-06 16:49:53 +00:00
# @tldraw/vscode
Prepare for Publishing VS Code Extension (#227) * Changed Wardlt use back to Tldraw. Added some VS Code marketplace categories * Missed removing one Wardlt mention * Initial support for esbuild based vscode extension workflow. * Hacky start of vs code extension build script * Fixed categories of extension * Added script for generating VS Code extension installer * Temp fix for file format change affecting VS Code extension * Temp fix for file format change issue * Cleanup, prevent changes from saving pagestates * Remove logic around saving pageState * standardize capitalization * v0.1.8 * Edit readme, scripts * Update .eslintignore * v0.1.9 * v0.1.10 * cleans up build scripts, adds publishing notes * Added VS Code extension implementation references links. start:vscode now auto opens the extension folder in VS Code * Removed step from VS Code README to manually open the extensions folder * Removed file * v0.1.11 * v0.1.12 * Fix empty file * v0.1.13 * README cleanup * v0.1.14 * Update TLDrawEditorProvider.ts * v0.1.15 * Fix types for file extension (sort of) build script for extension Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2021-11-10 15:35:51 +00:00
This folder contains the source for the tldraw VS Code extension.
Create VS Code Extension (#4) * Start of vscode extension. Current code is copy/paste from custom editor samples from Microsoft. We need to evaluate if using their text based customer editor or full on new custom editor is the way to go * Not sure how I missed these files. Adding them * Have a custom editor triggering off of .tldr files. Added gitignores for generated folder. Have iframed tldraw loading and security policies set to do so * Can now load a .tldr file. No saving support yet. Load times are slow, mostly from editor loading up I think * Have temporary solution for saving working now too. * Missed af ile * Backing up progress in syncing tldraw editor history changes * Removed console * ... * ... * Cleanup * Have save working well now. * Moved extension into 'integrations' folder * Trying out WebviewPanelOptions.retainContextWhenHidden=true and it's looking promising * Some cleanup * Trying out new @tldraw/editor module * Have prototype loading using new embedded editor * ... * Shaved off 1 second from editor loadtime * Got save working again. Had to manually fixuppreviously created .tldr files as the format changed a bit * More tuning * Starting work to get new tldraw/tldraw working. * Added example tldr files to vscode package * Removed old editor package * Have onChange working with latest fix. Back to iframed for a few mom * Fixed up .tldr files * Have iframe free extension working, but requiring hand crafted building * ... * Better handling of empty .tldr files. Still an issue with freshly created files trying to save as .js or .json * Thoroughly added comments for the extension code. Need to add diagrams though and now will document/comment/diagram the editor src code * Added comments to all of the editor side of the VS Code Extension. Also cleaned up the code * More cleanup of VS Code Extension code and have script automating generating the initial webview's html content from the cra editor static build * Tweaks to watch logic * Improved scripts for publishing to VS Code Marketplace * Improved name * Made the smiley angry * Reverted * Turned smiley mad * Turned smiley mad * Made smiley sad * Have a lot of plumbing working for Github codespaces and github.dev support * Imported new tldraw vs code extension code. Added instructions for workflows * Quick fix * Fix for corrupted arrows files * Updated editor build step to new location * Merge branch 'main' into vscode-extension-v1, add local file updating * Update App.tsx * Cleanup, bumped to 0.0.124 @tldraw/tdlraw and published a 0.10.0 version of hte extension * Added Trello/Kanban style file * Finished video * brings up to date * Fix scripts * Update README.md * Update .babelrc Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2021-11-06 16:49:53 +00:00
Prepare for Publishing VS Code Extension (#227) * Changed Wardlt use back to Tldraw. Added some VS Code marketplace categories * Missed removing one Wardlt mention * Initial support for esbuild based vscode extension workflow. * Hacky start of vs code extension build script * Fixed categories of extension * Added script for generating VS Code extension installer * Temp fix for file format change affecting VS Code extension * Temp fix for file format change issue * Cleanup, prevent changes from saving pagestates * Remove logic around saving pageState * standardize capitalization * v0.1.8 * Edit readme, scripts * Update .eslintignore * v0.1.9 * v0.1.10 * cleans up build scripts, adds publishing notes * Added VS Code extension implementation references links. start:vscode now auto opens the extension folder in VS Code * Removed step from VS Code README to manually open the extensions folder * Removed file * v0.1.11 * v0.1.12 * Fix empty file * v0.1.13 * README cleanup * v0.1.14 * Update TLDrawEditorProvider.ts * v0.1.15 * Fix types for file extension (sort of) build script for extension Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2021-11-10 15:35:51 +00:00
## Developing
Create VS Code Extension (#4) * Start of vscode extension. Current code is copy/paste from custom editor samples from Microsoft. We need to evaluate if using their text based customer editor or full on new custom editor is the way to go * Not sure how I missed these files. Adding them * Have a custom editor triggering off of .tldr files. Added gitignores for generated folder. Have iframed tldraw loading and security policies set to do so * Can now load a .tldr file. No saving support yet. Load times are slow, mostly from editor loading up I think * Have temporary solution for saving working now too. * Missed af ile * Backing up progress in syncing tldraw editor history changes * Removed console * ... * ... * Cleanup * Have save working well now. * Moved extension into 'integrations' folder * Trying out WebviewPanelOptions.retainContextWhenHidden=true and it's looking promising * Some cleanup * Trying out new @tldraw/editor module * Have prototype loading using new embedded editor * ... * Shaved off 1 second from editor loadtime * Got save working again. Had to manually fixuppreviously created .tldr files as the format changed a bit * More tuning * Starting work to get new tldraw/tldraw working. * Added example tldr files to vscode package * Removed old editor package * Have onChange working with latest fix. Back to iframed for a few mom * Fixed up .tldr files * Have iframe free extension working, but requiring hand crafted building * ... * Better handling of empty .tldr files. Still an issue with freshly created files trying to save as .js or .json * Thoroughly added comments for the extension code. Need to add diagrams though and now will document/comment/diagram the editor src code * Added comments to all of the editor side of the VS Code Extension. Also cleaned up the code * More cleanup of VS Code Extension code and have script automating generating the initial webview's html content from the cra editor static build * Tweaks to watch logic * Improved scripts for publishing to VS Code Marketplace * Improved name * Made the smiley angry * Reverted * Turned smiley mad * Turned smiley mad * Made smiley sad * Have a lot of plumbing working for Github codespaces and github.dev support * Imported new tldraw vs code extension code. Added instructions for workflows * Quick fix * Fix for corrupted arrows files * Updated editor build step to new location * Merge branch 'main' into vscode-extension-v1, add local file updating * Update App.tsx * Cleanup, bumped to 0.0.124 @tldraw/tdlraw and published a 0.10.0 version of hte extension * Added Trello/Kanban style file * Finished video * brings up to date * Fix scripts * Update README.md * Update .babelrc Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2021-11-06 16:49:53 +00:00
Prepare for Publishing VS Code Extension (#227) * Changed Wardlt use back to Tldraw. Added some VS Code marketplace categories * Missed removing one Wardlt mention * Initial support for esbuild based vscode extension workflow. * Hacky start of vs code extension build script * Fixed categories of extension * Added script for generating VS Code extension installer * Temp fix for file format change affecting VS Code extension * Temp fix for file format change issue * Cleanup, prevent changes from saving pagestates * Remove logic around saving pageState * standardize capitalization * v0.1.8 * Edit readme, scripts * Update .eslintignore * v0.1.9 * v0.1.10 * cleans up build scripts, adds publishing notes * Added VS Code extension implementation references links. start:vscode now auto opens the extension folder in VS Code * Removed step from VS Code README to manually open the extensions folder * Removed file * v0.1.11 * v0.1.12 * Fix empty file * v0.1.13 * README cleanup * v0.1.14 * Update TLDrawEditorProvider.ts * v0.1.15 * Fix types for file extension (sort of) build script for extension Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2021-11-10 15:35:51 +00:00
## 1. Install dependencies
- Run `yarn` from the root folder
## 2. Build @tldraw/tldraw
- Run `yarn build:packages` from the root folder.
## 3. Start the editor
In the root folder:
- Run `yarn start:vscode`.
This will start the development server for the `vscode/editor` project and open the `vscode/extension` folder in a new window.
Create VS Code Extension (#4) * Start of vscode extension. Current code is copy/paste from custom editor samples from Microsoft. We need to evaluate if using their text based customer editor or full on new custom editor is the way to go * Not sure how I missed these files. Adding them * Have a custom editor triggering off of .tldr files. Added gitignores for generated folder. Have iframed tldraw loading and security policies set to do so * Can now load a .tldr file. No saving support yet. Load times are slow, mostly from editor loading up I think * Have temporary solution for saving working now too. * Missed af ile * Backing up progress in syncing tldraw editor history changes * Removed console * ... * ... * Cleanup * Have save working well now. * Moved extension into 'integrations' folder * Trying out WebviewPanelOptions.retainContextWhenHidden=true and it's looking promising * Some cleanup * Trying out new @tldraw/editor module * Have prototype loading using new embedded editor * ... * Shaved off 1 second from editor loadtime * Got save working again. Had to manually fixuppreviously created .tldr files as the format changed a bit * More tuning * Starting work to get new tldraw/tldraw working. * Added example tldr files to vscode package * Removed old editor package * Have onChange working with latest fix. Back to iframed for a few mom * Fixed up .tldr files * Have iframe free extension working, but requiring hand crafted building * ... * Better handling of empty .tldr files. Still an issue with freshly created files trying to save as .js or .json * Thoroughly added comments for the extension code. Need to add diagrams though and now will document/comment/diagram the editor src code * Added comments to all of the editor side of the VS Code Extension. Also cleaned up the code * More cleanup of VS Code Extension code and have script automating generating the initial webview's html content from the cra editor static build * Tweaks to watch logic * Improved scripts for publishing to VS Code Marketplace * Improved name * Made the smiley angry * Reverted * Turned smiley mad * Turned smiley mad * Made smiley sad * Have a lot of plumbing working for Github codespaces and github.dev support * Imported new tldraw vs code extension code. Added instructions for workflows * Quick fix * Fix for corrupted arrows files * Updated editor build step to new location * Merge branch 'main' into vscode-extension-v1, add local file updating * Update App.tsx * Cleanup, bumped to 0.0.124 @tldraw/tdlraw and published a 0.10.0 version of hte extension * Added Trello/Kanban style file * Finished video * brings up to date * Fix scripts * Update README.md * Update .babelrc Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2021-11-06 16:49:53 +00:00
Prepare for Publishing VS Code Extension (#227) * Changed Wardlt use back to Tldraw. Added some VS Code marketplace categories * Missed removing one Wardlt mention * Initial support for esbuild based vscode extension workflow. * Hacky start of vs code extension build script * Fixed categories of extension * Added script for generating VS Code extension installer * Temp fix for file format change affecting VS Code extension * Temp fix for file format change issue * Cleanup, prevent changes from saving pagestates * Remove logic around saving pageState * standardize capitalization * v0.1.8 * Edit readme, scripts * Update .eslintignore * v0.1.9 * v0.1.10 * cleans up build scripts, adds publishing notes * Added VS Code extension implementation references links. start:vscode now auto opens the extension folder in VS Code * Removed step from VS Code README to manually open the extensions folder * Removed file * v0.1.11 * v0.1.12 * Fix empty file * v0.1.13 * README cleanup * v0.1.14 * Update TLDrawEditorProvider.ts * v0.1.15 * Fix types for file extension (sort of) build script for extension Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2021-11-10 15:35:51 +00:00
In the `vscode/extension` window, open the terminal and run:
Create VS Code Extension (#4) * Start of vscode extension. Current code is copy/paste from custom editor samples from Microsoft. We need to evaluate if using their text based customer editor or full on new custom editor is the way to go * Not sure how I missed these files. Adding them * Have a custom editor triggering off of .tldr files. Added gitignores for generated folder. Have iframed tldraw loading and security policies set to do so * Can now load a .tldr file. No saving support yet. Load times are slow, mostly from editor loading up I think * Have temporary solution for saving working now too. * Missed af ile * Backing up progress in syncing tldraw editor history changes * Removed console * ... * ... * Cleanup * Have save working well now. * Moved extension into 'integrations' folder * Trying out WebviewPanelOptions.retainContextWhenHidden=true and it's looking promising * Some cleanup * Trying out new @tldraw/editor module * Have prototype loading using new embedded editor * ... * Shaved off 1 second from editor loadtime * Got save working again. Had to manually fixuppreviously created .tldr files as the format changed a bit * More tuning * Starting work to get new tldraw/tldraw working. * Added example tldr files to vscode package * Removed old editor package * Have onChange working with latest fix. Back to iframed for a few mom * Fixed up .tldr files * Have iframe free extension working, but requiring hand crafted building * ... * Better handling of empty .tldr files. Still an issue with freshly created files trying to save as .js or .json * Thoroughly added comments for the extension code. Need to add diagrams though and now will document/comment/diagram the editor src code * Added comments to all of the editor side of the VS Code Extension. Also cleaned up the code * More cleanup of VS Code Extension code and have script automating generating the initial webview's html content from the cra editor static build * Tweaks to watch logic * Improved scripts for publishing to VS Code Marketplace * Improved name * Made the smiley angry * Reverted * Turned smiley mad * Turned smiley mad * Made smiley sad * Have a lot of plumbing working for Github codespaces and github.dev support * Imported new tldraw vs code extension code. Added instructions for workflows * Quick fix * Fix for corrupted arrows files * Updated editor build step to new location * Merge branch 'main' into vscode-extension-v1, add local file updating * Update App.tsx * Cleanup, bumped to 0.0.124 @tldraw/tdlraw and published a 0.10.0 version of hte extension * Added Trello/Kanban style file * Finished video * brings up to date * Fix scripts * Update README.md * Update .babelrc Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2021-11-06 16:49:53 +00:00
- Install dependencies (`yarn`)
Prepare for Publishing VS Code Extension (#227) * Changed Wardlt use back to Tldraw. Added some VS Code marketplace categories * Missed removing one Wardlt mention * Initial support for esbuild based vscode extension workflow. * Hacky start of vs code extension build script * Fixed categories of extension * Added script for generating VS Code extension installer * Temp fix for file format change affecting VS Code extension * Temp fix for file format change issue * Cleanup, prevent changes from saving pagestates * Remove logic around saving pageState * standardize capitalization * v0.1.8 * Edit readme, scripts * Update .eslintignore * v0.1.9 * v0.1.10 * cleans up build scripts, adds publishing notes * Added VS Code extension implementation references links. start:vscode now auto opens the extension folder in VS Code * Removed step from VS Code README to manually open the extensions folder * Removed file * v0.1.11 * v0.1.12 * Fix empty file * v0.1.13 * README cleanup * v0.1.14 * Update TLDrawEditorProvider.ts * v0.1.15 * Fix types for file extension (sort of) build script for extension Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2021-11-10 15:35:51 +00:00
- Start the VS Code debugger (Menu > Run > Start Debugging)
Open a `.tldr` file or create a new `.tldr` file from the command palette.
## Publishing
Update discord channel link
2021-11-11 12:25:25 +00:00
To publish, chat with the team on the [Discord channel](https://discord.gg/SBBEVCA4PG).
Prepare for Publishing VS Code Extension (#227) * Changed Wardlt use back to Tldraw. Added some VS Code marketplace categories * Missed removing one Wardlt mention * Initial support for esbuild based vscode extension workflow. * Hacky start of vs code extension build script * Fixed categories of extension * Added script for generating VS Code extension installer * Temp fix for file format change affecting VS Code extension * Temp fix for file format change issue * Cleanup, prevent changes from saving pagestates * Remove logic around saving pageState * standardize capitalization * v0.1.8 * Edit readme, scripts * Update .eslintignore * v0.1.9 * v0.1.10 * cleans up build scripts, adds publishing notes * Added VS Code extension implementation references links. start:vscode now auto opens the extension folder in VS Code * Removed step from VS Code README to manually open the extensions folder * Removed file * v0.1.11 * v0.1.12 * Fix empty file * v0.1.13 * README cleanup * v0.1.14 * Update TLDrawEditorProvider.ts * v0.1.15 * Fix types for file extension (sort of) build script for extension Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2021-11-10 15:35:51 +00:00
- Install `vsce` globally
- Run `vsce login tldraw-org` and sign in
In the `vscode/extension` folder:
- Run `yarn vscode:publish`
#### References
- [VS Code Marketplace Manager](https://marketplace.visualstudio.com/manage/)
- [Web Extensions Guide](https://code.visualstudio.com/api/extension-guides/web-extensions)
- [Test Your Web Extension](https://code.visualstudio.com/api/extension-guides/web-extensions#test-your-web-extension)
- [Web Extension Testing](https://code.visualstudio.com/api/extension-guides/web-extensions#web-extension-tests)
- An example custom editor that does work as a Web Extension
- https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio
- https://github.com/hediet/vscode-drawio
- [VS Code Extension API/Landing Page](https://code.visualstudio.com/api)
- [Getting Started](https://code.visualstudio.com/api/get-started/your-first-extension)
- [Custom Editor API](https://code.visualstudio.com/api/extension-guides/custom-editors)
- [github.com/microsoft/vscode-extension-samples](https://github.com/microsoft/vscode-extension-samples)
- [Extensions Guide -> Webviews](https://code.visualstudio.com/api/extension-guides/webview)
- [Publishing Extensions](https://code.visualstudio.com/api/working-with-extensions/publishing-extension)
Reference in a new issue Copy permalink