Editable Outputs

Make everything editable.

from pathlib import Path

import fastcore.all as FC
from fastcore.test import *
from pote.common import shortens
from rich.console import Console

# from bridget.bridge_helpers import bootstrap_bridge
from bridget.helpers import bridge_cfg

---

cprint = (console := Console(width=120)).print

# with bridge_cfg(bootstrap=True): bootstrap_bridge()

---

nb = NBState()

Unable to display output for mime type(s): application/x-notebook-state

State updated type: state #cells 22 @1737813648692 watch: False feedback: True debug: True

_on_message: state_update

Requesting notebook state...

_on_message: info

Loading NBState fetcher...

<style class="echo reflect" contenteditable="true">

@font-face {
  font-family: 'FontWithASyntaxHighlighterLightOwl';
  src:
    url('static/font/FontWithASyntaxHighlighterLightOwl-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'FontWithASyntaxHighlighter';
  src:
    url('static/font/FontWithASyntaxHighlighter-Regular.woff2') format('woff2');
  font-weight: 400;
}

/** keep in sync with libertine.css */
.echo {
  display: block;
  font-family: "FontWithASyntaxHighlighterLightOwl", monospace;
  font-feature-settings: "colr", "calt";
  white-space: pre;
  font-size: 0.9rem; /* 0.83rem */
  line-height: 1.42;

  padding: 1ch;
  /* cloned by libertine.css */
  overflow: auto;
  background-color: transparent; /* #f3f3f3; */
  border-radius: 4px;
}


.echo.dark {
  font-family: "FontWithASyntaxHighlighter", monospace;
  background-color: #282828;
  color: #eee;
}


.echo[contenteditable]:hover {
  box-shadow: inset 0 0 0 1px #8b99c8;
}

.echo[contenteditable].dark:hover {
  box-shadow: inset 0 0 0 3px #8b99c8;
}

/* */
script.reflect::before {
  content: "<script id=\"" attr(id) "\" type=\"" attr(type) "\" class=\"" attr(class) "\" contenteditable=\"" attr(contenteditable) "\">";
}

script.reflect::after {
  content: "<\/script>";
}

style.reflect::before {
  content: "<style id=\"" attr(id) "\" class=\"" attr(class) "\" contenteditable=\"" attr(contenteditable) "\">";
}

style.reflect::after {
  content: "<\/style>";
}
/* */
</style>

Div(
    Div('asdf'), 
    Script('asdf\n', cls='echo', contenteditable='true', type='text/html')
)

asdf

<style class="echo reflect" contenteditable="true">
/* @import url('https://unpkg.com/@observablehq/inspector@5.0.1/src/style.css'); */

@font-face {
  font-family: 'FontWithASyntaxHighlighterLightOwl';
  src:
    url('static/font/FontWithASyntaxHighlighterLightOwl-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'FontWithASyntaxHighlighter';
  src:
    url('static/font/FontWithASyntaxHighlighter-Regular.woff2') format('woff2');
  font-weight: 400;
}

/** keep in sync with libertine.css */
.echo {
  display: block;
  font-family: "FontWithASyntaxHighlighterLightOwl", monospace;
  font-feature-settings: "colr", "calt";
  white-space: pre;
  font-size: 0.9rem; /* 0.83rem */
  line-height: 1.42;

  padding: 1ch;
  /* cloned by libertine.css */
  overflow: auto;
  background-color: transparent; /* #f3f3f3; */
  border-radius: 4px;
}


.echo.dark {
  font-family: "FontWithASyntaxHighlighter", monospace;
  background-color: #282828;
  color: #eee;
}


.echo[contenteditable]:hover {
  box-shadow: inset 0 0 0 1px #8b99c8;
}

.echo[contenteditable].dark:hover {
  box-shadow: inset 0 0 0 3px #8b99c8;
}
script.reflect::before {
  content: "<script id=\"" attr(id) "\" type=\"" attr(type) "\" class=\"" attr(class) "\" contenteditable=\"" attr(contenteditable) "\">";
}

script.reflect::after {
  content: "<\/script>";
}

style.reflect::before {
  content: "<style id=\"" attr(id) "\" class=\"" attr(class) "\" contenteditable=\"" attr(contenteditable) "\">";
}

style.reflect::after {
  content: "<\/style>";
}

.observablehq {
  display: inline;
}

@keyframes blink {
  67% {
    opacity: 0;
  }
}
.observablehq--running::before {
  content: 'LOADING';
  animation: blink 1s step-end infinite;
}
</style>

<div id="asdf-qwer">Hello World</div>

<style class="echo reflect" contenteditable="true">
    #asdf-qwer {
        background-color:rgb(49, 49, 49); /* trasparent */
        color: ivory;
    }
</style>

<script class="echo reflect" contenteditable="true">
    console.log('Hello World');
</script>

<div contenteditable="true">
<div>Hello World</div>
</div>

nb.state.find('%%HTML')[1]

---