@erudit-js/prose 3.0.0-dev.25

package/dist/app/appElement.d.ts

@@ -0,0 +1,19 @@
+import type { AnySchema, ProseElement } from '@jsprose/core';
+import { type ElementIcon, type ElementIconRaw } from './icon.js';
+import { type ElementComponent, type ElementComponentRaw } from './component.js';
+import { type ElementLanguages, type ElementLanguagesRaw, type ElementPhrases } from './language/element.js';
+export interface AppElementDefinition<TSchema extends AnySchema> {
+    schema: TSchema;
+    component: ElementComponentRaw;
+    languages?: ElementLanguagesRaw<ElementPhrases>;
+    icon?: ElementIconRaw;
+    createStorage?: (proseElement: ProseElement<TSchema>) => Promise<TSchema['Storage']> | TSchema['Storage'];
+}
+export interface AppElement<TSchema extends AnySchema = AnySchema> {
+    schema: TSchema;
+    component: ElementComponent;
+    languages: ElementLanguages<ElementPhrases>;
+    icon: ElementIcon;
+    createStorage?: (proseElement: ProseElement<TSchema>) => Promise<any> | any;
+}
+export declare function defineEruditProseAppElement<TSchema extends AnySchema>(appElement: AppElementDefinition<TSchema>): AppElement<TSchema>;

package/dist/app/appElement.js

@@ -0,0 +1,12 @@
+import { resolveElementIcon } from "./icon.js";
+import { resolveElementComponent } from "./component.js";
+import { resolveElementLanguages } from "./language/element.js";
+export function defineEruditProseAppElement(appElement) {
+	return {
+		schema: appElement.schema,
+		component: resolveElementComponent(appElement.component),
+		languages: resolveElementLanguages(appElement.schema.name, appElement.languages),
+		icon: resolveElementIcon(appElement.schema.type === "block", appElement.icon),
+		createStorage: appElement.createStorage
+	};
+}

package/dist/app/component.d.ts

@@ -0,0 +1,6 @@
+import type { Component } from 'vue';
+export type ElementComponentRaw = () => Promise<{
+    default: Component;
+}>;
+export type ElementComponent = () => Promise<Component>;
+export declare function resolveElementComponent(componentRaw: ElementComponentRaw): ElementComponent;

package/dist/app/component.js

@@ -0,0 +1,6 @@
+export function resolveElementComponent(componentRaw) {
+	return async () => {
+		const componentModule = await componentRaw();
+		return componentModule.default;
+	};
+}

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

@@ -0,0 +1,16 @@
+import { type InjectionKey, type Ref } from 'vue';
+import type { AnySchema, ProseElement } from '@jsprose/core';
+export interface AnchorState {
+    anchorResolving: Ref<boolean>;
+    allowJumpToAnchor: Ref<boolean>;
+    anchorElement: Ref<ProseElement<AnySchema> | undefined>;
+    containsAnchorElements: Ref<Set<ProseElement<AnySchema>>>;
+}
+export declare function useAnchorState(hashId: Ref<string | undefined>, element: ProseElement<AnySchema>): AnchorState;
+export declare const anchorStateSymbol: InjectionKey<AnchorState>;
+export declare function useIsAnchor(element: ProseElement<AnySchema>): import("vue").ComputedRef<boolean | undefined>;
+export declare function useContainsAnchor(element: ProseElement<AnySchema>): import("vue").ComputedRef<boolean>;
+export declare function useArrayContainsAnchor(elements: ProseElement<AnySchema>[]): import("vue").ComputedRef<number | undefined>;
+export declare function useAnchorResolving(): Ref<boolean, boolean>;
+export declare function useJumpToAnchor(): (element: HTMLElement) => void;
+export declare function useResolveAnchor(): () => void;

package/dist/app/composables/anchor.js

@@ -0,0 +1,89 @@
+import { computed, inject, onMounted, shallowRef, watch } from "vue";
+export function useAnchorState(hashId, element) {
+	const anchorResolving = shallowRef(false);
+	const allowJumpToAnchor = shallowRef(false);
+	const anchorElement = shallowRef();
+	const containsAnchorElements = shallowRef(new Set());
+	onMounted(() => {
+		watch(hashId, () => {
+			anchorResolving.value = true;
+			allowJumpToAnchor.value = true;
+			anchorElement.value = undefined;
+			containsAnchorElements.value = new Set();
+			if (!hashId.value) {
+				// No hash, no anchor to resolve
+				anchorResolving.value = false;
+				return;
+			}
+			const stack = [];
+			const dfs = (_element) => {
+				stack.push(_element);
+				if (_element.id === hashId.value) {
+					anchorElement.value = _element;
+					containsAnchorElements.value = new Set(stack.slice(0, -1));
+					stack.pop();
+					return true;
+				}
+				const children = _element.children || [];
+				for (const child of children) {
+					if (dfs(child)) {
+						stack.pop();
+						return true;
+					}
+				}
+				stack.pop();
+				return false;
+			};
+			dfs(element);
+			if (!anchorElement.value) {
+				// There is a hash, but it targets somewhere else, not this element tree
+				anchorResolving.value = false;
+			}
+		}, { immediate: true });
+	});
+	return {
+		anchorResolving,
+		allowJumpToAnchor,
+		anchorElement,
+		containsAnchorElements
+	};
+}
+export const anchorStateSymbol = Symbol();
+export function useIsAnchor(element) {
+	const { anchorElement } = inject(anchorStateSymbol);
+	return computed(() => {
+		return anchorElement.value && anchorElement.value.id === element.id;
+	});
+}
+export function useContainsAnchor(element) {
+	const { containsAnchorElements } = inject(anchorStateSymbol);
+	return computed(() => {
+		return containsAnchorElements.value.has(element);
+	});
+}
+export function useArrayContainsAnchor(elements) {
+	const { containsAnchorElements } = inject(anchorStateSymbol);
+	return computed(() => {
+		const i = elements.findIndex((el) => containsAnchorElements.value.has(el));
+		return i !== -1 ? i : undefined;
+	});
+}
+export function useAnchorResolving() {
+	const { anchorResolving } = inject(anchorStateSymbol);
+	return anchorResolving;
+}
+export function useJumpToAnchor() {
+	const { allowJumpToAnchor } = inject(anchorStateSymbol);
+	return (element) => {
+		if (allowJumpToAnchor.value) {
+			element.scrollIntoView({ block: "center" });
+		}
+	};
+}
+export function useResolveAnchor() {
+	const { allowJumpToAnchor, anchorResolving } = inject(anchorStateSymbol);
+	return () => {
+		allowJumpToAnchor.value = false;
+		anchorResolving.value = false;
+	};
+}

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

@@ -0,0 +1,4 @@
+import { type AnySchema, type ProseElement } from '@jsprose/core';
+import type { AppElement } from '../appElement.js';
+export declare function useAppElement(schemaName: string): AppElement;
+export declare function useAppElement(element: ProseElement<AnySchema>): AppElement;

package/dist/app/composables/appElement.js

@@ -0,0 +1,16 @@
+import { ProseError } from "@jsprose/core";
+import { useProseContext } from "./context.js";
+export function useAppElement(elementOrName) {
+	let schemaName;
+	if (typeof elementOrName === "string") {
+		schemaName = elementOrName;
+	} else {
+		schemaName = elementOrName.schemaName;
+	}
+	const { appElements } = useProseContext();
+	const appElement = appElements[schemaName];
+	if (!appElement) {
+		throw new ProseError(`No AppElement found for schema "${schemaName}"!`);
+	}
+	return appElement;
+}

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

@@ -0,0 +1,22 @@
+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 { AppElement } from '../appElement.js';
+export interface ProseContext {
+    mode: EruditMode;
+    languageCode: EruditLanguageCode;
+    appElements: Record<string, AppElement>;
+    formatText: (text: string) => string;
+    pathUrl: string;
+    baseUrl: string;
+    hashUrl: Ref<string | undefined>;
+    eruditIcons: Record<string, string>;
+    EruditTransition: Component;
+    EruditIcon: Component;
+    EruditLink: Component;
+    setPreview: (previewRequest: any) => void;
+    closePreview: () => void;
+    loadingSvg: string;
+}
+export declare const proseContextSymbol: InjectionKey<ProseContext>;
+export declare function useProseContext(): ProseContext;

package/dist/app/composables/context.js

@@ -0,0 +1,5 @@
+import { inject } from "vue";
+export const proseContextSymbol = Symbol();
+export function useProseContext() {
+	return inject(proseContextSymbol);
+}

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

@@ -0,0 +1,3 @@
+import type { AnySchema, ProseElement } from '@jsprose/core';
+export declare function useElementIcon(schemaName: string): Promise<string>;
+export declare function useElementIcon(element: ProseElement<AnySchema>): Promise<string>;

package/dist/app/composables/elementIcon.js

@@ -0,0 +1,5 @@
+import { useAppElement } from "./appElement.js";
+export async function useElementIcon(elementOrName) {
+	const appElement = useAppElement(typeof elementOrName === "string" ? elementOrName : elementOrName.schemaName);
+	return appElement.icon();
+}

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

@@ -0,0 +1 @@
+export declare function useFormatText(): (text: string) => string;

package/dist/app/composables/formatText.js

@@ -0,0 +1,5 @@
+import { useProseContext } from "./context.js";
+export function useFormatText() {
+	const { formatText } = useProseContext();
+	return formatText;
+}

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

@@ -0,0 +1,8 @@
+import type { AnySchema, ProseElement } from '@jsprose/core';
+import type { ElementPhrases } from '../language/element.js';
+export declare function useProseLanguage(): Promise<{
+    copy_link: string;
+    copied: string;
+}>;
+export declare function useElementPhrase<TPhrases extends ElementPhrases>(schemaName: string): Promise<TPhrases>;
+export declare function useElementPhrase<TPhrases extends ElementPhrases>(element: ProseElement<AnySchema>): Promise<TPhrases>;

package/dist/app/composables/language.js

@@ -0,0 +1,13 @@
+import { proseLanguages } from "../language/prose.js";
+import { useProseContext } from "./context.js";
+import { useAppElement } from "./appElement.js";
+export async function useProseLanguage() {
+	const { languageCode } = useProseContext();
+	return (await proseLanguages[languageCode]()).default;
+}
+export async function useElementPhrase(elementOrName) {
+	const { languageCode } = useProseContext();
+	const appElement = useAppElement(typeof elementOrName === "string" ? elementOrName : elementOrName.schemaName);
+	const languages = appElement.languages;
+	return await languages[languageCode]();
+}

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

@@ -0,0 +1,5 @@
+import { type InjectionKey } from 'vue';
+import { type AnySchema, type GenericStorage, type ProseElement } from '@jsprose/core';
+export declare const proseStorageSymbol: InjectionKey<GenericStorage>;
+export declare function useProseStorage(): GenericStorage;
+export declare function useElementStorage<TSchema extends AnySchema>(element: ProseElement<TSchema>): Promise<TSchema['Storage']>;

package/dist/app/composables/storage.js

@@ -0,0 +1,23 @@
+import { inject } from "vue";
+import { ProseError } from "@jsprose/core";
+import { useAppElement } from "./appElement.js";
+export const proseStorageSymbol = Symbol();
+export function useProseStorage() {
+	return inject(proseStorageSymbol);
+}
+export async function useElementStorage(element) {
+	const storage = useProseStorage();
+	const appElement = useAppElement(element);
+	if (!element.storageKey) {
+		return undefined;
+	}
+	if (appElement.createStorage) {
+		storage[element.storageKey] = await appElement.createStorage(element);
+	}
+	if (element.storageKey in storage) {
+		return storage[element.storageKey];
+	}
+	// throw new ProseError(
+	//     `Element ${element.schemaName} with storage key "${element.storageKey}" has no storage value!`,
+	// );
+}

package/dist/app/default/Inliners.vue

@@ -0,0 +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>

package/dist/app/default/Mix.vue

@@ -0,0 +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>

package/dist/app/default/Text.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { Text, h } from 'vue';
+import type { ProseElement, textSchema } from '@jsprose/core';
+
+import { useFormatText } from '../composables/formatText.js';
+
+const { element } = defineProps<{ element: ProseElement<typeof textSchema> }>();
+const formatText = useFormatText();
+
+const originalText = element.data;
+const leadingSpace = originalText.match(/^(\s*)/)?.[1] ? ' ' : '';
+const trailingSpace = originalText.match(/(\s*)$/)?.[1] ? ' ' : '';
+const formattedText = formatText(originalText);
+const textWithSpaces = leadingSpace + formattedText + trailingSpace;
+
+const TextComponent = h(Text, textWithSpaces);
+</script>
+
+<template>
+    <component :is="TextComponent" />
+</template>

package/dist/app/icon.d.ts

@@ -0,0 +1,5 @@
+export type ElementIconRaw = () => Promise<{
+    default: string;
+}>;
+export type ElementIcon = () => Promise<string>;
+export declare function resolveElementIcon(isBlock: boolean, rawIcon?: ElementIconRaw): ElementIcon;

package/dist/app/icon.js

@@ -0,0 +1,7 @@
+export function resolveElementIcon(isBlock, rawIcon) {
+	const iconLoader = rawIcon ?? (isBlock ? () => import("./shared/assets/block.svg?raw") : () => import("./shared/assets/inliner.svg?raw"));
+	return async () => {
+		const iconModule = await iconLoader();
+		return iconModule.default;
+	};
+}

