@erudit-js/prose 3.0.0-dev.25

package/dist/elements/callout/Callout.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { ProseElement } from '@jsprose/core';
+
+import type { calloutSchema } from './core.js';
+import { useElementStorage } from '../../app/composables/storage.js';
+import { useFormatText } from '../../app/composables/formatText.js';
+import Block from '../../app/shared/block/Block.vue';
+import Render from '../../app/shared/Render.vue';
+
+const { element } = defineProps<{
+    element: ProseElement<typeof calloutSchema>;
+}>();
+const calloutStorage = await useElementStorage<typeof calloutSchema>(element);
+const formatText = useFormatText();
+</script>
+
+<template>
+    <Block :element>
+        <div
+            :style="{ '--calloutBg': 'light-dark(#f7f7f7, #1c1c1c)' }"
+            class="gap-big flex"
+        >
+            <div class="max-micro:hidden shrink-0">
+                <img
+                    :src="calloutStorage.resolvedIconSrc"
+                    loading="lazy"
+                    class="outline-border size-[60px] rounded-full border-2
+                        border-transparent outline-2 transition-[outline]"
+                />
+            </div>
+            <div
+                class="border-border/90 relative flex-1 rounded-xl border
+                    bg-(--calloutBg) py-(--proseAsideWidth) font-serif shadow-md
+                    transition-[border,background]"
+            >
+                <div
+                    :class="$style.arrow"
+                    class="max-micro:hidden transition-[border]"
+                >
+                    <div :class="$style.fill" class="transition-[border]"></div>
+                </div>
+                <header
+                    class="gap-small mb-(--proseAsideWidth) flex items-center
+                        px-(--proseAsideWidth) font-semibold transition-[color]"
+                >
+                    <img
+                        :src="calloutStorage.resolvedIconSrc"
+                        class="micro:hidden size-[30px] shrink-0 rounded-full"
+                    />
+                    <div class="text-text-deep flex-1">
+                        {{ formatText(element.data.title) }}
+                    </div>
+                </header>
+                <main class="text-main-sm">
+                    <Render
+                        v-for="child of element.children"
+                        :element="child"
+                    />
+                </main>
+            </div>
+        </div>
+    </Block>
+</template>
+
+<style module>
+.arrow {
+    --arrowSize: 18px;
+    border-bottom: var(--arrowSize) solid transparent;
+    border-right: var(--arrowSize) solid var(--color-border);
+    border-top: var(--arrowSize) solid transparent;
+    height: 0;
+    position: absolute;
+    left: calc(-1 * var(--arrowSize));
+    top: calc(var(--proseAsideWidth) - var(--arrowSize) / 4);
+    width: 0;
+
+    .fill {
+        border-bottom: calc(var(--arrowSize) - 1px) solid transparent;
+        border-right: calc(var(--arrowSize) - 1px) solid var(--calloutBg);
+        border-top: calc(var(--arrowSize) - 1px) solid transparent;
+        height: 0;
+        left: 1.5px;
+        position: absolute;
+        transform: translateY(-50%);
+        width: 0;
+    }
+}
+</style>

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

@@ -0,0 +1,15 @@
+/**
+ * Callouts are used to highlight important information, warnings, or tips within the content.
+ *
+ * @title Callout
+ * @layout block
+ * @example
+ * ```tsx
+ * // import warningIcon from './assets/warning-icon.svg';
+ *
+ * <Callout icon={warningIcon} title="Important Notice" invert="dark">
+ *   <P>Please be aware of the upcoming changes to the schedule.</P>
+ * </Callout>
+ * ```
+ */
+export const Callout = '_tag_';

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

@@ -0,0 +1,9 @@
+declare const _default: import("../../app/appElement.js").AppElement<{
+    name: "callout";
+    type: "block";
+    linkable: true;
+    Data: import("./core.js").CalloutData;
+    Storage: import("./core.js").CalloutStorage;
+    Children: import("@jsprose/core").BlockSchema[];
+}>;
+export default _default;

package/dist/elements/callout/app.js

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

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

