Peaceultime/obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finished project configuration page with reorder

Browse Source
This commit is contained in:
Peaceultime
2024-11-18 17:21:52 +01:00
parent a9363e8c06
commit 1c239f161b
20 changed files with 552 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/Editor.vue
View File

@@ -1,6 +1,10 @@
<script lang="ts">
const External = Annotation.define<boolean>();
</script>
<script setup lang="ts">
import { dropCursor, crosshairCursor, keymap, EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { dropCursor, crosshairCursor, keymap, EditorView, ViewUpdate } from '@codemirror/view';
import { Annotation, EditorState } from '@codemirror/state';
import { indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, foldKeymap } from '@codemirror/language';
import { history, defaultKeymap, historyKeymap } from '@codemirror/commands';
import { searchKeymap } from '@codemirror/search';
@@ -36,7 +40,13 @@ onMounted(() => {
...foldKeymap,
...completionKeymap,
...lintKeymap
])
]),
EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
if (viewUpdate.docChanged && !viewUpdate.transactions.some(tr => tr.annotation(External)))
{
model.value = viewUpdate.state.doc.toString();
}
})
]
});
view.value = new EditorView({
@@ -60,16 +70,15 @@ watchEffect(() => {
const currentValue = view.value ? view.value.state.doc.toString() : "";
if (view.value && model.value !== currentValue) {
view.value.dispatch({
changes: { from: 0, to: currentValue.length, insert: model.value || "" }
changes: { from: 0, to: currentValue.length, insert: model.value || "" },
annotations: [External.of(true)],
});
}
});
</script>
<template>
<div class="flex flex-1 justify-center items-start p-12">
<div ref="editor" class="flex flex-1 justify-center items-stretch border border-light-35 dark:border-dark-35 caret-light-100 dark:caret-dark-100" />
</div>
<div ref="editor" class="flex flex-1 w-full justify-stretch items-stretch border border-light-35 dark:border-dark-35 caret-light-100 dark:caret-dark-100" />
</template>
<style>

54
components/prose/ProseTag.vue
View File

@@ -1,57 +1,5 @@
<template>
<!-- <HoverPopup @before-show="fetch">
<template #content>
<Suspense suspensible>
<div class="mw-[400px]">
<div v-if="fetched === false" class="loading w-[400px] h-[150px]"></div>
<template v-else-if="!!data">
<div v-if="data.description" class="pb-4 pt-3 px-8">
<span class="text-2xl font-semibold">#{{ data.tag }}</span>
<Markdown :content="data.description"></Markdown>
</div>
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Fichier vide</div>
<div class="text-lg text-light-60 dark:text-dark-60">Cette page est vide</div>
</div>
</template>
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher</div>
<div class="text-lg text-light-60 dark:text-dark-60">Cette page est impossible à traiter</div>
</div>
</div>
<template #fallback><div class="loading w-[400px] h-[150px]"></div></template>
</Suspense>
</template>
<template #default>
<span class="before:content-['#'] cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30">
<slot></slot>
</span>
</template>
</HoverPopup> -->
<span class="before:content-['#'] cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30">
<slot></slot>
</span>
</template>
<!-- <script setup lang="ts">
import type { Tag } from '~/types/api';
const { tag } = defineProps({
tag: {
type: String,
required: true,
}
});
const data = ref<Tag>(), fetched = ref(false);
const route = useRoute();
const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));
async function fetch()
{
if(fetched.value)
return;
data.value = await $fetch(`/api/project/${project.value}/tags/${encodeURIComponent(tag)}`);
fetched.value = true;
}
</script> -->
</template>