fix: make html semantics layer works in react and angular

Myriad-Dreamin · Jul 15, 2024 · 6324c71 · 6324c71
1 parent 445b59e
commit 6324c71
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 3 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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>
   );