@webority/theme 0.24.0 → 0.26.0

package/scss/wui/_rich-text.scss

@@ -0,0 +1,281 @@
+// Rich text: the <wui-rich-text> element behind AppRichText / <app-rich-text>.
+//
+// Part of the wui-components layer; see _wui-components.scss for the load order. The shell wears the
+// shared field chrome (muted fill at rest, white surface and brand border on focus, soft danger
+// border when invalid) around a toolbar and the editable surface; the content takes the page's
+// type. Every colour is a token the dark remap in _wui-aliases.scss flips with the rest of the portal.
+
+wui-rich-text {
+    display: block;
+    min-width: 0;
+}
+// Until the editor's own script has run, the field shows its starting value in a plain box.
+wui-rich-text:not(:defined) > textarea {
+    display: block;
+    width: 100%;
+    min-height: 180px;
+}
+
+.wui-rich-text-shell {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-field-radius);
+    background: var(--color-field-bg);
+    color: var(--color-text);
+    font-size: 14px;
+    line-height: 1.5;
+    overflow: hidden;
+    transition:
+        border-color 0.12s,
+        background-color 0.12s;
+}
+.wui-rich-text-shell:hover {
+    border-color: var(--color-border-strong);
+}
+.wui-rich-text-shell:focus-within {
+    background: var(--color-surface);
+    border-color: var(--color-focus-border);
+}
+wui-rich-text[aria-invalid="true"] .wui-rich-text-shell,
+wui-rich-text[aria-invalid="true"] .wui-rich-text-shell:focus-within {
+    background: var(--color-surface);
+    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
+}
+wui-rich-text[disabled] .wui-rich-text-shell {
+    background: var(--color-border);
+    border-color: transparent;
+    color: var(--color-text-subtle);
+    cursor: not-allowed;
+}
+wui-rich-text[readonly] .wui-rich-text-shell {
+    background: var(--color-bg-subtle);
+    color: var(--color-text-muted);
+}
+
+// ── Toolbar ──
+// Wraps on a phone rather than scrolling sideways, so every tool stays reachable at 375px.
+.wui-rich-text-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 2px 8px;
+    padding: 6px;
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-rich-text-group {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+.wui-rich-text-group + .wui-rich-text-group {
+    padding-left: 8px;
+    border-left: 1px solid var(--color-border);
+}
+.wui-rich-text-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    height: 32px;
+    padding: 0 6px;
+    border: 0;
+    border-radius: var(--wui-radius);
+    background: transparent;
+    color: var(--color-text-muted);
+    font: inherit;
+    font-size: 13px;
+    cursor: pointer;
+    transition:
+        background-color 0.12s,
+        color 0.12s;
+}
+.wui-rich-text-button:hover:not(:disabled) {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+.wui-rich-text-button[aria-pressed="true"] {
+    background: var(--color-primary-soft);
+    color: var(--color-text);
+}
+.wui-rich-text-button:focus-visible {
+    outline: 2px solid var(--color-focus-border);
+    outline-offset: 1px;
+}
+.wui-rich-text-button:disabled {
+    color: var(--color-text-subtle);
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.wui-rich-text-glyph {
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1;
+}
+
+// ── Link box ──
+.wui-rich-text-linkbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    padding: 6px;
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-bg-subtle);
+}
+.wui-rich-text-linkbar[hidden],
+.wui-rich-text-link-error[hidden],
+.wui-rich-text-link-remove[hidden] {
+    display: none;
+}
+.wui-rich-text-link-input {
+    flex: 1 1 200px;
+    min-width: 0;
+    height: 32px;
+    padding: 0 10px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-field-radius-sm);
+    background: var(--color-surface);
+    color: var(--color-text);
+    font: inherit;
+    font-size: 13px;
+}
+.wui-rich-text-link-input:focus {
+    outline: none;
+    border-color: var(--color-focus-border);
+}
+.wui-rich-text-link-input[aria-invalid="true"] {
+    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
+}
+.wui-rich-text-link-apply,
+.wui-rich-text-link-remove,
+.wui-rich-text-link-cancel {
+    height: 32px;
+    padding: 0 10px;
+    border: 0;
+    border-radius: var(--wui-radius);
+    background: transparent;
+    color: var(--color-text-muted);
+    font: inherit;
+    font-size: 13px;
+    cursor: pointer;
+}
+.wui-rich-text-link-apply {
+    background: var(--color-primary);
+    color: var(--color-primary-text);
+}
+.wui-rich-text-link-apply:hover {
+    background: var(--color-primary-hover);
+}
+.wui-rich-text-link-remove:hover,
+.wui-rich-text-link-cancel:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+.wui-rich-text-link-apply:focus-visible,
+.wui-rich-text-link-remove:focus-visible,
+.wui-rich-text-link-cancel:focus-visible {
+    outline: 2px solid var(--color-focus-border);
+    outline-offset: 1px;
+}
+.wui-rich-text-link-error {
+    flex: 1 0 100%;
+    font-size: 12px;
+    color: var(--color-danger-text);
+}
+
+// ── Editable surface ──
+.wui-rich-text-content {
+    min-width: 0;
+}
+.wui-rich-text-prose {
+    box-sizing: border-box;
+    min-height: 140px;
+    max-height: 480px;
+    overflow-y: auto;
+    padding: 12px 15px;
+    outline: none;
+    overflow-wrap: anywhere;
+    cursor: text;
+}
+wui-rich-text[disabled] .wui-rich-text-prose {
+    cursor: not-allowed;
+}
+wui-rich-text[readonly] .wui-rich-text-prose {
+    cursor: default;
+}
+.wui-rich-text-prose > :first-child {
+    margin-top: 0;
+}
+.wui-rich-text-prose > :last-child {
+    margin-bottom: 0;
+}
+.wui-rich-text-prose p {
+    margin: 0 0 0.75em;
+}
+.wui-rich-text-prose h2,
+.wui-rich-text-prose h3 {
+    margin: 1em 0 0.5em;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--color-text);
+}
+.wui-rich-text-prose h2 {
+    font-size: 1.25em;
+}
+.wui-rich-text-prose h3 {
+    font-size: 1.1em;
+}
+.wui-rich-text-prose ul,
+.wui-rich-text-prose ol {
+    margin: 0 0 0.75em;
+    padding-left: 1.5em;
+}
+.wui-rich-text-prose li > p {
+    margin-bottom: 0.25em;
+}
+.wui-rich-text-prose blockquote {
+    margin: 0 0 0.75em;
+    padding-left: 12px;
+    border-left: 3px solid var(--color-border-strong);
+    color: var(--color-text-muted);
+}
+.wui-rich-text-prose a {
+    color: var(--bs-link-color);
+    text-decoration: underline;
+    cursor: pointer;
+}
+.wui-rich-text-prose code {
+    padding: 0.1em 0.35em;
+    border-radius: var(--wui-radius-sm);
+    background: var(--color-bg-muted);
+    font-size: 0.9em;
+}
+.wui-rich-text-prose pre {
+    margin: 0 0 0.75em;
+    padding: 10px 12px;
+    border-radius: var(--wui-radius);
+    background: var(--color-bg-muted);
+    overflow-x: auto;
+}
+.wui-rich-text-prose pre code {
+    padding: 0;
+    background: transparent;
+    font-size: 0.9em;
+}
+// The engine marks the empty first paragraph; the placeholder text is its data attribute.
+.wui-rich-text-prose p.wui-rich-text-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    color: var(--color-text-subtle);
+    pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+    .wui-rich-text-shell,
+    .wui-rich-text-button {
+        transition: none;
+    }
+}