tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Implemented first iteration of content snippets 

closes https://github.com/TryGhost/Team/issues/411

- adds "Create snippet" icon to the editor toolbar
- uses the same link input component design for specifying snippet titles
- snippets are loaded in the background when the editor is accessed
- snippets are listed at the bottom of the card menus of the + and / menus
- clicking a snippet inserts the snippet's contents in place of the current blank section
This commit is contained in:
Kevin Ansfield 2020-10-15 18:03:18 +01:00
parent 8a394aea8e
commit 5606b9c068
27 changed files with 678 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/gh-koenig-editor.hbs
View File

@ -30,5 +30,7 @@
@scrollOffsetTopSelector={{this.scrollOffsetTopSelector}}
@scrollOffsetBottomSelector={{this.scrollOffsetBottomSelector}}
@wordCountDidChange={{action this.onWordCountChange}}
@snippets={{@snippets}}
@saveSnippet={{@saveSnippet}}
/>
</div>

29
app/controllers/editor.js
View File

@ -138,6 +138,14 @@ export default Controller.extend({
}
}),
_snippets: computed(function () {
return this.store.peekAll('snippet');
}),
snippets: computed('_snippets.@each.isNew', function () {
return this._snippets.reject(snippet => snippet.get('isNew'));
}),
_autosaveRunning: computed('_autosave.isRunning', '_timedSave.isRunning', function () {
let autosave = this.get('_autosave.isRunning');
let timedsave = this.get('_timedSave.isRunning');
@ -281,6 +289,27 @@ export default Controller.extend({
updateWordCount(counts) {
this.set('wordCount', counts);
},
saveSnippet(snippet) {
let snippetRecord = this.store.createRecord('snippet', snippet);
return snippetRecord.save().then(() => {
this.notifications.closeAlerts('snippet.save');
this.notifications.showNotification(
`Snippet saved as "${snippet.title}"`,
{type: 'success'}
);
return snippetRecord;
}).catch((error) => {
if (!snippetRecord.errors.isEmpty) {
this.notifications.showAlert(
`Snippet save failed: ${snippetRecord.errors.messages.join('. ')}`,
{type: 'error', key: 'snippet.save'}
);
}
snippetRecord.rollbackAttributes();
throw error;
});
}
},

5
app/controllers/posts.js
View File

@ -56,6 +56,7 @@ export default Controller.extend({
_hasLoadedTags: false,
_hasLoadedAuthors: false,
_hasLoadedSnippets: false,
availableTypes: null,
availableVisibilities: null,
@ -133,6 +134,10 @@ export default Controller.extend({
return authors.findBy('slug', author) || {slug: '!unknown'};
}),
snippets: computed(function () {
return this.store.peekAll('snippet');
}),
actions: {
changeType(type) {
this.set('type', get(type, 'value'));

4
app/mixins/validation-engine.js
View File

@ -17,6 +17,7 @@ import SetupValidator from 'ghost-admin/validators/setup';
import SigninValidator from 'ghost-admin/validators/signin';
import SignupValidator from 'ghost-admin/validators/signup';
import SlackIntegrationValidator from 'ghost-admin/validators/slack-integration';
import SnippetValidator from 'ghost-admin/validators/snippet';
import TagSettingsValidator from 'ghost-admin/validators/tag-settings';
import UserValidator from 'ghost-admin/validators/user';
import WebhookValidator from 'ghost-admin/validators/webhook';
@ -52,7 +53,8 @@ export default Mixin.create({
member: MemberValidator,
integration: IntegrationValidator,
webhook: WebhookValidator,
label: LabelValidator
label: LabelValidator,
snippet: SnippetValidator
},
// This adds the Errors object to the validation engine, and shouldn't affect

11
app/models/snippet.js Normal file
View File

@ -0,0 +1,11 @@
import Model, {attr} from '@ember-data/model';
import ValidationEngine from 'ghost-admin/mixins/validation-engine';
export default Model.extend(ValidationEngine, {
validationType: 'snippet',
title: attr('string'),
mobiledoc: attr('json-string'),
createdAtUTC: attr('moment-utc'),
updatedAtUTC: attr('moment-utc')
});

8
app/routes/posts.js
View File

@ -79,7 +79,7 @@ export default AuthenticatedRoute.extend({
});
},
// trigger a background load of all tags and authors for use in the filter dropdowns
// trigger a background load of all tags, authors, and snipps for use in filter dropdowns and card menu
setupController(controller) {
this._super(...arguments);
@ -96,6 +96,12 @@ export default AuthenticatedRoute.extend({
});
}
});
if (!controller._hasLoadedSnippets) {
this.store.query('snippet', {limit: 'all'}).then(() => {
controller._hasLoadedSnippets = true;
});
}
},
actions: {

2
app/templates/editor.hbs
View File

@ -81,6 +81,8 @@
@scrollOffsetBottomSelector=".gh-mobile-nav-bar"
@onEditorCreated={{action "setKoenigEditor"}}
@onWordCountChange={{action "updateWordCount"}}
@snippets={{this.snippets}}
@saveSnippet={{action "saveSnippet"}}
/>
<div class="absolute flex items-center br3 bg-white {{if editor.headerClass "right-4 bottom-4" "right-6 bottom-6"}}">

22
app/validators/snippet.js Normal file
View File

@ -0,0 +1,22 @@
import BaseValidator from './base';
import {isBlank} from '@ember/utils';
export default BaseValidator.create({
properties: ['title', 'mobiledoc'],
title(model) {
if (isBlank(model.get('title'))) {
model.errors.add('title', 'Title cannot be blank');
this.invalidate();
}
model.get('hasValidated').addObject('title');
},
mobiledoc(model) {
if (isBlank(model.get('mobiledoc'))) {
model.errors.add('mobiledoc', 'Content cannot be blank.');
this.invalidate();
}
model.get('hasValidated').addObject('mobiledoc');
}
});

2
config/environment.js
View File

@ -47,7 +47,7 @@ module.exports = function (environment) {
// Enable mirage here in order to mock API endpoints during development
ENV['ember-cli-mirage'] = {
enabled: false
enabled: true
};
}

15
lib/koenig-editor/addon/components/koenig-editor.hbs
View File

@ -12,6 +12,7 @@
@toggleSection={{action "toggleSection"}}
@toggleHeaderSection={{action "toggleHeaderSection"}}
@editLink={{action "editLink"}}
@addSnippet={{this.addSnippet}}
/>
{{!-- pop-up link hover toolbar --}}
@ -34,18 +35,32 @@
/>
{{/if}}
{{!-- pop-up snippet editing toolbar --}}
{{#if this.snippetRange}}
<KoenigSnippetInput
@editor={{this.editor}}
@snippetRange={{this.snippetRange}}
@save={{@saveSnippet}}
@cancel={{this.cancelAddSnippet}}
/>
{{/if}}
{{!-- (+) icon and pop-up menu --}}
<KoenigPlusMenu
@editor={{this.editor}}
@editorRange={{this.selectedRange}}
@snippets={{this.snippets}}
@replaceWithCardSection={{action "replaceWithCardSection"}}
@replaceWithPost={{action "replaceWithPost"}}
/>
{{!-- slash menu popup --}}
<KoenigSlashMenu
@editor={{this.editor}}
@editorRange={{this.selectedRange}}
@snippets={{this.snippets}}
@replaceWithCardSection={{action "replaceWithCardSection"}}
@replaceWithPost={{action "replaceWithPost"}}
/>
{{!-- all component cards wormholed into the editor canvas --}}

35
lib/koenig-editor/addon/components/koenig-editor.js
View File

@ -17,6 +17,7 @@ import registerKeyCommands from '../options/key-commands';
import registerTextExpansions from '../options/text-expansions';
import validator from 'validator';
import {A} from '@ember/array';
import {action} from '@ember/object';
import {assign} from '@ember/polyfills';
import {camelize, capitalize} from '@ember/string';
import {createParserPlugins} from '@tryghost/kg-parser-plugins';
@ -565,6 +566,23 @@ export default Component.extend({
});
},
replaceWithPost(range, post) {
let {editor} = this;
let {head: {section}} = range;
editor.run((postEditor) => {
let nextPosition = postEditor.deleteRange(section.toRange());
postEditor.setRange(nextPosition);
let blankSection = postEditor.builder.createMarkupSection('p');
postEditor.insertSectionBefore(editor.post.sections, blankSection);
postEditor.setRange(blankSection.toRange());
nextPosition = postEditor.insertPost(editor.range.head, post);
postEditor.setRange(nextPosition);
});
},
selectCard(card) {
this.selectCard(card);
},
@ -641,6 +659,23 @@ export default Component.extend({
}
},
addSnippet: action(function (event) {
event.preventDefault();
event.stopImmediatePropagation();
let {selectedRange} = this;
if (selectedRange.isCollapsed) {
return;
}
this.set('snippetRange', selectedRange);
}),
cancelAddSnippet: action(function () {
this.set('snippetRange', null);
}),
/* public interface ----------------------------------------------------- */
// TODO: find a better way to expose the public interface?

4
lib/koenig-editor/addon/components/koenig-link-input.hbs
View File

@ -1,8 +1,8 @@
<input
placeholder="Enter url"
value={{href}}
value={{this.href}}
class="kg-link-input pa2 pr6 mih-100 ba br3 shadow-2 f8 lh-heading tracked-2 outline-0 b--blue h10 nudge-top--8"
oninput={{action (mut href) value="target.value"}}
oninput={{action (mut this.href) value="target.value"}}
onkeydown={{action "inputKeydown"}}
/>

18
lib/koenig-editor/addon/components/koenig-link-input.js
View File

@ -1,4 +1,5 @@
import Component from '@ember/component';
import getScrollParent from '../utils/get-scroll-parent';
import relativeToAbsolute from '../lib/relative-to-absolute';
import {TOOLBAR_MARGIN} from './koenig-toolbar';
import {computed} from '@ember/object';
@ -11,21 +12,6 @@ import {inject as service} from '@ember/service';
// TODO: handle via CSS?
const TICK_ADJUSTMENT = 8;
// TODO: move to a util
function getScrollParent(node) {
const isElement = node instanceof HTMLElement;
const overflowY = isElement && window.getComputedStyle(node).overflowY;
const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';
if (!node) {
return null;
} else if (isScrollable && node.scrollHeight >= node.clientHeight) {
return node;
}
return getScrollParent(node.parentNode) || document.body;
}
export default Component.extend({
config: service(),
@ -194,7 +180,7 @@ export default Component.extend({
scrollParent.scrollTop = scrollTop;
},
// TODO: largely shared with {{koenig-toolbar}} code - extract to a shared util?
// TODO: largely shared with {{koenig-toolbar}} and {{koenig-snippet-input}} - extract to a shared util?
_positionToolbar() {
let containerRect = this.element.offsetParent.getBoundingClientRect();
let rangeRect = this.linkRect || this._windowRange.getBoundingClientRect();

24
lib/koenig-editor/addon/components/koenig-menu-content.hbs
View File

@ -1,13 +1,17 @@
{{#each itemSections as |section sectionIndex|}}
<div class="flex flex-column justify-center h5 {{unless (eq sectionIndex 0) "mt4"}} mb4 nl4 nr4 pl4 pr4 bg-whitegrey midlightgrey ttu f-supersmall fw4 tracked-3" style="min-width: calc(100% + 3.2rem);">
{{section.title}}
</div>
{{#each section.items as |item|}}
{{#if (or (not item.developerExperiment) (and item.developerExperiment (enable-developer-experiments)))}}
<div class="{{if item.selected "kg-cardmenu-card-selected"}} {{kg-style "cardmenu-card"}}" onclick={{action itemClicked item}} data-kg="cardmenu-card" role="menuitem">
<div class="{{kg-style "cardmenu-icon"}} {{item.iconClass}}" aria-hidden="true">{{svg-jar item.icon class="w8 h8"}}</div>
<div class="{{kg-style "cardmenu-label"}}">{{item.label}}</div>
{{#each @itemSections as |section sectionIndex|}}
{{#if section.items}}
{{#if (or (not section.developerExperiment) (enable-developer-experiments))}}
<div class="flex flex-column justify-center h5 {{unless (eq sectionIndex 0) "mt4"}} mb4 nl4 nr4 pl4 pr4 bg-whitegrey midlightgrey ttu f-supersmall fw4 tracked-3" style="min-width: calc(100% + 3.2rem);">
{{section.title}}
</div>
{{#each section.items as |item|}}
{{#if (or (not item.developerExperiment) (enable-developer-experiments))}}
<div class="{{if (eq item @selectedItem) "kg-cardmenu-card-selected"}} {{kg-style "cardmenu-card"}}" {{on "click" (fn @itemClicked item)}} data-kg="cardmenu-card" role="menuitem">
<div class="{{kg-style "cardmenu-icon"}} {{item.iconClass}}" aria-hidden="true">{{svg-jar item.icon class="w8 h8"}}</div>
<div class="{{kg-style "cardmenu-label"}}">{{item.label}}</div>
</div>
{{/if}}
{{/each}}
{{/if}}
{{/each}}
{{/if}}
{{/each}}

9
lib/koenig-editor/addon/components/koenig-menu-content.js
View File

@ -1,9 +0,0 @@
import Component from '@ember/component';
export default Component.extend({
tagName: '',
itemSections: null,
itemClicked() {}
});

47
lib/koenig-editor/addon/components/koenig-plus-menu.js
View File

@ -1,4 +1,5 @@
import Component from '@ember/component';
import mobiledocParsers from 'mobiledoc-kit/parsers/mobiledoc';
import {CARD_MENU} from '../options/cards';
import {computed} from '@ember/object';
import {htmlSafe} from '@ember/string';
@ -10,9 +11,9 @@ export default Component.extend({
attributeBindings: ['style', 'data-kg'],
editor: null,
editorRange: null,
snippets: null,
// internal properties
itemSections: null,
showButton: false,
showMenu: false,
top: 0,
@ -33,11 +34,37 @@ export default Component.extend({
return htmlSafe(`top: ${this.top}px`);
}),
itemSections: computed('snippets.[]', function () {
let {snippets} = this;
let itemSections = [...CARD_MENU];
// TODO: move or create util, duplicated with koenig-slash-menu
if (snippets?.length) {
let snippetsSection = {
title: 'Snippets',
items: [],
rowLength: 1,
developerExperiment: true
};
snippets.forEach((snippet) => {
snippetsSection.items.push({
label: snippet.title,
icon: 'koenig/kg-card-type-bookmark',
type: 'snippet',
matches: [snippet.title.toLowerCase()]
});
});
itemSections.push(snippetsSection);
}
return itemSections;
}),
init() {
this._super(...arguments);
this.itemSections = CARD_MENU;
this._onResizeHandler = run.bind(this, this._handleResize);
window.addEventListener('resize', this._onResizeHandler);
@ -89,13 +116,25 @@ export default Component.extend({
this._hideMenu();
},
itemClicked(item) {
itemClicked(item, event) {
if (event) {
event.preventDefault();
}
let range = this._editorRange;
if (item.type === 'card') {
this.replaceWithCardSection(item.replaceArg, range, item.payload);
}
if (item.tpye === 'snippet') {
let clickedSnippet = this.snippets.find(snippet => snippet.title === item.label);
if (clickedSnippet) {
let post = mobiledocParsers.parse(this.editor.builder, clickedSnippet.mobiledoc);
this.replaceWithPost(range, post);
}
}
this._hideButton();
this._hideMenu();
}

23
lib/koenig-editor/addon/components/koenig-slash-menu.hbs
View File

@ -1,5 +1,18 @@
{{#if (and this.showMenu this.itemSections)}}
<div class="koenig-cardmenu {{kg-style "cardmenu"}}" role="menu">
<KoenigMenuContent @itemSections={{this.itemSections}} @itemClicked={{action "itemClicked"}} />
</div>
{{/if}}
<div
id="koenig-slash-menu"
class="absolute"
{{did-insert this.registerContainerElement}}
{{did-update this.registerEditor @editor}}
{{did-update this.handleCursorChange @editorRange}}
{{did-update this.updateItemSections @snippets}}
...attributes
>
{{#if (and this.showMenu this.itemSections)}}
<div class="koenig-cardmenu {{kg-style "cardmenu"}}" role="menu">
<KoenigMenuContent
@itemSections={{this.itemSections}}
@selectedItem={{this.selectedItem}}
@itemClicked={{this.itemClicked}} />
</div>
{{/if}}
</div>

461
lib/koenig-editor/addon/components/koenig-slash-menu.js
View File

@ -1,40 +1,31 @@
import Component from '@ember/component';
import Component from '@glimmer/component';
import mobiledocParsers from 'mobiledoc-kit/parsers/mobiledoc';
import {CARD_MENU} from '../options/cards';
import {assign} from '@ember/polyfills';
import {computed, set} from '@ember/object';
import {htmlSafe} from '@ember/string';
import {action} from '@ember/object';
import {isEmpty} from '@ember/utils';
import {run} from '@ember/runloop';
import {tracked} from '@glimmer/tracking';
const ROW_LENGTH = 3;
const Y_OFFSET = 16;
export default Component.extend({
// public attrs
classNames: 'absolute',
attributeBindings: ['style'],
editor: null,
editorRange: null,
export default class KoenigSlashMenuComponent extends Component {
@tracked itemSections = [];
@tracked showMenu = false;
@tracked selectedRowIndex = 0;
@tracked selectedColumnIndex = 0;
// public properties
showMenu: false,
top: 0,
itemSections: null,
query = '';
// private properties
_openRange: null,
_query: '',
_onWindowMousedownHandler: null,
_yOffset: 16,
constructor() {
super(...arguments);
this.registerEditor(null, [this.args.editor]);
}
// closure actions
replaceWithCardSection() {},
willDestroy() {
window.removeEventListener('mousedown', this._onWindowMousedownHandler);
}
// computed properties
style: computed('top', function () {
return htmlSafe(`top: ${this.top}px`);
}),
// create a 2-dimensional array of items based on the ROW_LENGTH, eg
// create a 2-dimensional array of items based on the section row length, eg
// [
// [item1, item1, item3]
// [item4, item5],
@ -42,79 +33,97 @@ export default Component.extend({
// [item9]
// ]
// - used for arrow key movement of selected item
itemMap: computed('itemSections', function () {
let map = [];
get itemMap() {
let itemMap = [];
this.itemSections.forEach((section) => {
let iterations = Math.ceil(section.items.length / ROW_LENGTH);
let iterations = Math.ceil(section.items.length / section.rowLength);
for (let i = 0; i < iterations; i++) {
let startIndex = i * ROW_LENGTH;
map.push(section.items.slice(startIndex, startIndex + ROW_LENGTH));
let startIndex = i * section.rowLength;
itemMap.push(section.items.slice(startIndex, startIndex + section.rowLength));
}
});
return map;
}),
return itemMap;
}
didReceiveAttrs() {
this._super(...arguments);
get selectedItem() {
return this.itemMap[this.selectedRowIndex][this.selectedColumnIndex];
}
// re-register the / text input handler if the editor changes such as
// when a "New post" is clicked from the sidebar or a different post
// is loaded via search
if (this.editor !== this._lastEditor) {
this.editor.onTextInput({
name: 'slash_menu',
text: '/',
run: run.bind(this, this._showMenu)
});
}
this._lastEditor = this.editor;
@action
updateItemSections() {
let {query} = this;
let {snippets} = this.args;
// re-position the menu and update the query if necessary when the
// cursor position changes
let editorRange = this.editorRange;
if (editorRange !== this._lastEditorRange) {
this._handleCursorChange(editorRange);
}
this._lastEditorRange = editorRange;
},
let itemSections = [...CARD_MENU];
willDestroyElement() {
this._super(...arguments);
window.removeEventListener('mousedown', this._onMousedownHandler);
},
if (snippets?.length) {
let snippetsSection = {
title: 'Snippets',
items: [],
rowLength: 1,
developerExperiment: true
};
actions: {
itemClicked(item, event) {
let range = this._openRange.head.section.toRange();
let [, ...params] = this._query.split(/\s/);
let payload = assign({}, item.payload);
// make sure the click doesn't propagate and get picked up by the
// newly inserted card which can then remove itself because it
// looks like a click outside of an empty card
if (event) {
event.preventDefault();
event.stopImmediatePropagation();
}
// params are order-dependent and listed in CARD_MENU for each card
if (!isEmpty(item.params) && !isEmpty(params)) {
item.params.forEach((param, i) => {
payload[param] = params[i];
snippets.forEach((snippet) => {
snippetsSection.items.push({
label: snippet.title,
icon: 'koenig/kg-card-type-bookmark',
type: 'snippet',
matches: [snippet.title.toLowerCase()]
});
}
});
if (item.type === 'card') {
this.replaceWithCardSection(item.replaceArg, range, payload);
}
this._hideMenu();
itemSections.push(snippetsSection);
}
},
_handleCursorChange(editorRange) {
// match everything before a space to a card. Keeps the relevant
// card selected when providing attributes to a card, eg:
// /twitter https://twitter.com/EffinBirds/status/1001765208958881792
let card = query.split(/\s/)[0].replace(/^\//, '');
let matchedItems = itemSections.map((section) => {
// show all items before anything is typed
if (!card) {
return section;
}
// show icons where there's a match of the begining of one of the
// "item.matches" strings
let matches = section.items.filter(item => item.matches.any(match => match.indexOf(card) === 0));
if (matches.length > 0) {
return Object.assign({}, section, {items: matches});
}
}).compact();
if (query !== this._lastQuery) {
this.selectedRowIndex = 0;
this.selectedColumnIndex = 0;
}
this.itemSections = matchedItems;
}
@action
registerContainerElement(element) {
this.containerElement = element;
}
@action
registerEditor(element, [editor]) {
// re-register the slash_menu text input handler if the editor changes
// such as when a "New post" is clicked from the sidebar or a different
// post is loaded via search
editor.onTextInput({
name: 'slash_menu',
text: '/',
run: this._showMenu.bind(this)
});
}
@action
handleCursorChange(element, [editorRange]) {
// update menu position to match cursor position
this._positionMenu(editorRange);
@ -129,64 +138,92 @@ export default Component.extend({
// update the query when the menu is open and cursor is in our open range
if (section === this._openRange.head.section) {
let query = section.text.substring(
this.query = section.text.substring(
this._openRange.head.offset,
editorRange.head.offset
);
this._updateQuery(query);
this._selectedItem = null;
this.updateItemSections();
}
}
},
}
_updateQuery(query) {
this._query = query;
// match everything before a space to a card. Keeps the relevant
// card selected when providing attributes to a card, eg:
// /twitter https://twitter.com/EffinBirds/status/1001765208958881792
let card = query.split(/\s/)[0].replace(/^\//, '');
let matchedItems = CARD_MENU.map((section) => {
// show all items before anything is typed
if (!card) {
return section;
}
// show icons where there's a match of the begining of one of the
// "item.matches" strings
let matches = section.items.filter(item => item.matches.any(match => match.indexOf(card) === 0));
if (matches.length > 0) {
return {title: section.title, items: matches};
}
}).compact();
// we need a copy to avoid modifying the object references
let sections = JSON.parse(JSON.stringify(matchedItems || []));
if (sections.length) {
set(sections[0].items[0], 'selected', true);
@action
itemClicked(item, event) {
if (event) {
event.preventDefault();
}
this.set('itemSections', sections);
},
let range = this._openRange.head.section.toRange();
let [, ...params] = this.query.split(/\s/);
let payload = Object.assign({}, item.payload);
// make sure the click doesn't propagate and get picked up by the
// newly inserted card which can then remove itself because it
// looks like a click outside of an empty card
if (event) {
event.preventDefault();
event.stopImmediatePropagation();
}
// params are order-dependent and listed in CARD_MENU for each card
if (!isEmpty(item.params) && !isEmpty(params)) {
item.params.forEach((param, i) => {
payload[param] = params[i];
});
}
if (item.type === 'card') {
this.args.replaceWithCardSection(item.replaceArg, range, payload);
}
if (item.type === 'snippet') {
const clickedSnippet = this.args.snippets.find(snippet => snippet.title === item.label);
if (clickedSnippet) {
const post = mobiledocParsers.parse(this.args.editor.builder, clickedSnippet.mobiledoc);
this.args.replaceWithPost(range, post);
}
}
this._hideMenu();
}
_positionMenu(range) {
if (!range) {
return;
}
let {head: {section}} = range;
if (section && section.renderNode.element) {
let containerRect = this.containerElement.parentNode.getBoundingClientRect();
let selectedElement = section.renderNode.element;
let selectedElementRect = selectedElement.getBoundingClientRect();
let top = selectedElementRect.top + selectedElementRect.height - containerRect.top + Y_OFFSET;
this.containerElement.style.top = `${top}px`;
}
}
_showMenu() {
let editorRange = this.editorRange;
let {editorRange} = this.args;
let {head: {section}} = editorRange;
// only show the menu if the slash is on an otherwise empty paragraph
if (!this.showMenu && editorRange.isCollapsed && section && !section.isListItem && section.text === '/') {
this.set('showMenu', true);
this.showMenu = true;
// ensure all items are shown before we have a query filter
this._updateQuery('');
this.query = '';
// this.set('_selectedItem', null);
this.updateItemSections();
// store a ref to the range when the menu was triggered so that we
// can query text after the slash
this._openRange = this.editorRange;
this._openRange = editorRange;
// set up key handlers for selection & closing
this._registerKeyboardNavHandlers();
this._registerEditorKeyboardNavHandlers();
// watch the window for mousedown events so that we can close the
// menu when we detect a click outside. This is preferable to
@ -197,19 +234,75 @@ export default Component.extend({
});
window.addEventListener('mousedown', this._onWindowMousedownHandler);
}
},
}
_hideMenu() {
if (this.showMenu) {
this.set('showMenu', false);
this._unregisterKeyboardNavHandlers();
this.showMenu = false;
this._unregisterEditorKeyboardNavHandlers();
window.removeEventListener('mousedown', this._onWindowMousedownHandler);
}
},
}
_moveSelection(direction) {
let {itemMap, selectedRowIndex, selectedColumnIndex} = this;
if (isEmpty(itemMap)) {
return;
}
let maxSelectedRowIndex = itemMap.length - 1;
let maxSelectedColumnIndex = itemMap[selectedRowIndex].length - 1;
if (direction === 'right') {
selectedColumnIndex += 1;
if (selectedColumnIndex > maxSelectedColumnIndex) {
if (selectedRowIndex < maxSelectedRowIndex) {
selectedRowIndex += 1;
} else {
selectedRowIndex = 0;
}
selectedColumnIndex = 0;
}
} else if (direction === 'left') {
selectedColumnIndex -= 1;
if (selectedColumnIndex < 0) {
if (selectedRowIndex > 0) {
selectedRowIndex -= 1;
} else {
selectedRowIndex = itemMap.length - 1;
}
selectedColumnIndex = itemMap[selectedRowIndex].length - 1;
}
} else if (direction === 'up') {
selectedRowIndex -= 1;
if (selectedRowIndex < 0) {
selectedRowIndex = maxSelectedRowIndex;
}
} else if (direction === 'down') {
selectedRowIndex += 1;
if (selectedRowIndex > maxSelectedRowIndex) {
selectedRowIndex = 0;
}
}
if (selectedColumnIndex > itemMap[selectedRowIndex].length - 1) {
selectedColumnIndex = itemMap[selectedRowIndex].length - 1;
}
this.selectedRowIndex = selectedRowIndex;
this.selectedColumnIndex = selectedColumnIndex;
}
_performAction() {
if (this.selectedItem) {
this.itemClicked(this.selectedItem);
}
}
_handleWindowMousedown(event) {
// clicks outside the menu should always close
if (!event.target.closest(`#${this.elementId}`)) {
if (!event.target.closest(`#${this.containerElement.id}`)) {
this._hideMenu();
// clicks on the menu but not on a button should be ignored so that the
@ -217,29 +310,12 @@ export default Component.extend({
} else if (!event.target.closest('[data-kg="cardmenu-card"]')) {
event.preventDefault();
}
},
}
_positionMenu(range) {
if (!range) {
return;
}
let {head: {section}} = range;
if (section && section.renderNode.element) {
let containerRect = this.element.parentNode.getBoundingClientRect();
let selectedElement = section.renderNode.element;
let selectedElementRect = selectedElement.getBoundingClientRect();
let top = selectedElementRect.top + selectedElementRect.height - containerRect.top + this._yOffset;
this.set('top', top);
}
},
_registerKeyboardNavHandlers() {
_registerEditorKeyboardNavHandlers() {
// ESC = close menu
// ARROWS = selection
let editor = this.editor;
let {editor} = this.args;
editor.registerKeyCommand({
str: 'ESC',
@ -276,88 +352,9 @@ export default Component.extend({
name: 'slash-menu',
run: run.bind(this, this._moveSelection, 'right')
});
},
_performAction() {
let selectedItem = this._getSelectedItem();
if (selectedItem) {
this.send('itemClicked', selectedItem);
}
},
_getSelectedItem() {
let sections = this.itemSections;
if (sections.length <= 0) {
return;
}
for (let section of sections) {
let item = section.items.find(sectionItem => sectionItem.selected);
if (item) {
return item;
}
}
},
_moveSelection(direction) {
let itemMap = this.itemMap;
if (isEmpty(itemMap)) {
return;
}
let selectedItem = this._getSelectedItem();
let selectedRow = itemMap.find(row => row.includes(selectedItem));
let selectedRowIndex = itemMap.indexOf(selectedRow);
let selectedItemIndex = selectedRow.indexOf(selectedItem);
let lastRowIndex = itemMap.length - 1;
let lastItemIndex = selectedRow.length - 1;
set(selectedItem, 'selected', false);
if (direction === 'right') {
selectedItemIndex += 1;
if (selectedItemIndex > lastItemIndex) {
if (selectedRowIndex < lastRowIndex) {
selectedRowIndex += 1;
} else {
selectedRowIndex = 0;
}
selectedItemIndex = 0;
}
} else if (direction === 'left') {
selectedItemIndex -= 1;
if (selectedItemIndex < 0) {
if (selectedRowIndex > 0) {
selectedRowIndex -= 1;
} else {
selectedRowIndex = itemMap.length - 1;
}
selectedItemIndex = itemMap[selectedRowIndex].length - 1;
}
} else if (direction === 'up') {
selectedRowIndex -= 1;
if (selectedRowIndex < 0) {
selectedRowIndex = lastRowIndex;
}
} else if (direction === 'down') {
selectedRowIndex += 1;
if (selectedRowIndex > lastRowIndex) {
selectedRowIndex = 0;
}
}
if (selectedItemIndex > itemMap[selectedRowIndex].length - 1) {
selectedItemIndex = itemMap[selectedRowIndex].length - 1;
}
set(itemMap[selectedRowIndex][selectedItemIndex], 'selected', true);
},
_unregisterKeyboardNavHandlers() {
let editor = this.editor;
editor.unregisterKeyCommands('slash-menu');
}
});
_unregisterEditorKeyboardNavHandlers() {
this.args.editor.unregisterKeyCommands('slash-menu');
}
}

10
lib/koenig-editor/addon/components/koenig-snippet-input.hbs Normal file
View File

@ -0,0 +1,10 @@
<div class="kg-input-bar absolute z-999" style={{this.style}} {{did-insert this.registerAndPositionElement}} ...attributes>
<input
placeholder="Snippet title"
value={{this.title}}
class="kg-link-input pa2 pr6 mih-100 ba br3 shadow-2 f8 lh-heading tracked-2 outline-0 b--blue h10 nudge-top--8"
{{on "input" this.titleInput}}
{{on "keydown" this.titleKeydown}}
{{did-insert this.focusInput}}
/>
</div>

181
lib/koenig-editor/addon/components/koenig-snippet-input.js Normal file
View File

@ -0,0 +1,181 @@
import Component from '@glimmer/component';
import getScrollParent from '../utils/get-scroll-parent';
import {TOOLBAR_MARGIN} from './koenig-toolbar';
import {action} from '@ember/object';
import {guidFor} from '@ember/object/internals';
import {run} from '@ember/runloop';
import {tracked} from '@glimmer/tracking';
// pixels that should be added to the `left` property of the tick adjustment styles
// TODO: handle via CSS?
const TICK_ADJUSTMENT = 8;
export default class KoenigSnippetInputComponent extends Component {
@tracked title = '';
@tracked style = ''.htmlSafe();
constructor() {
super(...arguments);
// record the range now because the property is bound and will update
// when the selection changes
this._snippetRange = this.args.snippetRange;
// grab a window range so that we can use getBoundingClientRect. Using
// document.createRange is more efficient than doing editor.setRange
// because it doesn't trigger all of the selection changing side-effects
// TODO: extract MobiledocRange->NativeRange into a util
let editor = this.args.editor;
let cursor = editor.cursor;
let {head, tail} = this.args.snippetRange;
let {node: headNode, offset: headOffset} = cursor._findNodeForPosition(head);
let {node: tailNode, offset: tailOffset} = cursor._findNodeForPosition(tail);
let range = document.createRange();
range.setStart(headNode, headOffset);
range.setEnd(tailNode, tailOffset);
this._windowRange = range;
// watch the window for mousedown events so that we can close the menu
// when we detect a click outside
this._onMousedownHandler = run.bind(this, this._handleMousedown);
window.addEventListener('mousedown', this._onMousedownHandler);
// watch for keydown events so that we can close the menu on Escape
this._onKeydownHandler = run.bind(this, this._handleKeydown);
window.addEventListener('keydown', this._onKeydownHandler);
}
willDestroy() {
window.removeEventListener('mousedown', this._onMousedownHandler);
window.removeEventListener('keydown', this._onKeydownHandler);
this._removeStyleElement();
}
@action
focusInput(element) {
let scrollParent = getScrollParent(element);
let scrollTop = scrollParent.scrollTop;
element.focus();
// reset the scroll position to avoid jumps
// TODO: why does the input focus cause a scroll to the bottom of the doc?
scrollParent.scrollTop = scrollTop;
}
@action
titleKeydown(event) {
if (event.key === 'Enter') {
// prevent Enter from triggering in the editor and removing text
event.preventDefault();
// convert selection into a mobiledoc document
let {snippetRange, editor} = this.args;
let mobiledoc = editor.serializePost(editor.post.trimTo(snippetRange), 'mobiledoc');
this.args.save({
title: event.target.value,
mobiledoc
}).then(() => {
this.args.cancel();
});
}
}
@action
titleInput(event) {
this.title = event.target.value;
}
// TODO: largely shared with {{koenig-toolbar}} and {{koenig-link-input}} - extract to a shared util?
@action
registerAndPositionElement(element) {
element.id = guidFor(element);
this.element = element;
let containerRect = this.element.offsetParent.getBoundingClientRect();
let rangeRect = this.args.snippetRect || this._windowRange.getBoundingClientRect();
let {width, height} = this.element.getBoundingClientRect();
let newPosition = {};
// rangeRect is relative to the viewport so we need to subtract the
// container measurements to get a position relative to the container
newPosition = {
top: rangeRect.top - containerRect.top - height - TOOLBAR_MARGIN,
left: rangeRect.left - containerRect.left + rangeRect.width / 2 - width / 2,
right: null
};
let tickPosition = 50;
// don't overflow left boundary
if (newPosition.left < 0) {
newPosition.left = 0;
// calculate the tick percentage position
let absTickPosition = rangeRect.left - containerRect.left + rangeRect.width / 2;
tickPosition = absTickPosition / width * 100;
if (tickPosition < 5) {
tickPosition = 5;
}
}
// same for right boundary
if (newPosition.left + width > containerRect.width) {
newPosition.left = null;
newPosition.right = 0;
// calculate the tick percentage position
let absTickPosition = rangeRect.right - containerRect.right - rangeRect.width / 2;
tickPosition = 100 + absTickPosition / width * 100;
if (tickPosition > 95) {
tickPosition = 95;
}
}
// the tick is a pseudo-element so we the only way we can affect it's
// style is by adding a style element to the head
this._removeStyleElement(); // reset to base styles
if (tickPosition !== 50) {
this._addStyleElement(`left: calc(${tickPosition}% - ${TICK_ADJUSTMENT}px)`);
}
// update the toolbar position
this.style = Object.keys(newPosition).map((style) => {
if (newPosition[style] !== null) {
return `${style}: ${newPosition[style]}px`;
}
}).compact().join('; ').htmlSafe();
}
_handleMousedown(event) {
if (this.element && !event.target.closest(this.element.id)) {
this.args.cancel();
}
}
_handleKeydown(event) {
if (event.key === 'Escape') {
this._cancelAndReselect();
}
}
_cancelAndReselect() {
this.args.cancel();
if (this._snippetRange) {
this.args.editor.selectRange(this._snippetRange);
}
}
_addStyleElement(styles) {
let styleElement = document.createElement('style');
styleElement.id = `${this.element.id}-style`;
styleElement.innerHTML = `#${this.element.id}:before, #${this.element.id}:after { ${styles} }`;
document.head.appendChild(styleElement);
}
_removeStyleElement() {
let styleElement = document.querySelector(`#${this.element.id}-style`);
if (styleElement) {
styleElement.remove();
}
}
}

21
lib/koenig-editor/addon/components/koenig-toolbar.hbs
View File

@ -19,7 +19,7 @@
{{svg-jar "koenig/kg-italic" class=(concat (if (or this.activeMarkupTagNames.isEm this.activeMarkupTagNames.isI) "fill-blue-l2" "fill-white") " w4 h4")}}
</button>
</li>
{{#unless basicOnly}}
{{#unless this.basicOnly}}
<li class="ma0 lh-solid">
<button
type="button"
@ -44,7 +44,7 @@
<li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
{{#unless basicOnly}}
{{#unless this.basicOnly}}
<li class="ma0 lh-solid">
<button
type="button"
@ -66,4 +66,21 @@
{{svg-jar "koenig/kg-link" class=(concat (if this.activeMarkupTagNames.isA "fill-blue-l2" "fill-white") " w4 h4")}}
</button>
</li>
{{#if (enable-developer-experiments)}}
{{#unless this.basicOnly}}
<li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5" role="separator"></li>
<li class="ma0 lh-solid">
<button
type="button"
title="Create snippet"
class="dib dim-lite link h9 w9 nudge-top--1"
{{on "click" @addSnippet}}
>
{{svg-jar "koenig/kg-quote" class="w4 h4"}}
</button>
</li>
{{/unless}}
{{/if}}
</KgActionBar>

2
lib/koenig-editor/addon/options/cards.js
View File

@ -48,6 +48,7 @@ export default [
export const CARD_MENU = [
{
title: 'Primary',
rowLength: 3,
items: [{
label: 'Image',
icon: 'koenig/kg-card-type-image',
@ -110,6 +111,7 @@ export const CARD_MENU = [
},
{
title: 'Embed',
rowLength: 3,
items: [{
label: 'YouTube',
icon: 'koenig/kg-card-type-youtube',

13
lib/koenig-editor/addon/utils/get-scroll-parent.js Normal file
View File

@ -0,0 +1,13 @@
export default function getScrollParent(node) {
const isElement = node instanceof HTMLElement;
const overflowY = isElement && window.getComputedStyle(node).overflowY;
const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';
if (!node) {
return null;
} else if (isScrollable && node.scrollHeight >= node.clientHeight) {
return node;
}
return getScrollParent(node.parentNode) || document.body;
}

1
lib/koenig-editor/app/components/koenig-snippet-input.js Normal file
View File

@ -0,0 +1 @@
export {default} from 'koenig-editor/components/koenig-snippet-input';

5
mirage/config.js
View File

@ -5,13 +5,14 @@ import mockEmails from './config/emails';
import mockIntegrations from './config/integrations';
import mockInvites from './config/invites';
import mockLabels from './config/labels';
import mockMembers, {mockMembersStats} from './config/members';
import mockMembers from './config/members';
import mockPages from './config/pages';
import mockPosts from './config/posts';
import mockRoles from './config/roles';
import mockSettings from './config/settings';
import mockSite from './config/site';
import mockSlugs from './config/slugs';
import mockSnippets from './config/snippets';
import mockTags from './config/tags';
import mockThemes from './config/themes';
import mockUploads from './config/uploads';
@ -34,7 +35,7 @@ export default function () {
// this.put('/posts/:id/', versionMismatchResponse);
// mockTags(this);
// this.loadFixtures('settings');
mockMembersStats(this);
mockSnippets(this);
// keep this line, it allows all other API requests to hit the real server
this.passthrough();

6
mirage/config/snippets.js Normal file
View File

@ -0,0 +1,6 @@
export default function mockSnippets(server) {
server.get('/snippets/');
server.post('/snippets/');
server.put('/snippets/:id/');
server.del('/snippets/:id/');
}

3
mirage/models/snippet.js Normal file
View File

@ -0,0 +1,3 @@
import {Model} from 'ember-cli-mirage';
export default Model.extend({});