DemoExampleMaker: Bugs + Updates

[nbriz]

@Cthomp7 i felt like my comments in the last issue were getting a little messy, && so much work on that was already done, so i wanted to close that one && start a new one w/bugs i've found since i started using ur latest version as well as a couple improvement ideas:

bugs

• [x] auto save issues: i can't quite figure out the exact pattern to reproduce this issue, but as i started to mention in the comments of the last issue, when working on a step && then moving onto another one, it would often be the case that the description doesn't automatically save, which wouldn't be obvious until i started to test the demo (by downloading json or copy+pasting link) or returning to a step to make changes (&& then realizing that the description i wrote was never saved), sometimes this would happen more than once on the same step, so i'd have to click around && edit other fields to try && force the auto-save.
• [ ] error loading older examples: when uploading the .json for an older example i'll get a Uncaught TypeError: obj is undefined on Convo.js:72 causing the initial netnet dialogue box to get stuck rather than fading away after agreeing to open the example in the same window.

improvements

• [x] close generated link: if we click "generate link" && later click on "upload json" to load a new example, the generated link field stays open (which could be confusing b/c it contains code from the previous example, rather than the one u're working on), this made me realize that if ever the generated link field is open && the code changes in the editor or the meta data (like a new step being added) we should close/hide the generated link field as it now contains code that no longer reflects the current state of the demo (we want folks to click on "generate link" again to create a new one)
• [x] dashed syntax for line number highlights: would be great if the field for selecting lines to highlight in a given step accepted dashed values like 5-8 instead of just comma-separated values like 5,6,7,8, would be great if we could combine them too, 5-8, 12-18
• [x] description field should not resize when typing: when u type (or copy+paste) long descriptions into the new description field it makes the window larger, as large as the whole screen && then gets stuck on the side (b/c of the sticky widget issue, which is something else i gotta work on). so it be great if the description box always remain the same width as the widget window itself (meaning it would be great if it resized, but only when resizing the widget && not when writing long descriptions as it does now--see example below)

[nbriz]

this is what the "description field should not resize when typing" mentioned above looks like

https://github.com/netizenorg/netnet.studio/assets/2506806/f9e9041d-91c3-4424-bb44-234b541ecbc6

UPDATE: disregard this one, i fixed it (by changing some of the CSS && making the widget non-resizable)

[nbriz]

i addressed the auto save issues && description field should not resize when typing in this committ

[Cthomp7]

In addition for the dashed syntax improvement. Instead of the placement text, I was thinking it might be beneficial to have a (?) icon next to the text input element which when hover would toggle examples of acceptable inputs. I think that would be more intuitive for new users. I know there will be updated docs, but this would be quicker than searching a whole How To doc.

(UPDATE: I will wait till the reorderable list is merged since there is new styling and DEM HTML formatting I implemented and would like to work around with this additional element)

[nbriz]

i can't seem to find a pattern for recreating this bug, it happens when i change the order of items (but only sometimes) i can' figure out which particular re-ordering actions trigger this bug, but here's some documentation in case it helps u figure it out:

📢 (something happened to the sound when i uploaded the video... but what i'm explaining is that when i click on the items --- after having re-ordered them --- they don't display the correct info, almost as though there is something off with the way the drop down list gets rendered, clicking on one of the ones i've reordered displays the data of another)

https://github.com/netizenorg/netnet.studio/assets/2506806/e6a5685e-986a-40fc-a924-6cdd6c672dce

here's the logged output for WIDGETS['demo-example-maker']._data.steps for the video above

Array(5) [ {…}, {…}, {…}, {…}, {…} ]
0: Object { id: 0, title: "start", text: "this is the start", … }
1: Object { id: 1, title: "next", text: "this is the next step", … }
2: Object { id: 2, title: "end", text: "this is the last step", … }
3: Object { id: 3, title: "almost done", text: "this is the second to last step", … }
4: Object { id: 4, title: "middle", text: "this is the middle step", … }