Widget richtext

.eslintrc.js

@@ -64,6 +64,7 @@ module.exports = {
       node: {
         extensions: ['.js', '.jsx', '.ts', '.tsx'],
       },
+      exports: {},
     },
     'import/core-modules': [...packages, 'decap-cms-app/dist/esm'],
   },

dev-test/config.yml

@@ -51,7 +51,9 @@ collections: # A list of collections the CMS should be able to edit
         required: false
         tagname: ''
 
-      - { label: 'Body', name: 'body', widget: 'markdown', hint: 'Main content goes here.' }
+      - { label: 'Body', name: 'body', widget: 'richtext', hint: 'Main content goes here.' }
+      - { label: 'Body', name: 'bodyold', widget: 'markdown', hint: 'Main content goes here.' }
+      - { label: 'Body', name: 'bodyold2', widget: 'markdown', hint: 'Main content goes here 2.' }
 
   - name: 'restaurants' # Used in routes, ie.: /admin/collections/:slug/edit
     label: 'Restaurants' # Used in the UI

package.json

@@ -103,6 +103,7 @@
     "cypress-plugin-tab": "^1.0.0",
     "dotenv": "^10.0.0",
     "eslint": "^8.12.0",
+    "eslint-import-resolver-exports": "^1.0.0-beta.5",
     "eslint-plugin-cypress": "^2.6.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-prettier": "^4.0.0",

packages/decap-cms-app/src/extensions.js

@@ -18,6 +18,7 @@ import DecapCmsWidgetImage from 'decap-cms-widget-image';
 import DecapCmsWidgetFile from 'decap-cms-widget-file';
 import DecapCmsWidgetSelect from 'decap-cms-widget-select';
 import DecapCmsWidgetMarkdown from 'decap-cms-widget-markdown';
+import DecapCmsWidgetRichtext from 'decap-cms-widget-richtext';
 import DecapCmsWidgetList from 'decap-cms-widget-list';
 import DecapCmsWidgetObject from 'decap-cms-widget-object';
 import DecapCmsWidgetRelation from 'decap-cms-widget-relation';
