Merge remote-tracking branch 'origin/master' into support/use-turborepo

apps/app/next.config.js

@@ -16,7 +16,7 @@ const getTranspilePackages = () => {
 
   const packages = [
     // listing ESM packages until experimental.esmExternals works correctly to avoid ERR_REQUIRE_ESM
-    'react-markdown-customkeyprop',
+    'react-markdown',
     'unified',
     'markdown-table',
     'character-entities-html4',

apps/app/package.json

@@ -158,7 +158,7 @@
     "react-error-boundary": "^3.1.4",
     "react-i18next": "^12.2.0",
     "react-image-crop": "^8.3.0",
-    "react-markdown-customkeyprop": "^8.0.6-customkeyprop.0",
+    "react-markdown": "^8.0.7",
     "react-multiline-clamp": "^2.0.0",
     "react-scroll": "^1.8.7",
     "react-syntax-highlighter": "^15.5.0",

apps/app/src/components/Page/RevisionRenderer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
-import ReactMarkdown from 'react-markdown-customkeyprop';
+import ReactMarkdown from 'react-markdown';
 
 import type { RendererOptions } from '~/interfaces/renderer-options';
 import loggerFactory from '~/utils/logger';

apps/app/src/components/PagePresentationModal.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import type { PresentationProps } from '@growi/presentation';
 import { useFullScreen } from '@growi/ui/dist/utils';
 import dynamic from 'next/dynamic';
-import type { ReactMarkdownOptions } from 'react-markdown-customkeyprop/lib/react-markdown';
+import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
 import {
   Modal, ModalBody,
 } from 'reactstrap';

apps/app/src/components/ReactMarkdownComponents/CodeBlock.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-import type { CodeComponent } from 'react-markdown-customkeyprop/lib/ast-to-react';
+import type { CodeComponent } from 'react-markdown/lib/ast-to-react';
 import { PrismAsyncLight } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 

apps/app/src/components/ReactMarkdownComponents/Header.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import EventEmitter from 'events';
 
 import { useRouter } from 'next/router';
-import { Element } from 'react-markdown-customkeyprop/lib/rehype-filter';
+import { Element } from 'react-markdown/lib/rehype-filter';
 
 import { useIsGuestUser, useIsSharedUser, useShareLinkId } from '~/stores/context';
 import loggerFactory from '~/utils/logger';

apps/app/src/components/ReactMarkdownComponents/TableWithEditButton.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 
 import EventEmitter from 'events';
 
-import { Element } from 'react-markdown-customkeyprop/lib/rehype-filter';
+import { Element } from 'react-markdown/lib/rehype-filter';
 
 import { useIsGuestUser, useIsSharedUser, useShareLinkId } from '~/stores/context';
 

apps/app/src/components/TableOfContents.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 
 import { pagePathUtils } from '@growi/core';
-import ReactMarkdown from 'react-markdown-customkeyprop';
+import ReactMarkdown from 'react-markdown';
 
 import { useCurrentPagePath } from '~/stores/page';
 import { useTocOptions } from '~/stores/renderer';

apps/app/src/interfaces/renderer-options.ts

@@ -1,8 +1,8 @@
 import type { ComponentType } from 'react';
 
-import type { SpecialComponents } from 'react-markdown-customkeyprop/lib/ast-to-react';
-import type { NormalComponents } from 'react-markdown-customkeyprop/lib/complex-types';
-import type { ReactMarkdownOptions } from 'react-markdown-customkeyprop/lib/react-markdown';
+import type { SpecialComponents } from 'react-markdown/lib/ast-to-react';
+import type { NormalComponents } from 'react-markdown/lib/complex-types';
+import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
 import type { PluggableList } from 'unified';
 
 export type RendererOptions = Omit<ReactMarkdownOptions, 'remarkPlugins' | 'rehypePlugins' | 'components' | 'children'> & {

apps/app/test/cypress/integration/20-basic-features/20-basic-features--access-to-page.spec.ts

@@ -209,7 +209,48 @@ context('Access to special pages', () => {
 
 context('Access to Template Editing Mode', () => {
   const ssPrefix = 'access-to-template-page-';
-  const templateBody = 'Template for children';
+  const templateBody1 = 'Template for children';
+  const templateBody2 = 'Template for descendants';
+
+  const createPageFromPageTreeTest = (newPagePath: string, parentPagePath: string, expectedBody: string) => {
+    cy.visit('/');
+    cy.waitUntilSkeletonDisappear();
+
+    // Open sidebar
+    cy.collapseSidebar(false);
+    cy.getByTestid('grw-contextual-navigation-sub').should('be.visible');
+    cy.waitUntilSkeletonDisappear();
+
+    // If PageTree is not active when the sidebar is opened, make it active
+    cy.getByTestid('grw-sidebar-nav-primary-page-tree').should('be.visible')
+      .then($elem => {
+        if (!$elem.hasClass('active')) {
+          cy.getByTestid('grw-sidebar-nav-primary-page-tree').click();
+        }
+      });
+
+    // Create page (/{parentPath}}/{newPagePath}) from PageTree
+    cy.getByTestid('grw-contextual-navigation-sub').within(() => {
+      cy.get('.grw-pagetree-item-children').first().as('pagetreeItem').within(() => {
+        cy.get('#page-create-button-in-page-tree').first().click({force: true})
+      });
+    });
+    cy.get('@pagetreeItem').within(() => {
+      cy.getByTestid('closable-text-input').type(newPagePath).type('{enter}');
+    })
+
+    cy.visit(`/${parentPagePath}/${newPagePath}`);
+    cy.waitUntilSkeletonDisappear();
+    cy.collapseSidebar(true);
+
+    // Check if the template is applied
+    cy.get('.content-main').within(() => {
+      cy.get('.wiki').should('be.visible');
+      cy.get('.wiki').children().first().should('have.text', expectedBody);
+    })
+
+    cy.screenshot(`${ssPrefix}-page(${newPagePath})-to-which-template-is-applied`)
+  }
 
   beforeEach(() => {
     // login
@@ -218,7 +259,7 @@ context('Access to Template Editing Mode', () => {
     });
   });
 
-  it("Successfully created a template page by accessing the editor mode for children's templates", () => {
+  it("Successfully created template for children", () => {
     cy.visit('/Sandbox');
     cy.waitUntilSkeletonDisappear();
 
@@ -238,15 +279,19 @@ context('Access to Template Editing Mode', () => {
       cy.screenshot(`${ssPrefix}-open-template-page-for-children-in-editor-mode`);
     });
 
-    cy.get('.CodeMirror').type(templateBody);
-    cy.get('.CodeMirror').contains(templateBody);
-    cy.get('.page-editor-preview-body').contains(templateBody);
+    cy.get('.CodeMirror').type(templateBody1);
+    cy.get('.CodeMirror').contains(templateBody1);
+    cy.get('.page-editor-preview-body').contains(templateBody1);
     cy.getByTestid('page-editor').should('be.visible');
     cy.getByTestid('save-page-btn').click();
   });
 
-  it('Successfully accessed the editor mode for the descendant template page', () => {
-    cy.visit('/Sandbox/Bootstrap4');
+  it('Template is applied to pages created from PageTree (template for children 1)', () => {
+    createPageFromPageTreeTest('template-test-page1', '/Sandbox' ,templateBody1);
+  });
+
+  it('Successfully created template for descendants', () => {
+    cy.visit('/Sandbox');
     cy.waitUntilSkeletonDisappear();
 
     cy.get('#grw-subnav-container').within(() => {
@@ -262,48 +307,34 @@ context('Access to Template Editing Mode', () => {
     cy.getByTestid('navbar-editor').should('be.visible').then(()=>{
       cy.url().should('include', '/__template#edit');
       cy.screenshot(`${ssPrefix}-open-template-page-for-descendants-in-editor-mode`);
-    });
-  });
-
-  it('Templates are applied to pages created from the PageTree', () => {
-    cy.visit('/');
-    cy.waitUntilSkeletonDisappear();
+    })
 
-    // Open sidebar
-    cy.collapseSidebar(false);
-    cy.getByTestid('grw-contextual-navigation-sub').should('be.visible');
-    cy.waitUntilSkeletonDisappear();
+    cy.get('.CodeMirror').type(templateBody2);
+    cy.get('.CodeMirror').contains(templateBody2);
+    cy.get('.page-editor-preview-body').contains(templateBody2);
+    cy.getByTestid('page-editor').should('be.visible');
+    cy.getByTestid('save-page-btn').click();
+  });
 
-    // If PageTree is not active when the sidebar is opened, make it active
-    cy.getByTestid('grw-sidebar-nav-primary-page-tree').should('be.visible')
-      .then($elem => {
-        if (!$elem.hasClass('active')) {
-          cy.getByTestid('grw-sidebar-nav-primary-page-tree').click();
-        }
-      });
+  it('Template is applied to pages created from PageTree (template for children 2)', () => {
+    createPageFromPageTreeTest('template-test-page2','Sandbox',templateBody1);
+  });
 
-    // Create page (/Sandbox/template-test-page) from PageTree
-    cy.getByTestid('grw-contextual-navigation-sub').within(() => {
-      cy.get('.grw-pagetree-item-children').first().as('pagetreeItem').within(() => {
-        cy.get('#page-create-button-in-page-tree').first().click({force: true})
-      });
+  it('Template is applied to pages created from PageTree (template for descendants)', () => {
+    // delete /Sandbox/_template
+    cy.visit('/Sandbox/_template');
+    cy.get('#grw-subnav-container').within(() => {
+      cy.getByTestid('open-page-item-control-btn').click({force: true});
+      cy.getByTestid('open-page-delete-modal-btn').click({force: true});
+    });
+    cy.getByTestid('page-delete-modal').should('be.visible').within(() => {
+      cy.intercept('POST', '/_api/pages.remove').as('remove');
+      cy.getByTestid('delete-page-button').click();
+      cy.wait('@remove')
     });
-    cy.get('@pagetreeItem').within(() => {
-      cy.getByTestid('closable-text-input').type('template-test-page').type('{enter}');
-    })
-
-    cy.visit('/Sandbox/template-test-page');
-    cy.waitUntilSkeletonDisappear();
-    cy.collapseSidebar(true);
-
-    // Check if the template is applied
-    cy.get('.content-main').within(() => {
-      cy.get('.wiki').should('be.visible');
-      cy.get('.wiki').children().first().should('have.text', templateBody);
-    })
 
-    cy.screenshot(`${ssPrefix}-page-to-which-template-is-applied`)
-  });
+    createPageFromPageTreeTest('template-test-page3','Sandbox',`${templateBody1}\n${templateBody2}`);
+  })
 });
 
 context('Access to /me/all-in-app-notifications', () => {

packages/presentation/package.json

@@ -31,6 +31,6 @@
     "next": "~12.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-markdown-customkeyprop": "^8.0.6-customkeyprop.0"
+    "react-markdown": "^8.0.7"
   }
 }

packages/presentation/src/components/Slides.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Marp } from '@marp-team/marp-core';
 import { Element } from '@marp-team/marpit';
 import Head from 'next/head';
-import { ReactMarkdown } from 'react-markdown-customkeyprop/lib/react-markdown';
+import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 
 import type { PresentationOptions } from '../consts';
 import * as extractSections from '../services/renderer/extract-sections';

packages/presentation/src/consts/index.ts

@@ -1,4 +1,4 @@
-import type { ReactMarkdownOptions } from 'react-markdown-customkeyprop/lib/react-markdown';
+import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
 import type { Options as RevealOptions } from 'reveal.js';
 
 export type PresentationOptions = {

packages/presentation/vite.config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
       external: [
         'react', 'react-dom',
         'next/head',
-        'react-markdown-customkeyprop',
+        'react-markdown',
         '@marp-team/marp-core', '@marp-team/marpit',
         'reveal.js',
       ],

packages/remark-lsx/src/services/renderer/lsx.ts

@@ -46,7 +46,6 @@ export const remarkPlugin: Plugin = function() {
             }
           }
         }
-        attributes.key = `lsx-${index}`;
 
         data.hName = 'lsx';
         data.hProperties = attributes;

yarn.lock

@@ -15975,10 +15975,10 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-markdown-customkeyprop@^8.0.6-customkeyprop.0:
-  version "8.0.6-customkeyprop.0"
-  resolved "https://registry.yarnpkg.com/react-markdown-customkeyprop/-/react-markdown-customkeyprop-8.0.6-customkeyprop.0.tgz#050a05dc204745f063ac44b1174b834468cc0112"
-  integrity sha512-9L03/4rhGM9K78c9FT1AXeyk0R5esghGmVOxXcpoaZeSI+zMLJ6spP5B2URHPqVahPk+YTgQso/Ba53a6R+oaQ==
+react-markdown@^8.0.7:
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.7.tgz#c8dbd1b9ba5f1c5e7e5f2a44de465a3caafdf89b"
+  integrity sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==
   dependencies:
     "@types/hast" "^2.0.0"
     "@types/prop-types" "^15.0.0"