@riducms/plugin-richtext 0.2.3 → 0.4.0

package/src/styles/integration.scss

@@ -0,0 +1,384 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-richtext-field,
+	.ridu-richtext-editor {
+		min-inline-size: 0;
+	}
+
+	.ridu-richtext-canvas {
+		position: relative;
+	}
+
+	.ridu-richtext-content {
+		--lexical-indent-base-value: 40px;
+		position: relative;
+		z-index: 1;
+		min-block-size: 40px;
+		padding: 8px 0;
+		padding-inline-start: 39px;
+		border: 0;
+		color: var(--foreground);
+		caret-color: var(--foreground);
+		outline: none;
+		font-family: var(--font-richtext-body);
+		font-size: 16px;
+		line-height: 1.5;
+		tab-size: 1;
+		overflow-wrap: anywhere;
+
+		&::before {
+			position: absolute;
+			inset-block: 8px;
+			inset-inline-start: 0;
+			border-inline-start: 1px solid var(--control-surface-hover);
+			content: "";
+		}
+
+		&:focus-visible {
+			outline: none;
+		}
+	}
+
+	.ridu-richtext-editor.has-error .ridu-richtext-content::before {
+		border-inline-start: 2px solid var(--control-invalid-border);
+	}
+
+	.ridu-richtext-editor.is-read-only .ridu-richtext-content {
+		padding-inline-start: 0;
+		&::before {
+			display: none;
+		}
+	}
+
+	.ridu-richtext-placeholder {
+		position: absolute;
+		top: 8px;
+		inset-inline-start: 39px;
+		color: var(--ink-placeholder);
+		font-family: var(--font-richtext-body);
+		font-size: 16px;
+		line-height: 1.5;
+		pointer-events: none;
+		user-select: none;
+	}
+
+	.ridu-richtext-editor.is-read-only .ridu-richtext-placeholder {
+		inset-inline-start: 0;
+	}
+	.ridu-richtext-recovery {
+		margin-block: 12px;
+		color: var(--destructive);
+	}
+	.ridu-richtext-announcement {
+		@include ui.visually-hidden;
+	}
+
+	.ridu-richtext-paragraph {
+		position: relative;
+		margin: 0 0 0.55em;
+		font-size: 16px;
+		line-height: 1.5;
+	}
+
+	.ridu-richtext-heading {
+		font-family: var(--font-sans);
+		line-height: 1.125;
+		font-weight: 700;
+		letter-spacing: 0;
+	}
+
+	$heading-sizes: (
+		1: 28px,
+		2: 25px,
+		3: 22px,
+		4: 20px,
+		5: 18px,
+		6: 16px,
+	);
+	@each $level, $size in $heading-sizes {
+		.ridu-richtext-h#{$level} {
+			font-size: $size;
+			margin-block: (0.45em + $level * 0.05em) 0.4em;
+		}
+	}
+
+	.ridu-richtext-list-ordered,
+	.ridu-richtext-list-unordered,
+	.ridu-richtext-checklist {
+		padding: 0;
+		margin: 8px 0 16px;
+		list-style-position: outside;
+	}
+
+	.ridu-richtext-list-ordered {
+		list-style-type: decimal;
+	}
+	.ridu-richtext-list-unordered {
+		list-style-type: disc;
+	}
+	.ridu-richtext-list-alpha-upper {
+		list-style-type: upper-alpha;
+	}
+	.ridu-richtext-list-alpha-lower {
+		list-style-type: lower-alpha;
+	}
+	.ridu-richtext-list-roman-upper {
+		list-style-type: upper-roman;
+	}
+	.ridu-richtext-list-roman-lower {
+		list-style-type: lower-roman;
+	}
+	.ridu-richtext-list-item {
+		margin-block-end: 0.4em;
+		margin-inline-start: 40px;
+	}
+	.ridu-richtext-list-item ul,
+	.ridu-richtext-list-item ol {
+		margin-block: 0;
+	}
+	.ridu-richtext-list-item-nested {
+		list-style: none;
+	}
+	.ridu-richtext-list-item::marker {
+		color: var(--foreground);
+	}
+
+	.ridu-richtext-list-item-checked,
+	.ridu-richtext-list-item-unchecked {
+		position: relative;
+		margin-inline-start: 15px;
+		padding-inline-start: 25px;
+		list-style: none;
+		outline: none;
+		&::before {
+			position: absolute;
+			top: 2px;
+			inset-inline-start: 0;
+			inline-size: 16px;
+			block-size: 16px;
+			border: 1px solid var(--control-border);
+			border-radius: 2px;
+			cursor: pointer;
+			content: "";
+		}
+		&:focus-visible::before {
+			@include ui.focus-outline;
+		}
+	}
+
+	.ridu-richtext-list-item-checked {
+		text-decoration: line-through;
+		&::before {
+			background: var(--control-surface-hover);
+			border-color: var(--foreground-muted);
+		}
+		&::after {
+			position: absolute;
+			top: 6px;
+			inset-inline-start: 7px;
+			inline-size: 3px;
+			block-size: 6px;
+			border: solid var(--foreground);
+			border-width: 0 2px 2px 0;
+			transform: rotate(45deg);
+			content: "";
+		}
+	}
+
+	.ridu-richtext-list-item-nested::before,
+	.ridu-richtext-list-item-nested::after {
+		display: none;
+	}
+
+	.ridu-richtext-link {
+		color: var(--status-success-foreground);
+		text-decoration: none;
+		border-block-end: 1px dotted;
+		cursor: text;
+	}
+
+	.ridu-richtext-quote {
+		border-inline-start: 4px solid var(--control-border);
+		padding: 4px 0;
+		padding-inline-start: 12px;
+		margin: 16px 4px;
+		font-size: 16px;
+		font-style: normal;
+		line-height: 1.5;
+	}
+
+	.ridu-richtext-bold {
+		font-weight: bold;
+	}
+	.ridu-richtext-italic {
+		font-style: italic;
+	}
+	.ridu-richtext-underline {
+		text-decoration: underline;
+	}
+	.ridu-richtext-strikethrough {
+		text-decoration: line-through;
+	}
+	.ridu-richtext-underline.ridu-richtext-strikethrough {
+		text-decoration: underline line-through;
+	}
+	.ridu-richtext-subscript {
+		vertical-align: sub;
+		font-size: 0.8em;
+	}
+	.ridu-richtext-superscript {
+		vertical-align: super;
+		font-size: 0.8em;
+	}
+
+	.ridu-richtext-code-block {
+		display: block;
+		overflow-x: auto;
+		background: var(--control-surface);
+		padding: 15px;
+		font-family: var(--font-mono);
+		font-size: 13px;
+		margin: 20px 0;
+		tab-size: 2;
+	}
+
+	.ridu-richtext-inline-code {
+		background: var(--control-surface);
+		border: 1px solid var(--control-border);
+		border-radius: 2px;
+		color: var(--richtext-code-color);
+		font-family: var(--font-mono);
+		font-size: 0.875em;
+		padding: 2px 4px;
+		box-decoration-break: clone;
+	}
+
+	.ridu-richtext-rule {
+		border: 0;
+		border-top: 1px solid var(--control-border);
+		margin: 20px 0;
+		&.is-selected {
+			border-top-color: var(--foreground);
+		}
+	}
+
+	.ridu-richtext-footer {
+		position: relative;
+		z-index: 1;
+		display: block;
+		inline-size: 100%;
+		block-size: 24px;
+		margin-top: -8px;
+		border: 0;
+		background: transparent;
+		color: var(--foreground-muted);
+		padding: 4px 0 2px;
+		padding-inline-start: 39px;
+		font: inherit;
+		cursor: text;
+		& > span[aria-hidden] {
+			display: block;
+			block-size: 100%;
+			border-radius: 2px;
+			opacity: 0;
+		}
+		&:hover > span[aria-hidden],
+		&:focus-visible > span[aria-hidden] {
+			opacity: 1;
+			background: var(--control-surface);
+		}
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+	}
+
+	/* The block toolbar tracks the hovered Lexical block inside the editor gutter. */
+	.ridu-richtext-block-toolbar {
+		position: absolute;
+		top: 0;
+		inset-inline-start: 0;
+		z-index: 2;
+		display: flex;
+		block-size: 24px;
+		gap: 2.6px;
+		margin-inline-start: -13px;
+		color: var(--foreground-muted);
+		opacity: 0;
+		pointer-events: none;
+		will-change: transform, opacity;
+		transition: opacity 100ms ease-out;
+		&.is-visible {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
+
+	.ridu-richtext-block-grip {
+		display: grid;
+		inline-size: 18px;
+		block-size: 24px;
+		grid-template-columns: repeat(2, 2px);
+		grid-template-rows: repeat(3, 2px);
+		place-content: center;
+		gap: 2px;
+		padding: 0;
+		cursor: grab;
+		&:active {
+			cursor: grabbing;
+		}
+		span {
+			inline-size: 2px;
+			block-size: 2px;
+			border-radius: 50%;
+			background: currentColor;
+		}
+	}
+
+	.ridu-richtext-block-add {
+		inline-size: 20px;
+		block-size: 24px;
+		padding: 0;
+		border-radius: 3px;
+		color: var(--foreground-muted);
+		font-size: 14px;
+		&:hover {
+			background: var(--control-surface-hover);
+			color: var(--foreground);
+		}
+	}
+
+	.ridu-richtext-drop-line {
+		position: absolute;
+		inset-block-start: 0;
+		left: 0;
+		z-index: 2;
+		block-size: 4px;
+		border-radius: 1px;
+		background: var(--success);
+		opacity: 0;
+		pointer-events: none;
+		will-change: transform;
+		transition:
+			transform 100ms ease-out,
+			opacity 80ms ease-out;
+	}
+
+	.ridu-richtext-drop-highlight {
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 2;
+		border-radius: 4px;
+		background: var(--foreground);
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ridu-richtext-block-toolbar,
+		.ridu-richtext-drop-line {
+			transition: none;
+		}
+	}
+}

package/src/toolbar/PAYLOAD-LICENSE.md

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2018-2025 Payload CMS, Inc. <info@payloadcms.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.