Commit Graph

115 Commits

Author SHA1 Message Date
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
465dbd997b Fixed linting error 2018-02-20 21:22:48 +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
Kevin Ansfield
2ddedb6005 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
Kevin Ansfield
521b9dbb99 Koenig - Textarea-only markdown card
refs https://github.com/TryGhost/Ghost/issues/9311
- add `{{koenig-card-markdown}}` component that renders an auto expanding textarea with the markdown card value
- add `{{card-markdown}}` that is an alias of `{{koenig-card-markdown}}` for backwards compatibility - all of our pre-1.0 alpha cards and our current markdown implementation do not have the `koenig-` prefix in their card names
2018-01-31 08:32:27 +00:00
Kevin Ansfield
d25fb1597e Koenig - Display-only image card with markdown text expansion
refs https://github.com/TryGhost/Ghost/issues/9311
- adds the `koenig-card-image` card that renders an `<img>` element
- adds text expansion to convert markdown images into the new image card
2018-01-30 20:46:03 +00:00
Kevin Ansfield
3ac59e5ba8 Koenig - HR card with markdown text expansion
refs https://github.com/TryGhost/Ghost/issues/9311
- adds the `koenig-card-hr` card that renders a `<hr>` element
- adds text expansion to convert `---` into the new HR card
2018-01-30 15:19:30 +00:00
Kevin Ansfield
07d6aee326 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 15:18:08 +00:00
Kevin Ansfield
dec1250bbf Koenig - Added SHIFT+ENTER line break key command
refs https://github.com/TryGhost/Ghost/issues/9311
- pressing <kbd>Shift+Enter</kbd> will create a `soft-return` atom that adds a `<br>` element to the doc
- emulates many rich-text editors that have a similar functionality where it's desirable to add line breaks rather than starting new paragraphs
2018-01-30 10:58:28 +00:00
Kevin Ansfield
61cf4d46db 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 10:01:07 +00:00
Kevin Ansfield
506b2a9388 Resurrect the old alpha Koenig editor (#916)
requires https://github.com/TryGhost/Ghost/pull/9277

- added a `koenigEditor` feature flag
  - modified the feature service to accept a `developer` boolean on the options object passed into the internal `feature` method, if `true` the feature flag won't be enabled unless the `enableDeveloperExperiments` config option is also enabled
  - added "developer feature testing" section in labs that's only visible if `enableDeveloperExperiments` config flag is enabled
  - added koenig editor toggle to the developer section in labs

- enabled a switch between the markdown and koenig editors
  - modified the default value of the `mobiledoc` attr in the Post model to be a blank mobiledoc or blank markdown mobiledoc depending on the feature flag
  - modified the `autofocus` switch in editor controller's `setPost` method so that it is always switched, even for new->edit where the post model isn't swapped
  - added a compatibility check to the editor controller's `setPost` method that shows an alert and force enables the koenig editor if the koenig flag is not enabled and the opened post is not compatible with the markdown editor

- fixed various issues that have appeared due to the old koenig alpha becoming out of sync with master
2018-01-18 15:36:01 +00:00
Kevin Ansfield
48e3bf003d ESLint: Consistent ember property/method ordering
no issue
- https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/order-in-components.md
- https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/order-in-controllers.md
- https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/order-in-routes.md
2018-01-12 12:17:56 +00:00
Kevin Ansfield
f2da8a20b8 ESLint: Don't use observers if possible
closes https://github.com/TryGhost/Ghost/issues/8690
- https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/no-observers.md
- remove observers where possible
- move night shift toggle behaviour to the feature service
	- refresh feature service after import to fix stuck night shift toggle
2018-01-12 12:17:56 +00:00
Kevin Ansfield
a85f5fae35 Switch to eslint-plugin-ghost extending plugin:ghost/ember
no issue
- fix lint errors in lib/gh-koenig
- fix ghost:base eslint errors
- update ember plugin refs, remove ember-suave plugin refs
- remove old jshint refs
- add `lint:js` script
- switch to `eslint-plugin-ghost` extending `plugin:ghost/ember`
2018-01-12 12:17:56 +00:00
John O'Nolan
e7be0075d8 2018 2018-01-02 21:46:16 +00:00
Kevin Ansfield
14f03a14a8 🐛 Fixed editor and drag/drop image uploads in IE11 (#926)
closes https://github.com/TryGhost/Ghost/issues/9321
- don't use `dataTransfer.effectAllowed` in IE11
- only fire the action in `{{gh-file-input}}` if there are files selected to prevent a double call to the action due to resetting the input
2017-12-12 11:53:35 +00:00
Katharina Irrgang
c0f5029868 Changed asset delivery to web/admin/views (#923)
refs #9178

- needs to be merged together with the server side PR (https://github.com/TryGhost/Ghost/pull/9308)
- we have moved the admin folder location from server/admin to server/web/admin
2017-12-06 17:37:06 +01:00
Kevin Ansfield
3864584f74 Bump ember-ajax dependency (#902)
no issue
- upgrade `ember-ajax` to 3.0.0
- `ember-ajax` [now passes the payload through directly](https://github.com/ember-cli/ember-ajax/releases/tag/v3.0.0) rather than trying to normalize it so all our error handling needed to be updated
2017-11-03 22:59:39 +00:00
Kevin Ansfield
9adbcd1fd0 Match service/controller import to ember-modules-codemod style for consistency
no issue

Automated tools, code generators, and editor integrations are increasingly standardising on the import style used in `ember-modules-codemod`. Our import style differed a little with regards to service/controller injection imports which meant we were starting to see inconsistent naming.
2017-10-30 09:38:01 +00:00
Kevin Ansfield
983110d931 Switched from ember-cli-shims to new module imports (#779)
no issue

- add eslint-plugin-ember, configure no-old-shims rule
- run `eslint --fix` on `app`, `lib`, `mirage`, and `tests` to move imports to the new module imports
- further cleanup of Ember globals usage
- remove event-dispatcher initializer now that `canDispatchToEventManager` is deprecated
2017-08-22 14:53:26 +07:00
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