@@ -0,0 +1,80 @@
+import { type BlockSchema, type TagChildren } from '@jsprose/core';
+import type { Invert } from '../../shared/invert.js';
+export interface CalloutData {
+    iconSrc: string;
+    iconInvert?: Invert;
+    title: string;
+}
+export interface CalloutStorage {
+    resolvedIconSrc: string;
+}
+export declare const calloutSchema: {
+    name: "callout";
+    type: "block";
+    linkable: true;
+    Data: CalloutData;
+    Storage: CalloutStorage;
+    Children: BlockSchema[];
+};
+export declare const Callout: import("@jsprose/core").Tag<"Callout", {
+    name: "callout";
+    type: "block";
+    linkable: true;
+    Data: CalloutData;
+    Storage: CalloutStorage;
+    Children: BlockSchema[];
+}, {
+    icon: string;
+    invert?: Invert;
+    title: string;
+} & TagChildren & import("../../toc.js").ObjPropToc & import("../../snippet.js").ObjPropSnippet & import("../../snippet.js").ObjPropSearch & import("../../snippet.js").ObjPropQuick & import("../../snippet.js").ObjPropSeo>;
+export declare const calloutRegistryItem: import("@jsprose/core").RegistryItem<{
+    name: "callout";
+    type: "block";
+    linkable: true;
+    Data: CalloutData;
+    Storage: CalloutStorage;
+    Children: BlockSchema[];
+}, {
+    Callout: import("@jsprose/core").Tag<"Callout", {
+        name: "callout";
+        type: "block";
+        linkable: true;
+        Data: CalloutData;
+        Storage: CalloutStorage;
+        Children: BlockSchema[];
+    }, {
+        icon: string;
+        invert?: Invert;
+        title: string;
+    } & TagChildren & import("../../toc.js").ObjPropToc & import("../../snippet.js").ObjPropSnippet & import("../../snippet.js").ObjPropSearch & import("../../snippet.js").ObjPropQuick & import("../../snippet.js").ObjPropSeo>;
+}, undefined>;
+declare const _default: {
+    registryItem: import("@jsprose/core").RegistryItem<{
+        name: "callout";
+        type: "block";
+        linkable: true;
+        Data: CalloutData;
+        Storage: CalloutStorage;
+        Children: BlockSchema[];
+    }, {
+        Callout: import("@jsprose/core").Tag<"Callout", {
+            name: "callout";
+            type: "block";
+            linkable: true;
+            Data: CalloutData;
+            Storage: CalloutStorage;
+            Children: BlockSchema[];
+        }, {
+            icon: string;
+            invert?: Invert;
+            title: string;
+        } & TagChildren & import("../../toc.js").ObjPropToc & import("../../snippet.js").ObjPropSnippet & import("../../snippet.js").ObjPropSearch & import("../../snippet.js").ObjPropQuick & import("../../snippet.js").ObjPropSeo>;
+    }, undefined>;
+};
+export default _default;
+export declare const calloutIconSrcStep: ({ rawElement }: {
+    context: import("../../context.js").EruditProseContext;
+    rawElement: import("../../rawElement.js").EruditRawElement<import("@jsprose/core").AnySchema>;
+    proseElement: import("@jsprose/core").ProseElement<import("@jsprose/core").AnySchema>;
+}) => string | undefined;

package/dist/elements/callout/core.js

@@ -0,0 +1,37 @@
+import { defineRegistryItem, defineSchema, ensureTagBlockChildren, isRawElement } from "@jsprose/core";
+import { defineEruditTag } from "../../tag.js";
+import { defineEruditProseCoreElement } from "../../coreElement.js";
+import { defineResolveStep } from "../../resolveStep.js";
+export const calloutSchema = defineSchema({
+	name: "callout",
+	type: "block",
+	linkable: true
+})();
+export const Callout = defineEruditTag({
+	tagName: "Callout",
+	schema: calloutSchema
+})(({ element, tagName, props, children, registry }) => {
+	ensureTagBlockChildren(tagName, children, registry);
+	element.children = children;
+	element.data = {
+		iconSrc: props.icon,
+		title: props.title
+	};
+	element.storageKey = props.icon;
+	if (props.invert) {
+		element.data.iconInvert = props.invert;
+	}
+});
+export const calloutRegistryItem = defineRegistryItem({
+	schema: calloutSchema,
+	tags: [Callout]
+});
+export default defineEruditProseCoreElement({ registryItem: calloutRegistryItem });
+//
+// Resolve
+//
+export const calloutIconSrcStep = defineResolveStep(({ rawElement }) => {
+	if (isRawElement(rawElement, calloutSchema)) {
+		return rawElement.data.iconSrc;
+	}
+});

