@tnd028/strapi-plugin-tiptap-editor 0.0.1

package/dist/_chunks/Emoji-C-LQZ4Z3.js

@@ -0,0 +1,265 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lucideReact = require("lucide-react");
+const TiptapEditorInput = require("./TiptapEditorInput-vfLsCt1p.js");
+const designSystem = require("@strapi/design-system");
+const styled = require("styled-components");
+const Emoji = require("@tiptap/extension-emoji");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const EmojiIcon = styled__default.default(lucideReact.Smile)`
+  width: 16px;
+  height: 16px;
+`;
+const PopoverContent = styled__default.default(designSystem.Popover.Content)`
+  padding: 0;
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  border-radius: 4px;
+  width: 320px;
+  max-width: 90vw;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+const SearchContainer = styled__default.default.div`
+  padding: 8px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: ${({ theme }) => theme.colors.neutral0};
+`;
+const SearchIcon = styled__default.default(lucideReact.Search)`
+  width: 14px;
+  height: 14px;
+  color: ${({ theme }) => theme.colors.neutral500};
+`;
+const SearchInput = styled__default.default.input`
+  border: none;
+  background: none;
+  outline: none;
+  width: 100%;
+  font-size: 13px;
+  color: ${({ theme }) => theme.colors.neutral800};
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.neutral500};
+  }
+`;
+const ScrollContainer = styled__default.default.div`
+  max-height: 280px;
+  height: 280px;
+  overflow-y: auto;
+  padding: 12px;
+  scroll-behavior: smooth;
+`;
+const EmojiGrid = styled__default.default.div`
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 4px;
+  margin-bottom: 12px;
+`;
+const EmojiItem = styled__default.default.button`
+  border: none;
+  background: none;
+  font-size: 20px;
+  cursor: pointer;
+  padding: 4px;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.neutral100};
+  }
+`;
+const TabBar = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
+  background-color: ${({ theme }) => theme.colors.neutral100};
+`;
+const TabButton = styled__default.default.button`
+  border: none;
+  background: none;
+  padding: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: ${({ theme, $isActive }) => $isActive ? theme.colors.primary600 : theme.colors.neutral500};
+  background-color: ${({ theme, $isActive }) => $isActive ? theme.colors.primary100 : "transparent"};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.neutral200};
+    color: ${({ theme }) => theme.colors.neutral700};
+  }
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+const SectionTitle = styled__default.default.div`
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: ${({ theme }) => theme.colors.neutral500};
+  margin-bottom: 4px;
+  margin-top: 4px;
+`;
+const CATEGORIES = [
+  { id: "recent", icon: lucideReact.Clock, title: "Recent", tags: [] },
+  { id: "smileys", icon: lucideReact.Smile, title: "Smileys & People", tags: ["face", "smile", "person", "joy", "happy", "sad", "mad", "hand", "body"] },
+  { id: "nature", icon: lucideReact.Cat, title: "Animals & Nature", tags: ["animal", "nature", "cat", "dog", "plant", "flower", "weather"] },
+  { id: "food", icon: lucideReact.Coffee, title: "Food & Drink", tags: ["food", "drink", "fruit", "vegetable", "meal"] },
+  { id: "activity", icon: lucideReact.Activity, title: "Activity", tags: ["activity", "sport", "game", "play"] },
+  { id: "travel", icon: lucideReact.Car, title: "Travel & Places", tags: ["travel", "place", "car", "vehicle", "building", "map"] },
+  { id: "objects", icon: lucideReact.Lightbulb, title: "Objects", tags: ["object", "tool", "computer", "device", "light"] },
+  { id: "symbols", icon: lucideReact.Hash, title: "Symbols", tags: ["symbol", "shape", "sign", "arrow"] },
+  { id: "flags", icon: lucideReact.Flag, title: "Flags", tags: ["flag"] }
+];
+const EmojiToolbar = React.forwardRef(
+  ({ className, onClick, children, ...props }, ref) => {
+    const { editor } = TiptapEditorInput.useEditorContext();
+    const [open, setOpen] = React.useState(false);
+    const [activeCategory, setActiveCategory] = React.useState("recent");
+    const [recent, setRecent] = React.useState([]);
+    const [searchQuery, setSearchQuery] = React.useState("");
+    const searchInputRef = React.useRef(null);
+    const scrollRef = React.useRef(null);
+    React.useEffect(() => {
+      const stored = localStorage.getItem("tiptap-recent-emojis");
+      if (stored) {
+        try {
+          const parsed = JSON.parse(stored);
+          setRecent(parsed);
+          if (parsed.length === 0) {
+            setActiveCategory("smileys");
+          }
+        } catch (e) {
+          console.error("Failed to parse recent emojis", e);
+          setActiveCategory("smileys");
+        }
+      } else {
+        setActiveCategory("smileys");
+      }
+    }, []);
+    React.useEffect(() => {
+      if (open) {
+        setTimeout(() => {
+          searchInputRef.current?.focus();
+        }, 100);
+      } else {
+        setSearchQuery("");
+      }
+    }, [open]);
+    const handleEmojiSelect = (emoji) => {
+      editor.chain().focus().setEmoji(emoji.name).run();
+      const newRecent = [emoji.name, ...recent.filter((n) => n !== emoji.name)].slice(0, 24);
+      setRecent(newRecent);
+      localStorage.setItem("tiptap-recent-emojis", JSON.stringify(newRecent));
+      setOpen(false);
+    };
+    const scrollToCategory = (catId) => {
+      setActiveCategory(catId);
+      const element = document.getElementById(`emoji-category-${catId}`);
+      if (element && scrollRef.current) {
+        scrollRef.current.scrollTop = element.offsetTop - scrollRef.current.offsetTop - 10;
+      }
+    };
+    const categorizedEmojis = React.useMemo(() => {
+      const groups = {};
+      groups["recent"] = recent.map((name) => Emoji.gitHubEmojis.find((e) => e.name === name)).filter(Boolean);
+      CATEGORIES.slice(1).forEach((cat) => {
+        groups[cat.id] = Emoji.gitHubEmojis.filter(
+          (emoji) => emoji.tags.some((tag) => cat.tags.some((catTag) => tag.includes(catTag)))
+        ).slice(0, 100);
+      });
+      return groups;
+    }, [recent]);
+    const searchResults = React.useMemo(() => {
+      if (!searchQuery.trim()) return [];
+      const query = searchQuery.toLowerCase();
+      return Emoji.gitHubEmojis.filter(
+        (e) => e.name.toLowerCase().includes(query) || e.shortcodes.some((s) => s.includes(query)) || e.tags.some((t) => t.includes(query))
+      ).slice(0, 100);
+    }, [searchQuery]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        TiptapEditorInput.ToolbarButton,
+        {
+          tooltip: "Insert Emoji",
+          "aria-label": "Insert emoji",
+          ref,
+          isActive: open,
+          ...props,
+          children: children || /* @__PURE__ */ jsxRuntime.jsx(EmojiIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent, { align: "start", sideOffset: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TabBar, { children: CATEGORIES.map((cat) => {
+          const Icon = cat.icon;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            TabButton,
+            {
+              $isActive: activeCategory === cat.id && !searchQuery,
+              onClick: () => scrollToCategory(cat.id),
+              title: cat.title,
+              type: "button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {})
+            },
+            cat.id
+          );
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(SearchContainer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SearchInput,
+            {
+              ref: searchInputRef,
+              placeholder: "Search emojis...",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollContainer, { ref: scrollRef, children: searchQuery ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: searchResults.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmojiGrid, { children: searchResults.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          EmojiItem,
+          {
+            onClick: () => handleEmojiSelect(item),
+            title: item.name,
+            type: "button",
+            children: item.emoji
+          },
+          item.name
+        )) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", color: "#666", fontSize: "13px", paddingTop: "20px" }, children: "No results found" }) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: CATEGORIES.map((cat) => {
+          const emojis = categorizedEmojis[cat.id];
+          if (!emojis || emojis.length === 0) return null;
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `emoji-category-${cat.id}`, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: cat.title }),
+            /* @__PURE__ */ jsxRuntime.jsx(EmojiGrid, { children: emojis.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              EmojiItem,
+              {
+                onClick: () => handleEmojiSelect(item),
+                title: item.name,
+                type: "button",
+                children: item.emoji
+              },
+              item.name
+            )) })
+          ] }, cat.id);
+        }) }) })
+      ] })
+    ] });
+  }
+);
+EmojiToolbar.displayName = "EmojiToolbar";
+exports.EmojiToolbar = EmojiToolbar;

package/dist/_chunks/Heading-BDJqd1Qw.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const lucideReact = require("lucide-react");
+const styled = require("styled-components");
+const TiptapEditorInput = require("./TiptapEditorInput-vfLsCt1p.js");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const DropdownMenuItemStyled = styled__default.default(TiptapEditorInput.DropdownMenuItem)`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 8px 6px 4px;
+  font-size: 14px;
+  
+  &:hover {
+    background-color: ${(props) => props.theme.colors.neutral100};
+  }
+  
+  &:focus {
+    background-color: ${(props) => props.theme.colors.neutral100};
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+const CheckIcon = styled__default.default(lucideReact.Check)`
+  width: 12px;
+  height: 12px;
+  color: ${(props) => props.theme.colors.primary500};
+`;
+const IconWrapper = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 20px;
+  margin-right: 4px;
+`;
+const HeadingToolbar = () => {
+  const { editor } = TiptapEditorInput.useEditorContext();
+  const { extensions = [] } = editor.extensionManager ?? [];
+  const headingItems = [1, 2, 3, 4, 5, 6].map((level) => {
+    const Icon = [lucideReact.Heading1, lucideReact.Heading2, lucideReact.Heading3, lucideReact.Heading4, lucideReact.Heading5, lucideReact.Heading6][level - 1];
+    return {
+      action: () => editor.commands.toggleHeading({ level }),
+      isActive: () => editor.isActive("heading", { level }) && !editor.getAttributes("heading").class,
+      disabled: !editor.can().toggleHeading({ level }),
+      title: `Heading ${level}`,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+      shortcutKeys: ["alt", "mod", `${level}`]
+    };
+  });
+  [1, 2, 3, 4, 5, 6].map((level) => {
+    return {
+      action: () => {
+        if (editor.isActive("heading", { level })) {
+          const currentClass = editor.getAttributes("heading").class;
+          if (currentClass === `display-${level}`) {
+            editor.commands.toggleHeading({ level });
+          } else {
+            editor.chain().focus().updateAttributes("heading", { class: `display-${level}` }).run();
+          }
+        } else {
+          editor.chain().focus().setHeading({ level }).updateAttributes("heading", { class: `display-${level}` }).run();
+        }
+      },
+      isActive: () => editor.isActive("heading", { level }) && editor.getAttributes("heading").class === `display-${level}`,
+      disabled: !editor.can().toggleHeading({ level }),
+      // Approximation
+      title: `Display ${level}`,
+      // Visual distinction for Display icons could be different, but for now using Type icon or reusing headings with a distinction
+      icon: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "10px", fontWeight: "bold" }, children: [
+        "D",
+        level
+      ] }),
+      shortcutKeys: []
+    };
+  });
+  const items = [
+    ...headingItems
+    // ...displayItems,
+  ];
+  const isDisabled = items.every((item) => item.disabled);
+  const activeItem = items.find((k) => k.isActive());
+  return /* @__PURE__ */ jsxRuntime.jsxs(TiptapEditorInput.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TiptapEditorInput.DropdownMenuTrigger, { disabled: isDisabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      TiptapEditorInput.ToolbarButton,
+      {
+        tooltip: "Text Heading",
+        "aria-label": "Text Heading",
+        disabled: isDisabled,
+        hasArrow: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: activeItem ? activeItem.icon : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading, {}) })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TiptapEditorInput.DropdownMenuContent,
+      {
+        align: "start",
+        loop: true,
+        onCloseAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(TiptapEditorInput.DropdownMenuGroup, { children: items.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          DropdownMenuItemStyled,
+          {
+            onSelect: () => {
+              option.action();
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 12, height: 12, display: "flex", alignItems: "center", justifyContent: "center" }, children: option.isActive() && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: option.icon }),
+              option.title
+            ]
+          },
+          index
+        )) })
+      }
+    )
+  ] });
+};
+exports.HeadingToolbar = HeadingToolbar;

package/dist/_chunks/Heading-BycRob5M.mjs

@@ -0,0 +1,123 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Heading, Check } from "lucide-react";
+import styled from "styled-components";
+import { u as useEditorContext, D as DropdownMenu, a as DropdownMenuTrigger, T as ToolbarButton, b as DropdownMenuContent, c as DropdownMenuGroup, d as DropdownMenuItem } from "./TiptapEditorInput-BDE09h5-.mjs";
+const DropdownMenuItemStyled = styled(DropdownMenuItem)`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 8px 6px 4px;
+  font-size: 14px;
+  
+  &:hover {
+    background-color: ${(props) => props.theme.colors.neutral100};
+  }
+  
+  &:focus {
+    background-color: ${(props) => props.theme.colors.neutral100};
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+const CheckIcon = styled(Check)`
+  width: 12px;
+  height: 12px;
+  color: ${(props) => props.theme.colors.primary500};
+`;
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 20px;
+  margin-right: 4px;
+`;
+const HeadingToolbar = () => {
+  const { editor } = useEditorContext();
+  const { extensions = [] } = editor.extensionManager ?? [];
+  const headingItems = [1, 2, 3, 4, 5, 6].map((level) => {
+    const Icon = [Heading1, Heading2, Heading3, Heading4, Heading5, Heading6][level - 1];
+    return {
+      action: () => editor.commands.toggleHeading({ level }),
+      isActive: () => editor.isActive("heading", { level }) && !editor.getAttributes("heading").class,
+      disabled: !editor.can().toggleHeading({ level }),
+      title: `Heading ${level}`,
+      icon: /* @__PURE__ */ jsx(Icon, {}),
+      shortcutKeys: ["alt", "mod", `${level}`]
+    };
+  });
+  [1, 2, 3, 4, 5, 6].map((level) => {
+    return {
+      action: () => {
+        if (editor.isActive("heading", { level })) {
+          const currentClass = editor.getAttributes("heading").class;
+          if (currentClass === `display-${level}`) {
+            editor.commands.toggleHeading({ level });
+          } else {
+            editor.chain().focus().updateAttributes("heading", { class: `display-${level}` }).run();
+          }
+        } else {
+          editor.chain().focus().setHeading({ level }).updateAttributes("heading", { class: `display-${level}` }).run();
+        }
+      },
+      isActive: () => editor.isActive("heading", { level }) && editor.getAttributes("heading").class === `display-${level}`,
+      disabled: !editor.can().toggleHeading({ level }),
+      // Approximation
+      title: `Display ${level}`,
+      // Visual distinction for Display icons could be different, but for now using Type icon or reusing headings with a distinction
+      icon: /* @__PURE__ */ jsxs("span", { style: { fontSize: "10px", fontWeight: "bold" }, children: [
+        "D",
+        level
+      ] }),
+      shortcutKeys: []
+    };
+  });
+  const items = [
+    ...headingItems
+    // ...displayItems,
+  ];
+  const isDisabled = items.every((item) => item.disabled);
+  const activeItem = items.find((k) => k.isActive());
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { disabled: isDisabled, asChild: true, children: /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        tooltip: "Text Heading",
+        "aria-label": "Text Heading",
+        disabled: isDisabled,
+        hasArrow: true,
+        children: /* @__PURE__ */ jsx(IconWrapper, { children: activeItem ? activeItem.icon : /* @__PURE__ */ jsx(Heading, {}) })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        align: "start",
+        loop: true,
+        onCloseAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        children: /* @__PURE__ */ jsx(DropdownMenuGroup, { children: items.map((option, index) => /* @__PURE__ */ jsxs(
+          DropdownMenuItemStyled,
+          {
+            onSelect: () => {
+              option.action();
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { style: { width: 12, height: 12, display: "flex", alignItems: "center", justifyContent: "center" }, children: option.isActive() && /* @__PURE__ */ jsx(CheckIcon, {}) }),
+              /* @__PURE__ */ jsx(IconWrapper, { children: option.icon }),
+              option.title
+            ]
+          },
+          index
+        )) })
+      }
+    )
+  ] });
+};
+export {
+  HeadingToolbar
+};

package/dist/_chunks/HorizontalRule-CJlDmdma.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lucideReact = require("lucide-react");
+const TiptapEditorInput = require("./TiptapEditorInput-vfLsCt1p.js");
+const styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const SeparatorHorizontalIcon = styled__default.default(lucideReact.SeparatorHorizontal)`
+  width: 16px;
+  height: 16px;
+`;
+const HorizontalRuleToolbar = React.forwardRef(
+  ({ className, onClick, children, ...props }, ref) => {
+    const { editor } = TiptapEditorInput.useEditorContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TiptapEditorInput.ToolbarButton,
+      {
+        tooltip: "Horizontal Rule",
+        "aria-label": "Insert horizontal rule",
+        onClick: (e) => {
+          editor?.chain().focus().setHorizontalRule().run();
+          onClick?.(e);
+        },
+        ref,
+        ...props,
+        children: children || /* @__PURE__ */ jsxRuntime.jsx(SeparatorHorizontalIcon, {})
+      }
+    );
+  }
+);
+HorizontalRuleToolbar.displayName = "HorizontalRuleToolbar";
+exports.HorizontalRuleToolbar = HorizontalRuleToolbar;

package/dist/_chunks/HorizontalRule-CzQCeC3b.mjs

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { SeparatorHorizontal } from "lucide-react";
+import { u as useEditorContext, T as ToolbarButton } from "./TiptapEditorInput-BDE09h5-.mjs";
+import styled from "styled-components";
+const SeparatorHorizontalIcon = styled(SeparatorHorizontal)`
+  width: 16px;
+  height: 16px;
+`;
+const HorizontalRuleToolbar = forwardRef(
+  ({ className, onClick, children, ...props }, ref) => {
+    const { editor } = useEditorContext();
+    return /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        tooltip: "Horizontal Rule",
+        "aria-label": "Insert horizontal rule",
+        onClick: (e) => {
+          editor?.chain().focus().setHorizontalRule().run();
+          onClick?.(e);
+        },
+        ref,
+        ...props,
+        children: children || /* @__PURE__ */ jsx(SeparatorHorizontalIcon, {})
+      }
+    );
+  }
+);
+HorizontalRuleToolbar.displayName = "HorizontalRuleToolbar";
+export {
+  HorizontalRuleToolbar
+};