tranquilmarmot/yarnloom

Visual Studio Code extension for editing YarnSpinner files

Yarn Spinner Loom Visual Studio Code Extension

Yarn Loom is a Visual Studio Code extension for editing yarn files. It is a re-imagining of the Yarn Editor built from the ground up to integrate seamlessly with Visual Studio Code.

• Yarn Spinner Loom Visual Studio Code Extension
  • Installing
  • Usage
  • Reporting Issues/Bugs, Contributing, and Technical Details
  • How To
    • Editing nodes
    • Renaming nodes
    • Changing node tags
    • Changing a node's color
    • Changing a node's position
    • Adding new nodes
    • Deleting nodes
    • Searching
      • Quick tag search
    • Switching between the graph editor and a text editor
    • Theme support
  • Keyboard Shortcuts
  • Special Thanks

Installing

This extension can be installed from the Visual Studio Code Extension Marketplace

Usage

Once the extension is installed, simply open up a .yarn or a .yarn.txt file to use it!

Reporting Issues/Bugs, Contributing, and Technical Details

If you find any issues or bugs with this extension, please open up a new issue on the GitHub repo and include as much detail as possible!

For in-depth technical details on how this extension works, and how to contribute to it yourself, see CONTRIBUTING.md.

How To

Each of the examples below has an expandable gif that shows the editor in action.

Editing nodes

To edit a node, double click it. This will open the node up in a text editor next to the open .yarn file.

Changes saved in this text editor will be reflected in the .yarn file editor. Saving the open .yarn file will persist changes to disk, and undo/redo can be used to move back and forth between edits to a node.

Expand for demo of editing nodes

Renaming nodes

A node can be renamed by clicking on the rename icon ()

Any nodes that are linking to a node will have their links automatically updated when a node is renamed.

An error message will be shown if there is already a node with the entered name.

Expand for demo of renaming a node

Changing node tags

Tags can be added/removed by clicking the add icon () on the bottom of a node.

Existing tags will be shown in a list and can be toggled on and off.

To add new tags, click the "+ Add Tags" button. You can then enter a list of space-separated tags here and they will all be added to the node.

Expand for demo of changing node tags

Changing a node's color

Node colors can be changed by clicking the color change icon ().

This will bring up a list of colors to choose from. The colorID that you see when opening a node in the text editor corresponds to a color in this list.

Expand for demo of changing a node's color

Changing a node's position

A node's position can be changed by dragging it around in the graph view of the .yarn file.

Expand for demo of changing a node's position

Adding new nodes

New nodes are added automatically when you link to them when editing node text.

You can also add new nodes by opening up the node list, scrolling to the bottom, and clicking "Add new node".

Expand for demo of adding a new node

Deleting nodes

Nodes can be deleted by clicking the garbage can/trash icon in the their title () . A confirmation message will be displayed.

Expand for demo of deleting a node

Searching

The search bar can be used to search for specific nodes.

When searching, nodes that do not contain the search term will be dimmed. Nodes containing the search term will stay opaque.

The "Title", "Body", and "Tags" buttons in the search bar control whether or not to search within node titles, bodies, and tags, respectfully. This is an "or" search, so if searching in all three locations and one node has "Sally" in the title, one has "Sally" in the body, and one has a tag of "Sally", then all three will show up in the search. Note that turning off all three options effectively disables the search.

There are also two buttons to enable/disable case sensitivity () and regular expressions (). Regular expressions are only run on enabled search contexts ("Title", "Body", and/or "Tags") and are done via JavaScript's built-in RegExp functionality, so anything regular expressions that work in JavaScript will work. The MDN Web Docs have a nice regular expression cheat-sheet available.

Expand for demo of searching for nodes

Quick tag search

To quickly search for a tag, you can either click on it in the footer of a node or expand the tag list and select it from there. This will automatically fill in the search box with the tag and limit the search to tags.

Re-selecting the tag that is currently being searched for will de-select it and reset the search box.

Expand for demo of quick tag searching

Switching between the graph editor and a text editor

Switching editors can be done with the command palette, Ctrl + Shift + P, and selecting the "View: Reopen Editor With..." option.

In this menu, selecting "Configure default editor for '*.yarn'..." will let you set the default editor for .yarn files. This is useful if you want Visual Studio Code to default to opening files with the text editor.

Expand for demo of switching between the text editor and Yarn Loom

Theme support

This extension should fully support all Visual Studio Code themes. Better and more integrated theme support will be added gradually.

If there is a theme where something doesn't look right or is unreadable, please don't hesitate to open up a new issue on the GitHub repo.

Expand for demo of switching themes

