Formatted text

typography.formatted.css

.text-formatted class is applied by default to starterkit's field--text.html.twig.

One of the challenges is that the formatted text elements may not be direct descendants of the container. There could be a .field__item for multivalue fields, and some modules add wrapper elements inside the container, like photoswipe.

Testing this:

/* Formatted typography. */
.text-formatted :not(.embedded-entity) {
  overflow-wrap: break-word; /* Prevent long word overflow */

  /* Apply to elements not in embedded entities */
  /* TODO: Add other nested content */
  :where(ol,ul):not(.embedded-entity *) {
    &ol {
      @apply list-decimal;
    }
    &ul {
      @apply list-disc;
    }
    li + li {
      @apply mt-1;
    }
  }
}

I tried using the tailwind typography plugin, via unocss, but it needs work to be compatible with things we can put into ckeditor.

With Unocss, I changed the default .prose class to .text-formatted.

Not currently in use.