tqt/Ghost-Admin
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost-Admin.git synced 2023-12-14 02:33:04 +01:00
Code Issues Releases Wiki Activity
Ghost-Admin/lib/koenig-editor/addon/templates/components/koenig-editor.hbs

80 lines
2.6 KiB
Handlebars
Raw Normal View History

Koenig - Remove reliance on CSS class selectors no issue - switch to using data attributes instead of class names to target elements to avoid problems if CSS class names change or are removed
2018-05-02 18:31:17 +02:00
<div class="koenig-editor__editor-wrapper" data-kg="editor-wrapper">
🐛 Koenig - Disable Grammarly to fix high CPU usage refs https://github.com/TryGhost/Ghost/issues/9623 - see mobiledoc-kit [caveats](https://github.com/bustle/mobiledoc-kit#caveats) and [associated grammarly issue](https://github.com/bustle/mobiledoc-kit/issues/422)
2018-06-11 19:48:43 +02:00
<div class="koenig-editor__editor" data-gramm="false" data-kg="editor"></div>
Koenig reboot - rich text (#952) refs https://github.com/TryGhost/Ghost/issues/9311 Koenig is being fully rebooted, first port of call is to focus on getting the rich-text only aspect of mobiledoc-kit working with our popup toolbar. - renames old koenig implementation (used for reference, will eventually be deleted) - new `{{koenig-editor}}` mobiledoc-kit component implementation based on ember-mobiledoc-editor - markdown text expansions - new `{{gh-koenig-edtor}}` that wraps our title+editor and handles keyboard navigation between the two - clicks below content will focus the editor - new `{{koenig-toolbar}}` component for the popup formatting toolbar with improved behaviour and simplified code
2018-01-30 11:01:07 +01:00
</div>
{{!-- pop-up markup toolbar is shown when there's a selection --}}
Koenig - Cleanup toolbar invocation no issue - move toolbar markup into the component's template rather than passing it as a block param to keep the `{{koenig-editor}}` template easier to read and more consistent
2018-02-20 16:14:28 +01:00
{{koenig-toolbar
Koenig - Link creation/editing via formatting toolbar refs https://github.com/TryGhost/Ghost/issues/9505 - wire up the link button in the toolbar to set a `linkRange` property on `{{koenig-editor}}` - add `{{koenig-link-input}}` that is shown when `{{koenig-editor}}` has a `linkRange` set - <kbd>Escape</kbd> will cancel the link input - clicking outside the input will cancel the link input - previously selected text will be re-selected on cancel - if an existing link was selected (or partially selected) then pre-fill the link input with the `href` - `X` is shown when there's a href value and clicking will clear the input - <kbd>Enter</kbd> *with* a href value will remove all links from text that is touched by the selection and create a new link across only the selected text - <kbd>Enter</kbd> *with no* href value will remove all links touched by the selection - fixed toolbar tick positioning that was 8px off after change to Spirit classes
2018-04-06 18:49:16 +02:00
editor=editor
Koenig - Cleanup toolbar invocation no issue - move toolbar markup into the component's template rather than passing it as a block param to keep the `{{koenig-editor}}` template easier to read and more consistent
2018-02-20 16:14:28 +01:00
editorRange=selectedRange
activeMarkupTagNames=activeMarkupTagNames
activeSectionTagNames=activeSectionTagNames
toggleMarkup=(action "toggleMarkup")
toggleSection=(action "toggleSection")
Koenig - Strip all formatting except links when converting to a heading refs https://github.com/TryGhost/Ghost/issues/9623 - adds `toggleHeaderSection` action to have a central place for logic - adds `_performEdit()` so that we can avoid nested runloops in actions - update text expansion and toolbar to use the new `toggleHeaderSection` action
2018-05-15 13:08:58 +02:00
toggleHeaderSection=(action "toggleHeaderSection")
Koenig - Link creation/editing via formatting toolbar refs https://github.com/TryGhost/Ghost/issues/9505 - wire up the link button in the toolbar to set a `linkRange` property on `{{koenig-editor}}` - add `{{koenig-link-input}}` that is shown when `{{koenig-editor}}` has a `linkRange` set - <kbd>Escape</kbd> will cancel the link input - clicking outside the input will cancel the link input - previously selected text will be re-selected on cancel - if an existing link was selected (or partially selected) then pre-fill the link input with the `href` - `X` is shown when there's a href value and clicking will clear the input - <kbd>Enter</kbd> *with* a href value will remove all links from text that is touched by the selection and create a new link across only the selected text - <kbd>Enter</kbd> *with no* href value will remove all links touched by the selection - fixed toolbar tick positioning that was 8px off after change to Spirit classes
2018-04-06 18:49:16 +02:00
editLink=(action "editLink")
Koenig - Cleanup toolbar invocation no issue - move toolbar markup into the component's template rather than passing it as a block param to keep the `{{koenig-editor}}` template easier to read and more consistent
2018-02-20 16:14:28 +01:00
}}
Koenig - Initial card support refs https://github.com/TryGhost/Ghost/issues/9311 - use a similar approach as used in `ember-mobiledoc-editor` to render a div into the editor canvas then use Ember's `{{-in-element}}` helper as a wormhole to render an ember component card into the new div - adds a `createComponentCard` util for setting up the necessary rendering boilerplate for Ember component cards
2018-01-30 16:18:08 +01:00
Koenig - Link hover toolbar refs https://github.com/TryGhost/Ghost/issues/9505 - disable `mobiledoc-kit`'s built-in link tooltip - add `{{koenig-link-toolbar}}` component - shows toolbar above a link when it is hovered with the mouse - hides toolbar when a link isn't hovered - has a clickable link with the URL, opens in a new tab - edit button switches display to the link input toolbar - delete button removes link markup from the link
2018-04-11 19:42:27 +02:00
{{!-- pop-up link hover toolbar --}}
{{koenig-link-toolbar
editor=editor
container=element
linkRange=linkRange
selectedRange=selectedRange
editLink=(action "editLink")
}}
Koenig - Link creation/editing via formatting toolbar refs https://github.com/TryGhost/Ghost/issues/9505 - wire up the link button in the toolbar to set a `linkRange` property on `{{koenig-editor}}` - add `{{koenig-link-input}}` that is shown when `{{koenig-editor}}` has a `linkRange` set - <kbd>Escape</kbd> will cancel the link input - clicking outside the input will cancel the link input - previously selected text will be re-selected on cancel - if an existing link was selected (or partially selected) then pre-fill the link input with the `href` - `X` is shown when there's a href value and clicking will clear the input - <kbd>Enter</kbd> *with* a href value will remove all links from text that is touched by the selection and create a new link across only the selected text - <kbd>Enter</kbd> *with no* href value will remove all links touched by the selection - fixed toolbar tick positioning that was 8px off after change to Spirit classes
2018-04-06 18:49:16 +02:00
{{!-- pop-up link editing toolbar --}}
{{#if linkRange}}
{{koenig-link-input
editor=editor
linkRange=linkRange
selectedRange=selectedRange
cancel=(action "cancelEditLink")
}}
{{/if}}
Koenig - (+) card/list selection menu refs https://github.com/TryGhost/Ghost/issues/9311 - re-implement the (+) card/list selection menu from the old Koenig alpha with improved positioning and event handling - buttons work for the currently available cards - `<hr>` and `markdown`
2018-01-31 15:49:20 +01:00
{{!-- (+) icon and pop-up menu --}}
{{koenig-plus-menu
editor=editor
Koenig - Move list/card replacement actions into {{koenig-editor}}
2018-02-02 16:22:37 +01:00
editorRange=selectedRange
replaceWithCardSection=(action "replaceWithCardSection")
}}
Koenig - Slash menu refs https://github.com/TryGhost/Ghost/issues/9311 - adds `{{koenig-slash-menu}}` component that renders a quick-access card/block menu when typing `/` at the beginning of a new paragraph
2018-02-03 17:54:19 +01:00
{{!-- slash menu popup --}}
{{koenig-slash-menu
editor=editor
editorRange=selectedRange
replaceWithCardSection=(action "replaceWithCardSection")
Koenig - (+) card/list selection menu refs https://github.com/TryGhost/Ghost/issues/9311 - re-implement the (+) card/list selection menu from the old Koenig alpha with improved positioning and event handling - buttons work for the currently available cards - `<hr>` and `markdown`
2018-01-31 15:49:20 +01:00
}}
Koenig - Slash menu refs https://github.com/TryGhost/Ghost/issues/9311 - adds `{{koenig-slash-menu}}` component that renders a quick-access card/block menu when typing `/` at the beginning of a new paragraph
2018-02-03 17:54:19 +01:00
{{!-- all component cards wormholed into the editor canvas --}}
Koenig - Initial card support refs https://github.com/TryGhost/Ghost/issues/9311 - use a similar approach as used in `ember-mobiledoc-editor` to render a div into the editor canvas then use Ember's `{{-in-element}}` helper as a wormhole to render an ember component card into the new div - adds a `createComponentCard` util for setting up the necessary rendering boilerplate for Ember component cards
2018-01-30 16:18:08 +01:00
{{#each componentCards as |card|}}
{{!--
TODO: move to the public {{in-element}} API when it's available
https://github.com/cibernox/rfcs/blob/make-in-element-public/text/0000-promote-in-element-to-public-api.md
--}}
{{#-in-element card.destinationElement}}
Koenig - Move to generic card names refs https://github.com/TryGhost/Ghost/issues/9311 - use `hr`, `image`, and `markdown` as card names instead of codifying the `koenig-card-` prefix into the mobiledoc
2018-02-01 12:26:24 +01:00
{{component card.componentName
Koenig - Initial card support refs https://github.com/TryGhost/Ghost/issues/9311 - use a similar approach as used in `ember-mobiledoc-editor` to render a div into the editor canvas then use Ember's `{{-in-element}}` helper as a wormhole to render an ember component card into the new div - adds a `createComponentCard` util for setting up the necessary rendering boilerplate for Ember component cards
2018-01-30 16:18:08 +01:00
editor=editor
postModel=card.postModel
cardName=card.cardName
payload=card.payload
env=card.env
options=card.options
Koenig - Sticky card icons (#1013) refs https://github.com/TryGhost/Ghost/issues/9505 - use `ember-sticky-element` to stick card icons in top left when scrolling - pass an `headerOffset` down from the `{{gh-editor}}` component through Koenig and the card components so that it can be used for adjustments where necessary - calculate `headerHeight` in `{{gh-editor}}` any time we change the header class
2018-05-01 16:55:51 +02:00
headerOffset=headerOffset
Koenig - Initial card support refs https://github.com/TryGhost/Ghost/issues/9311 - use a similar approach as used in `ember-mobiledoc-editor` to render a div into the editor canvas then use Ember's `{{-in-element}}` helper as a wormhole to render an ember component card into the new div - adds a `createComponentCard` util for setting up the necessary rendering boilerplate for Ember component cards
2018-01-30 16:18:08 +01:00
saveCard=(action card.env.save)
cancelCard=(action card.env.cancel)
removeCard=(action card.env.remove)
Koenig - Card selection and deletion refs https://github.com/TryGhost/Ghost/issues/9311 - cursor based card selection - handling of delete/backspace when cards are involved - add `cursorDidExitAtTop` closure action to `{{koenig-editor}}` to consolidate editor cursor behaviour in the editor - added extra behaviour for LEFT in editor and RIGHT in title to switch focus between title and editor - fixed incorrect icon in the slash menu
2018-02-04 20:35:44 +01:00
isSelected=card.isSelected
Koenig - Generic `{{koenig-card}}` container card component refs https://github.com/TryGhost/Ghost/issues/9311 - initial CSS for container card outline, selection state, toolbar, etc - adds `{{#koenig-card}}` component to be used inside of component card templates to handle the default card container HTML, mouse interactions, etc - update `{{koenig-card-markdown}}` to use the new `{{koenig-card}}` component - add render/edit mode views - focus the textarea when entering edit mode - updated `{{koenig-editor}}` - add <kbd>Cmd+Enter</kbd> command to put a selected card into edit mode - when inserting new cards put them into edit mode immediately - move edit/select methods out of actions and into normal methods so that timing is easier to reason about - skip `cursorDidChange` process when cursor changes as a result of a card selection, fixes issues with `selectCard` being triggered multiple times unexpectedly
2018-02-13 19:00:54 +01:00
isEditing=card.isEditing
🎨 Koenig - Exit edit mode of a card when clicking outside the card refs https://github.com/TryGhost/Ghost/issues/9623 - register window click handler in `{{koenig-card}}` whilst card is in edit mode - deselect card when a click is registered - ignore any clicks inside the card - ignore any clicks that originate inside of a modal - pass our `deselectCard` action through to all cards
2018-05-23 12:38:30 +02:00
selectCard=(action "selectCard" card)
deselectCard=(action "deselectCard" card)
Koenig - Generic `{{koenig-card}}` container card component refs https://github.com/TryGhost/Ghost/issues/9311 - initial CSS for container card outline, selection state, toolbar, etc - adds `{{#koenig-card}}` component to be used inside of component card templates to handle the default card container HTML, mouse interactions, etc - update `{{koenig-card-markdown}}` to use the new `{{koenig-card}}` component - add render/edit mode views - focus the textarea when entering edit mode - updated `{{koenig-editor}}` - add <kbd>Cmd+Enter</kbd> command to put a selected card into edit mode - when inserting new cards put them into edit mode immediately - move edit/select methods out of actions and into normal methods so that timing is easier to reason about - skip `cursorDidChange` process when cursor changes as a result of a card selection, fixes issues with `selectCard` being triggered multiple times unexpectedly
2018-02-13 19:00:54 +01:00
editCard=(action "editCard" card)
Koenig - Remove markdown/embed card if it's empty when leaving edit mode refs https://github.com/TryGhost/Ghost/issues/9505 - add `deleteCard` action to `{{koenig-editor}}` component and pass it through to the component cards - required modifying the `_deleteCard` behaviour so that it doesn't always try to move the cursor - use `onLeaveEdit` action from `{{koenig-card}}` in the markdown and html cards to check if their payload is empty and remove the card when exiting edit mode - fixed `onLeaveEdit` action firing when card first rendered
2018-03-15 18:54:15 +01:00
deleteCard=(action "deleteCard" card)
Koenig - Image card refs https://github.com/TryGhost/Ghost/issues/9311 - add actions for cursor movement and pass through to card components - `moveCursorToNextSection` deselects card and places cursor at beginning of next section, useful for caption inputs where <kbd>down arrow</kbd> or <kbd>right arrow</kbd> should move the cursor out of the input & card. Also creates an empty paragraph before moving the cursor if for some reason an empty paragraph doesn't exist after the last card in the doc - `moveCursorToPrevSection` deselects card and places cursor at end of previous section, useful for caption inputs where <kbd>up arrow</kbd> or <kbd>left arrow</kbd> should move the cursor out of the input & card - `addParagraphAfterCard` deselects card, creates a new paragraph after the card and moves the cursor to it. Useful for caption inputs where <kbd>enter</kbd> should have the same behaviour as if it was pressed whilst the card is selected - modify `{{gh-uploader}}` so that it passes the FileList to it's `onStart` closure action. Useful for displaying previews when uploading images - modify `{{koenig-card}}` toolbar display so that it can display text as well as icon buttons - update `{{koenig-card-image}}` so that it has a full image uploader and caption input
2018-02-22 21:41:40 +01:00
moveCursorToPrevSection=(action "moveCursorToPrevSection" card)
moveCursorToNextSection=(action "moveCursorToNextSection" card)
addParagraphAfterCard=(action "addParagraphAfterCard" card)
✨ Koenig - Added reading time and word count display refs https://github.com/TryGhost/Ghost/issues/9724 - add `registerComponent` hook to cards so that `{{koenig-editor}}` can fetch properties from card components directly - add word count and reading time utilities - add throttled word count update routine to `{{koenig-editor}}` that walks all sections and counts text words or fetches word/image counts from card components - add `wordCountDidChange` hook to `{{koenig-editor}}` so that word count + reading time can be exposed - modify editor controller to update it's own word count property when koenig triggers it's action - modified the editor template to show reading time + word count next to the post status
2018-07-20 16:53:21 +02:00
registerComponent=(action (mut card.component))
Koenig - Initial card support refs https://github.com/TryGhost/Ghost/issues/9311 - use a similar approach as used in `ember-mobiledoc-editor` to render a div into the editor canvas then use Ember's `{{-in-element}}` helper as a wormhole to render an ember component card into the new div - adds a `createComponentCard` util for setting up the necessary rendering boilerplate for Ember component cards
2018-01-30 16:18:08 +01:00
}}
{{/-in-element}}
🎨 Koenig - Exit edit mode of a card when clicking outside the card refs https://github.com/TryGhost/Ghost/issues/9623 - register window click handler in `{{koenig-card}}` whilst card is in edit mode - deselect card when a click is registered - ignore any clicks inside the card - ignore any clicks that originate inside of a modal - pass our `deselectCard` action through to all cards
2018-05-23 12:38:30 +02:00
{{/each}}
Reference in a new issue Copy permalink