@redocly/theme/lib/components/Markdown/Markdown.js

Shared UI components lib

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Markdown = void 0;
const styled_components_1 = __importStar(require("styled-components"));
const theme_helpers_1 = require("../../core/utils/theme-helpers");
const baseTable_1 = require("../../components/Markdown/styles/baseTable");
const links_1 = require("../../components/Markdown/styles/links");
const headingAnchor_1 = require("../../components/Markdown/styles/headingAnchor");
exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
    'data-component-name': 'Markdown/Markdown',
    className,
})) `
  font-size: var(--md-content-font-size);
  font-family: var(--md-content-font-family);
  font-weight: var(--md-content-font-weight);
  line-height: var(--md-content-line-height);
  color: var(--md-content-text-color);
  padding: 0;

  ${({ compact }) => compact &&
    (0, styled_components_1.css) `
      p:first-child {
        margin-top: 0;
      }
      p:last-child {
        margin-bottom: 0;
      }
    `}

  ${({ base }) => base &&
    (0, styled_components_1.css) `
      p {
        font-size: var(--md-content-font-size);
      }
    `}

  ${({ inline }) => inline &&
    (0, styled_components_1.css) `
      p {
        display: inline-block;
      }
    `}

  ${links_1.markdownLinksCss}

  div[id], a[id], a[name] {
    scroll-margin-top: var(--navbar-height);
  }

  img,
  iframe {
    max-width: 100%;
  }

  h1.md,
  h2.md,
  h3.md,
  h4.md,
  h5.md,
  h6.md {
    font-weight: var(--heading-font-weight);
    font-family: var(--heading-font-family);
    position: relative;

    scroll-margin-top: var(--navbar-height);
  }

  strong {
    font-weight: var(--font-weight-bold);
  }

  hr {
    border-top: 1px solid var(--md-hr-border-color);
    background-color: var(--md-hr-bg-color);
    height: var(--md-hr-height);
    margin: var(--md-hr-margin-vertical) 0;
  }

  details {
    margin: 1.125em 0;

    summary {
      color: var(--text-color-secondary);
      font-weight: var(--font-weight-regular);
      outline: 0;
      padding: 0;
      cursor: pointer;
    }

    > :not(summary):first-of-type {
      margin-top: 1.25em;
    }

    > *:last-child {
      margin-bottom: 1.25em;
    }

    > :not(summary) {
      margin-left: 2em;
    }
  }

  ${baseTable_1.markdownBaseTableCss};

  p {
    margin: var(--md-paragraph-margin);
  }

  h1.md {
    ${(0, theme_helpers_1.typography)('h1')};
    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
    ${(0, headingAnchor_1.headingAnchorCss)()};
  }

  h2.md {
    ${(0, theme_helpers_1.typography)('h2')};
    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
    ${(0, headingAnchor_1.headingAnchorCss)()};
  }

  h3.md {
    ${(0, theme_helpers_1.typography)('h3')};
    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
    ${(0, headingAnchor_1.headingAnchorCss)()};
  }

  h4.md {
    ${(0, theme_helpers_1.typography)('h4')};
    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
    ${(0, headingAnchor_1.headingAnchorCss)()};
  }

  h5.md {
    ${(0, theme_helpers_1.typography)('h5')};
    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
    ${(0, headingAnchor_1.headingAnchorCss)()};
  }

  h6.md {
    ${(0, theme_helpers_1.typography)('h6')};
    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
    ${(0, headingAnchor_1.headingAnchorCss)()};
  }

  h1.md code {
    font-size: var(--h1-font-size);
    line-height: var(--h1-code-line-height);
  }

  h2.md code {
    font-size: var(--h2-font-size);
    line-height: var(--h2-code-line-height);
  }

  h3.md code {
    font-size: var(--h3-font-size);
    line-height: var(--h3-code-line-height);
  }

  h4.md code {
    font-size: var(--h4-font-size);
    line-height: var(--h4-code-line-height);
  }

  h5.md code {
    font-size: var(--h5-font-size);
    line-height: var(--h5-code-line-height);
  }

  h6.md code {
    font-size: var(--h6-font-size);
    line-height: var(--h6-code-line-height);
  }

  code {
    color: var(--inline-code-text-color);
    background-color: var(--inline-code-bg-color);

    border-radius: var(--inline-code-border-radius);
    padding: 0.19rem var(--spacing-xxs);
    font-weight: var(--code-font-weight);
    word-break: break-word;
    font-size: var(--font-size-sm);
    font-family: var(--font-family-monospaced);
    line-height: var(--line-height-sm);
  }

  && pre {
    white-space: var(--code-wrap, pre);
    background-color: var(--code-block-bg-color);
    font-family: var(--code-block-font-family);
    color: var(--code-block-text-color);
    padding: var(--code-block-padding);
    overflow-x: auto;
    line-height: var(--line-height-base);
    margin: var(--md-pre-margin);

    code {
      background-color: transparent;
      color: inherit;
      font-size: inherit;
      font-family: inherit;
      border: none;
    }
  }

  blockquote {
    margin: var(--md-blockquote-margin-vertical) var(--md-blockquote-margin-horizontal);
    padding: var(--md-blockquote-padding-vertical) var(--md-blockquote-padding-horizontal);
    border-left: var(--md-blockquote-border-left);
    background-color: var(--md-blockquote-bg-color);
    color: var(--md-blockquote-text-color);
    box-shadow: var(--md-blockquote-box-shadow);

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

  img {
    max-width: 100%;
    box-sizing: content-box;
    margin: 0 auto;

    &:only-child {
      display: block;
    }
  }

  p,
  li {
    & > img:only-child {
      display: inline-block;
    }
  }

  ul,
  ol {
    padding-left: var(--md-list-left-padding);
    margin: var(--md-list-margin);

    ul,
    ol {
      margin-bottom: 0;
      margin-top: 0;
    }
  }

  li {
    list-style: var(--md-list-item-style);

    &:not(:last-child) {
      margin-bottom: calc(var(--spacing-xxs) / 2);
    }

    &::marker {
      padding-left: 0.25rem;
    }
  }

  ul > li:has(input[type='checkbox']) {
    list-style: var(--md-checkbox-list-item-style);
  }

  ol > li {
    list-style: var(--md-numbered-list-item-style);
  }

  ol > li:before {
    content: counter(list-item);
    display: var(--md-numbered-list-number-display);
    color: var(--md-numbered-list-number-text-color);
    font-size: var(--md-numbered-list-number-font-size);
    font-family: var(--md-numbered-list-number-font-family);
    font-weight: var(--md-numbered-list-number-font-weight);
    background-color: var(--md-numbered-list-number-bg-color);
    border-radius: var(--md-numbered-list-number-border-radius);
    border: var(--md-numbered-list-number-border);
    margin-right: var(--md-numbered-list-number-margin-right);
    padding: var(--md-numbered-list-number-padding);
  }
`;
//# sourceMappingURL=Markdown.js.map