Merge pull request #4 from kwinyyyc/feature/medialib

add support for medialib

admin/src/components/MediaLib/index.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { prefixFileUrlWithBackendUrl, useLibrary } from "@strapi/helper-plugin";
+import PropTypes from "prop-types";
+
+const MediaLib = ({ isOpen, onChange, onToggle }) => {
+  const { components } = useLibrary();
+  const MediaLibraryDialog = components["media-library"];
+
+  const handleSelectAssets = (files) => {
+    const formattedFiles = files.map((f) => ({
+      alt: f.alternativeText || f.name,
+      url: prefixFileUrlWithBackendUrl(f.url),
+      mime: f.mime,
+    }));
+
+    onChange(formattedFiles);
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <MediaLibraryDialog
+      onClose={onToggle}
+      onSelectAssets={handleSelectAssets}
+    />
+  );
+};
+
+MediaLib.defaultProps = {
+  isOpen: false,
+  onChange: () => {},
+  onToggle: () => {},
+};
+
+MediaLib.propTypes = {
+  isOpen: PropTypes.bool,
+  onChange: PropTypes.func,
+  onToggle: PropTypes.func,
+};
+
+export default MediaLib;

admin/src/components/ReactMdEditor/index.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import MDEditor from '@uiw/react-md-editor';
-
-import styled from 'styled-components';
-import '@uiw/react-md-editor/dist/markdown-editor.css';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import MDEditor, { commands } from "@uiw/react-md-editor";
+import MediaLib from "../MediaLib";
+import styled from "styled-components";
+import "@uiw/react-md-editor/dist/markdown-editor.css";
 
 const Wrapper = styled.div`
   .w-md-editor {
@@ -29,16 +29,77 @@ const Wrapper = styled.div`
 `;
 
 const Editor = ({ onChange, name, value }) => {
+  const [mediaLibVisible, setMediaLibVisible] = useState(false);
+
+  const handleToggleMediaLib = () => setMediaLibVisible((prev) => !prev);
+
+  const handleChangeAssets = (assets) => {
+    let newValue = value ? value : "";
+
+    assets.map((asset) => {
+      if (asset.mime.includes("image")) {
+        const imgTag = `![](${asset.url})`;
+
+        newValue = `${newValue}${imgTag}`;
+      }
+
+      // Handle videos and other type of files by adding some code
+    });
+
+    onChange({ target: { name, value: newValue || "" } });
+    handleToggleMediaLib();
+  };
   return (
     <Wrapper>
       <MDEditor
+        commands={[
+          commands.title,
+          commands.bold,
+          commands.codeBlock,
+          commands.italic,
+          commands.strikethrough,
+          commands.hr,
+          commands.group,
+          commands.divider,
+          commands.link,
+          commands.quote,
+          commands.code,
+          {
+            name: "image",
+            keyCommand: "image",
+            buttonProps: { "aria-label": "Insert title3" },
+            icon: (
+              <svg width="12" height="12" viewBox="0 0 20 20">
+                <path
+                  fill="currentColor"
+                  d="M15 9c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4-7H1c-.55 0-1 .45-1 1v14c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 13l-6-5-2 2-4-5-4 8V4h16v11z"
+                ></path>
+              </svg>
+            ),
+            execute: (state, api) => {
+              handleToggleMediaLib();
+            },
+          },
+          commands.unorderedListCommand,
+          commands.orderedListCommand,
+          commands.checkedListCommand,
+          commands.codeEdit,
+          commands.codeLive,
+          commands.codePreview,
+          commands.fullscreen,
+        ]}
         value={value || ""}
         onChange={(newValue) => {
-          onChange({ target: { name, value: newValue || ""} });
+          onChange({ target: { name, value: newValue || "" } });
         }}
       />
-      <div style={{ padding: '50px 0 0 0' }} />
+      <div style={{ padding: "50px 0 0 0" }} />
       <MDEditor.Markdown source={value || ""} />
+      <MediaLib
+        isOpen={mediaLibVisible}
+        onChange={handleChangeAssets}
+        onToggle={handleToggleMediaLib}
+      />
     </Wrapper>
   );
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-wysiwsg-react-md-editor",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "This is a strapi rich text editor plugin using react md editor.",
   "strapi": {
     "name": "wysiwsg-react-md-editor",