oui-kit/lib/basic/oui-richtext.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "../../stylus/index.styl";

.oui-richtext {
  .tiptap {
    outline: none;
    min-height: rex(80);
    padding: rex(8) rex(12);
    line-height: 1.4;
    margin: 0;

    strong {
      font-weight: bold;
    }

    em {
      font-style: italic;
    }

    u {
      text-decoration: underline;
    }

    h1, h2, h3 {
      margin: rex(8) 0 rex(4);
      line-height: 1.3;

      &:first-child {
        margin-top: 0;
      }
    }

    h1 {
      font-size: rex(24);
      font-weight: 700;
    }

    h2 {
      font-size: rex(20);
      font-weight: 600;
    }

    h3 {
      font-size: rex(16);
      font-weight: 600;
    }

    p {
      margin: 0;
    }

    p + p {
      margin-top: rex(4);
    }

    ul, ol {
      padding-left: rex(24);
      margin: rex(4) 0;
    }

    ul {
      list-style-type: disc;
    }

    ol {
      list-style-type: decimal;
    }

    li {
      margin: rex(2) 0;
    }

    blockquote {
      border-left: rex(3) solid var(--s2-fg);
      padding-left: rex(12);
      margin: rex(8) 0;
      color: var(--s2-fg);
    }

    pre {
      background: var(--t3-bg);
      border-radius: rex(4);
      padding: rex(8) rex(12);
      margin: rex(8) 0;
      font-family: monospace;
      font-size: rex(13);
      overflow-x: auto;

      code {
        background: none;
        padding: 0;
      }
    }

    code {
      background: var(--t3-bg);
      border-radius: rex(3);
      padding: rex(1) rex(4);
      font-family: monospace;
      font-size: rex(13);
    }

    hr {
      border: none;
      border-top: 1px solid var(--t3-bg);
      margin: rex(12) 0;
    }

    a {
      color: var(--p1-fg);
      text-decoration: underline;
      cursor: text;
      pointer-events: none;
    }

    // Placeholder
    p.is-editor-empty:first-child::before {
      content: attr(data-placeholder);
      float: left;
      color: var(--n0-fg-muted, var(--s2-fg));
      pointer-events: none;
      height: 0;
    }
  }

  &._bordered {
    oui-form();
    oui-input-default();
    display: block;
    padding: 0;
    min-height: auto;
  }

  &._disabled {
    opacity: 0.6;
    pointer-events: none;
  }

  &-link {
    color: var(--p1-fg);
    text-decoration: underline;
    cursor: pointer;
  }

  &-mention {
    background: var(--p1-bg-light, var(--p1-bg));
    color: var(--p1-fg);
    border-radius: rex(3);
    padding: rex(1) rex(4);
    font-weight: 500;
    white-space: nowrap;
  }

  &-toolbar {
    z-index: -z-index-popover;
    display: flex;
    gap: rex(2);
    background: var(--n0-900, rgb(56, 56, 56));
    border-radius: rex(6);
    padding: rex(4);
    box-shadow: rgba(15, 15, 15, 0.2) 0 9px 24px;

    .dark & {
      background: black;
    }

    button {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: rex(28);
      height: rex(28);
      border: none;
      background: transparent;
      color: var(--n0-50, white);
      border-radius: rex(4);
      cursor: pointer;
      font-size: rex(14);
      padding: 0 rex(6);

      &:hover {
        background: rgba(255, 255, 255, 0.15);
      }

      &._active {
        background: rgba(255, 255, 255, 0.25);
      }
    }

    &-input {
      background: rgba(255, 255, 255, 0.15);
      border: none;
      border-radius: rex(4);
      color: var(--n0-50, white);
      font-size: rex(13);
      padding: rex(4) rex(8);
      outline: none;
      min-width: rex(160);

      &::placeholder {
        color: rgba(255, 255, 255, 0.5);
      }
    }

    &-transition {
      &-enter-active, &-leave-active {
        transition: opacity 150ms ease-in-out;
      }

      &-enter-from, &-leave-to {
        opacity: 0;
      }
    }
  }

  &-mentions {
    z-index: -z-index-popover;
    background: var(--bg);
    border: 1px solid var(--t3-bg);
    border-radius: rex(6);
    box-shadow: rgba(15, 15, 15, 0.2) 0 9px 24px;
    padding: rex(4);
    max-height: rex(200);
    overflow-y: auto;
    min-width: rex(150);
  }

  &-mention-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: rex(6) rex(10);
    border: none;
    background: transparent;
    color: var(--fg);
    border-radius: rex(4);
    cursor: pointer;
    font-size: rex(14);

    &:hover, &._active {
      background: var(--p1-bg);
      color: var(--p1-fg);
    }

    &._custom {
      color: var(--s2-fg);

      &:hover, &._active {
        background: var(--p1-bg);
        color: var(--p1-fg);
      }
    }
  }
}

.oui-richtext:not(._bordered) .tiptap {
  padding: 0;
}