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

package/dist/app/default/Inliners.vue

@@ -1,11 +1,11 @@
-<script lang="ts" setup>
-import type { inlinersSchema, ProseElement } from '@jsprose/core';
-
-import Render from '../shared/Render.vue';
-
-defineProps<{ element: ProseElement<typeof inlinersSchema> }>();
-</script>
-
-<template>
-    <Render v-for="child of element.children" :element="child" />
-</template>
+<script lang="ts" setup>
+import type { inlinersSchema, ProseElement } from '@jsprose/core';
+
+import Render from '../shared/Render.vue';
+
+defineProps<{ element: ProseElement<typeof inlinersSchema> }>();
+</script>
+
+<template>
+  <Render v-for="child of element.children" :element="child" />
+</template>

package/dist/app/default/Mix.vue

@@ -1,11 +1,11 @@
-<script lang="ts" setup>
-import { type mixSchema, type ProseElement } from '@jsprose/core';
-
-import Render from '../shared/Render.vue';
-
-const { element } = defineProps<{ element: ProseElement<typeof mixSchema> }>();
-</script>
-
-<template>
-    <Render v-for="child of element.children" :element="child" />
-</template>
+<script lang="ts" setup>
+import { type mixSchema, type ProseElement } from '@jsprose/core';
+
+import Render from '../shared/Render.vue';
+
+const { element } = defineProps<{ element: ProseElement<typeof mixSchema> }>();
+</script>
+
+<template>
+  <Render v-for="child of element.children" :element="child" />
+</template>

package/dist/app/default/Text.vue

@@ -1,25 +1,25 @@
-<script lang="ts" setup>
-import { Text, h } from 'vue';
-import type { ProseElement, textSchema } from '@jsprose/core';
-
-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, formatTextState);
-const textWithSpaces = leadingSpace + formattedText + trailingSpace;
-
-const TextComponent = h(Text, textWithSpaces);
-</script>
-
-<template>
-    <component :is="TextComponent" />
-</template>
+<script lang="ts" setup>
+import { Text, h } from 'vue';
+import type { ProseElement, textSchema } from '@jsprose/core';
+
+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, formatTextState);
+const textWithSpaces = leadingSpace + formattedText + trailingSpace;
+
+const TextComponent = h(Text, textWithSpaces);
+</script>
+
+<template>
+  <component :is="TextComponent" />
+</template>

package/dist/app/shared/Prose.vue

@@ -1,40 +1,40 @@
-<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,
-    type ProseContext,
-} from '../composables/context.js';
-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>;
-    storage: GenericStorage;
-    context: ProseContext;
-}>();
-
-provide(proseContextSymbol, context);
-provide(proseStorageSymbol, storage);
-
-const anchorState = useAnchorState(context.hashUrl, element);
-provide(anchorStateSymbol, anchorState);
-
-provide(formatTextStateSymbol, createFormatTextState());
-</script>
-
-<template>
-    <section
-        :style="{ '--proseGap': 'none' }"
-        :class="[
-            /* Variables */
-            'micro:[--proseAsideWidth:20px] [--proseAsideWidth:16px]',
-        ]"
-    >
-        <Render :element />
-    </section>
-</template>
+<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,
+  type ProseContext,
+} from '../composables/context.js';
+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>;
+  storage: GenericStorage;
+  context: ProseContext;
+}>();
+
+provide(proseContextSymbol, context);
+provide(proseStorageSymbol, storage);
+
+const anchorState = useAnchorState(context.hashUrl, element);
+provide(anchorStateSymbol, anchorState);
+
+provide(formatTextStateSymbol, createFormatTextState());
+</script>
+
+<template>
+  <section
+    :style="{ '--proseGap': 'none' }"
+    :class="[
+      /* Variables */
+      'micro:[--proseAsideWidth:20px] [--proseAsideWidth:16px]',
+    ]"
+  >
+    <Render :element />
+  </section>
+</template>

package/dist/app/shared/Render.vue

@@ -1,51 +1,51 @@
-<script lang="ts" setup>
-import { h, type Component } from 'vue';
-import {
-    inlinersSchema,
-    mixSchema,
-    textSchema,
-    type AnySchema,
-    type ProseElement,
-} from '@jsprose/core';
-
-import { useAppElement } from '../composables/appElement.js';
-import Mix from '../default/Mix.vue';
-import Inliners from '../default/Inliners.vue';
-import Text from '../default/Text.vue';
-
-const { element } = defineProps<{ element: ProseElement<AnySchema> }>();
-
-const ElementComponent: Component = await (async () => {
-    switch (element.schemaName) {
-        case mixSchema.name:
-            return Mix;
-        case inlinersSchema.name:
-            return Inliners;
-        case textSchema.name:
-            return Text;
-    }
-
-    try {
-        const appElement = useAppElement(element);
-        return await appElement.component();
-    } catch (error) {
-        console.warn(
-            `[Prose] [Render] Missing component for element schema: ${element.schemaName}`,
-        );
-
-        return {
-            render() {
-                return h(
-                    'span',
-                    { class: 'text-red-500 font-semibold font-mono' },
-                    `<${element.schemaName}/>`,
-                );
-            },
-        };
-    }
-})();
-</script>
-
-<template>
-    <ElementComponent :element />
-</template>
+<script lang="ts" setup>
+import { h, type Component } from 'vue';
+import {
+  inlinersSchema,
+  mixSchema,
+  textSchema,
+  type AnySchema,
+  type ProseElement,
+} from '@jsprose/core';
+
+import { useAppElement } from '../composables/appElement.js';
+import Mix from '../default/Mix.vue';
+import Inliners from '../default/Inliners.vue';
+import Text from '../default/Text.vue';
+
+const { element } = defineProps<{ element: ProseElement<AnySchema> }>();
+
+const ElementComponent: Component = await (async () => {
+  switch (element.schemaName) {
+    case mixSchema.name:
+      return Mix;
+    case inlinersSchema.name:
+      return Inliners;
+    case textSchema.name:
+      return Text;
+  }
+
+  try {
+    const appElement = useAppElement(element);
+    return await appElement.component();
+  } catch (error) {
+    console.warn(
+      `[Prose] [Render] Missing component for element schema: ${element.schemaName}`,
+    );
+
+    return {
+      render() {
+        return h(
+          'span',
+          { class: 'text-red-500 font-semibold font-mono' },
+          `<${element.schemaName}/>`,
+        );
+      },
+    };
+  }
+})();
+</script>
+
+<template>
+  <ElementComponent :element />
+</template>

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

@@ -1,44 +1,44 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { AnySchema, ProseElement } from '@jsprose/core';
-
-import { useElementPhrase } from '../../composables/language.js';
-import AsideMenuSeparator from './AsideMenuSeparator.vue';
-import AsideMenuCopyLink from './AsideMenuCopyLink.vue';
-
-const { element } = defineProps<{
-    element: ProseElement<AnySchema>;
-}>();
-
-const hasLink = computed(() => {
-    return Boolean(element.id);
-});
-
-const hasButtons = computed(() => {
-    return hasLink.value;
-});
-
-const phrase = await useElementPhrase(element);
-</script>
-
-<template>
-    <div
-        :style="{
-            '--asideMenuGap': '5px',
-            '--asideMenuGapBig': 'calc(var(--asideMenuGap) * 2)',
-        }"
-        class="bg-bg-main border-border flex w-40 flex-col rounded-sm border
-            py-(--asideMenuGap) font-sans
-            shadow-[0_0_12px_5px_light-dark(rgba(0,0,0,0.12),rgba(255,255,255,0.08))]
-            backface-hidden"
-    >
-        <div
-            class="flex items-center gap-(--asideMenuGapBig)
-                px-(--asideMenuGapBig) py-(--asideMenuGap) text-xs font-medium"
-        >
-            <div>{{ phrase.element_name }}</div>
-        </div>
-        <AsideMenuSeparator v-if="hasButtons" />
-        <AsideMenuCopyLink v-if="hasLink" :elementId="element.id!" />
-    </div>
-</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { AnySchema, ProseElement } from '@jsprose/core';
+
+import { useElementPhrase } from '../../composables/language.js';
+import AsideMenuSeparator from './AsideMenuSeparator.vue';
+import AsideMenuCopyLink from './AsideMenuCopyLink.vue';
+
+const { element } = defineProps<{
+  element: ProseElement<AnySchema>;
+}>();
+
+const hasLink = computed(() => {
+  return Boolean(element.id);
+});
+
+const hasButtons = computed(() => {
+  return hasLink.value;
+});
+
+const phrase = await useElementPhrase(element);
+</script>
+
+<template>
+  <div
+    :style="{
+      '--asideMenuGap': '5px',
+      '--asideMenuGapBig': 'calc(var(--asideMenuGap) * 2)',
+    }"
+    class="bg-bg-main border-border flex w-40 flex-col rounded-sm border
+      py-(--asideMenuGap) font-sans
+      shadow-[0_0_12px_5px_light-dark(rgba(0,0,0,0.12),rgba(255,255,255,0.08))]
+      backface-hidden"
+  >
+    <div
+      class="flex items-center gap-(--asideMenuGapBig) px-(--asideMenuGapBig)
+        py-(--asideMenuGap) text-xs font-medium"
+    >
+      <div>{{ phrase.element_name }}</div>
+    </div>
+    <AsideMenuSeparator v-if="hasButtons" />
+    <AsideMenuCopyLink v-if="hasLink" :elementId="element.id!" />
+  </div>
+</template>

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

