vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

tiptap editor #2222

Merged
konrad merged 66 commits from dpschen/frontend:feature/feat-tiptap-editor into main 2023-10-22 13:49:01 +00:00
Conversation 3 Commits 66 Files Changed 28 +54 -39
2 changed files with 54 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0ef775e9b9 - Show all commits

67
src/components/input/editor/EditorToolbar.vue
View File

@ -7,7 +7,10 @@
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
v-tooltip="$t('input.editor.heading1')" v-tooltip="$t('input.editor.heading1')"
> >
<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>1 <span class="icon">
<icon :icon="['fa', 'fa-header']"/>
<span class="icon__lower-text">1</span>
</span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@ -15,7 +18,10 @@
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
v-tooltip="$t('input.editor.heading2')" v-tooltip="$t('input.editor.heading2')"
> >
<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>2 <span class="icon">
<icon :icon="['fa', 'fa-header']"/>
<span class="icon__lower-text">2</span>
</span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="editor-toolbar__button" class="editor-toolbar__button"
@ -23,7 +29,10 @@
:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
v-tooltip="$t('input.editor.heading3')" v-tooltip="$t('input.editor.heading3')"
> >
<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>3 <span class="icon">
<icon :icon="['fa', 'fa-header']"/>
<span class="icon__lower-text">3</span>
</span>
</BaseButton> </BaseButton>
</div> </div>
@ -375,51 +384,47 @@ function setLink() {
<style lang="scss" scoped> <style lang="scss" scoped>
.editor-toolbar { .editor-toolbar {
background: var(--grey-50); background: var(--white);
border: 1px solid var(--grey-200); border: 1px solid var(--grey-200);
border-bottom: none;
// position: relative;
user-select: none; user-select: none;
padding: 9px 10px; padding: .5rem;
border-top-left-radius: 4px; border-radius: $radius;
border-top-right-radius: 4px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
> * + * { > * + * {
// .editor-toolbar i.separator {
border--left-color: var(--grey-200) !important;
// }
// .editor-toolbar i.separator {
// display: inline-block;
// width: 0;
border-left: 1px solid var(--grey-200); border-left: 1px solid var(--grey-200);
// border-right: 1px solid #fff;
// color: transparent;
// text-indent: -10px;
margin-left: 6px; margin-left: 6px;
padding-left: 6px; padding-left: 6px;
// }
} }
} }
.editor-toolbar__button { .editor-toolbar__button {
color: var(--grey-700); min-width: 2rem;
min-width: 30px; height: 2rem;
height: 30px; border-radius: $radius;
border-radius: 3px;
border: 1px solid transparent; border: 1px solid transparent;
color: var(--grey-700);
transition: all $transition;
background: transparent;
margin-right: .25rem;
&:hover { &:hover {
background: var(--grey-200); background: var(--grey-100);
border-color: var(--grey-300); border-color: var(--grey-200);
}
.icon {
position: relative;
.icon__lower-text {
font-size: .75rem;
position: absolute;
bottom: -3px;
right: -2px;
font-weight: bold;
}
} }
}
.editor-toolbar__pseudo-icon {
padding: 0 .5rem;
font-weight: bold;
vertical-align: top;
} }
.editor-toolbar__table-buttons { .editor-toolbar__table-buttons {

26
src/components/input/editor/TipTap.vue
View File

@ -404,20 +404,30 @@ function handleImagePaste(event) {
<style lang="scss"> <style lang="scss">
.tiptap__editor { .tiptap__editor {
min-height: 10rem; min-height: 10rem;
} transition: box-shadow $transition;
border-radius: $radius;
.tiptap p.is-empty::before {
content: attr(data-placeholder); &:focus-within, &:focus {
color: var(--grey-400); box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
pointer-events: none;
height: 0; .tiptap p.is-empty::before {
float: left; content: attr(data-placeholder);
color: var(--grey-400);
pointer-events: none;
height: 0;
float: left;
}
}
} }
// Basic editor styles // Basic editor styles
.ProseMirror { .ProseMirror {
padding: .5rem; padding: .5rem;
&:focus-within, &:focus {
box-shadow: none;
}
> * + * { > * + * {
margin-top: 0.75em; margin-top: 0.75em;
} }