@readme/markdown 6.59.1 → 6.60.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/components/Image/index.jsx +4 -20
  2. package/components/Image/style.scss +4 -26
  3. package/dist/main.css +1 -1
  4. package/dist/main.js +15 -82
  5. package/dist/main.node.js +15 -82
  6. package/package.json +1 -1
  7. package/components/Image/Lightbox.jsx +0 -38
package/components/Image/index.jsx CHANGED
@@ -3,8 +3,6 @@
3
3
  const PropTypes = require('prop-types');
4
4
  const React = require('react');
5
5
 
6
- const Lightbox = require('./Lightbox');
7
-
8
6
  class Image extends React.Component {
9
7
  constructor(props) {
10
8
  super(props);
@@ -12,7 +10,6 @@ class Image extends React.Component {
12
10
  this.state = {
13
11
  lightbox: false,
14
12
  };
15
- this.lightbox = React.createRef();
16
13
 
17
14
  this.toggle = this.toggle.bind(this);
18
15
  this.handleKey = this.handleKey.bind(this);
@@ -20,28 +17,14 @@ class Image extends React.Component {
20
17
  this.isEmoji = props.className === 'emoji';
21
18
  }
22
19
 
23
- componentDidMount() {
24
- this.lightboxSetup();
25
- }
26
-
27
20
  toggle(toState) {
28
21
  if (this.props.className === 'emoji') return;
29
22
 
30
23
  if (typeof toState === 'undefined') toState = !this.state.lightbox;
31
24
 
32
- if (toState) this.lightboxSetup();
33
-
34
25
  this.setState({ lightbox: toState });
35
26
  }
36
27
 
37
- lightboxSetup() {
38
- const $el = this.lightbox.current;
39
- if ($el)
40
- setTimeout(() => {
41
- $el.scrollTop = ($el.scrollHeight - $el.offsetHeight) / 2;
42
- }, 0);
43
- }
44
-
45
28
  handleKey(e) {
46
29
  let { key, metaKey: cmd } = e;
47
30
 
@@ -74,14 +57,15 @@ class Image extends React.Component {
74
57
  return (
75
58
  <span
76
59
  aria-label={alt}
77
- className="img"
60
+ className={`img lightbox ${this.state.lightbox ? 'open' : 'closed'}`}
78
61
  onClick={() => this.toggle()}
79
62
  onKeyDown={this.handleKey}
80
63
  role={'button'}
81
64
  tabIndex={0}
82
65
  >
83
- <img {...props} alt={alt} loading={lazy ? 'lazy' : ''} />
84
- <Lightbox ref={this.lightbox} {...props} onScroll={() => this.toggle(false)} opened={this.state.lightbox} />
66
+ <span className="lightbox-inner">
67
+ <img {...props} alt={alt} loading={lazy ? 'lazy' : ''} />
68
+ </span>
85
69
  </span>
86
70
  );
87
71
  }
package/components/Image/style.scss CHANGED
@@ -74,7 +74,7 @@
74
74
  }
75
75
  }
76
76
 
77
- .lightbox {
77
+ .lightbox.open {
78
78
  & {
79
79
  position: fixed;
80
80
  z-index: 9999999;
@@ -96,9 +96,6 @@
96
96
  margin-top: 0;
97
97
  margin-bottom: 0;
98
98
  }
99
- &:not([open]) {
100
- pointer-events: none;
101
- }
102
99
 
103
100
  // Close Button
104
101
  //
@@ -121,41 +118,22 @@
121
118
  transform: scale(1.5);
122
119
  transition: .3s .3s ease-in;
123
120
  }
124
- &:not([open]):after {
121
+ &:not(.open):after {
125
122
  transform: scale(0);
126
123
  opacity: 0;
127
124
  }
128
125
 
129
- &-inner {
126
+ .lightbox-inner {
130
127
  position: relative;
131
128
  display: inline-flex;
132
129
  justify-content: center;
133
130
  align-items: center;
134
131
  min-height: calc(100vh + 8px);
135
132
  margin: auto;
136
- margin: 8px auto auto;
137
- padding: 5em 0;
133
+ padding: 0;
138
134
  box-sizing: content-box;
139
135
  }
140
136
 
141
- & { // transition
142
- transition: .3s ease-out;
143
- transition-property: opacity, z-index, transform;
144
- img {
145
- transform: scale(1);
146
- transition: .25s .05s ease-in;
147
- }
148
- &:not([open]) {
149
- opacity: 0 !important;
150
- pointer-events: none;
151
- img {
152
- transform: scale(0);
153
- opacity: 0;
154
- transition-delay: 0s;
155
- }
156
- }
157
- }
158
-
159
137
  img {
160
138
  width: auto !important;
161
139
  height: auto !important;
package/dist/main.css CHANGED
@@ -387,7 +387,7 @@ span.CodeMirror-selectedtext { background: none; }
387
387
  z-index: 1;
388
388
  }
389
389
 
390
- .markdown-body img[align=right],.markdown-body img[alt~=align-right]{float:right;margin-left:.75rem}.markdown-body img[align=left],.markdown-body img[alt~=align-left]{float:left;margin-right:.75rem}.markdown-body img[width="80%"],.markdown-body img[align=center],.markdown-body img[alt~=align-center],.markdown-body>img,.markdown-body figure>img{display:block}.markdown-body img{box-sizing:content-box;display:inline-block;vertical-align:middle;max-width:100%;margin-left:auto;margin-right:auto;border-style:none;outline:none !important}.markdown-body img[width=smart]{width:auto;max-width:100%;max-height:450px}.markdown-body img.border{border:1px solid rgba(0,0,0,0.2)}.markdown-body figure{margin:15px auto}.markdown-body figure figcaption{margin-top:8px;font-size:.93em;font-style:italic;text-align:center}.markdown-body figure .img{display:inline-block}.markdown-body figure .img,.markdown-body figure .img>img:only-of-type{display:block}.markdown-body .lightbox{position:fixed;z-index:9999999;top:0;left:0;display:flex;flex-flow:nowrap column;justify-content:flex-start;align-items:center;width:100vw;height:100vh;overflow:hidden;overflow-y:scroll;background:rgba(255,255,255,0.966);user-select:none;margin-top:0;margin-bottom:0}.markdown-body .lightbox:not([open]){pointer-events:none}.markdown-body .lightbox:after{position:fixed;top:1em;right:1em;content:'\f00d';display:inline-block;font:normal normal normal 2em/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0, 0);display:inline-block;cursor:pointer;opacity:1;transform:scale(1.5);transition:.3s .3s ease-in}.markdown-body .lightbox:not([open]):after{transform:scale(0);opacity:0}.markdown-body .lightbox-inner{position:relative;display:inline-flex;justify-content:center;align-items:center;min-height:calc(100vh + 8px);margin:auto;margin:8px auto auto;padding:5em 0;box-sizing:content-box}.markdown-body .lightbox{transition:.3s ease-out;transition-property:opacity, z-index, transform}.markdown-body .lightbox img{transform:scale(1);transition:.25s .05s ease-in}.markdown-body .lightbox:not([open]){opacity:0 !important;pointer-events:none}.markdown-body .lightbox:not([open]) img{transform:scale(0);opacity:0;transition-delay:0s}.markdown-body .lightbox img{width:auto !important;height:auto !important;min-width:unset !important;max-width:97.5vw !important;max-height:97.5vh !important}.markdown-body .lightbox img.border,.markdown-body .lightbox img:not([src$=".png"]):not([src$=".svg"]):not([src$=".jp2"]):not([src$=".tiff"]){box-shadow:0 0.5em 3em -1em rgba(0,0,0,0.2)}.markdown-body table{display:table;border-collapse:collapse;border-spacing:0;width:100%;color:var(--table-text)}.markdown-body table thead{color:var(--table-head-text, inherit)}.markdown-body table thead tr{background:var(--table-head, #f6f8fa)}.markdown-body table tr{background-color:var(--table-row, #fff)}.markdown-body table tr+tr{border-top:1px solid var(--table-edges, #dfe2e5)}.markdown-body table th,.markdown-body table thead td{font-weight:600}.markdown-body table th:empty,.markdown-body table thead td:empty{padding:0}.markdown-body table td,.markdown-body table th{padding:0;color:inherit;vertical-align:middle;border:1px solid var(--table-edges, #dfe2e5);padding:6px 13px}.markdown-body table td>:first-child,.markdown-body table td>:only-child,.markdown-body table th>:first-child,.markdown-body table th>:only-child{margin-top:0 !important}.markdown-body table td>:last-child,.markdown-body table td>:only-child,.markdown-body table th>:last-child,.markdown-body table th>:only-child{margin-bottom:0 !important}.markdown-body table:not(.plain) tr:nth-child(2n){background-color:var(--table-stripe, #fbfcfd)}.markdown-body .rdmd-table{display:block;position:relative}.markdown-body .rdmd-table-inner{box-sizing:content-box;min-width:100%;overflow:auto;width:100%}.markdown-body .rdmd-table table{border:1px solid var(--table-edges, #dfe2e5)}.markdown-body .rdmd-table table:only-child{margin:0 !important}.markdown-body .rdmd-table table:only-child thead th{background:inherit}.markdown-body .rdmd-table table:only-child td:last-child,.markdown-body .rdmd-table table:only-child th:last-child{border-right:none}.markdown-body .rdmd-table table:only-child thead tr,.markdown-body .rdmd-table table:only-child thead th:last-child{box-shadow:3px 0 0 var(--table-head)}.toc-list .glossary-tooltip{pointer-events:none}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;font-family:var(--md-code-font, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace);font-size:1em}.markdown-body code,.markdown-body pre{font-size:12px}.markdown-body pre{margin-bottom:0;margin-top:0}.markdown-body code{background-color:#F6F8FA;background-color:var(--md-code-background, #F6F8FA);border-radius:3px;color:var(--md-code-text);font-size:85%;margin:0;padding:.2em .4em}.markdown-body code>div[class*="cm-"]{display:inherit}.markdown-body pre{word-wrap:normal}.markdown-body pre>code{background:0 0;border:0;font-size:100%;margin:0;padding:0;white-space:pre;word-break:normal}.markdown-body pre{background-color:#F6F8FA;background-color:var(--md-code-background, #F6F8FA);color:inherit;color:var(--md-code-text, inherit);border-radius:3px;border-radius:var(--markdown-radius, 3px);border-radius:var(--md-code-radius, var(--markdown-radius, 3px));font-size:85%;line-height:1.45;overflow:auto;padding:1em}.markdown-body pre code.theme-dark{background-color:#242E34;background-color:var(--md-code-background, #242E34)}.markdown-body pre code{background-color:transparent;border:0;display:inline;line-height:inherit;margin:0;max-width:auto;overflow:visible;padding:0;word-wrap:normal}.markdown-body kbd{background-color:#F6F8FA;background-color:var(--d-code-background, #F6F8FA);border:1px solid #d1d5da;border-bottom-color:#c6cbd1;border-radius:3px;box-shadow:inset 0 -1px 0 #c6cbd1;color:#444d56;display:inline-block;font-size:11px;line-height:10px;padding:3px 5px;vertical-align:middle}.markdown-body button.rdmd-code-copy{DISPLAY:none !important}.markdown-body button.rdmd-code-copy{-webkit-appearance:unset;margin:.5em .6em 0 0;padding:.25em .7em;cursor:copy;font:inherit;color:inherit;color:var(--md-code-text, inherit);border:none;border-radius:3px;outline:none !important;background:inherit;background:var(--md-code-background, inherit);box-shadow:inset 0 0 0 1px rgba(170,170,170,0.66),-1px 2px 6px -3px rgba(0,0,0,0.1);transition:.15s ease-out}.markdown-body button.rdmd-code-copy:not(:hover):before,.markdown-body button.rdmd-code-copy:not(:hover):after{opacity:.66}.markdown-body button.rdmd-code-copy:hover:not(:active){box-shadow:inset 0 0 0 1px rgba(139,139,139,0.75),-1px 2px 6px -3px rgba(0,0,0,0.2)}.markdown-body button.rdmd-code-copy:active{box-shadow:inset 0 0 0 1px rgba(139,139,139,0.5),inset 1px 4px 6px -2px rgba(0,0,0,0.175)}.markdown-body button.rdmd-code-copy:active:before,.markdown-body button.rdmd-code-copy:active:after{opacity:.75}.markdown-body button.rdmd-code-copy:before,.markdown-body button.rdmd-code-copy:after{display:inline-block;font:normal normal normal 1em/1 "Font Awesome 5 Free", "FontAwesome";text-rendering:auto;-webkit-font-smoothing:antialiased;line-height:2;font-family:'ReadMe-Icons';font-variant-ligatures:discretionary-ligatures;font-feature-settings:"liga"}.markdown-body button.rdmd-code-copy:before{content:"\e6c9";font-weight:800;transition:.3s .15s ease}.markdown-body button.rdmd-code-copy:after{content:"\e942" !important;font-weight:900 !important;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.33);opacity:0 !important;transition:.3s 0s ease}.markdown-body button.rdmd-code-copy_copied{pointer-events:none}.markdown-body button.rdmd-code-copy_copied,.markdown-body button.rdmd-code-copy_copied *{color:green !important;color:var(--md-code-text, green) !important;opacity:1}.markdown-body button.rdmd-code-copy_copied:before{transition:.3s 0s ease;transform:scale(0.33);opacity:0 !important}.markdown-body button.rdmd-code-copy_copied:after{transition:.3s .15s ease;transform:translate(-50%, -50%) scale(1);opacity:1 !important}.markdown-body pre{position:relative}.markdown-body pre>code{background:inherit}.markdown-body pre>code.theme-dark{color:white}.markdown-body pre button.rdmd-code-copy{display:inline-block !important;position:absolute;right:0;top:0}.markdown-body pre{overflow:hidden;padding:0}.markdown-body pre>code{display:block !important;overflow:auto;padding:1em;max-height:90vh}.markdown-body pre:hover button.rdmd-code-copy:not(:hover){transition-delay:.4s}.markdown-body pre:not(:hover) button.rdmd-code-copy:not(.rdmd-code-copy_copied){opacity:0 !important}.CodeTabs{color:#333;color:var(--md-code-text, #333);border-radius:var(--md-code-radius, var(--markdown-radius, 3px)) !important;overflow:hidden}.CodeTabs.theme-dark{color:white;color:var(--md-code-text, white)}.CodeTabs.theme-dark .CodeTabs-toolbar{background:#373737;background:var(--md-code-tabs, #373737)}.CodeTabs-toolbar{background:#ebedef;background:var(--md-code-tabs, #ebedef);display:flex;flex-flow:row nowrap;overflow:hidden;overflow-x:auto;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.CodeTabs-toolbar::-webkit-scrollbar{display:none}.CodeTabs-toolbar button{white-space:nowrap;transition:.123s ease;-webkit-appearance:none;appearance:none;display:inline-block;line-height:2;padding:.5em 1em;border:none;background:transparent;outline:none;color:inherit;font:inherit;font-size:.75em;cursor:pointer}.CodeTabs.CodeTabs_initial .CodeTabs-toolbar button:first-child,.CodeTabs-toolbar button.CodeTabs_active{background:#F6F8FA;background:var(--md-code-background, #F6F8FA);color:black;color:var(--md-code-text, black);pointer-events:none}.CodeTabs.theme-dark.CodeTabs_initial .CodeTabs-toolbar button:first-child,.CodeTabs.theme-dark .CodeTabs-toolbar button.CodeTabs_active{background:#242E34;background:var(--md-code-background, #242E34);color:white;color:var(--md-code-text, white)}.CodeTabs-toolbar button:not(.CodeTabs_active):hover{background:rgba(0,0,0,0.075)}.CodeTabs pre{border-radius:0 0 var(--md-code-radius, var(--markdown-radius, 3px)) var(--md-code-radius, var(--markdown-radius, 3px)) !important;background:#F6F8FA;background:var(--md-code-background, #F6F8FA);margin-bottom:0}.CodeTabs pre:not(.CodeTabs_active){display:none}.CodeTabs.theme-dark pre{background:#242E34;background:var(--md-code-background, #242E34)}.CodeTabs.CodeTabs_initial pre:first-child{display:block}.callout{--emoji: 1em;--icon-font: FontAwesome;border-top-right-radius:var(--markdown-radius);border-bottom-right-radius:var(--markdown-radius)}.callout.callout{--background: #f8f8f9;--border: #8b939c}.callout.callout{background:var(--background);border-color:var(--border);color:var(--text);padding:1.33rem}.callout.callout_info{--background: #e3edf2;--title: #46b8da;--border: #5bc0de}.callout.callout_warn,.callout.callout_warning{--background: #fcf8f2;--title: #eea236;--border: #f0ad4e}.callout.callout_ok,.callout.callout_okay,.callout.callout_success{--background: #f3f8f3;--title: #489e49;--border: #50af51}.callout.callout_err,.callout.callout_error{--background: #fdf7f7;--title: #d43f3a;--border: #d9534f}.callout.callout>*{margin-left:1.33rem;position:relative}.callout.callout ul,.callout.callout ol{padding-left:1.3em}.callout.callout a{color:inherit}.callout.callout hr{border-color:var(--border, var(--markdown-edge, #eee))}.callout.callout blockquote{color:var(--text);border-color:var(--border);border-width:3px;padding:0 0 0 .8em}.callout.callout .callout-heading{color:var(--title, --text);margin-bottom:calc(1.33rem * .5)}.callout.callout .callout-heading:only-child{margin-bottom:0}.callout.callout .callout-heading.empty{float:left;margin-top:calc(1.33rem * .5)}.callout.callout .callout-heading.empty .callout-icon{line-height:0}.callout.callout .callout-heading>*{color:inherit;margin:0}.callout.callout .callout-heading:before{position:absolute;right:100%;width:2.4em;text-align:center;font:normal normal normal 1em/1 FontAwesome}.callout.callout .callout-icon{float:left;margin-left:calc(-1.33rem - .5em);margin-right:-.25rem}.callout-icon{font-size:var(--emoji, 0);color:var(--icon-color, inherit) !important}.callout-icon:before{content:var(--icon);font-family:var(--icon-font);font-size:var(--icon-size, 1rem);font-weight:var(--icon-weight, 400);position:absolute;top:50%;transform:translate(-50%, -50%);display:inline-block;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.rdmdCallouts--useIconFont .callout{--emoji: unset}.rdmdCallouts--useIconFont .callout_okay{--icon: "\f164"}.rdmdCallouts--useIconFont .callout_info{--icon: "\f05a"}.rdmdCallouts--useIconFont .callout_warn{--icon: "\f071"}.rdmdCallouts--useIconFont .callout_error{--icon: "\f06a"}.rdmdCallouts--useIconFont .callout_default{--emoji: 1rem}.heading.heading{display:flex;justify-content:flex-start;align-items:center;position:relative}.heading.heading .heading-text{flex:1 100%}.heading.heading .heading-anchor-deprecated{position:absolute;top:0}.heading.heading .heading-anchor{top:-1rem !important}.heading.heading .heading-anchor,.heading.heading .heading-anchor-icon{position:absolute !important;display:inline !important;order:-1;right:100%;top:unset !important;margin-right:-.8rem;padding:.8rem .2rem .8rem 0 !important;font-size:.8rem !important;text-decoration:none;color:inherit;transform:translateX(-100%);transition:.2s ease}.heading.heading .heading-anchor:hover,.heading.heading .heading-anchor-icon:hover{opacity:1}.heading.heading:not(:hover) .heading-anchor-icon{opacity:0}.markdown-body .embed{padding:15px;color:var(--md-code-text, inherit);border-radius:var(--md-code-radius, var(--markdown-radius, 3px));border-radius:3px;background:transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15);transition:.3s ease}.markdown-body .embed:hover{background:var(--md-code-background, #f6f8fa);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1)}.markdown-body>.embed_hasImg:nth-of-type(odd){margin-right:30px;padding-right:0}.markdown-body>.embed_hasImg:nth-of-type(odd) .embed-link{flex-direction:row-reverse}.markdown-body>.embed_hasImg:nth-of-type(odd) .embed-img{margin-left:.88em;margin-right:-30px;box-shadow:-0.3em 0.3em 0.9em -0.3em rgba(0,0,0,0.15)}.markdown-body>.embed_hasImg:nth-of-type(even){margin-left:30px;padding-left:0}.markdown-body>.embed_hasImg:nth-of-type(even) .embed-img{margin-left:-30px}.markdown-body .embed:empty{display:none}.markdown-body .embed-media{display:flex;justify-content:center}.markdown-body .embed-media>:only-child{flex:1;margin:-15px;border-radius:0 !important}.markdown-body .embed-link{display:flex;align-items:center;color:var(--markdown-text, #333);text-decoration:none !important}.markdown-body .embed-body{flex:1;line-height:1.3}.markdown-body .embed-body,.markdown-body .embed-body .embed-title{font-size:1.15em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.markdown-body .embed-body .embed-provider{display:block;text-decoration-color:transparent !important;opacity:.88}.markdown-body .embed-body-url{opacity:.75}.markdown-body .embed-provider{font-size:0.8em;line-height:1.6;transition:.2 ease}.markdown-body .embed-provider code:only-child{display:block;width:100%;font-size:1.15em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:transparent;margin:0;padding:0;font-size:inherit !important}.markdown-body .embed-provider code{opacity:0.8}.markdown-body .embed-img{width:5em;max-width:5em;margin:0 .88em 0 0;padding:4px;background:white;border:1px solid rgba(0,0,0,0.15);border-radius:3px;transition:inherit;box-shadow:0.3em 0.3em 0.9em -0.3em rgba(0,0,0,0.15)}.markdown-body .embed:not(:hover) .embed-img{box-shadow:0 0.25em 1em -0.5em rgba(0,0,0,0.133)}.markdown-body .embed:hover .embed-img{border:1px solid rgba(0,0,0,0.2)}.markdown-body .embed-favicon{width:12px !important;height:12px !important;margin-top:4px;margin-right:6px;margin-bottom:12px}.GlossaryItem-trigger{border-bottom:1px solid #737c83;border-style:dotted;border-top:none;border-left:none;border-right:none;cursor:pointer}.GlossaryItem-tooltip-content{--GlossaryItem-bg: var(--color-bg-page, var(--white));--GlossaryItem-color: var(--color-text-default, var(--gray20));--GlossaryItem-shadow: var(--box-shadow-menu-light, 0 5px 10px rgba(0, 0, 0, .05),
390
+ .markdown-body img[align=right],.markdown-body img[alt~=align-right]{float:right;margin-left:.75rem}.markdown-body img[align=left],.markdown-body img[alt~=align-left]{float:left;margin-right:.75rem}.markdown-body img[width="80%"],.markdown-body img[align=center],.markdown-body img[alt~=align-center],.markdown-body>img,.markdown-body figure>img{display:block}.markdown-body img{box-sizing:content-box;display:inline-block;vertical-align:middle;max-width:100%;margin-left:auto;margin-right:auto;border-style:none;outline:none !important}.markdown-body img[width=smart]{width:auto;max-width:100%;max-height:450px}.markdown-body img.border{border:1px solid rgba(0,0,0,0.2)}.markdown-body figure{margin:15px auto}.markdown-body figure figcaption{margin-top:8px;font-size:.93em;font-style:italic;text-align:center}.markdown-body figure .img{display:inline-block}.markdown-body figure .img,.markdown-body figure .img>img:only-of-type{display:block}.markdown-body .lightbox.open{position:fixed;z-index:9999999;top:0;left:0;display:flex;flex-flow:nowrap column;justify-content:flex-start;align-items:center;width:100vw;height:100vh;overflow:hidden;overflow-y:scroll;background:rgba(255,255,255,0.966);user-select:none;margin-top:0;margin-bottom:0}.markdown-body .lightbox.open:after{position:fixed;top:1em;right:1em;content:'\f00d';display:inline-block;font:normal normal normal 2em/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0, 0);display:inline-block;cursor:pointer;opacity:1;transform:scale(1.5);transition:.3s .3s ease-in}.markdown-body .lightbox.open:not(.open):after{transform:scale(0);opacity:0}.markdown-body .lightbox.open .lightbox-inner{position:relative;display:inline-flex;justify-content:center;align-items:center;min-height:calc(100vh + 8px);margin:auto;padding:0;box-sizing:content-box}.markdown-body .lightbox.open img{width:auto !important;height:auto !important;min-width:unset !important;max-width:97.5vw !important;max-height:97.5vh !important}.markdown-body .lightbox.open img.border,.markdown-body .lightbox.open img:not([src$=".png"]):not([src$=".svg"]):not([src$=".jp2"]):not([src$=".tiff"]){box-shadow:0 0.5em 3em -1em rgba(0,0,0,0.2)}.markdown-body table{display:table;border-collapse:collapse;border-spacing:0;width:100%;color:var(--table-text)}.markdown-body table thead{color:var(--table-head-text, inherit)}.markdown-body table thead tr{background:var(--table-head, #f6f8fa)}.markdown-body table tr{background-color:var(--table-row, #fff)}.markdown-body table tr+tr{border-top:1px solid var(--table-edges, #dfe2e5)}.markdown-body table th,.markdown-body table thead td{font-weight:600}.markdown-body table th:empty,.markdown-body table thead td:empty{padding:0}.markdown-body table td,.markdown-body table th{padding:0;color:inherit;vertical-align:middle;border:1px solid var(--table-edges, #dfe2e5);padding:6px 13px}.markdown-body table td>:first-child,.markdown-body table td>:only-child,.markdown-body table th>:first-child,.markdown-body table th>:only-child{margin-top:0 !important}.markdown-body table td>:last-child,.markdown-body table td>:only-child,.markdown-body table th>:last-child,.markdown-body table th>:only-child{margin-bottom:0 !important}.markdown-body table:not(.plain) tr:nth-child(2n){background-color:var(--table-stripe, #fbfcfd)}.markdown-body .rdmd-table{display:block;position:relative}.markdown-body .rdmd-table-inner{box-sizing:content-box;min-width:100%;overflow:auto;width:100%}.markdown-body .rdmd-table table{border:1px solid var(--table-edges, #dfe2e5)}.markdown-body .rdmd-table table:only-child{margin:0 !important}.markdown-body .rdmd-table table:only-child thead th{background:inherit}.markdown-body .rdmd-table table:only-child td:last-child,.markdown-body .rdmd-table table:only-child th:last-child{border-right:none}.markdown-body .rdmd-table table:only-child thead tr,.markdown-body .rdmd-table table:only-child thead th:last-child{box-shadow:3px 0 0 var(--table-head)}.toc-list .glossary-tooltip{pointer-events:none}.markdown-body code,.markdown-body kbd,.markdown-body pre{font-family:SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;font-family:var(--md-code-font, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace);font-size:1em}.markdown-body code,.markdown-body pre{font-size:12px}.markdown-body pre{margin-bottom:0;margin-top:0}.markdown-body code{background-color:#F6F8FA;background-color:var(--md-code-background, #F6F8FA);border-radius:3px;color:var(--md-code-text);font-size:85%;margin:0;padding:.2em .4em}.markdown-body code>div[class*="cm-"]{display:inherit}.markdown-body pre{word-wrap:normal}.markdown-body pre>code{background:0 0;border:0;font-size:100%;margin:0;padding:0;white-space:pre;word-break:normal}.markdown-body pre{background-color:#F6F8FA;background-color:var(--md-code-background, #F6F8FA);color:inherit;color:var(--md-code-text, inherit);border-radius:3px;border-radius:var(--markdown-radius, 3px);border-radius:var(--md-code-radius, var(--markdown-radius, 3px));font-size:85%;line-height:1.45;overflow:auto;padding:1em}.markdown-body pre code.theme-dark{background-color:#242E34;background-color:var(--md-code-background, #242E34)}.markdown-body pre code{background-color:transparent;border:0;display:inline;line-height:inherit;margin:0;max-width:auto;overflow:visible;padding:0;word-wrap:normal}.markdown-body kbd{background-color:#F6F8FA;background-color:var(--d-code-background, #F6F8FA);border:1px solid #d1d5da;border-bottom-color:#c6cbd1;border-radius:3px;box-shadow:inset 0 -1px 0 #c6cbd1;color:#444d56;display:inline-block;font-size:11px;line-height:10px;padding:3px 5px;vertical-align:middle}.markdown-body button.rdmd-code-copy{DISPLAY:none !important}.markdown-body button.rdmd-code-copy{-webkit-appearance:unset;margin:.5em .6em 0 0;padding:.25em .7em;cursor:copy;font:inherit;color:inherit;color:var(--md-code-text, inherit);border:none;border-radius:3px;outline:none !important;background:inherit;background:var(--md-code-background, inherit);box-shadow:inset 0 0 0 1px rgba(170,170,170,0.66),-1px 2px 6px -3px rgba(0,0,0,0.1);transition:.15s ease-out}.markdown-body button.rdmd-code-copy:not(:hover):before,.markdown-body button.rdmd-code-copy:not(:hover):after{opacity:.66}.markdown-body button.rdmd-code-copy:hover:not(:active){box-shadow:inset 0 0 0 1px rgba(139,139,139,0.75),-1px 2px 6px -3px rgba(0,0,0,0.2)}.markdown-body button.rdmd-code-copy:active{box-shadow:inset 0 0 0 1px rgba(139,139,139,0.5),inset 1px 4px 6px -2px rgba(0,0,0,0.175)}.markdown-body button.rdmd-code-copy:active:before,.markdown-body button.rdmd-code-copy:active:after{opacity:.75}.markdown-body button.rdmd-code-copy:before,.markdown-body button.rdmd-code-copy:after{display:inline-block;font:normal normal normal 1em/1 "Font Awesome 5 Free", "FontAwesome";text-rendering:auto;-webkit-font-smoothing:antialiased;line-height:2;font-family:'ReadMe-Icons';font-variant-ligatures:discretionary-ligatures;font-feature-settings:"liga"}.markdown-body button.rdmd-code-copy:before{content:"\e6c9";font-weight:800;transition:.3s .15s ease}.markdown-body button.rdmd-code-copy:after{content:"\e942" !important;font-weight:900 !important;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.33);opacity:0 !important;transition:.3s 0s ease}.markdown-body button.rdmd-code-copy_copied{pointer-events:none}.markdown-body button.rdmd-code-copy_copied,.markdown-body button.rdmd-code-copy_copied *{color:green !important;color:var(--md-code-text, green) !important;opacity:1}.markdown-body button.rdmd-code-copy_copied:before{transition:.3s 0s ease;transform:scale(0.33);opacity:0 !important}.markdown-body button.rdmd-code-copy_copied:after{transition:.3s .15s ease;transform:translate(-50%, -50%) scale(1);opacity:1 !important}.markdown-body pre{position:relative}.markdown-body pre>code{background:inherit}.markdown-body pre>code.theme-dark{color:white}.markdown-body pre button.rdmd-code-copy{display:inline-block !important;position:absolute;right:0;top:0}.markdown-body pre{overflow:hidden;padding:0}.markdown-body pre>code{display:block !important;overflow:auto;padding:1em;max-height:90vh}.markdown-body pre:hover button.rdmd-code-copy:not(:hover){transition-delay:.4s}.markdown-body pre:not(:hover) button.rdmd-code-copy:not(.rdmd-code-copy_copied){opacity:0 !important}.CodeTabs{color:#333;color:var(--md-code-text, #333);border-radius:var(--md-code-radius, var(--markdown-radius, 3px)) !important;overflow:hidden}.CodeTabs.theme-dark{color:white;color:var(--md-code-text, white)}.CodeTabs.theme-dark .CodeTabs-toolbar{background:#373737;background:var(--md-code-tabs, #373737)}.CodeTabs-toolbar{background:#ebedef;background:var(--md-code-tabs, #ebedef);display:flex;flex-flow:row nowrap;overflow:hidden;overflow-x:auto;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.CodeTabs-toolbar::-webkit-scrollbar{display:none}.CodeTabs-toolbar button{white-space:nowrap;transition:.123s ease;-webkit-appearance:none;appearance:none;display:inline-block;line-height:2;padding:.5em 1em;border:none;background:transparent;outline:none;color:inherit;font:inherit;font-size:.75em;cursor:pointer}.CodeTabs.CodeTabs_initial .CodeTabs-toolbar button:first-child,.CodeTabs-toolbar button.CodeTabs_active{background:#F6F8FA;background:var(--md-code-background, #F6F8FA);color:black;color:var(--md-code-text, black);pointer-events:none}.CodeTabs.theme-dark.CodeTabs_initial .CodeTabs-toolbar button:first-child,.CodeTabs.theme-dark .CodeTabs-toolbar button.CodeTabs_active{background:#242E34;background:var(--md-code-background, #242E34);color:white;color:var(--md-code-text, white)}.CodeTabs-toolbar button:not(.CodeTabs_active):hover{background:rgba(0,0,0,0.075)}.CodeTabs pre{border-radius:0 0 var(--md-code-radius, var(--markdown-radius, 3px)) var(--md-code-radius, var(--markdown-radius, 3px)) !important;background:#F6F8FA;background:var(--md-code-background, #F6F8FA);margin-bottom:0}.CodeTabs pre:not(.CodeTabs_active){display:none}.CodeTabs.theme-dark pre{background:#242E34;background:var(--md-code-background, #242E34)}.CodeTabs.CodeTabs_initial pre:first-child{display:block}.callout{--emoji: 1em;--icon-font: FontAwesome;border-top-right-radius:var(--markdown-radius);border-bottom-right-radius:var(--markdown-radius)}.callout.callout{--background: #f8f8f9;--border: #8b939c}.callout.callout{background:var(--background);border-color:var(--border);color:var(--text);padding:1.33rem}.callout.callout_info{--background: #e3edf2;--title: #46b8da;--border: #5bc0de}.callout.callout_warn,.callout.callout_warning{--background: #fcf8f2;--title: #eea236;--border: #f0ad4e}.callout.callout_ok,.callout.callout_okay,.callout.callout_success{--background: #f3f8f3;--title: #489e49;--border: #50af51}.callout.callout_err,.callout.callout_error{--background: #fdf7f7;--title: #d43f3a;--border: #d9534f}.callout.callout>*{margin-left:1.33rem;position:relative}.callout.callout ul,.callout.callout ol{padding-left:1.3em}.callout.callout a{color:inherit}.callout.callout hr{border-color:var(--border, var(--markdown-edge, #eee))}.callout.callout blockquote{color:var(--text);border-color:var(--border);border-width:3px;padding:0 0 0 .8em}.callout.callout .callout-heading{color:var(--title, --text);margin-bottom:calc(1.33rem * .5)}.callout.callout .callout-heading:only-child{margin-bottom:0}.callout.callout .callout-heading.empty{float:left;margin-top:calc(1.33rem * .5)}.callout.callout .callout-heading.empty .callout-icon{line-height:0}.callout.callout .callout-heading>*{color:inherit;margin:0}.callout.callout .callout-heading:before{position:absolute;right:100%;width:2.4em;text-align:center;font:normal normal normal 1em/1 FontAwesome}.callout.callout .callout-icon{float:left;margin-left:calc(-1.33rem - .5em);margin-right:-.25rem}.callout-icon{font-size:var(--emoji, 0);color:var(--icon-color, inherit) !important}.callout-icon:before{content:var(--icon);font-family:var(--icon-font);font-size:var(--icon-size, 1rem);font-weight:var(--icon-weight, 400);position:absolute;top:50%;transform:translate(-50%, -50%);display:inline-block;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.rdmdCallouts--useIconFont .callout{--emoji: unset}.rdmdCallouts--useIconFont .callout_okay{--icon: "\f164"}.rdmdCallouts--useIconFont .callout_info{--icon: "\f05a"}.rdmdCallouts--useIconFont .callout_warn{--icon: "\f071"}.rdmdCallouts--useIconFont .callout_error{--icon: "\f06a"}.rdmdCallouts--useIconFont .callout_default{--emoji: 1rem}.heading.heading{display:flex;justify-content:flex-start;align-items:center;position:relative}.heading.heading .heading-text{flex:1 100%}.heading.heading .heading-anchor-deprecated{position:absolute;top:0}.heading.heading .heading-anchor{top:-1rem !important}.heading.heading .heading-anchor,.heading.heading .heading-anchor-icon{position:absolute !important;display:inline !important;order:-1;right:100%;top:unset !important;margin-right:-.8rem;padding:.8rem .2rem .8rem 0 !important;font-size:.8rem !important;text-decoration:none;color:inherit;transform:translateX(-100%);transition:.2s ease}.heading.heading .heading-anchor:hover,.heading.heading .heading-anchor-icon:hover{opacity:1}.heading.heading:not(:hover) .heading-anchor-icon{opacity:0}.markdown-body .embed{padding:15px;color:var(--md-code-text, inherit);border-radius:var(--md-code-radius, var(--markdown-radius, 3px));border-radius:3px;background:transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15);transition:.3s ease}.markdown-body .embed:hover{background:var(--md-code-background, #f6f8fa);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1)}.markdown-body>.embed_hasImg:nth-of-type(odd){margin-right:30px;padding-right:0}.markdown-body>.embed_hasImg:nth-of-type(odd) .embed-link{flex-direction:row-reverse}.markdown-body>.embed_hasImg:nth-of-type(odd) .embed-img{margin-left:.88em;margin-right:-30px;box-shadow:-0.3em 0.3em 0.9em -0.3em rgba(0,0,0,0.15)}.markdown-body>.embed_hasImg:nth-of-type(even){margin-left:30px;padding-left:0}.markdown-body>.embed_hasImg:nth-of-type(even) .embed-img{margin-left:-30px}.markdown-body .embed:empty{display:none}.markdown-body .embed-media{display:flex;justify-content:center}.markdown-body .embed-media>:only-child{flex:1;margin:-15px;border-radius:0 !important}.markdown-body .embed-link{display:flex;align-items:center;color:var(--markdown-text, #333);text-decoration:none !important}.markdown-body .embed-body{flex:1;line-height:1.3}.markdown-body .embed-body,.markdown-body .embed-body .embed-title{font-size:1.15em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.markdown-body .embed-body .embed-provider{display:block;text-decoration-color:transparent !important;opacity:.88}.markdown-body .embed-body-url{opacity:.75}.markdown-body .embed-provider{font-size:0.8em;line-height:1.6;transition:.2 ease}.markdown-body .embed-provider code:only-child{display:block;width:100%;font-size:1.15em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:transparent;margin:0;padding:0;font-size:inherit !important}.markdown-body .embed-provider code{opacity:0.8}.markdown-body .embed-img{width:5em;max-width:5em;margin:0 .88em 0 0;padding:4px;background:white;border:1px solid rgba(0,0,0,0.15);border-radius:3px;transition:inherit;box-shadow:0.3em 0.3em 0.9em -0.3em rgba(0,0,0,0.15)}.markdown-body .embed:not(:hover) .embed-img{box-shadow:0 0.25em 1em -0.5em rgba(0,0,0,0.133)}.markdown-body .embed:hover .embed-img{border:1px solid rgba(0,0,0,0.2)}.markdown-body .embed-favicon{width:12px !important;height:12px !important;margin-top:4px;margin-right:6px;margin-bottom:12px}.GlossaryItem-trigger{border-bottom:1px solid #737c83;border-style:dotted;border-top:none;border-left:none;border-right:none;cursor:pointer}.GlossaryItem-tooltip-content{--GlossaryItem-bg: var(--color-bg-page, var(--white));--GlossaryItem-color: var(--color-text-default, var(--gray20));--GlossaryItem-shadow: var(--box-shadow-menu-light, 0 5px 10px rgba(0, 0, 0, .05),
391
391
  0 2px 6px rgba(0, 0, 0, .025),
392
392
  0 1px 3px rgba(0, 0, 0, .025));background-color:var(--GlossaryItem-bg);border:1px solid var(--color-border-default, rgba(0,0,0,0.1));border-radius:var(--border-radius);box-shadow:var(--GlossaryItem-shadow);color:var(--GlossaryItem-color);font-size:15px;font-weight:400;line-height:1.5;padding:15px;text-align:left;width:350px}[data-color-mode='dark'] .GlossaryItem-tooltip-content{--GlossaryItem-bg: var(--gray15);--GlossaryItem-color: var(--color-text-default, var(--white));--GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025),
393
393
  0 2px 6px rgba(0, 0, 0, 0.025),
package/dist/main.js CHANGED
@@ -8654,58 +8654,6 @@ module.exports = CreateHeading;
8654
8654
 
8655
8655
  /***/ }),
8656
8656
 
8657
- /***/ 9596:
8658
- /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
8659
-
8660
- var _extends = __webpack_require__(7154);
8661
- var _objectWithoutProperties = __webpack_require__(6479);
8662
- var _excluded = ["alt", "onScroll", "opened"];
8663
- /* eslint-disable jsx-a11y/no-autofocus, jsx-a11y/no-noninteractive-tabindex, react/jsx-props-no-spreading */
8664
-
8665
- var React = __webpack_require__(4466);
8666
-
8667
- /**
8668
- * A very simple, CSS-driven lightbox.
8669
- * @todo currently, a new <Lightbox> instance is rendered for
8670
- * each individual image! We should refactor to this to
8671
- * use a single React portal component with public APIs.
8672
- */
8673
- // eslint-disable-next-line react/prop-types
8674
- var Lightbox = function Lightbox(_ref, ref) {
8675
- var alt = _ref.alt,
8676
- onScroll = _ref.onScroll,
8677
- opened = _ref.opened,
8678
- attr = _objectWithoutProperties(_ref, _excluded);
8679
- return /*#__PURE__*/React.createElement("span", {
8680
- ref: ref,
8681
- autoFocus: true,
8682
- className: "lightbox",
8683
- onScrollCapture: onScroll,
8684
- open: opened,
8685
- role: "dialog",
8686
- tabIndex: 0
8687
- }, /*#__PURE__*/React.createElement("span", {
8688
- className: "lightbox-inner"
8689
- }, /*#__PURE__*/React.createElement("img", _extends({}, attr, {
8690
- alt: alt,
8691
- className: "lightbox-img",
8692
- loading: "lazy",
8693
- title: "Click to close..."
8694
- }))));
8695
- };
8696
-
8697
- // forwardRef render functions throws a warning with propTypes/defaultProps
8698
- /* Lightbox.propTypes = {
8699
- alt: PropTypes.string,
8700
- close: PropTypes.func,
8701
- opened: PropTypes.bool,
8702
- src: PropTypes.string,
8703
- }; */
8704
-
8705
- module.exports = React.forwardRef(Lightbox);
8706
-
8707
- /***/ }),
8708
-
8709
8657
  /***/ 9167:
8710
8658
  /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
8711
8659
 
@@ -8722,7 +8670,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
8722
8670
 
8723
8671
  var PropTypes = __webpack_require__(5697);
8724
8672
  var React = __webpack_require__(4466);
8725
- var Lightbox = __webpack_require__(9596);
8726
8673
  var Image = /*#__PURE__*/function (_React$Component) {
8727
8674
  "use strict";
8728
8675
 
@@ -8735,35 +8682,20 @@ var Image = /*#__PURE__*/function (_React$Component) {
8735
8682
  _this.state = {
8736
8683
  lightbox: false
8737
8684
  };
8738
- _this.lightbox = React.createRef();
8739
8685
  _this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
8740
8686
  _this.handleKey = _this.handleKey.bind(_assertThisInitialized(_this));
8741
8687
  _this.isEmoji = props.className === 'emoji';
8742
8688
  return _this;
8743
8689
  }
8744
8690
  _createClass(Image, [{
8745
- key: "componentDidMount",
8746
- value: function componentDidMount() {
8747
- this.lightboxSetup();
8748
- }
8749
- }, {
8750
8691
  key: "toggle",
8751
8692
  value: function toggle(toState) {
8752
8693
  if (this.props.className === 'emoji') return;
8753
8694
  if (typeof toState === 'undefined') toState = !this.state.lightbox;
8754
- if (toState) this.lightboxSetup();
8755
8695
  this.setState({
8756
8696
  lightbox: toState
8757
8697
  });
8758
8698
  }
8759
- }, {
8760
- key: "lightboxSetup",
8761
- value: function lightboxSetup() {
8762
- var $el = this.lightbox.current;
8763
- if ($el) setTimeout(function () {
8764
- $el.scrollTop = ($el.scrollHeight - $el.offsetHeight) / 2;
8765
- }, 0);
8766
- }
8767
8699
  }, {
8768
8700
  key: "handleKey",
8769
8701
  value: function handleKey(e) {
@@ -8801,24 +8733,19 @@ var Image = /*#__PURE__*/function (_React$Component) {
8801
8733
  }
8802
8734
  return /*#__PURE__*/React.createElement("span", {
8803
8735
  "aria-label": alt,
8804
- className: "img",
8736
+ className: "img lightbox ".concat(this.state.lightbox ? 'open' : 'closed'),
8805
8737
  onClick: function onClick() {
8806
8738
  return _this2.toggle();
8807
8739
  },
8808
8740
  onKeyDown: this.handleKey,
8809
8741
  role: 'button',
8810
8742
  tabIndex: 0
8743
+ }, /*#__PURE__*/React.createElement("span", {
8744
+ className: "lightbox-inner"
8811
8745
  }, /*#__PURE__*/React.createElement("img", _extends({}, props, {
8812
8746
  alt: alt,
8813
8747
  loading: lazy ? 'lazy' : ''
8814
- })), /*#__PURE__*/React.createElement(Lightbox, _extends({
8815
- ref: this.lightbox
8816
- }, props, {
8817
- onScroll: function onScroll() {
8818
- return _this2.toggle(false);
8819
- },
8820
- opened: this.state.lightbox
8821
- })));
8748
+ }))));
8822
8749
  }
8823
8750
  }]);
