@lobehub/editor
Version:
A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.
41 lines • 6.79 kB
JavaScript
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { createStaticStyles, cx, keyframes } from 'antd-style';
var cursorBlink = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n to {\n visibility: hidden;\n }\n"])));
export var themeStyles = createStaticStyles(function (_ref) {
var css = _ref.css,
cssVar = _ref.cssVar;
return {
quote: 'editor_quote',
textBold_false: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-weight: unset;\n "]))),
textBold_true: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-weight: bold;\n "]))),
textCode: 'editor_code',
textItalic_false: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-style: unset;\n "]))),
textItalic_true: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-style: italic;\n "]))),
textStrikethrough_false: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n text-decoration: unset;\n "]))),
textStrikethrough_true: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n color: ", ";\n text-decoration: line-through;\n "])), cssVar.colorTextDescription),
textUnderlineStrikethrough_false: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n text-decoration: unset;\n "]))),
textUnderlineStrikethrough_true: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n text-decoration: underline line-through;\n "]))),
textUnderline_false: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n text-decoration: unset;\n "]))),
textUnderline_true: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n text-decoration: underline;\n "])))
};
});
export var styles = createStaticStyles(function (_ref2) {
var css = _ref2.css,
cssVar = _ref2.cssVar;
var __root = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n --lobe-markdown-font-size: var(--common-font-size, 16px);\n --lobe-markdown-header-multiple: var(--common-header-multiple, 1);\n --lobe-markdown-margin-multiple: var(--common-margin-multiple, 2);\n --lobe-markdown-line-height: var(--common-line-height, 1.6);\n --lobe-markdown-border-radius: ", ";\n --lobe-markdown-border-color: ", ";\n\n position: relative;\n\n display: flex;\n flex-direction: column;\n\n width: 100%;\n max-width: 100%;\n height: 100%;\n\n font-size: var(--lobe-markdown-font-size);\n line-height: var(--lobe-markdown-line-height);\n word-break: break-word;\n\n [data-placeholder] {\n position: relative;\n }\n\n [data-placeholder]::after {\n pointer-events: none;\n content: attr(data-placeholder);\n user-select: none;\n\n position: absolute;\n inset-block-start: 50%;\n transform: translateY(-50%);\n\n padding-inline-start: 2px;\n\n color: ", ";\n white-space: nowrap;\n }\n\n [data-lexical-cursor='true'] {\n pointer-events: none;\n position: absolute;\n display: block;\n\n &::after {\n content: '';\n\n position: absolute;\n inset-block-start: -2px;\n\n display: block;\n\n width: 20px;\n border-block-start: 1px solid ", ";\n\n animation: ", " 1.1s steps(2, start) infinite;\n }\n }\n "])), cssVar.borderRadiusLG, cssVar.colorFillQuaternary, cssVar.colorTextDescription, cssVar.colorText, cursorBlink);
var header = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-block: max(\n calc(var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em),\n var(--lobe-markdown-font-size)\n );\n font-weight: bold;\n line-height: 1.25;\n }\n\n h1 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h2 {\n font-size: calc(var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple)));\n }\n\n h3 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h4 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h5,\n h6 {\n font-size: calc(var(--lobe-markdown-font-size) * 1);\n }\n "])));
var p = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n p {\n margin-block: 4px;\n line-height: var(--lobe-markdown-line-height);\n letter-spacing: 0.02em;\n\n &:not(:first-child) {\n margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n }\n\n &:not(:last-child) {\n margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n }\n }\n "])));
var blockquote = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n .editor_quote {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n margin-inline: 0;\n padding-block: 0;\n padding-inline: 1em;\n border-inline-start: solid 4px ", ";\n\n color: ", ";\n }\n "])), cssVar.colorBorder, cssVar.colorTextSecondary);
var code = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n .editor_code {\n display: inline;\n\n margin-inline: 0.25em;\n padding-block: 0.2em;\n padding-inline: 0.4em;\n border: 1px solid var(--lobe-markdown-border-color);\n border-radius: 0.25em;\n\n font-family: ", ";\n font-size: 0.875em;\n line-height: 1;\n word-break: break-word;\n white-space: break-spaces;\n\n background: ", ";\n }\n "])), cssVar.fontFamilyCode, cssVar.colorFillSecondary);
var editorContent = css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n flex: 1;\n min-height: 0;\n outline: none;\n "])));
return {
blockquote: blockquote,
code: code,
editorContent: editorContent,
header: header,
p: p,
root: __root,
variant: cx(header, p, blockquote, code)
};
});