feat: SingleEditorMode

apps/app/config/ci/.env.local.for-auto-install

@@ -7,3 +7,5 @@ AUTO_INSTALL_ADMIN_PASSWORD=adminadmin
 AUTO_INSTALL_GLOBAL_LANG=en_US
 
 AUTO_INSTALL_SERVER_DATE=2022-01-01T00:00:00.0
+
+YJS_MAX_BODY_LENGTH=10000

apps/app/playwright/20-basic-features/access-to-page.spec.ts

@@ -1,9 +1,7 @@
-import { test, expect, type Page } from '@playwright/test';
+import { test, expect } from '@playwright/test';
+
+import { openEditor, appendTextToEditor } from '../utils';
 
-const appendTextToEditorUntilContains = async(page: Page, text: string) => {
-  await page.locator('.cm-content').fill(text);
-  await expect(page.getByTestId('page-editor-preview-body')).toContainText(text);
-};
 
 test('has title', async({ page }) => {
   await page.goto('/Sandbox');
@@ -43,8 +41,8 @@ test.describe.serial('PageEditor', () => {
   test('Edit and save with save-page-btn', async({ page }) => {
     await page.goto(targetPath);
 
-    await page.getByTestId('editor-button').click();
-    await appendTextToEditorUntilContains(page, body1);
+    await openEditor(page);
+    await appendTextToEditor(page, body1);
     await page.getByTestId('save-page-btn').click();
 
     await expect(page.locator('.wiki').first()).toContainText(body1);
@@ -55,12 +53,11 @@ test.describe.serial('PageEditor', () => {
 
     await page.goto(targetPath);
 
-    await page.getByTestId('editor-button').click();
-
+    await openEditor(page);
     await expect(page.locator('.cm-content')).toContainText(body1);
     await expect(page.getByTestId('page-editor-preview-body')).toContainText(body1);
 
-    await appendTextToEditorUntilContains(page, body1 + body2);
+    await appendTextToEditor(page, body1 + body2);
     await page.keyboard.press(savePageShortcutKey);
     await page.getByTestId('view-button').click();
 
@@ -108,7 +105,7 @@ test.describe.serial('Access to Template Editing Mode', () => {
 
     await page.getByTestId('template-button-children').click();
 
-    await appendTextToEditorUntilContains(page, templateBody1);
+    await appendTextToEditor(page, templateBody1);
     await page.getByTestId('save-page-btn').click();
 
     await expect(page.locator('.wiki').first()).toContainText(templateBody1);
@@ -133,7 +130,7 @@ test.describe.serial('Access to Template Editing Mode', () => {
 
     await page.getByTestId('template-button-descendants').click();
 
-    await appendTextToEditorUntilContains(page, templateBody2);
+    await appendTextToEditor(page, templateBody2);
     await page.getByTestId('save-page-btn').click();
 
     await expect(page.locator('.wiki').first()).toContainText(templateBody2);

apps/app/playwright/20-basic-features/comments.spec.ts

@@ -1,8 +1,10 @@
 import { test, expect } from '@playwright/test';
 
+import { openEditor } from '../utils';
+
 test('Create comment page', async({ page }) => {
   await page.goto('/comment');
-  await page.getByTestId('editor-button').click();
+  await openEditor(page);
   await page.getByTestId('save-page-btn').click();
   await expect(page.locator('.page-meta')).toBeVisible();
 });

apps/app/playwright/20-basic-features/sticky-features.spec.ts

@@ -1,5 +1,7 @@
 import { test, expect } from '@playwright/test';
 
+import { openEditor } from '../utils';
+
 test.describe('Sticky features', () => {
   test.beforeEach(async({ page }) => {
     await page.goto('/');
@@ -31,7 +33,7 @@ test.describe('Sticky features', () => {
     await expect(page.locator('.sticky-outer-wrapper').first()).toHaveClass(/active/);
 
     // Click editor button
-    await page.getByTestId('editor-button').click();
+    await openEditor(page);
     await expect(page.locator('.layout-root')).toHaveClass(/editing/);
   });
 

apps/app/playwright/23-editor/editor-mode.spec.ts

@@ -0,0 +1,70 @@
+import { test, expect } from '@playwright/test';
+
+import { openEditor, appendTextToEditor } from '../utils';
+
+test.describe.serial('Collaborative editor mode', () => {
+  const text = 'hello';
+  const path = '/Sandbox/collaborative-editor-mode';
+
+  test.beforeEach(async({ page }) => {
+    await page.goto(path);
+  });
+
+  test('Expect the previous input content to be reflected even after reloading', async({ page }) => {
+    await openEditor(page);
+
+    await appendTextToEditor(page, text);
+
+    // Return to view
+    await page.getByTestId('view-button').click();
+    await expect(page.getByTestId('page-view-layout')).toBeVisible();
+
+    // Reload
+    await page.reload();
+    await openEditor(page);
+    await expect(page.getByTestId('page-editor-preview-body')).toHaveText(text);
+  });
+
+  test('Expect Collaborative editor mode when opening pages with content length below YJS_MAX_BODY_LENGTH', async({ page }) => {
+    await openEditor(page);
+
+    // Update
+    await page.getByTestId('save-page-btn').click();
+
+    // Back to editor
+    await openEditor(page);
+
+    // Expect to be in Collaborative Editor mode
+    await expect(page.getByTestId('editing-user-list')).toBeVisible();
+    await expect(page.getByTestId('single-editor-badge')).not.toBeVisible();
+  });
+});
+
+test.describe('Single editor mode', () => {
+  const text = 'a'.repeat(10001); // YJS_MAX_BODY_LENGTH + 1
+  const path = '/Sandbox/single-editor-mode';
+
+  test.beforeEach(async({ page }) => {
+    await page.goto(path);
+  });
+
+  test('Expect Single editor mode when opening pages with content length above YJS_MAX_BODY_LENGTH', async({ page }) => {
+    await openEditor(page);
+
+    await appendTextToEditor(page, text);
+
+    // Expect to be in Collaborative Editor mode
+    await expect(page.getByTestId('editing-user-list')).toBeVisible();
+    await expect(page.getByTestId('single-editor-badge')).not.toBeVisible();
+
+    // Update
+    await page.getByTestId('save-page-btn').click();
+
+    // Back to editor
+    await openEditor(page);
+
+    // Expect to be in Single Editor mode
+    await expect(page.getByTestId('editing-user-list')).not.toBeVisible();
+    await expect(page.getByTestId('single-editor-badge')).toBeVisible();
+  });
+});

apps/app/playwright/23-editor/saving.spec.ts

@@ -1,11 +1,8 @@
 import path from 'path';
 
-import { test, expect, type Page } from '@playwright/test';
+import { test, expect } from '@playwright/test';
 
-const appendTextToEditorUntilContains = async(page: Page, text: string) => {
-  await page.locator('.cm-content').fill(text);
-  await expect(page.getByTestId('page-editor-preview-body')).toContainText(text);
-};
+import { openEditor, appendTextToEditor } from '../utils';
 
 
 test('Successfully create page under specific path', async({ page }) => {
@@ -33,17 +30,15 @@ test('Successfully updating a page using a shortcut on a previously created page
   await page.goto('/Sandbox/child');
 
   // 1st
-  await page.getByTestId('editor-button').click();
-  await expect(page.getByTestId('grw-editor-navbar-bottom')).toBeVisible();
-  await appendTextToEditorUntilContains(page, body1);
+  await openEditor(page);
+  await appendTextToEditor(page, body1);
   await page.keyboard.press(savePageShortcutKey);
   await page.getByTestId('view-button').click();
   await expect(page.locator('.main')).toContainText(body1);
 
   // 2nd
-  await page.getByTestId('editor-button').click();
-  await expect(page.getByTestId('grw-editor-navbar-bottom')).toBeVisible();
-  await appendTextToEditorUntilContains(page, body1 + body2);
+  await openEditor(page);
+  await appendTextToEditor(page, body1 + body2);
   await page.keyboard.press(savePageShortcutKey);
   await page.getByTestId('view-button').click();
   await expect(page.locator('.main')).toContainText(body1 + body2);

apps/app/playwright/23-editor/template-modal.spec.ts

@@ -1,13 +1,13 @@
 import { test, expect } from '@playwright/test';
 
+import { openEditor } from '../utils';
+
 test('Successfully select template and template locale', async({ page }) => {
   const jaText = '今日の目標';
   const enText = "TODAY'S GOALS";
   await page.goto('/Sandbox/TemplateModal');
 
-  // move to edit mode
-  await page.getByTestId('editor-button').click();
-  await expect(page.getByTestId('grw-editor-navbar-bottom')).toBeVisible();
+  await openEditor(page);
 
   // open TemplateModal
   const templateModal = page.getByTestId('template-modal');

apps/app/playwright/23-editor/with-navigation.spec.ts

@@ -1,7 +1,9 @@
 import { readFileSync } from 'fs';
 import path from 'path';
 
-import { test, expect, type Page } from '@playwright/test';
+import { test, expect } from '@playwright/test';
+
+import { openEditor, appendTextToEditor } from '../utils';
 
 /**
  * for the issues:
@@ -12,8 +14,7 @@ test('should not be cleared and should prevent GrantSelector from modified', asy
   await page.goto('/Sandbox/for-122040');
 
   // Open Editor
-  await page.getByTestId('editor-button').click();
-  await expect(page.getByTestId('grw-editor-navbar-bottom')).toBeVisible();
+  await openEditor(page);
 
   // Open GrantSelector and select "only me"
   await page.getByTestId('grw-grant-selector').click();
@@ -53,11 +54,6 @@ test('should not be cleared and should prevent GrantSelector from modified', asy
   await expect(page.getByTestId('page-grant-alert')).toContainText('Browsing of this page is restricted');
 });
 
-const appendTextToEditorUntilContains = async(page: Page, text: string) => {
-  await page.locator('.cm-content').fill(text);
-  await expect(page.getByTestId('page-editor-preview-body')).toContainText(text);
-};
-
 /**
  * for the issue:
  * @see https://redmine.weseek.co.jp/issues/115285
@@ -73,11 +69,10 @@ test('Successfully updating the page body', async({ page }) => {
   await page.goto(page1Path);
 
   // Open Editor (page1)
-  await page.getByTestId('editor-button').click();
-  await expect(page.getByTestId('grw-editor-navbar-bottom')).toBeVisible();
+  await openEditor(page);
 
   // Append text
-  await appendTextToEditorUntilContains(page, page1Body);
+  await appendTextToEditor(page, page1Body);
 
   // Save page
   await page.getByTestId('save-page-btn').click();
@@ -92,21 +87,19 @@ test('Successfully updating the page body', async({ page }) => {
   await page.getByTestId('btn-duplicate').click();
 
   // Open Editor (page2)
-  await page.getByTestId('editor-button').click();
-  await expect(page.getByTestId('grw-editor-navbar-bottom')).toBeVisible();
+  await openEditor(page);
 
   // Expect to see the text from which you are duplicating
   await expect(page.getByTestId('page-editor-preview-body')).toContainText(page1Body);
 
   // Append text
-  await appendTextToEditorUntilContains(page, page1Body + page2Body);
+  await appendTextToEditor(page, page1Body + page2Body);
 
 
   await page.goto(page1Path);
 
   // Open Editor (page1)
-  await page.getByTestId('editor-button').click();
-  await expect(page.getByTestId('grw-editor-navbar-bottom')).toBeVisible();
+  await openEditor(page);
 
   await expect(page.getByTestId('page-editor-preview-body')).toContainText(page1Body);
 

apps/app/playwright/utils/AppendTextToEditor.ts

@@ -0,0 +1,6 @@
+import { expect, type Page } from '@playwright/test';
+
+export const appendTextToEditor = async(page: Page, text: string): Promise<void> => {
+  await page.locator('.cm-content').fill(text);
+  await expect(page.getByTestId('page-editor-preview-body')).toHaveText(text);
+};

apps/app/playwright/utils/OpenEditor.ts

@@ -0,0 +1,8 @@
+import { expect, type Page } from '@playwright/test';
+
+export const openEditor = async(page: Page): Promise<void> => {
+  await expect(page.getByTestId('page-view-layout')).toBeVisible();
+  await page.getByTestId('editor-button').click();
+  await expect(page.getByTestId('grw-editor-navbar-bottom')).toBeVisible();
+  await expect(page.locator('.cm-editor')).toBeVisible();
+};

apps/app/playwright/utils/index.ts

@@ -1,2 +1,4 @@
 export * from './CollapseSidebar';
 export * from './Login';
+export * from './OpenEditor';
+export * from './AppendTextToEditor';

apps/app/public/static/locales/en_US/translation.json

@@ -160,6 +160,7 @@
   "not_allowed_to_see_this_page": "You cannot see this page",
   "Confirm": "Confirm",
   "Successfully requested": "Successfully requested.",
+  "single-editor-mode-alert": "The collaborative editor is disabled because this page's content exceeds {{yjsMaxBodyLength}} characters. To enable it, reduce the content to within the threshold, save the page, and reopen the editor.",
   "input_validation": {
     "target": {
       "page_name": "Page name",

apps/app/public/static/locales/fr_FR/translation.json

@@ -160,6 +160,8 @@
   "not_allowed_to_see_this_page": "Vous ne pouvez pas voir cette page",
   "Confirm": "Confirmer",
   "Successfully requested": "Demande envoyée.",
+  "single-editor-mode-alert": "L'éditeur collaboratif est désactivé car le contenu de cette page dépasse les caractères {{yjsMaxBodyLength}}. Pour l'activer, réduisez le contenu en deçà du seuil, enregistrez la page et ouvrez à nouveau l'éditeur.",
+
   "input_validation": {
     "target": {
       "page_name": "Nom de la page",

apps/app/public/static/locales/ja_JP/translation.json

@@ -161,6 +161,7 @@
   "not_allowed_to_see_this_page": "このページは閲覧できません",
   "Confirm": "確認",
   "Successfully requested": "正常に処理を受け付けました",
+  "single-editor-mode-alert": "このページの本文は {{yjsMaxBodyLength}} 文字を超えているため、同時多人数編集は無効化されます。有効にするにはページ本文の文字数が閾値以下になるようにして保存し、再度エディターを開いてください。",
   "input_validation": {
     "target": {
       "page_name": "ページ名",

apps/app/public/static/locales/zh_CN/translation.json

@@ -167,6 +167,8 @@
   "Confirm": "确定",
   "Successfully requested": "进程成功接受",
   "copied_to_clipboard": "它已复制到剪贴板。",
+  "single-editor-mode-alert": "由于此页面内容超过 {{yjsMaxBodyLength}} 字符数，协作编辑器已禁用。要启用协同编辑器，请将内容减少到阈值以内，保存页面并重新打开编辑器。",
+
   "input_validation": {
     "target": {
       "page_name": "页面名称",

apps/app/src/client/components/PageEditor/EditorNavbar/EditorNavbar.tsx

@@ -1,5 +1,7 @@
+import { useMemo } from 'react';
 
 import { PageHeader } from '~/client/components/PageHeader';
+import { useIsYjsEnabled } from '~/client/services/yjs';
 import { useEditingUsers } from '~/stores/use-editing-users';
 
 import { EditingUserList } from './EditingUserList';
@@ -10,13 +12,37 @@ const moduleClass = styles['editor-navbar'] ?? '';
 
 export const EditorNavbar = (): JSX.Element => {
   const { data: editingUsers } = useEditingUsers();
+  const isYjsEnabled = useIsYjsEnabled();
+
+  const editorCondition = useMemo(() => {
+    if (isYjsEnabled) {
+      return (
+        <div data-testid="editing-user-list">
+          <EditingUserList userList={editingUsers?.userList ?? []} />
+        </div>
+      );
+    }
+
+    if (isYjsEnabled === false) {
+      return (
+        <div data-testid="single-editor-badge" className="text-warning bg-warning-subtle rounded-1 px-1">
+          <div className="d-flex align-items-center justify-content-center">
+            <span className="material-symbols-outlined fs-6 me-1">error</span>SINGLE
+          </div>
+        </div>
+      );
+    }
+
+    return <></>;
+  }, [editingUsers?.userList, isYjsEnabled]);
 
   return (
     <div className={`${moduleClass} d-flex flex-column flex-sm-row justify-content-between ps-3 ps-md-5 ps-xl-4 pe-4 py-1 align-items-sm-end`}>
-      <div className="order-2 order-sm-1"><PageHeader /></div>
-      <div className="order-1 order-sm-2"><EditingUserList
-        userList={editingUsers?.userList ?? []}
-      />
+      <div className="order-2 order-sm-1">
+        <PageHeader />
+      </div>
+      <div className="order-1 order-sm-2">
+        {editorCondition}
       </div>
     </div>
   );