@tldraw/editor 5.3.0-next.4123e97459a9 → 5.3.0-next.5cb71bb7e8fe

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/dist-cjs/index.d.ts +115 -3
  2. package/dist-cjs/index.js +13 -3
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/TldrawEditor.js +24 -19
  5. package/dist-cjs/lib/TldrawEditor.js.map +2 -2
  6. package/dist-cjs/lib/components/EditorPortal.js +44 -0
  7. package/dist-cjs/lib/components/EditorPortal.js.map +7 -0
  8. package/dist-cjs/lib/components/LiveCollaborators.js +102 -0
  9. package/dist-cjs/lib/components/LiveCollaborators.js.map +7 -0
  10. package/dist-cjs/lib/components/default-components/DefaultCanvas.js +4 -10
  11. package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +3 -3
  12. package/dist-cjs/lib/components/default-components/DefaultCursor.js +59 -0
  13. package/dist-cjs/lib/components/default-components/DefaultCursor.js.map +7 -0
  14. package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js +4 -4
  15. package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js.map +2 -2
  16. package/dist-cjs/lib/editor/types/external-content.js.map +1 -1
  17. package/dist-cjs/lib/hooks/EditorComponentsContext.js.map +2 -2
  18. package/dist-cjs/lib/hooks/useCursor.js +1 -0
  19. package/dist-cjs/lib/hooks/useCursor.js.map +2 -2
  20. package/dist-cjs/lib/hooks/useEditorComponents.js +2 -0
  21. package/dist-cjs/lib/hooks/useEditorComponents.js.map +2 -2
  22. package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js +49 -18
  23. package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js.map +3 -3
  24. package/dist-cjs/lib/hooks/useTransform.js +45 -0
  25. package/dist-cjs/lib/hooks/useTransform.js.map +7 -0
  26. package/dist-cjs/lib/license/LicenseManager.js +51 -2
  27. package/dist-cjs/lib/license/LicenseManager.js.map +2 -2
  28. package/dist-cjs/lib/license/useLicenseManagerState.js +7 -0
  29. package/dist-cjs/lib/license/useLicenseManagerState.js.map +2 -2
  30. package/dist-cjs/lib/utils/collaborators.js +27 -0
  31. package/dist-cjs/lib/utils/collaborators.js.map +7 -0
  32. package/dist-cjs/lib/utils/getHtmlLayerTransform.js +33 -0
  33. package/dist-cjs/lib/utils/getHtmlLayerTransform.js.map +7 -0
  34. package/dist-cjs/version.js +3 -3
  35. package/dist-cjs/version.js.map +1 -1
  36. package/dist-esm/index.d.mts +115 -3
  37. package/dist-esm/index.mjs +19 -4
  38. package/dist-esm/index.mjs.map +2 -2
  39. package/dist-esm/lib/TldrawEditor.mjs +23 -18
  40. package/dist-esm/lib/TldrawEditor.mjs.map +2 -2
  41. package/dist-esm/lib/components/EditorPortal.mjs +24 -0
  42. package/dist-esm/lib/components/EditorPortal.mjs.map +7 -0
  43. package/dist-esm/lib/components/LiveCollaborators.mjs +82 -0
  44. package/dist-esm/lib/components/LiveCollaborators.mjs.map +7 -0
  45. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +5 -11
  46. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +2 -2
  47. package/dist-esm/lib/components/default-components/DefaultCursor.mjs +29 -0
  48. package/dist-esm/lib/components/default-components/DefaultCursor.mjs.map +7 -0
  49. package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs +5 -5
  50. package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs.map +2 -2
  51. package/dist-esm/lib/hooks/EditorComponentsContext.mjs.map +2 -2
  52. package/dist-esm/lib/hooks/useCursor.mjs +1 -0
  53. package/dist-esm/lib/hooks/useCursor.mjs.map +2 -2
  54. package/dist-esm/lib/hooks/useEditorComponents.mjs +2 -0
  55. package/dist-esm/lib/hooks/useEditorComponents.mjs.map +2 -2
  56. package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs +50 -19
  57. package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs.map +3 -3
  58. package/dist-esm/lib/hooks/useTransform.mjs +25 -0
  59. package/dist-esm/lib/hooks/useTransform.mjs.map +7 -0
  60. package/dist-esm/lib/license/LicenseManager.mjs +52 -3
  61. package/dist-esm/lib/license/LicenseManager.mjs.map +2 -2
  62. package/dist-esm/lib/license/useLicenseManagerState.mjs +7 -0
  63. package/dist-esm/lib/license/useLicenseManagerState.mjs.map +2 -2
  64. package/dist-esm/lib/utils/collaborators.mjs +7 -0
  65. package/dist-esm/lib/utils/collaborators.mjs.map +7 -0
  66. package/dist-esm/lib/utils/getHtmlLayerTransform.mjs +13 -0
  67. package/dist-esm/lib/utils/getHtmlLayerTransform.mjs.map +7 -0
  68. package/dist-esm/version.mjs +3 -3
  69. package/dist-esm/version.mjs.map +1 -1
  70. package/editor.css +43 -4
  71. package/package.json +7 -7
  72. package/src/index.ts +14 -2
  73. package/src/lib/TldrawEditor.tsx +21 -13
  74. package/src/lib/components/EditorPortal.tsx +77 -0
  75. package/src/lib/components/LiveCollaborators.tsx +133 -0
  76. package/src/lib/components/default-components/DefaultCanvas.tsx +5 -17
  77. package/src/lib/components/default-components/DefaultCursor.tsx +65 -0
  78. package/src/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.test.ts +46 -1
  79. package/src/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.ts +10 -5
  80. package/src/lib/editor/types/external-content.ts +5 -0
  81. package/src/lib/hooks/EditorComponentsContext.tsx +2 -0
  82. package/src/lib/hooks/useCursor.ts +1 -0
  83. package/src/lib/hooks/useEditorComponents.tsx +2 -0
  84. package/src/lib/hooks/usePassThroughWheelEvents.ts +83 -24
  85. package/src/lib/hooks/useTransform.ts +38 -0
  86. package/src/lib/license/LicenseManager.test.ts +146 -0
  87. package/src/lib/license/LicenseManager.ts +98 -2
  88. package/src/lib/license/useLicenseManagerState.ts +17 -1
  89. package/src/lib/test/EditorPortal.test.tsx +48 -0
  90. package/src/lib/test/usePassThroughWheelEvents.test.tsx +77 -0
  91. package/src/lib/utils/collaborators.test.ts +34 -0
  92. package/src/lib/utils/collaborators.ts +25 -0
  93. package/src/lib/utils/getHtmlLayerTransform.ts +22 -0
  94. package/src/version.ts +3 -3
  95. package/dist-cjs/lib/hooks/usePassThroughMouseOverEvents.js +0 -51
  96. package/dist-cjs/lib/hooks/usePassThroughMouseOverEvents.js.map +0 -7
  97. package/dist-esm/lib/hooks/usePassThroughMouseOverEvents.mjs +0 -31
  98. package/dist-esm/lib/hooks/usePassThroughMouseOverEvents.mjs.map +0 -7
  99. package/src/lib/hooks/usePassThroughMouseOverEvents.ts +0 -32
