From 333f1e6d4f1a1868abd7337f51c5afe11d26505d Mon Sep 17 00:00:00 2001 From: Mohammad Rezaei Date: Sun, 29 Sep 2024 11:48:53 +0330 Subject: [PATCH] Added alignment feature to editor and improved some styles --- dev/External/SquireUI.js | 232 ++++++++++++++++++++++++++++------ dev/Styles/User/SquireUI.less | 51 ++++++-- 2 files changed, 235 insertions(+), 48 deletions(-) diff --git a/dev/External/SquireUI.js b/dev/External/SquireUI.js index e770433bd..35ac4c6b1 100644 --- a/dev/External/SquireUI.js +++ b/dev/External/SquireUI.js @@ -130,16 +130,6 @@ class SquireUI // } // } }, - dir: { - dir_ltr: { - html: '⁋', - cmd: () => squire.setTextDirection('ltr') - }, - dir_rtl: { - html: '¶', - cmd: () => squire.setTextDirection('rtl') - } - }, colors: { textColor: { html: 'A▾', @@ -189,45 +179,208 @@ class SquireUI } }, block: { + quote: { + html: '"', + cmd: () => this.squire.hasFormat('blockquote') ? this.doAction('decreaseQuoteLevel') : this.doAction('increaseQuoteLevel'), + matches: 'BLOCKQUOTE' + }, + indentDecrease: { + html: ` + + + + + + + `, + cmd: () => this.doAction('decreaseQuoteLevel'), + key: ']' + }, + indentIncrease: { + html: ` + + + + + + + + + + `, + cmd: () => this.doAction('increaseQuoteLevel'), + key: '[' + }, ol: { - html: '#', - cmd: () => this.doList('OL'), + html: ` + + + + + + + `, + cmd: () => this.doList('ol'), key: 'Shift + 8', matches: 'OL' }, ul: { - html: '⋮', - cmd: () => this.doList('UL'), + html: ` + + + + + + + + + + `, + cmd: () => this.doList('ul'), key: 'Shift + 9', matches: 'UL' + } + }, + alighnment: { + leftAlign: { + html: ` + + + + + + + + `, + 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: ` + + + + + + + + `, + cmd: () => this.squire.setTextAlignment('center'), + // matches: '' }, - indentDecrease: { - html: '⇤', - cmd: () => squire.changeIndentationLevel('decrease'), - key: ']' + rightAlign: { + html: ` + + + + + + + + `, + cmd: () => this.squire.setTextAlignment('right'), + // matches: '' }, - indentIncrease: { - html: '⇥', - cmd: () => squire.changeIndentationLevel('increase'), - key: '[' + justifyAlign: { + html: ` + + + + + `, + cmd: () => this.squire.setTextAlignment('justify'), + // matches: '' + }, + }, + dir: { + dir_ltr: { + html: ` + + + + + + `, + cmd: () => this.squire.setTextDirection('ltr') + }, + dir_rtl: { + html: ` + + + + + + `, + 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 +388,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 +408,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 +428,7 @@ class SquireUI clear: { removeStyle: { html: '⎚', - cmd: () => squire.setStyle() + cmd: () => this.squire.setStyle() } } }, @@ -317,7 +470,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); } } @@ -547,9 +700,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) { diff --git a/dev/Styles/User/SquireUI.less b/dev/Styles/User/SquireUI.less index 646ee4dd1..d0bb0c171 100644 --- a/dev/Styles/User/SquireUI.less +++ b/dev/Styles/User/SquireUI.less @@ -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,21 @@ text-decoration: line-through; } */ +.squire-toolbar button:hover { + transform: scale(1.2); +} + +.squire-toolbar button svg { + width: 18px; + height: 18px; + margin-top: 8px; + fill: var(--btn-clr, #333); +} + +[dir="rtl"] .squire-toolbar.btn-toolbar div.btn-group { + display: flex; + flex-direction: row-reverse; +} .squire-wysiwyg, .squire-plain { height: 100%; @@ -55,16 +87,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; }