@aomao/plugin-codeblock-vue
Version:
1,046 lines (931 loc) • 59.7 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
import _createClass from '@babel/runtime/helpers/esm/createClass';
import _inherits from '@babel/runtime/helpers/esm/inherits';
import _createSuper from '@babel/runtime/helpers/esm/createSuper';
import { isEngine, isMobile, isHotkey, $, escape, isServer, CardActiveTrigger, CardType, Card, Parser, unescape, VIEW_CLASS_NAME, CARD_KEY, READY_CARD_KEY, decodeCardValue, CARD_VALUE_KEY, CARD_TYPE_KEY, Plugin } from '@aomao/engine';
import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
import _get from '@babel/runtime/helpers/esm/get';
import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
import _classPrivateFieldLooseBase from '@babel/runtime/helpers/esm/classPrivateFieldLooseBase';
import _classPrivateFieldLooseKey from '@babel/runtime/helpers/esm/classPrivateFieldLooseKey';
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
import CodeMirror from 'codemirror';
import debounce from 'lodash/debounce';
import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, createApp, toRaw } from 'vue';
import ASelect from 'ant-design-vue/es/select';
import 'ant-design-vue/es/select/style';
import 'codemirror/mode/shell/shell';
import 'codemirror/mode/clike/clike';
import 'codemirror/mode/css/css';
import 'codemirror/mode/dart/dart';
import 'codemirror/mode/diff/diff';
import 'codemirror/mode/dockerfile/dockerfile';
import 'codemirror/mode/erlang/erlang';
import 'codemirror/mode/go/go';
import 'codemirror/mode/groovy/groovy';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/http/http';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/jsx/jsx';
import 'codemirror/mode/cmake/cmake';
import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/octave/octave';
import 'codemirror/mode/nginx/nginx';
import 'codemirror/mode/pascal/pascal';
import 'codemirror/mode/perl/perl';
import 'codemirror/mode/php/php';
import 'codemirror/mode/powershell/powershell';
import 'codemirror/mode/protobuf/protobuf';
import 'codemirror/mode/python/python';
import 'codemirror/mode/r/r';
import 'codemirror/mode/ruby/ruby';
import 'codemirror/mode/rust/rust';
import 'codemirror/mode/sql/sql';
import 'codemirror/mode/swift/swift';
import 'codemirror/mode/vb/vb';
import 'codemirror/mode/velocity/velocity';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/yaml/yaml';
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/scroll/simplescrollbars.css';
var qa = ['c', 'cpp', 'csharp', 'erlang', 'go', 'groovy', 'java', 'kotlin', 'makefile', 'objectivec', 'perl', 'python', 'rust', 'swift', 'vbnet'];
var defaultStyles = {
header: 'color: blue;font-weight: bold;',
quote: 'color: #090;',
negative: 'color: #d44;',
positive: 'color: #292;',
strong: 'font-weight: bold;',
em: 'font-style: italic;',
link: 'text-decoration: underline;color: #00c;',
strikethrough: 'text-decoration: line-through;',
keyword: 'color: #d73a49;',
atom: 'color: #905;',
number: 'color: #005cc5;',
def: 'color: #005cc5;',
variable: '',
'variable-2': 'color: #005cc5;',
'variable-3': 'color: #22863a;',
type: 'color: #22863a;',
comment: 'color: #6a737d;',
string: 'color: #690',
'string-2': 'color: #690;',
meta: 'color: #1f7f9a;',
qualifier: 'color: #555;',
builtin: 'color: #6f42c1;',
bracket: 'color: #997;',
tag: 'color: #22863a;',
attribute: 'color: #6f42c1;',
hr: 'color: #999;',
error: 'color: #f00;',
invalidchar: 'color: #f00;',
operator: 'color: #d73a49;',
property: 'color: #005cc5;'
};
var CodeBlockEditor = /*#__PURE__*/function () {
function CodeBlockEditor(editor, options) {
_classCallCheck(this, CodeBlockEditor);
this.editor = void 0;
this.options = void 0;
this.styleMap = void 0;
this.codeMirror = void 0;
this.mode = 'plain';
this.container = void 0;
this.editor = editor;
this.options = options;
this.styleMap = _objectSpread(_objectSpread({}, defaultStyles), options.styleMap);
this.container = options.container || $(this.renderTemplate());
}
_createClass(CodeBlockEditor, [{
key: "renderTemplate",
value: function renderTemplate() {
return '<div class="data-codeblock-container"><div class="data-codeblock-content"></div></div>';
}
}, {
key: "getConfig",
value: function getConfig(value, mode) {
var mirror = this.codeMirror;
var editor = this.editor;
var tabSize = mirror ? mirror.getOption('indentUnit') : qa.indexOf(mode || '') > -1 ? 4 : 2;
var reg = value ? value.match(/^ {2,4}(?=[^\s])/gm) : null;
if (reg) {
tabSize = reg.reduce(function (val1, val2) {
return Math.min(val1, val2.length);
}, 1 / 0);
}
return {
tabSize: tabSize,
indentUnit: tabSize,
scrollbarStyle: 'simple',
readOnly: !isEngine(editor) || editor.readonly,
viewportMargin: Infinity
};
}
}, {
key: "getSyntax",
value: function getSyntax(mode) {
return this.options.synatxMap[mode] || mode;
}
}, {
key: "create",
value: function create(mode, value, options) {
var _this = this;
this.mode = mode;
var syntaxMode = this.getSyntax(mode);
var mirror = CodeMirror(this.container.find('.data-codeblock-content').get(), _objectSpread(_objectSpread({
value: value,
mode: syntaxMode,
lineNumbers: true,
lineWrapping: false,
autofocus: false,
dragDrop: false
}, this.getConfig(value, syntaxMode)), options));
mirror.on('focus', function () {
var onFocus = _this.options.onFocus;
if (onFocus) onFocus();
});
mirror.on('blur', function () {
var onBlur = _this.options.onBlur;
if (onBlur) onBlur();
});
if (isMobile) {
mirror.on('touchstart', function (_, event) {
var onMouseDown = _this.options.onMouseDown;
if (onMouseDown) onMouseDown(event);
});
} else {
mirror.on('mousedown', function (_, event) {
var onMouseDown = _this.options.onMouseDown;
if (event.button === 2) event.stopPropagation();
if (onMouseDown) onMouseDown(event);
});
}
mirror.on('change', debounce(function () {
if (!isEngine(_this.editor)) return;
_this.save();
}, 50));
mirror.setOption('extraKeys', {
Enter: function Enter(mirror) {
var config = _this.getConfig(mirror.getValue());
Object.keys(config).forEach(function (key) {
return mirror.setOption(key, config[key]);
});
mirror.execCommand('newlineAndIndent');
}
});
mirror.on('keydown', function (editor, event) {
// 撤销和重做使用codemirror自带的操作
if (isHotkey('mod+z', event) || isHotkey('mod+y', event) || isHotkey('mod+shift+z', event)) {
event.stopPropagation();
}
var lineCount = editor.lineCount();
var _editor$getCursor = editor.getCursor(),
line = _editor$getCursor.line,
ch = _editor$getCursor.ch;
var _this$options = _this.options,
onUpFocus = _this$options.onUpFocus,
onDownFocus = _this$options.onDownFocus,
onLeftFocus = _this$options.onLeftFocus,
onRightFocus = _this$options.onRightFocus;
var content = editor.getLine(line); // 在最后一行
if (line === lineCount - 1 && ch === content.length) {
// 按下下键
if (isHotkey('down', event) || isHotkey('ctrl+n', event)) {
if (onDownFocus) onDownFocus(event);
return;
} // 按下右键
else if (isHotkey('right', event) || isHotkey('shift+right', event) || isHotkey('ctrl+e', event) || isHotkey('ctrl+f', event)) {
if (onRightFocus) onRightFocus(event);
return;
}
} // 在第一行按下上键
if (line === 0 && ch === 0) {
// 按下上键
if (isHotkey('up', event) || isHotkey('ctrl+p', event)) {
if (onUpFocus) onUpFocus(event);
} // 按下左键
else if (isHotkey('left', event) || isHotkey('shift+left', event) || isHotkey('ctrl+b', event) || isHotkey('ctrl+a', event)) {
if (onLeftFocus) onLeftFocus(event);
}
}
});
this.container.on('mousedown', function (event) {
if (!(mirror === null || mirror === void 0 ? void 0 : mirror.hasFocus())) {
setTimeout(function () {
mirror === null || mirror === void 0 ? void 0 : mirror.focus();
}, 0);
}
});
this.codeMirror = mirror;
return this.codeMirror;
}
}, {
key: "setAutoWrap",
value: function setAutoWrap(value) {
var _this$codeMirror;
(_this$codeMirror = this.codeMirror) === null || _this$codeMirror === void 0 ? void 0 : _this$codeMirror.setOption('lineWrapping', value);
}
}, {
key: "update",
value: function update(mode, code) {
this.mode = mode;
var mirror = this.codeMirror;
var editor = this.editor;
if (code !== undefined) {
mirror === null || mirror === void 0 ? void 0 : mirror.setValue(code);
}
mirror === null || mirror === void 0 ? void 0 : mirror.setOption('mode', this.getSyntax(mode));
mirror === null || mirror === void 0 ? void 0 : mirror.setOption('readOnly', !isEngine(editor) || editor.readonly ? true : false);
this.save();
}
}, {
key: "render",
value: function render(mode, value, options) {
var root = this.container.find('.data-codeblock-content');
mode = this.getSyntax(mode);
var stage = $('<div style="font-family: monospace;font-size: 13px; line-height: 21px; color: #595959; direction: ltr; height: auto; overflow: hidden;background: transparent;"><pre style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" /></div>');
root.append(stage);
var pre = stage.find('pre')[0];
this.runMode(value || '', mode, pre, _objectSpread(_objectSpread({}, this.getConfig(value, mode)), options));
}
}, {
key: "save",
value: function save() {
var mirror = this.codeMirror;
var editor = this.editor;
if (!isEngine(editor) || !mirror) return; // 中文输入过程需要判断
if (editor.change.isComposing()) {
return;
}
var value = mirror.getValue();
var onSave = this.options.onSave;
if (onSave) onSave(this.mode, value);
}
}, {
key: "focus",
value: function focus() {
var mirror = this.codeMirror;
if (!mirror) return;
mirror.focus();
}
}, {
key: "select",
value: function select() {
var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
var mirror = this.codeMirror;
if (!mirror) return;
mirror.focus();
if (!start) {
var line = mirror.lineCount() - 1;
var content = mirror.getLine(line);
mirror.setSelection({
line: line,
ch: content.length
});
} else {
mirror.setSelection({
line: 0,
ch: 0
});
}
}
}, {
key: "toHtml",
value: function toHtml(col, text) {
var _this2 = this;
var style = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
var tabSize = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
tabSize = tabSize || CodeMirror.defaults.tabSize;
var html = '';
var content = ''; // replace tabs
for (var pos = 0;;) {
var idx = text.indexOf('\t', pos);
if (idx === -1) {
content += text.slice(pos);
col += text.length - pos;
break;
} else {
col += idx - pos;
content += text.slice(pos, idx);
var size = tabSize - col % tabSize;
col += size;
for (var i = 0; i < size; ++i) {
content += ' ';
}
pos = idx + 1;
}
}
if (style) {
var styleStr = '';
style.split(' ').forEach(function (cls) {
var _this2$styleMap$cls;
styleStr += (_this2$styleMap$cls = _this2.styleMap[cls]) !== null && _this2$styleMap$cls !== void 0 ? _this2$styleMap$cls : '';
});
var spanElement = "<span ".concat(styleStr ? "style=\"".concat(styleStr, "\"") : '', ">").concat(escape(content), "</span>");
html += spanElement;
} else {
html += content;
}
return html;
}
/**
* 代码来自 runmode addon
* 支持行号需要考虑复制粘贴问题
*
* runmode 本身不支持行号，见 https://github.com/codemirror/CodeMirror/issues/3364
* 可参考的解法 https://stackoverflow.com/questions/14237361/use-codemirror-for-standalone-syntax-highlighting-with-line-numbers
*
* ref:
* - https://codemirror.net/doc/manual.html#addons
* - https://codemirror.net/addon/runmode/runmode.js
*/
}, {
key: "runMode",
value: function runMode(string, modespec, callback, options) {
var mode = CodeMirror.getMode(CodeMirror.defaults, modespec);
var tabSize = options && options.tabSize || CodeMirror.defaults.tabSize;
var node = callback;
var col = 0;
node.innerHTML = '';
var html = '';
var lines = CodeMirror.splitLines(string);
var state = options && options.state || CodeMirror.startState(mode);
for (var i = 0, e = lines.length; i < e; ++i) {
if (i) {
html += '<br />';
col = 0;
}
var stream = new CodeMirror.StringStream(lines[i]);
if (!stream.string && mode.blankLine) mode.blankLine(state);
while (!stream.eol()) {
var style = mode.token ? mode.token(stream, state) : '';
html += this.toHtml(col, stream.current(), style || '', tabSize);
stream.start = stream.pos;
}
}
node.innerHTML = html;
}
}, {
key: "destroy",
value: function destroy() {
this.container.remove();
}
}]);
return CodeBlockEditor;
}();
const ASelectOption = ASelect.Option;
var script = defineComponent({
name: "am-codeblock-select",
components: {
ASelect,
ASelectOption
},
props: {
modeDatas: Array,
defaultValue: String,
getContainer: Function,
onSelect: Function
},
methods: {
filter(input, option) {
input = input.toLowerCase();
const key = option.key || '';
let name = option.name || '';
name = name.toLowerCase();
return key.includes(input) || name.includes(input);
}
}
});
function render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_a_select_option = resolveComponent("a-select-option");
const _component_a_select = resolveComponent("a-select");
return (openBlock(), createBlock(_component_a_select, {
"show-search": true,
size: "small",
bordered: false,
style: {"min-width":"128px"},
"default-value": _ctx.defaultValue,
"get-popup-container": _ctx.getContainer,
onSelect: _ctx.onSelect,
"filter-option": _ctx.filter
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modeDatas, (item) => {
return (openBlock(), createBlock(_component_a_select_option, {
name: item.name,
value: item.value,
key: item.value
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(item.name), 1 /* TEXT */)
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["name", "value"]))
}), 128 /* KEYED_FRAGMENT */))
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["default-value", "get-popup-container", "onSelect", "filter-option"]))
}
script.render = render;
script.__file = "src/component/select/component.vue";
var renderSelect = (function (container, modeDatas, defaultValue, onSelect) {
var vm = createApp(script, {
modeDatas: modeDatas,
defaultValue: defaultValue,
getContainer: container ? function () {
return container;
} : undefined,
onSelect: onSelect
});
vm.mount(container);
return vm;
});
var datas = [{
value: 'plain',
syntax: 'simplemode',
name: 'Plain Text'
}, {
value: 'bash',
syntax: 'shell',
name: 'Bash'
}, {
value: 'basic',
syntax: 'vbscript',
name: 'Basic'
}, {
value: 'c',
syntax: 'text/x-csrc',
name: 'C'
}, {
value: 'cpp',
syntax: 'text/x-c++src',
alias: ['c++'],
name: 'C++'
}, {
value: 'csharp',
syntax: 'text/x-csharp',
alias: ['c#'],
name: 'C#'
}, {
value: 'css',
syntax: 'css',
name: 'CSS'
}, {
value: 'dart',
syntax: 'dart',
name: 'Dart'
}, {
value: 'diff',
syntax: 'diff',
name: 'Diff'
}, {
value: 'dockerfile',
syntax: 'dockerfile',
name: 'Dockerfile'
}, {
value: 'erlang',
syntax: 'erlang',
name: 'Erlang'
}, {
value: 'git',
syntax: 'shell',
name: 'Git'
}, {
value: 'go',
syntax: 'go',
alias: ['golang'],
name: 'Go'
}, {
value: 'graphql',
syntax: 'simplemode',
name: 'GraphQL'
}, {
value: 'groovy',
syntax: 'groovy',
name: 'Groovy'
}, {
value: 'html',
syntax: 'htmlmixed',
name: 'HTML',
alias: ['html5']
}, {
value: 'http',
syntax: 'http',
name: 'HTTP'
}, {
value: 'java',
syntax: 'text/x-java',
name: 'Java'
}, {
value: 'javascript',
syntax: 'text/javascript',
name: 'JavaScript',
alias: ['js']
}, {
value: 'json',
syntax: 'application/json',
name: 'JSON'
}, {
value: 'jsx',
syntax: 'jsx',
name: 'JSX'
}, {
value: 'katex',
syntax: 'simplemode',
name: 'KaTeX'
}, {
value: 'kotlin',
syntax: 'text/x-kotlin',
name: 'Kotlin'
}, {
value: 'less',
syntax: 'css',
name: 'Less'
}, {
value: 'makefile',
syntax: 'cmake',
name: 'Makefile'
}, {
value: 'markdown',
syntax: 'markdown',
name: 'Markdown'
}, {
value: 'matlab',
syntax: 'octave',
name: 'MATLAB'
}, {
value: 'nginx',
syntax: 'nginx',
name: 'Nginx'
}, {
value: 'objectivec',
syntax: 'text/x-objectivec',
name: 'Objective-C'
}, {
value: 'pascal',
syntax: 'pascal',
name: 'Pascal'
}, {
value: 'perl',
syntax: 'perl',
name: 'Perl'
}, {
value: 'php',
syntax: 'php',
name: 'PHP'
}, {
value: 'powershell',
syntax: 'powershell',
name: 'PowerShell'
}, {
value: 'protobuf',
syntax: 'protobuf',
name: 'Protobuf'
}, {
value: 'python',
syntax: 'python',
name: 'Python',
alias: ['py']
}, {
value: 'r',
syntax: 'r',
name: 'R'
}, {
value: 'ruby',
syntax: 'ruby',
name: 'Ruby'
}, {
value: 'rust',
syntax: 'rust',
name: 'Rust'
}, {
value: 'scala',
syntax: 'text/x-scala',
name: 'Scala'
}, {
value: 'shell',
syntax: 'shell',
name: 'Shell'
}, {
value: 'sql',
syntax: 'text/x-sql',
name: 'SQL'
}, {
value: 'swift',
syntax: 'swift',
name: 'Swift'
}, {
value: 'typescript',
syntax: 'text/typescript',
name: 'TypeScript',
alias: ['ts']
}, {
value: 'vbnet',
syntax: 'vb',
name: 'VB.net'
}, {
value: 'velocity',
syntax: 'velocity',
name: 'Velocity'
}, {
value: 'xml',
syntax: 'xml',
name: 'XML'
}, {
value: 'yaml',
syntax: 'yaml',
name: 'YAML'
}];
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ".data-codeblock-container {\r\n position: relative;\r\n padding: 0;\r\n overflow: visible;\r\n border: 1px solid #e8e8e8;\r\n border-radius: 2px 2px;\r\n text-indent: 0;\r\n }\r\n \r\n .data-codeblock-container .am-embed-toolbar-item {\r\n float: right;\r\n line-height: 32px;\r\n }\r\n \r\n .data-codeblock-content {\r\n background: #f9f9f9;\r\n overflow: auto;\r\n }\r\n \r\n .am-engine .CodeMirror,\r\n .am-engine-view .CodeMirror {\r\n font-family: monospace;\r\n font-size: 13px;\r\n line-height: 21px;\r\n color: #595959;\r\n direction: ltr;\r\n height: auto;\r\n overflow: hidden;\r\n background: transparent;\r\n }\r\n \r\n .am-engine .CodeMirror-lines,\r\n .am-engine-view .CodeMirror-lines {\r\n padding: 8px 0;\r\n }\r\n \r\n .am-engine .CodeMirror-scrollbar-filler,\r\n .am-engine-view .CodeMirror-scrollbar-filler,\r\n .am-engine .CodeMirror-gutter-filler,\r\n .am-engine-view .CodeMirror-gutter-filler {\r\n background-color: white;\r\n \r\n /* The little square between H and V scrollbars */\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-gutters,\r\n .am-engine-view .CodeMirror-gutters {\r\n border: 0;\r\n white-space: nowrap;\r\n padding: 0 8px;\r\n background-color: unset;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-linenumber,\r\n .am-engine-view .CodeMirror-linenumber {\r\n padding: 0;\r\n min-width: 20px;\r\n text-align: right;\r\n color: #BFBFBF;\r\n white-space: nowrap;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-guttermarker,\r\n .am-engine-view .CodeMirror-guttermarker {\r\n color: black;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-guttermarker-subtle,\r\n .am-engine-view .CodeMirror-guttermarker-subtle {\r\n color: #999;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-cursor,\r\n .am-engine-view .CodeMirror-cursor {\r\n border-left: 1px solid black;\r\n border-right: none;\r\n width: 0;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror div.CodeMirror-secondarycursor,\r\n .am-engine-view .CodeMirror div.CodeMirror-secondarycursor {\r\n border-left: 1px solid silver;\r\n \r\n }\r\n \r\n .am-engine .cm-fat-cursor .CodeMirror-cursor,\r\n .am-engine-view .cm-fat-cursor .CodeMirror-cursor {\r\n width: auto;\r\n border: 0 !important;\r\n background: #7e7;\r\n \r\n }\r\n \r\n .am-engine .cm-fat-cursor div.CodeMirror-cursors,\r\n .am-engine-view .cm-fat-cursor div.CodeMirror-cursors {\r\n z-index: 1;\r\n \r\n }\r\n \r\n .am-engine .cm-fat-cursor-mark,\r\n .am-engine-view .cm-fat-cursor-mark {\r\n background-color: rgba(20, 255, 20, 0.5);\r\n -webkit-animation: blink 1.06s steps(1) infinite;\r\n animation: blink 1.06s steps(1) infinite;\r\n \r\n }\r\n \r\n .am-engine .cm-animate-fat-cursor,\r\n .am-engine-view .cm-animate-fat-cursor {\r\n width: auto;\r\n border: 0;\r\n -webkit-animation: blink 1.06s steps(1) infinite;\r\n animation: blink 1.06s steps(1) infinite;\r\n background-color: #7e7;\r\n \r\n }\r\n \r\n @-webkit-keyframes blink {\r\n 50% {\r\n background-color: transparent;\r\n \r\n }\r\n \r\n \r\n }\r\n \r\n @keyframes blink {\r\n 50% {\r\n background-color: transparent;\r\n \r\n }\r\n \r\n \r\n }\r\n \r\n .am-engine .cm-tab,\r\n .am-engine-view .cm-tab {\r\n display: inline-block;\r\n text-decoration: inherit;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-rulers,\r\n .am-engine-view .CodeMirror-rulers {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n top: -50px;\r\n bottom: -20px;\r\n overflow: hidden;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-ruler,\r\n .am-engine-view .CodeMirror-ruler {\r\n border-left: 1px solid #ccc;\r\n top: 0;\r\n bottom: 0;\r\n position: absolute;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-header,\r\n .am-engine-view .cm-s-default .cm-header {\r\n color: blue;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-quote,\r\n .am-engine-view .cm-s-default .cm-quote {\r\n color: #090;\r\n \r\n }\r\n \r\n .am-engine .cm-negative,\r\n .am-engine-view .cm-negative {\r\n color: #d44;\r\n \r\n }\r\n \r\n .am-engine .cm-positive,\r\n .am-engine-view .cm-positive {\r\n color: #292;\r\n \r\n }\r\n \r\n .am-engine .cm-header,\r\n .am-engine-view .cm-header,\r\n .am-engine .cm-strong,\r\n .am-engine-view .cm-strong {\r\n font-weight: bold;\r\n \r\n }\r\n \r\n .am-engine .cm-em,\r\n .am-engine-view .cm-em {\r\n font-style: italic;\r\n \r\n }\r\n \r\n .am-engine .cm-link,\r\n .am-engine-view .cm-link {\r\n text-decoration: underline;\r\n \r\n }\r\n \r\n .am-engine .cm-strikethrough,\r\n .am-engine-view .cm-strikethrough {\r\n text-decoration: line-through;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-keyword,\r\n .am-engine-view .cm-s-default .cm-keyword {\r\n color: #d73a49;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-atom,\r\n .am-engine-view .cm-s-default .cm-atom {\r\n color: #905;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-number,\r\n .am-engine-view .cm-s-default .cm-number {\r\n color: #005cc5;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-def,\r\n .am-engine-view .cm-s-default .cm-def {\r\n color: #005cc5;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-variable-2,\r\n .am-engine-view .cm-s-default .cm-variable-2 {\r\n color: #005cc5;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-variable-3,\r\n .am-engine-view .cm-s-default .cm-variable-3,\r\n .am-engine .cm-s-default .cm-type,\r\n .am-engine-view .cm-s-default .cm-type {\r\n color: #22863a;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-comment,\r\n .am-engine-view .cm-s-default .cm-comment {\r\n color: #6a737d;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-string,\r\n .am-engine-view .cm-s-default .cm-string {\r\n color: #690;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-string-2,\r\n .am-engine-view .cm-s-default .cm-string-2 {\r\n color: #690;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-meta,\r\n .am-engine-view .cm-s-default .cm-meta {\r\n color: #1f7f9a;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-qualifier,\r\n .am-engine-view .cm-s-default .cm-qualifier {\r\n color: #555;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-builtin,\r\n .am-engine-view .cm-s-default .cm-builtin {\r\n color: #6f42c1;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-bracket,\r\n .am-engine-view .cm-s-default .cm-bracket {\r\n color: #997;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-tag,\r\n .am-engine-view .cm-s-default .cm-tag {\r\n color: #22863a;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-attribute,\r\n .am-engine-view .cm-s-default .cm-attribute {\r\n color: #6f42c1;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-hr,\r\n .am-engine-view .cm-s-default .cm-hr {\r\n color: #999;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-link,\r\n .am-engine-view .cm-s-default .cm-link {\r\n color: #00c;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-error,\r\n .am-engine-view .cm-s-default .cm-error {\r\n color: #f00;\r\n \r\n }\r\n \r\n .am-engine .cm-invalidchar,\r\n .am-engine-view .cm-invalidchar {\r\n color: #f00;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-operator,\r\n .am-engine-view .cm-s-default .cm-operator {\r\n color: #d73a49;\r\n \r\n }\r\n \r\n .am-engine .cm-s-default .cm-property,\r\n .am-engine-view .cm-s-default .cm-property {\r\n color: #005cc5;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-composing,\r\n .am-engine-view .CodeMirror-composing {\r\n border-bottom: 2px solid;\r\n \r\n }\r\n \r\n .am-engine div.CodeMirror span.CodeMirror-matchingbracket,\r\n .am-engine-view div.CodeMirror span.CodeMirror-matchingbracket {\r\n color: #0b0;\r\n \r\n }\r\n \r\n .am-engine div.CodeMirror span.CodeMirror-nonmatchingbracket,\r\n .am-engine-view div.CodeMirror span.CodeMirror-nonmatchingbracket {\r\n color: #a22;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-matchingtag,\r\n .am-engine-view .CodeMirror-matchingtag {\r\n background: rgba(255, 150, 0, 0.3);\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-activeline-background,\r\n .am-engine-view .CodeMirror-activeline-background {\r\n background: transparent;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-scroll,\r\n .am-engine-view .CodeMirror-scroll {\r\n overflow: scroll !important;\r\n \r\n /* Things will break if this is overridden */\r\n \r\n /* 30px is the magic margin used to hide the element's real scrollbars */\r\n \r\n /* See overflow: hidden in .CodeMirror */\r\n margin-bottom: -50px;\r\n margin-right: -50px;\r\n padding-bottom: 50px;\r\n outline: none;\r\n \r\n /* Prevent dragging from highlighting the element */\r\n position: relative;\r\n z-index: 0;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-sizer,\r\n .am-engine-view .CodeMirror-sizer {\r\n position: relative;\r\n border-right: 50px solid transparent;\r\n min-height: auto !important;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-vscrollbar,\r\n .am-engine-view .CodeMirror-vscrollbar,\r\n .am-engine .CodeMirror-hscrollbar,\r\n .am-engine-view .CodeMirror-hscrollbar,\r\n .am-engine .CodeMirror-scrollbar-filler,\r\n .am-engine-view .CodeMirror-scrollbar-filler,\r\n .am-engine .CodeMirror-gutter-filler,\r\n .am-engine-view .CodeMirror-gutter-filler {\r\n position: absolute;\r\n z-index: 6;\r\n display: none;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-vscrollbar,\r\n .am-engine-view .CodeMirror-vscrollbar {\r\n right: 0;\r\n top: 0;\r\n overflow-x: hidden;\r\n overflow-y: scroll;\r\n display: none;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-hscrollbar,\r\n .am-engine-view .CodeMirror-hscrollbar {\r\n bottom: 0;\r\n left: 0;\r\n overflow-y: hidden;\r\n overflow-x: scroll;\r\n display: none;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-scrollbar-filler,\r\n .am-engine-view .CodeMirror-scrollbar-filler {\r\n right: 0;\r\n bottom: 0;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-gutter-filler,\r\n .am-engine-view .CodeMirror-gutter-filler {\r\n left: 0;\r\n bottom: 0;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-gutters,\r\n .am-engine-view .CodeMirror-gutters {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n min-height: 100%;\r\n background: #f9f9f9;\r\n z-index: 3;\r\n }\r\n \r\n .am-engine .CodeMirror-gutter,\r\n .am-engine-view .CodeMirror-gutter {\r\n white-space: normal;\r\n height: 100%;\r\n display: inline-block;\r\n vertical-align: top;\r\n margin-bottom: -30px;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-gutter-wrapper,\r\n .am-engine-view .CodeMirror-gutter-wrapper {\r\n position: absolute;\r\n z-index: 4;\r\n background: none !important;\r\n border: none !important;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-gutter-background,\r\n .am-engine-view .CodeMirror-gutter-background {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n z-index: 4;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-gutter-elt,\r\n .am-engine-view .CodeMirror-gutter-elt {\r\n position: absolute;\r\n cursor: default;\r\n z-index: 4;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-gutter-wrapper ::-moz-selection,\r\n .am-engine-view .CodeMirror-gutter-wrapper ::-moz-selection {\r\n background-color: transparent;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-gutter-wrapper ::selection,\r\n .am-engine-view .CodeMirror-gutter-wrapper ::selection {\r\n background-color: transparent;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-gutter-wrapper ::-moz-selection,\r\n .am-engine-view .CodeMirror-gutter-wrapper ::-moz-selection {\r\n background-color: transparent;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-lines,\r\n .am-engine-view .CodeMirror-lines {\r\n cursor: text;\r\n min-height: 40px;\r\n \r\n /* prevents collapsing before first draw */\r\n \r\n }\r\n \r\n .am-engine .CodeMirror pre,\r\n .am-engine-view .CodeMirror pre {\r\n \r\n /* Reset some styles that the rest of the page might have set */\r\n border-radius: 0;\r\n border-width: 0;\r\n background: transparent;\r\n font-family: inherit;\r\n font-size: inherit;\r\n margin: 0;\r\n white-space: pre;\r\n word-wrap: normal;\r\n line-height: inherit;\r\n color: inherit;\r\n z-index: 2;\r\n position: relative;\r\n overflow: visible;\r\n -webkit-tap-highlight-color: transparent;\r\n font-variant-ligatures: contextual;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-wrap pre,\r\n .am-engine-view .CodeMirror-wrap pre {\r\n word-wrap: break-word;\r\n white-space: pre-wrap;\r\n word-break: normal;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-linebackground,\r\n .am-engine-view .CodeMirror-linebackground {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n top: 0;\r\n bottom: 0;\r\n z-index: 0;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-linewidget,\r\n .am-engine-view .CodeMirror-linewidget {\r\n position: relative;\r\n z-index: 2;\r\n padding: 0.1px;\r\n \r\n /* Force widget margins to stay inside of the container */\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-rtl pre,\r\n .am-engine-view .CodeMirror-rtl pre {\r\n direction: rtl;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-code,\r\n .am-engine-view .CodeMirror-code {\r\n outline: none;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-scroll,\r\n .am-engine-view .CodeMirror-scroll,\r\n .am-engine .CodeMirror-sizer,\r\n .am-engine-view .CodeMirror-sizer,\r\n .am-engine .CodeMirror-gutter,\r\n .am-engine-view .CodeMirror-gutter,\r\n .am-engine .CodeMirror-gutters,\r\n .am-engine-view .CodeMirror-gutters,\r\n .am-engine .CodeMirror-linenumber,\r\n .am-engine-view .CodeMirror-linenumber {\r\n box-sizing: content-box;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-simplescroll-horizontal, .am-engine-view .CodeMirror-simplescroll-horizontal {\r\n bottom: 4px;\r\n cursor: pointer;\r\n }\r\n \r\n .am-engine .CodeMirror-measure,\r\n .am-engine-view .CodeMirror-measure {\r\n position: absolute;\r\n width: 100%;\r\n height: 0;\r\n overflow: hidden;\r\n visibility: hidden;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-cursor,\r\n .am-engine-view .CodeMirror-cursor {\r\n position: absolute;\r\n pointer-events: none;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-measure pre,\r\n .am-engine-view .CodeMirror-measure pre {\r\n position: static;\r\n \r\n }\r\n \r\n .am-engine div.CodeMirror-cursors,\r\n .am-engine-view div.CodeMirror-cursors {\r\n visibility: hidden;\r\n position: relative;\r\n z-index: 3;\r\n \r\n }\r\n \r\n .am-engine div.CodeMirror-dragcursors,\r\n .am-engine-view div.CodeMirror-dragcursors {\r\n visibility: visible;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-focused div.CodeMirror-cursors,\r\n .am-engine-view .CodeMirror-focused div.CodeMirror-cursors {\r\n visibility: visible;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-selected,\r\n .am-engine-view .CodeMirror-selected {\r\n background: #e8e8e8;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-focused .CodeMirror-selected,\r\n .am-engine-view .CodeMirror-focused .CodeMirror-selected {\r\n background: #b3d7fd;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-crosshair,\r\n .am-engine-view .CodeMirror-crosshair {\r\n cursor: crosshair;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-line::-moz-selection,\r\n .am-engine-view .CodeMirror-line::-moz-selection,\r\n .am-engine .CodeMirror-line>span::-moz-selection,\r\n .am-engine-view .CodeMirror-line>span::-moz-selection,\r\n .am-engine .CodeMirror-line>span>span::-moz-selection,\r\n .am-engine-view .CodeMirror-line>span>span::-moz-selection {\r\n background: #b3d7fd;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-line::selection,\r\n .am-engine-view .CodeMirror-line::selection,\r\n .am-engine .CodeMirror-line>span::selection,\r\n .am-engine-view .CodeMirror-line>span::selection,\r\n .am-engine .CodeMirror-line>span>span::selection,\r\n .am-engine-view .CodeMirror-line>span>span::selection {\r\n background: #b3d7fd;\r\n \r\n }\r\n \r\n .am-engine .CodeMirror-line::-moz-selection,\r\n .am-engine-view .CodeMirror-line::-moz-selection,\r\n .am-engine .CodeMirror-line>span::-moz-selection,\r\n .am-engine-view .CodeMirror-line>span::-moz-selection,\r\n .am-engine .CodeMirror-line>span>span::-moz-selection,\r\n .am-engine-view .CodeMirror-line>span>span::-moz-selection {\r\n background: #b3d7fd;\r\n \r\n }\r\n \r\n .am-engine .cm-searching,\r\n .am-engine-view .cm-searching {\r\n background-color: #ffa;\r\n background-color: rgba(255, 255, 0, 0.4);\r\n \r\n }\r\n \r\n .am-engine .cm-force-border,\r\n .am-engine-view .cm-force-border {\r\n padding-right: 0.1px;\r\n \r\n }\r\n \r\n @media print {\r\n \r\n /* .am-engine,\r\n .am-engine-view { */\r\n \r\n /* Hide the cursor when printing */\r\n \r\n /* } */\r\n \r\n .am-engine .CodeMirror div.CodeMirror-cursors,\r\n .am-engine-view .CodeMirror div.CodeMirror-cursors {\r\n visibility: hidden;\r\n \r\n }\r\n \r\n \r\n }\r\n \r\n .am-engine .cm-tab-wrap-hack:after,\r\n .am-engine-view .cm-tab-wrap-hack:after {\r\n content: '';\r\n \r\n }\r\n \r\n .am-engine span.CodeMirror-selectedtext,\r\n .am-engine-view span.CodeMirror-selectedtext {\r\n background: none;\r\n \r\n }\r\n \r\n .am-engine-view .data-codeblock-container {\r\n margin: 5px 0;\r\n \r\n }\r\n \r\n .am-content-editor .am-engine .data-codeblock-container .CodeMirror-lines {\r\n min-height: 40px;\r\n }";
styleInject(css_248z);
var _modeNameMap = /*#__PURE__*/_classPrivateFieldLooseKey("modeNameMap");
var _modeSynatxMap = /*#__PURE__*/_classPrivateFieldLooseKey("modeSynatxMap");
var _viewAutoWrap = /*#__PURE__*/_classPrivateFieldLooseKey("viewAutoWrap");
var CodeBlcok = /*#__PURE__*/function (_Card) {
_inherits(CodeBlcok, _Card);
var _super = _createSuper(CodeBlcok);
function CodeBlcok() {
var _this;
_classCallCheck(this, CodeBlcok);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_this.mirror = void 0;
_this.resize = function () {
var _this$codeEditor;
return (_this$codeEditor = _this.codeEditor) === null || _this$codeEditor === void 0 ? void 0 : _this$codeEditor.container.find('.data-codeblock-content');
};
_this.codeEditor = void 0;
Object.defineProperty(_assertThisInitialized(_this), _modeNameMap, {
writable: true,
value: {}
});
Object.defineProperty(_assertThisInitialized(_this), _modeSynatxMap, {
writable: true,
value: {}
});
Object.defineProperty(_assertThisInitialized(_this), _viewAutoWrap, {
writable: true,
value: undefined
});
return _this;
}
_createClass(CodeBlcok, [{
key: "init",
value: function init() {
var _this2 = this;
if (isServer) return;
_get(_getPrototypeOf(CodeBlcok.prototype), "init", this).call(this);
if (this.codeEditor) return;
datas.forEach(function (item) {
_classPrivateFieldLooseBase(_this2, _modeNameMap)[_modeNameMap][item.value] = item.name;
_classPrivateFieldLooseBase(_this2, _modeSynatxMap)[_modeSynatxMap][item.value] = item.syntax;
if (item.alias) {
item.alias.forEach(function (name) {
_classPrivateFieldLooseBase(_this2, _modeNameMap)[_modeNameMap][name] = item.name;
_classPrivateFieldLooseBase(_this2, _modeSynatxMap)[_modeSynatxMap][name] = item.syntax;
});
}
});
var editor = this.editor;
this.codeEditor = new CodeBlockEditor(editor, {
synatxMap: _classPrivateFieldLooseBase(this, _modeSynatxMap)[_modeSynatxMap],
onSave: function onSave(mode, value) {
var oldValue = _this2.getValue();
if (mode === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.mode) && value === oldValue.code) return;
_this2.setValue({
mode: mode,
code: value
});
},
onMouseDown: function onMouseDown(event) {
if (!_this2.activated) setTimeout(function () {
editor.card.activate(_this2.root, CardActiveTrigger.MOUSE_DOWN);
}, 10);
},
onUpFocus: function onUpFocus(event) {
var _this2$toolbarModel;
if (!isEngine(editor)) return;
event.preventDefault();
var change = editor.change,
card = editor.card;
var range = change.range.get().cloneRange();
var prev = _this2.root.prev();
var cardComponent = prev ? card.find(prev) : undefined;
if (cardComponent === null || cardComponent === void 0 ? void 0 : cardComponent.onSelectUp) {
cardComponent.onSelectUp(event);
} else if (prev) {
card.focusPrevBlock(_this2, range, false);
change.range.select(range);
} else {
_this2.focus(range, true);
change.range.select(range);
return;
}
_this2.activate(false);
(_this2$toolbarModel = _this2.toolbarModel) === null || _this2$toolbarModel === void 0 ? void 0 : _this2$toolbarModel.hide();
},
onDownFocus: function onDownFocus(event) {
var _this2$toolbarModel2;
if (!isEngine(editor)) return;
event.preventDefault();
var change = editor.change,
card = editor.card;
var range = change.range.get().cloneRange();
var next = _this2.root.next();
var cardComponent = next ? card.find(next) : undefined;
if (cardComponent === null || cardComponent === void 0 ? void 0 : cardComponent.onSelectDown) {
cardComponent.onSelectDown(event);
} else if (next) {
card.focusNextBlock(_this2, range, false);
change.range.select(range);
} else {
_this2.focus(range, false);
change.range.select(range);
return;
}
_this2.activate(false);
(_this2$toolbarModel2 = _this2.toolbarModel) === null || _this2$toolbarModel2 === void 0 ? void 0 : _this2$toolbarModel2.hide();
},
onLeftFocus: function onLeftFocus(event) {
var _this2$toolbarModel3;
if (!isEngine(editor)) return;
event.preventDefault();
var change = editor.change;
var range = change.range.get().cloneRange();
_this2.focus(range, true);
change.range.select(range);
_this2.activate(false);
(_this2$toolbarModel3 = _this2.toolbarModel) === null || _this2$toolbarModel3 === void 0 ? void 0 : _this2$toolbarModel3.hide();
},
onRightFocus: function onRightFocus(event) {
var _this2$toolbarModel4;
if (!isEngine(editor)) return;
event.preventDefault();
var change = editor.change;
var range = change.range.get().cloneRange();
_this2.focus(range, false);
change.range.select(range);
_this2.activate(false);
(_this2$toolbarModel4 = _this2.toolbarModel) === null || _this2$toolbarModel4 === void 0 ? void 0 : _this2$toolbarModel4.hide();
}
});
}
}, {
key: "toolbar",
value: function toolbar() {
var _this3 = this,
_editor$plugin$findPl;
var editor = this.editor;
var getItems = function getItems() {
if (_this3.loading) return [];
if (!isEngine(editor) || editor.readonly) {
return [{
key: 'copy',
type: 'copy'
}, {
key: 'autoWrap',
type: 'switch',
content: editor.language.get(CodeBlcok.cardName, 'autoWrap'),
getState: function getState() {
if (_classPrivateFieldLooseBase(_this3, _viewAutoWrap)[_viewAutoWrap] === undefined) {
var _this3$getValue;
_classPrivateFieldLooseBase(_this3, _viewAutoWrap)[_viewAutoWrap] = !!((_this3$getValue = _this3.getValue()) === null || _this3$getValue === void 0 ? void 0 : _this3$getValue.autoWrap);
}
return _classPrivateFieldLooseBase(_this3, _viewAutoWrap)[_viewAutoWrap];
},
onClick: function onClick() {
var _this3$codeEditor;
var autoWrap = !_classPrivateFieldLooseBase(_this3, _viewAutoWrap)[_viewAutoWrap];
_classPrivateFieldLooseBase(_this3, _viewAutoWrap)[_viewAutoWrap] = autoWrap;
(_this3$codeEditor = _this3.codeEditor) === null || _this3$codeEditor === void 0 ? void 0 : _this3$codeEditor.setAutoWrap(autoWrap);
}
}];
}
return [{
key: 'dnd',
type: 'dnd'
}, {
key: 'copy',
type: 'copy'
}, {
key: 'delete',
type: 'delete'
}, {
key: 'select',
type: 'node',
node: $('<div />'),
didMount: function didMount(node) {
// 等待编辑插件渲染成功后才能去到mode
setTimeout(function () {
renderSelect(node.get(), _this3.constructor.getModes(), _classPrivateFieldLooseBase(_this3, _modeNameMap)[_modeNameMap][_this3.codeEditor.mode] || _this3.codeEditor.mode || 'plain', function (mode) {
setTimeout(function () {
_this3.focusEditor(); // 解决vue自动给 this.codeEditor 包 Proxy 的问题
if (_this3.codeEditor) {
toRaw(_this3.codeEditor).update(mode);
}
}, 100);
});
}, 100);
}
}, {
key: 'autoWrap',
type: 'switch',
content: editor.language.get(CodeBlcok.cardName, 'autoWrap'),
getState: function getState() {
var _this3$getValue2;
return !!((_this3$getValue2 = _this3.getValue()) === null || _this3$getValue2 === void 0 ? void 0 : _this3$getValue2.autoWrap);
},
onClick: function onClick() {
var _this3$codeEditor2;
var value = _this3.getValue();
var autoWrap = !(value === null || value === void 0 ? void 0 : value.autoWrap);
_this3.setValue({
autoWrap: autoWrap
});
(_this3$codeEditor2 = _this3.codeEditor) === null || _this3$codeEditor2 === void 0 ? void 0 : _this3$codeEditor2.setAutoWrap(autoWrap);
}
}];
};
var options = (_editor$plugin$findPl = editor.plugin.findPlugin('codeblock')) === null || _editor$plugin$findPl === void 0 ? void 0 : _editor$plugin$findPl.options;
if (options === null || options === void 0 ? void 0 : options.cardToolbars) {
return options.cardToolbars(getItems(), this.editor);
}
return getItems();
}
}, {
key: "focusEditor",
value: function focusEditor() {
var _this$codeEditor2;
(_this$codeEditor2 = this.codeEditor) === null || _this$codeEditor2 === void 0 ? void 0 : _this$codeEditor2.focus();
this.editor.card.activate(this.root);
}
}, {
key: "onSelectLeft",
value: function onSelectLeft(event) {
var _this$toolbarModel;
if (!this.codeEditor) return;
event.preventDefault();
this.codeEditor.select(false);
this.activate(true);
(_this$toolbarModel = this.toolbarModel) === null || _this$toolbarModel === void 0 ? void 0 : _this$toolbarModel.show();
}
}, {
key: "onSelectRight",
value: function onSelectRight(event) {
var _this$toolbarModel2;
if (!this.codeEditor) return;
event.preventDefault();
this.codeEditor.select(true);
this.activate(true);
(_this$toolbarModel2 = this.toolbarModel) === null || _this$toolbarModel2 === void 0 ? void 0 : _this$toolbarModel2.show();
}
}, {
key: "onSelectDown",
value: function onSelectDown(event) {
var _this$toolbarModel3;
if (!this.codeEditor) return;
event.preventDefault();
this.codeEditor.select(true);
this.activate(true);
(_this$toolbarModel3 = this.toolbarModel) === null || _this$toolbarModel3 === void 0 ? void 0 : _this$toolbarModel3.show();
}
}, {
key: "onSelectUp",
value: function onSelectUp(event) {
var _this$toolbarModel4;
if (!this.codeEditor) return;
event.preventDefault();
this.codeEditor.select(false);
this.activate(true);
(_this$toolbarModel4 = this.toolbarModel) === null || _this$toolbarModel4 === void 0 ? void 0 : _this$toolbarModel4.show();
}
}, {
key: "render",
value: function render() {
if (!this.codeEditor) return;
if (!this.codeEditor.container.inEditor()) {
this.codeEditor.container = $(this.codeEditor.renderTempla