@@ -1,53 +1,51 @@
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-
-import { useProseContext } from '../../composables/context.js';
-
-const { icon, title } = defineProps<{
-    icon: string;
-    title: string;
-    brand?: boolean;
-}>();
-
-const { EruditIcon, EruditTransition } = useProseContext();
-
-const key = ref(0);
-watch(
-    () => [icon, title],
-    () => {
-        key.value++;
-    },
-);
-</script>
-
-<template>
-    <button
-        :class="[
-            `relative cursor-pointer text-left text-xs
-            transition-[color,background]`,
-            brand
-                ? 'text-brand bg-brand/10'
-                : 'hocus:bg-bg-accent text-text-muted hocus:text-text',
-        ]"
-    >
-        <div
-            class="pointer-events-none invisible flex touch-none flex-wrap
-                items-center gap-(--asideMenuGapBig) px-(--asideMenuGapBig)
-                py-(--asideMenuGap)"
-        >
-            <EruditIcon :name="icon" class="shrink-0 text-[1.2em]" />
-            <div>{{ title }}</div>
-        </div>
-        <EruditTransition>
-            <div
-                :key
-                class="absolute top-0 left-0 flex flex-wrap items-center
-                    gap-(--asideMenuGapBig) px-(--asideMenuGapBig)
-                    py-(--asideMenuGap)"
-            >
-                <EruditIcon :name="icon" class="shrink-0 text-[1.2em]" />
-                <div>{{ title }}</div>
-            </div>
-        </EruditTransition>
-    </button>
-</template>
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { useProseContext } from '../../composables/context.js';
+
+const { icon, title } = defineProps<{
+  icon: string;
+  title: string;
+  brand?: boolean;
+}>();
+
+const { EruditIcon, EruditTransition } = useProseContext();
+
+const key = ref(0);
+watch(
+  () => [icon, title],
+  () => {
+    key.value++;
+  },
+);
+</script>
+
+<template>
+  <button
+    :class="[
+      'relative cursor-pointer text-left text-xs transition-[color,background]',
+      brand
+        ? 'text-brand bg-brand/10'
+        : 'hocus:bg-bg-accent text-text-muted hocus:text-text',
+    ]"
+  >
+    <div
+      class="pointer-events-none invisible flex touch-none flex-wrap
+        items-center gap-(--asideMenuGapBig) px-(--asideMenuGapBig)
+        py-(--asideMenuGap)"
+    >
+      <EruditIcon :name="icon" class="shrink-0 text-[1.2em]" />
+      <div>{{ title }}</div>
+    </div>
+    <EruditTransition>
+      <div
+        :key
+        class="absolute top-0 left-0 flex flex-wrap items-center
+          gap-(--asideMenuGapBig) px-(--asideMenuGapBig) py-(--asideMenuGap)"
+      >
+        <EruditIcon :name="icon" class="shrink-0 text-[1.2em]" />
+        <div>{{ title }}</div>
+      </div>
+    </EruditTransition>
+  </button>
+</template>

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

@@ -1,40 +1,40 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-import { useProseContext } from '../../composables/context.js';
-import { useProseLanguage } from '../../composables/language.js';
-import AsideMenuButton from './AsideMenuButton.vue';
-import shareIcon from '../assets/share.svg?raw';
-import checkIcon from '../assets/check.svg?raw';
-
-const { elementId } = defineProps<{
-    elementId: string;
-}>();
-
-const { pathUrl, baseUrl } = useProseContext();
-const prosePhrase = await useProseLanguage();
-
-const copied = ref(false);
-let resetTimer: number | undefined;
-
-async function copyLink() {
-    await navigator.clipboard.writeText(
-        location.origin + baseUrl + pathUrl.substring(1) + '#' + elementId,
-    );
-    copied.value = true;
-    if (resetTimer) clearTimeout(resetTimer);
-    resetTimer = window.setTimeout(() => {
-        copied.value = false;
-        resetTimer = undefined;
-    }, 2500);
-}
-</script>
-
-<template>
-    <AsideMenuButton
-        :brand="copied"
-        :icon="copied ? checkIcon : shareIcon"
-        :title="copied ? prosePhrase.copied : prosePhrase.copy_link"
-        @click="copyLink"
-    />
-</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useProseContext } from '../../composables/context.js';
+import { useProseLanguage } from '../../composables/language.js';
+import AsideMenuButton from './AsideMenuButton.vue';
+import shareIcon from '../assets/share.svg?raw';
+import checkIcon from '../assets/check.svg?raw';
+
+const { elementId } = defineProps<{
+  elementId: string;
+}>();
+
+const { pathUrl, baseUrl } = useProseContext();
+const prosePhrase = await useProseLanguage();
+
+const copied = ref(false);
+let resetTimer: number | undefined;
+
+async function copyLink() {
+  await navigator.clipboard.writeText(
+    location.origin + baseUrl + pathUrl.substring(1) + '#' + elementId,
+  );
+  copied.value = true;
+  if (resetTimer) clearTimeout(resetTimer);
+  resetTimer = window.setTimeout(() => {
+    copied.value = false;
+    resetTimer = undefined;
+  }, 2500);
+}
+</script>
+
+<template>
+  <AsideMenuButton
+    :brand="copied"
+    :icon="copied ? checkIcon : shareIcon"
+    :title="copied ? prosePhrase.copied : prosePhrase.copy_link"
+    @click="copyLink"
+  />
+</template>

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

@@ -1,3 +1,3 @@
-<template>
-    <hr class="border-border/80 my-(--asideMenuGap)" />
-</template>
+<template>
+  <hr class="border-border/80 my-(--asideMenuGap)" />
+</template>