@logicflow/extension
Version:
LogicFlow Extensions
92 lines (91 loc) • 2.73 kB
JavaScript
import MediumEditor from 'medium-editor';
import Picker from 'vanilla-picker';
import rangy from 'rangy';
import 'rangy/lib/rangy-classapplier';
export var defaultOptions = {
toolbar: {
allowMultiParagraphSelection: true,
buttons: [
'bold',
'colorpicker',
'italic',
'underline',
'strikethrough',
'quote',
'justifyLeft',
'justifyCenter',
'justifyRight',
'justifyFull',
'superscript',
'subscript',
'orderedlist',
'unorderedlist',
'pre',
'removeFormat',
'outdent',
'indent',
'h2',
'h3',
],
standardizeSelectionStart: false,
updateOnEmptySelection: false,
},
placeholder: {
text: '请输入内容',
hideOnClick: true,
},
disableEditing: true,
};
export var ColorPickerButton = MediumEditor.extensions.button.extend({
name: 'colorpicker',
tagNames: ['mark'],
contentDefault: '<b>Color</b>',
aria: 'Color Picker',
action: 'colorPicker',
init: function () {
var _this = this;
rangy.init();
MediumEditor.extensions.button.prototype.init.call(this);
this.colorPicker = new Picker({
parent: this.button,
color: '#000',
onDone: function (res) {
if (_this.coloredText && _this.coloredText.isAppliedToSelection()) {
_this.coloredText.undoToSelection();
}
_this.coloredText = rangy.createClassApplier('colored', {
elementTagName: 'span',
elementProperties: {
style: {
color: res.hex,
},
},
normalize: true,
});
_this.coloredText.toggleSelection();
_this.base.checkContentChanged();
_this.setInactive();
},
});
},
getButton: function () {
return this.button;
},
handleClick: function () {
this.setActive();
this.colorPicker.show();
},
isAlreadyApplied: function (node) {
return node.nodeName.toLowerCase() === 'mark';
},
isActive: function () {
return this.button.classList.contains('medium-editor-button-active');
},
setInactive: function () {
this.button.classList.remove('medium-editor-button-active');
},
setActive: function () {
this.button.classList.add('medium-editor-button-active');
},
});
export { MediumEditor };