@erudit-js/prose 3.0.0-dev.25

package/dist/elements/details/core.d.ts

@@ -0,0 +1,68 @@
+import { type AnySchema, type Tag, type TagChildren, type Unique } from '@jsprose/core';
+import { type NoSnippet, type NoToc } from '../../tag.js';
+export interface DetailsData {
+    title?: string;
+}
+export declare const detailsSchema: {
+    name: "details";
+    type: "block";
+    linkable: true;
+    Data: DetailsData;
+    Storage: undefined;
+    Children: AnySchema[];
+};
+export declare const detailsTagName = "Details";
+export declare const Details: Tag<"Details", {
+    name: "details";
+    type: "block";
+    linkable: true;
+    Data: DetailsData;
+    Storage: undefined;
+    Children: AnySchema[];
+}, {
+    title?: string;
+    $: Unique<Tag<typeof detailsTagName, typeof detailsSchema, any>>;
+} & TagChildren & NoToc & NoSnippet>;
+export declare const detailsRegistryItem: import("@jsprose/core").RegistryItem<{
+    name: "details";
+    type: "block";
+    linkable: true;
+    Data: DetailsData;
+    Storage: undefined;
+    Children: AnySchema[];
+}, {
+    Details: Tag<"Details", {
+        name: "details";
+        type: "block";
+        linkable: true;
+        Data: DetailsData;
+        Storage: undefined;
+        Children: AnySchema[];
+    }, {
+        title?: string;
+        $: Unique<Tag<typeof detailsTagName, typeof detailsSchema, any>>;
+    } & TagChildren & NoToc & NoSnippet>;
+}, undefined>;
+declare const _default: {
+    registryItem: import("@jsprose/core").RegistryItem<{
+        name: "details";
+        type: "block";
+        linkable: true;
+        Data: DetailsData;
+        Storage: undefined;
+        Children: AnySchema[];
+    }, {
+        Details: Tag<"Details", {
+            name: "details";
+            type: "block";
+            linkable: true;
+            Data: DetailsData;
+            Storage: undefined;
+            Children: AnySchema[];
+        }, {
+            title?: string;
+            $: Unique<Tag<typeof detailsTagName, typeof detailsSchema, any>>;
+        } & TagChildren & NoToc & NoSnippet>;
+    }, undefined>;
+};
+export default _default;

package/dist/elements/details/core.js

@@ -0,0 +1,30 @@
+import { defineRegistryItem, defineSchema, ensureTagChildren, ProseError } from "@jsprose/core";
+import { defineEruditProseCoreElement } from "../../coreElement.js";
+import { defineEruditTag } from "../../tag.js";
+export const detailsSchema = defineSchema({
+	name: "details",
+	type: "block",
+	linkable: true
+})();
+export const detailsTagName = "Details";
+export const Details = defineEruditTag({
+	tagName: detailsTagName,
+	schema: detailsSchema
+})(({ element, tagName, children, props }) => {
+	if (!element.uniqueName) {
+		throw new ProseError(`<${tagName}> must be connected to unique!`);
+	}
+	ensureTagChildren(tagName, children);
+	element.children = children;
+	const title = props.title?.trim();
+	if (title) {
+		element.data = { title };
+		element.slug = title;
+		element.title = title;
+	}
+});
+export const detailsRegistryItem = defineRegistryItem({
+	schema: detailsSchema,
+	tags: [Details]
+});
+export default defineEruditProseCoreElement({ registryItem: detailsRegistryItem });

package/dist/elements/details/icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34">
+  <path d="M30.3,11.3c-.56-.56-1.52-.56-2.08,0l-1.92,2c-1.04-.96-2.32-1.92-3.85-2.56l.8-2.72c.24-.8-.16-1.68-.96-1.92-.8-.24-1.6.24-1.84,1.04l-.8,2.72c-1.6-.32-3.53-.32-5.13,0l-.8-2.72c-.24-.8-1.04-1.28-1.84-1.04s-1.2,1.12-.96,1.92l.8,2.72c-1.52.72-2.8,1.6-3.85,2.56l-1.92-2c-.56-.56-1.52-.56-2.08,0-.56.56-.56,1.52,0,2.16l2,2.16c-1.12,1.52-1.6,2.8-1.6,3.21,0,1.04,4.09,9.14,12.74,9.14s12.74-8.09,12.74-9.14-.56-1.68-1.6-3.21l2-2.16c.56-.56.56-1.52,0-2.16h.16ZM17.08,24.92c-5.85,0-8.82-4.57-9.7-6.09.64-1.2,2.72-4.33,6.41-5.61h.24c.88-.24,1.92-.4,3.05-.4s2.08.16,3.05.4h.24c3.77,1.2,5.77,4.33,6.41,5.61-.88,1.52-3.85,6.09-9.7,6.09ZM18.2,13.95c-2.56-.64-5.13.96-5.77,3.77-.64,2.64.96,5.37,3.53,6.01.4.08.72.16,1.12.16.88,0,1.68-.24,2.48-.72,1.12-.72,1.84-1.76,2.16-3.05v-.08c.32-1.28.08-2.64-.56-3.77-.64-1.12-1.68-1.92-2.97-2.24v-.08ZM18.84,19.31c-.08.48-.4.96-.8,1.2s-.88.32-1.36.24c-.96-.24-1.6-1.28-1.36-2.4.24-.88.96-1.44,1.76-1.44s.32,0,.4,0h0c.48.16.88.4,1.12.88.24.4.32.96.16,1.52h.08Z"/>
+</svg>

