RomanNum3ral
/
kcal
mirror of https://github.com/kcal-app/kcal.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Tweak Quill editor styling

This commit is contained in:
Christopher C. Wells 2021-03-10 05:35:42 -08:00
parent 7e5e7d5222
commit af65c5c7bb
5 changed files with 37 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/css/recipes/edit.css vendored
View File

@ -1342,3 +1342,10 @@
.ql-container.ql-snow { .ql-container.ql-snow {
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.ql-editor {
font-size: 1.125rem;
}
.ql-editor p {
margin-top: 1rem;
margin-bottom: 1rem;
}

276
public/js/recipes/edit.js vendored
View File

@ -28127,65 +28127,6 @@ let BackgroundStyle = new _color__WEBPACK_IMPORTED_MODULE_1__["ColorAttributor"]
/***/ }),
/***/ "./node_modules/quill/formats/blockquote.js":
/*!**************************************************!*\
!*** ./node_modules/quill/formats/blockquote.js ***!
\**************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _blots_block__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../blots/block */ "./node_modules/quill/blots/block.js");
class Blockquote extends _blots_block__WEBPACK_IMPORTED_MODULE_0__["default"] {}
Blockquote.blotName = 'blockquote';
Blockquote.tagName = 'blockquote';
/* harmony default export */ __webpack_exports__["default"] = (Blockquote);
/***/ }),
/***/ "./node_modules/quill/formats/bold.js":
/*!********************************************!*\
!*** ./node_modules/quill/formats/bold.js ***!
\********************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _blots_inline__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../blots/inline */ "./node_modules/quill/blots/inline.js");
class Bold extends _blots_inline__WEBPACK_IMPORTED_MODULE_0__["default"] {
static create() {
return super.create();
}
static formats() {
return true;
}
optimize(context) {
super.optimize(context);
if (this.domNode.tagName !== this.statics.tagName[0]) {
this.replaceWith(this.statics.blotName);
}
}
}
Bold.blotName = 'bold';
Bold.tagName = ['STRONG', 'B'];
/* harmony default export */ __webpack_exports__["default"] = (Bold);
/***/ }), /***/ }),
/***/ "./node_modules/quill/formats/code.js": /***/ "./node_modules/quill/formats/code.js":
@ -28430,54 +28371,6 @@ let FontStyle = new FontStyleAttributor('font', 'font-family', config);
/***/ }),
/***/ "./node_modules/quill/formats/header.js":
/*!**********************************************!*\
!*** ./node_modules/quill/formats/header.js ***!
\**********************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _blots_block__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../blots/block */ "./node_modules/quill/blots/block.js");
class Header extends _blots_block__WEBPACK_IMPORTED_MODULE_0__["default"] {
static formats(domNode) {
return this.tagName.indexOf(domNode.tagName) + 1;
}
}
Header.blotName = 'header';
Header.tagName = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
/* harmony default export */ __webpack_exports__["default"] = (Header);
/***/ }),
/***/ "./node_modules/quill/formats/italic.js":
/*!**********************************************!*\
!*** ./node_modules/quill/formats/italic.js ***!
\**********************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _bold__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./bold */ "./node_modules/quill/formats/bold.js");
class Italic extends _bold__WEBPACK_IMPORTED_MODULE_0__["default"] { }
Italic.blotName = 'italic';
Italic.tagName = ['EM', 'I'];
/* harmony default export */ __webpack_exports__["default"] = (Italic);
/***/ }), /***/ }),
/***/ "./node_modules/quill/formats/link.js": /***/ "./node_modules/quill/formats/link.js":
@ -28536,155 +28429,6 @@ function sanitize(url, protocols) {
/***/ }),
/***/ "./node_modules/quill/formats/list.js":
/*!********************************************!*\
!*** ./node_modules/quill/formats/list.js ***!
\********************************************/
/*! exports provided: ListItem, default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ListItem", function() { return ListItem; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return List; });
/* harmony import */ var parchment__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! parchment */ "./node_modules/parchment/dist/parchment.js");
/* harmony import */ var parchment__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(parchment__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _blots_block__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../blots/block */ "./node_modules/quill/blots/block.js");
/* harmony import */ var _blots_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../blots/container */ "./node_modules/quill/blots/container.js");
class ListItem extends _blots_block__WEBPACK_IMPORTED_MODULE_1__["default"] {
static formats(domNode) {
return domNode.tagName === this.tagName ? undefined : super.formats(domNode);
}
format(name, value) {
if (name === List.blotName && !value) {
this.replaceWith(parchment__WEBPACK_IMPORTED_MODULE_0___default.a.create(this.statics.scope));
} else {
super.format(name, value);
}
}
remove() {
if (this.prev == null && this.next == null) {
this.parent.remove();
} else {
super.remove();
}
}
replaceWith(name, value) {
this.parent.isolate(this.offset(this.parent), this.length());
if (name === this.parent.statics.blotName) {
this.parent.replaceWith(name, value);
return this;
} else {
this.parent.unwrap();
return super.replaceWith(name, value);
}
}
}
ListItem.blotName = 'list-item';
ListItem.tagName = 'LI';
class List extends _blots_container__WEBPACK_IMPORTED_MODULE_2__["default"] {
static create(value) {
let tagName = value === 'ordered' ? 'OL' : 'UL';
let node = super.create(tagName);
if (value === 'checked' || value === 'unchecked') {
node.setAttribute('data-checked', value === 'checked');
}
return node;
}
static formats(domNode) {
if (domNode.tagName === 'OL') return 'ordered';
if (domNode.tagName === 'UL') {
if (domNode.hasAttribute('data-checked')) {
return domNode.getAttribute('data-checked') === 'true' ? 'checked' : 'unchecked';
} else {
return 'bullet';
}
}
return undefined;
}
constructor(domNode) {
super(domNode);
const listEventHandler = (e) => {
if (e.target.parentNode !== domNode) return;
let format = this.statics.formats(domNode);
let blot = parchment__WEBPACK_IMPORTED_MODULE_0___default.a.find(e.target);
if (format === 'checked') {
blot.format('list', 'unchecked');
} else if(format === 'unchecked') {
blot.format('list', 'checked');
}
}
domNode.addEventListener('touchstart', listEventHandler);
domNode.addEventListener('mousedown', listEventHandler);
}
format(name, value) {
if (this.children.length > 0) {
this.children.tail.format(name, value);
}
}
formats() {
// We don't inherit from FormatBlot
return { [this.statics.blotName]: this.statics.formats(this.domNode) };
}
insertBefore(blot, ref) {
if (blot instanceof ListItem) {
super.insertBefore(blot, ref);
} else {
let index = ref == null ? this.length() : ref.offset(this);
let after = this.split(index);
after.parent.insertBefore(blot, after);
}
}
optimize(context) {
super.optimize(context);
let next = this.next;
if (next != null && next.prev === this &&
next.statics.blotName === this.statics.blotName &&
next.domNode.tagName === this.domNode.tagName &&
next.domNode.getAttribute('data-checked') === this.domNode.getAttribute('data-checked')) {
next.moveChildren(this);
next.remove();
}
}
replace(target) {
if (target.statics.blotName !== this.statics.blotName) {
let item = parchment__WEBPACK_IMPORTED_MODULE_0___default.a.create(this.statics.defaultChild);
target.moveChildren(item);
this.appendChild(item);
}
super.replace(target);
}
}
List.blotName = 'list';
List.scope = parchment__WEBPACK_IMPORTED_MODULE_0___default.a.Scope.BLOCK_BLOT;
List.tagName = ['OL', 'UL'];
List.defaultChild = 'list-item';
List.allowedChildren = [ListItem];
/***/ }), /***/ }),
/***/ "./node_modules/quill/formats/size.js": /***/ "./node_modules/quill/formats/size.js":
@ -31691,30 +31435,12 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var quill_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! quill/core */ "./node_modules/quill/core.js"); /* harmony import */ var quill_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! quill/core */ "./node_modules/quill/core.js");
/* harmony import */ var quill_modules_toolbar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! quill/modules/toolbar */ "./node_modules/quill/modules/toolbar.js"); /* harmony import */ var quill_modules_toolbar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! quill/modules/toolbar */ "./node_modules/quill/modules/toolbar.js");
/* harmony import */ var quill_themes_snow__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! quill/themes/snow */ "./node_modules/quill/themes/snow.js"); /* harmony import */ var quill_themes_snow__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! quill/themes/snow */ "./node_modules/quill/themes/snow.js");
/* harmony import */ var quill_formats_blockquote__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! quill/formats/blockquote */ "./node_modules/quill/formats/blockquote.js");
/* harmony import */ var quill_formats_bold__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! quill/formats/bold */ "./node_modules/quill/formats/bold.js");
/* harmony import */ var quill_formats_italic__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! quill/formats/italic */ "./node_modules/quill/formats/italic.js");
/* harmony import */ var quill_formats_link__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! quill/formats/link */ "./node_modules/quill/formats/link.js");
/* harmony import */ var quill_formats_list__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! quill/formats/list */ "./node_modules/quill/formats/list.js");
/* harmony import */ var quill_formats_header__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! quill/formats/header */ "./node_modules/quill/formats/header.js");
quill_core__WEBPACK_IMPORTED_MODULE_0__["default"].register({ quill_core__WEBPACK_IMPORTED_MODULE_0__["default"].register({
'modules/toolbar': quill_modules_toolbar__WEBPACK_IMPORTED_MODULE_1__["default"], 'modules/toolbar': quill_modules_toolbar__WEBPACK_IMPORTED_MODULE_1__["default"],
'themes/snow': quill_themes_snow__WEBPACK_IMPORTED_MODULE_2__["default"], 'themes/snow': quill_themes_snow__WEBPACK_IMPORTED_MODULE_2__["default"]
'formats/blockquote': quill_formats_blockquote__WEBPACK_IMPORTED_MODULE_3__["default"],
'formats/bold': quill_formats_bold__WEBPACK_IMPORTED_MODULE_4__["default"],
'formats/italic': quill_formats_italic__WEBPACK_IMPORTED_MODULE_5__["default"],
'formats/link': quill_formats_link__WEBPACK_IMPORTED_MODULE_6__["default"],
'formats/list': quill_formats_list__WEBPACK_IMPORTED_MODULE_7__["default"],
'formats/header': quill_formats_header__WEBPACK_IMPORTED_MODULE_8__["default"]
}); });
/* harmony default export */ __webpack_exports__["default"] = (quill_core__WEBPACK_IMPORTED_MODULE_0__["default"]); /* harmony default export */ __webpack_exports__["default"] = (quill_core__WEBPACK_IMPORTED_MODULE_0__["default"]);

