Added automatic conversion of old content when opening in beta editor (#17876)

no issue

Previously the beta editor only worked for newly created posts/pages, any older content would open with the original editor. This change enables automatic conversion of old content to the new content format when a post/page is opened in the admin interface allowing new features like signup and advanced header cards to be used on existing content.

- removed `convertToLexical` feature flag
  - where necessary switched to using just the `lexicalEditor` feature flag in its place
- moved the "L"/"M" indicators on the posts list to a new `lexicalIndicators` feature flag to make debugging/development easier
- added a redirect to the original editor route so that any route to opening the editor (such as the `/edit` front-end shortcut, or other areas of Admin) will open in the beta editor
  - avoids confusing/inconsistent behavior
This commit is contained in:
Kevin Ansfield 2023-08-30 16:54:03 +01:00 committed by GitHub
parent 62172fb883
commit 5f5ad4d5dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 23 additions and 25 deletions

View File

@ -43,10 +43,6 @@ const features = [{
title: 'Mail Events',
description: 'Enables processing of mail events',
flag: 'mailEvents'
},{
title: 'Convert to Lexical',
description: 'Convert mobiledoc posts to lexical upon opening in the editor.',
flag: 'convertToLexical'
},{
title: 'Import Member Tier',
description: 'Enables tier to be specified when importing members',

View File

@ -45,7 +45,7 @@
{{/unless}}
</a>
{{else}}
<LinkTo @route={{this.editorRoute}} @models={{array this.post.displayName this.post.id}} class="permalink gh-list-data gh-post-list-title">
<LinkTo @route="editor.edit" @models={{array this.post.displayName this.post.id}} class="permalink gh-list-data gh-post-list-title">
<h3 class="gh-content-entry-title">
{{#if @post.featured}}
{{svg-jar "star-fill" class="gh-featured-post"}}
@ -53,15 +53,14 @@
{{@post.title}}
{{! Display lexical/mobiledoc indicators for easier testing of the feature --}}
{{#if (feature 'convertToLexical')}}
{{#if (feature 'lexicalIndicators')}}
{{#if @post.lexical}}
<span class="gh-lexical-indicator">L</span>
{{/if}}
{{#if @post.mobiledoc}}
{{else if @post.mobiledoc}}
<span class="gh-lexical-indicator">M</span>
{{/if}}
{{/if}}
</h3>
{{#unless @hideAuthor }}
<p class="gh-content-entry-meta">

View File

@ -11,8 +11,6 @@ export default class PostsListItemClicks extends Component {
@tracked isHovered = false;
editorRoute = this.feature.get('convertToLexical') ? 'lexical-editor.edit' : 'editor.edit';
get post() {
return this.args.post;
}

View File

@ -10,6 +10,14 @@ export default AuthenticatedRoute.extend({
classNames: ['editor'],
beforeModel(transition) {
// redirect to the beta editor so the post gets auto-migrated
if (this.feature.lexicalEditor) {
const {type, post_id: id} = transition.to.params;
return this.router.transitionTo('lexical-editor.edit', type, id);
}
},
activate() {
this._super(...arguments);
this.ui.set('isFullScreen', true);

View File

@ -32,10 +32,10 @@ export default class EditRoute extends AuthenticatedRoute {
const records = await this.store.query(modelName, query);
let post = records.firstObject;
// CASE: Post is in mobiledoc — convert to lexical or redirect
if (post.mobiledoc) {
if (this.feature.get('convertToLexical') && this.feature.get('lexicalEditor')) {
if (this.feature.get('lexicalEditor')) {
post = await post.save({adapterOptions: {convertToLexical: 1}});
} else {
return this.replaceWith('editor.edit', post);

View File

@ -77,8 +77,8 @@ export default class FeatureService extends Service {
@feature('collectionsCard') collectionsCard;
@feature('importMemberTier') importMemberTier;
@feature('tipsAndDonations') tipsAndDonations;
@feature('convertToLexical') convertToLexical;
@feature('recommendations') recommendations;
@feature('lexicalIndicators') lexicalIndicators;
_user = null;

View File

@ -100,9 +100,6 @@
<div class="gh-editor-wordcount">
{{gh-pluralize this.wordCount "word"}}
</div>
{{#if (feature 'convertToLexical')}}
<a href="https://github.com/TryGhost/Koenig/tree/main/packages/koenig-lexical" target="_blank" rel="noopener noreferrer" class="gh-lexical-indicator">Lexical</a>
{{/if}}
<a href="https://ghost.org/help/using-the-editor/" class="flex" target="_blank" rel="noopener noreferrer">{{svg-jar "help"}}</a>
</div>

View File

@ -328,13 +328,13 @@
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Convert to Lexical</h4>
<h4 class="gh-expandable-title">Lexical indicators</h4>
<p class="gh-expandable-description">
Convert mobiledoc posts to lexical upon opening in the editor.
Show L/M indicator on posts list for easier debugging
</p>
</div>
<div class="for-switch">
<GhFeatureFlag @flag="convertToLexical" />
<GhFeatureFlag @flag="lexicalIndicators" />
</div>
</div>
</div>

View File

@ -70,7 +70,7 @@ describe('Acceptance: Lexical editor', function () {
expect(currentURL()).to.equal(`/editor-beta/post/${post.id}`);
});
it('redirects lexical editor to mobiledoc editor when post.mobiledoc is present', async function () {
it('does not redirect to mobiledoc editor when post.mobiledoc is present', async function () {
const post = this.server.create('post', {
mobiledoc: JSON.stringify(BLANK_DOC)
});
@ -78,6 +78,6 @@ describe('Acceptance: Lexical editor', function () {
await loginAsRole('Administrator', this.server);
await visit(`/editor-beta/post/${post.id}`);
expect(currentURL()).to.equal(`/editor/post/${post.id}`);
expect(currentURL()).to.equal(`/editor-beta/post/${post.id}`);
});
});

View File

@ -916,7 +916,7 @@ Post = ghostBookshelf.Model.extend({
}
// CASE: Convert post to lexical on the fly
if (labs.isSet('convertToLexical') && labs.isSet('lexicalEditor') && options.convert_to_lexical) {
if (labs.isSet('lexicalEditor') && options.convert_to_lexical) {
ops.push(async function convertToLexical() {
const mobiledoc = model.get('mobiledoc');
const lexical = mobiledocToLexical(mobiledoc);

View File

@ -42,8 +42,8 @@ const ALPHA_FEATURES = [
'collectionsCard',
'tipsAndDonations',
'importMemberTier',
'convertToLexical',
'recommendations'
'recommendations',
'lexicalIndicators'
];
module.exports.GA_KEYS = [...GA_FEATURES];