@quen-ui/components 0.0.14 → 1.0.1

package/dist/RichTextEditor/plugins.es.js

@@ -0,0 +1,548 @@
+import { jsx } from "react/jsx-runtime";
+import { IconAlignLeft, IconAlignCenter, IconAlignRight, IconAlignJustified, IconLink, IconImageInPicture, IconTextColor, IconClearFormatting, IconArrowBackUp, IconArrowForwardUp, IconTable, IconBold, IconItalic, IconUnderline, IconStrikethrough, IconHighlight, IconBlockquote, IconH1, IconH2, IconSuperscript, IconSubscript, IconList, IconListNumbers, IconCheckbox } from "@tabler/icons-react";
+import { createRoot } from "react-dom/client";
+import { QuenUIProvider, QuenUILightTheme } from "@quen-ui/theme";
+import RichTextEditorTableControl from "./RichTextEditorTableControl.es.js";
+import RichTextEditorColorControl from "./RichTextEditorColorControl.es.js";
+import { isCursorInTag, getCurrentTextColor, getCurrentBlock, findClosestAncestorElement, unwrapInlineColorSpans, insertNodeAtSelection, setCursorAtEnd } from "./helpers.es.js";
+const onPluginLink = ({ exec }) => {
+  const url = window.prompt(
+    "Paste the URL (start with http:// or https://):",
+    "https://"
+  );
+  if (url) {
+    exec("createLink", url);
+  }
+};
+const onPluginImage = ({ exec }) => {
+  const url = window.prompt("Paste image link (URL):");
+  if (url) {
+    const img = `<img src="${url}" alt="image" style="max-width:100%;height:auto;" />`;
+    exec("insertHTML", img);
+  }
+};
+const onClearFormattingPlugin = ({ exec }) => {
+  exec("removeFormat");
+};
+const onTablePlugin = ({
+  exec,
+  context,
+  ref
+}) => {
+  context.editor?.focus();
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const savedSelection = context.selection?.getRangeAt(0);
+  const handleSelect = ({ rows, cols }) => {
+    context.selection?.removeAllRanges();
+    if (savedSelection) {
+      context.selection?.addRange(savedSelection);
+    }
+    const createRow = () => `<tr>${Array.from({ length: cols }).map(() => "<td>&nbsp;</td>").join("")}</tr>`;
+    const html = `<table><tbody>${Array.from({
+      length: rows
+    }).map(() => createRow()).join("")}</tbody></table><br />`;
+    exec("insertHTML", html);
+    container.remove();
+  };
+  const handleClose = () => {
+    container.remove();
+  };
+  const root = createRoot(container);
+  root.render(
+    /* @__PURE__ */ jsx(
+      RichTextEditorTableControl,
+      {
+        onSelect: handleSelect,
+        onClose: handleClose,
+        ref,
+        theme: context.theme
+      }
+    )
+  );
+};
+const onColorPickerPlugin = ({
+  update,
+  context,
+  ref
+}) => {
+  const savedRange = context.selection && context.selection.rangeCount ? context.selection.getRangeAt(0).cloneRange() : null;
+  const currentColor = savedRange ? getCurrentTextColor(savedRange) : null;
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  const closePopup = () => {
+    try {
+      root.unmount();
+    } catch (err) {
+      window.console.error(err);
+    }
+    if (container.parentNode) {
+      container.parentNode.removeChild(container);
+    }
+  };
+  const applyColor = (colorVal) => {
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    if (savedRange) sel?.addRange(savedRange.cloneRange());
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+      return;
+    }
+    const range = selection.getRangeAt(0);
+    const editorRoot = context.editor;
+    try {
+      editorRoot?.normalize();
+    } catch (err) {
+      window.console.error(err);
+    }
+    if (range.collapsed) {
+      if (!colorVal) {
+        closePopup();
+        return;
+      }
+      const span = document.createElement("span");
+      span.style.color = String(colorVal);
+      const zw = document.createTextNode("​");
+      span.appendChild(zw);
+      range.insertNode(span);
+      const sel2 = window.getSelection();
+      const r = document.createRange();
+      r.setStart(zw, 1);
+      r.collapse(true);
+      sel2?.removeAllRanges();
+      sel2?.addRange(r);
+      update?.();
+      return;
+    }
+    const startAncestor = findClosestAncestorElement(
+      range.startContainer,
+      (el) => el.tagName === "SPAN" && (!!el.style.color || !!el.style.backgroundColor)
+    );
+    const endAncestor = findClosestAncestorElement(
+      range.endContainer,
+      (el) => el.tagName === "SPAN" && (!!el.style.color || !!el.style.backgroundColor)
+    );
+    if (startAncestor && startAncestor === endAncestor) {
+      if (!colorVal) {
+        startAncestor.style.color = "";
+        startAncestor.style.backgroundColor = "";
+        if (!startAncestor.getAttribute("style") || startAncestor.getAttribute("style") === "") {
+          const p = startAncestor.parentNode;
+          if (p) {
+            while (startAncestor.firstChild)
+              p.insertBefore(startAncestor.firstChild, startAncestor);
+            p.removeChild(startAncestor);
+          }
+        }
+      } else {
+        startAncestor.style.color = String(colorVal);
+      }
+      update?.();
+      return;
+    }
+    try {
+      const frag = range.extractContents();
+      const cleaned = unwrapInlineColorSpans(frag);
+      if (!colorVal) {
+        range.insertNode(cleaned);
+        const afterRange = document.createRange();
+        let last = null;
+        if (cleaned.childNodes && cleaned.childNodes.length) {
+          last = cleaned.childNodes[cleaned.childNodes.length - 1];
+        }
+        if (last && last.parentNode) {
+          afterRange.setStartAfter(last);
+        } else {
+          afterRange.setStart(range.endContainer, range.endOffset);
+        }
+        afterRange.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(afterRange);
+        update?.();
+        closePopup();
+        return;
+      }
+      const wrapper = document.createElement("span");
+      wrapper.style.color = String(colorVal);
+      wrapper.appendChild(cleaned);
+      range.insertNode(wrapper);
+      const newRange = document.createRange();
+      newRange.setStartAfter(wrapper);
+      newRange.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(newRange);
+      update?.();
+    } catch {
+      try {
+        selection.removeAllRanges();
+        if (savedRange) selection.addRange(savedRange.cloneRange());
+        const html = colorVal ? `<span style="color:${String(colorVal)}">${selection.toString()}</span>` : selection.toString();
+        document.execCommand("insertHTML", false, html);
+        update?.();
+      } catch (e) {
+        window.console.error("applyColor fallback failed", e);
+      }
+    }
+  };
+  const handleChoose = (color) => applyColor(color);
+  const handleClose = () => closePopup();
+  root.render(
+    /* @__PURE__ */ jsx(QuenUIProvider, { theme: QuenUILightTheme, children: /* @__PURE__ */ jsx(
+      RichTextEditorColorControl,
+      {
+        ref,
+        onChange: handleChoose,
+        onClose: handleClose,
+        color: currentColor || "#000",
+        theme: context.theme
+      }
+    ) })
+  );
+};
+const insertCheckbox = (editor) => {
+  const wrapper = document.createElement("div");
+  wrapper.setAttribute("data-checkbox-line", "true");
+  const checkbox = document.createElement("input");
+  checkbox.type = "checkbox";
+  checkbox.setAttribute("data-checkbox", "true");
+  const text = document.createTextNode(" ");
+  wrapper.appendChild(checkbox);
+  wrapper.appendChild(text);
+  insertNodeAtSelection(editor, wrapper);
+  setCursorAtEnd(wrapper);
+};
+const checkBoxPlugin = {
+  key: "checkbox",
+  title: "Check list",
+  label: /* @__PURE__ */ jsx(IconCheckbox, {}),
+  action: ({ editor, context }) => {
+    editor?.focus();
+    const prev = context.getPluginState("checkbox")?.active ?? false;
+    context.setPluginState("checkbox", { active: !prev });
+    if (editor && !prev) {
+      insertCheckbox(editor);
+    }
+  },
+  onKeyDown: (event, ctx) => {
+    const state = ctx.getPluginState("checkbox");
+    const isActive = state?.active ?? false;
+    if (!ctx.editor) return;
+    const block = getCurrentBlock();
+    if (!block) return;
+    const isCheckboxLine = block.hasAttribute("data-checkbox-line");
+    if (event.key === "Enter" && isCheckboxLine && isActive) {
+      event.preventDefault();
+      insertCheckbox(ctx.editor);
+      return;
+    }
+    if (event.key === "Backspace" && isCheckboxLine) {
+      const checkbox = block.querySelector("input[data-checkbox]");
+      const text = block.innerText.replace("\n", "").trim();
+      if (checkbox && text === "") {
+        event.preventDefault();
+        block.remove();
+      }
+    }
+  },
+  getState: (_, ctx) => {
+    return ctx.getPluginState("checkbox") || { active: false };
+  }
+};
+const boldPlugin = {
+  key: "bold",
+  label: /* @__PURE__ */ jsx(IconBold, {}),
+  title: "Bold (Ctrl/Cmd+B)",
+  action: ({ exec, context, editor }) => {
+    const prev = context.getPluginState("bold")?.active ?? false;
+    context.setPluginState("bold", { active: !prev });
+    editor?.focus();
+    exec("bold");
+  },
+  getState: (_, ctx) => {
+    return ctx.getPluginState("bold") || { active: false };
+  }
+};
+const italicPlugin = {
+  key: "italic",
+  label: /* @__PURE__ */ jsx(IconItalic, {}),
+  title: "Italic (Ctrl/Cmd+I)",
+  action: ({ exec, context, editor }) => {
+    const prev = context.getPluginState("italic")?.active ?? false;
+    context.setPluginState("italic", { active: !prev });
+    editor?.focus();
+    exec("italic");
+  },
+  getState: (_, ctx) => {
+    return ctx.getPluginState("italic") || { active: false };
+  }
+};
+const underlinePlugin = {
+  key: "underline",
+  label: /* @__PURE__ */ jsx(IconUnderline, {}),
+  title: "Underlined (Ctrl/Cmd+U)",
+  action: ({ exec, context }) => {
+    const prev = context.getPluginState("underline")?.active ?? false;
+    context.setPluginState("underline", { active: !prev });
+    exec("underline");
+  },
+  getState: (_, ctx) => {
+    return ctx.getPluginState("underline") || { active: false };
+  }
+};
+const strikethroughPlugin = {
+  key: "strikethrough",
+  label: /* @__PURE__ */ jsx(IconStrikethrough, {}),
+  title: "Strikethrough",
+  action: ({ exec, context }) => {
+    const prev = context.getPluginState("strikethrough")?.active ?? false;
+    context.setPluginState("strikethrough", { active: !prev });
+    exec("strikeThrough");
+  },
+  getState: (_, ctx) => {
+    return ctx.getPluginState("strikethrough") || { active: false };
+  }
+};
+const highlightPlugin = {
+  key: "highlight",
+  label: /* @__PURE__ */ jsx(IconHighlight, {}),
+  title: "Highlight",
+  action: ({ exec, context }) => {
+    const prev = context.getPluginState("highlight")?.active ?? false;
+    context.setPluginState("highlight", { active: !prev });
+    if (!prev) {
+      exec("backColor", context.theme.colors.yellow[5]);
+    } else {
+      exec("backColor", "white");
+    }
+  },
+  getState: (_, ctx) => {
+    return ctx.getPluginState("highlight") || { active: false };
+  }
+};
+const blockquotePlugin = {
+  key: "blockquote",
+  label: /* @__PURE__ */ jsx(IconBlockquote, {}),
+  title: "Blockquote",
+  action: ({ exec, context }) => {
+    const prev = context.getPluginState("blockquote")?.active ?? false;
+    context.setPluginState("blockquote", { active: !prev });
+    exec("formatBlock", "<blockquote>");
+  },
+  onKeyDown: (event, ctx) => {
+    const state = ctx.getPluginState("blockquote");
+    const isActive = state?.active ?? false;
+    if (isActive && event.shiftKey && event.key === "Enter") {
+      ctx.exec("insertBrOnReturn");
+    } else if (event.key === "Enter" && isActive) {
+      setTimeout(() => {
+        ctx.setPluginState("blockquote", { active: false });
+        ctx.exec("insertBrOnReturn");
+        ctx.exec("formatBlock", "<div>");
+      }, 0);
+    }
+  },
+  getState: (_, ctx) => {
+    return ctx.getPluginState("blockquote") || { active: false };
+  },
+  onSelectionChange: (sel, context) => {
+    const isBlockquote = isCursorInTag("blockquote", sel);
+    context.setPluginState("blockquote", { active: isBlockquote });
+  }
+};
+const superscriptPlugin = {
+  key: "superscript",
+  label: /* @__PURE__ */ jsx(IconSuperscript, {}),
+  title: "Superscript",
+  action: ({ exec, context }) => {
+    const prev = context.getPluginState("superscript")?.active ?? false;
+    context.setPluginState("superscript", { active: !prev });
+    exec("superscript");
+  },
+  getState: (_, ctx) => {
+    return ctx.getPluginState("superscript") || { active: false };
+  },
+  onSelectionChange: (sel, context) => {
+    const isSuperscript = isCursorInTag("sup", sel);
+    context.setPluginState("superscript", { active: isSuperscript });
+  }
+};
+const h1Plugin = {
+  key: "h1",
+  label: /* @__PURE__ */ jsx(IconH1, {}),
+  title: "H1 heading",
+  action: ({ exec, context }) => {
+    const prev = context.getPluginState("h1")?.active ?? false;
+    context.setPluginState("h1", { active: !prev });
+    exec("formatBlock", "H1");
+  },
+  getState: (_, ctx) => {
+    return ctx.getPluginState("h1") || { active: false };
+  },
+  onKeyDown: (event, context) => {
+    if (event.key === "Enter") {
+      context.setPluginState("h1", { active: false });
+    }
+  },
+  onSelectionChange: (sel, context) => {
+    const isH1 = isCursorInTag("h1", sel);
+    context.setPluginState("h1", { active: isH1 });
+  }
+};
+const h2Plugin = {
+  key: "h2",
+  label: /* @__PURE__ */ jsx(IconH2, {}),
+  title: "H2 heading",
+  action: ({ exec, context }) => {
+    const prev = context.getPluginState("h2")?.active ?? false;
+    context.setPluginState("h2", { active: !prev });
+    exec("formatBlock", "H2");
+  },
+  onKeyDown: (event, context) => {
+    if (event.key === "Enter") {
+      context.setPluginState("h2", { active: false });
+    }
+  },
+  getState: (_, ctx) => {
+    return ctx.getPluginState("h2") || { active: false };
+  },
+  onSelectionChange: (sel, context) => {
+    const isH2 = isCursorInTag("h2", sel);
+    context.setPluginState("h2", { active: isH2 });
+  }
+};
+const subscriptPlugin = {
+  key: "subscript",
+  label: /* @__PURE__ */ jsx(IconSubscript, {}),
+  title: "Subscript",
+  action: ({ exec, context }) => {
+    const prev = context.getPluginState("subscript")?.active ?? false;
+    context.setPluginState("subscript", { active: !prev });
+    exec("subscript");
+  },
+  getState: (_, ctx) => {
+    return ctx.getPluginState("subscript") || { active: false };
+  },
+  onSelectionChange: (sel, context) => {
+    const isSubscript = isCursorInTag("sub", sel);
+    context.setPluginState("subscript", { active: isSubscript });
+  }
+};
+const bulletedListPlugin = {
+  key: "bulletedList",
+  label: /* @__PURE__ */ jsx(IconList, {}),
+  title: "Bulleted List",
+  action: ({ exec, context }) => {
+    const prev = context.getPluginState("bulletedList")?.active ?? false;
+    context.setPluginState("bulletedList", { active: !prev });
+    exec("insertUnorderedList");
+  },
+  getState: (_, ctx) => {
+    return ctx.getPluginState("bulletedList") || { active: false };
+  },
+  onSelectionChange: (sel, context) => {
+    const isBulletedList = isCursorInTag("ul", sel);
+    context.setPluginState("bulletedList", { active: isBulletedList });
+  }
+};
+const numberedListPlugin = {
+  key: "numberedList",
+  label: /* @__PURE__ */ jsx(IconListNumbers, {}),
+  title: "Numbered list",
+  action: ({ exec, context }) => {
+    const prev = context.getPluginState("numberedList")?.active ?? false;
+    context.setPluginState("numberedList", { active: !prev });
+    exec("insertOrderedList");
+  },
+  getState: (_, ctx) => {
+    return ctx.getPluginState("numberedList") || { active: false };
+  },
+  onSelectionChange: (sel, context) => {
+    const isNumberedList = isCursorInTag("ol", sel);
+    context.setPluginState("isNumberedList", { active: isNumberedList });
+  }
+};
+const defaultPlugins = [
+  boldPlugin,
+  italicPlugin,
+  underlinePlugin,
+  strikethroughPlugin,
+  highlightPlugin,
+  blockquotePlugin,
+  h1Plugin,
+  h2Plugin,
+  superscriptPlugin,
+  subscriptPlugin,
+  bulletedListPlugin,
+  numberedListPlugin,
+  {
+    key: "alignLeft",
+    label: /* @__PURE__ */ jsx(IconAlignLeft, {}),
+    title: "Align left",
+    action: ({ exec }) => exec("justifyLeft")
+  },
+  {
+    key: "alignCenter",
+    label: /* @__PURE__ */ jsx(IconAlignCenter, {}),
+    title: "Align center",
+    action: ({ exec }) => exec("justifyCenter")
+  },
+  {
+    key: "alignRight",
+    label: /* @__PURE__ */ jsx(IconAlignRight, {}),
+    title: "Align right",
+    action: ({ exec }) => exec("justifyRight")
+  },
+  {
+    key: "justify",
+    label: /* @__PURE__ */ jsx(IconAlignJustified, {}),
+    title: "Justify",
+    action: ({ exec }) => exec("justifyFull")
+  },
+  {
+    key: "link",
+    label: /* @__PURE__ */ jsx(IconLink, {}),
+    title: "Paste link (Ctrl/Cmd+K)",
+    action: onPluginLink
+  },
+  {
+    key: "image",
+    label: /* @__PURE__ */ jsx(IconImageInPicture, {}),
+    title: "Insert image",
+    action: onPluginImage
+  },
+  {
+    key: "textColor",
+    label: /* @__PURE__ */ jsx(IconTextColor, {}),
+    title: "Text color",
+    action: onColorPickerPlugin
+  },
+  {
+    key: "clear",
+    label: /* @__PURE__ */ jsx(IconClearFormatting, {}),
+    title: "Clear formatting",
+    action: onClearFormattingPlugin
+  },
+  {
+    key: "undo",
+    label: /* @__PURE__ */ jsx(IconArrowBackUp, {}),
+    title: "Undo",
+    action: ({ exec }) => exec("undo")
+  },
+  {
+    key: "redo",
+    label: /* @__PURE__ */ jsx(IconArrowForwardUp, {}),
+    title: "Redo",
+    action: ({ exec }) => exec("redo")
+  },
+  checkBoxPlugin,
+  {
+    key: "table",
+    title: "Table",
+    label: /* @__PURE__ */ jsx(IconTable, {}),
+    action: onTablePlugin
+  }
+];
+export {
+  defaultPlugins
+};

package/dist/RichTextEditor/styles.cjs.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const Button = require("../Button/Button.cjs.js");
+const RichTextEditorWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: ${({ theme }) => theme.components.RichTextEditor.radius};
+  border: 1px solid
+    ${({ theme }) => theme.components.RichTextEditor.borderColor};
+  width: 100%;
+  height: 100%;
+`;
+const RichTextEditorContentStyled = styled.div`
+  padding: ${({ theme }) => theme.components.RichTextEditor.padding};
+  outline: none;
+  color: ${({ theme }) => theme.textColor};
+  overflow: auto;
+
+  table,
+  th,
+  td {
+    border: 1px solid black;
+  }
+
+  blockquote {
+    background: ${({ theme }) => theme.colors.grayViolet[3]};
+    font-size: ${({ theme }) => theme.fonts.text.size.l};
+    padding: 1rem;
+    margin: 1rem 0;
+  }
+`;
+const TableSizePickerWrapper = styled.div`
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+const TableSizePickerCellStyled = styled.div`
+  width: 15px;
+  height: 15px;
+  border-radius: ${({ theme }) => theme.components.RichTextEditor.borderRadius};
+  border: 1px solid
+    ${({ theme }) => theme.components.RichTextEditor.borderColor};
+  background: ${({ active, theme }) => active ? theme.components.RichTextEditor.borderColor : "transparent"};
+  transition: background 0.1s;
+  cursor: pointer;
+  &:hover {
+    background: ${({ theme }) => theme.components.RichTextEditor.borderColor};
+  }
+`;
+const ToolbarButtonStyled = styled(Button)`
+  padding-right: 0.25rem;
+  padding-left: 0.25rem;
+`;
+exports.RichTextEditorContentStyled = RichTextEditorContentStyled;
+exports.RichTextEditorWrapper = RichTextEditorWrapper;
+exports.TableSizePickerCellStyled = TableSizePickerCellStyled;
+exports.TableSizePickerWrapper = TableSizePickerWrapper;
+exports.ToolbarButtonStyled = ToolbarButtonStyled;

package/dist/RichTextEditor/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const RichTextEditorWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RichTextEditorContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TableSizePickerWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TableSizePickerCellStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    active: boolean;
+}>> & string;
+export declare const ToolbarButtonStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').IButtonProps, never>> & string & Omit<import('react').FC<import('..').IButtonProps>, keyof import('react').Component<any, {}, any>>;

package/dist/RichTextEditor/styles.es.js

@@ -0,0 +1,60 @@
+import styled from "styled-components";
+import Button from "../Button/Button.es.js";
+const RichTextEditorWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: ${({ theme }) => theme.components.RichTextEditor.radius};
+  border: 1px solid
+    ${({ theme }) => theme.components.RichTextEditor.borderColor};
+  width: 100%;
+  height: 100%;
+`;
+const RichTextEditorContentStyled = styled.div`
+  padding: ${({ theme }) => theme.components.RichTextEditor.padding};
+  outline: none;
+  color: ${({ theme }) => theme.textColor};
+  overflow: auto;
+
+  table,
+  th,
+  td {
+    border: 1px solid black;
+  }
+
+  blockquote {
+    background: ${({ theme }) => theme.colors.grayViolet[3]};
+    font-size: ${({ theme }) => theme.fonts.text.size.l};
+    padding: 1rem;
+    margin: 1rem 0;
+  }
+`;
+const TableSizePickerWrapper = styled.div`
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+const TableSizePickerCellStyled = styled.div`
+  width: 15px;
+  height: 15px;
+  border-radius: ${({ theme }) => theme.components.RichTextEditor.borderRadius};
+  border: 1px solid
+    ${({ theme }) => theme.components.RichTextEditor.borderColor};
+  background: ${({ active, theme }) => active ? theme.components.RichTextEditor.borderColor : "transparent"};
+  transition: background 0.1s;
+  cursor: pointer;
+  &:hover {
+    background: ${({ theme }) => theme.components.RichTextEditor.borderColor};
+  }
+`;
+const ToolbarButtonStyled = styled(Button)`
+  padding-right: 0.25rem;
+  padding-left: 0.25rem;
+`;
+export {
+  RichTextEditorContentStyled,
+  RichTextEditorWrapper,
+  TableSizePickerCellStyled,
+  TableSizePickerWrapper,
+  ToolbarButtonStyled
+};