kf-slate-editor
Version:
Another rich text editor using Slate framework with toolbar support
301 lines (275 loc) • 17.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _Window = require('./Window');
var _Window2 = _interopRequireDefault(_Window);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
//import ClickOutHandler from 'react-clickout-handler';
function mapKey(keyCode) {
var xkm = [[65406, 0, 65406, 0, 0, 0, 0], [65307, 0, 65307, 0, 0, 0, 0], [49, 33, 49, 33, 0, 0, 0], [50, 64, 50, 64, 0, 0, 0], [51, 35, 51, 35, 0, 0, 0], [52, 36, 52, 36, 0, 0, 0], [53, 37, 53, 37, 0, 0, 0], [54, 94, 54, 94, 0, 0, 0], [55, 38, 55, 38, 0, 0, 0], [56, 42, 56, 42, 0, 0, 0], [57, 40, 57, 40, 0, 0, 0], [48, 41, 48, 41, 0, 0, 0], [45, 95, 45, 95, 0, 0, 0], [61, 43, 61, 43, 0, 0, 0], [65288, 65288, 65288, 65288, 0, 0, 0], [65289, 65056, 65289, 65056, 0, 0, 0], [113, 81, 113, 81, 0, 0, 0], [119, 87, 119, 87, 0, 0, 0], [101, 69, 101, 69, 0, 0, 0], [114, 82, 114, 82, 0, 0, 0], [116, 84, 116, 84, 0, 0, 0], [121, 89, 121, 89, 0, 0, 0], [117, 85, 117, 85, 0, 0, 0], [105, 73, 105, 73, 0, 0, 0], [111, 79, 111, 79, 0, 0, 0], [112, 80, 112, 80, 0, 0, 0], [91, 123, 91, 123, 0, 0, 0], [93, 125, 93, 125, 0, 0, 0], [65293, 0, 65293, 0, 0, 0, 0], [65507, 0, 65507, 0, 0, 0, 0], [97, 65, 97, 65, 0, 0, 0], [115, 83, 115, 83, 0, 0, 0], [100, 68, 100, 68, 0, 0, 0], [102, 70, 102, 70, 0, 0, 0], [103, 71, 103, 71, 0, 0, 0], [104, 72, 104, 72, 0, 0, 0], [106, 74, 106, 74, 0, 0, 0], [107, 75, 107, 75, 0, 0, 0], [108, 76, 108, 76, 0, 0, 0], [59, 58, 59, 58, 0, 0, 0], [39, 34, 39, 34, 0, 0, 0], [96, 126, 96, 126, 0, 0, 0], [65505, 0, 65505, 0, 0, 0, 0], [92, 124, 92, 124, 0, 0, 0], [122, 90, 122, 90, 0, 0, 0], [120, 88, 120, 88, 0, 0, 0], [99, 67, 99, 67, 0, 0, 0], [118, 86, 118, 86, 0, 0, 0], [98, 66, 98, 66, 0, 0, 0], [110, 78, 110, 78, 0, 0, 0], [109, 77, 109, 77, 0, 0, 0], [44, 60, 44, 60, 0, 0, 0], [46, 62, 46, 62, 0, 0, 0], [47, 63, 47, 63, 0, 0, 0], [65506, 0, 65506, 0, 0, 0, 0], [65450, 65450, 65450, 65450, 65450, 65450, 269024801], [65513, 65511, 65513, 65511, 0, 0, 0], [32, 0, 32, 0, 0, 0, 0], [65509, 0, 65509, 0, 0, 0, 0], [65470, 65470, 65470, 65470, 65470, 65470, 269024769], [65471, 65471, 65471, 65471, 65471, 65471, 269024770], [65472, 65472, 65472, 65472, 65472, 65472, 269024771], [65473, 65473, 65473, 65473, 65473, 65473, 269024772], [65474, 65474, 65474, 65474, 65474, 65474, 269024773], [65475, 65475, 65475, 65475, 65475, 65475, 269024774], [65476, 65476, 65476, 65476, 65476, 65476, 269024775], [65477, 65477, 65477, 65477, 65477, 65477, 269024776], [65478, 65478, 65478, 65478, 65478, 65478, 269024777], [65479, 65479, 65479, 65479, 65479, 65479, 269024778], [65407, 0, 65407, 0, 0, 0, 0], [65300, 0, 65300, 0, 0, 0, 0], [65429, 65463, 65429, 65463, 0, 0, 0], [65431, 65464, 65431, 65464, 0, 0, 0], [65434, 65465, 65434, 65465, 0, 0, 0], [65453, 65453, 65453, 65453, 65453, 65453, 269024803], [65430, 65460, 65430, 65460, 0, 0, 0], [65437, 65461, 65437, 65461, 0, 0, 0], [65432, 65462, 65432, 65462, 0, 0, 0], [65451, 65451, 65451, 65451, 65451, 65451, 269024802], [65436, 65457, 65436, 65457, 0, 0, 0], [65433, 65458, 65433, 65458, 0, 0, 0], [65435, 65459, 65435, 65459, 0, 0, 0], [65438, 65456, 65438, 65456, 0, 0, 0], [65439, 65454, 65439, 65454, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [60, 62, 60, 62, 124, 166, 124], [65480, 65480, 65480, 65480, 65480, 65480, 269024779], [65481, 65481, 65481, 65481, 65481, 65481, 269024780], [65360, 0, 65360, 0, 0, 0, 0], [65362, 0, 65362, 0, 0, 0, 0], [65365, 0, 65365, 0, 0, 0, 0], [65361, 0, 65361, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [65363, 0, 65363, 0, 0, 0, 0], [65367, 0, 65367, 0, 0, 0, 0], [65364, 0, 65364, 0, 0, 0, 0], [65366, 0, 65366, 0, 0, 0, 0], [65379, 0, 65379, 0, 0, 0, 0], [65535, 0, 65535, 0, 0, 0, 0], [65421, 0, 65421, 0, 0, 0, 0], [65508, 0, 65508, 0, 0, 0, 0], [65299, 65387, 65299, 65387, 0, 0, 0], [65377, 65301, 65377, 65301, 0, 0, 0], [65455, 65455, 65455, 65455, 65455, 65455, 269024800], [65514, 65512, 65514, 65512, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [65515, 0, 65515, 0, 0, 0, 0], [65516, 0, 65516, 0, 0, 0, 0], [65383, 0, 65383, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [65027, 0, 65027, 0, 0, 0, 0], [0, 65513, 0, 65513, 0, 0, 0], [65469, 0, 65469, 0, 0, 0, 0], [0, 65515, 0, 65515, 0, 0, 0], [0, 65517, 0, 65517, 0, 0, 0], [269025074, 0, 269025074, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [65454, 65454, 65454, 65454, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025046, 0, 269025046, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025071, 0, 269025071, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025047, 0, 269025047, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 65511, 0, 65511, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025042, 0, 269025042, 0, 0, 0, 0], [269025053, 0, 269025053, 0, 0, 0, 0], [269025044, 269025073, 269025044, 269025073, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025045, 269025068, 269025045, 269025068, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025068, 0, 269025068, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025041, 0, 269025041, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025043, 0, 269025043, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025070, 0, 269025070, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025068, 0, 269025068, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025113, 0, 269025113, 0, 0, 0, 0], [269025028, 0, 269025028, 0, 0, 0, 0], [269025030, 0, 269025030, 0, 0, 0, 0], [269025029, 0, 269025029, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025066, 0, 269025066, 0, 0, 0, 0], [269025040, 0, 269025040, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025067, 0, 269025067, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025051, 0, 269025051, 0, 0, 0, 0], [269025072, 0, 269025072, 0, 0, 0, 0], [269025139, 0, 269025139, 0, 0, 0, 0], [269025064, 0, 269025064, 0, 0, 0, 0], [269025063, 0, 269025063, 0, 0, 0, 0], [269025062, 0, 269025062, 0, 0, 0, 0], [269025075, 0, 269025075, 0, 0, 0, 0], [269025049, 0, 269025049, 0, 0, 0, 0], [269025074, 0, 269025074, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025171, 0, 269025171, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [269025173, 0, 269025173, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0]];
var exceptionKeys = {
'190': '46', // PERIOD CHROME
'16': '65506', // SHIFT CHROME
'17': '65507', // CTRL CHROME
'18': '65513', // ALT CHROME
'34': '65307', // ESC CHROME
'191': '47', // BACKSLASH CHROME
'20': '65509', // CAPS CHROME
'9': '65289', // TAB CHROME
'189': '45', // MINUS CHROME
'187': '61', // EQUALS CHROME
'8': '65288', // BACKSPACE CHROME
'220': '92', // FOWARD SLASH CHROME
'13': '65293', // ENTER CHROME
'192': '96', // TILDE CHROME
'186': '59', // SEMICOLON CHROME
'222': '34', // QUOTES CHROME
'188': '44', // COMMA CHROME
'27': '65307', // ESC CHROME
'39': '65363', // RIGHT ARROW CHROME
'37': '65361', // LEFT ARROW CHROME
'38': '65362', // UP ARROW CHROME
'40': '65364', // DOWN ARROW CHROME
'91': '65506' // set osx cmd to shift
};
function buildASCIIToXKeyMap(XKeysMap, min) {
var asciiToX = {};
for (var i = 0; i < XKeysMap.length; i++) {
for (var j = 0; j < XKeysMap[i].length; j++) {
var key = XKeysMap[i][j];
var value = i + min;
if (key !== 0) asciiToX[key] = value;
}
}
return asciiToX;
}
var keyMap = buildASCIIToXKeyMap(xkm, 8);
if (exceptionKeys[keyCode]) keyCode = exceptionKeys[keyCode];
var key = keyMap[keyCode];
if (key === undefined || key === null) key = 62; // shift
if (keyCode == 219) {
key = 34;
} else if (keyCode === 221) {
key = 35;
}
return key;
}
var Cloudware = function (_React$Component) {
_inherits(Cloudware, _React$Component);
function Cloudware(props) {
_classCallCheck(this, Cloudware);
var _this = _possibleConstructorReturn(this, (Cloudware.__proto__ || Object.getPrototypeOf(Cloudware)).call(this, props));
_this.handleClickOut = function () {
_this.state.isActive = false;
return;
_this.setState({
isActive: false
});
};
_this.handleOnClick = function () {
_this.state.isActive = true;
return;
/*this.setState({
isActive: true
});*/
};
_this.container = _react2.default.createRef();
_this.state = {
windows: [],
isActive: false
};
return _this;
}
_createClass(Cloudware, [{
key: '_findWindow',
value: function _findWindow(wid) {
for (var i in this.state.windows) {
if (this.state.windows[i].wid == wid) {
return this.state.windows[i];
}
}
return null;
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var ws = new WebSocket("ws://temp.wss.kfcoding.com/");
var self = this;
ws.binaryType = 'arraybuffer';
ws.onopen = function () {
console.log(ws);
var container = self.container.current;
container.onmousemove = function (e) {
var dom_left = container.offsetLeft + container.offsetParent.offsetLeft;
var dom_top = container.offsetTop + container.offsetParent.offsetTop;
var bei = 1;
var x = Math.floor((e.pageX - dom_left) / bei);
var y = Math.floor((e.pageY - dom_top) / bei);
var buf = new ArrayBuffer(5);
var dv = new DataView(buf);
dv.setUint8(0, 7);
dv.setUint16(1, x, true);
dv.setUint16(3, y, true);
if (ws.readyState == 1) ws.send(buf);
};
container.onmousedown = function (e) {
var buf = new ArrayBuffer(5);
var dv = new DataView(buf);
dv.setUint8(0, 8);
dv.setUint32(1, e.which, true);
if (ws.readyState == 1) ws.send(buf);
};
container.onmouseup = function (e) {
var buf = new ArrayBuffer(5);
var dv = new DataView(buf);
dv.setUint8(0, 9);
dv.setUint32(1, e.which, true);
if (ws.readyState == 1) ws.send(buf);
};
document.onkeydown = function (e) {
/*if (!this.state.isActive) {
console.log(this.state.isActive);
return;
}*/
if (e.keyCode == 9 || e.keyCode == 32) {
//tab pressed
e.preventDefault(); // stops its action
}
var buf = new ArrayBuffer(5);
var dv = new DataView(buf);
dv.setUint8(0, 10);
dv.setUint32(1, mapKey(e.which), true);
if (ws.readyState == 1) ws.send(buf);
};
document.onkeyup = function (e) {
if (e.keyCode == 9 || e.keyCode == 32) {
//tab pressed
e.preventDefault(); // stops its action
}
var buf = new ArrayBuffer(5);
var dv = new DataView(buf);
dv.setUint8(0, 11);
dv.setUint32(1, mapKey(e.which), true);
if (ws.readyState == 1) ws.send(buf);
};
};
ws.onmessage = function (msg) {
var data = msg.data;
var dv = new DataView(data);
switch (dv.getUint32(0, true)) {
case 1:
var wid = dv.getUint32(4, true);
var x = dv.getInt16(8, true);
var y = dv.getInt16(10, true);
var width = dv.getUint16(12, true);
var height = dv.getUint16(14, true);
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var window = {
wid: wid,
x: x,
y: y,
width: width,
height: height,
canvas: canvas,
show: false
};
self.state.windows.push(window);
self.forceUpdate();
break;
case 2:
var wid = dv.getUint32(4, true);
for (var i in self.state.windows) {
if (self.state.windows[i].wid == wid) {
self.state.windows.splice(i, 1);
self.forceUpdate();
break;
}
}
break;
case 3:
var wid = dv.getUint32(4, true);
var win = self._findWindow(wid);
if (win) {
win.show = true;
self.forceUpdate();
}
break;
case 4:
var wid = dv.getUint32(4, true);
var win = self._findWindow(wid);
if (win) {
win.show = false;
self.forceUpdate();
}
break;
case 5:
var wid = dv.getUint32(4, true);
var x = dv.getInt16(8, true);
var y = dv.getInt16(10, true);
var width = dv.getUint16(12, true);
var height = dv.getUint16(14, true);
self.state.windows.forEach(function (win) {
if (win.wid == wid) {
win.x = x;
win.y = y;
win.width = width;
win.height = height;
win.canvas.width = width;
win.canvas.height = height;
self.forceUpdate();
}
});
break;
case 6:
var wid = dv.getUint32(4, true);
var x = dv.getInt16(12, true);
var y = dv.getInt16(14, true);
var bf = data.slice(28);
self.state.windows.forEach(function (window) {
if (window.wid == wid) {
var blob = new Blob([bf], { type: 'image/png' });
var ctx = window.canvas.getContext('2d');
var url = URL.createObjectURL(blob);
var img = new Image();
img.onload = function () {
ctx.drawImage(this, x, y);
URL.revokeObjectURL(url);
self.setState({ windows: self.state.windows });
};
img.src = url;
}
});
break;
}
};
}
}, {
key: 'render',
value: function render() {
var windows = this.state.windows.map(function (window) {
return _react2.default.createElement(_Window2.default, {
key: window.wid,
window: window
});
});
{/*<ClickOutHandler onClickOut={this.handleClickOut} onClick={this.handleOnClick}>
</ClickOutHandler>*/}
return _react2.default.createElement(
'div',
{ style: { position: 'relative', width: '100%', height: '800px' }, ref: this.container },
windows
);
}
}]);
return Cloudware;
}(_react2.default.Component);
exports.default = Cloudware;