@kookaat/strapi-plugin-tinymce 1.0.7

package/.github/stale.yml

@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 30
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+    - pinned
+    - security
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+    This issue has been automatically marked as stale because it has not had
+    recent activity. It will be closed if no further activity occurs. Thank you
+    for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

package/README.md

@@ -0,0 +1,177 @@
+<h1 align="center">Strapi plugin TinyMCE</h1>
+
+<p align="center">Replaces the default Strapi WYSIWYG editor with a customized build of TinyMCE editor.</p>
+
+## 👋 Intro
+
+* [Features](#features)
+* [Installation](#installation)
+* [Configuration](#configuration)
+* [Requirements](#requirements)
+
+## <a id="features"></a>✨ Key features
+
+* **Anchor:** Add an anchor/bookmark button to the toolbar that inserts an anchor at the editor’s cursor insertion point.
+* **Autolink:** Create hyperlinks automatically when a user inputs a valid and complete URL.
+* **Autoresize:** Resize the editor automatically to the content inside it, and prevent the editor from expanding infinitely.
+* **Code:** Add a toolbar button that allows a user to edit the HTML code hidden by the WYSIWYG view.
+* **Code sample:** Insert and embed syntax color highlighted code snippets into the editable area.
+
+
+And much more ! [List of all features](https://www.tiny.cloud/tinymce/features/).
+
+## <a id="installation"></a>🔧 Installation
+
+Inside your Strapi app, add the package:
+
+With `npm`:
+```bash
+npm install @sklinet/strapi-plugin-tinymce
+```
+With `yarn`:
+```bash
+yarn add @sklinet/strapi-plugin-tinymce
+```
+
+In `config/plugins.js` file add:
+```js
+tinymce:{
+    enabled:true
+};
+```
+
+If you do not yet have this file, then create and add:
+```js
+module.exports = () => ({
+    tinymce:{
+      enabled:true
+    };
+})
+```
+
+You will also have to update strapi::security middleware in your middlewares.js file in config folder.
+If you didn't update this file yet, then replace "strapi::security" with following code (object)
+```js
+//middlewares.js
+
+ {
+    name: "strapi::security",
+    config: {
+      contentSecurityPolicy: {
+        useDefaults: true,  
+        directives: {
+          "script-src": ["'self'", "*.tinymce.com", "*.tiny.cloud", "https:"],
+          "connect-src": ["'self'", "*.tinymce.com", "*.tiny.cloud", "blob:", "*.strapi.io"],
+          "img-src": [
+            "'self'",
+            "*.tinymce.com",
+            "*.tiny.cloud",
+            "data:",
+            "blob:",
+            "dl.airtable.com",
+            "strapi.io",
+            "s3.amazonaws.com",
+            "cdn.jsdelivr.net",
+          ],
+          "style-src": [
+            "'self'",
+            "'unsafe-inline'",
+            "*.tinymce.com",
+            "*.tiny.cloud",
+          ],
+          "font-src": ["'self'", "*.tinymce.com", "*.tiny.cloud"],
+        },
+        upgradeInsecureRequests: null,
+      },
+    },
+  },
+```
+
+Then run build:
+```bash
+npm run build
+```
+
+or
+```bash
+yarn build
+```
+
+**After starting your project please add API key for your TinyMCE editor in admin panel in settings/tinymce/configuration**
+
+If TinyMCE editor doesn't appear in your richtext field, please check your console for any hints, you might have incorrectly set your middlewares.
+
+## <a id="configuration"></a>⚙️ Configuration
+TinyMCE outputFormat should be defined in `config.editor`, and init object should be defined in `config.editor.editorConfig` field in `plugins.js` file.
+
+**⚠️ `plugins.js` not `plugin.js` ⚠️**
+
+**`plugins.js` file should be placed in `config` folder.**
+
+
+Learn more about configuration from [official documentation](https://www.tiny.cloud/docs/tinymce/6/).
+
+**Default configuration:**
+```js
+// plugins.js
+module.exports = ({ env }) => ({
+    tinymce: {
+        enabled: true,
+        config: {
+            editor: {
+                outputFormat: "html",
+                editorConfig: {
+                    language: "sk",
+                    height: 500,
+                    menubar: false,
+                    extended_valid_elements: "span, img, small",
+                    forced_root_block: "",
+                    convert_urls: false,
+                    entity_encoding: "raw",
+                    plugins:
+                        "advlist autolink lists link image charmap preview anchor \
+                        searchreplace visualblocks code fullscreen table emoticons nonbreaking \
+                        insertdatetime media table code help wordcount",
+                    toolbar:
+                        "undo redo | styles | bold italic forecolor backcolor | \
+                        alignleft aligncenter alignright alignjustify | \
+                        media table emoticons visualblocks code|\
+                        nonbreaking bullist numlist outdent indent | removeformat | help",
+                    style_formats: [
+                        {
+                            title: "Headings",
+                            items: [
+                                { title: "h1", block: "h1" },
+                                { title: "h2", block: "h2" },
+                                { title: "h3", block: "h3" },
+                                { title: "h4", block: "h4" },
+                                { title: "h5", block: "h5" },
+                                { title: "h6", block: "h6" },
+                            ],
+                        },
+
+                        {
+                            title: "Text",
+                            items: [
+                                { title: "Paragraph", block: "p" },
+                                {
+                                    title: "Paragraph with small letters",
+                                    block: "small",
+                                },
+                            ],
+                        },
+                    ],
+                },
+            },
+        },
+    },
+});
+
+```
+
+## <a id="requirements"></a>⚠️ Requirements
+Strapi **v4.x.x+**
+
+Node **14 - 16**
+
+Tested on **v4.3.4**

package/admin/src/api/settings.js

@@ -0,0 +1,14 @@
+import { axiosInstance } from "../utils";
+
+const taskRequests = {
+    getSettings: async () => {
+        const data = await axiosInstance.get(`/tinymce/settings`);
+        return data;
+    },
+    setSettings: async (data) => {
+        return await axiosInstance.post(`/tinymce/settings`, {
+            apiKey: data,
+        });
+    },
+};
+export default taskRequests;

package/admin/src/components/Editor/index.js

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { Editor } from "@tinymce/tinymce-react";
+import { request } from "@strapi/helper-plugin";
+import pluginId from "../../pluginId";
+import taskRequests from "../../api/settings";
+import { prefixFileUrlWithBackendUrl } from "@strapi/helper-plugin";
+
+const TinyEditor = ({ onChange, name, value }) => {
+    const [pluginConfig, setPluginConfig] = useState();
+    const [apiKey, setApiKey] = useState("");
+    const [loading, setLoading] = useState(true);
+    const uploadUrl = `${prefixFileUrlWithBackendUrl("/api/upload")}`;
+
+    useEffect(() => {
+        const getApiKey = async () => {
+            const data = await taskRequests.getSettings();
+            if (data) {
+                return setApiKey(data.data.apiKey);
+            }
+        };
+        const getPluginConfig = async () => {
+            const editor = await request(`/${pluginId}/config/editor`, {
+                method: "GET",
+            });
+            if (editor) {
+                setPluginConfig(editor);
+            }
+        };
+        getApiKey().then(() => {
+            setLoading(false)
+        });
+        getPluginConfig();
+    }, []);
+
+    return (
+        !loading && pluginConfig ?
+            <Editor
+                apiKey={apiKey || ""}
+                value={value}
+                tagName={name}
+                onEditorChange={(editorContent) => {
+                    onChange({ target: { name, value: editorContent } });
+                }}
+                outputFormat={pluginConfig?.outputFormat || "html"}
+                init={{
+                    ...pluginConfig?.editorConfig,
+                    images_upload_handler: async (blobInfo) => {
+                      const formData = new FormData();
+                      formData.append("files", blobInfo.blob());
+                      const response = await fetch(uploadUrl, {
+                        method: "POST",
+                        headers: {
+                          Authorization: "Bearer ",
+                        },
+                        body: formData,
+                      })
+                        .then((response) => response.json())
+                        .catch(function (err) {
+                          console.log("error:", err);
+                        });
+                        return response?.[0]?.url || '';
+                    },
+                  }}
+            />
+            : <></>
+    );
+};
+TinyEditor.propTypes = {
+    onChange: PropTypes.func.isRequired,
+    name: PropTypes.string.isRequired,
+    value: PropTypes.string,
+};
+export default TinyEditor;

package/admin/src/components/Initializer/index.js

@@ -0,0 +1,26 @@
+/**
+ *
+ * Initializer
+ *
+ */
+
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import pluginId from '../../pluginId';
+
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef();
+  ref.current = setPlugin;
+
+  useEffect(() => {
+    ref.current(pluginId);
+  }, []);
+
+  return null;
+};
+
+Initializer.propTypes = {
+  setPlugin: PropTypes.func.isRequired,
+};
+
+export default Initializer;

package/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;

package/admin/src/components/PluginIcon/index.js

@@ -0,0 +1,12 @@
+/**
+ *
+ * PluginIcon
+ *
+ */
+
+import React from "react";
+import Pencil from "@strapi/icons/Pencil";
+
+const PluginIcon = () => <Pencil />;
+
+export default PluginIcon;

package/admin/src/components/Wysiwyg/index.js

@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Stack } from "@strapi/design-system/Stack";
+import { Box } from "@strapi/design-system/Box";
+import { Button } from "@strapi/design-system/Button";
+import { Typography } from "@strapi/design-system/Typography";
+import Landscape from "@strapi/icons/Landscape";
+import MediaLib from "../MediaLib";
+import Editor from "../Editor";
+import { useIntl } from "react-intl";
+
+const Wysiwyg = ({
+    name,
+    onChange,
+    value,
+    intlLabel,
+    disabled,
+    error,
+    description,
+    required,
+}) => {
+    const { formatMessage } = useIntl();
+    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 = `<p><img src="${asset.url}" alt="${asset.alt}"></img></p>`;
+                newValue = `${newValue}${imgTag}`;
+            }
+            if (asset.mime.includes("video")) {
+                const videoTag = `<video><source src="${asset.url}" alt="${asset.alt}"</source></video>`;
+                newValue = `${newValue}${videoTag}`;
+            }
+        });
+
+        onChange({ target: { name, value: newValue } });
+        handleToggleMediaLib();
+    };
+
+    return (
+        <>
+            <Stack size={1}>
+                <Box>
+                    <Typography variant="pi" fontWeight="bold">
+                        {formatMessage(intlLabel)}
+                    </Typography>
+                    {required && (
+                        <Typography
+                            variant="pi"
+                            fontWeight="bold"
+                            textColor="danger600"
+                        >
+                            *
+                        </Typography>
+                    )}
+                </Box>
+                <Button
+                    startIcon={<Landscape />}
+                    variant="secondary"
+                    fullWidth
+                    onClick={handleToggleMediaLib}
+                >
+                    Media library
+                </Button>
+                <Editor
+                    disabled={disabled}
+                    name={name}
+                    onChange={onChange}
+                    value={value}
+                />
+                {error && (
+                    <Typography variant="pi" textColor="danger600">
+                        {formatMessage({ id: error, defaultMessage: error })}
+                    </Typography>
+                )}
+                {description && (
+                    <Typography variant="pi">
+                        {formatMessage(description)}
+                    </Typography>
+                )}
+            </Stack>
+            <MediaLib
+                isOpen={mediaLibVisible}
+                onChange={handleChangeAssets}
+                onToggle={handleToggleMediaLib}
+            />
+        </>
+    );
+};
+
+Wysiwyg.defaultProps = {
+    description: "",
+    disabled: false,
+    error: undefined,
+    intlLabel: "",
+    required: false,
+    value: "",
+};
+
+Wysiwyg.propTypes = {
+    description: PropTypes.shape({
+        id: PropTypes.string,
+        defaultMessage: PropTypes.string,
+    }),
+    disabled: PropTypes.bool,
+    error: PropTypes.string,
+    intlLabel: PropTypes.shape({
+        id: PropTypes.string,
+        defaultMessage: PropTypes.string,
+    }),
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    required: PropTypes.bool,
+    value: PropTypes.string,
+};
+
+export default Wysiwyg;