package/dist/elements/details/languages/en.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    element_name: string;
+};
+export default _default;

package/dist/elements/details/languages/en.js

@@ -0,0 +1,2 @@
+import { defineElementLanguage } from "../../../app/language/element.js";
+export default defineElementLanguage({ element_name: "Details" });

package/dist/elements/details/languages/ru.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    element_name: string;
+};
+export default _default;

package/dist/elements/details/languages/ru.js

@@ -0,0 +1,2 @@
+import { defineElementLanguage } from "../../../app/language/element.js";
+export default defineElementLanguage({ element_name: "Пояснение" });

package/dist/elements/diagram/Diagram.vue

@@ -0,0 +1,364 @@
+<script lang="ts" setup>
+import {
+    nextTick,
+    onMounted,
+    onUnmounted,
+    ref,
+    shallowRef,
+    useCssModule,
+    useId,
+    useTemplateRef,
+} from 'vue';
+import type { ProseElement } from '@jsprose/core';
+
+import type { diagramSchema } from './core.js';
+import { usePhotoSwipe } from '../../app/shared/photoswipe/composable.js';
+import { useProseContext } from '../../app/composables/context.js';
+import Caption from '../caption/Caption.vue';
+import Block from '../../app/shared/block/Block.vue';
+
+const { element } = defineProps<{
+    element: ProseElement<typeof diagramSchema>;
+}>();
+
+const style = useCssModule();
+const { EruditIcon, loadingSvg } = useProseContext();
+const loading = ref(true);
+const diagramRendering = ref(false);
+const dummyMathHtml = ref('');
+const diagramContent = ref(element.children[0].data);
+const diagramSvgContent = ref('');
+const diagramElement = useTemplateRef('diagram');
+const diagramSvgElement = useTemplateRef('diagramSvg');
+const diagramUid = useId();
+const captionElement = shallowRef<HTMLElement>();
+const { lightbox, initLightbox } = usePhotoSwipe();
+const latexRegex = {
+    display: /\$\$(.*?)\$\$/gs,
+    inline: /\$(?!\$)(.*?)(?<!\$)\$/gs,
+};
+
+let observer: IntersectionObserver;
+
+onMounted(async () => {
+    if (hasLatex(diagramContent.value)) {
+        await prepareMathDiagram();
+    }
+
+    observer = new IntersectionObserver(diagramIntersectHit, {
+        root: null,
+        threshold: 0.01,
+    });
+    observer.observe(diagramElement.value!);
+});
+
+onUnmounted(() => {
+    if (observer) {
+        observer.disconnect();
+    }
+});
+
+function diagramClick() {
+    if (!lightbox.value) {
+        const svgElement = diagramSvgElement.value!.querySelector('svg')!;
+
+        const slideSvg = svgElement.cloneNode(true) as SVGSVGElement;
+        slideSvg.removeAttribute('width');
+        slideSvg.removeAttribute('style');
+        slideSvg.classList.add(style.diagram);
+
+        let slideRoot: HTMLElement | SVGSVGElement = slideSvg;
+        const accentAncestor = diagramElement.value!.closest(
+            '[data-prose-accent]',
+        );
+        if (accentAncestor) {
+            const wrapper = document.createElement('div');
+            wrapper.setAttribute('data-prose-accent', '');
+            const computed = getComputedStyle(accentAncestor as Element);
+            for (const prop of computed) {
+                if (prop.startsWith('--accent')) {
+                    const val = computed.getPropertyValue(prop).trim();
+                    if (val) {
+                        wrapper.style.setProperty(prop, val);
+                    }
+                }
+            }
+            wrapper.appendChild(slideSvg);
+            slideRoot = wrapper;
+        }
+
+        const width = Math.min(1000, 0.9 * window.innerWidth);
+        const scaleHeightFactor =
+            svgElement.clientHeight / svgElement.clientWidth;
+
+        const html = `
+            <div class="pswp__img-overlay-wrapper" style="position: relative">
+                <div class="pswp__img" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></div>
+                ${slideRoot.outerHTML}
+            </div>
+        `;
+        initLightbox(
+            {
+                dataSource: [
+                    {
+                        html,
+                        width: width,
+                        height: width * scaleHeightFactor,
+                    },
+                ],
+            },
+            captionElement.value,
+        );
+    }
+    lightbox.value!.loadAndOpen(0);
+}
+
+//
+//
+//
+
+function hasLatex(content: string): boolean {
+    return latexRegex.display.test(content) || latexRegex.inline.test(content);
+}
+
+async function prepareMathDiagram() {
+    await import('katex/dist/katex.min.css');
+    const katex = await import('katex');
+
+    const globalCode = '__ERUDIT_DIAGRAM_MATH_DUMMY__';
+
+    if (!(window as any)[globalCode]) {
+        dummyMathHtml.value = katex.renderToString(
+            '\\sum_{i=1}^n i^2 = \\frac{n(n+1)(2n+1)}{6}',
+            {
+                displayMode: true,
+            },
+        );
+        (window as any)[globalCode] = true;
+    }
+
+    const renderMathWithKatex = (
+        text: string,
+        regex: RegExp,
+        displayMode: boolean,
+    ): string => {
+        return text.replace(regex, (_, latexContent) => {
+            return katex.renderToString(latexContent, {
+                displayMode,
+            });
+        });
+    };
+
+    diagramContent.value = renderMathWithKatex(
+        diagramContent.value,
+        latexRegex.display,
+        true,
+    );
+
+    diagramContent.value = renderMathWithKatex(
+        diagramContent.value,
+        latexRegex.inline,
+        false,
+    );
+
+    await nextTick();
+    await new Promise(requestAnimationFrame);
+}
+
+async function diagramIntersectHit(entries: IntersectionObserverEntry[]) {
+    if (!entries.some((e) => e.isIntersecting)) return;
+    if (!loading.value || diagramRendering.value) return;
+
+    diagramRendering.value = true;
+    await renderDiagram();
+    diagramRendering.value = false;
+    loading.value = false;
+
+    observer.disconnect();
+
+    await nextTick();
+    const svg = diagramSvgElement.value?.querySelector('svg');
+    if (svg) {
+        svg.addEventListener('click', diagramClick);
+    }
+}
+
+async function renderDiagram() {
+    const mermaid = (await import('mermaid')).default;
+
+    mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: 'loose',
+        markdownAutoWrap: false,
+        flowchart: {
+            useMaxWidth: true,
+            padding: 10,
+            wrappingWidth: 400,
+        },
+        theme: 'base',
+    });
+
+    const { svg } = await mermaid.render(diagramUid, diagramContent.value);
+
+    diagramSvgContent.value = svg;
+}
+</script>
+
+<template>
+    <Block :element>
+        <div
+            class="fixed -top-[9999px] -left-[9999px]"
+            v-html="dummyMathHtml"
+        ></div>
+        <div ref="diagram">
+            <div v-if="loading" class="p-normal text-center">
+                <EruditIcon
+                    :name="loadingSvg"
+                    class="text-text-dimmed inline text-[60px]"
+                />
+            </div>
+            <div
+                v-else
+                ref="diagramSvg"
+                v-html="diagramSvgContent"
+                :class="$style.diagram"
+            ></div>
+        </div>
+        <Caption
+            v-if="element.children[1]"
+            :caption="element.children[1]"
+            @captionMounted="(element) => (captionElement = element)"
+        />
+    </Block>
+</template>
+
+<style module>
+.diagram {
+    > svg {
+        margin: auto;
+        cursor: pointer;
+    }
+
+    /* Text color */
+
+    :global(.edgeLabel) {
+        *:not(.katex *):not(.katex) {
+            color: var(--color-text-muted) !important;
+        }
+    }
+
+    :global(.nodeLabel) {
+        *:not(.katex *):not(.katex) {
+            color: var(--color-text) !important;
+        }
+    }
+
+    /* Arrows */
+
+    --arrowColor: var(--color-text-dimmed);
+
+    :global(.flowchart-link) {
+        stroke: var(--arrowColor) !important;
+    }
+
+    :global(.edge-thickness-normal) {
+        stroke-width: 2px !important;
+    }
+
+    :global(.edge-pattern-dotted) {
+        stroke-width: 2px !important;
+        stroke-dasharray: 3 2.2 !important;
+    }
+
+    :global(.marker) {
+        fill: var(--arrowColor) !important;
+        stroke: var(--arrowColor) !important;
+    }
+
+    :global(.edgeLabel) * {
+        background: var(--color-bg-main) !important;
+    }
+
+    [data-prose-accent] & {
+        --arrowColor: color-mix(
+            in hsl,
+            var(--accentText) 45%,
+            var(--accentBackground)
+        );
+
+        :global(.edgeLabel) * {
+            background: var(--accentBackground) !important;
+        }
+    }
+
+    /* Nodes */
+
+    :global(.node) rect,
+    :global(.node) path,
+    :global(.node) polygon,
+    :global(.node) circle,
+    :global(.node) ellipse {
+        fill: color-mix(in hsl, var(--color-brand) 20%, transparent) !important;
+        stroke: color-mix(
+            in hsl,
+            var(--color-brand) 35%,
+            transparent
+        ) !important;
+    }
+
+    [data-prose-accent] & {
+        :global(.node) rect,
+        :global(.node) path,
+        :global(.node) polygon,
+        :global(.node) circle,
+        :global(.node) ellipse {
+            fill: color-mix(
+                in hsl,
+                var(--accentText) 30%,
+                var(--accentBackground)
+            ) !important;
+            stroke: color-mix(
+                in hsl,
+                var(--accentText) 45%,
+                var(--accentBackground)
+            ) !important;
+        }
+    }
+
+    /* "fill" node modificator */
+
+    :global(.fill) {
+        *:not(.katex *):not(.katex) {
+            color: white !important;
+        }
+
+        rect,
+        path,
+        polygon,
+        circle,
+        ellipse {
+            fill: color-mix(
+                in hsl,
+                var(--color-brand) 75%,
+                transparent
+            ) !important;
+            stroke: transparent !important;
+        }
+
+        [data-prose-accent] & {
+            rect,
+            path,
+            polygon,
+            circle,
+            ellipse {
+                fill: color-mix(
+                    in hsl,
+                    var(--accentText) 70%,
+                    var(--color-border)
+                ) !important;
+                stroke: transparent !important;
+            }
+        }
+    }
+}
+</style>

