Skip to content

Commit

Permalink
fix: components
Browse files Browse the repository at this point in the history
  • Loading branch information
@mekery
mekery committed Apr 11, 2020
1 parent 3614768 commit 91bdb2e
Show file tree
Hide file tree
Showing 7 changed files with 427 additions and 163 deletions.
4 changes: 4 additions & 0 deletions quasar.conf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ module.exports = function (ctx) {
'QMenu',
'QAvatar',
'QColor',
'QInput',
],

directives: [
Expand All @@ -80,7 +81,10 @@ module.exports = function (ctx) {

// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
build: {
scopeHoisting: true,
vueRouterMode: 'history', // available values: 'hash', 'history'
vueCompiler: true,
distDir: 'dist/' + ctx.modeName,

// rtl: false, // https://quasar.dev/options/rtl-support
// showProgress: false,
Expand Down
246 changes: 85 additions & 161 deletions src/lib/components/QuasarTiptap.vue
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,6 @@
<template>
<section class="tiptap tiptap-editor quasar-tiptap">
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive, getMarkAttrs, focused }">
<section class="row col-12 justify-between items-center bg-light tiptap-menubar">
<div class="row q-px-xs menubar is-hidden" :class="{ 'is-focused': focused }">
<o-menubar-btn icon="add" :tooltip="$t('add')" class="note-step-add">
<q-menu ref="addPopover" v-model="menu.add" anchor="bottom left" self="top left" content-class="o-menu">
<section>
<o-common-item icon="mdi-code-braces" :label="$t('code_block')" @click.native="commands.code_block" v-close-popup />
<o-common-item icon="mdi-sigma" :label="$t('formula')" :side-label="$t('block')" @click.native="commands.katex_block" v-close-popup />
<o-common-item icon="mdi-sigma" :label="$t('formula')" :side-label="$t('inline')" @click.native="commands.katex_inline" v-close-popup />
<o-common-item icon="mdi-sitemap" :label="$t('diagram.text')" @click.native="commands.diagram" v-close-popup>
<q-tooltip anchor="center right" self="center left">
<div class="text-bold">Mermaid</div>
<div class="text-white">{{$t('diagram.text.tips')}}</div>
</q-tooltip>
</o-common-item>
<q-separator />
<o-common-item icon="mdi-iframe" :label="$t('iframe')">
<q-menu ref="iframePopover" anchor="top right" self="top left" class="shadow-5">
<meta-input :title="$t('iframe')" icon="link"
@primaryAction="insertIframe(commands.iframe, $event)">
</meta-input>
</q-menu>
</o-common-item>
</section>
</q-menu>
</o-menubar-btn>

<q-separator vertical inset />
<o-menubar-btn icon="mdi-format-bold" tooltip="Bold" :class="{ 'is-active': isActive.bold() }" @click.native="commands.bold" />
<o-menubar-btn icon="format_italic" :class="{ 'is-active': isActive.italic() }" @click.native="commands.italic" />
<o-menubar-btn icon="format_strikethrough" :class="{ 'is-active': isActive.strike() }" @click.native="commands.strike" />
<o-menubar-btn icon="format_underline" :class="{ 'is-active': isActive.underline() }" @click.native="commands.underline" />
<o-menubar-btn icon="code" :class="{ 'is-active': isActive.code() }" @click.native="commands.code" />

<q-separator vertical inset />
<o-fore-color-dropdown :commands="commands" :get-mark-attrs="getMarkAttrs" />
<o-back-color-dropdown :commands="commands" />

<q-separator vertical inset />
<o-align-dropdown :commands="commands" />

<q-separator vertical inset />
<o-heading-dropdown :commands="commands" :is-active="isActive" />
<o-heading-group :max="3" :commands="commands" :is-active="isActive" v-if="false" />

<q-separator vertical inset />
<o-menubar-btn icon="remove" @click.native="commands.horizontal_rule" />
<o-menubar-btn icon="format_list_bulleted" :class="{ 'is-active': isActive.bullet_list() }" @click.native="commands.bullet_list" />
<o-menubar-btn icon="format_list_numbered" :class="{ 'is-active': isActive.ordered_list() }" @click.native="commands.ordered_list" />

<q-separator vertical inset />
<o-menubar-btn icon="format_quote" :class="{ 'is-active': isActive.blockquote() }" @click.native="commands.blockquote" />
<o-menubar-btn icon="mdi-code-braces" :class="{ 'is-active': isActive.code_block() }" @click.native="commands.code_block" />

<q-separator vertical inset />
<o-menubar-btn icon="mdi-table" @click.native="commands.createTable({rowsCount: 3, colsCount: 3, withHeaderRow: false })" />

<q-separator vertical inset />
<o-menubar-btn icon="mdi-overscan" :tooltip="$t('page.view.full')" :class="pageView==='full'?'is-active':''" @click.native="pageView='full'" />
<o-menubar-btn icon="mdi-fit-to-page-outline" :tooltip="$t('page.view.page')" :class="pageView==='page'?'is-active':''" @click.native="pageView='page'" />

<q-separator vertical inset />
<o-menubar-btn icon="undo" @click.native="commands.undo" />
<o-menubar-btn icon="redo" @click.native="commands.redo" />
</div>

<div class="q-px-md right-actions">
<o-menubar-btn icon="mdi-page-layout-sidebar-right" color="white" @click.native="showSidePanel(true)" flat />
<o-menubar-btn :icon="isSlideShow ? `mdi-pause-circle-outline` : `mdi-play-box-outline`" :tooltip="$t('presentation')" @click.native="onSlideShow" />
<o-menubar-btn :icon="$q.fullscreen.isActive ? `fullscreen_exit` : `fullscreen`" :tooltip="$t('action.fullscreen')" @click.native="$q.fullscreen.toggle()" />
</div>
</section>
</editor-menu-bar>
<o-editor-menu-bar :editor="editor" />

<q-scroll-area ref="editorScroll" class="editor-scroll-area" :class="`view-${pageView}`">
<editor-content class="editor__content o--note-preview note-step-side-editor" :editor="editor" />
Expand All @@ -81,7 +9,7 @@
</template>

<script>
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import { Editor, EditorContent } from 'tiptap'
import {
Blockquote,
BulletList,
Expand Down Expand Up @@ -127,16 +55,7 @@ import {
OKatexInline
} from 'src/lib/extentions'
import OForeColorDropdown from 'src/lib/components/buttons/OForeColorDropdown'
import OBackColorDropdown from 'src/lib/components/buttons/OBackColorDropdown'
import OAlignDropdown from 'src/lib/components/buttons/OAlignDropdown'
import OAlignGroup from 'src/lib/components/buttons/OAlignGroup'
import OHeadingDropdown from 'src/lib/components/buttons/OHeadingDropdown'
import OHeadingGroup from 'src/lib/components/buttons/OHeadingGroup'
import OHeadingList from 'src/lib/components/buttons/OHeadingList'
import OMenubarBtn from 'src/lib/components/buttons/OMenubarBtn'
import OCommonItem from 'src/lib/components/common/OCommonItem'
import OEditorMenuBar from './menubars/OEditorMenuBar'
export default {
name: 'quasar-tiptap',
Expand All @@ -156,101 +75,105 @@ export default {
isSlideShow: false
}
},
props: {
content: {
type: String,
default: ''
}
},
components: {
EditorContent,
EditorMenuBar,
OMenubarBtn,
OCommonItem,
OForeColorDropdown,
OBackColorDropdown,
OAlignDropdown,
OAlignGroup,
OHeadingDropdown,
OHeadingGroup,
OHeadingList
OEditorMenuBar,
},
methods: {
initEditor () {
this.editor = new Editor({
extensions: [
new OTitle(),
new ODoc(),
new OHeading({ levels: [1, 2, 3, 4, 5] }),
new OAlign(),
new OForeColor(),
new OBackColor(),
new Blockquote(),
new BulletList(),
new CodeBlock(),
new CodeBlockHighlight({
languages: {
java,
javascript,
css
}
}),
new HardBreak(),
new ListItem(),
new OrderedList(),
new Link(),
new Bold(),
new Code(),
new Italic(),
new Strike(),
new Underline(),
new History(),
new TodoItem({
nested: true
}),
new TodoList(),
new Table({
resizable: true
}),
new TableHeader(),
new TableCell(),
new TableRow(),
new Placeholder({
showOnlyCurrent: false,
emptyNodeText: node => {
if (node.type.name === 'title') {
return 'Title'
}
return 'Content'
const extensions = [
// required
new HardBreak(),
new History(),
new Focus({
className: 'has-focus',
nested: true
}),
new TrailingNode({
node: 'paragraph',
notAfter: ['paragraph']
}),
// tiptop
new Bold(),
new Italic(),
new Strike(),
new Underline(),
new Code(),
new CodeBlock(),
new CodeBlockHighlight({
languages: {
java,
javascript,
css
}
}),
new Blockquote(),
new BulletList(),
new ListItem(),
new OrderedList(),
new TodoItem({
nested: true
}),
new TodoList(),
new HorizontalRule(),
new Table({
resizable: true
}),
new TableHeader(),
new TableCell(),
new TableRow(),
new Placeholder({
showOnlyCurrent: false,
emptyNodeText: node => {
if (node.type.name === 'title') {
return 'Title'
}
}),
new Focus({
className: 'has-focus',
nested: true
}),
new HorizontalRule(),
new TrailingNode({
node: 'paragraph',
notAfter: ['paragraph']
}),
new Image(),
new OIframe(),
new ODiagram(),
new OKatexBlock(),
new OKatexInline()
],
return 'Content'
}
}),
new Link(),
new Image(),
// quasar-tiptop
new OTitle(),
new ODoc(),
new OHeading({ levels: [1, 2, 3, 4, 5] }),
new OAlign(),
new OForeColor(),
new OBackColor(),
new OIframe(),
new ODiagram(),
new OKatexBlock(),
new OKatexInline()
]
this.editor = new Editor({
extensions: extensions,
autoFocus: true,
content: '',
onUpdate: ({ state, getJSON, getHTML }) => {
this.json = getJSON()
this.html = getHTML()
console.log('json', this.html)
}
})
},
// content
setContent () {
// From JSON
if (!this.json.type) {
this.json = {
type: 'doc',
content: []
}
if (this.json.type) {
this.editor.setContent(this.json, true)
}
if (this.html) {
this.editor.setContent(this.html, true)
}
this.editor.setContent(this.json, true)
// Focus
this.editor.focus()
Expand All @@ -263,6 +186,7 @@ export default {
onSlideShow () {}
},
mounted: function () {
this.html = this.content
this.initEditor()
this.setContent()
},
Expand Down

0 comments on commit 91bdb2e

Please sign in to comment.