@payloadcms/richtext-slate 3.0.0-beta.73 → 3.0.0-beta.75
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.
- package/dist/field/RichText.d.ts +3 -2
- package/dist/field/RichText.d.ts.map +1 -1
- package/dist/field/RichText.js.map +1 -1
- package/dist/field/index.scss +3 -1
- package/dist/generateComponentMap.d.ts.map +1 -1
- package/dist/generateComponentMap.js +3 -1
- package/dist/generateComponentMap.js.map +1 -1
- package/dist/scss/app.scss +4 -9
- package/dist/scss/toastify.scss +59 -0
- package/dist/scss/toasts.scss +75 -45
- package/dist/scss/type.scss +14 -23
- package/dist/scss/vars.scss +26 -47
- package/package.json +7 -7
package/dist/field/RichText.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { FormFieldBase } from 'payload';
|
|
1
|
+
import type { FormFieldBase, RichTextFieldValidation } from 'payload';
|
|
2
2
|
import type { BaseEditor } from 'slate';
|
|
3
3
|
import type { HistoryEditor } from 'slate-history';
|
|
4
4
|
import type { ReactEditor } from 'slate-react';
|
|
@@ -20,6 +20,7 @@ export declare const RichText: React.FC<{
|
|
|
20
20
|
placeholder?: string;
|
|
21
21
|
plugins: RichTextPlugin[];
|
|
22
22
|
richTextComponentMap: Map<string, React.ReactNode>;
|
|
23
|
+
validate?: RichTextFieldValidation;
|
|
23
24
|
width?: string;
|
|
24
|
-
} & FormFieldBase
|
|
25
|
+
} & Omit<FormFieldBase, "validate">>;
|
|
25
26
|
//# sourceMappingURL=RichText.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichText.d.ts","sourceRoot":"","sources":["../../src/field/RichText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"RichText.d.ts","sourceRoot":"","sources":["../../src/field/RichText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAkB,uBAAuB,EAAE,MAAM,SAAS,CAAA;AACrF,OAAO,KAAK,EAAE,UAAU,EAAiB,MAAM,OAAO,CAAA;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAc9C,OAAO,KAAkD,MAAM,OAAO,CAAA;AAKtE,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAMjD,OAAO,cAAc,CAAA;AAWrB,OAAO,QAAQ,OAAO,CAAC;IACrB,UAAU,WAAW;QACnB,MAAM,EAAE,UAAU,GAAG,aAAa,GAAG,WAAW,CAAA;QAChD,OAAO,EAAE,WAAW,CAAA;QACpB,IAAI,EAAE,QAAQ,CAAA;KACf;CACF;AAuaD,eAAO,MAAM,QAAQ;cAnaP,eAAe,CAAC,UAAU,CAAC;YAC7B,eAAe,CAAC,QAAQ,CAAC;UAC3B,MAAM;kBACE,MAAM;aACX,cAAc,EAAE;0BACH,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;eACvC,uBAAuB;YAC1B,MAAM;oCA4ZkC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/field/RichText.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientValidate, FormFieldBase } from 'payload'\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 {\n FieldDescription,\n FieldError,\n FieldLabel,\n useEditDepth,\n useField,\n useFieldProps,\n useTranslation,\n withCondition,\n} from '@payloadcms/ui'\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 & HistoryEditor & ReactEditor\n Element: ElementNode\n Text: TextNode\n }\n}\n\nconst RichTextField: React.FC<\n {\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 } & FormFieldBase\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: readOnlyFromProps,\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, readOnly: readOnlyFromContext } = useFieldProps()\n\n const { formInitializing, initialValue, path, schemaPath, setValue, showError, value } = useField(\n {\n path: pathFromContext ?? pathFromProps ?? name,\n validate: memoizedValidate,\n },\n )\n\n const disabled = readOnlyFromProps || readOnlyFromContext || formInitializing\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 (!disabled && val !== defaultRichTextValue && val !== value) {\n setValue(val)\n }\n }\n },\n [editor?.operations, disabled, 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 (disabled) {\n setClickableState('disabled')\n }\n\n return () => {\n if (disabled) {\n setClickableState('enabled')\n }\n }\n }, [disabled])\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 disabled && `${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 disabled={disabled}\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={disabled}\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","useEditDepth","useField","useFieldProps","useTranslation","withCondition","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","readOnlyFromProps","required","style","validate","width","i18n","editorRef","toolbarRef","drawerDepth","drawerIsOpen","memoizedValidate","value","validationOptions","req","t","pathFromContext","readOnlyFromContext","formInitializing","initialValue","schemaPath","setValue","showError","disabled","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","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","onChange","keys","ref","values","map","Button","id","replace","onKeyDown","event","key","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","stringify","RichText"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/field/RichText.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase, PayloadRequest, RichTextFieldValidation } from 'payload'\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 {\n FieldDescription,\n FieldError,\n FieldLabel,\n useEditDepth,\n useField,\n useFieldProps,\n useTranslation,\n withCondition,\n} from '@payloadcms/ui'\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 & HistoryEditor & ReactEditor\n Element: ElementNode\n Text: TextNode\n }\n}\n\nconst RichTextField: React.FC<\n {\n elements: EnabledFeatures['elements']\n leaves: EnabledFeatures['leaves']\n name: string\n placeholder?: string\n plugins: RichTextPlugin[]\n richTextComponentMap: Map<string, React.ReactNode>\n validate?: RichTextFieldValidation\n width?: string\n } & Omit<FormFieldBase, 'validate'>\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: readOnlyFromProps,\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 = useCallback(\n (value, validationOptions) => {\n if (typeof validate === 'function') {\n return validate(value, {\n ...validationOptions,\n req: {\n t: i18n.t,\n } as PayloadRequest,\n required,\n })\n }\n },\n [validate, required, i18n],\n )\n\n const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n\n const { formInitializing, initialValue, path, schemaPath, setValue, showError, value } = useField(\n {\n path: pathFromContext ?? pathFromProps ?? name,\n validate: memoizedValidate,\n },\n )\n\n const disabled = readOnlyFromProps || readOnlyFromContext || formInitializing\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 (!disabled && val !== defaultRichTextValue && val !== value) {\n setValue(val)\n }\n }\n },\n [editor?.operations, disabled, 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 (disabled) {\n setClickableState('disabled')\n }\n\n return () => {\n if (disabled) {\n setClickableState('enabled')\n }\n }\n }, [disabled])\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 disabled && `${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 disabled={disabled}\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={disabled}\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","useEditDepth","useField","useFieldProps","useTranslation","withCondition","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","readOnlyFromProps","required","style","validate","width","i18n","editorRef","toolbarRef","drawerDepth","drawerIsOpen","memoizedValidate","value","validationOptions","req","t","pathFromContext","readOnlyFromContext","formInitializing","initialValue","schemaPath","setValue","showError","disabled","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","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","onChange","keys","ref","values","map","Button","id","replace","onKeyDown","event","key","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","stringify","RichText"],"mappings":"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"}
|
package/dist/field/index.scss
CHANGED
|
@@ -38,7 +38,8 @@
|
|
|
38
38
|
|
|
39
39
|
&__editor {
|
|
40
40
|
font-family: var(--font-serif);
|
|
41
|
-
font-size: base(0.
|
|
41
|
+
font-size: base(0.8);
|
|
42
|
+
letter-spacing: 0.02em;
|
|
42
43
|
|
|
43
44
|
h1,
|
|
44
45
|
h2,
|
|
@@ -48,6 +49,7 @@
|
|
|
48
49
|
h6 {
|
|
49
50
|
font-family: var(--font-body);
|
|
50
51
|
line-height: 1.125;
|
|
52
|
+
letter-spacing: 0;
|
|
51
53
|
}
|
|
52
54
|
|
|
53
55
|
h1[data-slate-node='element'] {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generateComponentMap.d.ts","sourceRoot":"","sources":["../src/generateComponentMap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAS,eAAe,EAAE,MAAM,SAAS,CAAA;AAKrD,OAAO,KAAK,EAAE,gBAAgB,EAA6C,MAAM,YAAY,CAAA;AAO7F,eAAO,MAAM,uBAAuB,SAC3B,gBAAgB,KAAG,eAAe,CAAC,sBAAsB,
|
|
1
|
+
{"version":3,"file":"generateComponentMap.d.ts","sourceRoot":"","sources":["../src/generateComponentMap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAS,eAAe,EAAE,MAAM,SAAS,CAAA;AAKrD,OAAO,KAAK,EAAE,gBAAgB,EAA6C,MAAM,YAAY,CAAA;AAO7F,eAAO,MAAM,uBAAuB,SAC3B,gBAAgB,KAAG,eAAe,CAAC,sBAAsB,CAqG/D,CAAA"}
|
|
@@ -5,7 +5,7 @@ import { elements as elementTypes } from './field/elements/index.js';
|
|
|
5
5
|
import { linkFieldsSchemaPath } from './field/elements/link/shared.js';
|
|
6
6
|
import { uploadFieldsSchemaPath } from './field/elements/upload/shared.js';
|
|
7
7
|
import { defaultLeaves as leafTypes } from './field/leaves/index.js';
|
|
8
|
-
export const getGenerateComponentMap = (args)=>({ WithServerSideProps, config, i18n })=>{
|
|
8
|
+
export const getGenerateComponentMap = (args)=>({ WithServerSideProps, config, i18n, payload })=>{
|
|
9
9
|
const componentMap = new Map();
|
|
10
10
|
(args?.admin?.leaves || Object.values(leafTypes)).forEach((leaf)=>{
|
|
11
11
|
let leafObject;
|
|
@@ -51,6 +51,7 @@ export const getGenerateComponentMap = (args)=>({ WithServerSideProps, config, i
|
|
|
51
51
|
config,
|
|
52
52
|
fieldSchema: args.admin?.link?.fields,
|
|
53
53
|
i18n,
|
|
54
|
+
payload,
|
|
54
55
|
readOnly: false
|
|
55
56
|
});
|
|
56
57
|
componentMap.set(linkFieldsSchemaPath, mappedFields);
|
|
@@ -71,6 +72,7 @@ export const getGenerateComponentMap = (args)=>({ WithServerSideProps, config, i
|
|
|
71
72
|
config,
|
|
72
73
|
fieldSchema: args?.admin?.upload?.collections[collection.slug]?.fields,
|
|
73
74
|
i18n,
|
|
75
|
+
payload,
|
|
74
76
|
readOnly: false
|
|
75
77
|
});
|
|
76
78
|
componentMap.set(`${uploadFieldsSchemaPath}.${collection.slug}`, mappedFields);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/generateComponentMap.tsx"],"sourcesContent":["import type { Field, RichTextAdapter } from 'payload'\n\nimport { mapFields } from '@payloadcms/ui/utilities/buildComponentMap'\nimport React from 'react'\n\nimport type { AdapterArguments, RichTextCustomElement, RichTextCustomLeaf } from './types.js'\n\nimport { elements as elementTypes } from './field/elements/index.js'\nimport { linkFieldsSchemaPath } from './field/elements/link/shared.js'\nimport { uploadFieldsSchemaPath } from './field/elements/upload/shared.js'\nimport { defaultLeaves as leafTypes } from './field/leaves/index.js'\n\nexport const getGenerateComponentMap =\n (args: AdapterArguments): RichTextAdapter['generateComponentMap'] =>\n ({ WithServerSideProps, config, i18n }) => {\n const componentMap = new Map()\n\n ;(args?.admin?.leaves || Object.values(leafTypes)).forEach((leaf) => {\n let leafObject: RichTextCustomLeaf\n\n if (typeof leaf === 'object' && leaf !== null) {\n leafObject = leaf\n } else if (typeof leaf === 'string' && leafTypes[leaf]) {\n leafObject = leafTypes[leaf]\n }\n\n if (leafObject) {\n const LeafButton = leafObject.Button\n const LeafComponent = leafObject.Leaf\n\n componentMap.set(`leaf.button.${leafObject.name}`, <LeafButton />)\n componentMap.set(`leaf.component.${leafObject.name}`, <LeafComponent />)\n\n if (Array.isArray(leafObject.plugins)) {\n leafObject.plugins.forEach((Plugin, i) => {\n componentMap.set(`leaf.plugin.${leafObject.name}.${i}`, <Plugin />)\n })\n }\n }\n })\n ;(args?.admin?.elements || Object.values(elementTypes)).forEach((el) => {\n let element: RichTextCustomElement\n\n if (typeof el === 'object' && el !== null) {\n element = el\n } else if (typeof el === 'string' && elementTypes[el]) {\n element = elementTypes[el]\n }\n\n if (element) {\n const ElementButton = element.Button\n const ElementComponent = element.Element\n\n if (ElementButton) componentMap.set(`element.button.${element.name}`, <ElementButton />)\n componentMap.set(`element.component.${element.name}`, <ElementComponent />)\n\n if (Array.isArray(element.plugins)) {\n element.plugins.forEach((Plugin, i) => {\n componentMap.set(`element.plugin.${element.name}.${i}`, <Plugin />)\n })\n }\n\n switch (element.name) {\n case 'link': {\n const mappedFields = mapFields({\n WithServerSideProps,\n config,\n fieldSchema: args.admin?.link?.fields as Field[],\n i18n,\n readOnly: false,\n })\n\n componentMap.set(linkFieldsSchemaPath, mappedFields)\n\n break\n }\n\n case 'upload': {\n const uploadEnabledCollections = config.collections.filter(\n ({ admin: { enableRichTextRelationship, hidden }, upload }) => {\n if (hidden === true) {\n return false\n }\n\n return enableRichTextRelationship && Boolean(upload) === true\n },\n )\n\n uploadEnabledCollections.forEach((collection) => {\n if (args?.admin?.upload?.collections[collection.slug]?.fields) {\n const mappedFields = mapFields({\n WithServerSideProps,\n config,\n fieldSchema: args?.admin?.upload?.collections[collection.slug]?.fields,\n i18n,\n readOnly: false,\n })\n\n componentMap.set(`${uploadFieldsSchemaPath}.${collection.slug}`, mappedFields)\n }\n })\n\n break\n }\n\n case 'relationship':\n break\n }\n }\n })\n\n return componentMap\n }\n"],"names":["mapFields","React","elements","elementTypes","linkFieldsSchemaPath","uploadFieldsSchemaPath","defaultLeaves","leafTypes","getGenerateComponentMap","args","WithServerSideProps","config","i18n","componentMap","Map","admin","leaves","Object","values","forEach","leaf","leafObject","LeafButton","Button","LeafComponent","Leaf","set","name","Array","isArray","plugins","Plugin","i","el","element","ElementButton","ElementComponent","Element","mappedFields","fieldSchema","link","fields","readOnly","uploadEnabledCollections","collections","filter","enableRichTextRelationship","hidden","upload","Boolean","collection","slug"],"mappings":";AAEA,SAASA,SAAS,QAAQ,6CAA4C;AACtE,OAAOC,WAAW,QAAO;AAIzB,SAASC,YAAYC,YAAY,QAAQ,4BAA2B;AACpE,SAASC,oBAAoB,QAAQ,kCAAiC;AACtE,SAASC,sBAAsB,QAAQ,oCAAmC;AAC1E,SAASC,iBAAiBC,SAAS,QAAQ,0BAAyB;AAEpE,OAAO,MAAMC,0BACX,CAACC,OACD,CAAC,EAAEC,mBAAmB,EAAEC,MAAM,EAAEC,IAAI,EAAE;
|
|
1
|
+
{"version":3,"sources":["../src/generateComponentMap.tsx"],"sourcesContent":["import type { Field, RichTextAdapter } from 'payload'\n\nimport { mapFields } from '@payloadcms/ui/utilities/buildComponentMap'\nimport React from 'react'\n\nimport type { AdapterArguments, RichTextCustomElement, RichTextCustomLeaf } from './types.js'\n\nimport { elements as elementTypes } from './field/elements/index.js'\nimport { linkFieldsSchemaPath } from './field/elements/link/shared.js'\nimport { uploadFieldsSchemaPath } from './field/elements/upload/shared.js'\nimport { defaultLeaves as leafTypes } from './field/leaves/index.js'\n\nexport const getGenerateComponentMap =\n (args: AdapterArguments): RichTextAdapter['generateComponentMap'] =>\n ({ WithServerSideProps, config, i18n, payload }) => {\n const componentMap = new Map()\n\n ;(args?.admin?.leaves || Object.values(leafTypes)).forEach((leaf) => {\n let leafObject: RichTextCustomLeaf\n\n if (typeof leaf === 'object' && leaf !== null) {\n leafObject = leaf\n } else if (typeof leaf === 'string' && leafTypes[leaf]) {\n leafObject = leafTypes[leaf]\n }\n\n if (leafObject) {\n const LeafButton = leafObject.Button\n const LeafComponent = leafObject.Leaf\n\n componentMap.set(`leaf.button.${leafObject.name}`, <LeafButton />)\n componentMap.set(`leaf.component.${leafObject.name}`, <LeafComponent />)\n\n if (Array.isArray(leafObject.plugins)) {\n leafObject.plugins.forEach((Plugin, i) => {\n componentMap.set(`leaf.plugin.${leafObject.name}.${i}`, <Plugin />)\n })\n }\n }\n })\n ;(args?.admin?.elements || Object.values(elementTypes)).forEach((el) => {\n let element: RichTextCustomElement\n\n if (typeof el === 'object' && el !== null) {\n element = el\n } else if (typeof el === 'string' && elementTypes[el]) {\n element = elementTypes[el]\n }\n\n if (element) {\n const ElementButton = element.Button\n const ElementComponent = element.Element\n\n if (ElementButton) componentMap.set(`element.button.${element.name}`, <ElementButton />)\n componentMap.set(`element.component.${element.name}`, <ElementComponent />)\n\n if (Array.isArray(element.plugins)) {\n element.plugins.forEach((Plugin, i) => {\n componentMap.set(`element.plugin.${element.name}.${i}`, <Plugin />)\n })\n }\n\n switch (element.name) {\n case 'link': {\n const mappedFields = mapFields({\n WithServerSideProps,\n config,\n fieldSchema: args.admin?.link?.fields as Field[],\n i18n,\n payload,\n readOnly: false,\n })\n\n componentMap.set(linkFieldsSchemaPath, mappedFields)\n\n break\n }\n\n case 'upload': {\n const uploadEnabledCollections = config.collections.filter(\n ({ admin: { enableRichTextRelationship, hidden }, upload }) => {\n if (hidden === true) {\n return false\n }\n\n return enableRichTextRelationship && Boolean(upload) === true\n },\n )\n\n uploadEnabledCollections.forEach((collection) => {\n if (args?.admin?.upload?.collections[collection.slug]?.fields) {\n const mappedFields = mapFields({\n WithServerSideProps,\n config,\n fieldSchema: args?.admin?.upload?.collections[collection.slug]?.fields,\n i18n,\n payload,\n readOnly: false,\n })\n\n componentMap.set(`${uploadFieldsSchemaPath}.${collection.slug}`, mappedFields)\n }\n })\n\n break\n }\n\n case 'relationship':\n break\n }\n }\n })\n\n return componentMap\n }\n"],"names":["mapFields","React","elements","elementTypes","linkFieldsSchemaPath","uploadFieldsSchemaPath","defaultLeaves","leafTypes","getGenerateComponentMap","args","WithServerSideProps","config","i18n","payload","componentMap","Map","admin","leaves","Object","values","forEach","leaf","leafObject","LeafButton","Button","LeafComponent","Leaf","set","name","Array","isArray","plugins","Plugin","i","el","element","ElementButton","ElementComponent","Element","mappedFields","fieldSchema","link","fields","readOnly","uploadEnabledCollections","collections","filter","enableRichTextRelationship","hidden","upload","Boolean","collection","slug"],"mappings":"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"}
|
package/dist/scss/app.scss
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@import './colors.scss';
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
-
--base-px:
|
|
6
|
+
--base-px: 20;
|
|
7
7
|
--base-body-size: 13;
|
|
8
8
|
--base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
|
|
9
9
|
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
--theme-baseline-body-size: #{$baseline-body-size};
|
|
22
22
|
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
|
23
23
|
sans-serif;
|
|
24
|
+
--font-serif: Georgia, 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
|
|
24
25
|
--font-mono: monospace;
|
|
25
26
|
|
|
26
27
|
--style-radius-s: #{$style-radius-s};
|
|
@@ -67,12 +68,6 @@ html {
|
|
|
67
68
|
@extend %body;
|
|
68
69
|
background: var(--theme-bg);
|
|
69
70
|
-webkit-font-smoothing: antialiased;
|
|
70
|
-
opacity: 0;
|
|
71
|
-
|
|
72
|
-
&[data-theme='dark'],
|
|
73
|
-
&[data-theme='light'] {
|
|
74
|
-
opacity: initial;
|
|
75
|
-
}
|
|
76
71
|
|
|
77
72
|
&[data-theme='dark'] {
|
|
78
73
|
--theme-bg: var(--theme-elevation-0);
|
|
@@ -111,12 +106,12 @@ body {
|
|
|
111
106
|
}
|
|
112
107
|
|
|
113
108
|
::selection {
|
|
114
|
-
background: var(--
|
|
109
|
+
background: var(--color-success-250);
|
|
115
110
|
color: var(--theme-base-800);
|
|
116
111
|
}
|
|
117
112
|
|
|
118
113
|
::-moz-selection {
|
|
119
|
-
background: var(--
|
|
114
|
+
background: var(--color-success-250);
|
|
120
115
|
color: var(--theme-base-800);
|
|
121
116
|
}
|
|
122
117
|
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
@import 'vars';
|
|
2
|
+
@import 'queries';
|
|
3
|
+
|
|
4
|
+
.Toastify {
|
|
5
|
+
.Toastify__toast-container {
|
|
6
|
+
left: base(5);
|
|
7
|
+
transform: none;
|
|
8
|
+
right: base(5);
|
|
9
|
+
width: auto;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.Toastify__toast {
|
|
13
|
+
padding: base(0.5);
|
|
14
|
+
border-radius: $style-radius-m;
|
|
15
|
+
font-weight: 600;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.Toastify__close-button {
|
|
19
|
+
align-self: center;
|
|
20
|
+
opacity: 0.7;
|
|
21
|
+
|
|
22
|
+
&:hover {
|
|
23
|
+
opacity: 1;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.Toastify__toast--success {
|
|
28
|
+
color: var(--color-success-900);
|
|
29
|
+
background: var(--color-success-500);
|
|
30
|
+
|
|
31
|
+
.Toastify__progress-bar {
|
|
32
|
+
background-color: var(--color-success-900);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.Toastify__close-button--success {
|
|
37
|
+
color: var(--color-success-900);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.Toastify__toast--error {
|
|
41
|
+
background: var(--theme-error-500);
|
|
42
|
+
color: #fff;
|
|
43
|
+
|
|
44
|
+
.Toastify__progress-bar {
|
|
45
|
+
background-color: #fff;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.Toastify__close-button--light {
|
|
50
|
+
color: inherit;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@include mid-break {
|
|
54
|
+
.Toastify__toast-container {
|
|
55
|
+
left: $baseline;
|
|
56
|
+
right: $baseline;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
package/dist/scss/toasts.scss
CHANGED
|
@@ -1,24 +1,28 @@
|
|
|
1
|
+
@import './styles.scss';
|
|
2
|
+
|
|
1
3
|
.payload-toast-container {
|
|
4
|
+
padding: 0;
|
|
5
|
+
margin: 0;
|
|
6
|
+
|
|
2
7
|
.payload-toast-close-button {
|
|
8
|
+
position: absolute;
|
|
9
|
+
order: 3;
|
|
3
10
|
left: unset;
|
|
4
|
-
|
|
5
|
-
top:
|
|
6
|
-
|
|
11
|
+
inset-inline-end: base(0.5);
|
|
12
|
+
top: 50%;
|
|
13
|
+
transform: translateY(-50%);
|
|
14
|
+
color: var(--theme-elevation-600);
|
|
7
15
|
background: unset;
|
|
8
16
|
border: none;
|
|
9
|
-
display: flex;
|
|
10
|
-
width: 1.25rem;
|
|
11
|
-
height: 1.25rem;
|
|
12
|
-
justify-content: center;
|
|
13
|
-
align-items: center;
|
|
14
17
|
|
|
15
|
-
|
|
16
|
-
|
|
18
|
+
svg {
|
|
19
|
+
width: base(0.75);
|
|
20
|
+
height: base(0.75);
|
|
17
21
|
}
|
|
18
22
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
&:hover {
|
|
24
|
+
color: var(--theme-elevation-250);
|
|
25
|
+
background: none;
|
|
22
26
|
}
|
|
23
27
|
|
|
24
28
|
[dir='RTL'] & {
|
|
@@ -27,16 +31,20 @@
|
|
|
27
31
|
}
|
|
28
32
|
}
|
|
29
33
|
|
|
34
|
+
.toast-title {
|
|
35
|
+
line-height: base(1);
|
|
36
|
+
}
|
|
37
|
+
|
|
30
38
|
.payload-toast-item {
|
|
31
|
-
padding:
|
|
32
|
-
color: var(--theme-
|
|
39
|
+
padding: base(0.5);
|
|
40
|
+
color: var(--theme-elevation-800);
|
|
33
41
|
font-style: normal;
|
|
34
42
|
font-weight: 600;
|
|
35
43
|
display: flex;
|
|
36
44
|
gap: 1rem;
|
|
37
45
|
align-items: center;
|
|
38
46
|
width: 100%;
|
|
39
|
-
border-radius:
|
|
47
|
+
border-radius: 4px;
|
|
40
48
|
border: 1px solid var(--theme-border-color);
|
|
41
49
|
background: var(--theme-input-bg);
|
|
42
50
|
box-shadow:
|
|
@@ -45,6 +53,7 @@
|
|
|
45
53
|
|
|
46
54
|
.toast-content {
|
|
47
55
|
transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
56
|
+
width: 100%;
|
|
48
57
|
}
|
|
49
58
|
|
|
50
59
|
&[data-front='false'] {
|
|
@@ -60,51 +69,72 @@
|
|
|
60
69
|
}
|
|
61
70
|
|
|
62
71
|
.toast-icon {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
72
|
+
width: base(1);
|
|
73
|
+
height: base(1);
|
|
74
|
+
margin: 0;
|
|
75
|
+
display: flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
justify-content: center;
|
|
78
|
+
|
|
79
|
+
& > * {
|
|
80
|
+
width: base(1.2);
|
|
81
|
+
height: base(1.2);
|
|
66
82
|
}
|
|
67
83
|
}
|
|
68
84
|
|
|
69
85
|
&.toast-warning {
|
|
70
|
-
|
|
71
|
-
|
|
86
|
+
color: var(--theme-warning-800);
|
|
87
|
+
border-color: var(--theme-warning-150);
|
|
88
|
+
background-color: var(--theme-warning-50);
|
|
89
|
+
|
|
90
|
+
.payload-toast-close-button {
|
|
91
|
+
color: var(--theme-warning-600);
|
|
92
|
+
|
|
93
|
+
&:hover {
|
|
94
|
+
color: var(--theme-warning-250);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
72
97
|
}
|
|
73
98
|
|
|
74
99
|
&.toast-error {
|
|
75
|
-
|
|
76
|
-
|
|
100
|
+
color: var(--theme-error-800);
|
|
101
|
+
border-color: var(--theme-error-150);
|
|
102
|
+
background-color: var(--theme-error-50);
|
|
103
|
+
|
|
104
|
+
.payload-toast-close-button {
|
|
105
|
+
color: var(--theme-error-600);
|
|
106
|
+
|
|
107
|
+
&:hover {
|
|
108
|
+
color: var(--theme-error-250);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
77
111
|
}
|
|
78
112
|
|
|
79
113
|
&.toast-success {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
114
|
+
color: var(--theme-success-800);
|
|
115
|
+
border-color: var(--theme-success-150);
|
|
116
|
+
background-color: var(--theme-success-50);
|
|
83
117
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
background-color: var(--theme-elevation-100);
|
|
87
|
-
}
|
|
118
|
+
.payload-toast-close-button {
|
|
119
|
+
color: var(--theme-success-600);
|
|
88
120
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
background-color: var(--theme-warning-100);
|
|
121
|
+
&:hover {
|
|
122
|
+
color: var(--theme-success-250);
|
|
123
|
+
}
|
|
93
124
|
}
|
|
125
|
+
}
|
|
94
126
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
127
|
+
&.toast-info {
|
|
128
|
+
color: var(--theme-elevation-800);
|
|
129
|
+
border-color: var(--theme-elevation-150);
|
|
130
|
+
background-color: var(--theme-elevation-50);
|
|
99
131
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
background-color: var(--theme-success-50);
|
|
103
|
-
}
|
|
132
|
+
.payload-toast-close-button {
|
|
133
|
+
color: var(--theme-elevation-600);
|
|
104
134
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
135
|
+
&:hover {
|
|
136
|
+
color: var(--theme-elevation-250);
|
|
137
|
+
}
|
|
108
138
|
}
|
|
109
139
|
}
|
|
110
140
|
}
|
package/dist/scss/type.scss
CHANGED
|
@@ -15,17 +15,10 @@
|
|
|
15
15
|
font-weight: 500;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
%jumbo {
|
|
19
|
-
font-size: base(2.5);
|
|
20
|
-
line-height: 1;
|
|
21
|
-
margin: 0 0 base(2);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
18
|
%h1 {
|
|
25
19
|
margin: 0 0 base(1);
|
|
26
|
-
font-size: base(
|
|
27
|
-
line-height: 1.
|
|
28
|
-
letter-spacing: -1px;
|
|
20
|
+
font-size: base(1.6);
|
|
21
|
+
line-height: base(1.8);
|
|
29
22
|
|
|
30
23
|
@include small-break {
|
|
31
24
|
letter-spacing: -0.5px;
|
|
@@ -35,9 +28,8 @@
|
|
|
35
28
|
|
|
36
29
|
%h2 {
|
|
37
30
|
margin: 0 0 base(1);
|
|
38
|
-
font-size: base(1.
|
|
39
|
-
line-height: 1.
|
|
40
|
-
letter-spacing: -0.5px;
|
|
31
|
+
font-size: base(1.3);
|
|
32
|
+
line-height: base(1.6);
|
|
41
33
|
|
|
42
34
|
@include small-break {
|
|
43
35
|
font-size: base(0.85);
|
|
@@ -46,9 +38,8 @@
|
|
|
46
38
|
|
|
47
39
|
%h3 {
|
|
48
40
|
margin: 0 0 base(1);
|
|
49
|
-
font-size: base(
|
|
50
|
-
line-height: 1.
|
|
51
|
-
letter-spacing: -0.5px;
|
|
41
|
+
font-size: base(1);
|
|
42
|
+
line-height: base(1.2);
|
|
52
43
|
|
|
53
44
|
@include small-break {
|
|
54
45
|
font-size: base(0.65);
|
|
@@ -58,27 +49,27 @@
|
|
|
58
49
|
|
|
59
50
|
%h4 {
|
|
60
51
|
margin: 0 0 $baseline;
|
|
61
|
-
font-size: base(0.
|
|
62
|
-
line-height: 1
|
|
52
|
+
font-size: base(0.8);
|
|
53
|
+
line-height: base(1);
|
|
63
54
|
letter-spacing: -0.375px;
|
|
64
55
|
}
|
|
65
56
|
|
|
66
57
|
%h5 {
|
|
67
58
|
margin: 0;
|
|
68
|
-
font-size: base(0.
|
|
69
|
-
line-height:
|
|
59
|
+
font-size: base(0.65);
|
|
60
|
+
line-height: base(0.8);
|
|
70
61
|
}
|
|
71
62
|
|
|
72
63
|
%h6 {
|
|
73
64
|
margin: 0;
|
|
74
|
-
font-size: base(0.
|
|
75
|
-
line-height:
|
|
65
|
+
font-size: base(0.6);
|
|
66
|
+
line-height: base(0.8);
|
|
76
67
|
}
|
|
77
68
|
|
|
78
69
|
%small {
|
|
79
70
|
margin: 0;
|
|
80
|
-
font-size:
|
|
81
|
-
line-height:
|
|
71
|
+
font-size: 12px;
|
|
72
|
+
line-height: 20px;
|
|
82
73
|
}
|
|
83
74
|
|
|
84
75
|
/////////////////////////////
|
package/dist/scss/vars.scss
CHANGED
|
@@ -13,7 +13,7 @@ $breakpoint-l-width: 1440px !default;
|
|
|
13
13
|
// BASELINE GRID
|
|
14
14
|
//////////////////////////////
|
|
15
15
|
|
|
16
|
-
$baseline-px:
|
|
16
|
+
$baseline-px: 20px !default;
|
|
17
17
|
$baseline-body-size: 13px !default;
|
|
18
18
|
$baseline: math.div($baseline-px, $baseline-body-size) + rem;
|
|
19
19
|
|
|
@@ -40,7 +40,7 @@ $color-purple: #f3ddf3 !default;
|
|
|
40
40
|
|
|
41
41
|
$style-radius-s: 3px !default;
|
|
42
42
|
$style-radius-m: 4px !default;
|
|
43
|
-
$style-radius-l:
|
|
43
|
+
$style-radius-l: 8px !default;
|
|
44
44
|
$style-stroke-width: 1px !default;
|
|
45
45
|
|
|
46
46
|
$style-stroke-width-s: 1px !default;
|
|
@@ -50,8 +50,8 @@ $style-stroke-width-m: 2px !default;
|
|
|
50
50
|
// MISC
|
|
51
51
|
//////////////////////////////
|
|
52
52
|
|
|
53
|
-
$top-header-offset: calc(
|
|
54
|
-
$top-header-offset-m:
|
|
53
|
+
$top-header-offset: calc(base(1) - 1px);
|
|
54
|
+
$top-header-offset-m: base(3);
|
|
55
55
|
$focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
|
|
56
56
|
|
|
57
57
|
//////////////////////////////
|
|
@@ -59,41 +59,19 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
|
|
|
59
59
|
//////////////////////////////
|
|
60
60
|
|
|
61
61
|
@mixin shadow-sm {
|
|
62
|
-
box-shadow:
|
|
63
|
-
0 2px 3px 0 rgba(0, 2, 4, 0.05),
|
|
64
|
-
0 10px 4px -8px rgba(0, 2, 4, 0.02);
|
|
62
|
+
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
|
|
65
63
|
}
|
|
66
64
|
|
|
67
65
|
@mixin shadow-m {
|
|
68
|
-
box-shadow:
|
|
69
|
-
0 0 30px 0 rgb(0 2 4 / 12%),
|
|
70
|
-
0 30px 25px -8px rgb(0 2 4 / 10%);
|
|
66
|
+
box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.1);
|
|
71
67
|
}
|
|
72
68
|
|
|
73
69
|
@mixin shadow-lg {
|
|
74
|
-
box-shadow:
|
|
75
|
-
0 20px 35px -10px rgba(0, 2, 4, 0.2),
|
|
76
|
-
0 6px 4px -4px rgba(0, 2, 4, 0.02);
|
|
70
|
+
box-shadow: 0 -2px 16px -2px rgba(0, 0, 0, 0.2);
|
|
77
71
|
}
|
|
78
72
|
|
|
79
73
|
@mixin shadow-lg-top {
|
|
80
|
-
box-shadow:
|
|
81
|
-
0 -20px 35px -10px rgba(0, 2, 4, 0.2),
|
|
82
|
-
0 -6px 4px -4px rgba(0, 2, 4, 0.02);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
@mixin shadow {
|
|
86
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
|
|
87
|
-
|
|
88
|
-
&:hover {
|
|
89
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
@mixin inputShadowActive {
|
|
94
|
-
box-shadow:
|
|
95
|
-
0 2px 3px 0 rgba(0, 2, 4, 0.16),
|
|
96
|
-
0 6px 4px -4px rgba(0, 2, 4, 0.13);
|
|
74
|
+
box-shadow: 0 2px 16px -2px rgba(0, 0, 0, 0.2);
|
|
97
75
|
}
|
|
98
76
|
|
|
99
77
|
@mixin inputShadow {
|
|
@@ -101,15 +79,7 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
|
|
|
101
79
|
|
|
102
80
|
&:not(:disabled) {
|
|
103
81
|
&:hover {
|
|
104
|
-
box-shadow:
|
|
105
|
-
0 2px 3px 0 rgba(0, 2, 4, 0.13),
|
|
106
|
-
0 6px 4px -4px rgba(0, 2, 4, 0.1);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
&:active,
|
|
110
|
-
&:focus-within,
|
|
111
|
-
&:focus {
|
|
112
|
-
@include inputShadowActive;
|
|
82
|
+
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
|
|
113
83
|
}
|
|
114
84
|
}
|
|
115
85
|
}
|
|
@@ -147,19 +117,33 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
|
|
|
147
117
|
@include blur-bg(var(--theme-bg), 0.3);
|
|
148
118
|
}
|
|
149
119
|
|
|
120
|
+
@mixin readOnly {
|
|
121
|
+
background: var(--theme-elevation-100);
|
|
122
|
+
color: var(--theme-elevation-400);
|
|
123
|
+
box-shadow: none;
|
|
124
|
+
|
|
125
|
+
&:hover {
|
|
126
|
+
border-color: var(--theme-elevation-150);
|
|
127
|
+
box-shadow: none;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
150
131
|
@mixin formInput() {
|
|
151
132
|
@include inputShadow;
|
|
152
133
|
font-family: var(--font-body);
|
|
153
134
|
width: 100%;
|
|
154
135
|
border: 1px solid var(--theme-elevation-150);
|
|
136
|
+
border-radius: var(--style-radius-s);
|
|
155
137
|
background: var(--theme-input-bg);
|
|
156
138
|
color: var(--theme-elevation-800);
|
|
157
|
-
border-radius: 0;
|
|
158
139
|
font-size: 1rem;
|
|
159
140
|
height: base(2);
|
|
160
141
|
line-height: base(1);
|
|
161
|
-
padding: base(0.
|
|
142
|
+
padding: base(0.4) base(0.75);
|
|
162
143
|
-webkit-appearance: none;
|
|
144
|
+
transition-property: border, box-shadow;
|
|
145
|
+
transition-duration: 100ms;
|
|
146
|
+
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
|
|
163
147
|
|
|
164
148
|
&[data-rtl='true'] {
|
|
165
149
|
direction: rtl;
|
|
@@ -189,12 +173,7 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
|
|
|
189
173
|
}
|
|
190
174
|
|
|
191
175
|
&:disabled {
|
|
192
|
-
|
|
193
|
-
color: var(--theme-elevation-450);
|
|
194
|
-
|
|
195
|
-
&:hover {
|
|
196
|
-
border-color: var(--theme-elevation-150);
|
|
197
|
-
}
|
|
176
|
+
@include readOnly;
|
|
198
177
|
}
|
|
199
178
|
}
|
|
200
179
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@payloadcms/richtext-slate",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.75",
|
|
4
4
|
"description": "The officially supported Slate richtext adapter for Payload",
|
|
5
5
|
"homepage": "https://payloadcms.com",
|
|
6
6
|
"repository": {
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
"@types/react": "npm:types-react@19.0.0-rc.0",
|
|
37
37
|
"@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
|
|
38
38
|
"@payloadcms/eslint-config": "3.0.0-beta.59",
|
|
39
|
-
"
|
|
40
|
-
"
|
|
39
|
+
"@payloadcms/ui": "3.0.0-beta.75",
|
|
40
|
+
"payload": "3.0.0-beta.75"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
|
-
"react": "^19.0.0 || ^19.0.0-rc-
|
|
44
|
-
"@payloadcms/translations": "3.0.0-beta.
|
|
45
|
-
"
|
|
46
|
-
"
|
|
43
|
+
"react": "^19.0.0 || ^19.0.0-rc-06d0b89e-20240801",
|
|
44
|
+
"@payloadcms/translations": "3.0.0-beta.75",
|
|
45
|
+
"@payloadcms/ui": "3.0.0-beta.75",
|
|
46
|
+
"payload": "3.0.0-beta.75"
|
|
47
47
|
},
|
|
48
48
|
"engines": {
|
|
49
49
|
"node": "^18.20.2 || >=20.9.0"
|