feat: #7 add color, highlight extensions and fix text align buttons

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

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export const StyledToolbar = styled("div")`
+  .is-active {
+    background: ${({ theme }) => theme.colors.primary200};
+    color: ${({ theme }) => theme.colors.neutral0};
+  }
+
+  button {
+    svg {
+      height: 100%;
+      width: 100%;
+      flex-shrink: 0;
+
+      rect {
+        height: 3px;
+        fill: ${({ theme }) => theme.colors.neutral700};
+      }
+    }
+    svg.extra-icon {
+      height: 125%;
+      width: 125%;
+
+      #bulb {
+        fill: ${({ theme }) => theme.colors.neutral100} !important;
+      }
+    }
+  }
+`;

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 "./AlertToolbar.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/BlockTypeSelect.tsx

@@ -0,0 +1,141 @@
+import { Select, Option } from "@strapi/design-system/Select";
+import { Editor } from "@tiptap/react";
+import { useState, useCallback, useEffect } from "react";
+import { useIntl } from "react-intl";
+
+export default function BlockTypeSelect({ editor }: { editor: Editor }) {
+  const [selectedType, setSelectedType] = useState<string>("paragraph");
+
+  const { formatMessage } = useIntl();
+
+  const onSelect = useCallback((type: string) => {
+    switch (type) {
+      case "alert":
+        editor.chain().focus().setAlert({ type: "info" }).run();
+        break;
+      case "h1":
+        editor.chain().focus().toggleHeading({ level: 1 }).run();
+        break;
+      case "h2":
+        editor.chain().focus().toggleHeading({ level: 2 }).run();
+        break;
+      case "h3":
+        editor.chain().focus().toggleHeading({ level: 3 }).run();
+        break;
+      case "h4":
+        editor.chain().focus().toggleHeading({ level: 4 }).run();
+        break;
+      case "h5":
+        editor.chain().focus().toggleHeading({ level: 5 }).run();
+        break;
+      case "h6":
+        editor.chain().focus().toggleHeading({ level: 6 }).run();
+        break;
+      case "blockquote":
+        editor.chain().focus().toggleBlockquote().run();
+        break;
+      case "orderedList":
+        editor.chain().focus().toggleOrderedList().run();
+        break;
+      case "bulletList":
+        editor.chain().focus().toggleBulletList().run();
+        break;
+      case "paragraph":
+        editor.chain().focus().setParagraph().run();
+        break;
+    }
+
+    setTimeout(() => {
+      editor.commands.focus();
+    }, 50);
+  }, []);
+
+  const setActiveType = useCallback(() => {
+    if (editor.isActive("heading", { level: 1 })) setSelectedType("h1");
+    if (editor.isActive("heading", { level: 2 })) setSelectedType("h2");
+    if (editor.isActive("heading", { level: 3 })) setSelectedType("h3");
+    if (editor.isActive("heading", { level: 4 })) setSelectedType("h4");
+    if (editor.isActive("heading", { level: 5 })) setSelectedType("h5");
+    if (editor.isActive("heading", { level: 6 })) setSelectedType("h6");
+    if (editor.isActive("alert")) setSelectedType("alert");
+    if (editor.isActive("paragraph")) setSelectedType("paragraph");
+    if (editor.isActive("blockquote")) setSelectedType("blockquote");
+    if (editor.isActive("orderedList")) setSelectedType("orderedList");
+    if (editor.isActive("bulletList")) setSelectedType("bulletList");
+  }, []);
+
+  useEffect(() => {
+    editor.on("selectionUpdate", setActiveType);
+    return () => {
+      editor.off("selectionUpdate", setActiveType);
+    };
+  }, [editor]);
+
+  return (
+    <Select
+      required
+      size="S"
+      placeholder={formatMessage({
+        id: "rich-text.editor.toolbar.placeholder.text-style",
+        defaultMessage: "Text Style",
+      })}
+      onChange={onSelect}
+      value={selectedType}
+    >
+      <Option value={"paragraph"}>
+        {formatMessage({
+          id: "rich-text.editor.toolbar.select.paragraph",
+          defaultMessage: "Paragraph",
+        })}
+      </Option>
+      <Option value={"h1"}>
+        {formatMessage({
+          id: "rich-text.editor.toolbar.select.heading-1",
+          defaultMessage: "Heading 1",
+        })}
+      </Option>
+      <Option value={"h2"}>
+        {formatMessage({
+          id: "rich-text.editor.toolbar.select.heading-2",
+          defaultMessage: "Heading 2",
+        })}
+      </Option>
+      <Option value={"h3"}>
+        {formatMessage({
+          id: "rich-text.editor.toolbar.select.heading-3",
+          defaultMessage: "Heading 3",
+        })}
+      </Option>
+      <Option value={"h4"}>
+        {formatMessage({
+          id: "rich-text.editor.toolbar.select.heading-4",
+          defaultMessage: "Heading 4",
+        })}
+      </Option>
+      <Option value={"alert"}>
+        {formatMessage({
+          id: "rich-text.editor.toolbar.select.alert",
+          defaultMessage: "Alert",
+        })}
+      </Option>
+      <Option value={"blockquote"}>
+        {formatMessage({
+          id: "rich-text.editor.toolbar.select.quote",
+          defaultMessage: "Quote",
+        })}
+      </Option>
+      <Option value={"orderedList"}>
+        {formatMessage({
+          id: "rich-text.editor.toolbar.select.ordered-list",
+          defaultMessage: "Ordered list",
+        })}
+      </Option>
+      <Option value={"bulletList"}>
+        {formatMessage({
+          id: "rich-text.editor.toolbar.select.bullet-list",
+          defaultMessage: "Bullet list",
+        })}
+      </Option>
+    </Select>
+  );
+}

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

