Commit Graph

57 Commits

Author SHA1 Message Date
Kevin Ansfield
d87787c47c Koenig - Fix error on SHIFT+ENTER whilst a card is selected
refs https://github.com/TryGhost/Ghost/issues/9505
- a card section isn't markerable so a guard is needed to prevent inserting the soft-break atom
2018-04-10 15:34:12 +01:00
Kevin Ansfield
2c8a28f77a Koenig - Fixed markdown expansions not capturing 1 or 2 char markups
refs https://github.com/TryGhost/Ghost/issues/9505
- adjusted regexes to match a non-space group separately to a spaced group to deal with 1 or 2 chars of markup
- fixed `matchStrongStar` always triggering a markup toggle because the toggle was outside of the match conditional
2018-04-10 15:04:18 +01:00
Kevin Ansfield
d6a6fc3d7c Koenig - Fixed UP or LEFT on a blank list item jumping cursor to title
refs https://github.com/TryGhost/Ghost/issues/9505
- ListItem sections have a parent rather than a prev section so we need to look for a section before the parent section when determining if the cursor is at the beginning of the doc for <kbd>Up</kbd> and <kbd>Left</kbd> key handling
2018-04-10 11:26:22 +01:00
Kevin Ansfield
4be392ef16 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 17:49:16 +01:00
Kevin Ansfield
18202d24de Koenig - Fix hidden toolbar still being clickable
no issue
- when switching to Spirit classes the `pointer-events` styles to properly hide the hidden toolbar and `z-index` to keep the toolbar above the title input had both been missed
2018-04-04 10:12:31 +01:00
Kevin Ansfield
4f08b7fb8d Koenig - Switch card context menu to Spirit classes
refs https://github.com/TryGhost/Ghost/issues/9505
- use Spirit classes for card context menu
- add button and icon class options for context menu items
- add ability to have icon+text for context menu items
- add "Edit" context menu item to markdown and html cards
2018-04-03 18:34:01 +01:00
Kevin Ansfield
508cd31265 Koenig - Update toolbar to use Spirit classes
refs https://github.com/TryGhost/Ghost/issues/9505
- switch `{{koenig-toolbar}}` to use Spirit classes and icons
- wrap the toolbar `<ul>` in an absolutely positioned `<div>` rather than positioning the toolbar directly to improve animation behaviour
- remove old/unused Koenig SVG icons
2018-04-03 16:52:00 +01:00
Kevin Ansfield
f18a23434f Koenig - Fixed trailing-spaces when using markdown text expansions
refs https://github.com/TryGhost/Ghost/issues/9505
- previous attempts at toggling the markup state failed because mobiledoc-kit was automatically setting the activeMarkupState after we made the replacement
- by scheduling the toggle we change the active markup state after mobiledoc has done it's thing so you can continue typing without the markdown markup being applied and without needing to insert an unexpected space
2018-04-03 13:43:08 +01:00
Kevin Ansfield
6bff262849 Switch to packaged version of Spirit (#985)
no issue
- remove the manually copied Spirit CSS files
- remove the manually copied Spirit helpers
- install `ember-cli-ghost-spirit` addon
- remove manual postcss configuration
- update all `color()` functions in CSS to `color-mod()`
- fixed invalid `color-mod()` usage in `power-calendar.css`
- bump sub-dependencies
2018-04-03 11:52:18 +01:00
Austin Burdine
ff69766442 Swap out ember-inline-svg for ember-svg-jar (#970)
closes TryGhost/Ghost#9506
2018-03-19 09:57:31 +00:00
Kevin Ansfield
25bc402f72 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 17:54:15 +00:00
Kevin Ansfield
a59752d4a5 Koenig - Standardise on <em> but allow <i> to be toggled off via toolbar
refs https://github.com/TryGhost/Ghost/issues/9505
- switch toolbar `I` button to toggle `<em>` instead of `<i>`, this standardises it with the <kbd>Meta+I</kbd> shortcut
- if the active markup is `<i>` instead of `<em>` then highlight the `I` button and allow it to be toggled off to prevent confusion
2018-03-15 17:25:10 +00:00
Kevin Ansfield
cc083ef93f Koenig - Improve MD text expansion behaviour
refs https://github.com/TryGhost/Ghost/issues/9505
- fix overzealous matching of inline formatting
  - ensure the match starts with a space or the start of the paragraph
  - ensure the start matched chars are not followed by a space
  - ensure the end matched chars are not preceded by a space
  - avoid matching more MD chars than expected
- allow text expansions to work when editing text in the middle of a paragraph
  - do not add a trailing space after reformatting in this case
2018-03-15 17:13:50 +00:00
Kevin Ansfield
775e59f55b Koenig - Don't display toolbar for keyboard selections
refs https://github.com/TryGhost/Ghost/issues/9505
- implements similar `mousemove` event handling in `{{koenig-toolbar}}` as we use in `{{koenig-card}}` to not show the toolbar until we are sure there's mouse interaction
2018-03-15 15:15:53 +00:00
Kevin Ansfield
3ef3ebfd6b Koenig - Move list creation from card menus to toolbar
refs https://github.com/TryGhost/Ghost/issues/9505
- remove unordered and bullet list icons from the (+) and / menus
- add unordered and bullet list icons to the formatting toolbar
- reorder toolbar icons to match latest design specs
- remove now-unused `replaceWithListItem` actions
2018-03-15 14:35:39 +00:00
Kevin Ansfield
b0ef0409df Fix linting error 2018-03-15 11:10:12 +00:00
Kevin Ansfield
49ff6ad6b6 Koenig - Fixed formatting being lost when deleting cards
refs https://github.com/TryGhost/Ghost/issues/9311
- when using <kbd>Backspace</kbd> to delete a card the formatting (eg, heading format) on the following section would be lost
- switched to using `editor.removeSection` and a cursor change to avoid the range style deletion stripping the formatting
2018-03-14 16:30:28 +00:00
Kevin Ansfield
6e5710364e Koenig - Fixed backspace not deleting empty para at beginning of doc
refs https://github.com/TryGhost/Ghost/issues/9311
- something that became apparent after adding the "<kbd>Enter</kbd> in post title adds blank paragraph" feature was that using that feature left you in a position where Backspace doesn't do what you expect - it does nothing rather than deleting the blank paragraph
- added logic to the `handleBackspaceKey` handler in `{{koenig-editor}}` to detect when backspace is pressed on a blank paragraph at the start of the doc so that we remove it then focus the title
2018-03-14 16:13:33 +00:00
Kevin Ansfield
13ccd50404 Koenig - Fix image creation via (+) menu
refs https://github.com/TryGhost/Ghost/issues/9311
- image icon was missing the appropriate action
2018-03-14 12:23:54 +00:00
Kevin Ansfield
a20f4080f6 Koenig - Fix error when inserting cards in certain circumstances
refs https://github.com/TryGhost/Ghost/issues/9311
- the card selection in `cursorDidChange` would sometimes fail because the selection would be attempted before the newly inserted card had been pushed on to the `componentCards` array. This was reliably triggered by adding a card to a blank header section via the /-menu
- scheduling the section `afterRender` ensures that the `willRender` hook has fired and populated the `componentCards` array before the selection occurs
2018-03-14 12:13:54 +00:00
Kevin Ansfield
355bf18c7c Koenig - Wrap HR card in {{koenig-card}} component
refs https://github.com/TryGhost/Ghost/issues/9311
- makes the HR card behave like the other cards wrt hover and selection visibility
2018-03-14 11:44:09 +00:00
Kevin Ansfield
1a673cfe99 Koenig - Allow blank paragraphs to be deleted with Delete
refs https://github.com/TryGhost/Ghost/issues/9311
- adjust our <kbd>Delete</kbd> card deletion logic to not fire if we're on a blank paragraph
- allows blank paragraphs between cards to be deleted, feels more natural
2018-03-14 11:01:28 +00:00
Kevin Ansfield
c8dd95c490 Koenig - Hide unused elements in (+) menu
refs https://github.com/TryGhost/Ghost/issues/9311
- we don't and will unlikely ever have a "Text" card
- commented out the search input and "Primary" header, it won't be used until we have many more cards
2018-03-14 10:51:44 +00:00
Kevin Ansfield
eb26d0baca Koenig - Close (+) menu when pressing Escape
refs https://github.com/TryGhost/Ghost/issues/9311
- close menu and reset the caret position in the editor when <kbd>Esacape</kbd> is pressed whilst the (+) menu is open
2018-03-14 10:50:38 +00:00
Kevin Ansfield
aa229973ec Remove ember-one-way-controls (#959)
closes https://github.com/TryGhost/Ghost/issues/9386
- remove usage of `{{one-way-checkbox}}` in favour of direct HTML+handlebars
- add `{{gh-text-input}}` that inherits from Ember's built-in `TextInput` component along with our custom `TextInput` mixin
- swap all uses of `{{gh-input}}` for `{{gh-text-input}}
- remove `{{gh-input}}` component
- update `{{gh-textarea}}` to inherit from Ember's `TextArea` component instead of `OneWayTextarea` and update all component uses accordingly
- update `{{gh-trim-focus-input}}` to inherit from `{{gh-text-input}}` and update all component uses accordingly
- standardize on using the `focus-out` action naming rather than `focusOut` for all text inputs, this is because the text input components (especially `{{gh-trim-focus-input}}`) have their own `focusOut` handler which gets overridden if consumers supply their own `focusOut` attr
- drop `ember-one-way-controls` package
- add `ember-one-way-select` package
2018-02-28 11:44:03 +00:00
Kevin Ansfield
5d552202f6 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 20:41:40 +00:00
Kevin Ansfield
618643606a Koenig - Allow clicks on cards to pass through for inputs
refs https://github.com/TryGhost/Ghost/issues/9311
- add `hasEditMode` flag to the `{{koenig-card}}` component so that cards without an edit mode (eg, the image card) don't have unnecessary state changes and even listeners
- allow `mousedown` events on cards to passthrough when selecting if the target was an input or textarea so that the cursor can be placed in an input immediately instead of requiring double clicks
2018-02-22 13:46:24 +00:00
Kevin Ansfield
fecbbd518c Koenig - Fixed more keyboard card selection bugs
refs https://github.com/TryGhost/Ghost/issues/9311
- removed most of the hairy logic in `cursorDidChange` around the cursor positioning changing between head and tail within a selected card in favour of ignoring all head/tail flip flops within a selected card section and a little extra logic in our <kbd>left arrow</kbd> key handler
2018-02-21 22:48:45 +00:00
Kevin Ansfield
b8a7925f46 Update Spirit CSS 2018-02-20 17:40:17 +00:00
Kevin Ansfield
37f393ca27 Koenig - Add caption to HTML/embed card
refs https://github.com/TryGhost/Ghost/issues/9311
- add basic implementation of a caption field to the embed card
2018-02-20 15:53:58 +00:00
Kevin Ansfield
5fa1b28a53 Koenig - Another fix for cards being deselected when clicking in edit mode
refs https://github.com/TryGhost/Ghost/issues/9311
- we added a guard for the caret moving from end to beginning of a card when clicking on a card whilst in edit mode in 26dd4ffb4a but it's also possible for clicks to cause the caret to move in the opposite direction
- update the guard in `cursorDidChange` to ignore the caret moving in either direction whilst a card is in edit mode
2018-02-20 15:34:09 +00:00
Kevin Ansfield
ddb46d7731 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 15:20:35 +00:00
Kevin Ansfield
4636b4be0d Koenig - Initial Spirit styles integration
no issue
- copy Spirit styles over (eventually these will live in an addon)
- update `ember-cli-build` to output a separate CSS file for Spirit
- update `asset-delivery` addon to output Spirit CSS link
- add `{{kg-style}}` helper for Spirit class names
- update `{{koenig-card}}` and the `{{koenig-card-markdown/html}}` components to use Spirit class names and markup
- replace markdown icon with new version from Spirit
2018-02-20 15:05:19 +00:00
Kevin Ansfield
56490b7a5f Koenig - Add click overlay to embed card
refs https://github.com/TryGhost/Ghost/issues/9311
- adds an overlay element to the embed card so that clicks do not interact with any embedded iframes so that you can lazy click to enter edit mode
2018-02-15 17:14:30 +00:00
Kevin Ansfield
e2daf96014 Koenig - Allow blank paragraphs to be deleted with Backspace
refs https://github.com/TryGhost/Ghost/issues/9311
- adjust our backspace card deletion logic to not fire if we're on a blank paragraph
- allows blank paragraphs to be deleted, feels more natural
2018-02-15 16:31:51 +00:00
Kevin Ansfield
3f1e5b9fa9 Koenig - Update {{koenig-card-html}} to use new {{koenig-card}} container
refs https://github.com/TryGhost/Ghost/issues/9311
- wraps embed card in same container as the markdown card to handle mouse selection/edit toggles etc
- add render mode to embed card
- autofocus CodeMirror editor when switching to edit mode
- fix incorrect pointer on cards
2018-02-15 15:57:44 +00:00
Kevin Ansfield
26dd4ffb4a Koenig - Fix cards being deselected when clicking in edit mode
refs https://github.com/TryGhost/Ghost/issues/9311
- there was an issue where clicking inside a card whilst it was in edit mode would cause the cursor position in the editor to change from the end of a card to the beginning which would re-run our card selection routine and de-selecting the card
- add a guard to the `cursorDidChange` method that looks for an end-to-beginning move whilst a card is in edit mode and ignores it
2018-02-15 15:52:08 +00:00
Kevin Ansfield
b3b07e488f Koenig - Fix sticky (+) button when clicking to select card
no issue
- if the (+) button was visible and you clicked on a card to select it the cursor moved but the (+) button remained because we weren't updating the `selectedRange` property
2018-02-15 15:02:37 +00:00
Kevin Ansfield
cfc32f2539 Koenig - Remove old Koenig alpha code
refs https://github.com/TryGhost/Ghost/issues/9311
- old code is no longer needed for reference so cleaning up
2018-02-15 10:46:23 +00:00
Kevin Ansfield
2e4990093f 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 18:00:54 +00:00
Kevin Ansfield
4381c17216 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
Kevin Ansfield
6d4d6cbc51 Koenig - HTML card template
refs https://github.com/TryGhost/Ghost/issues/9311
- add a basic HTML card that renders a CodeMirror editor
- adjust styles so that CodeMirror styles for the markdown editor don't affect CodeMirror instances inside Koenig
2018-02-03 19:20:50 +01:00
Kevin Ansfield
5d4053dec2 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:57 +01:00
Kevin Ansfield
d0ca47892a Koenig - Move list/card replacement actions into {{koenig-editor}} 2018-02-03 17:54:57 +01:00
Kevin Ansfield
f65c87a829 Koenig - Show (+) button on blank paragraph mouseover
refs https://github.com/TryGhost/Ghost/issues/9311
- add a mousemove event handler that shows the (+) next to blank paragraphs when the pointer is over them
- fix sticky button when adding a card mid-document by hiding it, we get another `didReceiveAttrs` call with the new range when adding a blank paragraph so it's still shown in that situation
- fix the incorrect button position when adding a card at the bottom of the doc by re-positioning in the next runloop. Problem seems to stem from the component card being rendered after we get the new range so our position calculations are out of sync
2018-02-02 12:56:55 +01:00
Kevin Ansfield
2ca441438d Koenig - Fix plus menu teardown but
no issue
- fixed typo that was throwing an error on `willDestroyElement` of `{{koenig-plus-menu}}`
2018-02-01 18:29:33 +01:00
Kevin Ansfield
d7506a53eb Koenig - Re-position toolbar and plus menu on window resize
refs https://github.com/TryGhost/Ghost/issues/9311
- extract positioning routines into methods
- throttle positioning method calls on window resizes
2018-02-01 17:48:16 +01:00
Kevin Ansfield
964a1e9aa3 Koenig - Fixed card insertion via plus menu 2018-02-01 16:44:49 +01:00
Kevin Ansfield
2cef2a4f1e 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
Kevin Ansfield
eb319cef4b Koenig - Use {{inline-svg}} helper in {{koenig-plus-menu}}
refs https://github.com/TryGhost/Ghost/issues/9311
- use the `{{inline-svg}}` helper instead of having SVGs inlined manually in the component template
- rename the koenig icons directory
- add the koenig icons directory to the list of locations used by `{{inline-svg}}`
2018-01-31 16:20:27 +01:00