@quen-ui/components 0.0.14 → 1.0.1

package/dist/RichTextEditor/helpers.es.js

@@ -0,0 +1,151 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import DOMPurify from "dompurify";
+import Tooltip from "../Tooltip/Tooltip.es.js";
+import { ToolbarButtonStyled } from "./styles.es.js";
+const sanitize = (html) => {
+  return DOMPurify.sanitize(html, { USE_PROFILES: { html: true } });
+};
+const toolbarButton = (label, onClick, title, disabled, active = false) => {
+  const ref = useRef(null);
+  return /* @__PURE__ */ jsx(Tooltip, { text: title, show: !!title, children: /* @__PURE__ */ jsx(
+    ToolbarButtonStyled,
+    {
+      disabled,
+      "aria-label": title,
+      ref,
+      size: "s",
+      view: !active ? "icon" : "link",
+      onClick: () => onClick(ref),
+      children: label
+    }
+  ) });
+};
+const insertNodeAtSelection = (editor, node) => {
+  const sel = document.getSelection();
+  if (!sel || !sel.rangeCount) {
+    editor.appendChild(node);
+    return;
+  }
+  const range = sel.getRangeAt(0);
+  range.deleteContents();
+  range.insertNode(node);
+};
+const setCursorAtEnd = (el) => {
+  const range = document.createRange();
+  const sel = window.getSelection();
+  range.selectNodeContents(el);
+  range.collapse(false);
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+};
+const getCurrentBlock = () => {
+  const sel = document.getSelection();
+  if (!sel || !sel.anchorNode) {
+    return null;
+  }
+  let node = sel.anchorNode;
+  if (node.nodeType === 3) {
+    node = node.parentElement;
+  }
+  if (!node) {
+    return null;
+  }
+  return node.closest("[data-checkbox-line], div, p, li");
+};
+function isCursorInTag(tagName, sel) {
+  if (!sel || !sel.anchorNode) return false;
+  let node = sel.anchorNode;
+  if (node.nodeType === Node.TEXT_NODE) {
+    node = node.parentNode;
+  }
+  while (node) {
+    if (node instanceof HTMLElement && node.tagName.toLowerCase() === tagName.toLowerCase()) {
+      return true;
+    }
+    node = node.parentElement;
+  }
+  return false;
+}
+const findClosestAncestorElement = (node, predicate) => {
+  let cur = node;
+  if (!cur) return null;
+  if (cur.nodeType === Node.TEXT_NODE) cur = cur.parentElement;
+  while (cur && cur instanceof HTMLElement) {
+    if (predicate(cur)) return cur;
+    cur = cur.parentElement;
+  }
+  return null;
+};
+const unwrapInlineColorSpans = (fragment) => {
+  const walker = document.createTreeWalker(
+    fragment,
+    NodeFilter.SHOW_ELEMENT,
+    null
+  );
+  const toUnwrap = [];
+  let node = walker.nextNode();
+  while (node) {
+    const el = node;
+    if (el.tagName === "SPAN" && el.style && (el.style.color || el.style.backgroundColor)) {
+      toUnwrap.push(el);
+    }
+    node = walker.nextNode();
+  }
+  for (const span of toUnwrap) {
+    const parent = span.parentNode;
+    if (!parent) continue;
+    while (span.firstChild) parent.insertBefore(span.firstChild, span);
+    parent.removeChild(span);
+  }
+  return fragment;
+};
+const getCurrentTextColor = (range) => {
+  const commonAncestor = range.commonAncestorContainer;
+  if (!range.collapsed) {
+    const walker = document.createTreeWalker(
+      commonAncestor,
+      NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
+      null
+    );
+    let detectedColor = null;
+    let first = true;
+    let node2 = walker.nextNode();
+    while (node2) {
+      if (range.intersectsNode(node2)) {
+        const el = node2 instanceof HTMLElement ? node2 : node2.parentElement;
+        if (el) {
+          const color = el.style?.color || null;
+          if (first) {
+            detectedColor = color;
+            first = false;
+          } else if (detectedColor !== color) {
+            return null;
+          }
+        }
+      }
+      node2 = walker.nextNode();
+    }
+    return detectedColor;
+  }
+  let node = range.startContainer;
+  if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
+  while (node && node instanceof HTMLElement) {
+    if (node.style.color) {
+      return node.style.color;
+    }
+    node = node.parentElement;
+  }
+  return null;
+};
+export {
+  findClosestAncestorElement,
+  getCurrentBlock,
+  getCurrentTextColor,
+  insertNodeAtSelection,
+  isCursorInTag,
+  sanitize,
+  setCursorAtEnd,
+  toolbarButton,
+  unwrapInlineColorSpans
+};

package/dist/RichTextEditor/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RichTextEditor } from './RichTextEditor';
+export type { IRichTextEditorPlugin, IRichTextEditorHandle, IRichTextEditorProps, IRichTextEditorPluginActionParams, IRichTextEditorPluginContext } from './types';

