@zikojs/notebook 0.14.2 → 0.15.1

package/src/components/MarkdownView/index.css

@@ -1,91 +1,91 @@
-/* --- MARKDOWN --- */
-
-.ziko-notebook .markdown-rendered-cell {
-  flex: 1 1 0;
-  min-width: 0;
-  padding: 8px 12px;
-  cursor: pointer;
-  min-height: 38px;
-  border: 1px dashed transparent;
-  border-radius: 4px;
-  transition: background 0.15s ease, border-color 0.15s ease;
-}
-
-.ziko-notebook .markdown-rendered-cell:hover {
-  background: #f8fafc;
-  border-color: #cbd5e1;
-}
-
-.ziko-notebook .cell.active .markdown-rendered-cell {
-  border-color: #94a3b8;
-}
-
-.ziko-notebook .markdown-body {
-  line-height: 1.6;
-}
-
-.ziko-notebook .markdown-body h1,
-.ziko-notebook .markdown-body h2,
-.ziko-notebook .markdown-body h3 {
-  margin-top: 8px;
-  margin-bottom: 8px;
-  font-weight: 600;
-}
-
-.ziko-notebook .markdown-body h1 {
-  font-size: 1.5em;
-  border-bottom: 1px solid var(--border-color);
-  padding-bottom: 4px;
-}
-
-.ziko-notebook .markdown-body h2 {
-  font-size: 1.25em;
-}
-
-.ziko-notebook .markdown-body h3 {
-  font-size: 1.1em;
-}
-
-.ziko-notebook .markdown-body p {
-  margin-bottom: 8px;
-}
-
-.ziko-notebook .markdown-body p:last-child {
-  margin-bottom: 0;
-}
-
-.ziko-notebook .markdown-body ul,
-.ziko-notebook .markdown-body ol {
-  padding-left: 20px;
-  margin-bottom: 8px;
-}
-
-.ziko-notebook .markdown-body code {
-  background: #f1f5f9;
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-family: ui-monospace, SFMono-Regular, monospace;
-  font-size: 0.9em;
-}
-
-.ziko-notebook .markdown-body pre {
-  background: #1e293b;
-  color: #f8fafc;
-  padding: 10px;
-  border-radius: 6px;
-  overflow-x: auto;
-  margin: 8px 0;
-}
-
-.ziko-notebook .markdown-body pre code {
-  background: transparent;
-  color: inherit;
-  padding: 0;
-}
-
-.ziko-notebook .markdown-body blockquote {
-  border-left: 4px solid var(--primary);
-  padding-left: 10px;
-  color: #64748b;
-  margin: 8px 0;
-}
+/* --- MARKDOWN --- */
+
+.ziko-notebook .markdown-rendered-cell {
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 8px 12px;
+  cursor: pointer;
+  min-height: 38px;
+  border: 1px dashed transparent;
+  border-radius: 4px;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.ziko-notebook .markdown-rendered-cell:hover {
+  background: #f8fafc;
+  border-color: #cbd5e1;
+}
+
+.ziko-notebook .cell.active .markdown-rendered-cell {
+  border-color: #94a3b8;
+}
+
+.ziko-notebook .markdown-body {
+  line-height: 1.6;
+}
+
+.ziko-notebook .markdown-body h1,
+.ziko-notebook .markdown-body h2,
+.ziko-notebook .markdown-body h3 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.ziko-notebook .markdown-body h1 {
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 4px;
+}
+
+.ziko-notebook .markdown-body h2 {
+  font-size: 1.25em;
+}
+
+.ziko-notebook .markdown-body h3 {
+  font-size: 1.1em;
+}
+
+.ziko-notebook .markdown-body p {
+  margin-bottom: 8px;
+}
+
+.ziko-notebook .markdown-body p:last-child {
+  margin-bottom: 0;
+}
+
+.ziko-notebook .markdown-body ul,
+.ziko-notebook .markdown-body ol {
+  padding-left: 20px;
+  margin-bottom: 8px;
+}
+
+.ziko-notebook .markdown-body code {
+  background: #f1f5f9;
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-size: 0.9em;
+}
+
+.ziko-notebook .markdown-body pre {
+  background: #1e293b;
+  color: #f8fafc;
+  padding: 10px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 8px 0;
+}
+
+.ziko-notebook .markdown-body pre code {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+}
+
+.ziko-notebook .markdown-body blockquote {
+  border-left: 4px solid var(--primary);
+  padding-left: 10px;
+  color: #64748b;
+  margin: 8px 0;
+}

package/src/components/MarkdownView/index.js

@@ -1,133 +1,135 @@
-import { remark } from "remark";
-import remarkRehype from "remark-rehype";
-import rehypeStringify from "rehype-stringify";
-
-import { tags } from "ziko/dom";
-
-const { div } = tags;
-
-export function MarkdownView({
-  cellData,
-  actions,
-  remarkPlugins = [],
-  rehypePlugins = [],
-}) {
-  const content = div();
-
-  remark()
-    .use(remarkPlugins)
-    .use(remarkRehype, { allowDangerousHtml: true })
-    .use(rehypePlugins)
-    .use(rehypeStringify)
-    .process(cellData.code || "*Empty Markdown Cell*")
-    .then((file) => {
-      content.element.innerHTML = String(file);
-    })
-    .catch((err) => {
-      content.element.innerHTML =
-        `<div class="error-output">Markdown rendering error: ${err.message}</div>`;
-    });
-
-  const wrap = div(
-    { class: "markdown-rendered-cell markdown-body" },
-    content
-  );
-
-  wrap.onClick(() => actions.editMarkdown());
-
-  return wrap.element;
-}
-
-
-
-// import { remark } from "remark";
-// import remarkRehype from "remark-rehype";
-// import rehypeStringify from "rehype-stringify";
-
-// import { tags } from "ziko/dom";
-
-// const { div } = tags;
-
-// /**
-//  * Activate elements inserted through innerHTML.
-//  *
-//  * Scripts created by innerHTML are inert, so recreate them
-//  * as real DOM nodes. This also handles external scripts.
-//  */
-// async function activateHTML(container) {
-//   const scripts = [
-//     ...container.querySelectorAll("script"),
-//   ];
-
-//   for (const oldScript of scripts) {
-//     const script = document.createElement("script");
-
-//     for (const attribute of oldScript.attributes) {
-//       script.setAttribute(
-//         attribute.name,
-//         attribute.value
-//       );
-//     }
-
-//     script.textContent = oldScript.textContent;
-
-//     oldScript.replaceWith(script);
-
-//     if (script.src) {
-//       await new Promise((resolve, reject) => {
-//         script.addEventListener(
-//           "load",
-//           resolve,
-//           { once: true }
-//         );
-
-//         script.addEventListener(
-//           "error",
-//           reject,
-//           { once: true }
-//         );
-//       });
-//     }
-//   }
-// }
-
-// export function MarkdownView({
-//   cellData,
-//   actions,
-//   remarkPlugins = [],
-//   rehypePlugins = [],
-// }) {
-//   const content = div();
-
-//   remark()
-//     .use(remarkPlugins)
-//     .use(remarkRehype, {
-//       allowDangerousHtml: true,
-//     })
-//     .use(rehypePlugins)
-//     .use(rehypeStringify)
-//     .process(cellData.code || "*Empty Markdown Cell*")
-//     .then(async (file) => {
-//       content.element.innerHTML = String(file);
-
-//       await activateHTML(content.element);
-//     })
-//     .catch((err) => {
-//       content.element.innerHTML = `
-//         <div class="error-output">
-//           Markdown rendering error: ${err.message}
-//         </div>
-//       `;
-//     });
-
-//   const wrap = div(
-//     {
-//       class: "markdown-rendered-cell markdown-body",
-//     },
-//     content
-//   );
-
-//   wrap.onClick(() => actions.editMarkdown());
-
-//   return wrap.element;
+import { remark } from "remark";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+
+import { tags } from "ziko/dom";
+
+const { div } = tags;
+
+export function MarkdownView({
+  cellData,
+  actions,
+  remarkPlugins = [],
+  rehypePlugins = [],
+}) {
+  const content = div();
+
+  remark()
+    .use(remarkPlugins)
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypePlugins)
+    .use(rehypeStringify)
+    .process(cellData.code || "*Empty Markdown Cell*")
+    .then((file) => {
+      content.element.innerHTML = String(file);
+    })
+    .catch((err) => {
+      content.element.innerHTML =
+        `<div class="error-output">Markdown rendering error: ${err.message}</div>`;
+    });
+
+  const wrap = div(
+    { class: "markdown-rendered-cell markdown-body" },
+    content
+  );
+
+  wrap.element.addEventListener("dblclick", () =>
+    actions.editMarkdown()
+  );
+
+  return wrap.element;
+}
+
+
+
+// import { remark } from "remark";
+// import remarkRehype from "remark-rehype";
+// import rehypeStringify from "rehype-stringify";
+
+// import { tags } from "ziko/dom";
+
+// const { div } = tags;
+
+// /**
+//  * Activate elements inserted through innerHTML.
+//  *
+//  * Scripts created by innerHTML are inert, so recreate them
+//  * as real DOM nodes. This also handles external scripts.
+//  */
+// async function activateHTML(container) {
+//   const scripts = [
+//     ...container.querySelectorAll("script"),
+//   ];
+
+//   for (const oldScript of scripts) {
+//     const script = document.createElement("script");
+
+//     for (const attribute of oldScript.attributes) {
+//       script.setAttribute(
+//         attribute.name,
+//         attribute.value
+//       );
+//     }
+
+//     script.textContent = oldScript.textContent;
+
+//     oldScript.replaceWith(script);
+
+//     if (script.src) {
+//       await new Promise((resolve, reject) => {
+//         script.addEventListener(
+//           "load",
+//           resolve,
+//           { once: true }
+//         );
+
+//         script.addEventListener(
+//           "error",
+//           reject,
+//           { once: true }
+//         );
+//       });
+//     }
+//   }
+// }
+
+// export function MarkdownView({
+//   cellData,
+//   actions,
+//   remarkPlugins = [],
+//   rehypePlugins = [],
+// }) {
+//   const content = div();
+
+//   remark()
+//     .use(remarkPlugins)
+//     .use(remarkRehype, {
+//       allowDangerousHtml: true,
+//     })
+//     .use(rehypePlugins)
+//     .use(rehypeStringify)
+//     .process(cellData.code || "*Empty Markdown Cell*")
+//     .then(async (file) => {
+//       content.element.innerHTML = String(file);
+
+//       await activateHTML(content.element);
+//     })
+//     .catch((err) => {
+//       content.element.innerHTML = `
+//         <div class="error-output">
+//           Markdown rendering error: ${err.message}
+//         </div>
+//       `;
+//     });
+
+//   const wrap = div(
+//     {
+//       class: "markdown-rendered-cell markdown-body",
+//     },
+//     content
+//   );
+
+//   wrap.onClick(() => actions.editMarkdown());
+
+//   return wrap.element;
 // }

