feat: editor - existing content
This commit is contained in:
parent
20f2fd29fe
commit
30806d3c8d
@ -110,13 +110,13 @@ Vue.prototype.Velocity = Velocity
|
|||||||
// ====================================
|
// ====================================
|
||||||
|
|
||||||
Vue.component('admin', () => import(/* webpackChunkName: "admin" */ './components/admin.vue'))
|
Vue.component('admin', () => import(/* webpackChunkName: "admin" */ './components/admin.vue'))
|
||||||
Vue.component('editor', () => import(/* webpackChunkName: "editor" */ './components/editor.vue'))
|
Vue.component('editor', () => import(/* webpackPrefetch: -100, webpackChunkName: "editor" */ './components/editor.vue'))
|
||||||
Vue.component('login', () => import(/* webpackMode: "eager" */ './components/login.vue'))
|
Vue.component('login', () => import(/* webpackPrefetch: true, webpackChunkName: "login" */ './components/login.vue'))
|
||||||
Vue.component('nav-footer', () => import(/* webpackMode: "eager" */ './components/common/nav-footer.vue'))
|
Vue.component('nav-footer', () => import(/* webpackMode: "eager" */ './components/common/nav-footer.vue'))
|
||||||
Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './components/common/nav-header.vue'))
|
Vue.component('nav-header', () => import(/* webpackMode: "lazy" */ './components/common/nav-header.vue'))
|
||||||
Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue'))
|
Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue'))
|
||||||
Vue.component('setup', () => import(/* webpackChunkName: "setup" */ './components/setup.vue'))
|
Vue.component('setup', () => import(/* webpackChunkName: "setup" */ './components/setup.vue'))
|
||||||
Vue.component('v-card-chin', () => import(/* webpackMode: "eager" */ './components/common/v-card-chin.vue'))
|
Vue.component('v-card-chin', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/v-card-chin.vue'))
|
||||||
Vue.component('page', () => import(/* webpackChunkName: "theme-page" */ './themes/' + process.env.CURRENT_THEME + '/components/app.vue'))
|
Vue.component('page', () => import(/* webpackChunkName: "theme-page" */ './themes/' + process.env.CURRENT_THEME + '/components/app.vue'))
|
||||||
|
|
||||||
let bootstrap = () => {
|
let bootstrap = () => {
|
||||||
|
@ -101,10 +101,48 @@ WIKI.$store.registerModule('editor', editorStore)
|
|||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
AtomSpinner,
|
AtomSpinner,
|
||||||
editorCode: () => import(/* webpackChunkName: "editor-code" */ './editor/editor-code.vue'),
|
editorCode: () => import(/* webpackChunkName: "editor-code", webpackMode: "lazy" */ './editor/editor-code.vue'),
|
||||||
editorMarkdown: () => import(/* webpackChunkName: "editor-markdown" */ './editor/editor-markdown.vue'),
|
editorMarkdown: () => import(/* webpackChunkName: "editor-markdown", webpackMode: "lazy" */ './editor/editor-markdown.vue'),
|
||||||
editorWysiwyg: () => import(/* webpackChunkName: "editor-wysiwyg" */ './editor/editor-wysiwyg.vue'),
|
editorWysiwyg: () => import(/* webpackChunkName: "editor-wysiwyg", webpackMode: "lazy" */ './editor/editor-wysiwyg.vue'),
|
||||||
editorModalProperties: () => import(/* webpackChunkName: "editor" */ './editor/editor-modal-properties.vue')
|
editorModalProperties: () => import(/* webpackChunkName: "editor", webpackMode: "eager" */ './editor/editor-modal-properties.vue')
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
locale: {
|
||||||
|
type: String,
|
||||||
|
default: 'en'
|
||||||
|
},
|
||||||
|
path: {
|
||||||
|
type: String,
|
||||||
|
default: 'home'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: 'Untitled Page'
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
tags: {
|
||||||
|
type: Array,
|
||||||
|
default: () => ([])
|
||||||
|
},
|
||||||
|
isPublished: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
initEditor: {
|
||||||
|
type: String,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
initMode: {
|
||||||
|
type: String,
|
||||||
|
default: 'create'
|
||||||
|
},
|
||||||
|
initContent: {
|
||||||
|
type: String,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -120,10 +158,14 @@ export default {
|
|||||||
notificationState: sync('notification@isActive')
|
notificationState: sync('notification@isActive')
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.$store.set('editor/mode', this.initMode || 'create')
|
||||||
|
this.$store.set('editor/content', this.initContent ? window.atob(this.initContent) : '# Header\n\nYour content here')
|
||||||
if (this.mode === 'create') {
|
if (this.mode === 'create') {
|
||||||
_.delay(() => {
|
_.delay(() => {
|
||||||
this.dialogEditorSelector = true
|
this.dialogEditorSelector = true
|
||||||
}, 500)
|
}, 500)
|
||||||
|
} else {
|
||||||
|
this.selectEditor(this.initEditor || 'markdown')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -165,7 +165,7 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fabInsertMenu: false,
|
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: this.$store.get('editor/content'),
|
||||||
cmOptions: {
|
cmOptions: {
|
||||||
tabSize: 2,
|
tabSize: 2,
|
||||||
mode: 'text/markdown',
|
mode: 'text/markdown',
|
||||||
|
@ -137,8 +137,7 @@ module.exports = {
|
|||||||
{
|
{
|
||||||
test: /\.svg$/,
|
test: /\.svg$/,
|
||||||
include: [
|
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: [
|
use: [
|
||||||
{
|
{
|
||||||
@ -156,6 +155,9 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
|
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
|
||||||
|
exclude: [
|
||||||
|
path.join(process.cwd(), 'client')
|
||||||
|
],
|
||||||
use: [{
|
use: [{
|
||||||
loader: 'file-loader',
|
loader: 'file-loader',
|
||||||
options: {
|
options: {
|
||||||
|
@ -126,7 +126,8 @@ module.exports = {
|
|||||||
{
|
{
|
||||||
test: /\.svg$/,
|
test: /\.svg$/,
|
||||||
exclude: [
|
exclude: [
|
||||||
path.join(process.cwd(), 'client/svg')
|
path.join(process.cwd(), 'client/svg'),
|
||||||
|
path.join(process.cwd(), 'node_modules/grapesjs')
|
||||||
],
|
],
|
||||||
use: [
|
use: [
|
||||||
{
|
{
|
||||||
@ -157,6 +158,19 @@ module.exports = {
|
|||||||
{ loader: 'graphql-tag/loader' }
|
{ loader: 'graphql-tag/loader' }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
|
||||||
|
exclude: [
|
||||||
|
path.join(process.cwd(), 'client')
|
||||||
|
],
|
||||||
|
use: [{
|
||||||
|
loader: 'file-loader',
|
||||||
|
options: {
|
||||||
|
name: '[name].[ext]',
|
||||||
|
outputPath: 'fonts/'
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
test: /.jsx$/,
|
test: /.jsx$/,
|
||||||
loader: 'babel-loader',
|
loader: 'babel-loader',
|
||||||
|
@ -7,8 +7,28 @@ const pageHelper = require('../helpers/page')
|
|||||||
/**
|
/**
|
||||||
* Create/Edit document
|
* Create/Edit document
|
||||||
*/
|
*/
|
||||||
router.get(['/e', '/e/*'], (req, res, next) => {
|
router.get(['/e', '/e/*'], async (req, res, next) => {
|
||||||
res.render('editor')
|
const pageArgs = pageHelper.parsePath(req.path)
|
||||||
|
let page = await WIKI.models.pages.getPageFromDb({
|
||||||
|
path: pageArgs.path,
|
||||||
|
locale: pageArgs.locale,
|
||||||
|
userId: req.user.id,
|
||||||
|
isPrivate: false
|
||||||
|
})
|
||||||
|
if (page) {
|
||||||
|
page.mode = 'update'
|
||||||
|
page.isPublished = (page.isPublished === true || page.isPublished === 1) ? 'true' : 'false'
|
||||||
|
page.content = Buffer.from(page.content).toString('base64')
|
||||||
|
} else {
|
||||||
|
page = {
|
||||||
|
path: pageArgs.path,
|
||||||
|
localeCode: pageArgs.locale,
|
||||||
|
editorKey: null,
|
||||||
|
mode: 'create',
|
||||||
|
content: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
res.render('editor', { page })
|
||||||
})
|
})
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -41,7 +61,7 @@ router.get('/*', async (req, res, next) => {
|
|||||||
} else if (pageArgs.path === 'home') {
|
} else if (pageArgs.path === 'home') {
|
||||||
res.render('welcome')
|
res.render('welcome')
|
||||||
} else {
|
} else {
|
||||||
res.render('new')
|
res.render('new', { pagePath: req.path })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -21,8 +21,11 @@ module.exports = {
|
|||||||
|
|
||||||
// Extract Info
|
// Extract Info
|
||||||
let pathParts = _.filter(_.split(rawPath, '/'), p => !_.isEmpty(p))
|
let pathParts = _.filter(_.split(rawPath, '/'), p => !_.isEmpty(p))
|
||||||
|
if (pathParts[0].length === 1) {
|
||||||
|
pathParts.shift()
|
||||||
|
}
|
||||||
if (pathParts[0].length === 2) {
|
if (pathParts[0].length === 2) {
|
||||||
pathObj = pathParts[0]
|
pathObj.locale = pathParts[0]
|
||||||
pathParts.shift()
|
pathParts.shift()
|
||||||
}
|
}
|
||||||
pathObj.path = _.join(pathParts, '/')
|
pathObj.path = _.join(pathParts, '/')
|
||||||
|
@ -187,7 +187,9 @@ module.exports = class Page extends Model {
|
|||||||
let page = await WIKI.models.pages.getPageFromCache(opts)
|
let page = await WIKI.models.pages.getPageFromCache(opts)
|
||||||
if (!page) {
|
if (!page) {
|
||||||
page = await WIKI.models.pages.getPageFromDb(opts)
|
page = await WIKI.models.pages.getPageFromDb(opts)
|
||||||
await WIKI.models.pages.savePageToCache(page)
|
if (page) {
|
||||||
|
await WIKI.models.pages.savePageToCache(page)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return page
|
return page
|
||||||
}
|
}
|
||||||
|
@ -3,4 +3,14 @@ extends master.pug
|
|||||||
block body
|
block body
|
||||||
#root
|
#root
|
||||||
v-app
|
v-app
|
||||||
editor
|
editor(
|
||||||
|
locale=page.localeCode
|
||||||
|
path=page.path
|
||||||
|
title=page.title
|
||||||
|
description=page.description
|
||||||
|
tags=page.tags
|
||||||
|
:is-published=page.isPublished
|
||||||
|
init-mode=page.mode
|
||||||
|
init-editor=page.editorKey
|
||||||
|
init-content=page.content
|
||||||
|
)
|
||||||
|
@ -8,7 +8,7 @@ block body
|
|||||||
img.animated.fadeIn(src='/svg/henry-thinking.svg', alt='Henry')
|
img.animated.fadeIn(src='/svg/henry-thinking.svg', alt='Henry')
|
||||||
.headline= t('newpage.title')
|
.headline= t('newpage.title')
|
||||||
.subheading.mt-3= t('newpage.subtitle')
|
.subheading.mt-3= t('newpage.subtitle')
|
||||||
v-btn.mt-5(href='/e/home', large)
|
v-btn.mt-5(href='/e' + pagePath, large)
|
||||||
v-icon(left) add
|
v-icon(left) add
|
||||||
span= t('newpage.create')
|
span= t('newpage.create')
|
||||||
v-btn.mt-2(color='blue lighten-4', href='javascript:window.history.go(-1);', large, outline)
|
v-btn.mt-2(color='blue lighten-4', href='javascript:window.history.go(-1);', large, outline)
|
||||||
|
@ -13,7 +13,7 @@ block body
|
|||||||
created-at=page.createdAt
|
created-at=page.createdAt
|
||||||
updated-at=page.updatedAt
|
updated-at=page.updatedAt
|
||||||
author-name=page.authorName
|
author-name=page.authorName
|
||||||
author-id=page.authorId
|
:author-id=page.authorId
|
||||||
is-published=page.isPublished
|
is-published=page.isPublished
|
||||||
)
|
)
|
||||||
template(slot='contents')!= page.render
|
template(slot='contents')!= page.render
|
||||||
|
Loading…
x
Reference in New Issue
Block a user