@erudit-js/prose 3.0.0-dev.25

package/dist/app/shared/block/AsideMenuButton.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { useProseContext } from '../../composables/context.js';
+
+const { icon, title } = defineProps<{
+    icon: string;
+    title: string;
+    brand?: boolean;
+}>();
+
+const { EruditIcon, EruditTransition } = useProseContext();
+
+const key = ref(0);
+watch(
+    () => [icon, title],
+    () => {
+        key.value++;
+    },
+);
+</script>
+
+<template>
+    <button
+        :class="[
+            `relative cursor-pointer text-left text-xs
+            transition-[color,background]`,
+            brand
+                ? 'text-brand bg-brand/10'
+                : 'hocus:bg-bg-accent text-text-muted hocus:text-text',
+        ]"
+    >
+        <div
+            class="pointer-events-none invisible flex touch-none flex-wrap
+                items-center gap-(--asideMenuGapBig) px-(--asideMenuGapBig)
+                py-(--asideMenuGap)"
+        >
+            <EruditIcon :name="icon" class="shrink-0 text-[1.2em]" />
+            <div>{{ title }}</div>
+        </div>
+        <EruditTransition>
+            <div
+                :key
+                class="absolute top-0 left-0 flex flex-wrap items-center
+                    gap-(--asideMenuGapBig) px-(--asideMenuGapBig)
+                    py-(--asideMenuGap)"
+            >
+                <EruditIcon :name="icon" class="shrink-0 text-[1.2em]" />
+                <div>{{ title }}</div>
+            </div>
+        </EruditTransition>
+    </button>
+</template>

package/dist/app/shared/block/AsideMenuCopyLink.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useProseContext } from '../../composables/context.js';
+import { useProseLanguage } from '../../composables/language.js';
+import AsideMenuButton from './AsideMenuButton.vue';
+import shareIcon from '../assets/share.svg?raw';
+import checkIcon from '../assets/check.svg?raw';
+
+const { elementId } = defineProps<{
+    elementId: string;
+}>();
+
+const { pathUrl, baseUrl } = useProseContext();
+const prosePhrase = await useProseLanguage();
+
+const copied = ref(false);
+let resetTimer: number | undefined;
+
+async function copyLink() {
+    await navigator.clipboard.writeText(
+        location.origin + baseUrl + pathUrl.substring(1) + '#' + elementId,
+    );
+    copied.value = true;
+    if (resetTimer) clearTimeout(resetTimer);
+    resetTimer = window.setTimeout(() => {
+        copied.value = false;
+        resetTimer = undefined;
+    }, 2500);
+}
+</script>
+
+<template>
+    <AsideMenuButton
+        :brand="copied"
+        :icon="copied ? checkIcon : shareIcon"
+        :title="copied ? prosePhrase.copied : prosePhrase.copy_link"
+        @click="copyLink"
+    />
+</template>

package/dist/app/shared/block/AsideMenuSeparator.vue

@@ -0,0 +1,3 @@
+<template>
+    <hr class="border-border/80 my-(--asideMenuGap)" />
+</template>

package/dist/app/shared/block/Block.vue

