Replace Quill with Tiptap rich text editor
- Bundle Tiptap 2 (StarterKit, Link, Underline) with esbuild into public/vendor/tiptap.bundle.js — fully self-hosted, no CDN needed - Remove Quill (quill.min.js, quill.snow.css, patchQuillTooltip hack) - Headless Tiptap editor: custom toolbar (bold/italic/underline/strike, headings, lists, blockquote, code, link) with active-state highlighting - Link insertion: inline link bar below toolbar (no popup, no tooltip) — type URL, press Apply or Enter; Remove button to unset - Mini editor for question text and option text (same toggle UX) - ProseMirror content styles: headings, lists, blockquote, code, links
This commit is contained in:
Daniel Onyejesi
parent
7b91883e88
commit
8c8b4b8153
6 changed files with 339 additions and 1074 deletions
|
|
@ -660,30 +660,47 @@ body{font-family:'Inter',system-ui,sans-serif;background:var(--g50);color:var(--
|
|||
.lh-option-row .lh-opt-expl{width:100%;}
|
||||
}
|
||||
|
||||
/* ── Quill editor overrides ───────────────────────────────── */
|
||||
/* No overflow:hidden on wrappers — tooltip must be able to escape the container */
|
||||
.cms-quill-body{border:1px solid var(--g300);border-radius:8px;background:white;position:relative;}
|
||||
.cms-quill-body .ql-toolbar{border:none;border-bottom:1px solid var(--g200);background:var(--g50);border-radius:8px 8px 0 0;padding:8px;}
|
||||
.cms-quill-body .ql-container{border:none;font-family:'Inter',system-ui,sans-serif;font-size:14px;border-radius:0 0 8px 8px;}
|
||||
.cms-quill-body .ql-editor{min-height:280px;padding:16px;}
|
||||
.cms-quill-body .ql-editor p{margin-bottom:8px;}
|
||||
.cms-quill-body .ql-editor h2{font-size:20px;font-weight:700;margin:16px 0 8px;}
|
||||
.cms-quill-body .ql-editor h3{font-size:16px;font-weight:600;margin:12px 0 6px;}
|
||||
.cms-quill-body .ql-editor blockquote{border-left:4px solid var(--blue);padding-left:12px;color:var(--g600);margin:10px 0;}
|
||||
.cms-quill-body .ql-editor pre{background:var(--g900);color:#e5e7eb;padding:12px;border-radius:6px;font-size:13px;overflow-x:auto;}
|
||||
/* ── Tiptap editor ────────────────────────────────────────── */
|
||||
.cms-quill-body{border:1px solid var(--g300);border-radius:8px;background:white;overflow:hidden;}
|
||||
.cms-quill-body .tp-content .ProseMirror{min-height:280px;padding:16px;outline:none;font-size:14px;font-family:'Inter',system-ui,sans-serif;line-height:1.6;}
|
||||
|
||||
/* Quill tooltip is moved to document.body by JS — just needs z-index */
|
||||
.ql-tooltip{z-index:10000 !important;}
|
||||
/* Shared ProseMirror content styles */
|
||||
.ProseMirror{outline:none;}
|
||||
.ProseMirror p{margin-bottom:8px;}
|
||||
.ProseMirror h2{font-size:20px;font-weight:700;margin:16px 0 8px;}
|
||||
.ProseMirror h3{font-size:16px;font-weight:600;margin:12px 0 6px;}
|
||||
.ProseMirror blockquote{border-left:4px solid var(--blue);padding-left:12px;color:var(--g600);margin:10px 0;}
|
||||
.ProseMirror pre{background:var(--g900);color:#e5e7eb;padding:12px;border-radius:6px;font-size:13px;overflow-x:auto;}
|
||||
.ProseMirror ul{padding-left:20px;margin-bottom:8px;}
|
||||
.ProseMirror ol{padding-left:20px;margin-bottom:8px;}
|
||||
.ProseMirror li{margin-bottom:3px;}
|
||||
.ProseMirror a{color:var(--blue);text-decoration:underline;}
|
||||
.ProseMirror code{background:var(--g100);padding:1px 5px;border-radius:3px;font-size:0.9em;}
|
||||
.ProseMirror p.is-editor-empty:first-child::before{content:attr(data-placeholder);color:var(--g400);pointer-events:none;float:left;height:0;}
|
||||
|
||||
/* Mini quill on questions/options */
|
||||
.lh-q-richtext-wrap{border:1.5px solid var(--g300);border-radius:8px;margin-bottom:8px;position:relative;}
|
||||
.lh-q-richtext-wrap .ql-toolbar{border:none;border-bottom:1px solid var(--g200);background:var(--g50);padding:4px 6px;border-radius:8px 8px 0 0;}
|
||||
.lh-q-richtext-wrap .ql-container{border:none;font-size:14px;font-family:'Inter',system-ui,sans-serif;}
|
||||
.lh-q-richtext-wrap .ql-editor{min-height:60px;padding:10px;}
|
||||
.lh-opt-richtext-wrap{border:1.5px solid var(--g300);border-radius:6px;flex:2;position:relative;}
|
||||
.lh-opt-richtext-wrap .ql-toolbar{border:none;border-bottom:1px solid var(--g200);background:var(--g50);padding:2px 4px;border-radius:6px 6px 0 0;}
|
||||
.lh-opt-richtext-wrap .ql-container{border:none;font-size:13px;font-family:'Inter',system-ui,sans-serif;}
|
||||
.lh-opt-richtext-wrap .ql-editor{min-height:40px;padding:6px 8px;}
|
||||
/* Tiptap toolbar */
|
||||
.tp-toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:6px 8px;background:var(--g50);border-bottom:1px solid var(--g200);}
|
||||
.tp-btn{height:28px;min-width:28px;padding:0 6px;border:none;background:transparent;cursor:pointer;border-radius:4px;font-size:12px;color:var(--g600);display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-weight:600;transition:background 0.1s;}
|
||||
.tp-btn:hover{background:var(--g200);color:var(--g800);}
|
||||
.tp-btn.active{background:var(--blue-light);color:var(--blue);}
|
||||
.tp-sep{width:1px;background:var(--g300);margin:2px 3px;align-self:stretch;}
|
||||
.tp-toolbar-mini{padding:4px 6px;}
|
||||
.tp-toolbar-mini .tp-btn{height:24px;min-width:24px;font-size:11px;}
|
||||
|
||||
/* Link bar — inline, no popup */
|
||||
.tp-link-bar{display:none;align-items:center;gap:6px;padding:6px 10px;background:#fffbeb;border-bottom:1px solid var(--amber);font-size:13px;}
|
||||
.tp-link-input{flex:1;padding:5px 10px;border:1px solid var(--g300);border-radius:6px;font-size:13px;font-family:inherit;min-width:0;}
|
||||
.tp-link-apply{padding:4px 12px;background:var(--blue);color:white;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;}
|
||||
.tp-link-apply:hover{background:#1d4ed8;}
|
||||
.tp-link-remove{padding:4px 10px;background:var(--red-light);color:var(--red);border:1px solid var(--red);border-radius:6px;cursor:pointer;font-size:12px;}
|
||||
.tp-link-cancel{padding:4px 8px;background:transparent;border:none;cursor:pointer;color:var(--g400);font-size:14px;}
|
||||
.tp-content{position:relative;}
|
||||
|
||||
/* Mini richtext wraps for questions/options */
|
||||
.lh-q-richtext-wrap{border:1.5px solid var(--g300);border-radius:8px;overflow:hidden;margin-bottom:8px;}
|
||||
.lh-q-richtext-wrap .tp-content .ProseMirror{min-height:60px;padding:10px;font-size:14px;}
|
||||
.lh-opt-richtext-wrap{border:1.5px solid var(--g300);border-radius:6px;overflow:hidden;flex:2;}
|
||||
.lh-opt-richtext-wrap .tp-content .ProseMirror{min-height:36px;padding:6px 8px;font-size:13px;}
|
||||
|
||||
/* Rich text toggle button */
|
||||
.lh-richtext-btn{font-size:11px;padding:3px 8px;border:1px solid var(--g300);border-radius:4px;background:white;cursor:pointer;color:var(--g500);white-space:nowrap;}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="/vendor/quill.snow.css">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<meta name="theme-color" content="#2563eb">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
|
|
@ -266,7 +265,7 @@
|
|||
<div id="toast-container" class="toast-container"></div>
|
||||
|
||||
<!-- SCRIPTS (defer for faster initial paint) -->
|
||||
<script src="/vendor/quill.min.js"></script>
|
||||
<script src="/vendor/tiptap.bundle.js"></script>
|
||||
<script defer src="/js/milestonesData.js"></script>
|
||||
<script defer src="/js/pediatricScheduleData.js"></script>
|
||||
<script defer src="/js/app.js"></script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
var cmsLoaded = false;
|
||||
var currentContent = null;
|
||||
var currentView = 'feed'; // 'feed' | 'category' | 'viewer'
|
||||
var _bodyQuill = null; // Quill instance for body editor
|
||||
var _bodyEditor = null; // Tiptap Editor instance for body
|
||||
|
||||
// ── Load when tab activated ────────────────────────────────
|
||||
document.addEventListener('tabChanged', function(e) {
|
||||
|
|
@ -581,86 +581,165 @@
|
|||
renderCmsContentList(filtered);
|
||||
}
|
||||
|
||||
// ── Quill tooltip fix ─────────────────────────────────────
|
||||
// Moves the tooltip element to document.body so overflow:hidden on
|
||||
// ancestor containers cannot clip it. Recalculates position to
|
||||
// viewport (fixed) coordinates on every show.
|
||||
function patchQuillTooltip(q) {
|
||||
var tooltip = q && q.theme && q.theme.tooltip;
|
||||
if (!tooltip || !tooltip.root) return;
|
||||
var el = tooltip.root;
|
||||
document.body.appendChild(el);
|
||||
el.style.position = 'fixed';
|
||||
el.style.zIndex = '10000';
|
||||
// ── Tiptap editor helpers ──────────────────────────────────
|
||||
var T = window.Tiptap || {};
|
||||
|
||||
var origPosition = tooltip.position.bind(tooltip);
|
||||
tooltip.position = function(reference) {
|
||||
origPosition(reference);
|
||||
// Quill sets left/top as container-relative; convert to viewport coords
|
||||
var rect = q.container.getBoundingClientRect();
|
||||
var l = rect.left + parseFloat(el.style.left || 0);
|
||||
var t = rect.top + parseFloat(el.style.top || 0);
|
||||
// Clamp to viewport
|
||||
var tw = el.offsetWidth || 200;
|
||||
var th = el.offsetHeight || 40;
|
||||
if (l + tw > window.innerWidth - 8) l = window.innerWidth - tw - 8;
|
||||
if (l < 8) l = 8;
|
||||
if (t + th > window.innerHeight - 8) t = rect.top + parseFloat(el.style.top || 0) - th - 8;
|
||||
if (t < 8) t = 8;
|
||||
el.style.left = l + 'px';
|
||||
el.style.top = t + 'px';
|
||||
};
|
||||
function buildTpToolbar(mini, isOption) {
|
||||
var btns;
|
||||
if (isOption) {
|
||||
btns = '<button type="button" class="tp-btn" data-cmd="bold" title="Bold"><i class="fas fa-bold"></i></button>' +
|
||||
'<button type="button" class="tp-btn" data-cmd="italic" title="Italic"><i class="fas fa-italic"></i></button>' +
|
||||
'<button type="button" class="tp-btn" data-cmd="link" title="Link"><i class="fas fa-link"></i></button>';
|
||||
} else if (mini) {
|
||||
btns = '<button type="button" class="tp-btn" data-cmd="bold" title="Bold"><i class="fas fa-bold"></i></button>' +
|
||||
'<button type="button" class="tp-btn" data-cmd="italic" title="Italic"><i class="fas fa-italic"></i></button>' +
|
||||
'<button type="button" class="tp-btn" data-cmd="bulletList" title="List"><i class="fas fa-list-ul"></i></button>' +
|
||||
'<button type="button" class="tp-btn" data-cmd="link" title="Link"><i class="fas fa-link"></i></button>';
|
||||
} else {
|
||||
btns = '<button type="button" class="tp-btn" data-cmd="bold" title="Bold"><i class="fas fa-bold"></i></button>' +
|
||||
'<button type="button" class="tp-btn" data-cmd="italic" title="Italic"><i class="fas fa-italic"></i></button>' +
|
||||
'<button type="button" class="tp-btn" data-cmd="underline" title="Underline"><i class="fas fa-underline"></i></button>' +
|
||||
'<button type="button" class="tp-btn" data-cmd="strike" title="Strike"><i class="fas fa-strikethrough"></i></button>' +
|
||||
'<span class="tp-sep"></span>' +
|
||||
'<button type="button" class="tp-btn" data-cmd="h2" title="Heading 2">H2</button>' +
|
||||
'<button type="button" class="tp-btn" data-cmd="h3" title="Heading 3">H3</button>' +
|
||||
'<span class="tp-sep"></span>' +
|
||||
'<button type="button" class="tp-btn" data-cmd="bulletList" title="Bullet List"><i class="fas fa-list-ul"></i></button>' +
|
||||
'<button type="button" class="tp-btn" data-cmd="orderedList" title="Numbered List"><i class="fas fa-list-ol"></i></button>' +
|
||||
'<button type="button" class="tp-btn" data-cmd="blockquote" title="Blockquote"><i class="fas fa-quote-left"></i></button>' +
|
||||
'<button type="button" class="tp-btn" data-cmd="codeBlock" title="Code"><i class="fas fa-code"></i></button>' +
|
||||
'<span class="tp-sep"></span>' +
|
||||
'<button type="button" class="tp-btn" data-cmd="link" title="Link"><i class="fas fa-link"></i></button>' +
|
||||
'<span class="tp-sep"></span>' +
|
||||
'<button type="button" class="tp-btn" data-cmd="clear" title="Clear formatting"><i class="fas fa-remove-format"></i></button>';
|
||||
}
|
||||
return '<div class="tp-toolbar' + (mini ? ' tp-toolbar-mini' : '') + '">' + btns + '</div>' +
|
||||
'<div class="tp-link-bar" style="display:none;">' +
|
||||
'<input type="url" class="tp-link-input" placeholder="https://">' +
|
||||
'<button type="button" class="tp-link-apply">Apply</button>' +
|
||||
'<button type="button" class="tp-link-remove">Remove</button>' +
|
||||
'<button type="button" class="tp-link-cancel">✕</button>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
// ── Quill body editor ─────────────────────────────────────
|
||||
function initBodyEditor() {
|
||||
var container = document.getElementById('lh-body-editor');
|
||||
if (!container || _bodyQuill) return;
|
||||
_bodyQuill = new Quill(container, {
|
||||
theme: 'snow',
|
||||
modules: {
|
||||
toolbar: [
|
||||
[{ header: [2, 3, false] }],
|
||||
['bold', 'italic', 'underline', 'strike'],
|
||||
[{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
|
||||
['blockquote', 'code-block'],
|
||||
['link'],
|
||||
[{ color: [] }],
|
||||
['clean']
|
||||
]
|
||||
function wireTpToolbar(wrap, editor) {
|
||||
var linkBar = wrap.querySelector('.tp-link-bar');
|
||||
var linkInput = wrap.querySelector('.tp-link-input');
|
||||
|
||||
wrap.querySelector('.tp-toolbar').addEventListener('mousedown', function(e) {
|
||||
var btn = e.target.closest('.tp-btn[data-cmd]');
|
||||
if (!btn) return;
|
||||
e.preventDefault();
|
||||
var cmd = btn.dataset.cmd;
|
||||
switch (cmd) {
|
||||
case 'bold': editor.chain().focus().toggleBold().run(); break;
|
||||
case 'italic': editor.chain().focus().toggleItalic().run(); break;
|
||||
case 'underline': editor.chain().focus().toggleUnderline().run(); break;
|
||||
case 'strike': editor.chain().focus().toggleStrike().run(); break;
|
||||
case 'h2': editor.chain().focus().toggleHeading({ level: 2 }).run(); break;
|
||||
case 'h3': editor.chain().focus().toggleHeading({ level: 3 }).run(); break;
|
||||
case 'bulletList': editor.chain().focus().toggleBulletList().run(); break;
|
||||
case 'orderedList': editor.chain().focus().toggleOrderedList().run(); break;
|
||||
case 'blockquote': editor.chain().focus().toggleBlockquote().run(); break;
|
||||
case 'codeBlock': editor.chain().focus().toggleCodeBlock().run(); break;
|
||||
case 'clear': editor.chain().focus().unsetAllMarks().clearNodes().run(); break;
|
||||
case 'link':
|
||||
if (linkBar.style.display === 'none') {
|
||||
linkInput.value = editor.getAttributes('link').href || '';
|
||||
linkBar.style.display = 'flex';
|
||||
setTimeout(function() { linkInput.focus(); }, 0);
|
||||
} else {
|
||||
linkBar.style.display = 'none';
|
||||
}
|
||||
break;
|
||||
}
|
||||
updateTpState(wrap, editor);
|
||||
});
|
||||
|
||||
wrap.querySelector('.tp-link-apply').addEventListener('mousedown', function(e) {
|
||||
e.preventDefault();
|
||||
var url = linkInput.value.trim();
|
||||
if (url) editor.chain().focus().setLink({ href: url }).run();
|
||||
linkBar.style.display = 'none';
|
||||
});
|
||||
wrap.querySelector('.tp-link-remove').addEventListener('mousedown', function(e) {
|
||||
e.preventDefault();
|
||||
editor.chain().focus().unsetLink().run();
|
||||
linkBar.style.display = 'none';
|
||||
});
|
||||
wrap.querySelector('.tp-link-cancel').addEventListener('mousedown', function(e) {
|
||||
e.preventDefault();
|
||||
linkBar.style.display = 'none';
|
||||
});
|
||||
linkInput.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter') { e.preventDefault(); wrap.querySelector('.tp-link-apply').dispatchEvent(new MouseEvent('mousedown')); }
|
||||
if (e.key === 'Escape') linkBar.style.display = 'none';
|
||||
});
|
||||
patchQuillTooltip(_bodyQuill);
|
||||
}
|
||||
|
||||
// Mini Quill for question text or option text
|
||||
function makeMinQuill(container, existingHtml, isOption) {
|
||||
var toolbar = isOption
|
||||
? [['bold', 'italic'], ['link']]
|
||||
: [['bold', 'italic'], [{ list: 'ordered' }, { list: 'bullet' }], ['link'], ['clean']];
|
||||
var q = new Quill(container, {
|
||||
theme: 'snow',
|
||||
modules: { toolbar: toolbar }
|
||||
function updateTpState(wrap, editor) {
|
||||
wrap.querySelectorAll('.tp-btn[data-cmd]').forEach(function(btn) {
|
||||
var a = false;
|
||||
switch (btn.dataset.cmd) {
|
||||
case 'bold': a = editor.isActive('bold'); break;
|
||||
case 'italic': a = editor.isActive('italic'); break;
|
||||
case 'underline': a = editor.isActive('underline'); break;
|
||||
case 'strike': a = editor.isActive('strike'); break;
|
||||
case 'h2': a = editor.isActive('heading', { level: 2 }); break;
|
||||
case 'h3': a = editor.isActive('heading', { level: 3 }); break;
|
||||
case 'bulletList': a = editor.isActive('bulletList'); break;
|
||||
case 'orderedList': a = editor.isActive('orderedList'); break;
|
||||
case 'blockquote': a = editor.isActive('blockquote'); break;
|
||||
case 'codeBlock': a = editor.isActive('codeBlock'); break;
|
||||
case 'link': a = editor.isActive('link'); break;
|
||||
}
|
||||
btn.classList.toggle('active', a);
|
||||
});
|
||||
patchQuillTooltip(q);
|
||||
if (existingHtml) q.clipboard.dangerouslyPasteHTML(existingHtml);
|
||||
return q;
|
||||
}
|
||||
|
||||
// Toggle rich text on a question text area or option text area
|
||||
function makeTpEditor(wrap, existingHtml, mini, isOption) {
|
||||
wrap.innerHTML = buildTpToolbar(mini, isOption) + '<div class="tp-content"></div>';
|
||||
var ed = new T.Editor({
|
||||
element: wrap.querySelector('.tp-content'),
|
||||
extensions: [
|
||||
T.StarterKit,
|
||||
T.Link.configure({ openOnClick: false, autolink: true }),
|
||||
T.Underline
|
||||
],
|
||||
content: existingHtml || '',
|
||||
onUpdate: function() { updateTpState(wrap, ed); },
|
||||
onSelectionUpdate: function() { updateTpState(wrap, ed); }
|
||||
});
|
||||
wireTpToolbar(wrap, ed);
|
||||
return ed;
|
||||
}
|
||||
|
||||
function getTpHTML(editor) {
|
||||
if (!editor) return '';
|
||||
var html = editor.getHTML();
|
||||
return (html === '<p></p>' || html === '') ? '' : html;
|
||||
}
|
||||
|
||||
// ── Body editor ────────────────────────────────────────────
|
||||
function initBodyEditor() {
|
||||
var wrap = document.getElementById('lh-body-editor');
|
||||
if (!wrap || _bodyEditor) return;
|
||||
_bodyEditor = makeTpEditor(wrap, '', false, false);
|
||||
}
|
||||
|
||||
// ── Rich text toggle for questions / options ───────────────
|
||||
function toggleRichText(btn) {
|
||||
var isActive = btn.classList.contains('active');
|
||||
var target = btn.dataset.target; // 'question' or 'option'
|
||||
var target = btn.dataset.target;
|
||||
var block = btn.closest(target === 'question' ? '.lh-question-block' : '.lh-option-row');
|
||||
if (!block) return;
|
||||
|
||||
if (target === 'question') {
|
||||
var ta = block.querySelector('.lh-q-text');
|
||||
var ta = block.querySelector('.lh-q-text');
|
||||
var wrap = block.querySelector('.lh-q-richtext-wrap');
|
||||
|
||||
if (!isActive) {
|
||||
// Enable: hide textarea, show quill
|
||||
var currentVal = ta ? ta.value : '';
|
||||
var val = ta ? ta.value : '';
|
||||
btn.classList.add('active');
|
||||
btn.textContent = 'Plain Text';
|
||||
if (ta) ta.style.display = 'none';
|
||||
|
|
@ -670,27 +749,20 @@
|
|||
ta.parentNode.insertBefore(wrap, ta.nextSibling);
|
||||
}
|
||||
wrap.style.display = '';
|
||||
if (!block._questionQuill) {
|
||||
block._questionQuill = makeMinQuill(wrap, currentVal, false);
|
||||
} else {
|
||||
wrap.style.display = '';
|
||||
}
|
||||
if (!block._questionEditor) block._questionEditor = makeTpEditor(wrap, val, true, false);
|
||||
} else {
|
||||
// Disable: get HTML from quill, restore textarea
|
||||
btn.classList.remove('active');
|
||||
btn.textContent = 'Rich Text';
|
||||
if (block._questionQuill) {
|
||||
var html = block._questionQuill.root.innerHTML;
|
||||
if (html === '<p><br></p>') html = '';
|
||||
if (ta) { ta.value = html; ta.style.display = ''; }
|
||||
if (block._questionEditor) {
|
||||
if (ta) { ta.value = getTpHTML(block._questionEditor); ta.style.display = ''; }
|
||||
}
|
||||
if (wrap) wrap.style.display = 'none';
|
||||
}
|
||||
|
||||
} else {
|
||||
// option
|
||||
var row = block;
|
||||
var row = block;
|
||||
var optInput = row.querySelector('.lh-opt-text');
|
||||
var optWrap = row.querySelector('.lh-opt-richtext-wrap');
|
||||
var optWrap = row.querySelector('.lh-opt-richtext-wrap');
|
||||
|
||||
if (!isActive) {
|
||||
var curVal = optInput ? optInput.value : '';
|
||||
|
|
@ -703,40 +775,28 @@
|
|||
optInput.parentNode.insertBefore(optWrap, optInput.nextSibling);
|
||||
}
|
||||
optWrap.style.display = '';
|
||||
if (!row._optQuill) {
|
||||
row._optQuill = makeMinQuill(optWrap, curVal, true);
|
||||
}
|
||||
if (!row._optEditor) row._optEditor = makeTpEditor(optWrap, curVal, true, true);
|
||||
} else {
|
||||
btn.classList.remove('active');
|
||||
btn.textContent = 'Rich';
|
||||
if (row._optQuill) {
|
||||
var optHtml = row._optQuill.root.innerHTML;
|
||||
if (optHtml === '<p><br></p>') optHtml = '';
|
||||
if (optInput) { optInput.value = optHtml; optInput.style.display = ''; }
|
||||
if (row._optEditor) {
|
||||
if (optInput) { optInput.value = getTpHTML(row._optEditor); optInput.style.display = ''; }
|
||||
}
|
||||
if (optWrap) optWrap.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Read question text whether in rich text mode or plain
|
||||
function getQText(block) {
|
||||
if (block._questionQuill && block.querySelector('.lh-q-richtext-wrap') &&
|
||||
block.querySelector('.lh-q-richtext-wrap').style.display !== 'none') {
|
||||
var html = block._questionQuill.root.innerHTML;
|
||||
return html === '<p><br></p>' ? '' : html;
|
||||
}
|
||||
var wrap = block.querySelector('.lh-q-richtext-wrap');
|
||||
if (block._questionEditor && wrap && wrap.style.display !== 'none') return getTpHTML(block._questionEditor);
|
||||
var ta = block.querySelector('.lh-q-text');
|
||||
return ta ? ta.value.trim() : '';
|
||||
}
|
||||
|
||||
// Read option text whether in rich text mode or plain
|
||||
function getOptText(row) {
|
||||
if (row._optQuill && row.querySelector('.lh-opt-richtext-wrap') &&
|
||||
row.querySelector('.lh-opt-richtext-wrap').style.display !== 'none') {
|
||||
var html = row._optQuill.root.innerHTML;
|
||||
return html === '<p><br></p>' ? '' : html;
|
||||
}
|
||||
var wrap = row.querySelector('.lh-opt-richtext-wrap');
|
||||
if (row._optEditor && wrap && wrap.style.display !== 'none') return getTpHTML(row._optEditor);
|
||||
var inp = row.querySelector('.lh-opt-text');
|
||||
return inp ? inp.value.trim() : '';
|
||||
}
|
||||
|
|
@ -758,7 +818,7 @@
|
|||
document.getElementById('lh-cms-questions').innerHTML = '';
|
||||
document.getElementById('btn-lh-delete-content').classList.add('hidden');
|
||||
initBodyEditor();
|
||||
if (_bodyQuill) _bodyQuill.setContents([{ insert: '\n' }]);
|
||||
if (_bodyEditor) _bodyEditor.commands.clearContent(true);
|
||||
|
||||
// For quiz type, add a starter question
|
||||
if (contentType === 'quiz' && !contentId) {
|
||||
|
|
@ -776,7 +836,7 @@
|
|||
document.getElementById('lh-cms-edit-id').value = c.id;
|
||||
document.getElementById('lh-cms-edit-title').value = c.title;
|
||||
document.getElementById('lh-cms-edit-subject').value = c.subject || '';
|
||||
if (_bodyQuill) _bodyQuill.clipboard.dangerouslyPasteHTML(c.body || '');
|
||||
if (_bodyEditor) _bodyEditor.commands.setContent(c.body || '');
|
||||
document.getElementById('lh-cms-edit-category').value = c.category_id || '';
|
||||
document.getElementById('lh-cms-edit-type').value = c.content_type || 'article';
|
||||
document.getElementById('lh-cms-edit-published').value = c.published ? 'true' : 'false';
|
||||
|
|
@ -804,7 +864,7 @@
|
|||
var id = document.getElementById('lh-cms-edit-id').value;
|
||||
var title = document.getElementById('lh-cms-edit-title').value.trim();
|
||||
var subject = document.getElementById('lh-cms-edit-subject').value.trim();
|
||||
var body = _bodyQuill ? (_bodyQuill.root.innerHTML === '<p><br></p>' ? '' : _bodyQuill.root.innerHTML) : '';
|
||||
var body = _bodyEditor ? getTpHTML(_bodyEditor) : '';
|
||||
var category_id = document.getElementById('lh-cms-edit-category').value || null;
|
||||
var content_type = document.getElementById('lh-cms-edit-type').value;
|
||||
var published = document.getElementById('lh-cms-edit-published').value === 'true';
|
||||
|
|
|
|||
8
public/vendor/quill.min.js
vendored
8
public/vendor/quill.min.js
vendored
File diff suppressed because one or more lines are too long
945
public/vendor/quill.snow.css
vendored
945
public/vendor/quill.snow.css
vendored
|
|
@ -1,945 +0,0 @@
|
|||
/*!
|
||||
* Quill Editor v1.3.7
|
||||
* https://quilljs.com/
|
||||
* Copyright (c) 2014, Jason Chen
|
||||
* Copyright (c) 2013, salesforce.com
|
||||
*/
|
||||
.ql-container {
|
||||
box-sizing: border-box;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
position: relative;
|
||||
}
|
||||
.ql-container.ql-disabled .ql-tooltip {
|
||||
visibility: hidden;
|
||||
}
|
||||
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
|
||||
pointer-events: none;
|
||||
}
|
||||
.ql-clipboard {
|
||||
left: -100000px;
|
||||
height: 1px;
|
||||
overflow-y: hidden;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
.ql-clipboard p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ql-editor {
|
||||
box-sizing: border-box;
|
||||
line-height: 1.42;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
overflow-y: auto;
|
||||
padding: 12px 15px;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 4;
|
||||
text-align: left;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.ql-editor > * {
|
||||
cursor: text;
|
||||
}
|
||||
.ql-editor p,
|
||||
.ql-editor ol,
|
||||
.ql-editor ul,
|
||||
.ql-editor pre,
|
||||
.ql-editor blockquote,
|
||||
.ql-editor h1,
|
||||
.ql-editor h2,
|
||||
.ql-editor h3,
|
||||
.ql-editor h4,
|
||||
.ql-editor h5,
|
||||
.ql-editor 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 ol,
|
||||
.ql-editor ul {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
.ql-editor ol > li,
|
||||
.ql-editor ul > li {
|
||||
list-style-type: none;
|
||||
}
|
||||
.ql-editor ul > li::before {
|
||||
content: '\2022';
|
||||
}
|
||||
.ql-editor ul[data-checked=true],
|
||||
.ql-editor ul[data-checked=false] {
|
||||
pointer-events: none;
|
||||
}
|
||||
.ql-editor ul[data-checked=true] > li *,
|
||||
.ql-editor ul[data-checked=false] > li * {
|
||||
pointer-events: all;
|
||||
}
|
||||
.ql-editor ul[data-checked=true] > li::before,
|
||||
.ql-editor ul[data-checked=false] > li::before {
|
||||
color: #777;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
}
|
||||
.ql-editor ul[data-checked=true] > li::before {
|
||||
content: '\2611';
|
||||
}
|
||||
.ql-editor ul[data-checked=false] > li::before {
|
||||
content: '\2610';
|
||||
}
|
||||
.ql-editor li::before {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
width: 1.2em;
|
||||
}
|
||||
.ql-editor li:not(.ql-direction-rtl)::before {
|
||||
margin-left: -1.5em;
|
||||
margin-right: 0.3em;
|
||||
text-align: right;
|
||||
}
|
||||
.ql-editor li.ql-direction-rtl::before {
|
||||
margin-left: 0.3em;
|
||||
margin-right: -1.5em;
|
||||
}
|
||||
.ql-editor ol li:not(.ql-direction-rtl),
|
||||
.ql-editor ul li:not(.ql-direction-rtl) {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
.ql-editor ol li.ql-direction-rtl,
|
||||
.ql-editor ul li.ql-direction-rtl {
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
.ql-editor 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 ol li:before {
|
||||
content: counter(list-0, decimal) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-1 {
|
||||
counter-increment: list-1;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-1:before {
|
||||
content: counter(list-1, lower-alpha) '. ';
|
||||
}
|
||||
.ql-editor 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 ol li.ql-indent-2 {
|
||||
counter-increment: list-2;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-2:before {
|
||||
content: counter(list-2, lower-roman) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-2 {
|
||||
counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-3 {
|
||||
counter-increment: list-3;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-3:before {
|
||||
content: counter(list-3, decimal) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-3 {
|
||||
counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-4 {
|
||||
counter-increment: list-4;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-4:before {
|
||||
content: counter(list-4, lower-alpha) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-4 {
|
||||
counter-reset: list-5 list-6 list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-5 {
|
||||
counter-increment: list-5;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-5:before {
|
||||
content: counter(list-5, lower-roman) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-5 {
|
||||
counter-reset: list-6 list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-6 {
|
||||
counter-increment: list-6;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-6:before {
|
||||
content: counter(list-6, decimal) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-6 {
|
||||
counter-reset: list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-7 {
|
||||
counter-increment: list-7;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-7:before {
|
||||
content: counter(list-7, lower-alpha) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-7 {
|
||||
counter-reset: list-8 list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-8 {
|
||||
counter-increment: list-8;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-8:before {
|
||||
content: counter(list-8, lower-roman) '. ';
|
||||
}
|
||||
.ql-editor ol li.ql-indent-8 {
|
||||
counter-reset: list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-9 {
|
||||
counter-increment: list-9;
|
||||
}
|
||||
.ql-editor ol li.ql-indent-9:before {
|
||||
content: counter(list-9, decimal) '. ';
|
||||
}
|
||||
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
|
||||
padding-left: 3em;
|
||||
}
|
||||
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
|
||||
padding-left: 4.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 3em;
|
||||
}
|
||||
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 4.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
|
||||
padding-left: 6em;
|
||||
}
|
||||
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
|
||||
padding-left: 7.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 6em;
|
||||
}
|
||||
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 7.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
|
||||
padding-left: 9em;
|
||||
}
|
||||
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
|
||||
padding-left: 10.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 9em;
|
||||
}
|
||||
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 10.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
|
||||
padding-left: 12em;
|
||||
}
|
||||
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
|
||||
padding-left: 13.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 12em;
|
||||
}
|
||||
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 13.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
|
||||
padding-left: 15em;
|
||||
}
|
||||
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
|
||||
padding-left: 16.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 15em;
|
||||
}
|
||||
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 16.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
|
||||
padding-left: 18em;
|
||||
}
|
||||
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
|
||||
padding-left: 19.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 18em;
|
||||
}
|
||||
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 19.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
|
||||
padding-left: 21em;
|
||||
}
|
||||
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
|
||||
padding-left: 22.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 21em;
|
||||
}
|
||||
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 22.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
|
||||
padding-left: 24em;
|
||||
}
|
||||
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
|
||||
padding-left: 25.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 24em;
|
||||
}
|
||||
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 25.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
|
||||
padding-left: 27em;
|
||||
}
|
||||
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
|
||||
padding-left: 28.5em;
|
||||
}
|
||||
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 27em;
|
||||
}
|
||||
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 28.5em;
|
||||
}
|
||||
.ql-editor .ql-video {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
.ql-editor .ql-video.ql-align-center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.ql-editor .ql-video.ql-align-right {
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
.ql-editor .ql-bg-black {
|
||||
background-color: #000;
|
||||
}
|
||||
.ql-editor .ql-bg-red {
|
||||
background-color: #e60000;
|
||||
}
|
||||
.ql-editor .ql-bg-orange {
|
||||
background-color: #f90;
|
||||
}
|
||||
.ql-editor .ql-bg-yellow {
|
||||
background-color: #ff0;
|
||||
}
|
||||
.ql-editor .ql-bg-green {
|
||||
background-color: #008a00;
|
||||
}
|
||||
.ql-editor .ql-bg-blue {
|
||||
background-color: #06c;
|
||||
}
|
||||
.ql-editor .ql-bg-purple {
|
||||
background-color: #93f;
|
||||
}
|
||||
.ql-editor .ql-color-white {
|
||||
color: #fff;
|
||||
}
|
||||
.ql-editor .ql-color-red {
|
||||
color: #e60000;
|
||||
}
|
||||
.ql-editor .ql-color-orange {
|
||||
color: #f90;
|
||||
}
|
||||
.ql-editor .ql-color-yellow {
|
||||
color: #ff0;
|
||||
}
|
||||
.ql-editor .ql-color-green {
|
||||
color: #008a00;
|
||||
}
|
||||
.ql-editor .ql-color-blue {
|
||||
color: #06c;
|
||||
}
|
||||
.ql-editor .ql-color-purple {
|
||||
color: #93f;
|
||||
}
|
||||
.ql-editor .ql-font-serif {
|
||||
font-family: Georgia, Times New Roman, serif;
|
||||
}
|
||||
.ql-editor .ql-font-monospace {
|
||||
font-family: Monaco, Courier New, monospace;
|
||||
}
|
||||
.ql-editor .ql-size-small {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
.ql-editor .ql-size-large {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.ql-editor .ql-size-huge {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
.ql-editor .ql-direction-rtl {
|
||||
direction: rtl;
|
||||
text-align: inherit;
|
||||
}
|
||||
.ql-editor .ql-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
.ql-editor .ql-align-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
.ql-editor .ql-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
.ql-editor.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-toolbar:after,
|
||||
.ql-snow .ql-toolbar:after {
|
||||
clear: both;
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
.ql-snow.ql-toolbar button,
|
||||
.ql-snow .ql-toolbar button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
height: 24px;
|
||||
padding: 3px 5px;
|
||||
width: 28px;
|
||||
}
|
||||
.ql-snow.ql-toolbar button svg,
|
||||
.ql-snow .ql-toolbar button svg {
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
.ql-snow.ql-toolbar button:active:hover,
|
||||
.ql-snow .ql-toolbar button:active:hover {
|
||||
outline: none;
|
||||
}
|
||||
.ql-snow.ql-toolbar input.ql-image[type=file],
|
||||
.ql-snow .ql-toolbar input.ql-image[type=file] {
|
||||
display: none;
|
||||
}
|
||||
.ql-snow.ql-toolbar button:hover,
|
||||
.ql-snow .ql-toolbar button:hover,
|
||||
.ql-snow.ql-toolbar button:focus,
|
||||
.ql-snow .ql-toolbar button:focus,
|
||||
.ql-snow.ql-toolbar button.ql-active,
|
||||
.ql-snow .ql-toolbar button.ql-active,
|
||||
.ql-snow.ql-toolbar .ql-picker-label:hover,
|
||||
.ql-snow .ql-toolbar .ql-picker-label:hover,
|
||||
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
|
||||
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
|
||||
.ql-snow.ql-toolbar .ql-picker-item:hover,
|
||||
.ql-snow .ql-toolbar .ql-picker-item:hover,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
|
||||
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
|
||||
color: #06c;
|
||||
}
|
||||
.ql-snow.ql-toolbar button:hover .ql-fill,
|
||||
.ql-snow .ql-toolbar button:hover .ql-fill,
|
||||
.ql-snow.ql-toolbar button:focus .ql-fill,
|
||||
.ql-snow .ql-toolbar button:focus .ql-fill,
|
||||
.ql-snow.ql-toolbar button.ql-active .ql-fill,
|
||||
.ql-snow .ql-toolbar button.ql-active .ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
|
||||
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
|
||||
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
|
||||
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
|
||||
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
|
||||
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
|
||||
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
|
||||
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
|
||||
fill: #06c;
|
||||
}
|
||||
.ql-snow.ql-toolbar button:hover .ql-stroke,
|
||||
.ql-snow .ql-toolbar button:hover .ql-stroke,
|
||||
.ql-snow.ql-toolbar button:focus .ql-stroke,
|
||||
.ql-snow .ql-toolbar button:focus .ql-stroke,
|
||||
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
|
||||
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
|
||||
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
|
||||
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
|
||||
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
|
||||
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
|
||||
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
|
||||
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
|
||||
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
|
||||
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
|
||||
stroke: #06c;
|
||||
}
|
||||
@media (pointer: coarse) {
|
||||
.ql-snow.ql-toolbar button:hover:not(.ql-active),
|
||||
.ql-snow .ql-toolbar button:hover:not(.ql-active) {
|
||||
color: #444;
|
||||
}
|
||||
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
|
||||
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
|
||||
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
|
||||
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
|
||||
fill: #444;
|
||||
}
|
||||
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
|
||||
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
|
||||
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
|
||||
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
|
||||
stroke: #444;
|
||||
}
|
||||
}
|
||||
.ql-snow {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ql-snow * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ql-snow .ql-hidden {
|
||||
display: none;
|
||||
}
|
||||
.ql-snow .ql-out-bottom,
|
||||
.ql-snow .ql-out-top {
|
||||
visibility: hidden;
|
||||
}
|
||||
.ql-snow .ql-tooltip {
|
||||
position: absolute;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
.ql-snow .ql-tooltip a {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ql-snow .ql-tooltip.ql-flip {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
.ql-snow .ql-formats {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ql-snow .ql-formats:after {
|
||||
clear: both;
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
.ql-snow .ql-stroke {
|
||||
fill: none;
|
||||
stroke: #444;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.ql-snow .ql-stroke-miter {
|
||||
fill: none;
|
||||
stroke: #444;
|
||||
stroke-miterlimit: 10;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.ql-snow .ql-fill,
|
||||
.ql-snow .ql-stroke.ql-fill {
|
||||
fill: #444;
|
||||
}
|
||||
.ql-snow .ql-empty {
|
||||
fill: none;
|
||||
}
|
||||
.ql-snow .ql-even {
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
.ql-snow .ql-thin,
|
||||
.ql-snow .ql-stroke.ql-thin {
|
||||
stroke-width: 1;
|
||||
}
|
||||
.ql-snow .ql-transparent {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.ql-snow .ql-direction svg:last-child {
|
||||
display: none;
|
||||
}
|
||||
.ql-snow .ql-direction.ql-active svg:last-child {
|
||||
display: inline;
|
||||
}
|
||||
.ql-snow .ql-direction.ql-active svg:first-child {
|
||||
display: none;
|
||||
}
|
||||
.ql-snow .ql-editor h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
.ql-snow .ql-editor h2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.ql-snow .ql-editor h3 {
|
||||
font-size: 1.17em;
|
||||
}
|
||||
.ql-snow .ql-editor h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
.ql-snow .ql-editor h5 {
|
||||
font-size: 0.83em;
|
||||
}
|
||||
.ql-snow .ql-editor h6 {
|
||||
font-size: 0.67em;
|
||||
}
|
||||
.ql-snow .ql-editor a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.ql-snow .ql-editor blockquote {
|
||||
border-left: 4px solid #ccc;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.ql-snow .ql-editor code,
|
||||
.ql-snow .ql-editor pre {
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.ql-snow .ql-editor pre {
|
||||
white-space: pre-wrap;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.ql-snow .ql-editor code {
|
||||
font-size: 85%;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
.ql-snow .ql-editor pre.ql-syntax {
|
||||
background-color: #23241f;
|
||||
color: #f8f8f2;
|
||||
overflow: visible;
|
||||
}
|
||||
.ql-snow .ql-editor img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.ql-snow .ql-picker {
|
||||
color: #444;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ql-snow .ql-picker-label {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
padding-left: 8px;
|
||||
padding-right: 2px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.ql-snow .ql-picker-label::before {
|
||||
display: inline-block;
|
||||
line-height: 22px;
|
||||
}
|
||||
.ql-snow .ql-picker-options {
|
||||
background-color: #fff;
|
||||
display: none;
|
||||
min-width: 100%;
|
||||
padding: 4px 8px;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ql-snow .ql-picker-options .ql-picker-item {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
|
||||
color: #ccc;
|
||||
z-index: 2;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
|
||||
fill: #ccc;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
|
||||
stroke: #ccc;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
|
||||
display: block;
|
||||
margin-top: -1px;
|
||||
top: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.ql-snow .ql-color-picker,
|
||||
.ql-snow .ql-icon-picker {
|
||||
width: 28px;
|
||||
}
|
||||
.ql-snow .ql-color-picker .ql-picker-label,
|
||||
.ql-snow .ql-icon-picker .ql-picker-label {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
.ql-snow .ql-color-picker .ql-picker-label svg,
|
||||
.ql-snow .ql-icon-picker .ql-picker-label svg {
|
||||
right: 4px;
|
||||
}
|
||||
.ql-snow .ql-icon-picker .ql-picker-options {
|
||||
padding: 4px 0px;
|
||||
}
|
||||
.ql-snow .ql-icon-picker .ql-picker-item {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
.ql-snow .ql-color-picker .ql-picker-options {
|
||||
padding: 3px 5px;
|
||||
width: 152px;
|
||||
}
|
||||
.ql-snow .ql-color-picker .ql-picker-item {
|
||||
border: 1px solid transparent;
|
||||
float: left;
|
||||
height: 16px;
|
||||
margin: 2px;
|
||||
padding: 0px;
|
||||
width: 16px;
|
||||
}
|
||||
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
|
||||
position: absolute;
|
||||
margin-top: -9px;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
width: 18px;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
|
||||
content: attr(data-label);
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header {
|
||||
width: 98px;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
|
||||
content: 'Normal';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
|
||||
content: 'Heading 1';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
|
||||
content: 'Heading 2';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
|
||||
content: 'Heading 3';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
|
||||
content: 'Heading 4';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
|
||||
content: 'Heading 5';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
|
||||
content: 'Heading 6';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
|
||||
font-size: 2em;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
|
||||
font-size: 1.17em;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
|
||||
font-size: 1em;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
|
||||
font-size: 0.83em;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
|
||||
font-size: 0.67em;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font {
|
||||
width: 108px;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
|
||||
content: 'Sans Serif';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
|
||||
content: 'Serif';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
|
||||
content: 'Monospace';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
|
||||
font-family: Georgia, Times New Roman, serif;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
|
||||
font-family: Monaco, Courier New, monospace;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size {
|
||||
width: 98px;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
||||
content: 'Normal';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
|
||||
content: 'Small';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
|
||||
content: 'Large';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
|
||||
content: 'Huge';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
|
||||
font-size: 10px;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
|
||||
font-size: 18px;
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
|
||||
font-size: 32px;
|
||||
}
|
||||
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
|
||||
background-color: #000;
|
||||
}
|
||||
.ql-toolbar.ql-snow {
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||
padding: 8px;
|
||||
}
|
||||
.ql-toolbar.ql-snow .ql-formats {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.ql-toolbar.ql-snow .ql-picker-label {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.ql-toolbar.ql-snow .ql-picker-options {
|
||||
border: 1px solid transparent;
|
||||
box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
|
||||
}
|
||||
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
|
||||
border-color: #ccc;
|
||||
}
|
||||
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
|
||||
border-color: #ccc;
|
||||
}
|
||||
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
|
||||
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
|
||||
border-color: #000;
|
||||
}
|
||||
.ql-toolbar.ql-snow + .ql-container.ql-snow {
|
||||
border-top: 0px;
|
||||
}
|
||||
.ql-snow .ql-tooltip {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0px 0px 5px #ddd;
|
||||
color: #444;
|
||||
padding: 5px 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ql-snow .ql-tooltip::before {
|
||||
content: "Visit URL:";
|
||||
line-height: 26px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.ql-snow .ql-tooltip input[type=text] {
|
||||
display: none;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 13px;
|
||||
height: 26px;
|
||||
margin: 0px;
|
||||
padding: 3px 5px;
|
||||
width: 170px;
|
||||
}
|
||||
.ql-snow .ql-tooltip a.ql-preview {
|
||||
display: inline-block;
|
||||
max-width: 200px;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ql-snow .ql-tooltip a.ql-action::after {
|
||||
border-right: 1px solid #ccc;
|
||||
content: 'Edit';
|
||||
margin-left: 16px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.ql-snow .ql-tooltip a.ql-remove::before {
|
||||
content: 'Remove';
|
||||
margin-left: 8px;
|
||||
}
|
||||
.ql-snow .ql-tooltip a {
|
||||
line-height: 26px;
|
||||
}
|
||||
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
|
||||
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
|
||||
display: none;
|
||||
}
|
||||
.ql-snow .ql-tooltip.ql-editing input[type=text] {
|
||||
display: inline-block;
|
||||
}
|
||||
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
|
||||
border-right: 0px;
|
||||
content: 'Save';
|
||||
padding-right: 0px;
|
||||
}
|
||||
.ql-snow .ql-tooltip[data-mode=link]::before {
|
||||
content: "Enter link:";
|
||||
}
|
||||
.ql-snow .ql-tooltip[data-mode=formula]::before {
|
||||
content: "Enter formula:";
|
||||
}
|
||||
.ql-snow .ql-tooltip[data-mode=video]::before {
|
||||
content: "Enter video:";
|
||||
}
|
||||
.ql-snow a {
|
||||
color: #06c;
|
||||
}
|
||||
.ql-container.ql-snow {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
142
public/vendor/tiptap.bundle.js
vendored
Normal file
142
public/vendor/tiptap.bundle.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue