diff --git a/Gemfile.lock b/Gemfile.lock index 4b3ce6e445..7927bbe7b6 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,8 +1,8 @@ GIT remote: https://github.com/basecamp/lexxy - revision: 7c197c0afc7095c89df9cb6e24484df9e7212ac8 + revision: 2fafd144924c95c25bd4c6656ae04034f7835494 specs: - lexxy (0.1.24.beta) + lexxy (0.7.0.beta) rails (>= 8.0.2) GIT diff --git a/Gemfile.saas.lock b/Gemfile.saas.lock index 98cf833bc3..f546708aa6 100644 --- a/Gemfile.saas.lock +++ b/Gemfile.saas.lock @@ -21,9 +21,9 @@ GIT GIT remote: https://github.com/basecamp/lexxy - revision: 7c197c0afc7095c89df9cb6e24484df9e7212ac8 + revision: 2fafd144924c95c25bd4c6656ae04034f7835494 specs: - lexxy (0.1.24.beta) + lexxy (0.7.0.beta) rails (>= 8.0.2) GIT diff --git a/app/assets/stylesheets/lexxy.css b/app/assets/stylesheets/lexxy.css index 21ee18301d..8b4b63d6b0 100644 --- a/app/assets/stylesheets/lexxy.css +++ b/app/assets/stylesheets/lexxy.css @@ -7,7 +7,8 @@ position: relative; overflow: visible; - figure.node--selected { + figure.node--selected, + div.node--selected { &:has(img) { img { outline: var(--focus-ring-size) solid var(--focus-ring-color); @@ -22,6 +23,31 @@ } } + .lexxy-content__table-wrapper { + margin: 0; + margin-block: 1ch; + overflow-x: auto; + } + + table { + th, td { + &.table-cell--selected { + background-color: var(--color-selected-light); + } + + &.lexxy-content__table-cell--selected { + background-color: var(--color-selected); + border-color: var(--color-selected-dark); + } + } + + &.lexxy-content__table--selection { + ::selection { + background: transparent; + } + } + } + /* Lexical uses the `lexxy-editor--empty` class even if you have a list * started but haven't added other characters. Here, we hide the placeholder * when you click the List button in the toolbar. */ @@ -115,7 +141,7 @@ position: relative; position: sticky; inset-block-start: 0; - z-index: 1; + z-index: 2; } .lexxy-editor__toolbar-button { @@ -166,7 +192,7 @@ inset-inline-end: 0; padding: 4px; position: absolute; - z-index: 1; + z-index: 2; } .lexxy-editor__toolbar-spacer { @@ -188,7 +214,7 @@ font-size: var(--text-small); padding: var(--lexxy-dropdown-padding); position: absolute; - z-index: 1; + z-index: 2; button { block-size: var(--lexxy-dropdown-btn-size); @@ -288,7 +314,130 @@ } } - /* Prompt ,enu (@mentions, etc.) + .lexxy-table-handle-buttons { + --button-size: 2.5em; + + color: var(--color-ink-inverted); + display: none; + flex-direction: row; + font-size: var(--text-x-small); + gap: 0.25ch; + line-height: 1; + position: absolute; + transform: translate(-50%, -120%); + z-index: 1; + + &:has([open]) { + z-index: 4; + } + + .lexxy-table-control { + align-items: center; + background-color: var(--color-ink); + border-radius: 0.75ch; + display: flex; + flex-direction: row; + gap: 1ch; + padding: 2px; + white-space: nowrap; + + button, + summary { + aspect-ratio: 1 / 1; + align-items: center; + background-color: transparent; + border-radius: 0.5ch; + border: 0; + color: var(--color-ink-inverted); + cursor: pointer; + display: flex; + font-size: inherit; + font-weight: 700; + justify-content: center; + line-height: 1; + list-style: none; + min-block-size: var(--button-size); + min-inline-size: var(--button-size); + padding: 0; + user-select: none; + -webkit-user-select: none; + + &:hover { + background-color: var(--color-ink-darker); + } + + &:focus, + &:focus-visible { + background-color: var(--color-ink-darker); + outline: var(--focus-ring-size) solid var(--focus-ring-color); + outline-offset: var(--focus-ring-offset); + } + + svg { + block-size: 1em; + inline-size: 1em; + fill: currentColor; + } + + span { + display: none; + } + } + } + + .lexxy-table-control__more-menu { + gap: 0; + padding: 2px; + position: relative; + + summary { + &::-webkit-details-marker { + display: none; + } + } + + .lexxy-table-control__more-menu-details { + display: flex; + flex-direction: column; + gap: 0.25ch; + inset-block-start: 105%; + inset-inline-end: 0; + padding: 0; + position: absolute; + + .lexxy-table-control__more-menu-section { + background: var(--color-ink); + border-radius: 0.75ch; + display: flex; + flex-direction: column; + padding: 2px; + } + + button { + aspect-ratio: unset; + align-items: center; + flex-direction: row; + font-weight: normal; + gap: 1ch; + justify-content: flex-start; + padding: 0.5ch 2ch; + padding-inline-start: 1ch; + white-space: nowrap; + + svg { + block-size: 1.3em; + inline-size: 1.3em; + } + + span { + display: inline-block; + } + } + } + } + } + + /* Prompt menu (@mentions, etc.) /* ------------------------------------------------------------------------ */ .lexxy-prompt-menu { diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css index 88e4d2ae29..bf53284786 100644 --- a/app/assets/stylesheets/rich-text-content.css +++ b/app/assets/stylesheets/rich-text-content.css @@ -209,6 +209,45 @@ } } } + + /* Tables */ + .lexxy-content__table-wrapper { + margin: 0; + margin-block: 1ch; + overflow-x: auto; + } + + table { + border-collapse: collapse; + border-spacing: 0; + inline-size: calc(100% - 0.5ch); + margin: 0.25ch; + + th, + td { + border: 1px solid var(--color-ink-light); + padding: 0.5ch 1ch; + text-align: start; + word-break: normal; + + *:last-child { + margin-block-end: 0; + } + + *:not(pre, code) { + word-break: normal; + } + } + + th, + .lexxy-content__table-cell--header { + background: var(--color-ink-lightest); + } + + td { + background: var(--color-canvas); + } + } } /* Attachments