package/dist/elements/callout/icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+    <path d="m349-310 31-80h194l30 80h-50q-14 0-24.5 10.5T519-275q0 14 10.5 24.5T554-240h141q14 0 24.5-10.5T730-275q0-14-10.5-24.5T695-310h-5L539-692q-5-13-16-20.5t-25-7.5h-35q-14 0-25 7.5T422-692L270-310h-5q-14 0-24.5 10.5T230-275q0 14 10.5 24.5T265-240h136q14 0 24.5-10.5T436-275q0-14-11-24.5T400-310h-51Zm56-145 68-177h7l68 177H405ZM160-80q-33 0-56.5-23.5T80-160v-640q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v640q0 33-23.5 56.5T800-80H160Zm0-80h640v-640H160v640Zm0 0v-640 640Z"/>
+</svg>

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { defineElementLanguage } from "../../../app/language/element.js";
+export default defineElementLanguage({ element_name: "Выноска" });

package/dist/elements/callout/storage.d.ts

@@ -0,0 +1,2 @@
+import type { CalloutStorage } from './core.js';
+export declare function createCalloutStorage(projectAbsPath: string, projectBaseUrl: string, calloutAbsoluteIconSrc: string): CalloutStorage;

package/dist/elements/callout/storage.js

@@ -0,0 +1,5 @@
+import { projectRelFilePath } from "../../shared/filePath.js";
+export function createCalloutStorage(projectAbsPath, projectBaseUrl, calloutAbsoluteIconSrc) {
+	const resolvedIconSrc = projectBaseUrl + "file/" + projectRelFilePath(projectAbsPath, calloutAbsoluteIconSrc);
+	return { resolvedIconSrc };
+}

package/dist/elements/caption/Caption.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { onMounted, useTemplateRef } from 'vue';
+import { isProseElement, type ProseElement } from '@jsprose/core';
+
+import { captionSecondarySchema, type captionSchema } from './core.js';
+import Render from '../../app/shared/Render.vue';
+
+const { caption } = defineProps<{
+    caption: ProseElement<typeof captionSchema>;
+}>();
+
+const emit = defineEmits(['captionMounted']);
+
+const captionElement = useTemplateRef('caption');
+
+const captionSecondary = caption.children.find((child) =>
+    isProseElement(child, captionSecondarySchema),
+);
+const mainInliners = caption.children.filter(
+    (child) => child !== captionSecondary,
+);
+
+const width = caption.data?.width ? `min(${caption.data.width}, 100%)` : '';
+
+onMounted(() => {
+    emit('captionMounted', captionElement.value);
+});
+</script>
+
+<template>
+    <div
+        ref="caption"
+        class="text-text-muted text-main-sm mt-small micro:mt-normal m-auto
+            text-center"
+        v-bind="width ? { style: { width } } : {}"
+    >
+        <div class="font-semibold">
+            <Render v-for="child of mainInliners" :element="child" />
+        </div>
+        <div v-if="captionSecondary">
+            <Render
+                v-for="child of captionSecondary.children"
+                :element="child"
+            />
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,26 @@
+/**
+ * Captions are used to provide descriptive text for images, videos, and other media elements.
+ * They can contain content (which is treated as the main caption) and an optional secondary caption for additional context.
+ *
+ * @title Caption
+ * @layout inliner
+ * @example
+ * ```tsx
+ * <Image src={triangleA}>
+ *   <Caption width="300px">
+ *     A right-angled triangle with sides <M>A</M>, <M>B</M> and hypotenuse <M>C</M>.
+ *   </Caption>
+ * </Image>
+ *
+ * <Video src={lawOfSines}>
+ *   <Caption>
+ *     Law of sines explanation.
+ *     <CaptionSecondary>
+ *       Pay attention to the angle notation!
+ *     </CaptionSecondary>
+ *   </Caption>
+ * </Video>
+ * ```
+ */
+export const Caption = '_tag_';
+export const CaptionSecondary = '_tag_';

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

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

package/dist/elements/caption/app.js

@@ -0,0 +1,6 @@
+import { defineEruditProseAppElement } from "../../app/appElement.js";
+import { captionSchema } from "./core.js";
+export default defineEruditProseAppElement({
+	schema: captionSchema,
+	component: () => import("./Caption.vue")
+});

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

