feat(widget-richtext): add shortcode plugin for editor components

Author: demshy

dev-test/index.html

@@ -125,7 +125,10 @@
           h('p', {},
             h('small', {}, "Written " + entry.getIn(['data', 'date']))
           ),
-          h('div', {"className": "text"}, this.props.widgetFor('body'))
+          h('h2', {}, "Richtext Widget"),
+          h('div', {"className": "text"}, this.props.widgetFor('body')),
+          h('h2', {}, "Markdown Widget"),
+          h('div', {"className": "text"}, this.props.widgetFor('bodyold'))
         );
       }
     });

package-lock.json

@@ -67,6 +67,7 @@ class PreviewContent extends React.Component {
 
 PreviewContent.propTypes = {
   previewComponent: PropTypes.func.isRequired,
+  getEditorComponents: PropTypes.func,
   previewProps: PropTypes.object,
   onFieldClick: PropTypes.func,
 };

packages/decap-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewContent.js

@@ -13,6 +13,7 @@ import {
   getPreviewTemplate,
   getPreviewStyles,
   getRemarkPlugins,
+  getEditorComponents,
 } from '../../../lib/registry';
 import { getAllEntries, tryLoadEntry } from '../../../actions/entries';
 import { ErrorBoundary } from '../../UI';
@@ -57,6 +58,7 @@ export class PreviewPane extends React.Component {
         fieldsMetaData={metadata}
         resolveWidget={resolveWidget}
         getRemarkPlugins={getRemarkPlugins}
+        getEditorComponents={getEditorComponents}
       />
     );
   };
@@ -261,6 +263,7 @@ export class PreviewPane extends React.Component {
         this.widgetFor(name, fields, values, fieldsMetaData),
       widgetsFor: this.widgetsFor,
       getCollection: this.getCollection,
+      getEditorComponents,
     };
 
     const styleEls = getPreviewStyles().map((style, i) => {

packages/decap-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js

@@ -21,7 +21,7 @@ class MarkdownPreview extends React.Component {
     if (value === null) {
       return null;
     }
-
+    
     const html = markdownToHtml(value, { getAsset, resolveWidget }, getRemarkPlugins?.());
     const toRender = field?.get('sanitize_preview', false) ? DOMPurify.sanitize(html) : html;
 

packages/decap-cms-widget-markdown/src/MarkdownPreview.js

@@ -28,8 +28,14 @@
     "class-variance-authority": "^0.7.0",
     "lucide-react": "^0.331.0",
     "platejs": "^49.2.21",
+    "rehype-parse": "^6.0.0",
+    "rehype-remark": "^8.0.0",
+    "rehype-stringify": "^7.0.0",
     "remark-parse": "^6.0.3",
     "remark-rehype": "^4.0.0",
+    "remark-slate": "^1.8.6",
+    "remark-slate-transformer": "^0.7.4",
+    "remark-stringify": "^6.0.4",
     "unified": "^9.0.0"
   },
   "peerDependencies": {

packages/decap-cms-widget-richtext/package.json

@@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import VisualEditor from './RichtextControl/VisualEditor';
 import { EditorProvider } from './RichtextControl/editorContext';
 
-export default class MarkdownControl extends React.Component {
+export default class RichtextControl extends React.Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
     onAddAsset: PropTypes.func.isRequired,

packages/decap-cms-widget-richtext/src/RichtextControl.js

@@ -1,17 +1,7 @@
 import React from 'react';
-import { KEYS, TrailingBlockPlugin } from 'platejs';
-import {
-  usePlateEditor,
-  Plate,
-  ParagraphPlugin,
-  PlateLeaf,
-} from 'platejs/react';
-import {
-  BoldPlugin,
-  ItalicPlugin,
-  CodePlugin,
-  HeadingPlugin,
-} from '@platejs/basic-nodes/react';
+import { KEYS } from 'platejs';
+import { usePlateEditor, Plate, ParagraphPlugin, PlateLeaf } from 'platejs/react';
+import { BoldPlugin, ItalicPlugin, CodePlugin, HeadingPlugin } from '@platejs/basic-nodes/react';
 import { ListPlugin } from '@platejs/list-classic/react';
 import { LinkPlugin } from '@platejs/link/react';
 import { ClassNames } from '@emotion/react';
@@ -29,8 +19,8 @@ import HeadingElement from './components/Element/HeadingElement';
 import ListElement from './components/Element/ListElement';
 import BlockquoteElement from './components/Element/BlockquoteElement';
 import LinkElement from './components/Element/LinkElement';
-// import ShortcodePlugin from './plugins/ShortcodePlugin';
 import ExtendedBlockquotePlugin from './plugins/ExtendedBlockquotePlugin';
+import ShortcodePlugin from './plugins/ShortcodePlugin';
 // import ShortcodeElement from './components/Element/ShortcodeElement';
 
 function visualEditorStyles({ minimal }) {
@@ -86,22 +76,6 @@ const emptyValue = [
     type: ParagraphPlugin.key,
     children: [{ text: '' }],
   },
-  // {
-  //   children: [{ text: 'Title' }],
-  //   type: 'h3',
-  // },
-  // {
-  //   children: [{ text: 'This is a quote.' }],
-  //   type: 'blockquote',
-  // },
-  // {
-  //   children: [
-  //     { text: 'With some ' },
-  //     { bold: true, text: 'bold' },
-  //     { text: ' text for emphasis!' },
-  //   ],
-  //   type: 'p',
-  // },
 ];
 
 export default function VisualEditor(props) {
@@ -135,7 +109,9 @@ export default function VisualEditor(props) {
     onChange(mdValue);
   }
 
-  const initialValue = props.value ? markdownToSlate(props.value, {}) : emptyValue;
+  const initialValue = props.value
+    ? markdownToSlate(props.value, { editorComponents })
+    : emptyValue;
 
   const editor = usePlateEditor({
     override: {
@@ -166,12 +142,9 @@ export default function VisualEditor(props) {
         node: { component: LinkElement },
       }),
       ExtendedBlockquotePlugin.configure({
-        node: { component: BlockquoteElement }
-      }),
-      // ShortcodePlugin,
-      TrailingBlockPlugin.configure({
-        options: { type: ParagraphPlugin.key },
+        node: { component: BlockquoteElement },
       }),
+      ShortcodePlugin,
     ],
     value: initialValue,
   });

packages/decap-cms-widget-richtext/src/RichtextControl/VisualEditor.js

@@ -5,7 +5,13 @@ import { omit } from 'lodash';
 import { css } from '@emotion/react';
 import { Range, setNodes } from 'slate';
 import { zIndex } from 'decap-cms-ui-default';
-import { ParagraphPlugin, PlateElement, useEditorRef } from 'platejs/react';
+import {
+  ParagraphPlugin,
+  PlateElement,
+  useEditorRef,
+  useEditorSelection,
+  useEditorState,
+} from 'platejs/react';
 
 import { useEditorContext } from '../../editorContext';
 
@@ -28,21 +34,22 @@ function InsertionPoint(props) {
 
 function ShortcodeElement(props) {
   const editor = useEditorRef();
-  const { element, dataKey = 'shortcodeData', children } = props;
+  const editorState = useEditorState();
+  const { attributes, element, dataKey = 'shortcodeData', children } = props;
   const { editorControl: EditorControl, editorComponents } = useEditorContext();
-  const plugin = editorComponents.get(element.id);
+  const plugin = editorComponents.get(element.data.shortcode);
   const fieldKeys = ['id', 'fromBlock', 'toBlock', 'toPreview', 'pattern', 'icon'];
 
   const field = fromJS(omit(plugin, fieldKeys));
   const [value, setValue] = useState(fromJS(element?.data[dataKey] ?? { id: '' }));
 
+  const selection = useEditorSelection();
   const path = editor.api.findPath(element);
   const isSelected =
-    editor.selection &&
-    path &&
-    Range.isRange(editor.selection) &&
-    Range.includes(editor.selection, path);
+    selection && path && Range.isRange(selection) && Range.includes(selection, path);
   const insertBefore = path[0] === 0;
+  const insertAfter =
+    path[0] === editorState.children.length - 1 || editor.isVoid(editorState.children[path[0] + 1]);
 
   function handleChange(fieldName, value, metadata) {
     const newProperties = {
@@ -65,32 +72,41 @@ function ShortcodeElement(props) {
     );
   }
 
+  function handleInsertAfter(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    editor.tf.insertNodes(
+      { type: ParagraphPlugin.key, children: [{ text: '' }] },
+      { select: true },
+    );
+  }
+
   return (
-    <>
-      <PlateElement asChild {...props} contentEditable={false}>
-        <StyledDiv>
-          {insertBefore && <InsertionPoint onClick={handleInsertBefore} />}
-          <EditorControl
-            css={css`
-              margin-top: 0;
-              margin-bottom: 16px;
+    <PlateElement asChild {...props}>
+      {insertBefore && <InsertionPoint onClick={handleInsertBefore} />}
+      <StyledDiv {...attributes} contentEditable={false}>
+        <EditorControl
+          css={css`
+            margin-top: 0;
+            margin-bottom: 16px;
 
-              &:first-of-type {
-                margin-top: 0;
-              }
-            `}
-            value={value}
-            field={field}
-            onChange={handleChange}
-            isEditorComponent={true}
-            onValidateObject={() => {}}
-            isNewEditorComponent={element.data?.shortcodeNew}
-            isSelected={isSelected}
-          />
-          {children}
-        </StyledDiv>
-      </PlateElement>
-    </>
+            &:first-of-type {
+              margin-top: 0;
+            }
+          `}
+          value={value}
+          field={field}
+          onChange={handleChange}
+          isEditorComponent={true}
+          onValidateObject={() => {}}
+          isNewEditorComponent={element.data?.shortcodeNew}
+          isSelected={isSelected}
+        />
+        {children}
+      </StyledDiv>
+      {insertAfter && <InsertionPoint onClick={handleInsertAfter} />}
+    </PlateElement>
   );
 }
 

packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/ShortcodeElement.js

@@ -24,30 +24,22 @@ function EditorComponentsToolbarButton({ disabled, editorComponents, allowedEdit
         .filter(field => field.has('default'))
         .map(field => field.get('default'));
 
-      if (editor.api.isAt({ end: true }) && editor.api.isAt({ start: true })) {
-        // setBlockAboveNode(editor, { // find alternative for removed setBlockAboveNode
-        //   children: [{ text: '' }],
-        //   type: 'shortcode',
-        //   id: plugin.id,
-        //   data: {
-        //     shortcode: plugin.id,
-        //     shortcodeNew: true,
-        //     shortcodeData: defaultValues.toJS(),
-        //   },
-        // })
-        return;
-      }
-
-      editor.tf.insertNodes({
-        children: [{ text: '' }],
-        type: 'shortcode',
-        id: plugin.id,
-        data: {
-          shortcode: plugin.id,
-          shortcodeNew: true,
-          shortcodeData: defaultValues.toJS(),
+      editor.tf.insertNodes(
+        {
+          children: [{ text: '' }],
+          type: 'shortcode',
+          isElement: true,
+          isVoid: true,
+          data: {
+            shortcode: plugin.id,
+            shortcodeNew: true,
+            shortcodeData: defaultValues.toJS(),
+          },
+        },
+        {
+          removeEmpty: true,
         },
-      });
+      );
     },
     [editor],
   );