80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import { $, Plugin, NodeInterface, CARD_KEY, isEngine, SchemaInterface, PluginOptions, decodeCardValue, encodeCardValue } from '@aomao/engine';
|
|
import MathComponent from './component';
|
|
import { MathValue } from './component/type';
|
|
|
|
export interface Options extends PluginOptions {
|
|
hotkey?: string | Array<string>;
|
|
}
|
|
export default class extends Plugin<Options> {
|
|
static get pluginName() {
|
|
return 'math';
|
|
}
|
|
// 插件初始化
|
|
init() {
|
|
// 监听解析成html的事件
|
|
this.editor.on('paser:html', node => this.parseHtml(node));
|
|
// 监听粘贴时候设置schema规则的入口
|
|
this.editor.on('paste:schema', schema => this.pasteSchema(schema));
|
|
// 监听粘贴时候的节点循环
|
|
this.editor.on('paste:each', child => this.pasteHtml(child));
|
|
}
|
|
// 执行方法
|
|
execute() {
|
|
if (!isEngine(this.editor)) return;
|
|
const { card } = this.editor;
|
|
card.insert<MathValue>(MathComponent.cardName, { code: '' }, true);
|
|
}
|
|
// 快捷键
|
|
hotkey() {
|
|
return this.options.hotkey || 'mod+shift+0';
|
|
}
|
|
// 粘贴的时候添加需要的 schema
|
|
pasteSchema(schema: SchemaInterface) {
|
|
schema.add({
|
|
type: 'block',
|
|
name: 'div',
|
|
attributes: {
|
|
'data-type': {
|
|
required: true,
|
|
value: MathComponent.cardName,
|
|
},
|
|
'data-value': '*',
|
|
},
|
|
});
|
|
}
|
|
// 解析粘贴过来的html
|
|
pasteHtml(node: NodeInterface) {
|
|
if (!isEngine(this.editor)) return;
|
|
if (node.isElement()) {
|
|
const type = node.attributes('data-type');
|
|
if (type === MathComponent.cardName) {
|
|
const value = node.attributes('data-value');
|
|
const cardValue = decodeCardValue(value);
|
|
this.editor.card.replaceNode(node, MathComponent.cardName, cardValue);
|
|
node.remove();
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
// 解析成html
|
|
parseHtml(root: NodeInterface) {
|
|
root.find(`[${CARD_KEY}=${MathComponent.cardName}`).each(cardNode => {
|
|
const node = $(cardNode);
|
|
const card = this.editor.card.find(node) as MathComponent;
|
|
const value = card?.getValue();
|
|
if (value) {
|
|
node.empty();
|
|
const div = $(
|
|
`<div
|
|
data-type="${MathComponent.cardName}"
|
|
data-value="${encodeCardValue(value)}"
|
|
></div>`
|
|
);
|
|
node.replaceWith(div);
|
|
} else node.remove();
|
|
});
|
|
}
|
|
}
|
|
export { MathComponent };
|