Commit Graph

73 Commits

Author SHA1 Message Date
Kevin Ansfield
756b6627a9 Editor refactors (#679)
no issue

* split key commands and text expansions into separate files for easier file searches

* basic formatting, added a few comments

* move editor title input into addon
- the editor and title are now tightly integrated so that it's possible to use up/down cursor navigation so it makes more sense to keep them together
- start of a deeper component restructure so that we don't need to leak properties/actions to parent components

* first pass at refactor of gh-koenig and koenig-title-input
- remove need for editor reference to be held outside of the `gh-koenig` component by yielding it from the component so that the integrated title element can sit inside the container's scope
- refactor `gh-koenig` to more closely match the default ember mobiledoc addon
  - fixes runloop issues by starting/ending a manual runloop
- refactored the mutation observer and event handlers in `koenig-title-input` so that we're not doing unecessary work on every render/key press
- rename CSS classes to be more specific (these may still need more separation between `.gh` and `.kg` later)
  - `.editor-holder` to `.gh-koenig-container`
  - `.surface` to `.gh-koenig-surface`

* fix tests and start testing refactor

* move gh-koenig integration tests into addon, remove empty test files

* first-pass at component template cleanup

* first pass at koenig-toolbar-button refactor
2017-05-08 10:44:02 +01:00
Ryan McCarvill
caa14da699 🐛 fix backspace deleting cards whilst editing (#674)
closes TryGhost/Ghost#8385
- If a card that is being edited is hard-selected then make sure that it is in fact soft-selected
2017-04-25 12:53:05 +01:00
Ryan McCarvill
e604b255af 🔢 Add wordcount feature. (#668)
closes TryGhost/Ghost#8202
-  added wordcount for mobiledoc text and html/markdown cards (cards will only update word count when leaving edit state)
- word count is only displayed on wide screens
2017-04-25 12:32:27 +01:00
Ryan McCarvill
c6ed77a0fc 🐛 fix editor cursor scrolling (#672)
no issue

When calculating if the editor should scroll to keep the cursor on screen upon selection change the editor would appear to scroll to random locations.

The issue stemmed from the fact that the getPositionFromRange method took into account the scroll offset when figuring out the pixel position of a range. So, if the editor was vertically scrolled the scrollTop was added to the cursor position which the editor would assume meant that the cursor was offscreen when it wasn't.

This fix creates a new method getPositionOnScreenFromRange which finds the position of an element on screen and ignores the scroll offset.
2017-04-25 11:29:45 +01:00
Ryan McCarvill
88209e8227 Card creation and deletion bugs. (#664)
closes https://github.com/TryGhost/Ghost/issues/8312
- all new cards created now enter in selected mode and if enabled edit mode.
- if deleting cards places the cursor in an empty section the '+' menu is placed AFTER the card is deleted which ensures it's placed in the correct location
2017-04-24 15:02:20 +01:00
Ryan McCarvill
53cbfcf9ca Range handling improvements. (#656)
closes https://github.com/TryGhost/Ghost/issues/8323
closes https://github.com/TryGhost/Ghost/issues/8191

Fixes some of the range issues that we're seeing across browsers also simplifies the positioning code for UI elements.
1. For the title the cursor is now placed in the correct place on key up and down.
2. For the body Safari now displays the `/` menu correctly.
2017-04-20 11:01:08 +01:00
Kevin Ansfield
aaed8d9cf4 🐛 Fix HTML card not launching in edit mode (#647)
* replace `isEditing` observers with `didReceiveAttrs` hook

* 🐛 Fix HTML card not launching in edit mode

closes https://github.com/TryGhost/Ghost/issues/8310
- adds `autofocus=true` attribute to `gh-cm-editor` that will use CodeMirror's built-in autofocus behaviour
- set HTML card's launch mode to `edit` and ensure that the `autofocus` attribute is passed
- refactor `gh-cm-editor` for more robust event handling
- re-work `ch-cm-editor` tests to take into account CMs events not being triggered within a single run-loop and to still work when the browser window isn't focused (should fix the random test failures on Travis and the issues where the CM tests will fail locally)
2017-04-18 19:20:38 +12:00
Aileen Nowak
4a4226a6a9 🗑 Get the trash icon back in card (#646)
closes TryGhost/Ghost#8340
- Use `{{inline-svg}}` helper instead of icon font
2017-04-17 12:42:47 +01:00
Ryan McCarvill
0ee3c1c2c0 Simplify card selection (#645)
no issue
- Creates a util library for the editor to handle common tasks like:
  - Loading the current card from the mobiledoc from an element in the DOM
  - Deciding if a card should be closed based on a user click.
2017-04-17 11:52:26 +01:00
Ryan McCarvill
a031b86f9b 🐜 🎊 Fix firefox drag and drop support for image uploading in markdown cards. (#640)
closes TryGhost/Ghost#8315
- Previously you couldn't upload images in markdown cards in firefox. Moving the drop action off of the component and onto the root editor as well as having an dragover handler which does nothing fixed the issue 🤷
2017-04-13 10:19:58 +01:00
Ryan McCarvill
28111ca289 Card range issues (#639)
* When a user presses the up key from a card it now goes to the end of the paragraph above it rather than the start
* move cursor to correct location when deleting a card
* refresh the keyhandler everytime the component is created.
2017-04-13 10:18:42 +01:00
Ryan McCarvill
6d763a7901 🐜 Navigating from the title to a card. (#631)
refs https://github.com/TryGhost/Ghost/issues/8194
- Allows you to navigate to the title and body if the first element in the document is a card.
- Adjust toolbar and + menu button for mobile screen.
- Put in place resize throttling for moving of in-code positioned elements on screen resize.
2017-04-11 10:57:52 +01:00
Ryan McCarvill
00f4cab7b9 General Editor UI improvements. (#630)
refs https://github.com/TryGhost/Ghost/issues/8248
refs https://github.com/TryGhost/Ghost/issues/8194
closes https://github.com/TryGhost/Ghost/issues/8192

Miscellaneous editor reliability and usability fixes. 
- Improve the reliability of selection.
- Ensure that the + menu appears even if there is a blank document (which meant the events weren't firing from mobiledoc itself)
- When cards are added they are automatically selected and if possible go straight into edit mode (only works on the markdown card).
- Fixes issues in Safari desktop, Safari mobile, and Firefox.
- Tries to position UI on screen at all times.
- Removes fastclick.
2017-04-10 10:10:53 +01:00
Ryan McCarvill
97590e3ae5 Editor title improvements (#614)
closes: https://github.com/TryGhost/Ghost/issues/8292
- Title improvements:
- Clean up the connection between the editor and title.
- Encapsulate all title related events in the title component.
- Fix tab support.
- Fixed an issue where pressing up from an empty paragraph would select the title
- Ensure the empty content psuedo element is always below the cursor and make sure it always displays when the title is blank.
2017-04-07 21:05:43 +01:00
Ryan McCarvill
d399aa68b1 Fix HTML and Image cards 2017-04-06 21:12:54 +01:00
Ryan McCarvill
b41ff3b22e markdown card given new format 2017-04-06 21:12:54 +01:00
Ryan McCarvill
b4b0921235 fixed format and saving handling in markdown card 2017-04-06 21:12:54 +01:00
Ryan McCarvill
7e1c829df6 If this card is the last element in the document create an empty paragraph afterwards. 2017-04-06 21:12:54 +01:00
Ryan McCarvill
30429c7249 move drop handler onto textarea 2017-04-06 21:12:54 +01:00
Ryan McCarvill
4cd7e67e5c When inserting an image from the + or / menus and the post is empty then replace the current post with the image, if the post is not empty then insert the image in the following post. 2017-04-06 21:12:54 +01:00
Ryan McCarvill
1ae7a52389 🐝 Ghost Image Preview in Markdown. (#615)
refs: https://github.com/TryGhost/Ghost/issues/8248
- removes the upload image button in the markdown preview.
2017-04-04 16:15:30 +01:00
Ryan McCarvill
5724a94fbc improved card selection behaviour (#608)
Refs: https://github.com/TryGhost/Ghost/issues/8191
Refs: https://github.com/TryGhost/Ghost/issues/8194

Changes the selection behaviour of mobiledoc-cards:
If you navigate to a card with a keyboard or click on the new editor toolbar it "hard selects".
If you click into the body of a card to edit it it "soft selects".

When a card is "hard selected" you can navigate out of the card and to the previous or following blocks within the mobiledoc with the keyboard, you can delete the current card with the backspace or delete button, and you can create a new block following the card with the enter key.

When a card is soft selected it is simply displayed as selected and allows the user to edit content within the card.

New card toolbar:
Allows a user to delete the card, save the card, and "hard select" a card.

New title behaviour:
Pressing the enter key within the title "splits" the title at the cursor point, if multiple characters are selected they are first deleted, and creates a new paragraph at the top of the document with the trailing characters after the split.

gh-cm-editor updates:
Adds an on-focus event to gh-cm-editor
2017-03-30 15:29:08 +01:00
Kevin Ansfield
ffec98a6d7 fix addon preprocessor deprecation warning during build 2017-03-28 18:17:59 +01:00
Ryan McCarvill
e43ef8c7b5 📦 Card-Rename (#603)
no issue
- Renames Cards so they comply with the `card-{{name}}` convention rather than `{{name}}-card`
- Adds a unkonwnCardHandler to the editor.
2017-03-24 10:03:52 +00:00
Ryan McCarvill
2f10b0fb64 🚀 Link improvements (#601)
no issue
- Adds a few improvements for link insertion.
  - Sanitises links
  - Toggles a link so that if there are existing links in the selected text it removes them.
2017-03-24 09:40:21 +00:00
Ryan McCarvill
daad5ab17b Multi line title. (#595)
refs https://github.com/TryGhost/Ghost/issues/7754

The title is now a contenteditable div which stretches and wraps to behave like the editor.

It also tries to seemlessly move the cursor between the editor and title to make one coherent editing experience.
2017-03-21 23:42:14 +00:00
Ryan McCarvill
848eda5656 🐜 Card Menu Default State Enter Action (#600)
closes https://github.com/TryGhost/Ghost/issues/8196

The default state of both the '/' and '+' card menus is a selection of -1, this ensure that the active tool prompt isn't shown until the user presses an arrow key for keyboard selection. However -1 isn't a valid tool id so when pressing enter without selecting a tool the user will cause an error.

This update ensures that the selected tool is the first tool available even if the selection is in fact -1.
2017-03-21 14:05:49 +00:00
Ryan McCarvill
c412d6e6f9 🐝 Fix editor toolbar link focus issues. (#599)
closes https://github.com/TryGhost/Ghost/issues/8195

When the toolbar is toggled into link mode the link input field should always focus, however this only happens on the first time which leads to issues with mobiledoc having focus but not the range.

This fix means that the toolbar always focuses.
2017-03-21 13:52:47 +00:00
Ryan McCarvill
5b44886412 Insert Link styling (#598)
closes: https://github.com/TryGhost/Ghost/issues/8109
- adds styling for the insert link toolbar component.
2017-03-20 12:44:09 +00:00
Ryan McCarvill
a88b8bc00a 🐝 Card menu fixes (#597)
closes: https://github.com/TryGhost/Ghost/issues/8106

- Fixes the keyboard selection problems of the '+' menu.
- Makes the active state of the keyboard selection blank until a key is pressed.
- Fixes it so that the '+' menu executes the tool on Enter.
2017-03-20 12:40:20 +00:00
Ryan McCarvill
78755dcbb5 🐜 Bulk selecting (#594)
closes: https://github.com/TryGhost/Ghost/issues/8153

Previously when selecting text in the editor the screen will jump as it tries to scroll so that the cursor is always on it.

This update means it will no longer happen when selecting the text with either the mouse or in a mobile browser. Unfortunately when selecting text with the keyboard the editor will no longer scroll with the cursor.
2017-03-20 12:12:12 +00:00
Ryan McCarvill
0439966587 Add classes to card. (#591)
closes: https://github.com/TryGhost/Ghost/issues/8179
- previously all cards just had a `__mobiledoc-card` class on them, this update replaces them with a class `kg-card` and adds an additional class of `kg-{{card_name}}`
2017-03-20 12:08:54 +00:00
Hannah Wolfe
4122d0334f 🔥 Remove handlebars from serving admin (#593)
refs TryGhost/Ghost#8140
refs TryGhost/Ghost#8184

- now that the admin index page is just html, we don't need handlebars anymore
- this changes the template be called .html to reflect this
2017-03-20 12:01:06 +00:00
Ryan McCarvill
e031b18b31 🐜 ️ Card menu fixes:
Closes #8164

- When a user clicks on a card within a '/' menu it now executes that tool.
- If a user engages a card with the / menu the content of the paragraph is now inserted into the card.
2017-03-20 10:30:26 +00:00
John O'Nolan
0b867dfb89 Styling for editor image uploader card 2017-03-16 16:39:57 +02:00
Ryan McCarvill
63f4020970 🐝 🐜 '+' button double click bug (#589)
refs https://github.com/TryGhost/Ghost/issues/8106

When a user clicks on the plus button it opens the card menu, when they click on it twice the card menu input field loses focus and the card menu closes, because the Range object of the document is no longer within the editor the '+' button also disappears. This has the effect of making the '+' button disapear when double clicking.

Now when the input field to search cards loses focus the card menu disapears but the '+' button remains, we rely on the cursorDidChange event to also hide the button.
2017-03-16 11:18:08 +00:00
John O'Nolan
f8dd2c37dd Card menu trigger styling 2017-03-15 17:43:12 +02:00
Ryan McCarvill
715fe52793 🐜 🐝 Create link from toolbar (#586)
closes https://github.com/TryGhost/Ghost/issues/8163

Previously when you created a link the toolbar component would re-render and dissapear.

This update ensures that the logic that must happen on first render does not happen on subsequent renders.
2017-03-15 14:55:20 +00:00
Ryan McCarvill
88da7bc335 🐝 Add cards in lists (#585)
refs https://github.com/TryGhost/Ghost/issues/8157

Currently mobiledoc-kit doesn't allow the inserting or replacing of a list item with a card.

There is a solution that works toggling the section to a `p` then replacing the section, however there are issues with the mobiledoc range object becoming out of sync and the workarounds for that are too hacky.

We need to update mobiledoc to deal with this usecase (although the way that ranges are handled during undo might also be an option worth exploring), but for now we'll simply insert a card at the bottom of the list which is unfortunately different behaviour from any other block.
2017-03-15 10:29:10 +00:00
Kevin Ansfield
21361df3be Revert "Multi line title (#575)"
This reverts commit 989ad7b9c1.
2017-03-14 16:37:47 +00:00
Kevin Ansfield
4de244974e 🎨 remove usage of ghost's {{asset}} helper in index.html (#574)
refs #8140

🎨 remove usage of ghost's {{asset}} helper in built index.html files

requires https://github.com/TryGhost/Ghost/pull/8142
- switch to hash-location rather than history-location
- remove usage of Ghost's `{{asset}}` helper in index.html
- add `content-for` helpers to `asset-delivery` addon that switch asset urls in index.html to `.min` files in production
- update the `asset-delivery` addon to copy the production `index.min.html` to `default-prod.hbs` so Ghost can serve production assets when in production mode
- change template output path to `core/server/admin/views/`
- enable asset fingerprinting
- remove `ember-cli-sri` dependency - we weren't using it but now that ember is handling assets it was used automatically and could potentially create issues if users have proxy servers that attempt to compress or otherwise modify asset files

 redirect to setup if server says setup isn't finished

refs https://github.com/TryGhost/Ghost/issues/8140
- now we're using hash-location the server no longer knows if we're hitting the /setup route so it's not able to redirect for us
- extends the default ESA `UnauthenticatedRouteMixin` to add a check against the `/authentication/setup` API endpoint and redirects to `/#/setup/one` if setup isn't complete - this works for all routes because the default behaviour when hitting an authenticated route without the right credentials is to force a logout and redirect to `/#/signin` which utilises the `UnauthenticatedRouteMixin`

deps: ember-cli-inject-live-reload@1.6.1
2017-03-14 17:04:46 +01:00
Ryan McCarvill
989ad7b9c1 Multi line title (#575)
refs https://github.com/TryGhost/Ghost/issues/7754
- The title is now a contenteditable div which stretches and wraps to behave like the editor.
- It also tries to seemlessly move the cursor between the editor and title to make one coherent editing experience.
2017-03-14 13:50:30 +00:00
Ryan McCarvill
9a0b72071d 👯 ♥️ ♣️ ♦️ ♠️ New editor card menu (#580)
refs https://github.com/TryGhost/Ghost/issues/8106, https://github.com/TryGhost/Ghost/issues/7429, requires https://github.com/TryGhost/Ghost/pull/8137

-Adds new "card" menus
  - Navigation with keyboard in both axis.
  - Search with keyboard in both menus.
  - Adds a "+" Menu for cards
  - Adds a "/" Menu for cards
    - if the block has content and it becomes a markdown or HTML Embed card then the content is included into the card.
    - Image and HR cards appear below the current section
- Adds new toolbar with both inline and block styling.
- Adds a new 'divider' card.
2017-03-14 11:59:34 +00:00
Austin Burdine
253a0fb2cf various test deprecation cleanup
no issue
- cleans up a lot of the deprecation noise in tests
- remove ember-cli-deprecation-workflow dependency
2017-03-08 18:56:30 +00:00
John O'Nolan
8aa02da02c Editor card-menu and toolbar style updates 2017-03-08 21:08:20 +08:00
Ryan McCarvill
c5b0301e87 Koenig tests. (#564)
* 👷   Editor tests
Added acceptance tests for koenig markdown-like support.
Added some unit tests for koenig located in the /lib/koenig/test-support directory.
2017-03-07 23:57:09 +13:00
Kevin Ansfield
ea58dc6f85 🔥 remove URL input option from image upload components
refs https://github.com/TryGhost/Ghost/issues/8032
- `fileStorage: false` config is going away, it predates storage engines and will simplify future image optimisation work
- simplifies UI, it can be brought back in the future in a more robust fashion if required
2017-03-03 11:01:55 -06:00
Kevin Ansfield
38913eedfd fix missing template compiler warning for gh-koenig
no issue
- I was a little overzealous with the file cleanup, not realising that the template compiler must be specified even if it's not installed within the addon
2017-03-02 18:56:32 +00:00
Kevin Ansfield
cfea2010ef clean up gh-koenig files not relevant to in-repo-addon
no issue
- removes local addon dependency files to avoid confusion now that the host app manages dependencies
- removes unused tests directory
- these files may come back eventually, there's an open ember-cli RFC to improve in-repo-addon isolation and testing https://github.com/ember-cli/rfcs/pull/60
2017-03-02 18:45:04 +00:00
Kevin Ansfield
8542331c4a remove duplicate/conflicting gh-koenig license files 2017-03-02 18:24:35 +00:00