mirror of https://github.com/status-im/codimd.git
commit
56cc64e910
|
@ -38,6 +38,7 @@
|
|||
"@hackmd/lz-string": "~1.4.4",
|
||||
"@hackmd/meta-marked": "~0.4.4",
|
||||
"@passport-next/passport-openid": "~1.0.0",
|
||||
"@susisu/mte-kernel": "^2.1.0",
|
||||
"archiver": "~3.1.1",
|
||||
"async": "~3.1.0",
|
||||
"aws-sdk": "~2.503.0",
|
||||
|
|
|
@ -25,6 +25,32 @@ body.night{
|
|||
border: 1px solid #343434;
|
||||
}
|
||||
|
||||
.toolbar > .btn-toolbar {
|
||||
white-space: nowrap;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.toolbar > .btn-toolbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toolbar > .btn-toolbar > .btn-group {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.toolbar > .btn-toolbar > .btn-group > span {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.toolbar > .btn-toolbar > .btn-group > span.separator {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.toolbar > .btn-toolbar > .btn-group > .btn {
|
||||
background-color: #1c1c1e;
|
||||
padding: 5px;
|
||||
|
|
|
@ -4,6 +4,8 @@ import config from './config'
|
|||
import statusBarTemplate from './statusbar.html'
|
||||
import toolBarTemplate from './toolbar.html'
|
||||
import './markdown-lint'
|
||||
import { initTableEditor } from './table-editor'
|
||||
import { options, Alignment, FormatType } from '@susisu/mte-kernel'
|
||||
|
||||
/* config section */
|
||||
const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault
|
||||
|
@ -160,6 +162,19 @@ export default class Editor {
|
|||
var makeLine = $('#makeLine')
|
||||
var makeComment = $('#makeComment')
|
||||
|
||||
var insertRow = $('#insertRow')
|
||||
var deleteRow = $('#deleteRow')
|
||||
var moveRowUp = $('#moveRowUp')
|
||||
var moveRowDown = $('#moveRowDown')
|
||||
var insertColumn = $('#insertColumn')
|
||||
var deleteColumn = $('#deleteColumn')
|
||||
var moveColumnLeft = $('#moveColumnLeft')
|
||||
var moveColumnRight = $('#moveColumnRight')
|
||||
var alignLeft = $('#alignLeft')
|
||||
var alignCenter = $('#alignCenter')
|
||||
var alignRight = $('#alignRight')
|
||||
var alignNone = $('#alignNone')
|
||||
|
||||
makeBold.click(() => {
|
||||
utils.wrapTextWith(this.editor, this.editor, '**')
|
||||
this.editor.focus()
|
||||
|
@ -219,6 +234,72 @@ export default class Editor {
|
|||
makeComment.click(() => {
|
||||
utils.insertText(this.editor, '> []')
|
||||
})
|
||||
|
||||
// table tools UI
|
||||
const opts = options({
|
||||
smartCursor: true,
|
||||
formatType: FormatType.NORMAL
|
||||
})
|
||||
|
||||
insertRow.click(() => {
|
||||
this.tableEditor.insertRow(opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
deleteRow.click(() => {
|
||||
this.tableEditor.deleteRow(opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
moveRowUp.click(() => {
|
||||
this.tableEditor.moveRow(-1, opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
moveRowDown.click(() => {
|
||||
this.tableEditor.moveRow(1, opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
insertColumn.click(() => {
|
||||
this.tableEditor.insertColumn(opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
deleteColumn.click(() => {
|
||||
this.tableEditor.deleteColumn(opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
moveColumnLeft.click(() => {
|
||||
this.tableEditor.moveColumn(-1, opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
moveColumnRight.click(() => {
|
||||
this.tableEditor.moveColumn(1, opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
alignLeft.click(() => {
|
||||
this.tableEditor.alignColumn(Alignment.LEFT, opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
alignCenter.click(() => {
|
||||
this.tableEditor.alignColumn(Alignment.CENTER, opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
alignRight.click(() => {
|
||||
this.tableEditor.alignColumn(Alignment.RIGHT, opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
|
||||
alignNone.click(() => {
|
||||
this.tableEditor.alignColumn(Alignment.NONE, opts)
|
||||
this.editor.focus()
|
||||
})
|
||||
}
|
||||
|
||||
addStatusBar () {
|
||||
|
@ -623,6 +704,8 @@ export default class Editor {
|
|||
placeholder: "← Start by entering a title here\n===\nVisit /features if you don't know what to do.\nHappy hacking :)"
|
||||
})
|
||||
|
||||
this.tableEditor = initTableEditor(this.editor)
|
||||
|
||||
return this.editor
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,199 @@
|
|||
/* global CodeMirror, $ */
|
||||
import { TableEditor, Point, options, Alignment, FormatType } from '@susisu/mte-kernel'
|
||||
|
||||
// port of the code from: https://github.com/susisu/mte-demo/blob/master/src/main.js
|
||||
|
||||
// text editor interface
|
||||
// see https://doc.esdoc.org/github.com/susisu/mte-kernel/class/lib/text-editor.js~ITextEditor.html
|
||||
class TextEditorInterface {
|
||||
constructor (editor) {
|
||||
this.editor = editor
|
||||
this.doc = editor.getDoc()
|
||||
this.transaction = false
|
||||
this.onDidFinishTransaction = null
|
||||
}
|
||||
|
||||
getCursorPosition () {
|
||||
const { line, ch } = this.doc.getCursor()
|
||||
return new Point(line, ch)
|
||||
}
|
||||
|
||||
setCursorPosition (pos) {
|
||||
this.doc.setCursor({ line: pos.row, ch: pos.column })
|
||||
}
|
||||
|
||||
setSelectionRange (range) {
|
||||
this.doc.setSelection(
|
||||
{ line: range.start.row, ch: range.start.column },
|
||||
{ line: range.end.row, ch: range.end.column }
|
||||
)
|
||||
}
|
||||
|
||||
getLastRow () {
|
||||
return this.doc.lineCount() - 1
|
||||
}
|
||||
|
||||
acceptsTableEdit () {
|
||||
return true
|
||||
}
|
||||
|
||||
getLine (row) {
|
||||
return this.doc.getLine(row)
|
||||
}
|
||||
|
||||
insertLine (row, line) {
|
||||
const lastRow = this.getLastRow()
|
||||
if (row > lastRow) {
|
||||
const lastLine = this.getLine(lastRow)
|
||||
this.doc.replaceRange(
|
||||
'\n' + line,
|
||||
{ line: lastRow, ch: lastLine.length },
|
||||
{ line: lastRow, ch: lastLine.length }
|
||||
)
|
||||
} else {
|
||||
this.doc.replaceRange(
|
||||
line + '\n',
|
||||
{ line: row, ch: 0 },
|
||||
{ line: row, ch: 0 }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
deleteLine (row) {
|
||||
const lastRow = this.getLastRow()
|
||||
if (row >= lastRow) {
|
||||
if (lastRow > 0) {
|
||||
const preLastLine = this.getLine(lastRow - 1)
|
||||
const lastLine = this.getLine(lastRow)
|
||||
this.doc.replaceRange(
|
||||
'',
|
||||
{ line: lastRow - 1, ch: preLastLine.length },
|
||||
{ line: lastRow, ch: lastLine.length }
|
||||
)
|
||||
} else {
|
||||
const lastLine = this.getLine(lastRow)
|
||||
this.doc.replaceRange(
|
||||
'',
|
||||
{ line: lastRow, ch: 0 },
|
||||
{ line: lastRow, ch: lastLine.length }
|
||||
)
|
||||
}
|
||||
} else {
|
||||
this.doc.replaceRange(
|
||||
'',
|
||||
{ line: row, ch: 0 },
|
||||
{ line: row + 1, ch: 0 }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
replaceLines (startRow, endRow, lines) {
|
||||
const lastRow = this.getLastRow()
|
||||
if (endRow > lastRow) {
|
||||
const lastLine = this.getLine(lastRow)
|
||||
this.doc.replaceRange(
|
||||
lines.join('\n'),
|
||||
{ line: startRow, ch: 0 },
|
||||
{ line: lastRow, ch: lastLine.length }
|
||||
)
|
||||
} else {
|
||||
this.doc.replaceRange(
|
||||
lines.join('\n') + '\n',
|
||||
{ line: startRow, ch: 0 },
|
||||
{ line: endRow, ch: 0 }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
transact (func) {
|
||||
this.transaction = true
|
||||
func()
|
||||
this.transaction = false
|
||||
if (this.onDidFinishTransaction) {
|
||||
this.onDidFinishTransaction.call(undefined)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function initTableEditor (editor) {
|
||||
// create an interface to the text editor
|
||||
const editorIntf = new TextEditorInterface(editor)
|
||||
// create a table editor object
|
||||
const tableEditor = new TableEditor(editorIntf)
|
||||
// options for the table editor
|
||||
const opts = options({
|
||||
smartCursor: true,
|
||||
formatType: FormatType.NORMAL
|
||||
})
|
||||
// keymap of the commands
|
||||
// from https://github.com/susisu/mte-demo/blob/master/src/main.js
|
||||
const keyMap = CodeMirror.normalizeKeyMap({
|
||||
Tab: () => { tableEditor.nextCell(opts) },
|
||||
'Shift-Tab': () => { tableEditor.previousCell(opts) },
|
||||
Enter: () => { tableEditor.nextRow(opts) },
|
||||
'Ctrl-Enter': () => { tableEditor.escape(opts) },
|
||||
'Cmd-Enter': () => { tableEditor.escape(opts) },
|
||||
'Shift-Ctrl-Left': () => { tableEditor.alignColumn(Alignment.LEFT, opts) },
|
||||
'Shift-Cmd-Left': () => { tableEditor.alignColumn(Alignment.LEFT, opts) },
|
||||
'Shift-Ctrl-Right': () => { tableEditor.alignColumn(Alignment.RIGHT, opts) },
|
||||
'Shift-Cmd-Right': () => { tableEditor.alignColumn(Alignment.RIGHT, opts) },
|
||||
'Shift-Ctrl-Up': () => { tableEditor.alignColumn(Alignment.CENTER, opts) },
|
||||
'Shift-Cmd-Up': () => { tableEditor.alignColumn(Alignment.CENTER, opts) },
|
||||
'Shift-Ctrl-Down': () => { tableEditor.alignColumn(Alignment.NONE, opts) },
|
||||
'Shift-Cmd-Down': () => { tableEditor.alignColumn(Alignment.NONE, opts) },
|
||||
'Ctrl-Left': () => { tableEditor.moveFocus(0, -1, opts) },
|
||||
'Cmd-Left': () => { tableEditor.moveFocus(0, -1, opts) },
|
||||
'Ctrl-Right': () => { tableEditor.moveFocus(0, 1, opts) },
|
||||
'Cmd-Right': () => { tableEditor.moveFocus(0, 1, opts) },
|
||||
'Ctrl-Up': () => { tableEditor.moveFocus(-1, 0, opts) },
|
||||
'Cmd-Up': () => { tableEditor.moveFocus(-1, 0, opts) },
|
||||
'Ctrl-Down': () => { tableEditor.moveFocus(1, 0, opts) },
|
||||
'Cmd-Down': () => { tableEditor.moveFocus(1, 0, opts) },
|
||||
'Ctrl-K Ctrl-I': () => { tableEditor.insertRow(opts) },
|
||||
'Cmd-K Cmd-I': () => { tableEditor.insertRow(opts) },
|
||||
'Ctrl-L Ctrl-I': () => { tableEditor.deleteRow(opts) },
|
||||
'Cmd-L Cmd-I': () => { tableEditor.deleteRow(opts) },
|
||||
'Ctrl-K Ctrl-J': () => { tableEditor.insertColumn(opts) },
|
||||
'Cmd-K Cmd-J': () => { tableEditor.insertColumn(opts) },
|
||||
'Ctrl-L Ctrl-J': () => { tableEditor.deleteColumn(opts) },
|
||||
'Cmd-L Cmd-J': () => { tableEditor.deleteColumn(opts) },
|
||||
'Alt-Shift-Ctrl-Left': () => { tableEditor.moveColumn(-1, opts) },
|
||||
'Alt-Shift-Cmd-Left': () => { tableEditor.moveColumn(-1, opts) },
|
||||
'Alt-Shift-Ctrl-Right': () => { tableEditor.moveColumn(1, opts) },
|
||||
'Alt-Shift-Cmd-Right': () => { tableEditor.moveColumn(1, opts) },
|
||||
'Alt-Shift-Ctrl-Up': () => { tableEditor.moveRow(-1, opts) },
|
||||
'Alt-Shift-Cmd-Up': () => { tableEditor.moveRow(-1, opts) },
|
||||
'Alt-Shift-Ctrl-Down': () => { tableEditor.moveRow(1, opts) },
|
||||
'Alt-Shift-Cmd-Down': () => { tableEditor.moveRow(1, opts) }
|
||||
})
|
||||
// enable keymap if the cursor is in a table
|
||||
function updateActiveState () {
|
||||
const tableTools = $('.toolbar .table-tools')
|
||||
const active = tableEditor.cursorIsInTable(opts)
|
||||
if (active) {
|
||||
tableTools.show()
|
||||
tableTools.parent().scrollLeft(tableTools.parent()[0].scrollWidth)
|
||||
editor.setOption('extraKeys', keyMap)
|
||||
} else {
|
||||
tableTools.hide()
|
||||
editor.setOption('extraKeys', null)
|
||||
tableEditor.resetSmartCursor()
|
||||
}
|
||||
}
|
||||
// event subscriptions
|
||||
editor.on('cursorActivity', () => {
|
||||
if (!editorIntf.transaction) {
|
||||
updateActiveState()
|
||||
}
|
||||
})
|
||||
editor.on('changes', () => {
|
||||
if (!editorIntf.transaction) {
|
||||
updateActiveState()
|
||||
}
|
||||
})
|
||||
editorIntf.onDidFinishTransaction = () => {
|
||||
updateActiveState()
|
||||
}
|
||||
|
||||
return tableEditor
|
||||
}
|
|
@ -44,5 +44,47 @@
|
|||
<i class="fa fa-comment fa-fw"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span class="btn-group table-tools hidden-xs" style="display: none;">
|
||||
<span class="separator" style="margin-left: -10px;">|</span>
|
||||
<span>Row</span>
|
||||
<a id="insertRow" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Insert Row">
|
||||
<i class="fa fa-plus-circle fa-fw"></i>
|
||||
</a>
|
||||
<a id="deleteRow" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Delete Row">
|
||||
<i class="fa fa-minus-circle fa-fw"></i>
|
||||
</a>
|
||||
<a id="moveRowUp" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Move Row Up">
|
||||
<i class="fa fa-long-arrow-up fa-fw"></i>
|
||||
</a>
|
||||
<a id="moveRowDown" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Move Row Down">
|
||||
<i class="fa fa-long-arrow-down fa-fw"></i>
|
||||
</a>
|
||||
<span>Column</span>
|
||||
<a id="insertColumn" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Insert Column">
|
||||
<i class="fa fa-plus-circle fa-fw"></i>
|
||||
</a>
|
||||
<a id="deleteColumn" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Delete Column">
|
||||
<i class="fa fa-minus-circle fa-fw"></i>
|
||||
</a>
|
||||
<a id="moveColumnLeft" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Move Column Left">
|
||||
<i class="fa fa-long-arrow-left fa-fw"></i>
|
||||
</a>
|
||||
<a id="moveColumnRight" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Move Column Right">
|
||||
<i class="fa fa-long-arrow-right fa-fw"></i>
|
||||
</a>
|
||||
<span>Alignment</span>
|
||||
<a id="alignLeft" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Align Left">
|
||||
<i class="fa fa-align-left fa-fw"></i>
|
||||
</a>
|
||||
<a id="alignCenter" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Align Center">
|
||||
<i class="fa fa-align-center fa-fw"></i>
|
||||
</a>
|
||||
<a id="alignRight" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Align Right">
|
||||
<i class="fa fa-align-right fa-fw"></i>
|
||||
</a>
|
||||
<a id="alignNone" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Align None">
|
||||
<i class="fa fa-ban fa-fw"></i>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -401,6 +401,9 @@ module.exports = {
|
|||
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.mjs$/,
|
||||
type: 'javascript/auto'
|
||||
}, {
|
||||
test: /\.js$/,
|
||||
use: [{ loader: 'babel-loader' }],
|
||||
exclude: [/node_modules/, /public\/vendor/]
|
||||
|
|
12
yarn.lock
12
yarn.lock
|
@ -1041,6 +1041,13 @@
|
|||
resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz#8da5c6530915653f3a1f38fd5f101d8c3f8079c5"
|
||||
integrity sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==
|
||||
|
||||
"@susisu/mte-kernel@^2.1.0":
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@susisu/mte-kernel/-/mte-kernel-2.1.0.tgz#ec4b3a9875ae927c7f06f519323f427c0787534f"
|
||||
integrity sha512-4XgtDqZNoVGy2BKqHBhm972T4uGaOWRK1BNnh97ryL2cm2Z8g7Zq59OwcNUNaNLVoqsCp6Nv61qn4z+gq4DYyw==
|
||||
dependencies:
|
||||
meaw "^4.3.0"
|
||||
|
||||
"@textlint/ast-node-types@^4.0.3":
|
||||
version "4.2.4"
|
||||
resolved "https://registry.yarnpkg.com/@textlint/ast-node-types/-/ast-node-types-4.2.4.tgz#ae569bd76364040939044d057d5a56284563a7af"
|
||||
|
@ -8073,6 +8080,11 @@ mdurl@^1.0.1:
|
|||
resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
|
||||
integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
|
||||
|
||||
meaw@^4.3.0:
|
||||
version "4.3.0"
|
||||
resolved "https://registry.yarnpkg.com/meaw/-/meaw-4.3.0.tgz#96d74682bb9492623bd3c5d701ad37ba7a561091"
|
||||
integrity sha512-LqrSSga9IZHJzqAQD0KkGQqeXwqgNsM3X+eHAlf/5h1DqyFdP2Q30Tx8Nx2TCzjoibxmQL/JsUtSGwdpZHvuUg==
|
||||
|
||||
media-typer@0.3.0:
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
|
||||
|
|
Loading…
Reference in New Issue