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 }; });
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 }; });
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 }; });
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 }; });
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 }; });
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, }; });
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 }; });
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", }); const menuBarToggles = style("menuBarToggles", { position: "relative", display: "flex", justifyContent: "space-between", flexWrap: "nowrap", width: unit(vars.menuButton.size * 4), }); const paragraphMenuHandle = style("paragraphMenuHandle", { ...appearance(), ...userSelect(), background: "transparent", border: 0, display: "block", cursor: "pointer", width: unit(formVars.sizing.height), height: unit(formVars.sizing.height), padding: 0, maxWidth: unit(formVars.sizing.height), minWidth: unit(formVars.sizing.height), outline: 0, $nest: { "&:focus, &:hover": { color: colorOut(globalVars.mainColors.primary), }, [`&.isOpen .${iconWrap}`]: { backgroundColor: colorOut(vars.buttonContents.state.bg), }, }, }); const paragraphMenuHandleMobile = style("paragraphMenuHandleMobile", { width: unit(vars.menuButton.size), height: unit(vars.menuButton.size), maxWidth: unit(vars.menuButton.size), minWidth: unit(vars.menuButton.size), }); const text = style("text", { position: "relative", whiteSpace: important("pre-wrap"), outline: 0, }); const menuItems = style("menuItems", { "-ms-overflow-style": "-ms-autohiding-scrollbar", display: "flex", alignItems: "center", justifyContent: "flex-start", flexWrap: "nowrap", listStyle: "none", padding: 0, margin: 0, zIndex: 1, overflow: "visible", $nest: { ".richEditor-menuItem": { display: "block", padding: 0, margin: 0, $nest: { ".richEditor-button, &.richEditor-button": { width: unit(vars.menuButton.size), fontSize: unit((vars.menuButton.size * 24) / 39), lineHeight: unit(vars.menuButton.size), $nest: { "&.emojiChar-🇺🇳": { fontSize: unit(10), }, }, }, "&:first-child .richEditor-embedButton": { borderBottomLeftRadius: unit(globalVars.border.radius), }, "&.isRightAligned": { marginLeft: "auto", }, }, }, }, }); const button = style("button", { display: "block", ...userSelect(), ...appearance(), cursor: "pointer", width: unit(vars.menuButton.size), height: unit(vars.menuButton.size), border: 0, padding: 0, overflow: "hidden", position: "relative", color: colorOut(globalVars.mainColors.fg), outline: 0, $nest: { "&:hover": { color: colorOut(globalVars.mainColors.primary), }, "&:focus": { color: colorOut(globalVars.mainColors.secondary), }, "&:active": { color: colorOut(globalVars.mainColors.secondary), }, [`&.isOpen .${iconWrap}`]: { backgroundColor: colorOut(vars.buttonContents.state.bg), }, [`&.focus-visible .${iconWrap}`]: { backgroundColor: colorOut(vars.buttonContents.state.bg), }, "&.richEditor-formatButton, &.richEditor-embedButton": { height: unit(vars.menuButton.size), }, "&.emojiGroup": { display: "block", width: unit(vars.menuButton.size), height: unit(vars.menuButton.size), textAlign: "center", }, "&:not(:disabled)": { cursor: "pointer", }, [`&.isActive .${iconWrap}`]: { backgroundColor: colorOut(vars.buttonContents.state.bg), }, }, }); const topLevelButtonActive = style("topLevelButtonActive", { color: colorOut(globalVars.mainColors.primary), $nest: { [`& .${iconWrap}`]: { backgroundColor: colorOut(vars.buttonContents.state.bg), }, }, }); const menuItem = style("menuItem", { display: "block", padding: 0, margin: 0, overflow: "visible", $nest: { "& .richEditor-button, &.richEditor-button": { width: unit(vars.menuButton.size), height: unit(vars.menuButton.size), maxWidth: unit(vars.menuButton.size), fontSize: unit((vars.menuButton.size * 24) / 39), lineHeight: unit(vars.menuButton.size), $nest: { "&.emojiChar-🇺🇳": { fontSize: unit(14), }, }, }, "&.isRightAligned": { marginLeft: "auto", }, }, }); const upload = style("upload", { display: important("none"), }); const embedBar = style("embedBar", { display: "block", width: percent(100), padding: unit(vars.embedMenu.padding), background: legacyMode ? undefined : colorOut(vars.colors.bg), }); const icon = style("icon", { display: "block", margin: "auto", height: unit(globalVars.icon.sizes.default), width: unit(globalVars.icon.sizes.default), }); const legacyFrame = style("legacyFrame", { margin: "auto", height: "initial", minHeight: unit(vars.sizing.minHeight + vars.menuButton.size), position: "relative", backgroundColor: colorOut(vars.colors.bg), padding: 0, $nest: { "&.isMenuInset": { overflow: "initial", position: "relative", }, }, }); const close = style("close", { ...absolutePosition.middleRightOfParent(6), ...userSelect(), width: unit(vars.menuButton.size), height: unit(vars.menuButton.size), lineHeight: unit(vars.menuButton.size), verticalAlign: "bottom", textAlign: "center", background: "transparent", cursor: "pointer", }); const flyoutDescription = style("flyoutDescription", { marginBottom: ".5em", }); const separator = style("separator", { borderTop: singleBorder(), marginBottom: unit(8), }); const position = style("position", { position: "absolute", left: calc(`50% - ${unit(vars.spacing.paddingLeft / 2)}`), $nest: { "&.isUp": { bottom: calc(`50% + ${unit(vars.spacing.paddingRight / 2 - formVars.border.width)}`), }, "&.isDown": { top: calc(`50% + ${unit(vars.spacing.paddingRight / 2 - formVars.border.width)}`), }, }, }); const paragraphMenuPanel = style("paragraphMenuPanel", {}); const emojiGroup = style("emojiGroup", { $nest: { [`&.isSelected .${iconWrap}`]: { backgroundColor: colorOut(vars.buttonContents.state.bg), }, }, }); const flyoutOffset = style("flyoutOffset", { marginTop: unit((vars.menuButton.size - vars.iconWrap.width) / -2 + 1), }); return { root, menuBar, menuBarToggles, paragraphMenuHandle, paragraphMenuHandleMobile, text, menuItems, upload, embedBar, menuItem, button, topLevelButtonActive, icon, close, flyoutDescription, paragraphMenu, paragraphMenuMobile, separator, position, legacyFrame, paragraphMenuPanel, iconWrap, flyoutOffset, emojiGroup, }; });