platform/packages/theme/styles/prose.scss

//
// Copyright © 2022, 2023 Hardcore Engineering Inc.
//
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//
// See the License for the specific language governing permissions and
// limitations under the License.
//

/* Table */
table.proseTable {
  --table-selection-border-width: 2px;
  --table-selection-border-indent: -2px;
  --table-selection-border-radius: 2px;
  --table-handle-size: 1.25rem;
  --table-handle-indent: calc(-1.25rem - 1px);

  --table-selection-z-index: 100;
  --table-drag-and-drop-z-index: 110;
  --table-handlers-z-index: 120;

  border-collapse: collapse;
  table-layout: fixed;
  position: relative;
  width: 100%;
  margin: 0;

  td,
  th {
    min-width: 1rem;
    height: 2rem;
    border: 1px solid var(--button-border-hover);
    padding: .25rem .5rem;
    vertical-align: top;
    box-sizing: border-box;
    position: relative;

    > * {
      margin-bottom: 0;
    }
  }

  th {
    text-align: left;
    background-color: var(--text-editor-table-header-color);
  }

  p {
    margin: 0;
  }

  td,
  th {
    // cell selection

    &.table-cell-selected {
      &::before {
        content: '';
        border: 0 solid var(--primary-button-focused);
        border-radius: var(--table-selection-border-radius);
        pointer-events: none;
        position: absolute;
        z-index: var(--table-selection-z-index);
        top: var(--table-selection-border-indent);
        bottom: var(--table-selection-border-indent);
        left: var(--table-selection-border-indent);
        right: var(--table-selection-border-indent);
      }
      &__border-top::before {
        border-top-width: var(--table-selection-border-width);
      }
      &__border-bottom::before {
        border-bottom-width: var(--table-selection-border-width);
      }
      &__border-left::before {
        border-left-width: var(--table-selection-border-width);
      }
      &__border-right::before {
        border-right-width: var(--table-selection-border-width);
      }
    }

    // row and col handlers

    .table-col-handle,
    .table-row-handle {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;

      button {
        background-color: transparent;
        border-radius: var(--table-selection-border-radius);
        opacity: 0;
        transition: background-color 0.3s ease-in-out;

        svg {
          color: var(--theme-button-contrast-hovered);
        }
      }

      &__selected {
        &::before {
          content: '';
          background-color: var(--primary-button-focused);
          border: var(--table-selection-border-width) solid var(--primary-button-focused);
          border-radius: var(--table-selection-border-radius);
          pointer-events: none;
          position: absolute;
          z-index: var(--table-handlers-z-index);
          top: var(--table-selection-border-indent);
          bottom: var(--table-selection-border-indent);
          left: var(--table-selection-border-indent);
          right: var(--table-selection-border-indent);
        }

        button {
          opacity: 1;
          z-index: var(--table-handlers-z-index);

          svg {
            color: white;
          }

          &:hover {
            background-color: var(--primary-button-hovered);
          }

          &:active,
          &.pressed {
            background-color: var(--primary-button-pressed);
          }
        }
      }
    }

    .table-col-handle {
      position: absolute;
      width: calc(100% + 1px);
      height: var(--table-handle-size);
      top: var(--table-handle-indent);
      left: 0;

      button {
        height: 70%;
        padding: 0 4px;
      }

      &:hover {
        &:not(.table-col-handle__selected) {
          background-color: var(--theme-button-hovered);
        }

        button {
          opacity: 1;
        }
      }

      &__selected {
        &::before {
          right: -1px;
          top: 0;
          bottom: 0;
          border-bottom-width: 0;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }

    .table-row-handle {
      position: absolute;
      width: var(--table-handle-size);
      height: calc(100% + 1px);
      top: 0;
      left: var(--table-handle-indent);

      button {
        width: 70%;
        padding: 4px 0;

        svg {
          transform: rotate(90deg);
        }
      }

      &:hover {
        &:not(.table-row-handle__selected) {
          background-color: var(--theme-button-hovered);
        }

        button {
          opacity: 1;
        }
      }

      &__selected {
        &::before {
          bottom: -1px;
          left: 0;
          right: 0;
          border-right-width: 0;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }

    // row and col insert

    .table-col-insert,
    .table-row-insert {
      position: absolute;
      z-index: 100;
    }

    .table-col-insert {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      top: var(--table-handle-indent);
      right: -0.625rem;
      width: 1.25rem;

      .table-insert-marker {
        width: 0.125rem;
      }
    }

    .table-row-insert {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      left: var(--table-handle-indent);
      bottom: -0.625rem;
      height: 1.25rem;

      .table-insert-marker {
        height: 0.125rem;
      }
    }

    .table-insert-button {
      cursor: pointer;
      width: 1.25rem;
      height: 1.25rem;

      svg {
        color: white;
      }

      &:hover {
        border-radius: 50%;
        background-color: var(--primary-button-focused);
      }

      &:not(:hover) {
        &::before {
          content: '';
          border: 2px solid var(--text-editor-table-marker-color);
          border-radius: 50%;
          margin-left: calc(0.5rem - 1px);
        }

        svg {
          opacity: 0;
        }
      }

      &:hover + .table-insert-marker { opacity: 1; }
    }

    .table-insert-marker {
      background-color: var(--primary-button-focused);
      opacity: 0;
    }
  }

  .table-drop-marker {
    background-color: var(--primary-button-focused);
    position: absolute;
    z-index: var(--table-drag-and-drop-z-index);
  }

  .table-col-drag-marker,
  .table-row-drag-marker {
    position: absolute;
    z-index: var(--table-drag-and-drop-z-index);
    opacity: 0.5;
    background-color: var(--text-editor-drag-marker-bg-color);
    border: var(--table-selection-border-width) solid var(--text-editor-drag-marker-bg-color);
    border-radius: var(--table-selection-border-radius);

    display: flex;
    justify-content: center;
    align-items: center;

    svg {
      color: white;
      margin: auto;
    }
  }

  .table-col-drag-marker {
    height: var(--table-handle-size);
    top: calc(var(--table-handle-indent) + 1px);

    svg {
      width: 100%;
    }
  }

  .table-row-drag-marker {
    width: var(--table-handle-size);
    left: calc(var(--table-handle-indent) + 1px / 2);

    svg {
      height: 100%;
      transform: rotate(90deg);
    }
  }
}

.proseBlockQuote {
  margin-inline: 1px 0;
  padding-left: 1.5em;
  padding-right: 1.5em;
  font-style: italic;
  position: relative;

  border-left: 3px solid var(--theme-text-primary-color);
}

.proseCode {
  display: inline;
  margin: 0;
  padding: 0 .25rem;
  font-family: var(--mono-font);
  color: var(--theme-content-color);
  background-color: var(--theme-button-default);
  border: 1px solid var(--theme-button-border);
  border-radius: .25rem;
}

.proseCodeBlock {
  font-family: var(--mono-font);
  color: var(--theme-content-color);
  background-color: var(--theme-button-default);
  border: 1px solid var(--theme-button-border);
  border-radius: .25rem;
  padding: .5rem;
  user-select: text;

  pre { white-space: pre-wrap; }
}

// Fixes for MessageViewer
pre.proseCodeBlock > pre.proseCode {
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
}

.proseHeading { line-height: 110%; }

// Fixes for cursors
.ProseMirror {
  h1, h2, h3, p, pre, code { cursor: text; }
  p div { cursor: auto; }
}