Embedded YarnEditor webview custom editor #1
Conversation
.gitmodules
Outdated
| @@ -0,0 +1,4 @@ | |||
| [submodule "YarnEditor"] | |||
| path = YarnEditor | |||
| url = https://github.com/TranquilMarmot/YarnEditor.git | |||
There was a problem hiding this comment.
This will need to be updated once https://github.com/YarnSpinnerTool/YarnEditor/pull/186 is merged
| "theme": "light" | ||
| }, | ||
| "engines": { | ||
| "vscode": "^1.44.0" |
There was a problem hiding this comment.
This had to be bumped up from 1.38.0 since 1.44.0 was the most recent version to fully support custom editors (this is some cutting edge stuff! 😎 )
| "displayName": "Yarn Editor", | ||
| "selector": [ | ||
| { | ||
| "filenamePattern": "*.yarn" |
There was a problem hiding this comment.
I considered also adding .json, .twee, and all the other supported formats with "priority": "optional" here but I'm not sure how supported those are in the editor.
| "path": "./yarn-icon-theme.json" | ||
| } | ||
| ], | ||
| "configuration": { |
There was a problem hiding this comment.
All of these configuration settings were ripped straight from settings.js. This makes it so that you can change settings in your VSCode preferences!
|
Super cool! 👏👏👏👏👏👏👏 |
- Add missing "repository" field to package.json - Remove exta "npm run compile" - Update .vscodeignore to shrink package size
Also, lots of cleanup and README updates
command, data -> type, payload
|
Okay, I think this is finished! Got everything working smoothly, including settings and marking files as dirty and letting VSCode handle saving/loading. Here's a copy of the extension built with GitHub wouldn't let me upload it as a
|
|
Thanks for working on this! It does look very cool 👍👌 |
|
correct me if I am wrong, but once merged, this will become available via I will review the changes required on the yarnEditor side of things. Somebody else needs to review it on the yarnSpinner side :) I am pretty excited to see this in vscode. Very very cool! |
|
Ok I tested this and found some problems on my end. Not sure if they need addressing at this pr or the other. Noted them here @desplesda if this gets in yarnSpinnerTool, bondagejs is also going to become a part of yarnSpinnerTool - making it even more important to add the new missing syntax features to it. Playtesting inside yarnEditor, inside vscode is done using bondagejs - not yarnSpinner We are starting to have more than one js technologies requiring yarn syntax parsing to be done with a js api - javascript needs to be a first class citizen in terms of yarn syntax support imo - this is where all the debugging will be |
|
There are a bunch of recent regressions in yarnEditor that need urgent fixing. Will this extension always use the latest version of yarnEditor? If not, can we update it to use a more recent version - after we fix the recent regressions? Would be good to update it before this pr is approved |
|
Alright, here's what I ended up with RE: Editing nodes in VSCode's text editor! Here's another By default, nodes still open in ace but there's now a button to edit them in VSCode (this doesn't show up in the web app; I checked 😉 ) Clicking this button will create a new, temporary file and open it up. At the same time, it adds a node.js file watcher to it that listens for changes; when the file changes, the extension reads it and sends it back to the editor which will then update the node. This lets you edit node titles, tags, and bodies (color and position can still be changed from the yarn editor): This ends up working surprisingly well! If you open up two nodes, you actually get two temporary files; the extension is listening to both of them and changes made to either are sent back to the editor. This means you can do cool things like editing two nodes side-by-side! The extension will automatically delete any temporary files when it "deactivates" (i.e. when the window is closed). On top of that, I added an "Always Open Nodes In Visual Studio Code Editor" option that will make it so that double-clicking on a node will always open it in the VSCode text editor.
Main issue with this is that if the main yarn file changes outside the editor, then these temporary files will go out-of-sync. This is also an issue if you have a A future improvement to this (not doing it in these PRs because it would require reworking a significant part of YarnEditor) would be to have more specific messages being sent back and forth between the extension and the editor. For example, when a node changes, rather than sending the whole yarn file, just send something like This would also require having the extension parse out the |
|
Okay, fixed a slew of bugs with the "Edit in Visual Studio Code Text Editor" functionality and updated the Another And another really cool screenshot of editing two nodes at once 😄 |
|
What's needed before we can merge this PR? |
|
a bit more testing - see if you find things not working as expected :) |
|
Updated this PR and the other one to have the latest @desplesda I'd say this is done. Would definitely love folks to do some more testing! Once https://github.com/YarnSpinnerTool/YarnEditor/pull/186 is merged I can update this PR to have its submodule point to the right repo. |
|
The changes required on the yarnEditor side for this to work have now been marged to the master branch |
|
Okay! The submodule in this has been updated to point to the real YarnEditor which has the needed changes merged in. This should also be good to go now. |
|
What's missing for an official release of the extension? I'm excited to get the latest features and fixes by @TranquilMarmot 😄 |
|
I think this can be merged now, but waiting for someone on this repo to review and merge it :) |
|
I'll review this PR early this coming week! Excited to get this merged. |
|
Hey all, as good as this PR works with Yarn Editor, there were a few things that didn't quite sit right with me:
All of the above inspired me to spend the past month putting together YarnLoom, a more native and tightly-integrated version of the Yarn Editor that plays nicely with VSCode: https://github.com/tranquilmarmot/yarnloom Any Key differences:
You're welcome to merge this and keep it! I'll be happy to answer any questions you have but will probably be putting more effort into maintaining YarnLoom. |
|
Beautiful work on this. I love that you used typescript and react for it.
I assume its not yet fully on par in features but really love what you did
with aspects of the design. I was thinking of doing the same for the node
colour picker.
It would be amazing if loom can function outside of vscode as a pwa and an
electron app too
…On Sat, 1 Aug 2020, 21:08 Nate Moore, ***@***.***> wrote:
Hey all, as good as this PR works with Yarn Editor, there were a few
things that didn't quite sit right with me:
- No shared code between the editor and the extension; the extension
ends up re-implementing a lot of logic from the editor
- The whole git submodule thing is quite painful to deal with (this PR
is already horribly out of date 😅 )
- The state management between the editor and the extension isn't
great
- Currently, Yarn Editor has to send all nodes to the extension
with every change
- The main issue with this is that it breaks down VSCode's concept
of changes and its undo/redo functionality
- The hacks that had to be done to get the editor to embed in the
VSCode webview are pretty nasty and are brittle. They are likely to break
with future changes to Yarn Editor.
- Ace editor is a large dependency that is not needed in VSCode
- The Yarn Editor embedded in VSCode has stylistic clashes (colors,
icons, overall design, etc.)
- No tests in the current Yarn Editor made it difficult to know if I
broke anything when making changes to it 🙈
------------------------------
All of the above inspired me to spend the past month putting together
YarnLoom, a more native and tightly-integrated version of the Yarn Editor
that plays nicely with VSCode:
https://github.com/tranquilmarmot/yarnloom
https://marketplace.visualstudio.com/items?itemName=TranquilMarmot.yarn-spinner-loom
Any .yarn files made with Yarn Editor work with YarnLoom and vice versa!
It uses the same mechanisms for node colors, tags, and placement.
Key differences:
- Common library of functions used for parsing/generating yarn files
that are shared between the editor and the extension
- The editor sends much more specific messages back to the extension
so that it can track changes for better undo/redo functionality
- This means node renames, additions, color changes, edits, and
everything else support native undo/redo
- See the YarnLoom CONTRIBUTING.md
<https://github.com/TranquilMarmot/YarnLoom/blob/main/CONTRIBUTING.md#communication-between-loom-extension-and-loom-editor>
doc for more info
- Uses VSCode supplied CSS variables for colors so that it matches the
user's VSCode theme
- Uses codicons <https://github.com/microsoft/vscode-codicons> for
icons so they match VSCode
- Additional features
- More tag management tools
- Renaming nodes also renames links to those nodes
- Option for case sensitivity and regex when searching
- Better feedback around renaming/adding nodes with names that
already exist
- Uses D3 for drawing node relationships, resulting in much
smoother rendering
- Missing features (these may be added later)
- Preview using bondage.js
- Selecting and manipulating multiple nodes at once
- BBCode support
- JSON/XML/twee/twee2 import/export support (only .yarn files are
supported)
- Lots and lots of tests 😄
- 100% TypeScript 😉
------------------------------
You're welcome to merge this and keep it!
I'll be happy to answer any questions you have but will probably be
putting more effort into maintaining YarnLoom.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABRRWVK2S2INVWKW3KGIULTR6RY3PANCNFSM4NJHMX3Q>
.
|
|
This is really nicely done, and I especially love your remix of Cecile’s logo! Something I’d like to look at, sooner rather than later, is simplifying the Yarn editor ecosystem. Currently, there’s Yarn Editor (both as a web app and as a desktop app), this repo’s VS Code extension, the current VS Code extension, and in Unity there’s the Merino editor. Is consolidating any of these projects something you (and potentially other authors) would be interested in? |
|
Super cool! I love the extension. Thanks a lot for your great work 👏 👏 👏 👏 |
What is this?
Hello friends! 👋 Thank you for Yarn Spinner; this tool is awesome! 🧶 🐈
A while back I saw this draw.io extension for VSCode and was blown away by the idea of embedding a full JS app inside of an editor... so naturally when I came across the Yarn Editor, the first thing I thought was... "how long would it take to embed this editor in VSCode?!" The answer is... about the length of a long weekend.
This uses a git submodule to include the
YarnEditorrepo. Currently, this PR has the submodule pointed to my fork/branch of YarnEditor. There is a PR againstYarnEditorthat is needed for this to work: https://github.com/YarnSpinnerTool/YarnEditor/pull/186Once that PR is merged, this one can be updated to have the proper submodule that points to the real
YarnEditor.This is in TypeScript. If you've never encountered TypeScript before don't fret! This PR doesn't do anything too crazy with it.
This has been tested on both Windows and Linux.
Also, don't freak out at the
+2,000lines added! Most of that ispackage-lock.json.For reference on how a lot of this was done, check out:
https://code.visualstudio.com/api/extension-guides/webview
https://code.visualstudio.com/api/extension-guides/custom-editors
https://github.com/microsoft/vscode-extension-samples/tree/master/custom-editor-sample
Features
.yarnand.yarn.txtfiles in your workspace in the Yarn Editor without leaving VSCode (this is killer for Unity projects!!!)Screenshots
(Note: these were all taken before a bug with arrow rendering position was fixed)
Sally.yarnsample, with automatically detected night mode:Sally.yarnsample, with blueprint theme:VSCode settings for the extension; these map 1:1 to the settings modal and even have the same dropdown options:
Switching between the syntax-highlighted text view and the editor view. This can be done by clicking the
...menu button on the VSCode tab and choosing "Reopen With..."StressTest.yarnopen alongside another file; stress test opens surprisingly quickly!How to try this out
Checkout this branch and then run
git submodule init && git submodule update. This should pull down the proper branch ofYarnEditor.Then, run
npm install && npm run yarneditor:build. This will buildYarnEditorand copy it toout/dist(the extension's code is transpiled to JS and copied tooutas well when it runs).You can then hit F5 to run the extension. It will open a new VSCode window with the extension loaded. From there, try opening a
.yarnfile or hitting F1 to run the "Start Yarn Editor" command.Notes
The amount of HTML string manipulation in here doesn't feel great, but honestly it's not all that bad and YarnEditor's layout and HTML made it easy.
Icons
Originally, I had this extension include an "icon set" but it seems like VSCode can only have one icon set active at a time right now. If we want the yarn icon to properly appear for
.yarnfiles it seems like a PR would need to be opened against https://github.com/hellopao/vscode-seti-iconsThis issue against VSCode tracks the ability to have extension provide just one icon: microsoft/vscode#14662
Undo/redo
I couldn't manage to get native undo/redo working for changes. It seems like the editor would need to be reworked to only track specific lines in the underlying file changing to get this to work properly. Undoing/redoing adding/removing nodes still works within the editor, though.
Lint
Okay, for some people lint is a touchy subject. Currently, this is just using the most basic lint rules that work with TypeScript and Prettier.
If you want, we can make this obey the same lint rules as YarnEditor and we can add a
prettierrc.jsonto make Prettier do the right things.