@erudit-js/prose 4.0.0-dev.4 → 4.0.0-dev.5

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

@@ -1,19 +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_';
+/**
+ * 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/core.d.ts

@@ -177,10 +177,6 @@ declare const _default: {
         }, TagChildren & import("../../toc.js").ObjPropToc & import("../../snippet.js").ObjPropSnippet>;
     }, undefined>;
     dependencies: {
-        mermaid: {
-            optimize: true;
-            transpile: true;
-        };
         photoswipe: {
             optimize: boolean;
             transpile: boolean;

package/dist/elements/diagram/core.js

@@ -26,11 +26,5 @@ export const diagramRegistryItem = defineRegistryItem({
 });
 export default defineEruditProseCoreElement({
 	registryItem: diagramRegistryItem,
-	dependencies: {
-		...photoswipeDependency,
-		mermaid: {
-			optimize: true,
-			transpile: true
-		}
-	}
+	dependencies: { ...photoswipeDependency }
 });

package/dist/elements/emphasis/Emphasis.vue

@@ -1,25 +1,25 @@
-<script lang="ts" setup>
-import type { ProseElement } from '@jsprose/core';
-
-import type { emphasisSchema } from './core.js';
-import Render from '../../app/shared/Render.vue';
-
-defineProps<{ element: ProseElement<typeof emphasisSchema> }>();
-</script>
-
-<template>
-    <strong
-        v-if="element.data.type === 'bold'"
-        :class="[
-            'font-semibold',
-            element.data?.accent
-                ? 'text-(--accentText,var(--color-text-deep))'
-                : 'text-text-deep',
-        ]"
-    >
-        <Render v-for="child of element.children" :element="child" />
-    </strong>
-    <i v-else>
-        <Render v-for="child of element.children" :element="child" />
-    </i>
-</template>
+<script lang="ts" setup>
+import type { ProseElement } from '@jsprose/core';
+
+import type { emphasisSchema } from './core.js';
+import Render from '../../app/shared/Render.vue';
+
+defineProps<{ element: ProseElement<typeof emphasisSchema> }>();
+</script>
+
+<template>
+  <strong
+    v-if="element.data.type === 'bold'"
+    :class="[
+      'font-semibold',
+      element.data?.accent
+        ? 'text-(--accentText,var(--color-text-deep))'
+        : 'text-text-deep',
+    ]"
+  >
+    <Render v-for="child of element.children" :element="child" />
+  </strong>
+  <i v-else>
+    <Render v-for="child of element.children" :element="child" />
+  </i>
+</template>

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

@@ -1,18 +1,18 @@
-/**
- * There are several ways to emphasize text:
- * * `<B>` to make text bold
- * * `<I>` to italicize text
- *
- * Do not overuse these elements, as too much emphasis singificantly reduces readability!
- *
- * @title Emphasis
- * @layout inliner
- * @example
- * ```tsx
- * <>
- *   Importart words can be <B>bolded</B> or <I>italicized</I> for emphasis.
- * </>
- * ```
- */
-export const B = '_tag_';
-export const I = '_tag_';
+/**
+ * There are several ways to emphasize text:
+ * * `<B>` to make text bold
+ * * `<I>` to italicize text
+ *
+ * Do not overuse these elements, as too much emphasis singificantly reduces readability!
+ *
+ * @title Emphasis
+ * @layout inliner
+ * @example
+ * ```tsx
+ * <>
+ *   Importart words can be <B>bolded</B> or <I>italicized</I> for emphasis.
+ * </>
+ * ```
+ */
+export const B = '_tag_';
+export const I = '_tag_';

package/dist/elements/flex/Flex.vue

@@ -1,38 +1,36 @@
-<script lang="ts" setup>
-import type { ProseElement } from '@jsprose/core';
-
-import type { flexSchema } from './core.js';
-import Block from '../../app/shared/block/Block.vue';
-import Render from '../../app/shared/Render.vue';
-
-const { element } = defineProps<{ element: ProseElement<typeof flexSchema> }>();
-
-const justify = (() => {
-    return element?.data?.justifyContent ?? 'center';
-})();
-
-const gap = (() => {
-    return element?.data?.gap ?? 'var(--spacing-big)';
-})();
-</script>
-
-<template>
-    <Block :element>
-        <div
-            :style="{ justifyContent: justify, gap }"
-            class="flex flex-wrap items-center"
-        >
-            <template v-for="(item, i) of element.children">
-                <div
-                    :style="{
-                        flex: element.data?.flexes
-                            ? element.data.flexes[i]
-                            : undefined,
-                    }"
-                >
-                    <Render :element="item" />
-                </div>
-            </template>
-        </div>
-    </Block>
-</template>
+<script lang="ts" setup>
+import type { ProseElement } from '@jsprose/core';
+
+import type { flexSchema } from './core.js';
+import Block from '../../app/shared/block/Block.vue';
+import Render from '../../app/shared/Render.vue';
+
+const { element } = defineProps<{ element: ProseElement<typeof flexSchema> }>();
+
+const justify = (() => {
+  return element?.data?.justifyContent ?? 'center';
+})();
+
+const gap = (() => {
+  return element?.data?.gap ?? 'var(--spacing-big)';
+})();
+</script>
+
+<template>
+  <Block :element>
+    <div
+      :style="{ justifyContent: justify, gap }"
+      class="flex flex-wrap items-center"
+    >
+      <template v-for="(item, i) of element.children">
+        <div
+          :style="{
+            flex: element.data?.flexes ? element.data.flexes[i] : undefined,
+          }"
+        >
+          <Render :element="item" />
+        </div>
+      </template>
+    </div>
+  </Block>
+</template>

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

