Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Attach images to Markdown cells via notebook command. #15616

Open
kolibril13 opened this issue Jan 7, 2024 · 0 comments
Open

Attach images to Markdown cells via notebook command. #15616

kolibril13 opened this issue Jan 7, 2024 · 0 comments

Comments

@kolibril13
Copy link

Similar to #15615
I've got a Jupyter Widget, I would love to export an image from it to the next markdown cell.
I already managed to create a new Markdown cell using ipylab and anywidget, the last part missing is the command to attach the image to the attachments setting in the Notebook JSON metadata like this:

"attachments": {
    "cute_dog.jpg": {
     "image/jpeg": "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEh

I've already had a look in the notebook commandsList, but could not find a function like add-attachments.

It would be great if there was one!

For reference, here is the widget that creates markdown cells:

import anywidget
from traitlets import Int, observe

class CounterWidget(anywidget.AnyWidget):
    _esm = """
    export function render({ model, el }) {
      let button = document.createElement("button");
      button.innerHTML = `count is ${model.get("value")}`;
      button.addEventListener("click", () => {
        model.set("value", model.get("value") + 1);
        model.save_changes();
      });
      model.on("change:value", () => {
        button.innerHTML = `count is ${model.get("value")}`;
      });
      el.appendChild(button);
    }
    """

    value = Int(0).tag(sync=True)

    @observe("value")
    def _observe_count(self, change):
        text = f"'Hello world, count is {change.new}' And here's the image ![cute_dog.jpg](attachment:cute_dog.jpg)"
        from ipylab import JupyterFrontEnd
        app = JupyterFrontEnd()
        # see all commands here for reference https://github.com/jupyterlab/jupyterlab/blob/main/galata/test/documentation/commands.test.ts-snapshots/commandsList-documentation-linux.json#L992
        app.commands.execute('notebook:insert-cell-below')
        app.commands.execute('notebook:replace-selection', { 'text': text})
        app.commands.execute('notebook:change-cell-to-markdown')
        app.commands.execute('notebook:render-all-markdown')

CounterWidget()
Screen.Recording.2024-01-07.at.19.02.15.mov
@jupyterlab-probot jupyterlab-probot bot added the status:Needs Triage Applied to new issues that need triage label Jan 7, 2024
@JasonWeill JasonWeill removed the status:Needs Triage Applied to new issues that need triage label Jan 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants