@tryghost/koenig-lexical 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Koenig - Lexical edition
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Early stage re-write of Ghost's editor, using Lexical as the editor framework in place of mobiledoc-kit.
|
|
4
4
|
|
|
5
5
|
## Development
|
|
6
6
|
|
|
@@ -14,15 +14,15 @@ The main module source. `/src/index.js` is the entry point for the exposed modul
|
|
|
14
14
|
|
|
15
15
|
**`/demo`**
|
|
16
16
|
|
|
17
|
-
Used for developing the
|
|
17
|
+
Used for developing/demoing the editor. Renders a blank editor with all features enabled.
|
|
18
18
|
|
|
19
19
|
### Set up details
|
|
20
20
|
|
|
21
21
|
**CSS**
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
Styling should be done using Tailwind classes where possible.
|
|
24
24
|
|
|
25
|
-
All styles are scoped under
|
|
25
|
+
All styles are scoped under `.koenig-lexical` class to avoid clashes and keep styling as isolated as possible. PostCSS nesting support is present to make this easier.
|
|
26
26
|
|
|
27
27
|
- Styles located in `src/styles/` are included in the final built module.
|
|
28
28
|
- Styles located in `demo/*.css` are only used in the demo and will not be included in the built module.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.koenig-lexical *,.koenig-lexical :before,.koenig-lexical :after{box-sizing:border-box;max-width:revert;max-height:revert;min-width:revert;min-height:revert;border-width:0;border-style:solid;border-color:currentColor}.koenig-lexical :before,.koenig-lexical :after{--tw-content: ""}.koenig-lexical html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.koenig-lexical body{margin:0;line-height:inherit}.koenig-lexical hr{height:0;color:inherit;border-top-width:1px}.koenig-lexical abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.koenig-lexical h1,.koenig-lexical h2,.koenig-lexical h3,.koenig-lexical h4,.koenig-lexical h5,.koenig-lexical h6{font-size:inherit;font-weight:inherit}.koenig-lexical a{color:inherit;text-decoration:inherit}.koenig-lexical b,.koenig-lexical strong{font-weight:bolder}.koenig-lexical code,.koenig-lexical kbd,.koenig-lexical samp,.koenig-lexical pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}.koenig-lexical small{font-size:80%}.koenig-lexical sub,.koenig-lexical sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.koenig-lexical sub{bottom:-.25em}.koenig-lexical sup{top:-.5em}.koenig-lexical table{text-indent:0;border-color:inherit;border-collapse:collapse}.koenig-lexical button,.koenig-lexical input,.koenig-lexical optgroup,.koenig-lexical select,.koenig-lexical textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}.koenig-lexical button,.koenig-lexical select{text-transform:none}.koenig-lexical button,.koenig-lexical [type=button],.koenig-lexical [type=reset],.koenig-lexical [type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}.koenig-lexical :-moz-focusring{outline:none}.koenig-lexical :-moz-ui-invalid{box-shadow:none}.koenig-lexical progress{vertical-align:baseline}.koenig-lexical ::-webkit-inner-spin-button,.koenig-lexical ::-webkit-outer-spin-button{height:auto}.koenig-lexical [type=search]{-webkit-appearance:textfield;outline-offset:-2px}.koenig-lexical ::-webkit-search-decoration{-webkit-appearance:none}.koenig-lexical ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.koenig-lexical summary{display:list-item}.koenig-lexical blockquote,.koenig-lexical dl,.koenig-lexical dd,.koenig-lexical h1,.koenig-lexical h2,.koenig-lexical h3,.koenig-lexical h4,.koenig-lexical h5,.koenig-lexical h6,.koenig-lexical hr,.koenig-lexical figure,.koenig-lexical p,.koenig-lexical pre{margin:0}.koenig-lexical fieldset{margin:0;padding:0}.koenig-lexical legend{padding:0}.koenig-lexical ol,.koenig-lexical ul,.koenig-lexical menu{list-style:none;margin:0;padding:0}.koenig-lexical textarea{resize:vertical}.koenig-lexical input::-moz-placeholder,.koenig-lexical textarea::-moz-placeholder{opacity:1;color:#dde1e5}.koenig-lexical input::placeholder,.koenig-lexical textarea::placeholder{opacity:1;color:#dde1e5}.koenig-lexical img,.koenig-lexical svg,.koenig-lexical video,.koenig-lexical canvas,.koenig-lexical audio,.koenig-lexical iframe,.koenig-lexical embed,.koenig-lexical object{display:block;vertical-align:middle}.koenig-lexical img,.koenig-lexical video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(20 184 255 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(20 184 255 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(20 184 255 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.koenig-lexical *{font-size:1.7rem;font-weight:300;letter-spacing:.1px;color:var(--grey-900);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}.koenig-lexical [contenteditable]{outline:none}.koenig-lexical ::-moz-selection{background:var(--grey-200)}.koenig-lexical ::selection{background:var(--grey-200)}.koenig-lexical .kg-prose :where(p,h1,h2,h3,h4,h5,h6,blockquote,aside):not(:where([class~="not-kg-prose"] *)){margin:1.6rem 0 0;min-width:100%;max-width:100%}.koenig-lexical .kg-prose :where(h1,h2,h3,h4,h5,h6):not(:where([class~="not-kg-prose"] *)){font-family:Inter,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-weight:700;color:var(--black)}.koenig-lexical .kg-prose h1 strong,.koenig-lexical .kg-prose h2 strong,.koenig-lexical .kg-prose h3 strong,.koenig-lexical .kg-prose h4 strong,.koenig-lexical .kg-prose h5 strong,.koenig-lexical .kg-prose h6 strong{font-weight:800}.koenig-lexical .kg-prose :where(h1):not(:where([class~="not-kg-prose"] *)){font-size:4.4rem;line-height:1.15em;letter-spacing:-.015em}.koenig-lexical .kg-prose :where(h2):not(:where([class~="not-kg-prose"] *)){font-size:3.2rem;line-height:1.2em;letter-spacing:-.014em}.koenig-lexical .kg-prose :where(h3):not(:where([class~="not-kg-prose"] *)){font-size:2.5rem;line-height:1.3em;letter-spacing:-.013em}.koenig-lexical .kg-prose :where(h4):not(:where([class~="not-kg-prose"] *)){font-size:2.2rem;line-height:1.35em;letter-spacing:-.011em}.koenig-lexical .kg-prose :where(h5):not(:where([class~="not-kg-prose"] *)){font-size:2rem;line-height:1.35em;font-weight:700;letter-spacing:-.011em}.koenig-lexical .kg-prose :where(h6):not(:where([class~="not-kg-prose"] *)){font-size:1.85rem;line-height:1.4em;font-weight:700;letter-spacing:-.008em}.koenig-lexical .kg-prose p+h1,.koenig-lexical .kg-prose p+h2,.koenig-lexical .kg-prose p+h3,.koenig-lexical .kg-prose p+h4,.koenig-lexical .kg-prose p+h5,.koenig-lexical .kg-prose p+h6,.koenig-lexical .kg-prose blockquote+h1,.koenig-lexical .kg-prose blockquote+h2,.koenig-lexical .kg-prose blockquote+h3,.koenig-lexical .kg-prose blockquote+h4,.koenig-lexical .kg-prose blockquote+h5,.koenig-lexical .kg-prose blockquote+h6,.koenig-lexical .kg-prose aside+h1,.koenig-lexical .kg-prose aside+h2,.koenig-lexical .kg-prose aside+h3,.koenig-lexical .kg-prose aside+h4,.koenig-lexical .kg-prose aside+h5,.koenig-lexical .kg-prose aside+h6,.koenig-lexical .kg-prose ul+h1,.koenig-lexical .kg-prose ul+h2,.koenig-lexical .kg-prose ul+h3,.koenig-lexical .kg-prose ul+h4,.koenig-lexical .kg-prose ul+h5,.koenig-lexical .kg-prose ul+h6,.koenig-lexical .kg-prose ol+h1,.koenig-lexical .kg-prose ol+h2,.koenig-lexical .kg-prose ol+h3,.koenig-lexical .kg-prose ol+h4,.koenig-lexical .kg-prose ol+h5,.koenig-lexical .kg-prose ol+h6{margin:4.8rem 0 0}.koenig-lexical .kg-prose h1+h1{margin:1.4rem 0 0}.koenig-lexical .kg-prose h2+h1,.koenig-lexical .kg-prose h3+h1{margin:1rem 0 0}.koenig-lexical .kg-prose h4+h1,.koenig-lexical .kg-prose h5+h1{margin:.8rem 0 0}.koenig-lexical .kg-prose h6+h1{margin:.6rem 0 0}.koenig-lexical .kg-prose div+h1{margin:4.8rem 0 0}.koenig-lexical .kg-prose h1+h2{margin:1.6rem 0 0}.koenig-lexical .kg-prose h2+h2,.koenig-lexical .kg-prose h3+h2,.koenig-lexical .kg-prose h4+h2,.koenig-lexical .kg-prose .koenig-react__editor h5+h2{margin:.8rem 0 0}.koenig-lexical .kg-prose h6+h2{margin:.4rem 0 0}.koenig-lexical .kg-prose div+h2{margin:4.8rem 0 0}.koenig-lexical .kg-prose h1+h3,.koenig-lexical .kg-prose h2+h3,.koenig-lexical .kg-prose h1+h4,.koenig-lexical .kg-prose h2+h4,.koenig-lexical .kg-prose h1+h5,.koenig-lexical .kg-prose h2+h5,.koenig-lexical .kg-prose h1+h6,.koenig-lexical .kg-prose h2+h6{margin:1.2rem 0 0}.koenig-lexical .kg-prose h3+h4{margin:.8rem 0 0}.koenig-lexical .kg-prose h3+h3,.koenig-lexical .kg-prose h4+h3,.koenig-lexical .kg-prose h5+h3,.koenig-lexical .kg-prose h4+h4,.koenig-lexical .kg-prose h5+h4,.koenig-lexical .kg-prose h3+h5,.koenig-lexical .kg-prose h4+h5,.koenig-lexical .kg-prose h5+h5,.koenig-lexical .kg-prose h3+h6,.koenig-lexical .kg-prose h4+h6{margin:.8rem 0 0}.koenig-lexical .kg-prose h5+h6{margin:.4rem 0 0}.koenig-lexical .kg-prose h6+h3,.koenig-lexical .kg-prose h6+h4,.koenig-lexical .kg-prose h6+h5,.koenig-lexical .kg-prose h6+h6{margin:.4rem 0 0}.koenig-lexical .kg-prose div+h3,.koenig-lexical .kg-prose div+h4,.koenig-lexical .kg-prose div+h5,.koenig-lexical .kg-prose div+h6{margin:4.8rem 0 0}.koenig-lexical .kg-prose h1:first-child,.koenig-lexical .kg-prose h2:first-child,.koenig-lexical .kg-prose h3:first-child,.koenig-lexical .kg-prose h4:first-child,.koenig-lexical .kg-prose .koenig-react__editor h5:first-child,.koenig-lexical .kg-prose h6:first-child{margin-top:0rem}@media (max-width: 500px){.koenig-lexical .kg-prose :where(h1):not(:where([class~="not-kg-prose"] *)){font-size:3.2rem}.koenig-lexical .kg-prose :where(h2):not(:where([class~="not-kg-prose"] *)){font-size:2.8rem}.koenig-lexical .kg-prose :where(h3):not(:where([class~="not-kg-prose"] *)){font-size:2.4rem}.koenig-lexical .kg-prose :where(h4):not(:where([class~="not-kg-prose"] *)){font-size:2.3rem}.koenig-lexical .kg-prose :where(h5):not(:where([class~="not-kg-prose"] *)){font-size:2rem}.koenig-lexical .kg-prose :where(h6):not(:where([class~="not-kg-prose"] *)){font-size:1.9rem}}.koenig-lexical .kg-prose :where(p,blockquote,aside,ul,ol):not(:where([class~="not-kg-prose"] *)){font-family:georgia,serif;font-weight:400;line-height:1.6em;font-size:2rem}.koenig-lexical .kg-prose p strong,.koenig-lexical .kg-prose blockquote strong,.koenig-lexical .kg-prose aside strong,.koenig-lexical .kg-prose ul strong,.koenig-lexical .kg-prose ol strong{font-weight:700}.koenig-lexical .kg-prose h1+p{margin:1rem 0 0}.koenig-lexical .kg-prose h2+p{margin:.8rem 0 0}.koenig-lexical .kg-prose h3+p,.koenig-lexical .kg-prose h4+p,.koenig-lexical .kg-prose h5+p,.koenig-lexical .kg-prose h6+p{margin:.8rem 0 0}.koenig-lexical .kg-prose p+p,.koenig-lexical .kg-prose blockquote+p,.koenig-lexical .kg-prose aside+p,.koenig-lexical .kg-prose ul+p,.koenig-lexical .kg-prose ol+p{margin:3.2rem 0 0}.koenig-lexical .kg-prose div+p{margin:2.8rem 0 0}.koenig-lexical .kg-prose div+figure{margin:2.8rem 0 0}.koenig-lexical .kg-prose p:first-child{margin-top:0rem}@media (max-width: 500px){.koenig-lexical .kg-prose :where(p,blockquote,aside,ul,ol):not(:where([class~="not-kg-prose"] *)){font-size:1.8rem}}.koenig-lexical .kg-prose ul,.koenig-lexical .kg-prose ol{margin:1.6rem 0 0;padding:0;min-width:100%;max-width:100%}.koenig-lexical .kg-prose ul li{display:list-item;list-style-type:disc;margin:1rem 0 0 2.4rem;padding:0 0 0 .6rem;line-height:3.2rem}.koenig-lexical .kg-prose ul li:first-child{margin:0 0 0 2.4rem}.koenig-lexical .kg-prose ol li{display:list-item;list-style-type:decimal;margin:1rem 0 0 2.2rem;padding:0 0 0 .8rem;line-height:3.2rem}.koenig-lexical .kg-prose ol li:first-child{margin:0 0 0 2.2rem}.koenig-lexical .kg-prose p+ul,.koenig-lexical .kg-prose p+ol{margin:3rem 0 0}.koenig-lexical .kg-prose ul+ul,.koenig-lexical .kg-prose ul+ol,.koenig-lexical .kg-prose ol+ul,.koenig-lexical .kg-prose ol+ol,.koenig-lexical .kg-prose blockquote+ul,.koenig-lexical .kg-prose blockquote+ol,.koenig-lexical .kg-prose aside+ul,.koenig-lexical .kg-prose aside+ol{margin:3rem 0 0}.koenig-lexical .kg-prose h1+ul,.koenig-lexical .kg-prose h1+ol,.koenig-lexical .kg-prose h2+ul,.koenig-lexical .kg-prose h2+ol{margin:.8rem 0 0}.koenig-lexical .kg-prose h3+ul,.koenig-lexical .kg-prose h3+ol,.koenig-lexical .kg-prose h4+ul,.koenig-lexical .kg-prose h4+ol,.koenig-lexical .kg-prose h5+ul,.koenig-lexical .kg-prose h5+ol,.koenig-lexical .kg-prose h6+ul,.koenig-lexical .kg-prose h6+ol{margin:1.2rem 0 0}.koenig-lexical .kg-prose div+ul,.koenig-lexical .kg-prose div+ol{margin:2.8rem 0 0}.koenig-lexical .kg-prose ul ul,.koenig-lexical .kg-prose ul ol,.koenig-lexical .kg-prose ol ul,.koenig-lexical .kg-prose ol ol{margin:1rem 0 2rem}.koenig-lexical .kg-prose ul:first-child,.koenig-lexical .kg-prose ol:first-child{margin-top:0rem}.koenig-lexical .kg-prose a{color:var(--kg-accent-color, #ff0095);text-decoration:underline}.koenig-lexical .kg-prose blockquote p{margin:0}.koenig-lexical .kg-prose blockquote{border-left:.25rem solid var(--kg-accent-color, #ff0095);padding-left:2rem;font-style:italic}.koenig-lexical .kg-prose h1+blockquote,.koenig-lexical .kg-prose h2+blockquote{margin:.8rem 0 0}.koenig-lexical .kg-prose h3+blockquote,.koenig-lexical .kg-prose h4+blockquote,.koenig-lexical .kg-prose .koenig-react__editor h5+blockquote,.koenig-lexical .kg-prose h6+blockquote{margin:.4rem 0 0}.koenig-lexical .kg-prose p+blockquote,.koenig-lexical .kg-prose blockquote+blockquote{margin:3.2rem 0 0}.koenig-lexical .kg-prose div+blockquote{margin:2.8rem 0 0}.koenig-lexical .kg-prose aside p{margin:0}.koenig-lexical .kg-prose aside{margin:3.2rem 0 0;padding:1rem 6rem 1.25rem;font-style:italic;text-align:center;font-size:2.4rem;color:var(--midgrey-l1)}.koenig-lexical .kg-prose h1+aside,.koenig-lexical .kg-prose h2+aside{margin:.8rem 0 0}.koenig-lexical .kg-prose h3+aside,.koenig-lexical .kg-prose h4+aside,.koenig-lexical .kg-prose h5+aside,.koenig-lexical .kg-prose h6+aside{margin:.4rem 0 0}.koenig-lexical .kg-prose p+aside,.koenig-lexical .kg-prose blockquote+aside{margin:3.2rem 0 0}@media (max-width: 800px){.koenig-lexical .kg-prose aside{padding-left:6rem;padding-right:6rem}}@media (max-width: 500px){.koenig-lexical .kg-prose aside{font-size:2.2rem}}.koenig-lexical .kg-prose div+aside{margin:2.8rem 0 0}.koenig-lexical .pointer-events-none{pointer-events:none}.koenig-lexical .absolute{position:absolute}.koenig-lexical .top-0{top:0px}.koenig-lexical .left-0{left:0px}.koenig-lexical .min-w-full{min-width:100%}.koenig-lexical .cursor-text{cursor:text}.koenig-lexical .italic{font-style:italic}.koenig-lexical .underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}:root{--grey-200: #EBEEF0;--grey-500: #AEB7C1;--grey-900: #394047;--black: #15171A}@font-face{font-family:Inter,sans-serif;src:url(./assets/fonts/Inter.ttf) format("truetype-variations");font-weight:100 900}
|