Typst by mikebarkmin · Pull Request #1063 · openpatch/hyperbook

mikebarkmin · 2026-01-07T22:37:30Z

No description provided.

vercel · 2026-01-07T22:37:35Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
hyperbook-4fwa	Ready	Preview, Comment	Jan 7, 2026 10:37pm

Copilot

Pull request overview

This pull request adds a comprehensive Typst directive to Hyperbook, enabling users to write and preview Typst documents directly within their documentation. The implementation includes an interactive editor with syntax highlighting, multi-file project support, binary file handling (images, fonts), PDF export, and project ZIP download functionality.

Key changes:

New Typst directive with both preview and edit modes supporting live rendering
Multi-file project support with tabbed interface for managing source files
Binary file upload and management for assets like images
Error handling with dismissible overlays that preserve the last successful render

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 37 comments.

Show a summary per file

File	Description
website/en/book/elements/typst.md	English documentation for the new Typst directive with usage examples
website/de/book/elements/typst.md	German translation of the Typst documentation
website/en/book/changelog.md	Changelog entry for v0.73.0 describing the new feature
website/en/book/elements/typst-doc.typ	Example Typst source file for demonstration
website/de/book/elements/typst-doc.typ	Example Typst source file for German documentation
packages/markdown/src/remarkDirectiveTypst.ts	Core directive implementation parsing Typst blocks and generating HTML
packages/markdown/src/rehypeHtmlStructure.ts	Adds Prism Typst syntax highlighter script to HTML head
packages/markdown/src/process.ts	Integrates the Typst directive into the markdown processing pipeline
packages/markdown/assets/directive-typst/client.js	Client-side JavaScript for Typst rendering, file management, and exports
packages/markdown/assets/directive-typst/style.css	Styling for the Typst editor and preview interface
packages/markdown/assets/prism/prism-typst.js	Prism syntax highlighting grammar for Typst language
packages/markdown/assets/uzip/uzip.js	ZIP library for project downloads (third-party library)
packages/markdown/assets/store.js	Database schema update adding typst table for state persistence
packages/markdown/locales/en.json	English UI strings for Typst features
packages/markdown/locales/de.json	German UI strings for Typst features
packages/markdown/tests/snapshots/process.test.ts.snap	Updated snapshots including Prism Typst script and 2026 copyright
.changeset/add-typst-directive.md	Changeset documenting the minor version bump

Copilot · 2026-01-07T22:43:13Z

+ script.onerror = reject;
+ document.head.appendChild(script);
+ });
+


Missing error handling: The loadTypst() function is called without proper error handling. If the script fails to load or typst initialization fails, the promise rejection is not properly caught in the calling context, which could lead to unhandled promise rejections.
Suggested change
// Attach a catch handler to avoid unhandled promise rejections
typstLoadPromise.catch((error)=>{
console.error("Failed to load Typst:",error);
});

Copilot · 2026-01-07T22:43:14Z

@@ -0,0 +1,307 @@
+---
+name: Typst
+permaid: typst


The frontmatter field 'permaid' appears to be a typo. It should likely be 'permalink' or 'permaid' might be an intentional custom field name. If it's a typo, it should be corrected. If it's intentional, this comment can be disregarded.
Suggested change
permaid: typst
permalink: typst

Copilot · 2026-01-07T22:43:14Z

@@ -0,0 +1,307 @@
+---
+name: Typst
+permaid: typst


The frontmatter field 'permaid' appears to be a typo. It should likely be 'permalink' or 'permaid' might be an intentional custom field name. If it's a typo, it should be corrected. If it's intentional, this comment can be disregarded.
Suggested change
permaid: typst
permalink: typst

Copilot · 2026-01-07T22:43:15Z

+
+#figure(
+ image("/hello.jpg", width: 80%),
+ caption: "A complex figure with an image and a table caption."


Inconsistency in captions: line 292 says "A complex figure with an image and a table caption" but line 260 and 304 use different wording. The caption should accurately describe the content. If there's no table in the figure, "table caption" is misleading.

Copilot · 2026-01-07T22:43:15Z

