@readme/markdown 6.75.0-beta.27 → 6.75.0-beta.28

package/components/Callout/index.tsx

@@ -24,10 +24,4 @@ const Callout = (props: Props) => {
   );
 };
 
-Callout.sanitize = sanitizeSchema => {
-  sanitizeSchema.attributes['rdme-callout'] = ['icon', 'theme', 'heading'];
-
-  return sanitizeSchema;
-};
-
 export default Callout;

package/components/Code/index.tsx

@@ -0,0 +1,73 @@
+import copy from 'copy-to-clipboard';
+import React, { createRef } from 'react';
+
+// Only load CodeMirror in the browser, for SSR
+// apps. Necessary because of people like this:
+// https://github.com/codemirror/CodeMirror/issues/3701#issuecomment-164904534
+let syntaxHighlighter;
+let canonicalLanguage = _ => '';
+if (typeof window !== 'undefined') {
+  // eslint-disable-next-line global-require
+  syntaxHighlighter = require('@readme/syntax-highlighter').default;
+  // eslint-disable-next-line global-require
+  ({ canonical: canonicalLanguage } = require('@readme/syntax-highlighter'));
+}
+
+function CopyCode({ codeRef, rootClass = 'rdmd-code-copy', className = '' }) {
+  const copyClass = `${rootClass}_copied`;
+  const button = createRef<HTMLButtonElement>();
+
+  const copier = () => {
+    const code = codeRef.current.textContent;
+
+    if (copy(code)) {
+      const el = button.current;
+      el.classList.add(copyClass);
+
+      setTimeout(() => el.classList.remove(copyClass), 1500);
+    }
+  };
+
+  return <button ref={button} aria-label="Copy Code" className={`${rootClass} ${className}`} onClick={copier} />;
+}
+
+interface Props extends Omit<HTMLElement, 'lang'> {
+  copyButtons?: boolean;
+  lang?: string;
+  meta?: string;
+  theme?: string;
+  value?: string;
+}
+
+const Code = (props: Props) => {
+  const { children, copyButtons, lang, theme, value } = props;
+
+  const language = canonicalLanguage(lang);
+
+  const codeRef = createRef<HTMLElement>();
+
+  const codeOpts = {
+    inline: !lang,
+    tokenizeVariables: true,
+    dark: theme === 'dark',
+  };
+
+  const code = value ?? children?.[0] ?? children ?? '';
+  const highlightedCode = syntaxHighlighter && code ? syntaxHighlighter(code, language, codeOpts) : code;
+
+  return (
+    <>
+      {copyButtons && <CopyCode className="fa" codeRef={codeRef} />}
+      <code
+        ref={codeRef}
+        className={['rdmd-code', `lang-${language}`, `theme-${theme}`].join(' ')}
+        data-lang={language}
+        suppressHydrationWarning={true}
+      >
+        {highlightedCode}
+      </code>
+    </>
+  );
+};
+
+export default Code;

package/components/CodeTabs/{index.jsx → index.tsx}

@@ -1,14 +1,13 @@
-const { uppercase } = require('@readme/syntax-highlighter');
-const PropTypes = require('prop-types');
-const React = require('react');
+import { uppercase } from '@readme/syntax-highlighter';
+import React from 'react';
 
 const CodeTabs = props => {
   const { children, theme } = props;
 
-  function handleClick({ target }, index) {
+  function handleClick({ target }, index: number) {
     const $wrap = target.parentElement.parentElement;
     const $open = [].slice.call($wrap.querySelectorAll('.CodeTabs_active'));
-    $open.forEach(el => el.classList.remove('CodeTabs_active'));
+    $open.forEach((el: Element) => el.classList.remove('CodeTabs_active'));
     $wrap.classList.remove('CodeTabs_initial');
 
     const codeblocks = $wrap.querySelectorAll('pre');
@@ -20,8 +19,9 @@ const CodeTabs = props => {
   return (
     <div className={`CodeTabs CodeTabs_initial theme-${theme}`}>
       <div className="CodeTabs-toolbar">
-        {children.map(({ props: pre }, i) => {
-          const { meta, lang } = pre.children[0].props;
+        {(Array.isArray(children) ? children : [children]).map((pre, i) => {
+          const { meta, lang } = pre.props.children.props;
+
           /* istanbul ignore next */
           return (
             <button key={i} onClick={e => handleClick(e, i)} type="button">
@@ -35,15 +35,4 @@ const CodeTabs = props => {
   );
 };
 
-CodeTabs.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.any).isRequired,
-  theme: PropTypes.string,
-};
-
-function CreateCodeTabs({ theme }) {
-  // eslint-disable-next-line react/display-name
-  return props => <CodeTabs {...props} theme={theme} />;
-}
-
-module.exports = CreateCodeTabs;
-module.exports.CodeTabs = CodeTabs;
+export default CodeTabs;

package/dist/components/Callout/index.d.ts

@@ -5,8 +5,5 @@ interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLQuoteEl
     theme: string;
     heading?: React.ReactElement;
 }
-declare const Callout: {
-    (props: Props): React.JSX.Element;
-    sanitize(sanitizeSchema: any): any;
-};
+declare const Callout: (props: Props) => React.JSX.Element;
 export default Callout;

package/dist/components/Code/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props extends Omit<HTMLElement, 'lang'> {
+    copyButtons?: boolean;
+    lang?: string;
+    meta?: string;
+    theme?: string;
+    value?: string;
+}
+declare const Code: (props: Props) => React.JSX.Element;
+export default Code;

package/dist/components/CodeTabs/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CodeTabs: (props: any) => React.JSX.Element;
+export default CodeTabs;

package/dist/enums.d.ts

@@ -0,0 +1,5 @@
+export declare enum NodeTypes {
+    codeTabs = "code-tabs",
+    emoji = "emoji",
+    i = "i"
+}

package/dist/index.d.ts

@@ -1,6 +1,6 @@
+import React from 'react';
 import { RunOptions } from '@mdx-js/mdx';
 import * as Components from './components';
-import React from 'react';
 type RunOpts = Omit<RunOptions, 'Fragment'> & {
     components?: Record<string, () => React.ReactNode>;
     imports?: Record<string, unknown>;
@@ -21,6 +21,6 @@ export declare const reactTOC: (text: string, opts?: {}) => void;
 export declare const mdx: (tree: any, opts?: {}) => string;
 export declare const html: (text: string, opts?: {}) => void;
 export declare const mdast: any;
-export declare const hast: (text: string, opts?: {}) => void;
+export declare const hast: (text: string, opts?: {}) => import("hast").Root;
 export declare const esast: (text: string, opts?: {}) => void;
 export declare const plain: (text: string, opts?: {}) => void;

package/dist/lib/owlmoji.d.ts

@@ -0,0 +1,4 @@
+export default class Owlmoji {
+    static kind: (name: string) => "gemoji" | "fontawesome" | "owlmoji";
+    static nameToEmoji: Record<string, string>;
+}