no issue
- added `page` model
- removed `page` param from Post model
- added pages screen with associated links
- added `:type` param to editor screens to work with the right models
- removed post<->page toggle and associated tour item
closes https://github.com/TryGhost/Ghost/issues/10399
- added a data attribute `data-koenig-dnd-disabled` which will prevent the element or any of it's children from initiating a koenig drag event
- applied the data attribute to `{{koenig-basic-html-input}}`'s outer tag so that captions never initiate a card re-order
- disabled card re-ordering when a card is in edit mode
- allows text selection within a markdown/html card without triggering the card re-order behaviour
- clicking another card will exit edit mode and re-enable drag before the drag behaviour is initiated so you can still re-order other cards if you've left a card in edit mode
no issue
- the polyfill is no longer required for latest browsers (tested on Chrome, FF, and Safari)
- Edge may have problems but it's not currently supported
- reduces build size. Before/after:
- `vendor.min.js: 3.29 MB (706 KB gzipped)`
- `vendor.min.js: 3.2 MB (672.92 KB gzipped)`
no issue
- add vertical drop position indicator handling to `koenig-drag-drop-handler` service
- fixed issues with nested drag-and-drop containers
- register card drag/drop handler in `koenig-editor`
- add drag icon creation
no issue
- clear the cached `insertIndex` when hiding the drop position indicator
- update the gallery card's `_isDropAllowed` function to return `false` if the `droppabeIndex` (`insertIndex`) doesn't exist
no issue
- when dragging an image, if you dragged out of the gallery then back in directly over the space between images then no indicator was shown
- switch to using padding around images rather than margin so that the mouse can be detected over the gap. Added classes to the image overlays to account for the change in sizing
no issue
- first pass at implementation of drag-and-drop re-ordering of images within a gallery
- adds a `koenig-drag-drop-handler` service that allows consumers (editor and cards) to hook into drag and drop behaviour without interfering with each other and allows for future possibilities such as dragging images between galleries or into/out of galleries
no issue
- use `URL.createObjectURL(file)` to get a blob url rather than using `FileReader.readAsDataURL` which generates a very large data attribute
- speeds up the display of previews and associated browser hangs when an upload finishes, especially noticeable with large images and fast connections where multiple uploads finish around the same time
closes https://github.com/TryGhost/Ghost/issues/9840
- added error on uploading an invalid image format
- updated to use overall error method(`onFailed`) to set error message instead of individual upload failures(`onUploadFailure`)
refs https://github.com/TryGhost/Ghost/issues/10049
- update `{{koenig-card}}` component to compare payload values and create a snapshot when exiting edit mode for container cards (markdown, html, code)
- update image card to trigger snapshots on image upload/selection and width change
no issue
- we were throttling word count updates but not taking into consideration the editor components could have been destroyed by the time the throttle timeout occurred
closes https://github.com/TryGhost/Ghost/issues/9852
- Ember was throwing an error because we weren't using `.set` to set properties on the editor component which halted execution whilst the component cards were being re-rendered
closes https://github.com/TryGhost/Ghost/issues/9825
- the <code>`</code> key on German keyboard layouts is a dead key and so does not trigger the typical keyboard events our editor relies on
- added custom keyboard event listeners to watch for specific keyboard event sequences triggered by using the dead key + spacebar to insert a <code>`</code>
- trigger text input handlers when we detect a <code>`</code> insertion
- Linux unfortunately does not trigger events that can be used to track the sequence so this will not work there although it is easier to set up keyboard layouts without dead keys on Linux
- moved modifier key tracking into global event handlers from ember event handlers
- reduce confusion from duplicated event handling
- allows modifier key handlers to fire when keys are pressed without the editor element having focus
no issue
- added `onUploadStart` action to `{{gh-uploader}}` that is triggered when individual files start uploading
- will not be triggered for any files that fail client-side validation
- changed `{{koenig-card-gallery}}` to only add images to the local gallery display when the uploader starts an upload
no issue
- moved all payload building into single function
- only put fully valid images into mobiledoc
- extracted image data reading and width/height reading into a separate function
- fixed re-ordering when deleting an image
refs https://github.com/TryGhost/Ghost/issues/9724
- fixed Card menu plus icon's rounded edges
- decreased link toolbar appearance delay
- changing 'H'/'h' toolbar mapping to 'H2'/'H3' and harmonized title font size
refs https://github.com/TryGhost/Ghost/issues/9724
- the "paste url on a selection to make it a link" feature from the main editor was missing in caption inputs
- copied functionality across (shared functionality needs extracting at some point)
refs https://github.com/TryGhost/Ghost/issues/9724
- focus was not being returned to the editor after the Unsplash modal was closed so although the image card looked selected the editor was not responding to any key commands
refs https://github.com/TryGhost/Ghost/issues/9724
- mobiledoc-kit's `key.isPrintable()` returns true for <kbd>Enter</kbd> but in this instance we don't want to capture newlines as printable chars
- swapped insertion of `event.key` for `key.toString()` for better handling of named keys that output characters (eg. when `event.key` === `Enter` which prints `\n`)
refs https://github.com/TryGhost/Ghost/issues/9724
- we call `koenig.cleanup` when setting a post in the editor controller but the call will happen before `componentCards` has been populated so none of our "delete if empty" routines were being run
- calls to `.cleanup` now schedule the cleanup after the next editor render which should mean cards are populated before we try to remove them
refs https://github.com/TryGhost/Ghost/issues/9724
- standardised `{{gh-unsplash}}` actions and action arguments to better represent a generic "image source"
- added `{{gh-unsplash searchTerm="ghosts"}}` parameter
- added `payload` param to `card` definitions used for plus/slash menus so that default payload params can be passed to cards
- added a concept of "image selectors" to image card
- if a `payload.imageSelector` param is received by the card it will look it up in it's list of known selectors and display the appropriate image selection component
- if the card was created with an image selector param and the image selector is closed without selecting an image then the card will be removed
- delete image cards during cleanup if they were created via selector but have no src
refs https://github.com/TryGhost/Ghost/issues/9724
- add a `data-kg-allow-clickthrough` attribute so that it's possible to explicitly allow non-input elements to be clicked immediately when clicking on a card
refs https://github.com/TryGhost/Ghost/issues/9724
- added `{{koenig-basic-html-input}}` component
- uses a stripped down version of Koenig
- supports all inline formatting that Koenig supports
- supports inline text expansions
- supports inline key commands
- limited to a single paragraph
- serialises and deserialises from HTML rather than mobiledoc
- updated `{{koenig-caption-input}}` to use `{{koenig-basic-html-input}}`
- updated image and embed cards to calculate word counts correctly for html captions
- bumped Spirit dependency to fix styling of toolbars within the editor canvas
- fixed positioning in toolbar components to account for `parentElement` not necessarily being the closest element to position against
refs https://github.com/TryGhost/Ghost/issues/9724
- selecting the embed card as soon as it's created causes problems with the caption input grabbing focus which interferes with being able to continue typing
- if content exists after the paste move the cursor to the beginning of the next section, otherwise create a blank paragraph and move the cursor into that
refs https://github.com/TryGhost/Ghost/issues/9724
- if a URL is pasted in a blank paragraph, insert an embed card configured to switch immediately to a link if the embed fails
- if <kbd>Shift</kbd> is pressed when pasting insert a linked URL with no auto-embed
- added `payload.linkOnError` handling to the embed card
- if that option is set, immediately convert the embed card section to a linked URL on embed failure
- skip adding an undo step when auto-converting to a URL so that no undo loop is created. Without this an undo would convert from link to embed card which would automatically look up the url then convert back to a link meaning it's impossible to undo back past the URL paste
- ensure that the cursor position doesn't jump if the user has continued writing whilst the oembed lookup is in progress
refs https://github.com/TryGhost/Ghost/issues/9724
- `card.handlesDragDrop` was never accessible, it would have had to be registered through `card.koenigOptions.handlesDragDrop` when the drop handling was first added
- as of cc2e20a486 properties on card components are directly accessible so we can use `card.component.handlesDragDrop` to guard against the editor handling drops on cards that handle their own drops
refs https://github.com/TryGhost/Ghost/issues/9724
- adjust `insertImageCards()` to handle the editor not having an active section
- add `jumpToCard` option to `_scrollCursorIntoView()` so that we can scroll to a card when appropriate
- call `_scrollCursorIntoView()` after dropping images and creating cards
refs https://github.com/TryGhost/Ghost/issues/9724
- `event.code` represents physical key location rather than the associated key value. Eg, `event.code` could be `NumpadEnter` rather than the expected `Enter` value
- ensure we use `event.key` anywhere that we are acting on the key value so that re-mapped or virtual keys still work as expected
refs https://github.com/TryGhost/Ghost/issues/9724
- leaving the editor could result in the plus menu being removed from DOM before teardown has fully cleared up the event handlers resulting in an error being thrown in the mousemove handler where we assumed the element is present
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
refs https://github.com/TryGhost/Ghost/issues/9724
- <kbd>Ctrl/Cmd+Enter</kbd> is the shortcut to enter edit mode of a card that has it
- adds <kbd>Ctrl/Cmd+Enter</kbd> as a shortcut to exit edit mode as an addition to <kbd>Escape</kbd> for easier toggling in/out of edit mode
refs https://github.com/TryGhost/Ghost/issues/9724
- ignore the range change which would otherwise close the menu when clicking a (+) next to a different paragraph then the one the cursor is currently on
refs https://github.com/TryGhost/Ghost/issues/9724
- add an overlay to the markdown card for 500ms when entering edit mode to stop extra clicks accidentally triggering toolbar buttons
refs https://github.com/TryGhost/Ghost/issues/9724
- eb865f841f introduced a bug because it expected an event param that is only available when clicking
- add guard to check for `event` presence before attempting to stop propagation
refs https://github.com/TryGhost/Ghost/issues/9724
- the click event from clicking on the /-menu items continued propagating after the card was initialised which meant it was picked up by the card as a "click off the card" so certain cards such as the Markdown/HTML cards would then remove themselves as if they were deselected with empty content
- changed the icon click handler to use the DOM `onclick` syntax so that the click can be captured immediately rather than waiting for it to bubble up to Ember's global event handler
- updated the /-menu `itemClicked` action to use the now-accessible MouseEvent to stop it propagating any further and triggering unwanted card behaviour
refs https://github.com/TryGhost/Ghost/issues/9724
- `element.contains(target)` was not reliably picking up the `<span>` inside the `<button>` element
- added a fallback that searches the event path for the card component's ID
refs https://github.com/TryGhost/Ghost/issues/9724
- `{{koenig-menu-content}}` does not pass any params through when an item is clicked
- move the `params` fetching via the query string from `_performAction()` to `actions.itemClicked` so that it works for both <kbd>Enter</kbd> and icon clicks
refs https://github.com/TryGhost/Ghost/issues/9724
- if the editor was reloaded by changing the post model either through clicking "New story" or using the search from the editor screen the /-menu would stop working
- keep track of the last seen `editor` instance inside `{{koenig-slash-menu}}` and register the `/` text input handler on the new editor instance if it changes
refs https://github.com/TryGhost/Ghost/issues/9623
- Firefox unlike other browsers triggers `keypress` events for non-printable characters
- use mobiledoc-kit's `Key` class to guard against adding non-printable key values to captions
refs https://github.com/TryGhost/Ghost/issues/9623
- disable `contenteditable` on the main editor element when an input in a card gains focus
- Firefox chokes on inputs inside a `contenteditable` element
- use a MutationObserver inside `{{koenig-card}}` to automatically add event handlers for focus/blur events so that each card is not required to set up handlers and enable/disable content editable manually
- bump Spirit dependency
- remove `user-select: none` styling from `.form-text` for text inputs
- fixes captions and embed inputs in Safari and improves behaviour in Firefox
- add a guard around `getSelection(0)` in the `_scrollCursorIntoView()` method to avoid Safari throwing errors
refs https://github.com/TryGhost/Ghost/issues/9623
- clicks near the HR card when it was selected would trigger immediate deselection putting the cursor into a position where it was not possible to type
- update the guard in the click-to-deselect event handler to match any element contained by the editor rather than only clicks that are directly on the editor element
refs https://github.com/TryGhost/Ghost/issues/9623
- close menu if it's open and the cursor position changes within the document
- closes when you start typing rather than hiding text behind the menu
- watch for arrow keys and close the menu if pressed
- closes when <kbd>Up</kbd> is pressed and the title is selected rather than the cursor being moved within the document
refs https://github.com/TryGhost/Ghost/issues/9623
- move lazy-click handling to a mouseup handler instead of mousedown in `{{koenig-card}}`
- ensure that we don't trigger edit mode on the initial mouseup after a mousedown event has selected the card
refs https://github.com/TryGhost/Ghost/issues/9623
- do not process drop in `{{koenig-editor}}` if the drop happened on a card and the card's `handlesDragDrop` property is true
- allow `dragover` events on cards to bubble up to Ember's event handler in `{{koenig-editor}}`
- handle drag/drop in `{{koenig-card-image}}`
- show different overlays when dragging files over the card to indicate an upload or replace action
- start upload when a file is dropped on the card
refs https://github.com/TryGhost/Ghost/issues/9623
- ensure images are placed where the cursor is when dropping or pasting images
- fixed errors when dropping/pasting images into a list
refs https://github.com/TryGhost/Ghost/issues/9623
- switch to custom `mobiledoc-kit` build
- fixes top-level elements not being run through parser plugins (https://github.com/bustle/mobiledoc-kit/pull/627)
- fixes <kbd>Alt</kbd> getting stuck and causing <kbd>Backspace</kbd> to delete whole words (https://github.com/bustle/mobiledoc-kit/pull/626)
- fixes error that can occur when a paste results in blank insert (https://github.com/bustle/mobiledoc-kit/pull/620)
- add new `figureToImageCard` parser
- replaces hacky workaround to detect an image+figcaption inside the `imgToCard` parser plugin
- remove wrapping of html in a `<div>...</div>` when pasting
- no longer necessary now that top-level elements are parsed
- fixes rich-text pastes where multiple paragraphs would be collapsed into a single paragraph
refs https://github.com/TryGhost/Ghost/issues/9623
- add new `deleteIfEmpty` option when defining cards
- add `.cleanup()` method to `{{koenig-editor}}` that will remove any blank cards
- pass `{{koenig-editor}}` instance up to the editor controller when it is initialised
- call `.cleanup()` in the editor controller when performing full saves, when leaving the editor with a draft, and when opening the editor with a draft
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
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
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
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
refs https://github.com/TryGhost/Ghost/issues/9623
- added additional text expansions for `^sup^` and `~sub~` that also work inside of words
- added sub and sub expansions to the special formats list so that <kbd>Backspace</kbd> undoes the expansion
refs https://github.com/TryGhost/Ghost/issues/9623
- update `{{koenig-card}}` to show the toolbar immediately if it has changed
- update `{{koenig-card-image}}` to only add toolbar items when an image is present
refs https://github.com/TryGhost/Ghost/issues/9623
- add `dropTargetSelector` property so that `{{koenig-editor}}` can attach drag/drop events to a larger area
- add drag/drop event handlers to `{{koenig-editor}}`
- ignore drops that occur on cards in edit mode (cards should handle drop events themselves if required)
- extract image files from the drop event and use them to create image cards
- extract image card creation from image files into a helper function
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
refs https://github.com/TryGhost/Ghost/issues/9623
- the `{{koenig-toolbar}} `didReceiveAttrs` hook was triggering an async action when the component was being destroyed so a guard is needed around the call to `set` in the `_hideToolbar` method
refs https://github.com/TryGhost/Ghost/issues/9623
- pasting inside a container card such as markdown or HTML would paste content into the card and duplicate that content outside of the card, exiting the card's edit mode in the process
- use the same "addressable" check that mobiledoc-kit's event manager uses
refs https://github.com/TryGhost/Ghost/issues/9505
- when cursor changes through the normal `cursorDidChange` or through certain programmatic changes we trigger a check to see if the cursor is out of the viewport and scroll it into view if necessary
- disable our scroll-into-view routine if the mouse button or shift key is down so that we don't interfere with default browser behaviour which works well in that situation
- for scroll-into-view at the bottom there are two slightly different methods
- if the cursor is near the bottom of the document we scroll so that the bottom padding of the editor is visible
- if the cursor is mid-document then we scroll just enough to bring the cursor into the viewport
refs https://github.com/TryGhost/Ghost/issues/9623
- it's necessary to pass a cursor movement to `deleteCard` for card selection after the delete to work
- default to `CURSOR_AFTER` as it's the more typical direction compared to `NO_CURSOR_MOVEMENT`
refs https://github.com/TryGhost/Ghost/issues/9623
- add a `exitCursorAtTop` action to `{{koenig-editor}}` that will deselect any cards before calling the closure action
- check if the we're on a card section when pressing UP or LEFT so that the cursor being before/after the card doesn't trip up the logic
refs https://github.com/TryGhost/Ghost/issues/9623
- now that we're not creating unnecessary undo states, pasting cards with an immediate Cmd+Z works fine so we don't need to create a trailing paragraph as a partial workaround
refs 569a6942cd
- perform a check for a click originating on the plus menu in `{{koenig-card}}` to avoid an immediate deselection as soon as an editable card is created
- removed unnecessary `.koenig-plus-menu` class in favour of `[data-kg="plus-menu"]` selector
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
refs https://github.com/TryGhost/Ghost/issues/9623
- use our custom paste event to intercept and modify pasted HTML before passing to mobiledoc
- wrap the html in a `<div>` so that all elements get parsed by mobiledoc-kit
- when pasting results in the last pasted section being a card, insert a blank paragraph
- fixes immediate breaking of the undo stack
refs https://github.com/TryGhost/Ghost/issues/9623
- adds `parserPlugins` option with array of parser plugins that read node values and convert them when pasting
- converts `<br>` to a soft-break atom for line breaks
- removes leading newlines from text nodes to avoid leading spaces in the render output (common when pasting MD with line breaks)
refs https://github.com/TryGhost/Ghost/issues/9623
- header text expansion skip for headers with the same level didn't take into account that the toolbar should actually toggle the heading on/off
refs https://github.com/TryGhost/Ghost/issues/9623
- catches and ignores `editor.positionAtPoint` TypeError due to not having a correct node value whilst dragging with a selection
- fixes error thrown from the triple-click handling which expected a value to always be present
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
refs https://github.com/TryGhost/Ghost/issues/9623
- fixes `Maximum call stack size exceeded` error when you paste content containing `<code>` elements and then place the cursor at the end of one of those elements
- this was occurring because the code in `inputModeDidChange()` was triggering another `inputModeDidChange() call
- use the private mobiledoc-kit methods to toggle editor state because we don't want to trigger `inputModeDidChange()` callbacks
- look at the editor state directly rather than going by what we _think_ the editor state should be based on the markers around the cursor
- fixes another subtle issue where after pasting if you placed the cursor at the end of the code format and started typing it would still be formatted as code - mobiledoc-kit has an odd behaviour where duplicate edit states for the markup are present so we have to loop over them rather than relying on a single `toggleMarkupState()` call
refs https://github.com/TryGhost/Ghost/issues/9623
- plain text that's pasted will be run through our markdown parser then mobiledoc-kit will perform it's usual rich-text paste handling on the resulting HTML
- add a <kbd>Cmd/Ctrl+V+Shift</kbd> escape valve that will skip markdown parsing so mobiledoc-kit's default plain text parsing is invoked
- will not work with IE or Edge <= 16 due to missing browser support for distinguishing plain text vs html pastes
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
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
refs https://github.com/TryGhost/Ghost/issues/9623
- maintains easy reversibility by keeping text selected and toolbar shown in the same position to avoid jumping buttons when font size or other formatting changes
refs https://github.com/TryGhost/Ghost/issues/9623
- triple-click select will by default end the selection at position 0 of the following paragraph which means section-level formatting such as headers or quotes will affect the apparently unselected following paragraph
- add a guard to check for that selection situation and ensure the selection is constrained to the visibly selected text
refs https://github.com/TryGhost/Ghost/issues/9623
- keep a truthy "skip mouse move" flag around across re-triggers within the 50ms restart window to cater for slightly different mouse/selection event orders
- add a couple of guards to avoid triggering the toggle task unnecessarily
refs https://github.com/TryGhost/Ghost/issues/9505
- if there is only a single card in a document and no other text then deleting it would throw an error because we assumed there's another section to move the cursor to
- handle the situation of not having a position to move to by creating a new blank paragraph and placing the cursor inside
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
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
refs https://github.com/TryGhost/Ghost/issues/9505
- depending on the location of the caret around the selected card <kbd>Enter</kbd> could throw an error due to the assumption of a `tagName` property in the enter-at-start-of-header handling
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
refs https://github.com/TryGhost/Ghost/issues/9505
- sometimes the toolbar was not in a state to measure correctly during `didInsertElement` so the positioning was incorrect
- fixed by re-calculating width/height each time we want to show the toolbar
refs https://github.com/TryGhost/Ghost/issues/9505
- ensure we select the next section when inserting a card
- remove duplicated card insertion logic by passing the Koenig instance to our text expansion helpers so that they can call actions
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
refs https://github.com/TryGhost/Ghost/issues/9505
- prevents clicks outside of the document canvas from exiting edit mode
- useful for cards that include modals because previously any click on a modal would exit edit mode and usually remove the modal from view
no issue
- allows specifying Koenig-specific card options via `createComponentCard`
- respect `hasEditMode` and `selectAfterInsert` options when inserting cards via the (+) and / menus
- do not select divider card after insertion
refs https://github.com/TryGhost/Ghost/issues/9505
- add a `paste` event handler to the editor element so that we can override the default mobiledoc-kit paste handling when required
- detect a paste when we have a plain text selection and if it's a valid url convert the selection to a link using the pasted url as the `href`
refs https://github.com/TryGhost/Ghost/issues/9505
- use `ENTER` and `BACKSPACE` key commands to intercept <kbd>Enter</kbd> and <kbd>Backspace</kbd> to insert/remove blank paragraphs rather than splitting the heading when the cursor is at the beginning of a heading
refs https://github.com/TryGhost/Ghost/issues/9505
- prevent typing at the end of a `code` or ~strike~ markup continuing the format
- if <kbd>Backspace</kbd> is pressed at the end of a `code` or ~strike~ markup then undo the text expansion and remove the last char
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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`
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
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
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
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
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