package/src/components/icons/index.js

@@ -1,31 +1,31 @@
-import _Check from '@zikojs/lucide/Check'
-import _Copy from '@zikojs/lucide/Copy'
-import _Lock from '@zikojs/lucide/Lock'
-import _Unlock from '@zikojs/lucide/Unlock'
-import _Code2 from '@zikojs/lucide/Code2'
-import _FileText from '@zikojs/lucide/FileText'
-import _Pencil from '@zikojs/lucide/Pencil'
-import _Play from '@zikojs/lucide/Play'
-import _Refresh from '@zikojs/lucide/RefreshCcw'
-import _Plus from '@zikojs/lucide/Plus'
-import _Trash2 from '@zikojs/lucide/Trash2'
-import _PlayForward from '@zikojs/lucide/StepForward'
-import _Eraser from '@zikojs/lucide/Eraser'
-import _Download from '@zikojs/lucide/Download'
-import _Loader2 from '@zikojs/lucide/Loader2'
-
-export const Check = () => _Check({ class: 'icon', stroke : 'currentColor' }).element
-export const Copy = () => _Copy({ class: 'icon', stroke : 'currentColor' }).element
-export const Lock = () => _Lock({ class: 'icon', stroke : 'currentColor' }).element
-export const Unlock = () => _Unlock({ class: 'icon', stroke : 'currentColor' }).element
-export const Code2 = () => _Code2({ class: 'icon', stroke : 'currentColor' }).element
-export const FileText = () => _FileText({ class: 'icon', stroke : 'currentColor' }).element
-export const Pencil = () => _Pencil({ class: 'icon', stroke : 'currentColor' }).element
-export const Play = () => _Play({ class: 'icon', stroke : 'currentColor' }).element
-export const Refresh = () => _Refresh({ class: 'icon', stroke : 'currentColor' }).element
-export const Plus = () => _Plus({ class: 'icon', stroke : 'currentColor' }).element
-export const Trash2 = () => _Trash2({ class: 'icon', stroke : 'currentColor' }).element
-export const PlayForward = () => _PlayForward({ class: 'icon', stroke : 'currentColor' }).element
-export const Eraser = () => _Eraser({ class: 'icon', stroke : 'currentColor' }).element
-export const Download = () => _Download({ class: 'icon', stroke : 'currentColor' }).element
-export const Loader2 = () => _Loader2({ class: 'icon', stroke : 'currentColor' }).element
+import _Check from '@zikojs/lucide/Check'
+import _Copy from '@zikojs/lucide/Copy'
+import _Lock from '@zikojs/lucide/Lock'
+import _Unlock from '@zikojs/lucide/Unlock'
+import _Code2 from '@zikojs/lucide/Code2'
+import _FileText from '@zikojs/lucide/FileText'
+import _Pencil from '@zikojs/lucide/Pencil'
+import _Play from '@zikojs/lucide/Play'
+import _Refresh from '@zikojs/lucide/RefreshCcw'
+import _Plus from '@zikojs/lucide/Plus'
+import _Trash2 from '@zikojs/lucide/Trash2'
+import _PlayForward from '@zikojs/lucide/StepForward'
+import _Eraser from '@zikojs/lucide/Eraser'
+import _Download from '@zikojs/lucide/Download'
+import _Loader2 from '@zikojs/lucide/Loader2'
+
+export const Check = () => _Check({ class: 'icon', stroke : 'currentColor' }).element
+export const Copy = () => _Copy({ class: 'icon', stroke : 'currentColor' }).element
+export const Lock = () => _Lock({ class: 'icon', stroke : 'currentColor' }).element
+export const Unlock = () => _Unlock({ class: 'icon', stroke : 'currentColor' }).element
+export const Code2 = () => _Code2({ class: 'icon', stroke : 'currentColor' }).element
+export const FileText = () => _FileText({ class: 'icon', stroke : 'currentColor' }).element
+export const Pencil = () => _Pencil({ class: 'icon', stroke : 'currentColor' }).element
+export const Play = () => _Play({ class: 'icon', stroke : 'currentColor' }).element
+export const Refresh = () => _Refresh({ class: 'icon', stroke : 'currentColor' }).element
+export const Plus = () => _Plus({ class: 'icon', stroke : 'currentColor' }).element
+export const Trash2 = () => _Trash2({ class: 'icon', stroke : 'currentColor' }).element
+export const PlayForward = () => _PlayForward({ class: 'icon', stroke : 'currentColor' }).element
+export const Eraser = () => _Eraser({ class: 'icon', stroke : 'currentColor' }).element
+export const Download = () => _Download({ class: 'icon', stroke : 'currentColor' }).element
+export const Loader2 = () => _Loader2({ class: 'icon', stroke : 'currentColor' }).element

