Commit Graph

64 Commits

Author SHA1 Message Date
Kevin Ansfield
1133370568 Koenig - Deselect cards when a click happens outside of the editor canvas
refs https://github.com/TryGhost/Ghost/issues/9623
- move click handler registration from `onEnterEdit` to `onSelect`
- add guard against deselecting for clicks on the editor canvas
  - prevents card being deselected when the click would have placed the cursor in a position that selected the card
  - requires editor instance to be passed through to `{{koenig-card}}` in all card components
2018-06-14 12:21:22 +01:00
Kevin Ansfield
36b4727371 🐛 Koenig - Fix embedding of multiple FB Videos
refs https://github.com/TryGhost/Ghost/issues/9623
- wrap all embeds in an `<iframe>` so that their scripts are isolated (fixes FB Video)
- add `MutationObserver` implementation to adjust iframe height as embed's content is loaded
- add `noframe.js` to resize embedded iframes such as YouTube videos
2018-06-13 17:13:33 +01:00
Kevin Ansfield
49d2ed2fb4 🎨 Koenig - Focus URL input after creating embed card
refs https://github.com/TryGhost/Ghost/issues/9623
2018-06-13 11:14:34 +01:00
Kevin Ansfield
2dc916299b Koenig - Extract card caption input into component
refs https://github.com/TryGhost/Ghost/issues/9623
- add new `{{koenig-caption-input}}` component
- yield koenig-caption-input instance from the `{{koenig-card}}` component
- remove duplicated caption logic from image and embed cards
- remove placeholder when caption input has focus
2018-06-12 18:10:23 +01:00
Kevin Ansfield
a04adae8d2 Koenig - Embed card
refs https://github.com/TryGhost/Ghost/issues/9623
requires https://github.com/TryGhost/Ghost/pull/9666
- `{{koenig-card-embed}}`
    - URL input
    - perform oembed lookup & fetch on <kbd>Enter</kbd>
    - remove card if enter pressed with empty URL
    - show error message on server error
        - "retry" returns to input bar
        - "paste as link" removes card and outputs link
        - "X" removes card
    - force embedded <script> tags to run
    - wrap embed html with `.koenig-embed-{video,photo,rich}` class
- add embed cards to the (+) and /-menus
    - "section" support in the card menus
    - refactor to use single card menu map and content component for both menus
    - update /-menu keyboard movement to handle sections
- add parameter support to /-menu commands
  - `/embed {url}` will insert embed card and automatically fetch oembed for supplied url
2018-06-12 14:07:50 +01:00
Kevin Ansfield
4d27cdb3e9 🐛 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 18:48:43 +01:00
Zimo
de4d1420d6 Adding placeholder illustration for Koenig image empty state 2018-06-11 13:29:39 +02:00
Zimo
474ccaf51a Koenig - Night Shift support
refs https://github.com/TryGhost/Ghost/issues/9623
- bump `ghost-spirit` dependency to include dark mode support
- import Spirit's dark mode file in `app-dark.css`
2018-06-07 09:48:27 +01:00
Kevin Ansfield
032a8def9e Koenig - Create image cards when pasting image files
refs https://github.com/TryGhost/Ghost/issues/9623
- detect pastes that contain image files and insert a card for each, setting `payload.files` to the `File` instance grabbed from the clipboard
- update the `addComponent` hook to ensure the `payload.files` array is preserved, browsers do not allow `File` instances to be copied
- update `{{koenig-card-image}}` to look for a `payload.files` value to auto-upload it via it's internal `{{gh-uploader}}`
- NOTE: browser support for accessing image files on paste varies:
    - Safari: will paste all images
    - Chrome: will only paste the first image
    - Firefox: will not paste any images
2018-05-29 15:23:50 +01:00
Kevin Ansfield
569a6942cd 🎨 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 11:38:30 +01:00
Zimo
4909e6c2b3 Koenig - Added Code Block card to (+) and / menus
refs https://github.com/TryGhost/Ghost/issues/9623
- added code block card to (+) and / menus
- changed card row length to 3
- swapped html icon for code icon and added new html icon
2018-05-17 12:20:02 +01:00
Kevin Ansfield
ab53c29aea Koenig - Initial code card with MD expansion
refs https://github.com/TryGhost/Ghost/issues/9623
- `code` card that uses CodeMirror for the edit view and outputs `<pre><code>...</code></pre>` for the rendered view
- adds triple-backtick text expansion for creating code cards
2018-05-15 15:26:34 +01:00
Kevin Ansfield
5e3553e039 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 12:32:44 +01:00
Zimo
f079ed15af Koenig - Refine card menu and fix toolbar tick color
refs https://github.com/TryGhost/Ghost/issues/9505
- card menu style refinements
- fix tick color and adding appear animation to toolbar
- bump Spirit dependency
2018-05-09 16:48:13 +01:00
Zimo
b4b85fba99 Koenig - Style refinements for card menu, toolbar, and link input
refs https://github.com/TryGhost/Ghost/issues/9505
- Card menu style refinements
- Toolbar style refinements
- Unifying toolbar, link tooltip and link toolbar size and position
- Making link input the same size as text toolbar
- Fix single element position in toolbar
- Making toolbars darker
2018-05-08 18:04:56 +01:00
Peter Zimon
26aa2770ed Koenig - Made full width images work with closed sidebar (#1014)
refs https://github.com/TryGhost/Ghost/issues/9505
- use `ui` service to adjust full-width image styles then the side nav is open
2018-05-08 10:26:46 +01:00
Kevin Ansfield
1096e8c3d2 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 17:31:17 +01:00
Zimo
4c05d618bd Koenig - Replace custom CSS classes with Spirit
no issue
- Koenig container styles for Spirit
- Applying Spirit styles to card menu
- Applying Spirit styles to generic cards
- Replacing icon styles with Spirit
- Fix slash menu selected state
- Cleanup of unused files + fix empty HTML
2018-05-02 15:54:22 +01:00
Kevin Ansfield
26e70e86ea 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 15:55:51 +01:00
Kevin Ansfield
483ab830b0 Koenig - Fixed autofocus of markdown card when entering edit mode
refs https://github.com/TryGhost/Ghost/issues/9505
- add `autofocus` property to markdown editor component
- remove autofocus routine that was in place for old textarea based editor
2018-04-25 16:15:56 +01:00
Zimo
e253174506 Koenig - Styled HTML card edit mode
refs https://github.com/TryGhost/Ghost/issues/9505
2018-04-25 14:27:53 +01:00
Kevin Ansfield
9e1e6ca0c9 Koenig - Remove caption from HTML card
refs https://github.com/TryGhost/Ghost/issues/9505
2018-04-25 12:09:20 +01:00
Kevin Ansfield
761e841875 Koenig - Enable line-wrapping for HTML card's CodeMirror instance
refs https://github.com/TryGhost/Ghost/issues/9505
- pass `lineWrapping` option through to CodeMirror in `{{gh-cm-editor}}`
- add cascade overrides for the `pre` line-wrapping styles needed by CodeMirror
2018-04-25 12:06:01 +01:00
Kevin Ansfield
bc32beef38 Koenig - Card menu and (+) button styles (#1010)
refs https://github.com/TryGhost/Ghost/issues/9505
- apply styles to card menu and replace icons
- apply styles for (+) button
2018-04-25 10:11:48 +01:00
Kevin Ansfield
b21e46aa39 Koenig - Keep MD card formatting toolbar visible when possible
refs https://github.com/TryGhost/Ghost/issues/9505
- use `{{gh-scroll-trigger}}` components at top and bottom of the markdown card when in edit mode so that styles can be applied to the `.editor-toolbar` element to keep the toolbar fixed at the bottom of the screen whilst scrolling
2018-04-24 13:10:20 +01:00
Peter Zimon
af03f8f516 Koenig - Improve styles (#1008)
refs https://github.com/TryGhost/Ghost/issues/9505
- Tweaking UI of link input
- Tweaking toolbar menu
- Tweaking image toolbar style
- Applying image width styles
- Tweaking list typography
- Fixing empty post placeholder
2018-04-24 10:15:54 +01:00
Zimo
58f5941357 Koenig - Fixing editing styles for HTML card 2018-04-20 17:51:33 +02:00
Kevin Ansfield
21007d0630 Koenig - Use our full markdown editor in markdown card
no issue
- remove jQuery usage in `{{gh-markdown-editor}}` (general cleanup)
- switch `koenig-card-markdown` to use `{{gh-markdown-editor}}`
- update markdown editor styles to fit within the card interface
- add `{{gh-editor}}` for handling image uploads and drag/drop
2018-04-20 15:43:44 +01:00
Peter Zimon
555758a372 Koenig - Basic styles for editor content (#1006)
refs https://github.com/TryGhost/Ghost/issues/9505
- paragraph and heading styles and vert rhythm
- blockquote and link styles
- list styles
- card styles
- markdown card styles
2018-04-20 15:43:20 +01:00
Kevin Ansfield
583b2e47d8 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 18:42:27 +01:00
Kevin Ansfield
dcd1cc8061 Koenig - Update icons, add divider support to card context toolbars
refs https://github.com/TryGhost/Ghost/issues/9505
2018-04-11 16:48:01 +01:00
Kevin Ansfield
38048e0cc3 Koenig - First pass at image width styles
refs https://github.com/TryGhost/Ghost/issues/9505
- add image style buttons to the image card context menu
- still requires Spirit styles for image classes to work correctly
2018-04-10 18:39:30 +01:00
Kevin Ansfield
ea0be6a4d8 Koenig - Fixed card context menu clickableness
refs https://github.com/TryGhost/Ghost/issues/9505
- ensure we disable `pointer-events` on context menus when hidden so that hidden menus do not interact with the mouse
- add z-index to context menus so that they sit on top of any editor content
- add `relative` positioning to the html card content so the click overlay div doesn't expand outside of the content area
2018-04-10 16:46:25 +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
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
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
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
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
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
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
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
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
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
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