feat: code block

This commit is contained in:
Jocs 2017-11-21 19:05:00 +08:00
parent 7d06e6b08c
commit 4963998429
2 changed files with 18 additions and 16 deletions

View File

@ -280,7 +280,7 @@ class Aganippe {
id: newElement.id, id: newElement.id,
paragraph: newElement paragraph: newElement
} }
eventCenter.dispatch('paragraphChange', newElement, preParagraph) eventCenter.dispatch('paragraphChange', newElement, preParagraph, false)
event.preventDefault() event.preventDefault()
} }
@ -322,7 +322,7 @@ class Aganippe {
} }
dispatchParagraphChange () { dispatchParagraphChange () {
const { eventCenter } = this const { container, eventCenter } = this
const changeHandler = event => { const changeHandler = event => {
const { id: preId, paragraph: preParagraph } = this.activeParagraph const { id: preId, paragraph: preParagraph } = this.activeParagraph
@ -335,9 +335,11 @@ class Aganippe {
if (paragraph.tagName.toLowerCase() === LOWERCASE_TAGS.li) { if (paragraph.tagName.toLowerCase() === LOWERCASE_TAGS.li) {
paragraph = paragraph.children[0] paragraph = paragraph.children[0]
} }
const id = paragraph.id const id = paragraph.id
if (id !== preId) { if (id !== preId) {
eventCenter.dispatch('paragraphChange', paragraph, preParagraph) const autoFocus = event.key && event.key === EVENT_KEYS.Enter
eventCenter.dispatch('paragraphChange', paragraph, preParagraph, autoFocus)
this.activeParagraph = { this.activeParagraph = {
id, id,
paragraph paragraph
@ -345,10 +347,11 @@ class Aganippe {
} }
} }
eventCenter.attachDOMEvent(document, 'selectionchange', changeHandler) eventCenter.attachDOMEvent(container, 'click', changeHandler)
eventCenter.attachDOMEvent(container, 'keyup', changeHandler)
} }
// newParagrpha and oldParagraph must be h1~6\p\pre element. can not be `li` or `blockquote` // newParagrpha and oldParagraph must be h1~6\p\pre element. can not be `li` or `blockquote`
subscribeParagraphChange (newParagraph, oldParagraph) { subscribeParagraphChange (newParagraph, oldParagraph, autofocus) {
const oldContext = oldParagraph.textContent const oldContext = oldParagraph.textContent
const oldTagName = oldParagraph.tagName.toLowerCase() const oldTagName = oldParagraph.tagName.toLowerCase()
const lineBreakUpdate = checkLineBreakUpdate(oldContext) const lineBreakUpdate = checkLineBreakUpdate(oldContext)
@ -356,20 +359,18 @@ class Aganippe {
switch (lineBreakUpdate.type) { switch (lineBreakUpdate.type) {
case LOWERCASE_TAGS.pre: { case LOWERCASE_TAGS.pre: {
// exchange of newParagraph and oldParagraph // exchange of newParagraph and oldParagraph
const temp = newParagraph
newParagraph = oldParagraph const codeMirrorWrapper = updateBlock(oldParagraph, lineBreakUpdate.type)
oldParagraph = temp operateClassName(codeMirrorWrapper, 'add', CLASS_OR_ID['AG_CODE_BLOCK'])
newParagraph = updateBlock(newParagraph, lineBreakUpdate.type) codeMirrorWrapper.innerHTML = ''
operateClassName(newParagraph, 'add', CLASS_OR_ID['AG_CODE_BLOCK']) const codeBlock = codeMirror(codeMirrorWrapper, {
newParagraph.innerHTML = '' autofocus
const codeBlock = codeMirror(newParagraph, {
autofocus: true
}) })
if (!isLastChildElement(oldParagraph)) { if (!isLastChildElement(newParagraph) && autofocus) {
removeNode(oldParagraph) removeNode(newParagraph)
} }
this.codeBlocks.set(newParagraph.id, codeBlock) this.codeBlocks.set(codeMirrorWrapper.id, codeBlock)
break break
} }
case LOWERCASE_TAGS.hr: { case LOWERCASE_TAGS.hr: {

View File

@ -343,6 +343,7 @@ export const nestElementWithTag = (ids, element, tagName) => {
return element return element
} }
// use the same id.
export const updateBlock = (origin, tagName) => { export const updateBlock = (origin, tagName) => {
const json = html2json(origin.outerHTML) const json = html2json(origin.outerHTML)