@@ -0,0 +1,270 @@
+<script lang="ts" setup>
+import {
+    onBeforeUnmount,
+    onMounted,
+    ref,
+    useTemplateRef,
+    watch,
+    watchEffect,
+} from 'vue';
+import { useFloating, autoUpdate, offset, shift } from '@floating-ui/vue';
+import type { BlockSchema, ProseElement } from '@jsprose/core';
+
+import { useProseContext } from '../../composables/context.js';
+import { useElementIcon } from '../../composables/elementIcon.js';
+import {
+    useIsAnchor,
+    useJumpToAnchor,
+    useResolveAnchor,
+} from '../../composables/anchor.js';
+import AsideMenu from './AsideMenu.vue';
+
+const { element } = defineProps<{ element: ProseElement<BlockSchema> }>();
+const { EruditIcon, EruditTransition } = useProseContext();
+const elementIcon = await useElementIcon(element);
+
+const blockElement = useTemplateRef('block');
+const asideElement = useTemplateRef('aside');
+const asideMenuElement = useTemplateRef('asideMenu');
+const hover = ref(false);
+const menuVisible = ref(false);
+
+const { floatingStyles: floatingMenuStyle } = useFloating(
+    asideElement,
+    asideMenuElement,
+    {
+        whileElementsMounted: autoUpdate,
+        placement: 'right-start',
+        strategy: 'fixed',
+        middleware: [offset(10), shift({ rootBoundary: 'viewport' })],
+    },
+);
+
+const outsideClickHandler = (e: MouseEvent) => {
+    if (!menuVisible.value) return;
+    const aside = asideElement.value;
+    if (!aside) return;
+    if (aside.contains(e.target as Node)) return;
+    menuVisible.value = false;
+};
+
+const isAnchor = useIsAnchor(element);
+const jumpToAnchor = useJumpToAnchor();
+const resolveAnchor = useResolveAnchor();
+
+/**
+ * Waits for the element's position to be stable in the viewport before resolving the anchor.
+ * Stability is defined as the element remaining in the same position for some duration.
+ * If the element moves during this period, the timer is reset.
+ *
+ * @param element - The DOM element to monitor for position stability
+ * @param onStable - Callback to execute once the element is stable
+ * @param onCleanup - Vue's cleanup callback to register cleanup handlers
+ */
+const waitForStablePosition = (
+    element: HTMLElement,
+    onStable: () => void,
+    onCleanup: (fn: () => void) => void,
+) => {
+    const stableDuration = 300;
+
+    let lastPosition = { top: 0, left: 0 };
+    let stableTimer: number | undefined;
+    let animationFrameId: number | undefined;
+    let resolved = false;
+
+    /**
+     * Continuously checks if the element's position has changed.
+     * If a change is detected, the stability timer is reset.
+     * Uses requestAnimationFrame for efficient, synchronized position monitoring.
+     */
+    const checkStability = () => {
+        if (resolved) return;
+
+        const rect = element.getBoundingClientRect();
+        const currentPosition = { top: rect.top, left: rect.left };
+
+        // Detect position changes and reset stability timer
+        if (
+            lastPosition.top !== currentPosition.top ||
+            lastPosition.left !== currentPosition.left
+        ) {
+            lastPosition = currentPosition;
+            clearTimeout(stableTimer);
+
+            // Start new 200ms countdown for stability
+            stableTimer = window.setTimeout(() => {
+                resolved = true;
+                onStable();
+            }, stableDuration);
+        }
+
+        // Continue monitoring on next frame
+        animationFrameId = requestAnimationFrame(checkStability);
+    };
+
+    // Initialize tracking with current position
+    const initialRect = element.getBoundingClientRect();
+    lastPosition = { top: initialRect.top, left: initialRect.left };
+
+    // Start initial stability timer
+    stableTimer = window.setTimeout(() => {
+        resolved = true;
+        cancelAnimationFrame(animationFrameId!);
+        onStable();
+    }, stableDuration);
+
+    // Begin position monitoring
+    animationFrameId = requestAnimationFrame(checkStability);
+
+    // Cleanup timers and animation frames when effect is disposed
+    onCleanup(() => {
+        clearTimeout(stableTimer);
+        if (animationFrameId !== undefined) {
+            cancelAnimationFrame(animationFrameId);
+        }
+    });
+};
+
+watch(menuVisible, (visible) => {
+    if (visible) {
+        document.addEventListener('click', outsideClickHandler);
+    } else {
+        document.removeEventListener('click', outsideClickHandler);
+    }
+});
+
+onMounted(() => {
+    watchEffect(async (onCleanup) => {
+        if (isAnchor.value) {
+            jumpToAnchor(blockElement.value!);
+            waitForStablePosition(
+                blockElement.value!,
+                () => {
+                    jumpToAnchor(blockElement.value!);
+                    resolveAnchor();
+                },
+                onCleanup,
+            );
+        }
+    });
+
+    hover.value = blockElement.value!.matches(':hover');
+
+    blockElement.value!.addEventListener('mouseenter', () => {
+        hover.value = true;
+    });
+
+    blockElement.value!.addEventListener('mouseleave', () => {
+        hover.value = false;
+    });
+});
+
+onBeforeUnmount(() => {
+    document.removeEventListener('click', outsideClickHandler);
+});
+</script>
+
+<template>
+    <div
+        ref="block"
+        :id="element.id"
+        :class="[$style.block, 'scroll-mt-big pr-(--proseAsideWidth)']"
+    >
+        <div :class="[$style.blockAbove, 'h-(--proseGap)']"></div>
+
+        <div class="relative">
+            <!-- Block Aside -->
+            <aside
+                ref="aside"
+                @click="menuVisible = !menuVisible"
+                class="group/aside absolute top-0 left-0 h-full
+                    w-(--proseAsideWidth) cursor-pointer"
+            >
+                <!-- Aside Background -->
+                <div
+                    class="micro:rounded-sm group-hocus/aside:bg-bg-accent
+                        absolute top-0 left-0 h-full w-full bg-transparent
+                        transition-[background]"
+                ></div>
+                <!-- Aside Icon -->
+                <div class="sticky top-0">
+                    <EruditTransition mode="out-in">
+                        <div v-if="hover" :key="elementIcon">
+                            <EruditIcon
+                                :name="elementIcon"
+                                class="text-text-dimmed
+                                    group-hocus/aside:text-text m-auto mt-0.5
+                                    aspect-square w-[80%] transition-[color]"
+                            />
+                        </div>
+                    </EruditTransition>
+                </div>
+                <!-- Aside Menu -->
+                <EruditTransition>
+                    <div
+                        ref="asideMenu"
+                        :style="floatingMenuStyle"
+                        v-if="menuVisible"
+                        @click.stop
+                        class="z-10 cursor-auto"
+                    >
+                        <AsideMenu :element />
+                    </div>
+                </EruditTransition>
+            </aside>
+
+            <!-- Block Content -->
+            <main class="relative ml-(--proseAsideWidth)">
+                <slot></slot>
+                <!-- Anchor Overlay -->
+                <EruditTransition>
+                    <div v-if="isAnchor">
+                        <div
+                            class="bg-brand animate-fade-out pointer-events-none
+                                absolute -top-(--overlayPadding)
+                                -right-(--overlayPadding)
+                                -bottom-(--overlayPadding)
+                                -left-(--overlayPadding) touch-none rounded
+                                opacity-0
+                                shadow-[0_0_18px_1px_var(--color-brand)]
+                                [--overlayPadding:5px]"
+                        ></div>
+                    </div>
+                </EruditTransition>
+            </main>
+        </div>
+
+        <div :class="[$style.blockBelow, 'h-(--proseGap)']"></div>
+    </div>
+</template>
+
+<style module>
+/* Always hide corresponding block gaps for frist/last blocks. */
+
+.block:first-child > .blockAbove {
+    display: none !important;
+}
+
+.block:last-child > .blockBelow {
+    display: none !important;
+}
+
+/* Hiding bottom block gap by default, to compensate next block's top gap. */
+
+.blockBelow {
+    display: none;
+}
+
+/* When hover/focus show block bottom gap to increase hoverable area and hide next block's top gap so no gap duplication happens. */
+
+.block:hover:has(+ .block) > .blockBelow,
+.block:focus:has(+ .block) > .blockBelow {
+    display: block;
+}
+
+.block:hover + .block > .blockAbove,
+.block:focus + .block > .blockAbove {
+    display: none;
+}
+</style>

package/dist/app/shared/inliner/Inliner.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import type { InlinerSchema, ProseElement } from '@jsprose/core';
+
+defineProps<{ element: ProseElement<InlinerSchema> }>();
+</script>
+
+<template>
+    <span>
+        <slot></slot>
+    </span>
+</template>

package/dist/app/shared/invert.d.ts

@@ -0,0 +1,2 @@
+export declare const lightInvert = "not-dark:invert not-dark:hue-rotate-180 transition-[filter]";
+export declare const darkInvert = "dark:invert dark:hue-rotate-180 transition-[filter]";

package/dist/app/shared/invert.js

@@ -0,0 +1,2 @@
+export const lightInvert = "not-dark:invert not-dark:hue-rotate-180 transition-[filter]";
+export const darkInvert = "dark:invert dark:hue-rotate-180 transition-[filter]";

package/dist/app/shared/photoswipe/composable.d.ts

@@ -0,0 +1,9 @@
+import PhotoSwipeLightbox, { type PhotoSwipeOptions } from 'photoswipe/lightbox';
+import 'photoswipe/style.css';
+import './style.css';
+export declare function usePhotoSwipe(): {
+    lightbox: import("vue").ShallowRef<PhotoSwipeLightbox | undefined, PhotoSwipeLightbox | undefined>;
+    initLightbox: (options: PhotoSwipeOptions, captionElement?: HTMLElement) => PhotoSwipeLightbox;
+    destroyLightbox: () => void;
+    patchCaptionHtml: (el: HTMLElement) => string;
+};

package/dist/app/shared/photoswipe/composable.js

