closes https://github.com/TryGhost/Team/issues/1254
- when switching over to a more generic file paste handling the prevention of the default paste behaviour was missed meaning an additional image element was added to the contenteditable area which was not rendered on the front-end and disappeared when reloading the post
refs a30e8b15f5
- added an optional options param to `addParagraphAfterCard` but was missing a default value meaning the destructuring errored when the param wasn't provided
refs https://github.com/TryGhost/Team/issues/1225
- provides a more obvious continuation point after selecting an image
- added `scrollIntoView` option to `addParagraphAfterCard()` because for large images the cursor in the new paragraph could be pushed out of the visible area
refs https://github.com/TryGhost/Team/issues/1229
- generalized `insertImageCards()` to `insertCardsFromFiles()` and added support for video cards
- added `canInsertCardsFromFiles()` function so the editor can check before starting an editor run loop and generating an undo point
refs https://github.com/TryGhost/Team/issues/1225
- added `scrollToCard` action to `koenig-editor` and passed it through to all card components curried to already include the card as an argument
- action selects the card which places the cursor on it, then triggers our existing cursor scroll-into-view behaviour with an option to allow scrolling a card into view
- updated our cursor scroll-into-view behaviour so if the cursor is large (eg, when it covers a card's height) we make sure the top of the cursor is kept in view rather than the bottom
- ensures that on small-height screens, opening the gif selector doesn't result in it's search bar being scrolled off screen
refs https://github.com/TryGhost/Team/issues/1225
Re-using the existing pattern of creating an image card and having it launch an image selector was proving to have a lot of edge cases when we wanted a more streamlined in-line image selector for gifs.
- added a new `'selector'` type to card definitions
- requires a `selectorComponent` argument that is the name of a component that renders the media and handles search
- updated card components to open the selector component when respective menu item is activated
- updated slash menu to instantly trigger the selector component when the slash command matches a card and is followed by a space so that searches continue inside the selector
- added `<KoenigMediaSelector>` component that wraps the card-definition provided component and handles escape key, clicks outside of the editor, and provides a stripped down API to the child component for selecting/closing
- added `<KoenigMediaSelectorTenor>` which mostly replicates the `<GhTenor>` component but has different styling and uses the provided media selector API
no issue
The logic for "delete if empty" was duplicated in two places:
1. when `createComponentCard` is used to register a card, this option method was used when cleaning up a post when first rendering (cards in empty state can be saved before the editor auto-removes them but we don't want to show them again)
2. inside of card's own delete-if-empty handling on certain actions such as deselection or leaving edit mode
- added an `ifEmpty` property to each card component
- used by the editor's first-render cleanup routing if the property is present
- can be re-used internally for the card's own deselect/exit-edit-mode behaviour
- updated the cleanup routine in `<KoenigEditor>`
- added a `allComponentCardsRegistered` property that will return `true` when the `.component` property is set on every card (the property is set during card component initialisation so we're at the mercy of Ember's render process so not all card components will be immediately registered)
- swapped `_cleanup` for `_cleanupTask` that will wait for `allComponentCardsRegistered` to be `true` before performing cleanup, ensuring that we always have access to the card component's `isEmpty` property even when Ember renders cards across multiple render batches
- checks for `isEmpty` being a boolean and will delete the card if it's value is `true`
- updated all cards that had delete-if-empty behaviour
- added `isEmpty` properties
- removed duplicated logic in the `createComponentCard` calls
no issue
- Sentry was showing `card` being undefined at times when attempting to select/edit a card after it's inserted in `replaceWithCardSection()` (called by card menus and text expansions) but it's not been reproducible in local environments
- it's unclear if the problem occurs due to the card render not happening in the immediate render queue or if it's some other problem
- added a retry if the card is not found after the first render plus logs to Sentry and console when the unexpected state occurs for better insight
refs https://github.com/TryGhost/Team/issues/992
- within cards we sometimes want access to the `post` record so that UI or copy can be changed based on what is currently being edited
- added ability to pass `@cardOptions` through to the editor components
- fixed KoenigEditor not correctly assigning the `cardOptions` object to the `options` object that gets passed to every card when they are rendered
refs https://github.com/TryGhost/Team/issues/931
- adds handling for component atoms
- add prototype button atom to test atom behaviour
- add `Cmd+Shift+B` keyboard shortcut to create a dummy button atom when the `emailCardSegments` feature is enabled
refs https://github.com/TryGhost/Team/issues/926
- updated `<KoenigEditor>` so it creates default card payloads as TrackedObject instances so that getters in glimmer component based cards can track changes to payload properties
- added dropdown free/paid selector to email-cta card that sets the `segment` payload property to the respective filter
- updated design to show the footer outside of edit mode too so that the selected segment is always visible
no issue
- sometimes it was possible for a drop target element to not have a child which would cause an error and cause drag/drop to get stuck with the dragged element sticking to the cursor with no action occurring on mouseup, requiring an `Esc` press but all further drags also being broken
- added a guard so we can handle `element.firstChild` not existing
refs https://github.com/TryGhost/Ghost/issues/12646
- ensures new content is created with the 4.0 ghost version so the renderer will use latest output
- re-applies ghost version to mobiledoc each time we get a newly serialized mobiledoc document from mobiledoc-kit because mobiledoc-kit is not aware of our custom properties and won't pass them through the deserialise->serialise process
no issue
- snippets can only be created and deleted by owners/admins/editors
- added a property in the editor controller to determine if the logged in user has sufficient permissions, then only pass the appropriate save/delete snippet actions to the editor component if the check is passed
- updates koenig menus and toolbars to skip rendering of buttons if the associated action function is not available
no issue
- show the toolbar icon for any `<KoenigCard>` instance that has the `saveAsSnippet` action passed to it
- currently that's all cards except the HR card because that's a primitive element rather than containing any user-defined content
- add `koenigUi.inputHasFocus` so that card toolbars can be hidden when the snippet input is displayed
closes https://github.com/TryGhost/Team/issues/411
- adds "Create snippet" icon to the editor toolbar
- uses the same link input component design for specifying snippet titles
- snippets are loaded in the background when the editor is accessed
- snippets are listed at the bottom of the card menus of the + and / menus
- clicking a snippet inserts the snippet's contents in place of the current blank section
no issue
- fixed all `no-shadow` linter warnings
- changed `no-shadow` eslint rule from `warn` to `error` so we don't re-introduce shadowed variables in the future
no issue
- Ember 3.20.0 introduced `{{in-element}}` as a public API in place of the now-deprecated `{{-in-element}}` private API
- replaced our usage of the private API with the public API
no issue
Keeps component JS backing files and template files in the same directory which avoids hunting across directories when working with components. Also lets you see all components when looking at one directory, whereas previously template-only or js-only components may not have been obvious without looking at both directories.
- ran [codemod](https://github.com/ember-codemods/ember-component-template-colocation-migrator/) for app-level components
- manually moved in-repo-addon component templates in `lib/koenig-editor`
- removed all explicit `layout` imports as JS/template associations are now made at build-time removing the need for them
- updated `.embercli` to default to new flat component structure
no issue
- if the character used to define a special markup is different such as in the text replacement editor, pressing Backspace was not inserting the correct characters
refs 50eaa8830b
- we previously set a fixed mobiledoc spec version in blank documents but when the editor was serializing to a json string after editing it was bumping the spec version
- makes the specific version a constant to be used when serializing any mobiledoc
no issue
- when the mobiledoc spec changes due to a mobiledoc-kit version bump, any posts created with that version will fail to load in the editor if a rollback to an earlier Ghost version occurs
- use an explicit version to avoid the problem - we should only be bumping the mobiledoc spec version if we start using features from that version and mark it as a breaking change
closes https://github.com/TryGhost/Ghost/issues/10240
- intercept known macOS content-modifying keyboard shortcuts and simulate the "normal" keyboard events that they map to
- `ctrl+h`: `Backspace`
- `ctrl+d`: `Delete`
closes https://github.com/TryGhost/Ghost/issues/10090
- when mobiledoc-kit replaces the selection the caret window selection is temporarily set to the whole editor element which was causing our scroll-cursor-into-view routine to scroll incorrectly
- adding the guard allows the first replacement cursor change to be ignored but the second cursor change to be picked up which will do nothing if the text is on-screen, or scroll if it's off screen as normal
closes https://github.com/TryGhost/Ghost/issues/9792
- use `getClientRects()` to get separate rectangles for each line of a link and use the mouse position to find the closest one so that the toolbar can be positioned relative to that link section on that line rather than always in the middle of the editor canvas
- pass the rectangle used for positioning the link toolbar through to the link input component so that there is no jumping of position when clicking the edit button
requires https://github.com/TryGhost/Ghost/pull/11024
With the bookmark card you can present links in a much richer format, similar to Twitter cards. If the URL points to a page with right meta information it can show the page title, excerpt, author, publisher and even a preview image.
Bookmark cards can be created in two ways:
1. pasting a link as the first thing in blank paragraph - we'll check to see if we can create an embed, if we can't then we'll create a bookmark card instead
2. manually selecting the bookmark card from the (+) menu or by typing "/bookmark<kbd>Enter</kbd>" or "/bookmark {url}<kbd>Enter</kbd>" for short (you might want to do this if you want the bookmark version instead of a full embed)
Pressing <kbd>Ctrl/Cmd+Z</kbd> after pasting will convert the bookmark card back to a link if that's preferred, alternatively a URL can be pasted with <kbd>Ctrl/Cmd+Shift+V</kbd> to avoid any automatic transformation to an embed/bookmark.
---
- adds "bookmark" card that functions similarly to the embed card
- if the oembed API request returns `type: "bookmark"` then the metadata is used to create a bookmark card
no issue
- adjust drag handlers in the editor and gallery card to handle drag/drop of image cards as well as straight images
- adjust drag handlers in the gallery card to handle image inserts as well as re-orders
- add `onDragEnd` event/action to the Koenig drag-n-drop handler so that containers can perform cleanup if one of their draggables was successfully dropped into a different container
- change ghost element when dragging an image card to be an image rather than a card icon
- allow `createGhostElement` function passed in when registering a drag-n-drop container to fall back to the default behaviour by returning a falsy value
refs. https://github.com/TryGhost/Team/issues/205
Major update to Ghost Admin UI including:
- improved general consistency (typography, colors and contrast, UI components, icons)
- new design for post and pages lists, improved discoverability of filters
- search moved to modal
- account menu is decoupled from ghost logo
- further usability fixes
no issue
- `@tryghost/kg-parser-plugins` contains the parser plugins used by the editor and was extracted so that they can be used in server-side html-to-mobiledoc conversion
no issue
- Added a language indicator when in rendered mode and a language input when in edit mode
- Allow code card language to be set with <code>```lang</code>+<kbd>Space/Enter</kbd> expansion
- previously <code>\`\`\`</code> would immediately create a code card, the <kbd>Space/Enter</kbd> is now necessary for the insertion to occur
- lang is optional <code>\`\`\`</code>+<kbd>Space/Enter</kbd> will insert a code card with no language selected
- requires <kbd>Enter</kbd> to be pressed to finalise the expansion and insert the card
- added hook for text expansions to skip newline creation for when they are triggered with <kbd>Enter</kbd>
- Set the code card editor's language mode based on selected language
- set the CodeMirror mode based on the code card payload language
- add a basic map of language short codes to their respective CodeMirror modes
- observe `mode` property in `{{gh-cm-editor}}` so that the mode is properly set when it's changed after initial render
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
- 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
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
- 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
Gabriel Csapo
Kevin Ansfield
Rishabh
Peter Zimon