@bettaibi/react-blocknote/dist/style.css

A modern, versatile rich text editor component for React applications with an elegant UI and Notion-like functionality. Supports both React 18 and React 19.

.blocknote-editor{width:100%;height:100%;position:relative;overflow:visible}.blocknote-toolbar{opacity:0;pointer-events:none;scrollbar-color:#d4d4d4 transparent;scrollbar-width:thin;z-index:1000;background-color:#fff;border:1px solid #e3e8ef;border-radius:8px;width:auto;max-width:90%;height:auto;min-height:44px;padding:.5rem;transition:opacity .3s,transform .3s;position:fixed;bottom:1rem;left:50%;overflow-x:auto;transform:translate(-50%,100%);box-shadow:0 2px 8px #0000001a}.blocknote-toolbar,.blocknote-toolbar-main{flex-wrap:nowrap;gap:.25rem;display:flex}.blocknote-toolbar::-webkit-scrollbar{height:4px}.blocknote-toolbar::-webkit-scrollbar-track{background:0 0}.blocknote-toolbar::-webkit-scrollbar-thumb{background-color:#d4d4d4;border-radius:10px}.blocknote-editor:focus-within .blocknote-toolbar,.blocknote-toolbar.is-dropdown-active,.blocknote-toolbar:hover{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}.blocknote-toolbar-group{border-left:1px solid #e3e8ef;flex-wrap:nowrap;gap:.25rem;margin-left:.25rem;padding-left:.25rem;display:flex}.blocknote-toolbar button{cursor:pointer;background-color:#fff;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;min-width:36px;min-height:36px;padding:.5rem;font-size:.875rem;display:flex}.blocknote-toolbar button:hover{background-color:#f0f0f0}.blocknote-toolbar button.is-active{background-color:#e0e0e0;border-color:#999}.blocknote-toolbar button:disabled{cursor:not-allowed;opacity:.5}.ProseMirror{outline:none;min-height:100px;padding:1rem}.ProseMirror p{margin:0}.ProseMirror h1{margin:.67em 0;font-size:2em}.ProseMirror h2{margin:.83em 0;font-size:1.5em}.ProseMirror ol,.ProseMirror ul{margin:.5em 0;padding-left:1.5em}.ProseMirror li{margin:.25em 0}.ProseMirror code{background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:3px;padding:.2em .4em;font-family:monospace;font-size:.9em}.ProseMirror pre{background-color:#0000;border:1px solid #e3e8ef;border-radius:6px;padding:1em;overflow-x:auto}.ProseMirror pre code{background-color:#0000;border:none;padding:0;font-size:.9em;display:block}.ProseMirror blockquote{color:#666;border-left:3px solid #ccc;margin:.5em 0;padding-left:1em}.ProseMirror img{max-width:100%;height:auto}.ProseMirror a{color:#06c;text-decoration:none}.ProseMirror a:hover{text-decoration:underline}.ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;margin:0;overflow:hidden}.ProseMirror td,.ProseMirror th{box-sizing:border-box;vertical-align:top;border:2px solid #ced4da;min-width:1em;padding:3px 5px;position:relative}.ProseMirror th{text-align:left;background-color:#f8f9fa;font-weight:700}.ProseMirror .selectedCell:after{content:"";pointer-events:none;z-index:2;background:#c8c8ff66;position:absolute;top:0;bottom:0;left:0;right:0}.ProseMirror .column-resize-handle{pointer-events:none;background-color:#adf;width:4px;position:absolute;top:0;bottom:-2px;right:-2px}@media (max-width:768px){.blocknote-toolbar{gap:.2rem;max-width:95%;padding:.35rem}.blocknote-toolbar button{min-width:32px;min-height:32px;padding:.35rem}.blocknote-toolbar-group{gap:.2rem;margin-left:.15rem;padding-left:.15rem}.blocknote-toolbar-main{gap:.2rem}}@media (max-width:480px){.blocknote-toolbar{max-width:98%;padding:.25rem;bottom:.5rem}.blocknote-toolbar button{min-width:28px;min-height:28px;padding:.25rem}.blocknote-toolbar button svg{width:18px;height:18px}}.blocknote-popover{box-sizing:border-box;z-index:1000;background-color:#fff;border:1px solid #e3e8ef;border-radius:8px;width:360px;max-width:95vw;animation:.15s ease-out fadeIn;overflow:hidden;box-shadow:0 2px 10px #0000001a}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.blocknote-popover-content{box-sizing:border-box;width:100%;padding:16px}.blocknote-popover-title{color:#111827;margin-top:0;margin-bottom:16px;font-size:16px;font-weight:600}.blocknote-popover-arrow{fill:#fff;filter:drop-shadow(0 -1px 1px #0000001a)}.blocknote-popover form{width:100%}.blocknote-form-field{box-sizing:border-box;width:100%;margin-bottom:12px}.blocknote-form-label{color:#4b5563;margin-bottom:4px;font-size:14px;font-weight:500;display:block}.blocknote-form-input{box-sizing:border-box;border:1px solid #d1d5db;border-radius:6px;outline:none;width:100%;max-width:100%;padding:8px 12px;font-size:14px;transition:border-color .2s,box-shadow .2s;display:block}.blocknote-form-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f633}.blocknote-form-actions{justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.blocknote-form-button{cursor:pointer;border:none;border-radius:6px;padding:6px 12px;font-size:14px;font-weight:500;transition:background-color .2s}.blocknote-form-button-cancel{color:#4b5563;background-color:#f3f4f6}.blocknote-form-button-cancel:hover{background-color:#e5e7eb}.blocknote-form-button-submit{color:#fff;background-color:#3b82f6}.blocknote-form-button-submit:hover{background-color:#2563eb}@media (max-width:480px){.blocknote-popover{width:280px}}.table-button-content{align-items:center;gap:2px;display:flex}.blocknote-dropdown{box-sizing:border-box;z-index:1000;background-color:#fff;border:1px solid #e3e8ef;border-radius:8px;min-width:220px;max-width:95vw;padding:6px;animation:.15s ease-out fadeIn;box-shadow:0 2px 10px #0000001a}.blocknote-dropdown-separator{background-color:#e5e7eb;height:1px;margin:4px 0}.blocknote-dropdown-item{color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:4px;outline:none;align-items:center;gap:8px;padding:8px 12px;font-size:14px;transition:background-color .2s;display:flex}.blocknote-dropdown-item:focus,.blocknote-dropdown-item:hover{background-color:#f3f4f6}.blocknote-dropdown-item[data-disabled]{cursor:not-allowed;opacity:.5}.blocknote-dropdown-item[data-disabled]:hover{background-color:#0000}.blocknote-dropdown-item-danger{color:#dc2626}.blocknote-dropdown-item-danger:focus,.blocknote-dropdown-item-danger:hover{background-color:#dc26261a}.blocknote-dropdown-arrow{fill:#fff;filter:drop-shadow(0 -1px 1px #0000001a)}@media (max-width:480px){.blocknote-dropdown{min-width:200px}}.blocknote-bubble-menu{z-index:1000;border:1px solid #e3e8ef;border-radius:8px;gap:4px;padding:4px 8px;box-shadow:0 2px 8px #00000026}.blocknote-bubble-menu,.blocknote-bubble-menu button{background-color:#fff;align-items:center;display:flex}.blocknote-bubble-menu button{color:#374151;cursor:pointer;border:none;border-radius:4px;justify-content:center;min-width:30px;min-height:30px;padding:4px;transition:background-color .2s}.blocknote-bubble-menu button:hover{background-color:#f3f4f6}.blocknote-bubble-menu button.is-active{color:#1f2937;background-color:#e0e0e0}.bubble-menu-separator{background-color:#e5e7eb;width:1px;height:20px;margin:0 2px}.bubble-menu-dropdown-container{gap:4px;display:flex}.bubble-menu-dropdown-container .blocknote-dropdown{min-width:200px}.bubble-menu-dropdown-container .heading-button-content,.bubble-menu-dropdown-container .table-button-content{justify-content:center;align-items:center;display:flex}@media (max-width:768px){.blocknote-bubble-menu{gap:2px;padding:3px 6px}.blocknote-bubble-menu button{min-width:26px;min-height:26px}.bubble-menu-separator{margin:0 1px}}@media (max-width:480px){.blocknote-bubble-menu{flex-wrap:wrap;justify-content:center;max-width:90vw}}.ProseMirror p.is-editor-empty:first-child:before{color:#9aa4b2;content:attr(data-placeholder);float:left;pointer-events:none;height:0;font-size:20px}.heading-button-content,.table-button-content{align-items:center;gap:2px;display:flex}.dropdown-caret{margin-left:2px;transform:translateY(1px)}