@blocknote/core
Version:
A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap.
2 lines (1 loc) • 12.7 kB
CSS
.bn-block-outer{line-height:1.5;transition:margin .2s}.bn-block{display:flex;flex-direction:column}.bn-block-content{padding:3px 0;transition:font-size .2s;width:100%}.bn-block-content:not(:has(.bn-inline-content)){display:flex}.bn-block-content:before{transition:all .2s}.bn-block-content.ProseMirror-selectednode>*,.ProseMirror-selectednode>.bn-block-content>*{border-radius:4px;outline:4px solid rgb(100,160,255)}.bn-inline-content{width:100%}.bn-block-group .bn-block-group{margin-left:1.5em}.bn-block-group .bn-block-group>.bn-block-outer{position:relative}.bn-block-group .bn-block-group>.bn-block-outer:not([data-prev-depth-changed]):before{content:" ";display:inline;position:absolute;left:-20px;height:100%;transition:all .2s .1s}.bn-block-group .bn-block-group>.bn-block-outer[data-prev-depth-change="-2"]:before{height:0}.bn-inline-content code{font-family:monospace}[data-prev-depth-change="1"]{--x: 1}[data-prev-depth-change="2"]{--x: 2}[data-prev-depth-change="3"]{--x: 3}[data-prev-depth-change="4"]{--x: 4}[data-prev-depth-change="5"]{--x: 5}[data-prev-depth-change="-1"]{--x: -1}[data-prev-depth-change="-2"]{--x: -2}[data-prev-depth-change="-3"]{--x: -3}[data-prev-depth-change="-4"]{--x: -4}[data-prev-depth-change="-5"]{--x: -5}.bn-block-outer[data-prev-depth-change]{margin-left:calc(10px * var(--x))}.bn-block-outer[data-prev-depth-change] .bn-block-outer[data-prev-depth-change]{margin-left:0}[data-content-type=heading]{--level: 3em}[data-content-type=heading][data-level="2"]{--level: 2em}[data-content-type=heading][data-level="3"]{--level: 1.3em}[data-prev-level="1"]{--prev-level: 3em}[data-prev-level="2"]{--prev-level: 2em}[data-prev-level="3"]{--prev-level: 1.3em}.bn-block-outer[data-prev-type=heading]>.bn-block>.bn-block-content{font-size:var(--prev-level);font-weight:700}.bn-block-outer:not([data-prev-type])>.bn-block>.bn-block-content[data-content-type=heading],.bn-block-outer:not([data-prev-type])>.bn-block>div[data-type=modification]>div[data-type=modification]>.bn-block-content[data-content-type=heading]{font-size:var(--level);font-weight:700}[data-content-type=quote] blockquote{border-left:2px solid rgb(125,121,122);color:#7d797a;margin:0;padding-left:1em}.bn-block-content:before{margin-right:0;content:"";display:inline}.bn-block-content[data-content-type=numberedListItem]{display:flex;gap:.5em}[data-content-type=numberedListItem]{--index: attr(data-index)}[data-prev-type=numberedListItem]{--prev-index: attr(data-prev-index)}.bn-block-outer[data-prev-type=numberedListItem]:not([data-prev-index=none])>.bn-block>.bn-block-content:before{content:var(--prev-index) "."}.bn-block-outer:not([data-prev-type])>.bn-block>.bn-block-content[data-content-type=numberedListItem]:before,.bn-block-outer:not([data-prev-type])>.bn-block>div[data-type=modification]>.bn-block-content[data-content-type=numberedListItem]:before{content:var(--index) "."}.bn-block-content[data-content-type=bulletListItem]{display:flex;gap:.5em}.bn-block-content[data-content-type=checkListItem]>div{display:flex;width:100%}.bn-block-content[data-content-type=checkListItem]>div>div>input{margin:0;margin-inline-end:.5em;cursor:pointer}.bn-block-content[data-content-type=checkListItem][data-checked=true] .bn-inline-content{text-decoration:line-through}.bn-block-content[data-text-alignment=center]{justify-content:center}.bn-block-content[data-text-alignment=right]{justify-content:flex-end}.bn-block-outer[data-prev-type=bulletListItem]>.bn-block>.bn-block-content:before{content:"•"}.bn-block-outer:not([data-prev-type])>.bn-block>.bn-block-content[data-content-type=bulletListItem]:before,.bn-block-outer:not([data-prev-type])>.bn-block>div[data-type=modification]>.bn-block-content[data-content-type=bulletListItem]:before{content:"•"}[data-content-type=bulletListItem]~.bn-block-group>.bn-block-outer[data-prev-type=bulletListItem]>.bn-block>.bn-block-content:before{content:"◦"}[data-content-type=bulletListItem]~.bn-block-group>.bn-block-outer:not([data-prev-type])>.bn-block>.bn-block-content[data-content-type=bulletListItem]:before,[data-content-type=bulletListItem]~.bn-block-group>.bn-block-outer:not([data-prev-type])>.bn-block>div[data-type=modification]>.bn-block-content[data-content-type=bulletListItem]:before{content:"◦"}[data-content-type=bulletListItem]~.bn-block-group [data-content-type=bulletListItem]~.bn-block-group>.bn-block-outer[data-prev-type=bulletListItem]>.bn-block>.bn-block-content:before{content:"▪"}[data-content-type=bulletListItem]~.bn-block-group [data-content-type=bulletListItem]~.bn-block-group>.bn-block-outer:not([data-prev-type])>.bn-block>.bn-block-content[data-content-type=bulletListItem]:before,[data-content-type=bulletListItem]~.bn-block-group [data-content-type=bulletListItem]~.bn-block-group>.bn-block-outer:not([data-prev-type])>.bn-block>div[data-type=modification]>.bn-block-content[data-content-type=bulletListItem]:before{content:"▪"}.bn-block-content[data-content-type=codeBlock]{position:relative;background-color:#161616;color:#fff;border-radius:8px}.bn-block-content[data-content-type=codeBlock]>pre{white-space:pre;overflow-x:auto;margin:0;width:100%;-moz-tab-size:2;tab-size:2;padding:24px}.bn-block-content[data-content-type=codeBlock]>div{outline:none}.bn-block-content[data-content-type=codeBlock]>div>select{outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;border:none;cursor:pointer;background-color:transparent;position:absolute;top:8px;left:18px;font-size:.8em;color:#fff;opacity:0;transition:opacity .3s;transition-delay:1s}.bn-block-content[data-content-type=codeBlock]>div>select>option{color:#000}.bn-block-content[data-content-type=codeBlock]:hover>div>select,.bn-block-content[data-content-type=codeBlock]>div>select:focus{opacity:.5;transition-delay:.1s}.bn-block-content[data-content-type=pageBreak]>div{width:100%;height:0;border-top:dotted rgb(125,121,122) 2px;margin-block:11px}@media print{.bn-block-content[data-content-type=pageBreak]>div{page-break-after:always}}[data-file-block] .bn-file-block-content-wrapper{cursor:pointer;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}[data-file-block] .bn-file-block-content-wrapper:has(.bn-add-file-button),[data-file-block] .bn-file-block-content-wrapper:has(.bn-file-name-with-icon){width:100%}[data-file-block] .bn-add-file-button{align-items:center;background-color:#f2f1ee;border-radius:4px;color:#7d797a;display:flex;gap:10px;padding:12px}.bn-editor[contenteditable=true] [data-file-block] .bn-add-file-button:hover,[data-file-block] .bn-file-name-with-icon:hover,.ProseMirror-selectednode .bn-file-name-with-icon{background-color:#e1e1e1}[data-file-block] .bn-add-file-button-icon,[data-file-block] .bn-file-icon{width:24px;height:24px}[data-file-block] .bn-add-file-button-text{font-size:.9rem}[data-file-block] .bn-file-name-with-icon{border-radius:4px;display:flex;gap:4px;padding:4px}[data-file-block] .bn-file-caption{font-size:.8em;padding-block:4px;word-break:break-word}[data-file-block] .bn-file-caption:empty{padding-block:0}[data-file-block] .bn-resize-handle{position:absolute;width:8px;height:30px;background-color:#000;border:1px solid white;border-radius:4px;cursor:ew-resize}[data-file-block] .bn-visual-media-wrapper{display:flex;align-items:center;position:relative;max-width:100%}[data-file-block] .bn-visual-media{border-radius:4px;width:100%}[data-content-type=audio]>.bn-file-block-content-wrapper,.bn-audio{width:100%}.bn-inline-content:has(>.ProseMirror-trailingBreak:only-child):before{pointer-events:none;height:0;position:absolute;font-style:italic}[data-text-color=gray]{color:#9b9a97}[data-text-color=brown]{color:#64473a}[data-text-color=red]{color:#e03e3e}[data-text-color=orange]{color:#d9730d}[data-text-color=yellow]{color:#dfab01}[data-text-color=green]{color:#4d6461}[data-text-color=blue]{color:#0b6e99}[data-text-color=purple]{color:#6940a5}[data-text-color=pink]{color:#ad1a72}[data-background-color=gray]{background-color:#ebeced}[data-background-color=brown]{background-color:#e9e5e3}[data-background-color=red]{background-color:#fbe4e4}[data-background-color=orange]{background-color:#f6e9d9}[data-background-color=yellow]{background-color:#fbf3db}[data-background-color=green]{background-color:#ddedea}[data-background-color=blue]{background-color:#ddebf1}[data-background-color=purple]{background-color:#eae4f2}[data-background-color=pink]{background-color:#f4dfeb}[data-text-alignment=left]{justify-content:flex-start;text-align:left!important}[data-text-alignment=center]{justify-content:center;text-align:center}[data-text-alignment=right]{justify-content:flex-end;text-align:right!important}[data-text-alignment=justify]{justify-content:flex-start;text-align:justify}.bn-block-column-list{display:flex;flex-direction:row}.bn-block-column{flex:1;padding:12px 20px;overflow-x:auto}.bn-block-column:first-child{padding-left:0}.bn-block-column:last-child{padding-right:0}.bn-thread-mark:not([data-orphan=true]){background:#ffc80026}.bn-thread-mark .bn-thread-mark-selected{background:#ffc80040}.ProseMirror .tableWrapper{overflow-x:auto}.ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;overflow:hidden}.ProseMirror td,.ProseMirror th{vertical-align:top;box-sizing:border-box;position:relative}.ProseMirror td:not([data-colwidth]):not(.column-resize-dragging),.ProseMirror th:not([data-colwidth]):not(.column-resize-dragging){min-width:var(--default-cell-min-width)}.ProseMirror .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;z-index:20;background-color:#adf;pointer-events:none}.ProseMirror.resize-cursor{cursor:ew-resize;cursor:col-resize}.ProseMirror .selectedCell:after{z-index:2;position:absolute;content:"";left:0;right:0;top:0;bottom:0;background:#c8c8ff66;pointer-events:none}.bn-editor{outline:none;padding-inline:54px;--N800: #172b4d;--N40: #dfe1e6}.bn-comment-editor{width:100%;padding:0}.bn-comment-editor .bn-editor{padding:0}.bn-root{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bn-root *,.bn-root *:before,.bn-root *:after{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}.bn-default-styles p,.bn-default-styles h1,.bn-default-styles h2,.bn-default-styles h3,.bn-default-styles li{margin:0;padding:0;font-size:inherit;min-width:2px}.bn-default-styles{font-size:16px;font-weight:400;font-family:Inter,SF Pro Display,-apple-system,BlinkMacSystemFont,Open Sans,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bn-table-drop-cursor{position:absolute;z-index:20;background-color:#adf;pointer-events:none}.bn-drag-preview{position:absolute;top:0;left:0;padding:10px;opacity:.001}.bn-editor .bn-collaboration-cursor__base{position:relative}.bn-editor .bn-collaboration-cursor__base .bn-collaboration-cursor__caret{position:absolute;width:2px;top:1px;bottom:-2px;left:-1px}.bn-editor .bn-collaboration-cursor__base .bn-collaboration-cursor__label{pointer-events:none;border-radius:0 1.5px 1.5px 0;font-size:12px;font-style:normal;font-weight:600;line-height:normal;left:0;overflow:hidden;position:absolute;white-space:nowrap;-webkit-user-select:none;user-select:none;color:transparent;max-height:5px;max-width:4px;padding:0;top:-1px;transition:all .2s}.bn-editor .bn-collaboration-cursor__base[data-active] .bn-collaboration-cursor__label{color:#0d0d0d;max-height:1.1rem;max-width:20rem;padding:.1rem .3rem;top:-17px;left:0;border-radius:3px 3px 3px 0;transition:all .2s}.bn-editor [data-content-type=table] .tableWrapper{position:relative;top:-16px;left:-16px;min-width:calc(100% + 16px);padding-bottom:16px;overflow-y:hidden}.bn-editor [data-content-type=table] .tableWrapper-inner{padding:16px}.bn-editor [data-content-type=table] table{width:auto;word-break:break-word}.bn-editor [data-content-type=table] th,.bn-editor [data-content-type=table] td{border:1px solid #ddd;padding:5px 10px}.bn-editor [data-content-type=table] th{font-weight:700;text-align:left}.ProseMirror td,.ProseMirror th{min-width:auto}.ProseMirror td:not([colwidth]):not(.column-resize-dragging),.ProseMirror th:not([colwidth]):not(.column-resize-dragging){min-width:var(--default-cell-min-width)}.prosemirror-dropcursor-block{transition-property:top,bottom;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.prosemirror-dropcursor-vertical{transition-property:left,right}[data-show-selection]{background-color:highlight;padding:2px 0}