@@ -1,23 +1,23 @@
-/**
- * Flex allows to place items next to each other in a row.
- * This is useful for grouping blocks with same context (images, diagrams, etc.), side-by-side comparisons, and similar layouts.
- *
- * By default items are placed at center with a small gap between them.
- * Placement and gap can be customized via `justify` and `gap` props, which work the same way as CSS `justify-content` and `gap` properties.
- *
- * @title Flex
- * @layout block
- * @example
- * ```tsx
- * <Flex>
- *   <Image src={schema1} width="100px" />
- *   <Image src={schema2} width="75px" />
- * </Flex>
- *
- * <Flex gap="40px" justify="space-between">
- *   <Image src={schema1} width="100px" />
- *   <Image src={schema2} width="75px" />
- * </Flex>
- * ```
- */
-export const Flex = '_tag_';
+/**
+ * Flex allows to place items next to each other in a row.
+ * This is useful for grouping blocks with same context (images, diagrams, etc.), side-by-side comparisons, and similar layouts.
+ *
+ * By default items are placed at center with a small gap between them.
+ * Placement and gap can be customized via `justify` and `gap` props, which work the same way as CSS `justify-content` and `gap` properties.
+ *
+ * @title Flex
+ * @layout block
+ * @example
+ * ```tsx
+ * <Flex>
+ *   <Image src={schema1} width="100px" />
+ *   <Image src={schema2} width="75px" />
+ * </Flex>
+ *
+ * <Flex gap="40px" justify="space-between">
+ *   <Image src={schema1} width="100px" />
+ *   <Image src={schema2} width="75px" />
+ * </Flex>
+ * ```
+ */
+export const Flex = '_tag_';

package/dist/elements/gallery/Gallery.vue

@@ -1,56 +1,56 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-import type { ProseElement } from '@jsprose/core';
-
-import type { gallerySchema } from './core.js';
-import { useElementStorage } from '../../app/composables/storage.js';
-import { darkInvert, lightInvert } from '../../app/shared/invert.js';
-import Block from '../../app/shared/block/Block.vue';
-import ImageElement from '../image/ImageElement.vue';
-
-const { element } = defineProps<{
-    element: ProseElement<typeof gallerySchema>;
-}>();
-
-const resolvedSources: string[] = [];
-
-for (const child of element.children) {
-    const storage = await useElementStorage(child);
-    resolvedSources.push(storage.resolvedSrc);
-}
-
-const activeI = ref<number>(0);
-</script>
-
-<template>
-    <Block :element>
-        <div class="nice-scrollbars mb-normal flex overflow-auto">
-            <div class="gap-normal p-small m-auto flex">
-                <button
-                    v-for="(image, i) of element.children"
-                    @click="activeI = i"
-                    :class="[
-                        `aspect-square w-[70px] cursor-pointer overflow-hidden
-                        rounded-xl border-2 transition-[border]`,
-                        {
-                            'border-border hocus:border-brand': activeI !== i,
-                            'border-brand': activeI === i,
-                        },
-                    ]"
-                >
-                    <img
-                        :src="resolvedSources[i]"
-                        :class="[
-                            'block object-cover',
-                            {
-                                [lightInvert]: image.data.invert === 'light',
-                                [darkInvert]: image.data.invert === 'dark',
-                            },
-                        ]"
-                    />
-                </button>
-            </div>
-        </div>
-        <ImageElement :element="element.children[activeI]" :key="activeI" />
-    </Block>
-</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { ProseElement } from '@jsprose/core';
+
+import type { gallerySchema } from './core.js';
+import { useElementStorage } from '../../app/composables/storage.js';
+import { darkInvert, lightInvert } from '../../app/shared/invert.js';
+import Block from '../../app/shared/block/Block.vue';
+import ImageElement from '../image/ImageElement.vue';
+
+const { element } = defineProps<{
+  element: ProseElement<typeof gallerySchema>;
+}>();
+
+const resolvedSources: string[] = [];
+
+for (const child of element.children) {
+  const storage = await useElementStorage(child);
+  resolvedSources.push(storage.resolvedSrc);
+}
+
+const activeI = ref<number>(0);
+</script>
+
+<template>
+  <Block :element>
+    <div class="nice-scrollbars mb-normal flex overflow-auto">
+      <div class="gap-normal p-small m-auto flex">
+        <button
+          v-for="(image, i) of element.children"
+          @click="activeI = i"
+          :class="[
+            `aspect-square w-[70px] cursor-pointer overflow-hidden rounded-xl
+            border-2 transition-[border]`,
+            {
+              'border-border hocus:border-brand': activeI !== i,
+              'border-brand': activeI === i,
+            },
+          ]"
+        >
+          <img
+            :src="resolvedSources[i]"
+            :class="[
+              'block object-cover',
+              {
+                [lightInvert]: image.data.invert === 'light',
+                [darkInvert]: image.data.invert === 'dark',
+              },
+            ]"
+          />
+        </button>
+      </div>
+    </div>
+    <ImageElement :element="element.children[activeI]" :key="activeI" />
+  </Block>
+</template>

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

