@quen-ui/components 0.0.14 → 1.0.0

package/dist/RichTextEditor/plugins.cjs.js

@@ -0,0 +1,571 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const client = require("../_virtual/client.cjs.js");
+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 IconAlignLeft = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconAlignLeft.cjs.js");
+const IconAlignCenter = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconAlignCenter.cjs.js");
+const IconAlignRight = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconAlignRight.cjs.js");
+const IconAlignJustified = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconAlignJustified.cjs.js");
+const IconLink = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconLink.cjs.js");
+const IconImageInPicture = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconImageInPicture.cjs.js");
+const IconTextColor = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconTextColor.cjs.js");
+const IconClearFormatting = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconClearFormatting.cjs.js");
+const IconArrowBackUp = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconArrowBackUp.cjs.js");
+const IconArrowForwardUp = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconArrowForwardUp.cjs.js");
+const IconTable = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconTable.cjs.js");
+const IconBold = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconBold.cjs.js");
+const IconItalic = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconItalic.cjs.js");
+const IconUnderline = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconUnderline.cjs.js");
+const IconStrikethrough = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconStrikethrough.cjs.js");
+const IconHighlight = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconHighlight.cjs.js");
+const IconBlockquote = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconBlockquote.cjs.js");
+const IconH1 = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconH1.cjs.js");
+const IconH2 = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconH2.cjs.js");
+const IconSuperscript = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconSuperscript.cjs.js");
+const IconSubscript = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconSubscript.cjs.js");
+const IconList = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconList.cjs.js");
+const IconListNumbers = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconListNumbers.cjs.js");
+const IconCheckbox = require("../node_modules/@tabler/icons-react/dist/esm/icons/IconCheckbox.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.clientExports.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.clientExports.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(IconCheckbox.default, {}),
+  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(IconBold.default, {}),
+  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(IconItalic.default, {}),
+  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(IconUnderline.default, {}),
+  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(IconStrikethrough.default, {}),
+  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(IconHighlight.default, {}),
+  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(IconBlockquote.default, {}),
+  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(IconSuperscript.default, {}),
+  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(IconH1.default, {}),
+  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(IconH2.default, {}),
+  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(IconSubscript.default, {}),
+  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(IconList.default, {}),
+  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(IconListNumbers.default, {}),
+  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(IconAlignLeft.default, {}),
+    title: "Align left",
+    action: ({ exec }) => exec("justifyLeft")
+  },
+  {
+    key: "alignCenter",
+    label: /* @__PURE__ */ jsxRuntime.jsx(IconAlignCenter.default, {}),
+    title: "Align center",
+    action: ({ exec }) => exec("justifyCenter")
+  },
+  {
+    key: "alignRight",
+    label: /* @__PURE__ */ jsxRuntime.jsx(IconAlignRight.default, {}),
+    title: "Align right",
+    action: ({ exec }) => exec("justifyRight")
+  },
+  {
+    key: "justify",
+    label: /* @__PURE__ */ jsxRuntime.jsx(IconAlignJustified.default, {}),
+    title: "Justify",
+    action: ({ exec }) => exec("justifyFull")
+  },
+  {
+    key: "link",
+    label: /* @__PURE__ */ jsxRuntime.jsx(IconLink.default, {}),
+    title: "Paste link (Ctrl/Cmd+K)",
+    action: onPluginLink
+  },
+  {
+    key: "image",
+    label: /* @__PURE__ */ jsxRuntime.jsx(IconImageInPicture.default, {}),
+    title: "Insert image",
+    action: onPluginImage
+  },
+  {
+    key: "textColor",
+    label: /* @__PURE__ */ jsxRuntime.jsx(IconTextColor.default, {}),
+    title: "Text color",
+    action: onColorPickerPlugin
+  },
+  {
+    key: "clear",
+    label: /* @__PURE__ */ jsxRuntime.jsx(IconClearFormatting.default, {}),
+    title: "Clear formatting",
+    action: onClearFormattingPlugin
+  },
+  {
+    key: "undo",
+    label: /* @__PURE__ */ jsxRuntime.jsx(IconArrowBackUp.default, {}),
+    title: "Undo",
+    action: ({ exec }) => exec("undo")
+  },
+  {
+    key: "redo",
+    label: /* @__PURE__ */ jsxRuntime.jsx(IconArrowForwardUp.default, {}),
+    title: "Redo",
+    action: ({ exec }) => exec("redo")
+  },
+  checkBoxPlugin,
+  {
+    key: "table",
+    title: "Table",
+    label: /* @__PURE__ */ jsxRuntime.jsx(IconTable.default, {}),
+    action: onTablePlugin
+  }
+];
+exports.defaultPlugins = defaultPlugins;

package/dist/RichTextEditor/plugins.d.ts

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