本文整理匯總了TypeScript中@rich-editor/editor/richEditorVariables.richEditorVariables函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript richEditorVariables函數的具體用法？TypeScript richEditorVariables怎麽用？TypeScript richEditorVariables使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了richEditorVariables函數的8個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: useThemeCache
export const insertLinkClasses = useThemeCache(() => {
const vars = richEditorVariables();
const style = styleFactory("insertLink");
const root = style({
position: "relative",
display: "flex",
flexWrap: "nowrap",
alignItems: "center",
maxWidth: unit(vars.insertLink.width),
width: percent(100),
paddingLeft: 0,
});
const input = style("input", {
zIndex: 2,
$nest: {
"&, &.InputBox": {
border: important("0"),
marginBottom: important("0"),
flexGrow: 1,
maxWidth: calc(`100% - ${unit(vars.menuButton.size)}`),
},
},
});
return { root, input };
});示例2: useThemeCache
export const nubClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = richEditorVariables();
const style = styleFactory("nub");
const root = style({
position: "relative",
display: "block",
width: unit(vars.nub.width),
height: unit(vars.nub.width),
borderTop: singleBorder({
width: vars.menu.borderWidth,
}),
borderRight: singleBorder({
width: vars.menu.borderWidth,
}),
boxShadow: globalVars.overlay.dropShadow,
background: colorOut(vars.colors.bg),
});
const position = style("position", {
position: "absolute",
display: "flex",
alignItems: "flex-start",
justifyContent: "center",
overflow: "hidden",
width: unit(vars.nub.width * 2),
height: unit(vars.nub.width * 2),
...userSelect(),
transform: translateX("-50%"),
pointerEvents: "none",
});
return { root, position };
});示例3: useThemeCache
export const richEditorFlyoutClasses = useThemeCache(() => {
const vars = richEditorVariables();
const style = styleFactory("richEditorFlyout");
const shadows = shadowHelper();
const globalVars = globalVariables();
const root = style({
...shadows.dropDown(),
position: "absolute",
left: 0,
width: unit( vars.richEditorWidth + vars.emojiBody.padding.horizontal * 2),
zIndex: 6,
overflow: "hidden",
backgroundColor: colorOut(vars.colors.bg),
...borders(),
$nest: {
"&& .ReactVirtualized__Grid": {
width: important(unit(vars.richEditorWidth) as string),
},
},
});
const header = style("header", {
position: "relative",
borderBottom: singleBorder(),
...paddings(vars.emojiHeader.padding),
});
const title = style("title", {
display: "flex",
alignItems: "center",
...longWordEllipsis(),
margin: 0,
maxWidth: calc(`100% - ${unit(vars.menuButton.size)}`),
minHeight: vars.menuButton.size - vars.emojiBody.padding.horizontal,
fontSize: percent(100),
lineHeight: "inherit",
color: colorOut(globalVars.mainColors.fg),
$nest: {
"&:focus": {
outline: 0,
},
},
});
const body = style("body", {
...paddings(vars.emojiBody.padding),
width: unit( vars.richEditorWidth + vars.emojiBody.padding.horizontal * 2),
});
const footer = style("footer", {
borderTop: singleBorder(),
});
return { root, header, body, footer, title };
});示例4: useThemeCache
export const insertMediaClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = richEditorVariables();
const style = styleFactory("insertMedia");
const root = style({
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
...paddings({
left: vars.flyout.padding.horizontal,
right: vars.flyout.padding.horizontal,
bottom: vars.flyout.padding.vertical,
}),
});
const help = style("help", {
marginRight: "auto",
fontSize: unit(globalVars.fonts.size.small),
});
const insert = style("insert", {
$nest: {
"&&": {
// Nest deeper to override margins from the forum.
width: percent(100),
position: "relative",
marginBottom: px(10),
},
},
});
const button = style("button", {
position: "relative",
marginLeft: "auto",
});
const footer = style("footer", {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: 0,
});
return { root, help, insert, footer, button };
});示例5: useThemeCache
export const inlineToolbarClasses = useThemeCache((legacyMode: boolean = false) => {
const vars = richEditorVariables();
const style = styleFactory("inlineToolbar");
const offsetForNub = vars.menu.offset / 2;
const root = style({
$nest: {
"&.isUp": {
transform: `translateY(-12px)`,
$nest: {
".richEditor-nubPosition": {
bottom: 0,
zIndex: 10,
},
".richEditor-nub": {
transform: `translateY(-50%) rotate(135deg)`,
marginBottom: unit(offsetForNub),
},
},
},
"&.isDown": {
transform: `translateY(12px)`,
$nest: {
".richEditor-nubPosition": {
bottom: percent(100),
},
".richEditor-nub": {
transform: `translateY(50%) rotate(-45deg)`,
marginTop: unit(offsetForNub),
boxShadow: "none",
},
},
},
},
});
return { root };
});示例6: useThemeCache
export const paragraphMenuCheckRadioClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = richEditorVariables();
const style = styleFactory("paragraphMenuCheckRadio");
const group = style("group", {
marginBottom: unit(9),
});
const checkRadio = style("checkRadio", {
...appearance(),
border: 0,
display: "flex",
alignItems: "center",
width: percent(100),
minHeight: unit(30),
userSelect: "none",
padding: 0,
outline: 0,
$nest: {
"&:hover": {
backgroundColor: colorOut(globalVars.states.hover.color),
zIndex: 1,
},
"&:active": {
backgroundColor: colorOut(globalVars.states.active.color),
zIndex: 1,
},
"&:focus": {
backgroundColor: colorOut(globalVars.states.focus.color),
zIndex: 1,
},
},
});
const check = style("check", {});
const radio = style("radio", {});
const checked = style("checked", {});
const separator = style("separator", {});
const icon = style("icon", {
width: unit(vars.menuButton.size),
flexBasis: unit(vars.menuButton.size),
});
const checkRadioLabel = style("checkRadioLabel", {
flexGrow: 1,
maxWidth: calc(`100% - ${unit(vars.menuButton.size * 2)}`),
textAlign: "left",
});
const checkRadioSelected = style("checkRadioSelected", {
width: unit(vars.menuButton.size),
flexBasis: unit(vars.menuButton.size),
});
return {
group,
checkRadio,
check,
radio,
checked,
separator,
icon,
checkRadioLabel,
checkRadioSelected,
};
});示例7: useThemeCache
export const insertEmojiClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = richEditorVariables();
const style = styleFactory("insertEmoji");
const root = style({
...appearance(),
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: unit(globalVars.icon.sizes.default),
textAlign: "center",
overflow: "hidden",
border: 0,
opacity: globalVars.states.text.opacity,
cursor: "pointer",
borderRadius: unit(3),
$nest: {
...buttonStates(
{
allStates: {
outline: 0,
},
hover: {
opacity: 1,
},
focus: {
opacity: 1,
},
active: {
opacity: 1,
},
accessibleFocus: {
backgroundColor: colorOut(globalVars.states.hover.color),
},
},
{
".fallBackEmoji": {
display: "block",
margin: "auto",
},
".safeEmoji": {
display: "block",
height: unit(globalVars.icon.sizes.default),
width: unit(globalVars.icon.sizes.default),
margin: "auto",
},
},
),
},
});
const body = style("body", {
height: unit(vars.emojiBody.height),
maxHeight: viewHeight(80),
});
const popoverDescription = style("popoverDescription", {
marginBottom: ".5em",
});
return { root, body, popoverDescription };
});示例8: useThemeCache
export const richEditorClasses = useThemeCache((legacyMode: boolean, mobile?: boolean) => {
const globalVars = globalVariables();
const style = styleFactory("richEditor");
const vars = richEditorVariables();
const formVars = formElementsVariables();
const root = style({
position: "relative",
display: "block",
$nest: {
"&.isDisabled": {
$nest: {
"&, &.richEditor-button": {
cursor: important("progress"),
},
},
},
"& .richEditor-text, & .richEditor-textWrap, & .richEditor-frame": {
display: "flex",
flexDirection: "column",
flexGrow: 1,
position: "relative",
},
"& .ql-clipboard": {
...srOnly(),
position: "fixed", // Fixed https://github.com/quilljs/quill/issues/1374#issuecomment-415333651
},
"& .richEditor-nextInput, .iconButton, .richEditor-button": {
...singleLineEllipsis(),
...appearance(),
position: "relative",
border: 0,
padding: 0,
background: "none",
textAlign: "left",
},
"& .Close-x": {
display: "block",
cursor: "pointer",
},
"& .content-wrapper": {
height: percent(100),
},
"& .embedDialogue": {
position: "relative",
},
},
});
const iconWrap = style("iconWrap", {
...pointerEvents(),
content: quote(``),
...absolutePosition.middleOfParent(),
width: unit(vars.iconWrap.width),
height: unit(vars.iconWrap.height),
...borders({
radius: 3,
color: "transparent",
}),
});
const paragraphMenu = style("paragraphMenu", {
position: "absolute",
display: "flex",
alignItems: "center",
justifyContent: "center",
top: unit(vars.pilcrow.offset),
left: 0,
marginLeft: unit(-globalVars.gutter.quarter + (!legacyMode ? -(globalVars.gutter.size + 6) : 0)),
transform: `translateX(-100%)`,
height: unit(vars.paragraphMenuHandle.size),
width: unit(globalVars.icon.sizes.default),
animationName: vars.pilcrow.animation.name,
animationDuration: vars.pilcrow.animation.duration,
animationTimingFunction: vars.pilcrow.animation.timing,
animationIterationCount: vars.pilcrow.animation.iterationCount,
zIndex: 1,
$nest: {
".richEditor-button&.isActive:hover": {
cursor: "default",
},
"&.isMenuInset": {
transform: "none",
},
},
});
const paragraphMenuMobile = style("paragraphMenu-mobile", {
position: "relative",
display: "flex",
alignItems: "center",
justifyContent: "center",
top: important(0),
});
const menuBar = style("menuBar", {
position: "relative",
width: unit(vars.menuButton.size * 4),
overflow: "hidden",
});
//.........這裏部分代碼省略.........