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

96 lines
3.3 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}}
<KoenigSnippetInput
@editor={{this.editor}}
@snippetRange={{this.snippetRange}}
Added "Create snippet" toolbar icon when cards are selected 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
2020-10-21 14:16:04 +03:00
@snippetRect={{this.snippetRect}}
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
@save={{@saveSnippet}}
@cancel={{this.cancelAddSnippet}}
/>
{{/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"}}
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"}}
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)
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}}
🎨 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