From 6324c71b3b11ce933505bc92d08365aa19d64d3f Mon Sep 17 00:00:00 2001
From: Myriad-Dreamin <camiyoru@gmail.com>
Date: Tue, 16 Jul 2024 06:24:08 +0800
Subject: [PATCH] fix: make html semantics layer works in react and angular

---
 .../src/lib/typst.document.component.css      | 63 +++++++++++++++++
 .../src/lib/typst.document.component.ts       |  2 +-
 packages/typst.react/README.md                |  2 +-
 .../typst.react/src/lib/TypstDocument.tsx     | 69 ++++++++++++++++++-
 4 files changed, 133 insertions(+), 3 deletions(-)
 create mode 100644 packages/typst.angular/projects/typst.angular/src/lib/typst.document.component.css

diff --git a/packages/typst.angular/projects/typst.angular/src/lib/typst.document.component.css b/packages/typst.angular/projects/typst.angular/src/lib/typst.document.component.css
new file mode 100644
index 000000000..3ac406297
--- /dev/null
+++ b/packages/typst.angular/projects/typst.angular/src/lib/typst.document.component.css
@@ -0,0 +1,63 @@
+:host ::ng-deep .typst-html-semantics {
+  position: absolute;
+  z-index: 2;
+  color: transparent;
+  font-family: monospace;
+  white-space: pre;
+}
+
+:host ::ng-deep .typst-html-semantics span {
+  transform-origin: left top;
+  position: absolute;
+  display: inline-block;
+  left: 0;
+  top: 0;
+}
+
+:host ::ng-deep .typst-content-hint {
+  position: absolute;
+  display: inline-block;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+:host ::ng-deep .typst-html-semantics a {
+  position: absolute;
+  display: inline-block;
+}
+
+/* set transparent itself */
+:host ::ng-deep .typst-content-group {
+  pointer-events: visible;
+}
+
+:host ::ng-deep .typst-html-semantics span::-moz-selection {
+  color: transparent;
+  background: #7db9dea0;
+}
+
+:host ::ng-deep .typst-html-semantics span::selection {
+  color: transparent;
+  background: #7db9dea0;
+}
+
+:host ::ng-deep .typst-html-semantics *::-moz-selection {
+  color: transparent;
+  background: transparent;
+}
+
+:host ::ng-deep .typst-html-semantics *::selection {
+  color: transparent;
+  background: transparent;
+}
+
+:host ::ng-deep .typst-content-fallback {
+  color: transparent;
+  background: transparent;
+}
+
+:host ::ng-deep .pseudo-link,
+:host ::ng-deep .typst-text {
+  pointer-events: none;
+}
diff --git a/packages/typst.angular/projects/typst.angular/src/lib/typst.document.component.ts b/packages/typst.angular/projects/typst.angular/src/lib/typst.document.component.ts
index cf1719bfd..a20c2ef2a 100644
--- a/packages/typst.angular/projects/typst.angular/src/lib/typst.document.component.ts
+++ b/packages/typst.angular/projects/typst.angular/src/lib/typst.document.component.ts
@@ -10,7 +10,7 @@ let moduleInitOptions: typst.InitOptions = {
 @Component({
   selector: 'typst-document',
   templateUrl: `./typst.document.component.html`,
-  styles: [],
+  styleUrls: [`./typst.document.component.css`],
 })
 export class TypstDocumentComponent {
   _artifact: Uint8Array = new Uint8Array(0);
diff --git a/packages/typst.react/README.md b/packages/typst.react/README.md
index f05a01f66..e6a0ba1f0 100644
--- a/packages/typst.react/README.md
+++ b/packages/typst.react/README.md
@@ -5,7 +5,7 @@
 ```typescript
 import { TypstDocument } from '@myriaddreamin/typst.react';
 
-export const App = (artifact: string) => {
+export const App = (artifact: Uint8Array) => {
   return (
     <div>
       <h1>Demo: Embed Your Typst Document in React</h1>
diff --git a/packages/typst.react/src/lib/TypstDocument.tsx b/packages/typst.react/src/lib/TypstDocument.tsx
index 85a3ba428..24262f367 100644
--- a/packages/typst.react/src/lib/TypstDocument.tsx
+++ b/packages/typst.react/src/lib/TypstDocument.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { withGlobalRenderer } from '@myriaddreamin/typst.ts/dist/esm/contrib/global-renderer.mjs';
 import * as typst from '@myriaddreamin/typst.ts';
 
@@ -7,6 +7,71 @@ import * as typst from '@myriaddreamin/typst.ts';
 //   return undefined;
 // };
 
+const htmlLayerCss = `
+.typst-html-semantics {
+  position: absolute;
+  z-index: 2;
+  color: transparent;
+  font-family: monospace;
+  white-space: pre;
+}
+
+.typst-html-semantics span {
+  transform-origin: left top;
+  position: absolute;
+  display: inline-block;
+  left: 0;
+  top: 0;
+}
+
+.typst-content-hint {
+  position: absolute;
+  display: inline-block;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.typst-html-semantics a {
+  position: absolute;
+  display: inline-block;
+}
+
+/* set transparent itself */
+.typst-content-group {
+  pointer-events: visible;
+}
+
+.typst-html-semantics span::-moz-selection {
+  color: transparent;
+  background: #7db9dea0;
+}
+
+.typst-html-semantics span::selection {
+  color: transparent;
+  background: #7db9dea0;
+}
+
+.typst-html-semantics *::-moz-selection {
+  color: transparent;
+  background: transparent;
+}
+
+.typst-html-semantics *::selection {
+  color: transparent;
+  background: transparent;
+}
+
+.typst-content-fallback {
+  color: transparent;
+  background: transparent;
+}
+
+.pseudo-link,
+.typst-text {
+  pointer-events: none;
+}`;
+
 export interface TypstDocumentProps {
   fill?: string;
   artifact: Uint8Array;
@@ -88,6 +153,8 @@ export const TypstDocument = ({ fill, artifact, format }: TypstDocumentProps) =>
 
   return (
     <div>
+      {/* todo: remove this embedded css */}
+      <style>{htmlLayerCss}</style>
       <div className="typst-app" style={{ height: '0' }} ref={displayDivRef}></div>
     </div>
   );