Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Checklists for Quill #87

Merged
merged 6 commits into from
Apr 30, 2020
Merged

Checklists for Quill #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
af613bf
Implement Quill checklist functionality
gdjohnson Apr 28, 2020
87a51d1
Purge debuggers
gdjohnson Apr 28, 2020
7b87b74
Style checklist
gdjohnson Apr 29, 2020
a5bab87
Merge branch 'master' into graham.quill-checklist-2
raykyri Apr 29, 2020
3cb8740
Use fontello icon for checklists in Quill editor
raykyri Apr 30, 2020
98913f2
Add span so crossed-out checklists work on Markdown
raykyri Apr 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions client/scripts/views/components/markdown_formatted_text.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions static/fontello/css/fontello-ie7-codes.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Binary file not shown.
Loading