@@ -0,0 +1,102 @@
+import React, { forwardRef, useCallback, useState } from "react";
+
+import { createComponent, EventName } from "@lit/react";
+import { Box } from "@strapi/design-system/Box";
+import { Flex } from "@strapi/design-system/Flex";
+import { IconButton } from "@strapi/design-system/IconButton";
+import { Popover } from "@strapi/design-system/Popover";
+import { Check } from "@strapi/icons";
+import { Trash } from "@strapi/icons";
+
+import { useIntl } from "react-intl";
+import { HexColorPicker } from "vanilla-colorful/hex-color-picker.js";
+
+const ColorPicker = createComponent({
+  react: React,
+  tagName: "hex-color-picker",
+  elementClass: HexColorPicker,
+  events: {
+    onEventColorChanged: "color-changed" as EventName<
+      CustomEvent<{ value: string }>
+    >,
+  },
+});
+
+type ColorPickerPopoverProps = {
+  color?: string;
+  onExit: () => void;
+  onRemove: () => void;
+  onChange: (color: string) => void;
+};
+
+const ColorPickerPopover = forwardRef<JSX.Element, ColorPickerPopoverProps>(
+  ({ onExit, onRemove, color: currentColor, onChange }, ref) => {
+    const [color, setColor] = useState(currentColor);
+    const { formatMessage } = useIntl();
+
+    const onClose = useCallback(() => {
+      onExit();
+    }, []);
+
+    return (
+      <Popover
+        source={ref}
+        onDismiss={onClose}
+        placement="bottom"
+        spacing="8"
+        onPointerDownOutside={onClose}
+      >
+        {/*  <Popover.Trigger>
+        <IconButton
+          icon={icon}
+          label={formatMessage({
+            id: label.id,
+            defaultMessage: label.defaultMessage,
+          })}
+        />
+      </Popover.Trigger>
+      <Popover.Content>
+      </Popover.Content> */}
+        <Flex alignItems="start" gap={1}>
+          <Box>
+            <ColorPicker
+              color={color}
+              onEventColorChanged={(event) => setColor(event.detail.value)}
+            />
+          </Box>
+          <Box>
+            <IconButton
+              icon={<Check />}
+              noBorder
+              label={formatMessage({
+                id: "rich-text.editor.dialog.button.change",
+                defaultMessage: "Change",
+              })}
+              onClick={() => {
+                if (!color) null;
+                else {
+                  onChange(color);
+
+                  onClose();
+                }
+              }}
+            />
+            <IconButton
+              icon={<Trash />}
+              noBorder
+              label={formatMessage({
+                id: "rich-text.editor.dialog.button.remove",
+                defaultMessage: "Remove",
+              })}
+              onClick={() => {
+                onClose(), onRemove();
+              }}
+            />
+          </Box>
+        </Flex>
+      </Popover>
+    );
+  }
+);
+
+export default ColorPickerPopover;