Search and commands

[kof]

Design

https://www.figma.com/file/xCBegXEWxROLqA1Y31z2Xo/%F0%9F%93%96-Webstudio-Design-Docs?type=design&node-id=9234-12138&mode=view

There is a whole bunch of things we need to make easier for the user, automate certain popular tasks:

• truncation: want to apply ellipsis to a text, it takes 3+ CSS properties, people don't know how to do
• conversion to a different component: convert Div to Section for example
• wrapping and applying styles: turn a youtube iframe into a background video, it will require wrapping, setting styles on both
• adding instances to a component: radix tabs component needs trigger and content instances added + value prop when we need another tab
• delete an instance from context menu
• hotkeys can be all implemented via commands

To achieve all of this, we came up with a concept of "commands":

1. command is a function that takes WsEmbedTemplate that contains tree and styles and returns a new WsEmbedTemplate
2. we need a function that calls the command function and applies the changes, this very function can also be used by GPT cc @ggurgone
3. commands can be declared by components: e.g. Heading component can expose a command that allows to convert it to h1, h2, h3 etc from context menu on canvas
4. commands can be declared by plugins
5. global search dialog (cmd+e, cmd+k in wf) could show a tab with commands where we can list global commands e.g. truncate as well as component specific commands

Docs in Figma: https://www.figma.com/file/xCBegXEWxROLqA1Y31z2Xo/%F0%9F%93%96-Webstudio-Design-Docs?type=design&node-id=9234-12138&mode=design

Component in Figma: https://www.figma.com/file/sfCE7iLS0k25qCxiifQNLE/%F0%9F%93%9A-Webstudio-Library?type=design&node-id=6979%3A6437&mode=design&t=c7CneEgQdJubU6AE-1

Examples for commands

1. Truncate text

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

2. Line clamping https://x.com/getwebstudio/status/1811524195677020582

  display: -webkit-box
  webkit-box-orient: vertical
  -webkit-line-clamp: <# of lines>
  overflow: hidden

Launch tasks

• option+down doesn't work when you are in shortcuts category
• wrap in box
• wrap in link