@yurikilian/lex4 1.5.1 → 1.5.3

package/dist/style.css

@@ -89,6 +89,8 @@
   --lex4-sidebar-width: 320px;
   --lex4-ui-font-family: "Inter Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --lex4-font-family: 'Calibri', 'Carlito', sans-serif;
+  --lex4-body-font-size: 12pt;
+  --lex4-body-line-height: 1.5;
 
   font-family: var(--lex4-ui-font-family);
   -webkit-font-smoothing: antialiased;
@@ -206,6 +208,120 @@
   gap: 0.25rem;
 }
 
+.lex4-block-type-picker {
+  position: relative;
+}
+
+.lex4-editor button.lex4-block-type-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  height: 32px;
+  padding: 0 0.5rem 0 0.625rem;
+  border-radius: 999px;
+  border: 1px solid var(--color-input);
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
+}
+
+.lex4-editor button.lex4-block-type-trigger:hover,
+.lex4-editor button.lex4-block-type-trigger.open {
+  background-color: var(--color-secondary);
+}
+
+.lex4-editor button.lex4-block-type-trigger:focus-visible {
+  outline: none;
+  border-color: var(--color-ring);
+  box-shadow: 0 0 0 1px var(--color-ring);
+}
+
+.lex4-block-type-trigger-code {
+  min-width: 1.75rem;
+  font-size: 0.8125rem;
+  line-height: 1rem;
+  font-weight: 600;
+  color: var(--color-foreground);
+  text-align: center;
+}
+
+.lex4-block-type-trigger-code.heading {
+  color: var(--color-primary);
+}
+
+.lex4-block-type-trigger-chevron {
+  color: var(--color-muted-foreground);
+  transition: transform 150ms ease;
+}
+
+.lex4-block-type-trigger-chevron.open {
+  transform: rotate(180deg);
+}
+
+.lex4-block-type-menu {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  min-width: 13rem;
+  padding: 0.375rem;
+  border: 1px solid var(--color-border);
+  border-radius: 1rem;
+  background-color: var(--color-surface-elevated);
+  box-shadow: var(--shadow-lg);
+  z-index: 30;
+}
+
+.lex4-editor button.lex4-block-type-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.75rem;
+  border-radius: 0.75rem;
+  color: var(--color-foreground);
+  transition: background-color 150ms, color 150ms;
+}
+
+.lex4-editor button.lex4-block-type-item:hover,
+.lex4-editor button.lex4-block-type-item.active {
+  background-color: var(--color-secondary);
+}
+
+.lex4-block-type-item-code {
+  min-width: 2rem;
+  padding: 0.1875rem 0.4375rem;
+  border-radius: 999px;
+  background-color: color-mix(in srgb, var(--color-secondary) 86%, var(--color-background));
+  font-size: 0.8125rem;
+  line-height: 1rem;
+  font-weight: 600;
+  color: var(--color-muted-foreground);
+  text-align: center;
+}
+
+.lex4-block-type-item-code.heading {
+  color: color-mix(in srgb, var(--color-primary) 80%, var(--color-foreground));
+}
+
+.lex4-block-type-item-code.active {
+  color: var(--color-primary);
+  background-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-background));
+}
+
+.lex4-block-type-item-label {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+}
+
+.lex4-block-type-item-check {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-primary);
+}
+
 .lex4-editor button.lex4-toolbar-toggle-btn {
   display: inline-flex;
   align-items: center;
@@ -1007,10 +1123,27 @@
   height: 100%;
   padding: 0;
   overflow: visible;
+  font-size: var(--lex4-body-font-size);
+  line-height: var(--lex4-body-line-height);
 }
 
 .lex4-root {
   outline: none;
+  font-size: var(--lex4-body-font-size);
+  line-height: var(--lex4-body-line-height);
+}
+
+.lex4-page-body-editable::-moz-selection, .lex4-page-body-editable *::-moz-selection, .lex4-root::-moz-selection, .lex4-root *::-moz-selection {
+  background-color: var(--color-selection-bg);
+  color: var(--color-selection-text);
+}
+
+.lex4-page-body-editable::selection,
+.lex4-page-body-editable *::selection,
+.lex4-root::selection,
+.lex4-root *::selection {
+  background-color: var(--color-selection-bg);
+  color: var(--color-selection-text);
 }
 
 .lex4-paragraph {
@@ -1018,6 +1151,15 @@
   text-align: justify;
 }
 
+.lex4-paragraph:has(> br:only-child) {
+  min-height: calc(1em * var(--lex4-body-line-height));
+}
+
+.lex4-paragraph:has(> br:only-child)::before {
+  content: '\00a0';
+  color: transparent;
+}
+
 .lex4-heading {
   margin: 0 0 0.5rem;
   font-weight: 600;
@@ -1104,9 +1246,10 @@
 
 .lex4-page-placeholder {
   position: absolute;
-  top: 0.25rem;
+  top: 0;
   left: 0;
-  font-size: 0.8125rem;
+  font-size: var(--lex4-body-font-size);
+  line-height: var(--lex4-body-line-height);
   color: color-mix(in srgb, var(--color-muted-foreground) 82%, transparent);
   pointer-events: none;
   -webkit-user-select: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yurikilian/lex4",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "license": "MIT",
   "repository": {
     "type": "git",