v3/frontend/src/styles/editor.css

.editor-content {
    @apply text-wrap;

    p {
        @apply my-2;
    }

    .header {
        @apply mt-4 mb-2 text-blue-200 font-bold;
    }

    .header.header-1 {
        @apply text-3xl;
    }

    .header.header-2 {
        @apply text-2xl;
    }

    .header.header-3 {
        @apply text-xl;
    }

    .header.header-4 {
        @apply text-lg;
    }

    .header-marker {
        font-size: 0;
        display: inline-block;
        height: 0;
    }

    .header.focus > .header-marker {
        font-size: unset;
        height: unset;
    }

    .formatted-text {
        @apply inline;
    }

    .formatted-text-marker {
        font-size: 0;
        display: inline-block;
        height: 0;
    }

    .formatted-text.focus > .formatted-text-marker {
        font-size: unset;
        height: unset;
    }

    .formatted-text.format-bold {
        @apply font-bold text-cyan-200;
    }

    .formatted-text.format-italic {
        @apply italic text-lime-200;
    }

    .formatted-text.format-underline {
        @apply underline text-purple-200;
    }

    .formatted-text.format-strikethrough {
        @apply line-through text-red-200;
    }

    .formatted-text.format-code {
        @apply font-mono;
    }

    .task[data-task-type=TODO] .task-marker {
        @apply text-green-400;
    }

    .task[data-task-type=DOING] .task-marker {
        @apply text-yellow-400;
    }

    .task[data-task-type=DOING] .task-icon {
        @apply bg-yellow-400 text-black border-black;
    }

    .task[data-task-type=DONE] .task-marker {
        @apply line-through;
    }

    .task[data-task-type=DONE]:not(.focus) {
        @apply line-through;
    }

    .task[data-task-type=DONE] .task-icon {
        @apply bg-green-400 text-black border-black;
    }

    .task[data-task-type=IDEA] .task-marker {
        @apply text-fuchsia-400;
    }

    .task[data-task-type=IDEA] .task-icon {
        @apply bg-fuchsia-400 text-black border-black;
    }

    .task[data-task-type=DEADLINE] .task-marker {
        @apply text-red-400;
    }

    .task[data-task-type=DEADLINE] .task-icon {
        @apply bg-red-400 text-black border-black;
    }

    .link {
        @apply text-teal-300 underline inline;
    }

    .link-marker,.link-url {
        font-size: 0;
        display: inline-block;
        height: 0;
    }

    .link.focus > .link-marker, .link.focus > .link-url {
        font-size: unset;
        height: unset;
    }

    .term {
        @apply text-blue-300 inline;
    }

    .term-marker {
        font-size: 0;
        height: 0;
    }

    .term.focus > .term-marker {
        font-size: unset;
        height: unset;
    }
}