PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix fonts in vscode extension

Browse source
This commit is contained in:
Steve Ruiz 2022-05-11 16:58:40 +01:00
parent 4b2b14eb26
commit 6bb5faeaf0
6 changed files with 31 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/vscode/editor/src/app.tsx
View file

@ -8,6 +8,7 @@ import { vscode } from './utils/vscode'
// Will be placed in global scope by extension // Will be placed in global scope by extension
declare let currentFile: TDFile declare let currentFile: TDFile
declare let assetSrc: string
const App: React.FC = () => { const App: React.FC = () => {
const rLoaded = React.useRef(false) const rLoaded = React.useRef(false)
@ -18,6 +19,7 @@ const App: React.FC = () => {
// When the editor mounts, save the state instance in a ref. // When the editor mounts, save the state instance in a ref.
const handleMount = React.useCallback((app: TldrawApp) => { const handleMount = React.useCallback((app: TldrawApp) => {
TldrawApp.assetSrc = assetSrc ?? 'tldraw-assets.json'
rTldrawApp.current = app rTldrawApp.current = app
}, []) }, [])

1
apps/vscode/extension/scripts/build.js
View file

@ -21,6 +21,7 @@ async function main() {
bundle: true, bundle: true,
format: 'cjs', format: 'cjs',
target: 'es6', target: 'es6',
platform: 'node',
define: { define: {
'process.env.NODE_ENV': '"production"', 'process.env.NODE_ENV': '"production"',
}, },

1
apps/vscode/extension/scripts/dev.js
View file

@ -22,6 +22,7 @@ async function main() {
format: 'cjs', format: 'cjs',
target: 'es6', target: 'es6',
sourcemap: 'inline', sourcemap: 'inline',
platform: 'node',
define: { define: {
'process.env.NODE_ENV': '"development"', 'process.env.NODE_ENV': '"development"',
}, },

5
apps/vscode/extension/src/TldrawEditorProvider.ts
View file

@ -1,4 +1,5 @@
import * as vscode from 'vscode' import * as vscode from 'vscode'
import * as path from 'path'
import { TldrawWebviewManager } from './TldrawWebviewManager' import { TldrawWebviewManager } from './TldrawWebviewManager'
/** /**
@ -43,7 +44,9 @@ export class TldrawEditorProvider implements vscode.CustomTextEditorProvider {
this.viewType, this.viewType,
new TldrawEditorProvider(context), new TldrawEditorProvider(context),
{ {
webviewOptions: { retainContextWhenHidden: true }, webviewOptions: {
retainContextWhenHidden: true,
},
supportsMultipleEditorsPerDocument: true, supportsMultipleEditorsPerDocument: true,
} }
) )

26
apps/vscode/extension/src/TldrawWebviewManager.ts
View file

@ -1,6 +1,7 @@
import * as vscode from 'vscode' import * as vscode from 'vscode'
import { TDFile } from '@tldraw/tldraw' import { TDFile } from '@tldraw/tldraw'
import { MessageFromWebview, MessageFromExtension } from './types' import { MessageFromWebview, MessageFromExtension } from './types'
import * as path from 'path'
/** /**
* When a new editor is opened, an instance of this class will * When a new editor is opened, an instance of this class will
@ -120,8 +121,12 @@ export class TldrawWebviewManager {
const { document, context, webviewPanel } = this const { document, context, webviewPanel } = this
let documentContent: string 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 { try {
JSON.parse(document.getText()) JSON.parse(document.getText())
@ -135,16 +140,16 @@ export class TldrawWebviewManager {
} }
if (process.env.NODE_ENV === 'production') { if (process.env.NODE_ENV === 'production') {
cssUrl = webviewPanel.webview.asWebviewUri( cssSrc = webviewPanel.webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, 'editor/', 'index.css') vscode.Uri.joinPath(context.extensionUri, 'editor/', 'index.css')
) )
jsUrl = webviewPanel.webview.asWebviewUri( jsSrc = webviewPanel.webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, 'editor/', 'index.js') vscode.Uri.joinPath(context.extensionUri, 'editor/', 'index.js')
) )
} else { } else {
const localhost = 'http://localhost:5420/' const localhost = 'http://localhost:5420/'
cssUrl = `${localhost}index.css` cssSrc = `${localhost}index.css`
jsUrl = `${localhost}index.js` jsSrc = `${localhost}index.js`
} }
return ` return `
@ -152,15 +157,18 @@ export class TldrawWebviewManager {
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="stylesheet" href="${cssUrl}" /> <link rel="stylesheet" href="${cssSrc}" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>tldraw</title> <title>tldraw</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<script>var currentFile = ${documentContent};</script> <script>
<script src="${jsUrl}"></script> var currentFile = ${documentContent};
var assetSrc = "${assetSrc}";
</script>
<script src="${jsSrc}"></script>
</body> </body>
</html> </html>
` `

11
packages/tldraw/src/state/TldrawApp.ts
View file

@ -2054,17 +2054,16 @@ export class TldrawApp extends StateManager<TDSnapshot> {
): Promise<SVGElement | undefined> => { ): Promise<SVGElement | undefined> => {
if (ids.length === 0) return if (ids.length === 0) return
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
// Embed our custom fonts // 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 defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')
const style = document.createElementNS('http://www.w3.org/2000/svg', 'style') 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) { if (opts.includeFonts) {
try { 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 = ` style.textContent = `
@font-face { @font-face {
@ -4086,4 +4085,6 @@ export class TldrawApp extends StateManager<TDSnapshot> {
}, },
document: TldrawApp.defaultDocument, document: TldrawApp.defaultDocument,
} }
static assetSrc = 'tldraw-assets.json'
} }