feat: enhance rich text editor with new features and plugins
All checks were successful
CI - Build and Push / Build and Push Docker Image (push) Successful in 23s
All checks were successful
CI - Build and Push / Build and Push Docker Image (push) Successful in 23s
- Added support for additional Lexical plugins: link, markdown, table, and checklist. - Implemented Markdown shortcuts and transformers for horizontal rules and tables. - Updated editor theme and styles to accommodate new elements like tables and links. - Improved the overall functionality of the rich text editor with new matchers for URLs and emails.
This commit is contained in:
@@ -146,3 +146,103 @@
|
||||
.editor-nested-listitem {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/* Horizontal Rule */
|
||||
.editor-hr {
|
||||
border: none;
|
||||
border-top: 2px solid #ccc;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.editor-link {
|
||||
color: #0066cc;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.editor-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.editor-table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
overflow-y: scroll;
|
||||
overflow-x: scroll;
|
||||
table-layout: fixed;
|
||||
width: max-content;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.editor-table-cell {
|
||||
border: 1px solid #ccc;
|
||||
min-width: 75px;
|
||||
vertical-align: top;
|
||||
text-align: start;
|
||||
padding: 6px 8px;
|
||||
position: relative;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.editor-table-cell-header {
|
||||
background-color: #f4f4f4;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Checklist */
|
||||
.editor-listitem-checked,
|
||||
.editor-listitem-unchecked {
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
list-style-type: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.editor-listitem-checked {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.editor-listitem-unchecked:before,
|
||||
.editor-listitem-checked:before {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.editor-listitem-unchecked:before {
|
||||
border: 1px solid #999;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.editor-listitem-checked:before {
|
||||
border: 1px solid #0066cc;
|
||||
border-radius: 2px;
|
||||
background-color: #0066cc;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.5 2l-7.5 7.5-3.5-3.5-1.5 1.5 5 5 9-9z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.editor-listitem-checked[dir='rtl']:before,
|
||||
.editor-listitem-unchecked[dir='rtl']:before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.editor-listitem-checked[dir='rtl'],
|
||||
.editor-listitem-unchecked[dir='rtl'] {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user