@erudit-js/prose 3.0.0-dev.30 → 4.0.0-dev.1

package/dist/app/composables/context.d.ts

@@ -1,12 +1,13 @@
 import { type Component, type InjectionKey, type Ref } from 'vue';
 import type { EruditLanguageCode } from '@erudit-js/core/eruditConfig/language';
 import type { EruditMode } from '@erudit-js/core/mode';
+import type { FormatText } from '@erudit-js/core/formatText';
 import type { AppElement } from '../appElement.js';
 export interface ProseContext {
     mode: EruditMode;
     languageCode: EruditLanguageCode;
     appElements: Record<string, AppElement>;
-    formatText: (text: string) => string;
+    formatText: FormatText;
     pathUrl: string;
     baseUrl: string;
     hashUrl: Ref<string | undefined>;

package/dist/app/composables/formatText.d.ts

@@ -1 +1,5 @@
-export declare function useFormatText(): (text: string) => string;
+import { type InjectionKey } from 'vue';
+import type { FormatTextState } from '@erudit-js/core/formatText';
+export declare function useFormatText(): import("@erudit-js/core/formatText").FormatText;
+export declare const formatTextStateSymbol: InjectionKey<FormatTextState>;
+export declare function useFormatTextState(): FormatTextState;

package/dist/app/composables/formatText.js

@@ -1,5 +1,10 @@
+import { inject } from "vue";
 import { useProseContext } from "./context.js";
 export function useFormatText() {
 	const { formatText } = useProseContext();
 	return formatText;
 }
+export const formatTextStateSymbol = Symbol();
+export function useFormatTextState() {
+	return inject(formatTextStateSymbol);
+}

package/dist/app/default/Text.vue

@@ -2,15 +2,19 @@
 import { Text, h } from 'vue';
 import type { ProseElement, textSchema } from '@jsprose/core';
 
-import { useFormatText } from '../composables/formatText.js';
+import {
+    useFormatText,
+    useFormatTextState,
+} from '../composables/formatText.js';
 
 const { element } = defineProps<{ element: ProseElement<typeof textSchema> }>();
+const formatTextState = useFormatTextState();
 const formatText = useFormatText();
 
 const originalText = element.data;
 const leadingSpace = originalText.match(/^(\s*)/)?.[1] ? ' ' : '';
 const trailingSpace = originalText.match(/(\s*)$/)?.[1] ? ' ' : '';
-const formattedText = formatText(originalText);
+const formattedText = formatText(originalText, formatTextState);
 const textWithSpaces = leadingSpace + formattedText + trailingSpace;
 
 const TextComponent = h(Text, textWithSpaces);

package/dist/app/shared/Prose.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { provide } from 'vue';
 import type { AnySchema, GenericStorage, ProseElement } from '@jsprose/core';
+import { createFormatTextState } from '@erudit-js/core/formatText';
 
 import {
     proseContextSymbol,
@@ -9,6 +10,7 @@ import {
 import { proseStorageSymbol } from '../composables/storage.js';
 import Render from './Render.vue';
 import { anchorStateSymbol, useAnchorState } from '../composables/anchor.js';
+import { formatTextStateSymbol } from '../composables/formatText.js';
 
 const { element, storage, context } = defineProps<{
     element: ProseElement<AnySchema>;
@@ -21,6 +23,8 @@ provide(proseStorageSymbol, storage);
 
 const anchorState = useAnchorState(context.hashUrl, element);
 provide(anchorStateSymbol, anchorState);
+
+provide(formatTextStateSymbol, createFormatTextState());
 </script>
 
 <template>

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

@@ -18,11 +18,16 @@ import {
     useResolveAnchor,
 } from '../../composables/anchor.js';
 import AsideMenu from './AsideMenu.vue';
+import { useFormatTextState } from '../../composables/formatText.js';
 
 const { element } = defineProps<{ element: ProseElement<BlockSchema> }>();
 const { EruditIcon, EruditTransition } = useProseContext();
 const elementIcon = await useElementIcon(element);
 
+const formatTextState = useFormatTextState();
+// Reset quote state making sure any opened quote does not leak outside
+formatTextState.quote = 'closed';
+
 const blockElement = useTemplateRef('block');
 const asideElement = useTemplateRef('aside');
 const asideMenuElement = useTemplateRef('asideMenu');

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

@@ -22,7 +22,7 @@ export function usePhotoSwipe() {
 			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",
+					className: "text-xs micro:text-sm absolute **:text-text-muted bottom-0 w-full text-center p-normal bg-bg-main/50 backdrop-blur-md",
 					order: 9,
 					isButton: false,
 					appendTo: "root",

package/dist/elements/caption/Caption.vue

@@ -30,7 +30,7 @@ onMounted(() => {
 <template>
     <div
         ref="caption"
-        class="text-text-muted text-main-sm mt-small micro:mt-normal m-auto
+        class="**:text-text-muted text-main-sm mt-small micro:mt-normal m-auto
             text-center"
         v-bind="width ? { style: { width } } : {}"
     >

package/dist/elements/details/Details.vue

@@ -27,7 +27,7 @@ const containsAnchor = useContainsAnchor(element);
 </script>
 
 <template>
-    <Block :element v-if="isAnchor || containsAnchor || mode !== 'generate'">
+    <Block :element v-if="isAnchor || containsAnchor || mode !== 'static'">
         <div
             class="border-border bg-bg-accent/30 rounded-xl border-2
                 border-dashed transition-[border,background]

package/dist/elements/diagram/Diagram.vue

@@ -26,6 +26,7 @@ const { EruditIcon, loadingSvg } = useProseContext();
 const loading = ref(true);
 const diagramRendering = ref(false);
 const dummyMathHtml = ref('');
+const dummyElement = useTemplateRef('dummy');
 const diagramContent = ref(element.children[0].data);
 const diagramSvgContent = ref('');
 const diagramElement = useTemplateRef('diagram');
@@ -198,7 +199,11 @@ async function renderDiagram() {
         theme: 'base',
     });
 
-    const { svg } = await mermaid.render(diagramUid, diagramContent.value);
+    const { svg } = await mermaid.render(
+        diagramUid,
+        diagramContent.value,
+        dummyElement.value!,
+    );
 
     diagramSvgContent.value = svg;
 }
@@ -207,7 +212,8 @@ async function renderDiagram() {
 <template>
     <Block :element>
         <div
-            class="fixed -top-[9999px] -left-[9999px]"
+            ref="dummy"
+            :class="[$style.diagram, 'fixed -top-[9999px] -left-[9999px]']"
             v-html="dummyMathHtml"
         ></div>
         <div ref="diagram">
@@ -239,6 +245,10 @@ async function renderDiagram() {
         cursor: pointer;
     }
 
+    :global(.katex-display) {
+        margin: 0 !important;
+    }
+
     /* Text color */
 
     :global(.edgeLabel) {

package/dist/elements/link/Link.vue

@@ -79,7 +79,8 @@ function linkClick() {
             :style="{ '--tGap': '1px', '--xGap': '4px', '--bGap': '4px' }"
             class="text-brand hocus:bg-brand/15 relative
                 -mx-[calc(var(--xGap)-3px)] -mt-(--tGap) -mb-(--bGap) rounded-sm
-                bg-transparent px-(--xGap) pt-(--tGap) pb-(--bGap) underline
+                bg-transparent px-(--xGap) pt-(--tGap) pb-(--bGap)
+                whitespace-nowrap underline
                 decoration-[color-mix(in_srgb,var(--color-brand)30%,transparent)]
                 decoration-2 underline-offset-2 transition-[color,background]"
         >

package/dist/elements/list/List.vue

@@ -14,9 +14,9 @@ defineProps<{ element: ProseElement<typeof listSchema> }>();
             :is="element.data.type"
             class="micro:[--proseGap:18px]"
             :style="{
-                '--liBorder': 'var(--accentBorder, var(--color-border))',
+                '--liBorder': 'var(--color-text-disabled)',
                 '--liBackground':
-                    'color-mix(in hsl, var(--accentText, var(--color-text)) 12%, transparent)',
+                    'color-mix(in hsl, var(--accentText, var(--color-text)) 12%, var(--color-bg-main))',
                 '--liText': 'var(--accentText, var(--color-text-muted))',
             }"
             v-bind="
@@ -27,9 +27,14 @@ defineProps<{ element: ProseElement<typeof listSchema> }>();
         >
             <li
                 v-for="(listItem, i) of element.children"
-                class="flex not-last-of-type:mb-(--proseGap)"
+                class="relative flex not-last-of-type:mb-(--proseGap)"
             >
-                <div class="shrink-0">
+                <div
+                    class="micro:left-[11px] bg-text-disabled micro:w-[2px]
+                        absolute top-[3px] bottom-[5px] left-[9px] w-[1px]
+                        transition-[background]"
+                ></div>
+                <div class="relative shrink-0">
                     <div
                         class="micro:top-[1.5px] micro:size-[23px] relative
                             top-[3px] flex size-[20px] items-center

package/dist/elements/math/block.d.ts

@@ -1,5 +1,5 @@
 import { type TagChildren } from '@jsprose/core';
-export declare const mathGroupTypes: readonly ["zero", "normal", "big"];
+export declare const mathGroupTypes: readonly ["zero", "normal", "big", "huge"];
 export type MathGroupGapType = (typeof mathGroupTypes)[number] | 'custom';
 export interface MathGroupGapTemplate {
     type: MathGroupGapType;
@@ -13,11 +13,14 @@ export interface MathGroupGapNormal extends MathGroupGapTemplate {
 export interface MathGroupGapBig extends MathGroupGapTemplate {
     type: 'big';
 }
+export interface MathGroupGapHuge extends MathGroupGapTemplate {
+    type: 'huge';
+}
 export interface MathGroupGapCustom extends MathGroupGapTemplate {
     type: 'custom';
     size: string;
 }
-export type MathGroupGap = MathGroupGapNone | MathGroupGapNormal | MathGroupGapBig | MathGroupGapCustom;
+export type MathGroupGap = MathGroupGapNone | MathGroupGapNormal | MathGroupGapBig | MathGroupGapHuge | MathGroupGapCustom;
 export type MathGroupPart = string | MathGroup;
 export interface MathGroup {
     gap: MathGroupGap;

package/dist/elements/math/block.js

@@ -4,7 +4,8 @@ import { defineEruditTag } from "../../tag.js";
 export const mathGroupTypes = [
 	"zero",
 	"normal",
-	"big"
+	"big",
+	"huge"
 ];
 function gapFromString(strGap) {
 	if (mathGroupTypes.includes(strGap)) {

package/dist/elements/math/components/MathGroup.vue

@@ -15,6 +15,8 @@ const columnGap = (() => {
             return 'var(--proseAsideWidth)';
         case 'big':
             return 'calc(var(--proseAsideWidth) * 2)';
+        case 'huge':
+            return 'calc(var(--proseAsideWidth) * 4)';
         case 'custom':
             return mathGroup.gap.size;
     }

package/dist/elements/problem/problem.js

@@ -16,8 +16,6 @@ export const Problem = defineEruditTag({
 })(({ element, tagName, props, children }) => {
 	element.data = { info: problemProps2Info(props) };
 	element.title = element.data.info.title;
-	element.snippet = {};
-	element.toc = { add: true };
 	if (children && props.script) {
 		throw new ProseError(`<${tagName}> cannot have both script and children in Problem element!`);
 	}

package/dist/elements/problem/problems.js

@@ -64,8 +64,6 @@ export const Problems = defineEruditTag({
 	element.children = [...otherChildren, ...subProblemChildren];
 	element.data = problemProps2Info(props);
 	element.title = element.data.title;
-	element.snippet = {};
-	element.toc = { add: true };
 });
 export const problemsRegistryItem = defineRegistryItem({
 	schema: problemsSchema,

package/package.json

@@ -1,7 +1,7 @@
 {
     "type": "module",
     "name": "@erudit-js/prose",
-    "version": "3.0.0-dev.30",
+    "version": "4.0.0-dev.1",
     "description": "📝 JSX prose subsystem for Erudit sites",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
@@ -32,7 +32,7 @@
         "prepack": "bun run build"
     },
     "dependencies": {
-        "@erudit-js/core": "3.0.0-dev.30",
+        "@erudit-js/core": "4.0.0-dev.1",
         "@jsprose/core": "^1.0.0",
         "vue": "latest",
         "@floating-ui/vue": "^1.1.9",