+ errorOverlay.innerHTML = `
+ <div class="typst-error-content">
+ <div class="typst-error-header">
+ <span class="typst-error-title">⚠️ Typst Error</span>
+ <button class="typst-error-close" title="Dismiss error">×</button>
+ </div>
+ <div class="typst-error-message">${errorText}</div>
+ </div>
+ `;
+
+ // Add close button functionality
+ const closeBtn = errorOverlay.querySelector('.typst-error-close');
+ closeBtn.addEventListener('click', () => {
+ errorOverlay.remove();
+ });
+
+ previewContainer.appendChild(errorOverlay);
+ } else {
+ // Fallback: show error in preview container directly
+ container.innerHTML = `<div class="typst-error">${errorText}</div>`;


Security concern: Using innerHTML with user-generated content (errorText) could lead to XSS vulnerabilities. The error text should be sanitized or set using textContent instead of innerHTML to prevent potential script injection.
Suggested change
errorOverlay.innerHTML= `
<divclass="typst-error-content">
<divclass="typst-error-header">
<spanclass="typst-error-title">⚠️ Typst Error</span>
<buttonclass="typst-error-close"title="Dismiss error">×</button>
</div>
<divclass="typst-error-message">${errorText}</div>
</div>
`;
// Add close button functionality
constcloseBtn=errorOverlay.querySelector('.typst-error-close');
closeBtn.addEventListener('click',()=>{
errorOverlay.remove();
});
previewContainer.appendChild(errorOverlay);
}else{
// Fallback: show error in preview container directly
container.innerHTML=`<div class="typst-error">${errorText}</div>`;
// Static HTML structure; dynamic error text is set safely via textContent
errorOverlay.innerHTML= `
<divclass="typst-error-content">
<divclass="typst-error-header">
<spanclass="typst-error-title">⚠️ Typst Error</span>
<buttonclass="typst-error-close"title="Dismiss error">×</button>
</div>
<divclass="typst-error-message"></div>
</div>
`;
// Set error message text safely
constmessageEl=errorOverlay.querySelector('.typst-error-message');
if(messageEl){
messageEl.textContent=errorText;
}
// Add close button functionality
constcloseBtn=errorOverlay.querySelector('.typst-error-close');
if(closeBtn){
closeBtn.addEventListener('click',()=>{
errorOverlay.remove();
});
}
previewContainer.appendChild(errorOverlay);
}else{
// Fallback: show error in preview container directly
// Clear previous content and insert error text safely
container.innerHTML='';
consterrorDiv=document.createElement('div');
errorDiv.className='typst-error';
errorDiv.textContent=errorText;
container.appendChild(errorDiv);

Copilot · 2026-01-07T22:43:23Z

+ lc = 0;
+ li = lc = ebits = 0;


The value assigned to lc here is unused.
Suggested change
lc=0;
li=lc=ebits=0;
li=ebits=0;

Copilot · 2026-01-07T22:43:24Z

+ pos = _writeBlock(1, lits, li, ebits, data, bs, i - bs, out, pos);
+ li = 0;
+ lc = 0;
+ li = lc = ebits = 0;


The value assigned to ebits here is unused.
Suggested change
li=lc=ebits=0;
li=lc=0;

Copilot · 2026-01-07T22:43:24Z

+ li = 0;
+ lc = 0;
+ li = lc = ebits = 0;
+ bs = i;


The value assigned to bs here is unused.
Suggested change
bs = i;

Copilot · 2026-01-07T22:43:24Z

+ greedy: true,
+ },
+ url: {
+ pattern: /https?\:\/\/[\w.\/\-@:%._\+~#=]*[\w\/]/,


Character '.' is repeated in the same character class.
Suggested change
pattern: /https?\:\/\/[\w.\/\-@:%._\+~#=]*[\w\/]/,
pattern: /https?\:\/\/[\w\/\-@:%._\+~#=]*[\w\/]/,

Copilot · 2026-01-07T22:43:25Z

+ pos = _writeLit(l, tree, out, pos);
+ var rsl = l == 16 ? 2 : l == 17 ? 3 : 7;
+ if (l > 15) {
+ _putsE(out, pos, rst, rsl);


Superfluous argument passed to function _putsE.

mikebarkmin added 5 commits January 6, 2026 20:24

initial typst implementation
9591c8c

add typst to the store
7ca394f

add prism typst
7eb7bac

add multi file support to the editor
53cd97f

update snapshots for 2026 TODO mock the date
7839633

mikebarkmin requested a review from Copilot January 7, 2026 22:37

Copilotstarted reviewing on behalf of mikebarkmin January 7, 2026 22:38 View session

CopilotAI reviewed Jan 7, 2026
View reviewed changes

mikebarkmin merged commit 66a7234 into mainJan 7, 2026
9 checks passed

mikebarkmin deleted the typst branch January 7, 2026 22:45

github-actionsBot mentioned this pull request Jan 7, 2026
Version Packages #1064
Merged

Navigation Menu

Uh oh!

Uh oh!

Typst - #1063

Typst#1063
mikebarkmin merged 5 commits into
mainfrom
typst

mikebarkmin commented Jan 7, 2026

Uh oh!

vercelBot commented Jan 7, 2026

Uh oh!

CopilotAI left a comment

Uh oh!

CopilotAIJan 7, 2026

Uh oh!

CopilotAIJan 7, 2026

Uh oh!

CopilotAIJan 7, 2026

Uh oh!

CopilotAIJan 7, 2026

Uh oh!

CopilotAIJan 7, 2026

Uh oh!

CopilotAIJan 7, 2026

Uh oh!

CopilotAIJan 7, 2026

Uh oh!

CopilotAIJan 7, 2026

Uh oh!

CopilotAIJan 7, 2026

Uh oh!

CopilotAIJan 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

+// Attach a catch handler to avoid unhandled promise rejections
+typstLoadPromise.catch((error)=>{
+console.error("Failed to load Typst:",error);
+});

-errorOverlay.innerHTML= `
-<divclass="typst-error-content">
-<divclass="typst-error-header">
-<spanclass="typst-error-title">⚠️ Typst Error</span>
-<buttonclass="typst-error-close"title="Dismiss error">×</button>
-</div>
-<divclass="typst-error-message">${errorText}</div>
-</div>
- `;
-// Add close button functionality
-constcloseBtn=errorOverlay.querySelector('.typst-error-close');
-closeBtn.addEventListener('click',()=>{
-errorOverlay.remove();
-});
-previewContainer.appendChild(errorOverlay);
-}else{
-// Fallback: show error in preview container directly
-container.innerHTML=`<div class="typst-error">${errorText}</div>`;
+// Static HTML structure; dynamic error text is set safely via textContent
+errorOverlay.innerHTML= `
+<divclass="typst-error-content">
+<divclass="typst-error-header">
+<spanclass="typst-error-title">⚠️ Typst Error</span>
+<buttonclass="typst-error-close"title="Dismiss error">×</button>
+</div>
+<divclass="typst-error-message"></div>
+</div>
+ `;
+// Set error message text safely
+constmessageEl=errorOverlay.querySelector('.typst-error-message');
+if(messageEl){
+messageEl.textContent=errorText;
+}
+// Add close button functionality
+constcloseBtn=errorOverlay.querySelector('.typst-error-close');
+if(closeBtn){
+closeBtn.addEventListener('click',()=>{
+errorOverlay.remove();
+});
+}
+previewContainer.appendChild(errorOverlay);
+}else{
+// Fallback: show error in preview container directly
+// Clear previous content and insert error text safely
+container.innerHTML='';
+consterrorDiv=document.createElement('div');
+errorDiv.className='typst-error';
+errorDiv.textContent=errorText;
+container.appendChild(errorDiv);

	pattern: /https?\:\/\/[\w.\/\-@:%._\+~#=]*[\w\/]/,
	pattern: /https?\:\/\/[\w\/\-@:%._\+~#=]*[\w\/]/,

Uh oh!

Uh oh!

Conversation

mikebarkmin commented Jan 7, 2026

Uh oh!

vercelBot commented Jan 7, 2026

Uh oh!

CopilotAI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

CopilotAIJan 7, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAIJan 7, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAIJan 7, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAIJan 7, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAIJan 7, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAIJan 7, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAIJan 7, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAIJan 7, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAIJan 7, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAIJan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants