@_sh/strapi-plugin-ckeditor 2.0.3 → 2.1.0

package/admin/src/components/Input/MediaLib/index.js

@@ -1,79 +1,70 @@
-import React from "react";
-import { prefixFileUrlWithBackendUrl, useLibrary } from "@strapi/helper-plugin";
-import PropTypes from "prop-types";
-
-const MediaLib = ({ isOpen, onChange, onToggle, editor, uploadConfig: { responsiveDimensions } }) => {
-  const { components } = useLibrary();
-  const MediaLibraryDialog = components["media-library"];
-
-  const handleChangeAssets = (assets) => {
-    let newValue = "";
-
-    assets.map(({name, url, alt, formats, mime}) => {
-
-      if (mime.includes("image")) {
-
-          if (formats && responsiveDimensions) {
-            let set = "";
-            let keys = Object.keys(formats).sort((a, b) => formats[a].width - formats[b].width );
-            keys.map((k) => set += prefixFileUrlWithBackendUrl(formats[k].url) + ` ${formats[k].width}w,`);
-            newValue += `<img src="${url}" alt="${alt}" width="${formats[keys[keys.length-1]].width}px" srcset="${set}" />`;
-          } else {
-            newValue += `<img src="${url}" alt="${alt}" />`;
-          }
-
-      } else if (mime.includes("application/pdf")) {
-
-          newValue = `<a href="${prefixFileUrlWithBackendUrl(url)}" download="${name}">${name || 'Download PDF'}</a>`;
-
-      }
-      // Handle videos and other type of files by adding some code
-    });
-
-    const viewFragment = editor.data.processor.toView( newValue );
-    const modelFragment = editor.data.toModel( viewFragment );
-    editor.model.insertContent( modelFragment );
-
-    onToggle();
-  };
-
-  const handleSelectAssets = (files) => {
-    const formattedFiles = files.map((f) => ({
-      name: f.name,
-      alt: f.alternativeText || f.name,
-      url: prefixFileUrlWithBackendUrl(f.url),
-      mime: f.mime,
-      formats: f.formats
-    }));
-
-    handleChangeAssets(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;
+import React from "react";
+import { prefixFileUrlWithBackendUrl, useLibrary } from "@strapi/helper-plugin";
+import PropTypes from "prop-types";
+
+const MediaLib = ({ isOpen, onChange, onToggle, editor, uploadConfig: { responsiveDimensions } }) => {
+  const { components } = useLibrary();
+  const MediaLibraryDialog = components["media-library"];
+
+  const handleChangeAssets = (assets) => {
+    let newValue = "";
+
+    assets.map(({ name, url, alt, formats, mime, width, height }) => {
+      if (mime.includes("image")) {
+        if (formats && responsiveDimensions) {
+          let set = "";
+          let keys = Object.keys(formats).sort((a, b) => formats[a].width - formats[b].width);
+          keys.map((k) => (set += prefixFileUrlWithBackendUrl(formats[k].url) + ` ${formats[k].width}w,`));
+          newValue += `<img src="${url}" alt="${alt}" width="${width}" height="${height}" srcset="${set}" />`;
+        } else {
+          newValue += `<img src="${url}" alt="${alt}" width="${width}" height="${height}" />`;
+        }
+      } else if (mime.includes("application/pdf")) {
+        newValue = `<a href="${prefixFileUrlWithBackendUrl(url)}" download="${name}">${name || "Download PDF"}</a>`;
+      } else if (mime.includes("video")) {
+        newValue = `
+            <video class="video" controls width="500px">
+                <source src="${prefixFileUrlWithBackendUrl(url)}" type="${mime}" />
+            <video/>`;
+      }
+    });
+
+    const viewFragment = editor.data.processor.toView(newValue);
+    const modelFragment = editor.data.toModel(viewFragment);
+    editor.model.insertContent(modelFragment);
+
+    onToggle();
+  };
+
+  const handleSelectAssets = (files) => {
+    const formattedFiles = files.map((f) => ({
+      name: f.name,
+      alt: f.alternativeText || f.name,
+      url: prefixFileUrlWithBackendUrl(f.url),
+      mime: f.mime,
+      formats: f.formats,
+    }));
+
+    handleChangeAssets(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/Input/index.js

@@ -1,48 +1,48 @@
-import React from "react";
-import PropTypes from "prop-types";
-import {default as CKEditor} from "./CKEditor";
-import { useIntl } from "react-intl";
-import { Field, FieldHint, FieldError, FieldLabel } from "@strapi/design-system/Field";
-import { Stack } from "@strapi/design-system/Stack";
-
-const Wysiwyg = ({ name, attribute, onChange, value, intlLabel, labelAction, disabled, error, description, required }) => {
-  const { formatMessage } = useIntl();
-  const { preset, maxLengthCharacters, ...options } = attribute.options;
-  
-  return (
-    <Field name={name} id={name} error={error} hint={description && formatMessage(description)}>
-      <Stack spacing={1}>
-        <FieldLabel action={labelAction} required={required}>
-          {formatMessage(intlLabel)}
-        </FieldLabel>
-          <CKEditor disabled={disabled} name={name} onChange={onChange} value={value} preset={preset} maxLength={maxLengthCharacters}/>
-        <FieldHint />
-        <FieldError />
-      </Stack>
-    </Field>
-  );
-};
-
-
-Wysiwyg.defaultProps = {
-  description: null,
-  disabled: false,
-  error: null,
-  labelAction: null,
-  required: false,
-  value: "",
-};
-
-Wysiwyg.propTypes = {
-  intlLabel: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired,
-  attribute: PropTypes.object.isRequired,
-  name: PropTypes.string.isRequired,
-  description: PropTypes.object,
-  disabled: PropTypes.bool,
-  error: PropTypes.string,
-  labelAction: PropTypes.object,
-  required: PropTypes.bool,
-  value: PropTypes.string,
-};
-export default Wysiwyg;
+import React from "react";
+import PropTypes from "prop-types";
+import {default as CKEditor} from "./CKEditor";
+import { useIntl } from "react-intl";
+import { Field, FieldHint, FieldError, FieldLabel } from "@strapi/design-system";
+import { Stack } from "@strapi/design-system";
+
+const Wysiwyg = ({ name, attribute, onChange, value, intlLabel, labelAction, disabled, error, description, required }) => {
+  const { formatMessage } = useIntl();
+  const { preset, maxLengthCharacters, ...options } = attribute.options;
+  
+  return (
+    <Field name={name} id={name} error={error} hint={description && formatMessage(description)}>
+      <Stack spacing={1}>
+        <FieldLabel action={labelAction} required={required}>
+          {formatMessage(intlLabel)}
+        </FieldLabel>
+          <CKEditor disabled={disabled} name={name} onChange={onChange} value={value} preset={preset} maxLength={maxLengthCharacters}/>
+        <FieldHint />
+        <FieldError />
+      </Stack>
+    </Field>
+  );
+};
+
+
+Wysiwyg.defaultProps = {
+  description: null,
+  disabled: false,
+  error: null,
+  labelAction: null,
+  required: false,
+  value: "",
+};
+
+Wysiwyg.propTypes = {
+  intlLabel: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  attribute: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  description: PropTypes.object,
+  disabled: PropTypes.bool,
+  error: PropTypes.string,
+  labelAction: PropTypes.object,
+  required: PropTypes.bool,
+  value: PropTypes.string,
+};
+export default Wysiwyg;

package/admin/src/index.js

@@ -1,110 +1,110 @@
-import React from "react";
-import * as yup from "yup";
-
-import baseConfigs from "./components/Input/CKEditor/configs";
-import getEditorConfig from "./utils/getEditorConfig";
-import CKEditorIcon from "./components/CKEditorIcon";
-import pluginId from "./utils/pluginId";
-
-export default {
-  async register(app) {
-
-    const {
-      configs: userConfigs = baseConfigs,
-      configsOverwrite: overwrite
-    } = await getEditorConfig() || {};
-
-    const setOptions = () => {
-
-      let configs = {};
-
-      if (overwrite) {
-        configs = userConfigs;
-      } else {
-        configs = baseConfigs;
-        if (userConfigs) {
-          Object.keys(userConfigs).map(cfgName=>{
-            if(baseConfigs.hasOwnProperty(cfgName))
-              configs[cfgName].field = { ...baseConfigs[cfgName].field, ...userConfigs[cfgName].field };
-            else configs[cfgName] = userConfigs[cfgName];
-          })
-        }
-      }
-
-      const options = [...Object.keys(configs).map(configName=>configs[configName].field)];
-
-      return options;
-    }
- 
-     app.customFields.register({
-       name: "CKEditor",
-       type: "richtext",
-       pluginId: pluginId,
-       icon: CKEditorIcon,
-       intlLabel: {
-         id: pluginId + ".label",
-         defaultMessage: "CKEditor 5",
-       },
-       intlDescription: {
-         id: pluginId + ".description",
-         defaultMessage: "The rich text editor for every use case",
-       },
-       components: {
-         Input: async () => import("./components/Input"),
-       },
-       options: {
-         base: [
-           {
-             intlLabel: {
-               id: pluginId + ".preset.label",
-               defaultMessage: "Choose editor version",
-             },
-             description: {
-               id: pluginId + ".preset.description",
-               defaultMessage: " ",
-             },
-             name: "options.preset",
-             type: "select",
-             options: setOptions(),
-           },
-         ],
-         advanced: [
-           {
-             sectionTitle: null,
-             items: [
-               {
-                 name: "required",
-                 type: "checkbox",
-                 intlLabel: {
-                   id: pluginId + ".required.label",
-                   defaultMessage: "Required field",
-                 },
-                 description: {
-                   id: pluginId + "required.description",
-                   defaultMessage:
-                     "You won't be able to create an entry if this field is empty",
-                 },
-               },
-               {
-                 name: "options.maxLengthCharacters",
-                 type: "checkbox-with-number-field",
-                 intlLabel: {
-                   id: pluginId + ".maxLength.label",
-                   defaultMessage: "Maximum length (characters)",
-                 },
-               }
- 
-             ],
-           },
-         ],
-         validator: (args) => ({
-           preset: yup.string().required({
-             id: pluginId + ".preset.error.required",
-             defaultMessage: "Editor preset is required",
-           }),
-         }),
-       },
-     });
-   }
- };
- 
+import React from "react";
+import * as yup from "yup";
+
+import baseConfigs from "./components/Input/CKEditor/configs";
+import getEditorConfig from "./utils/getEditorConfig";
+import CKEditorIcon from "./components/CKEditorIcon";
+import pluginId from "./utils/pluginId";
+
+export default {
+  async register(app) {
+
+    const {
+      configs: userConfigs = baseConfigs,
+      configsOverwrite: overwrite
+    } = await getEditorConfig() || {};
+
+    const setOptions = () => {
+
+      let configs = {};
+
+      if (overwrite) {
+        configs = userConfigs;
+      } else {
+        configs = baseConfigs;
+        if (userConfigs) {
+          Object.keys(userConfigs).map(cfgName=>{
+            if(baseConfigs.hasOwnProperty(cfgName))
+              configs[cfgName].field = { ...baseConfigs[cfgName].field, ...userConfigs[cfgName].field };
+            else configs[cfgName] = userConfigs[cfgName];
+          })
+        }
+      }
+
+      const options = [...Object.keys(configs).map(configName=>configs[configName].field)];
+
+      return options;
+    }
+ 
+     app.customFields.register({
+       name: "CKEditor",
+       type: "richtext",
+       pluginId: pluginId,
+       icon: CKEditorIcon,
+       intlLabel: {
+         id: pluginId + ".label",
+         defaultMessage: "CKEditor 5",
+       },
+       intlDescription: {
+         id: pluginId + ".description",
+         defaultMessage: "The rich text editor for every use case",
+       },
+       components: {
+         Input: async () => import("./components/Input"),
+       },
+       options: {
+         base: [
+           {
+             intlLabel: {
+               id: pluginId + ".preset.label",
+               defaultMessage: "Choose editor version",
+             },
+             description: {
+               id: pluginId + ".preset.description",
+               defaultMessage: " ",
+             },
+             name: "options.preset",
+             type: "select",
+             options: setOptions(),
+           },
+         ],
+         advanced: [
+           {
+             sectionTitle: null,
+             items: [
+               {
+                 name: "required",
+                 type: "checkbox",
+                 intlLabel: {
+                   id: pluginId + ".required.label",
+                   defaultMessage: "Required field",
+                 },
+                 description: {
+                   id: pluginId + "required.description",
+                   defaultMessage:
+                     "You won't be able to create an entry if this field is empty",
+                 },
+               },
+               {
+                 name: "options.maxLengthCharacters",
+                 type: "checkbox-with-number-field",
+                 intlLabel: {
+                   id: pluginId + ".maxLength.label",
+                   defaultMessage: "Maximum length (characters)",
+                 },
+               }
+ 
+             ],
+           },
+         ],
+         validator: (args) => ({
+           preset: yup.string().required({
+             id: pluginId + ".preset.error.required",
+             defaultMessage: "Editor preset is required",
+           }),
+         }),
+       },
+     });
+   }
+ };
+ 

package/admin/src/utils/getEditorConfig.js

@@ -1,37 +1,37 @@
-import pluginId from "./pluginId";
-
-const insertConfigScript = () => {
-  const url =
-    strapi.backendURL !== "/"
-      ? `${strapi.backendURL}/${pluginId}/ckeditor-config`
-      : `/${pluginId}/ckeditor-config`;
-
-  var script = document.createElement("script");
-  script.id = "ckeditor-config";
-  script.src = url;
-  document.body.appendChild(script);
-};
-
-const waitForConfigToInitialize = async () => {
-  return new Promise((resolve) => {
-    (function checkConfigLoaded() {
-      if (typeof globalThis.CKEditorConfig !== "undefined") {
-        resolve(globalThis.CKEditorConfig);
-      } else setTimeout(checkConfigLoaded, 5);
-    })();
-  });
-};
-
-const getEditorConfig = async () => {
-  // raw config/ckeditor.[js|ts] file
-  // Can be used with non-JSON serializable properties
-  insertConfigScript();
-  const configFromScript = await waitForConfigToInitialize();
-  if (configFromScript) {
-    return configFromScript;
-  }
-
-    return null;
-};
-
-export default getEditorConfig;
+import pluginId from "./pluginId";
+
+const insertConfigScript = () => {
+  const url =
+    strapi.backendURL !== "/"
+      ? `${strapi.backendURL}/${pluginId}/ckeditor-config`
+      : `/${pluginId}/ckeditor-config`;
+
+  var script = document.createElement("script");
+  script.id = "ckeditor-config";
+  script.src = url;
+  document.body.appendChild(script);
+};
+
+const waitForConfigToInitialize = async () => {
+  return new Promise((resolve) => {
+    (function checkConfigLoaded() {
+      if (typeof globalThis.CKEditorConfig !== "undefined") {
+        resolve(globalThis.CKEditorConfig);
+      } else setTimeout(checkConfigLoaded, 5);
+    })();
+  });
+};
+
+const getEditorConfig = async () => {
+  // raw config/ckeditor.[js|ts] file
+  // Can be used with non-JSON serializable properties
+  insertConfigScript();
+  const configFromScript = await waitForConfigToInitialize();
+  if (configFromScript) {
+    return configFromScript;
+  }
+
+    return null;
+};
+
+export default getEditorConfig;

package/admin/src/utils/pluginId.js

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