add fullscreen button to Online and SQL IDE

.changeset/modern-crabs-poke.md

@@ -0,0 +1,7 @@
+---
+"@hyperbook/element-online-ide": minor
+"@hyperbook/element-sql-ide": minor
+"hyperbook": minor
+---
+
+Add fullscreen button to the Online IDE and SQL IDE elements.

packages/element-online-ide/src/index.css

@@ -1,3 +1,23 @@
+.online-ide {
+  margin-bottom: 10px;
+  border: 1px solid var(--color-spacer);
+  border-radius: 8px;
+  background: #1e1e1e;
+  overflow: hidden;
+}
+
 .online-ide iframe {
   width: 100%;
 }
+
+.online-ide .menu {
+  display: flex;
+  border-top: 1px solid var(--color-spacer);
+}
+
+.online-ide .menu button {
+  flex: 1;
+  background: var(--color-nav);
+  color: var(--color-text);
+  border: none;
+}

packages/element-online-ide/src/index.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from "react";
+import { FC, ReactNode, useRef } from "react";
 import hash from "object-hash";
 import "./index.css";
 import { useConfig } from "@hyperbook/provider";
@@ -38,6 +38,7 @@ const DirectiveOnlineIde: FC<DirectiveOnlineIdeProps> = ({
   if (!id) {
     id = hash(node);
   }
+  const iframeRef = useRef<HTMLIFrameElement>(null);
   const config = useConfig();
   const ideConfig = config?.elements?.onlineide;
 
@@ -49,6 +50,12 @@ const DirectiveOnlineIde: FC<DirectiveOnlineIdeProps> = ({
     height = ideConfig.height;
   }
 
+  const openInFullscreen = () => {
+    if (iframeRef.current?.requestFullscreen) {
+      iframeRef.current.requestFullscreen();
+    }
+  };
+
   const codes: { title: string; code: string; hint?: boolean }[] = node.children
     ?.filter((n: any) => n.tagName === "pre")
     .flatMap((n: any) => {
@@ -78,19 +85,28 @@ const DirectiveOnlineIde: FC<DirectiveOnlineIdeProps> = ({
     `<style>
 .joe_javaOnlineDiv {
   box-shadow: none;
+  margin: 0!important;
+  top: 0!important;
+  width: 100%!important;
+  height: calc(100% - 5px) !important;
+  border: none !important;
 }
 </style>`;
 
   return (
     <div className="online-ide">
       <iframe
-        srcDoc={`<script>window.jo_doc = window.frameElement.textContent;</script><script src='${url}/includeIDE.js'></script>`}
         height={height}
+        ref={iframeRef}
+        srcDoc={`<script>window.jo_doc = window.frameElement.textContent;</script><script src='${url}/includeIDE.js'></script>`}
         frameBorder="0"
         dangerouslySetInnerHTML={{
           __html: html,
         }}
       ></iframe>
+      <div className="menu">
+        <button onClick={openInFullscreen}>Fullscreen</button>
+      </div>
     </div>
   );
 };

packages/element-sql-ide/src/index.css

@@ -1,3 +1,23 @@
+.sql-ide {
+  margin-bottom: 10px;
+  border: 1px solid var(--color-spacer);
+  border-radius: 8px;
+  background: #1e1e1e;
+  overflow: hidden;
+}
+
 .sql-ide iframe {
   width: 100%;
 }
+
+.sql-ide .menu {
+  display: flex;
+  border-top: 1px solid var(--color-spacer);
+}
+
+.sql-ide .menu button {
+  flex: 1;
+  background: var(--color-nav);
+  color: var(--color-text);
+  border: none;
+}

packages/element-sql-ide/src/index.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from "react";
+import { FC, ReactNode, useRef } from "react";
 import hash from "object-hash";
 import "./index.css";
 import { useConfig, useMakeUrl } from "@hyperbook/provider";
@@ -29,6 +29,7 @@ const DirectiveSqlIde: FC<DirectiveSqlIdeProps> = ({
     id = hash(node);
   }
 
+  const iframeRef = useRef<HTMLIFrameElement>(null);
   const makeUrl = useMakeUrl();
   const config = useConfig();
   const ideConfig = config?.elements?.sqlide;
@@ -44,6 +45,13 @@ const DirectiveSqlIde: FC<DirectiveSqlIdeProps> = ({
   if (ideConfig?.db) {
     db = makeUrl(ideConfig.db, "public");
   }
+
+  const openInFullscreen = () => {
+    if (iframeRef.current?.requestFullscreen) {
+      iframeRef.current.requestFullscreen();
+    }
+  };
+
   const codes: { title: string; code: string; hint?: boolean }[] = node.children
     ?.filter((n: any) => n.tagName === "pre")
     .flatMap((n: any) => {
@@ -67,17 +75,34 @@ const DirectiveSqlIde: FC<DirectiveSqlIdeProps> = ({
   });
   let html = `{'id': '${id}', 'databaseURL': '${db}'}`;
   html = html + "\n" + scripts.join("\n");
+  html =
+    html +
+    "\n" +
+    `<style>
+.joe_javaOnlineDiv {
+  box-shadow: none;
+  margin: 0!important;
+  top: 0!important;
+  width: 100%!important;
+  height: calc(100% - 5px) !important;
+  border: none !important;
+}
+</style>`;
 
   return (
     <div className="sql-ide">
       <iframe
+        ref={iframeRef}
         srcDoc={`<script>window.jo_doc = window.frameElement.textContent;</script><script src='${url}/js/includeide/includeIDE.js'></script>`}
         height={height}
         frameBorder="0"
         dangerouslySetInnerHTML={{
           __html: html,
         }}
       ></iframe>
+      <div className="menu">
+        <button onClick={openInFullscreen}>Fullscreen</button>
+      </div>
     </div>
   );
 };

website/de/book/elements/online-ide.md

@@ -200,7 +200,7 @@ l.append(1);
 
 ```java Test.java
 
-var l = new List<Integer>();
+var l = new NRWList<Integer>();
 l.append(1);
 
 ```

website/en/book/elements/online-ide.md

@@ -200,7 +200,7 @@ l.append(1);
 
 ```java Test.java
 
-var l = new List<Integer>();
+var l = new NRWList<Integer>();
 l.append(1);
 
 ```