mirror of
https://github.com/mickael-kerjean/filestash.git
synced 2025-11-01 02:43:35 +08:00
cleanup (structure): update code structure
This commit is contained in:
Mickael KERJEAN
322
client/components/editor.js
Normal file
322
client/components/editor.js
Normal file
@ -0,0 +1,322 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import CodeMirror from 'codemirror/lib/codemirror';
|
||||
|
||||
// keybinding
|
||||
import 'codemirror/keymap/emacs.js';
|
||||
|
||||
|
||||
// search
|
||||
import 'codemirror/addon/search/searchcursor.js';
|
||||
import 'codemirror/addon/search/search.js';
|
||||
import 'codemirror/addon/edit/matchbrackets.js';
|
||||
import 'codemirror/addon/comment/comment.js';
|
||||
import 'codemirror/addon/dialog/dialog.js';
|
||||
|
||||
// code folding
|
||||
import 'codemirror/addon/fold/foldcode';
|
||||
import 'codemirror/addon/fold/foldgutter';
|
||||
|
||||
// modes
|
||||
import 'codemirror/addon/mode/simple';
|
||||
|
||||
CodeMirror.defineSimpleMode("orgmode", {
|
||||
start: [
|
||||
{regex: /^(^\*{1,6}\s)(TODO|DOING|WAITING){0,1}(CANCEL|DEFERRED|DONE){0,1}(.*)$/, token: ["header org-level-star", "header org-todo", "header org-done", "header"]},
|
||||
{regex: /(^\+[^\/]*\+)/, token: ["strikethrough"]},
|
||||
{regex: /(^\*[^\/]*\*)/, token: ["strong"]},
|
||||
{regex: /(^\/[^\/]*\/)/, token: ["em"]},
|
||||
{regex: /(^\_[^\/]*\_)/, token: ["link"]},
|
||||
{regex: /(^\~[^\/]*\~)/, token: ["comment"]},
|
||||
{regex: /(^\=[^\/]*\=)/, token: ["comment"]},
|
||||
// special syntax
|
||||
//{regex: /(^[\*]+)(\s[TODO|NEXT|DONE|DEFERRED|REJECTED|WAITING]{2,})?(.*)/, token: ['comment', 'qualifier', 'header']}, // headline
|
||||
{regex: /\[\[[^\[\]]*\]\[[^\[\]]*\]\]/, token: "url"}, // links
|
||||
{regex: /\[[xX\s]?\]/, token: 'qualifier'}, // checkbox
|
||||
{regex: /\#\+BEGIN_[A-Z]*/, token: "comment", next: "env"}, // comments
|
||||
{regex: /:?[A-Z_]+\:.*/, token: "comment"}, // property drawers
|
||||
{regex: /(\#\+[A-Z_]*)(\:.*)/, token: ["keyword", 'qualifier']}, // environments
|
||||
{regex: /(CLOCK\:|SHEDULED\:)(\s.+)/, token: ["comment", "keyword"]}
|
||||
],
|
||||
env: [
|
||||
{regex: /.*?\#\+END_[A-Z]*/, token: "comment", next: "start"},
|
||||
{regex: /.*/, token: "comment"}
|
||||
]
|
||||
});
|
||||
CodeMirror.registerHelper("fold", "orgmode", function(cm, start) {
|
||||
// init
|
||||
const levelToMatch = headerLevel(start.line);
|
||||
|
||||
// no folding needed
|
||||
if(levelToMatch === null) return;
|
||||
|
||||
// find folding limits
|
||||
const lastLine = cm.lastLine();
|
||||
let end = start.line;
|
||||
while(end < lastLine){
|
||||
end += 1;
|
||||
let level = headerLevel(end);
|
||||
if(level && level <= levelToMatch) {
|
||||
end = end - 1;
|
||||
break;
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
from: CodeMirror.Pos(start.line, cm.getLine(start.line).length),
|
||||
to: CodeMirror.Pos(end, cm.getLine(end).length)
|
||||
};
|
||||
|
||||
function headerLevel(lineNo) {
|
||||
var line = cm.getLine(lineNo);
|
||||
var match = /^\*+/.exec(line);
|
||||
if(match && match.length === 1 && /header/.test(cm.getTokenTypeAt(CodeMirror.Pos(lineNo, 0)))){
|
||||
return match[0].length;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
});
|
||||
CodeMirror.registerGlobalHelper("fold", "drawer", function(mode) {
|
||||
return mode.name === 'orgmode' ? true : false;
|
||||
}, function(cm, start) {
|
||||
const drawer = isBeginningOfADrawer(start.line);
|
||||
if(drawer === false) return;
|
||||
|
||||
// find folding limits
|
||||
const lastLine = cm.lastLine();
|
||||
let end = start.line;
|
||||
while(end < lastLine){
|
||||
end += 1;
|
||||
if(isEndOfADrawer(end)){
|
||||
break
|
||||
}
|
||||
}
|
||||
return {
|
||||
from: CodeMirror.Pos(start.line, cm.getLine(start.line).length),
|
||||
to: CodeMirror.Pos(end, cm.getLine(end).length)
|
||||
};
|
||||
|
||||
function isBeginningOfADrawer(lineNo) {
|
||||
var line = cm.getLine(lineNo);
|
||||
var match = /^\:.*\:$/.exec(line);
|
||||
if(match && match.length === 1 && match[0] !== ':END:'){
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function isEndOfADrawer(lineNo){
|
||||
var line = cm.getLine(lineNo);
|
||||
return line.trim() === ':END:' ? true : false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
export class Editor extends React.Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
editor: null,
|
||||
filename: this.props.filename
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps(props){
|
||||
if(this.props.content !== props.content){
|
||||
this.state.editor.getDoc().setValue(props.content);
|
||||
}
|
||||
if(this.props.height !== props.height){
|
||||
this.updateHeight(props.height);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.loadMode(this.props.filename)
|
||||
.then(loadCodeMirror.bind(this))
|
||||
|
||||
function loadCodeMirror(mode){
|
||||
const size_small = 500;
|
||||
let editor = CodeMirror(document.getElementById('editor'), {
|
||||
value: this.props.content,
|
||||
lineNumbers: document.body.offsetWidth > size_small ? true : false,
|
||||
mode: mode,
|
||||
keyMap: "emacs",
|
||||
lineWrapping: true,
|
||||
foldGutter: {
|
||||
minFoldSize: 1
|
||||
}
|
||||
});
|
||||
if(mode === 'orgmode'){
|
||||
let state = {
|
||||
stab: 'OVERVIEW'
|
||||
};
|
||||
editor.setOption("extraKeys", {
|
||||
"Tab": function(cm) {
|
||||
let pos = cm.getCursor();
|
||||
isFold(cm, pos) ? unfold(cm, pos) : fold(cm, pos);
|
||||
},
|
||||
"Shift-Tab": function(cm){
|
||||
if(state.stab === "SHOW_ALL"){
|
||||
// fold everything that can be fold
|
||||
state.stab = 'OVERVIEW';
|
||||
cm.operation(function() {
|
||||
for (var i = cm.firstLine(), e = cm.lastLine(); i <= e; i++){
|
||||
fold(cm, CodeMirror.Pos(i, 0));
|
||||
}
|
||||
});
|
||||
}else{
|
||||
// unfold all headers
|
||||
state.stab = 'SHOW_ALL';
|
||||
cm.operation(function() {
|
||||
for (var i = cm.firstLine(), e = cm.lastLine(); i <= e; i++){
|
||||
if(/header/.test(cm.getTokenTypeAt(CodeMirror.Pos(i, 0))) === true){
|
||||
unfold(cm, CodeMirror.Pos(i, 0))
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function fold(cm, start){
|
||||
cm.foldCode(start, null, "fold");
|
||||
}
|
||||
function unfold(cm, start){
|
||||
cm.foldCode(start, null, "unfold");
|
||||
}
|
||||
function isFold(cm, start){
|
||||
const line = start.line;
|
||||
const marks = cm.findMarks(CodeMirror.Pos(line, 0), CodeMirror.Pos(line + 1, 0));
|
||||
for (let i = 0; i < marks.length; ++i)
|
||||
if (marks[i].__isFold && marks[i].find().from.line == line) return marks[i];
|
||||
return false;
|
||||
}
|
||||
editor.on('touchstart', function(cm, e){
|
||||
setTimeout(() => {
|
||||
isFold(cm, cm.getCursor()) ? unfold(cm, cm.getCursor()) : fold(cm, cm.getCursor())
|
||||
}, 150);
|
||||
});
|
||||
// fold everything except headers by default
|
||||
editor.operation(function() {
|
||||
for (var i = 0; i < editor.lineCount() ; i++) {
|
||||
if(/header/.test(editor.getTokenTypeAt(CodeMirror.Pos(i, 0))) === false){
|
||||
fold(editor, CodeMirror.Pos(i, 0));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function collapseWidget(){
|
||||
let $widget = document.createElement('span');
|
||||
$widget.appendChild(document.createTextNode('colapse'));
|
||||
return $widget;
|
||||
}
|
||||
function expandWidget(){
|
||||
let $widget = document.createElement('span');
|
||||
$widget.appendChild(document.createTextNode('expand'));
|
||||
return $widget;
|
||||
}
|
||||
}
|
||||
this.setState({editor: editor});
|
||||
this.updateHeight(this.props.height);
|
||||
|
||||
editor.on('change', (edit) => {
|
||||
if(this.props.onChange){
|
||||
this.props.onChange(edit.getValue());
|
||||
}
|
||||
})
|
||||
CodeMirror.commands.save = () => {
|
||||
let elt = editor.getWrapperElement();
|
||||
elt.style.background = "rgba(0,0,0,0.1)";
|
||||
window.setTimeout(function() { elt.style.background = ""; }, 300);
|
||||
this.props.onSave && this.props.onSave();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount(){
|
||||
this.state.editor.clearHistory();
|
||||
}
|
||||
|
||||
updateHeight(height){
|
||||
if(height){
|
||||
//document.querySelector('.CodeMirror').style.height = height+'px';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
loadMode(file){
|
||||
let ext = file.split('.').pop(),
|
||||
mode = null;
|
||||
|
||||
ext = ext.replace(/~$/, ''); // remove emacs mark when a file is opened
|
||||
|
||||
if(ext === 'org' || ext === 'org_archive'){ return Promise.resolve('orgmode'); }
|
||||
else if(ext === 'js' || ext === 'json'){
|
||||
// import('../pages/editpage/index')
|
||||
// .then((m) => {console.log(m);})
|
||||
// .catch((err) => {
|
||||
// console.trace(err)
|
||||
// })
|
||||
// require(["../pages/editpage/javascript"], function(a) {
|
||||
// console.log("DONEEE");
|
||||
// console.log("HEREEE")
|
||||
// }, function(err){
|
||||
// console.log(err)
|
||||
// });
|
||||
|
||||
//
|
||||
// return System.import('../pages/editpage/index')
|
||||
// .then((mode) => {
|
||||
// console.log(mode)
|
||||
// return Promise.resolve('javascript')
|
||||
// })
|
||||
//System.import('codemirror/mode/javascript/javascript')
|
||||
return Promise.resolve('javascript')
|
||||
}
|
||||
// else if(ext === 'sh'){ mode = 'shell'; }
|
||||
// else if(ext === 'py'){ mode = 'python'; }
|
||||
// else if(ext === 'html'){ mode = 'htmlmixed'; }
|
||||
// else if(ext === 'css'){ mode = 'css'; }
|
||||
// else if(ext === 'erl'){ mode = 'erlang'; }
|
||||
// else if(ext === 'go'){mode = 'go'; }
|
||||
// else if(ext === 'markdown' || ext === 'md'){mode = 'markdown'; }
|
||||
// else if(ext === 'pl'){mode = 'perl'; }
|
||||
// else if(ext === 'clj'){ mode = 'clojure'; }
|
||||
// else if(ext === 'php'){ mode = 'php'; }
|
||||
// else if(ext === 'r'){ mode = 'r'; }
|
||||
// else if(ext === 'rb'){ mode = 'ruby'; }
|
||||
// else if(ext === 'less' || ext === 'scss'){ mode = 'sass'; }
|
||||
// else if(ext === 'sql'){ mode = 'sql'; }
|
||||
// else if(ext === 'xml'){ mode = 'xml'; }
|
||||
// else if(ext === 'yml'){
|
||||
// System.import('codemirror/mode/javascript/javascript')
|
||||
// //.then(() => Promise.resolve('javascript'));
|
||||
// }
|
||||
// else if(ext === 'c' || ext === 'cpp' || ext === 'java'){
|
||||
// mode = 'clike';
|
||||
// }
|
||||
else{ return Promise.resolve('orgmode') }
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="editor" style={{height: '100%'}}></div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Editor.propTypes = {
|
||||
content: PropTypes.string.isRequired,
|
||||
filename: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func,
|
||||
onSave: PropTypes.func
|
||||
}
|
||||
|
||||
// function load(mode){
|
||||
// let url = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/'+mode+'/'+mode+'.js';
|
||||
// var script = document.createElement('script');
|
||||
// script.type = 'text/javascript';
|
||||
// script.src = url;
|
||||
// document.getElementsByTagName('head')[0].appendChild(script);
|
||||
// return mode;
|
||||
// }
|
||||
Reference in New Issue
Block a user