Markdown editor in progress + Login and session process completed

components/prose/ProseA.vue

@@ -0,0 +1,103 @@
+<template>
+    <Teleport to="body" v-if="!external && hovered && status !== 'pending'">
+        <div class="popover hover-popover is-loaded" :style="pos" @mouseenter="(e) => showPreview(e, false)"
+            @mouseleave="hidePreview">
+            <template v-if="!!page && !!page[0]">
+                <div class="markdown-embed" v-if="page[0].type === 'Markdown' && page[0].content.length > 0">
+                    <div class="markdown-embed-content">
+                        <div class="markdown-preview-view markdown-rendered node-insert-event hide-title">
+                            <div class="markdown-preview-sizer markdown-preview-section" style="padding-bottom: 0px;">
+                                <h1 v-if="page[0]?.title">{{ page[0]?.title }}</h1>
+                                <Markdown v-model="page[0].content" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div v-else-if="page[0].type === 'Canvas'" class="canvas-embed is-loaded">
+                    <CanvasRenderer :canvas="JSON.parse(page[0].content)" />
+                </div>
+                <div class="markdown-embed" v-else>
+                    <div class="not-found-container">
+                        <div class="not-found-title">Impossible de prévisualiser</div>
+                        <div class="not-found-description">Cliquez sur le lien pour accéder au contenu</div>
+                    </div>
+                </div>
+            </template>
+            <div v-else class="loading"></div>
+        </div>
+    </Teleport>
+    <NuxtLink :to="{ path, force: true }" :class="class" noPrefetch @mouseenter="(e) => showPreview(e, true)" @mouseleave="hidePreview">
+        <slot v-bind="$attrs"></slot>
+    </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import { parseURL } from 'ufo';
+
+function showPreview(e: Event, bbox: boolean) {
+    clearTimeout(timeout);
+    if (bbox) {
+        const target = e.currentTarget as HTMLElement;
+        const rect = target?.getBoundingClientRect();
+        const r: any = {};
+        if (rect.bottom + 450 < window.innerHeight)
+            r.top = (rect.bottom + 4) + "px";
+        else
+            r.bottom = (window.innerHeight - rect.top + 4) + "px";
+        if (rect.right + 550 < window.innerWidth)
+            r.left = rect.left + "px";
+        else
+            r.right = (window.innerWidth - rect.right + 4) + "px";
+        pos.value = r;
+    }
+    hovered.value = true;
+}
+function hidePreview(e: Event) {
+    timeout = setTimeout(() => hovered.value = false, 300);
+}
+
+interface Prop
+{
+    href?: string;
+    class?: string;
+    project?: number;
+}
+const props = defineProps<Prop>();
+const path = ref(props.href), external = ref(false), hovered = ref(false), pos = ref<any>();
+let timeout: NodeJS.Timeout;
+
+if (parseURL(props.href).protocol !== undefined)
+{
+    external.value = true;
+}
+
+let id = ref(props.project);
+if(id.value === undefined)
+{
+    id.value = useProject().id.value;
+}
+
+const { data: page, status, error, execute } = await useLazyFetch(`/api/project/${id.value}/file`, {
+    query: {
+        search: "%" + parseURL(props.href).pathname,
+    },
+    immediate: false,
+    dedupe: 'defer',
+});
+
+if(!external.value)
+{
+    await execute();
+}
+
+if(status.value === 'error')
+{
+    console.error(error.value);
+}
+
+if (page.value && page.value[0])
+{
+    path.value = `/explorer/${id.value}${page.value[0].path}`;
+    console.log(path.value);
+}
+</script>

components/prose/ProseBlockquote.vue

@@ -0,0 +1,5 @@
+<template>
+  <blockquote>
+    <slot />
+  </blockquote>
+</template>

components/prose/ProseCode.vue

@@ -0,0 +1,3 @@
+<template>
+  <code><slot /></code>
+</template>

components/prose/ProseEm.vue

@@ -0,0 +1,5 @@
+<template>
+  <em>
+    <slot />
+  </em>
+</template>

components/prose/ProseH1.vue

@@ -0,0 +1,11 @@
+<template>
+  <h1 :id="id">
+    <slot />
+  </h1>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ id?: string }>()
+
+const generate = computed(() => props.id)
+</script>

components/prose/ProseH2.vue

@@ -0,0 +1,11 @@
+<template>
+  <h2 :id="id">
+    <slot />
+  </h2>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ id?: string }>()
+
+const generate = computed(() => props.id)
+</script>

components/prose/ProseH3.vue

@@ -0,0 +1,11 @@
+<template>
+  <h3 :id="id">
+    <slot />
+  </h3>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ id?: string }>()
+
+const generate = computed(() => props.id)
+</script>

components/prose/ProseH4.vue

@@ -0,0 +1,11 @@
+<template>
+  <h4 :id="id">
+    <slot />
+  </h4>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ id?: string }>()
+
+const generate = computed(() => props.id)
+</script>

components/prose/ProseH5.vue

@@ -0,0 +1,11 @@
+<template>
+  <h5 :id="id">
+    <slot />
+  </h5>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ id?: string }>()
+
+const generate = computed(() => props.id)
+</script>

components/prose/ProseH6.vue

@@ -0,0 +1,11 @@
+<template>
+  <h6 :id="id">
+    <slot />
+  </h6>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ id?: string }>()
+
+const generate = computed(() => props.id)
+</script>

components/prose/ProseHr.vue

@@ -0,0 +1,3 @@
+<template>
+  <hr>
+</template>

components/prose/ProseImg.vue

@@ -0,0 +1,42 @@
+<template>
+  <img
+    :src="refinedSrc"
+    :alt="alt"
+    :width="width"
+    :height="height"
+  />
+</template>
+
+<script setup lang="ts">
+import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
+import { useRuntimeConfig, computed, resolveComponent } from '#imports'
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: ''
+  },
+  alt: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: [String, Number],
+    default: undefined
+  },
+  height: {
+    type: [String, Number],
+    default: undefined
+  }
+})
+
+const refinedSrc = computed(() => {
+  if (props.src?.startsWith('/') && !props.src.startsWith('//')) {
+    const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
+    if (_base !== '/' && !props.src.startsWith(_base)) {
+      return joinURL(_base, props.src)
+    }
+  }
+  return props.src
+})
+</script>

components/prose/ProseLi.vue

@@ -0,0 +1,3 @@
+<template>
+  <li><slot /></li>
+</template>

components/prose/ProseOl.vue

@@ -0,0 +1,5 @@
+<template>
+  <ol>
+    <slot />
+  </ol>
+</template>

components/prose/ProseP.vue

@@ -0,0 +1,3 @@
+<template>
+  <p><slot /></p>
+</template>

components/prose/ProsePre.vue

@@ -0,0 +1,36 @@
+<template>
+  <pre :class="$props.class"><slot /></pre>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  code: {
+    type: String,
+    default: ''
+  },
+  language: {
+    type: String,
+    default: null
+  },
+  filename: {
+    type: String,
+    default: null
+  },
+  highlights: {
+    type: Array as () => number[],
+    default: () => []
+  },
+  meta: {
+    type: String,
+    default: null
+  },
+  class: {
+    type: String,
+    default: null
+  }
+})
+</script>
+
+<style>
+pre code .line{display:block}
+</style>

components/prose/ProseScript.vue

@@ -0,0 +1,15 @@
+<template>
+  <div v-if="isDev">
+    Rendering the <code>script</code> element is dangerous and is disabled by default. Consider implementing your own <code>ProseScript</code> element to have control over script rendering.
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  src: {
+    type: String,
+    default: ''
+  }
+})
+const isDev = import.meta.dev
+</script>

components/prose/ProseStrong.vue

@@ -0,0 +1,5 @@
+<template>
+  <strong>
+    <slot />
+  </strong>
+</template>

components/prose/ProseTable.vue

@@ -0,0 +1,5 @@
+<template>
+  <table>
+    <slot />
+  </table>
+</template>

components/prose/ProseTbody.vue

@@ -0,0 +1,5 @@
+<template>
+  <tbody>
+    <slot />
+  </tbody>
+</template>

components/prose/ProseTd.vue

@@ -0,0 +1,5 @@
+<template>
+  <td>
+    <slot />
+  </td>
+</template>

components/prose/ProseTh.vue

@@ -0,0 +1,5 @@
+<template>
+  <th>
+    <slot />
+  </th>
+</template>

components/prose/ProseThead.vue

@@ -0,0 +1,5 @@
+<template>
+  <thead>
+    <slot />
+  </thead>
+</template>

components/prose/ProseTr.vue

@@ -0,0 +1,5 @@
+<template>
+  <tr>
+    <slot />
+  </tr>
+</template>

components/prose/ProseUl.vue

@@ -0,0 +1,5 @@
+<template>
+  <ul>
+    <slot />
+  </ul>
+</template>

components/prose/live/LiveA.vue

@@ -0,0 +1,5 @@
+<template>
+    <a>
+        <slot></slot>
+    </a>
+</template>

components/prose/live/LiveBlockquote.vue

@@ -0,0 +1,12 @@
+<template>
+    <span v-if="focused">> </span>
+    <blockquote ref="el" @focusin="focused = true" @focusout="focused = false">
+        <slot />
+    </blockquote>
+</template>
+
+<script setup lang="ts">
+    const focused = ref(false);
+
+    watch(focused, console.log);
+</script>

components/prose/live/LiveH1.vue

@@ -0,0 +1,3 @@
+<template>
+    <span v-show="false"># </span><h1><slot></slot></h1>
+</template>

components/prose/live/LiveH2.vue

@@ -0,0 +1,12 @@
+<template>
+    <span v-show="focused">## </span><h2><slot></slot></h2>
+</template>
+
+<script setup>
+const props = defineProps({
+    focused: {
+        type: Boolean,
+        default: false
+    }
+})
+</script>

components/prose/live/LiveH3.vue

@@ -0,0 +1,3 @@
+<template>
+    <span v-show="false">### </span><h3><slot></slot></h3>
+</template>

components/prose/live/LiveH4.vue

@@ -0,0 +1,3 @@
+<template>
+    <span v-show="false">#### </span><h4><slot></slot></h4>
+</template>

components/prose/live/LiveH5.vue

@@ -0,0 +1,3 @@
+<template>
+    <span v-show="false">##### </span><h5><slot></slot></h5>
+</template>

components/prose/live/LiveH6.vue

@@ -0,0 +1,3 @@
+<template>
+    <span v-show="false">###### </span><h6><slot></slot></h6>
+</template>