fix quill toolbar heading

This commit is contained in:
SvyatoslavArtymovych 2023-05-15 22:07:56 +03:00
parent f0f7ca66fc
commit a823442792
8 changed files with 146684 additions and 6 deletions

View File

@ -0,0 +1,413 @@
.ql-container.ql-disabled .ql-editor-readonly ul[data-checked] > li::before {
pointer-events: none;
}
.ql-editor-readonly {
box-sizing: border-box;
line-height: 1.42;
outline: none;
overflow-y: auto;
padding: 12px 15px;
tab-size: 4;
-moz-tab-size: 4;
text-align: left;
word-wrap: break-word;
max-width: 100%;
overflow-x: hidden;
}
.ql-editor-readonly > * {
cursor: text;
}
.ql-editor-readonly p,
.ql-editor-readonly ol,
.ql-editor-readonly ul,
.ql-editor-readonly pre,
.ql-editor-readonly blockquote,
.ql-editor-readonly h1,
.ql-editor-readonly h2,
.ql-editor-readonly h3,
.ql-editor-readonly h4,
.ql-editor-readonly h5,
.ql-editor-readonly h6 {
margin: 0;
padding: 0;
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor-readonly ol,
.ql-editor-readonly ul {
padding-left: 1.5em;
}
.ql-editor-readonly ol > li,
.ql-editor-readonly ul > li {
list-style-type: none;
}
.ql-editor-readonly ul > li::before {
content: '\2022';
}
.ql-editor-readonly ul[data-checked='true'],
.ql-editor-readonly ul[data-checked='false'] {
pointer-events: none;
}
.ql-editor-readonly ul[data-checked='true'] > li *,
.ql-editor-readonly ul[data-checked='false'] > li * {
pointer-events: all;
}
.ql-editor-readonly ul[data-checked='true'] > li::before,
.ql-editor-readonly ul[data-checked='false'] > li::before {
color: #777;
cursor: pointer;
pointer-events: all;
}
.ql-editor-readonly ul[data-checked='true'] > li::before {
content: '\2611';
}
.ql-editor-readonly ul[data-checked='false'] > li::before {
content: '\2610';
}
.ql-editor-readonly li::before {
display: inline-block;
white-space: nowrap;
width: 1.2em;
}
.ql-editor-readonly li:not(.ql-direction-rtl)::before {
margin-left: -1.5em;
margin-right: 0.3em;
text-align: right;
}
.ql-editor-readonly li.ql-direction-rtl::before {
margin-left: 0.3em;
margin-right: -1.5em;
}
.ql-editor-readonly ol li:not(.ql-direction-rtl),
.ql-editor-readonly ul li:not(.ql-direction-rtl) {
padding-left: 1.5em;
}
.ql-editor-readonly ol li.ql-direction-rtl,
.ql-editor-readonly ul li.ql-direction-rtl {
padding-right: 1.5em;
}
.ql-editor-readonly ol li {
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
counter-increment: list-0;
}
.ql-editor-readonly ol li:before {
content: counter(list-0, decimal) '. ';
}
.ql-editor-readonly ol li.ql-indent-1 {
counter-increment: list-1;
}
.ql-editor-readonly ol li.ql-indent-1:before {
content: counter(list-1, lower-alpha) '. ';
}
.ql-editor-readonly ol li.ql-indent-1 {
counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor-readonly ol li.ql-indent-2 {
counter-increment: list-2;
}
.ql-editor-readonly ol li.ql-indent-2:before {
content: counter(list-2, lower-roman) '. ';
}
.ql-editor-readonly ol li.ql-indent-2 {
counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor-readonly ol li.ql-indent-3 {
counter-increment: list-3;
}
.ql-editor-readonly ol li.ql-indent-3:before {
content: counter(list-3, decimal) '. ';
}
.ql-editor-readonly ol li.ql-indent-3 {
counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor-readonly ol li.ql-indent-4 {
counter-increment: list-4;
}
.ql-editor-readonly ol li.ql-indent-4:before {
content: counter(list-4, lower-alpha) '. ';
}
.ql-editor-readonly ol li.ql-indent-4 {
counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor-readonly ol li.ql-indent-5 {
counter-increment: list-5;
}
.ql-editor-readonly ol li.ql-indent-5:before {
content: counter(list-5, lower-roman) '. ';
}
.ql-editor-readonly ol li.ql-indent-5 {
counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor-readonly ol li.ql-indent-6 {
counter-increment: list-6;
}
.ql-editor-readonly ol li.ql-indent-6:before {
content: counter(list-6, decimal) '. ';
}
.ql-editor-readonly ol li.ql-indent-6 {
counter-reset: list-7 list-8 list-9;
}
.ql-editor-readonly ol li.ql-indent-7 {
counter-increment: list-7;
}
.ql-editor-readonly ol li.ql-indent-7:before {
content: counter(list-7, lower-alpha) '. ';
}
.ql-editor-readonly ol li.ql-indent-7 {
counter-reset: list-8 list-9;
}
.ql-editor-readonly ol li.ql-indent-8 {
counter-increment: list-8;
}
.ql-editor-readonly ol li.ql-indent-8:before {
content: counter(list-8, lower-roman) '. ';
}
.ql-editor-readonly ol li.ql-indent-8 {
counter-reset: list-9;
}
.ql-editor-readonly ol li.ql-indent-9 {
counter-increment: list-9;
}
.ql-editor-readonly ol li.ql-indent-9:before {
content: counter(list-9, decimal) '. ';
}
.ql-editor-readonly .ql-indent-1:not(.ql-direction-rtl) {
padding-left: 3em;
}
.ql-editor-readonly li.ql-indent-1:not(.ql-direction-rtl) {
padding-left: 4.5em;
}
.ql-editor-readonly .ql-indent-1.ql-direction-rtl.ql-align-right {
padding-right: 3em;
}
.ql-editor-readonly li.ql-indent-1.ql-direction-rtl.ql-align-right {
padding-right: 4.5em;
}
.ql-editor-readonly .ql-indent-2:not(.ql-direction-rtl) {
padding-left: 6em;
}
.ql-editor-readonly li.ql-indent-2:not(.ql-direction-rtl) {
padding-left: 7.5em;
}
.ql-editor-readonly .ql-indent-2.ql-direction-rtl.ql-align-right {
padding-right: 6em;
}
.ql-editor-readonly li.ql-indent-2.ql-direction-rtl.ql-align-right {
padding-right: 7.5em;
}
.ql-editor-readonly .ql-indent-3:not(.ql-direction-rtl) {
padding-left: 9em;
}
.ql-editor-readonly li.ql-indent-3:not(.ql-direction-rtl) {
padding-left: 10.5em;
}
.ql-editor-readonly .ql-indent-3.ql-direction-rtl.ql-align-right {
padding-right: 9em;
}
.ql-editor-readonly li.ql-indent-3.ql-direction-rtl.ql-align-right {
padding-right: 10.5em;
}
.ql-editor-readonly .ql-indent-4:not(.ql-direction-rtl) {
padding-left: 12em;
}
.ql-editor-readonly li.ql-indent-4:not(.ql-direction-rtl) {
padding-left: 13.5em;
}
.ql-editor-readonly .ql-indent-4.ql-direction-rtl.ql-align-right {
padding-right: 12em;
}
.ql-editor-readonly li.ql-indent-4.ql-direction-rtl.ql-align-right {
padding-right: 13.5em;
}
.ql-editor-readonly .ql-indent-5:not(.ql-direction-rtl) {
padding-left: 15em;
}
.ql-editor-readonly li.ql-indent-5:not(.ql-direction-rtl) {
padding-left: 16.5em;
}
.ql-editor-readonly .ql-indent-5.ql-direction-rtl.ql-align-right {
padding-right: 15em;
}
.ql-editor-readonly li.ql-indent-5.ql-direction-rtl.ql-align-right {
padding-right: 16.5em;
}
.ql-editor-readonly .ql-indent-6:not(.ql-direction-rtl) {
padding-left: 18em;
}
.ql-editor-readonly li.ql-indent-6:not(.ql-direction-rtl) {
padding-left: 19.5em;
}
.ql-editor-readonly .ql-indent-6.ql-direction-rtl.ql-align-right {
padding-right: 18em;
}
.ql-editor-readonly li.ql-indent-6.ql-direction-rtl.ql-align-right {
padding-right: 19.5em;
}
.ql-editor-readonly .ql-indent-7:not(.ql-direction-rtl) {
padding-left: 21em;
}
.ql-editor-readonly li.ql-indent-7:not(.ql-direction-rtl) {
padding-left: 22.5em;
}
.ql-editor-readonly .ql-indent-7.ql-direction-rtl.ql-align-right {
padding-right: 21em;
}
.ql-editor-readonly li.ql-indent-7.ql-direction-rtl.ql-align-right {
padding-right: 22.5em;
}
.ql-editor-readonly .ql-indent-8:not(.ql-direction-rtl) {
padding-left: 24em;
}
.ql-editor-readonly li.ql-indent-8:not(.ql-direction-rtl) {
padding-left: 25.5em;
}
.ql-editor-readonly .ql-indent-8.ql-direction-rtl.ql-align-right {
padding-right: 24em;
}
.ql-editor-readonly li.ql-indent-8.ql-direction-rtl.ql-align-right {
padding-right: 25.5em;
}
.ql-editor-readonly .ql-indent-9:not(.ql-direction-rtl) {
padding-left: 27em;
}
.ql-editor-readonly li.ql-indent-9:not(.ql-direction-rtl) {
padding-left: 28.5em;
}
.ql-editor-readonly .ql-indent-9.ql-direction-rtl.ql-align-right {
padding-right: 27em;
}
.ql-editor-readonly li.ql-indent-9.ql-direction-rtl.ql-align-right {
padding-right: 28.5em;
}
.ql-editor-readonly .ql-video {
display: block;
max-width: 100%;
}
.ql-editor-readonly .ql-video.ql-align-center {
margin: 0 auto;
}
.ql-editor-readonly .ql-video.ql-align-right {
margin: 0 0 0 auto;
}
.ql-editor-readonly .ql-bg-black {
background-color: #000;
}
.ql-editor-readonly .ql-bg-red {
background-color: #e60000;
}
.ql-editor-readonly .ql-bg-orange {
background-color: #f90;
}
.ql-editor-readonly .ql-bg-yellow {
background-color: #ff0;
}
.ql-editor-readonly .ql-bg-green {
background-color: #008a00;
}
.ql-editor-readonly .ql-bg-purple {
background-color: #93f;
}
.ql-editor-readonly .ql-color-white {
color: #fff;
}
.ql-editor-readonly .ql-color-red {
color: #e60000;
}
.ql-editor-readonly .ql-color-orange {
color: #f90;
}
.ql-editor-readonly .ql-color-yellow {
color: #ff0;
}
.ql-editor-readonly .ql-color-green {
color: #008a00;
}
.ql-editor-readonly .ql-color-purple {
color: #93f;
}
.ql-editor-readonly .ql-font-serif {
font-family: Georgia, Times New Roman, serif;
}
.ql-editor-readonly .ql-font-monospace {
font-family: Monaco, Courier New, monospace;
}
.ql-editor-readonly .ql-size-small {
font-size: 0.75em;
}
.ql-editor-readonly .ql-size-large {
font-size: 1.5em;
}
.ql-editor-readonly .ql-size-huge {
font-size: 2.5em;
}
.ql-editor-readonly .ql-direction-rtl {
direction: rtl;
text-align: inherit;
}
.ql-editor-readonly .ql-align-center {
text-align: center;
}
.ql-editor-readonly .ql-align-justify {
text-align: justify;
}
.ql-editor-readonly .ql-align-right {
text-align: right;
}
.ql-editor-readonly.ql-blank::before {
color: rgba(0, 0, 0, 0.6);
content: attr(data-placeholder);
font-style: italic;
left: 15px;
pointer-events: none;
position: absolute;
right: 15px;
}
.ql-snow .ql-editor-readonly h1 {
font-size: 2em;
}
.ql-snow .ql-editor-readonly h2 {
font-size: 1.5em;
}
.ql-snow .ql-editor-readonly h3 {
font-size: 1.17em;
}
.ql-snow .ql-editor-readonly h4 {
font-size: 1em;
}
.ql-snow .ql-editor-readonly h5 {
font-size: 0.83em;
}
.ql-snow .ql-editor-readonly h6 {
font-size: 0.67em;
}
.ql-snow .ql-editor-readonly a {
text-decoration: underline;
}
.ql-snow .ql-editor-readonly blockquote {
border-left: 4px solid #ccc;
margin-bottom: 5px;
margin-top: 5px;
padding-left: 16px;
}
.ql-snow .ql-editor-readonly code,
.ql-snow .ql-editor-readonly pre {
background-color: #f0f0f0;
border-radius: 3px;
}
.ql-snow .ql-editor-readonly pre {
white-space: pre-wrap;
margin-bottom: 5px;
margin-top: 5px;
padding: 5px 10px;
}
.ql-snow .ql-editor-readonly code {
font-size: 85%;
padding: 2px 4px;
}
.ql-snow .ql-editor-readonly pre.ql-syntax {
background-color: #23241f;
color: #f8f8f2;
overflow: visible;
}
.ql-snow .ql-editor-readonly img {
max-width: 100%;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -14,6 +14,8 @@
<!-- prettier-ignore -->
<link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet" />
<!-- prettier-ignore -->
<link href="{{ url_for('static', filename='css/quill_readonly.snow.css') }}" rel="stylesheet" />
<!-- prettier-ignore -->
<link href="{{ url_for('static', filename='css/quill.snow.css') }}" rel="stylesheet" />
<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC

View File

@ -92,7 +92,8 @@
<div class="p-6 pt-0 space-y-6">
<div class="w-full max-w-6xl mx-auto rounded-xl bg-gray-50 dark:bg-gray-600 shadow-lg text-white-900">
<div class="overflow-hidden rounded-md bg-gray-50 [&>*]:dark:bg-gray-600 text-black [&>*]:!border-none [&>*]:!stroke-black dark:text-white dark:[&>*]:!stroke-white">
<div id="interpretation-text" class="quill-editor dark:text-white h-64"></div>
<div id="interpretation-text" class="quill-editor dark:text-white h-64">
</div>
</div>
</div>
</div>

View File

@ -1,12 +1,31 @@
const Quill = require('./quill');
export function initQuill() {
var icons = Quill.import('ui/icons');
console.log(icons['header']);
// prettier-ignore
icons.header['false'] = '<svg style="scale: 1.6;" xmlns="http://www.w3.org/2000/svg" fill="#000000"viewBox="-8 -7 24 24" preserveAspectRatio="xMinYMin"><path d="M2 4h4V1a1 1 0 1 1 2 0v8a1 1 0 1 1-2 0V6H2v3a1 1 0 1 1-2 0V1a1 1 0 1 1 2 0v3z"/></svg>';
icons.header[1] = `<svg style="scale: 1.6;" xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="-5 -7 24 24" preserveAspectRatio="xMinYMin"><path d="M2 4h4V1a1 1 0 1 1 2 0v8a1 1 0 1 1-2 0V6H2v3a1 1 0 1 1-2 0V1a1 1 0 1 1 2 0v3zm9.52.779H10V3h3.36v7h-1.84V4.779z"/></svg>`;
icons.header[2] = `<svg style="scale: 1.6;" xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="-4.5 -7 24 24" preserveAspectRatio="xMinYMin"><path d="M2 4h4V1a1 1 0 1 1 2 0v8a1 1 0 1 1-2 0V6H2v3a1 1 0 1 1-2 0V1a1 1 0 1 1 2 0v3zm12.88 4.352V10H10V8.986l.1-.246 1.785-1.913c.43-.435.793-.77.923-1.011.124-.23.182-.427.182-.587 0-.14-.04-.242-.127-.327a.469.469 0 0 0-.351-.127.443.443 0 0 0-.355.158c-.105.117-.165.288-.173.525l-.012.338h-1.824l.016-.366c.034-.735.272-1.33.718-1.77.446-.44 1.02-.66 1.703-.66.424 0 .805.091 1.14.275.336.186.606.455.806.8.198.343.3.7.3 1.063 0 .416-.23.849-.456 1.307-.222.45-.534.876-1.064 1.555l-.116.123-.254.229h1.938z"/></svg>`;
icons.header[3] = `<svg style="scale: 1.6;" xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="-4.5 -6.5 24 24" preserveAspectRatio="xMinYMin"><path d="M2 4h4V1a1 1 0 1 1 2 0v8a1 1 0 1 1-2 0V6H2v3a1 1 0 1 1-2 0V1a1 1 0 1 1 2 0v3zm12.453 2.513l.043.055c.254.334.38.728.38 1.172 0 .637-.239 1.187-.707 1.628-.466.439-1.06.658-1.763.658-.671 0-1.235-.209-1.671-.627-.436-.418-.673-.983-.713-1.676L10 7.353h1.803l.047.295c.038.238.112.397.215.49.1.091.23.137.402.137a.566.566 0 0 0 .422-.159.5.5 0 0 0 .158-.38c0-.163-.067-.295-.224-.419-.17-.134-.438-.21-.815-.215l-.345-.004v-1.17l.345-.004c.377-.004.646-.08.815-.215.157-.124.224-.255.224-.418a.5.5 0 0 0-.158-.381.566.566 0 0 0-.422-.159.568.568 0 0 0-.402.138c-.103.092-.177.251-.215.489l-.047.295H10l.022-.37c.04-.693.277-1.258.713-1.675.436-.419 1-.628 1.67-.628.704 0 1.298.22 1.764.658.468.441.708.991.708 1.629a1.892 1.892 0 0 1-.424 1.226z"/></svg>`;
icons.header[4] = `<svg style="scale: 1.6;" xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="-4.5 -7 24 24" preserveAspectRatio="xMinYMin"><path d="M2 4h4V1a1 1 0 1 1 2 0v8a1 1 0 1 1-2 0V6H2v3a1 1 0 1 1-2 0V1a1 1 0 1 1 2 0v3zm10.636 4.74H10V7.302l.06-.198 2.714-4.11h1.687v3.952h.538V8.74h-.538V10h-1.825V8.74zm.154-1.283V5.774l-1.1 1.683h1.1z"/></svg>`;
icons.header[5] = `<svg style="scale: 1.6;" xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="-4 -6.5 24 24" preserveAspectRatio="xMinYMin"><path d="M2 4h4V1a1 1 0 1 1 2 0v8a1 1 0 1 1-2 0V6H2v3a1 1 0 1 1-2 0V1a1 1 0 1 1 2 0v3zm8.003 4.317h2.68c.386 0 .699-.287.699-.642 0-.355-.313-.642-.698-.642H10.01l.002-.244L10 3h5.086v1.888h-3.144l.014.617h1.114c1.355 0 2.469.984 2.523 2.23.052 1.21-.972 2.231-2.288 2.28l-.095.001-3.21-.02V8.73l.003-.414z"/></svg>`;
icons.header[6] = `<svg style="scale: 1.6;" xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="-4.5 -7 24 24" preserveAspectRatio="xMinYMin"><path d="M2 4h4V1a1 1 0 1 1 2 0v8a1 1 0 1 1-2 0V6H2v3a1 1 0 1 1-2 0V1a1 1 0 1 1 2 0v3zm11.949 2.057c.43.44.651.999.651 1.64 0 .629-.228 1.18-.67 1.62-.442.437-.99.663-1.613.663a2.212 2.212 0 0 1-1.649-.693c-.43-.45-.652-.985-.652-1.58 0-.224.034-.449.1-.672.063-.211.664-1.627.837-1.966.251-.491.65-1.204 1.197-2.137l1.78.652-.917 1.88c.249.113.733.386.936.593zm-1.63.765a.85.85 0 0 0-.858.863.85.85 0 0 0 .252.613.865.865 0 0 0 1.48-.614.844.844 0 0 0-.25-.611.866.866 0 0 0-.623-.251z"/></svg>`;
var toolbarOptions = [
['bold', 'italic', 'underline'],
[{list: 'ordered'}, {list: 'bullet'}],
[{header: [1, 2, 3, 4, 5, 6, false]}],
[{indent: '-1'}, {indent: '+1'}],
['clean'],
[
{header: false},
{header: 1},
{header: 2},
{header: 3},
{header: 4},
{header: 5},
{header: 6},
],
];
const qlEditors: NodeListOf<HTMLElement> =
document.querySelectorAll('.quill-editor');

View File

@ -5,6 +5,19 @@ export function initQuillReadOnly() {
const ql = el.querySelector('.ql-editor');
if (ql) {
ql.removeAttribute('contenteditable');
ql.classList.remove('ql-editor');
ql.classList.add('ql-editor-readonly');
}
const qlTooltip = el.querySelector('.ql-tooltip');
if (qlTooltip) {
qlTooltip.remove();
}
const qlClipboard = el.querySelector('.ql-clipboard');
if (qlClipboard) {
qlClipboard.remove();
}
});
}

View File

@ -10,6 +10,7 @@ import {initApprove} from './approve';
import {initStar} from './star';
import {initQuillReadOnly} from './initQuillReadOnly';
initQuillReadOnly();
initBooks();
initContributors();
initQuill();
@ -20,4 +21,3 @@ initVote();
initTheme();
initApprove();
initStar();
initQuillReadOnly();