mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-26 12:21:36 +03:00
✨ Koenig Editor Beta Release
refs https://github.com/TryGhost/Ghost/issues/9505 - see https://forum.ghost.org/t/koenig-beta-release/1284 for full details - moved Koenig editor checkbox from experimental to Beta - added info message support in editor screen - removed alert when opening markdown-incompatible post with Koenig disabled
This commit is contained in:
Zimo
Kevin Ansfield
parent
fd65d5bb45
commit
19ca4ca0b7
@ -94,6 +94,7 @@ export default Controller.extend({
|
||||
|
||||
/* public properties -----------------------------------------------------*/
|
||||
|
||||
infoMessage: null,
|
||||
leaveEditorTransition: null,
|
||||
shouldFocusEditor: false,
|
||||
showDeletePostModal: false,
|
||||
@ -512,12 +513,6 @@ export default Controller.extend({
|
||||
let postIsMarkdownCompatible = post.isCompatibleWithMarkdownEditor();
|
||||
if (koenigEnabled || !postIsMarkdownCompatible) {
|
||||
this.set('useKoenig', true);
|
||||
|
||||
// display an alert if koenig is disabled but we use it anyway
|
||||
// because the post is incompatible with the markdown editor
|
||||
if (!koenigEnabled) {
|
||||
alert('This post will be opened with the Koenig editor because it\'s not compatible with the markdown editor');
|
||||
}
|
||||
} else {
|
||||
this.set('useKoenig', false);
|
||||
}
|
||||
@ -534,6 +529,12 @@ export default Controller.extend({
|
||||
|
||||
this.set('post', post);
|
||||
|
||||
// display an info message if Koenig is disabled by we had to use it
|
||||
// for post compatibility
|
||||
if (!koenigEnabled && this.useKoenig) {
|
||||
// this.set('infoMessage', 'This post can only be edited with the Koenig editor.');
|
||||
}
|
||||
|
||||
// autofocus the editor if we have a new post
|
||||
this.set('shouldFocusEditor', post.get('isNew'));
|
||||
|
||||
@ -629,6 +630,7 @@ export default Controller.extend({
|
||||
this.set('hasDirtyAttributes', false);
|
||||
this.set('shouldFocusEditor', false);
|
||||
this.set('leaveEditorTransition', null);
|
||||
this.set('infoMessage', null);
|
||||
|
||||
// remove the onbeforeunload handler as it's only relevant whilst on
|
||||
// the editor route
|
||||
|
||||
@ -239,3 +239,10 @@
|
||||
.mobile-menu-expanded .content-cover {
|
||||
transform: translate3d(205px, 0px, 0px);
|
||||
}
|
||||
|
||||
|
||||
/* Badges
|
||||
/* ---------------------------------------------------------- */
|
||||
.gh-setting-title .gh-badge {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
display: inline-block;
|
||||
padding: 15px 0 15px 15px;
|
||||
padding: 10px;
|
||||
color: var(--midgrey);
|
||||
line-height: 0;
|
||||
transition: all 0.15s ease-out 0s;
|
||||
@ -286,11 +286,15 @@
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
padding: 0 30px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
margin: 24px;
|
||||
z-index: 799;
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
.gh-editor-header {
|
||||
padding: 0 4vw;
|
||||
@ -304,6 +308,8 @@
|
||||
padding-left: 15px;
|
||||
border-bottom: var(--lightgrey) 1px solid;
|
||||
background-color: #fff;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.gh-editor-header-small .gh-publishmenu {
|
||||
@ -314,6 +320,15 @@
|
||||
padding: 13px 15px;
|
||||
}
|
||||
|
||||
.gh-editor-header-small .gh-koenig-info {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.gh-editor-status {
|
||||
color: var(--midgrey);
|
||||
font-size: 1.3rem;
|
||||
|
||||
@ -347,9 +347,9 @@
|
||||
.gh-menu-toggle {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
top: 24px;
|
||||
right: -8px;
|
||||
height: 34px;
|
||||
height: 36px;
|
||||
width: 25px;
|
||||
border: color-mod(var(--lightgrey) l(+4%)) 5px solid;
|
||||
border-radius: 4px;
|
||||
@ -638,10 +638,6 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.view-actions .gh-btn {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.view-container,
|
||||
.view-content {
|
||||
position: relative;
|
||||
|
||||
@ -5,7 +5,8 @@
|
||||
navIsClosed=navIsClosed
|
||||
as |editor|
|
||||
}}
|
||||
<header class="gh-editor-header {{editor.headerClass}}">
|
||||
<header class="gh-editor-header br2 {{editor.headerClass}} {{if infoMessage "bg-white-90"}}">
|
||||
<div class="flex items-center br2 h9 pa2 pl4 pr4 {{unless infoMessage "bg-white-90"}}">
|
||||
<div class="gh-editor-status">
|
||||
{{gh-editor-post-status
|
||||
post=post
|
||||
@ -13,11 +14,25 @@
|
||||
}}
|
||||
</div>
|
||||
{{#gh-scheduled-post-countdown post=post as |post countdown|}}
|
||||
<time datetime="{{post.publishedAtUTC}}" class="gh-notification gh-notification-schedule" data-test-schedule-countdown>
|
||||
Post will be published {{countdown}}.
|
||||
<time datetime="{{post.publishedAtUTC}}" class="green f8 nudge-bottom--1 ml3" data-test-schedule-countdown>
|
||||
Post will go live {{countdown}}.
|
||||
</time>
|
||||
{{/gh-scheduled-post-countdown}}
|
||||
<section class="view-actions">
|
||||
</div>
|
||||
|
||||
{{#if infoMessage}}
|
||||
<div class="gh-koenig-info miw88 flex flex-auto justify-center">
|
||||
<div class="midgrey inline-flex tracked-1 center pa1 pl4 pr4 br3 justify-center items-start {{if (eq editor.headerClass "gh-editor-header-small") "bg-white-90"}}">
|
||||
{{svg-jar "idea" class="w7 h7 fill-blue"}}
|
||||
<p class="ma0 pa0 ml1 nudge-top--2">
|
||||
{{infoMessage}}
|
||||
<button type="button" class="blue fw5" {{action (mut infoMessage "")}}>Got it</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<section class="view-actions br2 {{unless infoMessage "bg-white-90"}}">
|
||||
{{#unless post.isNew}}
|
||||
{{#if session.user.isContributor}}
|
||||
{{gh-task-button "Save"
|
||||
|
||||
@ -82,6 +82,15 @@
|
||||
</div>
|
||||
|
||||
<div class="gh-setting-header">Beta features</div>
|
||||
<div class="gh-setting">
|
||||
<div class="gh-setting-content">
|
||||
<div class="gh-setting-title flex items-center">Koenig editor <span class="gh-badge gh-badge-green ml1">New</span></div>
|
||||
<div class="gh-setting-desc">Participate in our new rich text editor beta! We’d love <a href="https://forum.ghost.org/t/koenig-beta-release/1284" target="_blank" rel="noopener">your feedback</a></div>
|
||||
</div>
|
||||
<div class="gh-setting-action">
|
||||
<div class="for-checkbox">{{gh-feature-flag "koenigEditor"}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-setting">
|
||||
<div class="gh-setting-content">
|
||||
<div class="gh-setting-title">Public API</div>
|
||||
@ -155,19 +164,6 @@
|
||||
{{/gh-uploader}}
|
||||
</div>
|
||||
|
||||
<div class="gh-setting-header">⚠️ Developer-only Feature Testing ⚠️</div>
|
||||
<div class="gh-setting">
|
||||
<div class="gh-setting-content">
|
||||
<div class="gh-setting-title">Koenig Editor</div>
|
||||
<div class="gh-setting-desc">
|
||||
Highly experimental (i.e. broken) editor. For developer use only.<br>
|
||||
<strong>Warning:</strong> Stories created or edited with Koenig will no longer be compatible with the old markdown editor.</div>
|
||||
</div>
|
||||
<div class="gh-setting-action">
|
||||
<div class="for-checkbox">{{gh-feature-flag "koenigEditor"}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user