@@ -1,31 +0,0 @@
1
- import { useEffect } from "react";
2
- import { preventDefault } from "../utils/dom.mjs";
3
- import { useContainer } from "./useContainer.mjs";
4
- import { useMaybeEditor } from "./useEditor.mjs";
5
- function usePassThroughMouseOverEvents(ref) {
6
- if (!ref) throw Error("usePassThroughWheelEvents must be passed a ref");
7
- const container = useContainer();
8
- const editor = useMaybeEditor();
9
- useEffect(() => {
10
- function onMouseOver(e) {
11
- if (!editor?.getInstanceState().isFocused) return;
12
- if (e.isSpecialRedispatchedEvent) return;
13
- preventDefault(e);
14
- const cvs = container.querySelector(".tl-canvas");
15
- if (!cvs) return;
16
- const newEvent = new PointerEvent(e.type, e);
17
- newEvent.isSpecialRedispatchedEvent = true;
18
- cvs.dispatchEvent(newEvent);
19
- }
20
- const elm = ref.current;
21
- if (!elm) return;
22
- elm.addEventListener("mouseover", onMouseOver, { passive: false });
23
- return () => {
24
- elm.removeEventListener("mouseover", onMouseOver);
25
- };
26
- }, [container, editor, ref]);
27
- }
28
- export {
29
- usePassThroughMouseOverEvents
30
- };
31
- //# sourceMappingURL=usePassThroughMouseOverEvents.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/lib/hooks/usePassThroughMouseOverEvents.ts"],
4
- "sourcesContent": ["import { RefObject, useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\n\n/** @public */\nexport function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement | null>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\tconst editor = useMaybeEditor()\n\n\tuseEffect(() => {\n\t\tfunction onMouseOver(e: MouseEvent) {\n\t\t\tif (!editor?.getInstanceState().isFocused) return\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\t\t\tpreventDefault(e)\n\t\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\t\tif (!cvs) return\n\t\t\tconst newEvent = new PointerEvent(e.type, e as any)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\telm.addEventListener('mouseover', onMouseOver, { passive: false })\n\t\treturn () => {\n\t\t\telm.removeEventListener('mouseover', onMouseOver)\n\t\t}\n\t}, [container, editor, ref])\n}\n"],
5
- "mappings": "AAAA,SAAoB,iBAAiB;AACrC,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAGxB,SAAS,8BAA8B,KAAoC;AACjF,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,YAAY,aAAa;AAC/B,QAAM,SAAS,eAAe;AAE9B,YAAU,MAAM;AACf,aAAS,YAAY,GAAe;AACnC,UAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAC3C,UAAK,EAAU,2BAA4B;AAC3C,qBAAe,CAAC;AAChB,YAAM,MAAM,UAAU,cAAc,YAAY;AAChD,UAAI,CAAC,IAAK;AACV,YAAM,WAAW,IAAI,aAAa,EAAE,MAAM,CAAQ;AACjD,MAAC,SAAiB,6BAA6B;AAChD,UAAI,cAAc,QAAQ;AAAA,IAC3B;AAEA,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AAEV,QAAI,iBAAiB,aAAa,aAAa,EAAE,SAAS,MAAM,CAAC;AACjE,WAAO,MAAM;AACZ,UAAI,oBAAoB,aAAa,WAAW;AAAA,IACjD;AAAA,EACD,GAAG,CAAC,WAAW,QAAQ,GAAG,CAAC;AAC5B;",
6
- "names": []
7
- }
@@ -1,32 +0,0 @@
1
- import { RefObject, useEffect } from 'react'
2
- import { preventDefault } from '../utils/dom'
3
- import { useContainer } from './useContainer'
4
- import { useMaybeEditor } from './useEditor'
5
-
6
- /** @public */
7
- export function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement | null>) {
8
- if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
9
- const container = useContainer()
10
- const editor = useMaybeEditor()
11
-
12
- useEffect(() => {
13
- function onMouseOver(e: MouseEvent) {
14
- if (!editor?.getInstanceState().isFocused) return
15
- if ((e as any).isSpecialRedispatchedEvent) return
16
- preventDefault(e)
17
- const cvs = container.querySelector('.tl-canvas')
18
- if (!cvs) return
19
- const newEvent = new PointerEvent(e.type, e as any)
20
- ;(newEvent as any).isSpecialRedispatchedEvent = true
21
- cvs.dispatchEvent(newEvent)
22
- }
23
-
24
- const elm = ref.current
25
- if (!elm) return
26
-
27
- elm.addEventListener('mouseover', onMouseOver, { passive: false })
28
- return () => {
29
- elm.removeEventListener('mouseover', onMouseOver)
30
- }
31
- }, [container, editor, ref])
32
- }