CMU Data Interaction Group

Lukas Hermann

This is so much fun! Thanks for putting it together! I used it to update @mbostock/shader with live shader input: https://observablehq.com/d/eb2ca85b636bce01#editor

Ricky Reusser

I'm glad you're enjoying it :) I was thinking of that exact use case while working on this! I also am excited to see it used as a teaching tool to let people fiddle with the shader code itself like in our plotting example: https://observablehq.com/@cmudig/book-of-shaders-shaping-functions

I have a suggestion for an improvement which I implemented in this fork https://observablehq.com/@jmatsushita/editor. 

I needed support for receiving and sending updates as observable inputs are supposed to (in order to implement the localStorageView). Here's an example of it working https://observablehq.com/@jmatsushita/editor#cell-1774 
```
// support sending and receiving updates as per https://observablehq.com/@tophtucker/custom-input-example
  Object.defineProperty(container, "value", {
    get() {
      // console.log("editor.get called:", ed.textContent)
      return ed.textContent;
    },
    set(v) {
      // console.log("editor.set called with: ",v)
      jar.updateCode(v);
    }
  });
```
Let me know what you think!

Jun Matsushita

If you think we should upstream it, please send a suggestion from your fork. This looks useful.

Dominik Moritz

Oh no! It seems like emitting input events is broken. Dependent cells are no longer triggered when I edit the text.

It works for me. You have to confirm the change or enable instant (instant: true).

Oh, my mistake! Apologies. I think I'd used it with `instant: true` and recalled the behavior but completely forgot that it was a configuration option. Pardon the interruption!

Instant has stopped working for me. When you are writing the cursor will jump to the beginning to the input breaking whatever I'm writing. Any ideas what could be the culprit?

John Alexis Guerra Gómez

I do not. Could you try going back to older versions to see whether it works and when it broke?

I think I found the problem, sending a suggestion https://observablehq.com/compare/1e678359458bbd2d...11c798ee666ebb7e

Hi there, this way of importing debounce yields this error in chrome:
```
index.js:377 Uncaught ReferenceError: module is not defined
    at index.js:377:1
``` 
Using instead 
```js
 debounce = import('https://cdn.skypack.dev/lodash.debounce@4.0.8')
```

seems to make the error go away (but I'm not sure whether that global window variable is used elsewhere).

UPDATE: nevermind, indeed it errors without the global window variable.

So no error and nothing to improve here? If there is, please send a suggestion.

Thanks for the quick reply! There is an error I see in the console log, but I think I understand that this is in fact a "feature", the error is thrown and the catch block somehow is able to load the module in the `window.debounce` global variable (which seems necessary to make it available from within the `Editor` component. The only inconvenience is that it displays an error in the console. But I don't have a suggestion on how to avoid that.

Ok I think this fixes it:
```
debounce = (await import('https://cdn.skypack.dev/lodash.debounce@4.0.8')).default`
```