mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-25 10:09:20 +03:00
The editor has been upgraded and improved using the new version of squire
This commit is contained in:
Mohammad Rezaei
parent
a6a83fa2df
commit
a5d461483b
5 changed files with 274 additions and 68 deletions
268
dev/External/SquireUI.js
vendored
268
dev/External/SquireUI.js
vendored
|
|
@ -68,7 +68,12 @@ class SquireUI
|
|||
clr.style.width = input.offsetWidth + 'px';
|
||||
|
||||
clr.value = '';
|
||||
clr.onchange = () => squire.setStyle({[name]:clr.value});
|
||||
clr.onchange = () => {
|
||||
if (name === 'color')
|
||||
squire.setTextColor(clr.value);
|
||||
else if (name === 'backgroundColor')
|
||||
squire.setHighlightColor(clr.value);
|
||||
}
|
||||
// Chrome 110+ https://github.com/the-djmaze/snappymail/issues/1199
|
||||
// clr.oninput = () => squire.setStyle({[name]:clr.value});
|
||||
setTimeout(()=>clr.click(),1);
|
||||
|
|
@ -106,12 +111,13 @@ class SquireUI
|
|||
Georgia: "'URW Palladio L', Georgia, Times, serif"
|
||||
}
|
||||
},
|
||||
cmd: s => squire.setStyle({ fontFamily: s.value })
|
||||
defaultValueIndex: 4,
|
||||
cmd: s => this.squire.setFontFace(s.value)
|
||||
},
|
||||
fontSize: {
|
||||
select: ['11px','13px','16px','20px','24px','30px'],
|
||||
defaultValueIndex: 2,
|
||||
cmd: s => squire.setStyle({ fontSize: s.value })
|
||||
cmd: s => this.squire.setFontSize(s.value)
|
||||
// TODO: maybe consider using https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#values
|
||||
// example:
|
||||
// select: ['xx-small', 'x-small',' small',' medium', 'large', 'x-large', 'xx-large', 'xxx-large'],
|
||||
|
|
@ -130,16 +136,6 @@ class SquireUI
|
|||
// }
|
||||
// }
|
||||
},
|
||||
dir: {
|
||||
dir_ltr: {
|
||||
html: '⁋',
|
||||
cmd: () => squire.setTextDirection('ltr')
|
||||
},
|
||||
dir_rtl: {
|
||||
html: '¶',
|
||||
cmd: () => squire.setTextDirection('rtl')
|
||||
}
|
||||
},
|
||||
colors: {
|
||||
textColor: {
|
||||
html: 'A<sub>▾</sub>',
|
||||
|
|
@ -153,81 +149,244 @@ class SquireUI
|
|||
inline: {
|
||||
bold: {
|
||||
html: 'B',
|
||||
cmd: () => this.doAction('bold'),
|
||||
cmd: () => this.squire.hasFormat('b') ? this.doAction('removeBold') : this.doAction('bold'),
|
||||
key: 'B',
|
||||
matches: 'B,STRONT'
|
||||
},
|
||||
italic: {
|
||||
html: 'I',
|
||||
cmd: () => this.doAction('italic'),
|
||||
cmd: () => this.squire.hasFormat('i') ? this.doAction('removeItalic') : this.doAction('italic'),
|
||||
key: 'I',
|
||||
matches: 'I'
|
||||
},
|
||||
underline: {
|
||||
html: '<u>U</u>',
|
||||
cmd: () => this.doAction('underline'),
|
||||
cmd: () => this.squire.hasFormat('u') ? this.doAction('removeUnderline') : this.doAction('underline'),
|
||||
key: 'U',
|
||||
matches: 'U'
|
||||
},
|
||||
strike: {
|
||||
html: '<s>S</s>',
|
||||
cmd: () => this.doAction('strikethrough'),
|
||||
cmd: () => this.squire.hasFormat('s') ? this.doAction('removeStrikethrough') : this.doAction('strikethrough'),
|
||||
key: 'Shift + 7',
|
||||
matches: 'S'
|
||||
},
|
||||
sub: {
|
||||
html: 'Xₙ',
|
||||
cmd: () => this.doAction('subscript'),
|
||||
cmd: () => this.squire.hasFormat('sub') ? this.doAction('removeSubscript') : this.doAction('subscript'),
|
||||
key: 'Shift + 5',
|
||||
matches: 'SUB'
|
||||
},
|
||||
sup: {
|
||||
html: 'Xⁿ',
|
||||
cmd: () => this.doAction('superscript'),
|
||||
cmd: () => this.squire.hasFormat('sup') ? this.doAction('removeSuperscript') : this.doAction('superscript'),
|
||||
key: 'Shift + 6',
|
||||
matches: 'SUP'
|
||||
}
|
||||
},
|
||||
block: {
|
||||
quote: {
|
||||
html: '"',
|
||||
cmd: () => this.squire.hasFormat('blockquote') ? this.doAction('decreaseQuoteLevel') : this.doAction('increaseQuoteLevel'),
|
||||
matches: 'BLOCKQUOTE'
|
||||
},
|
||||
indentDecrease: {
|
||||
html: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 128.000000 128.000000" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g><path style="opacity:0.991" fill="#000000" d="M 1.5,-0.5 C 42.8333,-0.5 84.1667,-0.5 125.5,-0.5C 125.833,0.5 126.5,1.16667 127.5,1.5C 127.5,3.5 127.5,5.5 127.5,7.5C 126.711,7.78281 126.044,8.28281 125.5,9C 84.1667,9.66667 42.8333,9.66667 1.5,9C 0.955796,8.28281 0.28913,7.78281 -0.5,7.5C -0.5,5.5 -0.5,3.5 -0.5,1.5C 0.5,1.16667 1.16667,0.5 1.5,-0.5 Z"/></g>
|
||||
<g><path style="opacity:0.899" fill="#000000" d="M 127.5,30.5 C 127.5,32.8333 127.5,35.1667 127.5,37.5C 126.527,37.9867 125.527,38.4867 124.5,39C 99.8333,39.6667 75.1667,39.6667 50.5,39C 48.0904,38.2421 47.0904,36.5754 47.5,34C 47.0904,31.4246 48.0904,29.7579 50.5,29C 75.1667,28.3333 99.8333,28.3333 124.5,29C 125.527,29.5133 126.527,30.0133 127.5,30.5 Z"/></g>
|
||||
<g><path style="opacity:0.882" fill="#000000" d="M -0.5,68.5 C -0.5,64.8333 -0.5,61.1667 -0.5,57.5C 5.56592,49.9283 12.2326,42.7616 19.5,36C 26.8636,33.2717 29.6969,35.7717 28,43.5C 21.3761,49.4483 15.5427,55.9483 10.5,63C 15.2081,69.7175 20.7081,75.8842 27,81.5C 30.3922,89.602 27.8922,92.602 19.5,90.5C 12.3877,83.3965 5.72108,76.0632 -0.5,68.5 Z"/></g>
|
||||
<g><path style="opacity:0.985" fill="#000000" d="M 127.5,60.5 C 127.5,62.5 127.5,64.5 127.5,66.5C 126.711,66.7828 126.044,67.2828 125.5,68C 100.167,68.6667 74.8333,68.6667 49.5,68C 46.8333,65 46.8333,62 49.5,59C 74.8333,58.3333 100.167,58.3333 125.5,59C 126.044,59.7172 126.711,60.2172 127.5,60.5 Z"/></g>
|
||||
<g><path style="opacity:0.899" fill="#000000" d="M 127.5,89.5 C 127.5,91.8333 127.5,94.1667 127.5,96.5C 126.527,96.9867 125.527,97.4867 124.5,98C 99.8333,98.6667 75.1667,98.6667 50.5,98C 48.0904,97.2421 47.0904,95.5754 47.5,93C 47.0904,90.4246 48.0904,88.7579 50.5,88C 75.1667,87.3333 99.8333,87.3333 124.5,88C 125.527,88.5133 126.527,89.0133 127.5,89.5 Z"/></g>
|
||||
<g><path style="opacity:0.991" fill="#000000" d="M 127.5,119.5 C 127.5,121.5 127.5,123.5 127.5,125.5C 126.5,125.833 125.833,126.5 125.5,127.5C 84.1667,127.5 42.8333,127.5 1.5,127.5C 1.16667,126.5 0.5,125.833 -0.5,125.5C -0.5,123.5 -0.5,121.5 -0.5,119.5C 0.28913,119.217 0.955796,118.717 1.5,118C 42.8333,117.333 84.1667,117.333 125.5,118C 126.044,118.717 126.711,119.217 127.5,119.5 Z"/></g>
|
||||
</svg>`,
|
||||
cmd: () => this.doAction('decreaseQuoteLevel'),
|
||||
key: ']'
|
||||
},
|
||||
indentIncrease: {
|
||||
html: `<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 128.000000 128.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M17 1262 c-22 -24 -21 -45 1 -65 17 -15 75 -17 624 -17 573 0 606 1
|
||||
621 18 22 24 21 45 -1 65 -17 15 -75 17 -624 17 -573 0 -606 -1 -621 -18z"/>
|
||||
<path d="M510 977 c-18 -9 -25 -21 -25 -42 0 -53 15 -55 395 -55 380 0 395 2
|
||||
395 55 0 53 -15 55 -395 55 -258 0 -351 -3 -370 -13z"/>
|
||||
<path d="M16 904 c-9 -8 -16 -23 -16 -32 0 -9 43 -59 95 -113 64 -65 95 -104
|
||||
95 -119 0 -15 -31 -54 -95 -119 -93 -95 -109 -123 -83 -149 30 -30 62 -13 155
|
||||
81 50 50 98 106 107 124 38 76 13 133 -112 256 -91 89 -116 101 -146 71z"/>
|
||||
<path d="M497 672 c-22 -24 -21 -45 1 -65 17 -15 58 -17 384 -17 341 0 366 1
|
||||
381 18 22 24 21 45 -1 65 -17 15 -58 17 -384 17 -341 0 -366 -1 -381 -18z"/>
|
||||
<path d="M510 387 c-18 -9 -25 -21 -25 -42 0 -53 15 -55 395 -55 380 0 395 2
|
||||
395 55 0 53 -15 55 -395 55 -258 0 -351 -3 -370 -13z"/>
|
||||
<path d="M17 82 c-22 -24 -21 -45 1 -65 17 -15 75 -17 624 -17 573 0 606 1
|
||||
621 18 22 24 21 45 -1 65 -17 15 -75 17 -624 17 -573 0 -606 -1 -621 -18z"/>
|
||||
</g>
|
||||
</svg>`,
|
||||
cmd: () => this.doAction('increaseQuoteLevel'),
|
||||
key: '['
|
||||
},
|
||||
ol: {
|
||||
html: '#',
|
||||
cmd: () => this.doList('OL'),
|
||||
html: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 128.000000 128.000000" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g><path style="opacity:0.842" fill="#000000" d="M 7.5,8.5 C 9.72241,8.17798 11.5557,8.84464 13,10.5C 13.6667,18.8333 13.6667,27.1667 13,35.5C 11.33,37.6983 9.32996,38.0317 7,36.5C 6.82991,30.8042 6.32991,25.1376 5.5,19.5C 4.11947,19.0004 3.4528,18.0004 3.5,16.5C 4.41812,13.5943 5.75145,10.9276 7.5,8.5 Z"/></g>
|
||||
<g><path style="opacity:0.921" fill="#000000" d="M 127.5,11.5 C 127.5,13.8333 127.5,16.1667 127.5,18.5C 126.373,19.1217 125.373,19.955 124.5,21C 95.5,21.6667 66.5,21.6667 37.5,21C 33.5,17 33.5,13 37.5,9C 66.5,8.33333 95.5,8.33333 124.5,9C 125.373,10.045 126.373,10.8783 127.5,11.5 Z"/></g>
|
||||
<g><path style="opacity:0.823" fill="#000000" d="M -0.5,77.5 C -0.5,74.5 -0.5,71.5 -0.5,68.5C 2.78778,65.0762 6.28778,61.7429 10,58.5C 10.1667,58.1667 10.3333,57.8333 10.5,57.5C 9.31116,56.5713 7.97782,56.238 6.5,56.5C 5.73781,60.548 3.40448,61.548 -0.5,59.5C -0.5,57.8333 -0.5,56.1667 -0.5,54.5C 4.22049,47.5397 9.72049,46.873 16,52.5C 18.0858,56.6665 17.7525,60.6665 15,64.5C 12.4066,66.5486 9.90659,68.7152 7.5,71C 10.5,71.3333 13.5,71.6667 16.5,72C 17.7596,73.8138 17.7596,75.6471 16.5,77.5C 10.8342,78.7858 5.16752,78.7858 -0.5,77.5 Z"/></g>
|
||||
<g><path style="opacity:0.863" fill="#000000" d="M 127.5,59.5 C 127.5,62.1667 127.5,64.8333 127.5,67.5C 126.118,68.8005 124.452,69.6339 122.5,70C 95.1667,70.6667 67.8333,70.6667 40.5,70C 34.7685,68.5317 33.1018,65.0317 35.5,59.5C 36.9122,58.1936 38.5789,57.3603 40.5,57C 67.8333,56.3333 95.1667,56.3333 122.5,57C 124.452,57.3661 126.118,58.1995 127.5,59.5 Z"/></g>
|
||||
<g><path style="opacity:0.823" fill="#000000" d="M -0.5,114.5 C -0.5,112.167 -0.5,109.833 -0.5,107.5C 0.583168,107.461 1.58317,107.127 2.5,106.5C 4.76804,107.719 6.60137,109.385 8,111.5C 10.1875,110.941 10.8542,109.607 10,107.5C 6.07777,106.816 4.57777,104.482 5.5,100.5C 3.3792,100.675 1.3792,100.341 -0.5,99.5C -0.5,97.8333 -0.5,96.1667 -0.5,94.5C 2.49184,89.743 6.82517,88.243 12.5,90C 15.6664,91.44 17.3331,93.94 17.5,97.5C 17.135,102.778 16.9683,108.111 17,113.5C 14.1034,118.155 9.93669,119.655 4.5,118C 2.67694,117.003 1.01027,115.836 -0.5,114.5 Z M 5.5,100.5 C 6.23411,99.2921 6.56745,97.9587 6.5,96.5C 7.5,96.5 8.5,96.5 9.5,96.5C 9.51234,99.142 8.17901,100.475 5.5,100.5 Z"/></g>
|
||||
<g><path style="opacity:0.921" fill="#000000" d="M 127.5,108.5 C 127.5,110.833 127.5,113.167 127.5,115.5C 126.373,116.122 125.373,116.955 124.5,118C 95.5,118.667 66.5,118.667 37.5,118C 33.5,114 33.5,110 37.5,106C 66.5,105.333 95.5,105.333 124.5,106C 125.373,107.045 126.373,107.878 127.5,108.5 Z"/></g>
|
||||
</svg>`,
|
||||
cmd: () => this.doList('ol'),
|
||||
key: 'Shift + 8',
|
||||
matches: 'OL'
|
||||
},
|
||||
ul: {
|
||||
html: '⋮',
|
||||
cmd: () => this.doList('UL'),
|
||||
html: `<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 128.000000 128.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M32 1100 c-46 -43 -37 -107 19 -139 51 -29 119 14 119 76 0 70 -87
|
||||
110 -138 63z"/>
|
||||
<path d="M316 1084 c-22 -21 -20 -67 2 -87 17 -15 64 -17 475 -17 l456 0 15
|
||||
22 c21 30 20 61 -2 81 -17 15 -64 17 -475 17 -401 0 -457 -2 -471 -16z"/>
|
||||
<path d="M63 722 c-13 -2 -32 -15 -43 -29 -45 -57 -7 -135 65 -135 30 0 45 6
|
||||
62 27 55 64 2 150 -84 137z"/>
|
||||
<path d="M317 682 c-22 -24 -22 -65 1 -86 17 -15 61 -16 478 -14 l458 3 16 28
|
||||
c13 24 13 30 0 55 l-16 27 -460 3 c-436 2 -462 1 -477 -16z"/>
|
||||
<path d="M29 301 c-31 -31 -36 -59 -17 -94 17 -33 39 -46 76 -47 87 -1 113
|
||||
117 35 158 -35 19 -63 14 -94 -17z"/>
|
||||
<path d="M317 282 c-21 -23 -22 -66 -1 -86 14 -14 67 -16 477 -14 l461 3 16
|
||||
28 c13 24 13 30 0 55 l-16 27 -460 3 c-436 2 -462 1 -477 -16z"/>
|
||||
</g>
|
||||
</svg>`,
|
||||
cmd: () => this.doList('ul'),
|
||||
key: 'Shift + 9',
|
||||
matches: 'UL'
|
||||
}
|
||||
},
|
||||
alighnment: {
|
||||
leftAlign: {
|
||||
html: `<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 128.000000 128.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M122 1158 c-15 -15 -15 -61 0 -76 17 -17 1019 -17 1036 0 7 7 12 24
|
||||
12 38 0 14 -5 31 -12 38 -17 17 -1019 17 -1036 0z"/>
|
||||
<path d="M122 838 c-15 -15 -15 -61 0 -76 17 -17 699 -17 716 0 15 15 15 61 0
|
||||
76 -17 17 -699 17 -716 0z"/>
|
||||
<path d="M122 518 c-15 -15 -15 -61 0 -76 17 -17 1019 -17 1036 0 7 7 12 24
|
||||
12 38 0 14 -5 31 -12 38 -17 17 -1019 17 -1036 0z"/>
|
||||
<path d="M122 198 c-15 -15 -15 -61 0 -76 17 -17 699 -17 716 0 15 15 15 61 0
|
||||
76 -17 17 -699 17 -716 0z"/>
|
||||
</g>
|
||||
</svg>`,
|
||||
cmd: () => this.squire.setTextAlignment('left'),
|
||||
// matches: ''
|
||||
},
|
||||
quote: {
|
||||
html: '"',
|
||||
cmd: () => {
|
||||
let parent = squire.getSelectionClosest('UL,OL,BLOCKQUOTE')?.nodeName;
|
||||
('BLOCKQUOTE' == parent) ? squire.decreaseQuoteLevel() : squire.increaseQuoteLevel();
|
||||
},
|
||||
matches: 'BLOCKQUOTE'
|
||||
centerAlign: {
|
||||
html: `<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 128.000000 128.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M128 1109 c-26 -15 -23 -64 4 -83 20 -14 85 -16 508 -16 423 0 488 2
|
||||
508 16 28 20 30 69 3 84 -27 14 -999 13 -1023 -1z"/>
|
||||
<path d="M292 824 c-28 -20 -30 -69 -3 -84 13 -6 142 -10 351 -10 209 0 338 4
|
||||
351 10 27 15 25 64 -3 84 -34 24 -662 24 -696 0z"/>
|
||||
<path d="M122 538 c-20 -20 -14 -65 10 -82 20 -14 85 -16 508 -16 423 0 488 2
|
||||
508 16 28 20 30 69 3 84 -30 15 -1013 14 -1029 -2z"/>
|
||||
<path d="M292 254 c-28 -20 -30 -69 -3 -84 27 -14 675 -14 702 0 27 15 25 64
|
||||
-3 84 -34 24 -662 24 -696 0z"/>
|
||||
</g>
|
||||
</svg>`,
|
||||
cmd: () => this.squire.setTextAlignment('center'),
|
||||
// matches: ''
|
||||
},
|
||||
indentDecrease: {
|
||||
html: '⇤',
|
||||
cmd: () => squire.changeIndentationLevel('decrease'),
|
||||
key: ']'
|
||||
rightAlign: {
|
||||
html: `<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 128.000000 128.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M122 1158 c-15 -15 -15 -61 0 -76 17 -17 1019 -17 1036 0 7 7 12 24
|
||||
12 38 0 14 -5 31 -12 38 -17 17 -1019 17 -1036 0z"/>
|
||||
<path d="M442 838 c-7 -7 -12 -24 -12 -38 0 -14 5 -31 12 -38 17 -17 699 -17
|
||||
716 0 15 15 15 61 0 76 -17 17 -699 17 -716 0z"/>
|
||||
<path d="M122 518 c-15 -15 -15 -61 0 -76 17 -17 1019 -17 1036 0 7 7 12 24
|
||||
12 38 0 14 -5 31 -12 38 -17 17 -1019 17 -1036 0z"/>
|
||||
<path d="M442 198 c-7 -7 -12 -24 -12 -38 0 -14 5 -31 12 -38 17 -17 699 -17
|
||||
716 0 15 15 15 61 0 76 -17 17 -699 17 -716 0z"/>
|
||||
</g>
|
||||
</svg>`,
|
||||
cmd: () => this.squire.setTextAlignment('right'),
|
||||
// matches: ''
|
||||
},
|
||||
indentIncrease: {
|
||||
html: '⇥',
|
||||
cmd: () => squire.changeIndentationLevel('increase'),
|
||||
key: '['
|
||||
justifyAlign: {
|
||||
html: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 128.000000 128.000000" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g><path style="opacity:0.881" fill="#000000" d="M 13.5,9.5 C 46.835,9.33335 80.1683,9.50002 113.5,10C 118.833,13.6667 118.833,17.3333 113.5,21C 80.1667,21.6667 46.8333,21.6667 13.5,21C 8.24751,17.1732 8.24751,13.3399 13.5,9.5 Z"/></g>
|
||||
<g><path style="opacity:0.882" fill="#000000" d="M 13.5,41.5 C 46.835,41.3333 80.1683,41.5 113.5,42C 118.833,45.6667 118.833,49.3333 113.5,53C 80.1667,53.6667 46.8333,53.6667 13.5,53C 8.24751,49.1732 8.24751,45.3399 13.5,41.5 Z"/></g>
|
||||
<g><path style="opacity:0.882" fill="#000000" d="M 13.5,73.5 C 46.835,73.3333 80.1683,73.5 113.5,74C 118.833,77.6667 118.833,81.3333 113.5,85C 80.1667,85.6667 46.8333,85.6667 13.5,85C 8.24751,81.1732 8.24751,77.3399 13.5,73.5 Z"/></g>
|
||||
<g><path style="opacity:0.882" fill="#000000" d="M 13.5,105.5 C 46.835,105.333 80.1683,105.5 113.5,106C 118.833,109.667 118.833,113.333 113.5,117C 80.1667,117.667 46.8333,117.667 13.5,117C 8.24751,113.173 8.24751,109.34 13.5,105.5 Z"/></g>
|
||||
</svg>`,
|
||||
cmd: () => this.squire.setTextAlignment('justify'),
|
||||
// matches: ''
|
||||
},
|
||||
},
|
||||
dir: {
|
||||
dir_ltr: {
|
||||
html: `<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128.000000 128.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M452 1109 c-47 -14 -109 -79 -123 -131 -23 -88 12 -182 87 -228 26
|
||||
-17 57 -24 110 -28 l73 -5 3 -130 c3 -111 6 -131 20 -141 13 -8 23 -8 36 0 15
|
||||
10 17 38 20 303 l2 291 40 0 40 0 2 -291 c3 -265 5 -293 21 -303 12 -8 22 -8
|
||||
35 0 15 10 17 38 20 302 l2 291 52 3 c58 3 81 25 62 56 -10 15 -34 17 -240 19
|
||||
-126 1 -244 -3 -262 -8z m148 -190 l0 -121 -65 4 c-58 3 -69 8 -98 36 -27 28
|
||||
-32 40 -32 81 0 39 5 55 25 76 33 36 54 44 118 44 l52 1 0 -121z"/>
|
||||
<path d="M812 348 c-16 -16 -15 -45 1 -55 6 -4 -98 -10 -232 -13 -218 -4 -245
|
||||
-7 -255 -23 -8 -12 -8 -22 0 -35 10 -15 35 -17 253 -20 238 -2 241 -3 229 -22
|
||||
-15 -24 -1 -53 27 -58 21 -5 125 94 125 118 0 20 -101 120 -121 120 -8 0 -20
|
||||
-5 -27 -12z"/>
|
||||
</g>
|
||||
</svg>`,
|
||||
cmd: () => this.squire.setTextDirection('ltr')
|
||||
},
|
||||
dir_rtl: {
|
||||
html: `<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128.000000 128.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M452 1109 c-47 -14 -109 -79 -123 -131 -23 -88 12 -182 87 -228 26
|
||||
-17 57 -24 110 -28 l73 -5 3 -130 c3 -111 6 -131 20 -141 13 -8 23 -8 36 0 15
|
||||
10 17 38 20 303 l2 291 40 0 40 0 2 -291 c3 -265 5 -293 21 -303 12 -8 22 -8
|
||||
35 0 15 10 17 38 20 302 l2 291 52 3 c58 3 81 25 62 56 -10 15 -34 17 -240 19
|
||||
-126 1 -244 -3 -262 -8z m148 -190 l0 -121 -65 4 c-58 3 -69 8 -98 36 -27 28
|
||||
-32 40 -32 81 0 39 5 55 25 76 33 36 54 44 118 44 l52 1 0 -121z"/>
|
||||
<path d="M373 308 c-29 -30 -53 -60 -53 -69 0 -23 105 -121 125 -117 28 5 42
|
||||
34 27 58 -12 19 -9 20 229 22 218 3 243 5 253 20 8 13 8 23 0 35 -10 16 -35
|
||||
18 -253 21 -238 2 -241 3 -229 22 10 15 10 25 2 38 -21 32 -47 25 -101 -30z"/>
|
||||
</g>
|
||||
</svg>`,
|
||||
cmd: () => this.squire.setTextDirection('rtl')
|
||||
}
|
||||
},
|
||||
targets: {
|
||||
link: {
|
||||
html: '🔗',
|
||||
cmd: () => {
|
||||
let node = squire.getSelectionClosest('A'),
|
||||
let node = this.squire.getSelection(),
|
||||
url = prompt("Link", node?.href || "https://");
|
||||
if (url != null) {
|
||||
url.length ? squire.makeLink(url) : (node && squire.removeLink());
|
||||
url.length ? this.squire.makeLink(url) : (node && this.squire.removeLink());
|
||||
}
|
||||
},
|
||||
matches: 'A'
|
||||
|
|
@ -235,9 +394,9 @@ class SquireUI
|
|||
imageUrl: {
|
||||
html: '🖼️',
|
||||
cmd: () => {
|
||||
let node = squire.getSelectionClosest('IMG'),
|
||||
let node = this.squire.getSelection(),
|
||||
src = prompt("Image", node?.src || "https://");
|
||||
src?.length ? squire.insertImage(src) : node?.remove();
|
||||
src?.length ? this.squire.insertImage(src) : (node && this.squire.detach(node));
|
||||
},
|
||||
matches: 'IMG'
|
||||
},
|
||||
|
|
@ -255,12 +414,12 @@ class SquireUI
|
|||
changes: {
|
||||
undo: {
|
||||
html: '↶',
|
||||
cmd: () => squire.undo(),
|
||||
cmd: () => this.squire.undo(),
|
||||
key: 'Z'
|
||||
},
|
||||
redo: {
|
||||
html: '↷',
|
||||
cmd: () => squire.redo(),
|
||||
cmd: () => this.squire.redo(),
|
||||
key: 'Y'
|
||||
},
|
||||
source: {
|
||||
|
|
@ -275,7 +434,7 @@ class SquireUI
|
|||
clear: {
|
||||
removeStyle: {
|
||||
html: '⎚',
|
||||
cmd: () => squire.setStyle()
|
||||
cmd: () => this.squire.setStyle()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -317,7 +476,7 @@ class SquireUI
|
|||
if (browseImage.files.length) {
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(browseImage.files[0]);
|
||||
reader.onloadend = () => reader.result && squire.insertImage(reader.result);
|
||||
reader.onloadend = () => reader.result && this.squire.insertImage(reader.result);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -403,12 +562,12 @@ class SquireUI
|
|||
|
||||
this.modeSelect = actions.mode.plain.input;
|
||||
|
||||
let changes = actions.changes;
|
||||
changes.undo.input.disabled = changes.redo.input.disabled = true;
|
||||
squire.addEventListener('undoStateChange', e => {
|
||||
changes.undo.input.disabled = !e.detail.canUndo;
|
||||
changes.redo.input.disabled = !e.detail.canRedo;
|
||||
});
|
||||
// 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;
|
||||
// });
|
||||
|
||||
actions.font.fontSize.input.selectedIndex = actions.font.fontSize.defaultValueIndex;
|
||||
|
||||
|
|
@ -540,9 +699,8 @@ class SquireUI
|
|||
}
|
||||
|
||||
doList(type) {
|
||||
let parent = this.squire.getSelectionClosest('UL,OL')?.nodeName,
|
||||
fn = {UL:'makeUnorderedList',OL:'makeOrderedList'};
|
||||
(parent == type) ? this.squire.removeList() : this.squire[fn[type]]();
|
||||
let fn = {ul:'makeUnorderedList',ol:'makeOrderedList'};
|
||||
this.squire.hasFormat(type) ? this.squire.removeList() : this.squire[fn[type]]()
|
||||
}
|
||||
/*
|
||||
testPresenceinSelection(format, validation) {
|
||||
|
|
|
|||
|
|
@ -2,11 +2,15 @@
|
|||
.squire-toolbar {
|
||||
border-bottom: 1px solid #b6b6b6;
|
||||
min-height: 28px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 2px;
|
||||
overflow: hidden;
|
||||
padding: 10px 5px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
box-sizing: content-box;
|
||||
|
||||
}
|
||||
|
||||
.squire-toolbar input[type="color"] {
|
||||
|
|
@ -17,18 +21,31 @@
|
|||
width: 40px;
|
||||
}
|
||||
|
||||
.squire-toolbar input[type="color"][list="squire-colors"] {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.squire-toolbar select {
|
||||
font-size: 85%;
|
||||
padding: 4px 1.5em 4px 6px;
|
||||
text-align: var(--left, left);
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
width: 7em;
|
||||
width: fit-content;;
|
||||
background-color: unset;
|
||||
border: unset;
|
||||
text-shadow: none;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.squire-toolbar select[data-action="fontSize"] {
|
||||
width: 5em;
|
||||
}
|
||||
.squire-toolbar button {
|
||||
font-family: snappymail, var(--fontSans)
|
||||
font-family: snappymail, var(--fontSans);
|
||||
padding: 2px 10px 4px 10px !important;
|
||||
background-color: unset;
|
||||
border: unset;
|
||||
text-shadow: none;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.squire-toolbar button[data-action="bold"] {
|
||||
font-weight: bold;
|
||||
|
|
@ -44,6 +61,25 @@
|
|||
text-decoration: line-through;
|
||||
}
|
||||
*/
|
||||
.squire-toolbar button:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.squire-toolbar button img {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.squire-toolbar button svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .squire-toolbar.btn-toolbar div.btn-group {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.squire-wysiwyg, .squire-plain {
|
||||
height: 100%;
|
||||
|
|
@ -55,16 +91,19 @@
|
|||
|
||||
.squire-wysiwyg {
|
||||
font-family: var(--fontSans);
|
||||
line-height: 1.6;
|
||||
|
||||
ul {
|
||||
padding-left: 40px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
li {
|
||||
list-style-type: disc !important;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-left: 40px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
li {
|
||||
list-style-type: decimal !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -428,7 +428,11 @@
|
|||
"IMAGEUPLOAD": "Image select",
|
||||
"UNDO": "Undo",
|
||||
"REDO": "Redo",
|
||||
"REMOVESTYLE": "Remove style"
|
||||
"REMOVESTYLE": "Remove style",
|
||||
"LEFTALIGN": "Right",
|
||||
"CENTERALIGN": "Center",
|
||||
"RIGHTALIGN": "Left",
|
||||
"JUSTIFYALIGN": "Justify"
|
||||
},
|
||||
"SETTINGS_LABELS": {
|
||||
"GENERAL": "General",
|
||||
|
|
|
|||
|
|
@ -428,7 +428,11 @@
|
|||
"IMAGEUPLOAD": "Image select",
|
||||
"UNDO": "Undo",
|
||||
"REDO": "Redo",
|
||||
"REMOVESTYLE": "Remove style"
|
||||
"REMOVESTYLE": "Remove style",
|
||||
"LEFTALIGN": "Right",
|
||||
"CENTERALIGN": "Center",
|
||||
"RIGHTALIGN": "Left",
|
||||
"JUSTIFYALIGN": "Justify"
|
||||
},
|
||||
"SETTINGS_LABELS": {
|
||||
"GENERAL": "عمومی",
|
||||
|
|
@ -465,8 +469,8 @@
|
|||
"LAYOUT_HORIZONTAL_SPLIT": "تقسیم افقی",
|
||||
"SHOW_NEXT_MESSAGE": "Show next message when (re)move current message",
|
||||
"EDITOR": "ویرایشگر پیشفرض",
|
||||
"EDITOR_HTML": "تحت فرمت Html",
|
||||
"EDITOR_PLAIN": "ساده",
|
||||
"EDITOR_HTML": "فرمت HTML",
|
||||
"EDITOR_PLAIN": "فرمت ساده",
|
||||
"VIEW_OPTIONS": "مشاهده گزینهها",
|
||||
"USE_PREVIEW_PANE": "استفاده از پنجره پیشنمایش",
|
||||
"HIDE_DELETED_MESSAGES": "پنهان کردن پیام های علامت گذاری شده برای حذف",
|
||||
|
|
|
|||
|
|
@ -63,7 +63,8 @@ config.paths.js = {
|
|||
'vendors/bootstrap/js/bootstrap.native.js',
|
||||
'vendors/knockout/build/output/knockout-latest.js',
|
||||
// 'vendors/knockout/build/output/knockout-latest.debug.js',
|
||||
'vendors/squire/build/squire-raw.js',
|
||||
'vendors/dompurify/dist/purify.js',
|
||||
'vendors/squire-rte/dist/squire-raw.js',
|
||||
'vendors/mathiasbynens/punycode.js',
|
||||
'dev/External/SquireUI.js'
|
||||
]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue