diff --git a/src/RichTextWidget.jsx b/src/RichTextWidget.jsx new file mode 100644 index 0000000..6bd0827 --- /dev/null +++ b/src/RichTextWidget.jsx @@ -0,0 +1,79 @@ +/** + * A Slate widget that uses internal JSON representation as its value + * + */ + +import React from 'react'; +import isUndefined from 'lodash/isUndefined'; +import isString from 'lodash/isString'; +import config from '@plone/volto/registry'; +import { FormFieldWrapper } from '@plone/volto/components'; +import SlateEditor from '@plone/volto-slate/editor/SlateEditor'; +import { createEmptyParagraph } from '@plone/volto-slate/utils/blocks'; + +import '@plone/volto-slate/widgets/style.css'; + +function createParagraph(text) { + return { + type: config.settings.slate.defaultBlockType, + children: [{ text }], + }; +} + +const getValue = (value) => { + if (isUndefined(value) || !isUndefined(value?.data)) { + return [createEmptyParagraph()]; + } + // Previously this was a text field + if (isString(value)) { + return [createParagraph(value)]; + } + return value; +}; + +const SlateRichTextWidget = (props) => { + const { + id, + onChange, + value, + focus, + className, + block, + placeholder, + properties, + readOnly = false, + } = props; + const [selected, setSelected] = React.useState(focus); + + return ( + +
{ + setSelected(true); + }} + onKeyDown={() => {}} + > + { + onChange(id, newValue); + }} + block={block} + selected={selected} + properties={properties} + placeholder={placeholder} + /> +
+
+ ); +}; + +export default SlateRichTextWidget; diff --git a/src/index.js b/src/index.js index 64b7997..9a5f2ca 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,10 @@ import installStatisticBlock from './StatisticBlock'; +import RichTextWidget from './RichTextWidget'; const applyConfig = (config) => { + config.widgets.widget.slate = RichTextWidget; + config.widgets.widget.slate_richtext = RichTextWidget; + return [installStatisticBlock].reduce((acc, apply) => apply(acc), config); };