@@ -49,6 +50,7 @@ CMS.registerWidget([
   DecapCmsWidgetFile.Widget(),
   DecapCmsWidgetSelect.Widget(),
   DecapCmsWidgetMarkdown.Widget(),
+  DecapCmsWidgetRichtext.Widget(),
   DecapCmsWidgetList.Widget(),
   DecapCmsWidgetObject.Widget(),
   DecapCmsWidgetRelation.Widget(),

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

@@ -35,12 +35,13 @@
     "remark-slate": "^1.8.6",
     "remark-slate-transformer": "^0.7.4",
     "remark-stringify": "^6.0.4",
-    "slate": "^0.91.1",
+    "slate": "^0.118.1",
     "slate-base64-serializer": "^0.2.107",
-    "slate-history": "^0.93.0",
-    "slate-hyperscript": "^0.77.0",
-    "slate-plain-serializer": "^0.7.1",
-    "slate-react": "^0.91.2",
+    "slate-dom": "^0.118.1",
+    "slate-history": "^0.113.1",
+    "slate-hyperscript": "^0.100.0",
+    "slate-plain-serializer": "^0.7.3",
+    "slate-react": "^0.117.4",
     "slate-soft-break": "^0.9.0",
     "unified": "^9.2.0",
     "unist-builder": "^1.0.3",

packages/decap-cms-widget-markdown/src/MarkdownControl/VisualEditor.js

@@ -222,7 +222,7 @@ function Editor(props) {
         position: relative;
       `}
     >
-      <Slate editor={editor} value={editorValue} onChange={handleChange}>
+      <Slate editor={editor} value={editorValue} initialValue={editorValue} onChange={handleChange}>
         <EditorControlBar>
           {
             <Toolbar

packages/decap-cms-widget-markdown/src/MarkdownControl/components/VoidBlock.js

@@ -42,6 +42,7 @@ function VoidBlock({ attributes, children, element }) {
     insertAtPath([...path.slice(0, -1), path[path.length - 1] + 1]);
   }
 
+
   const insertBefore = path[0] === 0;
   const nextElement = editor.children[path[0] + 1];
   const insertAfter = path[0] === editor.children.length - 1 || editor.isVoid(nextElement);

packages/decap-cms-widget-markdown/src/serializers/index.js

@@ -220,7 +220,10 @@ export function markdownToSlate(markdown, { voidCodeBlock, remarkPlugins = [] }
  * trees.
  */
 export function slateToMarkdown(raw, { voidCodeBlock, remarkPlugins = [] } = {}) {
+  console.log('old raw', raw);
   const mdast = slateToRemark(raw, { voidCodeBlock });
+  console.log('old mdast', mdast);
   const markdown = remarkToMarkdown(mdast, remarkPlugins);
+  console.log('old md', markdown);
   return markdown;
 }

packages/decap-cms-widget-richtext/README.md

@@ -0,0 +1,9 @@
+# Docs coming soon!
+
+Decap CMS was converted from a single npm package to a "monorepo" of over 20 packages.
+We haven't created a README for this package yet, but you can:
+
+1. Check out the [main readme](https://github.com/decaporg/decap-cms/#readme) or the [documentation
+   site](https://www.decapcms.org) for more info.
+2. Reach out to the [community chat](https://decapcms.org/chat/) if you need help.
+3. Help out and [write the readme yourself](https://github.com/decaporg/decap-cms/edit/master/packages/decap-cms-widget-markdown/README.md)!

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

@@ -0,0 +1,46 @@
+{
+  "name": "decap-cms-widget-richtext",
+  "description": "Widget for editing richtext in Decap CMS.",
+  "version": "3.1.0",
+  "homepage": "https://www.decapcms.org/docs/widgets/#richtext",
+  "repository": "https://github.com/decaporg/decap-cms/tree/master/packages/decap-cms-widget-richtext",
+  "bugs": "https://github.com/decaporg/decap-cms/issues",
+  "module": "dist/esm/index.js",
+  "main": "dist/decap-cms-widget-richtext.js",
+  "license": "MIT",
+  "keywords": [
+    "decap-cms",
+    "widget",
+    "richtext",
+    "editor"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "develop": "npm run build:esm -- --watch",
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\"  --root-mode upward --copy-files --extensions \".js,.jsx,.ts,.tsx\""
+  },
+  "dependencies": {
+    "@platejs/basic-nodes": "^49.0.0",
+    "@platejs/link": "^50.2.7",
+    "@platejs/list": "^50.2.0",
+    "@platejs/list-classic": "^49.1.0",
+    "class-variance-authority": "^0.7.0",
+    "lucide-react": "^0.331.0",
+    "platejs": "^49.2.21",
+    "remark-parse": "^6.0.3",
+    "remark-rehype": "^4.0.0",
+    "unified": "^9.0.0"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "decap-cms-ui-default": "^3.0.0",
+    "immutable": "^3.7.6",
+    "lodash": "^4.17.11",
+    "prop-types": "^15.7.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-immutable-proptypes": "^2.1.0"
+  }
+}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+import VisualEditor from './RichtextControl/VisualEditor';
+import { EditorProvider } from './RichtextControl/editorContext';
+
+export default class MarkdownControl extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    onAddAsset: PropTypes.func.isRequired,
+    getAsset: PropTypes.func.isRequired,
+    classNameWrapper: PropTypes.string.isRequired,
+    editorControl: PropTypes.elementType.isRequired,
+    value: PropTypes.string,
+    field: ImmutablePropTypes.map.isRequired,
+    getEditorComponents: PropTypes.func,
+    t: PropTypes.func.isRequired,
+    isDisabled: PropTypes.bool,
+  };
+
+
+  render() {
+    const { classNameWrapper, field, t, isDisabled, getEditorComponents, editorControl, onChange, value } =
+      this.props;
+
+    const visualEditor = (
+      <EditorProvider editorControl={editorControl} editorComponents={getEditorComponents()}>
+        <div className="cms-editor-visual" ref={this.processRef}>
+          <VisualEditor
+            t={t}
+            field={field}
+            className={classNameWrapper}
+            getEditorComponents={getEditorComponents}
+            isDisabled={isDisabled}
+            onChange={onChange}
+            value={value}
+          />
+        </div>
+      </EditorProvider>
+    );
+    return visualEditor;
+  }
+}