editor.tsx 4.1 KB

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