chore: removes default exports from slate

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

View File

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

View File

@@ -8,12 +8,12 @@ import { useSlate } from 'slate-react'
import type { ButtonProps } from './types.d.ts'
import '../buttons.scss'
import isElementActive from './isActive.js'
import toggleElement from './toggle.js'
import { isElementActive } from './isActive.js'
import { toggleElement } from './toggle.js'
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 editor = useSlate()
@@ -49,5 +49,3 @@ const ElementButton: React.FC<ButtonProps> = (props) => {
</Tag>
)
}
export default ElementButton

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,6 +1,6 @@
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
const [match] = Array.from(
@@ -12,5 +12,3 @@ const isElementActive = (editor: Editor, format: string, blockType = 'type'): bo
return !!match
}
export default isElementActive

View File

@@ -2,7 +2,7 @@ import { Editor, Element } from 'slate'
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
const [topmostSelectedNode, topmostSelectedNodePath] = getCommonBlock(editor)
@@ -25,5 +25,3 @@ const isListActive = (editor: Editor, format: string): boolean => {
return !!match
}
export default isListActive

View File

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

View File

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

View File

@@ -16,10 +16,10 @@ import React, { Fragment, useState } from 'react'
import { Editor, Range, Transforms } from 'slate'
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 ElementButton from '../../Button.js'
import isElementActive from '../../isActive.js'
import { ElementButton } from '../../Button.js'
import { isElementActive } from '../../isActive.js'
import { LinkDrawer } from '../LinkDrawer/index.js'
import { linkFieldsSchemaPath } from '../shared.js'
import { unwrapLink } from '../utilities.js'

View File

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

View File

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

View File

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

View File

@@ -4,8 +4,8 @@ import { useListDrawer, useTranslation } from '@payloadcms/ui'
import React, { Fragment, useCallback, useEffect, useState } from 'react'
import { ReactEditor, useSlate } from 'slate-react'
import RelationshipIcon from '../../../icons/Relationship/index.js'
import ElementButton from '../../Button.js'
import { RelationshipIcon } from '../../../icons/Relationship/index.js'
import { ElementButton } from '../../Button.js'
import { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js'
import { injectVoidElement } from '../../injectVoid.js'
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 (
<EnabledRelationshipsCondition {...props}>
<RelationshipButton {...props} />

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -4,8 +4,8 @@ import { useListDrawer, useTranslation } from '@payloadcms/ui'
import React, { Fragment, useCallback } from 'react'
import { ReactEditor, useSlate } from 'slate-react'
import UploadIcon from '../../../icons/Upload/index.js'
import ElementButton from '../../Button.js'
import { UploadIcon } from '../../../icons/Upload/index.js'
import { ElementButton } from '../../Button.js'
import { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js'
import { injectVoidElement } from '../../injectVoid.js'
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 (
<EnabledRelationshipsCondition {...props} uploads>
<UploadButton {...props} />

View File

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

View File

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

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

View File

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

View File

@@ -1,9 +1,7 @@
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">
<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>
)
export default AlignCenterIcon

View File

@@ -1,9 +1,7 @@
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">
<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>
)
export default AlignLeftIcon

View File

@@ -1,9 +1,7 @@
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">
<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>
)
export default AlignRightIcon

View File

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

View File

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

View File

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

View File

@@ -2,7 +2,7 @@ import React from 'react'
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">
<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" />
@@ -10,5 +10,3 @@ const IndentLeft: React.FC = () => (
<rect className="fill" height="2.15625" width="16.005" x="5" y="17.2656" />
</svg>
)
export default IndentLeft

View File

@@ -2,7 +2,7 @@ import React from 'react'
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">
<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" />
@@ -10,5 +10,3 @@ const IndentRight: React.FC = () => (
<rect className="fill" height="2.15625" width="16.005" x="5" y="17.2656" />
</svg>
)
export default IndentRight

View File

@@ -1,6 +1,6 @@
import React from 'react'
const ItalicIcon: React.FC = () => (
export const ItalicIcon: React.FC = () => (
<svg
aria-hidden="true"
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" />
</svg>
)
export default ItalicIcon

View File

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

View File

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

View File

@@ -2,7 +2,7 @@ import React from 'react'
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">
<path
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" />
</svg>
)
export default Relationship

View File

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

View File

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

View File

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

View File

@@ -2,7 +2,7 @@ import React from 'react'
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">
<path
className="fill"
@@ -11,5 +11,3 @@ const Upload: React.FC = () => (
<circle className="fill" cx="9.69" cy="9.47" r="0.97" />
</svg>
)
export default Upload

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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,
}

View File

@@ -11,7 +11,11 @@ import type { EnabledFeatures } from './types.d.ts'
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<
FormFieldBase & {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,8 +1,8 @@
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)
if (isActive) {
@@ -11,5 +11,3 @@ const toggleLeaf = (editor, format) => {
Editor.addMark(editor, format, true)
}
}
export default toggleLeaf

View File

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

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
}, {})
}

View File

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

View File

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

View File

@@ -8,11 +8,11 @@ import React from 'react'
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 { transformExtraFields } from './field/elements/link/utilities.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 =
(args: AdapterArguments): RichTextAdapter['generateComponentMap'] =>

View File

@@ -6,7 +6,7 @@ import { sanitizeFields } from 'payload/config'
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 { transformExtraFields } from './field/elements/link/utilities.js'
import { uploadFieldsSchemaPath } from './field/elements/upload/shared.js'

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 { default as LeafButton } from './field/leaves/Button.js'
export { toggleElement } from './field/elements/toggle.js'
export { LeafButton } from './field/leaves/Button.js'
export type {
AdapterArguments,
ElementNode,

View File

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