Skip to content

Block-based editing: selection, drag-and-drop, and actions menu #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jondkinney wants to merge 10 commits into from
Closed

Block-based editing: selection, drag-and-drop, and actions menu #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a610857
Add block-based editing: selection, drag-and-drop, and actions menu
jondkinney Mar 27, 2026
e4d310e
Update yarn.lock to match package.json
jondkinney Mar 27, 2026
adce246
Remove --frozen-lockfile from ext/Rakefile for cross-Yarn compatibility
jondkinney Mar 27, 2026
e6b15d1
Commit pre-built JS assets for git-source installs
jondkinney Mar 27, 2026
27b6c5e
Restore Yarn 1 lockfile format
jondkinney Mar 27, 2026
8637a90
Remove .yarnrc.yml (Yarn 4 config)
jondkinney Mar 27, 2026
6b204b9
Remove pre-built JS assets (Yarn 1 lockfile is the real fix)
jondkinney Mar 27, 2026
9462df4
Pin Yarn 1 via packageManager and commit pre-built JS assets
jondkinney Mar 27, 2026
75a82b1
Remove pre-built JS assets, rely on packageManager pin
jondkinney Mar 27, 2026
5747091
Fix WebKit crash: requestIdleCallback is not defined in Safari
jondkinney Mar 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 139 additions & 25 deletions app/assets/stylesheets/lexxy-content.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,15 +101,15 @@

code, pre {
background-color: var(--lexxy-color-ink-lightest);
border-radius: var(--lexxy-radius);
border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap, 2px));
color: var(--lexxy-color-ink);
font-family: var(--lexxy-font-mono);
font-size: 0.9em;
padding: 0.25ch 0.5ch;

&:is(pre),
&[data-language] {
border-radius: var(--lexxy-radius);
border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap, 2px));
display: block;
hyphens: none;
margin-block: 0 var(--lexxy-content-margin);
Expand All @@ -123,21 +123,84 @@
}

ol, ul:not(.lexxy-prompt-menu) {
margin-inline-start: calc(var(--lexxy-content-margin) * 1.5);
padding: 0;
margin-inline-start: 0;
padding-inline-start: 2em;
counter-reset: mixed-list;
list-style-type: none;
}

ul {
li[data-list-item-type="number"],
li[data-list-item-type="bullet"] {
position: relative;
line-height: 1.75;

&::marker {
content: none;
}

&::before {
position: absolute;
right: 100%;
width: 2em;
display: inline-block;
text-align: center;
}
}

li[data-list-item-type="number"]:not(.lexxy-nested-listitem) {
counter-increment: mixed-list;

&::before {
content: counter(mixed-list) ".";
}
}

li[data-list-item-type="bullet"] {
&::before {
content: "";
transform: none;
height: 1lh;
}
}

li[data-bullet-depth="1"]::before {
background: radial-gradient(circle, currentColor 3px, transparent 3px) center / 6px 6px no-repeat;
}

li[data-bullet-depth="2"]::before {
background: radial-gradient(circle, transparent 1.5px, currentColor 1.5px, currentColor 3px, transparent 3px) center / 6px 6px no-repeat;
}

li[data-bullet-depth="3"]::before {
background: linear-gradient(currentColor, currentColor) center / 6px 6px no-repeat;
}

/* Fallback for lists without data-list-item-type (e.g. external content) */
ul:not(:has([data-list-item-type])) {
list-style-type: disc;
}

ol {
ol:not(:has([data-list-item-type])) {
list-style-type: decimal;
}

/* Tighter indent for nested lists */
.lexxy-nested-listitem ol,
.lexxy-nested-listitem ul:not(.lexxy-prompt-menu) {
padding-inline-start: 2em;
}

li.lexxy-nested-listitem {
list-style-type: none;

&::marker {
content: none;
}

&::before {
content: none;
}

ol, ul {
margin-block-end: 0;
}
Expand Down Expand Up @@ -294,7 +357,7 @@

block-size: auto;
box-sizing: border-box;
border-radius: var(--lexxy-radius);
border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap, 2px));
display: block;
inline-size: fit-content;
margin-inline: auto;
Expand All @@ -313,27 +376,27 @@
}

.attachment__icon {
aspect-ratio: 4/5;
background-color: color-mix(var(--lexxy-attachment-icon-color), transparent 90%);
block-size: 3lh;
border: 1px solid var(--lexxy-attachment-icon-color);
border-block-start-width: 1.5ch;
border-radius: var(--lexxy-radius);
background-color: var(--lexxy-attachment-icon-bg, var(--lexxy-color-ink-lightest, #f3f4f6));
block-size: 2.5rem;
inline-size: 2.5rem;
border: 2px solid var(--lexxy-attachment-icon-border, var(--lexxy-color-ink-lighter, #d1d5db));
border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap, 2px));
box-sizing: border-box;
color: var(--lexxy-attachment-icon-color);
color: var(--lexxy-attachment-icon-text, var(--lexxy-color-ink-medium, #6b7280));
display: grid;
font-size: var(--lexxy-text-small);
font-weight: bold;
inline-size: auto;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.02em;
overflow: hidden;
place-content: center;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}

.attachment--preview {
img, video {
border-radius: var(--lexxy-radius);
border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap, 2px));
block-size: auto;
display: block;
margin-inline: auto;
Expand All @@ -348,25 +411,76 @@
.attachment__caption {
padding-block-end: 0.5ch;
}

.attachment__card-view {
display: none;
}

&.attachment--collapsed {
.attachment__preview-view {
display: none;
}

.attachment__card-view {
align-items: center;
border: 1px solid var(--lexxy-color-ink-lighter, #e5e7eb);
border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap, 2px));
display: flex;
gap: 0.75rem;
inline-size: 100%;
padding: 0.75rem;
}
}
}

.attachment--file {
--lexxy-attachment-icon-color: var(--lexxy-color-text-subtle);

align-items: center;
border: 1px solid var(--lexxy-color-ink-lighter, #e5e7eb);
border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap, 2px));
display: flex;
flex-wrap: wrap;
inline-size: auto;
gap: 0.75rem;
inline-size: 100%;
padding: 0.75rem;

.attachment__caption {
display: grid;
display: flex;
flex-direction: column;
flex: 1;
gap: 0.125rem;
min-width: 0;
text-align: start;
}

.attachment__name {
color: var(--lexxy-color-ink);
font-weight: bold;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.attachment__meta {
display: flex;
align-items: baseline;
gap: 0.5rem;
}

.attachment__caption-text {
color: var(--lexxy-color-text-subtle, #9ca3af);
font-size: 0.8125rem;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.attachment__subtitle {
color: var(--lexxy-color-text-subtle, #9ca3af);
font-size: 0.75rem;
flex-shrink: 0;
}
}

Expand Down Expand Up @@ -453,7 +567,7 @@

align-items: center;
background: var(--lexxy-attachment-bg-color);
border-radius: var(--lexxy-radius);
border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap, 2px));
color: var(--lexxy-attachment-text-color);
display: inline-flex;
gap: 0.25ch;
Expand Down
Loading
Loading