docz-theme-default/dist/index.esm2.js

The default theme of docz

import { useRef, useEffect, createElement, Fragment } from 'react';
import { useConfig } from 'docz';
import 'lodash/get';
import styled, { createGlobalStyle, css } from 'styled-components';
import { a as get } from './chunk.esm.js';
import { Controlled } from 'react-codemirror2';
import PerfectScrollbar from 'react-perfect-scrollbar';
import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/jsx/jsx';
import 'codemirror/mode/css/css';
import 'codemirror/addon/edit/matchbrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/fold/xml-fold';

const ScrollbarStyles = createGlobalStyle`
  /*
  * Container style
  */
  .ps {
    overflow: hidden !important;
    overflow-anchor: none;
    -ms-overflow-style: none;
    touch-action: auto;
    -ms-touch-action: auto;
  }
  /*
  * Scrollbar rail styles
  */
  .ps__rail-x {
    display: none;
    opacity: 0;
    transition: background-color 0.2s linear, opacity 0.2s linear;
    -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
    height: 15px;
    /* there must be 'bottom' or 'top' for ps__rail-x */
    bottom: 0px;
    /* please don't change 'position' */
    position: absolute;
  }
  .ps__rail-y {
    display: none;
    opacity: 0;
    transition: background-color 0.2s linear, opacity 0.2s linear;
    -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
    width: 15px;
    /* there must be 'right' or 'left' for ps__rail-y */
    right: 0;
    /* please don't change 'position' */
    position: absolute;
  }
  .ps--active-x > .ps__rail-x,
  .ps--active-y > .ps__rail-y {
    display: block;
    background-color: transparent;
  }
  /*
  * Scrollbar thumb styles
  */
  .ps__thumb-x {
    background-color: #aaa;
    border-radius: 4px;
    transition: background-color 0.2s linear, height 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s linear,
      height 0.2s ease-in-out;
    height: 6px;
    /* there must be 'bottom' for ps__thumb-x */
    bottom: 2px;
    /* please don't change 'position' */
    position: absolute;
  }
  .ps__thumb-y {
    background-color: #aaa;
    border-radius: 4px;
    transition: background-color 0.2s linear, width 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
    width: 6px;
    /* there must be 'right' for ps__thumb-y */
    right: 2px;
    /* please don't change 'position' */
    position: absolute;
  }
  .ps__rail-x:hover > .ps__thumb-x,
  .ps__rail-x:focus > .ps__thumb-x,
  .ps__rail-x.ps--clicking .ps__thumb-x {
    background-color: #999;
    height: 11px;
  }
  .ps__rail-y:hover > .ps__thumb-y,
  .ps__rail-y:focus > .ps__thumb-y,
  .ps__rail-y.ps--clicking .ps__thumb-y {
    background-color: #999;
    width: 11px;
  }
  /* MS supports */
  @supports (-ms-overflow-style: none) {
    .ps {
      overflow: auto !important;
    }
  }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ps {
      overflow: auto !important;
    }
  }
  .scrollbar-container {
    position: relative;
    height: 100%;
  }
`;

