完成第一版
commit
0a55442dc4
|
|
@ -0,0 +1,19 @@
|
|||
*.min.js
|
||||
.httpserver
|
||||
index.html
|
||||
test.js
|
||||
.vscode
|
||||
node_modules/
|
||||
dist/
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
package-lock.json
|
||||
|
||||
|
||||
._*
|
||||
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
.DS_Store
|
||||
.AppleDouble
|
||||
.LSOverride
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
jsxBracketSameLine: true
|
||||
jsxSingleQuote: true
|
||||
semi: false
|
||||
singleQuote: true
|
||||
printWidth: 80
|
||||
useTabs: false
|
||||
tabWidth: 2
|
||||
trailingComma: none
|
||||
bracketSpacing: true
|
||||
arrowParens: avoid
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2018
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
## @bytedo/editor
|
||||
> 定制版的前端代码编辑器, 基于`CodeMirror 6.0`,提供`html,css,js, vue`的语法高亮和最基本的键盘快捷键。
|
||||
|
||||
|
||||
### 用法
|
||||
|
||||
```js
|
||||
// 或者从CDN地址中获取
|
||||
import { EditorView, minimalSetup, vue, js, css, html } from '@bytedo/editor'
|
||||
|
||||
|
||||
let view = new EditorView({
|
||||
doc: '', //默认显示的代码,
|
||||
extensions: minimalSetup(vue()), // 需要高亮什么文件, 就传什么进去
|
||||
parent: document.body // 创建的编辑器实例, 被包裹在哪个节点上
|
||||
})
|
||||
|
||||
|
||||
console.log(view.state.doc.toString()) // 获取编辑器的代码
|
||||
|
||||
```
|
||||
|
||||
### 支持的键盘快捷键
|
||||
|
||||
- `Alt + Left/Right` 将光标按单词边界移动
|
||||
- `Alt + Up/Down` 将当前行代码与`上一行/下一行`互换
|
||||
- `Alt + Shift + Up/Down` 将当前行代码在`上一行/下一行`中复制一份, 并将光标移动到`上一行/下一行`
|
||||
- `Alt + l` (在`macos`中是`Ctrl + l`) 选中当前行
|
||||
- `Alt + i` (在`macos`中是`Ctrl + i`) 按单词边界选中内容, 连续按则父级的块作用域选中
|
||||
- `Alt + /` (在`macos`中是`Ctrl + /`) 注释当前行
|
||||
- `Ctrl + Shift + k` (在`macos`中是`Cmd + Shift + k`) 删除当前行
|
||||
- `Ctrl + Shift + \` (在`macos`中是`Cmd + Shift + \`) 在成对的符号前后移动光标
|
||||
- `Tab` 增加缩进
|
||||
- `Shift + Tab` 减少缩进
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
import {
|
||||
EditorView,
|
||||
lineNumbers,
|
||||
drawSelection,
|
||||
keymap
|
||||
} from '@codemirror/view'
|
||||
import {
|
||||
history,
|
||||
defaultKeymap,
|
||||
standardKeymap,
|
||||
historyKeymap,
|
||||
indentWithTab
|
||||
} from '@codemirror/commands'
|
||||
import {
|
||||
foldGutter,
|
||||
indentOnInput,
|
||||
syntaxHighlighting,
|
||||
HighlightStyle
|
||||
} from '@codemirror/language'
|
||||
import { tags as t } from '@lezer/highlight'
|
||||
import { css } from '@codemirror/lang-css'
|
||||
import { javascript } from '@codemirror/lang-javascript'
|
||||
import { vue } from '@codemirror/lang-vue'
|
||||
import { html } from '@codemirror/lang-html'
|
||||
|
||||
const chalky = '#e5c07b',
|
||||
blue = '#0096ff',
|
||||
strings = '#53c659',
|
||||
whiskey = '#d19a66',
|
||||
darkBackground = '#f2f5fc',
|
||||
highlightBackground = '#80CBC440',
|
||||
foreground = '#546e7a', //
|
||||
background = '#fff',
|
||||
tooltipBackground = '#353a42',
|
||||
selection = '#80CBC440',
|
||||
cursor = '#35373b',
|
||||
keyword = '#ff5370',
|
||||
property = '#8796B0'
|
||||
|
||||
const onePlain = EditorView.theme({
|
||||
'&': {
|
||||
color: foreground,
|
||||
backgroundColor: background
|
||||
},
|
||||
|
||||
'.cm-content': {
|
||||
caretColor: cursor
|
||||
},
|
||||
|
||||
'.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
|
||||
'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
|
||||
{ backgroundColor: selection },
|
||||
|
||||
'.cm-panels': { backgroundColor: darkBackground, color: foreground },
|
||||
'.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
|
||||
'.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
|
||||
|
||||
'.cm-searchMatch': {
|
||||
backgroundColor: '#72a1ff59',
|
||||
outline: '1px solid #457dff'
|
||||
},
|
||||
'.cm-searchMatch.cm-searchMatch-selected': {
|
||||
backgroundColor: '#6199ff2f'
|
||||
},
|
||||
|
||||
'.cm-activeLine': { backgroundColor: '#6699ff0b' },
|
||||
'.cm-selectionMatch': { backgroundColor: '#aafe661a' },
|
||||
|
||||
'&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
|
||||
backgroundColor: '#bad0f847'
|
||||
},
|
||||
|
||||
'.cm-gutters': {
|
||||
backgroundColor: darkBackground,
|
||||
color: foreground,
|
||||
border: 'none'
|
||||
},
|
||||
|
||||
'.cm-activeLineGutter': {
|
||||
backgroundColor: highlightBackground
|
||||
},
|
||||
|
||||
'.cm-foldPlaceholder': {
|
||||
backgroundColor: 'transparent',
|
||||
border: 'none',
|
||||
color: '#ddd'
|
||||
},
|
||||
|
||||
'.cm-tooltip': {
|
||||
border: 'none',
|
||||
backgroundColor: tooltipBackground
|
||||
},
|
||||
'.cm-tooltip .cm-tooltip-arrow:before': {
|
||||
borderTopColor: 'transparent',
|
||||
borderBottomColor: 'transparent'
|
||||
},
|
||||
'.cm-tooltip .cm-tooltip-arrow:after': {
|
||||
borderTopColor: tooltipBackground,
|
||||
borderBottomColor: tooltipBackground
|
||||
},
|
||||
'.cm-tooltip-autocomplete': {
|
||||
'& > ul > li[aria-selected]': {
|
||||
backgroundColor: highlightBackground,
|
||||
color: foreground
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const onePlainHighlight = HighlightStyle.define([
|
||||
{ tag: t.keyword, color: keyword },
|
||||
{
|
||||
tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
|
||||
color: property,
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
{
|
||||
tag: [t.attributeName],
|
||||
color: '#ffb62c'
|
||||
},
|
||||
{ tag: [t.function(t.variableName), t.labelName], color: blue },
|
||||
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
|
||||
{ tag: [t.definition(t.name), t.separator], color: foreground },
|
||||
{ tag: [t.typeName], color: keyword },
|
||||
{ tag: [t.number, t.atom, t.bool], fontStyle: 'italic', color: '#7c4dff' },
|
||||
{
|
||||
tag: [t.className, t.namespace, t.self],
|
||||
fontStyle: 'italic',
|
||||
fontWeight: 'bold',
|
||||
color: '#ffb62c'
|
||||
},
|
||||
{
|
||||
tag: [t.changed, t.annotation, t.modifier],
|
||||
color: chalky
|
||||
},
|
||||
{
|
||||
tag: [
|
||||
t.operator,
|
||||
t.operatorKeyword,
|
||||
t.url,
|
||||
t.escape,
|
||||
t.regexp,
|
||||
t.link,
|
||||
t.special(t.string)
|
||||
],
|
||||
color: keyword
|
||||
},
|
||||
{ tag: [t.meta, t.comment], fontStyle: 'italic', color: '#b6d5e0' },
|
||||
{ tag: t.strong, fontWeight: 'bold' },
|
||||
{ tag: t.emphasis, fontStyle: 'italic' },
|
||||
{ tag: t.strikethrough, textDecoration: 'line-through' },
|
||||
{ tag: t.link, color: foreground, textDecoration: 'underline' },
|
||||
{ tag: t.heading, fontWeight: 'bold', color: property },
|
||||
{ tag: [t.special(t.variableName)], color: whiskey },
|
||||
{ tag: [t.processingInstruction, t.string, t.inserted], color: strings },
|
||||
{ tag: t.invalid, color: foreground }
|
||||
])
|
||||
|
||||
export function minimalSetup(...args) {
|
||||
return [
|
||||
lineNumbers(),
|
||||
foldGutter(),
|
||||
indentOnInput(),
|
||||
history(),
|
||||
drawSelection(),
|
||||
...args,
|
||||
[onePlain, syntaxHighlighting(onePlainHighlight)],
|
||||
keymap.of([
|
||||
...standardKeymap,
|
||||
...defaultKeymap,
|
||||
indentWithTab,
|
||||
...historyKeymap
|
||||
])
|
||||
]
|
||||
}
|
||||
|
||||
export { EditorView, css, html, javascript, vue }
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"name": "@bytedo/editor",
|
||||
"description": "定制版的前端代码编辑器, 基于`CodeMirror 6.0`",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"main": "dist/index.js",
|
||||
"files": [
|
||||
"dist/*"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@codemirror/commands": "^6.2.2",
|
||||
"@codemirror/lang-css": "^6.1.1",
|
||||
"@codemirror/lang-html": "^6.4.3",
|
||||
"@codemirror/lang-javascript": "^6.1.5",
|
||||
"@codemirror/lang-vue": "^0.1.1",
|
||||
"@codemirror/language": "^6.6.0",
|
||||
"@codemirror/view": "^6.9.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "esbuild index.js --bundle --target=esnext --format=esm --outfile=dist/index.js --watch",
|
||||
"build": "esbuild index.js --minify --bundle --target=esnext --format=esm --outfile=dist/index.js"
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
||||
Loading…
Reference in New Issue