Merge pull request #8897 from weseek/imprv/ssr-performance-wip

imprv: Importing @growi/editor modules

apps/app/src/components/PageComment/CommentEditor.tsx

@@ -5,9 +5,9 @@ import React, {
 } from 'react';
 
 import { GlobalCodeMirrorEditorKey } from '@growi/editor';
-import {
-  CodeMirrorEditorComment, useCodeMirrorEditorIsolated, useResolvedThemeForEditor,
-} from '@growi/editor/dist/client';
+import { CodeMirrorEditorComment } from '@growi/editor/dist/client/components/CodeMirrorEditorComment';
+import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client/stores/codemirror-editor';
+import { useResolvedThemeForEditor } from '@growi/editor/dist/client/stores/use-resolved-theme';
 import { UserPicture } from '@growi/ui/dist/components';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
@@ -15,6 +15,7 @@ import {
   TabContent, TabPane,
 } from 'reactstrap';
 
+
 import { uploadAttachments } from '~/client/services/upload-attachments';
 import { toastError } from '~/client/util/toastr';
 import { useNextThemes } from '~/stores-universal/use-next-themes';

apps/app/src/components/PageEditor/ConflictDiffModal.tsx

@@ -4,9 +4,9 @@ import React, {
 
 import type { IUser } from '@growi/core';
 import { GlobalCodeMirrorEditorKey } from '@growi/editor';
-import {
-  MergeViewer, CodeMirrorEditorDiff, useCodeMirrorEditorIsolated,
-} from '@growi/editor/dist/client';
+import { CodeMirrorEditorDiff } from '@growi/editor/dist/client/components/diff/CodeMirrorEditorDiff';
+import { MergeViewer } from '@growi/editor/dist/client/components/diff/MergeViewer';
+import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client/stores/codemirror-editor';
 import { UserPicture } from '@growi/ui/dist/components';
 import { format } from 'date-fns/format';
 import { useTranslation } from 'next-i18next';

apps/app/src/components/PageEditor/DrawioModal.tsx

@@ -4,8 +4,9 @@ import React, {
   useMemo,
 } from 'react';
 
-import type { Lang } from '@growi/core';
-import { useCodeMirrorEditorIsolated, useDrawioModalForEditor } from '@growi/editor/dist/client';
+import { Lang } from '@growi/core';
+import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client/stores/codemirror-editor';
+import { useDrawioModalForEditor } from '@growi/editor/dist/client/stores/use-drawio';
 import { LoadingSpinner } from '@growi/ui/dist/components';
 import {
   Modal,
@@ -26,12 +27,13 @@ const logger = loggerFactory('growi:components:DrawioModal');
 
 // https://docs.google.com/spreadsheets/d/1FoYdyEraEQuWofzbYCDPKN7EdKgS_2ZrsDrOA8scgwQ
 const DIAGRAMS_NET_LANG_MAP = {
+  en_US: 'en',
   ja_JP: 'ja',
   zh_CN: 'zh',
   fr_FR: 'fr',
 };
 
-export const getDiagramsNetLangCode = (lang: Lang) => {
+export const getDiagramsNetLangCode = (lang: Lang): string => {
   return DIAGRAMS_NET_LANG_MAP[lang];
 };
 
@@ -88,7 +90,7 @@ export const DrawioModal = (): JSX.Element => {
     // refs: https://desk.draw.io/support/solutions/articles/16000042546-what-url-parameters-are-supported-
     url.searchParams.append('spin', '1');
     url.searchParams.append('embed', '1');
-    url.searchParams.append('lang', getDiagramsNetLangCode(personalSettingsInfo?.lang || 'en'));
+    url.searchParams.append('lang', getDiagramsNetLangCode(personalSettingsInfo?.lang ?? Lang.en_US));
     url.searchParams.append('ui', 'atlas');
     url.searchParams.append('configure', '1');
 

apps/app/src/components/PageEditor/HandsontableModal.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { MarkdownTable } from '@growi/editor';
-import { useHandsontableModalForEditor } from '@growi/editor/dist/client';
+import { useHandsontableModalForEditor } from '@growi/editor/dist/client/stores/use-handsontable';
 import { HotTable } from '@handsontable/react';
 import type Handsontable from 'handsontable';
 import { useTranslation } from 'next-i18next';
@@ -11,6 +11,7 @@ import {
 } from 'reactstrap';
 import { debounce } from 'throttle-debounce';
 
+
 import { replaceFocusedMarkdownTableWithEditor, getMarkdownTable } from '~/components/PageEditor/markdown-table-util-for-editor';
 import { useHandsontableModal } from '~/stores/modal';
 

apps/app/src/components/PageEditor/LinkEditModal.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 import path from 'path';
 
 import { Linker } from '@growi/editor';
-import { useLinkEditModal } from '@growi/editor/dist/client';
+import { useLinkEditModal } from '@growi/editor/dist/client/stores/use-link-edit-modal';
 import { useTranslation } from 'next-i18next';
 import {
   Modal,

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

@@ -10,10 +10,9 @@ import nodePath from 'path';
 import { type IPageHasId, Origin } from '@growi/core';
 import { pathUtils } from '@growi/core/dist/utils';
 import { GlobalCodeMirrorEditorKey } from '@growi/editor';
-import {
-  CodeMirrorEditorMain,
-  useCodeMirrorEditorIsolated, useResolvedThemeForEditor,
-} from '@growi/editor/dist/client';
+import { CodeMirrorEditorMain } from '@growi/editor/dist/client/components/CodeMirrorEditorMain';
+import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client/stores/codemirror-editor';
+import { useResolvedThemeForEditor } from '@growi/editor/dist/client/stores/use-resolved-theme';
 import { useRect } from '@growi/ui/dist/utils';
 import detectIndent from 'detect-indent';
 import { useTranslation } from 'next-i18next';

apps/app/src/components/PageEditor/PageEditorReadOnly.tsx

@@ -1,7 +1,7 @@
 import react, { useMemo, useRef } from 'react';
 
 import { GlobalCodeMirrorEditorKey } from '@growi/editor';
-import { CodeMirrorEditorReadOnly } from '@growi/editor/dist/client';
+import { CodeMirrorEditorReadOnly } from '@growi/editor/dist/client/components/CodeMirrorEditorReadOnly';
 import { throttle } from 'throttle-debounce';
 
 import { useShouldExpandContent } from '~/client/services/layout';

apps/app/src/components/PageEditor/ScrollSyncHelper.tsx

@@ -1,7 +1,7 @@
 import { useCallback, type RefObject, useRef } from 'react';
 
 import type { GlobalCodeMirrorEditorKey } from '@growi/editor';
-import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client';
+import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client/stores/codemirror-editor';
 
 let defaultTop = 0;
 const padding = 5;

apps/app/src/components/PageEditor/conflict.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect } from 'react';
 import { Origin } from '@growi/core';
 import { useGlobalSocket } from '@growi/core/dist/swr';
 import { GlobalCodeMirrorEditorKey } from '@growi/editor';
-import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client';
+import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client/stores/codemirror-editor';
 import { useTranslation } from 'react-i18next';
 
 import { useUpdateStateAfterSave } from '~/client/services/page-operation';

apps/app/src/components/TemplateModal/TemplateModal.tsx

@@ -5,7 +5,7 @@ import React, {
 import assert from 'assert';
 
 import type { Lang } from '@growi/core';
-import { useTemplateModal, type TemplateModalStatus } from '@growi/editor/dist/client';
+import { useTemplateModal, type TemplateModalStatus } from '@growi/editor/dist/client/stores/use-template-modal';
 import {
   extractSupportedLocales, getLocalizedTemplate, type TemplateSummary,
 } from '@growi/pluginkit/dist/v4';

packages/editor/src/client/components/CodeMirrorEditor/CodeMirrorEditor.tsx → packages/editor/src/client/components-internal/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -15,7 +15,9 @@ import {
   useFileDropzone, FileDropzoneOverlay,
   adjustPasteData, getStrFromBol, useShowTableIcon,
 } from '../../services-internal';
-import { useDefaultExtensions, useCodeMirrorEditorIsolated, useEditorSettings } from '../../stores';
+import { useCodeMirrorEditorIsolated } from '../../stores/codemirror-editor';
+import { useDefaultExtensions } from '../../stores/use-default-extensions';
+import { useEditorSettings } from '../../stores/use-editor-settings';
 
 import { Toolbar } from './Toolbar';
 

packages/editor/src/client/components/CodeMirrorEditor/Toolbar/EmojiButton.tsx → packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/EmojiButton.tsx

@@ -7,9 +7,9 @@ import { Picker } from 'emoji-mart';
 import i18n from 'i18next';
 import { Modal } from 'reactstrap';
 
-import { useCodeMirrorEditorIsolated, useResolvedThemeForEditor } from '../../../stores';
-
 import 'emoji-mart/css/emoji-mart.css';
+import { useCodeMirrorEditorIsolated } from '../../../stores/codemirror-editor';
+import { useResolvedThemeForEditor } from '../../../stores/use-resolved-theme';
 
 type Props = {
   editorKey: string,

packages/editor/src/client/components/CodeMirrorEditor/Toolbar/LinkEditButton.tsx → packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/LinkEditButton.tsx

@@ -4,9 +4,10 @@ import { DropdownItem } from 'reactstrap';
 
 import type { GlobalCodeMirrorEditorKey } from '../../../../consts';
 import { getMarkdownLink, replaceFocusedMarkdownLinkWithEditor } from '../../../services-internal';
-import { useCodeMirrorEditorIsolated } from '../../../stores';
+import { useCodeMirrorEditorIsolated } from '../../../stores/codemirror-editor';
 import { useLinkEditModal } from '../../../stores/use-link-edit-modal';
 
+
 type Props = {
   editorKey: string | GlobalCodeMirrorEditorKey,
 }

packages/editor/src/client/components/CodeMirrorEditor/Toolbar/TableButton.tsx → packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/TableButton.tsx

@@ -1,8 +1,9 @@
 import { useCallback } from 'react';
 
-import { useCodeMirrorEditorIsolated } from '../../../stores';
+import { useCodeMirrorEditorIsolated } from '../../../stores/codemirror-editor';
 import { useHandsontableModalForEditor } from '../../../stores/use-handsontable';
 
+
 type Props = {
   editorKey: string,
 }

packages/editor/src/client/components/CodeMirrorEditor/Toolbar/TemplateButton.tsx → packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/TemplateButton.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { useCodeMirrorEditorIsolated } from '../../../stores';
+import { useCodeMirrorEditorIsolated } from '../../../stores/codemirror-editor';
 import { useTemplateModal } from '../../../stores/use-template-modal';
 
 type Props = {

packages/editor/src/client/components/CodeMirrorEditor/Toolbar/TextFormatTools.tsx → packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/TextFormatTools.tsx

@@ -3,7 +3,7 @@ import { useCallback, useState } from 'react';
 import { Collapse } from 'reactstrap';
 
 import type { GlobalCodeMirrorEditorKey } from '../../../../consts';
-import { useCodeMirrorEditorIsolated } from '../../../stores';
+import { useCodeMirrorEditorIsolated } from '../../../stores/codemirror-editor';
 
 import styles from './TextFormatTools.module.scss';
 

packages/editor/src/client/components/playground/Playground.tsx → packages/editor/src/client/components-internal/playground/Playground.tsx

@@ -7,8 +7,8 @@ import { toast } from 'react-toastify';
 
 import { GlobalCodeMirrorEditorKey } from '../../../consts';
 import type { EditorSettings, EditorTheme, KeyMapMode } from '../../../consts';
-import { useCodeMirrorEditorIsolated } from '../../stores';
-import { CodeMirrorEditorMain } from '../CodeMirrorEditorMain';
+import { CodeMirrorEditorMain } from '../../components/CodeMirrorEditorMain';
+import { useCodeMirrorEditorIsolated } from '../../stores/codemirror-editor';
 
 import { PlaygroundController } from './PlaygroundController';
 import { Preview } from './Preview';

packages/editor/src/client/components/playground/PlaygroundController.tsx → packages/editor/src/client/components-internal/playground/PlaygroundController.tsx

@@ -7,7 +7,7 @@ import {
   GlobalCodeMirrorEditorKey,
   AllEditorTheme, AllKeyMap,
 } from '../../../consts';
-import { useCodeMirrorEditorIsolated } from '../../stores';
+import { useCodeMirrorEditorIsolated } from '../../stores/codemirror-editor';
 
 export const InitEditorValueRow = (): JSX.Element => {
 

packages/editor/src/client/components/CodeMirrorEditorComment.tsx

@@ -3,11 +3,9 @@ import { memo, useEffect } from 'react';
 import type { Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 
-import { useCodeMirrorEditorIsolated } from '../stores';
-
-import { CodeMirrorEditor, type CodeMirrorEditorProps } from '.';
-
-import type { GlobalCodeMirrorEditorKey } from 'src/consts';
+import type { GlobalCodeMirrorEditorKey } from '../../consts';
+import { CodeMirrorEditor, type CodeMirrorEditorProps } from '../components-internal/CodeMirrorEditor';
+import { useCodeMirrorEditorIsolated } from '../stores/codemirror-editor';
 
 
 const additionalExtensions: Extension[] = [

packages/editor/src/client/components/CodeMirrorEditorMain.tsx

@@ -5,10 +5,11 @@ import { keymap, scrollPastEnd } from '@codemirror/view';
 import type { IUserHasId } from '@growi/core/dist/interfaces';
 
 import { GlobalCodeMirrorEditorKey } from '../../consts';
+import { CodeMirrorEditor, type CodeMirrorEditorProps } from '../components-internal/CodeMirrorEditor';
 import { setDataLine } from '../services-internal';
-import { useCodeMirrorEditorIsolated, useCollaborativeEditorMode } from '../stores';
+import { useCodeMirrorEditorIsolated } from '../stores/codemirror-editor';
+import { useCollaborativeEditorMode } from '../stores/use-collaborative-editor-mode';
 
-import { CodeMirrorEditor, type CodeMirrorEditorProps } from '.';
 
 const additionalExtensions: Extension[] = [
   [

packages/editor/src/client/components/CodeMirrorEditorReadOnly.tsx

@@ -3,10 +3,10 @@ import { useEffect } from 'react';
 import { type Extension, EditorState } from '@codemirror/state';
 
 import { GlobalCodeMirrorEditorKey } from '../../consts';
+import { CodeMirrorEditor } from '../components-internal/CodeMirrorEditor';
 import { setDataLine } from '../services-internal';
-import { useCodeMirrorEditorIsolated } from '../stores';
+import { useCodeMirrorEditorIsolated } from '../stores/codemirror-editor';
 
-import { CodeMirrorEditor } from '.';
 
 const additionalExtensions: Extension[] = [
   [

packages/editor/src/client/components/CodeMirrorEditorDiff.tsx → packages/editor/src/client/components/diff/CodeMirrorEditorDiff.tsx

@@ -4,8 +4,10 @@ import type { Extension } from '@codemirror/state';
 import { placeholder, scrollPastEnd } from '@codemirror/view';
 import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 
-import { GlobalCodeMirrorEditorKey } from '../../consts';
-import { useCodeMirrorEditorIsolated, useDefaultExtensions, useEditorSettings } from '../stores';
+import { GlobalCodeMirrorEditorKey } from '../../../consts';
+import { useCodeMirrorEditorIsolated } from '../../stores/codemirror-editor';
+import { useDefaultExtensions } from '../../stores/use-default-extensions';
+import { useEditorSettings } from '../../stores/use-editor-settings';
 
 const additionalExtensions: Extension[] = [
   [

packages/editor/src/client/components/diff/index.ts

@@ -0,0 +1,2 @@
+export * from './CodeMirrorEditorDiff';
+export * from './MergeViewer';

packages/editor/src/client/components/index.ts

@@ -1,6 +0,0 @@
-export * from './CodeMirrorEditor';
-export * from './CodeMirrorEditorMain';
-export * from './CodeMirrorEditorReadOnly';
-export * from './CodeMirrorEditorComment';
-export * from './CodeMirrorEditorDiff';
-export * from './MergeViewer';

packages/editor/src/client/index.ts

@@ -1,3 +0,0 @@
-export * from './components';
-export * from './services';
-export * from './stores';

packages/editor/src/client/stores/index.ts

@@ -1,9 +0,0 @@
-export * from './codemirror-editor';
-export * from './use-collaborative-editor-mode';
-export * from './use-default-extensions';
-export * from './use-drawio';
-export * from './use-editor-settings';
-export * from './use-handsontable';
-export * from './use-link-edit-modal';
-export * from './use-resolved-theme';
-export * from './use-template-modal';

packages/editor/src/main.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { ToastContainer } from 'react-toastify';
 
-import { Playground } from './client/components/playground';
+import { Playground } from './client/components-internal/playground';
 
 import './main.scss';