TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-23 19:02:29 +03:00
Code Issues Projects Releases Wiki Activity
1194a553e8
Ghost/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.hbs

129 lines
4.4 KiB
Handlebars
Raw Normal View History

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 19:31:17 +03:00
<div class="koenig-editor__editor-wrapper" data-kg="editor-wrapper">
🎨 Enabled use of Grammarly extension in the editor no issue - Grammarly have indicated their extension is now compatible with the underlying editor technology used in Ghost - removed html attributes that explicitly disabled the extension on our editor fields
2021-06-03 15:22:07 +03:00
<div class="koenig-editor__editor" data-kg="editor"></div>
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 13:01:07 +03:00
</div>
{{!-- pop-up markup toolbar is shown when there's a selection --}}
Migrated to `<AngleBracketSyntax />` (#1460) no issue Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere. This simplifies the rules for what template code is referring to... `<Component>` = a component `{{helper}}` = a helper (or locally assigned handlebars variable) `{{this.foo}}` = data on the template backing context (a component/controller) `{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments) - ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories: - `app/templates` - `lib/koenig-editor/addon/templates` - removed positional params from components as angle bracket syntax does not support them - `gh-feature-flag` - `gh-tour-item` - `gh-cm-editor` - `gh-fullscreen-modal` - `gh-task-button` - updates some code that was missed in https://github.com/TryGhost/Ghost-Admin/commit/3c851293c1f92d14bc6a49debf86a4663398315a to use explicit this
2020-01-16 18:14:03 +03:00
<KoenigToolbar
@editor={{this.editor}}
@editorRange={{this.selectedRange}}
@activeMarkupTagNames={{this.activeMarkupTagNames}}
@activeSectionTagNames={{this.activeSectionTagNames}}
@toggleMarkup={{action "toggleMarkup"}}
@toggleSection={{action "toggleSection"}}
@toggleHeaderSection={{action "toggleHeaderSection"}}
@editLink={{action "editLink"}}
Hid snippet management UI from staff users without permissions 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
2020-10-27 17:42:36 +03:00
@addSnippet={{this.addSnippetIfPossible}}
Migrated to `<AngleBracketSyntax />` (#1460) no issue Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere. This simplifies the rules for what template code is referring to... `<Component>` = a component `{{helper}}` = a helper (or locally assigned handlebars variable) `{{this.foo}}` = data on the template backing context (a component/controller) `{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments) - ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories: - `app/templates` - `lib/koenig-editor/addon/templates` - removed positional params from components as angle bracket syntax does not support them - `gh-feature-flag` - `gh-tour-item` - `gh-cm-editor` - `gh-fullscreen-modal` - `gh-task-button` - updates some code that was missed in https://github.com/TryGhost/Ghost-Admin/commit/3c851293c1f92d14bc6a49debf86a4663398315a to use explicit this
2020-01-16 18:14:03 +03:00
/>
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 18:18:08 +03:00
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 20:42:27 +03:00
{{!-- pop-up link hover toolbar --}}
Migrated to `<AngleBracketSyntax />` (#1460) no issue Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere. This simplifies the rules for what template code is referring to... `<Component>` = a component `{{helper}}` = a helper (or locally assigned handlebars variable) `{{this.foo}}` = data on the template backing context (a component/controller) `{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments) - ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories: - `app/templates` - `lib/koenig-editor/addon/templates` - removed positional params from components as angle bracket syntax does not support them - `gh-feature-flag` - `gh-tour-item` - `gh-cm-editor` - `gh-fullscreen-modal` - `gh-task-button` - updates some code that was missed in https://github.com/TryGhost/Ghost-Admin/commit/3c851293c1f92d14bc6a49debf86a4663398315a to use explicit this
2020-01-16 18:14:03 +03:00
<KoenigLinkToolbar
@editor={{this.editor}}
@container={{this.element}}
@linkRange={{this.linkRange}}
@selectedRange={{this.selectedRange}}
@editLink={{action "editLink"}}
/>
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 20:42:27 +03:00
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 19:49:16 +03:00
{{!-- pop-up link editing toolbar --}}
Migrated to `<AngleBracketSyntax />` (#1460) no issue Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere. This simplifies the rules for what template code is referring to... `<Component>` = a component `{{helper}}` = a helper (or locally assigned handlebars variable) `{{this.foo}}` = data on the template backing context (a component/controller) `{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments) - ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories: - `app/templates` - `lib/koenig-editor/addon/templates` - removed positional params from components as angle bracket syntax does not support them - `gh-feature-flag` - `gh-tour-item` - `gh-cm-editor` - `gh-fullscreen-modal` - `gh-task-button` - updates some code that was missed in https://github.com/TryGhost/Ghost-Admin/commit/3c851293c1f92d14bc6a49debf86a4663398315a to use explicit this
2020-01-16 18:14:03 +03:00
{{#if this.linkRange}}
<KoenigLinkInput
@editor={{this.editor}}
@linkRange={{this.linkRange}}
🐛 Fixed unreachable toolbar when editing wrapped links (#1511) 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
2020-03-07 21:22:56 +03:00
@linkRect={{this.linkRect}}
Migrated to `<AngleBracketSyntax />` (#1460) no issue Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere. This simplifies the rules for what template code is referring to... `<Component>` = a component `{{helper}}` = a helper (or locally assigned handlebars variable) `{{this.foo}}` = data on the template backing context (a component/controller) `{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments) - ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories: - `app/templates` - `lib/koenig-editor/addon/templates` - removed positional params from components as angle bracket syntax does not support them - `gh-feature-flag` - `gh-tour-item` - `gh-cm-editor` - `gh-fullscreen-modal` - `gh-task-button` - updates some code that was missed in https://github.com/TryGhost/Ghost-Admin/commit/3c851293c1f92d14bc6a49debf86a4663398315a to use explicit this
2020-01-16 18:14:03 +03:00
@selectedRange={{this.selectedRange}}
@cancel={{action "cancelEditLink"}}
/>
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 19:49:16 +03:00
{{/if}}
Implemented first iteration of content snippets 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
2020-10-15 20:03:18 +03:00
{{!-- pop-up snippet editing toolbar --}}
{{#if this.snippetRange}}
✨ Added ability to update snippet contents (#2073) refs https://github.com/TryGhost/Team/issues/1008 To update a snippet, select the content in the editor that you want as your snippet text and click the snippet icon as per creating a snippet. Once the snippet name input shows, start typing the name of an existing snippet to be able to select it for update. - replaced main snippet input component with the labs component - removed the feature flag and associated labs screen toggle - removed original/labs snippet input conditional in the editor
2021-09-01 11:09:40 +03:00
<KoenigSnippetInput
@editor={{this.editor}}
@snippetRange={{this.snippetRange}}
@snippetRect={{this.snippetRect}}
@snippets={{@snippets}}
@save={{@saveSnippet}}
@update={{@updateSnippet}}
@cancel={{this.cancelAddSnippet}}
/>
Implemented first iteration of content snippets 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
2020-10-15 20:03:18 +03:00
{{/if}}
Added media selector pattern to editor and used it for gifs 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
2021-11-19 22:07:40 +03:00
{{!-- pop-up media selector --}}
{{#if this.activeSelectorComponent}}
<KoenigMediaSelector
@editor={{this.editor}}
@editorRange={{this.selectedRange}}
@replaceWithCardSection={{action "replaceWithCardSection"}}
Fixed scroll jump when media selector opens refs https://github.com/TryGhost/Team/issues/1225 - if there's not enough space at the end of the editor canvas to fit the selector the browser adds extra space and pushes the scroll up making things feel janky - added a scroll position reset as soon as the selector renders so nothing jumps around, the canvas just extends so it's possible to scroll the full selector into view
2021-11-19 22:51:45 +03:00
@scrollContainerSelector={{this.scrollContainerSelector}}
Added media selector pattern to editor and used it for gifs 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
2021-11-19 22:07:40 +03:00
@close={{action "closeSelectorComponent"}}
as |selector|
>
{{component this.activeSelectorComponent selector=selector}}
</KoenigMediaSelector>
{{/if}}
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 17:49:20 +03:00
{{!-- (+) icon and pop-up menu --}}
Migrated to `<AngleBracketSyntax />` (#1460) no issue Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere. This simplifies the rules for what template code is referring to... `<Component>` = a component `{{helper}}` = a helper (or locally assigned handlebars variable) `{{this.foo}}` = data on the template backing context (a component/controller) `{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments) - ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories: - `app/templates` - `lib/koenig-editor/addon/templates` - removed positional params from components as angle bracket syntax does not support them - `gh-feature-flag` - `gh-tour-item` - `gh-cm-editor` - `gh-fullscreen-modal` - `gh-task-button` - updates some code that was missed in https://github.com/TryGhost/Ghost-Admin/commit/3c851293c1f92d14bc6a49debf86a4663398315a to use explicit this
2020-01-16 18:14:03 +03:00
<KoenigPlusMenu
@editor={{this.editor}}
@editorRange={{this.selectedRange}}
Implemented first iteration of content snippets 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
2020-10-15 20:03:18 +03:00
@snippets={{this.snippets}}
Added delete button with confirmation to snippets in card menus no issue - show a delete icon when a snippet is hovered in plus/slash menus - show a confirmation dialog when the delete icon is clicked - keep menus open whilst displaying the delete confirmation dialog
2020-10-26 20:09:09 +03:00
@deleteSnippet={{this.deleteSnippet}}
Migrated to `<AngleBracketSyntax />` (#1460) no issue Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere. This simplifies the rules for what template code is referring to... `<Component>` = a component `{{helper}}` = a helper (or locally assigned handlebars variable) `{{this.foo}}` = data on the template backing context (a component/controller) `{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments) - ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories: - `app/templates` - `lib/koenig-editor/addon/templates` - removed positional params from components as angle bracket syntax does not support them - `gh-feature-flag` - `gh-tour-item` - `gh-cm-editor` - `gh-fullscreen-modal` - `gh-task-button` - updates some code that was missed in https://github.com/TryGhost/Ghost-Admin/commit/3c851293c1f92d14bc6a49debf86a4663398315a to use explicit this
2020-01-16 18:14:03 +03:00
@replaceWithCardSection={{action "replaceWithCardSection"}}
Implemented first iteration of content snippets 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
2020-10-15 20:03:18 +03:00
@replaceWithPost={{action "replaceWithPost"}}
Added media selector pattern to editor and used it for gifs 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
2021-11-19 22:07:40 +03:00
@openSelectorComponent={{action "openSelectorComponent"}}
Hid email specific cards from card menus when editing pages no issue Pages can not be sent by email so by hiding email-specific cards when editing pages we can reduce confusion and clutter. - added a `@postType` argument to editor components that can be passed through to sub components - set `@postType` to `post.displayName` which is either `post` or `page` - updated `{{card-is-available}}` helper to compare a `postType` property on card menu items to the passed in `postType`
2021-09-10 11:24:38 +03:00
@postType={{@postType}}
Migrated to `<AngleBracketSyntax />` (#1460) no issue Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere. This simplifies the rules for what template code is referring to... `<Component>` = a component `{{helper}}` = a helper (or locally assigned handlebars variable) `{{this.foo}}` = data on the template backing context (a component/controller) `{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments) - ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories: - `app/templates` - `lib/koenig-editor/addon/templates` - removed positional params from components as angle bracket syntax does not support them - `gh-feature-flag` - `gh-tour-item` - `gh-cm-editor` - `gh-fullscreen-modal` - `gh-task-button` - updates some code that was missed in https://github.com/TryGhost/Ghost-Admin/commit/3c851293c1f92d14bc6a49debf86a4663398315a to use explicit this
2020-01-16 18:14:03 +03:00
/>
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 19:54:19 +03:00
{{!-- slash menu popup --}}
Migrated to `<AngleBracketSyntax />` (#1460) no issue Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere. This simplifies the rules for what template code is referring to... `<Component>` = a component `{{helper}}` = a helper (or locally assigned handlebars variable) `{{this.foo}}` = data on the template backing context (a component/controller) `{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments) - ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories: - `app/templates` - `lib/koenig-editor/addon/templates` - removed positional params from components as angle bracket syntax does not support them - `gh-feature-flag` - `gh-tour-item` - `gh-cm-editor` - `gh-fullscreen-modal` - `gh-task-button` - updates some code that was missed in https://github.com/TryGhost/Ghost-Admin/commit/3c851293c1f92d14bc6a49debf86a4663398315a to use explicit this
2020-01-16 18:14:03 +03:00
<KoenigSlashMenu
@editor={{this.editor}}
@editorRange={{this.selectedRange}}
Implemented first iteration of content snippets 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
2020-10-15 20:03:18 +03:00
@snippets={{this.snippets}}
Added delete button with confirmation to snippets in card menus no issue - show a delete icon when a snippet is hovered in plus/slash menus - show a confirmation dialog when the delete icon is clicked - keep menus open whilst displaying the delete confirmation dialog
2020-10-26 20:09:09 +03:00
@deleteSnippet={{this.deleteSnippet}}
Migrated to `<AngleBracketSyntax />` (#1460) no issue Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere. This simplifies the rules for what template code is referring to... `<Component>` = a component `{{helper}}` = a helper (or locally assigned handlebars variable) `{{this.foo}}` = data on the template backing context (a component/controller) `{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments) - ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories: - `app/templates` - `lib/koenig-editor/addon/templates` - removed positional params from components as angle bracket syntax does not support them - `gh-feature-flag` - `gh-tour-item` - `gh-cm-editor` - `gh-fullscreen-modal` - `gh-task-button` - updates some code that was missed in https://github.com/TryGhost/Ghost-Admin/commit/3c851293c1f92d14bc6a49debf86a4663398315a to use explicit this
2020-01-16 18:14:03 +03:00
@replaceWithCardSection={{action "replaceWithCardSection"}}
Implemented first iteration of content snippets 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
2020-10-15 20:03:18 +03:00
@replaceWithPost={{action "replaceWithPost"}}
Added media selector pattern to editor and used it for gifs 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
2021-11-19 22:07:40 +03:00
@openSelectorComponent={{action "openSelectorComponent"}}
Hid email specific cards from card menus when editing pages no issue Pages can not be sent by email so by hiding email-specific cards when editing pages we can reduce confusion and clutter. - added a `@postType` argument to editor components that can be passed through to sub components - set `@postType` to `post.displayName` which is either `post` or `page` - updated `{{card-is-available}}` helper to compare a `postType` property on card menu items to the passed in `postType`
2021-09-10 11:24:38 +03:00
@postType={{@postType}}
Migrated to `<AngleBracketSyntax />` (#1460) no issue Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere. This simplifies the rules for what template code is referring to... `<Component>` = a component `{{helper}}` = a helper (or locally assigned handlebars variable) `{{this.foo}}` = data on the template backing context (a component/controller) `{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments) - ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories: - `app/templates` - `lib/koenig-editor/addon/templates` - removed positional params from components as angle bracket syntax does not support them - `gh-feature-flag` - `gh-tour-item` - `gh-cm-editor` - `gh-fullscreen-modal` - `gh-task-button` - updates some code that was missed in https://github.com/TryGhost/Ghost-Admin/commit/3c851293c1f92d14bc6a49debf86a4663398315a to use explicit this
2020-01-16 18:14:03 +03:00
/>
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 17:49:20 +03:00
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 19:54:19 +03:00
{{!-- all component cards wormholed into the editor canvas --}}
Migrated to `<AngleBracketSyntax />` (#1460) no issue Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere. This simplifies the rules for what template code is referring to... `<Component>` = a component `{{helper}}` = a helper (or locally assigned handlebars variable) `{{this.foo}}` = data on the template backing context (a component/controller) `{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments) - ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories: - `app/templates` - `lib/koenig-editor/addon/templates` - removed positional params from components as angle bracket syntax does not support them - `gh-feature-flag` - `gh-tour-item` - `gh-cm-editor` - `gh-fullscreen-modal` - `gh-task-button` - updates some code that was missed in https://github.com/TryGhost/Ghost-Admin/commit/3c851293c1f92d14bc6a49debf86a4663398315a to use explicit this
2020-01-16 18:14:03 +03:00
{{#each this.componentCards as |card|}}
Switched over to public {{in-element}} API 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
2020-07-20 14:10:17 +03:00
{{#in-element card.destinationElement}}
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 14:26:24 +03:00
{{component card.componentName
Migrated to `<AngleBracketSyntax />` (#1460) no issue Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere. This simplifies the rules for what template code is referring to... `<Component>` = a component `{{helper}}` = a helper (or locally assigned handlebars variable) `{{this.foo}}` = data on the template backing context (a component/controller) `{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments) - ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories: - `app/templates` - `lib/koenig-editor/addon/templates` - removed positional params from components as angle bracket syntax does not support them - `gh-feature-flag` - `gh-tour-item` - `gh-cm-editor` - `gh-fullscreen-modal` - `gh-task-button` - updates some code that was missed in https://github.com/TryGhost/Ghost-Admin/commit/3c851293c1f92d14bc6a49debf86a4663398315a to use explicit this
2020-01-16 18:14:03 +03:00
editor=this.editor
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 18:18:08 +03:00
postModel=card.postModel
cardName=card.cardName
payload=card.payload
env=card.env
options=card.options
Migrated to `<AngleBracketSyntax />` (#1460) no issue Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere. This simplifies the rules for what template code is referring to... `<Component>` = a component `{{helper}}` = a helper (or locally assigned handlebars variable) `{{this.foo}}` = data on the template backing context (a component/controller) `{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments) - ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories: - `app/templates` - `lib/koenig-editor/addon/templates` - removed positional params from components as angle bracket syntax does not support them - `gh-feature-flag` - `gh-tour-item` - `gh-cm-editor` - `gh-fullscreen-modal` - `gh-task-button` - updates some code that was missed in https://github.com/TryGhost/Ghost-Admin/commit/3c851293c1f92d14bc6a49debf86a4663398315a to use explicit this
2020-01-16 18:14:03 +03:00
headerOffset=this.headerOffset
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 18:18:08 +03:00
saveCard=(action card.env.save)
cancelCard=(action card.env.cancel)
removeCard=(action card.env.remove)
Added scroll-into-view behaviour for inline image selector 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
2021-11-24 23:02:10 +03:00
scrollToCard=(action "scrollToCard" card)
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 22:35:44 +03:00
isSelected=card.isSelected
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 21:00:54 +03:00
isEditing=card.isEditing
🎨 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 13:38:30 +03:00
selectCard=(action "selectCard" card)
deselectCard=(action "deselectCard" card)
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 21:00:54 +03:00
editCard=(action "editCard" card)
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 20:54:15 +03:00
deleteCard=(action "deleteCard" card)
🐛 Fixed snippet icon showing in card toolbar for authors/contributors no issue - authors/contributors do not have permission to create snippets so the icon should not be displayed
2020-11-03 16:57:11 +03:00
saveAsSnippet=(if this.saveCardAsSnippetIfPossible (fn this.saveCardAsSnippetIfPossible card))
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 23:41:40 +03:00
moveCursorToPrevSection=(action "moveCursorToPrevSection" card)
moveCursorToNextSection=(action "moveCursorToNextSection" card)
addParagraphAfterCard=(action "addParagraphAfterCard" card)
✨ Koenig - Added reading time and word count display 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
2018-07-20 17:53:21 +03:00
registerComponent=(action (mut card.component))
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 18:18:08 +03:00
}}
Switched over to public {{in-element}} API 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
2020-07-20 14:10:17 +03:00
{{/in-element}}
Prototyped component based atoms in the editor 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
2021-07-22 20:54:35 +03:00
{{/each}}
{{!-- all component atoms wormholed into the editor canvas --}}
{{#each this.componentAtoms as |atom|}}
{{#in-element atom.destinationElement}}
{{component atom.componentName
editor=this.editor
atom=atom
saveAtom=(fn atom.env.save atom.env.value atom.env.payload)
registerComponent=(action (mut atom.component))
}}
{{/in-element}}
🎨 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 13:38:30 +03:00
{{/each}}
Reference in New Issue Copy Permalink