package/dist/app/index.d.ts

@@ -0,0 +1,18 @@
+export * from './appElement.js';
+export * from './component.js';
+export * from './icon.js';
+export * from './language/element.js';
+export * from './language/prose.js';
+export * from './composables/context.js';
+export * from './composables/anchor.js';
+export * from './composables/appElement.js';
+export * from './composables/elementIcon.js';
+export * from './composables/formatText.js';
+export * from './composables/language.js';
+export * from './composables/storage.js';
+export * from './shared/photoswipe/composable.js';
+export * from './shared/invert.js';
+export { default as Prose } from './shared/Prose.vue';
+export { default as Render } from './shared/Render.vue';
+export { default as Block } from './shared/block/Block.vue';
+export { default as Inliner } from './shared/inliner/Inliner.vue';

package/dist/app/index.js

@@ -0,0 +1,18 @@
+export * from "./appElement.js";
+export * from "./component.js";
+export * from "./icon.js";
+export * from "./language/element.js";
+export * from "./language/prose.js";
+export * from "./composables/context.js";
+export * from "./composables/anchor.js";
+export * from "./composables/appElement.js";
+export * from "./composables/elementIcon.js";
+export * from "./composables/formatText.js";
+export * from "./composables/language.js";
+export * from "./composables/storage.js";
+export * from "./shared/photoswipe/composable.js";
+export * from "./shared/invert.js";
+export { default as Prose } from "./shared/Prose.vue";
+export { default as Render } from "./shared/Render.vue";
+export { default as Block } from "./shared/block/Block.vue";
+export { default as Inliner } from "./shared/inliner/Inliner.vue";

package/dist/app/language/element.d.ts

@@ -0,0 +1,10 @@
+export interface ElementDefaultPhrases {
+    element_name: string;
+}
+export type ElementPhrases<T extends Record<string, string> = {}> = Omit<T, keyof ElementDefaultPhrases> & ElementDefaultPhrases;
+export declare function defineElementLanguage<T extends ElementPhrases<T> = ElementPhrases>(phrases: T): T;
+export type ElementLanguagesRaw<T extends ElementPhrases> = Record<string, () => Promise<{
+    default: T;
+}>>;
+export type ElementLanguages<T extends ElementPhrases> = Record<string, () => Promise<T>>;
+export declare function resolveElementLanguages<T extends ElementPhrases<T>>(schemaName: string, rawLanguages?: ElementLanguagesRaw<T>): ElementLanguages<T>;

package/dist/app/language/element.js

@@ -0,0 +1,12 @@
+export function defineElementLanguage(phrases) {
+	return phrases;
+}
+export function resolveElementLanguages(schemaName, rawLanguages) {
+	if (!rawLanguages) {
+		return new Proxy({}, { get: () => async () => ({ element_name: schemaName }) });
+	}
+	return Object.fromEntries(Object.entries(rawLanguages).map(([languageCode, loadPhrases]) => [languageCode, async () => {
+		const phrasesModule = await loadPhrases();
+		return phrasesModule.default;
+	}]));
+}

package/dist/app/language/list/en.d.ts

@@ -0,0 +1,3 @@
+import type { ProsePhrases } from '../prose.js';
+declare const en: ProsePhrases;
+export default en;

package/dist/app/language/list/en.js

@@ -0,0 +1,5 @@
+const en = {
+	copy_link: "Copy link",
+	copied: "Copied"
+};
+export default en;

package/dist/app/language/list/ru.d.ts

@@ -0,0 +1,3 @@
+import type { ProsePhrases } from '../prose.js';
+declare const ru: ProsePhrases;
+export default ru;

package/dist/app/language/list/ru.js

@@ -0,0 +1,5 @@
+const ru = {
+	copy_link: "Получить ссылку",
+	copied: "Скопировано"
+};
+export default ru;

package/dist/app/language/prose.d.ts

@@ -0,0 +1,9 @@
+type Phrases<TPhrases extends Record<string, string>> = TPhrases;
+export type ProsePhrases = Phrases<{
+    copy_link: string;
+    copied: string;
+}>;
+export declare const proseLanguages: Record<string, () => Promise<{
+    default: ProsePhrases;
+}>>;
+export {};

package/dist/app/language/prose.js

@@ -0,0 +1,4 @@
+export const proseLanguages = {
+	en: () => import("./list/en.js"),
+	ru: () => import("./list/ru.js")
+};

package/dist/app/shared/Prose.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { provide } from 'vue';
+import type { AnySchema, GenericStorage, ProseElement } from '@jsprose/core';
+
+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';
+
+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);
+</script>
+
+<template>
+    <section
+        :style="{ '--proseGap': 'none' }"
+        :class="[
+            /* Variables */
+            'micro:[--proseAsideWidth:20px] [--proseAsideWidth:16px]',
+        ]"
+    >
+        <Render :element />
+    </section>
+</template>

package/dist/app/shared/Render.vue

@@ -0,0 +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>

package/dist/app/shared/assets/block.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M11,19.43v-6.85l-6-3.48v6.85l6,3.48ZM13,19.43l6-3.48v-6.85l-6,3.48v6.85ZM12,10.85l5.93-3.43-5.93-3.43-5.93,3.43,5.93,3.43ZM4,17.7c-.32-.18-.56-.43-.74-.73s-.26-.63-.26-1v-7.95c0-.37.09-.7.26-1s.42-.54.74-.73l7-4.03c.32-.18.65-.28,1-.28s.68.09,1,.28l7,4.03c.32.18.56.43.74.73s.26.63.26,1v7.95c0,.37-.09.7-.26,1s-.42.54-.74.73l-7,4.03c-.32.18-.65.28-1,.28s-.68-.09-1-.28l-7-4.03Z"/>
+</svg>

package/dist/app/shared/assets/check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960">
+  <path d="M353.82,643.31l437.65-437.65c10.33-10.33,22.38-15.49,36.15-15.49s25.82,5.16,36.15,15.49,15.49,22.59,15.49,36.79-5.16,26.47-15.49,36.79l-473.8,475.09c-10.33,10.33-22.38,15.49-36.15,15.49s-25.82-5.16-36.15-15.49l-222.05-222.05c-10.33-10.33-15.28-22.59-14.85-36.79s5.81-26.47,16.14-36.79,22.59-15.49,36.79-15.49,26.47,5.16,36.79,15.49l183.32,184.62Z"/>
+</svg>

package/dist/app/shared/assets/inliner.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M11.29,4.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71c.19-.19.43-.29.71-.29s.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM7.29,4.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM3.29,4.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM3.29,8.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM3.29,12.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71c.19-.19.43-.29.71-.29s.52.1.71.29c.19.19.29.43.29.71s-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM3.29,16.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29-.52-.1-.71-.29ZM11.29,20.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71c.19-.19.43-.29.71-.29s.52.1.71.29.29.43.29.71-.1.52-.29.71c-.19.19-.43.29-.71.29s-.52-.1-.71-.29ZM7.29,20.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71c-.19.19-.43.29-.71.29s-.52-.1-.71-.29ZM3.29,20.71c-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71c-.19.19-.43.29-.71.29s-.52-.1-.71-.29ZM16,21c-.28,0-.52-.1-.71-.29-.19-.19-.29-.43-.29-.71s.1-.52.29-.71.43-.29.71-.29h1s0-14,0-14h-1c-.28,0-.52-.1-.71-.29s-.29-.43-.29-.71.1-.52.29-.71.43-.29.71-.29h4c.28,0,.52.1.71.29.19.19.29.43.29.71s-.1.52-.29.71c-.19.19-.43.29-.71.29h-1s0,14,0,14h1c.28,0,.52.1.71.29.19.19.29.43.29.71s-.1.52-.29.71c-.19.19-.43.29-.71.29h-4Z"/>
+</svg>

package/dist/app/shared/assets/plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M10.76,13.24h-6.18c-.35,0-.64-.12-.88-.36s-.36-.53-.36-.88.12-.64.36-.88.53-.36.88-.36h6.18v-6.18c0-.35.12-.64.36-.88s.53-.36.88-.36.64.12.88.36.36.53.36.88v6.18h6.18c.35,0,.64.12.88.36.23.23.36.53.36.88s-.12.64-.36.88-.53.36-.88.36h-6.18v6.18c0,.35-.12.64-.36.88-.23.23-.53.36-.88.36s-.64-.12-.88-.36-.36-.53-.36-.88v-6.18Z"/>
+</svg>

package/dist/app/shared/assets/share.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+    <path d="M680-80q-50 0-85-35t-35-85q0-6 3-28L282-392q-16 15-37 23.5t-45 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q24 0 45 8.5t37 23.5l281-164q-2-7-2.5-13.5T560-760q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-24 0-45-8.5T598-672L317-508q2 7 2.5 13.5t.5 14.5q0 8-.5 14.5T317-452l281 164q16-15 37-23.5t45-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Z"/>
+</svg>

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

@@ -0,0 +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>