@@ -1,18 +1,18 @@
-/**
- * Galleries are used to display a collection of images in one place, not occupying too much vertical space.
- *
- * @title Gallery
- * @layout block
- * @example
- * ```tsx
- * // import foo from './assets/foo.svg';
- * // import bar from './assets/bar.png';
- * <Gallery>
- *   <Image src={foo} width="200px" />
- *   <Image src={bar} width="300px">
- *     <Caption>Bar image caption</Caption>
- *   </Image>
- * </Gallery>
- * ```
- */
-export const Gallery = '_tag_';
+/**
+ * Galleries are used to display a collection of images in one place, not occupying too much vertical space.
+ *
+ * @title Gallery
+ * @layout block
+ * @example
+ * ```tsx
+ * // import foo from './assets/foo.svg';
+ * // import bar from './assets/bar.png';
+ * <Gallery>
+ *   <Image src={foo} width="200px" />
+ *   <Image src={bar} width="300px">
+ *     <Caption>Bar image caption</Caption>
+ *   </Image>
+ * </Gallery>
+ * ```
+ */
+export const Gallery = '_tag_';

package/dist/elements/heading/Heading.vue

@@ -1,44 +1,44 @@
-<script lang="ts" setup>
-import { h } from 'vue';
-import type { ProseElement } from '@jsprose/core';
-
-import { useFormatText } from '../../app/composables/formatText.js';
-import type { headingSchema } from './core.js';
-import Block from '../../app/shared/block/Block.vue';
-
-const { element } = defineProps<{
-    element: ProseElement<typeof headingSchema>;
-}>();
-
-const formatText = useFormatText();
-
-const Tag = (() => {
-    switch (element.data.level) {
-        case 1:
-            return h('h2');
-        case 2:
-            return h('h3');
-        case 3:
-            return h('h4');
-    }
-})();
-</script>
-
-<template>
-    <Block :element class="mt-normal micro:mt-big first:mt-0">
-        <component
-            :is="Tag"
-            :class="[
-                'text-text-deep',
-                {
-                    [`text-main-2xl border-border pb-small micro:pb-normal
-                    border-b font-bold`]: element.data.level === 1,
-                    'text-main-xl font-semibold': element.data.level === 2,
-                    'text-main-lg font-medium': element.data.level === 3,
-                },
-            ]"
-        >
-            {{ formatText(element.data.title) }}
-        </component>
-    </Block>
-</template>
+<script lang="ts" setup>
+import { h } from 'vue';
+import type { ProseElement } from '@jsprose/core';
+
+import { useFormatText } from '../../app/composables/formatText.js';
+import type { headingSchema } from './core.js';
+import Block from '../../app/shared/block/Block.vue';
+
+const { element } = defineProps<{
+  element: ProseElement<typeof headingSchema>;
+}>();
+
+const formatText = useFormatText();
+
+const Tag = (() => {
+  switch (element.data.level) {
+    case 1:
+      return h('h2');
+    case 2:
+      return h('h3');
+    case 3:
+      return h('h4');
+  }
+})();
+</script>
+
+<template>
+  <Block :element class="mt-normal micro:mt-big first:mt-0">
+    <component
+      :is="Tag"
+      :class="[
+        'text-text-deep',
+        {
+          [`text-main-2xl border-border pb-small micro:pb-normal border-b
+          font-bold`]: element.data.level === 1,
+          'text-main-xl font-semibold': element.data.level === 2,
+          'text-main-lg font-medium': element.data.level === 3,
+        },
+      ]"
+    >
+      {{ formatText(element.data.title) }}
+    </component>
+  </Block>
+</template>

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

@@ -1,45 +1,42 @@
-/**
- * Headings are used to split prose into sections:
- * * `<H1>` - major sections, key parts of prose
- * * `<H2>` - subsections
- * * `<H3>` - sub-subsections (rarely used)
- *
- * Headings have special behavior:
- * * Always appear in search results
- * * Always appear in Table of Contents
- * * Automatically generate snippet titles so you don't have to manually write them.
- *
- * That is why you want to always write meaningful titles and never use general words!
- * * **Don't** "Description" -> **Do** "Description of Euclidean algorithm"
- * * **Don't** "Problem" -> **Do** "Problem with integers division"
- *
- * If you really need to use general words, provide specified snippet title or search synonyms.
- *
- * **Caution:** never use headings inside other blocks! They are only allowed at the top level of prose!
- *
- * @title Heading
- * @layout block
- * @example
- * ```tsx
- * <H1>Pythagorean theorem</H1>
- *
- * // ... Content ...
- *
- * // Add heading in "Quick links" section
- * <H2 snippet={{ quick: true }}>
- *   Triangles and squares
- * </H2>
- *
- * // ... Content ...
- *
- * // Provide more specific title for search
- * <H3 snippet={{ title: 'Pythagorean theorem in physics' }}>
- *   Usage in physics
- * </H3>
- *
- * // ... Content ...
- * ```
- */
-export const H1 = '_tag_';
-export const H2 = '_tag_';
-export const H3 = '_tag_';
+/**
+ * Headings are used to split prose into sections:
+ * * `<H1>` - major sections, key parts of prose
+ * * `<H2>` - subsections
+ * * `<H3>` - sub-subsections (rarely used)
+ *
+ * Headings have special behavior:
+ * * Always appear in Table of Contents
+ * * Automatically generate snippet titles so you don't have to manually write them.
+ *
+ * When adding heading to search make sure to specify a snippet title that will be understandable out of context.
+ * * **Don't** "Description" -> **Do** "Description of Euclidean algorithm"
+ * * **Don't** "Problem" -> **Do** "Problem with integers division"
+ *
+ * **Caution:** never use headings inside other blocks! They are only allowed at the top level of prose!
+ *
+ * @title Heading
+ * @layout block
+ * @example
+ * ```tsx
+ * <H1>Pythagorean theorem</H1>
+ *
+ * // ... Content ...
+ *
+ * // Add heading in "Quick links" section
+ * <H2 snippet={{ quick: true }}>
+ *   Triangles and squares
+ * </H2>
+ *
+ * // ... Content ...
+ *
+ * // Provide more specific title for search
+ * <H3 snippet={{ search: true, title: 'Pythagorean theorem in physics' }}>
+ *   Usage in physics
+ * </H3>
+ *
+ * // ... Content ...
+ * ```
+ */
+export const H1 = '_tag_';
+export const H2 = '_tag_';
+export const H3 = '_tag_';

package/dist/elements/heading/core.js

@@ -9,22 +9,22 @@ export const headingSchema = defineSchema({
 export const H1 = defineEruditTag({
 	tagName: "H1",
 	schema: headingSchema
-})(({ tagName, element, props, children }) => {
-	processHeadingElement(1, tagName, props, element, children);
+})(({ tagName, element, children }) => {
+	processHeadingElement(1, tagName, element, children);
 });
 export const H2 = defineEruditTag({
 	tagName: "H2",
 	schema: headingSchema
-})(({ tagName, element, props, children }) => {
-	processHeadingElement(2, tagName, props, element, children);
+})(({ tagName, element, children }) => {
+	processHeadingElement(2, tagName, element, children);
 });
 export const H3 = defineEruditTag({
 	tagName: "H3",
 	schema: headingSchema
-})(({ tagName, element, props, children }) => {
-	processHeadingElement(3, tagName, props, element, children);
+})(({ tagName, element, children }) => {
+	processHeadingElement(3, tagName, element, children);
 });
-function processHeadingElement(level, tagName, props, element, children) {
+function processHeadingElement(level, tagName, element, children) {
 	ensureTagChild(tagName, children, textSchema);
 	const child = children[0];
 	const title = child.data.trim();
@@ -36,13 +36,6 @@ function processHeadingElement(level, tagName, props, element, children) {
 		title
 	};
 	element.title = title;
-	element.snippet ||= {};
-	element.snippet.search ??= true;
-	// Only auto-enable SEO if quick is set in props
-	// Otherwise explicitly disable it to prevent auto-enablement from search flag
-	if (!props.snippet?.quick) {
-		element.snippet.seo ??= false;
-	}
 	element.toc = { add: true };
 }
 export const headingRegistryItem = defineRegistryItem({