@@ -0,0 +1,114 @@
+import { type InlinerSchema, type TagChildren } from '@jsprose/core';
+export declare const captionSecondarySchema: {
+    name: "captionSecondary";
+    type: "inliner";
+    linkable: false;
+    Data: undefined;
+    Storage: undefined;
+    Children: InlinerSchema[];
+};
+export declare const CaptionSecondary: import("@jsprose/core").Tag<"CaptionSecondary", {
+    name: "captionSecondary";
+    type: "inliner";
+    linkable: false;
+    Data: undefined;
+    Storage: undefined;
+    Children: InlinerSchema[];
+}, TagChildren>;
+export declare const captionSecondaryRegistryItem: import("@jsprose/core").RegistryItem<{
+    name: "captionSecondary";
+    type: "inliner";
+    linkable: false;
+    Data: undefined;
+    Storage: undefined;
+    Children: InlinerSchema[];
+}, {
+    CaptionSecondary: import("@jsprose/core").Tag<"CaptionSecondary", {
+        name: "captionSecondary";
+        type: "inliner";
+        linkable: false;
+        Data: undefined;
+        Storage: undefined;
+        Children: InlinerSchema[];
+    }, TagChildren>;
+}, undefined>;
+export interface CaptionData {
+    width?: string;
+}
+export declare const captionSchema: {
+    name: "caption";
+    type: "inliner";
+    linkable: false;
+    Data: CaptionData | undefined;
+    Storage: undefined;
+    Children: InlinerSchema[];
+};
+export declare const Caption: import("@jsprose/core").Tag<"Caption", {
+    name: "caption";
+    type: "inliner";
+    linkable: false;
+    Data: CaptionData | undefined;
+    Storage: undefined;
+    Children: InlinerSchema[];
+}, {
+    width?: string;
+} & TagChildren>;
+export declare const captionRegistryItem: import("@jsprose/core").RegistryItem<{
+    name: "caption";
+    type: "inliner";
+    linkable: false;
+    Data: CaptionData | undefined;
+    Storage: undefined;
+    Children: InlinerSchema[];
+}, {
+    Caption: import("@jsprose/core").Tag<"Caption", {
+        name: "caption";
+        type: "inliner";
+        linkable: false;
+        Data: CaptionData | undefined;
+        Storage: undefined;
+        Children: InlinerSchema[];
+    }, {
+        width?: string;
+    } & TagChildren>;
+}, undefined>;
+declare const _default: [{
+    registryItem: import("@jsprose/core").RegistryItem<{
+        name: "caption";
+        type: "inliner";
+        linkable: false;
+        Data: CaptionData | undefined;
+        Storage: undefined;
+        Children: InlinerSchema[];
+    }, {
+        Caption: import("@jsprose/core").Tag<"Caption", {
+            name: "caption";
+            type: "inliner";
+            linkable: false;
+            Data: CaptionData | undefined;
+            Storage: undefined;
+            Children: InlinerSchema[];
+        }, {
+            width?: string;
+        } & TagChildren>;
+    }, undefined>;
+}, {
+    registryItem: import("@jsprose/core").RegistryItem<{
+        name: "captionSecondary";
+        type: "inliner";
+        linkable: false;
+        Data: undefined;
+        Storage: undefined;
+        Children: InlinerSchema[];
+    }, {
+        CaptionSecondary: import("@jsprose/core").Tag<"CaptionSecondary", {
+            name: "captionSecondary";
+            type: "inliner";
+            linkable: false;
+            Data: undefined;
+            Storage: undefined;
+            Children: InlinerSchema[];
+        }, TagChildren>;
+    }, undefined>;
+}];
+export default _default;

package/dist/elements/caption/core.js

