refactor: lexical (#1954)
This commit is contained in:
Mo
101
packages/blocks-editor/src/Lexical/Theme/Theme.ts
Normal file
101
packages/blocks-editor/src/Lexical/Theme/Theme.ts
Normal file
@@ -0,0 +1,101 @@
|
||||
import type {EditorThemeClasses} from 'lexical';
|
||||
|
||||
const BlocksEditorTheme: EditorThemeClasses = {
|
||||
characterLimit: 'Lexical__characterLimit',
|
||||
code: 'Lexical__code',
|
||||
codeHighlight: {
|
||||
atrule: 'Lexical__tokenAttr',
|
||||
attr: 'Lexical__tokenAttr',
|
||||
boolean: 'Lexical__tokenProperty',
|
||||
builtin: 'Lexical__tokenSelector',
|
||||
cdata: 'Lexical__tokenComment',
|
||||
char: 'Lexical__tokenSelector',
|
||||
class: 'Lexical__tokenFunction',
|
||||
'class-name': 'Lexical__tokenFunction',
|
||||
comment: 'Lexical__tokenComment',
|
||||
constant: 'Lexical__tokenProperty',
|
||||
deleted: 'Lexical__tokenProperty',
|
||||
doctype: 'Lexical__tokenComment',
|
||||
entity: 'Lexical__tokenOperator',
|
||||
function: 'Lexical__tokenFunction',
|
||||
important: 'Lexical__tokenVariable',
|
||||
inserted: 'Lexical__tokenSelector',
|
||||
keyword: 'Lexical__tokenAttr',
|
||||
namespace: 'Lexical__tokenVariable',
|
||||
number: 'Lexical__tokenProperty',
|
||||
operator: 'Lexical__tokenOperator',
|
||||
prolog: 'Lexical__tokenComment',
|
||||
property: 'Lexical__tokenProperty',
|
||||
punctuation: 'Lexical__tokenPunctuation',
|
||||
regex: 'Lexical__tokenVariable',
|
||||
selector: 'Lexical__tokenSelector',
|
||||
string: 'Lexical__tokenSelector',
|
||||
symbol: 'Lexical__tokenProperty',
|
||||
tag: 'Lexical__tokenProperty',
|
||||
url: 'Lexical__tokenOperator',
|
||||
variable: 'Lexical__tokenVariable',
|
||||
},
|
||||
embedBlock: {
|
||||
base: 'Lexical__embedBlock',
|
||||
focus: 'Lexical__embedBlockFocus',
|
||||
},
|
||||
hashtag: 'Lexical__hashtag',
|
||||
heading: {
|
||||
h1: 'Lexical__h1',
|
||||
h2: 'Lexical__h2',
|
||||
h3: 'Lexical__h3',
|
||||
h4: 'Lexical__h4',
|
||||
h5: 'Lexical__h5',
|
||||
h6: 'Lexical__h6',
|
||||
},
|
||||
image: 'editor-image',
|
||||
link: 'Lexical__link',
|
||||
list: {
|
||||
listitem: 'Lexical__listItem',
|
||||
listitemChecked: 'Lexical__listItemChecked',
|
||||
listitemUnchecked: 'Lexical__listItemUnchecked',
|
||||
nested: {
|
||||
listitem: 'Lexical__nestedListItem',
|
||||
},
|
||||
olDepth: [
|
||||
'Lexical__ol1',
|
||||
'Lexical__ol2',
|
||||
'Lexical__ol3',
|
||||
'Lexical__ol4',
|
||||
'Lexical__ol5',
|
||||
],
|
||||
ul: 'Lexical__ul',
|
||||
},
|
||||
ltr: 'Lexical__ltr',
|
||||
mark: 'Lexical__mark',
|
||||
markOverlap: 'Lexical__markOverlap',
|
||||
paragraph: 'Lexical__paragraph',
|
||||
quote: 'Lexical__quote',
|
||||
rtl: 'Lexical__rtl',
|
||||
table: 'Lexical__table',
|
||||
tableAddColumns: 'Lexical__tableAddColumns',
|
||||
tableAddRows: 'Lexical__tableAddRows',
|
||||
tableCell: 'Lexical__tableCell',
|
||||
tableCellActionButton: 'Lexical__tableCellActionButton',
|
||||
tableCellActionButtonContainer: 'Lexical__tableCellActionButtonContainer',
|
||||
tableCellEditing: 'Lexical__tableCellEditing',
|
||||
tableCellHeader: 'Lexical__tableCellHeader',
|
||||
tableCellPrimarySelected: 'Lexical__tableCellPrimarySelected',
|
||||
tableCellResizer: 'Lexical__tableCellResizer',
|
||||
tableCellSelected: 'Lexical__tableCellSelected',
|
||||
tableCellSortedIndicator: 'Lexical__tableCellSortedIndicator',
|
||||
tableResizeRuler: 'Lexical__tableCellResizeRuler',
|
||||
tableSelected: 'Lexical__tableSelected',
|
||||
text: {
|
||||
bold: 'Lexical__textBold',
|
||||
code: 'Lexical__textCode',
|
||||
italic: 'Lexical__textItalic',
|
||||
strikethrough: 'Lexical__textStrikethrough',
|
||||
subscript: 'Lexical__textSubscript',
|
||||
superscript: 'Lexical__textSuperscript',
|
||||
underline: 'Lexical__textUnderline',
|
||||
underlineStrikethrough: 'Lexical__textUnderlineStrikethrough',
|
||||
},
|
||||
};
|
||||
|
||||
export default BlocksEditorTheme;
|
||||
1247
packages/blocks-editor/src/Lexical/Theme/base.scss
Normal file
1247
packages/blocks-editor/src/Lexical/Theme/base.scss
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,93 @@
|
||||
.typeahead-popover {
|
||||
background: #fff;
|
||||
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.typeahead-popover ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
border-radius: 8px;
|
||||
max-height: 200px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.typeahead-popover ul::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.typeahead-popover ul {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.typeahead-popover ul li {
|
||||
margin: 0;
|
||||
min-width: 180px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.typeahead-popover ul li.selected {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.typeahead-popover li {
|
||||
margin: 0 8px 0 8px;
|
||||
padding: 8px;
|
||||
color: #050505;
|
||||
cursor: pointer;
|
||||
line-height: 16px;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.typeahead-popover li.active {
|
||||
display: flex;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.typeahead-popover li:first-child {
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
}
|
||||
|
||||
.typeahead-popover li:last-child {
|
||||
border-radius: 0px 0px 8px 8px;
|
||||
}
|
||||
|
||||
.typeahead-popover li:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.typeahead-popover li .text {
|
||||
display: flex;
|
||||
line-height: 20px;
|
||||
flex-grow: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.typeahead-popover li .icon {
|
||||
display: flex;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
user-select: none;
|
||||
margin-right: 8px;
|
||||
line-height: 16px;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.component-picker-menu {
|
||||
width: 200px;
|
||||
}
|
||||
11
packages/blocks-editor/src/Lexical/Theme/custom.scss
Normal file
11
packages/blocks-editor/src/Lexical/Theme/custom.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
@import '../Plugins//DraggableBlockPlugin/index.scss';
|
||||
|
||||
#typeahead-menu {
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
#blocks-editor {
|
||||
p {
|
||||
color: var(--sn-stylekit-editor-foreground-color);
|
||||
}
|
||||
}
|
||||
423
packages/blocks-editor/src/Lexical/Theme/editor.scss
Normal file
423
packages/blocks-editor/src/Lexical/Theme/editor.scss
Normal file
@@ -0,0 +1,423 @@
|
||||
.Lexical__ltr {
|
||||
text-align: left;
|
||||
}
|
||||
.Lexical__rtl {
|
||||
text-align: right;
|
||||
}
|
||||
.Lexical__paragraph {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
.Lexical__quote {
|
||||
margin: 0;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 15px;
|
||||
color: rgb(101, 103, 107);
|
||||
border-left-color: rgb(206, 208, 212);
|
||||
border-left-width: 4px;
|
||||
border-left-style: solid;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.Lexical__h1 {
|
||||
font-size: 24px;
|
||||
color: rgb(5, 5, 5);
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
.Lexical__h2 {
|
||||
font-size: 15px;
|
||||
color: rgb(101, 103, 107);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.Lexical__h3 {
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.Lexical__textBold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.Lexical__textItalic {
|
||||
font-style: italic;
|
||||
}
|
||||
.Lexical__textUnderline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.Lexical__textStrikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.Lexical__textUnderlineStrikethrough {
|
||||
text-decoration: underline line-through;
|
||||
}
|
||||
.Lexical__textSubscript {
|
||||
font-size: 0.8em;
|
||||
vertical-align: sub !important;
|
||||
}
|
||||
.Lexical__textSuperscript {
|
||||
font-size: 0.8em;
|
||||
vertical-align: super;
|
||||
}
|
||||
.Lexical__textCode {
|
||||
background-color: rgb(240, 242, 245);
|
||||
padding: 1px 0.25rem;
|
||||
font-family: Menlo, Consolas, Monaco, monospace;
|
||||
font-size: 94%;
|
||||
}
|
||||
.Lexical__hashtag {
|
||||
background-color: rgba(88, 144, 255, 0.15);
|
||||
border-bottom: 1px solid rgba(88, 144, 255, 0.3);
|
||||
}
|
||||
.Lexical__link {
|
||||
color: rgb(33, 111, 219);
|
||||
text-decoration: none;
|
||||
}
|
||||
.Lexical__link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.Lexical__code {
|
||||
background-color: rgb(240, 242, 245);
|
||||
font-family: Menlo, Consolas, Monaco, monospace;
|
||||
display: block;
|
||||
padding: 8px 8px 8px 52px;
|
||||
line-height: 1.53;
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
tab-size: 2;
|
||||
/* white-space: pre; */
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
}
|
||||
.Lexical__code:before {
|
||||
content: attr(data-gutter);
|
||||
position: absolute;
|
||||
background-color: #eee;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-right: 1px solid #ccc;
|
||||
padding: 8px;
|
||||
color: #777;
|
||||
white-space: pre-wrap;
|
||||
text-align: right;
|
||||
min-width: 25px;
|
||||
}
|
||||
.Lexical__table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
max-width: 100%;
|
||||
overflow-y: scroll;
|
||||
table-layout: fixed;
|
||||
width: calc(100% - 25px);
|
||||
margin: 30px 0;
|
||||
}
|
||||
.Lexical__tableSelected {
|
||||
outline: 2px solid rgb(60, 132, 244);
|
||||
}
|
||||
.Lexical__tableCell {
|
||||
border: 1px solid #bbb;
|
||||
min-width: 75px;
|
||||
vertical-align: top;
|
||||
text-align: start;
|
||||
padding: 6px 8px;
|
||||
position: relative;
|
||||
cursor: default;
|
||||
outline: none;
|
||||
}
|
||||
.Lexical__tableCellSortedIndicator {
|
||||
display: block;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: #999;
|
||||
}
|
||||
.Lexical__tableCellResizer {
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
height: 100%;
|
||||
width: 8px;
|
||||
cursor: ew-resize;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
}
|
||||
.Lexical__tableCellHeader {
|
||||
background-color: #f2f3f5;
|
||||
text-align: start;
|
||||
}
|
||||
.Lexical__tableCellSelected {
|
||||
background-color: #c9dbf0;
|
||||
}
|
||||
.Lexical__tableCellPrimarySelected {
|
||||
border: 2px solid rgb(60, 132, 244);
|
||||
display: block;
|
||||
height: calc(100% - 2px);
|
||||
position: absolute;
|
||||
width: calc(100% - 2px);
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
z-index: 2;
|
||||
}
|
||||
.Lexical__tableCellEditing {
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.Lexical__tableAddColumns {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
background-color: #eee;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
animation: table-controls 0.2s ease;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.Lexical__tableAddColumns:after {
|
||||
background-image: url(#{$blocks-editor-icons-path}/plus.svg);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.Lexical__tableAddColumns:hover {
|
||||
background-color: #c9dbf0;
|
||||
}
|
||||
.Lexical__tableAddRows {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
width: calc(100% - 25px);
|
||||
background-color: #eee;
|
||||
height: 20px;
|
||||
left: 0;
|
||||
animation: table-controls 0.2s ease;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.Lexical__tableAddRows:after {
|
||||
background-image: url(#{$blocks-editor-icons-path}/plus.svg);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.Lexical__tableAddRows:hover {
|
||||
background-color: #c9dbf0;
|
||||
}
|
||||
@keyframes table-controls {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.Lexical__tableCellResizeRuler {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
background-color: rgb(60, 132, 244);
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
.Lexical__tableCellActionButtonContainer {
|
||||
display: block;
|
||||
right: 5px;
|
||||
top: 6px;
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.Lexical__tableCellActionButton {
|
||||
background-color: #eee;
|
||||
display: block;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #222;
|
||||
cursor: pointer;
|
||||
}
|
||||
.Lexical__tableCellActionButton:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
.Lexical__characterLimit {
|
||||
display: inline;
|
||||
background-color: #ffbbbb !important;
|
||||
}
|
||||
.Lexical__ol1 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: 16px;
|
||||
list-style-position: inside;
|
||||
}
|
||||
.Lexical__ol2 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: 16px;
|
||||
list-style-type: upper-alpha;
|
||||
list-style-position: inside;
|
||||
}
|
||||
.Lexical__ol3 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: 16px;
|
||||
list-style-type: lower-alpha;
|
||||
list-style-position: inside;
|
||||
}
|
||||
.Lexical__ol4 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: 16px;
|
||||
list-style-type: upper-roman;
|
||||
list-style-position: inside;
|
||||
}
|
||||
.Lexical__ol5 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: 16px;
|
||||
list-style-type: lower-roman;
|
||||
list-style-position: inside;
|
||||
}
|
||||
.Lexical__ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: 16px;
|
||||
list-style-position: inside;
|
||||
}
|
||||
.Lexical__listItem {
|
||||
margin: 0 32px;
|
||||
}
|
||||
.Lexical__listItemChecked,
|
||||
.Lexical__listItemUnchecked {
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
list-style-type: none;
|
||||
outline: none;
|
||||
}
|
||||
.Lexical__listItemChecked {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.Lexical__listItemUnchecked:before,
|
||||
.Lexical__listItemChecked:before {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
}
|
||||
.Lexical__listItemUnchecked[dir='rtl']:before,
|
||||
.Lexical__listItemChecked[dir='rtl']:before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.Lexical__listItemUnchecked:focus:before,
|
||||
.Lexical__listItemChecked:focus:before {
|
||||
box-shadow: 0 0 0 2px #a6cdfe;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.Lexical__listItemUnchecked:before {
|
||||
border: 1px solid #999;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.Lexical__listItemChecked:before {
|
||||
border: 1px solid rgb(61, 135, 245);
|
||||
border-radius: 2px;
|
||||
background-color: #3d87f5;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.Lexical__listItemChecked:after {
|
||||
content: '';
|
||||
cursor: pointer;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 6px;
|
||||
width: 3px;
|
||||
left: 7px;
|
||||
height: 6px;
|
||||
transform: rotate(45deg);
|
||||
border-width: 0 2px 2px 0;
|
||||
}
|
||||
.Lexical__nestedListItem {
|
||||
list-style-type: none;
|
||||
}
|
||||
.Lexical__nestedListItem:before,
|
||||
.Lexical__nestedListItem:after {
|
||||
display: none;
|
||||
}
|
||||
.Lexical__tokenComment {
|
||||
color: slategray;
|
||||
}
|
||||
.Lexical__tokenPunctuation {
|
||||
color: #999;
|
||||
}
|
||||
.Lexical__tokenProperty {
|
||||
color: #905;
|
||||
}
|
||||
.Lexical__tokenSelector {
|
||||
color: #690;
|
||||
}
|
||||
.Lexical__tokenOperator {
|
||||
color: #9a6e3a;
|
||||
}
|
||||
.Lexical__tokenAttr {
|
||||
color: #07a;
|
||||
}
|
||||
.Lexical__tokenVariable {
|
||||
color: #e90;
|
||||
}
|
||||
.Lexical__tokenFunction {
|
||||
color: #dd4a68;
|
||||
}
|
||||
.Lexical__mark {
|
||||
background: rgba(255, 212, 0, 0.14);
|
||||
border-bottom: 2px solid rgba(255, 212, 0, 0.3);
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.Lexical__markOverlap {
|
||||
background: rgba(255, 212, 0, 0.3);
|
||||
border-bottom: 2px solid rgba(255, 212, 0, 0.7);
|
||||
}
|
||||
.Lexical__mark.selected {
|
||||
background: rgba(255, 212, 0, 0.5);
|
||||
border-bottom: 2px solid rgba(255, 212, 0, 1);
|
||||
}
|
||||
.Lexical__markOverlap.selected {
|
||||
background: rgba(255, 212, 0, 0.7);
|
||||
border-bottom: 2px solid rgba(255, 212, 0, 0.7);
|
||||
}
|
||||
.Lexical__embedBlock {
|
||||
user-select: none;
|
||||
}
|
||||
.Lexical__embedBlockFocus {
|
||||
outline: 2px solid rgb(60, 132, 244);
|
||||
}
|
||||
235
packages/blocks-editor/src/Lexical/Theme/icons.scss
Normal file
235
packages/blocks-editor/src/Lexical/Theme/icons.scss
Normal file
@@ -0,0 +1,235 @@
|
||||
.icon.paragraph {
|
||||
background-image: url(#{$blocks-editor-icons-path}/text-paragraph.svg);
|
||||
}
|
||||
|
||||
.icon.h1 {
|
||||
background-image: url(#{$blocks-editor-icons-path}/type-h1.svg);
|
||||
}
|
||||
|
||||
.icon.h2 {
|
||||
background-image: url(#{$blocks-editor-icons-path}/type-h2.svg);
|
||||
}
|
||||
|
||||
.icon.h3 {
|
||||
background-image: url(#{$blocks-editor-icons-path}/type-h3.svg);
|
||||
}
|
||||
|
||||
.icon.h4 {
|
||||
background-image: url(#{$blocks-editor-icons-path}/type-h4.svg);
|
||||
}
|
||||
|
||||
.icon.h5 {
|
||||
background-image: url(#{$blocks-editor-icons-path}/type-h5.svg);
|
||||
}
|
||||
|
||||
.icon.h6 {
|
||||
background-image: url(#{$blocks-editor-icons-path}/type-h6.svg);
|
||||
}
|
||||
|
||||
.icon.bullet-list,
|
||||
.icon.bullet {
|
||||
background-image: url(#{$blocks-editor-icons-path}/list-ul.svg);
|
||||
}
|
||||
|
||||
.icon.check-list,
|
||||
.icon.check {
|
||||
background-image: url(#{$blocks-editor-icons-path}/square-check.svg);
|
||||
}
|
||||
|
||||
.icon.numbered-list,
|
||||
.icon.number {
|
||||
background-image: url(#{$blocks-editor-icons-path}/list-ol.svg);
|
||||
}
|
||||
|
||||
.icon.quote {
|
||||
background-image: url(#{$blocks-editor-icons-path}/chat-square-quote.svg);
|
||||
}
|
||||
|
||||
.icon.code {
|
||||
background-image: url(#{$blocks-editor-icons-path}/code.svg);
|
||||
}
|
||||
|
||||
.icon.plus {
|
||||
background-image: url(#{$blocks-editor-icons-path}/plus.svg);
|
||||
}
|
||||
|
||||
.icon.caret-right {
|
||||
background-image: url(#{$blocks-editor-icons-path}/caret-right-fill.svg);
|
||||
}
|
||||
|
||||
.icon.dropdown-more {
|
||||
background-image: url(#{$blocks-editor-icons-path}/dropdown-more.svg);
|
||||
}
|
||||
|
||||
.icon.font-color {
|
||||
background-image: url(#{$blocks-editor-icons-path}/font-color.svg);
|
||||
}
|
||||
|
||||
.icon.font-family {
|
||||
background-image: url(#{$blocks-editor-icons-path}/font-family.svg);
|
||||
}
|
||||
|
||||
.icon.bg-color {
|
||||
background-image: url(#{$blocks-editor-icons-path}/bg-color.svg);
|
||||
}
|
||||
|
||||
i.palette {
|
||||
background-image: url(#{$blocks-editor-icons-path}/palette.svg);
|
||||
}
|
||||
|
||||
i.bucket {
|
||||
background-image: url(#{$blocks-editor-icons-path}/paint-bucket.svg);
|
||||
}
|
||||
|
||||
i.bold {
|
||||
background-image: url(#{$blocks-editor-icons-path}/type-bold.svg);
|
||||
}
|
||||
|
||||
i.italic {
|
||||
background-image: url(#{$blocks-editor-icons-path}/type-italic.svg);
|
||||
}
|
||||
|
||||
i.clear {
|
||||
background-image: url(#{$blocks-editor-icons-path}/trash.svg);
|
||||
}
|
||||
|
||||
i.code {
|
||||
background-image: url(#{$blocks-editor-icons-path}/code.svg);
|
||||
}
|
||||
|
||||
i.underline {
|
||||
background-image: url(#{$blocks-editor-icons-path}/type-underline.svg);
|
||||
}
|
||||
|
||||
i.strikethrough {
|
||||
background-image: url(#{$blocks-editor-icons-path}/type-strikethrough.svg);
|
||||
}
|
||||
|
||||
i.subscript {
|
||||
background-image: url(#{$blocks-editor-icons-path}/type-subscript.svg);
|
||||
}
|
||||
|
||||
i.superscript {
|
||||
background-image: url(#{$blocks-editor-icons-path}/type-superscript.svg);
|
||||
}
|
||||
|
||||
i.link {
|
||||
background-image: url(#{$blocks-editor-icons-path}/link.svg);
|
||||
}
|
||||
|
||||
i.horizontal-rule {
|
||||
background-image: url(#{$blocks-editor-icons-path}/horizontal-rule.svg);
|
||||
}
|
||||
|
||||
i.image {
|
||||
background-image: url(#{$blocks-editor-icons-path}/file-image.svg);
|
||||
}
|
||||
|
||||
i.table {
|
||||
background-image: url(#{$blocks-editor-icons-path}/table.svg);
|
||||
}
|
||||
|
||||
i.close {
|
||||
background-image: url(#{$blocks-editor-icons-path}/close.svg);
|
||||
}
|
||||
|
||||
i.figma {
|
||||
background-image: url(#{$blocks-editor-icons-path}/figma.svg);
|
||||
}
|
||||
|
||||
i.poll {
|
||||
background-image: url(#{$blocks-editor-icons-path}/card-checklist.svg);
|
||||
}
|
||||
|
||||
i.tweet {
|
||||
background-image: url(#{$blocks-editor-icons-path}/tweet.svg);
|
||||
}
|
||||
|
||||
i.youtube {
|
||||
background-image: url(#{$blocks-editor-icons-path}/youtube.svg);
|
||||
}
|
||||
|
||||
.icon.left-align,
|
||||
i.left-align {
|
||||
background-image: url(#{$blocks-editor-icons-path}/text-left.svg);
|
||||
}
|
||||
|
||||
i.center-align {
|
||||
background-image: url(#{$blocks-editor-icons-path}/text-center.svg);
|
||||
}
|
||||
|
||||
i.right-align {
|
||||
background-image: url(#{$blocks-editor-icons-path}/text-right.svg);
|
||||
}
|
||||
|
||||
i.justify-align {
|
||||
background-image: url(#{$blocks-editor-icons-path}/justify.svg);
|
||||
}
|
||||
|
||||
i.indent {
|
||||
background-image: url(#{$blocks-editor-icons-path}/indent.svg);
|
||||
}
|
||||
|
||||
i.markdown {
|
||||
background-image: url(#{$blocks-editor-icons-path}/markdown.svg);
|
||||
}
|
||||
|
||||
i.outdent {
|
||||
background-image: url(#{$blocks-editor-icons-path}/outdent.svg);
|
||||
}
|
||||
|
||||
i.undo {
|
||||
background-image: url(#{$blocks-editor-icons-path}/arrow-counterclockwise.svg);
|
||||
}
|
||||
|
||||
i.redo {
|
||||
background-image: url(#{$blocks-editor-icons-path}/arrow-clockwise.svg);
|
||||
}
|
||||
|
||||
i.sticky {
|
||||
background-image: url(#{$blocks-editor-icons-path}/sticky.svg);
|
||||
}
|
||||
|
||||
i.mic {
|
||||
background-image: url(#{$blocks-editor-icons-path}/mic.svg);
|
||||
}
|
||||
|
||||
i.import {
|
||||
background-image: url(#{$blocks-editor-icons-path}/upload.svg);
|
||||
}
|
||||
|
||||
i.export {
|
||||
background-image: url(#{$blocks-editor-icons-path}/download.svg);
|
||||
}
|
||||
|
||||
i.diagram-2 {
|
||||
background-image: url(#{$blocks-editor-icons-path}/diagram-2.svg);
|
||||
}
|
||||
|
||||
i.user {
|
||||
background-image: url(#{$blocks-editor-icons-path}/user.svg);
|
||||
}
|
||||
|
||||
i.equation {
|
||||
background-image: url(#{$blocks-editor-icons-path}/plus-slash-minus.svg);
|
||||
}
|
||||
|
||||
i.gif {
|
||||
background-image: url(#{$blocks-editor-icons-path}/filetype-gif.svg);
|
||||
}
|
||||
|
||||
i.copy {
|
||||
background-image: url(#{$blocks-editor-icons-path}/copy.svg);
|
||||
}
|
||||
|
||||
i.success {
|
||||
background-image: url(#{$blocks-editor-icons-path}/success.svg);
|
||||
}
|
||||
|
||||
i.prettier {
|
||||
background-image: url(#{$blocks-editor-icons-path}/prettier.svg);
|
||||
}
|
||||
|
||||
i.prettier-error {
|
||||
background-image: url(#{$blocks-editor-icons-path}/prettier-error.svg);
|
||||
}
|
||||
5
packages/blocks-editor/src/Lexical/Theme/lexical.scss
Normal file
5
packages/blocks-editor/src/Lexical/Theme/lexical.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@import 'base';
|
||||
@import 'component_picker';
|
||||
@import 'custom';
|
||||
@import 'editor';
|
||||
@import 'icons';
|
||||
Reference in New Issue
Block a user