Skip to content

Commit

Permalink
temporary tree position
Browse files Browse the repository at this point in the history
  • Loading branch information
arily committed Jun 30, 2023
1 parent f77a3ca commit cde0d59
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 73 deletions.
15 changes: 8 additions & 7 deletions src/components/tree.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,26 @@ interface Prop {
path: string
name: string
children?: Prop[]
expandLevel?: number
level?: number
}
const props = defineProps<Prop>()
const props = withDefaults(defineProps<Prop>(), {
level: 0,
expandLevel: 0,
})
const emit = defineEmits<(event: 'select', data: Prop) => void>()
</script>

<template>
<li>
<details v-if="props.children" open>
<details v-if="props.children" :open="level <= expandLevel">
<summary>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" /></svg>
{{ props.name }}
</summary>
<ul>
<tree v-for="p in props.children" v-bind="p" :key="`p-${p}`" @select="p => emit('select', p)" />
<tree v-for="p in props.children" v-bind="p" :key="`p-${p}`" :level="props.level + 1" @select="p => emit('select', p)" />
</ul>
</details>
<a v-else @click.prevent="emit('select', props)">
Expand All @@ -26,7 +31,3 @@ const emit = defineEmits<(event: 'select', data: Prop) => void>()
</a>
</li>
</template>

<style scoped>
</style>
14 changes: 7 additions & 7 deletions src/composables/useEditor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ import { Editor as EditorVue } from '@tiptap/vue-3'

import { lowlight } from 'lowlight/lib/core.js'
import useEditorExtensions from './useEditorExtensionsClient'
import hljs from '~~/configs/hljs'
import allLanguages from '~~/configs/hljs'

type JSONCallback = (content: JSONContent) => void
type LanguageKey = keyof typeof hljs
type Language = typeof hljs[LanguageKey]
type LanguageKey = keyof typeof allLanguages
type Language = typeof allLanguages[LanguageKey]

export async function importLowlightLanguage(language: Language) {
return await import(`../../node_modules/highlight.js/es/languages/${language}.js`)
Expand All @@ -24,15 +24,15 @@ export async function useLowlightLanguage(language: Language) {
}
export async function parseAndImportHighlightLibFromHtml(html: string) {
const languages = getLanguagesFromHTML(html)
return Promise.all(languages.map(lKey => useLowlightLanguage(hljs[lKey])))
return Promise.all(languages.map(lKey => useLowlightLanguage(allLanguages[lKey])))
}

export function getLanguagesFromHTML(html: string) {
const matchedLanguages = html.matchAll(/language-(\w+)/gm)
const languages = [] as LanguageKey[]
for (const _language of matchedLanguages) {
const language = _language[1] as LanguageKey
if (!hljs[language]) {
if (!allLanguages[language]) {
continue
}
languages.push(_language[1] as LanguageKey)
Expand All @@ -55,11 +55,11 @@ export function loadAllLanguagesInJSONContent(json: JSONContent) {
return undefined
}

if (!hljs[language]) {
if (!allLanguages[language]) {
return undefined
}

return useLowlightLanguage(hljs[language])
return useLowlightLanguage(allLanguages[language])
})).then(noop)
: Promise.resolve()
}
Expand Down
123 changes: 64 additions & 59 deletions src/pages/article/edit.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,65 +144,70 @@ async function postFetch() {

<template>
<section class="container pb-8 mx-auto custom-container lg:px-2">
<ul class="menu menu-xs bg-base-100 rounded-lg max-w-xs w-full">
<tree
v-bind="articles" @select="(entry) => {
article.slug = entry.path
update()
postFetch()
}"
/>
</ul>
<div class="flex gap-2 items-baseline">
Editing: <input
v-model="article.slug" type="text" class="input input-sm shadow-lg" :class="{
'input-error': !article.slug,
}"
>
<button class="btn btn-sm btn-info" @click="() => { update(); postFetch() }">
Load
</button>
<button class="btn btn-sm btn-primary" @click="() => { create(); postFetch() }">
New
</button>
<button
class="btn btn-sm btn-success" :class="{
'btn-disabled': !(article.slug && article.json),
}" @click="() => { save(); postFetch() }"
>
Save
</button>
<div class="divider divider-horizontal" />
<button
class="btn btn-sm btn-error" :class="{
'btn-disabled': !(article.slug && access?.write),
}" @click="() => { del().then(postFetch) }"
>
Delete
</button>
<div class="divider divider-horizontal" />
<input ref="importArticleFile" type="file" hidden @change="importArticle">
<button class="btn btn-sm btn-primary" @click="importArticleFile?.click">
Import
</button>
<button class="btn btn-sm btn-secondary" @click="exportArticle">
Export
</button>
</div>
<div class="divider" />
<div class="flex flex-col md:flex-row gap-3 flex-wrap">
<div class="form-control flex-row items-center gap-2">
<input v-model="article.dynamic" class="checkbox" type="checkbox">
<label class="label">Dynamic Content</label>
</div>
<div class="divider divider-horizontal" />
<div class="form-control flex-row items-center gap-2">
<label class="label pl-0">Read Access</label>
<t-multi-select v-model="article.privilege.read" size="sm" :options="options(readPrivileges)" />
</div>
<div class="form-control flex-row items-center gap-2">
<label class="label">Write Access</label>
<t-multi-select v-model="article.privilege.write" size="sm" :options="options(privileges)" />
<div class="flex">
<ul class="menu menu-xs bg-base-100 rounded-lg max-w-xs w-full">
<tree
v-bind="articles" @select="(entry) => {
article.slug = entry.path
update()
postFetch()
}"
/>
</ul>
<div class="divider-horizontal divider" />
<div>
<div class="flex gap-2 items-baseline">
Editing: <input
v-model="article.slug" type="text" class="input input-sm shadow-lg" :class="{
'input-error': !article.slug,
}"
>
<button class="btn btn-sm btn-info" @click="() => { update(); postFetch() }">
Load
</button>
<button class="btn btn-sm btn-primary" @click="() => { create(); postFetch() }">
New
</button>
<button
class="btn btn-sm btn-success" :class="{
'btn-disabled': !(article.slug && article.json),
}" @click="() => { save(); postFetch() }"
>
Save
</button>
<div class="divider divider-horizontal" />
<button
class="btn btn-sm btn-error" :class="{
'btn-disabled': !(article.slug && access?.write),
}" @click="() => { del().then(postFetch) }"
>
Delete
</button>
<div class="divider divider-horizontal" />
<input ref="importArticleFile" type="file" hidden @change="importArticle">
<button class="btn btn-sm btn-primary" @click="importArticleFile?.click">
Import
</button>
<button class="btn btn-sm btn-secondary" @click="exportArticle">
Export
</button>
</div>
<div class="divider" />
<div class="flex flex-col md:flex-row gap-3 flex-wrap">
<div class="form-control flex-row items-center gap-2">
<input v-model="article.dynamic" class="checkbox" type="checkbox">
<label class="label">Dynamic Content</label>
</div>
<div class="divider divider-horizontal" />
<div class="form-control flex-row items-center gap-2">
<label class="label pl-0">Read Access</label>
<t-multi-select v-model="article.privilege.read" size="sm" :options="options(readPrivileges)" />
</div>
<div class="form-control flex-row items-center gap-2">
<label class="label">Write Access</label>
<t-multi-select v-model="article.privilege.write" size="sm" :options="options(privileges)" />
</div>
</div>
</div>
</div>
<lazy-content-editor v-if="article.json" ref="editor" v-model="article.json" class="safari-performance-boost mt-2" />
Expand Down

0 comments on commit cde0d59

Please sign in to comment.