= (props) => {
}
>
)
diff --git a/src/components/Editor/Sidebar/index.tsx b/src/components/Editor/Sidebar/index.tsx
index a9da63416c..40d2341159 100644
--- a/src/components/Editor/Sidebar/index.tsx
+++ b/src/components/Editor/Sidebar/index.tsx
@@ -1,8 +1,9 @@
-import SidebarCampaign from './Campaign'
+import Campaign from './Campaign'
import Collection from './Collection'
import Cover from './Cover'
+import Indent from './Indent'
import Management from './Management'
-import SidebarArticleResponse from './Response'
+import Response from './Response'
import Tags from './Tags'
const Sidebar = {
@@ -10,8 +11,9 @@ const Sidebar = {
Tags,
Collection,
Management,
- Response: SidebarArticleResponse,
- Campaign: SidebarCampaign,
+ Response,
+ Campaign,
+ Indent,
}
export default Sidebar
diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx
index 544aaca3aa..36cad78de4 100644
--- a/src/components/Editor/index.tsx
+++ b/src/components/Editor/index.tsx
@@ -3,8 +3,8 @@ import {
DigestTagFragment,
} from '~/gql/graphql'
+export * from './MoreSettings'
export * from './SetCover'
-export * from './ToggleAccess'
export * from './ToggleResponse'
export type SetCollectionProps = {
diff --git a/src/views/ArticleDetail/Content/index.tsx b/src/views/ArticleDetail/Content/index.tsx
index e22b67232c..2fd4896c0a 100644
--- a/src/views/ArticleDetail/Content/index.tsx
+++ b/src/views/ArticleDetail/Content/index.tsx
@@ -27,10 +27,12 @@ const READ_ARTICLE = gql`
const Content = ({
articleId,
content,
+ indentFirstLine,
translating,
}: {
articleId: string
content: string
+ indentFirstLine: boolean
translating?: boolean
}) => {
const viewer = useContext(ViewerContext)
@@ -121,6 +123,7 @@ const Content = ({
p {
+ text-indent: 2.25rem;
+ }
+}
+
.translating {
opacity: 0.5;
}
diff --git a/src/views/ArticleDetail/Edit/Header/gql.ts b/src/views/ArticleDetail/Edit/Header/gql.ts
index 1facb54085..67b5d59b85 100644
--- a/src/views/ArticleDetail/Edit/Header/gql.ts
+++ b/src/views/ArticleDetail/Edit/Header/gql.ts
@@ -14,6 +14,7 @@ const fragment = gql`
type
}
canComment
+ indentFirstLine
sensitiveByAuthor
license
requestForDonation
@@ -51,6 +52,7 @@ export const EDIT_ARTICLE = gql`
$requestForDonation: requestForDonation_String_maxLength_140
$replyToDonator: replyToDonator_String_maxLength_140
$canComment: Boolean
+ $indented: Boolean
$sensitive: Boolean
$campaigns: [ArticleCampaignInput!]
$isResetCampaign: Boolean! = false
@@ -72,6 +74,7 @@ export const EDIT_ARTICLE = gql`
requestForDonation: $requestForDonation
replyToDonator: $replyToDonator
canComment: $canComment
+ indentFirstLine: $indented
sensitive: $sensitive
campaigns: $campaigns
}
@@ -96,6 +99,7 @@ export const EDIT_ARTICLE = gql`
requestForDonation: $requestForDonation
replyToDonator: $replyToDonator
canComment: $canComment
+ indentFirstLine: $indented
sensitive: $sensitive
campaigns: []
}
diff --git a/src/views/ArticleDetail/Edit/Header/index.tsx b/src/views/ArticleDetail/Edit/Header/index.tsx
index f47a11e6cb..66e4ddddcc 100644
--- a/src/views/ArticleDetail/Edit/Header/index.tsx
+++ b/src/views/ArticleDetail/Edit/Header/index.tsx
@@ -9,6 +9,7 @@ import {
EditorSettingsDialog,
EditorSettingsDialogProps,
} from '~/components/Editor/SettingsDialog'
+import { SidebarIndentProps } from '~/components/Editor/Sidebar/Indent'
import {
AssetFragment,
EditArticleMutation,
@@ -48,7 +49,8 @@ type EditModeHeaderProps = {
| 'onConfirm'
| 'ConfirmStepContent'
| 'children'
->
+> &
+ SidebarIndentProps // no need to show indent setting on EditorSettingsDialog
const EditModeHeader = ({
article,
@@ -91,6 +93,7 @@ const EditModeHeader = ({
const isAccessRevised = accessType !== article.access.type
const isLicenseRevised = license !== article.license
const isCanCommentRevised = restProps.canComment !== article.canComment
+ const isIndentRevised = restProps.indented !== article.indentFirstLine
const isSensitiveRevised =
restProps.contentSensitive !== article.sensitiveByAuthor
const isCampaignRevised =
@@ -115,6 +118,7 @@ const EditModeHeader = ({
isAccessRevised ||
isLicenseRevised ||
isCanCommentRevised ||
+ isIndentRevised ||
isSensitiveRevised ||
isCampaignRevised ||
restProps.iscnPublish
@@ -151,6 +155,7 @@ const EditModeHeader = ({
? { iscnPublish: restProps.iscnPublish }
: {}),
...(isCanCommentRevised ? { canComment: restProps.canComment } : {}),
+ ...(isIndentRevised ? { indented: restProps.indented } : {}),
...(isSensitiveRevised
? { sensitive: restProps.contentSensitive }
: {}),
diff --git a/src/views/ArticleDetail/Edit/gql.ts b/src/views/ArticleDetail/Edit/gql.ts
index f8607194d0..914eb03b27 100644
--- a/src/views/ArticleDetail/Edit/gql.ts
+++ b/src/views/ArticleDetail/Edit/gql.ts
@@ -55,6 +55,7 @@ export const GET_EDIT_ARTICLE = gql`
}
}
canComment
+ indentFirstLine
license
sensitiveByAuthor
requestForDonation
diff --git a/src/views/ArticleDetail/Edit/index.tsx b/src/views/ArticleDetail/Edit/index.tsx
index d0ad070055..f189c4336d 100644
--- a/src/views/ArticleDetail/Edit/index.tsx
+++ b/src/views/ArticleDetail/Edit/index.tsx
@@ -21,20 +21,21 @@ import {
ViewerContext,
} from '~/components'
import {
+ MoreSettingsProps,
SetCollectionProps,
SetCoverProps,
SetResponseProps,
SetTagsProps,
SetVersionDescriptionProps,
- ToggleAccessProps,
} from '~/components/Editor'
import BottomBar from '~/components/Editor/BottomBar'
+import SupportSettingDialog from '~/components/Editor/MoreSettings/SupportSettingDialog'
import {
getSelectCampaign,
SelectCampaignProps,
} from '~/components/Editor/SelectCampaign'
import Sidebar from '~/components/Editor/Sidebar'
-import SupportSettingDialog from '~/components/Editor/ToggleAccess/SupportSettingDialog'
+import { SidebarIndentProps } from '~/components/Editor/Sidebar/Indent'
import { QueryError, useImperativeQuery } from '~/components/GQL'
import {
DIRECT_IMAGE_UPLOAD,
@@ -170,6 +171,8 @@ const BaseEdit = ({ article }: { article: Article }) => {
const [canComment, setCanComment] = useState(article.canComment)
+ const [indented, setIndented] = useState(article.indentFirstLine)
+
const revisionCountLeft =
MAX_ARTICLE_REVISION_COUNT - (article?.revisionCount || 0)
const isOverRevisionLimit = revisionCountLeft <= 0
@@ -199,13 +202,24 @@ const BaseEdit = ({ article }: { article: Article }) => {
canComment,
toggleComment: setCanComment,
}
+ const setIndentProps: SidebarIndentProps = {
+ indented,
+ toggleIndent: setIndented,
+ indentSaving: false,
+ }
const campaignProps: Partial = {
appliedCampaign,
selectedStage: campaign?.stage,
editCampaign: setCampaign,
}
- const accessProps: ToggleAccessProps = {
+ const indentProps: SidebarIndentProps = {
+ indented,
+ toggleIndent: setIndented,
+ indentSaving: false,
+ }
+
+ const accessProps: MoreSettingsProps = {
circle,
accessType,
license,
@@ -332,6 +346,7 @@ const BaseEdit = ({ article }: { article: Article }) => {
aside={
+
@@ -365,6 +380,7 @@ const BaseEdit = ({ article }: { article: Article }) => {
{...collectionProps}
{...accessProps}
{...setCommentProps}
+ {...setIndentProps}
{...versionDescriptionProps}
{...campaignProps}
article={article}
@@ -440,6 +456,7 @@ const BaseEdit = ({ article }: { article: Article }) => {
{...accessProps}
{...setCommentProps}
{...campaignProps}
+ {...indentProps}
onOpenSupportSetting={openSupportSettingDialog}
/>
)}
diff --git a/src/views/ArticleDetail/History/gql.ts b/src/views/ArticleDetail/History/gql.ts
index 0aad65c147..cb060ea4a1 100644
--- a/src/views/ArticleDetail/History/gql.ts
+++ b/src/views/ArticleDetail/History/gql.ts
@@ -17,6 +17,7 @@ const articleHistoryPublicFragment = gql`
author {
id
}
+ indentFirstLine
access {
type
circle {
diff --git a/src/views/ArticleDetail/History/index.tsx b/src/views/ArticleDetail/History/index.tsx
index 5e97036cf4..0e1ee1854c 100644
--- a/src/views/ArticleDetail/History/index.tsx
+++ b/src/views/ArticleDetail/History/index.tsx
@@ -183,6 +183,7 @@ const BaseArticleDetailHistory = ({
articleId={article.id}
content={content}
translating={translating}
+ indentFirstLine={article.indentFirstLine}
/>
{circle && !canReadFullContent && (
diff --git a/src/views/ArticleDetail/Support/SupportWidget/EditCopyButton/index.tsx b/src/views/ArticleDetail/Support/SupportWidget/EditCopyButton/index.tsx
index ebf5327e12..da86a53b00 100644
--- a/src/views/ArticleDetail/Support/SupportWidget/EditCopyButton/index.tsx
+++ b/src/views/ArticleDetail/Support/SupportWidget/EditCopyButton/index.tsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl'
import { ReactComponent as IconEdit } from '@/public/static/icons/24px/edit.svg'
import { analytics } from '~/common/utils'
import { Button, Icon, TextIcon } from '~/components'
-import SupportSettingDialog from '~/components/Editor/ToggleAccess/SupportSettingDialog'
+import SupportSettingDialog from '~/components/Editor/MoreSettings/SupportSettingDialog'
import { ArticleDetailPublicQuery } from '~/gql/graphql'
import { useEditArticleDetailSupportSetting } from '../../../Hook'
diff --git a/src/views/ArticleDetail/gql.ts b/src/views/ArticleDetail/gql.ts
index f3e8e9a24f..338c82fc2c 100644
--- a/src/views/ArticleDetail/gql.ts
+++ b/src/views/ArticleDetail/gql.ts
@@ -44,6 +44,7 @@ const articlePublicFragment = gql`
}
}
canComment
+ indentFirstLine
commentCount
comments(input: { filter: { state: active, parentComment: null } }) {
totalCount
diff --git a/src/views/ArticleDetail/index.tsx b/src/views/ArticleDetail/index.tsx
index a9e9465f1a..83eed8e366 100644
--- a/src/views/ArticleDetail/index.tsx
+++ b/src/views/ArticleDetail/index.tsx
@@ -345,6 +345,7 @@ const BaseArticleDetail = ({
diff --git a/src/views/Circle/Profile/AddCircleArticle/Dialog/ConfirmContent.tsx b/src/views/Circle/Profile/AddCircleArticle/Dialog/ConfirmContent.tsx
index 9eeaf2003e..13b21b3dee 100644
--- a/src/views/Circle/Profile/AddCircleArticle/Dialog/ConfirmContent.tsx
+++ b/src/views/Circle/Profile/AddCircleArticle/Dialog/ConfirmContent.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
import { FormattedMessage } from 'react-intl'
import { Dialog } from '~/components'
-import SelectLicense from '~/components/Editor/ToggleAccess/SelectLicense'
+import SelectLicense from '~/components/Editor/MoreSettings/SelectLicense'
import { ArticleLicenseType } from '~/gql/graphql'
interface ContentProps {
diff --git a/src/views/Me/DraftDetail/BottomBar.tsx b/src/views/Me/DraftDetail/BottomBar.tsx
index d0fe9bb5fd..ce21c0f591 100644
--- a/src/views/Me/DraftDetail/BottomBar.tsx
+++ b/src/views/Me/DraftDetail/BottomBar.tsx
@@ -1,18 +1,19 @@
import { ENTITY_TYPE } from '~/common/enums'
import { toDigestTagPlaceholder } from '~/components'
import {
+ MoreSettingsProps,
SetCollectionProps,
SetCoverProps,
SetResponseProps,
SetTagsProps,
- ToggleAccessProps,
} from '~/components/Editor'
import BottomBar from '~/components/Editor/BottomBar'
+import SupportSettingDialog from '~/components/Editor/MoreSettings/SupportSettingDialog'
import {
getSelectCampaign,
SelectCampaignProps,
} from '~/components/Editor/SelectCampaign'
-import SupportSettingDialog from '~/components/Editor/ToggleAccess/SupportSettingDialog'
+import { SidebarIndentProps } from '~/components/Editor/Sidebar/Indent'
import {
DigestRichCirclePublicFragment,
EditMetaDraftFragment,
@@ -28,6 +29,7 @@ import {
useEditDraftPublishISCN,
useEditDraftSensitiveByAuthor,
useEditDraftTags,
+ useEditIndent,
useEditSupportSetting,
} from './hooks'
@@ -55,6 +57,9 @@ const EditDraftBottomBar = ({
useEditDraftCanComment()
const canComment = draft.canComment
+ const { edit: toggleIndent, saving: indentSaving } = useEditIndent()
+ const indented = draft.indentFirstLine
+
const { edit: editAccess, saving: accessSaving } = useEditDraftAccess(
ownCircles && ownCircles[0]
)
@@ -91,8 +96,9 @@ const EditDraftBottomBar = ({
editCollection,
collectionSaving,
}
- const accessProps: ToggleAccessProps &
+ const accessProps: MoreSettingsProps &
SetResponseProps &
+ SidebarIndentProps &
Partial = {
circle: draft?.access.circle,
accessType: draft.access.type,
@@ -114,6 +120,10 @@ const EditDraftBottomBar = ({
canComment,
toggleComment,
+ indented,
+ toggleIndent,
+ indentSaving,
+
appliedCampaign,
selectedStage,
editCampaign,
@@ -134,7 +144,8 @@ const EditDraftBottomBar = ({
tagsSaving ||
accessSaving ||
toggleCommentSaving ||
- campaignSaving
+ campaignSaving ||
+ indentSaving
}
{...coverProps}
{...tagsProps}
diff --git a/src/views/Me/DraftDetail/SettingsButton/index.tsx b/src/views/Me/DraftDetail/SettingsButton/index.tsx
index ffb2589ef3..f8f13e81ce 100644
--- a/src/views/Me/DraftDetail/SettingsButton/index.tsx
+++ b/src/views/Me/DraftDetail/SettingsButton/index.tsx
@@ -3,11 +3,11 @@ import { FormattedMessage } from 'react-intl'
import { ENTITY_TYPE } from '~/common/enums'
import { Button, TextIcon, toDigestTagPlaceholder } from '~/components'
import {
+ MoreSettingsProps,
SetCollectionProps,
SetCoverProps,
SetResponseProps,
SetTagsProps,
- ToggleAccessProps,
} from '~/components/Editor'
import {
getSelectCampaign,
@@ -111,7 +111,7 @@ const SettingsButton = ({
editCollection,
collectionSaving,
}
- const accessProps: ToggleAccessProps = {
+ const accessProps: MoreSettingsProps = {
circle: draft?.access.circle,
accessType: draft.access.type,
license: draft.license,
diff --git a/src/views/Me/DraftDetail/Sidebar/index.tsx b/src/views/Me/DraftDetail/Sidebar/index.tsx
index c2a72657be..ae23098957 100644
--- a/src/views/Me/DraftDetail/Sidebar/index.tsx
+++ b/src/views/Me/DraftDetail/Sidebar/index.tsx
@@ -1,8 +1,8 @@
import { ENTITY_TYPE } from '~/common/enums'
import { toDigestTagPlaceholder } from '~/components'
+import SupportSettingDialog from '~/components/Editor/MoreSettings/SupportSettingDialog'
import { getSelectCampaign } from '~/components/Editor/SelectCampaign'
import Sidebar from '~/components/Editor/Sidebar'
-import SupportSettingDialog from '~/components/Editor/ToggleAccess/SupportSettingDialog'
import {
DigestRichCirclePublicFragment,
EditMetaDraftFragment,
@@ -18,6 +18,7 @@ import {
useEditDraftPublishISCN,
useEditDraftSensitiveByAuthor,
useEditDraftTags,
+ useEditIndent,
useEditSupportSetting,
} from '../hooks'
import styles from './styles.module.css'
@@ -127,6 +128,19 @@ const EditDraftResponse = ({ draft }: SidebarProps) => {
)
}
+const EditDraftIndent = ({ draft }: SidebarProps) => {
+ const { edit: toggleIndent, saving: indentSaving } = useEditIndent()
+ const indented = draft.indentFirstLine
+
+ return (
+
+ )
+}
+
const EditDraftCampaign = ({ draft, campaigns }: SidebarProps) => {
const { edit } = useEditDraftCampaign()
@@ -153,6 +167,7 @@ const EditDraftSidebar = (props: BaseSidebarProps) => {
return (
+
diff --git a/src/views/Me/DraftDetail/gql.ts b/src/views/Me/DraftDetail/gql.ts
index 0ea44d7214..bb11e35494 100644
--- a/src/views/Me/DraftDetail/gql.ts
+++ b/src/views/Me/DraftDetail/gql.ts
@@ -47,6 +47,7 @@ export const editMetaFragment = gql`
sensitiveByAuthor
iscnPublish
canComment
+ indentFirstLine
}
${ArticleDigestDropdown.fragments.article}
${assetFragment}
@@ -222,6 +223,16 @@ export const SET_CAN_COMMENT = gql`
${editMetaFragment}
`
+export const SET_INDENT = gql`
+ mutation SetDraftIndent($id: ID!, $indented: Boolean) {
+ putDraft(input: { id: $id, indentFirstLine: $indented }) {
+ id
+ ...EditMetaDraft
+ }
+ }
+ ${editMetaFragment}
+`
+
export const SET_ACCESS = gql`
mutation SetDraftAccess(
$id: ID!
diff --git a/src/views/Me/DraftDetail/hooks.ts b/src/views/Me/DraftDetail/hooks.ts
index a41ef13295..83ca9ead83 100644
--- a/src/views/Me/DraftDetail/hooks.ts
+++ b/src/views/Me/DraftDetail/hooks.ts
@@ -15,6 +15,7 @@ import {
SetDraftCanCommentMutation,
SetDraftCollectionMutation,
SetDraftCoverMutation,
+ SetDraftIndentMutation,
SetDraftPublishIscnMutation,
SetDraftSensitiveByAuthorMutation,
SetDraftTagsMutation,
@@ -28,6 +29,7 @@ import {
SET_CAN_COMMENT,
SET_COLLECTION,
SET_COVER,
+ SET_INDENT,
SET_PUBLISH_ISCN,
SET_SENSITIVE_BY_AUTHOR,
SET_SUPPORT_REQUEST_REPLY,
@@ -297,6 +299,31 @@ export const useEditDraftCanComment = () => {
}
}
+export const useEditIndent = () => {
+ const { addRequest, createDraft, getDraftId } = useContext(
+ DraftDetailStateContext
+ )
+ const [update, { loading: saving }] =
+ useMutation(SET_INDENT)
+
+ const edit = (indented: boolean, newId?: string) =>
+ update({ variables: { id: newId || getDraftId(), indented } })
+
+ const createDraftAndEdit = async (indented: boolean) => {
+ if (getDraftId()) return edit(indented)
+
+ return createDraft({
+ onCreate: (newDraftId) => edit(indented, newDraftId),
+ })
+ }
+
+ return {
+ edit: async (indented: boolean) =>
+ addRequest(() => createDraftAndEdit(indented)),
+ saving,
+ }
+}
+
export const useEditDraftCampaign = () => {
const { addRequest, createDraft, getDraftId } = useContext(
DraftDetailStateContext
diff --git a/src/views/Me/DraftDetail/index.tsx b/src/views/Me/DraftDetail/index.tsx
index bb36f6c1cd..edc4f20a1f 100644
--- a/src/views/Me/DraftDetail/index.tsx
+++ b/src/views/Me/DraftDetail/index.tsx
@@ -85,6 +85,7 @@ const EMPTY_DRAFT: DraftDetailQueryQuery['node'] = {
iscnPublish: null,
canComment: true,
campaigns: [],
+ indentFirstLine: false,
}
const BaseDraftDetail = () => {