diff --git a/src/components/Editor/Toolbar/EditorFloatingMenu.tsx b/src/components/Editor/Toolbar/EditorFloatingMenu.tsx index b2a2876a..99c93d0c 100644 --- a/src/components/Editor/Toolbar/EditorFloatingMenu.tsx +++ b/src/components/Editor/Toolbar/EditorFloatingMenu.tsx @@ -1,5 +1,6 @@ import type { Editor } from '@tiptap/core' import { Show, createEffect, createSignal } from 'solid-js' +import { isServer } from 'solid-js/web' import { renderUploadedImage } from '~/components/Upload/renderUploadedImage' import { Icon } from '~/components/_shared/Icon' import { useLocalize } from '~/context/localize' @@ -23,6 +24,7 @@ const embedData = (data: string) => { const element = document.createRange().createContextualFragment(data) const { attributes } = element.firstChild as HTMLIFrameElement const result: { src: string; width?: string; height?: string } = { src: '' } + if (isServer) return result for (let i = 0; i < attributes.length; i++) { const attribute = attributes.item(i) diff --git a/src/components/HeaderNav/Header.tsx b/src/components/HeaderNav/Header.tsx index a2619c2a..5c5533c6 100644 --- a/src/components/HeaderNav/Header.tsx +++ b/src/components/HeaderNav/Header.tsx @@ -1,6 +1,7 @@ import { A, redirect, useSearchParams } from '@solidjs/router' import { clsx } from 'clsx' import { Show, createEffect, createSignal, onCleanup, onMount } from 'solid-js' +import { isServer } from 'solid-js/web' import { useLocalize } from '~/context/localize' import { useSession } from '~/context/session' import { useUI } from '~/context/ui' @@ -53,6 +54,7 @@ export const Header = (props: Props) => { let windowScrollTop = 0 createEffect(() => { + if (isServer) return const mainContent = document.querySelector('.main-content') if (fixed() || modal() !== null) { diff --git a/src/components/NotificationsPanel/NotificationsPanel.tsx b/src/components/NotificationsPanel/NotificationsPanel.tsx index fcdd1dff..153304c5 100644 --- a/src/components/NotificationsPanel/NotificationsPanel.tsx +++ b/src/components/NotificationsPanel/NotificationsPanel.tsx @@ -1,7 +1,7 @@ import { clsx } from 'clsx' import { Show, createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js' +import { isServer } from 'solid-js/web' import { throttle } from 'throttle-debounce' - import { useLocalize } from '~/context/localize' import { PAGE_SIZE, useNotifications } from '~/context/notifications' import { useSession } from '~/context/session' @@ -9,7 +9,6 @@ import { useEscKeyDownHandler } from '~/lib/useEscKeyDownHandler' import { useOutsideClickHandler } from '~/lib/useOutsideClickHandler' import { Button } from '../_shared/Button' import { Icon } from '../_shared/Icon' - import { EmptyMessage } from './EmptyMessage' import { NotificationGroup } from './NotificationView/NotificationGroup' @@ -72,6 +71,7 @@ export const NotificationsPanel = (props: Props) => { let windowScrollTop = 0 createEffect(() => { + if (isServer) return const mainContent = document.querySelector('.main-content') if (props.isOpen && mainContent && window) { diff --git a/src/components/_shared/Lightbox/Lightbox.tsx b/src/components/_shared/Lightbox/Lightbox.tsx index b4c6b02c..bda6438a 100644 --- a/src/components/_shared/Lightbox/Lightbox.tsx +++ b/src/components/_shared/Lightbox/Lightbox.tsx @@ -1,5 +1,5 @@ import { clsx } from 'clsx' -import { Show, createEffect, createMemo, createSignal, on, onCleanup } from 'solid-js' +import { Show, createEffect, createMemo, createSignal, on, onCleanup, onMount } from 'solid-js' import { getImageUrl } from '~/lib/getThumbUrl' import { useEscKeyDownHandler } from '~/lib/useEscKeyDownHandler' @@ -23,7 +23,7 @@ export const Lightbox = (props: Props) => { const [translateX, setTranslateX] = createSignal(0) const [translateY, setTranslateY] = createSignal(0) const [transitionEnabled, setTransitionEnabled] = createSignal(false) - let lightboxRef: HTMLElement | null + const [lightboxRef, setLightboxRef] = createSignal() const handleSmoothAction = (action: () => void) => { setTransitionEnabled(true) @@ -32,11 +32,8 @@ export const Lightbox = (props: Props) => { } const closeLightbox = () => { - lightboxRef?.classList.add(styles.fadeOut) - - setTimeout(() => { - props.onClose() - }, 200) + lightboxRef()?.classList.add(styles.fadeOut) + setTimeout(props.onClose, 200) } const zoomIn = (event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { @@ -88,30 +85,30 @@ export const Lightbox = (props: Props) => { useEscKeyDownHandler(closeLightbox) - let startX = 0 - let startY = 0 - let isDragging = false + const [startX, setStartX] = createSignal(0) + const [startY, setStartY] = createSignal(0) + const [isDragging, setIsDragging] = createSignal(false) const onMouseDown: (event: MouseEvent) => void = (event) => { - startX = event.clientX - translateX() - startY = event.clientY - translateY() - isDragging = true + setStartX(event.clientX - translateX()) + setStartY(event.clientY - translateY()) + setIsDragging(true) event.preventDefault() } const onMouseMove: (event: MouseEvent) => void = (event) => { - if (isDragging) { - setTranslateX(event.clientX - startX) - setTranslateY(event.clientY - startY) + if (isDragging()) { + setTranslateX(event.clientX - startX()) + setTranslateY(event.clientY - startY()) } } - const onMouseUp: () => void = () => { - isDragging = false - } + const onMouseUp = () => setIsDragging(false) - document.addEventListener('mousemove', onMouseMove) - document.addEventListener('mouseup', onMouseUp) + onMount(() => { + document.addEventListener('mousemove', onMouseMove) + document.addEventListener('mouseup', onMouseUp) + }) onCleanup(() => { document.removeEventListener('mousemove', onMouseMove) @@ -125,7 +122,6 @@ export const Lightbox = (props: Props) => { })) let fadeTimer: string | number | NodeJS.Timeout - createEffect( on( zoomLevel, @@ -147,7 +143,7 @@ export const Lightbox = (props: Props) => { class={clsx(styles.Lightbox, props.class)} onClick={closeLightbox} onWheel={(e) => e.preventDefault()} - ref={(el) => (lightboxRef = el)} + ref={setLightboxRef} >
{`${pictureScalePercentage()}%`}
diff --git a/src/lib/createTooltip.ts b/src/lib/createTooltip.ts index b09307e8..800aeeef 100644 --- a/src/lib/createTooltip.ts +++ b/src/lib/createTooltip.ts @@ -70,11 +70,3 @@ export function createTooltip(referenceElement?: Element, tooltipElement?: HTMLE } } } - -// Usage example -const referenceElement = document.querySelector('#reference') -const tooltipElement = document.querySelector('#tooltip') -createTooltip(referenceElement as HTMLElement, tooltipElement as HTMLElement, { - placement: 'top', - offset: [0, 8] -})