package/admin/src/index.js

@@ -0,0 +1,69 @@
+import { prefixPluginTranslations } from "@strapi/helper-plugin";
+import pluginPkg from "../../package.json";
+import pluginId from "./pluginId";
+import Initializer from "./components/Initializer";
+import Wysiwyg from "./components/Wysiwyg";
+import { getTrad } from "./utils";
+import pluginPermissions from "./permissions";
+
+const name = pluginPkg.strapi.name;
+
+export default {
+    register(app) {
+        app.addFields({ type: "wysiwyg", Component: Wysiwyg });
+        app.createSettingSection(
+            {
+                id: pluginId,
+                intlLabel: {
+                    id: `${pluginId}.plugin.name`,
+                    defaultMessage: "TinyMCE",
+                },
+            },
+            [
+                {
+                    intlLabel: {
+                        id: getTrad("settings.page-title"),
+                        defaultMessage: "Configuration",
+                    },
+                    id: "settings",
+                    to: `/settings/${pluginId}`,
+                    Component: async () => {
+                        return import("./pages/Settings");
+                    },
+                    permissions: pluginPermissions["settings"],
+                },
+            ]
+        );
+        app.registerPlugin({
+            id: pluginId,
+            initializer: Initializer,
+            isReady: false,
+            name,
+        });
+    },
+
+    bootstrap(app) {},
+    async registerTrads({ locales }) {
+        const importedTrads = await Promise.all(
+            locales.map((locale) => {
+                return import(
+                    /* webpackChunkName: "translation-[request]" */ `./translations/${locale}.json`
+                )
+                    .then(({ default: data }) => {
+                        return {
+                            data: prefixPluginTranslations(data, pluginId),
+                            locale,
+                        };
+                    })
+                    .catch(() => {
+                        return {
+                            data: {},
+                            locale,
+                        };
+                    });
+            })
+        );
+
+        return Promise.resolve(importedTrads);
+    },
+};

