@cgboiler/biz-basic 1.0.69 → 1.0.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/rich-text-editor/RichTextEditor.js +3 -0
- package/es/rich-text-editor/index.css +1 -1
- package/es/rich-text-editor/menu-system/components/_atomic.css +2 -0
- package/es/rich-text-editor/menu-system/components/text-color-button.d.ts +70 -0
- package/es/rich-text-editor/menu-system/components/text-color-button.js +128 -0
- package/es/rich-text-editor/menu-system/components/text-color-popover.d.ts +32 -0
- package/es/rich-text-editor/menu-system/components/text-color-popover.js +127 -0
- package/es/rich-text-editor/menu-system/hooks/use-text-color.d.ts +45 -0
- package/es/rich-text-editor/menu-system/hooks/use-text-color.js +132 -0
- package/es/rich-text-editor/menu-system/icons/index.d.ts +13 -0
- package/es/rich-text-editor/menu-system/icons/index.js +22 -0
- package/es/rich-text-editor/menu-system/styles/button-group.css +1 -1
- package/es/rich-text-editor/menu-system/styles/button.css +1 -1
- package/es/rich-text-editor/menu-system/styles/card.css +1 -1
- package/es/rich-text-editor/menu-system/styles/color-highlight-button.css +1 -1
- package/es/rich-text-editor/menu-system/styles/color-highlight-popover.css +1 -1
- package/es/rich-text-editor/menu-system/styles/dropdown-menu.css +1 -1
- package/es/rich-text-editor/menu-system/styles/image-upload-node.css +1 -1
- package/es/rich-text-editor/menu-system/styles/input.css +1 -1
- package/es/rich-text-editor/menu-system/styles/link-popover.css +1 -1
- package/es/rich-text-editor/menu-system/styles/separator.css +1 -1
- package/es/rich-text-editor/menu-system/styles/simple-editor.css +1 -1
- package/es/rich-text-editor/menu-system/styles/text-color-button.css +1 -0
- package/es/rich-text-editor/menu-system/styles/text-color-button.less +63 -0
- package/es/rich-text-editor/menu-system/styles/text-color-popover.css +1 -0
- package/es/rich-text-editor/menu-system/styles/text-color-popover.less +125 -0
- package/es/rich-text-editor/menu-system/styles/toolbar.css +1 -1
- package/es/rich-text-editor/menu-system/styles/variables.css +1 -1
- package/es/rich-text-editor/menu-system/styles/variables.less +4 -2
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/rich-text-editor/RichTextEditor.js +3 -0
- package/lib/rich-text-editor/index.css +1 -1
- package/lib/rich-text-editor/menu-system/components/_atomic.css +2 -0
- package/lib/rich-text-editor/menu-system/components/text-color-button.d.ts +70 -0
- package/lib/rich-text-editor/menu-system/components/text-color-button.js +145 -0
- package/lib/rich-text-editor/menu-system/components/text-color-popover.d.ts +32 -0
- package/lib/rich-text-editor/menu-system/components/text-color-popover.js +146 -0
- package/lib/rich-text-editor/menu-system/hooks/use-text-color.d.ts +45 -0
- package/lib/rich-text-editor/menu-system/hooks/use-text-color.js +151 -0
- package/lib/rich-text-editor/menu-system/icons/index.d.ts +13 -0
- package/lib/rich-text-editor/menu-system/icons/index.js +22 -0
- package/lib/rich-text-editor/menu-system/styles/button-group.css +1 -1
- package/lib/rich-text-editor/menu-system/styles/button.css +1 -1
- package/lib/rich-text-editor/menu-system/styles/card.css +1 -1
- package/lib/rich-text-editor/menu-system/styles/color-highlight-button.css +1 -1
- package/lib/rich-text-editor/menu-system/styles/color-highlight-popover.css +1 -1
- package/lib/rich-text-editor/menu-system/styles/dropdown-menu.css +1 -1
- package/lib/rich-text-editor/menu-system/styles/image-upload-node.css +1 -1
- package/lib/rich-text-editor/menu-system/styles/input.css +1 -1
- package/lib/rich-text-editor/menu-system/styles/link-popover.css +1 -1
- package/lib/rich-text-editor/menu-system/styles/separator.css +1 -1
- package/lib/rich-text-editor/menu-system/styles/simple-editor.css +1 -1
- package/lib/rich-text-editor/menu-system/styles/text-color-button.css +1 -0
- package/lib/rich-text-editor/menu-system/styles/text-color-button.less +63 -0
- package/lib/rich-text-editor/menu-system/styles/text-color-popover.css +1 -0
- package/lib/rich-text-editor/menu-system/styles/text-color-popover.less +125 -0
- package/lib/rich-text-editor/menu-system/styles/toolbar.css +1 -1
- package/lib/rich-text-editor/menu-system/styles/variables.css +1 -1
- package/lib/rich-text-editor/menu-system/styles/variables.less +4 -2
- package/package.json +1 -1
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { type PropType } from 'vue';
|
|
2
|
+
import '../styles/text-color-button.less';
|
|
3
|
+
export declare const TextColorButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
4
|
+
editor: {
|
|
5
|
+
type: PropType<any>;
|
|
6
|
+
required: true;
|
|
7
|
+
};
|
|
8
|
+
textColor: {
|
|
9
|
+
type: StringConstructor;
|
|
10
|
+
required: true;
|
|
11
|
+
};
|
|
12
|
+
label: {
|
|
13
|
+
type: StringConstructor;
|
|
14
|
+
default: string;
|
|
15
|
+
};
|
|
16
|
+
hideWhenUnavailable: {
|
|
17
|
+
type: BooleanConstructor;
|
|
18
|
+
default: boolean;
|
|
19
|
+
};
|
|
20
|
+
className: {
|
|
21
|
+
type: StringConstructor;
|
|
22
|
+
default: string;
|
|
23
|
+
};
|
|
24
|
+
onApplied: {
|
|
25
|
+
type: PropType<(params: {
|
|
26
|
+
color: string;
|
|
27
|
+
label: string;
|
|
28
|
+
}) => void>;
|
|
29
|
+
};
|
|
30
|
+
isDefault: {
|
|
31
|
+
type: BooleanConstructor;
|
|
32
|
+
default: boolean;
|
|
33
|
+
};
|
|
34
|
+
}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
35
|
+
editor: {
|
|
36
|
+
type: PropType<any>;
|
|
37
|
+
required: true;
|
|
38
|
+
};
|
|
39
|
+
textColor: {
|
|
40
|
+
type: StringConstructor;
|
|
41
|
+
required: true;
|
|
42
|
+
};
|
|
43
|
+
label: {
|
|
44
|
+
type: StringConstructor;
|
|
45
|
+
default: string;
|
|
46
|
+
};
|
|
47
|
+
hideWhenUnavailable: {
|
|
48
|
+
type: BooleanConstructor;
|
|
49
|
+
default: boolean;
|
|
50
|
+
};
|
|
51
|
+
className: {
|
|
52
|
+
type: StringConstructor;
|
|
53
|
+
default: string;
|
|
54
|
+
};
|
|
55
|
+
onApplied: {
|
|
56
|
+
type: PropType<(params: {
|
|
57
|
+
color: string;
|
|
58
|
+
label: string;
|
|
59
|
+
}) => void>;
|
|
60
|
+
};
|
|
61
|
+
isDefault: {
|
|
62
|
+
type: BooleanConstructor;
|
|
63
|
+
default: boolean;
|
|
64
|
+
};
|
|
65
|
+
}>> & Readonly<{}>, {
|
|
66
|
+
label: string;
|
|
67
|
+
className: string;
|
|
68
|
+
hideWhenUnavailable: boolean;
|
|
69
|
+
isDefault: boolean;
|
|
70
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
21
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
22
|
+
var __export = (target, all) => {
|
|
23
|
+
for (var name in all)
|
|
24
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
25
|
+
};
|
|
26
|
+
var __copyProps = (to, from, except, desc) => {
|
|
27
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
28
|
+
for (let key of __getOwnPropNames(from))
|
|
29
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
30
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
31
|
+
}
|
|
32
|
+
return to;
|
|
33
|
+
};
|
|
34
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
35
|
+
var stdin_exports = {};
|
|
36
|
+
__export(stdin_exports, {
|
|
37
|
+
TextColorButton: () => TextColorButton
|
|
38
|
+
});
|
|
39
|
+
module.exports = __toCommonJS(stdin_exports);
|
|
40
|
+
var import_vue = require("vue");
|
|
41
|
+
var import_atomic = require("./_atomic.css");
|
|
42
|
+
var import_vue2 = require("vue");
|
|
43
|
+
var import_use_text_color = require("../hooks/use-text-color");
|
|
44
|
+
var import_button = require("../primitives/button");
|
|
45
|
+
var import_tiptap_utils = require("../utils/tiptap-utils");
|
|
46
|
+
var import_text_color_button = require("../styles/text-color-button.css");
|
|
47
|
+
const TextColorButton = (0, import_vue2.defineComponent)({
|
|
48
|
+
name: "TextColorButton",
|
|
49
|
+
props: {
|
|
50
|
+
editor: {
|
|
51
|
+
type: Object,
|
|
52
|
+
required: true
|
|
53
|
+
},
|
|
54
|
+
textColor: {
|
|
55
|
+
type: String,
|
|
56
|
+
required: true
|
|
57
|
+
},
|
|
58
|
+
label: {
|
|
59
|
+
type: String,
|
|
60
|
+
default: ""
|
|
61
|
+
},
|
|
62
|
+
hideWhenUnavailable: {
|
|
63
|
+
type: Boolean,
|
|
64
|
+
default: false
|
|
65
|
+
},
|
|
66
|
+
className: {
|
|
67
|
+
type: String,
|
|
68
|
+
default: ""
|
|
69
|
+
},
|
|
70
|
+
onApplied: {
|
|
71
|
+
type: Function
|
|
72
|
+
},
|
|
73
|
+
isDefault: {
|
|
74
|
+
type: Boolean,
|
|
75
|
+
default: false
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
setup(props, {
|
|
79
|
+
attrs
|
|
80
|
+
}) {
|
|
81
|
+
const {
|
|
82
|
+
isVisible,
|
|
83
|
+
canColor,
|
|
84
|
+
isActive
|
|
85
|
+
} = (0, import_use_text_color.useTextColor)({
|
|
86
|
+
editor: props.editor,
|
|
87
|
+
textColor: props.textColor,
|
|
88
|
+
label: props.label,
|
|
89
|
+
hideWhenUnavailable: props.hideWhenUnavailable
|
|
90
|
+
});
|
|
91
|
+
const handleClick = () => {
|
|
92
|
+
const editor = props.editor && "value" in props.editor ? props.editor.value : props.editor;
|
|
93
|
+
if (!editor || !canColor.value)
|
|
94
|
+
return;
|
|
95
|
+
if (props.isDefault) {
|
|
96
|
+
setTimeout(() => {
|
|
97
|
+
var _a;
|
|
98
|
+
editor.chain().focus().unsetColor().run();
|
|
99
|
+
(_a = props.onApplied) == null ? void 0 : _a.call(props, {
|
|
100
|
+
color: "",
|
|
101
|
+
label: props.label || "\u9ED8\u8BA4\u989C\u8272"
|
|
102
|
+
});
|
|
103
|
+
}, 0);
|
|
104
|
+
} else {
|
|
105
|
+
setTimeout(() => {
|
|
106
|
+
var _a;
|
|
107
|
+
const success = editor.chain().focus().setColor(props.textColor).run();
|
|
108
|
+
if (success) {
|
|
109
|
+
(_a = props.onApplied) == null ? void 0 : _a.call(props, {
|
|
110
|
+
color: props.textColor,
|
|
111
|
+
label: props.label
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
}, 0);
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
return () => {
|
|
118
|
+
if (!isVisible.value)
|
|
119
|
+
return null;
|
|
120
|
+
return (0, import_vue.createVNode)(import_button.Button, (0, import_vue.mergeProps)({
|
|
121
|
+
"type": "button",
|
|
122
|
+
"disabled": !canColor.value,
|
|
123
|
+
"data-style": "ghost",
|
|
124
|
+
"data-active-state": isActive.value ? "on" : "off",
|
|
125
|
+
"role": "button",
|
|
126
|
+
"tabindex": -1,
|
|
127
|
+
"aria-label": props.label,
|
|
128
|
+
"aria-pressed": isActive.value,
|
|
129
|
+
"tooltip": props.label,
|
|
130
|
+
"onClick": handleClick,
|
|
131
|
+
"class": (0, import_tiptap_utils.cn)("tiptap-text-color-button", props.className),
|
|
132
|
+
"style": __spreadProps(__spreadValues({}, attrs.style || {}), {
|
|
133
|
+
"--text-color": props.textColor
|
|
134
|
+
})
|
|
135
|
+
}, attrs), {
|
|
136
|
+
default: () => [(0, import_vue.createVNode)("div", {
|
|
137
|
+
"class": (0, import_tiptap_utils.cn)("tiptap-button-text-color", props.isDefault ? "tiptap-button-text-color--default" : ""),
|
|
138
|
+
"style": {
|
|
139
|
+
"--text-color": props.textColor
|
|
140
|
+
}
|
|
141
|
+
}, null)]
|
|
142
|
+
});
|
|
143
|
+
};
|
|
144
|
+
}
|
|
145
|
+
});
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { type PropType } from 'vue';
|
|
2
|
+
import '../styles/text-color-popover.less';
|
|
3
|
+
export declare const TextColorPopover: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
4
|
+
editor: {
|
|
5
|
+
type: PropType<any>;
|
|
6
|
+
required: true;
|
|
7
|
+
};
|
|
8
|
+
hideWhenUnavailable: {
|
|
9
|
+
type: BooleanConstructor;
|
|
10
|
+
default: boolean;
|
|
11
|
+
};
|
|
12
|
+
className: {
|
|
13
|
+
type: StringConstructor;
|
|
14
|
+
default: string;
|
|
15
|
+
};
|
|
16
|
+
}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
17
|
+
editor: {
|
|
18
|
+
type: PropType<any>;
|
|
19
|
+
required: true;
|
|
20
|
+
};
|
|
21
|
+
hideWhenUnavailable: {
|
|
22
|
+
type: BooleanConstructor;
|
|
23
|
+
default: boolean;
|
|
24
|
+
};
|
|
25
|
+
className: {
|
|
26
|
+
type: StringConstructor;
|
|
27
|
+
default: string;
|
|
28
|
+
};
|
|
29
|
+
}>> & Readonly<{}>, {
|
|
30
|
+
className: string;
|
|
31
|
+
hideWhenUnavailable: boolean;
|
|
32
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
var stdin_exports = {};
|
|
19
|
+
__export(stdin_exports, {
|
|
20
|
+
TextColorPopover: () => TextColorPopover
|
|
21
|
+
});
|
|
22
|
+
module.exports = __toCommonJS(stdin_exports);
|
|
23
|
+
var import_vue = require("vue");
|
|
24
|
+
var import_atomic = require("./_atomic.css");
|
|
25
|
+
var import_vue2 = require("vue");
|
|
26
|
+
var import_use_text_color = require("../hooks/use-text-color");
|
|
27
|
+
var import_text_color_button = require("./text-color-button");
|
|
28
|
+
var import_button = require("../primitives/button");
|
|
29
|
+
var import_element_plus = require("element-plus");
|
|
30
|
+
var import_icons = require("../icons");
|
|
31
|
+
var import_tiptap_utils = require("../utils/tiptap-utils");
|
|
32
|
+
var import_text_color_popover = require("../styles/text-color-popover.css");
|
|
33
|
+
const TextColorPopover = (0, import_vue2.defineComponent)({
|
|
34
|
+
name: "TextColorPopover",
|
|
35
|
+
props: {
|
|
36
|
+
editor: {
|
|
37
|
+
type: Object,
|
|
38
|
+
required: true
|
|
39
|
+
},
|
|
40
|
+
hideWhenUnavailable: {
|
|
41
|
+
type: Boolean,
|
|
42
|
+
default: false
|
|
43
|
+
},
|
|
44
|
+
className: {
|
|
45
|
+
type: String,
|
|
46
|
+
default: ""
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
setup(props, {
|
|
50
|
+
attrs
|
|
51
|
+
}) {
|
|
52
|
+
const {
|
|
53
|
+
isVisible,
|
|
54
|
+
canColor,
|
|
55
|
+
isActive,
|
|
56
|
+
label,
|
|
57
|
+
currentColor,
|
|
58
|
+
handleRemoveColor
|
|
59
|
+
} = (0, import_use_text_color.useTextColor)({
|
|
60
|
+
editor: props.editor,
|
|
61
|
+
hideWhenUnavailable: props.hideWhenUnavailable
|
|
62
|
+
});
|
|
63
|
+
const isOpen = (0, import_vue2.ref)(false);
|
|
64
|
+
const customColor = (0, import_vue2.ref)("#000000");
|
|
65
|
+
const showCustomPicker = (0, import_vue2.ref)(false);
|
|
66
|
+
const getEditor = () => {
|
|
67
|
+
const editor = props.editor;
|
|
68
|
+
return editor && "value" in editor ? editor.value : editor;
|
|
69
|
+
};
|
|
70
|
+
const handleCustomColorChange = (color) => {
|
|
71
|
+
if (!color)
|
|
72
|
+
return;
|
|
73
|
+
customColor.value = color;
|
|
74
|
+
const editor = getEditor();
|
|
75
|
+
if (editor && canColor.value) {
|
|
76
|
+
editor.chain().focus().setColor(color).run();
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
const handleCustomColorConfirm = () => {
|
|
80
|
+
isOpen.value = false;
|
|
81
|
+
showCustomPicker.value = false;
|
|
82
|
+
};
|
|
83
|
+
return () => {
|
|
84
|
+
if (!isVisible.value)
|
|
85
|
+
return null;
|
|
86
|
+
const activeColor = currentColor.value || "var(--tt-text-default)";
|
|
87
|
+
const trigger = (0, import_vue.createVNode)(import_button.Button, (0, import_vue.mergeProps)({
|
|
88
|
+
"type": "button",
|
|
89
|
+
"disabled": !canColor.value,
|
|
90
|
+
"data-style": "ghost",
|
|
91
|
+
"data-active-state": isActive.value ? "on" : "off",
|
|
92
|
+
"role": "button",
|
|
93
|
+
"tooltip": label,
|
|
94
|
+
"class": (0, import_tiptap_utils.cn)("tiptap-text-color-trigger", props.className)
|
|
95
|
+
}, attrs), {
|
|
96
|
+
default: () => [(0, import_vue.createVNode)(import_icons.TypeIcon, {
|
|
97
|
+
"class": "tiptap-button-icon"
|
|
98
|
+
}, null), (0, import_vue.createVNode)("span", {
|
|
99
|
+
"class": "tiptap-text-color-trigger-bar",
|
|
100
|
+
"style": {
|
|
101
|
+
backgroundColor: activeColor
|
|
102
|
+
}
|
|
103
|
+
}, null)]
|
|
104
|
+
});
|
|
105
|
+
return (0, import_vue.createVNode)(import_element_plus.ElPopover, {
|
|
106
|
+
"trigger": "click",
|
|
107
|
+
"width": "auto",
|
|
108
|
+
"popper-class": "tiptap-text-color-popover",
|
|
109
|
+
"visible": isOpen.value,
|
|
110
|
+
"onUpdate:visible": ($event) => isOpen.value = $event
|
|
111
|
+
}, {
|
|
112
|
+
reference: () => trigger,
|
|
113
|
+
default: () => (0, import_vue.createVNode)("div", {
|
|
114
|
+
"class": "tiptap-text-color-popover-content"
|
|
115
|
+
}, [(0, import_vue.createVNode)("div", {
|
|
116
|
+
"class": "tiptap-text-color-grid"
|
|
117
|
+
}, [import_use_text_color.TEXT_COLORS.filter((c) => !c.isDefault).map((color) => (0, import_vue.createVNode)(import_text_color_button.TextColorButton, {
|
|
118
|
+
"key": color.value,
|
|
119
|
+
"editor": props.editor,
|
|
120
|
+
"textColor": color.value,
|
|
121
|
+
"label": color.label,
|
|
122
|
+
"onApplied": () => {
|
|
123
|
+
isOpen.value = false;
|
|
124
|
+
}
|
|
125
|
+
}, null))]), (0, import_vue.createVNode)("div", {
|
|
126
|
+
"class": "tiptap-text-color-vertical-separator"
|
|
127
|
+
}, null), (0, import_vue.createVNode)("div", {
|
|
128
|
+
"class": "tiptap-text-color-actions"
|
|
129
|
+
}, [(0, import_vue.createVNode)(import_button.Button, {
|
|
130
|
+
"type": "button",
|
|
131
|
+
"data-style": "ghost",
|
|
132
|
+
"onClick": () => {
|
|
133
|
+
handleRemoveColor();
|
|
134
|
+
isOpen.value = false;
|
|
135
|
+
},
|
|
136
|
+
"tooltip": "\u79FB\u9664\u6587\u5B57\u989C\u8272",
|
|
137
|
+
"class": "tiptap-text-color-remove-button"
|
|
138
|
+
}, {
|
|
139
|
+
default: () => [(0, import_vue.createVNode)(import_icons.BanIcon, {
|
|
140
|
+
"class": "tiptap-button-icon"
|
|
141
|
+
}, null)]
|
|
142
|
+
})])])
|
|
143
|
+
});
|
|
144
|
+
};
|
|
145
|
+
}
|
|
146
|
+
});
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import type { Editor } from '@tiptap/vue-3';
|
|
2
|
+
export declare const TEXT_COLORS: ({
|
|
3
|
+
label: string;
|
|
4
|
+
value: string;
|
|
5
|
+
isDefault: boolean;
|
|
6
|
+
} | {
|
|
7
|
+
label: string;
|
|
8
|
+
value: string;
|
|
9
|
+
isDefault?: undefined;
|
|
10
|
+
})[];
|
|
11
|
+
export type TextColor = (typeof TEXT_COLORS)[number];
|
|
12
|
+
export declare function canSetTextColor(editor: Editor | null): boolean;
|
|
13
|
+
export declare function isTextColorActive(editor: Editor | null, color?: string): boolean;
|
|
14
|
+
export declare function removeTextColor(editor: Editor | null): boolean;
|
|
15
|
+
export declare function useTextColor(config: {
|
|
16
|
+
editor: any;
|
|
17
|
+
textColor?: string;
|
|
18
|
+
label?: string;
|
|
19
|
+
hideWhenUnavailable?: boolean;
|
|
20
|
+
onApplied?: (params: {
|
|
21
|
+
color: string;
|
|
22
|
+
label: string;
|
|
23
|
+
}) => void;
|
|
24
|
+
}): {
|
|
25
|
+
isVisible: import("vue").Ref<boolean, boolean>;
|
|
26
|
+
isActive: import("vue").Ref<boolean, boolean>;
|
|
27
|
+
canColor: import("vue").Ref<boolean, boolean>;
|
|
28
|
+
currentColor: import("vue").Ref<string, string>;
|
|
29
|
+
handleSetColor: (color: string, colorLabel: string) => void;
|
|
30
|
+
handleRemoveColor: () => void;
|
|
31
|
+
label: string;
|
|
32
|
+
Icon: import("vue").Raw<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
33
|
+
className: {
|
|
34
|
+
type: StringConstructor;
|
|
35
|
+
default: string;
|
|
36
|
+
};
|
|
37
|
+
}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
38
|
+
className: {
|
|
39
|
+
type: StringConstructor;
|
|
40
|
+
default: string;
|
|
41
|
+
};
|
|
42
|
+
}>> & Readonly<{}>, {
|
|
43
|
+
className: string;
|
|
44
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
|
|
45
|
+
};
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
var stdin_exports = {};
|
|
19
|
+
__export(stdin_exports, {
|
|
20
|
+
TEXT_COLORS: () => TEXT_COLORS,
|
|
21
|
+
canSetTextColor: () => canSetTextColor,
|
|
22
|
+
isTextColorActive: () => isTextColorActive,
|
|
23
|
+
removeTextColor: () => removeTextColor,
|
|
24
|
+
useTextColor: () => useTextColor
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(stdin_exports);
|
|
27
|
+
var import_vue = require("vue");
|
|
28
|
+
var import_tiptap_utils = require("../utils/tiptap-utils");
|
|
29
|
+
var import_icons = require("../icons");
|
|
30
|
+
const TEXT_COLORS = [
|
|
31
|
+
{
|
|
32
|
+
label: "\u9ED8\u8BA4\u989C\u8272",
|
|
33
|
+
value: "var(--tt-text-default)",
|
|
34
|
+
isDefault: true
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
label: "\u7EA2\u8272",
|
|
38
|
+
value: "var(--tt-color-text-red)"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
label: "\u9EC4\u8272",
|
|
42
|
+
value: "var(--tt-color-text-yellow)"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
label: "\u7EFF\u8272",
|
|
46
|
+
value: "var(--tt-color-text-green)"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
label: "\u84DD\u8272",
|
|
50
|
+
value: "var(--tt-color-text-blue)"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
label: "\u7D2B\u8272",
|
|
54
|
+
value: "var(--tt-color-text-purple)"
|
|
55
|
+
}
|
|
56
|
+
];
|
|
57
|
+
function canSetTextColor(editor) {
|
|
58
|
+
if (!editor || !editor.isEditable)
|
|
59
|
+
return false;
|
|
60
|
+
if ((0, import_tiptap_utils.isNodeTypeSelected)(editor, ["image"]))
|
|
61
|
+
return false;
|
|
62
|
+
return editor.can().setMark("textStyle");
|
|
63
|
+
}
|
|
64
|
+
function isTextColorActive(editor, color) {
|
|
65
|
+
if (!editor || !editor.isEditable)
|
|
66
|
+
return false;
|
|
67
|
+
if (color) {
|
|
68
|
+
return editor.isActive("textStyle", { color });
|
|
69
|
+
}
|
|
70
|
+
return editor.isActive("textStyle");
|
|
71
|
+
}
|
|
72
|
+
function removeTextColor(editor) {
|
|
73
|
+
if (!editor || !editor.isEditable)
|
|
74
|
+
return false;
|
|
75
|
+
return editor.chain().focus().unsetColor().run();
|
|
76
|
+
}
|
|
77
|
+
function useTextColor(config) {
|
|
78
|
+
const { textColor, label, hideWhenUnavailable = false, onApplied } = config;
|
|
79
|
+
const isVisible = (0, import_vue.ref)(true);
|
|
80
|
+
const isActive = (0, import_vue.ref)(false);
|
|
81
|
+
const canColor = (0, import_vue.ref)(false);
|
|
82
|
+
const currentColor = (0, import_vue.ref)("");
|
|
83
|
+
const getEditor = () => {
|
|
84
|
+
const editor = config.editor;
|
|
85
|
+
return editor && "value" in editor ? editor.value : editor;
|
|
86
|
+
};
|
|
87
|
+
const updateState = () => {
|
|
88
|
+
const editor = getEditor();
|
|
89
|
+
if (!editor || !editor.isEditable) {
|
|
90
|
+
isVisible.value = false;
|
|
91
|
+
isActive.value = false;
|
|
92
|
+
canColor.value = false;
|
|
93
|
+
currentColor.value = "";
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
isActive.value = isTextColorActive(editor, textColor);
|
|
97
|
+
canColor.value = canSetTextColor(editor);
|
|
98
|
+
if (!(0, import_tiptap_utils.isMarkInSchema)("textStyle", editor)) {
|
|
99
|
+
isVisible.value = false;
|
|
100
|
+
} else if (hideWhenUnavailable) {
|
|
101
|
+
isVisible.value = canColor.value;
|
|
102
|
+
} else {
|
|
103
|
+
isVisible.value = true;
|
|
104
|
+
}
|
|
105
|
+
const attrs = editor.getAttributes("textStyle");
|
|
106
|
+
currentColor.value = (attrs == null ? void 0 : attrs.color) || "";
|
|
107
|
+
};
|
|
108
|
+
(0, import_vue.watch)(
|
|
109
|
+
() => getEditor(),
|
|
110
|
+
(editor) => {
|
|
111
|
+
if (!editor)
|
|
112
|
+
return;
|
|
113
|
+
updateState();
|
|
114
|
+
editor.on("selectionUpdate", updateState);
|
|
115
|
+
editor.on("transaction", updateState);
|
|
116
|
+
(0, import_vue.onBeforeUnmount)(() => {
|
|
117
|
+
editor.off("selectionUpdate", updateState);
|
|
118
|
+
editor.off("transaction", updateState);
|
|
119
|
+
});
|
|
120
|
+
},
|
|
121
|
+
{ immediate: true }
|
|
122
|
+
);
|
|
123
|
+
const handleSetColor = (color, colorLabel) => {
|
|
124
|
+
const editor = getEditor();
|
|
125
|
+
if (!editor || !canColor.value)
|
|
126
|
+
return;
|
|
127
|
+
setTimeout(() => {
|
|
128
|
+
const success = editor.chain().focus().setColor(color).run();
|
|
129
|
+
if (success) {
|
|
130
|
+
onApplied == null ? void 0 : onApplied({ color, label: colorLabel });
|
|
131
|
+
}
|
|
132
|
+
}, 0);
|
|
133
|
+
};
|
|
134
|
+
const handleRemoveColor = () => {
|
|
135
|
+
const editor = getEditor();
|
|
136
|
+
const success = removeTextColor(editor);
|
|
137
|
+
if (success) {
|
|
138
|
+
onApplied == null ? void 0 : onApplied({ color: "", label: "\u79FB\u9664\u6587\u5B57\u989C\u8272" });
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
return {
|
|
142
|
+
isVisible,
|
|
143
|
+
isActive,
|
|
144
|
+
canColor,
|
|
145
|
+
currentColor,
|
|
146
|
+
handleSetColor,
|
|
147
|
+
handleRemoveColor,
|
|
148
|
+
label: label || "\u6587\u5B57\u989C\u8272",
|
|
149
|
+
Icon: (0, import_vue.markRaw)(import_icons.TypeIcon)
|
|
150
|
+
};
|
|
151
|
+
}
|
|
@@ -557,3 +557,16 @@ export declare const TableIcon: import("vue").DefineComponent<import("vue").Extr
|
|
|
557
557
|
}>> & Readonly<{}>, {
|
|
558
558
|
className: string;
|
|
559
559
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
560
|
+
export declare const TypeIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
561
|
+
className: {
|
|
562
|
+
type: StringConstructor;
|
|
563
|
+
default: string;
|
|
564
|
+
};
|
|
565
|
+
}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
566
|
+
className: {
|
|
567
|
+
type: StringConstructor;
|
|
568
|
+
default: string;
|
|
569
|
+
};
|
|
570
|
+
}>> & Readonly<{}>, {
|
|
571
|
+
className: string;
|
|
572
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -58,6 +58,7 @@ __export(stdin_exports, {
|
|
|
58
58
|
SuperscriptIcon: () => SuperscriptIcon,
|
|
59
59
|
TableIcon: () => TableIcon,
|
|
60
60
|
TrashIcon: () => TrashIcon,
|
|
61
|
+
TypeIcon: () => TypeIcon,
|
|
61
62
|
UnderlineIcon: () => UnderlineIcon,
|
|
62
63
|
Undo2Icon: () => Undo2Icon
|
|
63
64
|
});
|
|
@@ -530,3 +531,24 @@ const TableIcon = createIcon("TableIcon", (0, import_vue.createVNode)(import_vue
|
|
|
530
531
|
"stroke": "currentColor",
|
|
531
532
|
"stroke-width": "2"
|
|
532
533
|
}, null)]));
|
|
534
|
+
const TypeIcon = createIcon("TypeIcon", (0, import_vue.createVNode)(import_vue.Fragment, null, [(0, import_vue.createVNode)("path", {
|
|
535
|
+
"d": "M4 20L9.5 4H14.5L20 20",
|
|
536
|
+
"stroke": "currentColor",
|
|
537
|
+
"stroke-width": "2",
|
|
538
|
+
"stroke-linecap": "round",
|
|
539
|
+
"stroke-linejoin": "round",
|
|
540
|
+
"fill": "none"
|
|
541
|
+
}, null), (0, import_vue.createVNode)("path", {
|
|
542
|
+
"d": "M6.5 14H17.5",
|
|
543
|
+
"stroke": "currentColor",
|
|
544
|
+
"stroke-width": "2",
|
|
545
|
+
"stroke-linecap": "round",
|
|
546
|
+
"fill": "none"
|
|
547
|
+
}, null), (0, import_vue.createVNode)("rect", {
|
|
548
|
+
"x": "3",
|
|
549
|
+
"y": "21",
|
|
550
|
+
"width": "18",
|
|
551
|
+
"height": "2.5",
|
|
552
|
+
"rx": "1.25",
|
|
553
|
+
"fill": "currentColor"
|
|
554
|
+
}, null)]));
|
|
@@ -1 +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:
|
|
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-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)}.tiptap-button-group{position:relative;display:flex;vertical-align:middle}.tiptap-button-group[data-orientation=vertical]{flex-direction:column;align-items:flex-start;justify-content:center;min-width:-webkit-max-content;min-width:max-content}.tiptap-button-group[data-orientation=vertical]>.tiptap-button{width:100%}.tiptap-button-group[data-orientation=horizontal]{gap:.125rem;flex-direction:row;align-items:center}
|