tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: removes default exports from slate

Browse Source
This commit is contained in:
James
2024-03-06 19:28:55 -05:00
parent b2ae40c8c8
commit a2aa527f50
74 changed files with 177 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/richtext-slate/src/field/RichText.tsx
View File

@@ -19,12 +19,12 @@ import type { EnabledFeatures } from './types.d.ts'
import { defaultRichTextValue } from '../data/defaultValue.js' import { defaultRichTextValue } from '../data/defaultValue.js'
import { richTextValidate } from '../data/validation.js' import { richTextValidate } from '../data/validation.js'
import listTypes from './elements/listTypes.js' import { listTypes } from './elements/listTypes.js'
import hotkeys from './hotkeys.js' import { hotkeys } from './hotkeys.js'
import './index.scss' import './index.scss'
import toggleLeaf from './leaves/toggle.js' import { toggleLeaf } from './leaves/toggle.js'
import withEnterBreakOut from './plugins/withEnterBreakOut.js' import { withEnterBreakOut } from './plugins/withEnterBreakOut.js'
import withHTML from './plugins/withHTML.js' import { withHTML } from './plugins/withHTML.js'
import { ElementButtonProvider } from './providers/ElementButtonProvider.js' import { ElementButtonProvider } from './providers/ElementButtonProvider.js'
import { ElementProvider } from './providers/ElementProvider.js' import { ElementProvider } from './providers/ElementProvider.js'
import { LeafButtonProvider } from './providers/LeafButtonProvider.js' import { LeafButtonProvider } from './providers/LeafButtonProvider.js'
@@ -40,7 +40,7 @@ declare module 'slate' {
} }
} }
const RichText: React.FC< const RichTextField: React.FC<
FormFieldBase & { FormFieldBase & {
elements: EnabledFeatures['elements'] elements: EnabledFeatures['elements']
leaves: EnabledFeatures['leaves'] leaves: EnabledFeatures['leaves']
@@ -432,4 +432,4 @@ const RichText: React.FC<
) )
} }
export default withCondition(RichText) export const RichText = withCondition(RichTextField)

8
packages/richtext-slate/src/field/elements/Button.tsx
View File

@@ -8,12 +8,12 @@ import { useSlate } from 'slate-react'
import type { ButtonProps } from './types.d.ts' import type { ButtonProps } from './types.d.ts'
import '../buttons.scss' import '../buttons.scss'
import isElementActive from './isActive.js' import { isElementActive } from './isActive.js'
import toggleElement from './toggle.js' import { toggleElement } from './toggle.js'
export const baseClass = 'rich-text__button' export const baseClass = 'rich-text__button'
const ElementButton: React.FC<ButtonProps> = (props) => { export const ElementButton: React.FC<ButtonProps> = (props) => {
const { type = 'type', children, className, el = 'button', format, onClick, tooltip } = props const { type = 'type', children, className, el = 'button', format, onClick, tooltip } = props
const editor = useSlate() const editor = useSlate()
@@ -49,5 +49,3 @@ const ElementButton: React.FC<ButtonProps> = (props) => {
</Tag> </Tag>
) )
} }
export default ElementButton

8
packages/richtext-slate/src/field/elements/ListButton.tsx
View File

@@ -6,12 +6,12 @@ import { useSlate } from 'slate-react'
import type { ButtonProps } from './types.d.ts' import type { ButtonProps } from './types.d.ts'
import '../buttons.scss' import '../buttons.scss'
import isListActive from './isListActive.js' import { isListActive } from './isListActive.js'
import toggleList from './toggleList.js' import { toggleList } from './toggleList.js'
export const baseClass = 'rich-text__button' export const baseClass = 'rich-text__button'
const ListButton: React.FC<ButtonProps> = ({ children, className, format, onClick }) => { export const ListButton: React.FC<ButtonProps> = ({ children, className, format, onClick }) => {
const editor = useSlate() const editor = useSlate()
const defaultOnClick = useCallback( const defaultOnClick = useCallback(
@@ -38,5 +38,3 @@ const ListButton: React.FC<ButtonProps> = ({ children, className, format, onClic
</button> </button>
) )
} }
export default ListButton

8
packages/richtext-slate/src/field/elements/blockquote/index.tsx
View File

@@ -2,13 +2,13 @@ import React from 'react'
import type { RichTextCustomElement } from '../../../types.d.ts' import type { RichTextCustomElement } from '../../../types.d.ts'
import BlockquoteIcon from '../../icons/Blockquote/index.js' import { BlockquoteIcon } from '../../icons/Blockquote/index.js'
import ElementButton from '../Button.js' import { ElementButton } from '../Button.js'
import { Blockquote } from './Blockquote.js' import { Blockquote } from './Blockquote.js'
const name = 'blockquote' const name = 'blockquote'
const blockquote: RichTextCustomElement = { export const blockquote: RichTextCustomElement = {
name, name,
Button: () => ( Button: () => (
<ElementButton format={name}> <ElementButton format={name}>
@@ -17,5 +17,3 @@ const blockquote: RichTextCustomElement = {
), ),
Element: Blockquote, Element: Blockquote,
} }
export default blockquote

8
packages/richtext-slate/src/field/elements/h1/index.tsx
View File

@@ -2,13 +2,13 @@ import React from 'react'
import type { RichTextCustomElement } from '../../../types.d.ts' import type { RichTextCustomElement } from '../../../types.d.ts'
import H1Icon from '../../icons/headings/H1/index.js' import { H1Icon } from '../../icons/headings/H1/index.js'
import ElementButton from '../Button.js' import { ElementButton } from '../Button.js'
import { Heading1 } from './Heading1.js' import { Heading1 } from './Heading1.js'
const name = 'h1' const name = 'h1'
const h1: RichTextCustomElement = { export const h1: RichTextCustomElement = {
name, name,
Button: () => ( Button: () => (
<ElementButton format={name}> <ElementButton format={name}>
@@ -17,5 +17,3 @@ const h1: RichTextCustomElement = {
), ),
Element: Heading1, Element: Heading1,
} }
export default h1

8
packages/richtext-slate/src/field/elements/h2/index.tsx
View File

@@ -2,13 +2,13 @@ import React from 'react'
import type { RichTextCustomElement } from '../../../types.d.ts' import type { RichTextCustomElement } from '../../../types.d.ts'
import H2Icon from '../../icons/headings/H2/index.js' import { H2Icon } from '../../icons/headings/H2/index.js'
import ElementButton from '../Button.js' import { ElementButton } from '../Button.js'
import { Heading2 } from './Heading2.js' import { Heading2 } from './Heading2.js'
const name = 'h2' const name = 'h2'
const h2: RichTextCustomElement = { export const h2: RichTextCustomElement = {
name, name,
Button: () => ( Button: () => (
<ElementButton format={name}> <ElementButton format={name}>
@@ -17,5 +17,3 @@ const h2: RichTextCustomElement = {
), ),
Element: Heading2, Element: Heading2,
} }
export default h2

8
packages/richtext-slate/src/field/elements/h3/index.tsx
View File

@@ -2,13 +2,13 @@ import React from 'react'
import type { RichTextCustomElement } from '../../../types.d.ts' import type { RichTextCustomElement } from '../../../types.d.ts'
import H3Icon from '../../icons/headings/H3/index.js' import { H3Icon } from '../../icons/headings/H3/index.js'
import ElementButton from '../Button.js' import { ElementButton } from '../Button.js'
import { Heading3 } from './Heading3.js' import { Heading3 } from './Heading3.js'
const name = 'h3' const name = 'h3'
const h3: RichTextCustomElement = { export const h3: RichTextCustomElement = {
name, name,
Button: () => ( Button: () => (
<ElementButton format={name}> <ElementButton format={name}>
@@ -17,5 +17,3 @@ const h3: RichTextCustomElement = {
), ),
Element: Heading3, Element: Heading3,
} }
export default h3

8
packages/richtext-slate/src/field/elements/h4/index.tsx
View File

@@ -2,13 +2,13 @@ import React from 'react'
import type { RichTextCustomElement } from '../../../types.d.ts' import type { RichTextCustomElement } from '../../../types.d.ts'
import H4Icon from '../../icons/headings/H4/index.js' import { H4Icon } from '../../icons/headings/H4/index.js'
import ElementButton from '../Button.js' import { ElementButton } from '../Button.js'
import { Heading4 } from './Heading4.js' import { Heading4 } from './Heading4.js'
const name = 'h4' const name = 'h4'
const h4: RichTextCustomElement = { export const h4: RichTextCustomElement = {
name, name,
Button: () => ( Button: () => (
<ElementButton format={name}> <ElementButton format={name}>
@@ -17,5 +17,3 @@ const h4: RichTextCustomElement = {
), ),
Element: Heading4, Element: Heading4,
} }
export default h4

8
packages/richtext-slate/src/field/elements/h5/index.tsx
View File

@@ -2,13 +2,13 @@ import React from 'react'
import type { RichTextCustomElement } from '../../../types.d.ts' import type { RichTextCustomElement } from '../../../types.d.ts'
import H5Icon from '../../icons/headings/H5/index.js' import { H5Icon } from '../../icons/headings/H5/index.js'
import ElementButton from '../Button.js' import { ElementButton } from '../Button.js'
import { Heading5 } from './Heading5.js' import { Heading5 } from './Heading5.js'
const name = 'h5' const name = 'h5'
const h5: RichTextCustomElement = { export const h5: RichTextCustomElement = {
name, name,
Button: () => ( Button: () => (
<ElementButton format={name}> <ElementButton format={name}>
@@ -17,5 +17,3 @@ const h5: RichTextCustomElement = {
), ),
Element: Heading5, Element: Heading5,
} }
export default h5

8
packages/richtext-slate/src/field/elements/h6/index.tsx
View File

@@ -2,13 +2,13 @@ import React from 'react'
import type { RichTextCustomElement } from '../../../types.d.ts' import type { RichTextCustomElement } from '../../../types.d.ts'
import H6Icon from '../../icons/headings/H6/index.js' import { H6Icon } from '../../icons/headings/H6/index.js'
import ElementButton from '../Button.js' import { ElementButton } from '../Button.js'
import { Heading6 } from './Heading6.js' import { Heading6 } from './Heading6.js'
const name = 'h6' const name = 'h6'
const h6: RichTextCustomElement = { export const h6: RichTextCustomElement = {
name, name,
Button: () => ( Button: () => (
<ElementButton format={name}> <ElementButton format={name}>
@@ -17,5 +17,3 @@ const h6: RichTextCustomElement = {
), ),
Element: Heading6, Element: Heading6,
} }
export default h6

8
packages/richtext-slate/src/field/elements/indent/Button.tsx
View File

@@ -7,13 +7,13 @@ import { ReactEditor, useSlate } from 'slate-react'
import type { ElementNode } from '../../../types.d.ts' import type { ElementNode } from '../../../types.d.ts'
import IndentLeft from '../../icons/IndentLeft/index.js' import { IndentLeft } from '../../icons/IndentLeft/index.js'
import IndentRight from '../../icons/IndentRight/index.js' import { IndentRight } from '../../icons/IndentRight/index.js'
import { baseClass } from '../Button.js' import { baseClass } from '../Button.js'
import { getCommonBlock } from '../getCommonBlock.js' import { getCommonBlock } from '../getCommonBlock.js'
import isElementActive from '../isActive.js' import { isElementActive } from '../isActive.js'
import { isBlockElement } from '../isBlockElement.js' import { isBlockElement } from '../isBlockElement.js'
import listTypes from '../listTypes.js' import { listTypes } from '../listTypes.js'
import { unwrapList } from '../unwrapList.js' import { unwrapList } from '../unwrapList.js'
import { indentType } from './shared.js' import { indentType } from './shared.js'

4
packages/richtext-slate/src/field/elements/indent/index.ts
View File

@@ -4,10 +4,8 @@ import { IndentButton } from './Button.js'
import { IndentElement } from './Element.js' import { IndentElement } from './Element.js'
import { indentType } from './shared.js' import { indentType } from './shared.js'
const indent: RichTextCustomElement = { export const indent: RichTextCustomElement = {
name: indentType, name: indentType,
Button: IndentButton, Button: IndentButton,
Element: IndentElement, Element: IndentElement,
} }
export default indent

34
packages/richtext-slate/src/field/elements/index.tsx
View File

@@ -1,22 +1,22 @@
import type { RichTextCustomElement } from '../../types.d.ts' import type { RichTextCustomElement } from '../../types.d.ts'
import blockquote from './blockquote/index.js' import { blockquote } from './blockquote/index.js'
import h1 from './h1/index.js' import { h1 } from './h1/index.js'
import h2 from './h2/index.js' import { h2 } from './h2/index.js'
import h3 from './h3/index.js' import { h3 } from './h3/index.js'
import h4 from './h4/index.js' import { h4 } from './h4/index.js'
import h5 from './h5/index.js' import { h5 } from './h5/index.js'
import h6 from './h6/index.js' import { h6 } from './h6/index.js'
import indent from './indent/index.js' import { indent } from './indent/index.js'
import li from './li/index.js' import { li } from './li/index.js'
import link from './link/index.js' import { link } from './link/index.js'
import ol from './ol/index.js' import { ol } from './ol/index.js'
import relationship from './relationship/index.js' import { relationship } from './relationship/index.js'
import textAlign from './textAlign/index.js' import { textAlign } from './textAlign/index.js'
import ul from './ul/index.js' import { ul } from './ul/index.js'
import upload from './upload/index.js' import { upload } from './upload/index.js'
const elements: Record<string, RichTextCustomElement> = { export const elements: Record<string, RichTextCustomElement> = {
blockquote, blockquote,
h1, h1,
h2, h2,
@@ -33,5 +33,3 @@ const elements: Record<string, RichTextCustomElement> = {
ul, ul,
upload, upload,
} }
export default elements

4
packages/richtext-slate/src/field/elements/isActive.tsx
View File

@@ -1,6 +1,6 @@
import { Editor, Element } from 'slate' import { Editor, Element } from 'slate'
const isElementActive = (editor: Editor, format: string, blockType = 'type'): boolean => { export const isElementActive = (editor: Editor, format: string, blockType = 'type'): boolean => {
if (!editor.selection) return false if (!editor.selection) return false
const [match] = Array.from( const [match] = Array.from(
@@ -12,5 +12,3 @@ const isElementActive = (editor: Editor, format: string, blockType = 'type'): bo
return !!match return !!match
} }
export default isElementActive

4
packages/richtext-slate/src/field/elements/isListActive.ts
View File

@@ -2,7 +2,7 @@ import { Editor, Element } from 'slate'
import { getCommonBlock } from './getCommonBlock.js' import { getCommonBlock } from './getCommonBlock.js'
const isListActive = (editor: Editor, format: string): boolean => { export const isListActive = (editor: Editor, format: string): boolean => {
if (!editor.selection) return false if (!editor.selection) return false
const [topmostSelectedNode, topmostSelectedNodePath] = getCommonBlock(editor) const [topmostSelectedNode, topmostSelectedNodePath] = getCommonBlock(editor)
@@ -25,5 +25,3 @@ const isListActive = (editor: Editor, format: string): boolean => {
return !!match return !!match
} }
export default isListActive

2
packages/richtext-slate/src/field/elements/li/ListItem.tsx
View File

@@ -5,7 +5,7 @@ import type { Element } from 'slate'
import React, { isValidElement } from 'react' import React, { isValidElement } from 'react'
import { useElement } from '../../providers/ElementProvider.js' import { useElement } from '../../providers/ElementProvider.js'
import listTypes from '../listTypes.js' import { listTypes } from '../listTypes.js'
export const ListItemElement: React.FC = () => { export const ListItemElement: React.FC = () => {
const { attributes, children, element } = useElement<Element>() const { attributes, children, element } = useElement<Element>()

4
packages/richtext-slate/src/field/elements/li/index.tsx
View File

@@ -2,9 +2,7 @@ import type { RichTextCustomElement } from '../../../types.d.ts'
import { ListItemElement } from './ListItem.js' import { ListItemElement } from './ListItem.js'
const listItem: RichTextCustomElement = { export const li: RichTextCustomElement = {
name: 'li', name: 'li',
Element: ListItemElement, Element: ListItemElement,
} }
export default listItem

6
packages/richtext-slate/src/field/elements/link/Button/index.tsx
View File

@@ -16,10 +16,10 @@ import React, { Fragment, useState } from 'react'
import { Editor, Range, Transforms } from 'slate' import { Editor, Range, Transforms } from 'slate'
import { ReactEditor, useSlate } from 'slate-react' import { ReactEditor, useSlate } from 'slate-react'
import LinkIcon from '../../../icons/Link/index.js' import { LinkIcon } from '../../../icons/Link/index.js'
import { useElementButton } from '../../../providers/ElementButtonProvider.js' import { useElementButton } from '../../../providers/ElementButtonProvider.js'
import ElementButton from '../../Button.js' import { ElementButton } from '../../Button.js'
import isElementActive from '../../isActive.js' import { isElementActive } from '../../isActive.js'
import { LinkDrawer } from '../LinkDrawer/index.js' import { LinkDrawer } from '../LinkDrawer/index.js'
import { linkFieldsSchemaPath } from '../shared.js' import { linkFieldsSchemaPath } from '../shared.js'
import { unwrapLink } from '../utilities.js' import { unwrapLink } from '../utilities.js'

4
packages/richtext-slate/src/field/elements/link/index.ts
View File

@@ -4,11 +4,9 @@ import { LinkButton } from './Button/index.js'
import { LinkElement } from './Element/index.js' import { LinkElement } from './Element/index.js'
import { WithLinks } from './WithLinks.js' import { WithLinks } from './WithLinks.js'
const link: RichTextCustomElement = { export const link: RichTextCustomElement = {
name: 'link', name: 'link',
Button: LinkButton, Button: LinkButton,
Element: LinkElement, Element: LinkElement,
plugins: [WithLinks], plugins: [WithLinks],
} }
export default link

2
packages/richtext-slate/src/field/elements/listTypes.tsx
View File

@@ -1 +1 @@
export default ['ol', 'ul'] export const listTypes = ['ol', 'ul']

8
packages/richtext-slate/src/field/elements/ol/index.tsx
View File

@@ -2,13 +2,13 @@ import React from 'react'
import type { RichTextCustomElement } from '../../../types.d.ts' import type { RichTextCustomElement } from '../../../types.d.ts'
import OLIcon from '../../icons/OrderedList/index.js' import { OLIcon } from '../../icons/OrderedList/index.js'
import ListButton from '../ListButton.js' import { ListButton } from '../ListButton.js'
import { OrderedList } from './OrderedList.js' import { OrderedList } from './OrderedList.js'
const name = 'ol' const name = 'ol'
const ol: RichTextCustomElement = { export const ol: RichTextCustomElement = {
name, name,
Button: () => ( Button: () => (
<ListButton format={name}> <ListButton format={name}>
@@ -17,5 +17,3 @@ const ol: RichTextCustomElement = {
), ),
Element: OrderedList, Element: OrderedList,
} }
export default ol

6
packages/richtext-slate/src/field/elements/relationship/Button/index.tsx
View File

@@ -4,8 +4,8 @@ import { useListDrawer, useTranslation } from '@payloadcms/ui'
import React, { Fragment, useCallback, useEffect, useState } from 'react' import React, { Fragment, useCallback, useEffect, useState } from 'react'
import { ReactEditor, useSlate } from 'slate-react' import { ReactEditor, useSlate } from 'slate-react'
import RelationshipIcon from '../../../icons/Relationship/index.js' import { RelationshipIcon } from '../../../icons/Relationship/index.js'
import ElementButton from '../../Button.js' import { ElementButton } from '../../Button.js'
import { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js' import { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js'
import { injectVoidElement } from '../../injectVoid.js' import { injectVoidElement } from '../../injectVoid.js'
import './index.scss' import './index.scss'
@@ -81,7 +81,7 @@ const RelationshipButton: React.FC<Props> = ({ enabledCollectionSlugs }) => {
) )
} }
export default (props: Props): React.ReactNode => { export const Button = (props: Props): React.ReactNode => {
return ( return (
<EnabledRelationshipsCondition {...props}> <EnabledRelationshipsCondition {...props}>
<RelationshipButton {...props} /> <RelationshipButton {...props} />

6
packages/richtext-slate/src/field/elements/relationship/Element/index.tsx
View File

@@ -32,7 +32,7 @@ type Props = FormFieldBase & {
richTextComponentMap: Map<string, React.ReactNode> richTextComponentMap: Map<string, React.ReactNode>
} }
const Element: React.FC<Props> = () => { const RelationshipElement: React.FC<Props> = () => {
const { const {
attributes, attributes,
children, children,
@@ -191,10 +191,10 @@ const Element: React.FC<Props> = () => {
) )
} }
export default (props: Props): React.ReactNode => { export const Element = (props: Props): React.ReactNode => {
return ( return (
<EnabledRelationshipsCondition {...props}> <EnabledRelationshipsCondition {...props}>
<Element {...props} /> <RelationshipElement {...props} />
</EnabledRelationshipsCondition> </EnabledRelationshipsCondition>
) )
} }

8
packages/richtext-slate/src/field/elements/relationship/index.ts
View File

@@ -1,15 +1,13 @@
import type { RichTextCustomElement } from '../../../types.d.ts' import type { RichTextCustomElement } from '../../../types.d.ts'
import Button from './Button/index.js' import { Button } from './Button/index.js'
import Element from './Element/index.js' import { Element } from './Element/index.js'
import { WithRelationship } from './plugin.js' import { WithRelationship } from './plugin.js'
import { relationshipName } from './shared.js' import { relationshipName } from './shared.js'
const relationship: RichTextCustomElement = { export const relationship: RichTextCustomElement = {
name: relationshipName, name: relationshipName,
Button, Button,
Element, Element,
plugins: [WithRelationship], plugins: [WithRelationship],
} }
export default relationship

12
packages/richtext-slate/src/field/elements/textAlign/index.tsx
View File

@@ -2,12 +2,12 @@ import React from 'react'
import type { RichTextCustomElement } from '../../../types.d.ts' import type { RichTextCustomElement } from '../../../types.d.ts'
import AlignCenterIcon from '../../icons/AlignCenter/index.js' import { AlignCenterIcon } from '../../icons/AlignCenter/index.js'
import AlignLeftIcon from '../../icons/AlignLeft/index.js' import { AlignLeftIcon } from '../../icons/AlignLeft/index.js'
import AlignRightIcon from '../../icons/AlignRight/index.js' import { AlignRightIcon } from '../../icons/AlignRight/index.js'
import ElementButton from '../Button.js' import { ElementButton } from '../Button.js'
const alignment: RichTextCustomElement = { export const textAlign: RichTextCustomElement = {
name: 'alignment', name: 'alignment',
Button: () => { Button: () => {
return ( return (
@@ -26,5 +26,3 @@ const alignment: RichTextCustomElement = {
}, },
Element: () => null, Element: () => null,
} }
export default alignment

6
packages/richtext-slate/src/field/elements/toggle.tsx
View File

@@ -2,10 +2,10 @@
import { Editor, Transforms } from 'slate' import { Editor, Transforms } from 'slate'
import { ReactEditor } from 'slate-react' import { ReactEditor } from 'slate-react'
import isElementActive from './isActive.js' import { isElementActive } from './isActive.js'
import { isWithinListItem } from './isWithinListItem.js' import { isWithinListItem } from './isWithinListItem.js'
const toggleElement = (editor: Editor, format: string, blockType = 'type'): void => { export const toggleElement = (editor: Editor, format: string, blockType = 'type'): void => {
const isActive = isElementActive(editor, format, blockType) const isActive = isElementActive(editor, format, blockType)
const formatByBlockType = { const formatByBlockType = {
@@ -35,5 +35,3 @@ const toggleElement = (editor: Editor, format: string, blockType = 'type'): void
ReactEditor.focus(editor) ReactEditor.focus(editor)
} }
export default toggleElement

8
packages/richtext-slate/src/field/elements/toggleList.tsx
View File

@@ -2,11 +2,11 @@ import { Editor, Element, Node, Text, Transforms } from 'slate'
import { ReactEditor } from 'slate-react' import { ReactEditor } from 'slate-react'
import { getCommonBlock } from './getCommonBlock.js' import { getCommonBlock } from './getCommonBlock.js'
import isListActive from './isListActive.js' import { isListActive } from './isListActive.js'
import listTypes from './listTypes.js' import { listTypes } from './listTypes.js'
import { unwrapList } from './unwrapList.js' import { unwrapList } from './unwrapList.js'
const toggleList = (editor: Editor, format: string): void => { export const toggleList = (editor: Editor, format: string): void => {
let currentListFormat: string let currentListFormat: string
if (isListActive(editor, 'ol')) currentListFormat = 'ol' if (isListActive(editor, 'ol')) currentListFormat = 'ol'
@@ -96,5 +96,3 @@ const toggleList = (editor: Editor, format: string): void => {
ReactEditor.focus(editor) ReactEditor.focus(editor)
} }
export default toggleList

8
packages/richtext-slate/src/field/elements/ul/index.tsx
View File

@@ -2,13 +2,13 @@ import React from 'react'
import type { RichTextCustomElement } from '../../../types.d.ts' import type { RichTextCustomElement } from '../../../types.d.ts'
import ULIcon from '../../icons/UnorderedList/index.js' import { ULIcon } from '../../icons/UnorderedList/index.js'
import ListButton from '../ListButton.js' import { ListButton } from '../ListButton.js'
import { UnorderedList } from './UnorderedList.js' import { UnorderedList } from './UnorderedList.js'
const name = 'ul' const name = 'ul'
const ul: RichTextCustomElement = { export const ul: RichTextCustomElement = {
name, name,
Button: () => ( Button: () => (
<ListButton format={name}> <ListButton format={name}>
@@ -17,5 +17,3 @@ const ul: RichTextCustomElement = {
), ),
Element: UnorderedList, Element: UnorderedList,
} }
export default ul

2
packages/richtext-slate/src/field/elements/unwrapList.ts
View File

@@ -3,7 +3,7 @@ import type { Path } from 'slate'
import { Editor, Element, Transforms } from 'slate' import { Editor, Element, Transforms } from 'slate'
import { areAllChildrenElements } from './areAllChildrenElements.js' import { areAllChildrenElements } from './areAllChildrenElements.js'
import listTypes from './listTypes.js' import { listTypes } from './listTypes.js'
export const unwrapList = (editor: Editor, atPath: Path): void => { export const unwrapList = (editor: Editor, atPath: Path): void => {
// Remove type for any nodes that have text children - // Remove type for any nodes that have text children -

6
packages/richtext-slate/src/field/elements/upload/Button/index.tsx
View File

@@ -4,8 +4,8 @@ import { useListDrawer, useTranslation } from '@payloadcms/ui'
import React, { Fragment, useCallback } from 'react' import React, { Fragment, useCallback } from 'react'
import { ReactEditor, useSlate } from 'slate-react' import { ReactEditor, useSlate } from 'slate-react'
import UploadIcon from '../../../icons/Upload/index.js' import { UploadIcon } from '../../../icons/Upload/index.js'
import ElementButton from '../../Button.js' import { ElementButton } from '../../Button.js'
import { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js' import { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js'
import { injectVoidElement } from '../../injectVoid.js' import { injectVoidElement } from '../../injectVoid.js'
import './index.scss' import './index.scss'
@@ -74,7 +74,7 @@ const UploadButton: React.FC<ButtonProps> = ({ enabledCollectionSlugs }) => {
) )
} }
export default (props: ButtonProps): React.ReactNode => { export const Button = (props: ButtonProps): React.ReactNode => {
return ( return (
<EnabledRelationshipsCondition {...props} uploads> <EnabledRelationshipsCondition {...props} uploads>
<UploadButton {...props} /> <UploadButton {...props} />

6
packages/richtext-slate/src/field/elements/upload/Element/index.tsx
View File

@@ -39,7 +39,7 @@ type Props = FormFieldBase & {
richTextComponentMap: Map<string, React.ReactNode> richTextComponentMap: Map<string, React.ReactNode>
} }
const Element: React.FC<Props & { enabledCollectionSlugs?: string[] }> = ({ const UploadElement: React.FC<Props & { enabledCollectionSlugs?: string[] }> = ({
enabledCollectionSlugs, enabledCollectionSlugs,
}) => { }) => {
const { const {
@@ -220,10 +220,10 @@ const Element: React.FC<Props & { enabledCollectionSlugs?: string[] }> = ({
) )
} }
export default (props: Props): React.ReactNode => { export const Element = (props: Props): React.ReactNode => {
return ( return (
<EnabledRelationshipsCondition {...props} uploads> <EnabledRelationshipsCondition {...props} uploads>
<Element {...props} /> <UploadElement {...props} />
</EnabledRelationshipsCondition> </EnabledRelationshipsCondition>
) )
} }

8
packages/richtext-slate/src/field/elements/upload/index.ts
View File

@@ -1,15 +1,13 @@
import type { RichTextCustomElement } from '../../../types.d.ts' import type { RichTextCustomElement } from '../../../types.d.ts'
import Button from './Button/index.js' import { Button } from './Button/index.js'
import Element from './Element/index.js' import { Element } from './Element/index.js'
import { WithUpload } from './plugin.js' import { WithUpload } from './plugin.js'
import { uploadName } from './shared.js' import { uploadName } from './shared.js'
const upload: RichTextCustomElement = { export const upload: RichTextCustomElement = {
name: uploadName, name: uploadName,
Button, Button,
Element, Element,
plugins: [WithUpload], plugins: [WithUpload],
} }
export default upload

28
packages/richtext-slate/src/field/enablePlugins.tsx
View File

@@ -1,28 +0,0 @@
import elementTypes from './elements/index.js'
import leafTypes from './leaves/index.js'
const addPluginReducer = (EditorWithPlugins, plugin) => {
if (typeof plugin === 'function') return plugin(EditorWithPlugins)
return EditorWithPlugins
}
const enablePlugins = (CreatedEditor, functions) =>
functions.reduce((CreatedEditorWithPlugins, func) => {
if (typeof func === 'object' && Array.isArray(func.plugins)) {
return func.plugins.reduce(addPluginReducer, CreatedEditorWithPlugins)
}
if (typeof func === 'string') {
if (elementTypes[func] && elementTypes[func].plugins) {
return elementTypes[func].plugins.reduce(addPluginReducer, CreatedEditorWithPlugins)
}
if (leafTypes[func] && leafTypes[func].plugins) {
return leafTypes[func].plugins.reduce(addPluginReducer, CreatedEditorWithPlugins)
}
}
return CreatedEditorWithPlugins
}, CreatedEditor)
export default enablePlugins

2
packages/richtext-slate/src/field/hotkeys.tsx
View File

@@ -1,4 +1,4 @@
export default { export const hotkeys = {
'mod+`': 'code', 'mod+`': 'code',
'mod+b': 'bold', 'mod+b': 'bold',
'mod+i': 'italic', 'mod+i': 'italic',

4
packages/richtext-slate/src/field/icons/AlignCenter/index.tsx
View File

@@ -1,9 +1,7 @@
import React from 'react' import React from 'react'
const AlignCenterIcon: React.FC = () => ( export const AlignCenterIcon: React.FC = () => (
<svg fill="currentColor" height="1em" viewBox="0 0 1024 1024" width="1em"> <svg fill="currentColor" height="1em" viewBox="0 0 1024 1024" width="1em">
<path d="M264 230h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H264c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm496 424c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H264c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496zm144 140H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-424H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" /> <path d="M264 230h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H264c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm496 424c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H264c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496zm144 140H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-424H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" />
</svg> </svg>
) )
export default AlignCenterIcon

4
packages/richtext-slate/src/field/icons/AlignLeft/index.tsx
View File

@@ -1,9 +1,7 @@
import React from 'react' import React from 'react'
const AlignLeftIcon: React.FC = () => ( export const AlignLeftIcon: React.FC = () => (
<svg fill="currentColor" height="1em" viewBox="0 0 1024 1024" width="1em"> <svg fill="currentColor" height="1em" viewBox="0 0 1024 1024" width="1em">
<path d="M120 230h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0 424h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm784 140H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-424H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" /> <path d="M120 230h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0 424h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm784 140H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-424H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" />
</svg> </svg>
) )
export default AlignLeftIcon

4
packages/richtext-slate/src/field/icons/AlignRight/index.tsx
View File

@@ -1,9 +1,7 @@
import React from 'react' import React from 'react'
const AlignRightIcon: React.FC = () => ( export const AlignRightIcon: React.FC = () => (
<svg fill="currentColor" height="1em" viewBox="0 0 1024 1024" width="1em"> <svg fill="currentColor" height="1em" viewBox="0 0 1024 1024" width="1em">
<path d="M904 158H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 424H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 212H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-424H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" /> <path d="M904 158H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 424H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 212H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-424H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" />
</svg> </svg>
) )
export default AlignRightIcon

4
packages/richtext-slate/src/field/icons/Blockquote/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
const BlockquoteIcon: React.FC = () => ( export const BlockquoteIcon: React.FC = () => (
<svg <svg
aria-hidden="true" aria-hidden="true"
className="graphic blockquote-icon" className="graphic blockquote-icon"
@@ -13,5 +13,3 @@ const BlockquoteIcon: React.FC = () => (
<path d="M0 0h24v24H0z" fill="none" /> <path d="M0 0h24v24H0z" fill="none" />
</svg> </svg>
) )
export default BlockquoteIcon

4
packages/richtext-slate/src/field/icons/Bold/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
const BoldIcon: React.FC = () => ( export const BoldIcon: React.FC = () => (
<svg <svg
aria-hidden="true" aria-hidden="true"
className="graphic bold-icon" className="graphic bold-icon"
@@ -16,5 +16,3 @@ const BoldIcon: React.FC = () => (
<path d="M0 0h24v24H0z" fill="none" /> <path d="M0 0h24v24H0z" fill="none" />
</svg> </svg>
) )
export default BoldIcon

4
packages/richtext-slate/src/field/icons/Code/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
const CodeIcon: React.FC = () => ( export const CodeIcon: React.FC = () => (
<svg <svg
aria-hidden="true" aria-hidden="true"
className="graphic inline-code-icon" className="graphic inline-code-icon"
@@ -15,5 +15,3 @@ const CodeIcon: React.FC = () => (
/> />
</svg> </svg>
) )
export default CodeIcon

4
packages/richtext-slate/src/field/icons/IndentLeft/index.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react'
import './index.scss' import './index.scss'
const IndentLeft: React.FC = () => ( export const IndentLeft: React.FC = () => (
<svg className="icon icon--indent-left" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"> <svg className="icon icon--indent-left" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<path className="fill" d="M16.005 9.61502L21.005 13.1864L21.005 6.04361L16.005 9.61502Z" /> <path className="fill" d="M16.005 9.61502L21.005 13.1864L21.005 6.04361L16.005 9.61502Z" />
<rect className="fill" height="2.15625" width="9.0675" x="5" y="5.68199" /> <rect className="fill" height="2.15625" width="9.0675" x="5" y="5.68199" />
@@ -10,5 +10,3 @@ const IndentLeft: React.FC = () => (
<rect className="fill" height="2.15625" width="16.005" x="5" y="17.2656" /> <rect className="fill" height="2.15625" width="16.005" x="5" y="17.2656" />
</svg> </svg>
) )
export default IndentLeft

4
packages/richtext-slate/src/field/icons/IndentRight/index.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react'
import './index.scss' import './index.scss'
const IndentRight: React.FC = () => ( export const IndentRight: React.FC = () => (
<svg className="icon icon--indent-right" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"> <svg className="icon icon--indent-right" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<path className="fill" d="M10 9.61502L5 6.04361L5 13.1864L10 9.61502Z" /> <path className="fill" d="M10 9.61502L5 6.04361L5 13.1864L10 9.61502Z" />
<rect className="fill" height="2.15625" width="9.0675" x="11.9375" y="5.68199" /> <rect className="fill" height="2.15625" width="9.0675" x="11.9375" y="5.68199" />
@@ -10,5 +10,3 @@ const IndentRight: React.FC = () => (
<rect className="fill" height="2.15625" width="16.005" x="5" y="17.2656" /> <rect className="fill" height="2.15625" width="16.005" x="5" y="17.2656" />
</svg> </svg>
) )
export default IndentRight

4
packages/richtext-slate/src/field/icons/Italic/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
const ItalicIcon: React.FC = () => ( export const ItalicIcon: React.FC = () => (
<svg <svg
aria-hidden="true" aria-hidden="true"
className="graphic italic-icon" className="graphic italic-icon"
@@ -13,5 +13,3 @@ const ItalicIcon: React.FC = () => (
<path className="fill" d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" /> <path className="fill" d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" />
</svg> </svg>
) )
export default ItalicIcon

4
packages/richtext-slate/src/field/icons/Link/index.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react'
import './index.scss' import './index.scss'
const LinkIcon: React.FC = () => ( export const LinkIcon: React.FC = () => (
<svg <svg
aria-hidden="true" aria-hidden="true"
className="graphic link icon icon--link" className="graphic link icon icon--link"
@@ -18,5 +18,3 @@ const LinkIcon: React.FC = () => (
/> />
</svg> </svg>
) )
export default LinkIcon

4
packages/richtext-slate/src/field/icons/OrderedList/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
const OrderedListIcon: React.FC = () => ( export const OLIcon: React.FC = () => (
<svg <svg
aria-hidden="true" aria-hidden="true"
className="graphic ordered-list-icon" className="graphic ordered-list-icon"
@@ -16,5 +16,3 @@ const OrderedListIcon: React.FC = () => (
<path d="M0 0h24v24H0z" fill="none" /> <path d="M0 0h24v24H0z" fill="none" />
</svg> </svg>
) )
export default OrderedListIcon

4
packages/richtext-slate/src/field/icons/Relationship/index.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react'
import './index.scss' import './index.scss'
const Relationship: React.FC = () => ( export const RelationshipIcon: React.FC = () => (
<svg className="icon icon--relationship" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"> <svg className="icon icon--relationship" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<path <path
className="stroke" className="stroke"
@@ -13,5 +13,3 @@ const Relationship: React.FC = () => (
<line className="stroke" strokeWidth="2" x1="18.7061" x2="13.0493" y1="6.40767" y2="12.0645" /> <line className="stroke" strokeWidth="2" x1="18.7061" x2="13.0493" y1="6.40767" y2="12.0645" />
</svg> </svg>
) )
export default Relationship

4
packages/richtext-slate/src/field/icons/Strikethrough/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
const StrikethroughIcon: React.FC = () => ( export const StrikethroughIcon: React.FC = () => (
<svg <svg
aria-hidden="true" aria-hidden="true"
className="graphic strikethrough-icon" className="graphic strikethrough-icon"
@@ -13,5 +13,3 @@ const StrikethroughIcon: React.FC = () => (
<path className="fill" d="M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z" /> <path className="fill" d="M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z" />
</svg> </svg>
) )
export default StrikethroughIcon

4
packages/richtext-slate/src/field/icons/Underline/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
const UnderlineIcon: React.FC = () => ( export const UnderlineIcon: React.FC = () => (
<svg <svg
aria-hidden="true" aria-hidden="true"
className="graphic underline-icon" className="graphic underline-icon"
@@ -16,5 +16,3 @@ const UnderlineIcon: React.FC = () => (
/> />
</svg> </svg>
) )
export default UnderlineIcon

4
packages/richtext-slate/src/field/icons/UnorderedList/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
const UnorderedListIcon: React.FC = () => ( export const ULIcon: React.FC = () => (
<svg <svg
aria-hidden="true" aria-hidden="true"
className="graphic unordered-list-icon" className="graphic unordered-list-icon"
@@ -16,5 +16,3 @@ const UnorderedListIcon: React.FC = () => (
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
</svg> </svg>
) )
export default UnorderedListIcon

4
packages/richtext-slate/src/field/icons/Upload/index.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react'
import './index.scss' import './index.scss'
const Upload: React.FC = () => ( export const UploadIcon: React.FC = () => (
<svg className="icon icon--upload" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"> <svg className="icon icon--upload" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<path <path
className="fill" className="fill"
@@ -11,5 +11,3 @@ const Upload: React.FC = () => (
<circle className="fill" cx="9.69" cy="9.47" r="0.97" /> <circle className="fill" cx="9.69" cy="9.47" r="0.97" />
</svg> </svg>
) )
export default Upload

4
packages/richtext-slate/src/field/icons/headings/H1/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
const H1Icon: React.FC = () => ( export const H1Icon: React.FC = () => (
<svg <svg
aria-hidden="true" aria-hidden="true"
className="graphic h1-icon" className="graphic h1-icon"
@@ -16,5 +16,3 @@ const H1Icon: React.FC = () => (
/> />
</svg> </svg>
) )
export default H1Icon

4
packages/richtext-slate/src/field/icons/headings/H2/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
const H2Icon: React.FC = () => ( export const H2Icon: React.FC = () => (
<svg <svg
aria-hidden="true" aria-hidden="true"
className="graphic h2-icon" className="graphic h2-icon"
@@ -16,5 +16,3 @@ const H2Icon: React.FC = () => (
/> />
</svg> </svg>
) )
export default H2Icon

4
packages/richtext-slate/src/field/icons/headings/H3/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
const H3Icon: React.FC = () => ( export const H3Icon: React.FC = () => (
<svg <svg
aria-hidden="true" aria-hidden="true"
className="graphic h3-icon" className="graphic h3-icon"
@@ -16,5 +16,3 @@ const H3Icon: React.FC = () => (
/> />
</svg> </svg>
) )
export default H3Icon

4
packages/richtext-slate/src/field/icons/headings/H4/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
const H4Icon: React.FC = () => ( export const H4Icon: React.FC = () => (
<svg <svg
aria-hidden="true" aria-hidden="true"
className="graphic h4-icon" className="graphic h4-icon"
@@ -16,5 +16,3 @@ const H4Icon: React.FC = () => (
/> />
</svg> </svg>
) )
export default H4Icon

4
packages/richtext-slate/src/field/icons/headings/H5/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
const H5Icon: React.FC = () => ( export const H5Icon: React.FC = () => (
<svg <svg
aria-hidden="true" aria-hidden="true"
className="graphic h5-icon" className="graphic h5-icon"
@@ -16,5 +16,3 @@ const H5Icon: React.FC = () => (
/> />
</svg> </svg>
) )
export default H5Icon

4
packages/richtext-slate/src/field/icons/headings/H6/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
const H5Icon: React.FC = () => ( export const H6Icon: React.FC = () => (
<svg <svg
aria-hidden="true" aria-hidden="true"
className="graphic h6-icon" className="graphic h6-icon"
@@ -16,5 +16,3 @@ const H5Icon: React.FC = () => (
/> />
</svg> </svg>
) )
export default H5Icon

15
packages/richtext-slate/src/field/icons/headings/index.tsx
View File

@@ -1,15 +0,0 @@
import H1 from './H1/index.js'
import H2 from './H2/index.js'
import H3 from './H3/index.js'
import H4 from './H4/index.js'
import H5 from './H5/index.js'
import H6 from './H6/index.js'
export default {
H1,
H2,
H3,
H4,
H5,
H6,
}

6
packages/richtext-slate/src/field/index.tsx
View File

@@ -11,7 +11,11 @@ import type { EnabledFeatures } from './types.d.ts'
import { createFeatureMap } from './createFeatureMap.js' import { createFeatureMap } from './createFeatureMap.js'
const RichTextEditor = lazy(() => import('./RichText.js')) const RichTextEditor = lazy(() =>
import('./RichText.js').then((module) => ({
default: module.RichText,
})),
)
export const RichTextField: React.FC< export const RichTextField: React.FC<
FormFieldBase & { FormFieldBase & {

10
packages/richtext-slate/src/field/leaves/Button.tsx
View File

@@ -3,17 +3,17 @@ import React from 'react'
import { useSlate } from 'slate-react' import { useSlate } from 'slate-react'
import '../buttons.scss' import '../buttons.scss'
import isMarkActive from './isActive.js' import { isLeafActive } from './isActive.js'
import toggleLeaf from './toggle.js' import { toggleLeaf } from './toggle.js'
const baseClass = 'rich-text__button' const baseClass = 'rich-text__button'
const LeafButton = ({ children, format }) => { export const LeafButton = ({ children, format }) => {
const editor = useSlate() const editor = useSlate()
return ( return (
<button <button
className={[baseClass, isMarkActive(editor, format) && `${baseClass}__button--active`] className={[baseClass, isLeafActive(editor, format) && `${baseClass}__button--active`]
.filter(Boolean) .filter(Boolean)
.join(' ')} .join(' ')}
onMouseDown={(event) => { onMouseDown={(event) => {
@@ -26,5 +26,3 @@ const LeafButton = ({ children, format }) => {
</button> </button>
) )
} }
export default LeafButton

6
packages/richtext-slate/src/field/leaves/bold/index.tsx
View File

@@ -2,11 +2,11 @@ import React from 'react'
import type { RichTextCustomLeaf } from '../../../types.d.ts' import type { RichTextCustomLeaf } from '../../../types.d.ts'
import BoldIcon from '../../icons/Bold/index.js' import { BoldIcon } from '../../icons/Bold/index.js'
import LeafButton from '../Button.js' import { LeafButton } from '../Button.js'
import { Bold } from './Bold/index.js' import { Bold } from './Bold/index.js'
const bold: RichTextCustomLeaf = { export const bold: RichTextCustomLeaf = {
name: 'bold', name: 'bold',
Button: () => ( Button: () => (
<LeafButton format="bold"> <LeafButton format="bold">

8
packages/richtext-slate/src/field/leaves/code/index.tsx
View File

@@ -2,11 +2,11 @@ import React from 'react'
import type { RichTextCustomLeaf } from '../../../types.d.ts' import type { RichTextCustomLeaf } from '../../../types.d.ts'
import CodeIcon from '../../icons/Code/index.js' import { CodeIcon } from '../../icons/Code/index.js'
import LeafButton from '../Button.js' import { LeafButton } from '../Button.js'
import { Code } from './Code/index.js' import { Code } from './Code/index.js'
const code: RichTextCustomLeaf = { export const code: RichTextCustomLeaf = {
name: 'code', name: 'code',
Button: () => ( Button: () => (
<LeafButton format="code"> <LeafButton format="code">
@@ -15,5 +15,3 @@ const code: RichTextCustomLeaf = {
), ),
Leaf: Code, Leaf: Code,
} }
export default code

14
packages/richtext-slate/src/field/leaves/index.tsx
View File

@@ -1,17 +1,15 @@
import type { RichTextCustomLeaf } from '../../types.d.ts' import type { RichTextCustomLeaf } from '../../types.d.ts'
import bold from './bold/index.js' import { bold } from './bold/index.js'
import code from './code/index.js' import { code } from './code/index.js'
import italic from './italic/index.js' import { italic } from './italic/index.js'
import strikethrough from './strikethrough/index.js' import { strikethrough } from './strikethrough/index.js'
import underline from './underline/index.js' import { underline } from './underline/index.js'
const defaultLeaves: Record<string, RichTextCustomLeaf> = { export const defaultLeaves: Record<string, RichTextCustomLeaf> = {
bold, bold,
code, code,
italic, italic,
strikethrough, strikethrough,
underline, underline,
} }
export default defaultLeaves

4
packages/richtext-slate/src/field/leaves/isActive.tsx
View File

@@ -1,8 +1,6 @@
import { Editor } from 'slate' import { Editor } from 'slate'
const isLeafActive = (editor, format) => { export const isLeafActive = (editor, format) => {
const leaves = Editor.marks(editor) const leaves = Editor.marks(editor)
return leaves ? leaves[format] === true : false return leaves ? leaves[format] === true : false
} }
export default isLeafActive

8
packages/richtext-slate/src/field/leaves/italic/index.tsx
View File

@@ -2,11 +2,11 @@ import React from 'react'
import type { RichTextCustomLeaf } from '../../../types.d.ts' import type { RichTextCustomLeaf } from '../../../types.d.ts'
import ItalicIcon from '../../icons/Italic/index.js' import { ItalicIcon } from '../../icons/Italic/index.js'
import LeafButton from '../Button.js' import { LeafButton } from '../Button.js'
import { Italic } from './Italic/index.js' import { Italic } from './Italic/index.js'
const italic: RichTextCustomLeaf = { export const italic: RichTextCustomLeaf = {
name: 'italic', name: 'italic',
Button: () => ( Button: () => (
<LeafButton format="italic"> <LeafButton format="italic">
@@ -15,5 +15,3 @@ const italic: RichTextCustomLeaf = {
), ),
Leaf: Italic, Leaf: Italic,
} }
export default italic

8
packages/richtext-slate/src/field/leaves/strikethrough/index.tsx
View File

@@ -2,11 +2,11 @@ import React from 'react'
import type { RichTextCustomLeaf } from '../../../types.d.ts' import type { RichTextCustomLeaf } from '../../../types.d.ts'
import StrikethroughIcon from '../../icons/Strikethrough/index.js' import { StrikethroughIcon } from '../../icons/Strikethrough/index.js'
import LeafButton from '../Button.js' import { LeafButton } from '../Button.js'
import { Strikethrough } from './Strikethrough/index.js' import { Strikethrough } from './Strikethrough/index.js'
const strikethrough: RichTextCustomLeaf = { export const strikethrough: RichTextCustomLeaf = {
name: 'strikethrough', name: 'strikethrough',
Button: () => ( Button: () => (
<LeafButton format="strikethrough"> <LeafButton format="strikethrough">
@@ -15,5 +15,3 @@ const strikethrough: RichTextCustomLeaf = {
), ),
Leaf: Strikethrough, Leaf: Strikethrough,
} }
export default strikethrough

6
packages/richtext-slate/src/field/leaves/toggle.tsx
View File

@@ -1,8 +1,8 @@
import { Editor } from 'slate' import { Editor } from 'slate'
import isLeafActive from './isActive.js' import { isLeafActive } from './isActive.js'
const toggleLeaf = (editor, format) => { export const toggleLeaf = (editor, format) => {
const isActive = isLeafActive(editor, format) const isActive = isLeafActive(editor, format)
if (isActive) { if (isActive) {
@@ -11,5 +11,3 @@ const toggleLeaf = (editor, format) => {
Editor.addMark(editor, format, true) Editor.addMark(editor, format, true)
} }
} }
export default toggleLeaf

8
packages/richtext-slate/src/field/leaves/underline/index.tsx
View File

@@ -2,11 +2,11 @@ import React from 'react'
import type { RichTextCustomLeaf } from '../../../types.d.ts' import type { RichTextCustomLeaf } from '../../../types.d.ts'
import UnderlineIcon from '../../icons/Underline/index.js' import { UnderlineIcon } from '../../icons/Underline/index.js'
import LeafButton from '../Button.js' import { LeafButton } from '../Button.js'
import { Underline } from './Underline/index.js' import { Underline } from './Underline/index.js'
const underline: RichTextCustomLeaf = { export const underline: RichTextCustomLeaf = {
name: 'underline', name: 'underline',
Button: () => ( Button: () => (
<LeafButton format="underline"> <LeafButton format="underline">
@@ -15,5 +15,3 @@ const underline: RichTextCustomLeaf = {
), ),
Leaf: Underline, Leaf: Underline,
} }
export default underline

25
packages/richtext-slate/src/field/mergeCustomFunctions.tsx
View File

@@ -1,25 +0,0 @@
export default (enabledFunctions, builtInFunctions) => {
const formattedEnabledFunctions = [...enabledFunctions]
if (enabledFunctions.indexOf('ul') > -1 || enabledFunctions.indexOf('ol') > -1) {
formattedEnabledFunctions.push('li')
}
return formattedEnabledFunctions.reduce((resultingFunctions, func) => {
if (typeof func === 'object' && func.name) {
return {
...resultingFunctions,
[func.name]: func,
}
}
if (typeof func === 'string' && builtInFunctions[func]) {
return {
...resultingFunctions,
[func]: builtInFunctions[func],
}
}
return resultingFunctions
}, {})
}

4
packages/richtext-slate/src/field/plugins/withEnterBreakOut.ts
View File

@@ -1,9 +1,7 @@
const enterBreakOutTypes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'link'] const enterBreakOutTypes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'link']
const withEnterBreakOut = (editor) => { export const withEnterBreakOut = (editor) => {
const newEditor = editor const newEditor = editor
newEditor.shouldBreakOutOnEnter = (element) => enterBreakOutTypes.includes(String(element.type)) newEditor.shouldBreakOutOnEnter = (element) => enterBreakOutTypes.includes(String(element.type))
return newEditor return newEditor
} }
export default withEnterBreakOut

4
packages/richtext-slate/src/field/plugins/withHTML.tsx
View File

@@ -72,7 +72,7 @@ const deserialize = (el) => {
return children return children
} }
const withHTML = (incomingEditor) => { export const withHTML = (incomingEditor) => {
const { insertData } = incomingEditor const { insertData } = incomingEditor
const editor = incomingEditor const editor = incomingEditor
@@ -94,5 +94,3 @@ const withHTML = (incomingEditor) => {
return editor return editor
} }
export default withHTML

4
packages/richtext-slate/src/generateComponentMap.tsx
View File

@@ -8,11 +8,11 @@ import React from 'react'
import type { AdapterArguments, RichTextCustomElement, RichTextCustomLeaf } from './types.d.ts' import type { AdapterArguments, RichTextCustomElement, RichTextCustomLeaf } from './types.d.ts'
import elementTypes from './field/elements/index.js' import { elements as elementTypes } from './field/elements/index.js'
import { linkFieldsSchemaPath } from './field/elements/link/shared.js' import { linkFieldsSchemaPath } from './field/elements/link/shared.js'
import { transformExtraFields } from './field/elements/link/utilities.js' import { transformExtraFields } from './field/elements/link/utilities.js'
import { uploadFieldsSchemaPath } from './field/elements/upload/shared.js' import { uploadFieldsSchemaPath } from './field/elements/upload/shared.js'
import leafTypes from './field/leaves/index.js' import { defaultLeaves as leafTypes } from './field/leaves/index.js'
export const getGenerateComponentMap = export const getGenerateComponentMap =
(args: AdapterArguments): RichTextAdapter['generateComponentMap'] => (args: AdapterArguments): RichTextAdapter['generateComponentMap'] =>

2
packages/richtext-slate/src/generateSchemaMap.ts
View File

@@ -6,7 +6,7 @@ import { sanitizeFields } from 'payload/config'
import type { AdapterArguments, RichTextCustomElement } from './types.d.ts' import type { AdapterArguments, RichTextCustomElement } from './types.d.ts'
import elementTypes from './field/elements/index.js' import { elements as elementTypes } from './field/elements/index.js'
import { linkFieldsSchemaPath } from './field/elements/link/shared.js' import { linkFieldsSchemaPath } from './field/elements/link/shared.js'
import { transformExtraFields } from './field/elements/link/utilities.js' import { transformExtraFields } from './field/elements/link/utilities.js'
import { uploadFieldsSchemaPath } from './field/elements/upload/shared.js' import { uploadFieldsSchemaPath } from './field/elements/upload/shared.js'

6
packages/richtext-slate/src/index.tsx
View File

@@ -64,10 +64,10 @@ export function slateEditor(args: AdapterArguments): RichTextAdapter<any[], Adap
} }
} }
export { default as ElementButton } from './field/elements/Button.js' export { ElementButton } from './field/elements/Button.js'
export { default as toggleElement } from './field/elements/toggle.js' export { toggleElement } from './field/elements/toggle.js'
export { default as LeafButton } from './field/leaves/Button.js' export { LeafButton } from './field/leaves/Button.js'
export type { export type {
AdapterArguments, AdapterArguments,
ElementNode, ElementNode,

26
packages/ui/src/elements/DocumentControls/index.tsx
View File

@@ -50,6 +50,7 @@ export const DocumentControls: React.FC<{
const config = useConfig() const config = useConfig()
const collectionConfig = config.collections.find((coll) => coll.slug === slug) const collectionConfig = config.collections.find((coll) => coll.slug === slug)
const globalConfig = config.globals.find((global) => global.slug === slug)
const { const {
admin: { dateFormat }, admin: { dateFormat },
@@ -83,9 +84,9 @@ export const DocumentControls: React.FC<{
</p> </p>
</li> </li>
)} )}
{(collectionConfig?.versions?.drafts || global?.versions?.drafts) && ( {(collectionConfig?.versions?.drafts || globalConfig?.versions?.drafts) && (
<Fragment> <Fragment>
{(global || (collectionConfig && isEditing)) && ( {(globalConfig || (collectionConfig && isEditing)) && (
<li <li
className={[`${baseClass}__status`, `${baseClass}__list-item`] className={[`${baseClass}__status`, `${baseClass}__list-item`]
.filter(Boolean) .filter(Boolean)
@@ -96,12 +97,12 @@ export const DocumentControls: React.FC<{
)} )}
{((collectionConfig?.versions?.drafts && {((collectionConfig?.versions?.drafts &&
collectionConfig?.versions?.drafts?.autosave) || collectionConfig?.versions?.drafts?.autosave) ||
(global?.versions?.drafts && global?.versions?.drafts?.autosave)) && (globalConfig?.versions?.drafts && globalConfig?.versions?.drafts?.autosave)) &&
hasSavePermission && ( hasSavePermission && (
<li className={`${baseClass}__list-item`}> <li className={`${baseClass}__list-item`}>
{/* <Autosave {/* <Autosave
collection={collectionConfig} collection={collectionConfig}
global={global} global={globalConfig}
id={id} id={id}
publishedDocUpdatedAt={data?.createdAt} publishedDocUpdatedAt={data?.createdAt}
/> */} /> */}
@@ -147,33 +148,34 @@ export const DocumentControls: React.FC<{
</div> </div>
<div className={`${baseClass}__controls-wrapper`}> <div className={`${baseClass}__controls-wrapper`}>
<div className={`${baseClass}__controls`}> <div className={`${baseClass}__controls`}>
{/* {(collectionConfig?.admin?.preview || global?.admin?.preview) && ( {/* {(collectionConfig?.admin?.preview || globalConfig?.admin?.preview) && (
<PreviewButton <PreviewButton
CustomComponent={ CustomComponent={
collectionConfig?.admin?.components?.edit?.PreviewButton || collectionConfig?.admin?.components?.edit?.PreviewButton ||
global?.admin?.components?.elements?.PreviewButton globalConfig?.admin?.components?.elements?.PreviewButton
} }
generatePreviewURL={collectionConfig?.admin?.preview || global?.admin?.preview} generatePreviewURL={collectionConfig?.admin?.preview || globalConfig?.admin?.preview}
/> />
)} */} )} */}
{hasSavePermission && ( {hasSavePermission && (
<React.Fragment> <React.Fragment>
{collectionConfig?.versions?.drafts || global?.versions?.drafts ? ( {collectionConfig?.versions?.drafts || globalConfig?.versions?.drafts ? (
<React.Fragment> <React.Fragment>
{((collectionConfig?.versions?.drafts && {((collectionConfig?.versions?.drafts &&
!collectionConfig?.versions?.drafts?.autosave) || !collectionConfig?.versions?.drafts?.autosave) ||
(global?.versions?.drafts && !global?.versions?.drafts?.autosave)) && ( (globalConfig?.versions?.drafts &&
!globalConfig?.versions?.drafts?.autosave)) && (
<SaveDraft <SaveDraft
CustomComponent={ CustomComponent={
collectionConfig?.admin?.components?.edit?.SaveDraftButton || collectionConfig?.admin?.components?.edit?.SaveDraftButton ||
global?.admin?.components?.elements?.SaveDraftButton globalConfig?.admin?.components?.elements?.SaveDraftButton
} }
/> />
)} )}
<Publish <Publish
CustomComponent={ CustomComponent={
collectionConfig?.admin?.components?.edit?.PublishButton || collectionConfig?.admin?.components?.edit?.PublishButton ||
global?.admin?.components?.elements?.PublishButton globalConfig?.admin?.components?.elements?.PublishButton
} }
/> />
</React.Fragment> </React.Fragment>
@@ -181,7 +183,7 @@ export const DocumentControls: React.FC<{
<Save <Save
CustomComponent={ CustomComponent={
collectionConfig?.admin?.components?.edit?.SaveButton || collectionConfig?.admin?.components?.edit?.SaveButton ||
global?.admin?.components?.elements?.SaveButton globalConfig?.admin?.components?.elements?.SaveButton
} }
/> />
)} )}