package/admin/src/pages/App/index.js

@@ -0,0 +1,25 @@
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import { NotFound } from '@strapi/helper-plugin';
+import pluginId from '../../pluginId';
+import HomePage from '../HomePage';
+
+const App = () => {
+  return (
+    <div>
+      <Switch>
+        <Route path={`/plugins/${pluginId}`} component={HomePage} exact />
+        <Route component={NotFound} />
+      </Switch>
+    </div>
+  );
+};
+
+export default App;

package/admin/src/pages/HomePage/index.js

@@ -0,0 +1,7 @@
+import React, { memo } from "react";
+
+const HomePage = () => {
+    return <></>;
+};
+
+export default memo(HomePage);

package/admin/src/pages/Settings/index.js

@@ -0,0 +1,134 @@
+import React, { useEffect, useState } from "react";
+import { useNotification, LoadingIndicatorPage } from "@strapi/helper-plugin";
+import { Box } from "@strapi/design-system/Box";
+import { Stack } from "@strapi/design-system/Stack";
+import { Button } from "@strapi/design-system/Button";
+import { Grid, GridItem } from "@strapi/design-system/Grid";
+import { HeaderLayout } from "@strapi/design-system/Layout";
+import { ContentLayout } from "@strapi/design-system/Layout";
+import { Typography } from "@strapi/design-system/Typography";
+import { useIntl } from "react-intl";
+import { getTrad } from "../../utils";
+import { TextInput } from "@strapi/design-system/TextInput";
+import Check from "@strapi/icons/Check";
+import taskRequests from "../../api/settings";
+
+const Settings = () => {
+    const toggleNotification = useNotification();
+    const { formatMessage } = useIntl();
+    const [isLoading, setIsLoading] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    const [currentApiKey, setCurrentApiKey] = useState("");
+
+    useEffect(() => {
+        setIsLoading(true);
+        const getApiKey = async () => {
+            const data = await taskRequests.getSettings();
+            if (data) {
+                setIsLoading(false);
+                return setCurrentApiKey(data.data.apiKey);
+            }
+        };
+        getApiKey();
+    }, [setCurrentApiKey]);
+
+    const handleSubmit = async () => {
+        setIsSaving(true);
+        await taskRequests.setSettings(currentApiKey);
+        setIsSaving(false);
+        toggleNotification({
+            type: "success",
+            message: formatMessage({
+                id: getTrad("settings.success-message"),
+                defaultMessage: "Settings successfully updated",
+            }),
+        });
+    };
+
+    const handleChange = (e) => {
+        setCurrentApiKey(() => e.target.value);
+    };
+
+    return (
+        <>
+            <HeaderLayout
+                id="title"
+                title={formatMessage({
+                    id: getTrad("settings.title"),
+                    defaultMessage: "TinyMCE",
+                })}
+                subtitle={formatMessage({
+                    id: getTrad("settings.subtitle"),
+                    defaultMessage:
+                        "Manage the settings of your TinyMCE plugin",
+                })}
+                primaryAction={
+                    isLoading ? (
+                        <></>
+                    ) : (
+                        <Button
+                            onClick={handleSubmit}
+                            startIcon={<Check />}
+                            size="L"
+                            disabled={isSaving}
+                            loading={isSaving}
+                        >
+                            {formatMessage({
+                                id: getTrad("settings.save-button"),
+                                defaultMessage: "Save",
+                            })}
+                        </Button>
+                    )
+                }
+            ></HeaderLayout>
+            {isLoading ? (
+                <LoadingIndicatorPage />
+            ) : (
+                <ContentLayout>
+                    <Box
+                        background="neutral0"
+                        hasRadius
+                        shadow="filterShadow"
+                        paddingTop={6}
+                        paddingBottom={6}
+                        paddingLeft={7}
+                        paddingRight={7}
+                    >
+                        <Stack size={3}>
+                            <Typography>
+                                {formatMessage({
+                                    id: getTrad("settings.content-title"),
+                                    defaultMessage:
+                                        "Set your API key for TinyMCE editor.",
+                                })}
+                            </Typography>
+                            <Grid gap={6}>
+                                <GridItem col={8} s={18}>
+                                    <TextInput
+                                        id="api-key"
+                                        name="key"
+                                        onChange={handleChange}
+                                        label={formatMessage({
+                                            id: getTrad("settings.input-title"),
+                                            defaultMessage: "API key",
+                                        })}
+                                        value={currentApiKey}
+                                        placeholder={formatMessage({
+                                            id: getTrad(
+                                                "settings.input-placeholder"
+                                            ),
+                                            defaultMessage:
+                                                "ex: ADASFNASF46564SAD",
+                                        })}
+                                    />
+                                </GridItem>
+                            </Grid>
+                        </Stack>
+                    </Box>
+                </ContentLayout>
+            )}
+        </>
+    );
+};
+
+export default Settings;

package/admin/src/permissions.js

@@ -0,0 +1,11 @@
+const pluginPermissions = {
+    // This permission regards the main component (App) and is used to tell
+    // If the plugin link should be displayed in the menu
+    // And also if the plugin is accessible. This use case is found when a user types the url of the
+    // plugin directly in the browser
+    'menu-link': [{ action: 'plugin::tinymce.menu-link', subject: null }],
+    settings: [{ action: 'plugin::tinymce.settings.read', subject: null }],
+  };
+  
+  export default pluginPermissions;
+  

package/admin/src/pluginId.js

@@ -0,0 +1,5 @@
+const pluginPkg = require("../../package.json");
+
+const pluginId = pluginPkg.name.replace(/^(@sklinet\/strapi-)plugin-/i, "");
+
+module.exports = pluginId;

package/admin/src/translations/cs.json

@@ -0,0 +1,10 @@
+{
+    "settings.title": "TinyMCE",
+    "settings.subtitle": "Úprava nastavení pluginu TinyMCE",
+    "settings.content-title": "Nastavení klíče API pro editor TinyMCE.",
+    "settings.save-button": "Uložit",
+    "settings.input-title": "API klíč",
+    "settings.input-placeholder": "např. eegrtg8464asnbvvvfasd46486asldaeerer45888areettzh",
+    "settings.success-message": "Nastavení bylo úspěšně uloženo.",
+    "settings.page-title": "Konfigurace"
+}