8824
8751
  return Image;
@@ -24862,11 +24789,14 @@ var _require = __webpack_require__(7589),
24862
24789
  imgSizeByWidth = _require.imgSizeByWidth;
24863
24790
  var compileImage = function compileImage(image) {
24864
24791
  var _ref = image.data.hProperties || {},
24792
+ align = _ref.align,
24865
24793
  className = _ref.className,
24866
24794
  width = _ref.width;
24867
- var img = _objectSpread(_objectSpread({
24795
+ var img = _objectSpread(_objectSpread(_objectSpread({
24868
24796
  image: [image.url, image.title, image.alt]
24869
- }, width && {
24797
+ }, align && {
24798
+ align: align
24799
+ }), width && {
24870
24800
  sizing: imgSizeByWidth[width]
24871
24801
  }), className === 'border' && {
24872
24802
  border: true
@@ -24952,9 +24882,10 @@ module.exports = function ImageCompiler() {
24952
24882
 
24953
24883
  // Use magic block instead of markdown when there are certain defined properties we can't store in markdown
24954
24884
  var _ref = ((_node$data2 = node.data) === null || _node$data2 === void 0 ? void 0 : _node$data2.hProperties) || {},
24885
+ align = _ref.align,
24955
24886
  className = _ref.className,
24956
24887
  width = _ref.width;
24957
- var useMagicBlock = Boolean(width) || (className === null || className === void 0 ? void 0 : className.length);
24888
+ var useMagicBlock = Boolean(width) || (className === null || className === void 0 ? void 0 : className.length) || Boolean(align);
24958
24889
  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
24959
24890
  args[_key - 1] = arguments[_key];
24960
24891
  }
@@ -25852,7 +25783,9 @@ function tokenize(_ref) {
25852
25783
  title: title,
25853
25784
  alt: alt || ('caption' in img ? img.caption : ''),
25854
25785
  data: {
25855
- hProperties: _objectSpread({
25786
+ hProperties: _objectSpread(_objectSpread({}, img.align && {
25787
+ align: img.align
25788
+ }), {}, {
25856
25789
  className: img.border ? 'border' : ''
25857
25790
  }, img.sizing && {
25858
25791
  width: imgWidthBySize[img.sizing]
@@ -26819,7 +26752,7 @@ var createSchema = function createSchema() {
26819
26752
  }
26820
26753
  schema.tagNames.push('rdme-pin');
26821
26754
  schema.tagNames.push('rdme-embed');
26822
- schema.attributes['rdme-embed'] = ['url', 'provider', 'html', 'title', 'href', 'iframe', 'width', 'height', 'image', 'favicon'];
26755
+ schema.attributes['rdme-embed'] = ['url', 'provider', 'html', 'title', 'href', 'iframe', 'width', 'height', 'image', 'favicon', 'align'];
26823
26756
  schema.attributes.a = ['href', 'title', 'class', 'className', 'download'];
26824
26757
  schema.tagNames.push('figure');
26825
26758
  schema.tagNames.push('figcaption');
package/dist/main.node.js CHANGED
@@ -8654,58 +8654,6 @@ module.exports = CreateHeading;
8654
8654
 
8655
8655
  /***/ }),
8656
8656
 
8657
- /***/ 9596:
8658
- /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
8659
-
8660
- var _extends = __webpack_require__(7154);
8661
- var _objectWithoutProperties = __webpack_require__(6479);
8662
- var _excluded = ["alt", "onScroll", "opened"];
8663
- /* eslint-disable jsx-a11y/no-autofocus, jsx-a11y/no-noninteractive-tabindex, react/jsx-props-no-spreading */
8664
-
8665
- var React = __webpack_require__(4466);
8666
-
8667
- /**
8668
- * A very simple, CSS-driven lightbox.
8669
- * @todo currently, a new <Lightbox> instance is rendered for
8670
- * each individual image! We should refactor to this to
8671
- * use a single React portal component with public APIs.
8672
- */
8673
- // eslint-disable-next-line react/prop-types
8674
- var Lightbox = function Lightbox(_ref, ref) {
8675
- var alt = _ref.alt,
8676
- onScroll = _ref.onScroll,
8677
- opened = _ref.opened,
8678
- attr = _objectWithoutProperties(_ref, _excluded);
8679
- return /*#__PURE__*/React.createElement("span", {
8680
- ref: ref,
8681
- autoFocus: true,
8682
- className: "lightbox",
8683
- onScrollCapture: onScroll,
8684
- open: opened,
8685
- role: "dialog",
8686
- tabIndex: 0
8687
- }, /*#__PURE__*/React.createElement("span", {
8688
- className: "lightbox-inner"
8689
- }, /*#__PURE__*/React.createElement("img", _extends({}, attr, {
8690
- alt: alt,
8691
- className: "lightbox-img",
8692
- loading: "lazy",
8693
- title: "Click to close..."
8694
- }))));
8695
- };
8696
-
8697
- // forwardRef render functions throws a warning with propTypes/defaultProps
8698
- /* Lightbox.propTypes = {
8699
- alt: PropTypes.string,
8700
- close: PropTypes.func,
8701
- opened: PropTypes.bool,
8702
- src: PropTypes.string,
8703
- }; */
8704
-
8705
- module.exports = React.forwardRef(Lightbox);
8706
-
8707
- /***/ }),
8708
-
8709
8657
  /***/ 9167:
8710
8658
  /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
8711
8659
 
@@ -8722,7 +8670,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
8722
8670
 
8723
8671
  var PropTypes = __webpack_require__(5697);
8724
8672
  var React = __webpack_require__(4466);
8725
- var Lightbox = __webpack_require__(9596);
8726
8673
  var Image = /*#__PURE__*/function (_React$Component) {
8727
8674
  "use strict";
8728
8675
 
@@ -8735,35 +8682,20 @@ var Image = /*#__PURE__*/function (_React$Component) {
8735
8682
  _this.state = {
8736
8683
  lightbox: false
8737
8684
  };
8738
- _this.lightbox = React.createRef();
8739
8685
  _this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
8740
8686
  _this.handleKey = _this.handleKey.bind(_assertThisInitialized(_this));
8741
8687
  _this.isEmoji = props.className === 'emoji';
8742
8688
  return _this;
8743
8689
  }
8744
8690
  _createClass(Image, [{
8745
- key: "componentDidMount",
8746
- value: function componentDidMount() {
8747
- this.lightboxSetup();
8748
- }
8749
- }, {
8750
8691
  key: "toggle",
8751
8692
  value: function toggle(toState) {
8752
8693
  if (this.props.className === 'emoji') return;
8753
8694
  if (typeof toState === 'undefined') toState = !this.state.lightbox;
8754
- if (toState) this.lightboxSetup();
8755
8695
  this.setState({
8756
8696
  lightbox: toState
8757
8697
  });
8758
8698
  }
8759
- }, {
8760
- key: "lightboxSetup",
8761
- value: function lightboxSetup() {
8762
- var $el = this.lightbox.current;
8763
- if ($el) setTimeout(function () {
8764
- $el.scrollTop = ($el.scrollHeight - $el.offsetHeight) / 2;
8765
- }, 0);
8766
- }
8767
8699
  }, {
8768
8700
  key: "handleKey",
8769
8701
  value: function handleKey(e) {
@@ -8801,24 +8733,19 @@ var Image = /*#__PURE__*/function (_React$Component) {
8801
8733
  }
8802
8734
  return /*#__PURE__*/React.createElement("span", {
8803
8735
  "aria-label": alt,
8804
- className: "img",
8736
+ className: "img lightbox ".concat(this.state.lightbox ? 'open' : 'closed'),
8805
8737
  onClick: function onClick() {
8806
8738
  return _this2.toggle();
8807
8739
  },
8808
8740
  onKeyDown: this.handleKey,
8809
8741
  role: 'button',
8810
8742
  tabIndex: 0
8743
+ }, /*#__PURE__*/React.createElement("span", {
8744
+ className: "lightbox-inner"
8811
8745
  }, /*#__PURE__*/React.createElement("img", _extends({}, props, {
8812
8746
  alt: alt,
8813
8747
  loading: lazy ? 'lazy' : ''
8814
- })), /*#__PURE__*/React.createElement(Lightbox, _extends({
8815
- ref: this.lightbox
8816
- }, props, {
8817
- onScroll: function onScroll() {
8818
- return _this2.toggle(false);
8819
- },
8820
- opened: this.state.lightbox
8821
- })));
8748
+ }))));
8822
8749
  }
8823
8750
  }]);
8824
8751
  return Image;
@@ -9663,11 +9590,14 @@ var _require = __webpack_require__(7589),
9663
9590
  imgSizeByWidth = _require.imgSizeByWidth;
9664
9591
  var compileImage = function compileImage(image) {
9665
9592
  var _ref = image.data.hProperties || {},
9593
+ align = _ref.align,
9666
9594
  className = _ref.className,
9667
9595
  width = _ref.width;
9668
- var img = _objectSpread(_objectSpread({
9596
+ var img = _objectSpread(_objectSpread(_objectSpread({
9669
9597
  image: [image.url, image.title, image.alt]
9670
- }, width && {
9598
+ }, align && {
9599
+ align: align
9600
+ }), width && {
9671
9601
  sizing: imgSizeByWidth[width]
9672
9602
  }), className === 'border' && {
9673
9603
  border: true
@@ -9753,9 +9683,10 @@ module.exports = function ImageCompiler() {
9753
9683
 
9754
9684
  // Use magic block instead of markdown when there are certain defined properties we can't store in markdown
9755
9685
  var _ref = ((_node$data2 = node.data) === null || _node$data2 === void 0 ? void 0 : _node$data2.hProperties) || {},
9686
+ align = _ref.align,
9756
9687
  className = _ref.className,
9757
9688
  width = _ref.width;
9758
- var useMagicBlock = Boolean(width) || (className === null || className === void 0 ? void 0 : className.length);
9689
+ var useMagicBlock = Boolean(width) || (className === null || className === void 0 ? void 0 : className.length) || Boolean(align);
9759
9690
  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
9760
9691
  args[_key - 1] = arguments[_key];
9761
9692
  }
@@ -10619,7 +10550,9 @@ function tokenize(_ref) {
10619
10550
  title: title,
10620
10551
  alt: alt || ('caption' in img ? img.caption : ''),
10621
10552
  data: {
10622
- hProperties: _objectSpread({
10553
+ hProperties: _objectSpread(_objectSpread({}, img.align && {
10554
+ align: img.align
10555
+ }), {}, {
10623
10556
  className: img.border ? 'border' : ''
10624
10557
  }, img.sizing && {
10625
10558
  width: imgWidthBySize[img.sizing]
@@ -11586,7 +11519,7 @@ var createSchema = function createSchema() {
11586
11519
  }
11587
11520
  schema.tagNames.push('rdme-pin');
11588
11521
  schema.tagNames.push('rdme-embed');
11589
- schema.attributes['rdme-embed'] = ['url', 'provider', 'html', 'title', 'href', 'iframe', 'width', 'height', 'image', 'favicon'];
11522
+ schema.attributes['rdme-embed'] = ['url', 'provider', 'html', 'title', 'href', 'iframe', 'width', 'height', 'image', 'favicon', 'align'];
11590
11523
  schema.attributes.a = ['href', 'title', 'class', 'className', 'download'];
11591
11524
  schema.tagNames.push('figure');
11592
11525
  schema.tagNames.push('figcaption');
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@readme/markdown",
3
3
  "description": "ReadMe's React-based Markdown parser",
4
4
  "author": "Rafe Goldberg <rafe@readme.io>",
5
- "version": "6.59.1",
5
+ "version": "6.60.1",
6
6
  "main": "dist/main.node.js",
7
7
  "browser": "dist/main.js",
8
8
  "files": [
package/components/Image/Lightbox.jsx DELETED
@@ -1,38 +0,0 @@
1
- /* eslint-disable jsx-a11y/no-autofocus, jsx-a11y/no-noninteractive-tabindex, react/jsx-props-no-spreading */
2
-
3
- const React = require('react');
4
-
5
- /**
6
- * A very simple, CSS-driven lightbox.
7
- * @todo currently, a new <Lightbox> instance is rendered for
8
- * each individual image! We should refactor to this to
9
- * use a single React portal component with public APIs.
10
- */
11
- // eslint-disable-next-line react/prop-types
12
- const Lightbox = ({ alt, onScroll, opened, ...attr }, ref) => {
13
- return (
14
- <span
15
- ref={ref}
16
- autoFocus={true}
17
- className="lightbox"
18
- onScrollCapture={onScroll}
19
- open={opened}
20
- role="dialog"
21
- tabIndex={0}
22
- >
23
- <span className="lightbox-inner">
24
- <img {...attr} alt={alt} className="lightbox-img" loading="lazy" title="Click to close..." />
25
- </span>
26
- </span>
27
- );
28
- };
29
-
30
- // forwardRef render functions throws a warning with propTypes/defaultProps
31
- /* Lightbox.propTypes = {
32
- alt: PropTypes.string,
33
- close: PropTypes.func,
34
- opened: PropTypes.bool,
35
- src: PropTypes.string,
36
- }; */
37
-
38
- module.exports = React.forwardRef(Lightbox);