tldraw 4.2.0-next.47462e908ff5 → 4.2.0-next.67908ea044c6

package/dist-esm/lib/utils/text/richText.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/utils/text/richText.ts"],
-  "sourcesContent": ["import {\n\tExtension,\n\tExtensions,\n\tgenerateHTML,\n\tgenerateJSON,\n\tgenerateText,\n\tJSONContent,\n} from '@tiptap/core'\nimport Code from '@tiptap/extension-code'\nimport Highlight from '@tiptap/extension-highlight'\nimport Link from '@tiptap/extension-link'\nimport { Node } from '@tiptap/pm/model'\nimport StarterKit from '@tiptap/starter-kit'\nimport {\n\tEditor,\n\tgetOwnProperty,\n\tRichTextFontVisitorState,\n\tTLFontFace,\n\tTLRichText,\n\tWeakCache,\n} from '@tldraw/editor'\nimport { DefaultFontFaces } from '../../shapes/shared/defaultFonts'\nimport { TextDirection } from './textDirection'\n\n/** @public */\nexport const KeyboardShiftEnterTweakExtension = Extension.create({\n\tname: 'keyboardShiftEnterHandler',\n\taddKeyboardShortcuts() {\n\t\treturn {\n\t\t\t// We don't support soft breaks, so we just use the default enter command.\n\t\t\t'Shift-Enter': ({ editor }) => editor.commands.enter(),\n\t\t}\n\t},\n})\n\n// We change the default Code to override what's in the StarterKit.\n// It allows for other attributes/extensions.\nCode.config.excludes = undefined\n\n// We want the highlighting to take precedence over bolding/italics/links\n// as far as rendering is concerned. Otherwise, the highlighting\n// looks broken up.\nHighlight.config.priority = 1100\n\n/**\n * Default extensions for the TipTap editor.\n *\n * @public\n */\nexport const tipTapDefaultExtensions: Extensions = [\n\tStarterKit.configure({\n\t\tblockquote: false,\n\t\tcodeBlock: false,\n\t\thorizontalRule: false,\n\t}),\n\tLink.configure({\n\t\topenOnClick: false,\n\t\tautolink: true,\n\t}),\n\tHighlight,\n\tKeyboardShiftEnterTweakExtension,\n\tTextDirection,\n]\n\n// todo: bust this if the editor changes, too\nconst htmlCache = new WeakCache<TLRichText, string>()\n\n/**\n * Renders HTML from a rich text string.\n *\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n * @public\n */\nexport function renderHtmlFromRichText(editor: Editor, richText: TLRichText) {\n\treturn htmlCache.get(richText, () => {\n\t\tconst tipTapExtensions =\n\t\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\t\tconst html = generateHTML(richText as JSONContent, tipTapExtensions)\n\t\t// We replace empty paragraphs with a single line break to prevent the browser from collapsing them.\n\t\treturn html.replaceAll('<p dir=\"auto\"></p>', '<p><br /></p>') ?? ''\n\t})\n}\n\n/**\n * Renders HTML from a rich text string for measurement.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n *\n * @public\n */\nexport function renderHtmlFromRichTextForMeasurement(editor: Editor, richText: TLRichText) {\n\tconst html = renderHtmlFromRichText(editor, richText)\n\treturn `<div class=\"tl-rich-text\">${html}</div>`\n}\n\n// A weak cache used to store plaintext that's been extracted from rich text.\nconst plainTextFromRichTextCache = new WeakCache<TLRichText, string>()\n\nexport function isEmptyRichText(richText: TLRichText) {\n\tif (richText.content.length === 1) {\n\t\tif (!(richText.content[0] as any).content) return true\n\t}\n\treturn false\n}\n\n/**\n * Renders plaintext from a rich text string.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n *\n * @public\n */\nexport function renderPlaintextFromRichText(editor: Editor, richText: TLRichText) {\n\tif (isEmptyRichText(richText)) return ''\n\n\treturn plainTextFromRichTextCache.get(richText, () => {\n\t\tconst tipTapExtensions =\n\t\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\t\treturn generateText(richText as JSONContent, tipTapExtensions, {\n\t\t\tblockSeparator: '\\n',\n\t\t})\n\t})\n}\n\n/**\n * Renders JSONContent from html.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n *\n * @public\n */\nexport function renderRichTextFromHTML(editor: Editor, html: string): TLRichText {\n\tconst tipTapExtensions =\n\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\treturn generateJSON(html, tipTapExtensions) as TLRichText\n}\n\n/** @public */\nexport function defaultAddFontsFromNode(\n\tnode: Node,\n\tstate: RichTextFontVisitorState,\n\taddFont: (font: TLFontFace) => void\n) {\n\tfor (const mark of node.marks) {\n\t\tif (mark.type.name === 'bold' && state.weight !== 'bold') {\n\t\t\tstate = { ...state, weight: 'bold' }\n\t\t}\n\t\tif (mark.type.name === 'italic' && state.style !== 'italic') {\n\t\t\tstate = { ...state, style: 'italic' }\n\t\t}\n\t\tif (mark.type.name === 'code' && state.family !== 'tldraw_mono') {\n\t\t\tstate = { ...state, family: 'tldraw_mono' }\n\t\t}\n\t}\n\n\tconst fontsForFamily = getOwnProperty(DefaultFontFaces, state.family)\n\tif (!fontsForFamily) return state\n\n\tconst fontsForStyle = getOwnProperty(fontsForFamily, state.style)\n\tif (!fontsForStyle) return state\n\n\tconst fontsForWeight = getOwnProperty(fontsForStyle, state.weight)\n\tif (!fontsForWeight) return state\n\n\taddFont(fontsForWeight)\n\n\treturn state\n}\n"],
-  "mappings": "AAAA;AAAA,EACC;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OAEM;AACP,OAAO,UAAU;AACjB,OAAO,eAAe;AACtB,OAAO,UAAU;AAEjB,OAAO,gBAAgB;AACvB;AAAA,EAEC;AAAA,EAIA;AAAA,OACM;AACP,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAGvB,MAAM,mCAAmC,UAAU,OAAO;AAAA,EAChE,MAAM;AAAA,EACN,uBAAuB;AACtB,WAAO;AAAA;AAAA,MAEN,eAAe,CAAC,EAAE,OAAO,MAAM,OAAO,SAAS,MAAM;AAAA,IACtD;AAAA,EACD;AACD,CAAC;AAID,KAAK,OAAO,WAAW;AAKvB,UAAU,OAAO,WAAW;AAOrB,MAAM,0BAAsC;AAAA,EAClD,WAAW,UAAU;AAAA,IACpB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,gBAAgB;AAAA,EACjB,CAAC;AAAA,EACD,KAAK,UAAU;AAAA,IACd,aAAa;AAAA,IACb,UAAU;AAAA,EACX,CAAC;AAAA,EACD;AAAA,EACA;AAAA,EACA;AACD;AAGA,MAAM,YAAY,IAAI,UAA8B;AAU7C,SAAS,uBAAuB,QAAgB,UAAsB;AAC5E,SAAO,UAAU,IAAI,UAAU,MAAM;AACpC,UAAM,mBACL,OAAO,eAAe,EAAE,cAAc,cAAc;AACrD,UAAM,OAAO,aAAa,UAAyB,gBAAgB;AAEnE,WAAO,KAAK,WAAW,sBAAsB,eAAe,KAAK;AAAA,EAClE,CAAC;AACF;AAUO,SAAS,qCAAqC,QAAgB,UAAsB;AAC1F,QAAM,OAAO,uBAAuB,QAAQ,QAAQ;AACpD,SAAO,6BAA6B,IAAI;AACzC;AAGA,MAAM,6BAA6B,IAAI,UAA8B;AAE9D,SAAS,gBAAgB,UAAsB;AACrD,MAAI,SAAS,QAAQ,WAAW,GAAG;AAClC,QAAI,CAAE,SAAS,QAAQ,CAAC,EAAU,QAAS,QAAO;AAAA,EACnD;AACA,SAAO;AACR;AAUO,SAAS,4BAA4B,QAAgB,UAAsB;AACjF,MAAI,gBAAgB,QAAQ,EAAG,QAAO;AAEtC,SAAO,2BAA2B,IAAI,UAAU,MAAM;AACrD,UAAM,mBACL,OAAO,eAAe,EAAE,cAAc,cAAc;AACrD,WAAO,aAAa,UAAyB,kBAAkB;AAAA,MAC9D,gBAAgB;AAAA,IACjB,CAAC;AAAA,EACF,CAAC;AACF;AAUO,SAAS,uBAAuB,QAAgB,MAA0B;AAChF,QAAM,mBACL,OAAO,eAAe,EAAE,cAAc,cAAc;AACrD,SAAO,aAAa,MAAM,gBAAgB;AAC3C;AAGO,SAAS,wBACf,MACA,OACA,SACC;AACD,aAAW,QAAQ,KAAK,OAAO;AAC9B,QAAI,KAAK,KAAK,SAAS,UAAU,MAAM,WAAW,QAAQ;AACzD,cAAQ,EAAE,GAAG,OAAO,QAAQ,OAAO;AAAA,IACpC;AACA,QAAI,KAAK,KAAK,SAAS,YAAY,MAAM,UAAU,UAAU;AAC5D,cAAQ,EAAE,GAAG,OAAO,OAAO,SAAS;AAAA,IACrC;AACA,QAAI,KAAK,KAAK,SAAS,UAAU,MAAM,WAAW,eAAe;AAChE,cAAQ,EAAE,GAAG,OAAO,QAAQ,cAAc;AAAA,IAC3C;AAAA,EACD;AAEA,QAAM,iBAAiB,eAAe,kBAAkB,MAAM,MAAM;AACpE,MAAI,CAAC,eAAgB,QAAO;AAE5B,QAAM,gBAAgB,eAAe,gBAAgB,MAAM,KAAK;AAChE,MAAI,CAAC,cAAe,QAAO;AAE3B,QAAM,iBAAiB,eAAe,eAAe,MAAM,MAAM;AACjE,MAAI,CAAC,eAAgB,QAAO;AAE5B,UAAQ,cAAc;AAEtB,SAAO;AACR;",
+  "sourcesContent": ["import {\n\tExtension,\n\tExtensions,\n\tgenerateHTML,\n\tgenerateJSON,\n\tgenerateText,\n\tJSONContent,\n} from '@tiptap/core'\nimport Code from '@tiptap/extension-code'\nimport Highlight from '@tiptap/extension-highlight'\nimport { Node } from '@tiptap/pm/model'\nimport StarterKit from '@tiptap/starter-kit'\nimport {\n\tEditor,\n\tgetOwnProperty,\n\tRichTextFontVisitorState,\n\tTLFontFace,\n\tTLRichText,\n\tWeakCache,\n} from '@tldraw/editor'\nimport { DefaultFontFaces } from '../../shapes/shared/defaultFonts'\nimport { TextDirection } from './textDirection'\n\n/** @public */\nexport const KeyboardShiftEnterTweakExtension = Extension.create({\n\tname: 'keyboardShiftEnterHandler',\n\taddKeyboardShortcuts() {\n\t\treturn {\n\t\t\t// We don't support soft breaks, so we just use the default enter command.\n\t\t\t'Shift-Enter': ({ editor }) => editor.commands.enter(),\n\t\t}\n\t},\n})\n\n// We change the default Code to override what's in the StarterKit.\n// It allows for other attributes/extensions.\n// @ts-ignore this is fine.\nCode.config.excludes = undefined\n\n// We want the highlighting to take precedence over bolding/italics/links\n// as far as rendering is concerned. Otherwise, the highlighting\n// looks broken up.\nHighlight.config.priority = 1100\n\n/**\n * Default extensions for the TipTap editor.\n *\n * @public\n */\nexport const tipTapDefaultExtensions: Extensions = [\n\tStarterKit.configure({\n\t\tblockquote: false,\n\t\tcodeBlock: false,\n\t\thorizontalRule: false,\n\t\tlink: {\n\t\t\topenOnClick: false,\n\t\t\tautolink: true,\n\t\t},\n\t}),\n\tHighlight,\n\tKeyboardShiftEnterTweakExtension,\n\tTextDirection,\n]\n\n// todo: bust this if the editor changes, too\nconst htmlCache = new WeakCache<TLRichText, string>()\n\n/**\n * Renders HTML from a rich text string.\n *\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n * @public\n */\nexport function renderHtmlFromRichText(editor: Editor, richText: TLRichText) {\n\treturn htmlCache.get(richText, () => {\n\t\tconst tipTapExtensions =\n\t\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\t\tconst html = generateHTML(richText as JSONContent, tipTapExtensions)\n\t\t// We replace empty paragraphs with a single line break to prevent the browser from collapsing them.\n\t\treturn html.replaceAll('<p dir=\"auto\"></p>', '<p><br /></p>') ?? ''\n\t})\n}\n\n/**\n * Renders HTML from a rich text string for measurement.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n *\n * @public\n */\nexport function renderHtmlFromRichTextForMeasurement(editor: Editor, richText: TLRichText) {\n\tconst html = renderHtmlFromRichText(editor, richText)\n\treturn `<div class=\"tl-rich-text\">${html}</div>`\n}\n\n// A weak cache used to store plaintext that's been extracted from rich text.\nconst plainTextFromRichTextCache = new WeakCache<TLRichText, string>()\n\nexport function isEmptyRichText(richText: TLRichText) {\n\tif (richText.content.length === 1) {\n\t\tif (!(richText.content[0] as any).content) return true\n\t}\n\treturn false\n}\n\n/**\n * Renders plaintext from a rich text string.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n *\n * @public\n */\nexport function renderPlaintextFromRichText(editor: Editor, richText: TLRichText) {\n\tif (isEmptyRichText(richText)) return ''\n\n\treturn plainTextFromRichTextCache.get(richText, () => {\n\t\tconst tipTapExtensions =\n\t\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\t\treturn generateText(richText as JSONContent, tipTapExtensions, {\n\t\t\tblockSeparator: '\\n',\n\t\t})\n\t})\n}\n\n/**\n * Renders JSONContent from html.\n * @param editor - The editor instance.\n * @param richText - The rich text content.\n *\n *\n * @public\n */\nexport function renderRichTextFromHTML(editor: Editor, html: string): TLRichText {\n\tconst tipTapExtensions =\n\t\teditor.getTextOptions().tipTapConfig?.extensions ?? tipTapDefaultExtensions\n\treturn generateJSON(html, tipTapExtensions) as TLRichText\n}\n\n/** @public */\nexport function defaultAddFontsFromNode(\n\tnode: Node,\n\tstate: RichTextFontVisitorState,\n\taddFont: (font: TLFontFace) => void\n) {\n\tfor (const mark of node.marks) {\n\t\tif (mark.type.name === 'bold' && state.weight !== 'bold') {\n\t\t\tstate = { ...state, weight: 'bold' }\n\t\t}\n\t\tif (mark.type.name === 'italic' && state.style !== 'italic') {\n\t\t\tstate = { ...state, style: 'italic' }\n\t\t}\n\t\tif (mark.type.name === 'code' && state.family !== 'tldraw_mono') {\n\t\t\tstate = { ...state, family: 'tldraw_mono' }\n\t\t}\n\t}\n\n\tconst fontsForFamily = getOwnProperty(DefaultFontFaces, state.family)\n\tif (!fontsForFamily) return state\n\n\tconst fontsForStyle = getOwnProperty(fontsForFamily, state.style)\n\tif (!fontsForStyle) return state\n\n\tconst fontsForWeight = getOwnProperty(fontsForStyle, state.weight)\n\tif (!fontsForWeight) return state\n\n\taddFont(fontsForWeight)\n\n\treturn state\n}\n"],
+  "mappings": "AAAA;AAAA,EACC;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OAEM;AACP,OAAO,UAAU;AACjB,OAAO,eAAe;AAEtB,OAAO,gBAAgB;AACvB;AAAA,EAEC;AAAA,EAIA;AAAA,OACM;AACP,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAGvB,MAAM,mCAAmC,UAAU,OAAO;AAAA,EAChE,MAAM;AAAA,EACN,uBAAuB;AACtB,WAAO;AAAA;AAAA,MAEN,eAAe,CAAC,EAAE,OAAO,MAAM,OAAO,SAAS,MAAM;AAAA,IACtD;AAAA,EACD;AACD,CAAC;AAKD,KAAK,OAAO,WAAW;AAKvB,UAAU,OAAO,WAAW;AAOrB,MAAM,0BAAsC;AAAA,EAClD,WAAW,UAAU;AAAA,IACpB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,MAAM;AAAA,MACL,aAAa;AAAA,MACb,UAAU;AAAA,IACX;AAAA,EACD,CAAC;AAAA,EACD;AAAA,EACA;AAAA,EACA;AACD;AAGA,MAAM,YAAY,IAAI,UAA8B;AAU7C,SAAS,uBAAuB,QAAgB,UAAsB;AAC5E,SAAO,UAAU,IAAI,UAAU,MAAM;AACpC,UAAM,mBACL,OAAO,eAAe,EAAE,cAAc,cAAc;AACrD,UAAM,OAAO,aAAa,UAAyB,gBAAgB;AAEnE,WAAO,KAAK,WAAW,sBAAsB,eAAe,KAAK;AAAA,EAClE,CAAC;AACF;AAUO,SAAS,qCAAqC,QAAgB,UAAsB;AAC1F,QAAM,OAAO,uBAAuB,QAAQ,QAAQ;AACpD,SAAO,6BAA6B,IAAI;AACzC;AAGA,MAAM,6BAA6B,IAAI,UAA8B;AAE9D,SAAS,gBAAgB,UAAsB;AACrD,MAAI,SAAS,QAAQ,WAAW,GAAG;AAClC,QAAI,CAAE,SAAS,QAAQ,CAAC,EAAU,QAAS,QAAO;AAAA,EACnD;AACA,SAAO;AACR;AAUO,SAAS,4BAA4B,QAAgB,UAAsB;AACjF,MAAI,gBAAgB,QAAQ,EAAG,QAAO;AAEtC,SAAO,2BAA2B,IAAI,UAAU,MAAM;AACrD,UAAM,mBACL,OAAO,eAAe,EAAE,cAAc,cAAc;AACrD,WAAO,aAAa,UAAyB,kBAAkB;AAAA,MAC9D,gBAAgB;AAAA,IACjB,CAAC;AAAA,EACF,CAAC;AACF;AAUO,SAAS,uBAAuB,QAAgB,MAA0B;AAChF,QAAM,mBACL,OAAO,eAAe,EAAE,cAAc,cAAc;AACrD,SAAO,aAAa,MAAM,gBAAgB;AAC3C;AAGO,SAAS,wBACf,MACA,OACA,SACC;AACD,aAAW,QAAQ,KAAK,OAAO;AAC9B,QAAI,KAAK,KAAK,SAAS,UAAU,MAAM,WAAW,QAAQ;AACzD,cAAQ,EAAE,GAAG,OAAO,QAAQ,OAAO;AAAA,IACpC;AACA,QAAI,KAAK,KAAK,SAAS,YAAY,MAAM,UAAU,UAAU;AAC5D,cAAQ,EAAE,GAAG,OAAO,OAAO,SAAS;AAAA,IACrC;AACA,QAAI,KAAK,KAAK,SAAS,UAAU,MAAM,WAAW,eAAe;AAChE,cAAQ,EAAE,GAAG,OAAO,QAAQ,cAAc;AAAA,IAC3C;AAAA,EACD;AAEA,QAAM,iBAAiB,eAAe,kBAAkB,MAAM,MAAM;AACpE,MAAI,CAAC,eAAgB,QAAO;AAE5B,QAAM,gBAAgB,eAAe,gBAAgB,MAAM,KAAK;AAChE,MAAI,CAAC,cAAe,QAAO;AAE3B,QAAM,iBAAiB,eAAe,eAAe,MAAM,MAAM;AACjE,MAAI,CAAC,eAAgB,QAAO;AAE5B,UAAQ,cAAc;AAEtB,SAAO;AACR;",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "4.2.0-next.47462e908ff5",
+  "version": "4.2.0-next.67908ea044c6",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -55,15 +55,15 @@
     "src"
   ],
   "dependencies": {
-    "@tiptap/core": "^2.9.1",
-    "@tiptap/extension-code": "^2.9.1",
-    "@tiptap/extension-highlight": "^2.9.1",
-    "@tiptap/extension-link": "^2.9.1",
-    "@tiptap/pm": "^2.9.1",
-    "@tiptap/react": "^2.9.1",
-    "@tiptap/starter-kit": "^2.9.1",
-    "@tldraw/editor": "4.2.0-next.47462e908ff5",
-    "@tldraw/store": "4.2.0-next.47462e908ff5",
+    "@tiptap/core": "3.6.2",
+    "@tiptap/extension-code": "3.6.2",
+    "@tiptap/extension-highlight": "3.6.2",
+    "@tiptap/extension-list": "3.6.2",
+    "@tiptap/pm": "3.6.2",
+    "@tiptap/react": "3.6.2",
+    "@tiptap/starter-kit": "3.6.2",
+    "@tldraw/editor": "4.2.0-next.67908ea044c6",
+    "@tldraw/store": "4.2.0-next.67908ea044c6",
     "classnames": "^2.5.1",
     "hotkeys-js": "^3.13.9",
     "idb": "^7.1.1",

package/src/index.ts

@@ -241,7 +241,10 @@ export {
 	DefaultDebugMenuContent,
 	ExampleDialog,
 	FeatureFlags,
+	type CustomDebugFlags,
+	type DebugFlagsProps,
 	type ExampleDialogProps,
+	type FeatureFlagsProps,
 } from './lib/ui/components/DebugMenu/DefaultDebugMenuContent'
 export { DefaultMenuPanel } from './lib/ui/components/DefaultMenuPanel'
 export {

package/src/lib/shapes/frame/components/FrameLabelInput.tsx

@@ -1,5 +1,8 @@
-import { TLFrameShape, TLShapeId, useEditor } from '@tldraw/editor'
-import { forwardRef, useCallback } from 'react'
+import { TLFrameShape, TLShapeId, useEditor, useValue } from '@tldraw/editor'
+import { forwardRef, useCallback, useEffect, useRef } from 'react'
+import { PORTRAIT_BREAKPOINT } from '../../../ui/constants'
+import { useBreakpoint } from '../../../ui/context/breakpoints'
+import { useTranslation } from '../../../ui/hooks/useTranslation/useTranslation'
 import { defaultEmptyAs } from '../FrameShapeUtil'
 
 export const FrameLabelInput = forwardRef<
@@ -7,6 +10,15 @@ export const FrameLabelInput = forwardRef<
 	{ id: TLShapeId; name: string; isEditing: boolean }
 >(({ id, name, isEditing }, ref) => {
 	const editor = useEditor()
+	const breakpoint = useBreakpoint()
+	const isCoarsePointer = useValue(
+		'isCoarsePointer',
+		() => editor.getInstanceState().isCoarsePointer,
+		[editor]
+	)
+	const shouldUseWindowPrompt = breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && isCoarsePointer
+	const promptOpen = useRef<boolean>(false)
+	const msg = useTranslation()
 
 	const handlePointerDown = useCallback(
 		(e: React.PointerEvent) => {
@@ -28,13 +40,12 @@ export const FrameLabelInput = forwardRef<
 		[editor]
 	)
 
-	const handleBlur = useCallback(
-		(e: React.FocusEvent<HTMLInputElement>) => {
+	const renameFrame = useCallback(
+		(value: string) => {
 			const shape = editor.getShape<TLFrameShape>(id)
 			if (!shape) return
 
 			const name = shape.props.name
-			const value = e.currentTarget.value.trim()
 			if (name === value) return
 
 			editor.updateShapes([
@@ -48,36 +59,49 @@ export const FrameLabelInput = forwardRef<
 		[id, editor]
 	)
 
+	const handleBlur = useCallback(
+		(e: React.FocusEvent<HTMLInputElement>) => {
+			renameFrame(e.currentTarget.value)
+		},
+		[renameFrame]
+	)
+
 	const handleChange = useCallback(
 		(e: React.ChangeEvent<HTMLInputElement>) => {
-			const shape = editor.getShape<TLFrameShape>(id)
-			if (!shape) return
-
-			const name = shape.props.name
-			const value = e.currentTarget.value
-			if (name === value) return
-
-			editor.updateShapes([
-				{
-					id,
-					type: 'frame',
-					props: { name: value },
-				},
-			])
+			renameFrame(e.currentTarget.value)
 		},
-		[id, editor]
+		[renameFrame]
 	)
 
+	/* Mobile rename uses window.prompt */
+	useEffect(() => {
+		if (!isEditing) {
+			promptOpen.current = false
+			return
+		}
+		if (isEditing && shouldUseWindowPrompt && !promptOpen.current) {
+			promptOpen.current = true
+			const shape = editor.getShape<TLFrameShape>(id)
+			const currentName = shape?.props.name ?? ''
+			const newName = window.prompt(msg('action.rename'), currentName)
+			promptOpen.current = false
+			if (newName !== null) renameFrame(newName)
+			editor.setEditingShape(null)
+		}
+	}, [isEditing, shouldUseWindowPrompt, id, msg, renameFrame, editor])
+
 	return (
-		<div className={`tl-frame-label ${isEditing ? 'tl-frame-label__editing' : ''}`}>
+		<div
+			className={`tl-frame-label ${isEditing && !shouldUseWindowPrompt ? 'tl-frame-label__editing' : ''}`}
+		>
 			<input
 				className="tl-frame-name-input"
 				ref={ref}
-				disabled={!isEditing}
-				readOnly={!isEditing}
+				disabled={!isEditing || shouldUseWindowPrompt}
+				readOnly={!isEditing || shouldUseWindowPrompt}
 				style={{ display: isEditing ? undefined : 'none' }}
 				value={name}
-				autoFocus
+				autoFocus={!shouldUseWindowPrompt}
 				onKeyDown={handleKeyDown}
 				onBlur={handleBlur}
 				onChange={handleChange}

package/src/lib/shapes/note/NoteShapeUtil.tsx

@@ -31,9 +31,9 @@ import {
 	useEditor,
 	useValue,
 } from '@tldraw/editor'
-import { useCallback } from 'react'
+import { useCallback, useContext } from 'react'
 import { startEditingShapeWithLabel } from '../../tools/SelectTool/selectHelpers'
-import { useCurrentTranslation } from '../../ui/hooks/useTranslation/useTranslation'
+import { TranslationsContext } from '../../ui/hooks/useTranslation/useTranslation'
 import {
 	isEmptyRichText,
 	renderHtmlFromRichTextForMeasurement,
@@ -493,7 +493,8 @@ function getLabelSize(editor: Editor, shape: TLNoteShape) {
 
 function useNoteKeydownHandler(id: TLShapeId) {
 	const editor = useEditor()
-	const translation = useCurrentTranslation()
+	// Try to get the translation context, but fallback to ltr if it doesn't exist
+	const translation = useContext(TranslationsContext)
 
 	return useCallback(
 		(e: KeyboardEvent) => {
@@ -512,7 +513,7 @@ function useNoteKeydownHandler(id: TLShapeId) {
 				// tab controls x axis (shift inverts direction set by RTL)
 				// cmd enter is the y axis (shift inverts direction)
 				const isRTL = !!(
-					translation.dir === 'rtl' ||
+					translation?.dir === 'rtl' ||
 					// todo: can we check a partial of the text, so that we don't have to render the whole thing?
 					isRightToLeftLanguage(renderPlaintextFromRichText(editor, shape.props.richText))
 				)
@@ -540,7 +541,7 @@ function useNoteKeydownHandler(id: TLShapeId) {
 				}
 			}
 		},
-		[id, editor, translation.dir]
+		[id, editor, translation?.dir]
 	)
 }
 

package/src/lib/shapes/shared/RichTextLabel.tsx

@@ -8,6 +8,7 @@ import {
 	TLEventInfo,
 	TLRichText,
 	TLShapeId,
+	openWindow,
 	preventDefault,
 	useEditor,
 	useReactor,
@@ -112,7 +113,7 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 				if (e.name !== 'pointer_up' || !link) return
 
 				if (!isDragging.current) {
-					window.open(link, '_blank', 'noopener, noreferrer')
+					openWindow(link, '_blank', false)
 				}
 				editor.off('event', handlePointerUp)
 			}

package/src/lib/shapes/shared/ShapeFill.tsx

@@ -41,6 +41,9 @@ export const ShapeFill = React.memo(function ShapeFill({
 		case 'pattern': {
 			return <PatternFill theme={theme} color={color} fill={fill} d={d} scale={scale} />
 		}
+		case 'lined-fill': {
+			return <path fill={getColorValue(theme, color, 'linedFill')} d={d} />
+		}
 	}
 })
 

package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx

@@ -83,24 +83,35 @@ export class DraggingHandle extends StateNode {
 		// Find the adjacent handle
 		this.initialAdjacentHandle = null
 
-		// Start from the handle and work forward
-		for (let i = index + 1; i < handles.length; i++) {
-			const handle = handles[i]
-			if (handle.type === 'vertex' && handle.id !== 'middle' && handle.id !== info.handle.id) {
-				this.initialAdjacentHandle = handle
-				break
+		// First, check if the handle specifies a custom reference handle
+		if (info.handle.snapReferenceHandleId) {
+			const customHandle = handles.find((h) => h.id === info.handle.snapReferenceHandleId)
+			if (customHandle) {
+				this.initialAdjacentHandle = customHandle
 			}
 		}
 
-		// If still no handle, start from the end and work backward
+		// If no custom reference handle, use default behavior
 		if (!this.initialAdjacentHandle) {
-			for (let i = handles.length - 1; i >= 0; i--) {
+			// Start from the handle and work forward
+			for (let i = index + 1; i < handles.length; i++) {
 				const handle = handles[i]
 				if (handle.type === 'vertex' && handle.id !== 'middle' && handle.id !== info.handle.id) {
 					this.initialAdjacentHandle = handle
 					break
 				}
 			}
+
+			// If still no handle, start from the end and work backward
+			if (!this.initialAdjacentHandle) {
+				for (let i = handles.length - 1; i >= 0; i--) {
+					const handle = handles[i]
+					if (handle.type === 'vertex' && handle.id !== 'middle' && handle.id !== info.handle.id) {
+						this.initialAdjacentHandle = handle
+						break
+					}
+				}
+			}
 		}
 
 		// <!-- Only relevant to arrows

package/src/lib/tools/SelectTool/childStates/Idle.ts

@@ -507,7 +507,7 @@ export class Idle extends StateNode {
 			}
 			case 'Tab': {
 				const selectedShapes = this.editor.getSelectedShapes()
-				if (selectedShapes.length) {
+				if (selectedShapes.length && !info.altKey) {
 					this.editor.selectAdjacentShape(info.shiftKey ? 'prev' : 'next')
 				}
 				break
@@ -557,7 +557,7 @@ export class Idle extends StateNode {
 			}
 			case 'Tab': {
 				const selectedShapes = this.editor.getSelectedShapes()
-				if (selectedShapes.length) {
+				if (selectedShapes.length && !info.altKey) {
 					this.editor.selectAdjacentShape(info.shiftKey ? 'prev' : 'next')
 				}
 				break

package/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx

@@ -29,8 +29,17 @@ import { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'
 import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
 import { TldrawUiMenuSubmenu } from '../primitives/menus/TldrawUiMenuSubmenu'
 
+/** @public */
+export interface CustomDebugFlags {
+	customDebugFlags?: Record<string, DebugFlag<boolean>>
+	customFeatureFlags?: Record<string, DebugFlag<boolean>>
+}
+
 /** @public @react */
-export function DefaultDebugMenuContent() {
+export function DefaultDebugMenuContent({
+	customDebugFlags,
+	customFeatureFlags,
+}: CustomDebugFlags) {
 	const editor = useEditor()
 	const { addToast } = useToasts()
 	const { addDialog } = useDialogs()
@@ -161,15 +170,21 @@ export function DefaultDebugMenuContent() {
 				<TldrawUiMenuItem id="throw-error" onSelect={() => setError(true)} label={'Throw error'} />
 			</TldrawUiMenuGroup>
 			<TldrawUiMenuGroup id="flags">
-				<DebugFlags />
-				<FeatureFlags />
+				<DebugFlags customDebugFlags={customDebugFlags} />
+				<FeatureFlags customFeatureFlags={customFeatureFlags} />
 			</TldrawUiMenuGroup>
 		</>
 	)
 }
+
+/** @public */
+export interface DebugFlagsProps {
+	customDebugFlags?: Record<string, DebugFlag<boolean>> | undefined
+}
+
 /** @public @react */
-export function DebugFlags() {
-	const items = Object.values(debugFlags)
+export function DebugFlags(props: DebugFlagsProps) {
+	const items = Object.values(props.customDebugFlags ?? debugFlags)
 	if (!items.length) return null
 	return (
 		<TldrawUiMenuSubmenu id="debug flags" label="Debug flags">
@@ -181,9 +196,14 @@ export function DebugFlags() {
 		</TldrawUiMenuSubmenu>
 	)
 }
+/** @public */
+export interface FeatureFlagsProps {
+	customFeatureFlags?: Record<string, DebugFlag<boolean>> | undefined
+}
+
 /** @public @react */
-export function FeatureFlags() {
-	const items = Object.values(featureFlags)
+export function FeatureFlags(props: FeatureFlagsProps) {
+	const items = Object.values(props.customFeatureFlags ?? featureFlags)
 	if (!items.length) return null
 	return (
 		<TldrawUiMenuSubmenu id="feature flags" label="Feature flags">

package/src/lib/ui/components/Dialogs.tsx

@@ -4,12 +4,7 @@ import { memo, useCallback, useRef } from 'react'
 import { TLUiDialog, useDialogs } from '../context/dialogs'
 
 /** @internal */
-const TldrawUiDialog = ({
-	id,
-	component: ModalContent,
-	onClose,
-	preventBackgroundClose,
-}: TLUiDialog) => {
+const TldrawUiDialog = ({ id, component: ModalContent, preventBackgroundClose }: TLUiDialog) => {
 	const { removeDialog } = useDialogs()
 	const mouseDownInsideContentRef = useRef(false)
 
@@ -18,17 +13,10 @@ const TldrawUiDialog = ({
 	const handleOpenChange = useCallback(
 		(isOpen: boolean) => {
 			if (!isOpen) {
-				if (onClose) {
-					try {
-						onClose()
-					} catch (err: any) {
-						console.warn(err)
-					}
-				}
 				removeDialog(id)
 			}
 		},
-		[id, onClose, removeDialog]
+		[id, removeDialog]
 	)
 
 	return (

package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx

@@ -3,7 +3,6 @@ import {
 	TLPageId,
 	releasePointerCapture,
 	setPointerCapture,
-	tlenv,
 	useEditor,
 	useValue,
 } from '@tldraw/editor'
@@ -306,6 +305,8 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 		[editor, trackEvent]
 	)
 
+	const shouldUseWindowPrompt = breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && isCoarsePointer
+
 	return (
 		<TldrawUiPopover id="pages" onOpenChange={onOpenChange} open={isOpen}>
 			<TldrawUiPopoverTrigger data-testid="main.page-menu">
@@ -390,7 +391,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 									>
 										<TldrawUiButtonIcon icon="drag-handle-dots" />
 									</TldrawUiButton>
-									{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && isCoarsePointer ? (
+									{shouldUseWindowPrompt ? (
 										// sigh, this is a workaround for iOS Safari
 										// because the device and the radix popover seem
 										// to be fighting over scroll position. Nothing
@@ -399,7 +400,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 											type="normal"
 											className="tlui-page-menu__item__button"
 											onClick={() => {
-												const name = window.prompt('Rename page', page.name)
+												const name = window.prompt(msg('action.rename'), page.name)
 												if (name && name !== page.name) {
 													renamePage(page.id, name)
 												}
@@ -465,8 +466,8 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 												item={page}
 												listSize={pages.length}
 												onRename={() => {
-													if (tlenv.isIos) {
-														const name = window.prompt('Rename page', page.name)
+													if (shouldUseWindowPrompt) {
+														const name = window.prompt(msg('action.rename'), page.name)
 														if (name && name !== page.name) {
 															renamePage(page.id, name)
 														}

package/src/lib/ui/components/Toolbar/DefaultRichTextToolbar.tsx

@@ -117,7 +117,9 @@ function useEditingLinkBehavior(textEditor?: TiptapEditor) {
 
 		textEditor.view.dom.addEventListener('click', handleClick)
 		return () => {
-			textEditor.view.dom.removeEventListener('click', handleClick)
+			if (textEditor.isInitialized) {
+				textEditor.view.dom.removeEventListener('click', handleClick)
+			}
 		}
 	}, [textEditor, isEditingLink])
 
@@ -193,7 +195,9 @@ function useIsMousingDownOnTextEditor(textEditor: TiptapEditor) {
 		})
 		return () => {
 			touchDownEvents.forEach((eventName: string) => {
-				textEditor.view.dom.removeEventListener(eventName, handlePointingDown)
+				if (textEditor.isInitialized) {
+					textEditor.view.dom.removeEventListener(eventName, handlePointingDown)
+				}
 			})
 			touchUpEvents.forEach((eventName: string) => {
 				document.body.removeEventListener(eventName, handlePointingUp)

package/src/lib/ui/components/Toolbar/DefaultRichTextToolbarContent.tsx

@@ -54,6 +54,9 @@ export function DefaultRichTextToolbarContent({
 	// todo: we could make this a prop
 	const actions = useMemo(() => {
 		function handleOp(name: string, op: string) {
+			// Check if the editor view is available before calling operations
+			if (!textEditor.view) return
+
 			trackEvent('rich-text', { operation: name as any, source })
 			// @ts-expect-error typing this is annoying at the moment.
 			textEditor.chain().focus()[op]().run()
@@ -109,7 +112,7 @@ export function DefaultRichTextToolbarContent({
 	}, [textEditor, trackEvent, onEditLinkStart])
 
 	return actions.map(({ name, attrs, onSelect }) => {
-		const isActive = textEditor.isActive(name, attrs)
+		const isActive = textEditor.view ? textEditor.isActive(name, attrs) : false
 		return (
 			<TldrawUiToolbarButton
 				key={name}

package/src/lib/ui/components/Toolbar/LinkEditor.tsx

@@ -1,4 +1,4 @@
-import { preventDefault, TiptapEditor, useEditor } from '@tldraw/editor'
+import { openWindow, preventDefault, TiptapEditor, useEditor } from '@tldraw/editor'
 import { useEffect, useRef, useState } from 'react'
 import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
@@ -31,7 +31,7 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 			link = `https://${link}`
 		}
 
-		textEditor.commands.setLink({ href: link })
+		textEditor.chain().setLink({ href: link }).run()
 		// N.B. We shouldn't focus() on mobile because it causes the
 		// Return key to replace the link with a newline :facepalm:
 		if (editor.getInstanceState().isCoarsePointer) {
@@ -44,7 +44,7 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 
 	const handleVisitLink = () => {
 		trackEvent('rich-text', { operation: 'link-visit', source })
-		window.open(linkifiedValue, '_blank', 'noopener, noreferrer')
+		openWindow(linkifiedValue, '_blank')
 		onClose()
 	}
 

package/src/lib/ui/components/primitives/Button/TldrawUiButton.tsx

@@ -6,6 +6,7 @@ export interface TLUiButtonProps extends React.HTMLAttributes<HTMLButtonElement>
 	disabled?: boolean
 	isActive?: boolean
 	type: 'normal' | 'primary' | 'danger' | 'low' | 'icon' | 'tool' | 'menu' | 'help'
+	htmlButtonType?: 'button' | 'submit' | 'reset'
 }
 
 const namedClassNamesSoThatICanGrepForThis = {
@@ -21,11 +22,11 @@ const namedClassNamesSoThatICanGrepForThis = {
 
 /** @public @react */
 export const TldrawUiButton = React.forwardRef<HTMLButtonElement, TLUiButtonProps>(
-	function TldrawUiButton({ children, type, isActive, ...props }, ref) {
+	function TldrawUiButton({ children, type, htmlButtonType, isActive, ...props }, ref) {
 		return (
 			<button
 				ref={ref}
-				type="button"
+				type={htmlButtonType || 'button'}
 				draggable={false}
 				data-isactive={isActive}
 				{...props}

package/src/lib/ui/context/actions.tsx

@@ -1495,6 +1495,22 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					trackEvent('set-style', { source, id: style.id, value: 'fill' })
 				},
 			},
+			{
+				id: 'select-fill-lined-fill',
+				label: 'fill-style.lined-fill',
+				kbd: 'alt+shift+f',
+				onSelect(source) {
+					const style = DefaultFillStyle
+					editor.run(() => {
+						editor.markHistoryStoppingPoint('change-fill')
+						if (editor.isIn('select')) {
+							editor.setStyleForSelectedShapes(style, 'lined-fill')
+						}
+						editor.setStyleForNextShapes(style, 'lined-fill')
+					})
+					trackEvent('set-style', { source, id: style.id, value: 'lined-fill' })
+				},
+			},
 			{
 				id: 'flatten-to-image',
 				label: 'action.flatten-to-image',

package/src/lib/ui/context/events.tsx

@@ -24,6 +24,7 @@ export type TLUiEventSource =
 	| 'rich-text-menu'
 	| 'image-toolbar'
 	| 'video-toolbar'
+	| 'fairy-panel'
 	| 'unknown'
 
 /** @public */

package/src/lib/ui/getLocalFiles.ts

@@ -9,17 +9,34 @@ export function getLocalFiles(options?: {
 		input.type = 'file'
 		input.accept = mimeTypes?.join(',')
 		input.multiple = allowMultiple
+		input.style.display = 'none'
+
+		function dispose() {
+			input.removeEventListener('change', onchange)
+			input.removeEventListener('cancel', oncancel)
+			input.remove()
+		}
 
 		async function onchange(e: Event) {
 			const fileList = (e.target as HTMLInputElement).files
-			if (!fileList || fileList.length === 0) return
+			if (!fileList || fileList.length === 0) {
+				resolve([])
+				dispose()
+				return
+			}
 			const files = Array.from(fileList)
 			input.value = ''
 			resolve(files)
-			input.removeEventListener('change', onchange)
-			input.remove()
+			dispose()
+		}
+
+		function oncancel() {
+			resolve([])
+			dispose()
 		}
 
+		document.body.appendChild(input)
+		input.addEventListener('cancel', oncancel)
 		input.addEventListener('change', onchange)
 		input?.click()
 	})