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

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/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,36 +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,42 +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 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_';
+/**
+ * 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/icon.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <path d="M23.38,16.5c0-3.47-2.87-4.88-5.96-5.87-2.68-.9-3.95-1.47-3.95-2.85,0-1.22,1.27-2.08,3.1-2.08,1.34-.02,2.7.34,3.86,1.03l.49.29,1.06-2.89-.37-.19c-1.48-.78-3.2-1.19-4.95-1.19-3.99,0-6.78,2.2-6.78,5.35,0,1.03.37,2.01,1.01,2.78-1.33.93-2.2,2.45-2.28,4.11,0,3.43,3.1,4.78,6.27,5.87,3.28,1.12,3.87,1.94,3.87,3.12,0,1.72-1.73,2.33-3.35,2.33-1.53,0-3-.47-4.25-1.32l-.49-.33-1.22,2.87.35.22c1.58.97,3.35,1.48,5.16,1.48.13,0,.27,0,.39,0,3.49,0,7.01-1.73,7.01-5.59,0-1.08-.36-2.14-1.04-2.96,1.26-1.02,2.02-2.55,2.06-4.2h0ZM13.12,12.44c1.28.64,2.63,1.19,4.01,1.65,1.86.65,2.77,1.55,2.77,2.76.02.78-.3,1.53-.86,2.06-1.16-.61-2.4-1.12-3.7-1.53-2.94-1.03-3.32-2.01-3.32-2.76,0-.85.42-1.68,1.11-2.19Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <path d="M23.38,16.5c0-3.47-2.87-4.88-5.96-5.87-2.68-.9-3.95-1.47-3.95-2.85,0-1.22,1.27-2.08,3.1-2.08,1.34-.02,2.7.34,3.86,1.03l.49.29,1.06-2.89-.37-.19c-1.48-.78-3.2-1.19-4.95-1.19-3.99,0-6.78,2.2-6.78,5.35,0,1.03.37,2.01,1.01,2.78-1.33.93-2.2,2.45-2.28,4.11,0,3.43,3.1,4.78,6.27,5.87,3.28,1.12,3.87,1.94,3.87,3.12,0,1.72-1.73,2.33-3.35,2.33-1.53,0-3-.47-4.25-1.32l-.49-.33-1.22,2.87.35.22c1.58.97,3.35,1.48,5.16,1.48.13,0,.27,0,.39,0,3.49,0,7.01-1.73,7.01-5.59,0-1.08-.36-2.14-1.04-2.96,1.26-1.02,2.02-2.55,2.06-4.2h0ZM13.12,12.44c1.28.64,2.63,1.19,4.01,1.65,1.86.65,2.77,1.55,2.77,2.76.02.78-.3,1.53-.86,2.06-1.16-.61-2.4-1.12-3.7-1.53-2.94-1.03-3.32-2.01-3.32-2.76,0-.85.42-1.68,1.11-2.19Z"/>
 </svg>

package/dist/elements/horizontalLine/HorizontalLine.vue

@@ -1,6 +1,6 @@
-<template>
-  <hr
-    class="border-border mx-(--proseAsideWidth) mt-(--proseGap) rounded border-0
-      border-b"
-  />
-</template>
+<template>
+  <hr
+    class="border-border mx-(--proseAsideWidth) mt-(--proseGap) rounded border-0
+      border-b"
+  />
+</template>

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

@@ -1,17 +1,17 @@
-/**
- * Horizontal lines are used to separate prose content in places
- * where it is not possible to use headings or built-in block separators.
- *
- * Use with extra caution, as overuse of horizontal lines can make prose look cluttered!
- * When possible, prefer other means of content separation.
- *
- * @title Horizontal Line
- * @layout block
- * @example
- * ```tsx
- * <P>Paragraph 1</P>
- * <Hr />
- * <P>Paragraph 2</P>
- * ```
- */
-export const Hr = '_tag_';
+/**
+ * Horizontal lines are used to separate prose content in places
+ * where it is not possible to use headings or built-in block separators.
+ *
+ * Use with extra caution, as overuse of horizontal lines can make prose look cluttered!
+ * When possible, prefer other means of content separation.
+ *
+ * @title Horizontal Line
+ * @layout block
+ * @example
+ * ```tsx
+ * <P>Paragraph 1</P>
+ * <Hr />
+ * <P>Paragraph 2</P>
+ * ```
+ */
+export const Hr = '_tag_';