@cgboiler/biz-basic 1.0.69 → 1.0.71

package/es/index.d.ts

@@ -5,6 +5,6 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "1.0.68";
+export const version: "1.0.70";
 import RichTextEditor from './rich-text-editor';
 export { RichTextEditor };

package/es/index.js

@@ -1,5 +1,5 @@
 import RichTextEditor from "./rich-text-editor";
-const version = "1.0.68";
+const version = "1.0.70";
 function install(app) {
   const components = [
     RichTextEditor

package/es/rich-text-editor/RichTextEditor.js

@@ -15,6 +15,7 @@ import { BlockquoteButton } from "./menu-system/components/blockquote-button";
 import { CodeBlockButton } from "./menu-system/components/code-block-button";
 import { MarkButton } from "./menu-system/components/mark-button";
 import { ColorHighlightPopover } from "./menu-system/components/color-highlight-popover";
+import { TextColorPopover } from "./menu-system/components/text-color-popover";
 import { LinkPopover } from "./menu-system/components/link-popover";
 import { HorizontalRuleButton } from "./menu-system/components/horizontal-rule-button";
 import { TableDropdownMenu } from "./menu-system/components/table-dropdown-menu";
@@ -202,6 +203,8 @@ var stdin_default = defineComponent({
           "type": "underline"
         }, null), _createVNode(ColorHighlightPopover, {
           "editor": editor.value
+        }, null), _createVNode(TextColorPopover, {
+          "editor": editor.value
         }, null), _createVNode(LinkPopover, {
           "editor": editor.value
         }, null)]

package/es/rich-text-editor/index.css

@@ -1 +1 @@
-:root{overflow-wrap:break-word;-webkit-text-size-adjust:none;text-size-adjust:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--tt-gray-light-a-50: rgba(56, 56, 56, .04);--tt-gray-light-a-100: rgba(15, 22, 36, .05);--tt-gray-light-a-200: rgba(37, 39, 45, .1);--tt-gray-light-a-300: rgba(47, 50, 55, .2);--tt-gray-light-a-400: rgba(40, 44, 51, .42);--tt-gray-light-a-500: rgba(52, 55, 60, .64);--tt-gray-light-a-600: rgba(36, 39, 46, .78);--tt-gray-light-a-700: rgba(35, 37, 42, .87);--tt-gray-light-a-800: rgba(30, 32, 36, .95);--tt-gray-light-a-900: rgba(29, 30, 32, .98);--tt-gray-light-50: #fafafa;--tt-gray-light-100: #f4f4f5;--tt-gray-light-200: #eaeaeb;--tt-gray-light-300: #d5d6d7;--tt-gray-light-400: #a6a7ab;--tt-gray-light-500: #7d7f82;--tt-gray-light-600: #53565a;--tt-gray-light-700: #404145;--tt-gray-light-800: #2c2d30;--tt-gray-light-900: #222325;--tt-gray-dark-a-50: rgba(232, 232, 253, .05);--tt-gray-dark-a-100: rgba(231, 231, 243, .07);--tt-gray-dark-a-200: rgba(238, 238, 246, .11);--tt-gray-dark-a-300: rgba(239, 239, 245, .22);--tt-gray-dark-a-400: rgba(244, 244, 255, .37);--tt-gray-dark-a-500: rgba(236, 238, 253, .5);--tt-gray-dark-a-600: rgba(247, 247, 253, .64);--tt-gray-dark-a-700: rgba(251, 251, 254, .75);--tt-gray-dark-a-800: rgba(253, 253, 253, .88);--tt-gray-dark-a-900: rgba(255, 255, 255, .96);--tt-gray-dark-50: #19191a;--tt-gray-dark-100: #202022;--tt-gray-dark-200: #2d2d2f;--tt-gray-dark-300: #464649;--tt-gray-dark-400: #636369;--tt-gray-dark-500: #7c7c83;--tt-gray-dark-600: #a3a3a8;--tt-gray-dark-700: #c0c0c3;--tt-gray-dark-800: #e0e0e1;--tt-gray-dark-900: #f5f5f5;--tt-brand-color-50: #fef2f3;--tt-brand-color-100: #fce8e9;--tt-brand-color-200: #f9d4d5;--tt-brand-color-300: #f4b4b6;--tt-brand-color-400: #eb747e;--tt-brand-color-500: #c02537;--tt-brand-color-600: #a51c2d;--tt-brand-color-700: #8b1826;--tt-brand-color-800: #71131f;--tt-brand-color-900: #570f18;--tt-brand-color-950: #3a0a10;--tt-color-green-inc-5: hsl(129, 100%, 97%);--tt-color-green-inc-4: hsl(129, 100%, 92%);--tt-color-green-inc-3: hsl(131, 100%, 86%);--tt-color-green-inc-2: hsl(133, 98%, 78%);--tt-color-green-inc-1: hsl(137, 99%, 70%);--tt-color-green-base: hsl(147, 99%, 50%);--tt-color-green-dec-1: hsl(147, 97%, 41%);--tt-color-green-dec-2: hsl(146, 98%, 32%);--tt-color-green-dec-3: hsl(146, 100%, 24%);--tt-color-green-dec-4: hsl(144, 100%, 16%);--tt-color-green-dec-5: hsl(140, 100%, 9%);--tt-color-yellow-inc-5: hsl(50, 100%, 97%);--tt-color-yellow-inc-4: hsl(50, 100%, 91%);--tt-color-yellow-inc-3: hsl(50, 100%, 84%);--tt-color-yellow-inc-2: hsl(50, 100%, 77%);--tt-color-yellow-inc-1: hsl(50, 100%, 68%);--tt-color-yellow-base: hsl(52, 100%, 50%);--tt-color-yellow-dec-1: hsl(52, 100%, 41%);--tt-color-yellow-dec-2: hsl(52, 100%, 32%);--tt-color-yellow-dec-3: hsl(52, 100%, 24%);--tt-color-yellow-dec-4: hsl(51, 100%, 16%);--tt-color-yellow-dec-5: hsl(50, 100%, 9%);--tt-color-red-inc-5: hsl(11, 100%, 96%);--tt-color-red-inc-4: hsl(11, 100%, 88%);--tt-color-red-inc-3: hsl(10, 100%, 80%);--tt-color-red-inc-2: hsl(9, 100%, 73%);--tt-color-red-inc-1: hsl(7, 100%, 64%);--tt-color-red-base: hsl(7, 100%, 54%);--tt-color-red-dec-1: hsl(7, 100%, 41%);--tt-color-red-dec-2: hsl(5, 100%, 32%);--tt-color-red-dec-3: hsl(4, 100%, 24%);--tt-color-red-dec-4: hsl(3, 100%, 16%);--tt-color-red-dec-5: hsl(1, 100%, 9%);--white: #ffffff;--black: #0e0e11;--transparent: rgba(255, 255, 255, 0);--tt-shadow-elevated-md: 0px 16px 48px 0px rgba(17, 24, 39, .04), 0px 12px 24px 0px rgba(17, 24, 39, .04), 0px 6px 8px 0px rgba(17, 24, 39, .02), 0px 2px 3px 0px rgba(17, 24, 39, .02);--tt-radius-xxs: .125rem;--tt-radius-xs: .25rem;--tt-radius-sm: .375rem;--tt-radius-md: .5rem;--tt-radius-lg: .75rem;--tt-radius-xl: 1rem;--tt-transition-duration-short: .1s;--tt-transition-duration-default: .2s;--tt-transition-duration-long: .64s;--tt-transition-easing-default: cubic-bezier(.46, .03, .52, .96);--tt-transition-easing-cubic: cubic-bezier(.65, .05, .36, 1);--tt-transition-easing-quart: cubic-bezier(.77, 0, .18, 1);--tt-transition-easing-circ: cubic-bezier(.79, .14, .15, .86);--tt-transition-easing-back: cubic-bezier(.68, -.55, .27, 1.55);--tt-accent-contrast: 8%;--tt-destructive-contrast: 8%;--tt-foreground-contrast: 8%}:root,:root *,:root :before,:root :after{box-sizing:border-box}:root{--tt-bg-color: var(--white);--tt-border-color: var(--tt-gray-light-a-200);--tt-border-color-tint: var(--tt-gray-light-a-100);--tt-sidebar-bg-color: var(--tt-gray-light-100);--tt-scrollbar-color: var(--tt-gray-light-a-200);--tt-cursor-color: var(--tt-brand-color-500);--tt-selection-color: rgba(244, 180, 182, .2);--tt-card-bg-color: var(--white);--tt-card-border-color: var(--tt-gray-light-a-100)}.dark{--tt-bg-color: var(--black);--tt-border-color: var(--tt-gray-dark-a-200);--tt-border-color-tint: var(--tt-gray-dark-a-100);--tt-sidebar-bg-color: var(--tt-gray-dark-100);--tt-scrollbar-color: var(--tt-gray-dark-a-200);--tt-cursor-color: var(--tt-brand-color-400);--tt-selection-color: rgba(235, 116, 126, .2);--tt-card-bg-color: var(--tt-gray-dark-50);--tt-card-border-color: var(--tt-gray-dark-a-50);--tt-shadow-elevated-md: 0px 16px 48px 0px rgba(0, 0, 0, .5), 0px 12px 24px 0px rgba(0, 0, 0, .24), 0px 6px 8px 0px rgba(0, 0, 0, .22), 0px 2px 3px 0px rgba(0, 0, 0, .12)}:root{--tt-color-text-gray: hsl(45, 2%, 46%);--tt-color-text-brown: hsl(19, 31%, 47%);--tt-color-text-orange: hsl(30, 89%, 45%);--tt-color-text-yellow: hsl(38, 62%, 49%);--tt-color-text-green: hsl(148, 32%, 39%);--tt-color-text-blue: hsl(202, 54%, 43%);--tt-color-text-purple: hsl(274, 32%, 54%);--tt-color-text-pink: hsl(328, 49%, 53%);--tt-color-text-red: hsl(2, 62%, 55%);--tt-color-text-gray-contrast: hsla(39, 26%, 26%, .15);--tt-color-text-brown-contrast: hsla(18, 43%, 69%, .35);--tt-color-text-orange-contrast: hsla(24, 73%, 55%, .27);--tt-color-text-yellow-contrast: hsla(44, 82%, 59%, .39);--tt-color-text-green-contrast: hsla(126, 29%, 60%, .27);--tt-color-text-blue-contrast: hsla(202, 54%, 59%, .27);--tt-color-text-purple-contrast: hsla(274, 37%, 64%, .27);--tt-color-text-pink-contrast: hsla(331, 60%, 71%, .27);--tt-color-text-red-contrast: hsla(8, 79%, 79%, .4)}.dark{--tt-color-text-gray: hsl(0, 0%, 61%);--tt-color-text-brown: hsl(18, 35%, 58%);--tt-color-text-orange: hsl(25, 53%, 53%);--tt-color-text-yellow: hsl(36, 54%, 55%);--tt-color-text-green: hsl(145, 32%, 47%);--tt-color-text-blue: hsl(202, 64%, 52%);--tt-color-text-purple: hsl(270, 55%, 62%);--tt-color-text-pink: hsl(329, 57%, 58%);--tt-color-text-red: hsl(1, 69%, 60%);--tt-color-text-gray-contrast: hsla(0, 0%, 100%, .09);--tt-color-text-brown-contrast: hsla(17, 45%, 50%, .25);--tt-color-text-orange-contrast: hsla(27, 82%, 53%, .2);--tt-color-text-yellow-contrast: hsla(35, 49%, 47%, .2);--tt-color-text-green-contrast: hsla(151, 55%, 39%, .2);--tt-color-text-blue-contrast: hsla(202, 54%, 43%, .2);--tt-color-text-purple-contrast: hsla(271, 56%, 60%, .18);--tt-color-text-pink-contrast: hsla(331, 67%, 58%, .22);--tt-color-text-red-contrast: hsla(0, 67%, 60%, .25)}:root{--tt-color-highlight-yellow: #fef9c3;--tt-color-highlight-green: #dcfce7;--tt-color-highlight-blue: #e0f2fe;--tt-color-highlight-purple: #f3e8ff;--tt-color-highlight-red: #ffe4e6;--tt-color-highlight-gray: #f8f8f7;--tt-color-highlight-brown: #f4eeee;--tt-color-highlight-orange: #fbecdd;--tt-color-highlight-pink: #fcf1f6;--tt-color-highlight-yellow-contrast: #fbe604;--tt-color-highlight-green-contrast: #c7fad8;--tt-color-highlight-blue-contrast: #ceeafd;--tt-color-highlight-purple-contrast: #e4ccff;--tt-color-highlight-red-contrast: #ffccd0;--tt-color-highlight-gray-contrast: rgba(84, 72, 49, .15);--tt-color-highlight-brown-contrast: rgba(210, 162, 141, .35);--tt-color-highlight-orange-contrast: rgba(224, 124, 57, .27);--tt-color-highlight-pink-contrast: rgba(225, 136, 179, .27)}.dark{--tt-color-highlight-yellow: #6b6524;--tt-color-highlight-green: #509568;--tt-color-highlight-blue: #6e92aa;--tt-color-highlight-purple: #583e74;--tt-color-highlight-red: #743e42;--tt-color-highlight-gray: #2f2f2f;--tt-color-highlight-brown: #4a3228;--tt-color-highlight-orange: #5c3b23;--tt-color-highlight-pink: #4e2c3c;--tt-color-highlight-yellow-contrast: #58531e;--tt-color-highlight-green-contrast: #47855d;--tt-color-highlight-blue-contrast: #5e86a1;--tt-color-highlight-purple-contrast: #4c3564;--tt-color-highlight-red-contrast: #643539;--tt-color-highlight-gray-contrast: rgba(255, 255, 255, .094);--tt-color-highlight-brown-contrast: rgba(184, 101, 69, .25);--tt-color-highlight-orange-contrast: rgba(233, 126, 37, .2);--tt-color-highlight-pink-contrast: rgba(220, 76, 145, .22)}body .ProseMirror{flex:1;outline:none;word-break:break-all;line-height:1.6;font-size:var(--font-base);--white: #fff;--black: #2e2b29;--gray-1: rgba(61, 37, 20, .05);--gray-2: rgba(61, 37, 20, .08);--gray-3: rgba(61, 37, 20, .12);--gray-4: rgba(53, 38, 28, .3);--gray-5: rgba(28, 25, 23, .6);--green: #22c55e;--purple: #6a00f5;--purple-contrast: #5800cc;--purple-light: rgba(88, 5, 255, .05);--yellow-contrast: #facc15;--yellow: rgba(250, 204, 21, .4);--yellow-light: #fffae5;--red: #ff5c33;--red-light: #ffebe5;--shadow: 0px 12px 33px 0px rgba(0, 0, 0, .06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, .04);--tt-collaboration-carets-label: var(--tt-gray-light-900);--link-text-color: var(--tt-brand-color-500);--thread-text: var(--tt-gray-light-900);--placeholder-color: var(--tt-gray-light-a-400);--thread-bg-color: var(--tt-color-yellow-inc-2);--horizontal-rule-color: var(--tt-gray-light-a-200);--blockquote-bg-color: var(--tt-gray-light-900);--tiptap-ai-insertion-color: var(--tt-brand-color-600);--tt-inline-code-bg-color: var(--tt-gray-light-a-100);--tt-inline-code-text-color: var(--tt-gray-light-a-700);--tt-inline-code-border-color: var(--tt-gray-light-a-200);--tt-codeblock-bg: var(--tt-gray-light-a-50);--tt-codeblock-text: var(--tt-gray-light-a-800);--tt-codeblock-border: var(--tt-gray-light-a-200);--tt-checklist-bg-color: var(--tt-gray-light-a-100);--tt-checklist-bg-active-color: var(--tt-gray-light-a-900);--tt-checklist-border-color: var(--tt-gray-light-a-200);--tt-checklist-border-active-color: var(--tt-gray-light-a-900);--tt-checklist-check-icon-color: var(--white);--tt-checklist-text-active: var(--tt-gray-light-a-500);white-space:pre-wrap;caret-color:var(--tt-cursor-color)}body .ProseMirror :first-child{margin-top:0}body .ProseMirror:not(.readonly):not(.ProseMirror-hideselection) ::selection{background-color:var(--tt-selection-color)}body .ProseMirror .selection{display:inline;background-color:var(--tt-selection-color)}body .ProseMirror p{font-size:1rem;line-height:1.6}body .ProseMirror video{width:100%}body .ProseMirror ol{list-style:auto}body .ProseMirror ol ol,body .ProseMirror ul{list-style:disc}body .ProseMirror ol,body .ProseMirror ul{padding-left:1.5em;margin:0!important}body .ProseMirror ol li p,body .ProseMirror ul li p{margin-top:0!important;margin-bottom:0!important}body .ProseMirror li::marker{text-align:start!important}body .ProseMirror h1,body .ProseMirror h2,body .ProseMirror h3,body .ProseMirror h4,body .ProseMirror h5,body .ProseMirror h6{line-height:1.1;margin-top:1rem;margin-bottom:1rem;text-wrap:pretty}body .ProseMirror h1{font-size:1.4rem}body .ProseMirror h2{font-size:1.2rem}body .ProseMirror h3{font-size:1.1rem}body .ProseMirror h4,body .ProseMirror h5,body .ProseMirror h6{font-size:1rem}body .ProseMirror a,body .ProseMirror .editor-link{color:var(--purple);text-decoration:underline;cursor:pointer;transition:color .2s ease}body .ProseMirror a:hover,body .ProseMirror .editor-link:hover{color:var(--purple-contrast);text-decoration:underline}body .ProseMirror code{background-color:#ffe5e8;border-radius:.4rem;color:#c02537;padding:2px 4px;display:inline-block}body .ProseMirror .ProseMirror-selectednode:not(img):not(pre):not(.react-renderer){border-radius:var(--tt-radius-md);background-color:var(--tt-selection-color)}body .ProseMirror pre{background-color:var(--tt-codeblock-bg);color:var(--tt-codeblock-text);border:1px solid var(--tt-codeblock-border);margin-top:1.5em;margin-bottom:1.5em;padding:1em;font-size:1rem;border-radius:.375rem}body .ProseMirror pre code{background-color:transparent;border:none;border-radius:0;color:inherit;padding:0;display:block}body .ProseMirror pre.is-empty:before{left:1.15em!important;top:.8em!important}body .ProseMirror blockquote{border-left:3px solid var(--gray-3);margin:1.5rem 0;padding-left:1rem}body .ProseMirror hr{border:none;border-top:1px solid var(--gray-2);margin:2rem 0}body .ProseMirror p.is-editor-empty:first-child:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none;margin-left:2px}body .ProseMirror p.is-empty:before,body .ProseMirror h1.is-empty:before,body .ProseMirror h2.is-empty:before,body .ProseMirror h3.is-empty:before,body .ProseMirror h4.is-empty:before,body .ProseMirror h5.is-empty:before,body .ProseMirror h6.is-empty:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}body .ProseMirror table{border-collapse:collapse;margin:0;overflow:hidden;table-layout:fixed;width:100%}body .ProseMirror table td,body .ProseMirror table th{border:1px solid var(--gray-3);box-sizing:border-box;min-width:1em;padding:6px 8px;position:relative;vertical-align:top}body .ProseMirror table td>*,body .ProseMirror table th>*{margin-bottom:0}body .ProseMirror table th{background-color:var(--gray-1);font-weight:700;text-align:left}body .ProseMirror table .selectedCell:after{background:var(--gray-2);content:"";left:0;right:0;top:0;bottom:0;pointer-events:none;position:absolute;z-index:2}body .ProseMirror table .column-resize-handle{background-color:var(--purple);bottom:-2px;pointer-events:none;position:absolute;right:-2px;top:0;width:4px}body .ProseMirror .tableWrapper{margin:1.5rem 0;overflow-x:auto}body .ProseMirror.resize-cursor{cursor:ew-resize;cursor:col-resize}body .ProseMirror img{max-width:100%}body .ProseMirror .mention,body .ProseMirror .hash-tag{color:#c02537;padding:0 .3em}body .ProseMirror .custom-content{color:var(--custom-content-color, #000);padding:0 .3em;cursor:pointer;transition:color .2s ease}body .ProseMirror .custom-content:hover{color:var(--custom-content-hover-color, #c02537)}.animation-indent--right{animation:indent-right .5s cubic-bezier(.68,-.55,.27,1.55) 1 alternate-reverse}@keyframes indent-right{0%{transform:translate(0)}to{transform:translate(12px)}}.tiptap-editor-container{display:flex;flex-direction:column;border:1px solid var(--gray-3);border-radius:8px;overflow:hidden;height:100%;background-color:var(--white)}.dark .tiptap-editor-container{background-color:var(--black);border-color:var(--gray-4)}.tiptap-editor-container.list{height:auto;border:none;background:transparent}.tiptap-editor-container.list .tiptap-editor-content-wrapper{display:block;height:auto;overflow:visible;padding:0}.tiptap-editor-container.list .tiptap-editor-content-wrapper .ProseMirror{height:auto;overflow:visible}.tiptap-editor-container .tiptap-editor-toolbar{flex:0 0 auto;border-bottom:1px solid var(--gray-3);padding:4px;background-color:var(--gray-1);display:flex;flex-wrap:wrap;gap:4px}.dark .tiptap-editor-container .tiptap-editor-toolbar{border-bottom-color:var(--gray-4);background-color:var(--gray-2)}.tiptap-editor-container .tiptap-editor-content-wrapper{flex:1 1 auto;overflow-y:auto;position:relative;padding:16px 8px;background-color:var(--white);display:flex;justify-content:center}.dark .tiptap-editor-container .tiptap-editor-content-wrapper{background-color:var(--black)}.tiptap-editor-container .tiptap-editor-content-wrapper .ProseMirror{width:100%}.tiptap-dropdown-menu .el-dropdown-menu__item.is-active,.tiptap-dropdown-menu .el-dropdown-menu__item:hover,.tiptap-dropdown-menu .el-dropdown-menu__item:focus{color:var(--tt-brand-color-500)!important;background-color:var(--tt-brand-color-50)!important}.dark .tiptap-dropdown-menu .el-dropdown-menu__item.is-active,.dark .tiptap-dropdown-menu .el-dropdown-menu__item:hover,.dark .tiptap-dropdown-menu .el-dropdown-menu__item:focus{color:var(--tt-brand-color-400)!important;background-color:var(--tt-brand-color-900)!important}.tiptap-dropdown-menu-item-content{display:flex;align-items:center;gap:8px;width:100%}.tiptap-dropdown-menu-item-label{font-size:10px;font-weight:700;color:var(--tt-text-muted);padding:1px 4px;border-radius:4px;min-width:20px;text-align:center}.dark .tiptap-dropdown-menu-item-label{background-color:var(--tt-gray-dark-200)}.tiptap-heading-trigger .tiptap-button-icon-chevron,.tiptap-list-dropdown-trigger .tiptap-button-icon-chevron,.tiptap-table-dropdown-trigger .tiptap-button-icon-chevron{width:12px;height:12px;margin-left:2px;color:var(--tt-text-muted)}.tiptap-dropdown-menu-item-icon{width:16px;height:16px;color:var(--tt-text-muted)}
+:root{overflow-wrap:break-word;-webkit-text-size-adjust:none;text-size-adjust:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--tt-gray-light-a-50: rgba(56, 56, 56, .04);--tt-gray-light-a-100: rgba(15, 22, 36, .05);--tt-gray-light-a-200: rgba(37, 39, 45, .1);--tt-gray-light-a-300: rgba(47, 50, 55, .2);--tt-gray-light-a-400: rgba(40, 44, 51, .42);--tt-gray-light-a-500: rgba(52, 55, 60, .64);--tt-gray-light-a-600: rgba(36, 39, 46, .78);--tt-gray-light-a-700: rgba(35, 37, 42, .87);--tt-gray-light-a-800: rgba(30, 32, 36, .95);--tt-gray-light-a-900: rgba(29, 30, 32, .98);--tt-gray-light-50: #fafafa;--tt-gray-light-100: #f4f4f5;--tt-gray-light-200: #eaeaeb;--tt-gray-light-300: #d5d6d7;--tt-gray-light-400: #a6a7ab;--tt-gray-light-500: #7d7f82;--tt-gray-light-600: #53565a;--tt-gray-light-700: #404145;--tt-gray-light-800: #2c2d30;--tt-gray-light-900: #222325;--tt-gray-dark-a-50: rgba(232, 232, 253, .05);--tt-gray-dark-a-100: rgba(231, 231, 243, .07);--tt-gray-dark-a-200: rgba(238, 238, 246, .11);--tt-gray-dark-a-300: rgba(239, 239, 245, .22);--tt-gray-dark-a-400: rgba(244, 244, 255, .37);--tt-gray-dark-a-500: rgba(236, 238, 253, .5);--tt-gray-dark-a-600: rgba(247, 247, 253, .64);--tt-gray-dark-a-700: rgba(251, 251, 254, .75);--tt-gray-dark-a-800: rgba(253, 253, 253, .88);--tt-gray-dark-a-900: rgba(255, 255, 255, .96);--tt-gray-dark-50: #19191a;--tt-gray-dark-100: #202022;--tt-gray-dark-200: #2d2d2f;--tt-gray-dark-300: #464649;--tt-gray-dark-400: #636369;--tt-gray-dark-500: #7c7c83;--tt-gray-dark-600: #a3a3a8;--tt-gray-dark-700: #c0c0c3;--tt-gray-dark-800: #e0e0e1;--tt-gray-dark-900: #f5f5f5;--tt-brand-color-50: #fef2f3;--tt-brand-color-100: #fce8e9;--tt-brand-color-200: #f9d4d5;--tt-brand-color-300: #f4b4b6;--tt-brand-color-400: #eb747e;--tt-brand-color-500: #c02537;--tt-brand-color-600: #a51c2d;--tt-brand-color-700: #8b1826;--tt-brand-color-800: #71131f;--tt-brand-color-900: #570f18;--tt-brand-color-950: #3a0a10;--tt-color-green-inc-5: hsl(129, 100%, 97%);--tt-color-green-inc-4: hsl(129, 100%, 92%);--tt-color-green-inc-3: hsl(131, 100%, 86%);--tt-color-green-inc-2: hsl(133, 98%, 78%);--tt-color-green-inc-1: hsl(137, 99%, 70%);--tt-color-green-base: hsl(147, 99%, 50%);--tt-color-green-dec-1: hsl(147, 97%, 41%);--tt-color-green-dec-2: hsl(146, 98%, 32%);--tt-color-green-dec-3: hsl(146, 100%, 24%);--tt-color-green-dec-4: hsl(144, 100%, 16%);--tt-color-green-dec-5: hsl(140, 100%, 9%);--tt-color-yellow-inc-5: hsl(50, 100%, 97%);--tt-color-yellow-inc-4: hsl(50, 100%, 91%);--tt-color-yellow-inc-3: hsl(50, 100%, 84%);--tt-color-yellow-inc-2: hsl(50, 100%, 77%);--tt-color-yellow-inc-1: hsl(50, 100%, 68%);--tt-color-yellow-base: hsl(52, 100%, 50%);--tt-color-yellow-dec-1: hsl(52, 100%, 41%);--tt-color-yellow-dec-2: hsl(52, 100%, 32%);--tt-color-yellow-dec-3: hsl(52, 100%, 24%);--tt-color-yellow-dec-4: hsl(51, 100%, 16%);--tt-color-yellow-dec-5: hsl(50, 100%, 9%);--tt-color-red-inc-5: hsl(11, 100%, 96%);--tt-color-red-inc-4: hsl(11, 100%, 88%);--tt-color-red-inc-3: hsl(10, 100%, 80%);--tt-color-red-inc-2: hsl(9, 100%, 73%);--tt-color-red-inc-1: hsl(7, 100%, 64%);--tt-color-red-base: hsl(7, 100%, 54%);--tt-color-red-dec-1: hsl(7, 100%, 41%);--tt-color-red-dec-2: hsl(5, 100%, 32%);--tt-color-red-dec-3: hsl(4, 100%, 24%);--tt-color-red-dec-4: hsl(3, 100%, 16%);--tt-color-red-dec-5: hsl(1, 100%, 9%);--white: #ffffff;--black: #0e0e11;--transparent: rgba(255, 255, 255, 0);--tt-shadow-elevated-md: 0px 16px 48px 0px rgba(17, 24, 39, .04), 0px 12px 24px 0px rgba(17, 24, 39, .04), 0px 6px 8px 0px rgba(17, 24, 39, .02), 0px 2px 3px 0px rgba(17, 24, 39, .02);--tt-radius-xxs: .125rem;--tt-radius-xs: .25rem;--tt-radius-sm: .375rem;--tt-radius-md: .5rem;--tt-radius-lg: .75rem;--tt-radius-xl: 1rem;--tt-transition-duration-short: .1s;--tt-transition-duration-default: .2s;--tt-transition-duration-long: .64s;--tt-transition-easing-default: cubic-bezier(.46, .03, .52, .96);--tt-transition-easing-cubic: cubic-bezier(.65, .05, .36, 1);--tt-transition-easing-quart: cubic-bezier(.77, 0, .18, 1);--tt-transition-easing-circ: cubic-bezier(.79, .14, .15, .86);--tt-transition-easing-back: cubic-bezier(.68, -.55, .27, 1.55);--tt-accent-contrast: 8%;--tt-destructive-contrast: 8%;--tt-foreground-contrast: 8%}:root,:root *,:root :before,:root :after{box-sizing:border-box}:root{--tt-bg-color: var(--white);--tt-text-default: var(--tt-gray-light-900);--tt-border-color: var(--tt-gray-light-a-200);--tt-border-color-tint: var(--tt-gray-light-a-100);--tt-sidebar-bg-color: var(--tt-gray-light-100);--tt-scrollbar-color: var(--tt-gray-light-a-200);--tt-cursor-color: var(--tt-brand-color-500);--tt-selection-color: rgba(244, 180, 182, .2);--tt-card-bg-color: var(--white);--tt-card-border-color: var(--tt-gray-light-a-100)}.dark{--tt-bg-color: var(--black);--tt-text-default: var(--tt-gray-dark-900);--tt-border-color: var(--tt-gray-dark-a-200);--tt-border-color-tint: var(--tt-gray-dark-a-100);--tt-sidebar-bg-color: var(--tt-gray-dark-100);--tt-scrollbar-color: var(--tt-gray-dark-a-200);--tt-cursor-color: var(--tt-brand-color-400);--tt-selection-color: rgba(235, 116, 126, .2);--tt-card-bg-color: var(--tt-gray-dark-50);--tt-card-border-color: var(--tt-gray-dark-a-50);--tt-shadow-elevated-md: 0px 16px 48px 0px rgba(0, 0, 0, .5), 0px 12px 24px 0px rgba(0, 0, 0, .24), 0px 6px 8px 0px rgba(0, 0, 0, .22), 0px 2px 3px 0px rgba(0, 0, 0, .12)}:root{--tt-color-text-gray: hsl(45, 2%, 46%);--tt-color-text-brown: hsl(19, 31%, 47%);--tt-color-text-orange: hsl(30, 89%, 45%);--tt-color-text-yellow: hsl(38, 62%, 49%);--tt-color-text-green: hsl(148, 32%, 39%);--tt-color-text-blue: hsl(202, 54%, 43%);--tt-color-text-purple: hsl(274, 32%, 54%);--tt-color-text-pink: hsl(328, 49%, 53%);--tt-color-text-red: var(--tt-brand-color-500);--tt-color-text-gray-contrast: hsla(39, 26%, 26%, .15);--tt-color-text-brown-contrast: hsla(18, 43%, 69%, .35);--tt-color-text-orange-contrast: hsla(24, 73%, 55%, .27);--tt-color-text-yellow-contrast: hsla(44, 82%, 59%, .39);--tt-color-text-green-contrast: hsla(126, 29%, 60%, .27);--tt-color-text-blue-contrast: hsla(202, 54%, 59%, .27);--tt-color-text-purple-contrast: hsla(274, 37%, 64%, .27);--tt-color-text-pink-contrast: hsla(331, 60%, 71%, .27);--tt-color-text-red-contrast: hsla(8, 79%, 79%, .4)}.dark{--tt-color-text-gray: hsl(0, 0%, 61%);--tt-color-text-brown: hsl(18, 35%, 58%);--tt-color-text-orange: hsl(25, 53%, 53%);--tt-color-text-yellow: hsl(36, 54%, 55%);--tt-color-text-green: hsl(145, 32%, 47%);--tt-color-text-blue: hsl(202, 64%, 52%);--tt-color-text-purple: hsl(270, 55%, 62%);--tt-color-text-pink: hsl(329, 57%, 58%);--tt-color-text-red: var(--tt-brand-color-400);--tt-color-text-gray-contrast: hsla(0, 0%, 100%, .09);--tt-color-text-brown-contrast: hsla(17, 45%, 50%, .25);--tt-color-text-orange-contrast: hsla(27, 82%, 53%, .2);--tt-color-text-yellow-contrast: hsla(35, 49%, 47%, .2);--tt-color-text-green-contrast: hsla(151, 55%, 39%, .2);--tt-color-text-blue-contrast: hsla(202, 54%, 43%, .2);--tt-color-text-purple-contrast: hsla(271, 56%, 60%, .18);--tt-color-text-pink-contrast: hsla(331, 67%, 58%, .22);--tt-color-text-red-contrast: hsla(0, 67%, 60%, .25)}:root{--tt-color-highlight-yellow: #fef9c3;--tt-color-highlight-green: #dcfce7;--tt-color-highlight-blue: #e0f2fe;--tt-color-highlight-purple: #f3e8ff;--tt-color-highlight-red: #ffe4e6;--tt-color-highlight-gray: #f8f8f7;--tt-color-highlight-brown: #f4eeee;--tt-color-highlight-orange: #fbecdd;--tt-color-highlight-pink: #fcf1f6;--tt-color-highlight-yellow-contrast: #fbe604;--tt-color-highlight-green-contrast: #c7fad8;--tt-color-highlight-blue-contrast: #ceeafd;--tt-color-highlight-purple-contrast: #e4ccff;--tt-color-highlight-red-contrast: #ffccd0;--tt-color-highlight-gray-contrast: rgba(84, 72, 49, .15);--tt-color-highlight-brown-contrast: rgba(210, 162, 141, .35);--tt-color-highlight-orange-contrast: rgba(224, 124, 57, .27);--tt-color-highlight-pink-contrast: rgba(225, 136, 179, .27)}.dark{--tt-color-highlight-yellow: #6b6524;--tt-color-highlight-green: #509568;--tt-color-highlight-blue: #6e92aa;--tt-color-highlight-purple: #583e74;--tt-color-highlight-red: #743e42;--tt-color-highlight-gray: #2f2f2f;--tt-color-highlight-brown: #4a3228;--tt-color-highlight-orange: #5c3b23;--tt-color-highlight-pink: #4e2c3c;--tt-color-highlight-yellow-contrast: #58531e;--tt-color-highlight-green-contrast: #47855d;--tt-color-highlight-blue-contrast: #5e86a1;--tt-color-highlight-purple-contrast: #4c3564;--tt-color-highlight-red-contrast: #643539;--tt-color-highlight-gray-contrast: rgba(255, 255, 255, .094);--tt-color-highlight-brown-contrast: rgba(184, 101, 69, .25);--tt-color-highlight-orange-contrast: rgba(233, 126, 37, .2);--tt-color-highlight-pink-contrast: rgba(220, 76, 145, .22)}body .ProseMirror{flex:1;outline:none;word-break:break-all;line-height:1.6;font-size:var(--font-base);--white: #fff;--black: #2e2b29;--gray-1: rgba(61, 37, 20, .05);--gray-2: rgba(61, 37, 20, .08);--gray-3: rgba(61, 37, 20, .12);--gray-4: rgba(53, 38, 28, .3);--gray-5: rgba(28, 25, 23, .6);--green: #22c55e;--purple: #6a00f5;--purple-contrast: #5800cc;--purple-light: rgba(88, 5, 255, .05);--yellow-contrast: #facc15;--yellow: rgba(250, 204, 21, .4);--yellow-light: #fffae5;--red: #ff5c33;--red-light: #ffebe5;--shadow: 0px 12px 33px 0px rgba(0, 0, 0, .06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, .04);--tt-collaboration-carets-label: var(--tt-gray-light-900);--link-text-color: var(--tt-brand-color-500);--thread-text: var(--tt-gray-light-900);--placeholder-color: var(--tt-gray-light-a-400);--thread-bg-color: var(--tt-color-yellow-inc-2);--horizontal-rule-color: var(--tt-gray-light-a-200);--blockquote-bg-color: var(--tt-gray-light-900);--tiptap-ai-insertion-color: var(--tt-brand-color-600);--tt-inline-code-bg-color: var(--tt-gray-light-a-100);--tt-inline-code-text-color: var(--tt-gray-light-a-700);--tt-inline-code-border-color: var(--tt-gray-light-a-200);--tt-codeblock-bg: var(--tt-gray-light-a-50);--tt-codeblock-text: var(--tt-gray-light-a-800);--tt-codeblock-border: var(--tt-gray-light-a-200);--tt-checklist-bg-color: var(--tt-gray-light-a-100);--tt-checklist-bg-active-color: var(--tt-gray-light-a-900);--tt-checklist-border-color: var(--tt-gray-light-a-200);--tt-checklist-border-active-color: var(--tt-gray-light-a-900);--tt-checklist-check-icon-color: var(--white);--tt-checklist-text-active: var(--tt-gray-light-a-500);white-space:pre-wrap;caret-color:var(--tt-cursor-color)}body .ProseMirror :first-child{margin-top:0}body .ProseMirror:not(.readonly):not(.ProseMirror-hideselection) ::selection{background-color:var(--tt-selection-color)}body .ProseMirror .selection{display:inline;background-color:var(--tt-selection-color)}body .ProseMirror p{font-size:1rem;line-height:1.6}body .ProseMirror video{width:100%}body .ProseMirror ol{list-style:auto}body .ProseMirror ol ol,body .ProseMirror ul{list-style:disc}body .ProseMirror ol,body .ProseMirror ul{padding-left:1.5em;margin:0!important}body .ProseMirror ol li p,body .ProseMirror ul li p{margin-top:0!important;margin-bottom:0!important}body .ProseMirror li::marker{text-align:start!important}body .ProseMirror h1,body .ProseMirror h2,body .ProseMirror h3,body .ProseMirror h4,body .ProseMirror h5,body .ProseMirror h6{line-height:1.1;margin-top:1rem;margin-bottom:1rem;text-wrap:pretty}body .ProseMirror h1{font-size:1.4rem}body .ProseMirror h2{font-size:1.2rem}body .ProseMirror h3{font-size:1.1rem}body .ProseMirror h4,body .ProseMirror h5,body .ProseMirror h6{font-size:1rem}body .ProseMirror a,body .ProseMirror .editor-link{color:var(--purple);text-decoration:underline;cursor:pointer;transition:color .2s ease}body .ProseMirror a:hover,body .ProseMirror .editor-link:hover{color:var(--purple-contrast);text-decoration:underline}body .ProseMirror code{background-color:#ffe5e8;border-radius:.4rem;color:#c02537;padding:2px 4px;display:inline-block}body .ProseMirror .ProseMirror-selectednode:not(img):not(pre):not(.react-renderer){border-radius:var(--tt-radius-md);background-color:var(--tt-selection-color)}body .ProseMirror pre{background-color:var(--tt-codeblock-bg);color:var(--tt-codeblock-text);border:1px solid var(--tt-codeblock-border);margin-top:1.5em;margin-bottom:1.5em;padding:1em;font-size:1rem;border-radius:.375rem}body .ProseMirror pre code{background-color:transparent;border:none;border-radius:0;color:inherit;padding:0;display:block}body .ProseMirror pre.is-empty:before{left:1.15em!important;top:.8em!important}body .ProseMirror blockquote{border-left:3px solid var(--gray-3);margin:1.5rem 0;padding-left:1rem}body .ProseMirror hr{border:none;border-top:1px solid var(--gray-2);margin:2rem 0}body .ProseMirror p.is-editor-empty:first-child:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none;margin-left:2px}body .ProseMirror p.is-empty:before,body .ProseMirror h1.is-empty:before,body .ProseMirror h2.is-empty:before,body .ProseMirror h3.is-empty:before,body .ProseMirror h4.is-empty:before,body .ProseMirror h5.is-empty:before,body .ProseMirror h6.is-empty:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}body .ProseMirror table{border-collapse:collapse;margin:0;overflow:hidden;table-layout:fixed;width:100%}body .ProseMirror table td,body .ProseMirror table th{border:1px solid var(--gray-3);box-sizing:border-box;min-width:1em;padding:6px 8px;position:relative;vertical-align:top}body .ProseMirror table td>*,body .ProseMirror table th>*{margin-bottom:0}body .ProseMirror table th{background-color:var(--gray-1);font-weight:700;text-align:left}body .ProseMirror table .selectedCell:after{background:var(--gray-2);content:"";left:0;right:0;top:0;bottom:0;pointer-events:none;position:absolute;z-index:2}body .ProseMirror table .column-resize-handle{background-color:var(--purple);bottom:-2px;pointer-events:none;position:absolute;right:-2px;top:0;width:4px}body .ProseMirror .tableWrapper{margin:1.5rem 0;overflow-x:auto}body .ProseMirror.resize-cursor{cursor:ew-resize;cursor:col-resize}body .ProseMirror img{max-width:100%}body .ProseMirror .mention,body .ProseMirror .hash-tag{color:#c02537;padding:0 .3em}body .ProseMirror .custom-content{color:var(--custom-content-color, #000);padding:0 .3em;cursor:pointer;transition:color .2s ease}body .ProseMirror .custom-content:hover{color:var(--custom-content-hover-color, #c02537)}.animation-indent--right{animation:indent-right .5s cubic-bezier(.68,-.55,.27,1.55) 1 alternate-reverse}@keyframes indent-right{0%{transform:translate(0)}to{transform:translate(12px)}}.tiptap-editor-container{display:flex;flex-direction:column;border:1px solid var(--gray-3);border-radius:8px;overflow:hidden;height:100%;background-color:var(--white)}.dark .tiptap-editor-container{background-color:var(--black);border-color:var(--gray-4)}.tiptap-editor-container.list{height:auto;border:none;background:transparent}.tiptap-editor-container.list .tiptap-editor-content-wrapper{display:block;height:auto;overflow:visible;padding:0}.tiptap-editor-container.list .tiptap-editor-content-wrapper .ProseMirror{height:auto;overflow:visible}.tiptap-editor-container .tiptap-editor-toolbar{flex:0 0 auto;border-bottom:1px solid var(--gray-3);padding:4px;background-color:var(--gray-1);display:flex;flex-wrap:wrap;gap:4px}.dark .tiptap-editor-container .tiptap-editor-toolbar{border-bottom-color:var(--gray-4);background-color:var(--gray-2)}.tiptap-editor-container .tiptap-editor-content-wrapper{flex:1 1 auto;overflow-y:auto;position:relative;padding:16px 8px;background-color:var(--white);display:flex;justify-content:center}.dark .tiptap-editor-container .tiptap-editor-content-wrapper{background-color:var(--black)}.tiptap-editor-container .tiptap-editor-content-wrapper .ProseMirror{width:100%}.tiptap-dropdown-menu .el-dropdown-menu__item.is-active,.tiptap-dropdown-menu .el-dropdown-menu__item:hover,.tiptap-dropdown-menu .el-dropdown-menu__item:focus{color:var(--tt-brand-color-500)!important;background-color:var(--tt-brand-color-50)!important}.dark .tiptap-dropdown-menu .el-dropdown-menu__item.is-active,.dark .tiptap-dropdown-menu .el-dropdown-menu__item:hover,.dark .tiptap-dropdown-menu .el-dropdown-menu__item:focus{color:var(--tt-brand-color-400)!important;background-color:var(--tt-brand-color-900)!important}.tiptap-dropdown-menu-item-content{display:flex;align-items:center;gap:8px;width:100%}.tiptap-dropdown-menu-item-label{font-size:10px;font-weight:700;color:var(--tt-text-muted);padding:1px 4px;border-radius:4px;min-width:20px;text-align:center}.dark .tiptap-dropdown-menu-item-label{background-color:var(--tt-gray-dark-200)}.tiptap-heading-trigger .tiptap-button-icon-chevron,.tiptap-list-dropdown-trigger .tiptap-button-icon-chevron,.tiptap-table-dropdown-trigger .tiptap-button-icon-chevron{width:12px;height:12px;margin-left:2px;color:var(--tt-text-muted)}.tiptap-dropdown-menu-item-icon{width:16px;height:16px;color:var(--tt-text-muted)}

package/es/rich-text-editor/menu-system/components/_atomic.css

@@ -44,3 +44,5 @@
 
 
 
+
+

package/es/rich-text-editor/menu-system/components/text-color-button.d.ts

@@ -0,0 +1,70 @@
+import { type PropType } from 'vue';
+import '../styles/text-color-button.less';
+export declare const TextColorButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+    textColor: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideWhenUnavailable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    onApplied: {
+        type: PropType<(params: {
+            color: string;
+            label: string;
+        }) => void>;
+    };
+    isDefault: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+    textColor: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideWhenUnavailable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    onApplied: {
+        type: PropType<(params: {
+            color: string;
+            label: string;
+        }) => void>;
+    };
+    isDefault: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    label: string;
+    className: string;
+    hideWhenUnavailable: boolean;
+    isDefault: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/rich-text-editor/menu-system/components/text-color-button.js

@@ -0,0 +1,128 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import "./_atomic.css";
+import { defineComponent } from "vue";
+import { useTextColor } from "../hooks/use-text-color";
+import { Button } from "../primitives/button";
+import { cn } from "../utils/tiptap-utils";
+import "../styles/text-color-button.css";
+const TextColorButton = defineComponent({
+  name: "TextColorButton",
+  props: {
+    editor: {
+      type: Object,
+      required: true
+    },
+    textColor: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    hideWhenUnavailable: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: ""
+    },
+    onApplied: {
+      type: Function
+    },
+    isDefault: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    attrs
+  }) {
+    const {
+      isVisible,
+      canColor,
+      isActive
+    } = useTextColor({
+      editor: props.editor,
+      textColor: props.textColor,
+      label: props.label,
+      hideWhenUnavailable: props.hideWhenUnavailable
+    });
+    const handleClick = () => {
+      const editor = props.editor && "value" in props.editor ? props.editor.value : props.editor;
+      if (!editor || !canColor.value)
+        return;
+      if (props.isDefault) {
+        setTimeout(() => {
+          var _a;
+          editor.chain().focus().unsetColor().run();
+          (_a = props.onApplied) == null ? void 0 : _a.call(props, {
+            color: "",
+            label: props.label || "\u9ED8\u8BA4\u989C\u8272"
+          });
+        }, 0);
+      } else {
+        setTimeout(() => {
+          var _a;
+          const success = editor.chain().focus().setColor(props.textColor).run();
+          if (success) {
+            (_a = props.onApplied) == null ? void 0 : _a.call(props, {
+              color: props.textColor,
+              label: props.label
+            });
+          }
+        }, 0);
+      }
+    };
+    return () => {
+      if (!isVisible.value)
+        return null;
+      return _createVNode(Button, _mergeProps({
+        "type": "button",
+        "disabled": !canColor.value,
+        "data-style": "ghost",
+        "data-active-state": isActive.value ? "on" : "off",
+        "role": "button",
+        "tabindex": -1,
+        "aria-label": props.label,
+        "aria-pressed": isActive.value,
+        "tooltip": props.label,
+        "onClick": handleClick,
+        "class": cn("tiptap-text-color-button", props.className),
+        "style": __spreadProps(__spreadValues({}, attrs.style || {}), {
+          "--text-color": props.textColor
+        })
+      }, attrs), {
+        default: () => [_createVNode("div", {
+          "class": cn("tiptap-button-text-color", props.isDefault ? "tiptap-button-text-color--default" : ""),
+          "style": {
+            "--text-color": props.textColor
+          }
+        }, null)]
+      });
+    };
+  }
+});
+export {
+  TextColorButton
+};

package/es/rich-text-editor/menu-system/components/text-color-popover.d.ts

@@ -0,0 +1,32 @@
+import { type PropType } from 'vue';
+import '../styles/text-color-popover.less';
+export declare const TextColorPopover: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+    hideWhenUnavailable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+    hideWhenUnavailable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    className: string;
+    hideWhenUnavailable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/rich-text-editor/menu-system/components/text-color-popover.js

@@ -0,0 +1,127 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import "./_atomic.css";
+import { defineComponent, ref } from "vue";
+import { useTextColor, TEXT_COLORS } from "../hooks/use-text-color";
+import { TextColorButton } from "./text-color-button";
+import { Button } from "../primitives/button";
+import { ElPopover } from "element-plus";
+import { TypeIcon, BanIcon } from "../icons";
+import { cn } from "../utils/tiptap-utils";
+import "../styles/text-color-popover.css";
+const TextColorPopover = defineComponent({
+  name: "TextColorPopover",
+  props: {
+    editor: {
+      type: Object,
+      required: true
+    },
+    hideWhenUnavailable: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props, {
+    attrs
+  }) {
+    const {
+      isVisible,
+      canColor,
+      isActive,
+      label,
+      currentColor,
+      handleRemoveColor
+    } = useTextColor({
+      editor: props.editor,
+      hideWhenUnavailable: props.hideWhenUnavailable
+    });
+    const isOpen = ref(false);
+    const customColor = ref("#000000");
+    const showCustomPicker = ref(false);
+    const getEditor = () => {
+      const editor = props.editor;
+      return editor && "value" in editor ? editor.value : editor;
+    };
+    const handleCustomColorChange = (color) => {
+      if (!color)
+        return;
+      customColor.value = color;
+      const editor = getEditor();
+      if (editor && canColor.value) {
+        editor.chain().focus().setColor(color).run();
+      }
+    };
+    const handleCustomColorConfirm = () => {
+      isOpen.value = false;
+      showCustomPicker.value = false;
+    };
+    return () => {
+      if (!isVisible.value)
+        return null;
+      const activeColor = currentColor.value || "var(--tt-text-default)";
+      const trigger = _createVNode(Button, _mergeProps({
+        "type": "button",
+        "disabled": !canColor.value,
+        "data-style": "ghost",
+        "data-active-state": isActive.value ? "on" : "off",
+        "role": "button",
+        "tooltip": label,
+        "class": cn("tiptap-text-color-trigger", props.className)
+      }, attrs), {
+        default: () => [_createVNode(TypeIcon, {
+          "class": "tiptap-button-icon"
+        }, null), _createVNode("span", {
+          "class": "tiptap-text-color-trigger-bar",
+          "style": {
+            backgroundColor: activeColor
+          }
+        }, null)]
+      });
+      return _createVNode(ElPopover, {
+        "trigger": "click",
+        "width": "auto",
+        "popper-class": "tiptap-text-color-popover",
+        "visible": isOpen.value,
+        "onUpdate:visible": ($event) => isOpen.value = $event
+      }, {
+        reference: () => trigger,
+        default: () => _createVNode("div", {
+          "class": "tiptap-text-color-popover-content"
+        }, [_createVNode("div", {
+          "class": "tiptap-text-color-grid"
+        }, [TEXT_COLORS.filter((c) => !c.isDefault).map((color) => _createVNode(TextColorButton, {
+          "key": color.value,
+          "editor": props.editor,
+          "textColor": color.value,
+          "label": color.label,
+          "onApplied": () => {
+            isOpen.value = false;
+          }
+        }, null))]), _createVNode("div", {
+          "class": "tiptap-text-color-vertical-separator"
+        }, null), _createVNode("div", {
+          "class": "tiptap-text-color-actions"
+        }, [_createVNode(Button, {
+          "type": "button",
+          "data-style": "ghost",
+          "onClick": () => {
+            handleRemoveColor();
+            isOpen.value = false;
+          },
+          "tooltip": "\u79FB\u9664\u6587\u5B57\u989C\u8272",
+          "class": "tiptap-text-color-remove-button"
+        }, {
+          default: () => [_createVNode(BanIcon, {
+            "class": "tiptap-button-icon"
+          }, null)]
+        })])])
+      });
+    };
+  }
+});
+export {
+  TextColorPopover
+};

package/es/rich-text-editor/menu-system/hooks/use-text-color.d.ts

@@ -0,0 +1,45 @@
+import type { Editor } from '@tiptap/vue-3';
+export declare const TEXT_COLORS: ({
+    label: string;
+    value: string;
+    isDefault: boolean;
+} | {
+    label: string;
+    value: string;
+    isDefault?: undefined;
+})[];
+export type TextColor = (typeof TEXT_COLORS)[number];
+export declare function canSetTextColor(editor: Editor | null): boolean;
+export declare function isTextColorActive(editor: Editor | null, color?: string): boolean;
+export declare function removeTextColor(editor: Editor | null): boolean;
+export declare function useTextColor(config: {
+    editor: any;
+    textColor?: string;
+    label?: string;
+    hideWhenUnavailable?: boolean;
+    onApplied?: (params: {
+        color: string;
+        label: string;
+    }) => void;
+}): {
+    isVisible: import("vue").Ref<boolean, boolean>;
+    isActive: import("vue").Ref<boolean, boolean>;
+    canColor: import("vue").Ref<boolean, boolean>;
+    currentColor: import("vue").Ref<string, string>;
+    handleSetColor: (color: string, colorLabel: string) => void;
+    handleRemoveColor: () => void;
+    label: string;
+    Icon: import("vue").Raw<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        className: string;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+};

package/es/rich-text-editor/menu-system/hooks/use-text-color.js

@@ -0,0 +1,132 @@
+import { ref, watch, onBeforeUnmount, markRaw } from "vue";
+import { isMarkInSchema, isNodeTypeSelected } from "../utils/tiptap-utils";
+import { TypeIcon } from "../icons";
+const TEXT_COLORS = [
+  {
+    label: "\u9ED8\u8BA4\u989C\u8272",
+    value: "var(--tt-text-default)",
+    isDefault: true
+  },
+  {
+    label: "\u7EA2\u8272",
+    value: "var(--tt-color-text-red)"
+  },
+  {
+    label: "\u9EC4\u8272",
+    value: "var(--tt-color-text-yellow)"
+  },
+  {
+    label: "\u7EFF\u8272",
+    value: "var(--tt-color-text-green)"
+  },
+  {
+    label: "\u84DD\u8272",
+    value: "var(--tt-color-text-blue)"
+  },
+  {
+    label: "\u7D2B\u8272",
+    value: "var(--tt-color-text-purple)"
+  }
+];
+function canSetTextColor(editor) {
+  if (!editor || !editor.isEditable)
+    return false;
+  if (isNodeTypeSelected(editor, ["image"]))
+    return false;
+  return editor.can().setMark("textStyle");
+}
+function isTextColorActive(editor, color) {
+  if (!editor || !editor.isEditable)
+    return false;
+  if (color) {
+    return editor.isActive("textStyle", { color });
+  }
+  return editor.isActive("textStyle");
+}
+function removeTextColor(editor) {
+  if (!editor || !editor.isEditable)
+    return false;
+  return editor.chain().focus().unsetColor().run();
+}
+function useTextColor(config) {
+  const { textColor, label, hideWhenUnavailable = false, onApplied } = config;
+  const isVisible = ref(true);
+  const isActive = ref(false);
+  const canColor = ref(false);
+  const currentColor = ref("");
+  const getEditor = () => {
+    const editor = config.editor;
+    return editor && "value" in editor ? editor.value : editor;
+  };
+  const updateState = () => {
+    const editor = getEditor();
+    if (!editor || !editor.isEditable) {
+      isVisible.value = false;
+      isActive.value = false;
+      canColor.value = false;
+      currentColor.value = "";
+      return;
+    }
+    isActive.value = isTextColorActive(editor, textColor);
+    canColor.value = canSetTextColor(editor);
+    if (!isMarkInSchema("textStyle", editor)) {
+      isVisible.value = false;
+    } else if (hideWhenUnavailable) {
+      isVisible.value = canColor.value;
+    } else {
+      isVisible.value = true;
+    }
+    const attrs = editor.getAttributes("textStyle");
+    currentColor.value = (attrs == null ? void 0 : attrs.color) || "";
+  };
+  watch(
+    () => getEditor(),
+    (editor) => {
+      if (!editor)
+        return;
+      updateState();
+      editor.on("selectionUpdate", updateState);
+      editor.on("transaction", updateState);
+      onBeforeUnmount(() => {
+        editor.off("selectionUpdate", updateState);
+        editor.off("transaction", updateState);
+      });
+    },
+    { immediate: true }
+  );
+  const handleSetColor = (color, colorLabel) => {
+    const editor = getEditor();
+    if (!editor || !canColor.value)
+      return;
+    setTimeout(() => {
+      const success = editor.chain().focus().setColor(color).run();
+      if (success) {
+        onApplied == null ? void 0 : onApplied({ color, label: colorLabel });
+      }
+    }, 0);
+  };
+  const handleRemoveColor = () => {
+    const editor = getEditor();
+    const success = removeTextColor(editor);
+    if (success) {
+      onApplied == null ? void 0 : onApplied({ color: "", label: "\u79FB\u9664\u6587\u5B57\u989C\u8272" });
+    }
+  };
+  return {
+    isVisible,
+    isActive,
+    canColor,
+    currentColor,
+    handleSetColor,
+    handleRemoveColor,
+    label: label || "\u6587\u5B57\u989C\u8272",
+    Icon: markRaw(TypeIcon)
+  };
+}
+export {
+  TEXT_COLORS,
+  canSetTextColor,
+  isTextColorActive,
+  removeTextColor,
+  useTextColor
+};

package/es/rich-text-editor/menu-system/icons/index.d.ts

@@ -557,3 +557,16 @@ export declare const TableIcon: import("vue").DefineComponent<import("vue").Extr
 }>> & Readonly<{}>, {
     className: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const TypeIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    className: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;