Skip to content

W
wiki-js
Commit 20f2fd29 authored by Nicolas Giard's avatar Nicolas Giard
Browse files
Options

feat: add editor selection + code editor + grapejs POC

parent 578ea577
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 142 additions and 255 deletions
client/app.js
View file @ 20f2fd29
......@@ -156,9 +156,9 @@ let bootstrap = () => {
// Load Icons
// ====================================
import(/* webpackChunkName: "icons" */ './svg/icons.svg').then(icons => {
document.body.insertAdjacentHTML('beforeend', icons.default)
})
// import(/* webpackChunkName: "icons" */ './svg/icons.svg').then(icons => {
// document.body.insertAdjacentHTML('beforeend', icons.default)
// })
}
window.boot.onDOMReady(bootstrap)
client/components/editor.vue
View file @ 20f2fd29
......@@ -26,7 +26,7 @@
v-icon(color='blue', :left='$vuetify.breakpoint.lgAndUp') sort_by_alpha
span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('editor:page') }}
v-content
editor-code
component(:is='currentEditor')
component(:is='currentModal')
v-dialog(v-model='dialogProgress', persistent, max-width='350')
v-card(color='blue darken-3', dark)
......@@ -38,6 +38,39 @@
)
.subheading {{ $t('editor:save.processing') }}
.caption.blue--text.text--lighten-3 {{ $t('editor:save.pleaseWait') }}
v-dialog(v-model='dialogEditorSelector', persistent, max-width='550')
v-card(color='blue darken-3', dark)
v-card-text.text-xs-center.py-4
.subheading Which editor do you want to use?
v-container(grid-list-lg, fluid)
v-layout(row, wrap, justify-center)
v-flex(xs4)
v-card(
hover
light
ripple
)
v-card-text.text-xs-center(@click='selectEditor("code")')
v-icon(large, color='primary') code
.body-2.mt-2 Code
v-flex(xs4)
v-card(
hover
light
ripple
)
v-card-text.text-xs-center(@click='selectEditor("markdown")')
v-icon(large, color='primary') list_alt
.body-2.mt-2 Markdown
v-flex(xs4)
v-card.grey(
hover
light
ripple
)
v-card-text.text-xs-center(@click='selectEditor("wysiwyg")')
v-icon(large, color='grey darken-1') web
.body-2.mt-2.grey--text.text--darken-2 Visual Builder
v-snackbar(
:color='notification.style'
......@@ -69,12 +102,16 @@ export default {
components: {
AtomSpinner,
editorCode: () => import(/* webpackChunkName: "editor-code" */ './editor/editor-code.vue'),
editorMarkdown: () => import(/* webpackChunkName: "editor-markdown" */ './editor/editor-markdown.vue'),
editorWysiwyg: () => import(/* webpackChunkName: "editor-wysiwyg" */ './editor/editor-wysiwyg.vue'),
editorModalProperties: () => import(/* webpackChunkName: "editor" */ './editor/editor-modal-properties.vue')
},
data() {
return {
currentModal: '',
dialogProgress: false
currentEditor: '',
dialogProgress: false,
dialogEditorSelector: false
}
},
computed: {
......@@ -85,11 +122,20 @@ export default {
mounted() {
if (this.mode === 'create') {
_.delay(() => {
this.openModal('properties')
this.dialogEditorSelector = true
}, 500)
}
},
methods: {
selectEditor(name) {
this.currentEditor = `editor${_.startCase(name)}`
this.dialogEditorSelector = false
if (this.mode === 'create') {
_.delay(() => {
this.openModal('properties')
}, 500)
}
},
openModal(name) {
this.currentModal = `editorModal${_.startCase(name)}`
},
......
client/components/editor/editor-code.vue
View file @ 20f2fd29
<template lang='pug'>
.editor-code
v-toolbar.editor-code-toolbar(dense, color='primary', dark)
v-tooltip(top)
v-btn(icon, slot='activator').mx-0
v-icon format_bold
span Bold
v-tooltip(top)
v-btn(icon, slot='activator').mx-0
v-icon format_italic
span Italic
v-tooltip(top)
v-btn(icon, slot='activator').mx-0
v-icon format_strikethrough
span Strikethrough
v-menu(offset-y, open-on-hover)
v-btn(icon, slot='activator').mx-0
v-icon font_download
v-list
v-list-tile(v-for='(n, idx) in 6', @click='', :key='idx')
v-list-tile-action
v-icon font_download
v-list-tile-title Heading {{n}}
v-tooltip(top)
v-btn(icon, slot='activator').mx-0
v-icon format_quote
span Blockquote
v-tooltip(top)
v-btn(icon, slot='activator').mx-0
v-icon format_list_bulleted
span Unordered List
v-tooltip(top)
v-btn(icon, slot='activator').mx-0
v-icon format_list_numbered
span Ordered List
v-tooltip(top)
v-btn(icon, slot='activator').mx-0
v-icon insert_link
span Link
v-tooltip(top)
v-btn(icon, slot='activator').mx-0
v-icon space_bar
span Inline Code
v-tooltip(top)
v-btn(icon, slot='activator').mx-0
v-icon code
span Code Block
v-tooltip(top)
v-btn(icon, slot='activator').mx-0
v-icon remove
span Horizontal Bar
.editor-code-main
.editor-code-editor
.editor-code-editor-title(v-if='previewShown', @click='previewShown = false') Editor
.editor-code-editor-title(v-else='previewShown', @click='previewShown = true'): v-icon(dark) drag_indicator
codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
transition(name='editor-code-preview')
.editor-code-preview(v-if='previewShown')
.editor-code-preview-title(@click='previewShown = false') Preview
.editor-code-preview-content.markdown-content(ref='editorPreview', v-html='previewHTML')
v-speed-dial(v-model='fabInsertMenu', :open-on-hover='true', direction='top', transition='slide-y-reverse-transition', fixed, left, bottom)
v-btn(color='blue', fab, dark, v-model='fabInsertMenu', slot='activator')
v-icon add_circle
v-icon close
v-btn(color='teal', fab, dark): v-icon image
v-btn(color='pink', fab, dark): v-icon insert_drive_file
v-btn(color='red', fab, dark): v-icon play_circle_outline
v-btn(color='purple', fab, dark): v-icon multiline_chart
v-btn(color='indigo', fab, dark): v-icon functions
</template>
<script>
......@@ -95,20 +29,6 @@ import 'codemirror/addon/search/matchesonscrollbar.js'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/match-highlighter.js'
// Markdown-it
import MarkdownIt from 'markdown-it'
import mdEmoji from 'markdown-it-emoji'
import mdTaskLists from 'markdown-it-task-lists'
import mdExpandTabs from 'markdown-it-expand-tabs'
import mdAbbr from 'markdown-it-abbr'
import mdSup from 'markdown-it-sup'
import mdSub from 'markdown-it-sub'
import mdMark from 'markdown-it-mark'
import mdImsize from 'markdown-it-imsize'
// Prism (Syntax Highlighting)
import Prism from '@/libs/prism/prism.js'
// ========================================
// INIT
// ========================================
......@@ -116,44 +36,6 @@ import Prism from '@/libs/prism/prism.js'
// Platform detection
const CtrlKey = /Mac/.test(navigator.platform) ? 'Cmd' : 'Ctrl'
// Markdown Instance
const md = new MarkdownIt({
html: true,
breaks: true,
linkify: true,
typography: true,
highlight(str, lang) {
return `<pre class="line-numbers"><code class="language-${lang}">${str}</code></pre>`
}
})
.use(mdEmoji)
.use(mdTaskLists)
.use(mdExpandTabs)
.use(mdAbbr)
.use(mdSup)
.use(mdSub)
.use(mdMark)
.use(mdImsize)
// ========================================
// HELPER FUNCTIONS
// ========================================
// Inject line numbers for preview scroll sync
let linesMap = []
function injectLineNumbers (tokens, idx, options, env, slf) {
let line
if (tokens[idx].map && tokens[idx].level === 0) {
line = tokens[idx].map[0]
tokens[idx].attrJoin('class', 'line')
tokens[idx].attrSet('data-line', String(line))
linesMap.push(line)
}
return slf.renderToken(tokens, idx, options, env, slf)
}
md.renderer.rules.paragraph_open = injectLineNumbers
md.renderer.rules.heading_open = injectLineNumbers
// ========================================
// Vue Component
// ========================================
......@@ -164,11 +46,10 @@ export default {
},
data() {
return {
fabInsertMenu: false,
code: '# Header 1\n\nSample **Text**\nhttp://wiki.js.org\n:rocket: :) :( :| :P\n\n## Header 2\nSample Text\n\n```javascript\nvar test = require("test");\n\n// some comment\nconst foo = bar(\'param\') + 1.234;\n```\n\n### Header 3\nLorem *ipsum* ~~text~~',
code: '<h1>Title</h1>\n\n<p>Some text here</p>',
cmOptions: {
tabSize: 2,
mode: 'text/markdown',
mode: 'text/html',
theme: 'wikijs-dark',
lineNumbers: true,
lineWrapping: true,
......@@ -178,9 +59,7 @@ export default {
annotateScrollbar: true
},
viewportMargin: 50
},
previewShown: true,
previewHTML: ''
}
}
},
computed: {
......@@ -206,55 +85,13 @@ export default {
self.$parent.save()
})
cm.setSize(null, 'calc(100vh - 100px)')
cm.setSize(null, 'calc(100vh - 64px)')
cm.setOption('extraKeys', keyBindings)
cm.on('cursorActivity', cm => {
this.toolbarSync(cm)
this.scrollSync(cm)
})
this.onCmInput(this.code)
},
onCmInput: _.debounce(function (newContent) {
linesMap = []
this.$store.set('editor/content', newContent)
this.previewHTML = md.render(newContent)
this.$nextTick(() => {
Prism.highlightAllUnder(this.$refs.editorPreview)
this.scrollSync(this.cm)
})
}, 500),
/**
* Update toolbar state
*/
toolbarSync(cm) {
const pos = cm.getCursor('start')
const token = cm.getTokenAt(pos)
if (!token.type) { return }
console.info(token)
},
/**
* Update scroll sync
*/
scrollSync: _.debounce(function (cm) {
if (!this.previewShown || cm.somethingSelected()) { return }
let currentLine = cm.getCursor().line
if (currentLine < 3) {
this.Velocity(this.$refs.editorPreview, 'stop', true)
this.Velocity(this.$refs.editorPreview.firstChild, 'scroll', { offset: '-50', duration: 1000, container: this.$refs.editorPreview })
} else {
let closestLine = _.findLast(linesMap, n => n <= currentLine)
let destElm = this.$refs.editorPreview.querySelector(`[data-line='${closestLine}']`)
if (destElm) {
this.Velocity(this.$refs.editorPreview, 'stop', true)
this.Velocity(destElm, 'scroll', { offset: '-100', duration: 1000, container: this.$refs.editorPreview })
}
}
}, 500),
toggleAround (before, after) {
}
}, 500)
}
}
</script>
......@@ -296,84 +133,6 @@ export default {
}
}
&-preview {
flex: 1 1 50%;
background-color: mc('grey', '100');
position: relative;
height: calc(100vh - 100px);
overflow: hidden;
@include until($tablet) {
display: none;
}
&-enter-active, &-leave-active {
transition: max-width .5s ease;
max-width: 50vw;
.editor-code-preview-content {
width: 50vw;
overflow:hidden;
}
}
&-enter, &-leave-to {
max-width: 0;
}
&-content {
height: calc(100vh - 100px);
overflow-y: scroll;
padding: 30px 1rem 1rem 1rem;
width: calc(100% + 1rem + 17px)
// -ms-overflow-style: none;
// &::-webkit-scrollbar {
// width: 0px;
// background: transparent;
// }
}
&-title {
background-color: rgba(mc('blue', '100'), .75);
border-bottom-right-radius: 5px;
display: inline-flex;
height: 30px;
justify-content: center;
align-items: center;
padding: 0 1rem;
color: mc('blue', '800');
position: absolute;
top: 0;
left: 0;
z-index: 2;
text-transform: uppercase;
font-size: .7rem;
cursor: pointer;
}
}
&-toolbar {
background-color: mc('blue', '700');
background-image: linear-gradient(to bottom, mc('blue', '700') 0%, mc('blue','800') 100%);
color: #FFF;
.v-toolbar__content {
padding-left: 16px;
@include until($tablet) {
padding-left: 8px;
}
}
}
// ==========================================
// Fix FAB revealing under codemirror
// ==========================================
.speed-dial--fixed {
z-index: 8;
}
// ==========================================
// CODE MIRROR
// ==========================================
......
client/components/editor/editor-wysiwyg.vue 0 → 100644
View file @ 20f2fd29
<template lang='pug'>
.editor-wysiwyg
div(ref='editor')
</template>
<script>
import 'grapesjs/dist/css/grapes.min.css'
import grapesjs from 'grapesjs'
let editor
export default {
mounted() {
editor = grapesjs.init({
container: this.$refs.editor,
width: 'auto',
height: 'calc(100vh - 64px)',
storageManager: { type: null },
// panels: { defaults: [] }
blockManager: {
blocks: [
{
id: 'section', // id is mandatory
label: '<b>Section</b>', // You can use HTML/SVG inside labels
attributes: { class: 'gjs-block-section' },
content: `<section>
<h1>This is a simple title</h1>
<div>This is just a Lorem text: Lorem ipsum dolor sit amet</div>
</section>`
}, {
id: 'text',
label: 'Text',
content: '<div data-gjs-type="text">Insert your text here</div>',
}, {
id: 'image',
label: 'Image',
// Select the component once it's dropped
select: true,
// You can pass components as a JSON instead of a simple HTML string,
// in this case we also use a defined component type `image`
content: { type: 'image' },
// This triggers `active` event on dropped components and the `image`
// reacts by opening the AssetManager
activate: true
}
]
}
})
}
}
</script>
<style lang="scss">
.gjs-block {
width: auto;
height: auto;
min-height: auto;
}
</style>
dev/webpack/webpack.dev.js
View file @ 20f2fd29
......@@ -121,7 +121,8 @@ module.exports = {
{
test: /\.svg$/,
exclude: [
path.join(process.cwd(), 'client/svg')
path.join(process.cwd(), 'client/svg'),
path.join(process.cwd(), 'node_modules/grapesjs')
],
use: [
{
......@@ -136,7 +137,8 @@ module.exports = {
{
test: /\.svg$/,
include: [
path.join(process.cwd(), 'client/svg')
path.join(process.cwd(), 'client/svg'),
path.join(process.cwd(), 'node_modules/grapesjs/src/styles/fonts/main-fonts.svg')
],
use: [
{
......@@ -153,6 +155,16 @@ module.exports = {
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
},
{
test: /.jsx$/,
loader: 'babel-loader',
exclude: /node_modules/,
......
package.json
View file @ 20f2fd29
......@@ -203,6 +203,7 @@
"eslint-plugin-standard": "4.0.0",
"eslint-plugin-vue": "4.7.1",
"file-loader": "2.0.0",
"grapesjs": "0.14.29",
"graphiql": "0.11.11",
"graphql-persisted-document-loader": "1.0.1",
"graphql-tag": "^2.9.2",
......@@ -230,6 +231,7 @@
"raw-loader": "0.5.1",
"react": "16.5.0",
"react-dom": "16.5.0",
"resolve-url-loader": "3.0.0",
"sass-loader": "7.1.0",
"sass-resources-loader": "1.3.3",
"script-ext-html-webpack-plugin": "2.0.1",
......
server/modules/editor/markdown/definition.yml
View file @ 20f2fd29
key: markdown
title: Markdown
description: Default Markdown editor
description: Basic Markdown editor
contentType: markdown
author: requarks.io
props: {}
server/modules/editor/wysiwyg/definition.yml 0 → 100644
View file @ 20f2fd29
key: wysiwyg
title: WYSIWYG
description: Advanced Visual HTML Builder
contentType: html
author: requarks.io
props: {}
yarn.lock
View file @ 20f2fd29
This diff was suppressed by a .gitattributes entry.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment