feat: #14 add audio support

README.md

@@ -1,6 +1,6 @@
 # 🛹 Strapi Plugin Rich Text
 
-#### A WYSIWYG editor for your rich text fields
+A WYSIWYG editor for your rich text fields.
 
 This Strapi plugin replaces the Markdown editor with a visual, easy-to-use text editor.
 
@@ -19,7 +19,7 @@ The plugin stores the content in HTML format. When querying content on the front
 
 ## Getting Started
 
-#### Install
+### Install
 
 ```bash
 pnpm install strapi-plugin-rich-text
@@ -30,6 +30,42 @@ pnpm run build
 
 After this, the `Rich Text` plugin should show up in your list of Plugins in the admin panel.
 
+#### Add the following to the webpack config (/src/admin/webpack.config.js)
+
+This is due to tippy.js doesn't have an ES6 module, and a tiptap depencency imports it as such.
+
+```javascript
+config.plugins.push(new webpack.NormalModuleReplacementPlugin(
+  /^tippy\.js$/,
+  'tippy.js/dist/tippy-bundle.umd.min.js'
+))
+```
+
+#### Add the following to middlewares config (/config/middlewares.js)
+
+You need to add "frame-src": ["'self'", "www.youtube.com"] to the content security policy to allow embedding YouTube videos in your Strapi editor.
+
+```javascript
+export default [
+  // other policies
+  {
+    name: "strapi::security",
+    config: {
+      contentSecurityPolicy: {
+        useDefaults: true,
+        directives: {
+          "connect-src": ["'self'", "http:", "https:"],
+          "frame-src": ["'self'", "www.youtube.com"],
+          upgradeInsecureRequests: null,
+        },
+      },
+    },
+  },
+ // other policies
+];
+
+```
+
 #### Configuration
 
 | What                 | How                                                                                                                                                                                                                           |
@@ -50,10 +86,8 @@ This project includes an exemplary Strapi installation, which you can use to tes
 
 You can start the development server via `pnpm dev` and access the Strapi admin with the following user credentials:
 
-```
-E-Mail Address: [email protected]
-Password: dummyAdmin123
-```
+> E-Mail Address: [email protected]
+> Password: dummyAdmin123
 
 The Strapi admin already contains some playgrounds to test the editor.
 

apps/strapi/.strapi/client/app.js

@@ -5,14 +5,18 @@
 import usersPermissions from "@strapi/plugin-users-permissions/strapi-admin";
 import i18N from "@strapi/plugin-i18n/strapi-admin";
 import strapiCloud from "@strapi/plugin-cloud/strapi-admin";
-import strapiPluginRichText from "../../node_modules/strapi-plugin-rich-text/strapi-admin";
+import richtextEditor from "../../node_modules/strapi-plugin-rich-text/strapi-admin";
 import { renderAdmin } from "@strapi/strapi/admin";
 
+import customisations from "../../src/admin/app.tsx";
+
 renderAdmin(document.getElementById("strapi"), {
+  customisations,
+
   plugins: {
     "users-permissions": usersPermissions,
     i18n: i18N,
     "strapi-cloud": strapiCloud,
-    "strapi-plugin-rich-text": strapiPluginRichText,
+    "richtext-editor": richtextEditor,
   },
 });

apps/strapi/config/middlewares.ts

@@ -6,7 +6,9 @@ export default [
       contentSecurityPolicy: {
         useDefaults: true,
         directives: {
-          "frame-src": ["'self'", "https://www.youtube.com"],
+          "connect-src": ["'self'", "http:", "https:"],
+          "frame-src": ["'self'", "www.youtube.com"],
+          upgradeInsecureRequests: null,
         },
       },
     },

apps/strapi/config/plugins.ts

@@ -1,6 +1,13 @@
 export default {
-  "strapi-plugin-rich-text": {
+  "richtext-editor": {
     enabled: true,
     resolve: "./node_modules/strapi-plugin-rich-text",
+    config: {
+      headings: ["h2", "h3", "h4", "h5", "h6"],
+      other: {
+        wordcount: true,
+        saveJson: true,
+      },
+    },
   },
 };

apps/strapi/src/admin/app.example.tsx → apps/strapi/src/admin/app.tsx

@@ -6,7 +6,7 @@ export default {
       // 'cs',
       // 'de',
       // 'dk',
-      // 'es',
+      "es",
       // 'he',
       // 'id',
       // 'it',
@@ -22,14 +22,14 @@ export default {
       // 'sk',
       // 'sv',
       // 'th',
-      // 'tr',
+      "tr",
       // 'uk',
       // 'vi',
       // 'zh-Hans',
       // 'zh',
     ],
   },
-  bootstrap(app) {
-    console.log(app);
+  bootstrap(/* app */) {
+    //    console.log(app);
   },
 };

packages/strapi-plugin-rich-text/admin/src/components/RichText/Components/AlertToolbar.tsx

@@ -0,0 +1,118 @@
+import { IconButton, IconButtonGroup } from "@strapi/design-system/IconButton";
+import {
+  CheckCircle,
+  CrossCircle,
+  ExclamationMarkCircle,
+  Information,
+  //   WarningCircle,
+} from "@strapi/icons";
+import { Editor, FloatingMenu } from "@tiptap/react";
+import { useIntl } from "react-intl";
+
+import { StyledToolbar } from "./StyledToolbar.styles";
+
+export default function AlertToolbar({ editor }: { editor: Editor }) {
+  const { formatMessage } = useIntl();
+
+  return (
+    <FloatingMenu
+      editor={editor}
+      tippyOptions={{ duration: 100 }}
+      pluginKey="alertToolbar"
+      shouldShow={({ editor, state }) => {
+        const { selection } = state;
+        const { $anchor } = selection;
+        const isRootDepth = $anchor.depth === 1;
+
+        return isRootDepth && editor.isEditable && editor.isActive("alert");
+      }}
+    >
+      <StyledToolbar>
+        <IconButtonGroup>
+          <IconButton
+            icon={<CrossCircle />}
+            label={formatMessage({
+              id: "rich-text.editor.toolbar.button.danger",
+              defaultMessage: "Danger",
+            })}
+            onClick={() =>
+              editor.chain().focus().toggleAlert({ type: "danger" }).run()
+            }
+            disabled={
+              !editor
+                .can()
+                .chain()
+                .focus()
+                .toggleAlert({ type: "danger" })
+                .run()
+            }
+            className={
+              editor.isActive("alert", { type: "danger" }) ? "is-active" : ""
+            }
+          />
+          <IconButton
+            icon={<Information />}
+            label={formatMessage({
+              id: "rich-text.editor.toolbar.button.info",
+              defaultMessage: "Information",
+            })}
+            onClick={() =>
+              editor.chain().focus().toggleAlert({ type: "info" }).run()
+            }
+            disabled={
+              !editor.can().chain().focus().toggleAlert({ type: "info" }).run()
+            }
+            className={
+              editor.isActive("alert", { type: "info" }) ? "is-active" : ""
+            }
+          />
+          <IconButton
+            icon={<CheckCircle />}
+            label={formatMessage({
+              id: "rich-text.editor.toolbar.button.success",
+              defaultMessage: "Success",
+            })}
+            onClick={() =>
+              editor.chain().focus().toggleAlert({ type: "success" }).run()
+            }
+            disabled={
+              !editor
+                .can()
+                .chain()
+                .focus()
+                .toggleAlert({ type: "success" })
+                .run()
+            }
+            className={
+              editor.isActive("alert", { type: "success" }) ? "is-active" : ""
+            }
+          />
+          <IconButton
+            icon={
+              //   <WarningCircle />
+              <ExclamationMarkCircle />
+            }
+            label={formatMessage({
+              id: "rich-text.editor.toolbar.button.warning",
+              defaultMessage: "Warning",
+            })}
+            onClick={() =>
+              editor.chain().focus().toggleAlert({ type: "warning" }).run()
+            }
+            disabled={
+              !editor
+                .can()
+                .chain()
+                .focus()
+                .toggleAlert({ type: "warning" })
+                .run()
+            }
+            className={
+              editor.isActive("alert", { type: "warning" }) ? "is-active" : ""
+            }
+          />
+        </IconButtonGroup>
+      </StyledToolbar>
+    </FloatingMenu>
+  );
+}

packages/strapi-plugin-rich-text/admin/src/components/RichText/Components/Attachment.styles.tsx

@@ -0,0 +1,66 @@
+import styled from "styled-components";
+import { FILE_EXTENSION_COLORS } from "../../../lib/media";
+
+export const StyledAttachment = styled("div")`
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  border-style: solid;
+  align-items: center;
+  gap: 0.8rem;
+
+  .file {
+    display: flex;
+    gap: 0.75rem;
+
+    .filename {
+      display: flex;
+      flex-direction: column;
+      color: ${({ theme }) => theme.colors.neutral900};
+
+      span {
+        color: ${({ theme }) => theme.colors.neutral500};
+      }
+    }
+  }
+
+  .options {
+    > div {
+      gap: 0.5rem;
+      button {
+        border-radius: 0.75rem;
+        border: none;
+
+        svg {
+          width: 5rem;
+          height: 5rem;
+
+          path {
+            fill: transparent !important;
+          }
+        }
+
+        &.neutral {
+          color: ${({ theme }) => theme.colors.neutral600};
+        }
+
+        &.danger {
+          color: ${({ theme }) => theme.colors.danger600};
+        }
+      }
+    }
+  }
+`;
+
+export const ExtensionParagraph = styled.p<{
+  extension: keyof typeof FILE_EXTENSION_COLORS;
+}>`
+  background-color: ${(props) => FILE_EXTENSION_COLORS[props.extension]};
+  padding: 0.75rem 0.5rem;
+  border-radius: 0.5rem;
+  text-transform: uppercase;
+  color: white;
+  font-weight: 700;
+`;

packages/strapi-plugin-rich-text/admin/src/components/RichText/Components/Attachment.tsx

@@ -0,0 +1,52 @@
+import { ComponentPropsWithRef, ReactNode, forwardRef, Ref } from "react";
+
+import { formatBytes, type TFileExtension } from "../../../lib/media";
+
+import { ExtensionParagraph, StyledAttachment } from "./Attachment.styles";
+
+export interface AttachmentProps extends ComponentPropsWithRef<"div"> {
+  /**
+   * Name of resource or Folder
+   * */
+  name?: string;
+  extension?: TFileExtension;
+  size?: number;
+  /**
+   * Actions attachment
+   * */
+  options: ReactNode | undefined;
+}
+
+export type AttachmentType = AttachmentProps;
+
+const Attachment = forwardRef(
+  (
+    {
+      name = "Attachment Name",
+      extension = "",
+      size = 0,
+      options,
+      ...restProps
+    }: AttachmentProps,
+    ref: Ref<HTMLDivElement>
+  ) => {
+    return (
+      <StyledAttachment ref={ref} {...restProps}>
+        <div className="file">
+          <ExtensionParagraph extension={extension}>
+            {extension}
+          </ExtensionParagraph>
+          <p className="filename text-truncate">
+            {name}
+            <span>{formatBytes(size)}</span>
+          </p>
+        </div>
+        {options && <div className="options">{options}</div>}
+      </StyledAttachment>
+    );
+  }
+);
+
+Attachment.displayName = "Attachment";
+
+export default Attachment;