@@ -0,0 +1,61 @@
+import { defineRegistryItem, defineSchema, ensureTagInlinerChildren, isRawElement, ProseError } from "@jsprose/core";
+import { defineEruditTag } from "../../tag.js";
+import { defineEruditProseCoreElements } from "../../coreElement.js";
+//
+// Caption Secondary
+//
+export const captionSecondarySchema = defineSchema({
+	name: "captionSecondary",
+	type: "inliner",
+	linkable: false
+})();
+export const CaptionSecondary = defineEruditTag({
+	tagName: "CaptionSecondary",
+	schema: captionSecondarySchema
+})(({ element, tagName, children, registry }) => {
+	ensureTagInlinerChildren(tagName, children, registry);
+	element.children = children;
+});
+export const captionSecondaryRegistryItem = defineRegistryItem({
+	schema: captionSecondarySchema,
+	tags: [CaptionSecondary]
+});
+export const captionSchema = defineSchema({
+	name: "caption",
+	type: "inliner",
+	linkable: false
+})();
+export const Caption = defineEruditTag({
+	tagName: "Caption",
+	schema: captionSchema
+})(({ tagName, element, props, children, registry }) => {
+	ensureTagInlinerChildren(tagName, children, registry);
+	let containsNonSecondary = false;
+	let containsSecondary = false;
+	for (const child of children) {
+		if (isRawElement(child, captionSecondarySchema)) {
+			if (containsSecondary) {
+				throw new ProseError(`Duplicate <${CaptionSecondary.tagName}> detected!`);
+			}
+			containsSecondary = true;
+		} else {
+			containsNonSecondary = true;
+		}
+	}
+	if (containsSecondary && !containsNonSecondary) {
+		throw new ProseError(`Cannot have a <${CaptionSecondary.tagName}> without a main caption content!`);
+	}
+	element.children = children;
+	if (props.width) {
+		element.data = element.data || {};
+		element.data.width = props.width;
+	}
+});
+export const captionRegistryItem = defineRegistryItem({
+	schema: captionSchema,
+	tags: [Caption]
+});
+//
+// Erudit Core Elements
+//
+export default defineEruditProseCoreElements({ registryItem: captionRegistryItem }, { registryItem: captionSecondaryRegistryItem });

package/dist/elements/details/Details.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import type { ProseElement } from '@jsprose/core';
+
+import type { detailsSchema } from './core.js';
+import { useFormatText } from '../../app/composables/formatText.js';
+import { useProseContext } from '../../app/composables/context.js';
+import {
+    useIsAnchor,
+    useContainsAnchor,
+} from '../../app/composables/anchor.js';
+import { useElementIcon } from '../../app/composables/elementIcon.js';
+import { useElementPhrase } from '../../app/composables/language.js';
+import Block from '../../app/shared/block/Block.vue';
+import Render from '../../app/shared/Render.vue';
+
+const { element } = defineProps<{
+    element: ProseElement<typeof detailsSchema>;
+}>();
+
+const { EruditIcon } = useProseContext();
+const formatText = useFormatText();
+const icon = await useElementIcon(element);
+const phrase = await useElementPhrase(element);
+const { mode } = useProseContext();
+const isAnchor = useIsAnchor(element);
+const containsAnchor = useContainsAnchor(element);
+</script>
+
+<template>
+    <Block :element v-if="isAnchor || containsAnchor || mode !== 'generate'">
+        <div
+            class="border-border bg-bg-accent/30 rounded-xl border-2
+                border-dashed transition-[border,background]
+                dark:border-white/30 dark:bg-white/5"
+        >
+            <div class="text-text-muted p-(--proseAsideWidth) font-medium">
+                <EruditIcon
+                    :name="icon"
+                    class="text-main-sm mr-small relative top-0.5 inline
+                        align-baseline"
+                />
+                <span>
+                    {{ formatText(element.data.title || phrase.element_name) }}
+                </span>
+            </div>
+            <div class="pb-(--proseAsideWidth)">
+                <Render v-for="child in element.children" :element="child" />
+            </div>
+        </div>
+    </Block>
+</template>

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

@@ -0,0 +1,27 @@
+/**
+ * Details are used to hide additional explanations or secondary content.
+ * Default title "Details" can be changed via `title` prop.
+ *
+ * Clicking on a link to the details block will show it in preview area.
+ * That is why **all** details blocks **have to be unique elements**!
+ * You can not create details block without unique attached to it.
+ *
+ * Opening a link to the details block in new tab will make it visible inside main prose content.
+ * Because of this you should place them near the link pointing to them to keep context.
+ *
+ * Details blocks can't be added to Table of Contents and can't have snippets.
+ *
+ * @title Details
+ * @layout block
+ * @example
+ * ```tsx
+ * <P>
+ *   The number 4 is even, which is <A to={{uniques.whyEven}}>obvious</A>.
+ * </P>
+ *
+ * <Details $={{uniques.whyEven}} title="Why is 4 even?">
+ *   <P>Because it is divisible by 2 without a remainder.</P>
+ * </Details>
+ * ```
+ */
+export const Details = '_tag_';

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

@@ -0,0 +1,9 @@
+declare const _default: import("../../app/appElement.js").AppElement<{
+    name: "details";
+    type: "block";
+    linkable: true;
+    Data: import("./core.js").DetailsData;
+    Storage: undefined;
+    Children: import("@jsprose/core").AnySchema[];
+}>;
+export default _default;

package/dist/elements/details/app.js

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