package/dist/RichTextEditor/plugins.cjs.js

@@ -0,0 +1,548 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const iconsReact = require("@tabler/icons-react");
+const client = require("react-dom/client");
+const theme = require("@quen-ui/theme");
+const RichTextEditorTableControl = require("./RichTextEditorTableControl.cjs.js");
+const RichTextEditorColorControl = require("./RichTextEditorColorControl.cjs.js");
+const helpers = require("./helpers.cjs.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 = client.createRoot(container);
+  root.render(
+    /* @__PURE__ */ jsxRuntime.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 ? helpers.getCurrentTextColor(savedRange) : null;
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = client.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 = helpers.findClosestAncestorElement(
+      range.startContainer,
+      (el) => el.tagName === "SPAN" && (!!el.style.color || !!el.style.backgroundColor)
+    );
+    const endAncestor = helpers.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 = helpers.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__ */ jsxRuntime.jsx(theme.QuenUIProvider, { theme: theme.QuenUILightTheme, children: /* @__PURE__ */ jsxRuntime.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);
+  helpers.insertNodeAtSelection(editor, wrapper);
+  helpers.setCursorAtEnd(wrapper);
+};
+const checkBoxPlugin = {
+  key: "checkbox",
+  title: "Check list",
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.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 = helpers.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__ */ jsxRuntime.jsx(iconsReact.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__ */ jsxRuntime.jsx(iconsReact.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__ */ jsxRuntime.jsx(iconsReact.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__ */ jsxRuntime.jsx(iconsReact.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__ */ jsxRuntime.jsx(iconsReact.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__ */ jsxRuntime.jsx(iconsReact.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 = helpers.isCursorInTag("blockquote", sel);
+    context.setPluginState("blockquote", { active: isBlockquote });
+  }
+};
+const superscriptPlugin = {
+  key: "superscript",
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.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 = helpers.isCursorInTag("sup", sel);
+    context.setPluginState("superscript", { active: isSuperscript });
+  }
+};
+const h1Plugin = {
+  key: "h1",
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.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 = helpers.isCursorInTag("h1", sel);
+    context.setPluginState("h1", { active: isH1 });
+  }
+};
+const h2Plugin = {
+  key: "h2",
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.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 = helpers.isCursorInTag("h2", sel);
+    context.setPluginState("h2", { active: isH2 });
+  }
+};
+const subscriptPlugin = {
+  key: "subscript",
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.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 = helpers.isCursorInTag("sub", sel);
+    context.setPluginState("subscript", { active: isSubscript });
+  }
+};
+const bulletedListPlugin = {
+  key: "bulletedList",
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.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 = helpers.isCursorInTag("ul", sel);
+    context.setPluginState("bulletedList", { active: isBulletedList });
+  }
+};
+const numberedListPlugin = {
+  key: "numberedList",
+  label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.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 = helpers.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__ */ jsxRuntime.jsx(iconsReact.IconAlignLeft, {}),
+    title: "Align left",
+    action: ({ exec }) => exec("justifyLeft")
+  },
+  {
+    key: "alignCenter",
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlignCenter, {}),
+    title: "Align center",
+    action: ({ exec }) => exec("justifyCenter")
+  },
+  {
+    key: "alignRight",
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlignRight, {}),
+    title: "Align right",
+    action: ({ exec }) => exec("justifyRight")
+  },
+  {
+    key: "justify",
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlignJustified, {}),
+    title: "Justify",
+    action: ({ exec }) => exec("justifyFull")
+  },
+  {
+    key: "link",
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconLink, {}),
+    title: "Paste link (Ctrl/Cmd+K)",
+    action: onPluginLink
+  },
+  {
+    key: "image",
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconImageInPicture, {}),
+    title: "Insert image",
+    action: onPluginImage
+  },
+  {
+    key: "textColor",
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconTextColor, {}),
+    title: "Text color",
+    action: onColorPickerPlugin
+  },
+  {
+    key: "clear",
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconClearFormatting, {}),
+    title: "Clear formatting",
+    action: onClearFormattingPlugin
+  },
+  {
+    key: "undo",
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconArrowBackUp, {}),
+    title: "Undo",
+    action: ({ exec }) => exec("undo")
+  },
+  {
+    key: "redo",
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconArrowForwardUp, {}),
+    title: "Redo",
+    action: ({ exec }) => exec("redo")
+  },
+  checkBoxPlugin,
+  {
+    key: "table",
+    title: "Table",
+    label: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconTable, {}),
+    action: onTablePlugin
+  }
+];
+exports.defaultPlugins = defaultPlugins;

package/dist/RichTextEditor/plugins.d.ts

@@ -0,0 +1,2 @@
+import { IRichTextEditorPlugin } from './types';
+export declare const defaultPlugins: IRichTextEditorPlugin[];