What happened to the strapi plugin?

[johncin]

Hello, I've been looking at making a plugin for strapi that allows using react-page as wysiwyg editor. I noticed that the maintainer of this project @macrozone posted about this some time ago, asking for some APIs to be amended, and that seems to have been added to strapi by now. Any updates on this? Thanks.

[macrozone]

Hello, I've been looking at making a plugin for strapi that allows using react-page as wysiwyg editor. I noticed that the maintainer of this project @macrozone posted about this some time ago, asking for some APIs to be amended, and that seems to have been added to strapi by now. Any updates on this? Thanks.

hey, thanks for your interest!

I am still waiting for a project where i can use this properly, but i have a working prototype.

Its currently done with a plugin, but strapi recently add support for custom fields, which should make it easier. My prototype is still with a custom plugin though.

I have no repo to share currently, but here is the plugin/react-page/admin/src/components/Editor code:

import React from "react";
import PropTypes from "prop-types";
import styled, { css } from "styled-components";
import ReactPageEditor, {
  CellPlugin,
  defaultThemeOptions,
} from "@react-page/editor";
import slate from "@react-page/plugins-slate";
import { Box } from "@strapi/design-system/Box";
import { createTheme } from "@mui/material";
import css1 from "!raw-loader!@react-page/editor/lib/index.css";
import css2 from "!raw-loader!@react-page/plugins-slate/lib/index.css";

import { useTheme, darkTheme } from "@strapi/design-system";

import { cellPlugins, GraphqlProvider } from "ui";
const Wrapper = styled(Box)`
  h1 {
    font-size: 2em;
    margin-bottom: 1em;
  }

  h2 {
    font-size: 1.8em;
    margin-bottom: 1em;
  }

  h3 {
    font-size: 1.6em;
    margin-bottom: 1em;
  }

  p {
    margin-bottom: 1em;
    line-height: 1.3;
  }
  li {
    margin-bottom: 1em;
  }
  ul {
    margin-left: 20px;
    li {
      list-style-type: disc;
    }
  }
  ol {
    margin-left: 20px;
    li {
      list-style-type: decimal;
    }
  }
  margin-right: 50px;

  ${(p) =>
    p.isDarkMode
      ? css`
          color: white;
        `
      : null}
`;
const reactPageDarkTheme = createTheme({
  ...defaultThemeOptions,
  palette: { mode: "dark" },
});

const useIsDarkMode = () => {
  const theme = useTheme();

  return theme.colors.neutral0 === darkTheme.colors.neutral0;
};
const Editor = ({ onChange, name, value, disabled, ...rest }) => {
  const isDarkMode = useIsDarkMode();

  return (
    <Wrapper isDarkMode={isDarkMode}>
      <style>
        {css1}
        {css2}
      </style>
      <GraphqlProvider graphqlEndpoint={window.strapi.backendURL + "/graphql"}>
        <ReactPageEditor
          uiTheme={isDarkMode ? reactPageDarkTheme : undefined}
          sidebarPosition="rightRelative"
          cellPlugins={cellPlugins}
          value={JSON.parse(value)}
          onChange={(data) => {
            onChange({ target: { name, value: JSON.stringify(data) } });
          }}
        />
      </GraphqlProvider>
    </Wrapper>
  );
};

Editor.defaultProps = {
  value: null,
  disabled: false,
};

Editor.propTypes = {
  onChange: PropTypes.func.isRequired,
  name: PropTypes.string.isRequired,
  value: PropTypes.any,
  disabled: PropTypes.bool,
};

export default Editor;

and plugin/react-page/admin/src/index.js

import pluginPkg from "../../package.json";
import ReactPage from "./components/Editor";
import pluginId from "./pluginId";

const name = pluginPkg.strapi.name;

export default {
  register(app, ...rest) {
    app.addFields({ type: "json", Component: ReactPage });

    app.registerPlugin({
      id: pluginId,
      isReady: true,
      name,
    });
  },
  bootstrap(app) {},
};

[johncin]

Seem to get errors about raw-loader. "Cannot find module '!raw-loader!@react-page/plugins-slate/lib/index.css' or its corresponding type declarations." Any special webpack config I need or the like?

[johncin]

From googling it seems you're supposed to use so-called Asset Modules in webpack 5 instead of raw-loader, so I tried that, doesn't seem to work either though...

config.module.rules.push({
  test: /\.css$/,
  resourceQuery: /raw/,
  type: 'asset/source',
});

And put "?raw" at the end of the import statements.

"Test" property not necessary obviously.

[macrozone]

did you install the rawloader? i used "raw-loader": "^4.0.2",

the above error Cannot find module '!raw-loader!@react-page/plugins-slate/lib/index.css' or its corresponding type declarations looks like from typescript, i used a js file for the time beeing for the custom plugin (i based it on an older example of strapi)

my webpack config for the admin:

"use strict";

const path = require("path");
const WatchExternalFilesPlugin = require("webpack-watch-files-plugin").default;

/* eslint-disable no-unused-vars */
module.exports = (config, webpack) => {
  // Note: we provide webpack above so you should not `require` it
  // Perform customizations to webpack config
  // Important: return the modified config

  config.module.rules.push({
    test: /\.tsx?$/,
    use: require.resolve("ts-loader"),
    exclude: /node_modules\/(?!(ui)\/).*/,
  });

  config.watchOptions = {
    ignored: /node_modules/,
  };

  config.plugins.push(
    new WatchExternalFilesPlugin({
      files: ["../ui/**/*.ts", "../ui/**/*.tsx"],
    })
  );

  config.resolve.extensions = [".js", ".jsx", ".react.js", ".ts", ".tsx"];
  return config;
};

but my example was based on an earlier version, they now have better typescirpt support i think

[johncin]

The webpack config in particular still needs to be a .js file from my tests. It won't read a .ts one, even though the starter has that. And yes I installed raw-loader@4.0.2 as a dev dependency in the strapi package. And did yarn build before starting it up.

[johncin]

Another thing is the file uploader service and how to plug that into strapi's file/image management. Any ideas there? It seems like basically the file uploader API would work but you would really want to associate the upload to the entity you're creating, so later they will show up in the UI as being associated etc. So maybe you can call a strapi service to get the entity ID in case you're adding an image to an existing entity. And then supply that when you're doing the upload. Or if you're working on a new entity, I guess it would upload the file normally since it can't bind to an entity that doesn't exist yet. But then maybe after or during saving the entity, you'd do an API call or use params to bind the file/image to the entity you're creating.

[johncin]

https://github.com/johncin/strapi-reactpage

uploaded a repo to test it, css imports commented out for now since i cant get it working