steveruizok

import { useEffect, useState } from 'react'

export type TLTypeFace = {
	url: string
	display?: any // FontDisplay
	featureSettings?: string
	stretch?: string
	style?: string
	unicodeRange?: string
	variant?: string

steveruizok

/**
 * Get a point along an arc.
 *
 * @param center - The arc's center.
 * @param radius - The arc's radius.
 * @param startAngle - The start point of the arc.
 * @param size - The size of the arc.
 * @param t - The point along the arc to get.
 */

steveruizok

function getTextBoundingBox(text: SVGTextElement) {
	const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
	svg.appendChild(text)

	document.body.appendChild(svg)
	const bbox = text.getBoundingClientRect()
	document.body.removeChild(svg)

	return bbox
}

steveruizok

// =========================
// Modified code originally from <https://github.com/qzb/is-animated>
//
// # [MIT License](https://spdx.org/licenses/MIT)
//
// Copyright (c) 2016 Józef Sokołowski <[email protected]>
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

steveruizok

import '@tldraw/tldraw/tldraw.css'
import { RecordsDiff, TLRecord, Tldraw, useEditor } from '@tldraw/tldraw'
import { useEffect, useRef } from 'react'

export default function App() {
	return (
		<div className="tldraw__editor">
			<Tldraw autoFocus>
				<Slider />
			</Tldraw>

steveruizok

const serializableTypes = new Set(['string', 'number', 'boolean', 'undefined'])

/**
 * Get whether a value is serializable.
 *
 * @example
 *
 * ```ts
 * const A = isSerializable(1) // true

steveruizok

import { Node, mergeAttributes } from "@tiptap/core";
import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
import { Tldraw } from "@tldraw/tldraw"; // use @tldraw/tldraw@canary
import "@tldraw/tldraw/tldraw.css";

function Component() {
  return (
    <NodeViewWrapper className="react-component">
      <div style={{ width: "100%", height: 500 }}>
        <Tldraw />

steveruizok

export async function writeV1ContentsToIdb() {
	// openDB is a wrapper around indexedDB.open that adds a version migration hook, but we've had to drop it as a dependency. Here it is quicky re-implemented:

	function openDB(name: string, version: number) {
		const request = indexedDB.open(name, version)
		return new Promise<IDBDatabase>((resolve, reject) => {
			request.onerror = () => reject(request.error)
			request.onsuccess = () => resolve(request.result)
			request.onupgradeneeded = () => {
				const db = request.result

steveruizok

{
  "action.convert-to-bookmark": "Convert to Bookmark",
  "action.convert-to-embed": "Convert to Embed",
  "action.open-embed-link": "Open link",
  "action.align-bottom": "Align bottom",
  "action.align-center-horizontal": "Align horizontally",
  "action.align-center-vertical": "Align vertically",
  "action.align-center-horizontal.short": "Align H",
  "action.align-center-vertical.short": "Align V",
  "action.align-left": "Align left",

steveruizok

type EmbedDefinition = {
	type: string
	title: string
	hostnames: string[]
	minWidth?: number
	minHeight?: number
	width: number
	height: number
	doesResize: boolean
	isAspectRatioLocked?: boolean