tldraw using /sync

assets/_tldrawOverrides.css

@@ -0,0 +1,12 @@
+.tl-container {
+    --layer-background: 20;
+    --layer-grid: 21;
+    --layer-canvas: 22;
+    --layer-shapes: 30;
+    --layer-panels: 30;
+    --layer-menus: 31;
+    --layer-overlays: 32;
+    --layer-toasts: 33;
+    --layer-cursor: 34;
+    --layer-following-indicator: 35;
+}

components/TldrawEditor.js

@@ -0,0 +1,54 @@
+import {
+    ArrowToolbarItem,
+    DefaultToolbar,
+    DrawToolbarItem,
+    EllipseToolbarItem,
+    HandToolbarItem,
+    HighlightToolbarItem,
+    NoteToolbarItem,
+    RectangleToolbarItem,
+    SelectToolbarItem,
+    Tldraw,
+} from 'tldraw';
+import { getAssetUrls } from '@tldraw/assets/selfHosted';
+import React from 'react';
+const assetUrls = getAssetUrls({ baseUrl: '/assets/tldraw' }); //we have to place this outside the component to not trigger this function each time the content of the editor changes
+
+/**
+ * Make sure to use NextJS' `dynamic()` helper to import this component.
+ *
+ * @param {Object} props
+ * @returns {React.ReactElement}
+ */
+const TldrawEditor = (props) => {
+    return (
+        <Tldraw
+            inferDarkMode
+            assetUrls={assetUrls}
+            autoFocus={false}
+            components={{
+                MainMenu: null,
+                PageMenu: null,
+                Toolbar: (props) => (
+                    /**
+                     * Check out https://github.com/tldraw/tldraw/discussions/3229 and the link below on how to use this
+                     * https://github.com/tldraw/tldraw/blob/cd02d03d063b50d93d840aa8194aeced43a6a9c5/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbarContent.tsx#L6-L39
+                     */
+                    <DefaultToolbar {...props}>
+                        <SelectToolbarItem />
+                        <HandToolbarItem />
+                        <DrawToolbarItem />
+                        <HighlightToolbarItem />
+                        <ArrowToolbarItem />
+                        <EllipseToolbarItem />
+                        <RectangleToolbarItem />
+                        <NoteToolbarItem />
+                    </DefaultToolbar>
+                ),
+            }}
+            {...props}
+        />
+    );
+};
+
+export default TldrawEditor;

components/layouts/partials/navigation.js

@@ -85,6 +85,13 @@ export default function Navigation({ closeNavigation }) {
                         </Link>
                     </li>
                 )}
+                { _.get(getConfig(), 'publicRuntimeConfig.authProviders.tldraw.path') && (
+                    <li>
+                        <Link href={getConfig().publicRuntimeConfig.authProviders.tldraw.path}>
+                            { getConfig().publicRuntimeConfig.authProviders.tldraw.path }
+                        </Link>
+                    </li>
+                ) }
             </List>
             <List>
                 <li>

config.example.js

@@ -18,6 +18,8 @@ module.exports = {
         //     path: '/sketch',
         //     baseUrl: 'http://spacedeck.localhost',
         // },
+        tldraw: {
+        },
     },
     // contextRootSpaceRoomId: '!gB.....Ewlvdq:matrix.org',
     account: {

lib/Auth.js

@@ -7,6 +7,7 @@ import MatrixAuthProvider from './auth/MatrixAuthProvider';
 import PeerTubeAuthProvider from './auth/PeerTubeAuthProvider';
 import MyPadsAuthProvider from './auth/MyPadsAuthProvider';
 import SpacedeckAuthProvider from './auth/SpacedeckAuthProvider';
+import TldrawAuthProvider from '@/lib/auth/TldrawAuthProvider';
 
 /*
     Mapping of authentication provider types and which corresponding class should be used to actually perform
@@ -19,6 +20,7 @@ const AuthProviders = {
     peerTube: PeerTubeAuthProvider,
     etherpad: MyPadsAuthProvider,
     spacedeck: SpacedeckAuthProvider,
+    tldraw: TldrawAuthProvider,
 };
 
 function useAuthProvider() {

lib/Matrix.js

@@ -2,7 +2,7 @@ import { createContext, useCallback, useContext, useEffect, useState } from 'rea
 import getConfig from 'next/config';
 import _ from 'lodash';
 import { useImmer } from 'use-immer';
-import { ClientEvent, EventTimeline, EventType, RoomEvent } from 'matrix-js-sdk';
+import { ClientEvent, EventTimeline, EventType, RoomEvent, PushRuleKind, PushRuleActionName } from 'matrix-js-sdk';
 
 import logger from './Logging';
 
@@ -49,6 +49,21 @@ function useMatrixProvider(auth) {
 
             const roomState = room.getLiveTimeline().getState(EventTimeline.FORWARDS);
 
+            const pushRules = matrixClient.getAccountData('m.push_rules')?.event?.content?.global?.override;
+            const rule = pushRules?.find((rule) => rule.rule_id === roomId);
+            const metaEvent = roomState.getStateEvents('dev.medienhaus.meta', '')?.getContent();
+
+            // we check if we have an metaevent avaialble and if the template is 'sketch-link' and if the rule is not set to 'dont_notify' we will set a push rule to 'dont_notify' for this room
+            // for future purposes we should not check for item instead for the templates which needs to be muted
+            if (metaEvent && metaEvent.type === 'item') {
+                if (!rule || !rule?.actions.includes(PushRuleActionName.DontNotify)) {
+                    matrixClient.addPushRule('global', PushRuleKind.Override, roomId, {
+                        conditions: [{ kind: 'event_match', key: 'room_id', pattern: roomId }],
+                        actions: [PushRuleActionName.DontNotify],
+                    });
+                }
+            }
+
             return {
                 roomId,
                 name: room.name,
@@ -212,6 +227,7 @@ function useMatrixProvider(auth) {
          */
         (event, room) => {
             // If this is a timeline event for a room that we're not a member of, we want to ignore it
+            // console.log('RoomTimelineEvent', event, room);
             if (room.getMyMembership() !== 'join') return;
 
             // Update our room-typical stores (rooms, spaces, directMessages)

lib/Tldraw.js

@@ -0,0 +1,5 @@
+import getConfig from 'next/config';
+
+const path = getConfig().publicRuntimeConfig.authProviders.tldraw?.path || '/draw';
+
+export { path };

lib/auth/TldrawAuthProvider.js

@@ -0,0 +1,10 @@
+/**
+ * This is a stub. tldraw is not -really- an authentication provider.
+ * (see https://github.com/medienhaus/medienhaus-spaces/issues/152)
+ */
+class TldrawAuthProvider {
+    signin() {}
+    signout() {}
+}
+
+export default TldrawAuthProvider;

next.config.js

@@ -39,6 +39,19 @@ module.exports = {
             );
         }
 
+        if (SpacesConfig.authProviders.tldraw) {
+            rewriteConfig.push(
+                {
+                    source: SpacesConfig.authProviders.tldraw.path,
+                    destination: '/tldraw',
+                },
+                {
+                    source: SpacesConfig.authProviders.tldraw.path + '/:roomId',
+                    destination: '/tldraw/:roomId',
+                },
+            );
+        }
+
         return rewriteConfig;
     },
 };