Skip to content

Commit

Permalink
Checklists for Quill (#87)
Browse files Browse the repository at this point in the history
  • Loading branch information
@gdjohnson
gdjohnson authored Apr 30, 2020
1 parent ee4b244 commit 2927598
Show file tree
Hide file tree
Showing 17 changed files with 121 additions and 27 deletions.
6 changes: 6 additions & 0 deletions client/scripts/views/components/markdown_formatted_text.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,12 @@ function applyBlockFormatters(text, hideFormatting) {
formatMany: (text) => m('ul', m('ul', m('ul', text))),
formatOne: (text, match) =>
m('li', applyInlineFormatters(text.replace(match, ''), hideFormatting)),
}, {
pattern: /^\[([ x])\] /,
formatMany: (text) => m('ul.checklist', text),
formatOne: (text, match) => m(`li${match.includes('x') ? '.checked' : '.unchecked'}`, [
m('span', applyInlineFormatters(text.replace(match, ''), hideFormatting))
]),
}];

// Lines which don't match any of the above groups are assigned an
Expand Down
5 changes: 3 additions & 2 deletions client/scripts/views/components/quill_editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -537,7 +537,7 @@ const instantiateEditor = (
modules: {
toolbar: hasFormats ? ([[{ header: 1 }, { header: 2 }]] as any).concat([
['bold', 'italic', 'strike', 'code-block'],
[{ list: 'ordered' }, { list: 'bullet' }, 'blockquote', 'link', 'image'],
[{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }, 'blockquote', 'link', 'image'],
['preview'],
]) : false,
imageDropAndPaste: {
Expand Down Expand Up @@ -621,6 +621,7 @@ const instantiateEditor = (

const makeMarkdownToolbarHandler = (handler, fmtOption) => {
toolbar.addHandler(handler, (value) => {
if (value === 'check') value = 'unchecked';
if (!isMarkdownMode()) return quill.format(handler, value);

const { index, length } = quill.getSelection();
Expand Down Expand Up @@ -659,7 +660,7 @@ const instantiateEditor = (
};
makeMarkdownToolbarHandler('header', { 1: '# ', 2: '## ' });
makeMarkdownToolbarHandler('blockquote', '> ');
makeMarkdownToolbarHandler('list', { ordered: ((index) => `${index + 1}. `), bullet: '- ' });
makeMarkdownToolbarHandler('list', { ordered: ((index) => `${index + 1}. `), bullet: '- ', unchecked: '[ ] ' });

// Set up remaining couple of Markdown toolbar options
const defaultLinkHandler = quill.theme.modules.toolbar.handlers.link;
Expand Down
9 changes: 7 additions & 2 deletions client/scripts/views/components/quill_formatted_text.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable no-restricted-syntax */
import 'components/quill_formatted_text.scss';

import { default as $ } from 'jquery';
Expand Down Expand Up @@ -130,7 +131,9 @@ const renderQuillDelta = (delta, hideFormatting = false) => {
? 'ul'
: group.listtype === 'ordered'
? 'ol'
: 'div';
: group.listtype === 'checked' || group.listtype === 'unchecked'
? 'ul.checklist'
: 'div';
return m(groupTag, group.parents.map((parent) => {
// render empty parent nodes as .between-paragraphs
if (!parent.attributes && parent.children.length === 1 && parent.children[0].insert === '\n') {
Expand Down Expand Up @@ -219,7 +222,9 @@ const renderQuillDelta = (delta, hideFormatting = false) => {
: parent.attributes && parent.attributes.header === 6 ? 'h6'
: parent.attributes && parent.attributes.list === 'bullet' ? 'li'
: parent.attributes && parent.attributes.list === 'ordered' ? 'li'
: 'div',
: parent.attributes && parent.attributes.list === 'checked' ? 'li.checked'
: parent.attributes && parent.attributes.list === 'unchecked' ? 'li.unchecked'
: 'div',
children);
}));
});
Expand Down
24 changes: 24 additions & 0 deletions client/styles/components/quill_editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,30 @@
.ql-editor ol li.ql-indent-9:before {
content: counter(list-9, decimal) '. ';
}
// Checklist styling
.ql-editor ul[data-checked=true], .ql-editor ul[data-checked=false] {
pointer-events: none;
}
.ql-editor ul[data-checked=true] > li::before, .ql-editor ul[data-checked=false] > li::before {
cursor: pointer;
pointer-events: all;
font-family: "fontello";
}
.ql-editor ul[data-checked="true"] li {
text-decoration: line-through;
}
.ql-editor ul[data-checked=true] > li::before {
content: '\f14a';
color: #777;
position: relative;
top: 1px;
}
.ql-editor ul[data-checked=false] > li::before {
content: '\f096';
color: #b0bec5;
position: relative;
top: 1px;
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
padding-left: 3em;
}
Expand Down
32 changes: 31 additions & 1 deletion client/styles/components/quill_formatted_text.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,36 @@
margin: 6px 0;
}
}
ul.checklist {
padding-left: 1em;
list-style: none;
li {
text-indent: -1.4em;
list-style: inherit;
padding-left: 9px;
}
li::before {
width: 1.4em;
font-family: "fontello";
padding-right: 10px;
position: relative;
padding-right: 11px;
}
li.checked span {
text-decoration: line-through;
}
li.checked:before {
content: '\f14a';
color: #777;
}
li.unchecked:before {
content: '\f096';
color: #b0bec5;
}
}
ul.checklist + ul.checklist {
margin-top: -10px;
}
p:first-child {
padding-top: 0;
margin-top: 0;
Expand Down Expand Up @@ -117,7 +147,7 @@
}
code:before,
code:after {
content: "\A0";
content: '\A0';
letter-spacing: -2px;
}
small {
Expand Down
12 changes: 12 additions & 0 deletions static/fontello/config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -491,6 +491,18 @@
"css": "bell-alt-off",
"code": 61942,
"src": "fontawesome"
},
{
"uid": "1400d5103edd2fa6d2d61688fee79a5a",
"css": "ok-squared",
"code": 61770,
"src": "fontawesome"
},
{
"uid": "4b900d04e8ab8c82f080c1cfbac5772c",
"css": "check-empty",
"code": 61590,
"src": "fontawesome"
}
]
}
2 changes: 2 additions & 0 deletions static/fontello/css/fontello-codes.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,13 +69,15 @@
.icon-help-circled:before { content: '\e849'; } /* '' */
.icon-right-open:before { content: '\e84a'; } /* '' */
.icon-twitter-circled:before { content: '\f057'; } /* '' */
.icon-check-empty:before { content: '\f096'; } /* '' */
.icon-github-circled:before { content: '\f09b'; } /* '' */
.icon-menu:before { content: '\f0c9'; } /* '' */
.icon-sitemap:before { content: '\f0e8'; } /* '' */
.icon-bell-alt:before { content: '\f0f3'; } /* '' */
.icon-puzzle:before { content: '\f12e'; } /* '' */
.icon-shield:before { content: '\f132'; } /* '' */
.icon-lock-open-alt:before { content: '\f13e'; } /* '' */
.icon-ok-squared:before { content: '\f14a'; } /* '' */
.icon-bell-alt-off:before { content: '\f1f6'; } /* '' */
.icon-bell-off:before { content: '\f1f7'; } /* '' */
.icon-spinner1:before { content: '\f528'; } /* '' */
Expand Down
14 changes: 8 additions & 6 deletions static/fontello/css/fontello-embedded.css
View file

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions static/fontello/css/fontello-ie7-codes.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,13 +69,15 @@
.icon-help-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-right-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-twitter-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-check-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-github-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-sitemap { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-bell-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-puzzle { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-shield { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-lock-open-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-ok-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-bell-alt-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-bell-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-spinner1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
Expand Down
2 changes: 2 additions & 0 deletions static/fontello/css/fontello-ie7.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,15 @@
.icon-help-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-right-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-twitter-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-check-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-github-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-sitemap { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-bell-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-puzzle { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-shield { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-lock-open-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-ok-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-bell-alt-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-bell-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-spinner1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
Expand Down
16 changes: 9 additions & 7 deletions static/fontello/css/fontello.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?43912152');
src: url('../font/fontello.eot?43912152#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?43912152') format('woff2'),
url('../font/fontello.woff?43912152') format('woff'),
url('../font/fontello.ttf?43912152') format('truetype'),
url('../font/fontello.svg?43912152#fontello') format('svg');
src: url('../font/fontello.eot?93020716');
src: url('../font/fontello.eot?93020716#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?93020716') format('woff2'),
url('../font/fontello.woff?93020716') format('woff'),
url('../font/fontello.ttf?93020716') format('truetype'),
url('../font/fontello.svg?93020716#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
Expand All @@ -15,7 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?43912152#fontello') format('svg');
src: url('../font/fontello.svg?93020716#fontello') format('svg');
}
}
*/
Expand Down Expand Up @@ -125,13 +125,15 @@
.icon-help-circled:before { content: '\e849'; } /* '' */
.icon-right-open:before { content: '\e84a'; } /* '' */
.icon-twitter-circled:before { content: '\f057'; } /* '' */
.icon-check-empty:before { content: '\f096'; } /* '' */
.icon-github-circled:before { content: '\f09b'; } /* '' */
.icon-menu:before { content: '\f0c9'; } /* '' */
.icon-sitemap:before { content: '\f0e8'; } /* '' */
.icon-bell-alt:before { content: '\f0f3'; } /* '' */
.icon-puzzle:before { content: '\f12e'; } /* '' */
.icon-shield:before { content: '\f132'; } /* '' */
.icon-lock-open-alt:before { content: '\f13e'; } /* '' */
.icon-ok-squared:before { content: '\f14a'; } /* '' */
.icon-bell-alt-off:before { content: '\f1f6'; } /* '' */
.icon-bell-off:before { content: '\f1f7'; } /* '' */
.icon-spinner1:before { content: '\f528'; } /* '' */
Expand Down
20 changes: 11 additions & 9 deletions static/fontello/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,11 +229,11 @@
}
@font-face {
font-family: 'fontello';
src: url('./font/fontello.eot?41472061');
src: url('./font/fontello.eot?41472061#iefix') format('embedded-opentype'),
url('./font/fontello.woff?41472061') format('woff'),
url('./font/fontello.ttf?41472061') format('truetype'),
url('./font/fontello.svg?41472061#fontello') format('svg');
src: url('./font/fontello.eot?89102241');
src: url('./font/fontello.eot?89102241#iefix') format('embedded-opentype'),
url('./font/fontello.woff?89102241') format('woff'),
url('./font/fontello.ttf?89102241') format('truetype'),
url('./font/fontello.svg?89102241#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
Expand Down Expand Up @@ -402,22 +402,24 @@ <h1>fontello <small>font demo</small></h1>
<div class="row">
<div class="the-icons span3" title="Code: 0xe84a"><i class="demo-icon icon-right-open">&#xe84a;</i> <span class="i-name">icon-right-open</span><span class="i-code">0xe84a</span></div>
<div class="the-icons span3" title="Code: 0xf057"><i class="demo-icon icon-twitter-circled">&#xf057;</i> <span class="i-name">icon-twitter-circled</span><span class="i-code">0xf057</span></div>
<div class="the-icons span3" title="Code: 0xf096"><i class="demo-icon icon-check-empty">&#xf096;</i> <span class="i-name">icon-check-empty</span><span class="i-code">0xf096</span></div>
<div class="the-icons span3" title="Code: 0xf09b"><i class="demo-icon icon-github-circled">&#xf09b;</i> <span class="i-name">icon-github-circled</span><span class="i-code">0xf09b</span></div>
<div class="the-icons span3" title="Code: 0xf0c9"><i class="demo-icon icon-menu">&#xf0c9;</i> <span class="i-name">icon-menu</span><span class="i-code">0xf0c9</span></div>
</div>
<div class="row">
<div class="the-icons span3" title="Code: 0xf0c9"><i class="demo-icon icon-menu">&#xf0c9;</i> <span class="i-name">icon-menu</span><span class="i-code">0xf0c9</span></div>
<div class="the-icons span3" title="Code: 0xf0e8"><i class="demo-icon icon-sitemap">&#xf0e8;</i> <span class="i-name">icon-sitemap</span><span class="i-code">0xf0e8</span></div>
<div class="the-icons span3" title="Code: 0xf0f3"><i class="demo-icon icon-bell-alt">&#xf0f3;</i> <span class="i-name">icon-bell-alt</span><span class="i-code">0xf0f3</span></div>
<div class="the-icons span3" title="Code: 0xf12e"><i class="demo-icon icon-puzzle">&#xf12e;</i> <span class="i-name">icon-puzzle</span><span class="i-code">0xf12e</span></div>
<div class="the-icons span3" title="Code: 0xf132"><i class="demo-icon icon-shield">&#xf132;</i> <span class="i-name">icon-shield</span><span class="i-code">0xf132</span></div>
</div>
<div class="row">
<div class="the-icons span3" title="Code: 0xf132"><i class="demo-icon icon-shield">&#xf132;</i> <span class="i-name">icon-shield</span><span class="i-code">0xf132</span></div>
<div class="the-icons span3" title="Code: 0xf13e"><i class="demo-icon icon-lock-open-alt">&#xf13e;</i> <span class="i-name">icon-lock-open-alt</span><span class="i-code">0xf13e</span></div>
<div class="the-icons span3" title="Code: 0xf14a"><i class="demo-icon icon-ok-squared">&#xf14a;</i> <span class="i-name">icon-ok-squared</span><span class="i-code">0xf14a</span></div>
<div class="the-icons span3" title="Code: 0xf1f6"><i class="demo-icon icon-bell-alt-off">&#xf1f6;</i> <span class="i-name">icon-bell-alt-off</span><span class="i-code">0xf1f6</span></div>
<div class="the-icons span3" title="Code: 0xf1f7"><i class="demo-icon icon-bell-off">&#xf1f7;</i> <span class="i-name">icon-bell-off</span><span class="i-code">0xf1f7</span></div>
<div class="the-icons span3" title="Code: 0xf528"><i class="demo-icon icon-spinner1">&#xf528;</i> <span class="i-name">icon-spinner1</span><span class="i-code">0xf528</span></div>
</div>
<div class="row">
<div class="the-icons span3" title="Code: 0xf1f7"><i class="demo-icon icon-bell-off">&#xf1f7;</i> <span class="i-name">icon-bell-off</span><span class="i-code">0xf1f7</span></div>
<div class="the-icons span3" title="Code: 0xf528"><i class="demo-icon icon-spinner1">&#xf528;</i> <span class="i-name">icon-spinner1</span><span class="i-code">0xf528</span></div>
<div class="the-icons span3" title="Code: 0xf529"><i class="demo-icon icon-spinner2">&#xf529;</i> <span class="i-name">icon-spinner2</span><span class="i-code">0xf529</span></div>
</div>
</div>
Expand Down
Binary file modified static/fontello/font/fontello.eot
View file
Binary file not shown.
Loading

0 comments on commit 2927598

Please sign in to comment.