Keyboard Shortcuts

Shortcut	Description
Ctrl + F	Focus on search bar
Shift + +	Add new node

Special Thanks

The syntax highlighting portion of this extension was copied over from the Yarn VSCode Extension and all credit for it goes to @desplesda.

Portions of Yarn file parsing and in-editor highlighting were copied over from the Yarn Editor and all credit for it goes to the Yarn Editor contributors, but especially @blurymind.

The original Yarn Spinner logo was made by Cecile Richard and was remixed to create the logo for this extension.

yarnloom's Issues

No more coloring syntax when using Yarn Spinner Loom in VS Code

Describe the bug
A clear and concise description of what the bug is.
When editing the node, the syntax are not colored properly like using just only Yarn Spinner.

Expected behavior
A clear and concise description of what you expected to happen.
Expectation: Syntax to be colored (like the demo GIFs and using only Yarn Spinner).

Actual behavior
A clear and concise description of what actually happened.
Actually: The text are all reduced to one color (except for comments)

Steps To Reproduce
Steps to reproduce the behavior:

0. Install Yarn Spinner.
1. Install Yarn Spinner Loom.
2. Create a node and write my story.
3. Syntax colors stay the same instead of being colored differently.

Screenshots
If applicable, add screenshots to help explain your problem.
Images can be directly drag-and-dropped into the GitHub issue editor to upload them to GitHub.
With Loom:

Without Loom:

Additional context
Add any other context about the problem here.

Environment

• OS: Window
• Visual Studio Code Version: 1.67.2
• Yarn Loom Extension Version: v.1.2.0

BBCode support in graph view

Yarn Spinner and YarnEditor supports BBCode markup.

This extension currently does not parse and display BBCode in the graph view.

Add a keyboard shortcut to create a new node

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
It's annoying to use the button in the drop-down menu, especially when starting a new file.

Describe the solution you'd like
A clear and concise description of what you want to happen.
Add a keyboard shortcut that executes the same function as the Add new node button.

Describe your use case
Write about what you're building and why do you need this feature.
Searching for the Add new node is annoying, and since it's used relatively frequently it decreases productivity. (A bit hyperbolic, but the issue is there).

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
There are no other yarn spinner plugins for vscode.
Additional context
Add any other context or screenshots about the feature request here.
I'm writing a lot of unit tests that use .yarn files.

Nodes without links are not placed properly when opening a file

Describe the bug
If you have a node without links, you can drag it around and save the file, but when you open it back up the node will be placed at the origin.

Expected behavior
The node should stay where it was placed when the file was saved.

Actual behavior
The node is rendered at the origin of the graph (0,0).

Note that the position of the node properly updates. The graph just doesn't put it in the right place.

To Reproduce

1. Create a node without a link
2. Drag the node somewhere
3. Save and then re-open the file

Additional context

This is actually a bug with the react-d3-graph library and needs to be fixed over there; danielcaldas/react-d3-graph#350

Environment:

• OS: Windows, Ubuntu
• Visual Studio Code Version: 1.47.2
• Yarn Loom Extension Version: (unreleased)

Settings option to turn off automatic node creation.

Is your feature request related to a problem? Please describe.
Our project is massive and split across several different yarn files. Sometimes nodes reference nodes in other yarn files. When these nodes are opened, an empty node is created by default in the same yarn file. This is extremely annoying.

Describe the solution you'd like
We would like an option similar to what is available in the Yarn Editor that allows you to disable this automatic node generation.

Describe your use case
A massive project spread out across multiple .yarn files for organization purposes, with nodes that reference other nodes in different files.

Describe alternatives you've considered
Continuing to use the Yarn Editor.

After focusing on a node, dragging the viewport around makes it jump

Describe the bug
Focusing on a node makes it difficult to move the graph around.

Expected behavior
When dragging the graph after focusing on a node, the focused node becomes un-focused and the graph moves smoothly

Actual behavior
When dragging the graph after focusing on a node, the graph will jump around.

Steps To Reproduce
Steps to reproduce the behavior:

1. Open the list of nodes
2. Click on a node to center it in the viewport
3. Try to drag the viewport around
4. The viewport will "jump" around, sometimes to the origin (0,0)

Screenshots

Additional context

Currently, un-focusing on the currently focused node is triggered by the onClickGraph event handler passed into the Graph from react-d3-graph. This has an _onDragStart "instance member" that needs to be hooked into here but it looks like that cannot be passed a handler via props.

Environment

• OS: Windows, Ubuntu
• Visual Studio Code Version: 1.47.2
• Yarn Loom Extension Version: (unreleased)

