FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

markdown for pages #338

Open
Johann150 wants to merge 20 commits from markdown into main
pull from: markdown
merge into: FoundKeyGang:main
Conversation 0 Commits 20 Files changed 11 +34 -12
2 changed files with 34 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit f5c2fc5f14 - Show all commits

44
packages/client/src/components/form/textarea.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="adhpbeos"> <div class="adhpbeos">
<div class="label" @click="focus"><slot name="label"></slot></div> <div class="label" @click="focus"><slot name="label"></slot></div>
<div class="input" :class="{ disabled, focused, tall, pre }"> <div class="input" :class="{ disabled, focused, tall, pre, markdown }">
<textarea <textarea
ref="inputEl" ref="inputEl"
v-model="v" v-model="v"
@ -20,6 +20,10 @@
@keydown="onKeydown($event)" @keydown="onKeydown($event)"
@input="onInput" @input="onInput"
></textarea> ></textarea>
<a v-if="markdown" href="/mfm-cheat-sheet" class="md-hint">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208 128"><path d="M193 128H15a15 15 0 0 1-15-15V15A15 15 0 0 1 15 0h178a15 15 0 0 1 15 15v98a15 15 0 0 1-15 15zM50 98V59l20 25 20-25v39h20V30H90L70 55 50 30H30v68zm134-34h-20V30h-20v34h-20l30 35z"/></svg>
Markdown supported
</a>
</div> </div>
<div class="caption"><slot name="caption"></slot></div> <div class="caption"><slot name="caption"></slot></div>
@ -56,6 +60,7 @@ const props = withDefaults(defineProps<{
debounce?: boolean; debounce?: boolean;
manualSave?: boolean; manualSave?: boolean;
max?: number; max?: number;
markdown?: boolean;
}>(), { }>(), {
pattern: undefined, pattern: undefined,
placeholder: '', placeholder: '',
@ -63,6 +68,7 @@ const props = withDefaults(defineProps<{
tall: false, tall: false,
pre: false, pre: false,
manualSave: false, manualSave: false,
markdown: false,
}); });
const { modelValue } = toRefs(props); const { modelValue } = toRefs(props);
@ -166,10 +172,8 @@ onMounted(() => {
} }
} }
&.focused { &.focused > textarea {
> textarea { border-color: var(--accent) !important;
border-color: var(--accent) !important;
}
} }
&.disabled { &.disabled {
@ -180,15 +184,33 @@ onMounted(() => {
} }
} }
&.tall { &.tall > textarea {
> textarea { min-height: 200px;
min-height: 200px;
}
} }
&.pre { &.pre > textarea {
white-space: pre;
}
&.markdown {
> textarea { > textarea {
white-space: pre; border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-color: var(--fg);
}
> .md-hint {
background-color: var(--panel);
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
padding: .3em;
display: block;
> svg {
height: .7em;
fill: var(--fg);
padding: 0 .3em;
}
} }
} }
} }

2
packages/client/src/pages/page-editor.vue
View file

@ -45,7 +45,7 @@
</div> </div>
<div v-else-if="tab === 'contents'"> <div v-else-if="tab === 'contents'">
<MkTextarea v-model="text" :readonly="readonly"/> <MkTextarea v-model="text" :readonly="readonly" markdown/>
</div> </div>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>