Fix fonts in vscode extension
This commit is contained in:
Steve Ruiz
parent
4b2b14eb26
commit
6bb5faeaf0
6 changed files with 31 additions and 15 deletions
|
|
@ -8,6 +8,7 @@ import { vscode } from './utils/vscode'
|
|||
|
||||
// Will be placed in global scope by extension
|
||||
declare let currentFile: TDFile
|
||||
declare let assetSrc: string
|
||||
|
||||
const App: React.FC = () => {
|
||||
const rLoaded = React.useRef(false)
|
||||
|
|
@ -18,6 +19,7 @@ const App: React.FC = () => {
|
|||
|
||||
// When the editor mounts, save the state instance in a ref.
|
||||
const handleMount = React.useCallback((app: TldrawApp) => {
|
||||
TldrawApp.assetSrc = assetSrc ?? 'tldraw-assets.json'
|
||||
rTldrawApp.current = app
|
||||
}, [])
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ async function main() {
|
|||
bundle: true,
|
||||
format: 'cjs',
|
||||
target: 'es6',
|
||||
platform: 'node',
|
||||
define: {
|
||||
'process.env.NODE_ENV': '"production"',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ async function main() {
|
|||
format: 'cjs',
|
||||
target: 'es6',
|
||||
sourcemap: 'inline',
|
||||
platform: 'node',
|
||||
define: {
|
||||
'process.env.NODE_ENV': '"development"',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import * as vscode from 'vscode'
|
||||
import * as path from 'path'
|
||||
import { TldrawWebviewManager } from './TldrawWebviewManager'
|
||||
|
||||
/**
|
||||
|
|
@ -43,7 +44,9 @@ export class TldrawEditorProvider implements vscode.CustomTextEditorProvider {
|
|||
this.viewType,
|
||||
new TldrawEditorProvider(context),
|
||||
{
|
||||
webviewOptions: { retainContextWhenHidden: true },
|
||||
webviewOptions: {
|
||||
retainContextWhenHidden: true,
|
||||
},
|
||||
supportsMultipleEditorsPerDocument: true,
|
||||
}
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import * as vscode from 'vscode'
|
||||
import { TDFile } from '@tldraw/tldraw'
|
||||
import { MessageFromWebview, MessageFromExtension } from './types'
|
||||
import * as path from 'path'
|
||||
|
||||
/**
|
||||
* When a new editor is opened, an instance of this class will
|
||||
|
|
@ -120,8 +121,12 @@ export class TldrawWebviewManager {
|
|||
const { document, context, webviewPanel } = this
|
||||
|
||||
let documentContent: string
|
||||
let cssUrl: string | vscode.Uri
|
||||
let jsUrl: string | vscode.Uri
|
||||
|
||||
let cssSrc: string | vscode.Uri
|
||||
let jsSrc: string | vscode.Uri
|
||||
const assetSrc = webviewPanel.webview.asWebviewUri(
|
||||
vscode.Uri.joinPath(context.extensionUri, 'editor/', 'tldraw-assets.json')
|
||||
)
|
||||
|
||||
try {
|
||||
JSON.parse(document.getText())
|
||||
|
|
@ -135,16 +140,16 @@ export class TldrawWebviewManager {
|
|||
}
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
cssUrl = webviewPanel.webview.asWebviewUri(
|
||||
cssSrc = webviewPanel.webview.asWebviewUri(
|
||||
vscode.Uri.joinPath(context.extensionUri, 'editor/', 'index.css')
|
||||
)
|
||||
jsUrl = webviewPanel.webview.asWebviewUri(
|
||||
jsSrc = webviewPanel.webview.asWebviewUri(
|
||||
vscode.Uri.joinPath(context.extensionUri, 'editor/', 'index.js')
|
||||
)
|
||||
} else {
|
||||
const localhost = 'http://localhost:5420/'
|
||||
cssUrl = `${localhost}index.css`
|
||||
jsUrl = `${localhost}index.js`
|
||||
cssSrc = `${localhost}index.css`
|
||||
jsSrc = `${localhost}index.js`
|
||||
}
|
||||
|
||||
return `
|
||||
|
|
@ -152,15 +157,18 @@ export class TldrawWebviewManager {
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="${cssUrl}" />
|
||||
<link rel="stylesheet" href="${cssSrc}" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>tldraw</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<script>var currentFile = ${documentContent};</script>
|
||||
<script src="${jsUrl}"></script>
|
||||
<script>
|
||||
var currentFile = ${documentContent};
|
||||
var assetSrc = "${assetSrc}";
|
||||
</script>
|
||||
<script src="${jsSrc}"></script>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -2054,17 +2054,16 @@ export class TldrawApp extends StateManager<TDSnapshot> {
|
|||
): Promise<SVGElement | undefined> => {
|
||||
if (ids.length === 0) return
|
||||
|
||||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
|
||||
|
||||
// Embed our custom fonts
|
||||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
|
||||
const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')
|
||||
const style = document.createElementNS('http://www.w3.org/2000/svg', 'style')
|
||||
// style.type = 'text/css'
|
||||
// style.textContent = stylesheet.innerHTML.toString() + '\n' + customFonts.innerHTML.toString() // `@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Source+Code+Pro&family=Source+Sans+Pro&family=Crimson+Pro&display=block');`
|
||||
|
||||
window.focus() // weird but necessary
|
||||
|
||||
if (opts.includeFonts) {
|
||||
try {
|
||||
const { fonts } = await fetch('tldraw-assets.json').then((d) => d.json())
|
||||
const { fonts } = await fetch(TldrawApp.assetSrc, { mode: 'no-cors' }).then((d) => d.json())
|
||||
|
||||
style.textContent = `
|
||||
@font-face {
|
||||
|
|
@ -4086,4 +4085,6 @@ export class TldrawApp extends StateManager<TDSnapshot> {
|
|||
},
|
||||
document: TldrawApp.defaultDocument,
|
||||
}
|
||||
|
||||
static assetSrc = 'tldraw-assets.json'
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue