enhance (wip): adjust ui on published whiteboards

src/main/frontend/extensions/tldraw.cljs

@@ -3,6 +3,7 @@
   (:require ["/frontend/tldraw-logseq" :as TldrawLogseq]
             [frontend.components.block :as block]
             [frontend.components.page :as page]
+            [frontend.config :as config]
             [frontend.db.model :as model]
             [frontend.handler.editor :as editor-handler]
             [frontend.handler.route :as route-handler]
@@ -152,6 +153,7 @@
        (tldraw {:renderers tldraw-renderers
                 :handlers (get-tldraw-handlers page-name)
                 :onMount on-mount
+                :isPublishing config/publishing?
                 :onPersist (fn [app info]
                              (state/set-state! [:whiteboard/last-persisted-at (state/get-current-repo)] (util/time-ms))
                              (util/profile "tldraw persist"

tldraw/apps/tldraw-logseq/src/app.tsx

@@ -53,6 +53,7 @@ const tools: TLReactToolConstructor<Shape>[] = [
 interface LogseqTldrawProps {
   renderers: LogseqContextValue['renderers']
   handlers: LogseqContextValue['handlers']
+  isPublishing: LogseqContextValue['isPublishing']
   model?: TLDocumentModel<Shape>
   onMount?: TLReactCallbacks<Shape>['onMount']
   onPersist?: TLReactCallbacks<Shape>['onPersist']
@@ -123,7 +124,7 @@ const AppInner = ({
   )
 }
 
-export const App = function App({ renderers, handlers, ...rest }: LogseqTldrawProps): JSX.Element {
+export const App = function App({ renderers, handlers, isPublishing, ...rest }: LogseqTldrawProps): JSX.Element {
   const memoRenders: any = React.useMemo(() => {
     return Object.fromEntries(
       Object.entries(renderers).map(([key, comp]) => {
@@ -135,6 +136,7 @@ export const App = function App({ renderers, handlers, ...rest }: LogseqTldrawPr
   const contextValue = {
     renderers: memoRenders,
     handlers: handlers,
+    isPublishing: isPublishing,
   }
 
   return (

tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx

@@ -8,9 +8,12 @@ import { TablerIcon } from '../icons'
 import { Button } from '../Button'
 import { ZoomMenu } from '../ZoomMenu'
 import * as Separator from '@radix-ui/react-separator'
+import { LogseqContext } from './../../lib/logseq-context'
 
 export const ActionBar = observer(function ActionBar(): JSX.Element {
   const app = useApp<Shape>()
+  const { isPublishing } = React.useContext(LogseqContext)
+
   const undo = React.useCallback(() => {
     app.api.undo()
   }, [app])
@@ -29,6 +32,7 @@ export const ActionBar = observer(function ActionBar(): JSX.Element {
 
   return (
     <div className="tl-action-bar">
+      {!isPublishing && (
         <div className="tl-toolbar tl-history-bar">
           <Button tooltip="Undo" onClick={undo}>
             <TablerIcon name="arrow-back-up" />
@@ -37,8 +41,9 @@ export const ActionBar = observer(function ActionBar(): JSX.Element {
             <TablerIcon name="arrow-forward-up" />
           </Button>
         </div>
+      )}
 
-      <div className="tl-toolbar tl-zoom-bar">
+      <div className={`tl-toolbar tl-zoom-bar ${isPublishing ? "" : "ml-4"}`}>
         <Button tooltip="Zoom in" onClick={zoomIn} id="tl-zoom-in">
           <TablerIcon name="plus" />
         </Button>

tldraw/apps/tldraw-logseq/src/components/AppUI.tsx

@@ -4,13 +4,18 @@ import { DevTools } from './Devtools'
 import { PrimaryTools } from './PrimaryTools'
 import { StatusBar } from './StatusBar'
 import { isDev } from '@tldraw/core'
+import { LogseqContext } from './../lib/logseq-context'
+import React from 'react'
+
 
 export const AppUI = observer(function AppUI() {
+  const { isPublishing } = React.useContext(LogseqContext)
+
   return (
     <>
       {isDev() && <StatusBar />}
       {isDev() && <DevTools />}
-      <PrimaryTools />
+      {!isPublishing && <PrimaryTools />}
       <ActionBar />
     </>
   )

tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite'
 import { TablerIcon } from '../icons'
 import { Button } from '../Button'
 import * as React from 'react'
+import { LogseqContext } from './../../lib/logseq-context'
 
 import * as ReactContextMenu from '@radix-ui/react-context-menu'
 import * as Separator from '@radix-ui/react-separator'
@@ -20,6 +21,7 @@ export const ContextMenu = observer(function ContextMenu({
 }: ContextMenuProps) {
   const app = useApp()
   const rContent = React.useRef<HTMLDivElement>(null)
+  const { isPublishing } = React.useContext(LogseqContext)
 
   const runAndTransition = (f: Function) => {
     f()
@@ -54,7 +56,7 @@ export const ContextMenu = observer(function ContextMenu({
         tabIndex={-1}
       >
         <div>
-          {app.selectedShapes?.size > 1 && (
+          {app.selectedShapes?.size > 1 && !isPublishing && (
             <>
               <ReactContextMenu.Item>
                 <div className="tl-menu-button-row pb-0">
@@ -142,7 +144,8 @@ export const ContextMenu = observer(function ContextMenu({
             </>
           )}
           {(app.selectedShapesArray.some(s => s.type === 'group' || app.getParentGroup(s)) ||
-            app.selectedShapesArray.length > 1) && (
+            app.selectedShapesArray.length > 1) &&
+            !isPublishing && (
             <>
               {app.selectedShapesArray.some(s => s.type === 'group' || app.getParentGroup(s)) && (
                 <ReactContextMenu.Item
@@ -177,6 +180,7 @@ export const ContextMenu = observer(function ContextMenu({
           )}
           {app.selectedShapes?.size > 0 && (
             <>
+              {!isPublishing && (
                 <ReactContextMenu.Item
                   className="tl-menu-item"
                   onClick={() => runAndTransition(app.cut)}
@@ -189,6 +193,7 @@ export const ContextMenu = observer(function ContextMenu({
                     </span>
                   </div>
                 </ReactContextMenu.Item>
+              )}
               <ReactContextMenu.Item
                 className="tl-menu-item"
                 onClick={() => runAndTransition(app.copy)}
@@ -203,6 +208,7 @@ export const ContextMenu = observer(function ContextMenu({
               </ReactContextMenu.Item>
             </>
           )}
+          {!isPublishing && (
             <ReactContextMenu.Item
               className="tl-menu-item"
               onClick={() => runAndTransition(app.paste)}
@@ -215,7 +221,8 @@ export const ContextMenu = observer(function ContextMenu({
                 </span>
               </div>
             </ReactContextMenu.Item>
-          {app.selectedShapes?.size === 1 && (
+          )}
+          {app.selectedShapes?.size === 1 && !isPublishing && (
             <ReactContextMenu.Item
               className="tl-menu-item"
               onClick={() => runAndTransition(() => app.paste(undefined, true))}
@@ -248,7 +255,7 @@ export const ContextMenu = observer(function ContextMenu({
               Deselect all
             </ReactContextMenu.Item>
           )}
-          {app.selectedShapes?.size > 0 && (
+          {app.selectedShapes?.size > 0 && !isPublishing && (
             <>
               <ReactContextMenu.Item
                 className="tl-menu-item"
@@ -262,7 +269,7 @@ export const ContextMenu = observer(function ContextMenu({
                   </span>
                 </div>
               </ReactContextMenu.Item>
-              {app.selectedShapes?.size > 1 && (
+              {app.selectedShapes?.size > 1 && !isPublishing && (
                 <>
                   <ReactContextMenu.Separator className="menu-separator" />
                   <ReactContextMenu.Item
@@ -281,6 +288,8 @@ export const ContextMenu = observer(function ContextMenu({
                   </ReactContextMenu.Item>
                 </>
               )}
+              {!isPublishing && (
+                <>
               <ReactContextMenu.Separator className="menu-separator" />
               <ReactContextMenu.Item
                 className="tl-menu-item"
@@ -303,7 +312,8 @@ export const ContextMenu = observer(function ContextMenu({
                     <code>⇧</code> <code>[</code>
                   </span>
                 </div>
-              </ReactContextMenu.Item>
+              </ReactContextMenu.Item>)
+              </>)}
 
               {developerMode && (
                 <ReactContextMenu.Item

tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts

@@ -57,6 +57,7 @@ export interface LogseqContextValue {
     redirectToPage: (uuidOrPageName: string) => void
     copyToClipboard: (text: string, html: string) => void
   }
+  isPublishing: boolean
 }
 
 export const LogseqContext = React.createContext<LogseqContextValue>({} as LogseqContextValue)

tldraw/apps/tldraw-logseq/src/styles.css

@@ -150,10 +150,6 @@ html[data-theme='light'] {
   color: whites;
 }
 
-.tl-zoom-bar {
-  @apply ml-4;
-}
-
 .tl-action-bar {
   @apply absolute bottom-0 flex items-center border-0 left-10 bottom-10;