[exthost] [error] Error: Cannot find module 'loom-common/YarnNode' when opening yarn file

Describe the bug
When opening a *.yarn file the editor shows an animated progress bar on the file tab, but nothing renders to the view.

Expected behavior
The yarn file should load and the nodes should be visible.

Actual behavior
Nothing loads, instead there is an error in the extension log in vscode:

[2020-07-27 23:42:47.218] [exthost] [info] ExtensionService#_doActivateExtension TranquilMarmot.yarn-spinner-loom {"startup":false,"extensionId":{"value":"TranquilMarmot.yarn-spinner-loom","_lower":"tranquilmarmot.yarn-spinner-loom"},"activationEvent":"onCustomEditor:yarnLoom.editor"}
[2020-07-27 23:42:47.218] [exthost] [info] ExtensionService#loadCommonJSModule file:///Users/jaredbarboza/.vscode/extensions/tranquilmarmot.yarn-spinner-loom-1.0.0/out/extension.js
[2020-07-27 23:42:47.254] [exthost] [error] Activating extension TranquilMarmot.yarn-spinner-loom failed due to an error:
[2020-07-27 23:42:47.256] [exthost] [error] Error: Cannot find module 'loom-common/YarnNode'
Require stack:
- /Users/jaredbarboza/.vscode/extensions/tranquilmarmot.yarn-spinner-loom-1.0.0/out/LoomEditorProvider.js
- /Users/jaredbarboza/.vscode/extensions/tranquilmarmot.yarn-spinner-loom-1.0.0/out/extension.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-amd.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-fork.js

Environment

• OS: macOS
• Visual Studio Code Version: 1.47.2
• Yarn Loom Extension Version: 1.0.0

Better positioning for nodes

Currently the canvas's 0 coordinate is located at top-left corner of the window. That's coincidentally where new nodes are created. It's annoying to deal with every time I open a file.
Here are my suggestions:

• Create new nodes (without parent) at the center of the screen
• When opening a file, align the canvas so that the most "top" and the most "left" nodes are some distance away from window corresponding window border.

Saving a node should save the entire `.yarn` file.

Describe the bug
When you click on a node to edit it, it opens a temporary file of the format nodename.yarn.node. Edits to this file are copied to the .yarn file you're editing, but for some reason, the .yarn file is left unsaved. This means the user must hit Ctrl-S twice. Once in the .yarn.node file, and then once in the .yarn file.

Expected behavior
The .yarn file should be saved automatically whenever a .yarn.node file is edited and saved.

Actual behavior
The .yarn file is not saved automatically, even when .yarn.node files are saved.

Environment

• OS: macOS Monterey, 12.0.1
• Visual Studio Code Version: 1.62.3
• Yarn Loom Extension Version: 1.2.0

Feature request: Colors overhaul

Is your feature request related to a problem? Please describe.
When I'm editing yarn files in the Yarn Loom editor, it's inconvenient when the colors of the graphical nodes in the editor don't match the color scheme of my VS Code editor. Additionally, the list of colors available for node colors could do with some expanding.

Describe the solution you'd like

1. The content rendered within each node should match the editor formatting for .yarn files but at the smaller text size.
2. The node background color, border color, and icon colors should match the currently equipped VS Code color scheme.
3. The colors available for node colors should be expanded to a wider palette and allow for custom colors.

Describe your use case
I'm working with a team of developers building a large Yarn story within VS Code, and many of our devs might like to use the Yarn Loom extension. Each of us has different color schemes though, and most of the devs don't like the bright white color for the node background color when their color schemes are darker colors.

Add a grid and snap to grid options for better placement of nodes.

Is your feature request related to a problem? Please describe.
It's just annoying when nodes aren't lined up exactly.

Describe the solution you'd like
Add a grid in the background and snap to grid options for nodes. It would be nice to have alignment options as well like in the yarn editor tool (although those never work for me for some reason).

Describe your use case
Complex node structures can get unruly without proper placement tools.

Describe alternatives you've considered
Sucking it up.

Support Workspace Trust

Hello 👋 I'm from the VS Code team.

Recently, we have been exploring a security feature we refer to as Workspace Trust. This feature is intended to centralize and unify a security conscious decision required by a variety of VS Code features. With workspace trust, the user will be able to declare whether or not they trust the folder that is opened in VS Code before these features are executed.

Why you should care

We want to make sure that those users have a delightful experience with workspace trust and that includes extension authors deciding how much of their extension is supported in an untrusted workspace. Custom editors are special in that if they cannot at least render in an untrusted state then they will be replaced by a lightweight message telling the user to enable trust. This means that users of your extension will not be able to see their editors and there may even be cases of data loss.

