@payloadcms/richtext-slate 3.0.0-beta.34 → 3.0.0-beta.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/field/RichText.js +6 -6
  2. package/dist/field/RichText.js.map +1 -1
  3. package/dist/field/index.scss +1 -0
  4. package/package.json +6 -6
package/dist/field/RichText.js CHANGED
@@ -272,17 +272,17 @@ const RichTextField = (props)=>{
272
272
  ...style,
273
273
  width
274
274
  }
275
- }, /*#__PURE__*/ React.createElement("div", {
275
+ }, /*#__PURE__*/ React.createElement(FieldLabel, {
276
+ CustomLabel: CustomLabel,
277
+ label: label,
278
+ required: required,
279
+ ...labelProps || {}
280
+ }), /*#__PURE__*/ React.createElement("div", {
276
281
  className: `${baseClass}__wrap`
277
282
  }, /*#__PURE__*/ React.createElement(FieldError, {
278
283
  CustomError: CustomError,
279
284
  path: path,
280
285
  ...errorProps || {}
281
- }), /*#__PURE__*/ React.createElement(FieldLabel, {
282
- CustomLabel: CustomLabel,
283
- label: label,
284
- required: required,
285
- ...labelProps || {}
286
286
  }), /*#__PURE__*/ React.createElement(Slate, {
287
287
  editor: editor,
288
288
  key: JSON.stringify({
package/dist/field/RichText.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/field/RichText.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { ClientValidate } from 'payload/types'\nimport type { BaseEditor, BaseOperation } from 'slate'\nimport type { HistoryEditor } from 'slate-history'\nimport type { ReactEditor } from 'slate-react'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useField } from '@payloadcms/ui/forms/useField'\nimport { withCondition } from '@payloadcms/ui/forms/withCondition'\nimport { useEditDepth } from '@payloadcms/ui/providers/EditDepth'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport isHotkey from 'is-hotkey'\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { Node, Element as SlateElement, Text, Transforms, createEditor } from 'slate'\nimport { withHistory } from 'slate-history'\nimport { Editable, Slate, withReact } from 'slate-react'\n\nimport type { ElementNode, RichTextPlugin, TextNode } from '../types.js'\nimport type { EnabledFeatures } from './types.js'\n\nimport { defaultRichTextValue } from '../data/defaultValue.js'\nimport { richTextValidate } from '../data/validation.js'\nimport { listTypes } from './elements/listTypes.js'\nimport { hotkeys } from './hotkeys.js'\nimport './index.scss'\nimport { toggleLeaf } from './leaves/toggle.js'\nimport { withEnterBreakOut } from './plugins/withEnterBreakOut.js'\nimport { withHTML } from './plugins/withHTML.js'\nimport { ElementButtonProvider } from './providers/ElementButtonProvider.js'\nimport { ElementProvider } from './providers/ElementProvider.js'\nimport { LeafButtonProvider } from './providers/LeafButtonProvider.js'\nimport { LeafProvider } from './providers/LeafProvider.js'\n\nconst baseClass = 'rich-text'\n\ndeclare module 'slate' {\n interface CustomTypes {\n Editor: BaseEditor & ReactEditor & HistoryEditor\n Element: ElementNode\n Text: TextNode\n }\n}\n\nconst RichTextField: React.FC<\n FormFieldBase & {\n elements: EnabledFeatures['elements']\n leaves: EnabledFeatures['leaves']\n name: string\n placeholder?: string\n plugins: RichTextPlugin[]\n richTextComponentMap: Map<string, React.ReactNode>\n width?: string\n }\n> = (props) => {\n const {\n name,\n CustomDescription,\n CustomError,\n CustomLabel,\n className,\n descriptionProps,\n elements,\n errorProps,\n label,\n labelProps,\n leaves,\n path: pathFromProps,\n placeholder,\n plugins,\n readOnly,\n required,\n style,\n validate = richTextValidate,\n width,\n } = props\n\n const { i18n } = useTranslation()\n const editorRef = useRef(null)\n const toolbarRef = useRef(null)\n\n const drawerDepth = useEditDepth()\n const drawerIsOpen = drawerDepth > 1\n\n const memoizedValidate: ClientValidate = useCallback(\n (value, validationOptions) => {\n if (typeof validate === 'function') {\n return validate(value, {\n ...validationOptions,\n req: {\n t: i18n.t,\n },\n required,\n })\n }\n },\n [validate, required, i18n],\n )\n\n const { path: pathFromContext } = useFieldProps()\n\n const { initialValue, path, schemaPath, setValue, showError, value } = useField({\n path: pathFromContext || pathFromProps || name,\n validate: memoizedValidate,\n })\n\n const editor = useMemo(() => {\n let CreatedEditor = withEnterBreakOut(withHistory(withReact(createEditor())))\n\n CreatedEditor = withHTML(CreatedEditor)\n\n if (plugins.length) {\n CreatedEditor = plugins.reduce((editorWithPlugins, plugin) => {\n return plugin(editorWithPlugins)\n }, CreatedEditor)\n }\n\n return CreatedEditor\n }, [plugins])\n\n const renderElement = useCallback(\n ({ attributes, children, element }) => {\n // return <div {...attributes}>{children}</div>\n\n const matchedElement = elements[element.type]\n const Element = matchedElement?.Element\n\n let attr = { ...attributes }\n\n // this converts text alignment to margin when dealing with void elements\n if (element.textAlign) {\n if (element.type === 'relationship' || element.type === 'upload') {\n switch (element.textAlign) {\n case 'left':\n attr = { ...attr, style: { marginRight: 'auto' } }\n break\n case 'right':\n attr = { ...attr, style: { marginLeft: 'auto' } }\n break\n case 'center':\n attr = { ...attr, style: { marginLeft: 'auto', marginRight: 'auto' } }\n break\n default:\n attr = { ...attr, style: { textAlign: element.textAlign } }\n break\n }\n } else if (element.type === 'li') {\n switch (element.textAlign) {\n case 'right':\n attr = { ...attr, style: { listStylePosition: 'inside', textAlign: 'right' } }\n break\n case 'center':\n attr = { ...attr, style: { listStylePosition: 'inside', textAlign: 'center' } }\n break\n case 'left':\n default:\n attr = { ...attr, style: { listStylePosition: 'outside', textAlign: 'left' } }\n break\n }\n } else {\n attr = { ...attr, style: { textAlign: element.textAlign } }\n }\n }\n\n if (Element) {\n const el = (\n <ElementProvider\n attributes={attr}\n childNodes={children}\n editorRef={editorRef}\n element={element}\n fieldProps={props}\n path={path}\n schemaPath={schemaPath}\n >\n {Element}\n </ElementProvider>\n )\n\n return el\n }\n\n return <div {...attr}>{children}</div>\n },\n [elements, path, props, schemaPath],\n )\n\n const renderLeaf = useCallback(\n ({ attributes, children, leaf }) => {\n const matchedLeaves = Object.entries(leaves).filter(([leafName]) => leaf[leafName])\n\n if (matchedLeaves.length > 0) {\n return matchedLeaves.reduce(\n (result, [, leafConfig], i) => {\n if (leafConfig?.Leaf) {\n const Leaf = leafConfig.Leaf\n\n return (\n <LeafProvider\n attributes={attributes}\n editorRef={editorRef}\n fieldProps={props}\n key={i}\n leaf={leaf}\n path={path}\n result={result}\n schemaPath={schemaPath}\n >\n {Leaf}\n </LeafProvider>\n )\n }\n\n return result\n },\n <span {...attributes}>{children}</span>,\n )\n }\n\n return <span {...attributes}>{children}</span>\n },\n [path, props, schemaPath, leaves],\n )\n\n // All slate changes fire the onChange event\n // including selection changes\n // so we will filter the set_selection operations out\n // and only fire setValue when onChange is because of value\n const handleChange = useCallback(\n (val: unknown) => {\n const ops = editor?.operations.filter((o: BaseOperation) => {\n if (o) {\n return o.type !== 'set_selection'\n }\n return false\n })\n\n if (ops && Array.isArray(ops) && ops.length > 0) {\n if (!readOnly && val !== defaultRichTextValue && val !== value) {\n setValue(val)\n }\n }\n },\n [editor?.operations, readOnly, setValue, value],\n )\n\n useEffect(() => {\n function setClickableState(clickState: 'disabled' | 'enabled') {\n const selectors = 'button, a, [role=\"button\"]'\n const toolbarButtons: (HTMLAnchorElement | HTMLButtonElement)[] =\n toolbarRef.current?.querySelectorAll(selectors)\n\n ;(toolbarButtons || []).forEach((child) => {\n const isButton = child.tagName === 'BUTTON'\n const isDisabling = clickState === 'disabled'\n child.setAttribute('tabIndex', isDisabling ? '-1' : '0')\n if (isButton) child.setAttribute('disabled', isDisabling ? 'disabled' : null)\n })\n }\n\n if (readOnly) {\n setClickableState('disabled')\n }\n\n return () => {\n if (readOnly) {\n setClickableState('enabled')\n }\n }\n }, [readOnly])\n\n // useEffect(() => {\n // // If there is a change to the initial value, we need to reset Slate history\n // // and clear selection because the old selection may no longer be valid\n // // as returned JSON may be modified in hooks and have a different shape\n // if (editor.selection) {\n // console.log('deselecting');\n // ReactEditor.deselect(editor);\n // }\n // }, [path, editor]);\n\n const classes = [\n baseClass,\n 'field-type',\n className,\n showError && 'error',\n readOnly && `${baseClass}--read-only`,\n ]\n .filter(Boolean)\n .join(' ')\n\n let valueToRender = value\n\n if (typeof valueToRender === 'string') {\n try {\n const parsedJSON = JSON.parse(valueToRender)\n valueToRender = parsedJSON\n } catch (err) {\n valueToRender = null\n }\n }\n\n if (!valueToRender) valueToRender = defaultRichTextValue\n\n return (\n <div\n className={classes}\n style={{\n ...style,\n width,\n }}\n >\n <div className={`${baseClass}__wrap`}>\n <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n <FieldLabel\n CustomLabel={CustomLabel}\n label={label}\n required={required}\n {...(labelProps || {})}\n />\n <Slate\n editor={editor}\n key={JSON.stringify({ initialValue, path })} // makes sure slate is completely re-rendered when initialValue changes, bypassing the slate-internal value memoization. That way, external changes to the form will update the editor\n onChange={handleChange}\n value={valueToRender as any[]}\n >\n <div className={`${baseClass}__wrapper`}>\n {Object.keys(elements)?.length + Object.keys(leaves)?.length > 0 && (\n <div\n className={[`${baseClass}__toolbar`, drawerIsOpen && `${baseClass}__drawerIsOpen`]\n .filter(Boolean)\n .join(' ')}\n ref={toolbarRef}\n >\n <div className={`${baseClass}__toolbar-wrap`}>\n {Object.values(elements).map((element) => {\n const Button = element?.Button\n\n if (Button) {\n return (\n <ElementButtonProvider\n fieldProps={props}\n key={element.name}\n path={path}\n schemaPath={schemaPath}\n >\n {Button}\n </ElementButtonProvider>\n )\n }\n\n return null\n })}\n {Object.values(leaves).map((leaf) => {\n const Button = leaf?.Button\n\n if (Button) {\n return (\n <LeafButtonProvider\n fieldProps={props}\n key={leaf.name}\n path={path}\n schemaPath={schemaPath}\n >\n {Button}\n </LeafButtonProvider>\n )\n }\n\n return null\n })}\n </div>\n </div>\n )}\n <div className={`${baseClass}__editor`} ref={editorRef}>\n <Editable\n className={`${baseClass}__input`}\n id={`field-${path.replace(/\\./g, '__')}`}\n onKeyDown={(event) => {\n if (event.key === 'Enter') {\n if (event.shiftKey) {\n event.preventDefault()\n editor.insertText('\\n')\n } else {\n const selectedElement = Node.descendant(\n editor,\n editor.selection.anchor.path.slice(0, -1),\n )\n\n if (SlateElement.isElement(selectedElement)) {\n // Allow hard enter to \"break out\" of certain elements\n if (editor.shouldBreakOutOnEnter(selectedElement)) {\n event.preventDefault()\n const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path)\n\n if (\n Text.isText(selectedLeaf) &&\n String(selectedLeaf.text).length === editor.selection.anchor.offset\n ) {\n Transforms.insertNodes(editor, { children: [{ text: '' }] })\n } else {\n Transforms.splitNodes(editor)\n Transforms.setNodes(editor, {})\n }\n }\n }\n }\n }\n\n if (event.key === 'Backspace') {\n const selectedElement = Node.descendant(\n editor,\n editor.selection.anchor.path.slice(0, -1),\n )\n\n if (SlateElement.isElement(selectedElement) && selectedElement.type === 'li') {\n const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path)\n if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {\n event.preventDefault()\n Transforms.unwrapNodes(editor, {\n match: (n) => SlateElement.isElement(n) && listTypes.includes(n.type),\n mode: 'lowest',\n split: true,\n })\n\n Transforms.setNodes(editor, { type: undefined })\n }\n } else if (editor.isVoid(selectedElement)) {\n Transforms.removeNodes(editor)\n }\n }\n\n Object.keys(hotkeys).forEach((hotkey) => {\n if (isHotkey(hotkey, event as any)) {\n event.preventDefault()\n const mark = hotkeys[hotkey]\n toggleLeaf(editor, mark)\n }\n })\n }}\n placeholder={getTranslation(placeholder, i18n)}\n readOnly={readOnly}\n renderElement={renderElement}\n renderLeaf={renderLeaf}\n spellCheck\n />\n </div>\n </div>\n </Slate>\n {CustomDescription !== undefined ? (\n CustomDescription\n ) : (\n <FieldDescription {...(descriptionProps || {})} />\n )}\n </div>\n </div>\n )\n}\n\nexport const RichText = withCondition(RichTextField)\n"],"names":["getTranslation","FieldDescription","FieldError","FieldLabel","useFieldProps","useField","withCondition","useEditDepth","useTranslation","isHotkey","React","useCallback","useEffect","useMemo","useRef","Node","Element","SlateElement","Text","Transforms","createEditor","withHistory","Editable","Slate","withReact","defaultRichTextValue","richTextValidate","listTypes","hotkeys","toggleLeaf","withEnterBreakOut","withHTML","ElementButtonProvider","ElementProvider","LeafButtonProvider","LeafProvider","baseClass","RichTextField","props","name","CustomDescription","CustomError","CustomLabel","className","descriptionProps","elements","errorProps","label","labelProps","leaves","path","pathFromProps","placeholder","plugins","readOnly","required","style","validate","width","i18n","editorRef","toolbarRef","drawerDepth","drawerIsOpen","memoizedValidate","value","validationOptions","req","t","pathFromContext","initialValue","schemaPath","setValue","showError","editor","CreatedEditor","length","reduce","editorWithPlugins","plugin","renderElement","attributes","children","element","matchedElement","type","attr","textAlign","marginRight","marginLeft","listStylePosition","el","childNodes","fieldProps","div","renderLeaf","leaf","matchedLeaves","Object","entries","filter","leafName","result","leafConfig","i","Leaf","key","span","handleChange","val","ops","operations","o","Array","isArray","setClickableState","clickState","selectors","toolbarButtons","current","querySelectorAll","forEach","child","isButton","tagName","isDisabling","setAttribute","classes","Boolean","join","valueToRender","parsedJSON","JSON","parse","err","stringify","onChange","keys","ref","values","map","Button","id","replace","onKeyDown","event","shiftKey","preventDefault","insertText","selectedElement","descendant","selection","anchor","slice","isElement","shouldBreakOutOnEnter","selectedLeaf","isText","String","text","offset","insertNodes","splitNodes","setNodes","unwrapNodes","match","n","includes","mode","split","undefined","isVoid","removeNodes","hotkey","mark","spellCheck","RichText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["../../src/field/RichText.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { ClientValidate } from 'payload/types'\nimport type { BaseEditor, BaseOperation } from 'slate'\nimport type { HistoryEditor } from 'slate-history'\nimport type { ReactEditor } from 'slate-react'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useField } from '@payloadcms/ui/forms/useField'\nimport { withCondition } from '@payloadcms/ui/forms/withCondition'\nimport { useEditDepth } from '@payloadcms/ui/providers/EditDepth'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport isHotkey from 'is-hotkey'\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { Node, Element as SlateElement, Text, Transforms, createEditor } from 'slate'\nimport { withHistory } from 'slate-history'\nimport { Editable, Slate, withReact } from 'slate-react'\n\nimport type { ElementNode, RichTextPlugin, TextNode } from '../types.js'\nimport type { EnabledFeatures } from './types.js'\n\nimport { defaultRichTextValue } from '../data/defaultValue.js'\nimport { richTextValidate } from '../data/validation.js'\nimport { listTypes } from './elements/listTypes.js'\nimport { hotkeys } from './hotkeys.js'\nimport './index.scss'\nimport { toggleLeaf } from './leaves/toggle.js'\nimport { withEnterBreakOut } from './plugins/withEnterBreakOut.js'\nimport { withHTML } from './plugins/withHTML.js'\nimport { ElementButtonProvider } from './providers/ElementButtonProvider.js'\nimport { ElementProvider } from './providers/ElementProvider.js'\nimport { LeafButtonProvider } from './providers/LeafButtonProvider.js'\nimport { LeafProvider } from './providers/LeafProvider.js'\n\nconst baseClass = 'rich-text'\n\ndeclare module 'slate' {\n interface CustomTypes {\n Editor: BaseEditor & ReactEditor & HistoryEditor\n Element: ElementNode\n Text: TextNode\n }\n}\n\nconst RichTextField: React.FC<\n FormFieldBase & {\n elements: EnabledFeatures['elements']\n leaves: EnabledFeatures['leaves']\n name: string\n placeholder?: string\n plugins: RichTextPlugin[]\n richTextComponentMap: Map<string, React.ReactNode>\n width?: string\n }\n> = (props) => {\n const {\n name,\n CustomDescription,\n CustomError,\n CustomLabel,\n className,\n descriptionProps,\n elements,\n errorProps,\n label,\n labelProps,\n leaves,\n path: pathFromProps,\n placeholder,\n plugins,\n readOnly,\n required,\n style,\n validate = richTextValidate,\n width,\n } = props\n\n const { i18n } = useTranslation()\n const editorRef = useRef(null)\n const toolbarRef = useRef(null)\n\n const drawerDepth = useEditDepth()\n const drawerIsOpen = drawerDepth > 1\n\n const memoizedValidate: ClientValidate = useCallback(\n (value, validationOptions) => {\n if (typeof validate === 'function') {\n return validate(value, {\n ...validationOptions,\n req: {\n t: i18n.t,\n },\n required,\n })\n }\n },\n [validate, required, i18n],\n )\n\n const { path: pathFromContext } = useFieldProps()\n\n const { initialValue, path, schemaPath, setValue, showError, value } = useField({\n path: pathFromContext || pathFromProps || name,\n validate: memoizedValidate,\n })\n\n const editor = useMemo(() => {\n let CreatedEditor = withEnterBreakOut(withHistory(withReact(createEditor())))\n\n CreatedEditor = withHTML(CreatedEditor)\n\n if (plugins.length) {\n CreatedEditor = plugins.reduce((editorWithPlugins, plugin) => {\n return plugin(editorWithPlugins)\n }, CreatedEditor)\n }\n\n return CreatedEditor\n }, [plugins])\n\n const renderElement = useCallback(\n ({ attributes, children, element }) => {\n // return <div {...attributes}>{children}</div>\n\n const matchedElement = elements[element.type]\n const Element = matchedElement?.Element\n\n let attr = { ...attributes }\n\n // this converts text alignment to margin when dealing with void elements\n if (element.textAlign) {\n if (element.type === 'relationship' || element.type === 'upload') {\n switch (element.textAlign) {\n case 'left':\n attr = { ...attr, style: { marginRight: 'auto' } }\n break\n case 'right':\n attr = { ...attr, style: { marginLeft: 'auto' } }\n break\n case 'center':\n attr = { ...attr, style: { marginLeft: 'auto', marginRight: 'auto' } }\n break\n default:\n attr = { ...attr, style: { textAlign: element.textAlign } }\n break\n }\n } else if (element.type === 'li') {\n switch (element.textAlign) {\n case 'right':\n attr = { ...attr, style: { listStylePosition: 'inside', textAlign: 'right' } }\n break\n case 'center':\n attr = { ...attr, style: { listStylePosition: 'inside', textAlign: 'center' } }\n break\n case 'left':\n default:\n attr = { ...attr, style: { listStylePosition: 'outside', textAlign: 'left' } }\n break\n }\n } else {\n attr = { ...attr, style: { textAlign: element.textAlign } }\n }\n }\n\n if (Element) {\n const el = (\n <ElementProvider\n attributes={attr}\n childNodes={children}\n editorRef={editorRef}\n element={element}\n fieldProps={props}\n path={path}\n schemaPath={schemaPath}\n >\n {Element}\n </ElementProvider>\n )\n\n return el\n }\n\n return <div {...attr}>{children}</div>\n },\n [elements, path, props, schemaPath],\n )\n\n const renderLeaf = useCallback(\n ({ attributes, children, leaf }) => {\n const matchedLeaves = Object.entries(leaves).filter(([leafName]) => leaf[leafName])\n\n if (matchedLeaves.length > 0) {\n return matchedLeaves.reduce(\n (result, [, leafConfig], i) => {\n if (leafConfig?.Leaf) {\n const Leaf = leafConfig.Leaf\n\n return (\n <LeafProvider\n attributes={attributes}\n editorRef={editorRef}\n fieldProps={props}\n key={i}\n leaf={leaf}\n path={path}\n result={result}\n schemaPath={schemaPath}\n >\n {Leaf}\n </LeafProvider>\n )\n }\n\n return result\n },\n <span {...attributes}>{children}</span>,\n )\n }\n\n return <span {...attributes}>{children}</span>\n },\n [path, props, schemaPath, leaves],\n )\n\n // All slate changes fire the onChange event\n // including selection changes\n // so we will filter the set_selection operations out\n // and only fire setValue when onChange is because of value\n const handleChange = useCallback(\n (val: unknown) => {\n const ops = editor?.operations.filter((o: BaseOperation) => {\n if (o) {\n return o.type !== 'set_selection'\n }\n return false\n })\n\n if (ops && Array.isArray(ops) && ops.length > 0) {\n if (!readOnly && val !== defaultRichTextValue && val !== value) {\n setValue(val)\n }\n }\n },\n [editor?.operations, readOnly, setValue, value],\n )\n\n useEffect(() => {\n function setClickableState(clickState: 'disabled' | 'enabled') {\n const selectors = 'button, a, [role=\"button\"]'\n const toolbarButtons: (HTMLAnchorElement | HTMLButtonElement)[] =\n toolbarRef.current?.querySelectorAll(selectors)\n\n ;(toolbarButtons || []).forEach((child) => {\n const isButton = child.tagName === 'BUTTON'\n const isDisabling = clickState === 'disabled'\n child.setAttribute('tabIndex', isDisabling ? '-1' : '0')\n if (isButton) child.setAttribute('disabled', isDisabling ? 'disabled' : null)\n })\n }\n\n if (readOnly) {\n setClickableState('disabled')\n }\n\n return () => {\n if (readOnly) {\n setClickableState('enabled')\n }\n }\n }, [readOnly])\n\n // useEffect(() => {\n // // If there is a change to the initial value, we need to reset Slate history\n // // and clear selection because the old selection may no longer be valid\n // // as returned JSON may be modified in hooks and have a different shape\n // if (editor.selection) {\n // console.log('deselecting');\n // ReactEditor.deselect(editor);\n // }\n // }, [path, editor]);\n\n const classes = [\n baseClass,\n 'field-type',\n className,\n showError && 'error',\n readOnly && `${baseClass}--read-only`,\n ]\n .filter(Boolean)\n .join(' ')\n\n let valueToRender = value\n\n if (typeof valueToRender === 'string') {\n try {\n const parsedJSON = JSON.parse(valueToRender)\n valueToRender = parsedJSON\n } catch (err) {\n valueToRender = null\n }\n }\n\n if (!valueToRender) valueToRender = defaultRichTextValue\n\n return (\n <div\n className={classes}\n style={{\n ...style,\n width,\n }}\n >\n <FieldLabel\n CustomLabel={CustomLabel}\n label={label}\n required={required}\n {...(labelProps || {})}\n />\n <div className={`${baseClass}__wrap`}>\n <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n <Slate\n editor={editor}\n key={JSON.stringify({ initialValue, path })} // makes sure slate is completely re-rendered when initialValue changes, bypassing the slate-internal value memoization. That way, external changes to the form will update the editor\n onChange={handleChange}\n value={valueToRender as any[]}\n >\n <div className={`${baseClass}__wrapper`}>\n {Object.keys(elements)?.length + Object.keys(leaves)?.length > 0 && (\n <div\n className={[`${baseClass}__toolbar`, drawerIsOpen && `${baseClass}__drawerIsOpen`]\n .filter(Boolean)\n .join(' ')}\n ref={toolbarRef}\n >\n <div className={`${baseClass}__toolbar-wrap`}>\n {Object.values(elements).map((element) => {\n const Button = element?.Button\n\n if (Button) {\n return (\n <ElementButtonProvider\n fieldProps={props}\n key={element.name}\n path={path}\n schemaPath={schemaPath}\n >\n {Button}\n </ElementButtonProvider>\n )\n }\n\n return null\n })}\n {Object.values(leaves).map((leaf) => {\n const Button = leaf?.Button\n\n if (Button) {\n return (\n <LeafButtonProvider\n fieldProps={props}\n key={leaf.name}\n path={path}\n schemaPath={schemaPath}\n >\n {Button}\n </LeafButtonProvider>\n )\n }\n\n return null\n })}\n </div>\n </div>\n )}\n <div className={`${baseClass}__editor`} ref={editorRef}>\n <Editable\n className={`${baseClass}__input`}\n id={`field-${path.replace(/\\./g, '__')}`}\n onKeyDown={(event) => {\n if (event.key === 'Enter') {\n if (event.shiftKey) {\n event.preventDefault()\n editor.insertText('\\n')\n } else {\n const selectedElement = Node.descendant(\n editor,\n editor.selection.anchor.path.slice(0, -1),\n )\n\n if (SlateElement.isElement(selectedElement)) {\n // Allow hard enter to \"break out\" of certain elements\n if (editor.shouldBreakOutOnEnter(selectedElement)) {\n event.preventDefault()\n const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path)\n\n if (\n Text.isText(selectedLeaf) &&\n String(selectedLeaf.text).length === editor.selection.anchor.offset\n ) {\n Transforms.insertNodes(editor, { children: [{ text: '' }] })\n } else {\n Transforms.splitNodes(editor)\n Transforms.setNodes(editor, {})\n }\n }\n }\n }\n }\n\n if (event.key === 'Backspace') {\n const selectedElement = Node.descendant(\n editor,\n editor.selection.anchor.path.slice(0, -1),\n )\n\n if (SlateElement.isElement(selectedElement) && selectedElement.type === 'li') {\n const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path)\n if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {\n event.preventDefault()\n Transforms.unwrapNodes(editor, {\n match: (n) => SlateElement.isElement(n) && listTypes.includes(n.type),\n mode: 'lowest',\n split: true,\n })\n\n Transforms.setNodes(editor, { type: undefined })\n }\n } else if (editor.isVoid(selectedElement)) {\n Transforms.removeNodes(editor)\n }\n }\n\n Object.keys(hotkeys).forEach((hotkey) => {\n if (isHotkey(hotkey, event as any)) {\n event.preventDefault()\n const mark = hotkeys[hotkey]\n toggleLeaf(editor, mark)\n }\n })\n }}\n placeholder={getTranslation(placeholder, i18n)}\n readOnly={readOnly}\n renderElement={renderElement}\n renderLeaf={renderLeaf}\n spellCheck\n />\n </div>\n </div>\n </Slate>\n {CustomDescription !== undefined ? (\n CustomDescription\n ) : (\n <FieldDescription {...(descriptionProps || {})} />\n )}\n </div>\n </div>\n )\n}\n\nexport const RichText = withCondition(RichTextField)\n"],"names":["getTranslation","FieldDescription","FieldError","FieldLabel","useFieldProps","useField","withCondition","useEditDepth","useTranslation","isHotkey","React","useCallback","useEffect","useMemo","useRef","Node","Element","SlateElement","Text","Transforms","createEditor","withHistory","Editable","Slate","withReact","defaultRichTextValue","richTextValidate","listTypes","hotkeys","toggleLeaf","withEnterBreakOut","withHTML","ElementButtonProvider","ElementProvider","LeafButtonProvider","LeafProvider","baseClass","RichTextField","props","name","CustomDescription","CustomError","CustomLabel","className","descriptionProps","elements","errorProps","label","labelProps","leaves","path","pathFromProps","placeholder","plugins","readOnly","required","style","validate","width","i18n","editorRef","toolbarRef","drawerDepth","drawerIsOpen","memoizedValidate","value","validationOptions","req","t","pathFromContext","initialValue","schemaPath","setValue","showError","editor","CreatedEditor","length","reduce","editorWithPlugins","plugin","renderElement","attributes","children","element","matchedElement","type","attr","textAlign","marginRight","marginLeft","listStylePosition","el","childNodes","fieldProps","div","renderLeaf","leaf","matchedLeaves","Object","entries","filter","leafName","result","leafConfig","i","Leaf","key","span","handleChange","val","ops","operations","o","Array","isArray","setClickableState","clickState","selectors","toolbarButtons","current","querySelectorAll","forEach","child","isButton","tagName","isDisabling","setAttribute","classes","Boolean","join","valueToRender","parsedJSON","JSON","parse","err","stringify","onChange","keys","ref","values","map","Button","id","replace","onKeyDown","event","shiftKey","preventDefault","insertText","selectedElement","descendant","selection","anchor","slice","isElement","shouldBreakOutOnEnter","selectedLeaf","isText","String","text","offset","insertNodes","splitNodes","setNodes","unwrapNodes","match","n","includes","mode","split","undefined","isVoid","removeNodes","hotkey","mark","spellCheck","RichText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/dist/field/index.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  .rich-text {
4
4
  margin-bottom: base(2);
5
5
  display: flex;
6
+ flex-direction: column;
6
7
  isolation: isolate;
7
8
 
8
9
  &__toolbar {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payloadcms/richtext-slate",
3
- "version": "3.0.0-beta.34",
3
+ "version": "3.0.0-beta.35",
4
4
  "description": "The officially supported Slate richtext adapter for Payload",
5
5
  "homepage": "https://payloadcms.com",
6
6
  "repository": {
@@ -35,14 +35,14 @@
35
35
  "@types/node": "20.12.5",
36
36
  "@types/react": "18.3.2",
37
37
  "@payloadcms/eslint-config": "1.1.1",
38
- "payload": "3.0.0-beta.34",
39
- "@payloadcms/ui": "3.0.0-beta.34"
38
+ "payload": "3.0.0-beta.35",
39
+ "@payloadcms/ui": "3.0.0-beta.35"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "react": "^18.0.0 || ^19.0.0",
43
- "@payloadcms/ui": "3.0.0-beta.34",
44
- "@payloadcms/translations": "3.0.0-beta.34",
45
- "payload": "3.0.0-beta.34"
43
+ "@payloadcms/translations": "3.0.0-beta.35",
44
+ "@payloadcms/ui": "3.0.0-beta.35",
45
+ "payload": "3.0.0-beta.35"
46
46
  },
47
47
  "engines": {
48
48
  "node": ">=18.20.2"