editor.tsx 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. import { useCallback } from 'react';
  2. import { type Nullable } from '@growi/core';
  3. import { withUtils, type SWRResponseWithUtils } from '@growi/core/dist/swr';
  4. import type { EditorSettings } from '@growi/editor';
  5. import useSWR, { type SWRResponse } from 'swr';
  6. import useSWRImmutable from 'swr/immutable';
  7. import { apiGet } from '~/client/util/apiv1-client';
  8. import { apiv3Get, apiv3Put } from '~/client/util/apiv3-client';
  9. import type { SlackChannels } from '~/interfaces/user-trigger-notification';
  10. import {
  11. useCurrentUser, useDefaultIndentSize, useIsGuestUser, useIsReadOnlyUser,
  12. } from './context';
  13. // import { localStorageMiddleware } from './middlewares/sync-to-storage';
  14. import { useSWRxTagsInfo } from './page';
  15. import { useStaticSWR } from './use-static-swr';
  16. export const useWaitingSaveProcessing = (): SWRResponse<boolean, Error> => {
  17. return useStaticSWR('waitingSaveProcessing', undefined, { fallbackData: false });
  18. };
  19. export const useEditingMarkdown = (initialData?: string): SWRResponse<string, Error> => {
  20. return useStaticSWR('editingMarkdown', initialData);
  21. };
  22. type EditorSettingsOperation = {
  23. update: (updateData: Partial<EditorSettings>) => Promise<void>,
  24. }
  25. // TODO: Enable localStorageMiddleware
  26. // - Unabling localStorageMiddleware occurrs a flickering problem when loading theme.
  27. // - see: https://github.com/weseek/growi/pull/6781#discussion_r1000285786
  28. export const useEditorSettings = (): SWRResponseWithUtils<EditorSettingsOperation, EditorSettings, Error> => {
  29. const { data: currentUser } = useCurrentUser();
  30. const { data: isGuestUser } = useIsGuestUser();
  31. const { data: isReadOnlyUser } = useIsReadOnlyUser();
  32. const swrResult = useSWRImmutable(
  33. (isGuestUser || isReadOnlyUser) ? null : ['/personal-setting/editor-settings', currentUser?.username],
  34. ([endpoint]) => {
  35. return apiv3Get(endpoint).then(result => result.data);
  36. },
  37. {
  38. // use: [localStorageMiddleware], // store to localStorage for initialization fastly
  39. // fallbackData: undefined,
  40. },
  41. );
  42. return withUtils<EditorSettingsOperation, EditorSettings, Error>(swrResult, {
  43. update: async(updateData) => {
  44. const { data, mutate } = swrResult;
  45. if (data == null) {
  46. return;
  47. }
  48. mutate({ ...data, ...updateData }, false);
  49. // invoke API
  50. await apiv3Put('/personal-setting/editor-settings', updateData);
  51. },
  52. });
  53. };
  54. export const useCurrentIndentSize = (): SWRResponse<number, Error> => {
  55. const { data: defaultIndentSize } = useDefaultIndentSize();
  56. return useStaticSWR<number, Error>(
  57. defaultIndentSize == null ? null : 'currentIndentSize',
  58. undefined,
  59. { fallbackData: defaultIndentSize },
  60. );
  61. };
  62. /*
  63. * Slack Notification
  64. */
  65. export const useSWRxSlackChannels = (currentPagePath: Nullable<string>): SWRResponse<string[], Error> => {
  66. const shouldFetch: boolean = currentPagePath != null;
  67. return useSWR(
  68. shouldFetch ? ['/pages.updatePost', currentPagePath] : null,
  69. ([endpoint, path]) => apiGet(endpoint, { path }).then((response: SlackChannels) => response.updatePost),
  70. {
  71. revalidateOnFocus: false,
  72. fallbackData: [''],
  73. },
  74. );
  75. };
  76. export const useIsSlackEnabled = (): SWRResponse<boolean, Error> => {
  77. return useStaticSWR(
  78. 'isSlackEnabled',
  79. undefined,
  80. { fallbackData: false },
  81. );
  82. };
  83. export type IPageTagsForEditorsOption = {
  84. sync: (tags?: string[]) => void;
  85. }
  86. export const usePageTagsForEditors = (pageId: Nullable<string>): SWRResponse<string[], Error> & IPageTagsForEditorsOption => {
  87. const { data: tagsInfoData } = useSWRxTagsInfo(pageId);
  88. const swrResult = useStaticSWR<string[], Error>('pageTags', undefined);
  89. const { mutate } = swrResult;
  90. const sync = useCallback((): void => {
  91. mutate(tagsInfoData?.tags || [], false);
  92. }, [mutate, tagsInfoData?.tags]);
  93. return {
  94. ...swrResult,
  95. sync,
  96. };
  97. };
  98. export const useIsEnabledUnsavedWarning = (): SWRResponse<boolean, Error> => {
  99. return useStaticSWR<boolean, Error>('isEnabledUnsavedWarning');
  100. };