✨ 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

apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx

@@ -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',

ghost/admin/app/components/posts-list/list-item.hbs

@@ -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,11 +53,10 @@
                 {{@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}}

ghost/admin/app/components/posts-list/list-item.js

@@ -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;
     }

ghost/admin/app/routes/editor.js

@@ -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);

ghost/admin/app/routes/lexical-editor/edit.js

@@ -35,7 +35,7 @@ export default class EditRoute extends AuthenticatedRoute {
 
         // 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);

ghost/admin/app/services/feature.js

@@ -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;
 

ghost/admin/app/templates/lexical-editor.hbs

@@ -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>
 

ghost/admin/app/templates/settings/labs.hbs

@@ -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>

ghost/admin/tests/acceptance/editor/lexical-test.js

@@ -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}`);
     });
 });

ghost/core/core/server/models/post.js

@@ -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);

ghost/core/core/shared/labs.js

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