Create - quick_editor

[alyhxn]

@todo

#30

---

• Create - quick_editor
  • Assemble
  • Integrate
  • @output ❓ quick_editor_v0.0.?
    • next Create - theme_widget #21

[alyhxn]

Tasks - 2025.06.12

• Create - quick_editor
  • Implement editor - 3h
  • Implement CSS injection - 2h
  • Integrate - 2h
  • Debugging - 2h
  • Tasks Log - 15min
  • @output 📦 quick_editor_v0.0.1

---

Worklog

worklog-274

---

Proposals

1. Save the changes

[serapath]

feedback 2025.06.12

Cheers. Great progress, but we have to change the approach.
We cant ask every developer to add a quick_editor to their component.

All styling should happen based on css files in the sdb.drive, which means the root can use .admin to load and interact with any drive, which means a "container component" (e.g. the resizable component that displays each individual component instance on our ui-components github preview page, could have editing functionality that communicates with the root to access or instruct it to change/update specific drives, basically only the drive of the component instance it is currently editing and also only the 'style' dataset of it, which is also specified in page.js already :-)

Hopefully we can use/leverage io module fallbacks to specify this.

---

For example in page as a root component:

• https://github.com/alyhxn/playproject/blob/dd5a8a33c1ca1228ed3f4284b3067f36a0d2873e/doc/state/example4/page.js#L64-L65

My toughts are:

1. make a container component that allows resizability and has a button to toggle (expand/collapse) an editor (=textarea)
2. use it in ui-components page to display all the individual component instances shown inside an instance of this container component (even though it doesnt do anything yet)
3. once that is done we have to setup communication for container instances to read/update 'style' dataset in the drive of the component instance it is displaying.

Step 1. and 2. are somewhat involved as well, because currently we do:

• https://github.com/ddroid/ui-components/blob/main/web/page.js#L129-L148

Basically the issue we have at the moment, that we cannot yet "dynamically require" components, which makes this one a bit tricky and I don't think we can change that until we replace budo/browserify with our custom runtime (which is soon, but not too soon).

So in the mean time when you look at the link provided, then in this line:

const component_content = await factory(subs[index])

we need some communication using the io module to that instance in order to:

1. lookup the initial "style" dataset of that component module and instance and send it to the editor component instance we create here, including all dependency module and instances it uses
2. allow the editor to edit that and when "saving" it should update the "style" dataset in the component module and instance drives and all dependency modules and instances so that it triggers each onbatch function to apply the updates

Lets discuss the details on discord :-)

[alyhxn]

Tasks - 2025.06.18

• Update - quick_editor_v0.0.1
  • Feedback processing - 5h
  • Added tabs - 3h
  • Fetch datasets - 1h
  • Task log - 10min
  • @output 📦 quick_editor_v0.0.2

---

Worklog

worklog-275

---

Proposals

1. Add more features to the quick_editor
2. Standardize the component

[serapath]

feedback 2025.06.19

aha, okay, so the video lookgs good.

1. dataset tabs - cool
2. file buttons - cool
3. an "apply" button to commit changes

...looks great.

BUT ..there should be a way to provide a "dataset" name to the instantiated component and it will only show that, nothing else, so in this case: the style :slight_smile:

But it is great that it works for more than one dataset as well.. maybe it can be an array, but we should on the ui-components page only use ["style"] and nothing else.

---

Regarding the worklog video

The video is great, but it would always be neat to also show and explain the code and how things are achieved or meant to be achieved.

How do you get the right content to show it in the editor tabs, etc...

This was sadly not at all mentioned and while the editor is important so cypher can use things, the way more important part is the STATE module api's to enable it right and so on...

---

Regarding PROPOSAL

It would be neat to list more detailed tasks, e.g.

• add "add file" button
• add "delete file" button

and then in the top menu of the entire ui-components page, we need an export dataset to offer downloading everything as a file

and then we need an import dataset t offer a user to upload a selected file from disk to apply as a theme :slight_smile:

[alyhxn]

Tasks - 2025.06.23

• Update - quick_editor_v0.0.2
  • Standardized quick_editor - 3h
  • Added the apply feature - 2h
  • Task logging - 15min
  • @output 📦 quick_editor_v0.0.3

---

Worklog

worklog-276

[serapath]

feedback 2025.06.23

great, but the quick editor needs an option to change all files in a specific dataset, not just the ones from the main component. At the moment, dependency component cant be edited.
Also, a button needs to enable downloading all edited changes as a single file and another button to upload such a file to import a theme for components.

[alyhxn]

Tasks - 2025.06.30

• Update - quick_editor_v0.0.3
  • Added subs - 3h
  • Relevant changes - 1h
  • Task logging - 10min
  • @output 📦 quick_editor_v0.0.4

---

Worklog

worklog-277

[serapath]

feedback 2025.06.30

Okay. the results look good, but i also made a list of tasks that were discussed in the past and are still partially not done. We can discuss the list on discord and then update the top level comment here and you can work through them :-)

• quick editor with datasets first and subs later
  • @input 📦 discord feedback1 for worklog-276 from given
  • @input 📦 github feedback from given
  • implement quick editor dataset view utilizing mapping and then subs for each module/instance having drive data for the chosen dataset
    • maybe also have a toggle button to see if any modules/instances do NOT have a specific dataset, e.g. useful when user wants to see if a component does not support theming
    • allows designer to click e.g. "style" and then cycle through all components to concern themselves only with updating styles
  • implement export/download and import/upload buttons to download edited results or upload and import such an earlier download
  • edited components can also update their own drive data which quick editor needs to learn about too
    • @input 📦 data to quickeditor from given
    • @input 📦 editor update only on click from given
  • @output 📦 link-to-quick-editor-preview
• refine io port and message communication
  • @input 📦 github feedback2 from given
  • The const port = await io.at(editor_id) should not be there anymore
    • @input 📦
  • all messages should only use { type, data }
  • require resource module as shown in the github feedback2 comment under "regarding port" in all places where needed
• remove legacy quick editor dependency from files
  • @input discord feedback3 for worklog-276 from given
  • deleted example4 folder
• add resource module to manage io port's without the need to change STATE or io modules
  • @input 📦 port feedback from given