package/dist/elements/diagram/_global.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Diagrams written in [Mermaid](https://mermaid.js.org/syntax/flowchart.html) syntax.
+ *
+ * Diagrams can optionally have a `<Caption>` as their last child.
+ *
+ * @title Diagram
+ * @layout block
+ * @example
+ * ```tsx
+ * <Diagram>
+ *   {`
+ *       flowchart TD
+ *         A[Start] --> B{Is it working?}
+ *   `}
+ *   <Caption>Simple flowchart diagram</Caption>
+ * </Diagram>
+ * ```
+ */
+export const Diagram = '_tag_';

package/dist/elements/diagram/app.d.ts

@@ -0,0 +1,30 @@
+declare const _default: import("../../app/appElement.js").AppElement<{
+    name: "diagram";
+    type: "block";
+    linkable: true;
+    Data: undefined;
+    Storage: undefined;
+    Children: [{
+        name: "text";
+        type: "inliner";
+        linkable: false;
+        Data: string;
+        Storage: undefined;
+        Children: undefined;
+    }] | [{
+        name: "text";
+        type: "inliner";
+        linkable: false;
+        Data: string;
+        Storage: undefined;
+        Children: undefined;
+    }, {
+        name: "caption";
+        type: "inliner";
+        linkable: false;
+        Data: import("../caption/core.js").CaptionData | undefined;
+        Storage: undefined;
+        Children: import("@jsprose/core").InlinerSchema[];
+    }];
+}>;
+export default _default;

package/dist/elements/diagram/app.js

@@ -0,0 +1,11 @@
+import { defineEruditProseAppElement } from "../../app/appElement.js";
+import { diagramSchema } from "./core.js";
+export default defineEruditProseAppElement({
+	schema: diagramSchema,
+	component: () => import("./Diagram.vue"),
+	languages: {
+		en: () => import("./languages/en.js"),
+		ru: () => import("./languages/ru.js")
+	},
+	icon: () => import("./icon.svg?raw")
+});