@@ -0,0 +1,68 @@
+import { shallowRef, onUnmounted } from "vue";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import "photoswipe/style.css";
+import "./style.css";
+export function usePhotoSwipe() {
+	const lightbox = shallowRef();
+	const initLightbox = (options, captionElement) => {
+		lightbox.value = new PhotoSwipeLightbox({
+			pswpModule: () => import("photoswipe"),
+			imageClickAction: "toggle-controls",
+			bgClickAction: "close",
+			doubleTapAction: "zoom",
+			wheelToZoom: true,
+			bgOpacity: 1,
+			preloaderDelay: 0,
+			showAnimationDuration: 200,
+			hideAnimationDuration: 200,
+			...options
+		});
+		lightbox.value.addFilter("isContentZoomable", () => true);
+		if (captionElement) {
+			lightbox.value.on("uiRegister", () => {
+				lightbox.value.pswp?.ui?.registerElement({
+					name: "caption",
+					className: "text-xs micro:text-sm absolute bottom-0 w-full text-center p-normal bg-bg-main/50 backdrop-blur-md",
+					order: 9,
+					isButton: false,
+					appendTo: "root",
+					html: patchCaptionHtml(captionElement)
+				});
+			});
+		}
+		lightbox.value.init();
+		lightbox.value.on("contentAppend", (e) => {
+			const { content } = e;
+			if (!content || !content.element) return;
+			const el = content.element;
+			el.style.opacity = "0";
+			el.style.transition = "opacity 0.2s ease";
+			requestAnimationFrame(() => {
+				el.style.opacity = "1";
+			});
+		});
+		return lightbox.value;
+	};
+	const patchCaptionHtml = (el) => {
+		const cloned = el.cloneNode(true);
+		cloned.querySelectorAll("a[href]").forEach((a) => {
+			a.setAttribute("target", "_blank");
+		});
+		return cloned.innerHTML;
+	};
+	const destroyLightbox = () => {
+		if (lightbox.value) {
+			lightbox.value.destroy();
+			lightbox.value = undefined;
+		}
+	};
+	onUnmounted(() => {
+		destroyLightbox();
+	});
+	return {
+		lightbox,
+		initLightbox,
+		destroyLightbox,
+		patchCaptionHtml
+	};
+}

package/dist/app/shared/photoswipe/style.css

@@ -0,0 +1,26 @@
+.pswp__icn {
+    width: 40px;
+    height: 40px;
+    padding: 3px;
+    background: color-mix(
+        in srgb,
+        light-dark(#d7d7d7, #3c3c3c),
+        transparent 30%
+    );
+    border-radius: 50%;
+}
+
+:root {
+    .pswp {
+        --pswp-bg: var(--color-bg-main);
+        --pswp-placeholder-bg: transparent;
+    }
+}
+
+:root[data-theme='light'] {
+    .pswp {
+        --pswp-icon-color: #3f3f3f;
+        --pswp-icon-color-secondary: white;
+        --pswp-icon-stroke-color: #3f3f3f;
+    }
+}

package/dist/context.d.ts

@@ -0,0 +1,4 @@
+export interface EruditProseContext {
+    language: string;
+    linkable?: boolean;
+}

package/dist/context.js

@@ -0,0 +1 @@
+export {};

package/dist/coreElement.d.ts

@@ -0,0 +1,10 @@
+import type { AnyRegistryItem } from '@jsprose/core';
+export interface EruditProseCoreElement {
+    registryItem: AnyRegistryItem;
+    dependencies?: Record<string, {
+        transpile?: boolean;
+        optimize?: boolean;
+    }>;
+}
+export declare function defineEruditProseCoreElement<TElement extends EruditProseCoreElement>(coreElement: TElement): TElement;
+export declare function defineEruditProseCoreElements<TElements extends readonly EruditProseCoreElement[]>(...coreElements: [...TElements]): TElements;

package/dist/coreElement.js

@@ -0,0 +1,6 @@
+export function defineEruditProseCoreElement(coreElement) {
+	return coreElement;
+}
+export function defineEruditProseCoreElements(...coreElements) {
+	return coreElements;
+}

package/dist/elements/accent/Accent.vue

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import { shallowRef } from 'vue';
+import { type ProseElement } from '@jsprose/core';
+
+import {
+    isAccentMainElement,
+    type AccentMainSchema,
+    type AccentSchema,
+    type AccentSectionSchema,
+} from './core.js';
+import { accentSectionNamePhrase, type AccentAppOptions } from './app.js';
+import { useAppElement } from '../../app/composables/appElement.js';
+import { useElementPhrase } from '../../app/composables/language.js';
+import { useElementIcon } from '../../app/composables/elementIcon.js';
+import { useProseContext, type ElementPhrases } from '../../app/index.js';
+import { useFormatText } from '../../app/composables/formatText.js';
+import Block from '../../app/shared/block/Block.vue';
+import Render from '../../app/shared/Render.vue';
+import AccentColumnSection from './AccentColumnSection.vue';
+import AccentRowSections from './AccentRowSections.vue';
+
+const { element } = defineProps<{ element: ProseElement<AccentSchema> }>();
+
+const { EruditIcon } = useProseContext();
+const formatText = useFormatText();
+const appElement = useAppElement(element);
+const accentIcon = await useElementIcon(element);
+const phrase =
+    await useElementPhrase<ElementPhrases<Record<string, string>>>(element);
+
+const mainSection = shallowRef<ProseElement<AccentMainSchema>>();
+const sections = shallowRef<ProseElement<AccentSectionSchema>[]>([]);
+
+for (const child of element.children) {
+    if (isAccentMainElement(child)) {
+        mainSection.value = child;
+    } else {
+        sections.value.push(child);
+    }
+}
+
+const sectionTitles = sections.value.map((section) => {
+    if (section.data.type === 'manual') {
+        return formatText(section.data.title);
+    }
+
+    return formatText(phrase[accentSectionNamePhrase(section.data.name)]);
+});
+
+const accentOptions = (appElement as any)['accent'] as AccentAppOptions;
+</script>
+
+<template>
+    <Block :element>
+        <div
+            :style="{
+                '--accentText': accentOptions.colors.text,
+                '--accentBackground': accentOptions.colors.background,
+                '--accentBorder': accentOptions.colors.border,
+            }"
+            :class="[
+                `rounded-xl border border-(--accentBorder)
+                bg-(--accentBackground) transition-[background,border]`,
+            ]"
+        >
+            <div
+                class="text-main-lg flex items-center gap-(--proseAsideWidth)
+                    px-(--proseAsideWidth) py-(--proseAsideWidth) font-semibold
+                    text-(--accentText) transition-[color]"
+            >
+                <EruditIcon
+                    :name="accentIcon"
+                    class="-mr-1 shrink-0 text-[1.3em]"
+                />
+                <h2>{{ formatText(element.data.title) }}</h2>
+            </div>
+            <div class="pb-(--proseAsideWidth)">
+                <Render
+                    v-for="sectionChild of mainSection!.children"
+                    :element="sectionChild"
+                />
+            </div>
+            <AccentColumnSection
+                v-if="element.data.layout === 'column'"
+                v-for="(section, i) of sections"
+                :section
+                :title="sectionTitles[i]"
+            />
+            <AccentRowSections v-else :sections :sectionTitles />
+        </div>
+    </Block>
+</template>

package/dist/elements/accent/AccentColumnSection.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { ref, watchEffect } from 'vue';
+import type { ProseElement } from '@jsprose/core';
+
+import type { AccentSectionSchema } from './core.js';
+import { useProseContext } from '../../app/composables/context.js';
+import { useContainsAnchor } from '../../app/composables/anchor.js';
+import plusIcon from '../../app/shared/assets/plus.svg?raw';
+import Render from '../../app/shared/Render.vue';
+
+const { section } = defineProps<{
+    title: string;
+    section: ProseElement<AccentSectionSchema>;
+}>();
+
+const { EruditIcon } = useProseContext();
+const containsAnchor = useContainsAnchor(section);
+
+const opened = ref(false);
+
+watchEffect(() => {
+    if (containsAnchor.value) {
+        opened.value = true;
+    }
+});
+</script>
+
+<template>
+    <div>
+        <div
+            @click="opened = !opened"
+            class="group relative flex cursor-pointer items-center border-t
+                border-(--accentBorder) p-(--proseAsideWidth) font-medium
+                text-(--accentText) transition-[border]"
+        >
+            <div class="flex-1">{{ title }}</div>
+            <button
+                class="group-hocus:bg-(--accentBorder)/70 shrink-0 rounded
+                    bg-transparent p-0.5 transition-[background]"
+            >
+                <EruditIcon
+                    :name="plusIcon"
+                    :class="[
+                        'micro:text-[26px] text-[22px] transition-[rotate]',
+                        opened ? 'rotate-45' : '',
+                    ]"
+                />
+            </button>
+            <div
+                :class="[
+                    `absolute bottom-0 left-0 w-full border-b border-dashed
+                    border-(--accentBorder) transition-[border]`,
+                    opened ? 'opacity-100' : 'opacity-0',
+                ]"
+            ></div>
+        </div>
+        <div class="py-(--proseAsideWidth)" v-if="opened">
+            <Render v-for="child of section.children" :element="child" />
+        </div>
+    </div>
+</template>