Workspace Trust experience

You can enable the feature with the following setting security.workspace.trust.enabled. Once enabled, you will see the following dialog when opening folders in VS Code.

This dialog is important for allowing the user to make a decision early and understand the impact of their decision. Once you understand the feature, you may want to customize when to display the dialog using the setting security.workspace.trust.startupPrompt.

You can follow the development of Workspace Trust and provide feedback in issue #106488.

Workspace trust API

First off, all of what I am about to say can be found in issue #120251. That issue will include discussion of the feature and any updates to the feature.

The Workspace Trust extension API is now in stable. This allowed us to release the first cut of our guide for onboarding your extension to Workspace Trust. The API is small, so here is a quick look.

You can declare your extension to provide complete, partial or no support in untrusted workspaces using the untrustedWorkspaces capability in package.json.

The following example declares that the extension is supported completely in untrusted workspaces. In this case, the extension is enabled in untrusted workspaces.

"capabilities": {
  "untrustedWorkspaces": {
    "supported": true
  }
}

The next example declares that the extension is not supported in untrusted workspaces. In this case, the extension is disabled in untrusted workspaces.

"capabilities": {
  "untrustedWorkspaces": {
    "supported": false
  }
}

The third option is to declared limited support. There are three tools provided to you when you select the limited option.

First, if you have a setting that can be configured in the workspace but requires the workspace to be trusted in order to apply the workspace value, then you can include the setting using restrictedConfigurations array property in untrustedWorkspaces object. Doing so, VS Code will ignore the workspace value of these restricted settings when your extension reads these settings values using the VS Code Workspace Configuration API.

The following example declares the settings that are restricted in untrusted workspaces.

"capabilities": {
  "untrustedWorkspaces": {
    "supported": "limited",
    "restrictedConfigurations": [
      "markdown.styles"
    ]
  }
}

Next, you can also check and listen if the current workspace is trusted or not programmatically using the following API:

export namespace workspace {
  /**
   * When true, the user has explicitly trusted the contents of the workspace.
   */
  export const isTrusted: boolean;
  /**
   * Event that fires when the current workspace has been trusted.
   */
  export const onDidGrantWorkspaceTrust: Event<void>;
}

Lastly, you can hide commands or views declaratively with the isWorkspaceTrusted context key in your when clauses.

A far more detailed guide on how to onboard which will be updated as we receive feedback can be found in issue #120251.

Rollout plan

We are planning on enabling this by default in the near future (most likely next release). To prepare for that day, we want to work with you to allow your editor to work seamlessly alongside the trusted workspace experience

Our Asks

The main features that should work for custom editors in an untrusted folder is rendering, viewing, and saving (if applicable). After reviewing your codebase, I believe that your extension doesn't rely on user contents in a way that could be taken advantage of if the files were malicious. My initial assessment would be to adopt supported:true and allow your extension to operate in untrusted workspaces.

Please let me know if you have any question or would like to meet up via voice chat as I would be happy to assist you in getting your extension ready for workspace trust!

Viewing a graphical git diff for `.yarn` files should default to the built-in Text Editor, not the Yarn Loom editor

Describe the bug
When you've made changes to a .yarn file and the file is kept in version control, VS Code's Git extension will highlight that those changes have been made. Clicking on a file with changes (or staged changes) allows you to view a side-by-side diff of those changes, which is a useful feature.

When this extension registered the Yarn Loom editor for .yarn files, it also accidentally registered that editor for these side by side diffs. The Yarn Loom editor doesn't offer any special features for doing these diffs (like highlighting changes) and is relatively clunky when two editor instances are positioned side by side. Therefore, these diffs should open in the regular text editor.

Expected behavior
Side-by-side diffs of .yarn files should automatically open in VS Code's built-in Text Editor, not the Yarn Loom editor.

Actual behavior
Side-by-side diffs of .yarn files are opened in the Yarn Loom editor.

Steps To Reproduce
Steps to reproduce the behavior:

1. Find or create a project where .yarn files are kept under version control in a Git repository.
2. Launch VS code with the Yarn Loom extension and VS Code Git support enabled (it should be by default.)
3. Open a .yarn file in the Yarn Loom editor and make some changes in the working directory.
4. Save the file.
5. Open the Git sidebar in VS Code.
6. Click on the file, which should have an orange "M" designation next to it.
7. The side-by-side diff of your file will open with two side-by-side instances of the Yarn Loom editor.

Screenshots

Environment

• OS: macOS Monterey, 12.0.1
• Visual Studio Code Version: 1.62.3
• Yarn Loom Extension Version: 1.2.0