9
resources/css/recipes/edit.css vendored
View File

@ -1,2 +1,11 @@
@import 'quill/dist/quill.core.css'; @import 'quill/dist/quill.core.css';
@import 'quill/dist/quill.snow.css'; @import 'quill/dist/quill.snow.css';
.ql-editor {
font-size: 1.125rem;
}
.ql-editor p {
margin-top: 1rem;
margin-bottom: 1rem;
}

15
resources/js/quill.js vendored
View File

@ -3,24 +3,9 @@ import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar'; import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow'; import Snow from 'quill/themes/snow';
import Blockquote from 'quill/formats/blockquote';
import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Link from 'quill/formats/link';
import List from 'quill/formats/list';
import Header from 'quill/formats/header';
Quill.register({ Quill.register({
'modules/toolbar': Toolbar, 'modules/toolbar': Toolbar,
'themes/snow': Snow, 'themes/snow': Snow,
'formats/blockquote': Blockquote,
'formats/bold': Bold,
'formats/italic': Italic,
'formats/link': Link,
'formats/list': List,
'formats/header': Header
}); });
export default Quill; export default Quill;

22
resources/views/recipes/edit.blade.php
View File

@ -75,7 +75,7 @@
type="hidden" type="hidden"
:value="old('description', $recipe->description)" /> :value="old('description', $recipe->description)" />
<div class="quill-editor"></div> <div class="quill-editor text-lg"></div>
<x-inputs.input name="description_delta" <x-inputs.input name="description_delta"
type="hidden" type="hidden"
@ -149,9 +149,25 @@
@push('scripts') @push('scripts')
<script src="{{ asset('js/recipes/edit.js') }}"></script> <script src="{{ asset('js/recipes/edit.js') }}"></script>
<script type="text/javascript"> <script type="text/javascript">
// Enforce inline (style-base) alignment.
const AlignStyle = Quill.import('attributors/style/align');
Quill.register(AlignStyle, true);
// Activate Quill editor.
const description = new Quill('.quill-editor', { const description = new Quill('.quill-editor', {
modules: { modules: {
toolbar: true toolbar: [
[{ 'header': [1, 2, 3, 4, false] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
['blockquote', 'code-block'],
[{ 'color': [] }, { 'background': [] }],
[{ 'align': [] }],
['clean']
]
}, },
theme: 'snow' theme: 'snow'
}); });
@ -159,6 +175,7 @@
description.setContents(JSON.parse(document.querySelector('input[name="description_delta"]').value)); description.setContents(JSON.parse(document.querySelector('input[name="description_delta"]').value));
} catch (e) {} } catch (e) {}
// Activate ingredient draggables.
new Draggable.Sortable(document.querySelector('.ingredients'), { new Draggable.Sortable(document.querySelector('.ingredients'), {
draggable: '.ingredient', draggable: '.ingredient',
handle: '.draggable-handle', handle: '.draggable-handle',
@ -168,6 +185,7 @@
}, },
}) })
// Activate step draggables.
new Draggable.Sortable(document.querySelector('.steps'), { new Draggable.Sortable(document.querySelector('.steps'), {
draggable: '.step', draggable: '.step',
handle: '.draggable-handle', handle: '.draggable-handle',