package/admin/src/translations/en.json

@@ -0,0 +1,10 @@
+{
+    "settings.title": "TinyMCE",
+    "settings.subtitle": "Edit settings of your TinyMCE plugin",
+    "settings.content-title": "Set API key for TinyMCE editor.",
+    "settings.save-button": "Save",
+    "settings.input-title": "API key",
+    "settings.input-placeholder": "ex. eegrtg8464asnbvvvfasd46486asldaeerer45888areettzh",
+    "settings.success-message": "Settings successfully updated",
+    "settings.page-title": "Configuration"
+}

package/admin/src/translations/sk.json

@@ -0,0 +1,10 @@
+{
+    "settings.title": "TinyMCE",
+    "settings.subtitle": "Upravte nastavenia vášho TinyMCE pluginu",
+    "settings.content-title": "Nastavte API kľúč pre TinyMCE editor.",
+    "settings.save-button": "Uložiť",
+    "settings.input-title": "API kľúč",
+    "settings.input-placeholder": "napr. eegrtg8464asnbvvvfasd46486asldaeerer45888areettzh",
+    "settings.success-message": "Nastavenia boli úspešne uložené.",
+    "settings.page-title": "Konfigurácia"
+}

package/admin/src/utils/axiosInstance.js

@@ -0,0 +1,40 @@
+/**
+ * axios with a custom config.
+ */
+
+import axios from 'axios';
+import { auth } from '@strapi/helper-plugin';
+
+const instance = axios.create({
+  baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
+});
+
+instance.interceptors.request.use(
+  async config => {
+    config.headers = {
+      Authorization: `Bearer ${auth.getToken()}`,
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    };
+
+    return config;
+  },
+  error => {
+    Promise.reject(error);
+  }
+);
+
+instance.interceptors.response.use(
+  response => response,
+  error => {
+    // whatever you want to do with the error
+    if (error.response?.status === 401) {
+      auth.clearAppStorage();
+      window.location.reload();
+    }
+
+    throw error;
+  }
+);
+
+export default instance;