const theme = css([".cm-s-docz-light.CodeMirror{border-radius:0;background:#fbfcfd;color:#24292e;}.cm-s-docz-light .CodeMirror-gutters{background:#fbfcfd;border-right-width:0;border-radius:0;}.cm-s-docz-light .CodeMirror-guttermarker{color:white;}.cm-s-docz-light .CodeMirror-guttermarker-subtle{color:#d0d0d0;}.cm-s-docz-light .CodeMirror-linenumber{color:#959da5;background:#fbfcfd;}.cm-s-docz-light .CodeMirror-cursor{border-left:1px solid #24292e;}.cm-s-docz-light div.CodeMirror-selected,.cm-s-docz-light .CodeMirror-line::selection,.cm-s-docz-light .CodeMirror-line > span::selection,.cm-s-docz-light .CodeMirror-line > span > span::selection,.cm-s-docz-light .CodeMirror-line::-moz-selection,.cm-s-docz-light .CodeMirror-line > span::-moz-selection,.cm-s-docz-light .CodeMirror-line > span > span::-moz-selection{background:#c8c8fa;}.cm-s-docz-light .CodeMirror-activeline-background{background:#fafbfc;}.cm-s-docz-light .CodeMirror-matchingbracket{text-decoration:underline;color:#949495 !important;}.cm-s-docz-light .CodeMirror-lines{background:#fbfcfd;}.cm-s-docz-light .cm-comment{color:#6a737d;}.cm-s-docz-light .cm-tag,.cm-s-docz-light .cm-bracket{color:#d73a49;}.cm-s-docz-light .cm-constant{color:#005cc5;}.cm-s-docz-light .cm-entity{font-weight:normal;font-style:normal;text-decoration:none;color:#6f42c1;}.cm-s-docz-light .cm-keyword{font-weight:normal;font-style:normal;text-decoration:none;color:#d73a49;}.cm-s-docz-light .cm-storage{color:#d73a49;}.cm-s-docz-light .cm-string{font-weight:normal;font-style:normal;text-decoration:none;color:#005cc5;}.cm-s-docz-light .cm-support{font-weight:normal;font-style:normal;text-decoration:none;color:#005cc5;}.cm-s-docz-light .cm-variable{font-weight:normal;font-style:normal;text-decoration:none;color:#e36209;}"]);

const theme$1 = css([".CodeMirror.cm-s-docz-dark{color:#d8dee9;background-color:#2e3440;border-radius:0;}.cm-s-docz-dark .CodeMirror-selected{background-color:rgba(67,76,94,0.8);}.cm-s-docz-dark .CodeMirror-gutter,.cm-s-docz-dark .CodeMirror-gutters{border:none;background-color:#2e3440;border-radius:0;}.cm-s-docz-dark .CodeMirror-linenumber,.cm-s-docz-dark .CodeMirror-linenumbers{color:rgba(216,222,233,0.4) !important;background-color:#2e3440;}.cm-s-docz-dark .CodeMirror-lines{color:#d8dee9 !important;background-color:transparent;}.cm-s-docz-dark .CodeMirror-cursor{border-left:2px solid #d8dee9 !important;}.cm-s-docz-dark .CodeMirror-matchingbracket,.cm-s-docz-dark .CodeMirror-matchingtag{border-bottom:2px solid #81a1c1;color:#d8dee9 !important;background-color:transparent;}.cm-s-docz-dark .CodeMirror-nonmatchingbracket{border-bottom:2px solid #bf616a;color:#d8dee9 !important;background-color:transparent;}.cm-s-docz-dark .CodeMirror-foldmarker,.cm-s-docz-dark .CodeMirror-foldgutter,.cm-s-docz-dark .CodeMirror-foldgutter-open,.cm-s-docz-dark .CodeMirror-foldgutter-folded{border:none;text-shadow:none;color:#d8dee9 !important;background-color:transparent;}.cm-s-docz-dark .CodeMirror-activeline-background{background-color:rgba(67,76,94,0.32);}.cm-s-docz-dark .cm-attribute{color:#8fbcbb;}.cm-s-docz-dark .cm-keyword{color:#81a1c1;}.cm-s-docz-dark .cm-def{color:#d8dee9;}.cm-s-docz-dark .cm-atom{color:#81a1c1;}.cm-s-docz-dark .cm-number{color:#b48ead;}.cm-s-docz-dark .cm-property{color:#d8dee9;}.cm-s-docz-dark .cm-qualifier{color:#88c0d0;}.cm-s-docz-dark .cm-variable,.cm-s-docz-dark .cm-variable-2{color:#88c0d0;}.cm-s-docz-dark .cm-variable-3{color:#d8dee9;}.cm-s-docz-dark .cm-string,.cm-s-docz-dark .cm-string-2{color:#a3be8c;}.cm-s-docz-dark .cm-operator{color:#81a1c1;}.cm-s-docz-dark .cm-meta{color:#81a1c1;}.cm-s-docz-dark .cm-comment{color:#4c566a;}.cm-s-docz-dark .cm-error{color:#bf616a;}.cm-s-docz-dark .cm-header{color:#88c0d0;}.cm-s-docz-dark .cm-quote{color:#4c566a;}.cm-s-docz-dark .cm-link{color:#88c0d0;text-decoration:none;}.cm-s-docz-dark .cm-url{color:#d8dee9;text-decoration:underline;}.cm-s-docz-dark .cm-strong{font-weight:bold;}.cm-s-docz-dark .cm-em{font-style:italic;}.cm-s-docz-dark .cm-negative{color:#bf616a;}.cm-s-docz-dark .cm-positive{color:#a3be8c;}.cm-s-docz-dark .cm-tag{color:#81a1c1;}"]);

