If you open the properties editor on a component near the bottom of the page, it will go off the edge of the app and cause some weird scrolling issues.

If the props editor is going to be placed near the bottom of the page it should scroll gracefully

There should be a way to show / hide the sidebar details panel

Add functionality to delete variables / datasets from the viewer. This also includes when a dataset is "undo"-ed from the document

Also look at AuthorToolButton logic and extract only necessary logic

There should be a way to revert to previous AST states

Because the "placeholders" immediately disappear instead of animating back to 0 height

Code cells require you to hit shift+enter before they execute, but there is no visual indication of when you have changes that have not yet been executed. There should be some indicator.

Are there getting started instructions for building / deploying idyll-studio? I've poked through the sub directories and didn't see anything that indicated as much. Also, does publishing via this simply output idyll markeup the we'd then need to host/render somewhere? Or is this more of a full blown content management / publishing system?

There should be a new tab for datasets, that enables drag-and-drop addition of new datasets from CSV and JSON files, and enables inspection in the form of a table or tree viewer

Variables should be a dropdown of all existing variables:

Expression should be a code cell, which expands to multiple lines with its content, and execute only on shift+enter

• author view - prop "current value" doesn't immediately re-render on value change
• var "current value" in sidebar doesn't immediately re-render on value change

When you rename a derived variable, the context.data() still retains its old name and value, although it no longer tracks changes under the old name.

We might want to delete these from the context to avoid confusion if someone types in a variable name that shouldn't exist

The components view could use some love. It currently looks like this:

We should:

1. Add structure so the components are grouped as they are in the docs. There should be an additional section for custom components.
2. Add thumbnail images for each components, we can re-use the images from the docs to start. We should also create a default thumbnail for the case where components don't have an associated image.

• make all inputs display block with some margin

We should support additional drag and drop behavior such as dragging javascript files to automatically add them as new custom components, and the same with json/csv files to add them as new datasets.

When dragging and dropping a component into a document, sometimes the position jumps down, which makes a user lose their position.

We could find a way to stick that position on drag and drop so the scroller doesn't jump and the position isn't lost

They appear at the top of the document for some reason

1. csv doesn't work with charts (numbers cast to strings)
2. deleting derived variables
3. null cases
4. deleting variables from viewer

When an error is thrown do to invalid input, we can't recover the component back:

Changing the properties:

Changing the code cell

(In this case, deleting the entire component markup). I'm wondering if this is a separate issue and should result in removing the component entirely?

Right now, when properties' values are changed for a component, the document gets updated each time which causes a bit of a lag.

Look into debouncing so that the updates occur less frequently to improve performance

If you add a table component to the page, and then set its value (or data) property to be bound to a variable, the table component will crash with a vague error message

The interface should expose an option to preview the article as it would appear on a mobile device, similar to how chrome/firefox devtools allow you to do this

This can be fixed by adding an AST transform that ensures all links have target="_blank" set.

Thanks @arvind for flagging

The editor should store some information to disk in order to be able to remember where you left off when quitting and restarting.

The easiest way would probably be storing a SQLite database in a local tmp directory. This database should store information such as

• which project you were working on
• mapping from deploy token to URL
• etc

How to reproduce:

Drag-and-drop a variable from the variables panel in the sidebar onto a component's property. The live-updating value of the variable above the textbox maintains the correct value, but the textbox itself should update to reflect the new variable name

Clicking anywhere else on the page should cause the text editors to blur and go back into display / non-editing mode

Components

Layout

• fixed
• inline
• scroller
• step
• steppercontrol

Rename Text Container to Paragraph

Logic

• Case
• Default

Presentation

• Graphic

Helpers

Hide this category

Document tab

Theme / Layout

Hide this section

Currently you can't delete or add a new property without using the idyll code. It should be possible to do this in the properties panel.

If you open the property viewer for a component and then close it, the listeners should be detached. Currently it throws an error:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Component (created by Context.Consumer)
    in Unknown (created by Context.Consumer)
    in DropTarget(Component) (created by PropertyList)
    in div (created by PropertyList)
    in div (created by PropertyList)
    in div (created by PropertyList)
    in PropertyList (created by Properties)
    in div (created by Properties)
    in Properties (created by Context.Consumer)
    in Unknown (created by AuthorView)

When typing in an expression or object that involves:

• a variable that doesn't exist
• a variable that does exist, but further down the tree
• or an object without backticks

it blows up. We should handle null/undefined cases as well

Feature request: load a project from GitHub (or plain git).

It doesn't need to be smart about pushing changes back to Git, can just clone / download the project from a git repository and then continue to function as it does currently.

E.g. a new menu option update dependencies. It will be useful when e.g. releasing bugfix updates to idyll and letting users update their projects without dropping into the command line.

Small UX thing - you have to save before hitting the publish command for latest changes to be deployed... this shouldn't be required

The "components" view should provide a way to add additional components. This could be in the form of local files (i.e. drag and drop a JS file), or install them from NPM. When installing from npm, having a search field that autocompletes your query against a list of known packages would be ideal.

When you have a short component directly followed by another component, their edit buttons will overlap. Example a short (empty) Table followed by a Chart

Bug fix for dataset feature:

• When initialized, it has the wrong initial value
• Drag and drop feature should work for it like how variable drag and drop works

Nice to have:

The loading screen should make available "recently opened" posts, to facilitate quickly re-opening projects you've worked on.

It seems like on preview, dataset values are disappearing.

On "preview" and "edit" toggle, the dataset values in context.data() disappear and are not reloaded until "Variables" tab is hit.

The launch screen should allow you to create a new project in addition to just opening an existing one. This should allow you to choose from all available templates.