package/admin/src/utils/get-trad.js

@@ -0,0 +1,5 @@
+import pluginId from '../pluginId';
+
+const getTrad = id => `${pluginId}.${id}`;
+
+export default getTrad;

package/admin/src/utils/index.js

@@ -0,0 +1,2 @@
+export { default as getTrad } from "./get-trad";
+export { default as axiosInstance } from "./axiosInstance";

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@kookaat/strapi-plugin-tinymce",
+  "version": "1.0.7",
+  "description": "Replaces the default Strapi WYSIWYG editor with a customized build of TinyMCE editor.",
+  "private": false,
+  "keywords": [
+    "strapi",
+    "tiinymce",
+    "tinymce 6",
+    "wysiwyg",
+    "rich text",
+    "editor"
+  ],
+  "strapi": {
+    "displayName": "TinyMCE",
+    "name": "tinymce",
+    "description": "Replaces the default Strapi WYSIWYG editor with a customized build of TinyMCE editor.",
+    "kind": "plugin"
+  },
+  "dependencies": {
+    "@tinymce/tinymce-react": "4.3.2"
+  },
+  "author": {
+    "name": "M.Hossein Zendehpey (forked from SKLINET s.r.o.)",
+    "url": "https://github.com/mhzendehpey"
+  },
+  "repository": {
+    "url": "git+https://github.com/mhzendehpey/strapi-plugin-tinymce"
+  },
+  "engines": {
+    "node": ">=14.19.1 <=20.x.x",
+    "npm": ">=6.0.0"
+  },
+  "license": "MIT"
+}

package/server/bootstrap.js

@@ -0,0 +1,19 @@
+"use strict";
+
+module.exports = async ({ strapi }) => {
+    const actions = [
+        {
+            section: "plugins",
+            displayName: "Access the plugin settings",
+            uid: "settings.read",
+            pluginName: "tinymce",
+        },
+        {
+            section: "plugins",
+            displayName: "Menu link to plugin settings",
+            uid: "menu-link",
+            pluginName: "tinymce",
+        },
+    ];
+    await strapi.admin.services.permission.actionProvider.registerMany(actions);
+};

package/server/config/index.js

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = {
+  default: {},
+  validator() {},
+};

package/server/content-types/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = {};

package/server/controllers/config.js

@@ -0,0 +1,12 @@
+"use strict";
+
+module.exports = {
+    getConfig: async (ctx) => {
+        const { configKey } = ctx.params;
+        const config = await strapi
+            .plugin("tinymce")
+            .service("config")
+            .getConfig(configKey);
+        ctx.send(config);
+    },
+};

package/server/controllers/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+const config = require("./config");
+const settings = require("./settings");
+
+module.exports = {
+    config,
+    settings,
+};

package/server/controllers/settings.js

@@ -0,0 +1,30 @@
+"use strict";
+
+module.exports = {
+    getSettings: async (ctx) => {
+        try {
+            ctx.body = await strapi
+                .plugin("tinymce")
+                .service("settings")
+                .getSettings();
+        } catch (err) {
+            ctx.body = err;
+            ctx.throw(500, err);
+        }
+    },
+    setSettings: async (ctx) => {
+        const { body } = ctx.request;
+        try {
+            await strapi
+                .plugin("tinymce")
+                .service("settings")
+                .setSettings(body);
+            ctx.body = await strapi
+                .plugin("tinymce")
+                .service("settings")
+                .getSettings();
+        } catch (err) {
+            ctx.throw(500, err);
+        }
+    },
+};

package/server/destroy.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = ({ strapi }) => {
+  // destroy phase
+};

package/server/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+const register = require('./register');
+const bootstrap = require('./bootstrap');
+const destroy = require('./destroy');
+const config = require('./config');
+const contentTypes = require('./content-types');
+const controllers = require('./controllers');
+const routes = require('./routes');
+const middlewares = require('./middlewares');
+const policies = require('./policies');
+const services = require('./services');
+
+module.exports = {
+  register,
+  bootstrap,
+  destroy,
+  config,
+  controllers,
+  routes,
+  services,
+  contentTypes,
+  policies,
+  middlewares,
+};

package/server/middlewares/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = {};

package/server/policies/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = {};

package/server/register.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = ({ strapi }) => {
+  // registeration phase
+};

package/server/routes/config.js

@@ -0,0 +1,13 @@
+"use strict";
+
+module.exports = {
+    type: "admin",
+    routes: [
+        {
+            method: "GET",
+            path: "/config/:configKey",
+            handler: "config.getConfig",
+            config: { policies: [] },
+        },
+    ],
+};

package/server/routes/index.js

@@ -0,0 +1,7 @@
+const config = require("./config");
+const settings = require("./settings");
+
+module.exports = {
+    config,
+    settings,
+};

package/server/routes/settings.js

@@ -0,0 +1,23 @@
+module.exports = {
+    type: "admin",
+    routes: [
+        {
+            method: "GET",
+            path: "/settings",
+            handler: "settings.getSettings",
+            config: {
+                policies: [],
+                auth: false,
+            },
+        },
+        {
+            method: "POST",
+            path: "/settings",
+            handler: "settings.setSettings",
+            config: {
+                policies: [],
+                auth: false,
+            },
+        },
+    ],
+};

package/server/services/config.js

@@ -0,0 +1,9 @@
+"use strict";
+
+module.exports = ({ strapi }) => {
+    return {
+        getConfig(key = "editor") {
+            return strapi.plugin("tinymce").config(key) ?? {};
+        },
+    };
+};

package/server/services/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+const config = require("./config");
+const settings = require("./settings");
+
+module.exports = {
+    config,
+    settings,
+};

package/server/services/settings.js

@@ -0,0 +1,36 @@
+"use strict";
+
+function getPluginStore() {
+    return strapi.store({
+        environment: "",
+        type: "plugin",
+        name: "tinymce",
+    });
+}
+async function createDefaultConfig() {
+    const pluginStore = getPluginStore();
+    const value = {
+        apiKey: "",
+    };
+    await pluginStore.set({ key: "settings", value });
+    return pluginStore.get({ key: "settings" });
+}
+
+module.exports = () => {
+    return {
+        async getSettings() {
+            const pluginStore = getPluginStore();
+            let config = await pluginStore.get({ key: "settings" });
+            if (!config) {
+                config = await createDefaultConfig();
+            }
+            return config;
+        },
+        async setSettings(settings) {
+            const value = settings;
+            const pluginStore = getPluginStore();
+            await pluginStore.set({ key: "settings", value });
+            return pluginStore.get({ key: "settings" });
+        },
+    };
+};

package/strapi-admin.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./admin/src').default;

package/strapi-server.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./server');