Insert spaces when tab key is pressed (#296)

This commit is contained in:
Felix Häusler 2018-05-27 18:45:24 +02:00 committed by 冉四夕
parent 80e6668957
commit f4f96de478
6 changed files with 50 additions and 26 deletions

View File

@ -46,6 +46,7 @@ class ContentState {
constructor (options) { constructor (options) {
const { eventCenter, bulletListMarker } = options const { eventCenter, bulletListMarker } = options
Object.assign(this, options) Object.assign(this, options)
// Use to cache the keys which you don't want to remove. // Use to cache the keys which you don't want to remove.
this.exemption = new Set() this.exemption = new Set()
this.blocks = [ this.createBlockP() ] this.blocks = [ this.createBlockP() ]

View File

@ -118,25 +118,27 @@ const tabCtrl = ContentState => {
} }
this.appendChild(newList, listItem) this.appendChild(newList, listItem)
this.partialRender() return this.partialRender()
} }
// ContentState.prototype.insertTab = function () { ContentState.prototype.insertTab = function () {
// // TODO(fxha): Tabs and all spaces with length > 1 are converted to a single space const tabSize = this.tabSize
// in editor mode. Maybe write a HTML "tab" element const tabCharacter = ' '.repeat(tabSize)
// // TODO(fxha): create setting entry "tabSize: <int>" const { start, end } = this.cursor
// const tabCharacter = new Array(4).join(' ') const startBlock = this.getBlock(start.key)
// const { start, end } = this.cursor const endBlock = this.getBlock(end.key)
// const startBlock = this.getBlock(start.key) if (start.key === end.key && start.offset === end.offset) {
// const endBlock = this.getBlock(end.key) startBlock.text = startBlock.text.substring(0, start.offset) +
// if (this.cursor.start.key === this.cursor.end.key) { tabCharacter + endBlock.text.substring(end.offset)
// startBlock.text = startBlock.text.substring(0, start.offset) + tabCharacter + endBlock.text.substring(end.offset) const key = start.key
// // workaround: see todo 1 const offset = start.offset + tabCharacter.length
// this.cursor.start.offset += 1 // tabCharacter.length this.cursor = {
// this.cursor.end.offset += 1 // tabCharacter.length start: { key, offset },
// this.render() end: { key, offset }
// } }
// } return this.partialRender()
}
}
ContentState.prototype.tabHandler = function (event) { ContentState.prototype.tabHandler = function (event) {
// disable tab focus // disable tab focus
@ -173,9 +175,8 @@ const tabCtrl = ContentState => {
if (this.isIndentableListItem()) { if (this.isIndentableListItem()) {
return this.indentListItem() return this.indentListItem()
} // else { }
// this.insertTab() return this.insertTab()
// }
} }
} }

View File

@ -21,7 +21,8 @@ class Aganippe {
constructor (container, options) { constructor (container, options) {
const { const {
focusMode = false, theme = 'light', markdown = '', preferLooseListItem = true, focusMode = false, theme = 'light', markdown = '', preferLooseListItem = true,
autoPairBracket = true, autoPairMarkdownSyntax = true, autoPairQuote = true, bulletListMarker = '-' autoPairBracket = true, autoPairMarkdownSyntax = true, autoPairQuote = true,
bulletListMarker = '-', tabSize = 4
} = options } = options
this.container = container this.container = container
const eventCenter = this.eventCenter = new EventCenter() const eventCenter = this.eventCenter = new EventCenter()
@ -35,7 +36,8 @@ class Aganippe {
autoPairBracket, autoPairBracket,
autoPairMarkdownSyntax, autoPairMarkdownSyntax,
autoPairQuote, autoPairQuote,
bulletListMarker bulletListMarker,
tabSize
}) })
this.emoji = new Emoji() // emoji instance: has search(text) clear() methods. this.emoji = new Emoji() // emoji instance: has search(text) clear() methods.
this.focusMode = focusMode this.focusMode = focusMode
@ -539,6 +541,16 @@ class Aganippe {
this.contentState.preferLooseListItem = preferLooseListItem this.contentState.preferLooseListItem = preferLooseListItem
} }
setTabSize (tabSize) {
if (!tabSize || typeof tabSize !== 'number') {
tabSize = 4
} else if (tabSize < 1) {
tabSize = 1
}
this.tabSize = tabSize
this.contentState.tabSize = tabSize
}
updateParagraph (type) { updateParagraph (type) {
this.contentState.updateParagraph(type) this.contentState.updateParagraph(type)
} }

View File

@ -100,7 +100,7 @@
}, },
computed: { computed: {
...mapState([ ...mapState([
'preferLooseListItem', 'autoPairBracket', 'autoPairMarkdownSyntax', 'autoPairQuote', 'bulletListItemMarker' 'preferLooseListItem', 'autoPairBracket', 'autoPairMarkdownSyntax', 'autoPairQuote', 'bulletListItemMarker', 'tabSize'
]) ])
}, },
data () { data () {
@ -150,6 +150,12 @@
if (value !== oldValue && editor) { if (value !== oldValue && editor) {
editor.setListItemPreference(value) editor.setListItemPreference(value)
} }
},
tabSize: function (value, oldValue) {
const { editor } = this
if (value !== oldValue && editor) {
editor.setTabSize(value)
}
} }
}, },
created () { created () {
@ -164,7 +170,8 @@
autoPairBracket, autoPairBracket,
autoPairMarkdownSyntax, autoPairMarkdownSyntax,
autoPairQuote, autoPairQuote,
bulletListMarker bulletListMarker,
tabSize
} = this } = this
const { container } = this.editor = new Aganippe(ele, { const { container } = this.editor = new Aganippe(ele, {
@ -175,7 +182,8 @@
autoPairBracket, autoPairBracket,
autoPairMarkdownSyntax, autoPairMarkdownSyntax,
autoPairQuote, autoPairQuote,
bulletListMarker bulletListMarker,
tabSize
}) })
if (typewriter) { if (typewriter) {

View File

@ -23,6 +23,7 @@ const state = {
autoPairBracket: true, autoPairBracket: true,
autoPairMarkdownSyntax: true, autoPairMarkdownSyntax: true,
autoPairQuote: true, autoPairQuote: true,
tabSize: 4,
// edit mode // edit mode
typewriter: false, // typewriter mode typewriter: false, // typewriter mode
focus: false, // focus mode focus: false, // focus mode

View File

@ -25,7 +25,8 @@ Edit and save to update preferences. You can only change the JSON below!
"autoPairBracket": true, "autoPairBracket": true,
"autoPairMarkdownSyntax": true, "autoPairMarkdownSyntax": true,
"autoPairQuote": true, "autoPairQuote": true,
"endOfLine": "default" "endOfLine": "default",
"tabSize": 4
} }
``` ```