Merge pull request #2457 from basecamp/lexxy-version-bump
- Bump Lexxy's version to latest 0.7.4 - Enable tables with the recent UX enhancements - Use Lexxy's built-in CSS for rich text rendering, removing the duplicate CSS from Fizzy
This commit is contained in:
Zoltán Hosszú
+2
-2
@@ -1,8 +1,8 @@
|
||||
GIT
|
||||
remote: https://github.com/basecamp/lexxy
|
||||
revision: 4f0fc4d5773bc6892de70f175440c259974c12a7
|
||||
revision: 4bcf8d0213971560e90734493f8bd835addc3642
|
||||
specs:
|
||||
lexxy (0.7.0.beta)
|
||||
lexxy (0.7.4.beta)
|
||||
rails (>= 8.0.2)
|
||||
|
||||
GIT
|
||||
|
||||
+2
-2
@@ -23,9 +23,9 @@ GIT
|
||||
|
||||
GIT
|
||||
remote: https://github.com/basecamp/lexxy
|
||||
revision: 4f0fc4d5773bc6892de70f175440c259974c12a7
|
||||
revision: 4bcf8d0213971560e90734493f8bd835addc3642
|
||||
specs:
|
||||
lexxy (0.7.0.beta)
|
||||
lexxy (0.7.4.beta)
|
||||
rails (>= 8.0.2)
|
||||
|
||||
GIT
|
||||
|
||||
@@ -0,0 +1,207 @@
|
||||
@layer components {
|
||||
.attachment {
|
||||
block-size: auto;
|
||||
display: block;
|
||||
inline-size: fit-content;
|
||||
position: relative;
|
||||
max-inline-size: 100%;
|
||||
|
||||
progress {
|
||||
inline-size: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment__caption {
|
||||
color: color-mix(in oklch, var(--color-ink) 66%, transparent);
|
||||
font-size: var(--text-small);
|
||||
|
||||
textarea {
|
||||
--input-border-radius: 0.3em;
|
||||
--input-border-size: 0;
|
||||
--input-padding: 0;
|
||||
|
||||
background-color: var(--input-background, transparent);
|
||||
border: none;
|
||||
color: inherit;
|
||||
inline-size: 100%;
|
||||
max-inline-size: 100%;
|
||||
resize: none;
|
||||
text-align: center;
|
||||
|
||||
&:focus {
|
||||
--focus-ring-size: 0;
|
||||
}
|
||||
|
||||
@supports (field-sizing: content) {
|
||||
field-sizing: content;
|
||||
inline-size: auto;
|
||||
min-inline-size: 20ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.attachment__icon {
|
||||
aspect-ratio: 4/5;
|
||||
background-color: color-mix(var(--attachment-icon-color), transparent 90%);
|
||||
block-size: 2.5lh;
|
||||
border: 2px solid var(--attachment-icon-color);
|
||||
border-block-start-width: 1ch;
|
||||
border-radius: 0.5ch;
|
||||
box-sizing: border-box;
|
||||
color: var(--attachment-icon-color);
|
||||
display: grid;
|
||||
font-size: var(--text-small);
|
||||
font-weight: bold;
|
||||
inline-size: auto;
|
||||
padding-inline: 0.5ch;
|
||||
place-content: center;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.attachment--preview {
|
||||
margin-inline: auto;
|
||||
text-align: center;
|
||||
|
||||
img, video {
|
||||
block-size: auto;
|
||||
display: block;
|
||||
margin-inline: auto;
|
||||
max-inline-size: 100%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.attachment__caption {
|
||||
column-gap: 0.5ch;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-block-start: 0.5ch;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment--file {
|
||||
--attachment-icon-color: var(--color-ink-medium);
|
||||
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1ch;
|
||||
inline-size: 100%;
|
||||
margin-inline: 0;
|
||||
|
||||
.attachment__caption {
|
||||
display: grid;
|
||||
flex: 1;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.attachment__name {
|
||||
color: var(--color-ink);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Video attachments don't have an identifiable class, but we need to
|
||||
* make sure the caption is always below the video */
|
||||
&:has(video) {
|
||||
.attachment__caption {
|
||||
flex: none;
|
||||
inline-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.attachment--psd,
|
||||
.attachment--key,
|
||||
.attachment--sketch,
|
||||
.attachment--ai,
|
||||
.attachment--eps,
|
||||
.attachment--indd,
|
||||
.attachment--svg,
|
||||
.attachment--ppt,
|
||||
.attachment--pptx {
|
||||
--attachment-icon-color: oklch(var(--lch-red-medium));
|
||||
}
|
||||
|
||||
.attachment--css,
|
||||
.attachment--crash,
|
||||
.attachment--php,
|
||||
.attachment--json,
|
||||
.attachment--htm,
|
||||
.attachment--html,
|
||||
.attachment--rb,
|
||||
.attachment--erb,
|
||||
.attachment--ts,
|
||||
.attachment--js {
|
||||
--attachment-icon-color: oklch(var(--lch-purple-medium));
|
||||
}
|
||||
|
||||
.attachment--txt,
|
||||
.attachment--pages,
|
||||
.attachment--rtf,
|
||||
.attachment--md,
|
||||
.attachment--doc,
|
||||
.attachment--docx {
|
||||
--attachment-icon-color: oklch(var(--lch-blue-medium));
|
||||
}
|
||||
|
||||
.attachment--csv &,
|
||||
.attachment--numbers &,
|
||||
.attachment--xls &,
|
||||
.attachment--xlsx & {
|
||||
--attachment-icon-color: oklch(var(--lch-green-medium));
|
||||
}
|
||||
|
||||
.attachment__link {
|
||||
color: var(--color-link);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Custom attachments such as mentions, etc. */
|
||||
action-text-attachment[content-type^='application/vnd.actiontext'] {
|
||||
--attachment-bg-color: transparent;
|
||||
--attachment-image-size: 1em;
|
||||
--attachment-text-color: currentColor;
|
||||
|
||||
align-items: center;
|
||||
background: var(--attachment-bg-color);
|
||||
border-radius: 99rem;
|
||||
box-shadow:
|
||||
-0.25ch 0 0 var(--attachment-bg-color),
|
||||
0.5ch 0 0 var(--attachment-bg-color);
|
||||
color: var(--attachment-text-color);
|
||||
display: inline-flex;
|
||||
gap: 0.25ch;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
white-space: normal;
|
||||
|
||||
lexxy-editor & {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
block-size: var(--attachment-image-size);
|
||||
border-radius: 50%;
|
||||
inline-size: var(--attachment-image-size);
|
||||
}
|
||||
|
||||
&.node--selected {
|
||||
--attachment-bg-color: oklch(var(--lch-blue-dark));
|
||||
--attachment-text-color: var(--color-ink-inverted);
|
||||
}
|
||||
}
|
||||
|
||||
action-text-attachment[content-type^='application/vnd.actiontext.mention'] {
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -229,7 +229,7 @@
|
||||
}
|
||||
|
||||
lexxy-toolbar {
|
||||
border-block-start: 1px solid var(--color-ink-light);
|
||||
border-block-start: 1px solid var(--lexxy-border-color);
|
||||
}
|
||||
|
||||
& ~ .btn.btn--reversed {
|
||||
|
||||
+101
-469
@@ -1,515 +1,147 @@
|
||||
@import url("lexxy-variables.css") layer(base);
|
||||
@import url("lexxy-content.css") layer(base);
|
||||
@import url("lexxy-editor.css") layer(base);
|
||||
|
||||
@layer components {
|
||||
/* Editor
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
lexxy-editor {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
--lexxy-border-color: oklch(var(--lch-ink-darkest) / 20%);
|
||||
--lexxy-editor-padding: 0;
|
||||
--lexxy-toolbar-button-size: 2rem;
|
||||
|
||||
figure.node--selected,
|
||||
div.node--selected {
|
||||
&:has(img) {
|
||||
img {
|
||||
outline: var(--focus-ring-size) solid var(--focus-ring-color);
|
||||
outline-offset: var(--focus-ring-offset);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:has(img)) {
|
||||
outline: var(--focus-ring-size) solid var(--focus-ring-color);
|
||||
outline-offset: var(--focus-ring-offset);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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. */
|
||||
.lexxy-editor--empty {
|
||||
.lexxy-editor__content:not(:has(ul, ol))::before {
|
||||
content: attr(placeholder);
|
||||
color: currentColor;
|
||||
cursor: text;
|
||||
opacity: 0.66;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
white-space: pre-line;
|
||||
}
|
||||
}
|
||||
|
||||
.lexxy-editor__content {
|
||||
margin-block-start: var(--block-space-half);
|
||||
min-block-size: calc(7lh + var(--block-space));
|
||||
outline: 0;
|
||||
|
||||
/* Allow color highlights to show through a bit */
|
||||
::selection {
|
||||
background: oklch(var(--lch-blue-light) / 0.5);
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.lexxy-editor--drag-over {
|
||||
background-color: var(--color-selected);
|
||||
border-radius: 4px;
|
||||
outline: 2px dashed var(--color-selected-dark);
|
||||
}
|
||||
|
||||
.lexxy-code-language-picker {
|
||||
--caret-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
|
||||
--caret-icon-dark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
|
||||
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: var(--color-canvas);
|
||||
background-image: var(--caret-icon);
|
||||
background-position: center right 0.9em;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0.5em;
|
||||
border: 1px solid var(--color-ink-light);
|
||||
border-radius: 99rem;
|
||||
color: var(--color-ink);
|
||||
cursor: pointer;
|
||||
font-family: var(--font-base);
|
||||
font-size: var(--text-x-small);
|
||||
font-weight: 500;
|
||||
inset-inline-end: 0;
|
||||
line-height: 1.15lh;
|
||||
margin: 0.75ch 0.75ch 0 0;
|
||||
padding-inline: 1.5ch 1.8em;
|
||||
text-align: start;
|
||||
|
||||
html[data-theme="dark"] & {
|
||||
--caret-icon: var(--caret-icon-dark);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html:not([data-theme]) & {
|
||||
--caret-icon: var(--caret-icon-dark);
|
||||
}
|
||||
}
|
||||
|
||||
option {
|
||||
background-color: var(--color-canvas);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
}
|
||||
|
||||
/* Toolbar
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
/* TODO: Temporary - hide table button while we work on the styles */
|
||||
button[name="table"] {
|
||||
display: none;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
lexxy-toolbar {
|
||||
--lexxy-toolbar-icon-size: 1em;
|
||||
|
||||
background-color: var(--lexxy-bg-color, var(--color-canvas));
|
||||
border-block-end: 1px solid var(--color-ink-light);
|
||||
color: currentColor;
|
||||
display: flex;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
max-inline-size: 100%;
|
||||
padding: 0.2em 0;
|
||||
position: relative;
|
||||
position: sticky;
|
||||
inset-block-start: 0;
|
||||
z-index: 2;
|
||||
border-color: var(--lexxy-border-color);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.lexxy-editor__toolbar-button {
|
||||
--toolbar-button-size: 44px;
|
||||
background: transparent;
|
||||
|
||||
appearance: none;
|
||||
aspect-ratio: 1;
|
||||
background-color: transparent;
|
||||
block-size: var(--toolbar-button-size);
|
||||
border: none;
|
||||
border-radius: 0.2em;
|
||||
color: currentColor;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
font-size: inherit;
|
||||
place-items: center;
|
||||
|
||||
&:is(:focus, :hover) {
|
||||
background-color: var(--color-ink-lighter);
|
||||
box-shadow: none;
|
||||
&[aria-pressed="true"],
|
||||
[open] > & {
|
||||
background-color: oklch(var(--lch-blue-medium) / 20%);
|
||||
}
|
||||
|
||||
&:is(:active),
|
||||
&[aria-pressed="true"] {
|
||||
background-color: var(--color-selected);
|
||||
}
|
||||
|
||||
svg {
|
||||
-webkit-touch-callout: none;
|
||||
block-size: var(--lexxy-toolbar-icon-size);
|
||||
fill: currentColor;
|
||||
grid-area: 1/1;
|
||||
inline-size: var(--lexxy-toolbar-icon-size);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
--toolbar-button-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.lexxy-editor__toolbar-overflow-menu {
|
||||
background-color: var(--color-canvas);
|
||||
border-radius: 0.5ch;
|
||||
box-shadow: var(--shadow);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
inset-inline-end: 0;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.lexxy-editor__toolbar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Dropdowns
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
.lexxy-editor__toolbar-dropdown-content {
|
||||
--lexxy-dropdown-padding: 0.75rem;
|
||||
--lexxy-dropdown-btn-size: 2rem;
|
||||
|
||||
background-color: var(--color-canvas);
|
||||
border: 1px solid var(--color-ink-lighter);
|
||||
border-radius: 0.5em;
|
||||
box-shadow: var(--shadow);
|
||||
color: var(--color-ink);
|
||||
font-size: var(--text-small);
|
||||
padding: var(--lexxy-dropdown-padding);
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
|
||||
button {
|
||||
block-size: var(--lexxy-dropdown-btn-size);
|
||||
}
|
||||
}
|
||||
|
||||
.lexxy-editor__toolbar-dropdown-actions {
|
||||
display: flex;
|
||||
font-size: var(--text-x-small);
|
||||
flex: 1 1 0%;
|
||||
gap: var(--lexxy-dropdown-padding);
|
||||
margin-block-start: var(--lexxy-dropdown-padding);
|
||||
|
||||
.btn {
|
||||
--radius: 99rem;
|
||||
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.btn[type="submit"] {
|
||||
--btn-background: var(--card-color, var(--color-link));
|
||||
--btn-color: var(--color-ink-inverted);
|
||||
--focus-ring-color: var(--card-color, var(--color-link));
|
||||
}
|
||||
|
||||
span {
|
||||
inline-size: 100%;
|
||||
@media(any-hover: hover) {
|
||||
&:hover:not([aria-pressed="true"]) {
|
||||
background-color: oklch(var(--lch-ink-dark) / 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
lexxy-link-dropdown {
|
||||
.input {
|
||||
min-inline-size: 30ch;
|
||||
}
|
||||
}
|
||||
--lexxy-toolbar-spacing: 1.5ch;
|
||||
|
||||
lexxy-highlight-dropdown {
|
||||
--gap: 0.5ch;
|
||||
.lexxy-editor__toolbar-button {
|
||||
border-radius: 99rem;
|
||||
|
||||
[data-button-group] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--gap);
|
||||
|
||||
+ & {
|
||||
margin-block-start: var(--gap);
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lexxy-highlight-button {
|
||||
--outline-color: oklch(var(--lch-ink-darkest) / 0.2);
|
||||
|
||||
appearance: none;
|
||||
background: var(--color-canvas);
|
||||
border: none;
|
||||
border-radius: 0.5ch;
|
||||
color: inherit;
|
||||
display: grid;
|
||||
font-weight: 500;
|
||||
inline-size: var(--lexxy-dropdown-btn-size);
|
||||
place-content: center;
|
||||
position: relative;
|
||||
outline: none;
|
||||
|
||||
&:after {
|
||||
content: "Aa";
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&[aria-pressed="true"] {
|
||||
box-shadow: 0 0 0 1px var(--color-canvas), 0 0 0 3px var(--outline-color);
|
||||
}
|
||||
|
||||
&[aria-pressed="true"] {
|
||||
--outline-color: var(--color-link);
|
||||
|
||||
&:after {
|
||||
content: "✓";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lexxy-editor__toolbar-dropdown-reset {
|
||||
background: var(--color-canvas);
|
||||
border: 1px solid var(--color-ink-light);
|
||||
border-radius: 99rem;
|
||||
inline-size: 100%;
|
||||
margin-block-start: var(--lexxy-dropdown-padding);
|
||||
|
||||
&[disabled] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
@media(any-hover: hover) {
|
||||
&:hover {
|
||||
background-color: var(--color-ink-darker);
|
||||
filter: brightness(0.9);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
&[type="submit"],
|
||||
&[type="submit"]:hover {
|
||||
background-color: var(--color-link);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
&[type="button"] {
|
||||
border: 1px solid var(--color-ink-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Prompt menu (@mentions, etc.)
|
||||
.lexxy-editor__content {
|
||||
margin-block-start: 0.5lh;
|
||||
}
|
||||
|
||||
.lexxy-code-language-picker {
|
||||
border-radius: 99rem;
|
||||
}
|
||||
|
||||
lexxy-table-tools {
|
||||
font-size: var(--text-x-small);
|
||||
}
|
||||
|
||||
[data-lexical-cursor] {
|
||||
animation: blink 1s step-end infinite;
|
||||
block-size: 1lh;
|
||||
border-inline-start: 1px solid currentColor;
|
||||
line-height: inherit;
|
||||
margin-block: 1em;
|
||||
}
|
||||
|
||||
/* Content
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
.lexxy-prompt-menu {
|
||||
--lexxy-prompt-avatar-size: 24px;
|
||||
--lexxy-prompt-min-width: 20ch;
|
||||
--lexxy-prompt-padding: 0.5ch;
|
||||
.lexxy-content {
|
||||
--lexxy-content-margin: 0.5lh;
|
||||
|
||||
background-color: var(--color-canvas);
|
||||
border-radius: calc(var(--lexxy-prompt-padding) * 2);
|
||||
box-shadow: var(--shadow);
|
||||
color: var(--color-ink);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-small);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
max-height: 200px;
|
||||
min-inline-size: var(--lexxy-prompt-min-width);
|
||||
overflow: auto;
|
||||
padding: var(--lexxy-prompt-padding);
|
||||
visibility: hidden;
|
||||
z-index: var(--z-popup);
|
||||
}
|
||||
color: currentColor;
|
||||
|
||||
.lexxy-prompt-menu--visible {
|
||||
visibility: initial;
|
||||
}
|
||||
|
||||
.lexxy-prompt-menu__item {
|
||||
align-items: center;
|
||||
border-radius: 0.5ch;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: var(--lexxy-prompt-padding);
|
||||
padding: var(--lexxy-prompt-padding);
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-ink-lightest);
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02ch;
|
||||
line-height: 1.1;
|
||||
overflow-wrap: break-word;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
&[aria-selected] {
|
||||
background-color: var(--color-selected);
|
||||
}
|
||||
|
||||
img {
|
||||
block-size: var(--lexxy-prompt-avatar-size);
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
inline-size: var(--lexxy-prompt-avatar-size);
|
||||
p:has(+ p) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
+ & {
|
||||
margin-top: 2px;
|
||||
ol, ul {
|
||||
padding-inline-start: 1ch;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-inline-start: 0.25em solid var(--color-ink-lighter);
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: var(--color-terminal-text-light);
|
||||
border-radius: 0.25ch;
|
||||
font-size: 0.95em;
|
||||
padding-inline: 0.5ch;
|
||||
background: var(--color-canvas);
|
||||
border: 1px solid var(--color-ink-lighter);
|
||||
}
|
||||
|
||||
.horizontal-divider {
|
||||
padding-block: var(--lexxy-content-margin);
|
||||
hr { margin: 0; }
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-block-end: 2px solid currentColor;
|
||||
color: currentColor;
|
||||
inline-size: 20%;
|
||||
margin: calc(var(--lexxy-content-margin) * 2) 0;
|
||||
}
|
||||
|
||||
table {
|
||||
th, td {
|
||||
font-size: var(--text-small);
|
||||
padding-block: 0.75ch;
|
||||
}
|
||||
th:not([class*="selected"], [data-action="delete"], [data-action="toggle"]) { background-color: var(--color-ink-lightest); }
|
||||
td:not([class*="selected"], [data-action="delete"], [data-action="toggle"]) { background-color: var(--color-canvas); }
|
||||
}
|
||||
|
||||
.attachment {
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.lexxy-prompt-menu__item--empty {
|
||||
color: var(--color-ink-medium);
|
||||
padding: var(--lexxy-prompt-padding);
|
||||
.attachment {
|
||||
margin-inline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,469 +0,0 @@
|
||||
@layer components {
|
||||
:where(.rich-text-content) {
|
||||
--block-margin: 0.5lh;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
display: block;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02ch;
|
||||
line-height: 1.1;
|
||||
margin-block: 0 var(--block-margin);
|
||||
overflow-wrap: break-word;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
h1 { font-size: 2em; }
|
||||
h2 { font-size: 1.5em; }
|
||||
h3 { font-size: 1.17em; }
|
||||
h4 { font-size: 1em; }
|
||||
h5 { font-size: 0.83em; }
|
||||
h6 { font-size: 0.67em; }
|
||||
|
||||
p, ul, ol, dl, blockquote, figure, .attachment {
|
||||
margin-block: 0 var(--block-margin);
|
||||
|
||||
&:not(lexxy-editor &) {
|
||||
overflow-wrap: break-word;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
}
|
||||
|
||||
p:has(+ p) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
padding-inline-start: 3ch;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
li:has(li) {
|
||||
list-style: none;
|
||||
|
||||
ol, ul {
|
||||
margin: 0;
|
||||
padding-inline-start: 2ch;
|
||||
}
|
||||
}
|
||||
|
||||
b, strong, .lexxy-content__bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
i, em, .lexxy-content__italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
s, .lexxy-content__strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
mark, .lexxy-content__highlight {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
p, blockquote {
|
||||
letter-spacing: -0.005ch;
|
||||
}
|
||||
|
||||
/* Avoid extra space due to empty paragraphs */
|
||||
p:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-inline-start: 0.25em solid var(--color-ink-lighter);
|
||||
font-style: italic;
|
||||
margin: var(--block-margin) 0;
|
||||
padding-inline-start: 2ch;
|
||||
}
|
||||
|
||||
img, video, embed, object {
|
||||
inline-size: auto;
|
||||
margin-inline: auto;
|
||||
max-block-size: 32rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Links should hug media contained within */
|
||||
a:has(img),
|
||||
a:has(video) {
|
||||
inline-size: fit-content;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: currentColor;
|
||||
block-size: 0;
|
||||
border: none;
|
||||
border-block-end: 2px solid currentColor;
|
||||
inline-size: 20%;
|
||||
margin: calc(var(--block-margin) * 2) 0;
|
||||
}
|
||||
|
||||
.horizontal-divider {
|
||||
margin: var(--block-margin) 0;
|
||||
padding-block: var(--block-margin);
|
||||
}
|
||||
|
||||
/* Code */
|
||||
code, pre {
|
||||
background-color: var(--color-canvas);
|
||||
border: 1px solid var(--color-ink-lighter);
|
||||
border-radius: 0.3em;
|
||||
color: var(--color-ink);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85em;
|
||||
font-weight: 500;
|
||||
margin-block: var(--block-margin);
|
||||
padding: 0.1em 0.3em;
|
||||
|
||||
&:is(pre),
|
||||
&[data-language] {
|
||||
border-radius: 0.5em;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5lh 2ch;
|
||||
tab-size: 2;
|
||||
text-wrap: nowrap;
|
||||
white-space: pre;
|
||||
word-break: break-word;
|
||||
|
||||
/* Keywords and attributes */
|
||||
.code-token__attr,
|
||||
.token.atrule,
|
||||
.token.attr,
|
||||
.token.keyword {
|
||||
color: var(--color-code-token__att);
|
||||
}
|
||||
|
||||
/* Constants, booleans, numbers, properties, tags */
|
||||
.code-token__property,
|
||||
.token.boolean,
|
||||
.token.constant,
|
||||
.token.deleted,
|
||||
.token.number,
|
||||
.token.property,
|
||||
.token.symbol,
|
||||
.token.tag {
|
||||
color: var(--color-code-token__property);
|
||||
}
|
||||
|
||||
/* Strings, selectors, and built-in constructs */
|
||||
.code-token__selector,
|
||||
.token.builtin,
|
||||
.token.char,
|
||||
.token.inserted,
|
||||
.token.selector,
|
||||
.token.string {
|
||||
color: var(--color-code-token__selector);
|
||||
}
|
||||
|
||||
/* Comments and meta information */
|
||||
.code-token__comment,
|
||||
.token.cdata,
|
||||
.token.comment,
|
||||
.token.doctype,
|
||||
.token.prolog {
|
||||
color: var(--color-code-token__comment);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Operators and symbolic entities */
|
||||
.code-token__operator,
|
||||
.token.entity,
|
||||
.token.operator,
|
||||
.token.url {
|
||||
color: var(--color-code-token__operator);
|
||||
}
|
||||
|
||||
/* Functions and class names */
|
||||
.code-token__function,
|
||||
.token.class,
|
||||
.token.class-name,
|
||||
.token.function {
|
||||
color: var(--color-code-token__function);
|
||||
}
|
||||
|
||||
/* Variables, regex, namespaces, important */
|
||||
.code-token__variable,
|
||||
.token.important,
|
||||
.token.namespace,
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: var(--color-code-token__variable);
|
||||
}
|
||||
|
||||
/* Punctuation */
|
||||
.code-token__punctuation,
|
||||
.token.punctuation {
|
||||
color: var(--color-code-token__punctuation);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 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
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
.attachment {
|
||||
block-size: auto;
|
||||
display: block;
|
||||
inline-size: fit-content;
|
||||
position: relative;
|
||||
max-inline-size: 100%;
|
||||
|
||||
progress {
|
||||
inline-size: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment__caption {
|
||||
color: color-mix(in oklch, var(--color-ink) 66%, transparent);
|
||||
font-size: var(--text-small);
|
||||
|
||||
textarea {
|
||||
--input-border-radius: 0.3em;
|
||||
--input-border-size: 0;
|
||||
--input-padding: 0;
|
||||
|
||||
background-color: var(--input-background, transparent);
|
||||
border: none;
|
||||
color: inherit;
|
||||
inline-size: 100%;
|
||||
max-inline-size: 100%;
|
||||
resize: none;
|
||||
text-align: center;
|
||||
|
||||
&:focus {
|
||||
--focus-ring-size: 0;
|
||||
}
|
||||
|
||||
@supports (field-sizing: content) {
|
||||
field-sizing: content;
|
||||
inline-size: auto;
|
||||
min-inline-size: 20ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.attachment__icon {
|
||||
aspect-ratio: 4/5;
|
||||
background-color: color-mix(var(--attachment-icon-color), transparent 90%);
|
||||
block-size: 2.5lh;
|
||||
border: 2px solid var(--attachment-icon-color);
|
||||
border-block-start-width: 1ch;
|
||||
border-radius: 0.5ch;
|
||||
box-sizing: border-box;
|
||||
color: var(--attachment-icon-color);
|
||||
display: grid;
|
||||
font-size: var(--text-small);
|
||||
font-weight: bold;
|
||||
inline-size: auto;
|
||||
padding-inline: 0.5ch;
|
||||
place-content: center;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.attachment--preview {
|
||||
margin-inline: auto;
|
||||
text-align: center;
|
||||
|
||||
img, video {
|
||||
block-size: auto;
|
||||
display: block;
|
||||
margin-inline: auto;
|
||||
max-inline-size: 100%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.attachment__caption {
|
||||
column-gap: 0.5ch;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-block-start: 0.5ch;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment--file {
|
||||
--attachment-icon-color: var(--color-ink-medium);
|
||||
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1ch;
|
||||
inline-size: 100%;
|
||||
margin-inline: 0;
|
||||
|
||||
.attachment__caption {
|
||||
display: grid;
|
||||
flex: 1;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.attachment__name {
|
||||
color: var(--color-ink);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Video attachments don't have an identifiable class, but we need to
|
||||
* make sure the caption is always below the video */
|
||||
&:has(video) {
|
||||
.attachment__caption {
|
||||
flex: none;
|
||||
inline-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.attachment--psd,
|
||||
.attachment--key,
|
||||
.attachment--sketch,
|
||||
.attachment--ai,
|
||||
.attachment--eps,
|
||||
.attachment--indd,
|
||||
.attachment--svg,
|
||||
.attachment--ppt,
|
||||
.attachment--pptx {
|
||||
--attachment-icon-color: oklch(var(--lch-red-medium));
|
||||
}
|
||||
|
||||
.attachment--css,
|
||||
.attachment--crash,
|
||||
.attachment--php,
|
||||
.attachment--json,
|
||||
.attachment--htm,
|
||||
.attachment--html,
|
||||
.attachment--rb,
|
||||
.attachment--erb,
|
||||
.attachment--ts,
|
||||
.attachment--js {
|
||||
--attachment-icon-color: oklch(var(--lch-purple-medium));
|
||||
}
|
||||
|
||||
.attachment--txt,
|
||||
.attachment--pages,
|
||||
.attachment--rtf,
|
||||
.attachment--md,
|
||||
.attachment--doc,
|
||||
.attachment--docx {
|
||||
--attachment-icon-color: oklch(var(--lch-blue-medium));
|
||||
}
|
||||
|
||||
.attachment--csv &,
|
||||
.attachment--numbers &,
|
||||
.attachment--xls &,
|
||||
.attachment--xlsx & {
|
||||
--attachment-icon-color: oklch(var(--lch-green-medium));
|
||||
}
|
||||
|
||||
.attachment__link {
|
||||
color: var(--color-link);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Custom attachments such as mentions, etc. */
|
||||
action-text-attachment[content-type^='application/vnd.actiontext'] {
|
||||
--attachment-bg-color: transparent;
|
||||
--attachment-image-size: 1em;
|
||||
--attachment-text-color: currentColor;
|
||||
|
||||
align-items: center;
|
||||
background: var(--attachment-bg-color);
|
||||
border-radius: 99rem;
|
||||
box-shadow:
|
||||
-0.25ch 0 0 var(--attachment-bg-color),
|
||||
0.5ch 0 0 var(--attachment-bg-color);
|
||||
color: var(--attachment-text-color);
|
||||
display: inline-flex;
|
||||
gap: 0.25ch;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
white-space: normal;
|
||||
|
||||
lexxy-editor & {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
block-size: var(--attachment-image-size);
|
||||
border-radius: 50%;
|
||||
inline-size: var(--attachment-image-size);
|
||||
}
|
||||
|
||||
&.node--selected {
|
||||
--attachment-bg-color: oklch(var(--lch-blue-dark));
|
||||
--attachment-text-color: var(--color-ink-inverted);
|
||||
}
|
||||
}
|
||||
|
||||
action-text-attachment[content-type^='application/vnd.actiontext.mention'] {
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
[data-lexical-cursor] {
|
||||
animation: blink 1s step-end infinite;
|
||||
block-size: 1lh;
|
||||
border-inline-start: 1px solid currentColor;
|
||||
line-height: inherit;
|
||||
margin-block: 1em;
|
||||
}
|
||||
}
|
||||
@@ -15,11 +15,7 @@ module RichTextHelper
|
||||
content_tag "lexxy-prompt", "", trigger: "#", src: prompts_cards_path, name: "card", "insert-editable-text": true, "remote-filtering": true, "supports-space-in-searches": true
|
||||
end
|
||||
|
||||
def code_language_picker
|
||||
content_tag "lexxy-code-language-picker"
|
||||
end
|
||||
|
||||
def general_prompts(board)
|
||||
safe_join([ mentions_prompt(board), cards_prompt, code_language_picker ])
|
||||
safe_join([ mentions_prompt(board), cards_prompt ])
|
||||
end
|
||||
end
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
<strong class="margin-block-end-half flex justify-center txt-small">Add an optional description to the public page</strong>
|
||||
<div class="border-radius input fill-white">
|
||||
<%= form_with model: board, class: "txt-align-start", data: { controller: "form", turbo_frame: "_top" } do |form| %>
|
||||
<%= form.rich_textarea :public_description, class: "rich-text-content txt-small",
|
||||
<%= form.rich_textarea :public_description, class: "lexxy-content txt-small",
|
||||
placeholder: "Add a public note about this board…",
|
||||
data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" },
|
||||
readonly: !Current.user.can_administer_board?(@board) %>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="comment__body rich-text-content" data-controller="syntax-highlight retarget-links" data-turbo-permanent>
|
||||
<div class="comment__body lexxy-content" data-controller="syntax-highlight retarget-links" data-turbo-permanent>
|
||||
<%= comment.body %>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
</figure>
|
||||
|
||||
<div class="comment__content flex-inline flex-column full-width">
|
||||
<div class="comment__body rich-text-content" data-turbo-permanent>
|
||||
<div class="comment__body lexxy-content" data-turbo-permanent>
|
||||
<%= form_with model: Comment.new, url: card_comments_path(card), class: "flex flex-column gap full-width",
|
||||
data: { controller: "form local-save",
|
||||
local_save_key_value: "comment-#{card.id}",
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</figure>
|
||||
|
||||
<div class="comment__content flex flex-column flex-item-grow full-width">
|
||||
<div class="comment__body rich-text-content" data-turbo-permanent>
|
||||
<div class="comment__body lexxy-content" data-turbo-permanent>
|
||||
<%= form_with model: [ @card, @comment ], class: "flex flex-column gap full-width",
|
||||
data: { controller: "form", action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } do |form| %>
|
||||
<%= form.rich_textarea :body, required: true, autofocus: true, placeholder: new_comment_placeholder(@card) do %>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<% end %>
|
||||
</h1>
|
||||
|
||||
<%= form.rich_textarea :description, class: "card__description rich-text-content",
|
||||
<%= form.rich_textarea :description, class: "card__description lexxy-content",
|
||||
placeholder: "Add some notes, context, pictures, or video about this…",
|
||||
data: { action: "lexxy:change->auto-save#change focusout->auto-save#submit" } do %>
|
||||
<%= general_prompts(card.board) %>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
</h1>
|
||||
|
||||
<% unless card.description.blank? %>
|
||||
<div class="card__description rich-text-content" data-controller="syntax-highlight retarget-links">
|
||||
<div class="card__description lexxy-content" data-controller="syntax-highlight retarget-links">
|
||||
<%= card.description %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<% end %>
|
||||
</h1>
|
||||
|
||||
<%= form.rich_textarea :description, class: "card__description rich-text-content",
|
||||
<%= form.rich_textarea :description, class: "card__description lexxy-content",
|
||||
placeholder: "Add some notes, context, pictures, or video about this…",
|
||||
data: { local_save_target: "input", action: "lexxy:change->local-save#save turbo:morph-element->local-save#restoreContent keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } do %>
|
||||
<%= general_prompts(@card.board) %>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<% end %>
|
||||
|
||||
<% if @board.public_description.present? %>
|
||||
<div class="card__board-public-description rich-text-content txt-align-center center margin-block-end" data-controller="syntax-highlight">
|
||||
<div class="card__board-public-description lexxy-content txt-align-center center margin-block-end" data-controller="syntax-highlight">
|
||||
<%= @board.public_description %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<h1 class="card__title flex align-start gap-half">
|
||||
<%= tag.span card.title, class: "card__title-link" %>
|
||||
</h1>
|
||||
<div class="card__description rich-text-content" data-controller="syntax-highlight">
|
||||
<div class="card__description lexxy-content" data-controller="syntax-highlight">
|
||||
<%= card.description %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user