Skip to content

Commit

Permalink
Fixed saving but and started on tables
Browse files Browse the repository at this point in the history
  • Loading branch information
Sebastian Hilger committed Jun 30, 2019
1 parent 2a10098 commit 6f7c0c2
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 57 deletions.
2 changes: 1 addition & 1 deletion dist/js/field.js
View file

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,10 @@
"dependencies": {
"i": "^0.3.6",
"npm": "^6.4.1",
"tiptap": "^1.19.1",
"tiptap-extensions": "^1.19.1",
"vue": "^2.5.0",
"tiptap": "^1.19.0",
"tiptap-extensions": "^1.19.0",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10",
"vue-truncate-collapsed": "^2.1.0"
}
}
143 changes: 90 additions & 53 deletions resources/js/components/FormField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,56 @@

<editor-menu-bar :editor="editor">
<div class="menubar" slot-scope="{ commands, isActive, getMarkAttrs }">
<template v-for="(buttonKey, params) in buttons">
<template v-if="buttonKey == 'heading' || params == 'heading'">
<heading-buttons
:headingLevels="headingLevels"
:commands="commands"
:isActive="isActive"
>
</heading-buttons>
</template>
<div class="toolbar">
<template v-for="(buttonKey, params) in buttons">
<template v-if="buttonKey == 'heading' || params == 'heading'">
<heading-buttons
:headingLevels="headingLevels"
:commands="commands"
:isActive="isActive"
>
</heading-buttons>
</template>

<template v-if="buttonKey == 'table' || params == 'table'">
<table-buttons
:commands="commands"
:isActive="isActive"
>
</table-buttons>
</template>

<template v-if="
buttonKey != 'heading'
&& buttonKey != 'link'
&& params != 'heading'
&& buttonKey != 'table'
">
<normal-button
:buttonKey="buttonKey"
:commands="commands"
:isActive="isActive"
>
</normal-button>
</template>

<span class="tiptap-button-container" v-if="buttonKey == 'link'">
<link-button
:commands="commands"
:isActive="isActive"
:linkMenuIsActive="linkMenuIsActive"
:linkUrl="linkUrl"
:hideLinkMenu="hideLinkMenu"
:showLinkMenu="showLinkMenu"
:getMarkAttrs="getMarkAttrs"
:setLinkUrl="setLinkUrl"
>
</link-button>
</span>

<template v-if="buttonKey != 'heading' && buttonKey != 'link' && params != 'heading'">
<normal-button
:buttonKey="buttonKey"
:commands="commands"
:isActive="isActive"
>
</normal-button>
</template>

<span class="tiptap-button-container" v-if="buttonKey == 'link'">
<link-button
:commands="commands"
:isActive="isActive"
:linkMenuIsActive="linkMenuIsActive"
:linkUrl="linkUrl"
:hideLinkMenu="hideLinkMenu"
:showLinkMenu="showLinkMenu"
:getMarkAttrs="getMarkAttrs"
:setLinkUrl="setLinkUrl"
>
</link-button>
</span>

</template>
</div>
</div>
</div>
</editor-menu-bar>

<editor-content
Expand All @@ -65,6 +80,7 @@
import { FormField, HandlesValidationErrors } from 'laravel-nova'
import { Editor, EditorContent, EditorMenuBar, EditorMenuBubble } from 'tiptap'
import HeadingButtons from './buttons/HeadingButtons';
import TableButtons from './buttons/TableButtons';
import NormalButton from './buttons/NormalButton';
import LinkButton from './buttons/LinkButton';
Expand All @@ -83,6 +99,10 @@ import {
Code,
Italic,
Link,
Table,
TableHeader,
TableCell,
TableRow,
Strike,
Underline,
History,
Expand All @@ -97,6 +117,7 @@ export default {
EditorContent,
EditorMenuBar,
HeadingButtons,
TableButtons,
NormalButton,
LinkButton,
},
Expand All @@ -109,7 +130,26 @@ export default {
linkMenuIsActive: false,
editor: new Editor({
editor: null,
}
},
computed: {
buttons() {
return this.field.buttons ? this.field.buttons : ['bold', 'italic'];
}
},
methods: {
initEditor() {
let outsideScope = this;
this.editor = new Editor({
onUpdate(state){
console.log(state.getHTML());
outsideScope.value = state.getHTML();
},
extensions: [
new Blockquote(),
new BulletList(),
Expand All @@ -128,29 +168,17 @@ export default {
new Strike(),
new Underline(),
new History(),
new Table({
resizable: true,
}),
new TableHeader(),
new TableCell(),
new TableRow(),
],
}),
}
},
computed: {
buttons() {
return this.field.buttons ? this.field.buttons : ['bold', 'italic'];
}
},
});
methods: {
initEditor() {
this.editor.setContent(this.value);
// set the value each time editor is updated
let outsideScope = this;
this.editor.setOptions({
onUpdate: function (state) {
outsideScope.value = state.getHTML();
}
});
// set heading levels
if (this.field.headingLevels) {
this.headingLevels = this.field.headingLevels;
Expand Down Expand Up @@ -226,6 +254,15 @@ export default {
margin-bottom: 0;
}
.ProseMirror table {
border: 1px solid var(--60);
}
.ProseMirror td {
border: 1px solid var(--60);
padding: 6px;
}
.tiptap-button {
box-sizing: border-box;
vertical-align: top;
Expand Down
4 changes: 4 additions & 0 deletions resources/js/components/buttons/HeadingButtons.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@
<script>
export default {
props: ['headingLevels', 'isActive', 'commands'],
mounted: function () {
console.log(this.isActive.bold());
}
}
</script>

Expand Down
44 changes: 44 additions & 0 deletions resources/js/components/buttons/TableButtons.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<template>
<span>
<button
type="button"
class="
btn
btn-default
p-2
leading-none
text-xs
min-w-8
h-8
tiptap-button
"
:class="[
(isActive.table() ? 'btn-primary' : '')
]"
@click="commands.createTable({rowsCount: 2, colsCount: 2, withHeaderRow: false })"
>
<font-awesome-icon :icon="['fas', 'table']">
</font-awesome-icon>
</button>
</span>
</template>

<script>
import { library } from '@fortawesome/fontawesome-svg-core'
import { faTable } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faTable)
export default {
props: ['isActive', 'commands'],
components: {
FontAwesomeIcon,
},
}
</script>



0 comments on commit 6f7c0c2

Please sign in to comment.