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

package/components/GlossaryItem/index.tsx

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import Tooltip from '@tippyjs/react';
+import GlossaryContext from '../../contexts/GlossaryTerms';
+import type { GlossaryItem, GlossaryTerm } from '../../contexts/GlossaryTerms';
+
+const GlossaryItem = ({ term, terms }: { term: string; terms: GlossaryTerm[] }) => {
+  const foundTerm = terms.find(i => term.toLowerCase() === i.term.toLowerCase());
+
+  if (!foundTerm) return <span>{term}</span>;
+
+  return (
+    <Tooltip
+      content={
+        <div className="GlossaryItem-tooltip-content">
+          <strong className="GlossaryItem-term">{foundTerm.term}</strong> - {foundTerm.definition}
+        </div>
+      }
+      offset={[-5, 5]}
+      placement="bottom-start"
+    >
+      <span className="GlossaryItem-trigger">{term}</span>
+    </Tooltip>
+  );
+};
+
+const GlossaryItemWithContext = props => {
+  const terms = useContext(GlossaryContext);
+  return terms ? <GlossaryItem {...props} terms={terms} /> : null;
+};
+
+export { GlossaryItem, GlossaryItemWithContext as default, GlossaryContext };

package/components/Image/index.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+
+interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLImageElement>> {
+  align: string;
+  alt: string;
+  border: boolean;
+  caption: string;
+  className: string;
+  height: string;
+  lazy: boolean;
+  src: string;
+  title: string;
+  width: string;
+}
+
+const Image = (props: Props) => {
+  const [lightbox, setLightbox] = React.useState(false);
+
+  const {
+    align = '',
+    alt = '',
+    border = false,
+    caption,
+    className = '',
+    height = 'auto',
+    lazy,
+    src = '',
+    title = '',
+    width = 'auto',
+  } = props;
+
+  if (className === 'emoji') {
+    return <img src={src} width={width} height={height} title={title} alt={alt} loading={lazy ? 'lazy' : 'eager'} />;
+  }
+
+  const handleKeyDown = ({ key, metaKey: cmd }: React.KeyboardEvent<HTMLImageElement>) => {
+    const cmdKey = cmd ? 'cmd+' : '';
+    key = `${cmdKey}${key.toLowerCase()}`;
+
+    switch (key) {
+      case 'cmd+.':
+      case 'escape':
+        // CLOSE
+        setLightbox(false);
+        break;
+      case ' ':
+      case 'enter':
+        // OPEN
+        if (!lightbox) setLightbox(true);
+      default:
+    }
+  };
+
+  const toggle = () => {
+    if (className === 'emoji') return;
+    setLightbox(!lightbox);
+  };
+
+  if (caption) {
+    return (
+      <figure>
+        <span
+          aria-label={alt}
+          className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
+          onClick={toggle}
+          onKeyDown={handleKeyDown}
+          role={'button'}
+          tabIndex={0}
+        >
+          <span className="lightbox-inner">
+            <img
+              src={src}
+              width={width}
+              height={height}
+              title={title}
+              className={`img img-align-center ${border ? 'border' : ''}`}
+              alt={alt}
+              loading={lazy ? 'lazy' : 'eager'}
+            />
+          </span>
+        </span>
+        <figcaption>{caption}</figcaption>
+      </figure>
+    );
+  }
+
+  return (
+    <span
+      aria-label={alt}
+      className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
+      onClick={toggle}
+      onKeyDown={handleKeyDown}
+      role={'button'}
+      tabIndex={0}
+    >
+      <span className="lightbox-inner">
+        <img
+          src={src}
+          width={width}
+          height={height}
+          title={title}
+          className={`img img-align-${align} ${border ? 'border' : ''}`}
+          alt={alt}
+          loading={lazy ? 'lazy' : 'eager'}
+        />
+      </span>
+    </span>
+  );
+};
+
+export default Image;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import GlossaryContext from '../../contexts/GlossaryTerms';
+import type { GlossaryItem, GlossaryTerm } from '../../contexts/GlossaryTerms';
+declare const GlossaryItem: ({ term, terms }: {
+    term: string;
+    terms: GlossaryTerm[];
+}) => React.JSX.Element;
+declare const GlossaryItemWithContext: (props: any) => React.JSX.Element;
+export { GlossaryItem, GlossaryItemWithContext as default, GlossaryContext };

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLImageElement>> {
+    align: string;
+    alt: string;
+    border: boolean;
+    caption: string;
+    className: string;
+    height: string;
+    lazy: boolean;
+    src: string;
+    title: string;
+    width: string;
+}
+declare const Image: (props: Props) => React.JSX.Element;
+export default Image;

package/dist/components/index.d.ts

@@ -0,0 +1,12 @@
+export { default as Anchor } from './Anchor';
+export { default as Callout } from './Callout';
+export { default as Code } from './Code';
+export { default as CodeTabs } from './CodeTabs';
+export { default as Embed } from './Embed';
+export { default as GlossaryItem } from './GlossaryItem';
+export { default as HTMLBlock } from './HTMLBlock';
+export { default as Heading } from './Heading';
+export { default as Image } from './Image';
+export { default as Style } from './Style';
+export { default as Table } from './Table';
+export { default as TableOfContents } from './TableOfContents';

package/dist/contexts/GlossaryTerms.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+export type GlossaryTerm = {
+    term: string;
+    definition: string;
+    _id?: string;
+};
+export type GlossaryItem = {
+    term?: string;
+    terms: GlossaryTerm[];
+};
+declare const GlossaryContext: import("react").Context<GlossaryTerm[]>;
+export default GlossaryContext;
+export declare function Provider(Provider: any, arg1: {
+    value: GlossaryTerm[];
+}): ReactNode;

package/dist/enums.d.ts

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

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export declare const utils: {
     readonly options: any;
     BaseUrlContext: any;
     getHref: any;
-    GlossaryContext: any;
+    GlossaryContext: React.Context<import("./contexts/GlossaryTerms").GlossaryTerm[]>;
     VariablesContext: any;
     calloutIcons: {};
 };