package/src/components/index.css

@@ -1,23 +1,23 @@
-@import url('./ErrorOutput/index.css');
-@import url('./Button/index.css');
-@import url('./Header/index.css');
-@import url('./MarkdownView//index.css');
-
-.ziko-notebook .runtime-select {
-  font-family: inherit;
-  font-size: 11px;
-  padding: 2px 4px;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  background: #ffffff;
-  color: #1e293b;
-  cursor: pointer;
-  height: 28px;
-  min-width: 50px;
-  translate: 0 -2px;
-}
-
-.ziko-notebook .runtime-select:focus {
-  outline: none;
-  border-color: var(--primary);
+@import url('./ErrorOutput/index.css');
+@import url('./Button/index.css');
+@import url('./Header/index.css');
+@import url('./MarkdownView//index.css');
+
+.ziko-notebook .runtime-select {
+  font-family: inherit;
+  font-size: 11px;
+  padding: 2px 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background: #ffffff;
+  color: #1e293b;
+  cursor: pointer;
+  height: 28px;
+  min-width: 50px;
+  translate: 0 -2px;
+}
+
+.ziko-notebook .runtime-select:focus {
+  outline: none;
+  border-color: var(--primary);
 }

package/src/components/index.js

@@ -1,4 +1,4 @@
-export * from './MarkdownView/index.js'
-export * from './CellItem/index.js'
-export * from './Header/index.js'
+export * from './MarkdownView/index.js'
+export * from './CellItem/index.js'
+export * from './Header/index.js'
 export * from './ErrorOutput/index.js'