const Scrollbar = styled(PerfectScrollbar).withConfig({
  displayName: "CodeMirror__Scrollbar"
})(["overflow:auto;position:relative;max-height:", "px;.ps__rail-y{z-index:9;opacity:0.4;}"], p => 25 * p.linesToScroll);
const preStyles = get('styles.pre');
const EditorStyled = styled(Controlled).withConfig({
  displayName: "CodeMirror__EditorStyled"
})(["", ";", ";position:relative;flex:1;.CodeMirror{max-width:100%;height:100%;}.CodeMirror-gutters{left:1px !important;}.CodeMirror-lines{padding:10px 0;box-sizing:content-box;}.CodeMirror-line{padding:0 10px;}.CodeMirror-linenumber{padding:0 7px 0 5px;}&,.CodeMirror pre{", ";}"], theme$1, theme, preStyles);
const scrollbarOpts = {
  wheelSpeed: 2,
  wheelPropagation: true,
  minScrollbarLength: 20,
  suppressScrollX: true
};

const noCurrent = val => !val || !val.current;

const CodeMirror = props => {
  const {
    themeConfig
  } = useConfig();
  const editor = useRef(null);
  const forceUpdateEditorTimeout = useRef(0);
  const previousEditor = useRef(0);
  const linesToScroll = themeConfig.linesToScrollEditor || 14;
  const editorProps = Object.assign({}, props, {
    editorDidMount: codemirror => {
      props.editorDidMount && props.editorDidMount(codemirror);
      editor.current = codemirror;
    }
  });

  const refreshCodeMirror = () => {
    if (noCurrent(editor)) return;
    editor.current.refresh();
  };

  const clearForceUpdateCodeMirror = () => {
    if (noCurrent(forceUpdateEditorTimeout)) return;
    clearTimeout(forceUpdateEditorTimeout.current);
  };

  const forceUpdateCodeMirror = () => {
    if (noCurrent(editor)) return;
    clearForceUpdateCodeMirror();
    forceUpdateEditorTimeout.current = setTimeout(() => {
      const currentHeight = editor.current.getScrollInfo().height || 0;
      const hasNoHeight = currentHeight <= 0; // Don't refresh if no height (CodeMirror is not visible) or
      // Don't refresh if same height

      if (hasNoHeight || previousEditor === currentHeight) return;
      refreshCodeMirror();
      previousEditor.current = editor.current.getScrollInfo().height || 0;
    });
  };

  useEffect(() => {
    forceUpdateCodeMirror();
    return () => clearForceUpdateCodeMirror();
  }, []);
  return createElement(Fragment, null, createElement(ScrollbarStyles, null), createElement(Scrollbar, {
    options: scrollbarOpts,
    linesToScroll: linesToScroll
  }, createElement(EditorStyled, Object.assign({}, editorProps))));
};

export default CodeMirror;