chore: removes default exports from slate
This commit is contained in:
@@ -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)
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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'
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>()
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -1 +1 @@
|
||||
export default ['ol', 'ul']
|
||||
export const listTypes = ['ol', 'ul']
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 -
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
@@ -1,4 +1,4 @@
|
||||
export default {
|
||||
export const hotkeys = {
|
||||
'mod+`': 'code',
|
||||
'mod+b': 'bold',
|
||||
'mod+i': 'italic',
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
@@ -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 & {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
}, {})
|
||||
}
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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'] =>
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user