mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-09-06 07:57:02 +03:00
Split SquireUI from HtmlEditor.js and improved SquireUI with styling
This commit is contained in:
djmaze
parent
acda0e8883
commit
72cbdfa7f2
4 changed files with 433 additions and 258 deletions
|
|
@ -1,11 +1,10 @@
|
||||||
import { EventKeyCode } from 'Common/Enums';
|
import { EventKeyCode } from 'Common/Enums';
|
||||||
|
import { SquireUI } from 'External/SquireUI';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @type {Object}
|
* @type {Object}
|
||||||
*/
|
*/
|
||||||
const doc = document,
|
const CKEditorDefaultConfig = {
|
||||||
|
|
||||||
CKEditorDefaultConfig = {
|
|
||||||
'title': false,
|
'title': false,
|
||||||
'stylesSet': false,
|
'stylesSet': false,
|
||||||
'customConfig': '',
|
'customConfig': '',
|
||||||
|
|
@ -43,35 +42,6 @@ CKEditorDefaultConfig = {
|
||||||
'fontSize_sizes': '10/10px;12/12px;13/13px;14/14px;16/16px;18/18px;20/20px;24/24px;28/28px;36/36px;48/48px'
|
'fontSize_sizes': '10/10px;12/12px;13/13px;14/14px;16/16px;18/18px;20/20px;24/24px;28/28px;36/36px;48/48px'
|
||||||
},
|
},
|
||||||
|
|
||||||
SquireDefaultConfig = {
|
|
||||||
/*
|
|
||||||
blockTag: 'DIV',
|
|
||||||
blockAttributes: null,
|
|
||||||
tagAttributes: {
|
|
||||||
blockquote: null,
|
|
||||||
ul: null,
|
|
||||||
ol: null,
|
|
||||||
li: null,
|
|
||||||
a: null
|
|
||||||
},
|
|
||||||
classNames: {
|
|
||||||
colour: 'colour',
|
|
||||||
fontFamily: 'font',
|
|
||||||
fontSize: 'size',
|
|
||||||
highlight: 'highlight'
|
|
||||||
},
|
|
||||||
leafNodeNames: leafNodeNames,
|
|
||||||
undo: {
|
|
||||||
documentSizeThreshold: -1, // -1 means no threshold
|
|
||||||
undoLimit: -1 // -1 means no limit
|
|
||||||
},
|
|
||||||
isInsertedHTMLSanitized: true,
|
|
||||||
isSetHTMLSanitized: true,
|
|
||||||
willCutCopy: null,
|
|
||||||
addLinks: true // allow_smart_html_links
|
|
||||||
*/
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @type {Object}
|
* @type {Object}
|
||||||
*/
|
*/
|
||||||
|
|
@ -108,232 +78,6 @@ htmlEditorLangsMap = {
|
||||||
'zh_tw': 'zh'
|
'zh_tw': 'zh'
|
||||||
};
|
};
|
||||||
|
|
||||||
class SquireUI
|
|
||||||
{
|
|
||||||
constructor(container) {
|
|
||||||
const actions = {
|
|
||||||
source: {
|
|
||||||
html: '〈〉',
|
|
||||||
cmd: () => this.doAction('bold','B')
|
|
||||||
},
|
|
||||||
/*
|
|
||||||
bidi: {
|
|
||||||
allowHtmlEditorBitiButtons
|
|
||||||
},
|
|
||||||
*/
|
|
||||||
bold: {
|
|
||||||
html: '𝐁',
|
|
||||||
cmd: () => this.doAction('bold','B')
|
|
||||||
},
|
|
||||||
italic: {
|
|
||||||
html: '𝐼',
|
|
||||||
cmd: () => this.doAction('italic','I')
|
|
||||||
},
|
|
||||||
underline: {
|
|
||||||
html: 'U',
|
|
||||||
cmd: () => this.doAction('underline','U'),
|
|
||||||
style: 'text-decoration:underline;'
|
|
||||||
},
|
|
||||||
strike: {
|
|
||||||
html: 'S',
|
|
||||||
cmd: () => this.doAction('strikethrough','S'),
|
|
||||||
style: 'text-decoration:line-through;'
|
|
||||||
},
|
|
||||||
sub: {
|
|
||||||
html: 'S<sub>x</sub>',
|
|
||||||
cmd: () => this.doAction('subscript','SUB')
|
|
||||||
},
|
|
||||||
sup: {
|
|
||||||
html: 'S<sup>x</sup>',
|
|
||||||
cmd: () => this.doAction('superscript','SUP')
|
|
||||||
},
|
|
||||||
ol: {
|
|
||||||
html: '#',
|
|
||||||
cmd: () => this.doList('OL')
|
|
||||||
},
|
|
||||||
ul: {
|
|
||||||
html: '⋮',
|
|
||||||
cmd: () => this.doList('UL')
|
|
||||||
},
|
|
||||||
quote: {
|
|
||||||
html: '"',
|
|
||||||
cmd: () => {
|
|
||||||
let parent = this.getParentNodeName('UL,OL');
|
|
||||||
(parent && 'BLOCKQUOTE' == parent) ? this.squire.decreaseQuoteLevel() : this.squire.increaseQuoteLevel();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
indentDecrease: {
|
|
||||||
html: '⇤',
|
|
||||||
cmd: () => this.squire.changeIndentationLevel('decrease')
|
|
||||||
},
|
|
||||||
indentIncrease: {
|
|
||||||
html: '⇥',
|
|
||||||
cmd: () => this.squire.changeIndentationLevel('increase')
|
|
||||||
},
|
|
||||||
link: {
|
|
||||||
html: '🔗',
|
|
||||||
cmd: () => {
|
|
||||||
if ('A' === this.getParentNodeName()) {
|
|
||||||
this.squire.removeLink();
|
|
||||||
} else {
|
|
||||||
let url = prompt("Link","https://");
|
|
||||||
url != null && url.length && this.squire.makeLink(url);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
image: {
|
|
||||||
html: '📷🖼️',
|
|
||||||
cmd: () => {
|
|
||||||
if ('IMG' === this.getParentNodeName()) {
|
|
||||||
// wysiwyg.removeLink();
|
|
||||||
} else {
|
|
||||||
let src = prompt("Image","https://");
|
|
||||||
src != null && src.length && this.squire.insertImage(src);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
undo: {
|
|
||||||
html: '↶',
|
|
||||||
cmd: () => this.squire.undo()
|
|
||||||
},
|
|
||||||
redo: {
|
|
||||||
html: '↷',
|
|
||||||
cmd: () => this.squire.redo()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
content = doc.createElement('div'),
|
|
||||||
toolbar = doc.createElement('div'),
|
|
||||||
squire = new Squire(content, SquireDefaultConfig);
|
|
||||||
|
|
||||||
content.id = 'squire-content';
|
|
||||||
content.style.minHeight = '200px';
|
|
||||||
|
|
||||||
this.squire = squire;
|
|
||||||
this.content = content;
|
|
||||||
|
|
||||||
toolbar.id = 'squire-toolbar';
|
|
||||||
for (let action in actions) {
|
|
||||||
if ('source' == action && !rl.settings.app('allowHtmlEditorSourceButton')) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
let cfg = actions[action],
|
|
||||||
btn = cfg.btn = doc.createElement('button');
|
|
||||||
btn.type = 'button';
|
|
||||||
btn.dataset.action = action;
|
|
||||||
btn.action_cmd = cfg.cmd;
|
|
||||||
btn.innerHTML = cfg.html;
|
|
||||||
btn.style.padding = 0;
|
|
||||||
cfg.style && btn.setAttribute('style', cfg.style);
|
|
||||||
toolbar.append(btn);
|
|
||||||
}
|
|
||||||
toolbar.addEventListener('click', e => {
|
|
||||||
e.target.action_cmd && e.target.action_cmd();
|
|
||||||
});
|
|
||||||
|
|
||||||
actions.undo.btn.disabled = actions.redo.btn.disabled = true;
|
|
||||||
squire.addEventListener('undoStateChange', state => {
|
|
||||||
actions.undo.btn.disabled = !state.canUndo;
|
|
||||||
actions.redo.btn.disabled = !state.canRedo;
|
|
||||||
});
|
|
||||||
|
|
||||||
container.append(toolbar, content);
|
|
||||||
|
|
||||||
/*
|
|
||||||
squire-raw.js:2161: this.fireEvent( 'dragover', {
|
|
||||||
squire-raw.js:2168: this.fireEvent( 'drop', {
|
|
||||||
squire-raw.js:2583: this.fireEvent( event.type, event );
|
|
||||||
squire-raw.js:2864: this.fireEvent( 'pathChange', { path: newPath } );
|
|
||||||
squire-raw.js:2867: this.fireEvent( range.collapsed ? 'cursor' : 'select', {
|
|
||||||
squire-raw.js:3004: this.fireEvent( 'input' );
|
|
||||||
squire-raw.js:3080: this.fireEvent( 'input' );
|
|
||||||
squire-raw.js:3101: this.fireEvent( 'input' );
|
|
||||||
squire-raw.js:4036: this.fireEvent( 'willPaste', event );
|
|
||||||
squire-raw.js:4089: this.fireEvent( 'willPaste', event );
|
|
||||||
*/
|
|
||||||
|
|
||||||
// CKEditor gimmicks
|
|
||||||
this.mode = 'wysiwyg'; // 'plain'
|
|
||||||
this.plugins = {
|
|
||||||
plain: false
|
|
||||||
};
|
|
||||||
// .plugins.plain && this.editor.__plain
|
|
||||||
this.focusManager = {
|
|
||||||
hasFocus: () => squire._isFocused,
|
|
||||||
blur: () => squire.blur()
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
doAction(name, tag) {
|
|
||||||
if (this.testPresenceinSelection(tag, new RegExp('>'+tag+'\\b'))) {
|
|
||||||
name = 'remove' + (name.toUpperCase()[0]) + name.substr(1);
|
|
||||||
}
|
|
||||||
this.squire[name]();
|
|
||||||
}
|
|
||||||
|
|
||||||
getParentNodeName(selector) {
|
|
||||||
let parent = this.squire.getSelectionClosest(selector);
|
|
||||||
return parent ? parent.nodeName : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
doList(type) {
|
|
||||||
let parent = this.getParentNodeName('UL,OL'),
|
|
||||||
fn = {UL:'makeUnorderedList',OL:'makeOrderedList'};
|
|
||||||
(parent && parent == type) ? this.squire.removeList() : this.squire[fn[type]]();
|
|
||||||
}
|
|
||||||
|
|
||||||
testPresenceinSelection(format, validation) {
|
|
||||||
return validation.test(this.squire.getPath()) | this.squire.hasFormat(format);
|
|
||||||
}
|
|
||||||
|
|
||||||
// CKeditor gimmicks
|
|
||||||
setMode(mode) {
|
|
||||||
this.mode = mode; // 'wysiwyg' or 'plain'
|
|
||||||
}
|
|
||||||
|
|
||||||
on(type, fn) {
|
|
||||||
this.squire.addEventListener(type, fn);
|
|
||||||
}
|
|
||||||
|
|
||||||
execCommand(cmd, cfg) {
|
|
||||||
if ('insertSignature' == cmd) {
|
|
||||||
if (cfg.clearCache) {
|
|
||||||
// remove it;
|
|
||||||
} else {
|
|
||||||
cfg.isHtml; // bool
|
|
||||||
cfg.insertBefore; // bool
|
|
||||||
cfg.signature; // string
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
checkDirty() {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
resetDirty() {}
|
|
||||||
|
|
||||||
getData() {
|
|
||||||
return this.squire.getHTML();
|
|
||||||
}
|
|
||||||
|
|
||||||
setData(html) {
|
|
||||||
this.squire.setHTML(html);
|
|
||||||
}
|
|
||||||
|
|
||||||
focus() {
|
|
||||||
this.squire.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
resize(width, height) {
|
|
||||||
this.content.style.height = Math.max(200, (height - this.content.offsetTop)) + 'px';
|
|
||||||
}
|
|
||||||
|
|
||||||
setReadOnly(bool) {
|
|
||||||
this.content.contentEditable = !!bool;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class HtmlEditor {
|
class HtmlEditor {
|
||||||
editor;
|
editor;
|
||||||
blurTimer = 0;
|
blurTimer = 0;
|
||||||
|
|
|
||||||
389
dev/External/SquireUI.js
vendored
Normal file
389
dev/External/SquireUI.js
vendored
Normal file
|
|
@ -0,0 +1,389 @@
|
||||||
|
/* eslint max-len: 0 */
|
||||||
|
|
||||||
|
const doc = document,
|
||||||
|
|
||||||
|
allowedElements = 'A,B,BLOCKQUOTE,BR,DIV,FONT,H1,H2,H3,H4,H5,H6,HR,IMG,LABEL,LI,OL,P,SPAN,STRONG,TABLE,TD,TH,TR,U,UL',
|
||||||
|
allowedAttributes = 'abbr,align,background,bgcolor,border,cellpadding,cellspacing,class,color,colspan,dir,face,frame,height,href,hspace,id,lang,rowspan,rules,scope,size,src,style,target,type,usemap,valign,vspace,width'.split(','),
|
||||||
|
|
||||||
|
SquireDefaultConfig = {
|
||||||
|
/*
|
||||||
|
blockTag: 'P',
|
||||||
|
blockAttributes: null,
|
||||||
|
tagAttributes: {
|
||||||
|
blockquote: null,
|
||||||
|
ul: null,
|
||||||
|
ol: null,
|
||||||
|
li: null,
|
||||||
|
a: null
|
||||||
|
},
|
||||||
|
classNames: {
|
||||||
|
colour: 'colour',
|
||||||
|
fontFamily: 'font',
|
||||||
|
fontSize: 'size',
|
||||||
|
highlight: 'highlight'
|
||||||
|
},
|
||||||
|
leafNodeNames: leafNodeNames,
|
||||||
|
undo: {
|
||||||
|
documentSizeThreshold: -1, // -1 means no threshold
|
||||||
|
undoLimit: -1 // -1 means no limit
|
||||||
|
},
|
||||||
|
isInsertedHTMLSanitized: true,
|
||||||
|
isSetHTMLSanitized: true,
|
||||||
|
willCutCopy: null,
|
||||||
|
addLinks: true // allow_smart_html_links
|
||||||
|
*/
|
||||||
|
sanitizeToDOMFragment: (html, isPaste/*, squire*/) => {
|
||||||
|
const frag = doc.createDocumentFragment();
|
||||||
|
frag.innerHTML = html;
|
||||||
|
if (isPaste) {
|
||||||
|
frag.querySelectorAll(':not('+allowedElements+')').forEach(el => el.remove());
|
||||||
|
frag.querySelectorAll(allowedElements).forEach(el => {
|
||||||
|
if (el.hasAttributes()) {
|
||||||
|
Array.from(el.attributes).forEach(attr => {
|
||||||
|
let name = attr.name.toLowerCase();
|
||||||
|
if (!allowedAttributes.includes(name)) {
|
||||||
|
el.removeAttribute(name);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return frag;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
class SquireUI
|
||||||
|
{
|
||||||
|
constructor(container) {
|
||||||
|
const
|
||||||
|
ctrlKey = /Mac OS X/.test( navigator.userAgent ) ? 'meta + ' : 'Ctrl + ',
|
||||||
|
actions = {
|
||||||
|
group1: {
|
||||||
|
source: {
|
||||||
|
html: '〈〉',
|
||||||
|
cmd: () => console.log('TODO: toggle HTML <> Text')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
font: {
|
||||||
|
fontFamily: {
|
||||||
|
select: {
|
||||||
|
'sans-serif': {
|
||||||
|
Arial: "'Nimbus Sans L', 'Liberation sans', 'Arial Unicode MS', Arial, Helvetica, Garuda, Utkal, FreeSans, sans-serif",
|
||||||
|
Tahoma: "'Luxi Sans', Tahoma, Loma, Geneva, Meera, sans-serif",
|
||||||
|
Trebuchet: "'DejaVu Sans Condensed', Trebuchet, 'Trebuchet MS', sans-serif",
|
||||||
|
Lucida: "'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'DejaVu LGC Sans', sans-serif",
|
||||||
|
Verdana: "'DejaVu Sans', Verdana, Geneva, 'Bitstream Vera Sans', 'DejaVu LGC Sans', sans-serif"
|
||||||
|
},
|
||||||
|
monospace: {
|
||||||
|
Courier: "'Liberation Mono', 'Courier New', FreeMono, Courier, monospace",
|
||||||
|
Lucida: "'DejaVu Sans Mono', 'DejaVu LGC Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', Monaco, monospace"
|
||||||
|
},
|
||||||
|
sans: {
|
||||||
|
Times: "'Nimbus Roman No9 L', 'Times New Roman', Times, FreeSerif, serif",
|
||||||
|
Palatino: "'Bitstream Charter', 'Palatino Linotype', Palatino, Palladio, 'URW Palladio L', 'Book Antiqua', Times, serif",
|
||||||
|
Georgia: "'URW Palladio L', Georgia, Times, serif"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cmd: s => squire.setFontFace(s.value)
|
||||||
|
},
|
||||||
|
fontSize: {
|
||||||
|
select: ['11px','13px','16px','20px','24px','30px'],
|
||||||
|
cmd: s => squire.setFontSize(s.value)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
textColor: {
|
||||||
|
input: 'color',
|
||||||
|
cmd: s => squire.setTextColour(s.value),
|
||||||
|
hint: 'text'
|
||||||
|
},
|
||||||
|
backgroundColor: {
|
||||||
|
input: 'color',
|
||||||
|
cmd: s => squire.setHighlightColour(s.value),
|
||||||
|
hint: 'background'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
bidi: {
|
||||||
|
allowHtmlEditorBitiButtons
|
||||||
|
},
|
||||||
|
*/
|
||||||
|
inline: {
|
||||||
|
bold: {
|
||||||
|
html: '𝐁',
|
||||||
|
cmd: () => this.doAction('bold','B'),
|
||||||
|
key: 'B'
|
||||||
|
},
|
||||||
|
italic: {
|
||||||
|
html: '𝐼',
|
||||||
|
cmd: () => this.doAction('italic','I'),
|
||||||
|
key: 'I'
|
||||||
|
},
|
||||||
|
underline: {
|
||||||
|
html: '<u>U</u>',
|
||||||
|
cmd: () => this.doAction('underline','U'),
|
||||||
|
key: 'U'
|
||||||
|
},
|
||||||
|
strike: {
|
||||||
|
html: '<s>S</s>',
|
||||||
|
cmd: () => this.doAction('strikethrough','S'),
|
||||||
|
key: 'Shift + 7'
|
||||||
|
},
|
||||||
|
sub: {
|
||||||
|
html: 'S<sub>x</sub>',
|
||||||
|
cmd: () => this.doAction('subscript','SUB'),
|
||||||
|
key: 'Shift + 5'
|
||||||
|
},
|
||||||
|
sup: {
|
||||||
|
html: 'S<sup>x</sup>',
|
||||||
|
cmd: () => this.doAction('superscript','SUP'),
|
||||||
|
key: 'Shift + 6'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
block: {
|
||||||
|
ol: {
|
||||||
|
html: '#',
|
||||||
|
cmd: () => this.doList('OL'),
|
||||||
|
key: 'Shift + 8'
|
||||||
|
},
|
||||||
|
ul: {
|
||||||
|
html: '⋮',
|
||||||
|
cmd: () => this.doList('UL'),
|
||||||
|
key: 'Shift + 9'
|
||||||
|
},
|
||||||
|
quote: {
|
||||||
|
html: '"',
|
||||||
|
cmd: () => {
|
||||||
|
let parent = this.getParentNodeName('UL,OL');
|
||||||
|
(parent && 'BLOCKQUOTE' == parent) ? squire.decreaseQuoteLevel() : squire.increaseQuoteLevel();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
indentDecrease: {
|
||||||
|
html: '⇤',
|
||||||
|
cmd: () => squire.changeIndentationLevel('decrease'),
|
||||||
|
key: ']'
|
||||||
|
},
|
||||||
|
indentIncrease: {
|
||||||
|
html: '⇥',
|
||||||
|
cmd: () => squire.changeIndentationLevel('increase'),
|
||||||
|
key: '['
|
||||||
|
}
|
||||||
|
},
|
||||||
|
targets: {
|
||||||
|
link: {
|
||||||
|
html: '🔗',
|
||||||
|
cmd: () => {
|
||||||
|
if ('A' === this.getParentNodeName()) {
|
||||||
|
squire.removeLink();
|
||||||
|
} else {
|
||||||
|
let url = prompt("Link","https://");
|
||||||
|
url != null && url.length && squire.makeLink(url);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
html: '🖼️',
|
||||||
|
cmd: () => {
|
||||||
|
if ('IMG' === this.getParentNodeName()) {
|
||||||
|
// wysiwyg.removeLink();
|
||||||
|
} else {
|
||||||
|
let src = prompt("Image","https://");
|
||||||
|
src != null && src.length && squire.insertImage(src);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
imageUpload: {
|
||||||
|
// TODO
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
table: {
|
||||||
|
// TODO
|
||||||
|
},
|
||||||
|
*/
|
||||||
|
changes: {
|
||||||
|
undo: {
|
||||||
|
html: '↶',
|
||||||
|
cmd: () => squire.undo(),
|
||||||
|
key: 'Z'
|
||||||
|
},
|
||||||
|
redo: {
|
||||||
|
html: '↷',
|
||||||
|
cmd: () => squire.redo(),
|
||||||
|
key: 'Y'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
content = doc.createElement('div'),
|
||||||
|
toolbar = doc.createElement('div'),
|
||||||
|
squire = new Squire(content, SquireDefaultConfig);
|
||||||
|
|
||||||
|
content.className = 'squire-content cke_wysiwyg_div cke_editable';
|
||||||
|
|
||||||
|
this.squire = squire;
|
||||||
|
this.content = content;
|
||||||
|
|
||||||
|
toolbar.className = 'squire-toolbar cke_top';
|
||||||
|
for (let group in actions) {
|
||||||
|
let toolgroup = doc.createElement('div');
|
||||||
|
toolgroup.className = 'squire-toolgroup cke_toolgroup';
|
||||||
|
for (let action in actions[group]) {
|
||||||
|
if ('source' == action && !rl.settings.app('allowHtmlEditorSourceButton')) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
let cfg = actions[group][action], input;
|
||||||
|
if (cfg.input) {
|
||||||
|
input = doc.createElement('input');
|
||||||
|
input.type = cfg.input;
|
||||||
|
input.addEventListener('input', () => cfg.cmd(input));
|
||||||
|
} else if (cfg.select) {
|
||||||
|
input = doc.createElement('select');
|
||||||
|
if (Array.isArray(cfg.select)) {
|
||||||
|
cfg.select.forEach(value => {
|
||||||
|
var option = new Option(value, value);
|
||||||
|
option.style[action] = value;
|
||||||
|
input.append(option);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
Object.entries(cfg.select).forEach(([label, options]) => {
|
||||||
|
let group = doc.createElement('optgroup');
|
||||||
|
group.label = label;
|
||||||
|
Object.entries(options).forEach(([text, value]) => {
|
||||||
|
var option = new Option(text, value);
|
||||||
|
option.style[action] = value;
|
||||||
|
group.append(option);
|
||||||
|
});
|
||||||
|
input.append(group);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
input.addEventListener('input', () => cfg.cmd(input));
|
||||||
|
} else {
|
||||||
|
input = doc.createElement('button');
|
||||||
|
input.type = 'button';
|
||||||
|
input.innerHTML = cfg.html;
|
||||||
|
input.action_cmd = cfg.cmd;
|
||||||
|
}
|
||||||
|
if (cfg.hint) {
|
||||||
|
input.title = cfg.key ? cfg.hint + ' (' + ctrlKey + cfg.key + ')' : cfg.hint;
|
||||||
|
} else if (cfg.key) {
|
||||||
|
input.title = ctrlKey + cfg.key;
|
||||||
|
}
|
||||||
|
input.dataset.action = action;
|
||||||
|
cfg.input = input;
|
||||||
|
toolgroup.append(input);
|
||||||
|
}
|
||||||
|
toolgroup.children.length && toolbar.append(toolgroup);
|
||||||
|
}
|
||||||
|
toolbar.addEventListener('click', e => {
|
||||||
|
let t = e.target;
|
||||||
|
t.action_cmd && t.action_cmd(t);
|
||||||
|
});
|
||||||
|
|
||||||
|
let changes = actions.changes
|
||||||
|
changes.undo.input.disabled = changes.redo.input.disabled = true;
|
||||||
|
squire.addEventListener('undoStateChange', state => {
|
||||||
|
changes.undo.input.disabled = !state.canUndo;
|
||||||
|
changes.redo.input.disabled = !state.canRedo;
|
||||||
|
});
|
||||||
|
|
||||||
|
container.append(toolbar, content);
|
||||||
|
|
||||||
|
/*
|
||||||
|
squire-raw.js:2161: this.fireEvent( 'dragover', {
|
||||||
|
squire-raw.js:2168: this.fireEvent( 'drop', {
|
||||||
|
squire-raw.js:2583: this.fireEvent( event.type, event );
|
||||||
|
squire-raw.js:2864: this.fireEvent( 'pathChange', { path: newPath } );
|
||||||
|
squire-raw.js:2867: this.fireEvent( range.collapsed ? 'cursor' : 'select', {
|
||||||
|
squire-raw.js:3004: this.fireEvent( 'input' );
|
||||||
|
squire-raw.js:3080: this.fireEvent( 'input' );
|
||||||
|
squire-raw.js:3101: this.fireEvent( 'input' );
|
||||||
|
squire-raw.js:4036: this.fireEvent( 'willPaste', event );
|
||||||
|
squire-raw.js:4089: this.fireEvent( 'willPaste', event );
|
||||||
|
*/
|
||||||
|
|
||||||
|
// CKEditor gimmicks used by HtmlEditor
|
||||||
|
this.mode = 'wysiwyg'; // 'plain'
|
||||||
|
this.plugins = {
|
||||||
|
plain: false
|
||||||
|
};
|
||||||
|
// .plugins.plain && this.editor.__plain
|
||||||
|
this.focusManager = {
|
||||||
|
hasFocus: () => squire._isFocused,
|
||||||
|
blur: () => squire.blur()
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
doAction(name, tag) {
|
||||||
|
if (this.testPresenceinSelection(tag, new RegExp('>'+tag+'\\b'))) {
|
||||||
|
name = 'remove' + (name.toUpperCase()[0]) + name.substr(1);
|
||||||
|
}
|
||||||
|
this.squire[name]();
|
||||||
|
}
|
||||||
|
|
||||||
|
getParentNodeName(selector) {
|
||||||
|
let parent = this.squire.getSelectionClosest(selector);
|
||||||
|
return parent ? parent.nodeName : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
doList(type) {
|
||||||
|
let parent = this.getParentNodeName('UL,OL'),
|
||||||
|
fn = {UL:'makeUnorderedList',OL:'makeOrderedList'};
|
||||||
|
(parent && parent == type) ? this.squire.removeList() : this.squire[fn[type]]();
|
||||||
|
}
|
||||||
|
|
||||||
|
testPresenceinSelection(format, validation) {
|
||||||
|
return validation.test(this.squire.getPath()) | this.squire.hasFormat(format);
|
||||||
|
}
|
||||||
|
|
||||||
|
// CKeditor gimmicks used by HtmlEditor
|
||||||
|
setMode(mode) {
|
||||||
|
this.mode = mode; // 'wysiwyg' or 'plain'
|
||||||
|
}
|
||||||
|
|
||||||
|
on(type, fn) {
|
||||||
|
this.squire.addEventListener(type, fn);
|
||||||
|
}
|
||||||
|
|
||||||
|
execCommand(cmd, cfg) {
|
||||||
|
if ('insertSignature' == cmd) {
|
||||||
|
if (cfg.clearCache) {
|
||||||
|
// remove it;
|
||||||
|
} else {
|
||||||
|
cfg.isHtml; // bool
|
||||||
|
cfg.insertBefore; // bool
|
||||||
|
cfg.signature; // string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkDirty() {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
resetDirty() {}
|
||||||
|
|
||||||
|
getData() {
|
||||||
|
return this.squire.getHTML();
|
||||||
|
}
|
||||||
|
|
||||||
|
setData(html) {
|
||||||
|
this.squire.setHTML(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
focus() {
|
||||||
|
this.squire.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
resize(width, height) {
|
||||||
|
this.content.style.height = Math.max(200, (height - this.content.offsetTop)) + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
setReadOnly(bool) {
|
||||||
|
this.content.contentEditable = !!bool;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { SquireUI, SquireUI as default };
|
||||||
|
|
@ -80,4 +80,7 @@
|
||||||
@import "SettingsFilters.less";
|
@import "SettingsFilters.less";
|
||||||
|
|
||||||
@import "Animations.less";
|
@import "Animations.less";
|
||||||
|
|
||||||
|
@import "SquireUI.less";
|
||||||
|
|
||||||
@import "_End.less";
|
@import "_End.less";
|
||||||
|
|
|
||||||
39
dev/Styles/SquireUI.less
Normal file
39
dev/Styles/SquireUI.less
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
.squire-toolbar {
|
||||||
|
}
|
||||||
|
|
||||||
|
.squire-toolgroup {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 .25em 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.squire-toolgroup > button,
|
||||||
|
.squire-toolgroup > select,
|
||||||
|
.squire-toolgroup > input[type="color"] {
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
height: 1.5em;
|
||||||
|
line-height: 1.7em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
vertical-align: bottom;
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.squire-toolgroup button:hover, .squire-toolgroup button.active {
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.squire-toolgroup select {
|
||||||
|
width: 7em;
|
||||||
|
}
|
||||||
|
.squire-toolgroup select[data-action="fontSize"] {
|
||||||
|
width: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.squire-content {
|
||||||
|
min-height: 200px;
|
||||||
|
padding: .5em;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue